*, *::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; }
  }

  /* Donor-first home page visual refresh */
  :root {
    --navy:#0b5a45;--teal:#327c60;--teal-lt:#a9c985;--gold:#b98b45;
    --gold-dk:#8f682e;--off-white:#faf9f4;--gray:#e2e7df;--text:#153e35;
    --ink:#153e35;--deep:#083b30;--line:#e2e7df;
  }
  html { scroll-behavior:smooth;scroll-padding-top:100px; }
  body {
    background:var(--off-white);color:var(--ink);
    font-family:'Plus Jakarta Sans',Arial,Helvetica,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4 { font-family:'Plus Jakarta Sans',Arial,Helvetica,sans-serif;letter-spacing:-.045em;text-transform:none; }
  p { line-height:1.8; }
  nav { height:82px;border-bottom:1px solid #e2e7df;background:#faf9f4f2; }
  .nav-brand { color:var(--ink); }
  .nav-links a,.nav-dropdown-toggle { color:#53655c;font-family:inherit;font-size:.78rem;letter-spacing:0;text-transform:none; }
  .nav-links a:hover,.nav-dropdown-toggle:hover { color:var(--navy); }
  .nav-dropdown-menu { border-color:var(--line);border-radius:12px;box-shadow:0 18px 40px #123d3412; }
  .nav-dropdown-menu a:hover { background:#eef4e8; }
  .hamburger span { background:var(--navy); }
  .hero {
    min-height:0;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(36px,7vw,90px);
    align-items:center;padding:132px max(48px,calc((100vw - 1232px) / 2)) 62px;
    background:var(--off-white);overflow:visible;
  }
  .hero::after { display:none; }
  .hero-text { max-width:570px; }
  .hero-eyebrow,.section-tag {
    display:flex;align-items:center;gap:9px;width:max-content;max-width:100%;
    border:0;padding:0;margin:0 0 18px;color:var(--navy);font-size:.68rem;
    font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  }
  .hero-eyebrow::before,.section-tag::before { content:'';width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--gold); }
  .hero h1 {
    color:var(--ink);font-size:clamp(2.9rem,5.1vw,4.35rem);line-height:1.09;
    font-weight:500;letter-spacing:-.065em;text-transform:none;margin:0;
  }
  .hero-serif { display:block;color:var(--navy);font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;letter-spacing:-.055em; }
  .hero-subtitle { color:#596d60;font-size:.9rem;font-weight:600;letter-spacing:0;text-transform:none;margin:20px 0 0; }
  .hero-desc { color:#67756d;max-width:450px;font-size:.87rem;font-weight:400;line-height:1.9;margin:12px 0 25px; }
  .hero-parties { display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:0!important; }
  .cta-btn,.cta-btn-outline {
    min-height:50px;padding:14px 21px;border-radius:10px;font-family:inherit;
    font-size:.78rem;font-weight:700;letter-spacing:0;text-transform:none;box-shadow:none;
  }
  .cta-btn { background:var(--navy);color:#fff; }
  .cta-btn:hover { background:var(--deep);box-shadow:0 8px 20px #123d3418; }
  .cta-btn-outline { background:transparent;color:var(--ink);border:1px solid var(--line); }
  .cta-btn-outline:hover { color:var(--navy);background:#eef4e8;border-color:#b9cbb3; }
  .hero-note { margin-top:16px;color:#67756d;font-size:.69rem; }
  .hero-trust { display:flex;flex-wrap:wrap;gap:18px;border-top:1px solid var(--line);margin-top:28px;padding-top:18px; }
  .hero-trust span { color:#59695f;font-size:.66rem; }
  .hero-trust b { color:var(--navy);margin-right:5px; }
  .hero-visual { display:block;position:relative;min-width:0; }
  .hero-image-frame {
    height:clamp(390px,42vw,535px);position:relative;overflow:hidden;
    border-radius:170px 24px 24px 24px;background:#c8ddd2;
    box-shadow:0 20px 65px #123d3410;
  }
  .hero-image-frame::after { content:'';position:absolute;inset:45% 0 0;background:linear-gradient(180deg,transparent,#073d2c9c);pointer-events:none; }
  .hero-image-frame>img { width:100%;height:100%;object-fit:cover;object-position:center; }
  .hero-image-chip { position:absolute;top:22px;right:20px;z-index:1;padding:10px 14px;border-radius:24px;background:#fffffff2;color:var(--ink);font-size:.65rem;font-weight:700;box-shadow:0 7px 25px #093c2910; }
  .hero-image-caption { position:absolute;left:26px;right:24px;bottom:25px;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;color:#fff; }
  .hero-image-caption strong { font-size:2rem;line-height:1;letter-spacing:-.055em;font-weight:500; }
  .hero-image-caption strong small { font-size:.92rem;font-weight:400;letter-spacing:0; }
  .hero-image-caption>small { max-width:140px;text-align:right;color:#effbf4;font-size:.62rem; }
  .hero-image-sticker { position:absolute;top:42%;right:-25px;z-index:2;width:96px;height:96px;border:5px solid var(--off-white);border-radius:50%;display:grid;place-content:center;text-align:center;background:#ddedbc;color:var(--deep);font-size:.62rem;font-weight:700;line-height:1.4;transform:rotate(8deg); }
  .hero-image-sticker span { color:var(--gold);font-size:1rem; }
  .hero-float-card { position:absolute;left:-28px;bottom:-20px;z-index:2;display:flex;align-items:center;gap:12px;min-width:230px;padding:14px 17px;border-radius:13px;background:#fff;box-shadow:0 14px 45px #163b2f18; }
  .hero-float-card>span { width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#f0f5e7;color:var(--navy);font-size:1.55rem; }
  .hero-float-card small { display:block;color:#67756d;font-size:.59rem; }
  .hero-float-card strong { display:block;color:var(--ink);font-size:.72rem;letter-spacing:-.02em; }
  section:not(.hero) { padding:82px max(48px,calc((100vw - 1232px) / 2)); }
  .section-title { color:var(--ink);font-size:clamp(2rem,3.5vw,2.9rem);line-height:1.12;letter-spacing:-.055em;text-transform:none;margin:0 0 22px; }
  #program { background:linear-gradient(180deg,var(--off-white),#fff 38%)!important; }
  #program .section-title,#latar .section-title,#investasi .section-title,#kerjasama .section-title,#donasi .section-title,#kontak .section-title { color:var(--ink); }
  #tujuan,#mesin,#wakaf { background:var(--deep)!important; }
  #project-amdk { background:linear-gradient(145deg,var(--deep),#0b5a45)!important; }
  #tujuan .section-title,#mesin .section-title,#wakaf .section-title,#project-amdk .section-title { color:#fff; }
  .tujuan-card,.program-grid>div { border-radius:16px!important;box-shadow:0 12px 35px #123d3410!important; }
  .mesin-card,.donasi-card,.partner-card,.rab-total,.share-visual,.cta-box { border-radius:16px; }
  .mesin-card { overflow:hidden; }
  .rab-total { border-left:0;border-radius:16px;background:linear-gradient(135deg,var(--deep),var(--navy)); }
  .share-visual { border-left:0;border-radius:18px;background:linear-gradient(135deg,var(--deep),var(--navy)); }
  .donasi-card { border:1px solid var(--line);border-top:3px solid var(--navy);border-radius:16px;box-shadow:0 16px 45px #123d3410; }
  .btn-donasi,.btn-wakaf-now { background:var(--navy);border-radius:10px;letter-spacing:0;text-transform:none; }
  .btn-donasi:hover,.btn-wakaf-now:hover { background:var(--deep); }
  .program-card { border:1px solid var(--line);border-radius:17px;border-top:3px solid var(--navy);box-shadow:0 10px 30px #123d3408; }
  .program-card:hover { transform:translateY(-4px);border-color:#b9cbb3;box-shadow:0 18px 45px #123d3412; }
  .program-card-image { border-radius:10px; }
  .btn-secondary { border:1px solid var(--line);border-radius:10px;color:var(--ink);font-family:inherit;letter-spacing:0;text-transform:none; }
  .btn-secondary:hover { color:white;background:var(--navy); }
  .qris-modal-card,.donation-modal-content { border-radius:20px;border-top:3px solid var(--navy); }
  body footer[role="contentinfo"] { background:var(--deep);border-top:0;padding:38px max(28px,calc((100vw - 1232px) / 2));font-family:'Plus Jakarta Sans',Arial,Helvetica,sans-serif; }
  .section-tag { color:var(--navy); }
  #tujuan .section-tag,#mesin .section-tag,#wakaf .section-tag,#project-amdk .section-tag { color:#cfe6b5!important; }
  :focus-visible { outline:3px solid #b98b45;outline-offset:3px; }
  .quick-entry { width:min(1232px,calc(100% - 96px));margin:-5px auto 0;position:relative;z-index:4; }
  .quick-donate { display:grid;grid-template-columns:1.05fr 1fr 1fr auto;align-items:center;gap:20px;padding:22px 25px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 65px #123d3410; }
  .quick-label { color:var(--ink);font-size:1rem;font-weight:700;line-height:1.5;letter-spacing:-.03em; }
  .quick-label span { display:block;color:#67756d;font-size:.67rem;font-weight:400;letter-spacing:0; }
  .quick-donate label { display:block;min-width:0; }
  .quick-field-label { display:block;color:#68786e;font-size:.63rem;font-weight:700;margin-bottom:6px; }
  .quick-donate select,.quick-money { height:43px;width:100%;border:0;border-radius:8px;background:#f6f7f2;color:var(--ink);font:inherit;font-size:.7rem; }
  .quick-donate select { padding:0 12px; }
  .quick-money { display:flex;align-items:center; }
  .quick-money>span { padding-left:13px;color:#67756d; }
  .quick-money input { min-width:0;width:100%;height:100%;padding:0 11px;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:.75rem; }
  .quick-donate .btn-donasi { width:auto;min-height:43px;margin:18px 0 0;padding:12px 16px;white-space:nowrap;font-size:.68rem; }
  .quick-note { grid-column:2/-1;margin-top:-12px;color:#778378;font-size:.58rem; }
  .purpose-band { display:flex;align-items:center;justify-content:center;gap:17px;padding:28px 0 0;color:#7c8a7f;font-size:.59rem;letter-spacing:.12em;text-transform:uppercase; }
  .purpose-band i { width:26px;height:1px;background:#d3ddcc; }
  .purpose-band b { color:#4e6657;font-size:.64rem;font-weight:500; }
  .serif { font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;letter-spacing:-.05em; }
  .section-heading { text-align:center;margin-bottom:40px; }
  .section-heading .section-tag { margin-left:auto;margin-right:auto; }
  .section-heading h2,.impact-copy h2,.transparency-copy h2,.story-copy h2,.faq-intro h2,.final-cta-panel h2 { color:var(--ink);font-size:clamp(2rem,3.5vw,2.9rem);font-weight:500;line-height:1.1;letter-spacing:-.06em; }
  .section-heading>p:last-child { max-width:510px;margin:15px auto 0;color:#67756d;font-size:.78rem; }
  #program { padding-top:66px; }
  #program .reveal>p:last-child { color:#67756d!important;font-size:.78rem; }
  .carousel-container { margin-top:28px; }
  .carousel-nav { border:1px solid var(--line);border-radius:50%;color:var(--navy); }
  .carousel-nav:hover { background:var(--navy);border-color:var(--navy); }
  .program-card { border-top:0; }
  .program-card-header { padding:21px 20px 0; }
  .program-card-header h3 { color:var(--ink);font-size:.9rem;letter-spacing:-.03em;text-transform:none; }
  .program-card-image { margin:16px 20px;height:145px;border:0; }
  .program-card-body { padding:0 20px; }
  .program-card .prog-pct { color:var(--navy); }
  .program-card .prog-bar-bg { height:6px;border-radius:20px; }
  .program-card .prog-bar-fill { background:var(--navy);border-radius:20px; }
  .program-card-stats { color:#67756d; }
  .program-card-stats strong { color:var(--ink); }
  .badge-usaha { border-radius:20px;letter-spacing:0; }
  .badge-usaha.amdk { background:#f0f5ea;color:var(--navy);border:0; }
  .badge-usaha.bakery { background:#f8edd9;color:#785620;border:0; }
  .btn-wakaf-now { margin:0 20px 20px;width:calc(100% - 40px);font-size:.68rem; }
  .impact-section { padding:0 48px 82px!important;background:var(--off-white); }
  .impact-panel { max-width:1232px;margin:0 auto;padding:52px 56px;background:var(--deep);border-radius:24px;color:#fff;display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;align-items:center; }
  .impact-copy .section-tag { color:#cfe6b5; }
  .impact-copy h2 { color:#fff;max-width:440px;font-size:clamp(2.2rem,3.8vw,3rem); }
  .impact-copy h2 .serif { display:block;margin-top:7px;color:#d8ecb2; }
  .impact-copy>p:not(.section-tag) { max-width:390px;margin-top:18px;color:#a8c2b2;font-size:.75rem; }
  .impact-symbol { display:flex;align-items:center;gap:12px;margin-top:26px;color:#d8ecb2;font-size:.68rem; }
  .impact-symbol span { font-size:1.7rem; }
  .calculator { padding:25px;background:#ffffff0a;border:1px solid #ffffff20;border-radius:16px; }
  .calculator-label { display:flex;justify-content:space-between;gap:12px;color:#c3d5c7;font-size:.65rem; }
  .calculator-label span { color:#9cb8a6; }
  .calculator-amount { display:flex;align-items:baseline;gap:8px;margin-top:12px;color:#9cb8a6; }
  .calculator-amount>span { font-size:.9rem; }
  .calculator-amount input { width:100%;min-width:0;padding:0;border:0;background:transparent;color:#fff;font:inherit;font-size:1.8rem;letter-spacing:-.05em; }
  .calculator input[type=range] { width:100%;margin:20px 0 8px;accent-color:#d8ecb2; }
  .range-labels { display:flex;justify-content:space-between;color:#a3bdaa;font-size:.58rem; }
  .friend-controls { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 0;border-bottom:1px solid #ffffff18; }
  .friend-controls label { color:#c5d6c9;font-size:.66rem; }
  .friend-controls select { padding:6px 9px;border:1px solid #ffffff22;border-radius:6px;background:#245243;color:#e9f2e2;font:inherit;font-size:.65rem; }
  .calc-total { display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding-top:16px; }
  .calc-total small { display:block;margin-bottom:4px;color:#9fbaa9;font-size:.6rem; }
  .calc-total strong { color:#d8ecb2;font-size:1.35rem;font-weight:500;letter-spacing:-.04em; }
  .calc-total .btn-donasi { width:auto;min-height:40px;padding:10px 13px;font-size:.62rem;white-space:nowrap; }
  .calculator .calc-note { margin-top:14px;color:#a7c0b2;font-size:.58rem; }
  .process-preview { background:#f0f3e9; }
  .section-heading h2 .serif { color:var(--navy); }
  .steps-preview { display:grid;grid-template-columns:repeat(3,1fr);gap:50px;max-width:1110px;margin:0 auto; }
  .steps-preview article { min-width:0; }
  .step-index { display:block;margin-bottom:16px;color:#7f927d;font-size:.59rem;letter-spacing:.12em; }
  .step-icon { display:grid;place-items:center;width:53px;height:53px;margin-bottom:17px;border-radius:50%;background:#fff;border:1px solid #dfe6d4;color:var(--navy);font-size:1.1rem; }
  .steps-preview h3 { color:var(--ink);font-size:1rem;letter-spacing:-.03em; }
  .steps-preview p { margin-top:9px;color:#67756d;font-size:.7rem; }
  .transparency-preview { display:grid;grid-template-columns:.82fr 1.18fr;gap:65px;align-items:center; }
  .transparency-copy h2 .serif,.story-copy h2 .serif,.faq-intro h2 .serif { color:var(--navy); }
  .transparency-copy>p:not(.section-tag) { max-width:410px;margin:19px 0;color:#67756d;font-size:.75rem; }
  .transparency-features { list-style:none;padding:0;margin:20px 0 0; }
  .transparency-features li { display:flex;gap:10px;align-items:center;padding:7px 0;color:#40584a;font-size:.69rem; }
  .transparency-features li span { color:var(--navy);font-weight:700; }
  .text-link { display:inline-flex;align-items:center;gap:8px;margin-top:19px;color:var(--navy);font-size:.7rem;font-weight:700;text-decoration:none; }
  .text-link:hover { text-decoration:underline; }
  .transparency-card { padding:24px 27px;background:#fff;border:1px solid var(--line);border-radius:16px; }
  .transparency-tabs { display:flex;gap:24px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto; }
  .transparency-tab { padding:0 0 12px;border:0;border-bottom:2px solid transparent;background:none;color:#67756d;font:inherit;font-size:.66rem;white-space:nowrap;cursor:pointer; }
  .transparency-tab.active { border-bottom-color:var(--navy);color:var(--navy);font-weight:700; }
  .transparency-panel h3 { margin-bottom:7px;color:var(--ink);font-size:.95rem;letter-spacing:-.03em; }
  .transparency-panel>p { color:#67756d;font-size:.68rem; }
  .info-line { display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid #eef0e9;font-size:.66rem; }
  .info-line span { color:#67756d; }
  .info-line b { color:var(--ink);text-align:right; }
  .transparency-panel .transparency-note { margin-top:16px;padding:11px;border:1px solid #eee4cf;border-radius:8px;background:#fbf7ed;color:#7b653c;font-size:.6rem; }
  .contact-action { display:inline-flex;align-items:center;gap:8px;margin-top:15px;color:var(--navy);font-size:.7rem;font-weight:700; }
  .story-preview { display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;border-top:1px solid var(--line); }
  .story-picture { position:relative;height:320px;overflow:hidden;border-radius:17px;background:#e6d9bd; }
  .story-picture img { width:100%;height:100%;object-fit:cover; }
  .story-tag { position:absolute;left:17px;bottom:17px;padding:7px 11px;border-radius:20px;background:#ffffffed;color:var(--navy);font-size:.6rem;font-weight:700; }
  .story-copy h2 { color:var(--ink);font-size:clamp(2rem,3vw,2.6rem); }
  .story-copy>p:not(.section-tag) { max-width:420px;margin:17px 0;color:#67756d;font-size:.73rem; }
  .faq-preview { background:#f3f4ed;display:grid;grid-template-columns:.8fr 1.2fr;gap:65px; }
  .faq-intro>p:not(.section-tag) { max-width:330px;margin:18px 0;color:#67756d;font-size:.75rem; }
  .faq-list details { padding:17px 0;border-bottom:1px solid #dce3d5; }
  .faq-list details:first-child { padding-top:0; }
  .faq-list summary { display:flex;align-items:center;justify-content:space-between;gap:18px;color:var(--ink);font-size:.75rem;font-weight:700;cursor:pointer;list-style:none; }
  .faq-list summary::-webkit-details-marker { display:none; }
  .faq-list summary::after { content:'+';color:#78916b;font-size:1.2rem;font-weight:400; }
  .faq-list details[open] summary::after { content:'−'; }
  .faq-list details p { padding:12px 24px 0 0;color:#67756d;font-size:.69rem; }
  .final-cta { padding:68px max(48px,calc((100vw - 1232px) / 2)) 58px!important; }
  .final-cta-panel { display:flex;align-items:center;justify-content:space-between;gap:35px;padding:48px 50px;border-radius:20px;background:#d8ecb2; }
  .final-cta-panel h2 { font-size:2.35rem; }
  .final-cta-panel h2 .serif { color:var(--navy); }
  .final-cta-panel p { margin-top:12px;color:#55713f;font-size:.7rem; }
  .final-cta-panel .cta-btn { flex:0 0 auto; }
  .technical-details { margin:0;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line); }
  .technical-details>summary { max-width:1232px;margin:0 auto;padding:21px 0;color:var(--navy);font-size:.76rem;font-weight:700;cursor:pointer; }
  .technical-details[open]>summary { margin-bottom:0; }
  .technical-details>section { border-top:1px solid #edf0e9; }
  .technical-details .reveal { opacity:1;transform:none; }
  @media(max-width:900px) {
    nav { padding:0 24px; }
    nav .nav-donate { margin-left:auto;margin-right:12px; }
    .nav-links { top:82px; }
    .hero { grid-template-columns:1fr 1fr;gap:28px;padding:118px 36px 55px; }
    .hero h1 { font-size:clamp(2.55rem,6vw,3.55rem); }
    .hero-image-frame { height:420px; }
    .hero-image-sticker { right:-15px;width:82px;height:82px;font-size:.55rem; }
    .hero-float-card { left:-12px;min-width:200px; }
    section:not(.hero) { padding:68px 36px; }
    .quick-entry { width:calc(100% - 56px); }
    .quick-donate { grid-template-columns:1fr 1fr 1fr;gap:14px;padding:19px; }
    .quick-label { display:none; }
    .quick-donate .btn-donasi { justify-self:stretch;padding-inline:12px; }
    .quick-note { grid-column:1/-1;margin-top:-8px;text-align:center; }
    .impact-section { padding:0 28px 65px!important; }
    .impact-panel { padding:36px;gap:28px; }
    .transparency-preview,.faq-preview { grid-template-columns:1fr;gap:30px; }
    .story-preview { gap:30px; }
    .steps-preview { gap:30px; }
    .final-cta { padding:55px 36px 45px!important; }
    .technical-details>summary { width:calc(100% - 56px); }
  }
  @media(max-width:600px) {
    html { scroll-padding-top:84px; }
    nav { height:72px;padding:0 18px; }
    nav .nav-brand img { height:42px!important; }
    nav .nav-donate { padding:10px 12px;font-size:.67rem;margin-right:8px; }
    .hamburger { padding:6px; }
    .nav-links { top:72px;gap:0;padding:8px 20px; }
    .nav-links li { width:100%; }
    .nav-links a,.nav-dropdown-toggle { display:block;width:100%;padding:12px 0;text-align:left;font-size:.83rem; }
    .nav-dropdown-menu { position:static;box-shadow:none;margin:4px 0 8px; }
    .hero { grid-template-columns:1fr;gap:28px;padding:108px 20px 43px; }
    .hero h1 { font-size:clamp(2.7rem,11vw,3.7rem); }
    .hero-eyebrow { font-size:.58rem;letter-spacing:.12em; }
    .hero-subtitle { font-size:.78rem;margin-top:17px; }
    .hero-desc { font-size:.77rem;margin:11px 0 20px; }
    .hero-parties { flex-direction:row!important;gap:9px!important; }
    .hero-parties .cta-btn,.hero-parties .cta-btn-outline { width:auto!important;min-height:45px;padding:12px 15px;font-size:.67rem; }
    .hero-trust { gap:10px 14px;margin-top:22px;padding-top:15px; }
    .hero-trust span { font-size:.58rem; }
    .hero-image-frame { height:350px;border-radius:125px 18px 18px 18px; }
    .hero-image-frame>img { object-position:center; }
    .hero-image-chip { top:16px;right:13px;padding:8px 11px;font-size:.57rem; }
    .hero-image-caption { left:19px;right:16px;bottom:22px; }
    .hero-image-caption strong { font-size:1.7rem; }
    .hero-image-caption>small { font-size:.56rem; }
    .hero-image-sticker { top:41%;right:-8px; }
    .hero-float-card { left:6px;bottom:-17px;padding:10px 12px;min-width:0; }
    .hero-float-card strong { font-size:.66rem; }
    section:not(.hero) { padding:54px 20px; }
    .quick-entry { width:calc(100% - 38px);margin-top:0; }
    .quick-donate { grid-template-columns:1fr 1fr;gap:12px;padding:17px;border-radius:14px; }
    .quick-label { display:block;grid-column:1/-1;font-size:.95rem; }
    .quick-label span { display:inline;margin-left:6px;font-size:.6rem; }
    .quick-donate .btn-donasi { grid-column:1/-1;margin:0;min-height:43px; }
    .quick-note { grid-column:1/-1;margin:-7px 0 0;font-size:.56rem; }
    .purpose-band { flex-wrap:wrap;gap:8px;padding-top:23px;font-size:.5rem;letter-spacing:.07em; }
    .purpose-band i { width:12px; }
    .purpose-band b { font-size:.53rem; }
    #program { padding-top:47px; }
    .impact-section { padding:0 19px 52px!important; }
    .impact-panel { grid-template-columns:1fr;padding:27px 21px;gap:25px;border-radius:18px; }
    .impact-copy h2 { font-size:2.3rem; }
    .calculator { padding:19px; }
    .calc-total { flex-direction:row;align-items:flex-end; }
    .calc-total strong { font-size:1.2rem; }
    .calc-total .btn-donasi { width:auto; }
    .steps-preview { grid-template-columns:1fr;gap:24px; }
    .steps-preview article { position:relative;padding-left:68px;min-height:70px; }
    .step-index { margin-bottom:7px;font-size:.53rem; }
    .step-icon { position:absolute;left:0;top:0;width:50px;height:50px;margin:0; }
    .steps-preview h3 { font-size:.9rem; }
    .steps-preview p { font-size:.66rem; }
    .transparency-card { padding:19px 16px;border-radius:14px; }
    .transparency-tabs { gap:20px; }
    .info-line { font-size:.61rem; }
    .story-preview { grid-template-columns:1fr;padding-top:38px;gap:25px; }
    .story-picture { height:280px; }
    .faq-preview { gap:24px; }
    .faq-list summary { font-size:.7rem;line-height:1.7; }
    .faq-list details p { font-size:.64rem; }
    .final-cta { padding:43px 19px 38px!important; }
    .final-cta-panel { display:block;padding:31px 24px;border-radius:17px; }
    .final-cta-panel h2 { font-size:2rem; }
    .final-cta-panel p { max-width:270px; }
    .final-cta-panel .cta-btn { display:flex;margin-top:22px; }
    .technical-details>summary { width:calc(100% - 40px);padding:18px 0;font-size:.69rem; }
    .section-title { font-size:2.1rem; }
    .program-grid { gap:14px!important; }
    #project-amdk { padding:58px 20px 36px!important; }
    #latar,#kontak,#donasi { gap:28px; }
    .footer-left { flex-wrap:wrap;justify-content:center; }
    body footer[role="contentinfo"] { padding:32px 20px; }
  }
  @media(prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    *,*::before,*::after { animation-duration:.01ms!important;transition-duration:.01ms!important; }
  }

  /* Accessible header and campaign layout for the redesigned homepage */
  .payment-ribbon { min-height:30px;display:flex;align-items:center;justify-content:center;gap:9px;padding:6px 16px;background:#0b5a45;color:#eff7e8;text-align:center;font-size:.57rem;font-weight:700;letter-spacing:.08em; }
  .payment-ribbon span { color:#c7df9f; }
  .site-header { position:sticky;top:0;z-index:1000;background:#faf9f4f2;border-bottom:1px solid var(--line);backdrop-filter:blur(16px); }
  .site-header-inner { width:min(1232px,calc(100% - 56px));min-height:78px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:28px; }
  .site-brand { display:flex;align-items:center;gap:10px;flex:0 0 clamp(130px,18vw,210px);color:var(--ink);text-decoration:none; }
  .site-logo { display:block;width:100%;height:auto;max-width:100%;max-height:54px;object-fit:contain;object-position:left center; }
  .site-nav { position:static;z-index:auto;height:auto;padding:0;border:0;background:transparent;backdrop-filter:none;display:flex;align-items:center;justify-content:center;gap:clamp(15px,2.5vw,32px); }
  .site-nav a,.header-contact { color:#53655c;text-decoration:none;font-size:.68rem;font-weight:600;white-space:nowrap; }
  .site-nav a:hover,.header-contact:hover { color:var(--navy); }
  .site-header-actions { display:flex;align-items:center;gap:20px; }
  .header-donate { display:inline-flex;align-items:center;gap:9px;padding:12px 16px;border-radius:9px;background:var(--navy);color:#fff;text-decoration:none;font-size:.66rem;font-weight:700;white-space:nowrap; }
  .header-donate:hover { background:var(--deep); }
  .site-header .hamburger { display:none; }
  .hero { padding-top:76px;padding-bottom:62px; }
  .hero-eyebrow { display:flex;align-items:center;gap:9px;margin:0 0 18px;color:var(--navy);font-size:.66rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase; }
  .hero-eyebrow::before { content:'';width:7px;height:7px;border-radius:50%;background:var(--gold); }
  .hero-note { color:#67756d; }
  .section-head { display:flex;align-items:flex-end;justify-content:space-between;gap:35px; }
  .section-head>p { max-width:405px;margin:0 0 23px;color:#67756d;font-size:.75rem; }
  .section-head .section-title { margin-bottom:0; }
  .program-tools { display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:30px; }
  .filter-group { display:flex;flex-wrap:wrap;gap:8px; }
  .filter-btn { padding:9px 14px;border:1px solid var(--line);border-radius:30px;background:#fff;color:#59695f;font:inherit;font-size:.63rem;font-weight:600;cursor:pointer; }
  .filter-btn:hover,.filter-btn.active { border-color:var(--navy);background:var(--navy);color:#fff; }
  .program-search { display:flex;align-items:center;gap:8px;width:min(280px,100%);height:40px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:#fff;color:#809083; }
  .program-search>span { font-size:1.25rem;line-height:1; }
  .program-search input { min-width:0;width:100%;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:.65rem; }
  .program-search:focus-within { border-color:#78916b;box-shadow:0 0 0 3px #0b5a4518; }
  .carousel-container { display:block;margin-top:13px; }
  .carousel-track-viewport { overflow:visible;padding:6px 0 18px; }
  .carousel-track.grid-view { display:grid;width:100%;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:20px; }
  .carousel-track.grid-view .program-card { width:auto;min-width:0;max-width:none;flex:none; }
  .filter-status { margin-top:3px;color:#778378;font-size:.61rem; }
  .program-card-placeholder { grid-column:1/-1;padding:34px 20px;border:1px dashed #cfd8cb;border-radius:14px;color:#647567;text-align:center;font-size:.72rem; }
  .home-footer { display:block;margin-top:0;border:0;background:#083b30;color:#fff;padding:52px max(28px,calc((100vw - 1232px) / 2)) 18px; }
  .home-footer-grid { display:grid;grid-template-columns:1.35fr .8fr .9fr 1.15fr;gap:42px;padding-bottom:38px; }
  .home-footer-brand .site-logo { width:auto;height:56px;max-width:220px;padding:4px;border-radius:7px;background:#fff; }
  .home-footer-brand>p { max-width:275px;margin-top:19px;color:#b8c9bc;font-size:.66rem; }
  .home-footer-col h2 { margin:4px 0 15px;color:#d8ecb2;font-size:.67rem;letter-spacing:0; }
  .home-footer-col a,.home-footer-col address { display:block;margin:0 0 10px;color:#e0e9e1;font-size:.62rem;font-style:normal;line-height:1.7;text-decoration:none; }
  .home-footer-col a:hover { color:#d8ecb2;text-decoration:underline; }
  .home-footer-bottom { display:flex;justify-content:space-between;gap:20px;padding-top:16px;border-top:1px solid #ffffff20;color:#9db3a3;font-size:.53rem; }
  .help-float { position:fixed;right:23px;bottom:24px;z-index:900;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:#248b5d;color:#fff;text-decoration:none;font-size:1.45rem;box-shadow:0 8px 24px #123d342c; }
  .mobile-cta { display:none; }
  @media(max-width:900px) {
    .site-header-inner { width:calc(100% - 40px);min-height:72px; }
    .site-header-actions { gap:12px;margin-left:auto; }
    .site-header .hamburger { display:block; }
    .site-nav { position:absolute;height:auto;display:none;top:100%;left:0;right:0;align-items:stretch;gap:0;padding:9px 24px 15px;background:#faf9f4;border-bottom:1px solid var(--line);box-shadow:0 12px 24px #123d3410; }
    .site-nav.open { display:flex;flex-direction:column; }
    .site-nav a { padding:12px 0;border-bottom:1px solid #e9ede5; }
    .section-head { align-items:flex-start;flex-direction:column;gap:12px; }
    .section-head>p { margin:0; }
    .carousel-track.grid-view { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .home-footer-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:30px; }
  }
  @media(max-width:600px) {
    body { padding-bottom:72px; }
    .payment-ribbon { min-height:27px;font-size:.49rem; }
    .site-header-inner { width:calc(100% - 34px);min-height:68px;gap:10px; }
    .site-brand { flex-basis:clamp(116px,36vw,145px); }
    .site-logo { max-height:46px; }
    .header-contact { display:none; }
    .header-donate { padding:10px 12px;font-size:.59rem; }
    .site-header .hamburger { padding:5px; }
    .hero { padding-top:54px; }
    .program-tools { align-items:stretch;flex-direction:column;gap:12px;margin-top:24px; }
    .filter-group { gap:6px; }
    .filter-btn { padding:8px 11px;font-size:.58rem; }
    .program-search { width:100%; }
    .carousel-track.grid-view { grid-template-columns:minmax(0,1fr);gap:14px; }
    .home-footer { padding:38px 22px 18px; }
    .home-footer-grid { grid-template-columns:1fr 1fr;gap:25px 18px; }
    .home-footer-brand { grid-column:1/-1; }
    .home-footer-brand>p { max-width:330px; }
    .home-footer-bottom { flex-direction:column;gap:8px;line-height:1.6; }
    .help-float { right:17px;bottom:89px;width:46px;height:46px; }
    .mobile-cta { position:fixed;right:0;bottom:0;left:0;z-index:850;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fff;box-shadow:0 -8px 25px #123d3410; }
    .mobile-cta small,.mobile-cta strong { display:block; }
    .mobile-cta small { color:#748178;font-size:.53rem; }
    .mobile-cta strong { margin-top:3px;color:var(--ink);font-size:.61rem; }
    .mobile-cta .btn-donasi { display:inline-flex;align-items:center;gap:6px;width:auto;min-height:40px;margin:0;padding:10px 12px;font-size:.59rem;text-decoration:none;white-space:nowrap; }
  }

  /* Program cards: readable hierarchy, even rows, and comfortable mobile targets */
  .program-tools { margin-top:26px; }
  .filter-btn { min-height:40px;transition:background .18s,border-color .18s,color .18s; }
  .program-search { min-height:44px; }
  .programs-section .carousel-track.grid-view { grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:18px; }
  .programs-section .program-card { min-width:0;min-height:390px;height:100%;border:1px solid #e2e7df;border-radius:16px;background:#fff;box-shadow:0 8px 26px #153e350a;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
  .programs-section .program-card:hover { transform:translateY(-3px);border-color:#b8cbae;box-shadow:0 16px 34px #153e3515; }
  .program-card-header { min-height:78px;align-items:flex-start;padding:18px 18px 8px;gap:10px; }
  .program-card-header h3 { min-width:0;font-size:.88rem;line-height:1.45;font-weight:700;overflow-wrap:anywhere; }
  .program-card .badge-usaha { max-width:44%;padding:6px 9px;font-size:.53rem;line-height:1.25;text-align:center;white-space:normal; }
  .program-card-image { flex:0 0 150px;height:150px;margin:0 18px 16px;border-radius:11px;background:#f0f4eb; }
  .program-card-image img { display:block;width:100%;height:100%;object-fit:cover; }
  .program-card-body { flex:1;gap:15px;padding:0 18px 16px; }
  .campaign-progress-wrap { min-height:51px; }
  .campaign-progress-label { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;color:#66766b;font-size:.62rem; }
  .campaign-progress-label strong { color:var(--navy);font-size:.78rem; }
  .campaign-progress { height:7px;overflow:hidden;border-radius:99px;background:#edf1e9; }
  .campaign-progress span { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#327c60,#9dbd83);transition:width .5s ease; }
  .campaign-progress-empty { min-height:51px;margin:0;color:#758278;font-size:.64rem;line-height:1.5; }
  .program-card-stats { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:0;padding-top:13px;border-top:1px solid #edf0e9;font-size:.59rem;line-height:1.45; }
  .program-card-stats>div { min-width:0; }
  .program-card-stats>div:last-child { text-align:right; }
  .program-card-stats span { display:block;color:#738075; }
  .program-card-stats strong { display:block;max-width:100%;margin-top:5px;font-size:clamp(.68rem,.9vw,.82rem);font-weight:700;line-height:1.4;overflow-wrap:anywhere; }
  .programs-section .btn-wakaf-now { display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;width:calc(100% - 36px);margin:auto 18px 18px;padding:12px 10px;border-radius:9px;background:var(--navy);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:0;text-decoration:none; }
  .programs-section .btn-wakaf-now:hover { background:var(--deep); }
  .programs-section .btn-wakaf-now:focus-visible { outline-offset:3px; }
  .program-card-placeholder { display:flex;min-height:170px;align-items:center;justify-content:center;flex-direction:column;gap:12px;padding:28px 18px;border:1px dashed #cfd8cb;border-radius:14px;background:#fff;color:#647567;font-size:.72rem;line-height:1.6; }
  .clear-program-filters { min-height:40px;padding:9px 13px;border:1px solid #cfd8cb;border-radius:8px;background:#fff;color:var(--navy);font:inherit;font-size:.65rem;font-weight:700;cursor:pointer; }
  .clear-program-filters:hover { background:#f0f5ea; }
  @media(max-width:900px) {
    .programs-section .carousel-track.grid-view { grid-template-columns:repeat(2,minmax(0,1fr));gap:15px; }
    .programs-section .program-card { min-height:380px; }
    .program-card-header { min-height:76px; }
    .program-card-stats strong { font-size:.78rem; }
  }
  @media(max-width:600px) {
    .program-tools { gap:12px; }
    .filter-group { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:7px; }
    .filter-btn { min-width:0;min-height:42px;padding:8px 6px;font-size:.58rem;line-height:1.25; }
    .program-search { width:100%; }
    .programs-section .carousel-track.grid-view { grid-template-columns:minmax(0,1fr);gap:13px; }
    .programs-section .program-card { min-height:0;border-radius:14px; }
    .program-card-header { min-height:68px;padding:15px 15px 8px;gap:8px; }
    .program-card-header h3 { font-size:.84rem; }
    .program-card .badge-usaha { max-width:42%;font-size:.51rem; }
    .program-card-image { flex-basis:165px;height:165px;margin:0 15px 14px; }
    .program-card-body { gap:13px;padding:0 15px 15px; }
    .campaign-progress-wrap,.campaign-progress-empty { min-height:46px; }
    .program-card-stats { gap:8px;padding-top:11px;font-size:.57rem; }
    .program-card-stats strong { font-size:.74rem; }
    .programs-section .btn-wakaf-now { width:calc(100% - 30px);min-height:48px;margin:0 15px 15px;font-size:.66rem; }
    .filter-status { margin-top:0; }
  }
  @media(max-width:360px) {
    .program-card-header { flex-wrap:wrap; }
    .program-card-header h3 { flex-basis:100%; }
    .program-card .badge-usaha { max-width:100%; }
    .program-card-stats strong { font-size:.68rem; }
  }
  @media(prefers-reduced-motion:reduce) {
    .program-card,.campaign-progress span,.filter-btn { transition:none!important; }
  }
  .quick-donate .btn-donasi { background:#0b5a45;color:#fff!important;border:1px solid #0b5a45;box-shadow:0 5px 14px #0b5a4526; }
  .quick-donate .btn-donasi:hover,.quick-donate .btn-donasi:focus-visible { background:#083b30;color:#fff!important;border-color:#083b30; }
  .quick-donate .btn-donasi:disabled { background:#6b8678;color:#fff!important;border-color:#6b8678;box-shadow:none; }