/* ===================================================================
   Sistem desain Listrik Masjid — ARSITEKTUR.md §12
   Pemindahan persis dari resources/css/app.css (Tailwind 4) ke CSS biasa.

   Hijau memegang identitas dan navigasi; amber HANYA untuk tombol bayar dan
   status "menyala". Bidang gelap memakai TINTA (hitam kehijauan), bukan hijau
   pekat — supaya situs terasa seperti produk keuangan yang serius, bukan
   brosur organisasi.
   =================================================================== */

:root {
  /* --- Hijau Mihrab: primer ------------------------------------------- */
  --hijau-50: #eef7f3;
  --hijau-100: #d7ede4;
  --hijau-200: #b0dbcb;
  --hijau-400: #47a488;
  --hijau-600: #0e7c61;           /* MEREK */
  --hijau-700: #0b6350;

  /* --- Amber Pelita: aksen -------------------------------------------- */
  --amber-100: #fff3d6;
  --amber-500: #ffb020;           /* CTA UTAMA — teks di atasnya SELALU tinta-900 */
  --amber-600: #f59e0b;

  /* --- Netral: kertas & tinta ----------------------------------------- */
  --kertas: #f6f7f4;
  --garis: #dde3de;
  --abu-500: #6b7c74;
  --abu-700: #4a5c55;
  --tinta-800: #1b2621;
  --tinta-900: #121a17;           /* teks utama DAN bidang gelap */

  /* --- Semantik: selalu berpasangan dengan ikon + label ---------------- */
  --lunas: #15803d;
  --menunggak: #b45309;
  --gagal: #b91c1c;

  /* --- Tipografi ------------------------------------------------------- */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-aksen: "Amiri", "Iowan Old Style", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  /* --- Bayangan: dua tingkat, netral, tanpa warna ---------------------- */
  --shadow-tipis: 0 1px 2px rgb(18 26 23 / 0.06);
  --shadow-kartu: 0 1px 2px rgb(18 26 23 / 0.06), 0 8px 24px -12px rgb(18 26 23 / 0.18);

  --lebar: 72rem;                 /* max-w-6xl */
}

/* ── Dasar ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;

  /* Batang gulir tetap memesan tempatnya walau halamannya tidak bergulir.
     Saat modal terbuka body dikunci overflow:hidden; tanpa gutter ini
     batangnya lenyap dan SELURUH halaman melompat ~15px ke kanan tepat pada
     saat modal muncul. Lompatan itu yang paling terasa "kaku". */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--kertas);
  color: var(--tinta-900);
  font-family: var(--font-sans);
  font-size: 16px;                /* tidak pernah di bawah 16px — ARSITEKTUR.md §12.3 */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  text-wrap: balance;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  font-weight: 700;
}

p { margin: 0 0 1em; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; }

/* Fokus keyboard selalu terlihat. Tidak pernah outline:none. */
:focus-visible {
  outline: 3px solid var(--hijau-600);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Angka rupiah selalu sejajar */
.angka { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }
.aksen { font-family: var(--font-aksen); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sr-only:focus {
  position: absolute; width: auto; height: auto; margin: 0; overflow: visible;
  clip: auto; white-space: normal; top: 0.5rem; left: 0.5rem; z-index: 50;
  background: #fff; padding: 0.5rem 1rem; font-weight: 600; border-radius: 4px;
}

/* ── Ikon ────────────────────────────────────────────────────────────── */
.ikon    { width: 1.25rem;  height: 1.25rem;  flex-shrink: 0; }
.ikon-3  { width: 0.75rem;  height: 0.75rem;  flex-shrink: 0; }
.ikon-35 { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }
.ikon-4  { width: 1rem;     height: 1rem;     flex-shrink: 0; }
.ikon-5  { width: 1.25rem;  height: 1.25rem;  flex-shrink: 0; }

/* ── Tata letak ──────────────────────────────────────────────────────── */
.bungkus { max-width: var(--lebar); margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 640px) { .bungkus { padding-inline: 2rem; } }

.tumpuk { display: flex; min-height: 100vh; flex-direction: column; }
main { flex: 1; }

.kisi-masjid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (min-width: 640px) { .kisi-masjid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 1024px) { .kisi-masjid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/*
   Lima kartu sejajar — dipakai /jelajah lewat .kisi-5.

   Kolomnya turun ke ~205px pada wadah 72rem, dan ukuran kartu bawaan
   (judul 21px, nominal 27px, tombol 15px) tidak muat di lebar itu: tombolnya
   pecah dua baris dan nominal besar meluber. Jadi ukurannya ikut diturunkan
   bersama jumlah kolomnya, bukan dibiarkan apa adanya.

   Naiknya bertahap: 3 kolom sampai 1024px, 4 di antara, 5 sejak 1280px —
   lebar laptop yang paling umum.
*/
@media (min-width: 1024px) {
  .kisi-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }

  .kisi-5 .kartu-badan  { gap: 0.5rem; padding: 1rem 0.875rem 0.75rem; }
  .kisi-5 .kartu-judul  { font-size: 18px; }
  .kisi-5 .kartu-lokasi { font-size: 12.5px; }
  .kisi-5 .kartu-verif  { font-size: 11.5px; }
  .kisi-5 .kartu-kaki   { gap: 0.75rem; padding: 0.5rem 0.875rem 0.875rem; }
  .kisi-5 .kartu-label  { font-size: 11px; }
  .kisi-5 .kartu-nominal { font-size: 21px; }
  .kisi-5 .btn-kartu    { padding: 0.625rem 0.5rem; font-size: 13px; }
}
@media (min-width: 1280px) {
  .kisi-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/*
   Beranda: satu baris penuh, tidak pernah menyisakan kartu yatim.

   Kuerinya mengambil 6 masjid — angka yang pas untuk 2 dan 3 kolom, tapi
   tidak untuk 4 maupun 5. Dibiarkan apa adanya, beranda pada layar lebar
   menampilkan sebaris 5 lalu satu kartu sendirian di bawahnya.

   Yang kelebihan disembunyikan per lebar, bukan dikurangi dari kuerinya:
   di bawah 1024px kolomnya 2 dan keenam kartu tetap terpakai (3 baris x 2),
   jadi memotong kuerinya berarti membuang dua masjid dari layar ponsel —
   justru layar yang paling banyak dipakai.

     < 1024px   2 kolom  -> 6 kartu, 3 baris genap
    1024-1279   4 kolom  -> 4 kartu, sebaris
     >= 1280    5 kolom  -> 5 kartu, sebaris
*/
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .kisi-beranda > :nth-child(n+5) { display: none; }
}
@media (min-width: 1280px) {
  .kisi-beranda > :nth-child(n+6) { display: none; }
}

/* ── Tombol ──────────────────────────────────────────────────────────── */
/* Tombol utama: amber + tinta. Teks putih di atas amber DILARANG (1,8:1). */
.btn-utama, .btn-sekunder, .btn-halus {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 8px; font-weight: 700; text-decoration: none; cursor: pointer;
  font-family: inherit;
  transition: background-color .15s, border-color .15s, color .15s, transform .05s;
}
.btn-utama {
  background: var(--amber-500); color: var(--tinta-900);
  padding: 0.75rem 1.25rem; font-size: 15px; border: 0;
}
.btn-utama:hover { background: var(--amber-600); color: var(--tinta-900); }
.btn-utama:active { transform: translateY(1px); }
.btn-utama:disabled { cursor: not-allowed; opacity: 0.5; }

.btn-sekunder {
  border: 1.5px solid var(--hijau-600); color: var(--hijau-600); background: transparent;
  padding: 0.75rem 1.25rem; font-size: 15px;
}
.btn-sekunder:hover { background: var(--hijau-50); color: var(--hijau-600); }
.btn-sekunder:active { transform: translateY(1px); }

.btn-halus {
  border: 1px solid var(--garis); background: #fff; color: var(--abu-700);
  padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600;
}
.btn-halus:hover { border-color: var(--abu-500); }

.btn-penuh { width: 100%; }

/* Tombol di dalam kartu: lebih rapat di layar sempit. */
.btn-kartu { min-height: 2.25rem; padding: 0.5rem; font-size: 11px; line-height: 1.25; }
@media (min-width: 640px) {
  .btn-kartu { min-height: 0; padding: 0.75rem 1.25rem; font-size: 15px; line-height: 1.5; }
}

/* ── Kartu & chip ────────────────────────────────────────────────────── */
.kartu {
  border-radius: 14px; border: 1px solid var(--garis); background: #fff;
  box-shadow: var(--shadow-kartu);
}

.chip {
  display: inline-flex; align-items: center; gap: 0.375rem;
  border-radius: 999px; padding: 0.25rem 0.625rem;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.025em; text-transform: uppercase;
  max-width: 100%;
}
.chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-lunas     { background: var(--hijau-100); color: var(--lunas); }
.chip-menunggak { background: var(--amber-100); color: var(--menunggak); }
.chip-terkunci  { background: var(--amber-100); color: var(--menunggak); }
.chip-netral    { background: var(--kertas);    color: var(--abu-700); }

.chip-kartu { gap: 0.25rem; padding: 0.25rem 0.5rem; font-size: 9px; letter-spacing: normal; }
.chip-kartu svg { width: 0.75rem; height: 0.75rem; }
@media (min-width: 640px) {
  .chip-kartu { gap: 0.375rem; padding-inline: 0.625rem; font-size: 11.5px; letter-spacing: 0.025em; }
  .chip-kartu svg { width: 0.875rem; height: 0.875rem; }
}

.label-atas {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--hijau-600); text-transform: uppercase;
}

.kolom {
  width: 100%; border-radius: 8px; border: 1px solid var(--garis); background: #fff;
  padding: 0.625rem 0.875rem; font-size: 15px; color: var(--tinta-900);
  font-family: inherit; transition: border-color .15s;
}
.kolom::placeholder { color: var(--abu-500); }
.kolom:focus { border-color: var(--hijau-600); outline: none; }

/* ── Prosa (halaman statis & artikel) ────────────────────────────────── */
.prosa { font-size: 16.5px; line-height: 1.75; color: var(--abu-700); }
.prosa h2 {
  margin: 2.5rem 0 0.75rem; font-family: var(--font-aksen);
  font-size: 26px; line-height: 1.25; font-weight: 700; color: var(--tinta-900);
}
.prosa h3 { margin: 1.75rem 0 0.5rem; font-size: 18px; font-weight: 700; color: var(--tinta-900); }
.prosa p { margin-bottom: 1rem; }
.prosa ul { margin-bottom: 1rem; padding-left: 1.25rem; list-style: disc; }
.prosa ul li + li { margin-top: 0.375rem; }
.prosa strong { font-weight: 600; color: var(--tinta-900); }
.prosa a { font-weight: 600; color: var(--hijau-600); text-decoration: underline; text-underline-offset: 2px; }

/* ── Kepala ──────────────────────────────────────────────────────────── */
.kepala {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--garis);
  background: color-mix(in srgb, var(--kertas) 95%, transparent);
  backdrop-filter: blur(8px);
}
.kepala-isi { display: flex; height: 4rem; align-items: center; justify-content: space-between; gap: 1rem; }

.merek {
  display: inline-flex; align-items: center; flex-shrink: 0;
  font-size: 19px; line-height: 1; font-weight: 800; letter-spacing: -0.02em;
  color: var(--tinta-900); text-decoration: none;
}
.merek-terang { color: #fff; }

.nav-utama { display: none; align-items: center; gap: 1.75rem; }
.nav-utama a { font-size: 14.5px; font-weight: 600; color: var(--abu-700); text-decoration: none; transition: color .15s; }
.nav-utama a:hover { color: var(--hijau-600); }
.nav-aksi { display: none; align-items: center; gap: 0.75rem; }
.nav-aksi .btn-utama { padding: 0.625rem 1rem; font-size: 14px; }

.tombol-menu {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: 8px; border: 1px solid var(--garis); background: transparent; cursor: pointer;
  color: var(--tinta-900);
}
.tombol-menu::-webkit-details-marker { display: none; }
.tombol-menu::marker { content: ""; }

@media (min-width: 1024px) {
  .nav-utama, .nav-aksi { display: flex; }
  .menu-bungkus { display: none; }
}

/* Menu mobile — dibuka lewat <details>, tanpa JavaScript sama sekali. */
.menu-bungkus { list-style: none; }
.menu-bungkus > summary { list-style: none; }
.menu-mobile { border-top: 1px solid var(--garis); background: #fff; position: absolute; left: 0; right: 0; }
.menu-mobile nav { display: flex; flex-direction: column; gap: 0.25rem; padding-block: 1rem; }
.menu-mobile a { border-radius: 8px; padding: 0.75rem; font-weight: 600; color: var(--abu-700); text-decoration: none; }
.menu-mobile a:hover { background: var(--hijau-50); }
.menu-mobile .btn-utama { margin-top: 0.5rem; color: var(--tinta-900); }

/* Ikon X hanya muncul saat menu terbuka, ikon Menu saat tertutup. */
.menu-bungkus .ikon-tutup { display: none; }
.menu-bungkus[open] .ikon-buka { display: none; }
.menu-bungkus[open] .ikon-tutup { display: block; }

/* ── Remah roti ──────────────────────────────────────────────────────── */
/* Pita putih sendiri di bawah kepala, bukan menempel di isi. <ol>-nya memakai
   .bungkus, jadi lebar dan tepinya ikut isi halaman. Jangan pakai shorthand
   `margin`/`padding` di sini: `.remah ol` lebih spesifik daripada `.bungkus`,
   sehingga shorthand-nya menimpa margin-inline:auto dan padding-inline milik
   .bungkus, dan remahnya jatuh menempel ke tepi kiri jendela. */
.remah { border-bottom: 1px solid var(--garis); background: #fff; }
.remah ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem;
  list-style: none; margin-block: 0; padding-block: 0.75rem;
  font-size: 13px; color: var(--abu-700);
}
.remah li { display: flex; align-items: center; gap: 0.375rem; }
.remah li + li::before { content: "\203A"; color: var(--abu-500); }
.remah a { color: inherit; text-decoration: none; }
.remah a:hover { color: var(--hijau-600); }
.remah [aria-current] { font-weight: 600; color: var(--tinta-900); }

/* ── Kaki ────────────────────────────────────────────────────────────── */
.kaki { margin-top: 5rem; background: var(--tinta-900); color: rgb(255 255 255 / 0.7); }
.kaki-kisi { display: grid; gap: 2.5rem; padding-block: 3.5rem; }
@media (min-width: 768px) { .kaki-kisi { grid-template-columns: 1.4fr 1fr 1fr; } }
.kaki-ringkas { margin-top: 1rem; max-width: 24rem; font-size: 14.5px; line-height: 1.625; }
.kaki-email { margin-top: 1.25rem; font-family: var(--font-mono); font-size: 12.5px; color: rgb(255 255 255 / 0.45); }
.kaki h2 {
  margin: 0 0 0.75rem; font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--amber-500); text-transform: uppercase;
}
.kaki ul { list-style: none; margin: 0; padding: 0; font-size: 14.5px; }
.kaki ul li + li { margin-top: 0.625rem; }
.kaki a { color: inherit; text-decoration: none; }
.kaki a:hover { color: #fff; }
.kaki-bawah { border-top: 1px solid rgb(255 255 255 / 0.1); }
.kaki-bawah p { margin-block: 0; padding-block: 1.25rem; font-size: 13px; color: rgb(255 255 255 / 0.45); }

/* ── Kartu masjid ────────────────────────────────────────────────────── */
.kartu-masjid { display: flex; flex-direction: column; overflow: hidden; transition: border-color .15s; }
.kartu-masjid:hover { border-color: var(--hijau-200); }
.kartu-gambar { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--hijau-50); }
.kartu-gambar img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.kartu-gambar:hover img { transform: scale(1.03); }

/* Kalau belum ada foto asli: tampilkan lambang, bukan foto stok. Foto stok
   generik adalah salah satu ciri halaman buatan mesin. ARSITEKTUR.md §12.5 */
.kartu-kosong {
  display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;
  background: var(--hijau-50); color: var(--hijau-600);
}
.kartu-kosong svg { width: 5rem; height: 5rem; }

.kartu-badan { display: flex; flex-direction: column; gap: 0.375rem; padding: 0.75rem 0.75rem 0.625rem; }
.kartu-judul { font-family: var(--font-aksen); font-size: 16px; line-height: 1.15; font-weight: 700; margin: 0; }
.kartu-judul a { text-decoration: none; }
.kartu-judul a:hover { color: var(--hijau-700); }
.kartu-lokasi {
  display: flex; align-items: flex-start; gap: 0.25rem; margin: 0;
  font-size: 11px; line-height: 1.25; color: var(--abu-700);
}
.kartu-verif {
  display: flex; align-items: center; gap: 0.25rem; margin: 0;
  font-size: 10.5px; font-weight: 600; color: var(--hijau-600);
}
.kartu-kaki { margin-top: auto; display: flex; flex-direction: column; gap: 0.625rem; padding: 0.75rem 0.75rem 0.75rem; }
.kartu-label { margin: 0; font-size: 10px; font-weight: 500; color: var(--abu-700); }
/* Nominal TIDAK PERNAH dipotong: "Rp 12.450.0…" terbaca sebagai angka lain. */
.kartu-nominal {
  margin-top: 0.25rem; font-family: var(--font-mono); font-size: 17px; line-height: 1.25;
  font-weight: 600; letter-spacing: -0.01em;
}
.sembunyi-sempit { display: none; }

@media (min-width: 640px) {
  .kartu-badan { gap: 0.625rem; padding: 1.25rem 1.25rem 1rem; }
  .kartu-judul { font-size: 21px; line-height: 1.25; }
  .kartu-lokasi { align-items: center; gap: 0.375rem; font-size: 13.5px; line-height: 1.5; }
  .kartu-verif { gap: 0.375rem; font-size: 12.5px; }
  .kartu-kaki { gap: 0.875rem; padding: 1.25rem 1.25rem 1.25rem; }
  .kartu-label { font-size: 12px; }
  .kartu-nominal { font-size: 27px; }
  .sembunyi-sempit { display: inline; }
}

/* ── Halaman entitas masjid ──────────────────────────────────────────── */
.masjid-judul { font-family: var(--font-aksen); font-size: clamp(28px, 5vw, 40px); line-height: 1.1; margin-bottom: 0.5rem; }
.masjid-foto { width: 100%; border-radius: 14px; margin-top: 1.5rem; aspect-ratio: 16 / 9; object-fit: cover; }

.blok { margin-top: 2.5rem; }
.blok > h2 { font-family: var(--font-aksen); font-size: 26px; line-height: 1.25; margin-bottom: 0.75rem; }
.blok-sub { margin-top: -0.25rem; color: var(--abu-500); font-size: 14px; }
.catatan { color: var(--abu-500); font-size: 13.5px; }

.jadwal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; list-style: none; margin: 1rem 0 0; padding: 0; }
@media (min-width: 640px) { .jadwal { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.jadwal li { border-radius: 14px; border: 1px solid var(--garis); background: #fff; padding: 0.75rem 0.5rem; text-align: center; }
.jadwal-nama { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--abu-500); text-transform: uppercase; }
.jadwal time { font-family: var(--font-mono); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }

.rincian { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: 0.625rem 1.5rem; margin: 0; font-size: 15px; }
.rincian dt { color: var(--abu-500); }
.rincian dd { margin: 0; font-weight: 600; }

.tabel-gulir { overflow-x: auto; border-radius: 14px; border: 1px solid var(--garis); background: #fff; }
.tabel { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabel th, .tabel td { text-align: left; padding: 0.75rem 1rem; white-space: nowrap; }
.tabel thead th {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--abu-500);
  text-transform: uppercase; border-bottom: 1px solid var(--garis);
}
.tabel tbody tr + tr td { border-top: 1px solid var(--garis); }
.tabel .kanan { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.daftar { margin: 0; padding-left: 1.15rem; }
.daftar li + li { margin-top: 0.375rem; }

.galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.875rem; }
.galeri figure { margin: 0; }
.galeri img { border-radius: 14px; aspect-ratio: 4 / 3; object-fit: cover; }
.galeri figcaption { font-size: 13px; color: var(--abu-500); margin-top: 0.375rem; }

.blok-peringatan { border-radius: 14px; background: var(--amber-100); padding: 1rem 1.25rem; }
.blok-peringatan h2 { font-size: 16px; font-family: var(--font-sans); margin-bottom: 0.5rem; }

.hero-aksi { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }


.bagian { padding-block: 3rem; }
.bagian-kepala h2 { font-family: var(--font-aksen); font-size: 30px; line-height: 1.2; margin: 0; }
.bagian-kepala p { margin: 0.375rem 0 0; color: var(--abu-700); font-size: 14.5px; }

.tautan-lanjut { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 14.5px; font-weight: 600; color: var(--hijau-600); text-decoration: none; }
.tautan-lanjut:hover { text-decoration: underline; }

/* ── Jelajah & wilayah ───────────────────────────────────────────────── */
.saring { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; margin-bottom: 1.75rem; }
.saring .kolom { max-width: 22rem; }

.daftar-wilayah { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.75rem; list-style: none; margin: 0; padding: 0; }
.daftar-wilayah a {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  border-radius: 8px; border: 1px solid var(--garis); background: #fff;
  padding: 0.75rem 1rem; font-size: 14.5px; font-weight: 600; text-decoration: none;
  transition: border-color .15s;
}
.daftar-wilayah a:hover { border-color: var(--hijau-400); }
.daftar-wilayah .jumlah { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--abu-500); }

.halaman-nomor { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: center; margin-top: 2.5rem; }
.halaman-nomor a, .halaman-nomor span {
  display: inline-flex; align-items: center; gap: 0.25rem; min-width: 2.5rem; justify-content: center;
  border-radius: 8px; border: 1px solid var(--garis); background: #fff;
  padding: 0.5rem 0.75rem; font-size: 14px; font-weight: 600; text-decoration: none;
}
.halaman-nomor .kini { background: var(--hijau-600); border-color: var(--hijau-600); color: #fff; }
.halaman-nomor .mati { opacity: 0.45; }

.kosong { border-radius: 14px; border: 1px dashed var(--garis); padding: 3rem 1.5rem; text-align: center; color: var(--abu-700); }

/* ── Struk ───────────────────────────────────────────────────────────── */
.struk { max-width: 44rem; margin-inline: auto; padding-block: 2rem; }
.struk .kartu { padding: 1.75rem; }
.struk-kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--garis); padding-bottom: 1.25rem; }
.struk-kode { font-family: var(--font-mono); font-size: 13px; color: var(--abu-500); }
.struk-baris { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.5rem; font-size: 15px; }
.struk-baris dt { color: var(--abu-700); }
.struk-baris dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.struk-total { border-top: 1px solid var(--garis); margin-top: 0.75rem; padding-top: 0.875rem; font-size: 18px; font-weight: 700; }

/* ── Artikel ─────────────────────────────────────────────────────────── */
.artikel { max-width: 46rem; margin-inline: auto; padding-block: 2rem 1rem; }
.artikel h1 { font-family: var(--font-aksen); font-size: clamp(28px, 5vw, 42px); line-height: 1.12; }
.artikel-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; color: var(--abu-500); font-size: 13.5px; margin-bottom: 2rem; }


/* ── Halaman statis ──────────────────────────────────────────────────── */
.statis { max-width: 46rem; margin-inline: auto; padding-block: 2.5rem 1rem; }
.statis h1 { font-family: var(--font-aksen); font-size: clamp(28px, 5vw, 42px); line-height: 1.12; margin-bottom: 1.5rem; }

/* ── Galat ───────────────────────────────────────────────────────────── */
.galat { text-align: center; padding-block: 5rem; }
.galat h1 { font-family: var(--font-mono); font-size: 4rem; color: var(--hijau-600); margin-bottom: 0.25rem; }
.galat p { color: var(--abu-700); }

/* ── Cetak ───────────────────────────────────────────────────────────── */
/* Halaman struk menawarkan "Cetak / simpan PDF", jadi hasil cetaknya harus
   berupa dokumen, bukan tangkapan layar situs. */
@media print {
  .cetak-sembunyi { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  main { margin: 0; padding: 0; }
  .kartu { box-shadow: none; border-color: #9aa5a0; break-inside: avoid; }
  a { text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===================================================================
   Halaman entitas masjid — tata letak dua kolom dengan sisi lengket.
   Pemindahan dari Pages/Publik/Masjid.vue
   =================================================================== */

.masjid-kisi { display: grid; gap: 2rem; padding-block: 2.5rem; }
@media (min-width: 1024px) {
  .masjid-kisi { grid-template-columns: 1.6fr 1fr; gap: 3rem; }
}

.masjid-judul {
  margin: 0.75rem 0 0; font-family: var(--font-aksen);
  font-size: 34px; line-height: 1.12; font-weight: 700;
}
@media (min-width: 640px) { .masjid-judul { font-size: 42px; } }

.masjid-alamat {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0.625rem 0 0; font-size: 15px; color: var(--abu-700);
}
.masjid-verif {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0.375rem 0 0; font-size: 14px; font-weight: 600; color: var(--hijau-600);
}
.masjid-foto { margin-top: 1.75rem; aspect-ratio: 16 / 9; overflow: hidden; }
.masjid-foto img { width: 100%; height: 100%; object-fit: cover; }

.bagian-masjid { margin-top: 2rem; }
.bagian-masjid > h2 { font-family: var(--font-aksen); font-size: 24px; font-weight: 700; margin: 0; }
.bagian-masjid + .bagian-masjid { margin-top: 2.5rem; }

.profil { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; margin: 1rem 0 0; }
@media (min-width: 640px) { .profil { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.profil dt { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--abu-700); text-transform: uppercase; }
.profil dd { margin: 0.125rem 0 0; font-weight: 600; }
.profil dd.angka { font-family: var(--font-mono); font-weight: 500; }

/* Daftar dalam kartu: garis pemisah antar baris. */
.daftar-kartu { list-style: none; margin: 1rem 0 0; padding: 0; overflow: hidden; }
.daftar-kartu li + li { border-top: 1px solid var(--garis); }
.daftar-baris {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; text-decoration: none; transition: background-color .15s;
}
a.daftar-baris:hover { background: var(--kertas); }
.daftar-baris .utama { min-width: 0; }
.daftar-baris .judul { margin: 0; font-size: 14.5px; font-weight: 600; }
.daftar-baris .sub { margin: 0; font-family: var(--font-mono); font-size: 12px; color: var(--abu-500); }
.daftar-baris .nilai { flex-shrink: 0; font-family: var(--font-mono); font-size: 14.5px; font-weight: 600; }

.daftar-kajian { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.25rem; }
.daftar-kajian svg { margin-top: 0.125rem; color: var(--hijau-600); }
.daftar-kajian p { margin: 0; }
.daftar-kajian .judul { font-size: 14.5px; font-weight: 600; }
.daftar-kajian .sub { font-size: 13.5px; color: var(--abu-700); }

.kosong-halus {
  margin-top: 1rem; border-radius: 8px; border: 1px dashed var(--garis);
  padding: 2rem 1.25rem; font-size: 14.5px; color: var(--abu-700);
}

/* Kolom samping */
.sisi { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 1024px) { .sisi { position: sticky; top: 6rem; align-self: start; } }
.sisi .kartu { padding: 1.5rem; }
.sisi h2 { font-size: 15px; font-weight: 700; margin: 0; }

.sisi-label { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--abu-700); text-transform: uppercase; }
.sisi-nominal {
  margin: 0.375rem 0 0; font-family: var(--font-mono); font-size: 28px; line-height: 1.25;
  font-weight: 600; overflow-wrap: break-word;
}
@media (min-width: 640px) { .sisi-nominal { font-size: 32px; } }
.sisi-ket { margin: 0.5rem 0 0; font-size: 13.5px; color: var(--abu-700); }
.sisi .btn-utama, .sisi .btn-sekunder { margin-top: 1.25rem; width: 100%; }
.sisi-catatan { margin-top: 1.25rem; border-radius: 8px; padding: 0.75rem 1rem; font-size: 13.5px; }
.sisi-catatan-kunci { background: var(--amber-100); color: var(--menunggak); font-weight: 600; }
.sisi-catatan-netral { background: var(--kertas); color: var(--abu-700); }
.sisi-catatan a { text-decoration: underline; text-underline-offset: 2px; }
.sisi-ajak { margin: 0.375rem 0 0; font-size: 13.5px; line-height: 1.625; color: var(--abu-700); }

/* Jadwal sholat di kolom samping */
.sisi-jadwal { padding: 0 !important; overflow: hidden; }
.sisi-jadwal-kepala { border-bottom: 1px solid var(--garis); background: var(--hijau-50); padding: 0.875rem 1.25rem; }
.sisi-jadwal-kepala p { margin: 0; font-size: 12.5px; color: var(--abu-700); }
.sisi-jadwal dl { margin: 0; }
.sisi-jadwal .baris { display: flex; align-items: center; justify-content: space-between; padding: 0.625rem 1.25rem; }
.sisi-jadwal .baris + .baris { border-top: 1px solid var(--garis); }
.sisi-jadwal dt { font-size: 14px; font-weight: 500; text-transform: capitalize; }
.sisi-jadwal dd { margin: 0; font-family: var(--font-mono); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Tautan internal di kaki halaman: mencegah halaman yatim. */
.sekitar { border-top: 1px solid var(--garis); background: #fff; padding-block: 3.5rem; }
.sekitar h2 { font-family: var(--font-aksen); font-size: 26px; font-weight: 700; margin: 0 0 1.5rem; }

/* ===================================================================
   Halaman prosa — pemindahan dari Components/layout/HalamanProsa.vue
   =================================================================== */
.prosa-kepala { border-bottom: 1px solid var(--garis); background: #fff; }
.prosa-kepala .isi { max-width: 48rem; margin-inline: auto; padding-block: 3rem; }
@media (min-width: 1024px) { .prosa-kepala .isi { padding-block: 4rem; } }
.prosa-kepala h1 {
  margin: 0.5rem 0 0; font-family: var(--font-aksen);
  font-size: 34px; line-height: 1.12; font-weight: 700;
}
@media (min-width: 640px) { .prosa-kepala h1 { font-size: 44px; } }
.prosa-intro { margin: 1rem 0 0; font-size: 17px; line-height: 1.625; color: var(--abu-700); }

.prosa-badan { max-width: 48rem; margin-inline: auto; padding-block: 3rem; }
.prosa-bawah { border-top: 1px solid var(--garis); background: #fff; padding-block: 3rem; }
.prosa-bawah .isi { max-width: 48rem; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.prosa-bawah p { margin: 0; font-size: 15.5px; font-weight: 600; }

/* Daftar berlapis bernomor — penomorannya membawa informasi, bukan hiasan. */
.lapis { list-style: none; margin: 2rem 0; padding: 0; }
.lapis li { display: flex; gap: 1.25rem; padding: 1.5rem; }
.lapis li + li { margin-top: 1.25rem; }
.lapis .nomor {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0;
  border-radius: 999px; background: var(--hijau-600); color: #fff;
  font-family: var(--font-mono); font-size: 14px; font-weight: 600;
}
.lapis h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--tinta-900); }
.lapis p { margin: 0.375rem 0 0; font-size: 14.5px; line-height: 1.625; color: var(--abu-700); }

/* ===================================================================
   Beranda — pemindahan dari Pages/Publik/Beranda.vue
   =================================================================== */

/* Hero. Versi lama memakai Embla (JavaScript); di sini scroll-snap CSS —
   tetap bisa digeser jari di ponsel, tanpa satu baris JS pun. */
.hero-geser { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hero-geser::-webkit-scrollbar { display: none; }
.hero-slide { position: relative; min-width: 0; flex: 0 0 100%; scroll-snap-align: start; }
.hero-bidang { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--tinta-900); }
@media (min-width: 640px) { .hero-bidang { aspect-ratio: 16 / 9; } }
@media (min-width: 1024px) { .hero-bidang { aspect-ratio: 21 / 8; } }
.hero-bidang > img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }

/* Bukan dekorasi melainkan scrim: tanpanya teks putih tidak terbaca di atas
   foto terang. Gradien dekoratif tetap dilarang. ARSITEKTUR.md §12.4 */
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(18 26 23 / 0.95), rgb(18 26 23 / 0.7) 45%, rgb(18 26 23 / 0.2));
}
.hero-isi { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.hero-isi > div { width: 100%; padding-bottom: 2.5rem; }
@media (min-width: 1024px) { .hero-isi > div { padding-bottom: 4rem; } }
.hero-teks { max-width: 42rem; }
.hero-teks h1, .hero-teks h2 {
  font-family: var(--font-aksen); font-size: 32px; line-height: 1.1; font-weight: 700; color: #fff; margin: 0;
}
@media (min-width: 640px) { .hero-teks h1, .hero-teks h2 { font-size: 42px; } }
@media (min-width: 1024px) { .hero-teks h1, .hero-teks h2 { font-size: 52px; } }
.hero-teks p { margin: 0.75rem 0 0; max-width: 36rem; font-size: 15.5px; line-height: 1.625; color: rgb(255 255 255 / 0.85); }
@media (min-width: 640px) { .hero-teks p { font-size: 17px; } }
.hero-aksi { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.hero-aksi .btn-sekunder { border-color: #fff; color: #fff; }
.hero-aksi .btn-sekunder:hover { background: rgb(255 255 255 / 0.12); color: #fff; }

/* Pita angka: tetap satu baris di semua ukuran layar.
   KEPUTUSAN_IMPLEMENTASI §3 — label 8px tidak terbaca di Android 360px,
   dinaikkan ke 10px dan nominal dibiarkan turun baris alih-alih dipotong. */
.pita-angka { border-bottom: 1px solid var(--garis); background: #fff; }
.pita-angka dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block: 0; padding-block: 1.25rem; }
@media (min-width: 640px) { .pita-angka dl { padding-block: 2.25rem; } }
.pita-angka > dl > div { min-width: 0; padding-inline: 0.375rem; }
.pita-angka > dl > div + div { border-left: 1px solid var(--garis); }
@media (min-width: 640px) { .pita-angka > dl > div { padding-inline: 1rem; } }
@media (min-width: 1024px) { .pita-angka > dl > div { padding-inline: 1.5rem; } }
.pita-angka dt { font-size: 10px; line-height: 1.2; font-weight: 700; color: var(--abu-700); text-transform: uppercase; }
@media (min-width: 640px) { .pita-angka dt { letter-spacing: 0.08em; } }
@media (min-width: 1024px) { .pita-angka dt { font-size: 12px; } }
.pita-angka dd { margin: 0.375rem 0 0; font-family: var(--font-mono); font-size: 17px; line-height: 1.25; font-weight: 600; }
.pita-angka dd.kecil { font-size: 13px; overflow-wrap: break-word; }
.pita-angka dd.perhatian { color: var(--menunggak); }
@media (min-width: 640px) { .pita-angka dd { font-size: 22px; } .pita-angka dd.kecil { font-size: 19px; } }
@media (min-width: 1024px) { .pita-angka dd, .pita-angka dd.kecil { font-size: 26px; } }
.pita-angka a { text-decoration: none; }
.pita-angka a:hover { color: var(--hijau-600); }

/* Bagian putih & bagian biasa */
.pita-putih { border-top: 1px solid var(--garis); border-bottom: 1px solid var(--garis); background: #fff; padding-block: 4rem; }
@media (min-width: 1024px) { .pita-putih { padding-block: 5rem; } }
.pita-biasa { padding-block: 4rem; }
@media (min-width: 1024px) { .pita-biasa { padding-block: 5rem; } }

.judul-bagian { margin: 0.5rem 0 0; font-family: var(--font-aksen); font-size: 30px; line-height: 1.25; font-weight: 700; }
@media (min-width: 640px) { .judul-bagian { font-size: 38px; } }
.kepala-bagian { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.kepala-bagian .ket { margin: 0.5rem 0 0; max-width: 36rem; font-size: 15px; color: var(--abu-700); }

.kisi-langkah { display: grid; gap: 1.5rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .kisi-langkah { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kisi-langkah li { padding: 1.5rem; }
/*
   Angkanya berdiri sendiri, tanpa pembungkus dan tanpa ikon di sampingnya.

   Sebelumnya angka dan ikon dibungkus <div class="kepala"> — nama yang sama
   persis dengan kepala situs di baris 270. Kartu langkah ikut kebagian
   seluruh gaya kepala situs: latar kertas, garis bawah, backdrop-filter,
   bahkan position:sticky dan z-index:40. Itulah pita abu yang terlihat
   memanjang di dalam tiap kartu — bukan hiasan yang sengaja dipasang,
   melainkan kepala situs yang bocor lewat nama kelas yang kebetulan sama.
*/
.kisi-langkah .nomor {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px;
  background: var(--hijau-600); color: #fff; font-family: var(--font-mono); font-size: 14px; font-weight: 600;
}
.kisi-langkah h3 { margin: 1rem 0 0; font-size: 17px; font-weight: 700; }
.kisi-langkah p { margin: 0.375rem 0 0; font-size: 14.5px; line-height: 1.625; color: var(--abu-700); }

.kisi-pembeda { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .kisi-pembeda { grid-template-columns: 1.1fr 1fr; gap: 4rem; } }
.daftar-pembeda { list-style: none; margin: 1.75rem 0 0; padding: 0; }
.daftar-pembeda li { display: flex; gap: 1rem; }
.daftar-pembeda li + li { margin-top: 1.5rem; }
.daftar-pembeda svg { margin-top: 0.125rem; color: var(--hijau-600); }
.daftar-pembeda h3 { margin: 0; font-size: 16.5px; font-weight: 700; }
.daftar-pembeda p { margin: 0.25rem 0 0; font-size: 14.5px; line-height: 1.625; color: var(--abu-700); }

.panel-struk { overflow: hidden; }
.panel-struk > h3 { margin: 0; border-bottom: 1px solid var(--garis); background: var(--hijau-50); padding: 1rem 1.5rem; font-size: 15px; font-weight: 700; }
.panel-struk ul { list-style: none; margin: 0; padding: 0; }
.panel-struk li + li { border-top: 1px solid var(--garis); }
.panel-struk .kaki-tautan {
  display: block; border-top: 1px solid var(--garis); padding: 0.875rem 1.5rem; text-align: center;
  font-size: 14px; font-weight: 600; color: var(--hijau-600); text-decoration: none;
}
.panel-struk .kaki-tautan:hover { background: var(--hijau-50); }

/* Sisi pasokan: takmir. README §13.1 — hambatan pertumbuhan ada di sini. */
.pita-gelap { background: var(--tinta-900); color: #fff; padding-block: 4rem; }
@media (min-width: 1024px) { .pita-gelap { padding-block: 5rem; } }
.pita-gelap .isi { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .pita-gelap .isi { grid-template-columns: 1.3fr 1fr; align-items: center; } }
.pita-gelap .label { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--amber-500); text-transform: uppercase; }
.pita-gelap h2 { margin: 0.5rem 0 0; font-family: var(--font-aksen); font-size: 30px; line-height: 1.25; font-weight: 700; }
@media (min-width: 640px) { .pita-gelap h2 { font-size: 38px; } }
.pita-gelap p.ket { margin: 0.75rem 0 0; max-width: 36rem; font-size: 15.5px; line-height: 1.625; color: rgb(255 255 255 / 0.75); }
.pita-gelap .aksi { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (min-width: 1024px) { .pita-gelap .aksi { justify-content: flex-end; } }

.kisi-artikel { display: grid; gap: 1.5rem; margin-top: 2.25rem; }
@media (min-width: 768px) { .kisi-artikel { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kartu-artikel { display: flex; flex-direction: column; padding: 1.5rem; }
.kartu-artikel .rumpun { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: 0.025em; color: var(--hijau-600); text-transform: uppercase; }
.kartu-artikel h3 { margin: 0.5rem 0 0; font-size: 17px; line-height: 1.375; font-weight: 700; }
.kartu-artikel h3 a { text-decoration: none; }
.kartu-artikel h3 a:hover { color: var(--hijau-700); }
.kartu-artikel .ringkas { margin: 0.5rem 0 0; font-size: 14.5px; line-height: 1.625; color: var(--abu-700); }
.kartu-artikel .tanggal { margin: auto 0 0; padding-top: 1rem; font-family: var(--font-mono); font-size: 12px; color: var(--abu-500); }

.kosong-kartu {
  margin-top: 2.25rem; border-radius: 14px; border: 1px dashed var(--garis);
  padding: 2.5rem; text-align: center; color: var(--abu-700);
}

/* ===================================================================
   Transparansi, donasi, tambah masjid
   =================================================================== */
.lebar-5 { max-width: 64rem !important; }

.transparansi { padding-block: 3rem; max-width: 64rem; }
.panel-angka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; }
.panel-angka > div { min-width: 0; padding: 1rem 0.625rem; }
.panel-angka > div + div { border-left: 1px solid var(--garis); }
@media (min-width: 640px) { .panel-angka > div { padding: 1.75rem; } }
.panel-angka .sorot { background: var(--hijau-50); }
.panel-angka .sorot .label, .panel-angka .sorot .nilai { color: var(--hijau-700); }
.panel-angka .netral { background: var(--kertas); }
.panel-angka .label {
  margin: 0; font-size: 11px; line-height: 1.25; font-weight: 700;
  color: var(--abu-700); text-transform: uppercase;
}
@media (min-width: 640px) { .panel-angka .label { font-size: 12px; letter-spacing: 0.1em; } }
.panel-angka .nilai { margin: 0.375rem 0 0; font-family: var(--font-mono); font-size: 18px; line-height: 1.25; font-weight: 600; }
.panel-angka .nilai.panjang { font-size: 15px; overflow-wrap: break-word; }
@media (min-width: 640px) {
  .panel-angka .nilai { margin-top: 0.5rem; font-size: 25px; line-height: 1; }
  .panel-angka .nilai.panjang { font-size: 25px; }
}
@media (min-width: 1024px) { .panel-angka .nilai, .panel-angka .nilai.panjang { font-size: 30px; } }

.judul-catatan { margin: 3.5rem 0 0; font-family: var(--font-aksen); font-size: 26px; font-weight: 700; }
.tabel-struk { min-width: 35rem; }
.tabel-struk thead { background: var(--hijau-50); }
.tabel-struk thead th { color: var(--tinta-900); letter-spacing: normal; font-size: 14.5px; text-transform: none; }
.kode-struk { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--hijau-600); text-decoration: underline; text-underline-offset: 2px; }

/* Donasi & tambah masjid */
.langkah-donasi { display: grid; gap: 1.5rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .langkah-donasi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.langkah-donasi li { padding: 1.5rem; }

.tanya { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.tanya li + li { margin-top: 0.75rem; }
.tanya details { border-radius: 14px; border: 1px solid var(--garis); background: #fff; }
.tanya summary {
  cursor: pointer; padding: 1rem 1.25rem; font-size: 15.5px; font-weight: 600;
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.tanya summary::-webkit-details-marker { display: none; }
.tanya summary::after { content: "+"; font-family: var(--font-mono); font-size: 20px; color: var(--hijau-600); }
.tanya details[open] summary::after { content: "\2212"; }
.tanya .jawab { border-top: 1px solid var(--garis); padding: 1rem 1.25rem; font-size: 14.5px; line-height: 1.7; color: var(--abu-700); }
.tanya .jawab p { margin: 0; }

.form-kirim { max-width: 42rem; margin-inline: auto; padding-block: 3rem; }
.form-kirim .kartu { padding: 1.75rem; }
.bidang { display: flex; flex-direction: column; gap: 0.375rem; }
.bidang + .bidang { margin-top: 1.25rem; }
.bidang label { font-size: 14px; font-weight: 600; }
.bidang .bantu { font-size: 13px; color: var(--abu-500); }
textarea.kolom { min-height: 7rem; resize: vertical; }

/* ===================================================================
   Panel admin — /admin
   Bidang gelap dipakai untuk kepala panel supaya operator langsung tahu
   ia sedang berada di area yang mengubah data, bukan halaman publik.
   =================================================================== */

.panel { background: var(--kertas); }


.panel-subjudul { font-family: var(--font-aksen); font-size: 22px; margin: 0 0 1rem; }
/*
   Margin atasnya dulu -1rem, dan itu menarik baris ini NAIK 16px sampai
   menimpa judul di atasnya — terbaca di layar sebagai dua baris teks yang
   saling tindih. Kedua pemakainya (Setelan dan halaman tinjau kontribusi)
   sama-sama meletakkannya persis di bawah h1.panel-judul, dan h1 itu
   marginnya sudah 0, jadi tidak ada apa pun yang perlu ditarik.

   Sekarang jaraknya sama dengan .panel-ket, yang dipakai tiga belas halaman
   panel lain untuk keperluan yang sama.
*/
.panel-meta { margin: 0.375rem 0 1.75rem; font-size: 13.5px; color: var(--abu-700); display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* Kartu SLA */
.panel-kartu-kisi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 900px) { .panel-kartu-kisi { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.panel-kartu { display: block; padding: 1.25rem; text-decoration: none; transition: border-color .15s; }
.panel-kartu:hover { border-color: var(--hijau-400); }
.panel-kartu .label { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--abu-700); text-transform: uppercase; }
.panel-kartu .nilai { margin: 0.5rem 0 0; font-family: var(--font-mono); font-size: 26px; line-height: 1.1; font-weight: 600; }
.panel-kartu .catatan { display: flex; align-items: center; gap: 0.3rem; margin: 0.375rem 0 0; font-size: 12.5px; }
/* Status disampaikan lewat warna DAN ikon DAN teks - tidak pernah warna saja. */
.panel-peringatan { border-color: var(--amber-500); }
.panel-peringatan .catatan { color: var(--menunggak); font-weight: 600; }
.panel-kritis { border-color: var(--gagal); }
.panel-kritis .catatan { color: var(--gagal); font-weight: 700; }
.panel-kritis .nilai { color: var(--gagal); }

/* Tab saring */
.panel-tab { display: flex; flex-wrap: wrap; gap: 0.5rem; border-bottom: 1px solid var(--garis); }
.panel-tab a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.6rem 0.9rem; font-size: 14px; font-weight: 600;
  color: var(--abu-700); text-decoration: none; border-bottom: 2px solid transparent;
}
.panel-tab a:hover { color: var(--hijau-600); }
.panel-tab a.kini { color: var(--hijau-700); border-bottom-color: var(--hijau-600); }
.panel-tab .jumlah {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  background: var(--kertas); border: 1px solid var(--garis); border-radius: 999px; padding: 0.05rem 0.4rem;
}

/* Antrean yang menua ditandai, supaya tidak tenggelam di bawah yang baru. */
.tabel td.menua { color: var(--menunggak); font-weight: 600; }
.tanda-sensitif { color: var(--menunggak); vertical-align: middle; margin-left: 0.25rem; }

/* Halaman tinjau */
.remah-panel { margin: 0 0 1rem; font-size: 13.5px; }
.remah-panel a { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--abu-700); text-decoration: none; }
.remah-panel a:hover { color: var(--hijau-600); }

.panel-dua-kolom { display: grid; gap: 1.5rem; }
@media (min-width: 1000px) { .panel-dua-kolom { grid-template-columns: 1.5fr 1fr; align-items: start; } }
.panel-blok { padding: 1.5rem; }
.panel-blok + .panel-blok { margin-top: 1.25rem; }
.panel-blok h2 { font-size: 16px; font-weight: 700; margin: 0 0 1rem; }
.panel-blok .rincian { grid-template-columns: minmax(7rem, auto) 1fr; font-size: 14.5px; }
.panel-blok .rincian dd { font-weight: 500; }
@media (min-width: 1000px) { .panel-keputusan { position: sticky; top: 1.5rem; } }

/* Nomor pelanggan hanya boleh muncul di layar operator, tidak pernah di publik. */
.nilai-sensitif {
  background: var(--amber-100); border-radius: 4px; padding: 0.1rem 0.35rem;
  font-weight: 600; letter-spacing: 0.02em;
}

/* Halaman masuk */
.panel-masuk { max-width: 26rem; margin-inline: auto; padding-block: 4rem 5rem; }
.panel-masuk .kartu { padding: 2rem; }
.panel-masuk h1 { font-family: var(--font-aksen); font-size: 28px; margin: 0.25rem 0 0; }
.panel-masuk-ket { margin: 0.5rem 0 1.75rem; font-size: 14.5px; color: var(--abu-700); }

/* Kolom wajib yang tidak terkirim — operator harus melihatnya, bukan menebak. */
.kurang-data {
  margin-top: 1.25rem; border-radius: 8px; border: 1px solid var(--amber-500);
  background: var(--amber-100); padding: 0.875rem 1rem;
}
.kurang-data .judul {
  display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.5rem;
  font-size: 14px; font-weight: 700; color: var(--menunggak);
}
.kurang-data ul { margin: 0; padding-left: 1.6rem; font-size: 14px; color: var(--menunggak); }
.kurang-data li + li { margin-top: 0.2rem; }
.kurang-data .bantu { margin: 0.6rem 0 0; color: var(--abu-700); }

/* ===================================================================
   Panel admin — rangka sidebar
   =================================================================== */

.panel-rangka { display: flex; min-height: 100vh; }

/* Sidebar */
.panel-sidebar {
  display: flex; flex-direction: column;
  width: 16rem; min-height: 100vh;
  background: var(--tinta-900); color: rgb(255 255 255 / 0.72);
  padding: 1.25rem 0.75rem 1rem;
}
.panel-merek {
  display: block; padding: 0 0.5rem 1.25rem;
  font-size: 18px; font-weight: 800; letter-spacing: -0.02em;
  color: #fff; text-decoration: none;
}

.panel-menu {
  display: flex; align-items: center; gap: 0.65rem;
  border-radius: 8px; padding: 0.55rem 0.65rem;
  font-size: 14.5px; font-weight: 600; color: rgb(255 255 255 / 0.72);
  text-decoration: none; transition: background-color .12s, color .12s;
}
.panel-menu:hover { background: rgb(255 255 255 / 0.07); color: #fff; }
.panel-menu.aktif { background: var(--hijau-600); color: #fff; }
.panel-menu.aktif svg { color: #fff; }
.panel-menu > span:first-of-type { flex: 1; min-width: 0; }
.panel-menu.mati { color: rgb(255 255 255 / 0.3); cursor: default; }

.lencana-jumlah {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  background: var(--amber-500); color: var(--tinta-900);
  border-radius: 999px; padding: 0.05rem 0.42rem;
}
.panel-menu.aktif .lencana-jumlah { background: #fff; color: var(--hijau-700); }
.lencana-segera {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgb(255 255 255 / 0.35); border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 999px; padding: 0.05rem 0.4rem;
}

/* Kelompok menu — <details>, tanpa JavaScript */
.panel-kelompok { margin-top: 0.85rem; }
.panel-kelompok > summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.3rem 0.65rem; cursor: pointer; list-style: none;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em;
  color: rgb(255 255 255 / 0.4); text-transform: uppercase;
}
.panel-kelompok > summary::-webkit-details-marker { display: none; }
.panel-kelompok > summary:hover { color: rgb(255 255 255 / 0.7); }
.panel-kelompok .panah { transition: transform .15s; }
.panel-kelompok[open] .panah { transform: rotate(90deg); }

.panel-sidebar-kaki { margin-top: auto; padding-top: 1rem; border-top: 1px solid rgb(255 255 255 / 0.1); }
.panel-sidebar-kaki a {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.65rem;
  font-size: 13px; color: rgb(255 255 255 / 0.55); text-decoration: none;
}
.panel-sidebar-kaki a:hover { color: #fff; }

/* Buka-tutup sidebar: kotak centang tersembunyi, bukan <details>.
   <details> yang tertutup disembunyikan browser lewat mekanisme internal yang
   tidak bisa dilawan `display` pada anaknya, sehingga sidebar ikut hilang di
   layar lebar. Cara ini murni CSS dan berperilaku sama di semua peramban. */
.toggle-menu { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.panel-sidebar-tombol { display: none; }

@media (max-width: 899px) {
  .panel-rangka { flex-direction: column; }
  .panel-sidebar-tombol {
    display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
    position: sticky; top: 0; z-index: 40;
    background: var(--tinta-900); color: #fff;
    padding: 0.85rem 1.25rem; font-weight: 600; font-size: 14.5px;
  }
  .panel-sidebar-tombol .ikon-tutup { display: none; }
  .toggle-menu:checked ~ .panel-sidebar-tombol .ikon-buka { display: none; }
  .toggle-menu:checked ~ .panel-sidebar-tombol .ikon-tutup { display: block; }

  .panel-sidebar { display: none; width: 100%; min-height: 0; padding-top: 0; }
  .toggle-menu:checked ~ .panel-sidebar { display: flex; }
  .panel-merek { display: none; }
}

/* Fokus keyboard tetap terlihat walau kotak centangnya tersembunyi. */
.toggle-menu:focus-visible ~ .panel-sidebar-tombol { outline: 3px solid var(--hijau-400); outline-offset: -3px; }

@media (min-width: 900px) {
  .panel-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}

/* Area isi */
.panel-utama { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.panel-atas {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid var(--garis); background: #fff;
  padding: 0.85rem 1.5rem;
}
.panel-atas-jalur { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--abu-700); }
.panel-aku { display: flex; align-items: center; gap: 0.75rem; font-size: 13px; }
.panel-aku form { margin: 0; }
.panel-aku-nama { font-weight: 600; color: var(--tinta-900); }
.panel-aku-peran {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--hijau-100); color: var(--hijau-700); border-radius: 999px; padding: 0.1rem 0.45rem;
}
.panel-keluar {
  border: 1px solid var(--garis); background: #fff; color: var(--abu-700);
  border-radius: 8px; padding: 0.35rem 0.75rem; font: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer;
}
.panel-keluar:hover { border-color: var(--abu-500); }

.panel-isi { padding: 1.75rem 1.5rem 4rem; max-width: 78rem; }
.panel-judul { font-family: var(--font-aksen); font-size: 28px; line-height: 1.2; margin: 0; }
.panel-ket { margin: 0.375rem 0 0; font-size: 14px; color: var(--abu-700); max-width: 46rem; }
.panel-kepala-halaman {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.5rem;
}

/* Baris saring */
.panel-saring {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end;
  border: 1px solid var(--garis); border-radius: 14px; background: #fff; padding: 1rem 1.25rem;
}
.panel-saring .bidang { margin: 0; min-width: 12rem; flex: 1 1 12rem; }
.panel-saring .bidang label { font-size: 12px; color: var(--abu-700); }
.panel-saring-aksi { display: flex; gap: 0.5rem; }

/* Tabel masjid */
.tabel-masjid .tautan-nama { font-weight: 600; color: var(--hijau-700); text-decoration: none; }
.tabel-masjid .tautan-nama:hover { text-decoration: underline; }
.tabel .sub { display: block; font-size: 11.5px; color: var(--abu-500); font-weight: 400; }
.tabel .tanpa-bungkus { white-space: nowrap; }
.tabel td .btn-halus { padding: 0.3rem 0.6rem; font-size: 12.5px; }
svg.ya { color: var(--lunas); }
svg.tidak { color: var(--garis); }

/* Kotak status gerbang isi */
.kotak-status { border-radius: 14px; padding: 0.875rem 1.15rem; margin: 0; font-size: 14px; }
.kotak-baik {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--hijau-50); border: 1px solid var(--hijau-200); color: var(--hijau-700); font-weight: 600;
}
/* Kabar yang bukan baik dan bukan buruk — mis. gerbang isi yang belum pernah
   dijalankan karena barisnya memang belum ada. Warna netral supaya tidak
   terbaca sebagai peringatan. */
.kotak-netral { background: var(--kertas); border: 1px solid var(--garis); color: var(--abu-700); }
.kotak-peringatan { background: var(--amber-100); border: 1px solid var(--amber-500); color: var(--menunggak); }
.kotak-peringatan .judul { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; font-weight: 700; }
.kotak-peringatan ul { margin: 0; padding-left: 1.6rem; }
.kotak-peringatan li + li { margin-top: 0.2rem; }

.panel-baris-dua { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 600px) { .panel-baris-dua { grid-template-columns: 1fr 1fr; } }

.centang { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.centang input { width: 1.05rem; height: 1.05rem; accent-color: var(--hijau-600); }

/* ===================================================================
   Sebaran tagihan — batang dari lebar CSS.

   Bukan gambar dan bukan JavaScript: angkanya tetap tertulis di sebelah
   batangnya, jadi halaman terbaca utuh oleh mesin pencari, pembaca layar,
   dan siapa pun yang gagal memuat aset.
   =================================================================== */
.sebaran { list-style: none; margin: 1rem 0 0; padding: 0; }
.sebaran li {
  display: grid; grid-template-columns: 11rem 1fr 3rem;
  align-items: center; gap: 0.75rem; padding: 0.3rem 0;
}
.sebaran-label { font-size: 13.5px; color: var(--abu-700); }
.sebaran-batang { background: var(--kertas); border-radius: 4px; height: 1.1rem; overflow: hidden; }
.sebaran-batang > span { display: block; height: 100%; background: var(--hijau-600); border-radius: 4px; }
.sebaran-angka { text-align: right; font-size: 14px; font-weight: 700; }

@media (max-width: 640px) {
  .sebaran li { grid-template-columns: 8.5rem 1fr 2.5rem; gap: 0.5rem; }
  .sebaran-label { font-size: 12.5px; }
}

.bantu.galat { color: var(--gagal); font-weight: 600; }

/* ===================================================================
   Pemilih wilayah (panel admin)

   Hasil pencarian bisa berisi puluhan desa bernama sama di provinsi yang
   berbeda-beda. Daftarnya dikurung dalam kotak bergulir sendiri supaya
   halaman tinjau tidak memanjang dan formulir keputusan tetap terlihat.
   =================================================================== */
.pilih-wilayah-hasil {
  max-height: 20rem; overflow-y: auto; margin-top: 0.75rem;
  border: 1px solid var(--garis); border-radius: 10px; padding: 0.35rem 0.85rem 0.85rem;
}
.pilih-wilayah-hasil .centang { margin-top: 0.5rem; font-weight: 500; font-size: 14px; }
.pilih-wilayah-hasil .centang span { line-height: 1.35; }

.pilih-wilayah-cari { display: flex; gap: 0.5rem; align-items: center; margin-top: 1rem; }
.pilih-wilayah-cari .kolom { flex: 1 1 auto; }
.pilih-wilayah-cari .btn-halus { flex: 0 0 auto; }

/* Zona bahaya — sengaja dipisah dari formulir utama. */
.zona-bahaya { margin-top: 2.5rem; border-color: var(--gagal); }
.zona-bahaya h2 { display: flex; align-items: center; gap: 0.5rem; color: var(--gagal); }
.zona-bahaya p { font-size: 14px; color: var(--abu-700); max-width: 44rem; }
.btn-bahaya {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border: 0; border-radius: 8px; background: var(--gagal); color: #fff;
  padding: 0.7rem 1.15rem; font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
}
.btn-bahaya:hover { background: #991b1b; }

/* ===================================================================
   Pengerasan responsif — hasil audit menyeluruh
   =================================================================== */

/* Kata panjang tanpa spasi (kode ULID 26 karakter, slug, path wilayah, URL)
   akan memaksa lebar induknya dan merusak tata letak di layar sempit.
   Ini pengaman dasar untuk seluruh situs. */
body { overflow-wrap: break-word; }

/* Kode dan jalur ditulis mono dan sering panjang — putus di mana pun perlu. */
.mono, .kode-struk, .tabel .sub { overflow-wrap: anywhere; }

/* Kepala panel: nama admin + peran + tombol keluar tidak muat sebaris di
   layar sempit, dan tanpa flex-wrap ia mendorong halaman melebar. */
.panel-atas { flex-wrap: wrap; }
.panel-aku { flex-wrap: wrap; justify-content: flex-end; }

/* Rincian dua kolom jadi satu kolom di layar sempit — label 8rem menyisakan
   terlalu sedikit ruang untuk nilainya. */
@media (max-width: 480px) {
  .rincian { grid-template-columns: 1fr; gap: 0.15rem; }
  .rincian dt { margin-top: 0.5rem; }
  .rincian dd { font-weight: 600; }
}

/* Padding kartu dan panel dikurangi di ponsel: 1,5rem di kedua sisi memakan
   48px dari 360px yang tersedia. */
@media (max-width: 599px) {
  .panel-isi { padding-left: 1rem; padding-right: 1rem; }
  .panel-atas { padding-inline: 1rem; }
  .panel-blok { padding: 1.15rem; }
  .panel-saring { padding: 0.875rem 1rem; }
  .panel-saring .bidang { min-width: 0; flex-basis: 100%; }
  .panel-masuk .kartu { padding: 1.5rem; }
  .form-kirim .kartu { padding: 1.25rem; }
  .struk .kartu { padding: 1.25rem; }
  .sisi .kartu { padding: 1.25rem; }
  .panel-judul { font-size: 24px; }
}

/* Tabel: sel tetap nowrap (dibaca dalam wadah bergulir), tapi paddingnya
   dirapatkan supaya lebih banyak kolom terlihat sebelum perlu digulir. */
@media (max-width: 599px) {
  .tabel th, .tabel td { padding: 0.6rem 0.7rem; }
}

/* Wadah bergulir harus benar-benar bisa menyusut. Tanpa min-width:0, item
   flex/grid menolak mengecil di bawah lebar isinya dan wadah bergulirnya
   tidak pernah aktif. */
.panel-utama, .panel-isi, .tabel-gulir { min-width: 0; }
.panel-dua-kolom > * { min-width: 0; }

/* Zona bahaya dan kotak status ikut menyusut rapi. */
@media (max-width: 599px) {
  .zona-bahaya { padding: 1.15rem; }
  .kotak-status { padding: 0.75rem 0.9rem; font-size: 13.5px; }
}

/* Gulir horizontal pada tabel diberi petunjuk visual di ponsel, supaya
   pengguna tahu masih ada kolom di sebelah kanan. */
@media (max-width: 899px) {
  .tabel-gulir { -webkit-overflow-scrolling: touch; }
}

/* Sasaran sentuh minimal 40px di ponsel — tombol kecil di tabel terlalu
   sempit untuk jempol. */
@media (max-width: 599px) {
  .tabel td .btn-halus { min-height: 2.4rem; padding-inline: 0.7rem; }
  .panel-menu { padding-block: 0.7rem; }
}

/* Isian sebaris di dalam tabel (daftar wilayah). */
.kolom-inline { padding: 0.35rem 0.5rem; font-size: 14px; min-width: 9rem; }
.centang-rapat { margin: 0; }

/* ===================================================================
   Hero: kendali carousel
   =================================================================== */
.hero { position: relative; }
/* scroll-behavior halus juga berlaku saat panah/titik dipakai tanpa JavaScript. */
.hero-geser { scroll-behavior: smooth; }

.hero-panah {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  display: none; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 999px;
  background: rgb(18 26 23 / 0.55); color: #fff; text-decoration: none;
  backdrop-filter: blur(4px); transition: background-color .15s;
}
.hero-panah:hover { background: rgb(18 26 23 / 0.8); color: #fff; }
.hero-panah-kiri { left: 1rem; }
.hero-panah-kanan { right: 1rem; }
/* Di ponsel carousel digeser jari, jadi panah hanya mengambil ruang. */
@media (min-width: 768px) { .hero-panah { display: flex; } }

.hero-titik {
  position: absolute; left: 0; right: 0; bottom: 1rem; z-index: 2;
  display: flex; justify-content: center; gap: 0.5rem;
}
.hero-titik a {
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
  text-decoration: none;
}
.hero-titik span {
  display: block; width: 0.5rem; height: 0.5rem; border-radius: 999px;
  background: rgb(255 255 255 / 0.45); transition: background-color .15s, width .15s;
}
.hero-titik a:hover span { background: rgb(255 255 255 / 0.8); }
.hero-titik a[aria-current] span { width: 1.35rem; background: var(--amber-500); }

/* ===================================================================
   Panel: tindakan massal
   =================================================================== */
.kolom-centang { width: 2.5rem; }
.tabel .kolom-centang { padding-right: 0; }
.centang-rapat input { width: 1.05rem; height: 1.05rem; }

.bar-massal {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem;
  margin-top: 1rem; padding: 0.9rem 1.15rem;
  border: 1px solid var(--garis); border-radius: 14px; background: #fff;
  transition: border-color .15s, background-color .15s;
}
/* Bar menyala begitu ada yang dicentang — supaya jelas tindakan berikutnya
   akan mengenai baris terpilih, bukan seluruh tabel. */
.bar-massal.ada-pilihan { border-color: var(--hijau-600); background: var(--hijau-50); }
.bar-massal .hitungan { margin: 0 auto 0 0; font-size: 14px; font-weight: 600; color: var(--abu-700); }
.bar-massal.ada-pilihan .hitungan { color: var(--hijau-700); }
.bar-massal .bidang { margin: 0; min-width: 13rem; }
.bar-massal .kolom { padding-block: 0.5rem; }

@media (max-width: 599px) {
  .bar-massal { padding: 0.8rem; }
  .bar-massal .bidang { min-width: 0; flex: 1 1 100%; }
  .bar-massal .btn-utama { width: 100%; }
}

/* ===================================================================
   Notifikasi modal — tanpa JavaScript.

   <dialog open> menampilkannya, <form method="dialog"> menutupnya. Keduanya
   perilaku bawaan HTML.

   Latar gelap dibuat dari box-shadow raksasa pada dialog itu sendiri, bukan
   elemen pelapis terpisah. Dengan begitu latar ikut hilang otomatis saat
   dialog ditutup — tidak ada elemen yatim yang tertinggal menutupi halaman.
   =================================================================== */
.notif {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;

  width: min(24rem, calc(100vw - 2.5rem));
  max-height: calc(100vh - 3rem);
  overflow-y: auto;

  margin: 0;
  padding: 1.75rem 1.5rem 1.5rem;
  border: 1px solid var(--garis);
  border-radius: 16px;
  background: #fff;
  color: var(--tinta-900);
  text-align: center;

  /* Bayangan sekaligus tirai gelap seluruh layar. */
  box-shadow:
    0 12px 40px -12px rgb(18 26 23 / 0.35),
    0 0 0 100vmax rgb(18 26 23 / 0.5);
}

/* Peramban lama yang tidak mengenal <dialog> tetap menampilkan isinya —
   pesannya tidak boleh hilang hanya karena elemennya tidak didukung. */
.notif:not([open]) { display: none; }

.notif-ikon {
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem;
  margin: 0 auto 1rem;
  border-radius: 999px;
}
.notif-sukses .notif-ikon { background: var(--hijau-100); color: var(--lunas); }
.notif-galat .notif-ikon  { background: var(--amber-100); color: var(--menunggak); }

.notif h2 {
  margin: 0 0 0.5rem;
  font-family: var(--font-aksen);
  font-size: 22px;
  line-height: 1.25;
}
.notif p {
  margin: 0 0 1.5rem;
  font-size: 15px;
  line-height: 1.6;
  color: var(--abu-700);
}
.notif form { margin: 0; }

@media (max-width: 599px) {
  .notif { padding: 1.5rem 1.25rem 1.25rem; }
  .notif h2 { font-size: 20px; }
}

/* Halaman di belakang modal tidak boleh ikut bergulir saat dialog terbuka.
   :has() didukung semua peramban arus utama; yang tidak mendukungnya hanya
   kehilangan pengunci gulir, bukan modalnya. */
body:has(.notif[open]) { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .notif[open] { animation: notif-masuk .18s ease-out; }
  @keyframes notif-masuk {
    from { opacity: 0; transform: translate(-50%, -46%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
  }
}

/* Kolom berkas & penanda opsional */
.opsional {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--abu-500); background: var(--kertas);
  border: 1px solid var(--garis); border-radius: 999px; padding: 0.1rem 0.45rem;
  margin-left: 0.4rem;
}
.kolom-berkas { padding: 0.5rem; font-size: 14px; cursor: pointer; }
.kolom-berkas::file-selector-button {
  margin-right: 0.75rem; border: 1px solid var(--garis); border-radius: 6px;
  background: var(--kertas); color: var(--abu-700);
  padding: 0.4rem 0.8rem; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.kolom-berkas::file-selector-button:hover { border-color: var(--abu-500); }

/* Pratinjau lampiran di halaman tinjau */
.lampiran-kisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.875rem; margin-top: 1rem; }
.lampiran { margin: 0; }
.lampiran img, .lampiran-berkas {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--garis); background: var(--kertas);
}
.lampiran-berkas { display: grid; place-items: center; color: var(--abu-500); }
.lampiran a:hover img, .lampiran-berkas:hover { border-color: var(--hijau-400); }
.lampiran figcaption { margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.1rem; }
.lampiran .nama { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }

/* ===================================================================
   Modal "Bantu bayar listrik".

   Dibuka aset/bayar.js lewat showModal(), jadi latar gelapnya datang
   dari ::backdrop bawaan peramban — bukan box-shadow raksasa seperti
   .notif, yang terpaksa memakai cara itu karena tampil tanpa skrip.

   Kalau skripnya tidak ada, elemen ini tidak pernah dibuka dan
   tombolnya tetap tautan biasa ke /bayar/{slug}.
   =================================================================== */
.modal-bayar {
  width: min(30rem, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  padding: 1.75rem;
  border: 1px solid var(--garis);
  border-radius: 20px;
  background: #fff;
  color: var(--tinta);
  box-shadow: 0 24px 60px -20px rgb(18 26 23 / 0.4);
}
/* Latar gelap ikut memudar masuk dan keluar. Muncul seketika lalu hilang
   seketika terbaca sebagai kedipan, bukan sebagai lapisan yang dibuka. */
.modal-bayar::backdrop {
  background: rgb(18 26 23 / 0);
  transition:
    background .22s ease,
    overlay .22s ease allow-discrete,
    display .22s ease allow-discrete;
}
.modal-bayar[open]::backdrop { background: rgb(18 26 23 / 0.5); }
@starting-style {
  .modal-bayar[open]::backdrop { background: rgb(18 26 23 / 0); }
}

.modal-tutup-baris { display: flex; justify-content: flex-end; margin: -0.5rem -0.5rem 0 0; }
.modal-tutup {
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--abu-500);
  cursor: pointer;
}
.modal-tutup:hover { background: var(--kertas); color: var(--tinta); }

.modal-judul {
  margin: 0.25rem 0 0;
  font-family: var(--font-aksen);
  font-size: 21px;
  line-height: 1.25;
}

.modal-bayar .rincian { grid-template-columns: 1fr auto; gap: 0.5rem 1rem; font-size: 14.5px; }
.modal-bayar .rincian dd { text-align: right; }
/* Nominal besar. Kelas .nilai saja tidak cukup: ukurannya hanya hidup di
   dalam .panel-kartu dan .panel-angka, jadi di luar keduanya ia terbaca
   sebesar teks biasa — dan angka yang akan dibayar orang tidak boleh sekecil
   keterangan di sebelahnya. */
.nilai-besar {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 30px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--tinta);
}
@media (max-width: 599px) { .nilai-besar { font-size: 25px; } }

/* [hidden] harus menang atas display:contents pada pembungkus baris denda.
   Tanpa ini "Denda keterlambatan Rp 0" tetap tampil untuk tagihan yang tidak
   punya denda — angka nol yang tidak perlu dibaca siapa pun. */
.modal-bayar [hidden] { display: none !important; }

/* Halaman di belakang tidak ikut bergulir. */
body:has(.modal-bayar[open]) { overflow: hidden; }

/* ── Buka-tutup ──────────────────────────────────────────────────────
   Sebelumnya kotak ini meminjam @keyframes notif-masuk milik .notif. Itu
   keliru: keyframes tersebut berakhir pada translate(-50%, -50%) karena
   .notif diletakkan dengan top/left 50%. <dialog> ini dipusatkan
   margin:auto bawaan peramban, jadi animasi itu menyeret kotaknya setengah
   lebarnya ke kiri selama 0,18 detik lalu MELEMPARNYA kembali ke tengah
   begitu animasinya habis — persis lompatan yang terasa kaku itu.

   Penggantinya transition biasa dengan @starting-style, jadi menutupnya
   ikut beranimasi, bukan lenyap seketika. Peramban yang belum mengenal
   allow-discrete hanya kehilangan animasinya, bukan modalnya. */
.modal-bayar {
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition:
    opacity .2s ease,
    transform .22s cubic-bezier(.2, .7, .3, 1),
    overlay .22s ease allow-discrete,
    display .22s ease allow-discrete;
}
.modal-bayar[open] { opacity: 1; transform: none; }
@starting-style {
  .modal-bayar[open] { opacity: 0; transform: translateY(10px) scale(0.985); }
}

/* Isi modal tidak boleh melompat tingginya saat memuat -> hasil.
   Tingginya dianimasikan aset/bayar.js; yang di sini cuma penjaga supaya
   isi yang meluap tidak terlihat selama tingginya sedang berubah. */
.modal-bayar [data-isi] { will-change: height; }

@media (prefers-reduced-motion: reduce) {
  .modal-bayar, .modal-bayar::backdrop { transition-duration: 1ms; }
}

@media (max-width: 599px) {
  .modal-bayar { padding: 1.25rem; border-radius: 16px; }
  .modal-judul { font-size: 19px; }
}

/* ── Sedang menanyakan tagihan ke IAK ────────────────────────────────
   Pemeriksaan ke penyedia memakan satu sampai tiga detik, kadang lebih.
   Kalimat diam selama itu terbaca sebagai macet — yang berputar adalah
   satu-satunya yang mengatakan "masih jalan, belum mati". */
.pemintal {
  display: inline-block; flex-shrink: 0;
  width: 1.125rem; height: 1.125rem;
  border: 2px solid var(--hijau-100);
  border-top-color: var(--hijau-600);
  border-radius: 999px;
  animation: pemintal-putar .7s linear infinite;
}
@keyframes pemintal-putar { to { transform: rotate(360deg); } }

.modal-memuat {
  display: flex; align-items: center; gap: 0.625rem;
  margin: 1.25rem 0 0;
}
.modal-memuat .bantu { margin: 0; }

/* Rangka seukuran jawaban yang sedang ditunggu. Bukan hiasan: tanpa
   rangka ini kotak modal tumbuh mendadak begitu angkanya datang, dan
   pertumbuhan mendadak itu yang membuat pergantiannya terasa menyentak. */
.rangka { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.25rem; }
.rangka-baris {
  display: block; height: 0.875rem; border-radius: 999px;
  background: linear-gradient(90deg, var(--kertas) 25%, #eaf0ed 50%, var(--kertas) 75%);
  background-size: 200% 100%;
  animation: rangka-kilau 1.4s ease-in-out infinite;
}
.rangka-tinggi { height: 2.25rem; border-radius: 10px; }
.rangka-tombol { height: 2.875rem; border-radius: 8px; }
@keyframes rangka-kilau {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Gerak yang dikurangi: kilau rangka dimatikan — ia murni hiasan. Pemintal
   TIDAK dimatikan, hanya diperlambat: ia satu-satunya penanda bahwa
   permintaannya masih berjalan, dan penanda yang diam bukan penanda. */
@media (prefers-reduced-motion: reduce) {
  .rangka-baris { animation: none; background: var(--kertas); }
  .pemintal { animation-duration: 1.6s; }
}

/* Jalan keluar di halaman 404. Bloknya rata tengah, tapi daftar yang ikut
   rata tengah sulit dibaca — jadi daftarnya dibuat blok sendiri yang rata
   kiri, lalu blok itu yang ditengahkan. */
.galat-jalan {
  display: inline-block;
  text-align: left;
  max-width: 34rem;
  margin: 0 auto;
  padding-left: 1.1rem;
  color: var(--abu-700);
  font-size: 14.5px;
  line-height: 1.7;
}
.galat-jalan li + li { margin-top: 0.5rem; }
.galat-jalan a { font-weight: 600; }

/* ===================================================================
   Dasbor keuangan & riwayat pembayaran — /admin/pembayaran

   Seluruh nama kelas di blok ini diawali kata yang tidak dipakai bagian
   lain (grafik-, kotak-, kisi-, daftar-uang). Itu disengaja: tiga kali
   dalam sehari tampilan situs ini rusak karena satu aturan mengenai
   elemen yang tidak dituju — .bungkus yang tertimpa shorthand, dan
   <div class="kepala"> di kartu langkah yang kebagian seluruh gaya
   kepala situs, sticky dan blur sekalian. Nama yang terlalu umum adalah
   utang yang ditagih belakangan.

   Yang dipakai bersama bagian lain (.jumlah, .tanda, .aktif) SELALU
   ditulis sebagai turunan induknya, tidak pernah berdiri sendiri.
   =================================================================== */

/* Pemilih rentang: tautan biasa, bukan tombol JavaScript. */
.pilih-rentang { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0 0 1.5rem; }
.pilih-rentang a {
  border: 1px solid var(--garis); border-radius: 999px; background: #fff;
  padding: 0.4rem 0.9rem; font-size: 13.5px; font-weight: 600;
  color: var(--abu-700); text-decoration: none; transition: border-color .15s, color .15s;
}
.pilih-rentang a:hover { border-color: var(--hijau-400); color: var(--hijau-700); }
.pilih-rentang a.aktif { border-color: var(--hijau-600); background: var(--hijau-600); color: #fff; }

/* Enam kartu angka: 2 kolom di ponsel, 3 di layar lebar — bukan 4, supaya
   dua barisnya sama panjang dan tidak menyisakan kartu yatim. */
@media (min-width: 900px) { .panel-kartu-kisi.kisi-uang { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.kisi-grafik { display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 1100px) { .kisi-grafik { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kotak-grafik { padding: 1.25rem; }
.kotak-grafik .panel-subjudul { font-size: 17px; margin-bottom: 0.75rem; }

/* SVG-nya lentur: viewBox tetap, lebarnya ikut kartunya. */
.grafik { display: block; width: 100%; height: auto; overflow: visible; }
.grafik-garis { stroke: var(--garis); stroke-width: 1; }
.grafik-sumbu { fill: var(--abu-500); font-family: var(--font-mono); font-size: 11px; }

.grafik-legenda {
  display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem;
  list-style: none; margin: 0.875rem 0 0; padding: 0; font-size: 13px; color: var(--abu-700);
}
.grafik-legenda li { display: flex; align-items: center; gap: 0.4rem; }
.grafik-legenda .tanda { width: 0.7rem; height: 0.7rem; border-radius: 3px; flex: none; }
.grafik-legenda b { font-family: var(--font-mono); font-weight: 600; color: var(--tinta-900); }

/* Halaman bukti satu transaksi. */
.kisi-bukti { display: grid; gap: 1rem; }
@media (min-width: 900px) { .kisi-bukti { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.kotak-bukti { padding: 1.25rem; }
.kotak-bukti .panel-subjudul { font-size: 17px; margin-bottom: 0.75rem; }
.kotak-bukti summary { cursor: pointer; font-size: 14px; color: var(--abu-700); }

.daftar-uang { margin: 0; font-size: 14.5px; }
.daftar-uang > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0; border-bottom: 1px solid var(--garis);
}
.daftar-uang > div:last-child { border-bottom: 0; }
.daftar-uang dt { color: var(--abu-700); }
.daftar-uang dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.daftar-uang .keluar dd { color: var(--menunggak); }
.daftar-uang .jumlah { border-top: 1.5px solid var(--tinta-900); border-bottom: 0; margin-top: 0.25rem; }
.daftar-uang .jumlah dt { font-weight: 700; color: var(--tinta-900); }
.daftar-uang .jumlah dd { font-size: 16px; font-weight: 700; }
.daftar-uang .jumlah.rugi dd { color: var(--gagal); }

.nilai-rugi { color: var(--gagal); font-weight: 600; }

/* Jawaban mentah penyedia: digulir sendiri, tidak pernah melebarkan halaman. */
.mentah {
  margin: 0.5rem 0 0; max-height: 26rem; overflow: auto;
  border-radius: 10px; background: var(--kertas); padding: 0.875rem;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.6; white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ===================================================================
   Pembayaran donatur — /bayar/lanjut/{kode} dan panel yang menjaganya.

   Nama kelasnya diawali kata yang belum dipakai bagian lain. Aturan yang
   sama seperti blok dasbor keuangan, dan alasannya sama: satu aturan yang
   mengenai elemen yang tidak dituju sudah tiga kali merusak tampilan
   situs ini dalam sehari.
   =================================================================== */

/* Kotak merah untuk keadaan yang menuntut tangan manusia hari itu juga.
   Dibedakan dari kotak-peringatan yang kuning: yang kuning berarti
   "perhatikan", yang ini berarti "uang orang sedang tertahan". */
.kotak-kritis {
  border-radius: 14px; padding: 1rem 1.25rem;
  background: #fef2f2; border: 1px solid var(--gagal); color: var(--gagal);
}
.kotak-kritis .judul { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; font-weight: 700; }
.kotak-kritis p { color: var(--tinta-900); }
.kotak-kritis .judul { color: var(--gagal); }

/* Halaman tunggu pembayaran. */
.kotak-bayar { padding: 1.5rem; }
.kotak-bayar .rincian { margin-top: 1rem; }

.daftar-alur { margin: 1rem 0 1rem; padding-left: 1.25rem; font-size: 14.5px; line-height: 1.7; color: var(--abu-700); }
.daftar-alur li + li { margin-top: 0.5rem; }
.daftar-alur strong { color: var(--tinta-900); }

/*
   .bantu tidak punya aturan umum di berkas ini — yang ada cuma `.bidang .bantu`
   di dalam formulir. Di luar formulir ia karena itu tampil sebesar teks biasa,
   dan catatan kecil yang seukuran kalimat utama berhenti terbaca sebagai
   catatan.

   Dulu diperbaiki HANYA di dua kotak ini, dengan alasan yang benar pada
   waktunya: `.bantu` dipakai di belasan halaman, dan mengubah semuanya
   sekaligus adalah perubahan tampilan yang tidak diminta siapa pun.

   Sekarang perapian panel memang diminta, jadi aturannya diperluas — TAPI
   hanya ke dalam panel, lihat `:where(.panel-isi) .bantu` di bawah. Halaman
   publik tetap tidak tersentuh. Dua pemilih di baris ini dibiarkan karena
   `.kotak-bayar` hidup di halaman publik, di luar jangkauan aturan panel itu.
*/
.kotak-bayar .bantu,
.daftar-alur + .bantu { font-size: 13.5px; line-height: 1.6; color: var(--abu-700); }

/*
   Catatan kecil di panel, di luar formulir.
   Sebelum ini ia mewarisi 16px — seukuran kalimat utama — sehingga sepuluh
   catatan di halaman Setelan saja tampil sama besar dengan angka yang mereka
   jelaskan.

   `:where()` dipakai dengan sengaja: ia menyumbang NOL ke kekhususan, jadi
   pemilih ini berbobot (0,1,0) dan tetap kalah dari `.bidang .bantu` (0,2,0).
   Akibatnya keterangan di bawah kolom formulir tidak ikut berubah — ukuran
   dan warnanya masih sama persis dengan formulir di halaman publik. Tanpa
   `:where()`, aturan ini akan menang atas keduanya dan diam-diam membuat
   formulir panel berbeda dari formulir publik.
*/
:where(.panel-isi) .bantu { font-size: 13.5px; line-height: 1.6; color: var(--abu-700); }