/* Mahad Ibadurrahman. Nilai warna, tipografi, dan dial mengikuti DESIGN.md.
   Dial: ENERGY 1 / RHYTHM 2 / MOTION 1.
   Audiens 50 tahun ke atas, jadi ukuran teks dasar 19px dan target sentuh 48px. */

:root {
  /* ----------------------------------------------------------------------
     PERMUKAAN. Latar halaman putih atas permintaan pemilik, yang mengalahkan
     DESIGN.md bagian 6. Konsekuensinya: kartu putih tidak lagi terangkat
     sendiri dari latar, jadi pemisah permukaan pindah ke garis dan ruang,
     bukan ke shadow. Seluruh situs tidak lagi memakai box-shadow.
     ---------------------------------------------------------------------- */
  --latar: #FFFFFF;
  --putih: #FFFFFF;

  /* Bisikan hangat di atas putih, sisa identitas krem. Dipakai untuk kotak
     keterangan, baris pilihan terpilih, dan kaki halaman, supaya halaman
     tidak jatuh ke putih rata tanpa karakter. Semua warna teks lolos di
     atasnya, terendah gold pada 5.43:1. */
  --permukaan-lembut: #F8F5EE;

  /* Teks di atas blok hijau. Krem hangat, bukan putih murni, supaya
     kehangatan identitas tidak hilang sama sekali. 8.16:1. */
  --di-hijau: #F7F2E7;

  /* ----------------------------------------------------------------------
     GARIS. Dua peran, dan bedanya penting.
     --garis        pemisah struktural. 3.32:1 di putih, di atas syarat 3:1
                     (WCAG 1.4.11) untuk batas komponen. Nilai pertama yang
                     saya pilih (1.49:1) tidak lebih baik dari yang lama, dan
                     bertentangan dengan alasan saya sendiri bahwa garis ini
                     harus tetap terlihat untuk mata 50 tahun ke atas.
     --input-garis  tepi elemen yang bisa ditekan. 5.85:1, jauh di atas
                    syarat 3:1 untuk komponen bukan teks.
     ---------------------------------------------------------------------- */
  --garis: #968C79;
  --input-garis: #6B6459;

  /* ---------------------------------------------------------------------- */
  --hijau: #14532D;
  --hijau-sedang: #2E6B4F;
  --hijau-tekan: #0E3F22;
  --hijau-lembut: #C7D9CC;

  /* Aksen. Empat peran saja: harga dan nominal, status, tanda belum
     diputuskan, dan tagline. Di luar itu hijau atau netral. */
  --gold-teks: #8A5A12;
  --gold-garis: #B4833A;
  --gold-terang: #E8C77E;

  --teks: #3F3A33;
  --teks-lembut: #5C564C;

  --salah: #7A1410;
  --salah-garis: #B42318;
  --salah-latar: #FBEAEA;

  /* ----------------------------------------------------------------------
     RADIUS. Menurun mengikuti berat elemen: wadah paling besar dapat radius
     paling besar. Nilai di luar skala ini tidak dipakai.
     ---------------------------------------------------------------------- */
  --r-blok: 14px;
  --r-pilih: 12px;
  --r-btn: 10px;
  --r-input: 8px;
  --r-kecil: 6px;

  /* ----------------------------------------------------------------------
     TIPOGRAFI. Tujuh langkah, menggantikan 18 nilai clamp yang sebelumnya
     hampir sama dan tersebar. Jarak antar langkah dibuat lebar supaya
     hierarkinya terbaca, bukan cuma terasa.
     Batas bawah tiap langkah dijaga besar karena pembacanya 50 tahun ke atas.
     ---------------------------------------------------------------------- */
  --t-display: clamp(2.6rem, 7vw, 4.2rem);      /* judul hero */
  --t-h1: clamp(2rem, 5vw, 2.8rem);             /* judul halaman */
  --t-h2: clamp(1.6rem, 3.8vw, 2.2rem);         /* judul bagian */
  --t-h3: clamp(1.25rem, 2.8vw, 1.5rem);        /* judul kartu dan blok */
  --t-lead: clamp(1.1rem, 2.4vw, 1.3rem);       /* paragraf pembuka */
  --t-angka: clamp(1.6rem, 5vw, 2.2rem);        /* harga, jam, nominal */
  --t-angka-besar: clamp(2rem, 6.4vw, 3.1rem);  /* nomor telepon, nomor VA */

  --t-tagline: clamp(1.4rem, 3.8vw, 2rem);
  --t-arab: clamp(1.25rem, 3.2vw, 1.6rem);

  /* ----------------------------------------------------------------------
     RUANG. Dibuat lebih lega daripada versi berlatar krem: tanpa perbedaan
     warna antar bagian, ruang kosonglah yang mengerjakan pemisahan.
     ---------------------------------------------------------------------- */
  --sec-y: clamp(64px, 9vw, 112px);
  --sec-y-rapat: clamp(44px, 6vw, 76px);

  --fokus: var(--gold-teks);

  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Lora", Georgia, serif;
  --arab: "Noto Naskh Arabic", "Traditional Arabic", serif;
}

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

/* Ukuran dasar ada di html, bukan body, supaya satuan rem ikut naik.
   Kalau dipasang di body, semua nilai rem tetap dihitung dari 16px bawaan
   dan teks isi jatuh di bawah batas 18px. */
html {
  scroll-behavior: smooth;
  font-size: 19px;
  -webkit-text-size-adjust: 100%;
  /* Bar atas lengket setinggi 96px (dinaikkan untuk memuat logo). Tanpa ini,
     judul bagian yang dituju dari menu berhenti di balik bar dan tidak
     terbaca. */
  scroll-padding-top: 116px;
}

body {
  margin: 0;
  background: var(--latar);
  color: var(--teks);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
}

img, svg { max-width: 100%; }

h1, h2, h3 { color: var(--hijau); line-height: 1.18; font-weight: 800; margin: 0; }
h2 { font-size: var(--t-h2); }
h3 { font-size: 1.32rem; }
p { margin: 0 0 1rem; }

a { color: var(--gold-teks); }
a:hover { color: var(--hijau); }

/* Fokus wajib terlihat. Tebal 3px karena pembaca lansia perlu penanda yang jelas. */
:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
  border-radius: var(--r-kecil);
}

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--hijau); color: var(--putih);
  padding: 14px 20px; border-radius: var(--r-btn);
  font-weight: 600; text-decoration: none; z-index: 50;
}
.skip:focus { left: 16px; top: 16px; }

/* ---------- Bar atas ---------- */

.bar {
  background: var(--latar);
  border-bottom: 1px solid var(--garis);
  position: sticky; top: 0; z-index: 40;
}
/* Dinaikkan dari 76px: logo butuh tinggi lebih dari wordmark teks supaya
   baris terkecilnya (MADRASAH LANJUT USIA, teks Arab) tetap terbaca. */
.bar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 96px; }

/* Logo lockup (public/assets/img/logo.webp) sekarang bertinta gelap
   (wordmark hitam), jadi terbaca langsung di atas bar putih tanpa panel
   pembungkus apa pun. */
/* Padding vertikal transparan, bukan visual: panel hijau lama tanpa sengaja
   ikut memperbesar area klik jadi di atas 44px. Tanpa panel, tinggi tautan
   ini sama dengan tinggi gambar logo saja, dan di ponsel itu 40px, di bawah
   ambang sentuh minimum. */
.mark { text-decoration: none; display: inline-flex; align-items: center; gap: 12px; padding: 6px 0; }
.mark-logo { display: block; height: 56px; width: auto; }
/* Konteks yang tidak disebut logo itu sendiri, misalnya "Halaman pengurus"
   di halaman masuk. Kosong kalau tidak dipakai. */
.mark-konteks { color: var(--teks-lembut); font-size: 0.95rem; letter-spacing: 0.02em; }

.menu-btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 16px;
  background: var(--putih); color: var(--hijau);
  border: 1.5px solid var(--hijau); border-radius: var(--r-btn);
  font: inherit; font-weight: 600; font-size: 1rem; cursor: pointer;
}
.menu-btn:hover { background: var(--hijau); color: var(--putih); }
.menu-btn:hover .menu-bars i { background: var(--putih); }
.menu-bars { display: grid; gap: 4px; }
.menu-bars i { display: block; width: 20px; height: 2px; background: var(--hijau); }

.menu ul { list-style: none; display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; }
.menu a {
  display: flex; align-items: center; min-height: 48px; padding: 0 14px;
  color: var(--hijau); text-decoration: none; font-weight: 600; font-size: 1rem;
  border-radius: var(--r-btn);
}
/* Sebelumnya putih di atas bar krem. Sekarang barnya putih, jadi hover
   putih tidak terlihat sama sekali. */
.menu a:hover { background: var(--permukaan-lembut); text-decoration: underline; text-underline-offset: 4px; }
.menu-cta { background: var(--hijau); color: var(--putih) !important; }
.menu-cta:hover { background: var(--hijau-tekan); text-decoration: none; }

/* ---------- Hero ---------- */

/* Dial ENERGY naik dari 1 ke 2: hero mendapat ruang dan ukuran lebih besar,
   karena di atas latar putih tidak ada lagi perbedaan warna yang mengerjakan
   pembukaan halaman. */
.hero { padding: clamp(52px, 9vw, 120px) 0 0; border-bottom: 1px solid var(--garis); }
/* Kolom kanan diperlebar dari 260px tetap ke rentang 280-360px: foto
   nyata butuh ruang lebih dari yang cukup untuk SVG dekoratif lama, supaya
   wajah pengajar dan santri di baris depan tetap terlihat jelas. */
.hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 48px; align-items: end; }
.hero-txt { padding-bottom: clamp(44px, 7vw, 92px); }

.arab {
  font-family: var(--arab); font-size: var(--t-arab);
  color: var(--hijau-sedang); line-height: 2; margin: 0 0 6px;
  text-align: left;
}
.hero h1 { font-size: var(--t-display); letter-spacing: -0.015em; }
.unit {
  margin: 8px 0 0; color: var(--hijau-sedang);
  font-weight: 600; font-size: 1.05rem; letter-spacing: 0.1em;
}
.tagline {
  font-family: var(--serif); font-style: italic;
  font-size: var(--t-tagline);
  color: var(--gold-teks); margin: 14px 0 22px;
}
.lead { font-size: var(--t-lead); max-width: 40ch; color: var(--teks); }
.lead strong { color: var(--hijau); }

.naungan { margin: 22px 0 0; font-size: 0.95rem; color: var(--teks-lembut); }

/* Lengkung mihrab dari flyer. Satu di hero, satu di blok pendaftaran, tidak lebih. */
/* Bingkai lengkung mihrab, sekarang membungkus foto nyata. Radius atas
   setengah lebar kontainer (elips) meniru siluet lengkung SVG lama; radius
   bawah kecil menjaga kesan "berdiri di atas" seperti motif aslinya. */
.hero-foto {
  /* width eksplisit itu penting: tanpanya, align-self:end masih membuat
     grid item mewarisi tinggi baris dan aspect-ratio menghitung lebar dari
     tinggi itu, jauh melebihi lebar track kolom (diverifikasi: 587px alih
     alih 360px). Dengan width:100%, lebar mengikuti track, tinggi mengikuti
     lebar via aspect-ratio, seperti yang diharapkan. */
  width: 100%; align-self: end; overflow: hidden;
  border: 2px solid var(--gold-garis);
  border-radius: 50% 50% 14px 14px / 120px 120px 14px 14px;
  aspect-ratio: 3 / 4;
}
.hero-foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
  display: block;
}

/* ---------- Tombol ---------- */

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 26px;
  border-radius: var(--r-btn); border: 1.5px solid transparent;
  font: inherit; font-weight: 600; font-size: 1.05rem;
  text-decoration: none; cursor: pointer; text-align: center;
}
.btn-utama { background: var(--hijau); color: var(--putih); }
.btn-utama:hover { background: var(--hijau-tekan); color: var(--putih); }
.btn-kedua { background: var(--putih); color: var(--hijau); border-color: var(--hijau); }
.btn-kedua:hover { background: var(--hijau); color: var(--putih); }

/* ---------- Bagian umum. Jarak sengaja berbeda antar bagian, sesuai RHYTHM 2. ---------- */

/* Tanpa perbedaan warna antar bagian, yang memisahkan adalah ruang dan satu
   garis. Garisnya ada di SETIAP pergantian bagian dengan sengaja: di atas
   putih rata, pembaca 50 tahun ke atas butuh batas yang terlihat, bukan
   hanya jeda yang harus dirasakan. */
.sec { padding: var(--sec-y) 0; }
.sec + .sec { border-top: 1px solid var(--garis); }

/* Bekas bagian berlatar krem. Sekarang bedanya bukan warna, tapi ruang yang
   lebih rapat, sehingga ritmenya tetap bervariasi sesuai dial RHYTHM 2. */
.sec-krem { padding: var(--sec-y-rapat) 0; }
.sec-lead { font-size: 1.1rem; color: var(--teks-lembut); max-width: 52ch; margin: 12px 0 32px; }

/* Garis kiri gold menandai satu hal: paragraf ini keterangan tentang data
   yang belum lengkap, bukan teks isi. Pembaca bisa melewatinya tanpa
   kehilangan informasi kelas. Itu perannya, bukan hiasan. */
.catatan {
  margin: 28px 0 0; padding: 16px 18px;
  background: var(--putih); border-left: 4px solid var(--gold-garis);
  border-radius: var(--r-kecil);
  font-size: 1rem; color: var(--teks-lembut); max-width: 62ch;
}

/* ---------- Pilihan kelas ---------- */

/* Dua pilihan kelas. Bukan kartu berkotak: di atas latar putih, kotak putih
   tidak memisahkan apa pun, dan shadow untuk memaksanya terangkat adalah
   pola yang justru dihindari arah desain ini. Yang memisahkan adalah satu
   garis tegak dan ruang. Nol box-shadow di seluruh situs. */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.blok { padding: 0 clamp(20px, 3vw, 36px) 0 0; }
.blok + .blok {
  border-left: 1px solid var(--garis);
  padding: 0 0 0 clamp(20px, 3vw, 36px);
}
.blok-tempat {
  margin: 8px 0 14px; color: var(--hijau-sedang);
  font-weight: 600; font-size: 1.02rem;
}
.blok p { color: var(--teks); }
.blok-harga {
  margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--garis);
  color: var(--gold-teks); font-weight: 800; font-size: 2rem; line-height: 1.2;
}
.blok-harga .rp { font-size: 1.1rem; font-weight: 600; }
.blok-harga .per { display: block; font-size: 0.95rem; font-weight: 400; color: var(--teks-lembut); }

/* ---------- Jadwal. Daftar mendatar, bukan kartu. ---------- */

.jadwal { margin: 28px 0 0; }
.jadwal-baris {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 8px 24px; padding: 24px 0; border-top: 2px solid var(--garis);
}
.jadwal-baris:last-child { border-bottom: 2px solid var(--garis); }
.jadwal dt { display: block; }
.jadwal-nama { display: block; font-weight: 800; font-size: 1.32rem; color: var(--hijau); }
.jadwal-hari { display: block; color: var(--teks-lembut); font-size: 1.02rem; }
.jadwal dd { margin: 0; }
/* Jam bukan harga dan bukan status, jadi bukan tempat aksen. Ukurannya yang
   besar sudah cukup membuatnya menonjol tanpa ikut memakai gold. */
.jam { font-weight: 800; font-size: var(--t-angka); color: var(--hijau); }
.wib { font-size: 0.95rem; color: var(--teks-lembut); }

/* ---------- Materi ---------- */

.materi-in { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.materi { list-style: none; margin: 24px 0 0; padding: 0; }
.materi li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--garis);
  font-size: 1.15rem; font-weight: 600; color: var(--hijau);
}
/* Penanda daftar, bukan aksen. Hijau sedang cukup terlihat di latar krem
   (5.64:1) tanpa memakai gold untuk sesuatu yang cuma pemisah. */
.materi li::before {
  content: ""; flex: 0 0 14px; height: 2px; background: var(--hijau-sedang);
  transform: translateY(-0.35em);
}
.masa {
  background: var(--hijau); color: var(--putih);
  border-radius: var(--r-blok); padding: 30px 28px; text-align: center;
}
.masa-angka { font-size: var(--t-angka); font-weight: 800; margin: 0; line-height: 1.1; }
.masa-ket { margin: 8px 0 0; color: var(--hijau-lembut); font-size: 1rem; }

/* ---------- Biaya. Tabel, karena ini memang data dua baris. ---------- */

.biaya {
  width: 100%; border-collapse: collapse; margin-top: 26px;
  background: var(--putih); border: 1px solid var(--garis);
  border-radius: var(--r-blok); overflow: hidden;
}
.biaya caption { text-align: left; color: var(--teks-lembut); font-size: 1rem; padding-bottom: 14px; }
.biaya th, .biaya td { text-align: left; padding: 18px 22px; border-bottom: 1px solid var(--garis); }
.biaya thead th { background: var(--hijau); color: var(--putih); font-size: 1rem; letter-spacing: 0.02em; }
.biaya tbody th { font-weight: 600; color: var(--hijau); font-size: 1.08rem; }
.biaya tbody td { font-weight: 800; color: var(--gold-teks); font-size: 1.32rem; }
.biaya tbody tr:last-child th, .biaya tbody tr:last-child td { border-bottom: 0; }

/* ---------- Pengajar ---------- */

.pengajar-in { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.guru { margin: 24px 0 0; padding: 0 0 0 1.4em; }
.guru li { padding: 12px 0; font-size: 1.12rem; color: var(--teks); border-bottom: 1px solid var(--garis); }
/* Penomoran adalah struktur, bukan penekanan. */
.guru li::marker { color: var(--hijau); font-weight: 800; }

/* Foto nyata, bukan lagi kotak placeholder bergaris putus putus. width:100%
   eksplisit sengaja dipasang: tanpa itu, align-items:start pada .pengajar-in
   biasanya aman, tapi ini menutup celah yang sama seperti bug di hero
   (align-self:stretch + aspect-ratio bisa saling mendorong ukuran). */
.foto-kelas { margin: 0; }
.foto-kelas img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: var(--r-blok); border: 1px solid var(--garis);
}
.foto-kelas figcaption { margin-top: 12px; font-size: 0.98rem; color: var(--teks-lembut); }

/* ---------- Pendaftaran. Blok hijau penuh sebagai pemecah ritme. ---------- */

/* Satu satunya pemecah ritme yang memakai bidang warna, bukan garis. Karena
   warnanya sendiri yang memisahkan, garis atas dari .sec + .sec dimatikan. */
.sec-hijau {
  background: var(--hijau); color: var(--di-hijau);
  border-top: 0;
  padding: var(--sec-y) 0;
  --fokus: var(--gold-terang);
  position: relative;
}
.sec-hijau h2 { color: var(--putih); }
.daftar-motif { width: 120px; margin-bottom: 20px; }
.daftar-motif svg { width: 100%; height: auto; }

.status {
  margin: 24px 0 0; padding: 20px 22px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(232, 199, 126, 0.45);
  border-radius: var(--r-blok);
  max-width: 62ch;
}
.status-judul { margin: 0 0 6px; font-weight: 800; font-size: 1.22rem; color: var(--gold-terang); }
.status-ket { margin: 0; color: var(--di-hijau); }
.status[data-keadaan="tutup"] { border-color: rgba(255, 255, 255, 0.3); }

.tanggal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 34px 0 0; }
.tanggal dt {
  font-size: 0.95rem; letter-spacing: 0.05em; color: var(--gold-terang);
  padding-bottom: 8px; border-bottom: 1px solid rgba(232, 199, 126, 0.4); margin-bottom: 10px;
}
.tanggal dd { margin: 0; font-size: 1.12rem; font-weight: 600; color: var(--putih); }
.syarat { margin: 30px 0 0; font-size: 1.15rem; color: var(--hijau-lembut); }

/* ---------- Kontak ---------- */

.kontak-in { text-align: left; }
.kontak-lead { font-size: 1.1rem; color: var(--teks-lembut); margin: 12px 0 18px; max-width: 52ch; }
.nomor { margin: 0; }
.nomor a {
  font-size: var(--t-angka-besar); font-weight: 800;
  color: var(--hijau); text-decoration: none; letter-spacing: 0.01em;
  display: inline-block; padding: 4px 0;
}
.nomor a:hover { color: var(--gold-teks); text-decoration: underline; text-underline-offset: 6px; }
.salin-kabar { margin: 14px 0 0; min-height: 1.6em; font-weight: 600; color: var(--hijau-sedang); }

/* ---------- Kaki ---------- */

/* Kaki halaman memakai bisikan hangat, bukan putih, supaya halaman punya
   dasar dan tidak terasa menggantung di ruang putih tanpa ujung. */
.kaki { background: var(--permukaan-lembut); border-top: 1px solid var(--garis); padding: var(--sec-y-rapat) 0; }
.kaki-nama { font-weight: 800; color: var(--hijau); margin: 0 0 6px; font-size: 1.15rem; }
.kaki-ket { margin: 0 0 4px; color: var(--teks-lembut); font-size: 1rem; }
/* Nomor di kaki halaman ikut jadi target sentuh, bukan hanya teks bergaris bawah. */
/* Hijau, bukan gold: di latar kaki halaman gold hanya 4.68:1, sedangkan hijau
   7.21:1. Nomor telepon terlalu penting untuk pasangan warna terlemah. */
.kaki-ket a { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 2px; font-weight: 600; color: var(--hijau); text-underline-offset: 4px; }
.kaki-ket a:hover { color: var(--gold-teks); }
.kaki-draft { margin: 18px 0 0; color: var(--teks-lembut); font-size: 0.95rem; max-width: 60ch; }

/* ---------- Layar sedang ---------- */

@media (max-width: 900px) {
  .hero-in { grid-template-columns: minmax(0, 1fr); }
  /* Foto tetap tampil di layar sempit, bertumpuk di bawah teks mengikuti
     urutan dokumen. SVG dekoratif lama disembunyikan di sini karena tidak
     membawa informasi; foto nyata membawanya, jadi tidak disembunyikan. */
  .hero-foto {
    aspect-ratio: 16 / 10; max-width: 420px; margin: 0 auto;
    border-radius: 50% 50% 14px 14px / 64px 64px 14px 14px;
  }
  .materi-in, .pengajar-in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .tanggal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Ponsel. Menu jadi tombol, isinya bertumpuk. ---------- */

@media (max-width: 760px) {
  html { font-size: 18px; }

  .bar-in { min-height: 76px; }
  .mark-logo { height: 40px; }
  .mark-konteks { display: none; }

  .menu {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--latar); border-bottom: 1px solid var(--garis);
    padding: 10px 20px 18px;
  }
  .menu[data-buka="ya"] { display: block; }
  .menu ul { flex-direction: column; align-items: stretch; gap: 4px; }
  .menu a { min-height: 54px; padding: 0 12px; font-size: 1.08rem; }
  .menu-cta { justify-content: center; margin-top: 8px; }

  /* Bertumpuk, jadi garis pemisahnya berpindah dari sisi kiri ke sisi atas. */
  .duo { grid-template-columns: minmax(0, 1fr); }
  .blok { padding: 0 0 26px; }
  .blok + .blok { border-left: 0; border-top: 1px solid var(--garis); padding: 26px 0 0; }
  .tanggal { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .jadwal-baris { padding: 20px 0; }
  .btn { width: 100%; }
  .cta-row { gap: 12px; }
  .biaya th, .biaya td { padding: 15px 16px; }
}

@media (min-width: 761px) {
  .menu-btn { display: none; }
  .menu { display: block !important; }
}

/* Dial MOTION 1: hanya keadaan hover dan fokus. Gerakan gulir dimatikan
   untuk pengguna yang memintanya. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Formulir pendaftaran dan halaman pendukung.
   Ditambahkan saat halaman statis dipindah ke Laravel.
   ========================================================================== */

:root {
  --salah: #7A1410;       /* teks kesalahan, 10.85:1 di putih */
  --salah-garis: #B42318; /* garis dan penanda kesalahan */
  --salah-latar: #FBEAEA;
  --input-garis: #6B6459; /* 5.85:1 di putih, jauh di atas syarat 3:1 untuk garis */
}

/* Halaman isi sempit: terima kasih dan kebijakan privasi. */
.sec-sempit .wrap { max-width: 760px; }
.sec-sempit h1 { font-size: var(--t-h1); margin-bottom: 14px; }
.sec-sempit h2 { font-size: var(--t-h3); margin: 38px 0 10px; }
.sec-sempit p { max-width: 64ch; }

/* --------------------------------------------------------------------------
   Kartu formulir. Putih di atas blok hijau, karena formulir adalah hal
   terpenting di halaman ini dan kontras paling tinggi harus jatuh di sini.
   -------------------------------------------------------------------------- */

/* Di atas latar putih, kartu putih tanpa garis bukan wadah, cuma ruang.
   Garis tipis inilah yang menjadikannya wadah, menggantikan shadow. */
.form-kartu {
  background: var(--putih); color: var(--teks); border: 1px solid var(--garis);
  border-radius: var(--r-blok); padding: clamp(26px, 4vw, 40px);
  margin: 40px 0 0; max-width: 680px;
  /* Blok hijau menyetel cincin fokus ke gold terang. Di dalam kartu putih
     warna itu tidak terlihat, jadi dikembalikan ke gold gelap. */
  --fokus: var(--gold-teks);
}
.form-kartu h3 { font-size: var(--t-h3); }
.form-lead { color: var(--teks-lembut); margin: 10px 0 26px; }

/* Keadaan tertutup, tampil di atas blok hijau. */
.form-tutup {
  margin: 40px 0 0; padding: 26px 28px; max-width: 680px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(232, 199, 126, 0.45);
  border-radius: var(--r-blok);
}
.form-tutup h3 { color: var(--putih); font-size: 1.32rem; }
.form-tutup p { color: var(--di-hijau); margin: 10px 0 20px; max-width: 58ch; }
.btn-terang { background: var(--putih); color: var(--hijau); border-color: var(--putih); }
.btn-terang:hover { background: var(--permukaan-lembut); color: var(--hijau); }

/* --------------------------------------------------------------------------
   Kolom masukan. Label di atas, keterangan di bawah label, pesan kesalahan
   di bawah kolom. Urutan itu sama dengan urutan pembacaan.
   -------------------------------------------------------------------------- */

.kolom { margin: 0 0 26px; border: 0; padding: 0; }
/* :not(.pilih) penting. Tanpa itu selektor ini (0,1,1) mengalahkan .pilih
   (0,1,0), dan baris pilihan kelas ikut kena display:block sehingga titik
   radionya jatuh ke atas teks, bukan di sampingnya. */
.kolom > label:not(.pilih), .kolom legend {
  display: block; font-weight: 800; color: var(--hijau);
  font-size: 1.1rem; margin-bottom: 4px; padding: 0;
}
.kolom-bantu { margin: 0 0 10px; color: var(--teks-lembut); font-size: 0.95rem; }

/* Daftar tipe yang disebut satu per satu mudah ketinggalan: kolom password
   sempat tidak tergaya karena tipenya belum disebut. Jadi semua tipe masuk,
   kecuali radio dan centang yang punya gayanya sendiri. */
.kolom input:not([type="radio"]):not([type="checkbox"]) {
  display: block; width: 100%; min-height: 56px;
  padding: 0 16px; font: inherit; font-size: 1rem; color: var(--teks);
  background: var(--putih); border: 1.5px solid var(--input-garis);
  border-radius: var(--r-input);
}
.kolom input:hover { border-color: var(--hijau); }
.kolom input[aria-invalid="true"] { border-color: var(--salah-garis); border-width: 2px; }
.kolom-sempit input[type="number"] { max-width: 180px; }

.kolom-salah {
  margin: 8px 0 0; color: var(--salah); font-weight: 600; font-size: 1rem;
}

/* Pilihan kelas. Baris besar yang seluruhnya bisa ditekan, bukan titik radio
   kecil, karena presisi tangan menurun pada usia lanjut. */
.pilihan legend { margin-bottom: 12px; }
.pilih {
  display: flex; align-items: flex-start; gap: 14px;
  min-height: 72px; padding: 16px 18px; margin-bottom: 12px;
  border: 1.5px solid var(--input-garis); border-radius: var(--r-pilih);
  cursor: pointer;
}
.pilih:hover { border-color: var(--hijau); background: var(--permukaan-lembut); }
.pilih input[type="radio"] { width: 26px; height: 26px; margin: 2px 0 0; accent-color: var(--hijau); flex: 0 0 26px; }
.pilih:has(input:checked) { border-color: var(--hijau); border-width: 2px; background: var(--permukaan-lembut); }
.pilih-nama { display: block; font-weight: 600; color: var(--hijau); font-size: 1.05rem; }
.pilih-ket { display: block; color: var(--teks-lembut); font-size: 0.95rem; }
/* Cincin fokus mengelilingi seluruh baris, bukan hanya titik radionya. */
.pilih:has(input:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Pesan kesalahan dan penolakan.
   -------------------------------------------------------------------------- */

.pesan-salah, .pesan-tolak {
  margin: 0 0 26px; padding: 18px 20px;
  background: var(--salah-latar); border-left: 5px solid var(--salah-garis);
  border-radius: var(--r-kecil); color: var(--salah);
}
.pesan-salah-judul { margin: 0 0 8px; font-weight: 800; font-size: 1.1rem; }
.pesan-salah ul { margin: 0; padding-left: 1.3em; }
.pesan-salah li { margin-bottom: 6px; }
.pesan-salah a { color: var(--salah); font-weight: 600; text-underline-offset: 3px; }
.pesan-tolak p { margin: 0; font-weight: 600; }

.form-privasi { margin: 0 0 26px; font-size: 0.98rem; color: var(--teks-lembut); max-width: 56ch; }
.btn-kirim { width: 100%; max-width: 340px; }
/* Keadaan sedang mengirim: tombol mengunci diri supaya satu pendaftaran tidak
   terkirim dua kali saat sambungan lambat. */
.btn-kirim[data-mengirim="ya"] { background: var(--hijau-sedang); cursor: progress; }

/* --------------------------------------------------------------------------
   Halaman terima kasih.
   -------------------------------------------------------------------------- */

/* Nomor pendaftaran di atas H1. Membawa fakta yang tidak ada di judul, jadi
   bukan pil hiasan, tapi tetap metadata: warnanya tidak ikut bersaing dengan
   aksen. */
.terima-label {
  margin: 0 0 6px; color: var(--teks-lembut); font-weight: 600;
  font-size: 0.95rem; letter-spacing: 0.06em;
}
.terima-rinci { margin: 0 0 26px; }
.terima-rinci > div {
  display: flex; flex-wrap: wrap; gap: 4px 20px; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid var(--garis);
}
.terima-rinci dt { color: var(--teks-lembut); }
.terima-rinci dd { margin: 0; font-weight: 600; color: var(--hijau); }

/* --------------------------------------------------------------------------
   Halaman kebijakan privasi.
   -------------------------------------------------------------------------- */

.draft-tanda {
  margin: 0 0 34px; padding: 20px 22px;
  background: var(--putih); border: 2px solid var(--gold-garis);
  border-radius: var(--r-blok);
}
.draft-judul { margin: 0 0 8px; font-weight: 800; color: var(--gold-teks); font-size: 1.1rem; }
.draft-tanda p:last-child { margin: 0; color: var(--teks); }

.hal-lead { font-size: 1.1rem; color: var(--teks-lembut); }
.hal-daftar { margin: 0 0 1rem; padding-left: 1.4em; }
.hal-daftar li { padding: 6px 0; }
/* Bagian yang hanya bisa dijawab pihak madrasah. Ditandai terang terangan
   supaya tidak pernah terbaca sebagai kalimat yang sudah selesai. */
.belum {
  padding: 14px 16px; background: var(--permukaan-lembut);
  border-left: 5px solid var(--gold-garis); border-radius: var(--r-kecil);
  color: var(--gold-teks); font-weight: 600;
}

@media (max-width: 760px) {
  .btn-kirim { max-width: none; }
  .terima-rinci > div { flex-direction: column; }
}

/* ==========================================================================
   Panel pengurus. Memakai token warna yang sama dengan situs publik supaya
   tidak ada palet kedua yang harus dirawat. Bentuknya sidebar + topbar,
   pola umum dashboard pengurus (mis. AdminLTE), tapi tanpa menambah
   dependensi baru: hijau tua sidebar dan putih topbar dari token yang
   sudah ada, ikon inline SVG, dan tombol buka tutup memakai ulang JS menu
   ponsel situs publik (id="menu", class="menu-btn") di script.js.
   ========================================================================== */

/* Bar pengurus dibedakan dengan garis bawah hijau tebal, bukan dengan warna
   baru. Itu penanda bahwa halaman ini bukan halaman publik. Dipakai di
   halaman masuk, yang berdiri sendiri tanpa sidebar. */
.bar-pengurus { border-bottom: 4px solid var(--hijau); }
.bar-pengurus .mark { cursor: default; }

.pengurus-aku { display: flex; align-items: center; gap: 14px; }
.pengurus-nama { font-weight: 600; color: var(--hijau); font-size: 1rem; }
.pengurus-aku form { margin: 0; }

.btn-kecil { min-height: 48px; padding: 0 18px; font-size: 0.98rem; }

/* --------------------------------------------------------------------------
   Kerangka dashboard: sidebar hijau tua tetap di kiri, topbar putih lengket
   di kanan atas, isi halaman di bawahnya. Latar halaman krem lembut supaya
   panel putih (kartu, tabel) terangkat tanpa perlu shadow.
   -------------------------------------------------------------------------- */

.admin-body { background: var(--permukaan-lembut); }
.admin-shell { display: flex; align-items: flex-start; min-height: 100vh; }

.admin-sidebar {
  flex: 0 0 280px; width: 280px;
  display: flex; flex-direction: column;
  background: var(--hijau); color: var(--di-hijau);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}

/* Logo sekarang bertinta gelap (wordmark hitam), sementara sidebar ini
   berlatar hijau tua: kontrasnya cuma 2.30:1, jauh di bawah ambang 3:1 untuk
   komponen. Panel putih di sini adalah kebalikan dari navbar publik, yang
   latarnya sendiri sudah putih dan tidak butuh panel apa pun. */
.admin-brand { padding: 22px 24px; border-bottom: 1px solid rgba(247, 242, 231, 0.2); }
.admin-brand-logo-panel {
  display: inline-flex; align-items: center;
  background: var(--putih); border-radius: var(--r-btn);
  padding: 8px 14px;
}
.admin-brand-logo { display: block; height: 44px; width: auto; }

.admin-nav { flex: 1 1 auto; padding: 18px 14px; }
.admin-nav-label {
  margin: 0 10px 10px; font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--hijau-lembut);
}
.admin-nav ul { list-style: none; margin: 0; padding: 0; }
.admin-nav-link {
  display: flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 0 14px; margin-bottom: 4px;
  border-radius: var(--r-input);
  color: var(--di-hijau); text-decoration: none; font-weight: 600;
}
.admin-nav-link:hover { background: rgba(247, 242, 231, 0.14); }
.admin-nav-link.is-aktif { background: var(--putih); color: var(--hijau); }
.admin-nav-ikon { flex: 0 0 20px; width: 20px; height: 20px; }

.admin-sidebar-kaki { padding: 14px; border-top: 1px solid rgba(247, 242, 231, 0.2); }

.admin-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.admin-topbar {
  display: flex; align-items: center; gap: 18px;
  min-height: 76px; padding: 14px 28px;
  background: var(--putih); border-bottom: 1px solid var(--garis);
  position: sticky; top: 0; z-index: 30;
}
.admin-topbar-judul { flex: 1 1 auto; margin: 0; font-size: 1.4rem; }

.admin-main { flex: 1 1 auto; padding: 28px; }
.admin-kaki { padding: 0 28px 32px; }
.admin-kaki .kaki-ket { margin: 0; font-size: 0.92rem; color: var(--teks-lembut); }

/* Kartu angka di atas panel. Empat angka nyata, tidak ada grafik. */
.admin-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px; margin: 0 0 24px;
}
.admin-stat-kartu {
  padding: 18px 20px;
  background: var(--putih); border: 1px solid var(--garis);
  border-left: 5px solid var(--hijau); border-radius: var(--r-blok);
}
.admin-stat-kartu.aksen { border-left-color: var(--gold-garis); }
.admin-stat-angka { display: block; font-size: 1.9rem; font-weight: 800; color: var(--hijau); line-height: 1.15; }
.admin-stat-label { display: block; margin-top: 4px; color: var(--teks-lembut); font-size: 0.95rem; }

/* Panel isi halaman, setara "box" pada template dashboard: judul dan
   tindakan cepat di atas, isi di bawah. */
.admin-panel {
  padding: clamp(20px, 3vw, 28px);
  background: var(--putih); border: 1px solid var(--garis); border-radius: var(--r-blok);
}
.admin-panel-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--garis);
}
.admin-panel-title { margin: 0; font-size: var(--t-h3); }

@media (max-width: 900px) {
  .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  html { font-size: 18px; }

  .admin-sidebar {
    display: none;
    position: fixed; left: 0; right: 0; top: 76px;
    width: auto; height: auto; max-height: calc(100vh - 76px); overflow-y: auto;
    z-index: 35; border-bottom: 1px solid var(--garis);
  }
  .admin-sidebar[data-buka="ya"] { display: flex; }

  .admin-topbar { padding: 14px 20px; gap: 12px; }
  .admin-topbar-judul { font-size: 1.15rem; }
  .admin-main, .admin-kaki { padding-left: 20px; padding-right: 20px; }
  .admin-stats { grid-template-columns: minmax(0, 1fr); }
}


/* --------------------------------------------------------------------------
   Halaman masuk
   -------------------------------------------------------------------------- */

.masuk-sec { padding: var(--sec-y-rapat) 0; }
.masuk-wrap { max-width: 560px; }
.masuk-kartu { margin: 0; max-width: none; }
.masuk-kartu h1 { font-size: var(--t-h1); }

.pesan-baik {
  margin: 0 0 24px; padding: 16px 18px;
  background: var(--permukaan-lembut); border-left: 5px solid var(--hijau);
  border-radius: var(--r-kecil);
}
.pesan-baik p { margin: 0; font-weight: 600; color: var(--hijau); }

.pilih-centang { margin-top: 4px; }
.pilih-centang input[type="checkbox"] { width: 26px; height: 26px; margin: 2px 0 0; accent-color: var(--hijau); flex: 0 0 26px; }

.masuk-bantu {
  margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--garis);
  font-size: 0.95rem; color: var(--teks-lembut);
}
.masuk-bantu code {
  background: var(--permukaan-lembut); padding: 2px 6px; border-radius: var(--r-kecil);
  font-size: 0.92rem; color: var(--hijau);
}

/* --------------------------------------------------------------------------
   Daftar pendaftar
   -------------------------------------------------------------------------- */

.saring {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px;
  padding: 22px; margin: 0 0 22px;
  background: var(--putih); border: 1px solid var(--garis);
  border-radius: var(--r-blok);
}
.saring-kolom { flex: 1 1 220px; }
.saring-kolom label {
  display: block; font-weight: 600; color: var(--hijau);
  font-size: 0.98rem; margin-bottom: 6px;
}
.saring-kolom input, .saring-kolom select {
  display: block; width: 100%; min-height: 56px; padding: 0 14px;
  font: inherit; font-size: 1rem; color: var(--teks);
  background: var(--putih); border: 1.5px solid var(--input-garis); border-radius: var(--r-input);
}
.saring-kolom select { padding-right: 34px; }
.saring-aksi { display: flex; flex-wrap: wrap; gap: 12px; }

/* Keadaan kosong. Dua versinya memakai blok yang sama tapi teks yang berbeda,
   karena penyebabnya berbeda. */
.kosong {
  padding: clamp(28px, 5vw, 48px); text-align: left;
  background: var(--putih); border: 1px solid var(--garis); border-radius: var(--r-blok);
}
.kosong h2 { font-size: 1.4rem; margin-bottom: 10px; }
.kosong p { color: var(--teks-lembut); max-width: 56ch; margin-bottom: 22px; }

/* ---------- Tabel pendaftar (DataTables) ----------
   DataTables mengurus interaktivitas (cari, saring, urut, halaman); token
   warna, radius, dan ukuran target sentuh di bawah ini yang memastikan
   hasilnya terlihat seperti bagian dari situs ini, bukan tempelan pustaka
   luar dengan gaya birunya sendiri. */

.saring-tabel { margin-bottom: 22px; }

.tabel-pendaftar {
  width: 100%; border-collapse: collapse;
  background: var(--putih); border: 1px solid var(--garis); border-radius: var(--r-blok);
  overflow: hidden;
}
.tabel-pendaftar th, .tabel-pendaftar td {
  padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--garis);
  font-size: 0.98rem;
}
.tabel-pendaftar thead th {
  background: var(--hijau); color: var(--putih); font-weight: 700;
  font-size: 0.92rem; letter-spacing: 0.02em;
}
.tabel-pendaftar tbody tr:last-child td { border-bottom: 0; }
.tabel-pendaftar tbody tr:hover td { background: var(--permukaan-lembut); }
.tabel-pendaftar .kolom-aksi { display: flex; flex-wrap: wrap; gap: 8px; white-space: nowrap; }
/* min-height 44px, bukan kurang: diverifikasi lewat Chrome sungguhan bahwa
   40px (nilai pertama yang saya tulis) jatuh di bawah ambang sentuh minimum
   yang DESIGN.md sendiri tetapkan untuk audiens 50 tahun ke atas. */
.tabel-pendaftar .kolom-aksi .btn { min-height: 44px; padding: 0 14px; font-size: 0.92rem; }

/* Ikon urut bawaan DataTables (segitiga di header) diwarnai supaya terlihat
   di atas latar hijau; defaultnya abu abu gelap, nyaris tidak terlihat. */
table.dataTable thead .dt-column-order::before,
table.dataTable thead .dt-column-order::after { opacity: 0.85; }
table.dataTable thead .dt-column-order::before { color: var(--gold-terang); }
table.dataTable thead .dt-column-order::after { color: var(--gold-terang); }

.tabel-kaki {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 18px;
}
/* Nama kelas di bawah ini (dt-info, dt-paging, dt-paging-button) adalah
   nama SUNGGUHAN yang dipakai DataTables 2.3.4, diverifikasi langsung dari
   DOM sesudah pustaka jalan di peramban. Percobaan pertama menulis CSS ini
   memakai nama kelas versi 1.x lama (dataTables_wrapper, paginate_button):
   CSS itu VALID tapi TIDAK PERNAH COCOK dengan apa pun, jadi seluruh
   pagination tampil dengan gaya bawaan pustaka yang polos, bukan gaya
   situs ini. border-color yang diperiksa lewat getComputedStyle waktu itu
   transparan sepenuhnya, membuktikan override itu nol berpengaruh. */
.dt-info {
  color: var(--teks-lembut); font-size: 0.98rem; margin: 0;
}
/* Tombol halaman bawaan DataTables digambar ulang seperti .btn-kedua, dan
   dijaga di atas 44px karena ini kontrol yang paling sering ditekan berulang
   saat menyisir banyak pendaftar. */
.dt-paging { display: flex; flex-wrap: wrap; gap: 8px; }
.dt-paging .dt-paging-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 16px; border-radius: var(--r-btn);
  border: 1.5px solid var(--hijau); color: var(--hijau) !important;
  background: var(--putih); font-weight: 600; cursor: pointer;
}
.dt-paging .dt-paging-button.current {
  background: var(--hijau); color: var(--putih) !important; border-color: var(--hijau);
}
.dt-paging .dt-paging-button.disabled {
  opacity: 0.45; cursor: not-allowed; color: var(--hijau) !important;
}
.dt-paging .dt-paging-button:hover:not(.disabled):not(.current) {
  background: var(--permukaan-lembut); color: var(--hijau) !important;
}

/* Pesan "tidak ada hasil" (language.zeroRecords), dirender di dalam sel
   tabel oleh DataTables sendiri saat baris nihil. */
.kosong-tabel-judul { display: block; margin-bottom: 14px; font-weight: 700; color: var(--teks); }
table.dataTable tbody td.dt-empty { padding: 32px 16px; text-align: left; }

@media (max-width: 760px) {
  .pengurus-aku { gap: 10px; }
  .pengurus-nama { display: none; } /* nama pengurus disembunyikan di layar
                                        sempit supaya tombol Keluar tetap utuh */
  .saring-aksi .btn { width: auto; }
  .tabel-pendaftar th, .tabel-pendaftar td { padding: 12px 10px; font-size: 0.92rem; }
}

/* ==========================================================================
   Pembayaran SPP. Memakai token warna yang sama dengan sisa situs.
   ========================================================================== */

/* Ringkasan tagihan. Baris, bukan kartu, karena ini keterangan pengiring
   bukan hal yang perlu ditekan. */
.tagihan { margin: 18px 0 30px; }
.tagihan > div {
  display: flex; flex-wrap: wrap; gap: 4px 20px; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid var(--garis);
}
.tagihan dt { color: var(--teks-lembut); }
.tagihan dd { margin: 0; font-weight: 600; color: var(--hijau); }
.tagihan-nominal { font-size: 1.32rem; font-weight: 800; color: var(--gold-teks) !important; }

/* Keadaan lunas. Garis kiri hijau tebal menandai satu hal yang nyata:
   pembayaran ini sudah diterima. Garis itu membawa informasi keadaan,
   bukan hiasan. */
.lunas, .lunas-ringkas {
  padding: clamp(24px, 4vw, 36px);
  background: var(--putih); border: 1px solid var(--garis);
  border-left: 6px solid var(--hijau); border-radius: var(--r-blok);
  margin-bottom: 30px;
}
.lunas-label {
  margin: 0 0 6px; color: var(--hijau); font-weight: 800;
  font-size: 0.95rem; letter-spacing: 0.06em;
}
.lunas h2 { font-size: var(--t-h2); margin-bottom: 20px; }

/* Instruksi pembayaran. Satu fokus per layar: nomor yang harus disalin. */
.instruksi {
  padding: clamp(24px, 4vw, 38px); margin-bottom: 34px;
  background: var(--putih); border: 1px solid var(--garis); border-radius: var(--r-blok);
}
.instruksi h2 { font-size: var(--t-h3); margin-bottom: 20px; }
.instruksi-label {
  margin: 22px 0 4px; font-size: 0.95rem; color: var(--teks-lembut);
  letter-spacing: 0.04em;
}
.instruksi-label:first-of-type { margin-top: 0; }

/* Nomor virtual account. Paling besar di halaman, dan diberi jarak antar
   kelompok angka supaya bisa dibacakan lewat telepon tanpa salah. */
.va-nomor {
  margin: 0; font-size: var(--t-angka-besar); font-weight: 800;
  color: var(--hijau); letter-spacing: 0.06em; line-height: 1.2;
  word-break: break-all;
}
.va-jumlah {
  margin: 0; font-size: var(--t-angka); font-weight: 800;
  color: var(--gold-teks); line-height: 1.2;
}

/* Satu satunya warna yang sengaja TIDAK memakai token di seluruh berkas ini.
   Latar kode QR harus putih murni, bukan var(--putih), supaya kalau palet
   nanti digeser ke putih kekuningan, kode QR-nya tidak ikut bergeser dan
   gagal dipindai. Kode QR yang gagal dipindai berarti pembayaran gagal. */
.qr-kotak {
  display: inline-block; padding: 16px; margin: 6px 0 4px;
  background: #FFFFFF; border: 1px solid var(--garis); border-radius: var(--r-kecil);
}
.qr-kotak svg { display: block; width: 100%; max-width: 320px; height: auto; }

.langkah { margin: 24px 0 0; padding-left: 1.5em; }
.langkah li { padding: 8px 0; font-size: 1.02rem; }
/* Penomoran langkah adalah struktur, bukan penekanan. Sebelumnya gold, dan
   itu membuat lima angka kecil ikut bersaing dengan nominal. */
.langkah li::marker { color: var(--hijau); font-weight: 800; }

.batas-waktu {
  margin: 26px 0; padding: 16px 18px;
  background: var(--permukaan-lembut); border-left: 5px solid var(--gold-garis);
  border-radius: var(--r-kecil); color: var(--teks);
}
.batas-waktu strong { color: var(--hijau); }

.instruksi-ganti { margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--garis); color: var(--teks-lembut); }

.pilih-cara { max-width: none; margin: 0; }
.pilih-cara h2 { font-size: var(--t-h3); }

@media (max-width: 760px) {
  .tagihan > div, .lunas .terima-rinci > div { flex-direction: column; }
  .instruksi .btn { width: 100%; }
}

/* Keadaan pembayaran di daftar pengurus. Warna di sini menandai keadaan nyata,
   bukan hiasan: hijau berarti uangnya sudah masuk, gold berarti perlu ditagih. */
.bayar-lunas, .bayar-belum { margin: 8px 0 0; font-weight: 800; font-size: 1rem; }
.bayar-lunas { color: var(--hijau); }
.bayar-belum { color: var(--gold-teks); }
/* Tagihan yang belum dibayar, di sel tabel pendaftar. Baris kedua di dalam
   sel yang sama, bukan span sejajar: cukup lega untuk dibaca tanpa membuat
   baris tabel jadi sangat lebar. */
.tabel-pendaftar .bayar-ket { display: block; margin-top: 2px; font-weight: 400; font-size: 0.88rem; color: var(--teks-lembut); }

/* Tautan di dalam kalimat. WCAG 2.5.8 mengecualikan target inline yang
   tingginya dibatasi tinggi baris, jadi ini bukan pelanggaran. Tetap diberi
   ruang tekan tambahan karena pembaca 50 tahun ke atas perlu sasaran yang
   lebih longgar.

   padding-block pada elemen inline memperbesar area tekan tanpa mengubah
   tinggi baris, jadi tata letaknya tidak bergeser. Nilainya 4px, dipilih
   supaya area tekan antar baris tidak saling tumpang. */
main p a:not(.btn),
main li a:not(.btn),
main dd a:not(.btn) {
  padding-block: 4px;
  text-underline-offset: 3px;
}

/* Pesan keterangan, bukan pesan kesalahan. Dipakai untuk hasil pemeriksaan
   status pembayaran: "belum ada pembayaran yang masuk" bukan kesalahan
   aplikasi, jadi tidak boleh memakai warna merah yang membuat pembayar
   mengira ada yang rusak. */
.pesan-info {
  margin: 0 0 26px; padding: 18px 20px;
  background: var(--permukaan-lembut); border-left: 5px solid var(--gold-garis);
  border-radius: var(--r-kecil); color: var(--teks);
}
.pesan-info p { margin: 0; font-weight: 600; }

/* ==========================================================================
   Halaman pendaftaran terpisah, /daftar.
   ========================================================================== */

.daftar-sec { padding: var(--sec-y-rapat) 0 var(--sec-y); }
.daftar-sec h1 { font-size: var(--t-h1); margin-bottom: 20px; }

/* Blok status versi latar terang. Blok hijau di landing page memakai .status
   di atas latar hijau, di sini latarnya krem, jadi warnanya dibalik. */
.status-terang {
  background: var(--putih); border: 1px solid var(--gold-garis);
  --fokus: var(--gold-teks);
}
.status-terang .status-judul { color: var(--gold-teks); }
.status-terang .status-ket { color: var(--teks); }

.daftar-syarat { margin: 22px 0 30px; color: var(--teks-lembut); max-width: 60ch; }

/* Keadaan tertutup versi latar terang. */
.form-tutup-terang {
  background: var(--putih); border: 1px solid var(--garis);
  --fokus: var(--gold-teks);
}
.form-tutup-terang h2, .form-tutup-terang h3 { color: var(--hijau); font-size: var(--t-h3); }
.form-tutup-terang p { color: var(--teks); }

/* Tombol di atas latar hijau pada landing page. */
.btn-terang-garis { background: transparent; color: var(--putih); border-color: var(--putih); }
.btn-terang-garis:hover { background: var(--putih); color: var(--hijau); }

/* Nomor pendaftaran di atas instruksi pembayaran. Muncul di /daftar setelah
   formulir dikirim, jadi pembayar tahu pendaftarannya sudah tersimpan. */
/* Metadata, bukan aksen. Aksen gold di layar ini disimpan untuk nominal
   yang harus dibayar, karena itulah satu satunya angka yang kalau salah
   membuat pembayarannya gagal. */
.instruksi-nomor {
  margin: 0 0 8px; color: var(--teks-lembut); font-weight: 600;
  font-size: 0.95rem; letter-spacing: 0.03em;
}

/* Wilayah yang isinya ditukar tidak boleh melompat tampilannya. */
#wilayah-daftar:focus, #wilayah-bayar:focus, #instruksi:focus, #lunas:focus,
#wilayah-formulir:focus { outline: none; }
#instruksi:focus-visible, #lunas:focus-visible { outline: 3px solid var(--fokus); outline-offset: 4px; }

/* ==========================================================================
   Pengaturan pixel tracking, panel admin.
   ========================================================================== */

.pixel-daftar { margin: 0 0 22px; }
.pixel-daftar > div { padding: 16px 0; border-bottom: 1px solid var(--garis); }
.pixel-daftar > div:last-child { border-bottom: 0; }
.pixel-daftar dt { font-weight: 800; color: var(--hijau); font-size: 1.02rem; margin-bottom: 4px; }
.pixel-daftar dd { margin: 0; color: var(--teks); max-width: 62ch; }

.hapus-token-form { margin-top: 18px; }