*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    color: var(--text);
    background: var(--off-white);
    overflow-x: hidden;
  }
  h1,h2,h3,h4 { font-family: 'Montserrat', sans-serif; letter-spacing: 0.02em; }
  p { line-height: 1.8; }

  /* ── NAV ── */

  /* ── HERO ── */
  .hero {
    min-height: 88vh;
    background:
      linear-gradient(180deg, rgba(245,245,240,0) 72%, var(--off-white) 100%),
      linear-gradient(90deg, rgba(0,80,76,0.95) 0%, rgba(0,122,118,0.82) 34%, rgba(0,164,159,0.36) 68%, rgba(0,80,76,0.08) 100%),
      url('/assets/hero-amdk-bsi.png') center right / cover no-repeat;
    display: grid;
    grid-template-columns: minmax(0, 720px) 1fr;
    align-items: center;
    padding: 120px 80px 132px;
    position: relative;
    overflow: hidden;
  }
  .hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 220px;
    background:
      linear-gradient(0deg, var(--off-white) 0%, rgba(245,245,240,0.9) 30%, rgba(245,245,240,0.35) 68%, rgba(245,245,240,0) 100%);
    pointer-events: none;
  }
  .hero-text { position: relative; z-index: 2; }
  .hero-badge {
    display: inline-block; background: var(--gold); color: var(--off-white);
    font-family: 'Montserrat', sans-serif; font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.15em; text-transform: uppercase; padding: 6px 20px;
    margin-bottom: 28px;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
  }
  .hero h1 {
    font-size: clamp(3rem, 5vw, 5.5rem); line-height: 1.0;
    color: var(--white); text-transform: uppercase; margin-bottom: 16px;
  }
  .hero h1 .gold { color: var(--gold); }
  .hero-subtitle {
    font-family: 'Montserrat', sans-serif; font-size: clamp(1rem,1.8vw,1.4rem);
    color: #b8edf7; text-transform: uppercase;
    letter-spacing: 0.06em; margin-bottom: 32px; font-weight: 700;
  }
  .hero-desc {
    font-size: 1rem; color: rgba(255,255,255,0.92);
    max-width: 560px; line-height: 1.8; margin-bottom: 34px;
    font-weight: 500;
  }
  .hero-parties { display: flex; gap: 48px; margin-top: 12px; }
  .party-label {
    font-size: 0.7rem; color: rgba(255,255,255,0.65);
    font-family: 'Montserrat', sans-serif; letter-spacing: 0.1em;
    text-transform: uppercase; margin-bottom: 6px;
  }
  .party-name { font-family: 'Montserrat', sans-serif; font-size: 0.95rem; font-weight: 600; color: var(--white); }

  /* hero water image */
  .hero-visual {
    display: none;
  }
  .water-img-wrap {
    position: relative; width: 420px; height: 460px;
    display: flex; align-items: center; justify-content: center;
  }
  .water-img-wrap img {
    width: 100%; height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 40px rgba(42,138,173,0.55))
            drop-shadow(0 0 80px rgba(26,109,142,0.3));
    animation: waterFloat 5s ease-in-out infinite;
  }
  @keyframes waterFloat {
    0%,100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 40px rgba(42,138,173,0.55)) drop-shadow(0 0 80px rgba(26,109,142,0.3)); }
    50%      { transform: translateY(-18px) scale(1.03); filter: drop-shadow(0 0 60px rgba(42,138,173,0.75)) drop-shadow(0 0 100px rgba(26,109,142,0.45)); }
  }
  /* decorative ring behind water image */
  .water-ring {
    position: absolute; border-radius: 50%;
    border: 1px solid rgba(240,180,41,0.18);
    animation: ringPulse 3.5s ease-out infinite;
  }
  .water-ring:nth-child(1){ width:380px; height:380px; animation-delay:0s; }
  .water-ring:nth-child(2){ width:460px; height:460px; animation-delay:1.2s; }
  @keyframes ringPulse {
    0%   { opacity:.5; transform: scale(0.95); }
    100% { opacity:0;  transform: scale(1.1); }
  }

  /* ── SHARED SECTION STYLES ── */
  section { padding: 96px 80px; }
  .section-tag {
    display: inline-block; font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--teal);
    border-left: 3px solid var(--gold); padding-left: 12px; margin-bottom: 20px;
  }
  .section-title { font-size: clamp(2rem,3.5vw,3rem); text-transform: uppercase; line-height: 1.1; margin-bottom: 32px; }

  /* ── LATAR BELAKANG ── */
  #latar {
    background: var(--white); display: grid;
    grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
  }
  #latar .section-title { color: var(--navy); }
  #latar p { color: #3d5060; margin-bottom: 20px; }
  #latar p strong { color: var(--navy); font-weight: 600; }
  .visual-col { display: flex; justify-content: center; }
  .geo-stack { width: 320px; height: 360px; position: relative; }
  .geo-rect { position: absolute; border-radius: 4px; }
  .geo-rect.r1 { width:260px;height:300px;top:0;left:0; background:linear-gradient(145deg,var(--teal),var(--navy)); }
  .geo-rect.r2 { width:200px;height:240px;bottom:0;right:0; background:var(--gold);opacity:.85; }
  .geo-rect.r3 {
    width:160px;height:180px;top:60px;left:80px;
    background:rgba(255,255,255,0.12); border:2px solid rgba(255,255,255,.4);
    backdrop-filter:blur(4px); display:flex;align-items:center;justify-content:center;
  }
  .geo-rect.r3 span { font-family:'Montserrat',sans-serif;font-size:1.1rem;font-weight:700;color:var(--white);text-align:center;line-height:1.4; }

  /* ── TUJUAN ── */
  #tujuan { background:linear-gradient(135deg,var(--navy) 0%,#009490 100%); color:var(--white); }
  #tujuan .section-tag { color:var(--gold); }
  #tujuan .section-title { color:var(--white); }
  .tujuan-grid { display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:48px; }
  .tujuan-card {
    background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12);
    border-top:3px solid var(--gold); padding:36px 32px; border-radius:2px; transition:background .3s;
  }
  .tujuan-card:hover { background:rgba(255,255,255,0.11); }
  .tujuan-card h3 { font-size:1.05rem;text-transform:uppercase;color:var(--gold);margin-bottom:12px;display:flex;align-items:center;gap:10px; }
  .tujuan-card p { font-size:0.9rem;color:rgba(255,255,255,0.88);line-height:1.8; }

  /* ── SVG ICON UTIL ── */
  .icon-svg { width:28px;height:28px;flex-shrink:0; }
  .icon-sm  { width:22px;height:22px;flex-shrink:0; }

  /* ── TAHAPAN ── */
  #tahapan { background:var(--off-white); }
  #tahapan .section-title { color:var(--navy); }
  .steps-grid, .steps-row2 {
    display:grid;grid-template-columns:repeat(4,1fr);gap:0;
    margin-top:56px;position:relative;
  }
  .steps-row2 { margin-top:40px; }
  .steps-grid::before, .steps-row2::before {
    content:'';position:absolute;top:48px;left:12%;right:12%;
    height:2px;z-index:0;
  }
  .steps-grid::before { background:linear-gradient(90deg,var(--gold),var(--teal),var(--gold)); }
  .steps-row2::before { background:linear-gradient(90deg,var(--teal),var(--gold),var(--teal)); }
  .step-item { text-align:center;padding:0 16px;position:relative;z-index:1; }
  .step-num {
    width:96px;height:96px;margin:0 auto 24px;
    background:var(--white);border:3px solid var(--gold);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-family:'Montserrat',sans-serif;font-size:1.8rem;font-weight:700;color:var(--navy);
    box-shadow:0 4px 24px rgba(0,0,0,0.08);
  }
  .step-item:nth-child(even) .step-num { background:var(--navy);color:var(--gold);border-color:var(--navy); }
  .step-name { font-family:'Montserrat',sans-serif;font-size:0.9rem;text-transform:uppercase;font-weight:600;color:var(--navy);margin-bottom:10px; }
  .step-desc { font-size:0.81rem;color:#3d5a6e;line-height:1.65; }

  /* ── PERIZINAN ── */
  #perizinan { background:var(--white); }
  #perizinan .section-title { color:var(--navy); }
  .izin-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px; }
  .izin-item {
    display:flex;align-items:flex-start;gap:14px;
    padding:18px 20px;background:var(--off-white);
    border-left:4px solid var(--teal);border-radius:2px;
  }
  .izin-num {
    flex-shrink:0;width:30px;height:30px;background:var(--navy);color:var(--gold);
    border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-family:'Montserrat',sans-serif;font-size:0.78rem;font-weight:700;
  }
  .izin-item p { font-size:0.82rem;color:#3d5060;line-height:1.55; }

  /* ── MESIN ── */
  #mesin { background:linear-gradient(160deg,#005550 0%,var(--navy) 60%,#009490 100%); color:var(--white); }
  #mesin .section-tag { color:var(--gold); }
  #mesin .section-title { color:var(--white); }
  .mesin-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px; }
  .mesin-card {
    background:rgba(255,255,255,0.06);border:1px solid rgba(240,180,41,0.22);
    border-radius:4px;overflow:hidden;
    transition:transform .3s, background .3s;
  }
  .mesin-card:hover { transform:translateY(-6px);background:rgba(255,255,255,0.10); }
  .mesin-img {
    width:100%;height:200px;overflow:hidden;
    background:rgba(255,255,255,0.04);
    display:flex;align-items:center;justify-content:center;
    border-bottom:1px solid rgba(240,180,41,0.18);
  }
  .mesin-img img { width:100%;height:100%;object-fit:contain;padding:16px; }
  .mesin-body { padding:24px; }
  .mesin-card h3 {
    font-size:0.95rem;text-transform:uppercase;color:var(--gold);
    margin-bottom:16px;border-bottom:1px solid rgba(240,180,41,0.2);
    padding-bottom:10px;display:flex;align-items:center;gap:8px;
  }
  .spec-row {
    display:flex;justify-content:space-between;
    font-size:0.79rem;padding:5px 0;border-bottom:1px solid rgba(255,255,255,0.05);
  }
  .spec-row .key { color:rgba(255,255,255,0.72); }
  .spec-row .val { color:var(--white);font-weight:600;font-family:'Montserrat',sans-serif;font-size:0.84rem; }

  /* WTP */
  .wtp-section { margin-top:64px; }
  .wtp-section h3 {
    font-family:'Montserrat',sans-serif;font-size:1.3rem;text-transform:uppercase;color:var(--gold);
    margin-bottom:28px;display:flex;align-items:center;gap:16px;
  }
  .wtp-section h3::after { content:'';flex:1;height:1px;background:rgba(240,180,41,0.2); }
  .wtp-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
  .wtp-card {
    background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);
    border-top:3px solid var(--teal-lt);padding:24px;
  }
  .wtp-cap { font-family:'Montserrat',sans-serif;font-size:1.2rem;color:var(--teal-lt);margin-bottom:6px; }
  .wtp-rec { font-size:0.77rem;color:rgba(255,255,255,0.72);margin-bottom:16px;line-height:1.55; }
  .wtp-specs li {
    font-size:0.77rem;color:rgba(255,255,255,0.88);list-style:none;
    padding:3px 0;border-bottom:1px solid rgba(255,255,255,0.04);
    display:flex;gap:8px;
  }
  .wtp-specs li::before { content:'→';color:var(--gold);flex-shrink:0; }

  /* ── INVESTASI ── */
  #investasi { background:var(--off-white); }
  #investasi .section-title { color:var(--navy); }
  .rab-total {
    background:linear-gradient(135deg,var(--navy),#009490);
    color:var(--white);padding:40px 48px;margin-bottom:40px;
    display:flex;align-items:center;justify-content:space-between;
    border-left:6px solid var(--gold);
  }
  .rab-total-label { font-family:'Montserrat',sans-serif;font-size:1rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,0.82);margin-bottom:8px; }
  .rab-total-amount { font-family:'Montserrat',sans-serif;font-size:clamp(1.8rem,3vw,2.8rem);font-weight:700;color:var(--gold); }
  .rab-note { font-size:0.8rem;color:rgba(255,255,255,0.68);margin-top:6px; }
  .rab-capacity-badge { background:rgba(240,180,41,0.14);border:1px solid var(--gold);padding:12px 24px;text-align:center; }
  .rab-capacity-badge .cap-num { font-family:'Montserrat',sans-serif;font-size:1.8rem;color:var(--gold);font-weight:700; }
  .rab-capacity-badge .cap-label { font-size:0.73rem;color:rgba(255,255,255,0.75); }
  .rab-table-wrap { overflow-x:auto;-webkit-overflow-scrolling:touch; }
  .rab-table { width:100%;border-collapse:collapse;min-width:600px; }
  .rab-table thead th { background:var(--navy);color:var(--white);font-family:'Montserrat',sans-serif;font-size:0.84rem;text-transform:uppercase;letter-spacing:.08em;padding:13px 20px;text-align:left; }
  .rab-table tbody tr { border-bottom:1px solid var(--gray); }
  .rab-table tbody tr:nth-child(even) { background:var(--white); }
  .rab-table tbody td { padding:12px 20px;font-size:0.87rem;color:var(--text); }
  .rab-table td:last-child { text-align:right;font-family:'Montserrat',sans-serif;font-weight:600;color:var(--navy); }
  .rab-table tr.highlight { background:rgba(240,180,41,0.07) !important; }
  .rab-table tr.highlight td:first-child { color:var(--teal);font-weight:600; }

  /* ── KERJASAMA ── */
  #kerjasama { background:var(--white); }
  #kerjasama .section-title { color:var(--navy); }
  .split-layout { display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:48px; }
  .partner-card { padding:36px;border-top:4px solid;position:relative; }
  .partner-card.pesantren { border-color:var(--teal);background:linear-gradient(160deg,#e8faf9,#d0f5f3); }
  .partner-card.yayasan  { border-color:var(--gold);background:linear-gradient(160deg,#fffbef,#fff5d6); }
  .partner-card .pct-badge { position:absolute;top:28px;right:28px;font-family:'Montserrat',sans-serif;font-size:2.4rem;font-weight:700;opacity:.14; }
  .pesantren .pct-badge { color:var(--teal); }
  .yayasan  .pct-badge { color:var(--gold-dk); }
  .partner-card h3 { font-size:1.1rem;text-transform:uppercase;margin-bottom:20px;display:flex;align-items:center;gap:10px; }
  .pesantren h3 { color:var(--teal); }
  .yayasan  h3 { color:var(--gold-dk); }
  .role-list { list-style:none; }
  .role-list li { padding:9px 0;font-size:0.87rem;color:#3d5060;line-height:1.65;border-bottom:1px solid rgba(0,0,0,0.06);display:flex;gap:10px;align-items:flex-start; }
  .role-list li svg { flex-shrink:0;margin-top:3px; }
  .share-visual {
    margin-top:48px;background:linear-gradient(135deg,var(--navy),#009490);
    padding:44px;display:flex;align-items:center;gap:44px;border-left:6px solid var(--gold);
  }
  .donut-wrap { flex-shrink:0;position:relative;width:160px;height:160px; }
  .donut-wrap svg.donut { width:100%;height:100%; }
  .donut-label { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center; }
  .donut-label .big { font-family:'Montserrat',sans-serif;font-size:1.55rem;color:var(--white);font-weight:700; }
  .donut-label .sm { font-size:0.63rem;color:rgba(255,255,255,0.7); }
  .share-legend { display:flex;flex-direction:column;gap:16px; }
  .legend-item { display:flex;align-items:center;gap:14px; }
  .legend-dot { width:14px;height:14px;border-radius:50%;flex-shrink:0; }
  .legend-text .pct { font-family:'Montserrat',sans-serif;font-size:1.35rem;color:var(--white);font-weight:700; }
  .legend-text .entity { font-size:0.78rem;color:rgba(255,255,255,0.78); }
  .share-desc { flex:1;font-size:0.84rem;color:rgba(255,255,255,0.78);line-height:1.85; }

  /* ── WAKAF ── */
  #wakaf { background:linear-gradient(135deg,var(--navy) 0%,#004d49 100%);color:var(--white); }
  #wakaf .section-tag { color:var(--gold); }
  #wakaf .section-title { color:var(--white); }
  #wakaf > .intro { font-size:0.92rem;color:rgba(255,255,255,0.82);max-width:760px;line-height:1.9;margin-bottom:56px; }
  .wakaf-tiers { display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:48px; }
  .wakaf-tier {
    border:1px solid rgba(240,180,41,0.25);padding:28px 20px;text-align:center;
    background:rgba(255,255,255,0.04);transition:all .3s;cursor:default;
  }
  .wakaf-tier:hover { background:rgba(240,180,41,0.1);border-color:var(--gold);transform:translateY(-4px); }
  .tier-amount { font-family:'Montserrat',sans-serif;font-size:1.55rem;font-weight:700;color:var(--gold);margin-bottom:8px; }
  .tier-label { font-size:0.72rem;color:rgba(255,255,255,0.7);text-transform:uppercase;letter-spacing:.1em; }
  .wakaf-status-box { background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-left:4px solid var(--gold);padding:32px 36px; }
  .wakaf-status-box h3 { font-size:1rem;text-transform:uppercase;color:var(--gold);margin-bottom:20px; }
  .status-list { list-style:none;display:flex;flex-direction:column;gap:10px; }
  .status-list li { font-size:0.87rem;color:rgba(255,255,255,0.88);display:flex;gap:12px;line-height:1.65;align-items:flex-start; }
  .status-list li svg { flex-shrink:0;margin-top:3px; }

  /* ══ DONASI SECTION ══ */
  #donasi {
    background: var(--off-white);
  }
  #donasi .section-title { color:var(--navy); }
  .donasi-layout { display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start;margin-top:48px; }

  /* Donasi Card */
  .donasi-card {
    background: var(--white);
    border-top: 3px solid var(--gold);
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    padding: 40px;
  }
  .donasi-card h3 {
    font-size:1.1rem;text-transform:uppercase;color:var(--navy);
    margin-bottom:6px;display:flex;align-items:center;gap:10px;
    letter-spacing: 0.04em;
  }
  .donasi-subtitle {
    font-size:0.82rem;color:#7a99a8;margin-bottom:24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray);
  }

  /* Tier Buttons */
  .tier-select { display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:20px; }
  .tier-btn {
    border: 2px solid var(--gray);
    background: var(--white);
    padding: 13px 10px;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
    border-radius: 6px;
  }
  .tier-btn:hover {
    border-color: var(--gold);
    background: #fffdf5;
  }
  .tier-btn.active {
    border-color: var(--gold);
    background: #fffdf5;
  }
  .tier-btn .t-amt {
    font-family:'Montserrat',sans-serif;
    font-size:1rem;font-weight:700;
    color:var(--navy);display:block;
  }
  .tier-btn .t-lbl {
    font-size:0.65rem;color:#7a99a8;
    text-transform:uppercase;letter-spacing:.08em;
  }
  .tier-btn:hover .t-amt, .tier-btn.active .t-amt { color: var(--gold-dk); }

  /* Custom Input */
  .custom-input-wrap { margin-bottom:20px; }
  .custom-input-wrap label {
    display:block;font-size:0.72rem;color:#7a99a8;text-transform:uppercase;
    letter-spacing:.1em;margin-bottom:8px;font-family:'Montserrat',sans-serif;
  }
  .input-prefix-wrap {
    display:flex;align-items:center;
    border: 2px solid var(--gray);
    background: var(--white);
    border-radius: 6px;
    overflow: hidden;
    transition: border-color .15s;
  }
  .input-prefix-wrap:focus-within {
    border-color: var(--teal);
  }
  .input-prefix {
    background: var(--navy);
    color: var(--gold);
    font-family:'Montserrat',sans-serif;font-size:0.85rem;font-weight:700;
    padding:12px 16px;flex-shrink:0;
  }
  .input-prefix-wrap input {
    border:none;outline:none;padding:12px 16px;font-size:1rem;
    font-family:'Montserrat',sans-serif;color:var(--navy);width:100%;
    background:transparent;
  }
  .lembar-count {
    font-size:0.78rem;color:var(--teal);margin-top:6px;
    font-family:'Montserrat',sans-serif;
  }

  /* Info Fields */
  .donasi-info { margin-bottom:22px; display: flex; flex-direction: column; gap: 14px; }
  .info-row { display:flex;gap:12px;font-size:0.85rem; }
  .info-row .field {
    flex:1;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .info-row label {
    display:block;font-size:0.7rem;color:#7a99a8;
    text-transform:uppercase;letter-spacing:.1em;
    font-family:'Montserrat',sans-serif;
  }
  .info-row input, .info-row select {
    border: none;
    border-bottom: 2px solid var(--gray);
    outline: none;
    font-size: 0.92rem;
    color: var(--navy);
    width: 100%;
    padding: 8px 2px;
    background: transparent;
    transition: border-color .15s;
    font-family: 'Montserrat', sans-serif;
  }
  .info-row input:focus, .info-row select:focus {
    border-bottom-color: var(--teal);
  }
  .info-row input::placeholder { color: #b0bec5; }

  /* Submit Button */
  .btn-donasi {
    width: 100%;
    background: var(--gold);
    color: var(--white);
    border: none;
    padding: 15px 24px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 6px;
    transition: background 0.15s;
  }
  .btn-donasi:hover { background: var(--gold-dk); }
  .btn-donasi:active { opacity: 0.9; }
  .btn-donasi:disabled { opacity: 0.6; cursor: not-allowed; }
  .btn-note {
    font-size: 0.69rem;
    color: #9db3be;
    text-align: center;
    margin-top: 10px;
    line-height: 1.7;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .payment-method-section {
    margin: 20px 0 16px;
  }
  .payment-method-section > label {
    display: block;
    font-size: 0.72rem;
    color: #7a99a8;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 8px;
    font-family: 'Montserrat', sans-serif;
  }
  .payment-method-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .pm-option {
    border: 2px solid var(--gray);
    border-radius: 6px;
    padding: 12px 10px;
    background: var(--white);
    cursor: pointer;
    transition: border-color .15s, background .15s;
  }
  .pm-option.selected {
    border-color: var(--gold);
    background: #fffdf5;
  }
  .pm-option .pm-label {
    display: block;
    font-size: 0.82rem;
    color: var(--navy);
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
  }
  .pm-loading {
    font-size: 0.8rem;
    color: #7a99a8;
    padding: 8px 0;
  }
  .selected-method-fee {
    min-height: 16px;
    margin-top: 8px;
    font-size: 0.74rem;
    color: var(--teal);
  }
  .payment-qr-container {
    margin-top: 16px;
    padding: 16px;
    background: #fff;
    border: 1px dashed #cfe2e4;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .payment-qr-container img {
    max-width: 220px;
    max-height: 220px;
    width: 100%;
    height: auto;
    display: block;
  }
  .payment-qr-container.hidden {
    display: none;
  }
  .anon-toggle {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:0.82rem;
    color:#3d5060;
    margin-top:6px;
  }
  .anon-toggle input[type="checkbox"] {
    width:16px;
    height:16px;
    accent-color: var(--teal);
    cursor: pointer;
  }

  /* Progress Bar & Stats */
  .donasi-progress { }
  .prog-header { display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:16px; }
  .prog-header h3 { font-size:1.05rem;text-transform:uppercase;color:var(--navy); }
  .prog-pct { font-family:'Montserrat',sans-serif;font-size:1.9rem;font-weight:700;color:var(--teal); }
  .prog-bar-bg {
    height: 8px;
    background: var(--gray);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 16px;
  }
  .prog-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--teal), var(--gold));
    border-radius: 4px;
    width: 12%;
    transition: width 1.2s ease;
  }
  .prog-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px; }
  .prog-stat {
    text-align:center;padding:14px 10px;
    background: var(--white);
    border-bottom: 3px solid var(--teal);
  }
  .prog-stat .s-val { font-family:'Montserrat',sans-serif;font-size:1rem;font-weight:700;color:var(--navy); }
  .prog-stat .s-lbl { font-size:0.65rem;color:#7a99a8;text-transform:uppercase;letter-spacing:.08em; }

  /* Recent Wakif */
  .recent-wakif h4 { font-family:'Montserrat',sans-serif;font-size:0.82rem;text-transform:uppercase;color:var(--navy);margin-bottom:12px;display:flex;align-items:center;gap:8px; }
  .wakif-list { display:flex;flex-direction:column;gap:8px; }
  .wakif-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--white);
    border-left: 3px solid var(--gold);
  }
  .wakif-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gold);
  }
  .wakif-name { font-size:0.85rem;font-weight:600;color:var(--navy); }
  .wakif-amount { font-size:0.78rem;color:var(--teal);font-family:'Montserrat',sans-serif;font-weight:600; }
  .wakif-time { font-size:0.68rem;color:#b0bec5;margin-left:auto;white-space:nowrap; }
  .wakif-anon { font-size:0.75rem;color:#aaa;font-style:italic; }

  /* ══ QRIS MODAL ══ */
  .qris-modal {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }
  .qris-modal.hidden { display: none; }
  .qris-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,30,28,0.7);
    backdrop-filter: blur(4px);
  }
  .qris-modal-card {
    position: relative;
    width: min(440px, 95vw);
    max-height: 92vh;
    overflow: auto;
    background: var(--white);
    border: 1px solid var(--gray);
    border-top: 3px solid var(--teal);
    border-radius: 8px;
    padding: 24px 20px 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  }
  .qris-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border: 1px solid var(--gray);
    background: var(--white);
    color: var(--navy);
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
  }
  .qris-close-btn:hover {
    background: var(--navy);
    color: #fff;
  }
  .qris-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
  }
  .qris-image-wrap {
    margin: 12px auto 10px;
    width: 210px;
    height: 210px;
    border: 1px dashed #c5d5dc;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
  }
  .qris-image-wrap img {
    max-width: 195px;
    max-height: 195px;
    width: auto;
    height: auto;
    display: block;
  }
  .qris-status {
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--teal);
    margin-bottom: 8px;
  }
  .qris-invoice {
    font-size: 0.72rem;
    color: #8aa4af;
    text-align: center;
    margin-bottom: 10px;
  }
  .qris-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .qris-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 700;
    border: 2px solid var(--gray);
    color: var(--navy);
    background: var(--white);
    padding: 9px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s;
  }
  .qris-link-btn:hover {
    border-color: var(--teal);
  }
  .qris-link-btn.primary {
    background: var(--navy);
    color: var(--white);
    border-color: var(--navy);
  }
  .qris-link-btn.primary:hover {
    background: #005450;
    border-color: #005450;
  }

  /* ══════════════════════════════════════
     CAROUSEL PROGRAM AKTIF (v2)
  ══════════════════════════════════════ */
  .carousel-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 48px;
  }
  .carousel-track-viewport {
    flex: 1;
    overflow: hidden;
    padding: 10px 4px 20px;
  }
  .carousel-track {
    display: flex;
    gap: 24px;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
  }
  .carousel-track.grid-view {
    flex-wrap: wrap;
    justify-content: center;
    transform: none !important;
  }
  .carousel-nav {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: 2px solid var(--navy);
    background: var(--white);
    color: var(--navy);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
  }
  .carousel-nav:hover {
    background: var(--navy);
    color: var(--white);
  }
  .carousel-nav.prev { margin-right: 16px; }
  .carousel-nav.next { margin-left: 16px; }

  /* ── Program Card ── */
  .program-card {
    flex: 0 0 calc((100% - 48px) / 3);
    min-width: 285px;
    background: var(--white);
    border: 2px solid var(--gray);
    border-top: 4px solid var(--teal);
    border-radius: 2px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.03);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    cursor: default;
  }
  .program-card:hover {
    transform: translateY(-4px);
    border-color: var(--gold);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  }
  .carousel-track.grid-view .program-card {
    flex: 0 0 calc((100% - 48px) / 3);
  }
  .program-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 20px 0;
  }
  .program-card-header h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.4;
    margin: 0;
    flex: 1;
  }
  .badge-usaha {
    display: inline-block;
    flex-shrink: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 8px;
    border-radius: 2px;
  }
  .badge-usaha.amdk {
    background: #e0f2f1;
    color: #00695c;
    border: 1px solid #b2dfdb;
  }
  .badge-usaha.bakery {
    background: #fff8e1;
    color: #f57f17;
    border: 1px solid #ffe082;
  }
  .program-card-image {
    margin: 16px 20px;
    height: 110px;
    border-radius: 2px;
    border: 1px solid var(--gray);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .program-card-body {
    padding: 0 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .program-card .prog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }
  .program-card .prog-pct {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--teal);
  }
  .program-card .prog-bar-bg {
    height: 10px;
    background: var(--gray);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 14px;
  }
  .program-card .prog-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--teal), var(--gold));
    border-radius: 2px;
    transition: width 1.2s ease;
  }
  .program-card-stats {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: #7a99a8;
    margin-bottom: 16px;
    line-height: 1.5;
  }
  .program-card-stats strong {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    color: var(--navy);
    font-weight: 700;
    margin-top: 2px;
  }
  .btn-wakaf-now {
    margin: 0 20px 20px;
    width: calc(100% - 40px);
    background: var(--navy);
    color: var(--white);
    border: none;
    padding: 13px 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 2px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .btn-wakaf-now:hover {
    background: var(--gold);
    color: var(--white);
  }
  .program-card-placeholder {
    padding: 48px 24px;
    text-align: center;
    color: #7a99a8;
    font-size: 0.9rem;
    background: #f8fafb;
    border-radius: 2px;
    width: 100%;
  }

  /* ══════════════════════════════════════
     DONATION MODAL POPUP (v2)
  ══════════════════════════════════════ */
  @keyframes modalIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .donation-modal {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0,30,28,0.65);
    backdrop-filter: blur(4px);
  }
  .donation-modal.hidden { display: none !important; }
  .hidden { display: none !important; }
  .donation-modal-backdrop {
    position: absolute;
    inset: 0;
  }
  .donation-modal-content {
    position: relative;
    z-index: 1;
    width: min(520px, 95vw);
    max-height: 92vh;
    overflow-y: auto;
    background: var(--white);
    border-top: 3px solid var(--gold);
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
    animation: modalIn 0.22s ease-out;
    scrollbar-width: thin;
    scrollbar-color: var(--gray) transparent;
  }
  .donation-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border: 1px solid var(--gray);
    background: var(--white);
    color: var(--navy);
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.15s, color 0.15s;
  }
  .donation-modal-close:hover {
    background: var(--navy);
    color: #fff;
  }
  .va-panel { animation: modalIn 0.2s ease; }

  /* Payment Success Banner */
  .payment-success-banner {
    background: #f0faf4;
    border: 1px solid #a8ddb8;
    border-left: 4px solid #1f8a3f;
    border-radius: 6px;
    padding: 16px 18px;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }
  .payment-success-banner svg { flex-shrink: 0; margin-top: 2px; }
  .payment-success-banner .ps-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a6b30;
    margin-bottom: 2px;
  }
  .payment-success-banner .ps-sub {
    font-size: 0.78rem;
    color: #2d7a45;
    line-height: 1.5;
  }
  /* VA polling status */
  .va-polling-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: #7a99a8;
    margin-top: 8px;
  }
  .va-polling-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--teal);
    animation: pulseDot 1.4s ease-in-out infinite;
  }
  @keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.7); }
  }
  .va-polling-status.success .va-polling-dot {
    background: #1f8a3f;
    animation: none;
  }
  .va-polling-status.success { color: #1a6b30; font-weight: 600; }

  /* ── Btn Secondary ── */
  .btn-secondary {
    background: transparent;
    border: 2px solid var(--navy);
    color: var(--navy);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 12px 28px;
    cursor: pointer;
    border-radius: 2px;
    transition: all 0.2s;
  }
  .btn-secondary:hover {
    background: var(--navy);
    color: #fff;
  }

  /* Responsive & Mobile Viewport Optimization (HP View) */
  @media (max-width: 900px) {
    .program-card { flex: 0 0 calc((100% - 24px) / 2); }
    .carousel-track.grid-view .program-card {
      flex: 0 0 calc((100% - 24px) / 2);
    }
  }
  @media (max-width: 600px) {
    .carousel-container {
      margin-top: 24px;
    }
    .carousel-track-viewport {
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      padding: 10px 16px 20px;
      margin: 0 -16px;
    }
    .carousel-track {
      transform: none !important;
      transition: none !important;
      width: max-content;
      display: flex;
      padding: 0;
      gap: 16px;
    }
    .program-card {
      scroll-snap-align: center;
      flex: 0 0 280px;
      min-width: 280px;
      margin: 0;
      box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    }
    .carousel-track.grid-view .program-card {
      flex: 0 0 100%;
    }
    .carousel-nav {
      display: none !important;
    }
    .donation-modal {
      padding: 8px;
      align-items: flex-end;
    }
    .donation-modal-content {
      max-height: 96vh;
      border-radius: 20px 20px 16px 16px;
    }
    .donasi-card {
      padding: 24px 20px 20px !important;
    }
    .tier-select {
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }
    .tier-btn {
      padding: 12px 8px;
      border-radius: 10px;
    }
    .tier-btn .t-amt {
      font-size: 0.92rem;
    }
    .btn-donasi {
      border-radius: 10px;
      padding: 15px 20px;
    }
    .input-prefix-wrap {
      border-radius: 8px;
    }
  }



  #kontak { background:var(--white);display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:center; }
  #kontak .section-title { color:var(--navy); }
  #kontak p { color:#4a6576;line-height:1.8;margin-bottom:12px; }
  .contact-details { margin-top:36px;display:flex;flex-direction:column;gap:16px; }
  .contact-row { display:flex;align-items:flex-start;gap:18px;padding:18px 22px;background:var(--off-white);border-left:3px solid var(--teal); }
  .contact-row svg { flex-shrink:0;margin-top:2px; }
  .detail-label { font-size:0.68rem;color:#7a99a8;text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px;font-family:'Montserrat',sans-serif; }
  .detail-val { font-size:0.93rem;color:var(--navy);font-weight:600; }
  .cta-box { background:linear-gradient(135deg,var(--navy),#009490);padding:44px 36px;text-align:center;border-top:4px solid var(--gold); }
  .cta-box h3 { font-size:1.4rem;text-transform:uppercase;color:var(--white);margin-bottom:14px; }
  .cta-box p { font-size:0.83rem;color:rgba(255,255,255,0.78);margin-bottom:28px;line-height:1.8; }
  .cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--gold), var(--gold-dk));
    color: var(--white);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 14px 28px;
    text-decoration: none;
    border-radius: 30px;
    box-shadow: 0 4px 14px rgba(248, 174, 57, 0.35);
    transition: all 0.2s ease;
  }
  .cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(248, 174, 57, 0.5);
  }
  .cta-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--navy);
    color: var(--white);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 14px 28px;
    text-decoration: none;
    border-radius: 30px;
    box-shadow: 0 4px 14px rgba(0, 122, 118, 0.25);
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.15);
  }
  .cta-btn-outline:hover {
    transform: translateY(-2px);
    background: var(--teal);
    box-shadow: 0 6px 20px rgba(0, 164, 159, 0.4);
  }

  /* ── FOOTER ── */
  footer {
    background:var(--teal);padding:40px 80px;
    display:flex;align-items:center;justify-content:space-between;
    border-top:3px solid var(--gold);
  }
  .footer-left { display:flex;align-items:center;gap:20px; }
  .footer-logo { height:68px;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:0.92; }
  .footer-logo-fallback { font-family:'Montserrat',sans-serif;font-weight:700;color:var(--white);font-size:1rem; }
  .footer-logo-fallback span { color:var(--gold); }
  footer .brand { font-family:'Montserrat',sans-serif;font-weight:700;color:var(--white);font-size:0.95rem; }
  footer .brand span { color:var(--gold); }
  .footer-divider { width:1px;height:48px;background:rgba(255,255,255,0.25);margin:0 4px; }
  .footer-tagline { font-size:0.75rem;color:rgba(255,255,255,0.75);line-height:1.55; }
  footer p { font-size:0.73rem;color:rgba(255,255,255,0.62); }

  /* ── SCROLL REVEAL ── */
  .reveal { opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease; }
  .reveal.visible { opacity:1;transform:translateY(0); }

  /* ── RESPONSIVE ── */
  @media(max-width:900px){
    nav{padding:0 20px;}
    .hamburger{display:block;}
    .nav-links{
      display:none;flex-direction:column;position:absolute;top:80px;left:0;right:0;
      background:rgba(255,255,255,0.98);padding:20px 24px;gap:16px;
      border-bottom:2px solid var(--gold);
      box-shadow:0 8px 24px rgba(0,0,0,0.08);
    }
    .nav-links.open{display:flex;}
    .hero{
      grid-template-columns:1fr;
      min-height:86vh;
      padding:110px 24px 110px;
      background:
        linear-gradient(180deg, rgba(0,80,76,0.92) 0%, rgba(0,122,118,0.82) 54%, rgba(0,80,76,0.45) 76%, var(--off-white) 100%),
        url('/assets/hero-amdk-bsi.png') center bottom / cover no-repeat;
    }
    .hero-visual{display:none;}
    .program-grid{grid-template-columns:1fr 1fr !important;}
    section,#latar,#kontak,#donasi{padding:64px 24px;}
    #project-amdk{padding:64px 24px 32px !important;}
    #latar,.split-layout,#kontak,.donasi-layout{grid-template-columns:1fr;}
    .tujuan-grid,.mesin-grid,.izin-grid,.wtp-grid,.wakaf-tiers,.tier-select{grid-template-columns:1fr 1fr;}
    .steps-grid,.steps-row2{grid-template-columns:1fr 1fr;}
    .steps-grid::before,.steps-row2::before{display:none;}
    .prog-stats{grid-template-columns:1fr 1fr;}
    footer{flex-direction:column;gap:12px;text-align:center;}
    .share-visual{flex-direction:column;}
    .rab-total{flex-direction:column;gap:20px;text-align:center;}
  }
  @media(max-width:540px){
    .program-grid{grid-template-columns:1fr !important;}
    .tujuan-grid,.mesin-grid,.izin-grid,.wtp-grid,.wakaf-tiers{grid-template-columns:1fr;}
    .hero h1{font-size:clamp(1.7rem, 7vw, 2.2rem); word-wrap: break-word; overflow-wrap: break-word; line-height: 1.15;}
    .hero-badge{font-size:0.6rem; letter-spacing:0.1em; padding:4px 12px; margin-bottom: 20px;}
    .hero-subtitle{font-size:0.85rem; margin-bottom: 20px;}
    .hero-desc{font-size:0.9rem; margin-bottom: 24px;}
    .hero-parties{flex-direction:column !important; gap:12px !important;}
    .hero-parties .cta-btn, .hero-parties .cta-btn-outline { width: 100% !important; text-align: center; }
  }