/* Plus Jakarta Sans — DISERTAKAN SENDIRI di /fonts, bukan dimuat dari
   fonts.googleapis.com. Dua alasan, dan keduanya berdiri sendiri:
   1. CSP publik (script-src 'self', dan sengaja NOL font-src eksternal)
      menegakkan klaim Kebijakan Privasi "halaman publik tidak memuat satu
      pun sumber daya dari server luar" — memuat dari Google akan membuat
      klaim itu berbohong, dan melonggarkan font-src/style-src untuk satu
      font tidak sepadan dengan lubang yang dibukanya.
   2. Konsisten dengan premis proyek ini sejak awal: portabel, tanpa
      ketergantungan CDN, aman dipasang di hosting mana pun tanpa build step.
   Satu berkas variable (wght 200–800, subset latin — cukup untuk Bahasa
   Indonesia) menggantikan kebutuhan 4 berkas statis terpisah. */
@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('/fonts/plus-jakarta-sans.woff2') format('woff2-variations'),
      url('/fonts/plus-jakarta-sans.woff2') format('woff2');
}
:root{
  --green-900:#14532d; --green-700:#15803d; --green-600:#16a34a;
  --green-50:#f0fdf4; --amber:#d97706; --ink:#1f2937; --muted:#6b7280;
  --bg:#f8fafc; --card:#ffffff; --line:#e5e7eb; --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Fallback aslinya (-apple-system dst) dipertahankan APA ADANYA di
   belakang — kalau berkas font ini gagal dimuat karena alasan apa pun,
   halaman jatuh persis ke tampilan lama, bukan font serif bawaan browser. */
body{font-family:'Plus Jakarta Sans',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}

/* 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(--green-900);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(--green-700);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(--green-700)}
.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(--green-700)}
.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(--green-50);color:var(--green-700)}
.nav .nav-submenu a.active{color:var(--green-700);background:var(--green-50)}
/* 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(--green-900);cursor:pointer;padding:0}
.nav-toggle svg{width:22px;height:22px}
.nav-toggle:hover{background:var(--green-50);border-color:var(--green-600)}
/* 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}
.btn{display:inline-block;border:0;cursor:pointer;font-weight:700;border-radius:10px;text-decoration:none;text-align:center;font-family:inherit}
.btn-primary{background:var(--green-600);color:#fff;padding:10px 20px;font-size:14.5px}
.btn-primary:hover{background:var(--green-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 --green-700 (aksen) supaya
   putih di atasnya lolos ambang kontras. Dikunci test. */
.nav .btn-primary{background:var(--green-700);color:#fff}
.nav .btn-primary:hover{background:var(--green-900)}

/* 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{
  background:transparent;
  border:1.5px solid var(--green-600);
  color:var(--green-700);
  padding:9px 18px;
  font-size:14.5px;
}
.nav .nav-cta:hover{background:var(--green-50);color:var(--green-900)}
.btn-ghost{background:var(--green-50);color:var(--green-700);padding:10px 16px;font-size:14px}
.btn-line{background:#fff;border:1.5px solid var(--line);color:var(--ink);padding:10px 16px;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(--green-900),var(--green-700));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}

/* Overlay di atas foto — admin memilih gayanya lewat Pengaturan → Beranda /
   Halaman Donasi (App\Modules\Content\Support\HeroOverlay). EMPAT varian:

   1. `.hero--overlay-dark` (BAWAAN, preset "pengaman") — lapisan gelap wajib
      seperti versi sebelumnya. 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 judul gagal terbaca.
      Sengaja netral (hitam), bukan bertint hijau: warna tema beda tiap
      instalasi (yayasan kedua biru), tint hijau justru bentrok.
   2. `.hero--overlay-light` (preset) — kebalikannya: lapisan putih, dan teks
      ikut berpindah ke gelap lewat `.hero--text-dark` (lihat di bawah).
   3. `.hero--overlay-none` — foto asli, TANPA lapisan sama sekali. Sebagai
      pengganti kontras dari overlay, teks putih diberi text-shadow supaya
      tetap terbaca di kebanyakan foto — bukan jaminan kontras sempurna
      seperti preset gelap, karena memang tidak ada lapisan yang dikontrol.
   4. `.hero--overlay-custom-{dark,light}` — KEBEBASAN admin: warna dasar +
      intensitas (`--hero-overlay-opacity`, 0–1) diatur sendiri lewat slider,
      TANPA batas bawah yang dipaksakan kode seperti preset gelap. Admin yang
      memilih ini bertanggung jawab memeriksa keterbacaannya sendiri —
      dijelaskan di helper text formnya. */
.hero--overlay-dark::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(135deg,rgba(0,0,0,.78),rgba(0,0,0,.62))}
.hero--overlay-light::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,255,255,.68))}
.hero--overlay-none .hero-copy{text-shadow:0 1px 3px rgba(0,0,0,.7),0 2px 14px rgba(0,0,0,.45)}
.hero--overlay-custom-dark::after{content:"";position:absolute;inset:0;z-index:0;background:rgba(0,0,0,var(--hero-overlay-opacity,.7))}
.hero--overlay-custom-light::after{content:"";position:absolute;inset:0;z-index:0;background:rgba(255,255,255,var(--hero-overlay-opacity,.7))}
/* Preset "Terang" & kustom bertema terang: teks putih tidak terbaca di atas
   overlay putih, jadi seluruh isi hero (judul, deskripsi, tombol) pindah ke
   warna gelap. `.hero.hero--text-dark` (0,2,0) WAJIB, bukan `.hero--text-dark`
   sendiri (0,1,0) — jebakan spesifisitas yang sama dengan catatan lain di
   berkas ini: `.hero{color:#fff}` (0,1,0) akan menang bila spesifisitasnya
   disamakan begitu saja. */
.hero.hero--text-dark{color:var(--ink)}
.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}
/* Tombol di dalam hero — SEBELUMNYA inline `style=` di Blade (bg putih solid
   utk primary, bg putih transparan + teks putih utk ghost), yang mengasumsikan
   latar hero selalu gelap (gradien hijau atau overlay gelap). Sejak overlay
   bisa jadi terang (HeroOverlay), tombol ghost butuh varian gelap juga —
   dipindah ke sini supaya bisa dikondisikan lewat `.hero--text-dark`, bukan
   ditulis dua kali dengan tangan di tiap Blade. `.hero .btn-primary` (0,2,0)
   & `.hero .btn-ghost` (0,2,0) WAJIB mengalahkan `.btn-ghost` global
   (0,1,0, var(--green-50) bg) — jebakan spesifisitas yang sama dengan
   `.nav .nav-cta` di atas. Tombol primary TIDAK perlu varian teks-gelap: bg
   putih solid + teks hijau sudah kontras di atas overlay apa pun. */
.hero .btn-primary{background:#fff;color:var(--green-900)}
.hero .btn-ghost{background:rgba(255,255,255,.15);color:#fff}
.hero.hero--text-dark .btn-ghost{background:rgba(0,0,0,.08);color:var(--ink)}
/* 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}
.mosque{font-size:96px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.25))}

h2.sec{font-size:21px;margin:36px 0 6px;color:var(--green-900)}
/* Judul <h1> halaman tanpa hero (Program, Laporan, Dampak, Tentang, FAQ) —
   satu per halaman, lebih besar dari h2.sec supaya hierarkinya tetap terlihat
   di halaman seperti /laporan yang juga punya h2.sec sebagai sub-judul. */
.page-title{font-size:24px;line-height:1.3;margin:6px 0 6px;color:var(--green-900)}
/* max-width:68ch — permintaan "nyaman dibaca" (5 Sep 2026). Sebelum ini
   paragraf pengantar di /donasi melebar sampai ~152 karakter per baris di
   layar 1440px (dua kali lipat batas atas keterbacaan 45-75 karakter) —
   `.wrap` sendiri tidak pernah membatasi lebar teks, hanya lebar halaman.
   Tanpa efek di kolom yang SUDAH lebih sempit dari 68ch (mis. `.detail-body`
   di halaman program). */
.sub{color:var(--muted);font-size:14px;margin-bottom:18px;max-width:68ch}

/* auto-fit + max 340px (bukan auto-fill + 1fr) + justify-content:center —
   permintaan "nyaman dibaca" (5 Sep 2026). auto-fill mempertahankan KOLOM
   KOSONG selebar minmax bila baris terakhir tidak penuh (2 program di grid
   3 kolom sebelumnya tampil rata-kiri dengan satu lubang kosong di kanan,
   bukan di tengah) — auto-fit meruntuhkan kolom yang benar-benar kosong,
   dan batas atas 340px (ganti 1fr) mencegah 2 kartu melebar janggal
   memenuhi lebar penuh saat jumlahnya sedikit. */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,340px));justify-content:center;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{position:relative;height:150px;display:grid;place-items:center;font-size:52px;color:#fff;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}
/* Lapisan gelap tipis di tepi bawah SETIAP thumbnail (foto maupun ikon
   gradien tanpa foto) — murni kerapian visual, bukan demi keterbacaan teks
   (judul & tag kartu ada di `.body` di BAWAH thumb, tidak pernah menumpang
   di atas gambar). Dua gunanya: memberi kartu kesan "selesai" alih-alih
   gambar yang terpotong mentah persis di tepi, dan meredam sedikit gambar
   sampul yang kontrasnya liar (banyak sampul program berasal dari flyer
   WhatsApp, bukan foto polos) tanpa menyembunyikan isinya sama sekali. */
.thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0) 60%,rgba(0,0,0,.22) 100%);pointer-events:none}
/* Tiga varian gradasi thumbnail untuk kartu tanpa foto (program & berita),
   diputar per-kartu supaya grid tidak monoton. SEBELUMNYA hijau/biru
   toska/jingga mati — setiap kartu berita tanpa foto tampil biru toska
   berapa pun warna tema yayasan, dan kartu program ikut menampilkan warna
   yang tidak pernah dipilih admin sama sekali. Sekarang ketiganya kombinasi
   var(--green-900/700/600) yang sama dengan hero & tombol, jadi warnanya
   selalu turunan dari 2 warna yang admin pilih — persis premis ThemePalette:
   "admin pilih dua warna, seluruh gradasi ikut". */
.t1{background:linear-gradient(135deg,var(--green-900),var(--green-600))}
.t2{background:linear-gradient(135deg,var(--green-700),var(--green-900))}
.t3{background:linear-gradient(135deg,var(--green-600),var(--green-700))}
.card .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.tag{align-self:flex-start;background:var(--green-50);color:var(--green-700);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(--green-600);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}

/* Kartu program ringkas (program Selesai di hub donasi, 7 Sep 2026) — tanpa
   sampul/progres/statistik, cuma nama & tautan. min-height menyamakan tinggi
   dasar dengan kartu penuh di sebelahnya (mereka satu `.grid` yang sama)
   supaya barisnya tidak berjenjang aneh saat isi teksnya pendek. */
.card--compact .body{min-height:150px;justify-content:center}
.card--compact-done{color:var(--muted);font-size:12.5px}

.detail{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;align-items:start}
@media(max-width:820px){
  .detail{grid-template-columns:1fr}
  /* Form donasi dipindah lebih ke atas di ponsel — sebelumnya baru terlihat
     setelah menggulir ~3.400px (cerita, galeri, Kabar Terbaru, Penyaluran
     Dana, Donatur Terbaru), keluhan langsung yayasan.
     `.detail-left` (pembungkus cover+detail-head+detail-body, lihat
     campaign-show.blade.php) diberi `display:contents` HANYA di sini —
     box-nya sendiri lenyap, dan ketiga anaknya jadi grid item LANGSUNG
     milik `.detail`, sejajar dengan form. Sekali jadi grid item begitu,
     `order` bisa menyisipkan form di antara "sekilas info" (detail-head)
     dan "isi lengkap" (detail-body) TANPA menyentuh tata letak desktop
     sama sekali — di sana `.detail-left` tetap kotak biasa. */
  .detail-left{display:contents}
  .detail-cover{order:1}
  .detail-head{order:2}
  .detail>form.panel{order:3}
  .detail-body{order:4}
  /* Di lebar penuh kedua panel dijahit jadi satu kotak menyambung (lihat
     aturan `.detail-head`/`.detail-body` di atas) — di sini form disisipkan
     PERSIS di antara keduanya, jadi sambungannya harus dibatalkan supaya
     tiap kotak kembali utuh (border & sudut membulat penuh) dan berjarak
     wajar dari form di antaranya, bukan menempel seolah masih satu kotak. */
  .detail-head{border-bottom:1px solid var(--line);border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);padding-bottom:22px;margin-bottom:0}
  .detail-body{border-top:1px solid var(--line);border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);padding-top:22px}
}

/* Bilah ajakan lengket ke form donasi — markup & penjelasan lengkap di
   campaign-show.blade.php. Tersembunyi di lebar penuh (form sudah tampil
   sebagai kolom sticky di sana); breakpoint 820px sama persis dengan
   `.detail` di atas supaya bilah ini tepat muncul saat form berhenti
   sejajar dengan cerita program. */
.mobile-donate-bar{display:none}
@media(max-width:820px){
  /* Disembunyikan public.js begitu tombol kirim sungguhan sudah di layar —
     bilah yang tetap tampil di situ justru MENUTUPI tombol yang sedang
     dituju donatur (keluhan langsung, 7 Sep 2026).

     Spesifisitas (0,2,0) sengaja lebih tinggi dari `.mobile-donate-bar`
     (0,1,0) di bawahnya DAN berada di dalam media query yang sama —
     ditaruh di luar, `display:flex` di bawah akan menang dan kelas ini
     tidak melakukan apa-apa tanpa satu pun galat. Jebakan spesifisitas
     yang sudah berulang kali tercatat di berkas ini. */
  .mobile-donate-bar.is-hidden{display:none}
  .mobile-donate-bar{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    position:fixed;left:0;right:0;bottom:0;z-index:20;
    background:var(--card);border-top:1px solid var(--line);
    padding:10px 16px;
    /* env(safe-area-inset-bottom) — jarak aman dari gestur home bar iPhone
       tanpa tombol fisik. 0px di perangkat lain, jadi aman ditulis selalu. */
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -4px 16px rgba(0,0,0,.1);
  }
  /* min-width:0 — pola yang sama dipakai .meta>div & .donors li: tanpa ini
     item flex menolak menyusut di bawah lebar kontennya, dan nominal panjang
     (mis. Rp 45.500.872) bisa mendorong tombol keluar layar alih-alih
     terpotong ellipsis di dalam ruang yang tersedia. */
  .mobile-donate-bar>div{min-width:0}
  .mobile-donate-bar span{display:block;font-size:11px;color:var(--muted)}
  .mobile-donate-bar b{display:block;font-size:16px;color:var(--green-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobile-donate-bar .btn{white-space:nowrap;padding:12px 18px;font-size:14px;flex-shrink:0}
}
/* Header sticky (top:0) menutupi ~60-70px teratas — tanpa ini, tautan
   jangkar dari bilah di atas mendaratkan judul form persis di baliknya. */
#donasi-form{scroll-margin-top:76px}
/* Sasaran lompat bilah lengket saat donatur sudah berada di dalam form
   (lihat public.js). scroll-margin-bottom menahannya mendarat tepat di
   balik bilah itu sendiri — bilah baru menyingkir SESUDAH tombolnya
   terlihat, jadi tanpa jarak ini lompatannya berakhir di titik yang
   justru masih tertutup. */
#donateSubmit{scroll-margin-top:76px;scroll-margin-bottom:96px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
/* `.detail-head`+`.detail-body` — dua elemen terpisah di HTML (lihat
   campaign-show.blade.php) supaya bisa diberi `order` sendiri-sendiri di
   ponsel, tapi di lebar penuh keduanya harus tampil sebagai SATU kotak
   menyambung seperti sebelum dipecah — bukan dua kotak dengan garis &
   sudut membulat di tengah. Aturan ini menjahitnya kembali secara visual:
   sisi yang bertemu kehilangan border & sudut membulatnya sendiri. */
/* `display:flow-root` — TANPA ini, margin-bawaan anak terakhir di dalamnya
   (`.row3{margin:14px 0}` bila Ringkasan Program kosong, atau default
   peramban pada `<dl>` bila terisi) MENEROBOS `padding-bottom:0` di bawah
   dan tetap menyisakan celah ~14px antara dua kotak — diverifikasi nyata:
   celah itu ada sebelum baris ini ditambahkan, hilang sesudahnya. */
.detail-head{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;padding-bottom:0;margin-bottom:0;display:flow-root}
.detail-body{border-top:none;border-top-left-radius:0;border-top-right-radius:0;padding-top:14px;margin-top:0}
/* Latar 🕌 di halaman detail program saat belum ada foto sampul. SEBELUMNYA
   hex hijau mati (#166534,#22c55e) — sama seperti .t1/.t2/.t3 sebelum
   diperbaiki [2026-08-12], cover ini menampilkan hijau di situs bertema
   apa pun. Dialihkan ke variabel yang sama dengan .t1 (satu-satunya
   pemakaian, tidak butuh varian rotasi seperti kartu grid). */
.cover{height:260px;border-radius:var(--radius);display:grid;place-items:center;font-size:84px;color:#fff;background:linear-gradient(135deg,var(--green-900),var(--green-600));margin-bottom:18px;overflow:hidden}
.cover img{width:100%;height:100%;object-fit:cover}
.detail h1{font-size:23px;margin-bottom:8px}

/* Ringkasan program terstruktur (D5: 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}
.bignum{font-size:24px;font-weight:800;color:var(--green-700)}
.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(--green-600);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. */
/* max-width:70ch — alasan sama dengan `.sub` di atas. Tidak berefek di
   `.campaign-story` (sudah dibatasi lebar kolom ~625px/82 karakter di
   desktop, sedikit di atas ideal tapi masih wajar) maupun `.program-facts
   dd .prose` (kolomnya jauh lebih sempit) — hanya relevan di tempat teks
   sebelumnya benar-benar melebar penuh `.wrap` (mis. sambutan pimpinan). */
.prose{max-width:70ch}
.prose p{margin:0 0 10px}
.prose p:last-child{margin-bottom:0}
.campaign-story{font-size:14.5px;color:var(--muted)}

/* "Baca Selengkapnya" (partials/prose.blade.php, param collapsible=true) —
   <details> native, pola sama dengan accordion FAQ (.faq-item), tapi
   ditulis sebagai teks bertanda panah, bukan +/- akordeon: ini pintu masuk
   ke paragraf lanjutan sebuah cerita, bukan pertanyaan yang bisa ditutup
   lagi setelah dibaca. */
.prose-more summary{cursor:pointer;list-style:none;color:var(--green-700);font-weight:700;font-size:13.5px;margin-top:2px;display:inline-flex;align-items:center;gap:4px}
.prose-more summary::-webkit-details-marker{display:none}
.prose-more summary::after{content:'↓';transition:transform .15s}
.prose-more[open] summary::after{transform:rotate(180deg)}
.prose-more[open] summary{margin-bottom:8px}

/* 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 14px;margin-top:10px}
.update-photos figure{width:120px}
.update-photos a{display:block;width:120px;height:90px;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--green-50)}
.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 14px;margin-top:10px}
.gallery a{display:block;aspect-ratio:1;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--green-50)}
.gallery img{width:100%;height:100%;object-fit:cover;display:block}
/* Keterangan (lokasi/tanggal, 7 Sep 2026) — opsional per foto, dipakai
   BERSAMA oleh .gallery & .update-photos (lihat GalleryPhotos::resolve()).
   Foto lama tanpa keterangan tidak merender <figcaption> sama sekali
   (dijaga di blade), jadi baris ini tidak perlu menjaga kasus kosong. */
.gallery figcaption,.update-photos figcaption{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.35}
.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(--green-700);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(--green-700);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(--green-600);background:var(--green-50);color:var(--green-700)}
/* 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(--green-700);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}
/* 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(--green-600);border-color:var(--green-600)}
/* Penanda wajib. Merah tua, bukan merah terang: kontras terhadap latar putih
   tetap lolos AA sementara tampilannya tidak terbaca sebagai pesan galat. */
.field label .req{color:#991b1b}
/* 14px, bukan 12px bawaan sebelumnya — permintaan langsung "mudah dipakai
   orang lanjut usia" (5 Sep 2026). 12px jatuh di bawah nyaman baca untuk
   presbiopia (mata tua), dan ini teks yang menjelaskan KENAPA nomor HP
   diminta — donatur yang tak bisa membacanya lebih mungkin membatalkan
   pengisian daripada mengabaikannya. */
.field-hint{display:block;margin-top:4px;font-size:14px;color:var(--muted);line-height:1.45}
/* min-height:44px membuat SELURUH baris (bukan cuma kotak centang ~16px)
   jadi target sentuh (C19) — 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}
.check--multiline{align-items:flex-start}
.check--multiline input{margin-top:4px}
.pay{display:flex;flex-direction:column;gap:6px;margin:10px 0}
/* Padding turun dari 13px→10px, gap dari 10px→8px — permintaan "tidak
   bertele-tele": 4 baris metode bayar sebelumnya ~96px masing-masing
   (murni dari jarak, bukan isi) adalah blok TERBESAR di seluruh form
   (33% tingginya). Tetap ≥44px per baris untuk target sentuh. */
.pay label{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;font-size:16px;cursor:pointer}
.pay label.sel{border-color:var(--green-600);background:var(--green-50)}
.pay .ico{width:32px;height:22px;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:0;min-width:0}
.pay-label-verify{font-size:11.5px;color:var(--muted);font-weight:400}
/* Kotak centang & radio DIPERBESAR dari ~13px bawaan peramban ke 20px
   (5 Sep 2026, "mudah dipakai orang lanjut usia") — target sentuhnya
   SUDAH memenuhi WCAG 2.5.8 lewat label sebaris yang membungkus seluruh
   baris (min-height:44px pada .check, padding pada .pay label), jadi ini
   BUKAN perbaikan target sentuh. Yang diperbaiki adalah KETERLIHATAN:
   kotak 13px terlalu kecil untuk mata presbiopia memastikan tercentang
   atau tidak sebelum submit. */
.check input,
.pay label input[type="radio"]{width:20px;height:20px}
.btn-block{width:100%;padding:14px;font-size:16px;margin-top:8px}
.secure{text-align:center;font-size:12px;color:var(--muted);margin-top:10px}
.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:#fef3c7;color:#92400e}
.b-ok{background:#dcfce7;color:#166534}
.b-no{background:#fee2e2;color:#991b1b}
/* Hijau WhatsApp resmi — sengaja BUKAN warna tema yayasan, karena tombol ini
   menandakan "membuka aplikasi WhatsApp", bukan aksi milik situs ini. */
.btn-wa{background:#25d366;color:#fff;padding:10px 16px;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}
.fundtype-icon{font-size:26px}
.fundtype-card h3{font-size:15.5px;color:var(--green-900)}
.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(--green-700);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}
.campaign-group-title{font-size:16px;color:var(--green-900);margin-bottom:12px}

/* --- 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(--green-50);border:1.5px solid var(--green-600);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(--green-900);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(--green-900);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(--green-600);background:var(--green-50);color:var(--green-900)}
.zakat-basis{font-size:13px;color:var(--muted);background:var(--green-50);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(--green-50);border:1.5px solid var(--green-600);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(--green-900);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(--green-900);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:#f1f5f9;color:#475569}
.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}
.paybox{background:var(--green-50);border:1.5px solid #bbf7d0;border-radius:12px;padding:18px;text-align:center;margin:16px 0}
.paybox .big{font-size:22px;font-weight:800;color:var(--green-900);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(--green-900);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(--green-700);border-radius:8px;background:#fff;color:var(--green-700);font-family:inherit;font-size:12px;font-weight:700;line-height:1.4;white-space:nowrap;cursor:pointer}
.copy-btn:hover{background:var(--green-50)}
.copy-btn.is-copied{background:var(--green-700);border-color:var(--green-700);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 #bbf7d0}
/* 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(--green-700)}
/* 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 #bbf7d0;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:10px;padding:12px;font-size:13.5px;margin:14px 0}
.alert-ok{background:#dcfce7;border:1px solid #86efac;color:#166534}
.alert-error{background:#fee2e2;border:1px solid #fca5a5;color:#991b1b}
/* Kabar netral (mis. program sudah berakhir) — bukan kesalahan donatur, jadi
   jangan diberi warna merah yang terkesan menyalahkan. */
.alert-info{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af}
.alert-info a{color:inherit;font-weight:700}
.alert-warn{background:#fef3c7;border:1px solid #fcd34d;color:#92400e}
.deadline-past{color:#b45309}
.deadline-past small,.receipt small{font-weight:600;color:var(--muted)}
.proof-done{font-size:13px;color:var(--green-700);margin:8px 0}
.thanks-box{text-align:center;margin:18px 0}
.thanks-box h3{font-size:19px;color:var(--green-900);margin-bottom:6px}
.thanks-box p{font-size:14px;color:var(--muted)}
.success-ico{width:76px;height:76px;border-radius:50%;background:var(--green-600);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(--green-700)} .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(--green-50);color:var(--green-900);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(--green-900);margin:20px 0 10px}
.richtext ul,.richtext ol{margin:0 0 14px 22px}
.richtext a{color:var(--green-700)}
.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(--green-700);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}

/* Toggle "Tambah email atau pesan/doa" (5 Sep 2026, .optional-fields) —
   mengumpulkan dua field opsional di balik satu tautan supaya donatur yang
   tak berniat mengisi keduanya tidak perlu melewatinya. Pola +/– SAMA
   PERSIS dengan .faq-item di atas (accordion native, nol JS) — bedanya
   summary ini membuka FIELD FORM sungguhan, bukan teks jawaban, jadi
   warnanya hijau (ajakan), bukan warna teks biasa seperti FAQ. */
.optional-fields{margin:14px 0}
.optional-fields summary{cursor:pointer;list-style:none;color:var(--green-700);font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px}
.optional-fields summary::-webkit-details-marker{display:none}
.optional-fields summary::before{content:'+';font-size:16px;font-weight:800;flex-shrink:0;width:16px;text-align:center}
.optional-fields[open] summary::before{content:'–'}
.optional-fields[open] summary{margin-bottom:10px}
.optional-fields .field:last-child{margin-bottom:0}

/* Struktur Pengurus (halaman Tentang Kami).
   SENGAJA bukan memakai ulang .unit-grid: kartunya jauh lebih kecil (wajah +
   dua baris teks, bukan kartu yang bisa diklik), dan auto-fill dengan minmax
   kecil membuat 3 pengurus tidak melar jadi tiga kartu selebar layar. */
.board-members{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;margin:14px 0 4px}
.board-member{text-align:center;min-width:0}
.board-member img,.board-member span.board-member-initial{width:100%;aspect-ratio:1/1;border-radius:var(--radius);border:1px solid var(--line)}
.board-member img{object-fit:cover;display:block}
/* Tanpa foto: inisial di atas gradasi tema, bukan kotak abu-abu kosong —
   warnanya diturunkan dari tema instalasi, bukan hex mati.
   SELEKTORNYA WAJIB `span.board-member-initial` (0,2,1), bukan
   `.board-member-initial` (0,1,0): aturan jabatan `.board-member span`
   di bawah punya spesifisitas 0,1,1 dan akan MENANG — inisialnya jadi
   teks abu-abu 12,5px yang menempel di tepi atas kotak, bukan huruf
   besar di tengahnya. Cacat ini sudah pernah tayang di sesi ini dan
   hanya ketahuan lewat mata, bukan lewat test. */
.board-member span.board-member-initial{display:grid;place-items:center;margin-top:0;background:linear-gradient(135deg,var(--green-900),var(--green-600));color:#fff;font-size:38px;font-weight:800;line-height:1}
.board-member b{display:block;margin-top:10px;font-size:14px;color:var(--green-900);line-height:1.35}
.board-member span{display:block;margin-top:2px;font-size:12.5px;color:var(--muted);line-height:1.4}

/* Rekening resmi ringkas di bawah hero /donasi.
   Memakai ULANG .bank-accounts/.bank-account-row/.copy-btn milik halaman
   instruksi pembayaran — nomor rekening yang sama harus terbaca sama di
   kedua tempat; yang ditambahkan di sini hanya bingkai & keterangannya. */
.official-accounts{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin:24px 0}
.official-accounts-head h2{font-size:17px;color:var(--green-900)}
.official-accounts-head p{margin-top:2px;font-size:12.5px;color:var(--muted)}
/* Kolom sejajar di layar lebar: rekening yayasan lazim 2–3 buah, dan
   menumpuknya vertikal mendorong seluruh isi halaman turun sebelum
   pengunjung sempat melihat satu pun program. */
@media (min-width:760px){.official-accounts .bank-accounts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}
.official-accounts-note{margin-top:10px;font-size:12.5px;color:var(--muted);line-height:1.6}
.official-accounts-note a{color:var(--green-700);font-weight:700}

/* Testimoni "Kata Mereka" di beranda. */
.testimonials{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin:14px 0 4px}
.testimonial{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:0;min-width:0;display:flex;flex-direction:column;gap:14px}
/* Tanda kutip sebagai ornamen latar, bukan karakter di dalam teks — kutipan
   yang isinya sudah memuat tanda kutip tidak jadi bertumpuk dua. */
.testimonial blockquote{margin:0;font-size:14.5px;line-height:1.75;color:var(--text);position:relative;padding-top:18px}
.testimonial blockquote::before{content:'\201C';position:absolute;top:-6px;left:-2px;font-size:44px;line-height:1;color:var(--green-600);opacity:.28}
.testimonial figcaption{display:flex;align-items:center;gap:12px;margin-top:auto;min-width:0}
.testimonial figcaption img,.testimonial figcaption span.testimonial-initial{width:44px;height:44px;border-radius:50%;flex-shrink:0}
.testimonial figcaption img{object-fit:cover;border:1px solid var(--line)}
/* Spesifisitas WAJIB `span.testimonial-initial` (0,2,1): aturan peran
   `.testimonial-person span` di bawah (0,2,0) belum mengalahkannya, tapi
   pola inilah yang sudah sekali membuat inisial Struktur Pengurus tampil
   sebagai teks abu-abu kecil — jangan diturunkan. */
.testimonial figcaption span.testimonial-initial{display:grid;place-items:center;background:linear-gradient(135deg,var(--green-900),var(--green-600));color:#fff;font-size:18px;font-weight:800;line-height:1}
.testimonial-person{display:flex;flex-direction:column;min-width:0}
.testimonial-person b{font-size:14px;color:var(--green-900);line-height:1.35}
.testimonial-person span{font-size:12.5px;color:var(--muted);line-height:1.4}

.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(--green-700);text-decoration:none}
.legal-doc:hover{background:var(--green-50)}

/* ============================================================
   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. */
.inst-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin:24px 0}
.inst-stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;text-align:center}
.inst-stat-icon{width:24px;height:24px;color:var(--green-600);margin-bottom:8px}
.inst-stat b{display:block;font-size:26px;color:var(--green-900);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(--green-900);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(--green-900),var(--green-600));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(--green-50);color:var(--green-700);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(--green-900)}
.unit-card-desc{font-size:12.5px;color:var(--muted);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.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)}
/* Blok "Mengapa Memilih Kami?" — SENGAJA ikon + judul saja, tanpa deskripsi
   (permintaan eksplisit yayasan). Kartu jauh lebih pendek dari .fundtype-card
   karena tidak menahan teks paragraf. */
.why-us-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:18px 0 8px}
.why-us-item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.why-us-icon{font-size:30px;line-height:1}
.why-us-title{font-size:14px;font-weight:700;color:var(--green-900);line-height:1.4}


/* 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(--green-900)}
/* Logo di sebelah nama (7 Sep 2026, "di judul ada logo"). min-width:0 pada
   h1 wajib di sini — pola yang sama dengan .hero-copy: tanpa itu judul
   panjang menolak menyusut dan mendorong logo keluar baris di layar sempit. */
.unit-title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.unit-title-row h1{margin:0;min-width:0}
.unit-logo{width:48px;height:48px;border-radius:10px;object-fit:contain;background:var(--card);border:1px solid var(--line);padding:3px;flex-shrink:0}
.unit-tagline{font-size:15px;font-weight:600;color:var(--green-700);margin:0 0 10px}
.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. */
/* Kartu "Ajakan Donasi" (support_cta.blade.php). Bentuk dasarnya (tanpa
   banner/logo, class .support-cta--plain) TIDAK BOLEH berubah dari
   sebelum fitur banner/logo ada — instalasi yang belum mengisi keduanya
   tidak boleh tiba-tiba terlihat "ada yang kosong/rusak". Banner & shadow
   hanya muncul begitu admin benar-benar mengisinya. */
.support-cta{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin:32px 0;overflow:hidden;box-shadow:0 6px 20px -12px rgba(0,0,0,.25)}
.support-cta--plain{border-left:4px solid var(--green-600);box-shadow:none}
.support-cta-banner{width:100%;height:180px;object-fit:cover;display:block}
.support-cta-body{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:22px 26px}
/* object-fit:cover: logo dipotong bulat mengambil bagian TENGAH gambar
   (bukan disusutkan utuh dengan sisa ruang kosong) — cocok untuk logo yang
   sudah dirancang persegi, dan bagian pinggir yang terpotong biasanya
   memang bukan bagian penting. Admin diarahkan mengunggah gambar persegi
   lewat helper text di panel supaya tidak ada bagian penting yang hilang. */
.support-cta-logo{flex-shrink:0;width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:center;background:#fff;border:1px solid var(--line)}
.support-cta-copy{flex:1 1 260px;min-width:0}
.support-cta-copy h2{font-size:17px;color:var(--green-900);margin-bottom:4px}
.support-cta-copy p{font-size:13.5px;color:var(--muted)}
.support-cta-btn{flex-shrink:0;white-space:nowrap}

/* Badge kepercayaan di atas blok Legalitas & Kontak (7 Sep 2026) — ringkasan
   sekali-pandang, murni dari data yang sudah diisi admin (lihat
   partials/home/legal.blade.php). list-style dibuang dua kali sengaja:
   pada <ul> DAN tiap <li> — sebagian reset CSS proyek ini hanya menyasar
   salah satunya di context lain, dan bullet yang lolos di sini akan
   terlihat aneh berdampingan dengan ikon emoji. */
.trust-badges{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 18px}
.trust-badges li{list-style:none}
.trust-badges li,.trust-badges a{display:inline-flex;align-items:center;gap:7px;background:var(--green-50);color:var(--green-900);border-radius:99px;padding:8px 16px;font-size:13px;font-weight:700;text-decoration:none}
.trust-badges a:hover{background:var(--green-100,#dcfce7)}

/* 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}
/* Tautan peta: sengaja BLOK di bawah alamatnya, bukan menyambung di ujung
   baris — alamat yayasan biasanya panjang & membungkus, dan tautan yang
   menempel di ujung baris terakhir hampir tak terlihat sebagai tombol. */
.map-link{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:13px;font-weight:700;color:var(--green-700);text-decoration:none}
.map-link:hover{text-decoration:underline}
.map-link svg{width:15px;height:15px;flex-shrink:0}

/* 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-block;margin-right:8px;font-size:13px;font-weight:700;color:var(--green-700);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(--green-50);border-color:var(--green-600)}
.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)}

/* ============================================================
   FOOTER
   Latar gelap memakai --green-900, 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(--green-900);color:#fff;border-top:3px solid var(--green-600)}
.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}
/* Blok tersendiri di bawah alamat, bukan menyambung di ujung baris —
   alasan yang sama dengan .map-link di beranda. */
.footer-map-link{display:inline-block;margin-top:4px;font-weight:700;color:#fff!important}
/* 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}

.footer-col h2{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:#fff;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(--green-700)}

  /* 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){
  /* Dua kolom DIPAKSA, bukan diserahkan ke auto-fill: lebar tersedia di
     dalam .panel pada layar 320px cuma ~254px, jadi minmax mana pun yang
     masih pantas di desktop selalu jatuh ke SATU kolom — dan satu kolom
     membuat tiap foto pengurus jadi kotak selebar layar, sehingga daftar
     delapan pengurus berubah jadi delapan layar penuh yang harus digulir. */
  .board-members{grid-template-columns:1fr 1fr;gap:12px}
  .board-member span.board-member-initial{font-size:30px}

  .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 — target sentuh 44px tetap terjaga di sini TANPA padding ekstra
     (icon 22px + 1 baris teks 16px + verify 1 baris ≈ 42px konten, jadi
     padding sekecil apa pun sudah cukup) — baris ini SEBELUMNYA menaikkan
     padding balik ke 11px/10px justru karena label metode bayar yang
     panjang ("QRIS (semua e-wallet & m-banking)") pecah jadi 2 BARIS
     persis di lebar ini, dan itu yang membuat barisnya jadi 95px (5 Sep
     2026 — permintaan "tidak bertele-tele"). Diperbaiki di akarnya:
     ukuran huruf label dikecilkan sedikit KHUSUS di lebar ini supaya lebih
     mungkin muat 1 baris, bukan menambah padding di sekitar teks yang
     tetap 2 baris. */
  .pay label{padding:8px 10px}
  .pay-label>span:first-child{font-size:14.5px;line-height:1.3}
}

/* 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(--green-900);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(--green-50);color:var(--green-900);padding:1px 6px;border-radius:5px}

.help-toc{background:var(--green-50);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(--green-700);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(--green-700);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(--green-50);color:var(--green-700);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(--green-700)}
.help-callout.note .help-callout-title{color:var(--green-700)}
.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(--green-50);color:var(--green-700);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(--green-900)}
.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(--green-700);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(--green-900)}
@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(--green-900)}
.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(--green-700);text-decoration:none;background:#fff}
.report-presets a:hover{background:var(--green-50);border-color:var(--green-600)}
@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}