/* ==========================================================================
   FONT MEREK — self-host WAJIB.
   CSP halaman publik memakai `font-src 'self'` (lihat SecurityHeaders), jadi
   Google Fonts / Bunny akan DIBLOKIR browser, bukan sekadar lambat. Berkasnya
   di public/fonts/brand/, diambil dari Google Fonts (keduanya SIL OFL).
   `font-display:swap` supaya teks terbaca sejak awal, bukan menghilang.
   Hanya subset latin & latin-ext: browser mengunduh latin-ext hanya bila
   halamannya benar-benar memuat karakternya, jadi gratis bila tak terpakai.
   ========================================================================== */
@font-face{font-family:Outfit;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/brand/outfit-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Outfit;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/brand/outfit-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Outfit;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/brand/outfit-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Outfit;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/brand/outfit-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/brand/inter-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/brand/inter-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/brand/inter-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/brand/inter-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/brand/inter-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/brand/inter-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ==========================================================================
   TOKEN DESIGN SYSTEM — SATU SUMBER KEBENARAN.
   Lihat DESIGN-SYSTEM.md. Aturannya: komponen merujuk token, tidak pernah
   menulis nilai mentah.

   Token MEREK (--brand-*) di sini adalah CADANGAN. Nilai sesungguhnya
   disuntikkan layout dari Pengaturan yayasan lewat ThemePalette::ramp().
   Cadangannya wajib ada dan wajib benar karena halaman error 5xx SENGAJA
   tidak menyentuh database sama sekali — di sanalah nilai-nilai ini yang
   dipakai.
   ========================================================================== */
:root{
  /* — Merek: biru Yayasan Yasri Indonesia Madani — */
  --brand-50:#f4f6ff; --brand-100:#eaedff; --brand-200:#d5dbff;
  --brand-300:#b5c1ff; --brand-400:#879aff; --brand-500:#4e6bff;
  --brand-600:#455ee0; --brand-700:#384db8; --brand-800:#2c3c8f;
  --brand-900:#212d6b;
  /* Warna yang DIKLIK. Dijamin >=4.5:1 di atas putih oleh
     ThemePalette::accessibleOn() — --brand-500 sendiri hanya 4,31:1 dan
     GAGAL AA untuk teks normal, jadi jangan dipakai untuk tombol. */
  --brand-action:#4b67f5;
  /* Varian untuk dipakai DI ATAS --brand-50, bukan di atas putih. Latar tint
     menaikkan luminansi, jadi warna aksi yang lolos di atas putih (4,61:1)
     jatuh ke 4,27:1 di atas tint — gagal AA. Diukur, bukan dikira. */
  --brand-action-soft:#384db8;

  /* — Netral — */
  --ink:#181c31;        /* judul & teks utama, 16,8:1 di atas putih */
  --ink-soft:#3a4256;
  /* Warna judul. Dipisah dari --ink supaya PERMUKAAN GELAP bisa membalikkannya
     lewat satu deklarasi (`--heading-ink:#fff`) alih-alih menambal tiap judul
     satu per satu. Wajib begini: `h1..h6{color:...}` adalah deklarasi
     LANGSUNG, dan deklarasi langsung selalu mengalahkan warna WARISAN dari
     induk berapa pun spesifisitasnya — jadi `.hero{color:#fff}` tidak pernah
     sampai ke judul di dalamnya. Itu membuat h1 beranda tampil 1,39:1. */
  --heading-ink:var(--ink);
  --muted:#5b6472;      /* teks tubuh, 5,98:1 — pengganti #79808a referensi yang cuma 3,99:1 */
  --muted-soft:#767e8c; /* keterangan kecil non-esensial */
  --line:#dde3ec;
  --surface:#ffffff;
  --surface-alt:#f4f7fa;
  --bg:#f4f7fa;
  --card:#ffffff;

  /* — Semantik (semuanya >=5:1 di atas putih) — */
  --success:#15803d; --warning:#b45309; --danger:#b91c1c; --info:#455ee0;
  --success-bg:#dcfce7; --success-line:#86efac;
  --warning-bg:#fef3c7; --warning-line:#fcd34d;
  --danger-bg:#fee2e2;  --danger-line:#fca5a5;
  --neutral-bg:#f1f5f9; --neutral-ink:#475569;
  /* Hijau merek WhatsApp. SENGAJA bukan turunan tema: ini warna milik
     layanan lain, dan mengubahnya justru membuat tombolnya tak dikenali.
     Teksnya WAJIB gelap — putih di atasnya cuma 1,98:1. */
  --wa:#25d366;
  --gold:#ffb703;       /* bidang saja; teks di atasnya wajib --ink (9,62:1) */
  --amber:#b45309;      /* alias lama */

  /* — Tipografi — */
  --font-head:Outfit,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-body:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-2xs:12px; --fs-xs:14px; --fs-sm:15px; --fs-base:16px; --fs-lg:18px;
  --fs-xl:20px; --fs-2xl:24px; --fs-3xl:30px; --fs-4xl:36px; --fs-5xl:48px;
  --lh-2xs:16px; --lh-xs:20px; --lh-sm:24px; --lh-base:26px; --lh-lg:30px;
  --lh-xl:28px; --lh-2xl:32px; --lh-3xl:38px; --lh-4xl:44px; --lh-5xl:56px;

  /* — Spasi, basis 4px — */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px;
  --sp-24:96px;
  --measure:68ch;       /* batas panjang baris teks berjalan */

  /* — Radius. Tombol & chip berbentuk pill: ciri paling khas referensi. — */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:9999px;
  --radius:14px;        /* alias lama, masih dipakai banyak komponen */

  /* — Bayangan: ditahan, tidak dramatis — */
  --sh-sm:0 1px 2px rgba(24,28,49,.06);
  --sh-md:0 5px 12px rgba(24,28,49,.10);
  --sh-lg:0 8px 40px rgba(24,28,49,.06);
  --sh-nav:0 1px 0 rgba(24,28,49,.08);

  /* — EMPAT WARNA YANG DIPILIH/DITURUNKAN DARI PENGATURAN —
       Dulu bernama --green-* (menyesatkan sejak tema yayasan ini biru);
       sekarang dinamai menurut PERANNYA. Namanya SENGAJA tanpa angka: ini
       bukan langkah gradasi --brand-50..900 dan tidak boleh dikira begitu.

       --brand-accent khususnya adalah WARNA KEDUA YANG DIPILIH ADMIN
       (`theme.accent_color`), bukan turunan warna utama. Menggantinya jadi
       `--brand-700` — yang sekilas tampak sekadar penyeragaman nama — akan
       membuang pilihan aksen admin tanpa satu pun error.

         --brand-dark    = derive()['dark']        (ujung gelap gradien hero)
         --brand-accent  = theme.accent_color      (pilihan admin, terpisah)
         --brand-primary = theme.primary_color     (= --brand-500)
         --brand-tint    = derive()['light']       (latar tag/badge)

       Nilai di bawah adalah CADANGAN; layout menyuntik ulang keempatnya dari
       Pengaturan. Cadangannya wajib benar karena halaman 5xx sengaja tidak
       menyentuh database sama sekali. — */
  --brand-dark:#212d6b; --brand-accent:#455ee0; --brand-primary:#4e6bff;
  --brand-tint:#f4f6ff;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}

/* Judul memakai Outfit; warnanya --ink, BUKAN warna merek. Kalau judul ikut
   berwarna merek, tidak ada lagi yang menonjol saat tombol merek muncul di
   layar yang sama — itu penyebab hierarki datar yang dicatat di AUDIT P1-8. */
h1,h2,h3,h4,h5,h6{font-family:var(--font-head);color:var(--heading-ink);line-height:1.25}

/* PERMUKAAN GELAP — judul di dalamnya ikut putih. Setiap blok baru berlatar
   gelap WAJIB masuk daftar ini, kalau tidak judulnya lahir gelap-di-atas-gelap
   dan seluruh test tetap lolos (cacatnya cuma terlihat oleh mata). */
.hero,.site-footer{--heading-ink:#fff}

/* Fokus keyboard SELALU terlihat. Sebelumnya nol aturan :focus-visible di
   seluruh berkas ini, jadi pengguna keyboard bergantung ring bawaan browser
   yang di atas tombol berwarna nyaris tak terlihat. Dua lapis (outline gelap
   + offset putih) supaya tetap terbaca di atas latar terang MAUPUN gelap. */
:focus-visible{outline:3px solid var(--brand-action);outline-offset:2px;border-radius:2px}
/* Hanya untuk tetikus/sentuh — jangan matikan outline untuk keyboard. */
:focus:not(:focus-visible){outline:none}

/* Teks panjang tanpa spasi (URL, nomor rekening, nama program) tidak boleh
   memaksa halaman melebar — pecah barisnya, jangan luber. */
body{overflow-wrap:break-word}
img{max-width:100%;height:auto}

header{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.nav{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:24px;padding:14px 20px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--brand-dark);font-size:18px}
/* Dibatasi 2 baris di SEMUA lebar, bukan hanya di ponsel. Nav punya
   max-width:1080px, jadi ruangnya tidak bertambah meski layar 1920px —
   nama yayasan yang sangat panjang tetap bisa menumbuhkan header lengket
   tanpa batas kalau tidak dijepit. Yang mengalah memang namanya: label menu
   dijaga tetap satu baris (.nav-menu a{white-space:nowrap}) karena label
   yang pecah di tengah terbaca seperti tampilan rusak. */
.logo-text{min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.logo em{font-style:normal;color:var(--muted);font-weight:600}
.logo .mark{width:36px;height:36px;border-radius:10px;background:var(--brand-accent);color:#fff;display:grid;place-items:center;font-size:18px;flex-shrink:0}
.logo img.mark{background:var(--card);border:1px solid var(--line);object-fit:contain;padding:2px}
.nav a{color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:600;cursor:pointer}
.nav a.active{color:var(--brand-accent)}
.nav .spacer{flex:1}
/* Di lebar penuh menu tetap deretan tautan biasa; `position:fixed` & kawan-
   kawan hanya berlaku di media query ≤760px (drawer). Dibungkus <nav>
   sendiri, BUKAN display:contents — landmark navigasinya harus tetap ada di
   accessibility tree. */
.nav-menu{display:flex;align-items:center;gap:24px;flex-shrink:0}
/* Label menu tidak boleh pecah di tengah. Tanpa ini "Kalkulator Zakat" &
   "Tentang Kami" masing-masing membungkus jadi 2 baris begitu nama yayasan
   panjang menyempitkan ruang — nav jadi setinggi 94px (dari 65px) padahal
   header-nya lengket. Yang mengalah adalah nama yayasan (.logo-text sudah
   punya min-width:0 + line-clamp), bukan menunya. */
.nav-menu a{white-space:nowrap}

/* --- Dropdown menu (Fase 2: menu disusun admin) ---
   Di lebar penuh submenu MENGAMBANG di atas halaman; di drawer ia melipat
   ke dalam daftar (aturannya di media query ≤1024px). Dua bentuk yang
   sangat berbeda dari satu markup yang sama. */
.nav-group{position:relative}
/* Disamakan dengan `.nav a` — ini elemen <button>, jadi tidak mewarisi satu
   pun gaya tautan di sekitarnya dan akan tampil sebagai tombol OS bila
   dibiarkan. */
.nav-group-toggle{display:flex;align-items:center;gap:5px;background:none;border:0;padding:0;cursor:pointer;font-family:inherit;font-size:14.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.nav-group-toggle svg{width:13px;height:13px;flex-shrink:0;transition:transform .18s}
.nav-group-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-group.active>.nav-group-toggle,.nav-group-toggle:hover{color:var(--brand-accent)}
.nav-submenu{
  position:absolute;top:calc(100% + 10px);left:-14px;
  min-width:220px;
  display:none;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.13);
  padding:6px;z-index:20;
}
.nav-group.is-open>.nav-submenu{display:flex}
/* `.nav a` (0,1,1) mengalahkan `.nav-submenu a` (0,1,1) hanya lewat urutan —
   diperkuat jadi `.nav .nav-submenu a` supaya padding & warnanya pasti
   menang. Jebakan spesifisitas yang sama pernah membuat CTA nav tayang
   abu-abu di produksi. */
.nav .nav-submenu a{display:block;padding:9px 12px;border-radius:8px;font-size:14px;white-space:normal}
.nav .nav-submenu a:hover{background:var(--brand-tint);color:var(--brand-accent)}
.nav .nav-submenu a.active{color:var(--brand-accent);background:var(--brand-tint)}
/* Jembatan tak terlihat menutup celah 10px antara tombol & panel: tanpa ini
   kursor yang bergerak ke submenu melewati area kosong, hover terputus, dan
   menunya menutup tepat saat hendak diklik. */
.nav-group::after{content:"";position:absolute;top:100%;left:0;right:0;height:12px}

/* Tombol hamburger hanya ada di lebar sempit. Ukuran 44px mengikuti target
   sentuh minimum yang lazim; di bawah itu tombol jadi sulit ditekan. */
.nav-toggle{display:none;width:44px;height:44px;flex-shrink:0;place-items:center;border:1.5px solid var(--line);border-radius:10px;background:var(--card);color:var(--brand-dark);cursor:pointer;padding:0}
.nav-toggle svg{width:22px;height:22px}
.nav-toggle:hover{background:var(--brand-tint);border-color:var(--brand-primary)}
/* Lapisan gelap di belakang drawer: menegaskan halaman sedang tidak aktif,
   sekaligus jadi area klik untuk menutup. [hidden] dinyatakan eksplisit —
   aturan display di atasnya akan mengalahkan gaya bawaan browser. */
.nav-scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:25}
.nav-scrim[hidden]{display:none}
/* `inline-flex`, bukan `inline-block`: sebagian tombol kini memuat ikon SVG +
   teks (lihat partials/icon.blade.php), dan sebagai inline-block ikonnya jatuh
   ke baris sendiri. `gap` hanya berlaku bila memang ada dua anak, jadi tombol
   berisi teks saja tidak berubah sedikit pun. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;font-weight:600;border-radius:var(--r-pill);text-decoration:none;text-align:center;font-family:inherit}
.btn-primary{background:var(--brand-action);color:#fff;padding:11px 22px;font-size:14.5px}
.btn-primary:hover{background:var(--brand-700)}
/* Tombol CTA di nav. `color:#fff` WAJIB dinyatakan ulang di sini, bukan
   diwariskan dari `.btn-primary{color:#fff}` di atas: `.nav a` (kelas +
   elemen) berspesifisitas (0,1,1), LEBIH TINGGI daripada `.btn-primary`
   (0,1,0) — jadi tanpa aturan ini teks tombol jatuh ke abu-abu nav dan
   tombol utama situs jadi #6b7280 di atas hijau, kontras ~1,6:1 alias
   praktis tak terbaca.
   Ini bukan kekhawatiran teoretis: pernah benar-benar tayang seperti itu di
   produksi [2026-08-07]. Latarnya dinaikkan ke --brand-accent (aksen) supaya
   putih di atasnya lolos ambang kontras. Dikunci test. */
.nav .btn-primary{background:var(--brand-action);color:#fff}
.nav .btn-primary:hover{background:var(--brand-700)}

/* Tombol CTA header — gaya BERGARIS, bukan hijau pekat. Alasannya bukan
   selera: solid hijau membuatnya jadi elemen paling berteriak di header, dan
   di situs yayasan pendidikan itu terbaca seperti lembaga yang meminta-minta.
   Bergaris tetap mudah ditemukan tanpa mendominasi nama lembaganya sendiri.

   `.nav .nav-cta` (0,2,1) WAJIB, bukan `.nav-cta` (0,1,0): jebakan
   spesifisitas yang sama persis dengan catatan di atas — `.nav a` (0,1,1)
   menetapkan color:var(--muted), jadi aturan berspesifisitas lebih rendah
   akan membuat teks tombol jatuh ke abu-abu. Itu PERNAH tayang di produksi.
   `border` juga harus dinyatakan di sini karena `.btn` menyetel border:0. */
.nav .nav-cta{
  /* Terisi penuh, bukan bergaris. Brief redesign meminta CTA donasi berwarna
     aksen & berkontras tinggi; gaya bergaris membuatnya setara dengan tautan
     nav di sekitarnya, padahal ini satu-satunya ajakan utama situs.
     Labelnya tetap milik yayasan (Setting `site.nav_cta_label`). */
  background:var(--brand-action);
  border:1.5px solid var(--brand-action);
  color:#fff;
  padding:9px 18px;
  font-size:14.5px;
}
.nav .nav-cta:hover{background:var(--brand-700);border-color:var(--brand-700);color:#fff}
.btn-ghost{background:var(--brand-50);color:var(--brand-action-soft);padding:11px 18px;font-size:14px}
.btn-line{background:var(--surface);border:1.5px solid var(--line);color:var(--ink);padding:10px 18px;font-size:14px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.6;cursor:not-allowed}
.wrap{max-width:1080px;margin:0 auto;padding:28px 20px}

.hero{background:linear-gradient(135deg,var(--brand-dark),var(--brand-accent));border-radius:var(--radius);color:#fff;padding:48px 40px;display:flex;gap:32px;align-items:center;flex-wrap:wrap}

/* --- Hero berlatar foto yang diunggah admin ---
   Fotonya elemen <img> sungguhan, BUKAN `background-image` inline. Dua
   alasan: (a) URL yang disuntik ke `url()` inline adalah jalur injeksi CSS —
   proyek ini sudah pernah membayar pelajaran itu lewat ThemePalette::safeHex();
   (b) <img> bisa diberi `alt=""` + aria-hidden sehingga pembaca layar tidak
   mengumumkan gambar hiasan. */
.hero--photo{position:relative;overflow:hidden;isolation:isolate}
/* `.hero--photo>.hero-photo` (0,2,0), BUKAN `.hero-photo` (0,1,0): aturan
   `.hero--photo>*` di bawah menyetel `position:relative` untuk seluruh anak
   dan akan mengalahkannya. Tanpa ini fotonya diperlakukan sebagai item flex
   biasa — tampil sebagai blok putih di ATAS teks, bukan sebagai latar.
   Ketahuan lewat mata; seluruh test lolos dengan bug ini terpasang. */
.hero--photo>.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}

/* LAPISAN GELAP WAJIB, bukan opsional.
   Teks hero berwarna putih. Di atas gradien hijau ia pasti terbaca; di atas
   foto sembarang TIDAK — foto cerah (langit, seragam putih, dinding kelas)
   membuat judulnya lenyap, dan admin tidak akan mengukur kontras sendiri.
   Opacity paling terang dipatok .62: dihitung untuk kasus terburuk (foto
   putih polos 255,255,255) dan menghasilkan kontras teks putih ~5,7:1,
   lolos ambang WCAG AA 4,5:1. JANGAN diturunkan di bawah .60 — di .45
   kontrasnya jatuh ke 3,35:1 dan judulnya gagal terbaca.
   Sengaja netral (hitam), bukan bertint hijau: warna tema bisa diubah tiap
   instalasi — yayasan kedua memakai biru — jadi tint hijau justru bentrok. */
.hero--photo::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(135deg,rgba(0,0,0,.78),rgba(0,0,0,.62))}
.hero--photo>*{position:relative;z-index:1}
/* Lambang mesjid disembunyikan saat ada foto — ia hiasan pengganti gambar,
   dan mengambang di atas foto sungguhan justru terlihat seperti tempelan. */
.hero--photo .mosque{display:none}
/* `flex-basis` 280px memberi lebar nyaman di layar besar, tapi `min-width:0`
   membiarkannya menyusut di layar sempit. Sebelumnya `min-width:280px`
   membuat kolom ini lebih lebar dari kartu hero-nya di ponsel, sehingga
   teksnya terpotong di tepi kanan. */
.hero-copy{flex:1 1 280px;min-width:0}
/* Sebelumnya dua tombol ini ditata dengan margin-left:8px inline pada tombol
   kedua — cukup untuk jarak horizontal selama keduanya sebaris, tapi begitu
   ruang sempit (ponsel) memaksa tombol kedua turun ke baris baru, jarak
   vertikalnya nol karena margin-left tidak berlaku ke arah itu. flex+gap
   menjaga jarak di kedua arah, sebaris maupun bertumpuk. */
.hero-cta{display:flex;flex-wrap:wrap;gap:10px 12px}
/* Slogan yayasan di atas nama lembaga (beranda /). Sengaja bukan <h1>:
   judul utama halaman depan sebuah lembaga adalah NAMANYA, bukan slogannya —
   itu yang dicari orang dan yang dibaca mesin pencari. */
.hero-eyebrow{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.82;margin-bottom:8px}
.hero h1{font-size:30px;line-height:1.25;margin-bottom:12px}
.hero p{opacity:.9;max-width:520px;margin-bottom:20px;font-size:15px}
.hero .stats{display:flex;gap:28px;margin-top:8px;flex-wrap:wrap}
.hero .stat b{display:block;font-size:22px}
.hero .stat span{font-size:12.5px;opacity:.85}
/* Ikon garis dari partials/icon.blade.php. Ukurannya sengaja 1em, bukan px:
   dengan begitu seluruh aturan ukuran yang sudah ada (yang dulu menyetel
   font-size untuk emoji) tetap berlaku apa adanya setelah emojinya diganti. */
.icon{width:1em;height:1em;display:block;flex-shrink:0}
.mosque{font-size:96px;opacity:.9;filter:drop-shadow(0 6px 12px rgba(0,0,0,.25))}

h2.sec{font-size:21px;margin:36px 0 6px;color:var(--brand-dark)}
.sub{color:var(--muted);font-size:14px;margin-bottom:18px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s}
.card:hover{box-shadow:0 8px 24px rgba(0,0,0,.08)}
.thumb{height:150px;display:grid;place-items:center;font-size:52px;color:#fff;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}
/* Tiga varian sampul cadangan, diputar per kartu supaya grid program tidak
   jadi satu blok warna datar. Diturunkan dari gradasi merek — sebelumnya
   hijau/sian/oranye yang dipatok mati, sisa instalasi yayasan lain dan satu-
   satunya bidang besar di beranda yang tidak ikut berubah saat tema diganti. */
.t1{background:linear-gradient(135deg,var(--brand-700),var(--brand-500))}
.t2{background:linear-gradient(135deg,var(--brand-900),var(--brand-600))}
.t3{background:linear-gradient(135deg,var(--brand-600),var(--brand-400))}
.card .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.tag{align-self:flex-start;background:var(--brand-50);color:var(--brand-action-soft);font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:99px}
.card h3{font-size:16px;line-height:1.35}
.bar{height:8px;background:#e5e7eb;border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--brand-primary);border-radius:99px}
.meta{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--muted)}
/* min-width:0 — tanpa ini item flex menolak menyusut di bawah lebar
   kontennya, dan angka panjang (mis. Rp 150.000.000) mendorong kartu melebihi
   layar alih-alih membungkus. Pola yang sama dipakai di .donors & .receipt. */
.meta>div{min-width:0}
.meta b{color:var(--ink);font-size:13.5px;display:block}
.card .btn{margin-top:auto}
.empty{color:var(--muted);font-size:14px;padding:24px 0}

.detail{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;align-items:start}
@media(max-width:820px){.detail{grid-template-columns:1fr}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
/* Gradiennya diturunkan dari palet merek, BUKAN dipatok hijau seperti
   sebelumnya (#166534→#22c55e, sisa instalasi yayasan lain): sampul ini
   berdiri sebagai gambar utama halaman saat foto program belum diunggah, jadi
   ia yang paling terlihat salah warna di instalasi bertema lain. Kelas cacat
   yang sama sudah diperbaiki di .thumb kartu program. */
.cover{height:260px;border-radius:var(--radius);display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--brand-900),var(--brand-500));margin-bottom:18px;overflow:hidden}
.cover img{width:100%;height:100%;object-fit:cover}
.cover-icon{width:96px;height:96px;opacity:.85}
.detail h1{font-size:23px;margin-bottom:8px}

/* Sisa kebutuhan dana. Kalimat, bukan angka telanjang: donatur memutuskan dari
   selisihnya, dan menaruhnya tepat di bawah baris angka membuat pengurangannya
   tidak perlu dilakukan di kepala. */
.campaign-need{margin-top:2px;padding:11px 14px;background:var(--brand-50);border-radius:10px;font-size:13.5px;line-height:1.6;color:var(--ink)}
.campaign-need b{color:var(--brand-action-soft)}

/* Ringkasan program terstruktur (masalah/bentuk bantuan/penerima). Kartu
   per item, bukan tabel dua kolom: nilainya bisa berupa beberapa paragraf
   (lewat partials.prose), dan tabel dua kolom klasik pecah begitu salah satu
   selnya lebih tinggi dari yang lain. */
.program-facts{display:grid;gap:12px;margin-top:10px}
.program-facts>div{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.program-facts dt{font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.program-facts dd{font-size:13.5px;color:var(--ink)}
.program-facts dd .prose p{margin:0 0 8px}
.program-facts dd .prose p:last-child{margin-bottom:0}

/* Daftar lompat dalam-halaman. Halaman program bisa sangat panjang, dan di
   ponsel form donasi ada di paling bawah — tautan terakhir di daftar ini
   satu-satunya jalan cepat ke sana tanpa menggulir balik.
   `overflow-x:auto` + flex-shrink:0 pada itemnya: bila tautannya banyak, yang
   menggulir cukup barisnya sendiri, bukan seluruh halaman ke samping. */
.campaign-jump{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.campaign-jump a{flex-shrink:0;padding:7px 13px;border:1.5px solid var(--line);border-radius:999px;font-size:12.5px;font-weight:600;color:var(--ink);text-decoration:none;background:var(--card)}
.campaign-jump a:hover{border-color:var(--brand-500);background:var(--brand-50)}
/* Selektornya sengaja `a.campaign-jump-cta` (0,2,1), bukan `.campaign-jump-cta`
   (0,1,0) — yang terakhir KALAH dari `.campaign-jump a` (0,1,1) di atas dan
   tombol ajakannya diam-diam kembali jadi abu-abu. Jebakan yang persis sama
   dengan `.nav a` vs `.nav .btn-primary` yang pernah tayang di produksi. */
.campaign-jump a.campaign-jump-cta{border-color:var(--brand-action);background:var(--brand-action);color:#fff}
.campaign-jump a.campaign-jump-cta:hover{background:var(--brand-700);border-color:var(--brand-700)}

/* Jangkar #cerita dkk berada di bawah header yang menempel — tanpa ini,
   judul bagian yang dituju tersembunyi persis di balik header setiap kali
   tautan lompat diklik. */
.detail section[id]{scroll-margin-top:84px}
.bignum{font-size:24px;font-weight:800;color:var(--brand-accent)}
.row3{display:flex;gap:18px;margin:14px 0;flex-wrap:wrap}
.row3 div{flex:1;min-width:110px}
.row3 span{font-size:12px;color:var(--muted)}
.row3 b{display:block;font-size:16px}
.updates .u{border-left:3px solid var(--brand-primary);padding:6px 14px;margin:14px 0}
.updates .u time{font-size:12px;color:var(--muted)}
.updates .u h4{font-size:14.5px;margin:2px 0}
.updates .u p{font-size:13.5px;color:var(--muted)}

/* Teks bebas yang diketik admin di Textarea polos (lihat
   partials/prose.blade.php). Reset `*{margin:0}` di atas membuat <p> tidak
   punya jarak sama sekali, jadi jarak antar-paragrafnya harus ditulis di sini
   — tanpa itu memecah paragraf jadi <p> tidak mengubah apa pun secara visual. */
.prose p{margin:0 0 10px}
.prose p:last-child{margin-bottom:0}
.campaign-story{font-size:14.5px;color:var(--muted)}

/* Dokumentasi foto pada Kabar Terbaru. Dibuat bisa diklik ke gambar penuh:
   foto penyaluran adalah bukti, dan bukti harus bisa diperiksa dari dekat —
   thumbnail 120px tidak cukup untuk membaca papan nama atau wajah penerima. */
.update-photos{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.update-photos a{display:block;width:120px;height:90px;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--brand-tint)}
.update-photos img{width:100%;height:100%;object-fit:cover;display:block}

/* Galeri foto program (beda dari .update-photos milik satu kabar): grid,
   bukan baris tunggal, karena ini kumpulan foto utama halaman — layak
   ruang lebih besar daripada dokumentasi satu update. */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-top:10px}
.gallery a{display:block;aspect-ratio:1;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--brand-tint)}
.gallery img{width:100%;height:100%;object-fit:cover;display:block}
.donors li{display:flex;justify-content:space-between;font-size:13.5px;padding:9px 0;border-bottom:1px solid var(--line);gap:10px}
.donors li:last-child{border:0}
.donors li>div{min-width:0}
.donors .d{color:var(--muted);font-size:12px}
.donors b{color:var(--brand-accent);white-space:nowrap}

/* Penyaluran dana milik satu program. `min-width:0` pada kolom kiri wajib —
   tanpa itu item flex menolak menyusut di bawah lebar kontennya dan
   keterangan penyaluran yang panjang mendorong nominal keluar layar ponsel. */
.usages li{display:flex;justify-content:space-between;font-size:13.5px;padding:10px 0;border-bottom:1px solid var(--line);gap:10px}
.usages li:last-child{border:0}
.usages li>div{min-width:0}
.usages time{display:block;font-size:12px;color:var(--muted);margin-bottom:2px}
.usages b{color:var(--brand-accent);white-space:nowrap}

.amounts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0}
/* C19 — font-size & padding sengaja dinaikkan (14px/12px → 16px/13px) di
   seluruh kontrol jalur donasi pada berkas ini: base text donatur lansia
   tidak boleh di bawah 16px, dan target sentuh minimal 44x44px
   (docs/06-cetak-biru-publik.md E5). 16px di kolom teks juga mencegah
   Safari iOS otomatis memperbesar (zoom) saat kolom itu difokus. */
.amounts button{position:relative;padding:13px 6px;border:1.5px solid var(--line);background:#fff;border-radius:10px;font-weight:700;font-size:16px;cursor:pointer;font-family:inherit}
.amounts button.sel{border-color:var(--brand-primary);background:var(--brand-tint);color:var(--brand-accent)}
/* Badge "sering dipilih" (C8) — pil mengambang di sudut, BUKAN baris kedua
   di dalam tombol: menambah tinggi SATU tombol akan menyeret tinggi seluruh
   baris grid (default align-items:stretch), membuat tombol lain di baris
   yang sama ikut membesar tanpa alasan. Mengambang di luar aliran layout
   (position:absolute) membuat tinggi tombol tetap seragam. */
.preset-popular{position:absolute;top:-8px;right:-6px;padding:1px 6px;border-radius:999px;background:var(--brand-accent);color:#fff;font-size:9.5px;font-weight:700;white-space:nowrap;line-height:1.6;pointer-events:none}
.field{margin:12px 0}
.field label{font-size:16px;font-weight:600;display:block;margin-bottom:6px}
/* `<fieldset class="field">` dipakai untuk grup kontrol (Pilih nominal,
   Metode pembayaran) — browser memberi fieldset border/padding/margin
   bawaan yang harus dilucuti dulu supaya kelihatan identik dengan
   `<div class="field">` biasa. `<legend>` disamakan gayanya dengan
   `.field label` supaya tidak ada perbedaan visual yang mengungkap
   perubahan markup ini. */
fieldset.field{border:0;padding:0;min-width:0}
.field legend{font-size:16px;font-weight:600;padding:0;margin-bottom:6px;width:100%}
/* Radio & checkbox HARUS dikecualikan: `width:100%` membuat tombol radio
   melar jadi ratusan piksel (bukan ~16px), mendorong label metode pembayaran
   dan menyisakan ruang teks yang sangat sempit sehingga pecah banyak baris. */
.field input:not([type="radio"]):not([type="checkbox"]),
.field textarea,
.field select{width:100%;padding:13px 12px;border:1.5px solid var(--line);border-radius:10px;font-size:16px;font-family:inherit}
.field input:not([type="radio"]):not([type="checkbox"]):focus,
.field textarea:focus{outline:2px solid var(--brand-primary);border-color:var(--brand-primary)}
/* Petunjuk & galat di bawah satu kolom form (Fase 4). Satu kelas untuk
   keduanya, dibedakan modifier — kalau dipisah jadi dua elemen, keduanya
   pernah tampil bersamaan dan donatur membaca petunjuk sekaligus galat yang
   saling bertentangan. */
.field-hint{margin-top:6px;font-size:12.5px;line-height:1.55;color:var(--danger);font-weight:600}
.field-hint--muted{color:var(--muted);font-weight:400}
/* Kolom yang ditandai bermasalah. `!important` DIHINDARI: selektornya dibuat
   cukup spesifik (0,2,0 lawan 0,1,1 milik aturan .field di atas) supaya tetap
   menang tanpa palu. */
.field input.is-invalid:not([type="radio"]):not([type="checkbox"]){border-color:var(--danger)}
/* Tombol kirim saat donasinya sedang diproses. Dibuat jelas TIDAK bisa
   diklik lagi — bukan sekadar diredupkan, karena donatur yang ragu justru
   menekannya berkali-kali. */
.btn:disabled{opacity:.6;cursor:not-allowed}

/* min-height:44px membuat SELURUH baris (bukan cuma kotak centang ~16px)
   jadi target sentuh — label yang membungkus input sudah mengaktifkannya
   di mana pun diketuk, jadi menaikkan tinggi barisnya cukup tanpa perlu
   mendesain ulang tampilan kotak centang itu sendiri. */
.check{display:flex;gap:8px;align-items:center;min-height:44px;font-size:16px;color:var(--muted);margin:10px 0;cursor:pointer}
.check input{flex-shrink:0}
.check span{min-width:0}
.pay{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.pay label{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:10px;padding:13px 12px;font-size:16px;cursor:pointer}
.pay label.sel{border-color:var(--brand-primary);background:var(--brand-tint)}
.pay .ico{width:34px;height:24px;border-radius:5px;background:#e5e7eb;display:grid;place-items:center;font-size:11px;font-weight:800;color:#374151;flex-shrink:0}
/* Label metode bayar + kecepatan verifikasi berdampingan secara vertikal.
   min-width:0 wajib: tanpanya item flex menolak menyusut di bawah lebar
   labelnya sendiri, dan teks kecepatan verifikasi yang lebih pendek
   memaksa labelnya melebar ganjil di layar sempit (pola yang sama dengan
   .hero-copy). */
.pay-label{display:flex;flex-direction:column;gap:1px;min-width:0}
.pay-label-verify{font-size:11.5px;color:var(--muted);font-weight:400}
.btn-block{width:100%;padding:14px;font-size:16px;margin-top:8px}
.secure{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--muted);margin-top:10px}
.secure .icon{font-size:14px}
/* Judul form donasi. Dulu `style=` sebaris di Blade; dipindah ke sini supaya
   ukuran judul tidak hidup di luar berkas gaya. */
.donate-form-title{font-size:17px;margin-bottom:4px}
/* Ikon status pembayaran di halaman instruksi. Menggantikan emoji kartu. */
.pay-ico{font-size:34px;color:var(--brand-action);display:flex;justify-content:center;margin-bottom:6px}
.notice{background:#eff6ff;border:1px dashed #3b82f6;color:#1e40af;border-radius:10px;padding:12px;font-size:13px;text-align:center;margin-top:14px;display:none}
.notice.show{display:block}

/* Halaman status donasi */
.center-panel{max-width:560px;margin:0 auto}
.pay-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.badge{display:inline-block;padding:4px 12px;border-radius:99px;font-size:12.5px;font-weight:700}
.b-wait{background:var(--warning-bg);color:var(--warning)}
.b-ok{background:var(--success-bg);color:var(--success)}
.b-no{background:var(--danger-bg);color:var(--danger)}
/* Hijau WhatsApp resmi — sengaja BUKAN warna tema yayasan, karena tombol ini
   menandakan "membuka aplikasi WhatsApp", bukan aksi milik situs ini. */
.btn-wa{background:var(--wa);color:var(--ink);padding:11px 18px;font-size:14px}
/* --- Hub donasi: "Jenis Donasi yang Kami Terima" ---
   Kartu informasi jenis dana, TIDAK sama dengan .card program: tidak ada
   bar progres/nominal di sini karena ini bukan satu program, melainkan
   penjelasan satu jenis dana yang mungkin menaungi beberapa program
   sekaligus (atau belum ada program sama sekali). */
.fundtype-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin:18px 0 8px}
.fundtype-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:6px}
/* Ikon jenis dana memakai warna merek, bukan --ink: di kartu yang isinya
   teks abu-abu, ikon berwarna merek-lah yang membedakan keempat jalur dana
   sekilas pandang. */
.fundtype-icon{font-size:26px;color:var(--brand-action);margin-bottom:4px}
.fundtype-card h3{font-size:15.5px;color:var(--brand-dark)}
.fundtype-card p{font-size:13px;color:var(--muted);line-height:1.65;flex:1}
.fundtype-link{font-size:13px;font-weight:700;color:var(--brand-accent);text-decoration:none;margin-top:4px}
.fundtype-link:hover{text-decoration:underline}
/* Jenis dana yang belum punya program aktif: kartunya tetap tampil (kami
   memang menerimanya), tapi TANPA tautan yang berujung pada daftar kosong
   — beda warna & bukan tautan, supaya tidak terbaca seperti tombol mati. */
.fundtype-empty{font-size:12.5px;color:var(--muted);font-style:italic;margin-top:4px}

/* Judul tiap kelompok program di hub donasi (satu per jenis dana). Sengaja
   lebih kecil dari h2.sec — ini subbagian dari "Program yang Sedang
   Berjalan", bukan bagian halaman baru. */
.campaign-group{margin-top:26px}
/* Ikon + teks sebaris. `font-size:19px` pada ikon (bukan 16px milik judulnya)
   supaya ikon garis tidak terlihat lebih ringan dari huruf tebal di sebelahnya. */
.campaign-group-title{font-size:16px;color:var(--brand-dark);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.campaign-group-title .icon{font-size:19px;color:var(--brand-action)}

/* --- CTA zakat di beranda (beda dari .zakat-cta di kalkulator sendiri:
   itu tombol "tunaikan" setelah hitung, ini ajakan sebelum orang tahu
   kalkulatornya ada sama sekali) --- */
.zakat-promo{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--brand-tint);border:1.5px solid var(--brand-primary);border-radius:var(--radius);padding:22px 26px;margin:28px 0}
.zakat-promo-icon{font-size:34px;flex-shrink:0}
.zakat-promo-copy{flex:1 1 320px;min-width:0}
.zakat-promo-copy h3{font-size:17px;color:var(--brand-dark);margin-bottom:4px}
.zakat-promo-copy p{font-size:13.5px;color:var(--muted)}
.zakat-promo-btn{flex-shrink:0;white-space:nowrap}

/* Ajakan ke halaman /dampak. Class terpisah dari .zakat-promo meski
   strukturnya mirip (pola yang sama dipakai di seluruh proyek ini — lihat
   .zakat-cta vs .zakat-promo): dua konteks berbeda yang kebetulan tampil
   serupa, bukan satu komponen yang dipakai ulang. Warna netral (bukan hijau
   penuh seperti ajakan zakat) karena ini pembuktian amanah, bukan CTA aksi. */
.impact-promo{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:22px 26px;margin:28px 0}
.impact-promo-icon{font-size:34px;flex-shrink:0}
.impact-promo-copy{flex:1 1 320px;min-width:0}
.impact-promo-copy h3{font-size:17px;color:var(--brand-dark);margin-bottom:4px}
.impact-promo-copy p{font-size:13.5px;color:var(--muted)}
.impact-promo-btn{flex-shrink:0;white-space:nowrap}

/* --- Kalkulator zakat --- */
.zakat-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0}
.zakat-tabs button{flex:1 1 auto;min-width:0;padding:9px 12px;border:1.5px solid var(--line);background:#fff;border-radius:10px;font-family:inherit;font-size:13.5px;font-weight:700;color:var(--muted);cursor:pointer}
.zakat-tabs button.sel{border-color:var(--brand-primary);background:var(--brand-tint);color:var(--brand-dark)}
.zakat-basis{font-size:13px;color:var(--muted);background:var(--brand-tint);border-radius:10px;padding:10px 12px;margin:0 0 14px}
.zakat-updated{display:block;margin-top:4px;font-style:italic}
.zakat-note{font-size:13px;color:var(--muted);margin:10px 0}
.zakat-result:not(:empty){display:flex;flex-direction:column;gap:2px;background:var(--brand-tint);border:1.5px solid var(--brand-primary);border-radius:12px;padding:14px;margin:14px 0}
.zakat-result span{font-size:12.5px;color:var(--muted)}
.zakat-result b{font-size:24px;color:var(--brand-dark);word-break:break-word}
.zakat-result small{font-size:12.5px;color:var(--muted)}
/* Tidak wajib zakat bukan kabar buruk — jangan diwarnai seperti galat. */
.zakat-result b.zakat-below{font-size:17px;color:#92400e}
.zakat-fiqh{font-size:12.5px;color:var(--muted);line-height:1.6;border-left:3px solid var(--line);padding-left:10px;margin:12px 0}
.zakat-cta{margin-top:18px;padding-top:16px;border-top:1.5px dashed var(--line)}
.zakat-cta-amount{font-size:14px;color:var(--muted);margin-bottom:10px}
.zakat-cta-amount b{color:var(--brand-dark);font-size:18px}
.zakat-cta-link{margin-bottom:8px}
.zakat-disclaimer{font-size:12px;color:var(--muted);line-height:1.6;margin-top:18px}
.share{margin:18px 0;padding:14px;border:1.5px dashed var(--line);border-radius:12px}
.share-label{display:block;font-size:13px;color:var(--muted);margin-bottom:10px;font-weight:600}
.share-buttons{display:flex;gap:8px;flex-wrap:wrap}
/* min-width:0 supaya tombol boleh menyusut di layar sempit alih-alih
   mendorong induknya melebihi lebar layar (pola yang sama dipakai di .meta,
   .donors, .receipt). */
.share-buttons .btn{flex:1 1 auto;min-width:0}
/* Kedaluwarsa sengaja abu-abu, bukan merah seperti "ditolak": donasi yang
   kehabisan waktu bukan kesalahan donatur & tidak perlu terbaca sebagai
   tuduhan. Warnanya senada dengan badge gray status yang sama di panel admin. */
.b-off{background:var(--neutral-bg);color:var(--neutral-ink)}
.receipt{border:1.5px dashed var(--line);border-radius:12px;padding:16px;margin:16px 0;font-size:14px}
.receipt div{display:flex;justify-content:space-between;padding:5px 0;gap:12px;flex-wrap:wrap}
.receipt span{color:var(--muted);flex-shrink:0}
.receipt b{text-align:right;min-width:0}
/* Garis tepinya WAJIB turunan merek, bukan hijau dipatok. Sisa instalasi
   yayasan lain (#bbf7d0) sempat bertahan di sini sampai QA pra-produksi —
   kelas cacat yang sama sudah diperbaiki di .cover & .thumb, tapi terlewat
   justru di layar bertaruh paling tinggi: halaman instruksi pembayaran, satu-
   satunya tempat donatur membaca nomor rekening. Latarnya --brand-tint (biru
   di instalasi ini), jadi tepi hijau membuat kotaknya terbaca seperti
   tempelan dari situs lain tepat saat kepercayaan paling dibutuhkan. */
.paybox{background:var(--brand-tint);border:1.5px solid var(--brand-200);border-radius:12px;padding:18px;text-align:center;margin:16px 0}
.paybox .big{font-size:22px;font-weight:800;color:var(--brand-dark);letter-spacing:1px;margin:4px 0}
/* Yayasan lazim punya >1 rekening — tiap rekening jadi baris sendiri di
   dalam paybox, bukan satu nomor besar seperti dulu. */
.bank-accounts{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.bank-account-row{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px;text-align:left;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* min-width:0 wajib: tanpa itu item flex menolak menyusut di bawah lebar
   kontennya, dan nomor rekening panjang mendorong tombol Salin keluar baris. */
.bank-account-row .bank-account-info{flex:1 1 auto;min-width:0}
.bank-account-row .bank-name{display:block;font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.bank-account-row .bank-number{display:block;font-size:18px;font-weight:800;color:var(--brand-dark);letter-spacing:.5px;margin:2px 0;word-break:break-word}
.bank-account-row .bank-holder{font-size:12.5px;color:var(--muted)}
/* Varian "belum diatur" tidak punya pembungkus info/tombol — kembalikan ke
   blok terpusat, kalau tidak flex di atas membuatnya rata kiri. */
.bank-account-row--empty{display:block;text-align:center;color:var(--muted)}
.transfer-note{margin-top:10px;padding:8px 12px;background:#fff;border-radius:8px;font-size:13px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.pay-amount{margin-top:8px;font-size:13px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
/* Tombol salin nomor rekening / nominal / kode donasi. Ketiganya adalah teks
   yang harus dipindahkan donatur ke aplikasi m-banking-nya persis sama —
   mengetik ulang nomor rekening & kode acak adalah sumber salah ketik yang
   berujung transfer tak bisa dicocokkan admin.
   min-width menjaga lebarnya saat teks berganti jadi "✓ Disalin", supaya
   tata letak di sekitarnya tidak melonjak saat diklik. */
.copy-btn{flex:0 0 auto;min-width:82px;padding:6px 12px;border:1px solid var(--brand-accent);border-radius:8px;background:#fff;color:var(--brand-accent);font-family:inherit;font-size:12px;font-weight:700;line-height:1.4;white-space:nowrap;cursor:pointer}
.copy-btn:hover{background:var(--brand-tint)}
.copy-btn.is-copied{background:var(--brand-accent);border-color:var(--brand-accent);color:#fff}
/* QRIS statis: gambar QR merchant yayasan, tampil di paybox yang sama dengan
   daftar rekening karena alurnya memang satu metode (bayar sendiri lalu
   unggah bukti), bukan metode terpisah. */
.qris{margin-top:14px;padding-top:14px;border-top:1px dashed var(--brand-200)}
/* QR harus cukup besar untuk dipindai dari layar oleh ponsel lain, tapi tetap
   menyusut di layar sempit — max-width persen, bukan lebar tetap. */
.qris-code{display:block;width:220px;max-width:80%;height:auto;margin:10px auto;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px}
.qris-merchant{font-size:12.5px;color:var(--muted);margin:0 0 8px}
.qris-save{display:inline-block;font-size:12.5px;font-weight:600;color:var(--brand-accent)}
/* Rincian kode unik: nominal yang diminta berbeda dari yang donatur pilih,
   jadi penjelasannya harus terbaca — bukan catatan kaki abu-abu samar. */
.unique-code{margin-top:8px;padding:8px 12px;background:#fff;border:1px dashed var(--brand-200);border-radius:8px;font-size:12.5px;color:var(--ink);text-align:left}
.steps{font-size:13.5px;color:var(--muted);margin:14px 0;padding-left:20px}
.steps li{margin:5px 0}
.alert{border-radius:var(--r-md);padding:12px;font-size:13.5px;margin:14px 0}
.alert-ok{background:var(--success-bg);border:1px solid var(--success-line);color:var(--success)}
.alert-error{background:var(--danger-bg);border:1px solid var(--danger-line);color:var(--danger)}
/* Kabar netral (mis. program sudah berakhir) — bukan kesalahan donatur, jadi
   jangan diberi warna merah yang terkesan menyalahkan. */
.alert-info{background:var(--brand-50);border:1px solid var(--brand-200);color:var(--brand-800)}
.alert-info a{color:inherit;font-weight:700}
.alert-warn{background:var(--warning-bg);border:1px solid var(--warning-line);color:var(--warning)}
.deadline-past{color:#b45309}
.deadline-past small,.receipt small{font-weight:600;color:var(--muted)}
.proof-done{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--brand-accent);margin:8px 0}
.proof-done .icon{font-size:15px;flex-shrink:0}

/* Konfirmasi via WhatsApp (Fase 4). Sengaja di BAWAH formulir unggah bukti
   dan bergaya sekunder: ini pelengkap, bukan pengganti. Bukti transfer tetap
   arsip verifikasi yang dipegang admin — kalau tombol ini terlihat lebih
   utama, sebagian donatur akan berhenti mengunggah buktinya. */
.confirm-wa{margin-top:16px;padding-top:16px;border-top:1px dashed var(--line);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.confirm-wa span{font-size:13.5px;color:var(--muted)}
.confirm-wa small{font-size:12px;color:var(--muted)}
.thanks-box{text-align:center;margin:18px 0}
.thanks-box h3{font-size:19px;color:var(--brand-dark);margin-bottom:6px}
.thanks-box p{font-size:14px;color:var(--muted)}
/* Pemberitahuan salinan email — sengaja lebih kecil & terpisah jaraknya dari
   kalimat utama: informasi susulan, bukan bagian dari ucapan terima kasihnya. */
.thanks-note{margin-top:10px;font-size:13px}
.success-ico{width:76px;height:76px;border-radius:50%;background:var(--brand-primary);color:#fff;font-size:40px;display:grid;place-items:center;margin:0 auto 14px}
.pay label input[type="radio"]{margin:0}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.tile span{font-size:12.5px;color:var(--muted)}
.tile b{display:block;font-size:21px;margin-top:4px}
.tile.in b{color:var(--brand-accent)} .tile.out b{color:var(--amber)}
/* Tabel data 4-5 kolom tidak mungkin muat utuh di layar ponsel tanpa
   membuat teksnya gepeng/terpotong. Digulir horizontal di dalam wadahnya
   sendiri — halaman tetap tidak ikut bergeser. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:28px;border-radius:var(--radius)}
/* `width:auto` + `min-width:100%` — tabel memenuhi lebar wadah bila muat,
   dan hanya melebar sejauh yang benar-benar dibutuhkan isinya bila tidak.
   Memaksa lebar minimum tetap akan membuat pengguna menggulir lebih jauh
   daripada perlu. */
.table-scroll table{margin-bottom:0;width:auto;min-width:100%}
/* Untuk tabel yang punya kolom teks bebas (keterangan penggunaan dana):
   tanpa lebar minimum, kolomnya terjepit jadi satu-dua kata per baris.
   Digulir sedikit lebih jauh jauh lebih baik daripada terbaca berdesakan. */
.table-scroll--wide table{min-width:600px}
table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:13.5px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)}
th{background:var(--brand-tint);color:var(--brand-dark);font-size:12.5px;white-space:nowrap}
tr:last-child td{border:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

.richtext{font-size:14.5px;line-height:1.75}
.richtext p{margin:0 0 14px}
.richtext h1,.richtext h2,.richtext h3{color:var(--brand-dark);margin:20px 0 10px}
.richtext ul,.richtext ol{margin:0 0 14px 22px}
.richtext a{color:var(--brand-accent)}
.richtext img{max-width:100%;border-radius:10px;margin:10px 0}

/* FAQ — accordion native <details>/<summary>, tanpa JS: paling sederhana &
   tetap berfungsi meski JavaScript gagal dimuat. */
.faq-item{border-bottom:1px solid var(--line);padding:14px 0}
.faq-item:last-child{border-bottom:0}
.faq-item summary{cursor:pointer;font-weight:700;font-size:14.5px;color:var(--ink);list-style:none;display:flex;align-items:center;gap:10px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:'+';color:var(--brand-accent);font-size:18px;font-weight:800;flex-shrink:0;width:18px;text-align:center}
.faq-item[open] summary::before{content:'–'}
.faq-item p{margin-top:10px;padding-left:28px;font-size:14px;color:var(--muted);line-height:1.7}
/* FAQ mikro DI DALAM form donasi (C7) — .faq-item apa adanya, hanya
   dikecilkan supaya proporsinya pantas sebagai konten sekunder di dalam
   form, bukan bersaing dengan tombol "Lanjutkan Pembayaran" di bawahnya. */
.donate-faq{margin:14px 0 4px}
.donate-faq .faq-item{padding:9px 0}
.donate-faq .faq-item summary{font-size:13px}
.donate-faq .faq-item summary::before{font-size:15px;width:16px}
.donate-faq .faq-item p{font-size:12.5px;padding-left:24px;margin-top:6px;line-height:1.6}

.legal-doc{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:10px 16px;border:1.5px solid var(--line);border-radius:10px;font-size:13.5px;font-weight:700;color:var(--brand-accent);text-decoration:none}
.legal-doc:hover{background:var(--brand-tint)}

/* ============================================================
   BERANDA YAYASAN — komponen lembaga
   SENGAJA class tersendiri, bukan memakai ulang .card/.tiles milik halaman
   donasi. Bar progres, nominal, dan tombol "Donasi" adalah bahasa visual
   situs penggalangan dana; dipakai di halaman depan lembaga pendidikan ia
   membuat yayasannya terbaca sedang mencari dana, bukan sedang mendidik.
   ============================================================ */

/* Statistik lembaga (tahun berdiri, unit, siswa, guru) — bukan statistik
   donasi. Auto-fit, karena jumlah kartunya berubah-ubah: tiap angka yang
   belum diisi menyembunyikan diri, jadi bisa tampil 1 sampai 4 kartu. */
/* ==========================================================================
   KUTIPAN AYAT / HADITS (partials/home/quote.blade.php)
   Satu-satunya blok beranda yang sengaja dibiarkan lapang: kutipan yang
   dipadatkan bersama blok lain kehilangan justru fungsinya. Latar tint merek
   (bukan gradien gelap) supaya ia terasa tenang, bukan berteriak seperti hero.
   ========================================================================== */
.quote-block{background:var(--brand-50);border:1px solid var(--brand-200);
  border-radius:var(--r-lg);padding:var(--sp-12) var(--sp-10);margin:var(--sp-10) 0;text-align:center}
.quote-block blockquote{font-family:var(--font-head);font-size:var(--fs-xl);
  line-height:1.6;color:var(--brand-900);max-width:60ch;margin:0 auto;font-weight:500}
/* Tanda kutip dekoratif lewat ::before, bukan diketik pengurus — supaya teks
   yang tersimpan tetap bersih dan bisa dipakai ulang (mis. di meta tag). */
.quote-block blockquote::before{content:"\201C";display:block;font-size:56px;
  line-height:.6;color:var(--brand-300);margin-bottom:var(--sp-3)}
.quote-block figcaption{margin-top:var(--sp-5);font-size:var(--fs-xs);
  line-height:var(--lh-xs);font-weight:600;color:var(--brand-action-soft)}
@media(max-width:760px){
  .quote-block{padding:var(--sp-8) var(--sp-5)}
  .quote-block blockquote{font-size:var(--fs-lg);line-height:1.65}
}

/* Flex + `max-width`, BUKAN `grid auto-fit minmax(160px,1fr)`. Dengan
   auto-fit, jalur kosong diciutkan sehingga SATU kartu melar selebar halaman —
   dan satu kartu itu keadaan nyata di instalasi baru: tiga dari empat angka
   diturunkan dari data Unit Pendidikan yang belum diisi, jadi yang tersisa
   cuma "Unit pendidikan". Sebuah angka tunggal membentang 1100px terbaca
   seperti tata letak rusak, bukan seperti statistik.
   `flex:1 1 160px` + `min-width:0` — pola yang sama dengan .hero-copy; dengan
   basis `auto` item justru membungkus lebih dulu sebelum menyusut. */
.inst-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:24px 0}
.inst-stat{flex:1 1 160px;min-width:0;max-width:300px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;text-align:center}
.inst-stat b{display:block;font-size:26px;color:var(--brand-dark);line-height:1.2}
.inst-stat span{display:block;margin-top:4px;font-size:12.5px;color:var(--muted)}

/* Sambutan pimpinan */
.chairman{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap;margin-top:32px}
.chairman-photo{width:190px;height:230px;object-fit:cover;border-radius:var(--radius);flex-shrink:0;border:1px solid var(--line)}
/* min-width:0 — tanpa ini kolom teks menolak menyusut di bawah lebar
   kontennya dan mendorong foto keluar layar di ponsel. */
.chairman-body{flex:1 1 320px;min-width:0}
.chairman-body h2.sec{margin-top:0}
.chairman-message{font-size:14.5px;color:var(--muted);line-height:1.8}
.chairman-name{margin-top:14px;font-weight:800;color:var(--brand-dark);font-size:15px}
.chairman-name span{display:block;font-weight:600;font-size:13px;color:var(--muted)}

/* Grid unit pendidikan */
.unit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.unit-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .15s,transform .15s}
a.unit-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.09);transform:translateY(-2px)}
/* Unit yang belum berdiri: sengaja tidak bisa diklik & diredupkan sedikit —
   menautkannya ke halaman yang belum berisi apa pun membuat lembaganya
   terlihat asal pasang. */
.unit-card--planned{border-style:dashed;background:var(--bg)}
.unit-card-top{height:120px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand-dark),var(--brand-primary));overflow:hidden}
.unit-card-top img{width:100%;height:100%;object-fit:cover}
.unit-card-icon{font-size:44px;line-height:1}
.unit-card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.unit-level{align-self:flex-start;background:var(--brand-tint);color:var(--brand-accent);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:99px}
.unit-card-body h3{font-size:16px;line-height:1.35;color:var(--brand-dark)}
.unit-facts{list-style:none;display:grid;gap:5px;margin-top:auto}
.unit-facts li{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--muted);min-width:0}
.unit-facts b{color:var(--ink);white-space:nowrap}
.unit-soon{margin-top:auto;font-size:12.5px;font-weight:700;color:var(--amber)}

/* Halaman satu unit */
.unit-hero{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap;margin-bottom:8px}
.unit-hero-photo{width:280px;height:200px;object-fit:cover;border-radius:var(--radius);flex-shrink:0;border:1px solid var(--line)}
.unit-hero-copy{flex:1 1 300px;min-width:0}
.unit-hero-copy h1{font-size:26px;line-height:1.25;margin:8px 0 12px;color:var(--brand-dark)}
.unit-desc{font-size:14.5px;color:var(--muted)}

/* Ajakan donasi di beranda lembaga — SATU blok, tanpa angka & tanpa kartu
   campaign. Warna netral (bukan hijau penuh seperti ajakan zakat di hub
   donasi): di sini donasi bukan aksi utama halaman, jadi tampilannya tidak
   boleh berteriak lebih keras daripada unit pendidikan di atasnya. */
.support-cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--brand-primary);border-radius:var(--radius);padding:22px 26px;margin:32px 0}
.support-cta-copy{flex:1 1 320px;min-width:0}
.support-cta-copy h2{font-size:17px;color:var(--brand-dark);margin-bottom:4px}
.support-cta-copy p{font-size:13.5px;color:var(--muted)}
.support-cta-btn{flex-shrink:0;white-space:nowrap}

/* Blok legalitas & kontak di beranda yayasan. Sengaja mengulang sebagian isi
   footer: pada situs lembaga, legalitas adalah alasan orang mempercayakan
   uangnya — terlalu penting untuk hanya hidup di baris terakhir halaman. */
.org-info{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px}
.org-legal{font-size:14px;color:var(--ink);margin-bottom:14px}
.org-contact{list-style:none;display:grid;gap:12px}
/* min-width:0 pada item: alamat panjang tanpa spasi (atau email panjang)
   kalau tidak boleh menyusut akan mendorong kartunya melebihi layar. Pola
   yang sama dipakai .meta, .donors, .receipt, .footer-top. */
.org-contact li{display:flex;gap:14px;font-size:14px;min-width:0;flex-wrap:wrap}
/* Kolom label 130px, bukan 76px: daftar ini juga dipakai halaman unit yang
   labelnya jauh lebih panjang ("Guru & tenaga pendidik") — di 76px ia pecah
   jadi tiga baris dan tabel profilnya terlihat berantakan. */
.org-contact span{flex:0 0 130px;color:var(--muted);font-size:12.5px;padding-top:2px}
.org-contact b{flex:1 1 200px;min-width:0;font-weight:600}

/* Ajakan ke daftar program lengkap, di bawah pratinjau kartu di beranda. */
.see-all{display:flex;justify-content:center;margin-top:22px}

/* Penyaring di halaman /program. Item flex diberi min-width:0 supaya mau
   menyusut di bawah lebar kontennya (pola yang sama dengan .meta & .receipt) —
   tanpa itu baris penyaring meluap di ponsel. */
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:22px}
.filter-field{display:flex;flex-direction:column;gap:6px;flex:1 1 180px;min-width:0}
.filter-search{flex:2 1 240px}
.filter-field label{font-size:12.5px;font-weight:700;color:var(--muted)}
.filter-field input,.filter-field select{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;font-size:14px;font-family:inherit;background:#fff;color:var(--ink)}
.filter-actions{display:flex;gap:8px;flex:0 0 auto}
.filter-actions .btn{padding:10px 18px;font-size:14px}

/* Tautan kwitansi penyaluran di tabel laporan. Beberapa berkas per baris,
   jadi dibuat ringkas (📎 1, 📎 2) supaya kolomnya tidak melebar. */
.receipt-link{display:inline-flex;align-items:center;gap:4px;margin-right:8px;font-size:13px;font-weight:700;color:var(--brand-accent);text-decoration:none;white-space:nowrap}
.receipt-link:hover{text-decoration:underline}

/* Navigasi halaman (lihat partials/pagination.blade.php). */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px}
.pager-btn{padding:9px 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--card);font-size:13.5px;font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap}
.pager-btn:hover{background:var(--brand-tint);border-color:var(--brand-primary)}
.pager-btn.is-off{color:var(--muted);background:var(--bg);border-color:var(--line);cursor:default}
.pager-btn.is-off:hover{background:var(--bg);border-color:var(--line)}
.pager-info{flex:1 1 auto;min-width:0;text-align:center;font-size:13px;font-weight:600;color:var(--ink)}
.pager-info small{display:block;font-weight:400;font-size:12px;color:var(--muted)}

/* Baris meta kartu berita: tanggal + waktu baca. Satu baris, bukan dua —
   kartu berita berdiri di grid yang sama dengan kartu program, dan baris
   tambahan membuat tingginya tidak lagi sejajar. */
.post-meta{display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--muted)}

/* ============================================================
   BLOK BERANDA FASE 3 — transparansi, donatur rutin, kontak
   ============================================================ */

/* Ringkasan alokasi penyaluran. Bar-nya hiasan proporsi belaka — nominalnya
   sudah tertulis di atas tiap bar, jadi bar yang gagal dirender tidak
   menghilangkan satu pun informasi. */
.transparency-total{font-size:14px;color:var(--muted);margin-bottom:14px}
.transparency-total b{font-size:20px;color:var(--brand-action-soft)}
.alloc{list-style:none;display:grid;gap:14px}
.alloc-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:13.5px;margin-bottom:6px}
/* min-width:0 pada label: judul program panjang tanpa ini mendorong nominal
   keluar kartu — pola yang sama dengan .meta, .donors, dan .receipt. */
.alloc-head span{min-width:0}
.alloc-head b{white-space:nowrap;color:var(--ink)}
.alloc-bar{height:8px;border-radius:99px;background:var(--brand-50);overflow:hidden}
.alloc-bar i{display:block;height:100%;border-radius:99px;background:var(--brand-500)}

/* Ajakan donatur rutin. Warna penuh (beda dari .support-cta yang netral):
   ini ajakan paling bernilai di halaman — donatur rutin membuat pengurus
   bisa merencanakan, bukan menambal. */
.recurring{display:flex;align-items:center;gap:22px;flex-wrap:wrap;background:var(--brand-50);border:1px solid var(--brand-200);border-radius:var(--radius);padding:24px 26px;margin:32px 0}
.recurring-copy{flex:1 1 320px;min-width:0}
.recurring-copy h2{font-size:18px;color:var(--brand-900);margin-bottom:6px}
.recurring-copy p{font-size:13.5px;color:var(--muted);line-height:1.7}
/* Penjelasan bahwa TIDAK ada penarikan otomatis. Sengaja tidak dikecilkan
   sampai terbaca seperti cetakan halus: inilah yang membuat orang berani
   menekan tombolnya. */
.recurring-note{margin-top:8px;padding-top:8px;border-top:1px solid var(--brand-200)}
.recurring-btn{flex-shrink:0;white-space:nowrap}

/* Kontak & lokasi. Tanpa peta yang disematkan — lihat catatan di
   partials/home/contact.blade.php soal CSP & Kebijakan Privasi. */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.contact-card{display:flex;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.contact-card>svg{width:22px;height:22px;flex-shrink:0;color:var(--brand-action-soft)}
.contact-card>div{min-width:0}
.contact-card h3{font-size:15px;color:var(--brand-900);margin-bottom:4px}
.contact-card p{font-size:13.5px;color:var(--muted);line-height:1.65}
.contact-card a{color:var(--brand-action-soft);text-decoration:none;font-weight:600}
.contact-card a:hover{text-decoration:underline}
.contact-card>div>a{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-size:13px}
.contact-card>div>a svg{width:13px;height:13px}
.contact-lines{list-style:none;display:grid;gap:7px;font-size:13.5px;color:var(--muted)}
.contact-lines li{min-width:0}
.contact-chip{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--brand-50);color:var(--brand-action-soft);font-size:11px;font-weight:700;white-space:nowrap}

/* ============================================================
   GALERI KEGIATAN (Fase 3, keputusan D2)
   Dipakai halaman /galeri DAN blok pratinjau di beranda. Rasio dikunci
   seragam: foto kegiatan datang dari ponsel pengurus dengan orientasi
   bercampur, dan grid yang tingginya mengikuti tiap foto menghasilkan
   susunan bergerigi yang terbaca seperti halaman rusak.
   ============================================================ */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:6px}
.photo-item{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--brand-50);text-decoration:none}
.photo-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.photo-item:hover img{transform:scale(1.04)}
/* Keterangan di atas gradien, bukan di bawah kartu: memindahkannya keluar
   membuat tinggi tiap kartu bergantung panjang keterangannya lagi — persis
   kegerigian yang rasio seragam di atas dipasang untuk mencegah. */
.photo-caption{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;font-size:12.5px;font-weight:600;line-height:1.45;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,0))}
.photo-caption small{display:block;font-weight:400;font-size:11.5px;color:rgba(255,255,255,.8)}
/* Pratinjau beranda: kartunya lebih kecil supaya 8 foto tidak menghabiskan
   satu layar penuh di tengah beranda. */
.photo-grid--preview{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}

/* Penyaring kategori. Tautan, bukan tombol form — tiap kategori punya URL
   sendiri yang bisa dibagikan. */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chips .chip{padding:7px 14px;border:1.5px solid var(--line);border-radius:999px;background:var(--card);font-size:13px;font-weight:600;color:var(--ink);text-decoration:none}
.chips .chip:hover{border-color:var(--brand-500);background:var(--brand-50)}
/* Selektor memuat kelas induk supaya (0,2,0) mengalahkan `.chips .chip`
   (0,2,0) lewat urutan — keduanya sama kuat, jadi yang menang adalah yang
   ditulis belakangan. Ditulis eksplisit di sini supaya tidak ada yang
   memindahkannya ke atas dan diam-diam mematikan penandaan kategori aktif. */
.chips .chip--on{border-color:var(--brand-action);background:var(--brand-action);color:#fff}

/* Penampil foto. Dibangun JS (public.js) — halaman tanpa JS tidak pernah
   memuat elemen ini sama sekali. */
.lightbox{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;background:rgba(0,0,0,.92)}
.lightbox[hidden]{display:none}
.lightbox-figure{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:100%;max-height:100%;min-width:0}
.lightbox-figure img{max-width:100%;max-height:76vh;object-fit:contain;border-radius:10px;background:#000}
.lightbox-figure figcaption{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;font-size:13.5px;color:rgba(255,255,255,.88);text-align:center;max-width:60ch}
.lightbox-counter{color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
/* Area sentuh >=44px: penampil ini paling sering dipakai di ponsel. */
.lightbox-close,.lightbox-nav{flex-shrink:0;width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.lightbox-close:hover,.lightbox-nav:hover{background:rgba(255,255,255,.22)}
.lightbox-close{position:absolute;top:14px;right:14px;font-size:24px}
.lightbox.is-single .lightbox-nav{display:none}
/* Halaman di belakang dikunci: tanpa ini, mengusap di ponsel menggulir
   halaman di balik penampil dan fotonya seolah bergeser sendiri. */
body.has-lightbox{overflow:hidden}

@media(max-width:520px){
  /* Tombol maju/mundur pindah ke bawah gambar: di layar sempit ia menutupi
     tepi foto yang justru sedang diperiksa. */
  .lightbox{flex-wrap:wrap}
  .lightbox-figure{order:-1;flex:1 1 100%}
  .lightbox-figure img{max-height:64vh}
}

/* ============================================================
   FOOTER
   Latar gelap memakai --brand-dark, ujung gelap palet yang sama dengan
   gradien hero. Aman untuk tema apa pun: ThemePalette::derive() selalu
   mencampur warna utama 55% ke arah hitam, jadi bahkan warna utama
   seputih apa pun tetap menghasilkan latar yang kontras terhadap teks
   putih (>= 4,5:1). Nilai statis di :root menjaga halaman error 5xx —
   yang sengaja tidak memanggil settings() — tetap ikut bergaya.
   ============================================================ */
.site-footer{margin-top:56px;background:var(--brand-dark);color:#fff;border-top:3px solid var(--brand-primary)}
.footer-top{max-width:1080px;margin:0 auto;padding:40px 20px 32px;display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:32px}
/* min-width:0 pada tiap kolom grid: tanpa itu isi tak terpecah (nomor
   rekening, alamat email panjang) memaksa kolomnya melebihi 1fr dan
   seluruh footer meluap ke kanan. */
.footer-top>*{min-width:0}

.footer-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16.5px;color:#fff;text-decoration:none;margin-bottom:14px;line-height:1.35}
.footer-logo .mark{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;font-size:18px;flex-shrink:0}
.footer-logo img.mark{background:#fff;border-color:transparent;object-fit:contain;padding:3px}
.footer-tagline{font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.72);max-width:36em;margin-bottom:18px}

.footer-contact{list-style:none;display:grid;gap:10px;font-size:13.5px}
.footer-contact li{display:flex;gap:10px;align-items:flex-start;min-width:0;color:rgba(255,255,255,.82)}
.footer-contact svg{width:16px;height:16px;flex-shrink:0;margin-top:4px;opacity:.65}
.footer-contact a{color:rgba(255,255,255,.82);text-decoration:none}
.footer-contact a:hover{color:#fff;text-decoration:underline}
/* Penanda kecil "WhatsApp" di sebelah nomor: donatur perlu tahu nomor itu
   bisa dichat, bukan cuma ditelepon — konfirmasi transfer manual di
   Indonesia lazimnya lewat WhatsApp. */
.footer-chip{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:rgba(255,255,255,.14);font-size:11px;font-weight:700;letter-spacing:.02em;white-space:nowrap}

/* Warnanya datang dari `--heading-ink:#fff` di `.site-footer`, bukan ditulis
   ulang di sini — dulu tambalan setempat, sekarang ditangani token. */
.footer-col h2{font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-weight:800;margin-bottom:14px}
.footer-links{list-style:none;display:grid;gap:10px;font-size:13.5px}
.footer-links a{color:rgba(255,255,255,.72);text-decoration:none}
.footer-links a:hover{color:#fff;text-decoration:underline}

.footer-account{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.footer-account-bank{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6)}
/* Angka rekening dibaca digit per digit lalu disalin — jarak antar-karakter
   sedikit dilebarkan supaya tidak salah baca. */
.footer-account b{display:block;font-size:14.5px;color:#fff;letter-spacing:.04em;line-height:1.45}
.footer-account span:not(.footer-account-bank){font-size:12.5px;color:rgba(255,255,255,.7)}
.footer-note{font-size:12px;line-height:1.6;color:rgba(255,255,255,.62);margin-top:10px}

.footer-bottom{border-top:1px solid rgba(255,255,255,.14)}
.footer-bottom-inner{max-width:1080px;margin:0 auto;padding:16px 20px;display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;font-size:12.5px;color:rgba(255,255,255,.6)}

/* ============================================================
   RESPONSIF
   Breakpoint dipilih dari titik di mana tata letaknya benar-benar
   pecah, bukan dari ukuran perangkat tertentu.
   ============================================================ */

/* Tablet & laptop kecil */
@media (max-width: 900px){
  .hero{padding:36px 28px;gap:24px}
  .hero h1{font-size:26px}
  .mosque{font-size:76px}

  /* 4 kolom jadi terlalu sempit: kolom rekening mulai memecah nomornya.
     Kolom merek melebar penuh di atas, tiga kolom sisanya berbagi baris. */
  .footer-top{grid-template-columns:repeat(3,1fr);gap:28px}
  .footer-brand{grid-column:1 / -1}
}

/* Nav tidak lagi muat dalam satu baris → menu pindah ke drawer.
   Pendekatan lama (membungkus jadi 2 baris) sudah mentok di 6 item pada
   320px. Begitu menu dikendalikan admin (Fase 2 `menu_items`), jumlah item
   tidak lagi diketahui saat menulis CSS ini — drawer tidak punya batas itu,
   dan menggulir sendiri tanpa menumbuhkan header lengket. */
/* Ambang drawer sengaja 1024px, JAUH di atas 760px yang dipakai sisa tata
   letak responsif proyek ini. Alasannya diukur, bukan ditebak: `.nav`
   dibatasi max-width 1080px, jadi ruangnya TIDAK bertambah meski layar
   1920px. Dengan nama yayasan asli (~288px setelah dijepit 2 baris) + 6 item
   menu (~532px) + tombol CTA (~147px) + jarak antar-kelompok (72px),
   isinya sudah ~1039px dari 1040px yang tersedia — pas 1px. Di 768px ia
   meluap dan seluruh halaman jadi bisa digeser ke samping.
   Artinya nav horizontal memang hanya muat di layar lebar; memaksanya
   bertahan sampai 760px cuma memindahkan kerusakan ke rentang 761–1024px.
   Dan sejak menu dikendalikan admin (Fase 2), jumlah itemnya tidak lagi bisa
   diketahui saat menulis CSS ini — drawer yang menggulir sendiri adalah satu-
   satunya bentuk yang tidak punya batas atas. */
@media (max-width: 1024px){
  .logo{flex:1 1 auto;min-width:0}
  /* Spacer tidak lagi dipakai memutus baris; nav kini tepat satu baris. */
  .nav .spacer{display:none}
  .nav-toggle{display:grid}
  .nav-cta{flex-shrink:0}

  /* Panel geser dari kanan. `position:fixed` + inset menjadikannya setinggi
     layar, jadi 12 item pun cukup — yang berlebih digulir DI DALAM panel,
     bukan menumbuhkan header. */
  .nav-menu{
    /* Di drawer label boleh membungkus — ruangnya vertikal, tak terbatas. */
    white-space:normal;
    position:fixed;top:0;right:0;bottom:0;
    width:min(78vw,320px);
    flex-direction:column;align-items:stretch;gap:0;
    padding:74px 20px 28px;
    background:var(--card);
    box-shadow:-8px 0 26px rgba(0,0,0,.18);
    z-index:30;
    transform:translateX(100%);
    transition:transform .22s ease;
    overflow-y:auto;
    /* Tanpa ini, menggulir sampai ujung daftar menu ikut menggulir halaman
       di belakangnya. */
    overscroll-behavior:contain;
  }
  .nav-menu.is-open{transform:translateX(0)}
  .nav .nav-menu a{
    display:block;padding:13px 4px;font-size:15px;
    white-space:normal;
    border-bottom:1px solid var(--line);
  }
  .nav .nav-menu a:last-child{border-bottom:0}
  .nav .nav-menu a.active{color:var(--brand-accent)}

  /* Dropdown di drawer: MELIPAT ke dalam daftar, bukan mengambang. Panel
     mengambang di layar 320px akan keluar layar atau menutupi induknya
     sendiri; di sini ruangnya vertikal dan tak terbatas, jadi submenu cukup
     mendorong item di bawahnya. */
  .nav-group{border-bottom:1px solid var(--line)}
  .nav-group:last-child{border-bottom:0}
  .nav-group-toggle{
    width:100%;justify-content:space-between;
    padding:13px 4px;font-size:15px;white-space:normal;text-align:left;
  }
  .nav-submenu{
    position:static;display:none;min-width:0;
    background:none;border:0;box-shadow:none;
    padding:0 0 6px 12px;
  }
  .nav-group.is-open>.nav-submenu{display:flex}
  /* Batas bawah dipindah ke .nav-group supaya tidak ada garis ganda di
     antara item terakhir submenu dan item menu berikutnya. */
  .nav .nav-submenu a{border-bottom:0;padding:10px 8px;font-size:14px}
  /* Jembatan hover tidak berlaku di drawer — di sini submenu dibuka lewat
     ketukan, dan area tak terlihat 12px justru menghalangi ketukan item
     menu tepat di bawahnya. */
  .nav-group::after{content:none}

  /* Halaman di belakang drawer tidak boleh ikut tergulir. Sengaja di dalam
     media query ini: di lebar lebar drawer tidak pernah ada, jadi kelas yang
     tertinggal di <body> tidak boleh membekukan halaman. */
  body.nav-open{overflow:hidden}
}

@media (max-width: 760px){
  .nav{gap:10px 12px;padding:12px 16px}
  .logo{font-size:16px}
  /* `.nav .nav-cta`, bukan `.nav-cta`: aturan dasarnya kini (0,2,1) demi
     mengalahkan `.nav a`, jadi override sempit ini harus setara — kalau
     tidak, padding ponsel diam-diam kalah dan tombolnya tetap seukuran
     desktop di layar 375px. */
  .nav .nav-cta{padding:8px 14px;font-size:13.5px}

  .wrap{padding:20px 16px}
  .panel{padding:16px}
  .hero{padding:28px 20px;border-radius:12px}
  .hero h1{font-size:23px}
  .hero p{font-size:14.5px;margin-bottom:16px}
  .hero .stats{gap:18px 24px;width:100%}
  .mosque{font-size:64px}
  h2.sec{font-size:19px;margin:28px 0 6px}

  /* Foto pimpinan & foto unit: melebar penuh di ponsel, bukan tetap
     190/280px yang menyisakan kolom teks terlalu sempit di sebelahnya. */
  .chairman-photo{width:100%;height:240px}
  .unit-hero-photo{width:100%;height:200px}
  .inst-stat b{font-size:22px}
  .unit-hero-copy h1{font-size:22px}

  .grid{grid-template-columns:1fr;gap:16px}
  .cover{height:190px;font-size:64px}
  .detail h1{font-size:20px}
  /* Panel donasi tidak lagi berdampingan, jadi "menempel" saat digulir
     justru menutupi konten di ponsel. */
  .detail>form.panel{position:static !important}

  .tiles{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
  .tile{padding:14px}
  .tile b{font-size:18px}

  th,td{padding:10px 12px}

  .site-footer{margin-top:36px}
  .footer-top{grid-template-columns:repeat(2,1fr);gap:24px 20px;padding:32px 16px 26px}
  .footer-bottom-inner{padding:14px 16px}
  /* Tombol bantuan mengambang (.help-fab) melayang tepat di sudut kanan
     bawah viewport — di layar sempit ia menutupi baris hak cipta saat
     halaman digulir habis. Ruang ekstra ini yang menjaganya tetap terbaca. */
  .footer-bottom-inner{padding-bottom:66px}
}

/* Ponsel: kolom merek & kartu rekening melebar penuh, tapi DUA daftar tautan
   tetap berdampingan. Ditumpuk semua, footer jadi >1100px — pengunjung yang
   mencari tautan "Cek Status Donasi" harus menggulir jauh melewati daftar
   yang isinya cuma satu kata per baris. */
@media (max-width: 560px){
  .footer-top{grid-template-columns:1fr 1fr;gap:26px 18px}
  .footer-accounts{grid-column:1 / -1}
  .footer-links{font-size:13px}
}

/* Ponsel kecil (iPhone SE, Android 360px) */
@media (max-width: 420px){
  .nav{gap:8px 12px}
  .nav a{font-size:13px}
  .nav .btn-primary{padding:8px 12px;font-size:13px}
  .nav .nav-cta{padding:8px 12px;font-size:13px}
  .logo{font-size:15px}
  .logo .mark{width:32px;height:32px;font-size:16px}

  .hero h1{font-size:21px}
  .hero .stat b{font-size:19px}
  /* 3 kolom nominal jadi terlalu sempit untuk label "Rp 500rb". */
  .amounts{grid-template-columns:repeat(2,1fr)}
  .row3{gap:12px}
  .row3 div{min-width:calc(50% - 6px)}
  .bignum{font-size:20px}

  /* Nomor rekening & kode donasi: jangan sampai terpotong. */
  .paybox{padding:14px}
  .paybox .big{font-size:18px;letter-spacing:.5px}
  .receipt{padding:14px}
  .receipt div{gap:4px}
  .receipt b{text-align:left}

  /* C19 — TIDAK ikut menyusut di bawah 16px/44px pada ponsel sempit. Sebelum
     ada baris ini, layar tersempit (yang paling sering dipakai) justru
     mengembalikan kedua kontrol jalur donasi ini di bawah ambang yang baru
     saja ditegakkan di atas. */
  .pay label{padding:11px 10px}
}

/* Hormati preferensi pengguna yang menonaktifkan animasi. */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}

/* ===== Halaman Bantuan (/bantuan) — juga dipakai ulang di panel admin.
   Semua diberi awalan .help- dan dilingkupi .help-content supaya tidak
   ikut memengaruhi elemen p/h2/h3 polos di halaman lain. ===== */
.help-content{max-width:760px}
.help-content h2{font-size:22px;margin:40px 0 12px;color:var(--brand-dark);scroll-margin-top:80px}
.help-content h2:first-child{margin-top:0}
.help-content h3{font-size:17px;margin:26px 0 8px;color:var(--ink)}
.help-content p{margin:0 0 14px;max-width:68ch}
.help-content ul,.help-content ol{margin:0 0 16px;padding-left:22px;max-width:64ch}
.help-content li{margin-bottom:6px}
.help-content code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.86em;background:var(--brand-tint);color:var(--brand-dark);padding:1px 6px;border-radius:5px}

.help-toc{background:var(--brand-tint);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin-bottom:32px}
.help-toc div{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--brand-accent);margin-bottom:8px}
.help-toc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;max-width:none}
.help-toc a{color:var(--ink);text-decoration:none;font-size:14px}
.help-toc a:hover{color:var(--brand-accent);text-decoration:underline}

.help-step-no{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;margin-right:8px;background:var(--brand-tint);color:var(--brand-accent);font-size:11.5px;font-weight:700}

.help-callout{border-radius:12px;padding:14px 18px;margin:18px 0 22px;border:1px solid var(--line);background:#fff;max-width:64ch}
.help-callout-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.help-callout p{font-size:14px;margin-bottom:0}
.help-callout.note{border-left:4px solid var(--brand-accent)}
.help-callout.note .help-callout-title{color:var(--brand-accent)}
.help-callout.guard{border-left:4px solid #b91c1c}
.help-callout.guard .help-callout-title{color:#b91c1c}

.help-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em;background:var(--brand-tint);color:var(--brand-accent);vertical-align:middle}

.help-shot{margin:18px 0 26px;max-width:100%}
.help-shot-chrome{border:1px solid var(--line);border-radius:10px 10px 0 0;background:#f3f4f6;padding:8px 12px;display:flex;align-items:center;gap:8px}
.help-shot-chrome .dots{display:flex;gap:4px;flex-shrink:0}
.help-shot-chrome .dots span{width:7px;height:7px;border-radius:50%;background:#d1d5db;display:block}
.help-shot-chrome .u{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:6px;padding:2px 9px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.help-shot img{display:block;width:100%;height:auto;border:1px solid var(--line);border-top:none;border-radius:0 0 10px 10px}
.help-shot figcaption{margin-top:8px;font-size:13px;color:var(--muted);max-width:64ch}
.help-shot.admin .help-shot-chrome{background:var(--brand-dark)}
.help-shot.admin .help-shot-chrome .dots span{background:rgba(255,255,255,.35)}
.help-shot.admin .help-shot-chrome .u{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#e5e7eb}

.help-two-up{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:none}
@media (max-width:760px){.help-two-up{grid-template-columns:1fr}}

.help-field-table{width:100%;border-collapse:collapse;margin:10px 0 22px;font-size:13.5px}
.help-field-table th,.help-field-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.help-field-table th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;white-space:nowrap}

/* Tombol bantuan mengambang — sengaja TIDAK ditaruh di .nav: nav sudah padat
   (lihat catatan lebar 320px di CLAUDE.md/proyek ini), menambah satu link teks
   lagi berisiko memaksa baris ketiga. Elemen fixed di luar alur flex nav tidak
   ikut memengaruhi perhitungan lebarnya sama sekali. */
.help-fab{position:fixed;right:18px;bottom:18px;z-index:15;width:48px;height:48px;border-radius:50%;background:var(--brand-accent);color:#fff;display:grid;place-items:center;font-size:20px;font-weight:800;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.22)}
.help-fab:hover{background:var(--brand-dark)}
@media (max-width:760px){.help-fab{width:42px;height:42px;right:14px;bottom:14px;font-size:17px}}

/* ---- Penyaring periode di Laporan Transparansi ----
   Tiga kolom di layar lebar (dua tanggal + tombol), menumpuk di ponsel.
   `align-items:end` supaya tombol sejajar dengan DASAR kotak input, bukan
   dengan labelnya — tanpa itu tombolnya melayang di atas garis input. */
.report-period{display:flex;flex-wrap:wrap;gap:0 16px;align-items:end;margin:4px 0 10px}
/* `min-width:0` + basis 180px: pola yang sama dengan .hero-copy. Tanpa
   min-width, kotak tanggal menolak menyusut dan mendorong tombol keluar
   dari layar di ponsel. */
.report-period .field{flex:1 1 180px;min-width:0;margin:8px 0}
.report-period-actions{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.report-period-actions .btn{padding:11px 18px}
/* Tombol ghost di halaman terang butuh garis sendiri — varian aslinya
   dirancang di atas hero hijau dan tak terlihat di latar putih. */
.report-period-actions .btn-ghost{background:#fff;border:1.5px solid var(--line);color:var(--brand-dark)}
.report-presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.report-presets a{font-size:12.5px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;color:var(--brand-accent);text-decoration:none;background:#fff}
.report-presets a:hover{background:var(--brand-tint);border-color:var(--brand-primary)}
@media (max-width:520px){
  .report-period{gap:0 12px}
  .report-period-actions{width:100%}
  .report-period-actions .btn{flex:1 1 auto;text-align:center}
}

.report-print{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.report-print p{font-size:12.5px;color:var(--muted);margin-top:8px;max-width:52ch}

/* ---- Tampilan cetak halaman publik ----
   Dibuat umum (bukan khusus /laporan) karena berlaku benar untuk halaman
   publik mana pun yang dicetak: navigasi, tombol mengambang, dan form tidak
   punya arti di atas kertas, dan justru memakan halaman pertama.

   Kwitansi donasi TIDAK terpengaruh — halaman itu sengaja berdiri sendiri
   tanpa layouts.public dan punya aturan @media print-nya sendiri. */
@media print{
  header,
  .site-footer,
  .help-fab,
  .nav-scrim,
  .report-period,
  .report-presets,
  .report-print,
  .pagination{display:none !important}

  /* Warna latar tidak ikut tercetak di pengaturan bawaan browser, jadi
     teks putih di atas latar berwarna akan hilang sama sekali di kertas. */
  body{background:#fff;color:#000}
  .wrap{max-width:none;padding:0}
  .tiles{break-inside:avoid}
  .tile{border:1px solid #ccc}

  /* Wadah bergulir jadi tidak ada artinya di kertas — isinya harus
     ditampilkan utuh, bukan terpotong pada lebar layar. */
  .table-scroll{overflow:visible !important}
  table{width:100%;font-size:11px}
  tr{break-inside:avoid}

  /* Tautan bukti kwitansi tidak bisa diklik di kertas; alamatnya dicetak
     supaya tetap bisa ditelusuri. */
  .receipt-link::after{content:" (" attr(href) ")";font-size:9px;word-break:break-all}

  a{text-decoration:none;color:#000}
}
/* Penjelasan saldo minus di Laporan. Kuning, bukan merah: keadaannya sah
   dan lazim — yang perlu dilakukan pembaca adalah MEMBACA, bukan waspada. */
.report-note{background:#fffbeb;border:1px solid #fcd34d;border-left-width:4px;border-radius:8px;padding:12px 14px;font-size:13px;line-height:1.6;color:#78350f;margin:-6px 0 18px}
.report-note a{color:#78350f;font-weight:600}

/* ==========================================================================
   FASE 2 — KERANGKA LAYOUT
   ========================================================================== */

/* — Skip link. Tidak `display:none`: elemen yang disembunyikan begitu tidak
     bisa difokuskan sama sekali, jadi tautannya tak pernah muncul. Digeser
     keluar layar, lalu ditarik kembali saat menerima fokus. — */
.skip-link{position:absolute;left:var(--sp-3);top:-100px;z-index:60;
  background:var(--brand-action);color:#fff;font-weight:600;font-size:var(--fs-xs);
  padding:var(--sp-3) var(--sp-4);border-radius:0 0 var(--r-md) var(--r-md);
  text-decoration:none;transition:top .15s}
.skip-link:focus{top:0}
/* <main tabindex="-1"> perlu supaya lompatannya benar-benar memindahkan fokus,
   bukan cuma menggulir. Tapi fokus itu tidak boleh menggambar cincin — bukan
   kontrol yang bisa ditindaklanjuti. */
main:focus{outline:none}

/* — Header ringkas saat digulir. Padding & logo menyusut; header lengket yang
     memakan ~16% layar di 320px sudah pernah jadi masalah di proyek ini. — */
header{transition:box-shadow .18s}
header.is-compact{box-shadow:var(--sh-md)}
header.is-compact .nav{padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
header.is-compact .logo .mark{width:30px;height:30px}
.nav,.logo .mark{transition:padding .18s,width .18s,height .18s}
@media (prefers-reduced-motion:reduce){
  header,.nav,.logo .mark,.skip-link{transition:none}
}

/* — Area sentuh. 44x44 adalah ambang yang lazim dipakai; tombol menu &
     tautan drawer sebelumnya lebih kecil dari itu. — */
.nav-toggle{min-width:44px;min-height:44px}
@media (max-width:1024px){
  .nav-menu a,.nav-group-toggle{min-height:44px;display:flex;align-items:center}
}

/* — Breadcrumb — */
.breadcrumb{background:var(--surface);border-bottom:1px solid var(--line)}
.breadcrumb-inner{max-width:1080px;margin:0 auto;padding:var(--sp-3) var(--sp-5)}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1);
  font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--muted);margin:0;padding:0}
.breadcrumb li{display:flex;align-items:center;gap:var(--sp-1);min-width:0}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--brand-action);text-decoration:underline}
.breadcrumb svg{width:13px;height:13px;flex-shrink:0;color:var(--muted-soft)}
/* Judul halaman sekarang boleh panjang — dipotong, bukan memaksa baris kedua
   yang membuat tinggi bar berubah-ubah antar halaman. */
.breadcrumb [aria-current]{color:var(--ink);font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(52vw,420px)}

/* — Legalitas di footer — */
.footer-legal{border-top:1px solid rgba(255,255,255,.14)}
.footer-legal-inner{max-width:1080px;margin:0 auto;padding:var(--sp-6) var(--sp-5)}
.footer-legal h2{font-size:var(--fs-xs);line-height:var(--lh-xs);letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:var(--sp-4)}
.footer-legal-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-3)}
.footer-legal-card{display:flex;gap:var(--sp-3);align-items:flex-start;min-width:0;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-xs);line-height:var(--lh-xs);color:#fff}
.footer-legal-card svg{width:19px;height:19px;flex-shrink:0;color:rgba(255,255,255,.7)}
.footer-legal-card span{min-width:0;overflow-wrap:anywhere}
.footer-legal-link{display:inline-flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-4);
  color:#fff;font-weight:600;font-size:var(--fs-xs);text-decoration:underline}
.footer-legal-link svg{width:14px;height:14px}
.footer-legal-note{margin-top:var(--sp-3);font-size:var(--fs-2xs);color:rgba(255,255,255,.62)}

/* — Bar tindakan bawah, HANYA layar sempit. — */
.action-bar{display:none}
@media (max-width:760px){
  .action-bar{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--sp-2);
    position:fixed;left:0;right:0;bottom:0;z-index:20;
    padding:var(--sp-2) var(--sp-3);
    /* Ruang aman iPhone: tanpa ini tombolnya tertutup batang gestur home. */
    padding-bottom:calc(var(--sp-2) + env(safe-area-inset-bottom,0px));
    background:var(--surface);border-top:1px solid var(--line);
    box-shadow:0 -4px 16px rgba(24,28,49,.10);
  }
  .action-bar-item{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
    min-height:46px;border-radius:var(--r-pill);font-weight:600;font-size:var(--fs-xs);
    text-decoration:none;padding:0 var(--sp-3)}
  .action-bar-item svg{width:17px;height:17px;flex-shrink:0}
  .action-bar-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .action-bar-donate{background:var(--brand-action);color:#fff}
  /* Teks gelap: putih di atas hijau WhatsApp hanya 1,98:1. */
  .action-bar-wa{background:var(--wa);color:var(--ink)}

  /* Bar menutupi bagian bawah halaman — isi terakhir & FAB wajib diberi
     ruang, kalau tidak tombol terakhir tiap halaman tidak bisa ditekan. */
  body{padding-bottom:74px}
  .help-fab{bottom:calc(74px + var(--sp-3))}
}

/* — Halaman error: satu bentuk untuk semua kode status. — */
.error-panel{text-align:center}
.error-icon{width:44px;height:44px;color:var(--brand-500);margin:0 auto var(--sp-3)}
.error-panel h1{font-size:var(--fs-2xl);line-height:var(--lh-2xl);margin-bottom:var(--sp-2)}
.error-actions{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap;margin-top:var(--sp-4)}
.error-help{margin-top:var(--sp-4);font-size:var(--fs-xs);color:var(--muted)}
.error-help a{color:var(--brand-action);font-weight:600}

/* ==========================================================================
   FASE 3 — BERANDA
   ========================================================================== */

/* — Hero: judul kalimat, dua ajakan, tiga angka. — */
.hero-cta-main{background:#fff;color:var(--brand-800)}
.hero-cta-main:hover{background:var(--brand-50);color:var(--brand-900)}
.hero-cta-alt{background:rgba(255,255,255,.16);color:#fff}
.hero-cta-alt:hover{background:rgba(255,255,255,.26);color:#fff}

.hero-stats{display:flex;flex-wrap:wrap;gap:var(--sp-8);margin-top:var(--sp-6);
  padding-top:var(--sp-5);border-top:1px solid rgba(255,255,255,.22)}
.hero-stats div{min-width:0}
.hero-stats dt{font-size:var(--fs-2xs);line-height:var(--lh-2xs);letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.78);order:2;margin-top:2px}
/* dd sebelum dt secara visual: angkanya yang harus dibaca lebih dulu, sementara
   urutan DOM tetap dt→dd supaya pasangan istilah/definisinya benar. */
.hero-stats>div{display:flex;flex-direction:column}
.hero-stats dd{order:1;font-family:var(--font-head);font-size:var(--fs-2xl);
  line-height:var(--lh-2xl);font-weight:600;color:#fff;margin:0}

/* — Bar kepercayaan — */
.trustbar{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-5);margin:var(--sp-6) 0;box-shadow:var(--sh-sm)}
.trustbar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--sp-4)}
.trustbar-item{display:flex;gap:var(--sp-3);align-items:flex-start;min-width:0;
  font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--muted)}
.trustbar-item svg{width:20px;height:20px;flex-shrink:0;color:var(--brand-action)}
.trustbar-item span{min-width:0;overflow-wrap:anywhere}
.trustbar-link{display:inline-flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-4);
  color:var(--brand-action);font-weight:600;font-size:var(--fs-xs);text-decoration:none}
.trustbar-link:hover{text-decoration:underline}
.trustbar-link svg{width:14px;height:14px}

/* — Judul & pengantar section — */
.sec-lead{color:var(--muted);font-size:var(--fs-sm);line-height:var(--lh-sm);
  max-width:var(--measure);margin:-6px 0 var(--sp-5)}
.sec-more{margin-top:var(--sp-5);text-align:center}

/* — Layanan — */
.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-4)}
.service-card{display:flex;gap:var(--sp-3);align-items:flex-start;min-width:0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--sp-4)}
.service-card svg{width:22px;height:22px;flex-shrink:0;color:var(--brand-action);margin-top:2px}
.service-card h3{font-size:var(--fs-base);line-height:var(--lh-base);margin-bottom:2px}
.service-card p{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--muted)}

/* — Ikon di meta kartu program (pengganti emoji) — */
.meta-icons span{display:inline-flex;align-items:center;gap:6px}
.meta-icons svg{width:14px;height:14px;flex-shrink:0;color:var(--muted-soft)}

@media (max-width:520px){
  .hero-stats{gap:var(--sp-5)}
  .hero-stats dd{font-size:var(--fs-xl);line-height:var(--lh-xl)}
}
.thumb-icon{width:46px;height:46px;color:#fff;opacity:.9}
/* Lambang cadangan saat logo yayasan belum diunggah. SVG, bukan emoji —
   berlaku untuk instalasi mana pun, bukan cuma yang sudah punya logo. */
.logo .mark svg,.footer-logo .mark svg{width:20px;height:20px}
svg.unit-card-icon{width:38px;height:38px;color:var(--brand-action)}