@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════
   Semarak 17 Agustus RT 04 — lembar gaya tunggal
   Nilai di berkas ini berasal dari DESIGN-website-17an.md.
   Urutan: token → huruf → dasar → komponen → halaman → cetak.
   Tanpa langkah build: berkas ini diunggah apa adanya.
   ═══════════════════════════════════════════════════════════════ */

/* ── HURUF ──────────────────────────────────────────────────────
   Tiga berkas saja. Letakkan .woff2 di /assets/fonts/ (lihat README).
   Bila berkasnya belum ada, tumpukan cadangan di bawah tetap membuat
   situs terbaca — hanya bentuk hurufnya berbeda.

   Pembagian tugasnya tegas:
     Banner  → dua huruf poster yang condong ke depan. Kemiringannya
               yang membuat judul terasa bergerak, bukan sekadar besar.
     Sisanya → Geist. Netral, angkanya lapang, terbaca di HP murah.
               Semua angka rupiah memakai ini — huruf poster pada angka
               membuatnya terbaca sebagai hiasan, bukan sebagai data. */
@font-face{
  font-family:"Kaushan Script"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/assets/fonts/kaushan-script.woff2") format("woff2");
}
@font-face{
  font-family:"Fugaz One"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/assets/fonts/fugaz-one.woff2") format("woff2");
}
/* Geist versi variabel: satu berkas untuk seluruh ketebalan 100–900 */
@font-face{
  font-family:"Geist"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("/assets/fonts/geist-variable.woff2") format("woff2-variations"),
      url("/assets/fonts/geist-variable.woff2") format("woff2");
}

/* ── TOKEN ────────────────────────────────────────────────────── */
:root{
  color-scheme: light;

  --merah:#C1121F; --merah-tua:#8E0D17; --merah-teks:#8E0D17; --merah-muda:#F7DDDD;
  --krem:#FDF4E4;  --krem-tua:#F2E9DA;  --permukaan:#FFFFFF; --putih:#FFFFFF;
  --emas:#E0A030;  --emas-tua:#8A5A12;  --emas-di-merah:#FFD98A;
  --garis-kartu:rgba(224,160,48,.45);
  --tinta:#2A1A17; --tinta-lembut:#6B5A54;

  --tan:#F7EAD0;   /* pita pemisah antar bagian — lihat § PITA BAGIAN */
  --masuk:#1E7A46; --keluar:#B45309; --batal:#6B5A54;
  --seri-offline:#B87F24; --seri-transfer:#1565A8; --garis-kisi:#E8DFCF;
  --lencana-off-bg:#F6ECD8; --lencana-trf-bg:#E4EFF8; --lencana-ok-bg:#E3F2E9;

  --huruf-kuas:"Kaushan Script","Segoe Script","Brush Script MT",cursive;
  --huruf-judul:"Fugaz One",Impact,"Arial Narrow",system-ui,sans-serif;
  --huruf-teks:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;

  /* Lompatan ukuran dibuat besar dengan sengaja. Sebelumnya judul bagian
     hanya sedikit lebih besar dari judul kartu, sehingga mata tidak punya
     tangga untuk dinaiki dan halaman terbaca rata. */
  --t-judul-1:clamp(2.25rem,9vw,3.75rem);
  --t-bagian:clamp(1.875rem,7.5vw,3rem);      /* judul bagian — naik tajam */
  --t-angka-utama:clamp(2.25rem,11vw,3.5rem);
  --t-angka-ubin:clamp(1.0625rem,4.4vw,1.5rem);
  --t-judul-kartu:1.125rem;                    /* turun, memberi ruang di atasnya */
  --t-teks:1.125rem; --t-kecil:1rem; --t-label:.9375rem;

  --r1:4px; --r2:8px; --r3:12px; --r4:16px; --r5:20px;
  --r6:24px; --r7:32px; --r8:40px; --r9:64px;

  /* Jarak dinamai menurut HUBUNGAN, bukan ukuran. Ini yang menjaga
     kedekatan: yang berkerabat selalu lebih rapat daripada yang tidak,
     di mana pun komponennya dipakai. */
  --jarak-rapat:12px;      /* antar unsur dalam satu kelompok  */
  --jarak-sedang:20px;     /* antar kartu di dalam satu bagian */
  --jarak-bagian:56px;     /* jarak nafas di dalam pita bagian */
  --sudut-kecil:8px; --sudut-sedang:16px; --sudut-kartu:24px; --sudut-pil:999px;
  --bayang-1:0 1px 2px rgba(74,42,20,.06), 0 4px 12px -6px rgba(74,42,20,.16);
  --bayang-2:0 2px 4px rgba(74,42,20,.08), 0 16px 32px -18px rgba(74,42,20,.28);
  --bayang-tekan:inset 0 2px 4px rgba(74,42,20,.18);

  --gerak-cepat:120ms; --gerak-sedang:220ms; --gerak-lambat:400ms;
  --lengkung:cubic-bezier(.2,.8,.2,1);
  --sentuh:48px; --sentuh-besar:56px;
  --lebar-konten:1080px; --lebar-form:520px;
}

/* Kendali pembesar huruf (DESIGN §8.2) — seluruh ukuran dalam rem
   sehingga satu baris ini membesarkan seisi halaman serentak. */
html{ font-size:100%; -webkit-text-size-adjust:100%; }
html[data-huruf="besar"]{ font-size:115%; }
html[data-huruf="sangat-besar"]{ font-size:130%; }

/* ── DASAR ────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; font-family:var(--huruf-teks); font-size:var(--t-teks);
  line-height:1.6; color:var(--tinta);
  background-color:var(--krem);
  background-image:radial-gradient(rgba(160,120,60,.09) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(76px + env(safe-area-inset-bottom));  /* ruang navigasi bawah */
}
/* Halaman petugas tidak memakai navigasi bawah — jangan sisakan ruangnya. */
body.tanpa-nav{ padding-bottom:var(--r8); }
body.tanpa-nav .toast{ bottom:var(--r4); }
h1,h2,h3,h4,p,ul,ol,figure{ margin:0; }
ul{ padding:0; list-style:none; }
img{ max-width:100%; height:auto; }
a{ color:var(--merah-teks); }

:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--putih), 0 0 0 6px var(--merah-tua);
  border-radius:var(--sudut-kecil);
}
.lewati{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--merah-tua); color:#fff; padding:var(--r3) var(--r5);
  border-radius:0 0 var(--sudut-sedang) 0; text-decoration:none; font-weight:700;
}
.lewati:focus{ left:0; }

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

.wadah{ max-width:var(--lebar-konten); margin-inline:auto; padding-inline:var(--r4); }
.wadah--sempit{ max-width:var(--lebar-form); }
.umbul{ display:block; width:100%; }
.pita-lengkung{ display:block; width:100%; height:36px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ── BATANG PETUGAS ───────────────────────────────────────────── */
.batang-petugas{
  background:var(--tinta); color:#fff; font-size:.875rem;
  display:flex; flex-wrap:wrap; gap:var(--r2) var(--r4);
  align-items:center; justify-content:space-between;
  padding:var(--r2) var(--r4);
}
.batang-petugas__tautan{ display:flex; flex-wrap:wrap; gap:var(--r3); }
.batang-petugas a{ color:var(--emas-di-merah); text-decoration:none; font-weight:700; }
.batang-petugas a:hover{ text-decoration:underline; }

/* ── BANNER (DESIGN §4.13) ────────────────────────────────────── */
.banner{
  background:var(--merah-tua); color:#fff; text-align:center;
  padding-bottom:var(--r7);
  display:flex; flex-direction:column; justify-content:center;
}
/* Batas 72% tinggi layar (DESIGN §4.13) hanya diberlakukan bila layarnya
   memang cukup tinggi. Di layar pendek atau HP posisi mendatar, batas itu
   justru membuat isi banner meluber ke bagian di bawahnya — jadi di sana
   banner dibiarkan setinggi isinya. */
@media (min-height:600px){
  .banner{ max-height:72vh; }
}
.banner__isi{ padding:var(--r5) var(--r4) 0; display:grid; gap:8px; justify-items:center; }

/* Logo resmi HUT RI berwarna merah, sementara banner juga merah — tanpa
   alas terang logonya praktis hilang. Alas putih ini sekaligus memberi
   ruang bebas di sekeliling logo, seperti yang dituntut panduan lambang
   resmi. Logo tidak pernah diwarnai ulang atau diberi efek. */
.lambang{
  background:#fff; border-radius:20px; padding:10px 14px;
  box-shadow:var(--bayang-1); line-height:0;
}
.lambang img{ display:block; height:60px; width:auto; }

.banner__ajakan{
  font-size:.8125rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--emas-di-merah);
}

/* Baris nama acara: huruf kuas yang condong — kemiringannya yang
   membawa semangat, bukan ukurannya. Garis tepi gelap tipis menahannya
   tetap terbaca di atas merah. */
.banner__nama{
  font-family:var(--huruf-kuas); font-weight:400;
  font-size:clamp(3rem,15vw,5.5rem); line-height:1;
  color:var(--emas-di-merah);
  padding:0 .12em .08em;               /* ruang untuk ekor huruf kuas */
  text-shadow:
     2px 2px 0 rgba(74,6,10,.55),
     0 6px 18px rgba(0,0,0,.35);
}

/* Baris tanggal: huruf poster tebal condong, putih dengan garis tepi
   merah gelap — bentuk stiker yang sama dengan poster acuan. */
.banner__tanggal{
  font-family:var(--huruf-judul); font-size:clamp(2rem,10vw,3.75rem); line-height:1;
  letter-spacing:.01em; text-transform:uppercase; color:#fff;
  -webkit-text-stroke:2px #6E0A11;
  paint-order:stroke fill;             /* garis tepi digambar DI BAWAH isi */
  text-shadow:0 4px 0 rgba(74,6,10,.5), 0 10px 22px rgba(0,0,0,.35);
}
/* Peramban lama tanpa paint-order menggambar garis tepi di atas isi
   sehingga huruf jadi tebal berlebihan — di sana garis tepi dilepas. */
@supports not (paint-order: stroke){
  .banner__tanggal{ -webkit-text-stroke:0; }
}
.banner__pita{
  background:var(--merah); border-radius:var(--sudut-pil);
  padding:6px var(--r4); font-size:.8125rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; margin-top:var(--r1);
}
.banner__waktu{ font-size:.9375rem; color:#FBE7D2; line-height:1.45; margin-top:var(--r1); }

.hitung{ display:grid; grid-template-columns:repeat(4,minmax(0,74px)); gap:6px; margin-top:var(--r4); }
.hitung__kotak{ background:rgba(255,255,255,.12); border-radius:var(--sudut-kecil); padding:7px 4px; }
.hitung__angka{ font-size:1.5rem; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums; }
.hitung__label{ font-size:.625rem; letter-spacing:.1em; color:#F3C9A0; }
.hitung--lewat{ font-size:1rem; color:var(--emas-di-merah); font-weight:800; margin-top:var(--r4); }

/* ══════════════════════════════════════════════════════════════
   PITA BAGIAN — yang membuat tiap bagian terlihat sebagai bagian
   ══════════════════════════════════════════════════════════════
   Sebelumnya seluruh halaman berlatar krem dan tiap bagian hanyalah
   kartu putih yang bentuknya sama persis, sehingga halaman terbaca
   sebagai satu daftar panjang tanpa batas. Sekarang tiap bagian punya
   alasnya sendiri, dan alasnya berselang-seling:

       merah tua → krem → tan → krem → merah tua

   Mata membaca perpindahan alas itu sebagai "bagian baru dimulai"
   tanpa perlu satu garis pemisah pun.

   ATURAN YANG TIDAK BOLEH DILANGGAR: di atas pita tan, yang boleh
   berdiri langsung hanyalah teks pembuka bagian. Semua isi lain wajib
   berada di dalam kartu putih — warna Uang Masuk (4,49:1), Uang Keluar
   (4,22:1), dan seri Offline (2,89:1) semuanya GAGAL bila diukur
   langsung di atas tan. Di dalam kartu putih ketiganya lulus. */
.pita-bagian{ padding-block:var(--jarak-bagian); }
.pita-bagian--krem{ background:transparent; }          /* latar halaman */
.pita-bagian--tan{ background:var(--tan); }
.pita-bagian--merah{ background:var(--merah-tua); color:#fff; }

/* ── PEMBUKA BAGIAN — motif yang berulang di setiap bagian ─────
   Tiga unsur, urutan tetap, rata kiri: mata pendek emas, judul besar,
   garis emas. Karena bentuknya persis sama di keempat bagian, warga
   mengenalinya sebagai "ini awal bagian baru" sejak bagian kedua. */
.pembuka{ display:grid; gap:var(--jarak-rapat); margin-bottom:var(--r6); }
.pembuka__mata{
  font-size:.75rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--emas-tua);
}
.pembuka__judul{
  font-family:var(--huruf-judul); font-size:var(--t-bagian);
  letter-spacing:.01em; text-transform:uppercase; line-height:1.02;
  color:var(--merah-teks);
}
.pembuka__garis{ width:64px; height:4px; background:var(--emas); border-radius:2px; }
.pembuka__ket{ font-size:1rem; color:var(--tinta-lembut); max-width:52ch; }

/* Versi di atas pita merah */
.pita-bagian--merah .pembuka__mata{ color:var(--emas-di-merah); }
.pita-bagian--merah .pembuka__judul{ color:#fff; }
.pita-bagian--merah .pembuka__garis{ background:var(--emas-di-merah); }
.pita-bagian--merah .pembuka__ket{ color:#FBE7D2; }

/* Kartu di dalam satu bagian: dirapatkan; antar bagian: dijauhkan.
   Inilah kedekatan — yang berkerabat terlihat berkerabat. */
.tumpuk-kartu{ display:grid; gap:var(--jarak-sedang); }

/* ── KARTU ────────────────────────────────────────────────────── */
.kartu{
  background:var(--permukaan); border:2px solid var(--garis-kartu);
  border-radius:var(--sudut-kartu); padding:var(--r5); box-shadow:var(--bayang-1);
}
.kartu--sorot{ background:var(--krem-tua); border-color:var(--emas); }
.kartu__label{
  font-size:.75rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tinta-lembut);
}
.kartu__judul{ font-size:var(--t-judul-kartu); font-weight:800; line-height:1.3; }

/* Kartu bagian informasi (DESIGN §4.14) */
.kartu-bagian{
  background:var(--permukaan); border:2px solid var(--garis-kartu);
  border-radius:var(--sudut-kartu); overflow:hidden; box-shadow:var(--bayang-1);
}
.kartu-bagian__kepala{
  display:flex; align-items:center; gap:var(--r2);
  background:var(--krem-tua); border-bottom:2px solid var(--garis-kartu);
  padding:var(--r3) var(--r5);
}
.kartu-bagian__ikon{ font-size:1.25rem; line-height:1; flex:none; }
.kartu-bagian__judul{
  font-size:.8125rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  flex:1; min-width:0;
}
.kartu-bagian__isi{ padding:var(--r5); display:grid; gap:var(--jarak-sedang); }
.kartu-bagian__kaki{ padding:0 var(--r5) var(--r5); }

/* ── KARTU JANGKAR — satu benda paling berat di halaman ────────
   Kartu dana dibuat berlatar merah tua supaya menjadi jangkar visual:
   dari mana pun mata masuk ke halaman, ia mendarat di sini lebih dulu.
   Angkanya emas (7,00:1) dan teksnya krem (8,66:1) — keduanya terukur. */
.kartu-jangkar{
  background:var(--merah-tua); color:#fff;
  border:2px solid rgba(224,160,48,.5); border-radius:var(--sudut-kartu);
  padding:var(--r6) var(--r5); box-shadow:var(--bayang-2);
  display:grid; gap:var(--jarak-sedang);
}
.kartu-jangkar .kartu__label{ color:var(--emas-di-merah); }
.kartu-jangkar .angka-utama{ color:var(--emas-di-merah); }
.kartu-jangkar .penanda-segar{ color:#FBE7D2; }
.kartu-jangkar .rincian__baris{ border-bottom-color:rgba(255,255,255,.18); }
.kartu-jangkar .rincian__nama{ color:#FBE7D2; }
.kartu-jangkar .rincian__nilai{ color:#fff; }
.kartu-jangkar .rincian__nilai--saldo{ color:var(--emas-di-merah); }

/* ── ANGKA ────────────────────────────────────────────────────── */
.angka-utama{
  font-family:var(--huruf-teks);          /* jangan pernah huruf judul (DESIGN §3.2) */
  font-size:var(--t-angka-utama); font-weight:800; line-height:1;
  color:var(--merah-teks); letter-spacing:-.01em; margin-top:var(--r1);
}
.penanda-segar{ display:flex; align-items:center; gap:7px; font-size:.875rem; color:var(--tinta-lembut); margin-top:var(--r2); }
.titik{ width:10px; height:10px; border-radius:50%; flex:none; background:var(--batal); }
.titik--baru{ background:var(--masuk); animation:denyut 2.4s ease-in-out infinite; }
.titik--agak-lama{ background:var(--emas-tua); }
.titik--lama{ background:var(--batal); }
@keyframes denyut{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(.82)} }

.ubin-deret{ display:grid; grid-template-columns:1fr 1fr; gap:var(--r2); }
.ubin{ background:var(--permukaan); border:2px solid var(--garis-kartu); border-radius:var(--sudut-sedang); padding:var(--r3); }
.ubin__label{ display:flex; align-items:center; gap:5px; font-size:.6875rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.ubin--masuk .ubin__label{ color:var(--masuk); }
.ubin--keluar .ubin__label{ color:var(--keluar); }
.ubin__angka{ font-size:var(--t-angka-ubin); font-weight:800; line-height:1.15; margin-top:3px; }
.ubin__ket{ font-size:.75rem; color:var(--tinta-lembut); }

/* Rincian bertumpuk — bukan berkolom: Rp 11.900.000 tidak muat
   dalam kolom selebar 100 px di layar 360 px (DESIGN §4.14). */
.rincian{ display:grid; }
.rincian__baris{
  display:flex; align-items:center; justify-content:space-between; gap:var(--r3);
  padding:10px 0; border-bottom:1px solid var(--garis-kisi); font-size:.9375rem;
}
.rincian__baris:last-child{ border-bottom:0; }
.rincian__nama{ display:flex; align-items:center; gap:7px; color:var(--tinta-lembut); }
.rincian__nilai{ font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
.rincian__nilai--saldo{ color:var(--merah-teks); }

/* ── TOMBOL ───────────────────────────────────────────────────── */
.tombol{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--r2);
  min-height:var(--sentuh); padding:0 var(--r6);
  border:0; border-radius:var(--sudut-pil); cursor:pointer; text-decoration:none;
  font-family:var(--huruf-teks); font-size:1.0625rem; font-weight:700;
  transition:transform var(--gerak-cepat) var(--lengkung),
             background var(--gerak-cepat) var(--lengkung),
             box-shadow var(--gerak-cepat) var(--lengkung);
}
.tombol--utama{ background:var(--merah); color:#fff; box-shadow:var(--bayang-1); }
.tombol--utama:hover{ background:#A90F1B; }
.tombol--kedua{ background:transparent; color:var(--merah-teks); border:2px solid var(--merah); }
.tombol--kedua:hover{ background:var(--merah-muda); }
.tombol--hantu{ background:transparent; color:var(--merah-teks); padding:0 var(--r3); text-decoration:underline; text-underline-offset:4px; }
.tombol--bahaya{ background:transparent; color:var(--merah-teks); border:2px dashed var(--merah-tua); }
.tombol--wa{ background:var(--emas-di-merah); color:#8E0D17; font-weight:800; box-shadow:0 4px 0 rgba(0,0,0,.18); }
.tombol--wa:hover{ background:#FFE9B4; }
.tombol--wa:active{ box-shadow:0 1px 0 rgba(0,0,0,.18); }
.tombol:active{ transform:translateY(1px) scale(.985); box-shadow:var(--bayang-tekan); }
.tombol--blok{ width:100%; min-height:var(--sentuh-besar); font-size:1.125rem; }
.tombol--kecil{ min-height:40px; font-size:.9375rem; padding:0 var(--r4); }
.tombol[disabled]{ opacity:.45; cursor:not-allowed; }

/* ── SEGMEN & CHIP ────────────────────────────────────────────── */
.segmen{ display:grid; grid-template-columns:1fr 1fr; gap:6px; background:var(--krem-tua); padding:5px; border-radius:var(--sudut-pil); }
.segmen button{
  min-height:46px; border:0; border-radius:var(--sudut-pil); background:transparent;
  font-family:inherit; font-size:.9375rem; font-weight:700; color:var(--tinta-lembut);
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px;
  transition:background var(--gerak-cepat) var(--lengkung), color var(--gerak-cepat) var(--lengkung);
}
.segmen button[aria-pressed="true"]{ background:var(--permukaan); color:var(--tinta); box-shadow:var(--bayang-1); }
.segmen--jenis button[aria-pressed="true"][data-nilai="masuk"]{ color:var(--masuk); }
.segmen--jenis button[aria-pressed="true"][data-nilai="keluar"]{ color:var(--keluar); }

.chip-deret{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{
  min-height:42px; padding:0 var(--r4); border-radius:var(--sudut-pil);
  border:2px solid var(--garis-kartu); background:var(--permukaan);
  font-family:inherit; font-size:.875rem; font-weight:700; color:var(--tinta);
  cursor:pointer; text-decoration:none; display:inline-flex; align-items:center;
  transition:background var(--gerak-cepat) var(--lengkung), color var(--gerak-cepat) var(--lengkung);
}
.chip[aria-pressed="true"],.chip[aria-current="true"]{ background:var(--merah); border-color:var(--merah); color:#fff; }

/* ── ISIAN ────────────────────────────────────────────────────── */
.isian{ display:grid; gap:6px; }
.isian__label{ font-size:.9375rem; font-weight:700; }
.isian__bantuan{ font-size:.8125rem; color:var(--tinta-lembut); }
.isian__galat{ font-size:.8125rem; font-weight:700; color:var(--keluar); }
.isian__kolom,.isian select,.isian textarea{
  min-height:56px; width:100%; padding:var(--r3) var(--r4);
  border:2px solid var(--garis-kartu); border-radius:var(--sudut-sedang);
  background:var(--permukaan); color:var(--tinta);
  font-family:inherit; font-size:1.0625rem;
}
.isian textarea{ min-height:88px; line-height:1.5; resize:vertical; }
.isian__kolom:focus,.isian select:focus,.isian textarea:focus{ border-color:var(--merah); outline:none; }
.isian__kolom[aria-invalid="true"]{ border-color:var(--keluar); }

.isian-rupiah{
  display:flex; align-items:center; gap:var(--r2);
  min-height:68px; padding:0 var(--r4);
  border:2px solid var(--garis-kartu); border-radius:var(--sudut-sedang);
  background:var(--permukaan);
  transition:background var(--gerak-sedang) var(--lengkung), border-color var(--gerak-cepat) var(--lengkung);
}
.isian-rupiah:focus-within{ border-color:var(--merah); }
.isian-rupiah--kilat{ background:var(--merah-muda); }
.isian-rupiah__awalan{ font-size:1.0625rem; font-weight:700; color:var(--tinta-lembut); flex:none; }
.isian-rupiah__kolom{
  flex:1; min-width:0; border:0; background:transparent; color:var(--tinta);
  font-family:inherit; font-size:1.75rem; font-weight:800; text-align:right;
  padding:0; outline:none;
}
.isian-rupiah__kolom::placeholder{ color:#C4B3A6; }

/* Pintasan nominal — kisi 2×2 (DESIGN §4.2) */
.pintasan{ display:grid; grid-template-columns:1fr 1fr; gap:var(--r2); margin-top:var(--r3); }
.pintasan__tombol{
  min-height:var(--sentuh); border-radius:var(--sudut-pil);
  border:2px solid var(--garis-kartu); background:var(--krem-tua);
  font-family:inherit; font-size:1.0625rem; font-weight:700; color:var(--tinta); cursor:pointer;
  transition:background var(--gerak-cepat) var(--lengkung), color var(--gerak-cepat) var(--lengkung), border-color var(--gerak-cepat) var(--lengkung);
}
.pintasan__tombol:hover{ border-color:var(--emas); }
.pintasan__tombol[aria-pressed="true"]{ background:var(--merah); border-color:var(--merah); color:#fff; }
.pintasan__tombol--lain{ background:transparent; border-style:dashed; color:var(--tinta-lembut); font-weight:600; }
.pintasan__tombol--lain[aria-pressed="true"]{ background:transparent; border-color:var(--merah); border-style:solid; color:var(--merah-teks); }
.pintasan__bantuan{ font-size:.8125rem; color:var(--tinta-lembut); margin-top:var(--r2); min-height:1.4em; }
.pintasan__bantuan b{ color:var(--tinta); }

/* ── LENCANA ──────────────────────────────────────────────────── */
.lencana{
  display:inline-flex; align-items:center; gap:5px; min-height:28px; padding:0 11px;
  border-radius:var(--sudut-pil); font-size:.75rem; font-weight:700; border:1px solid;
}
.lencana--offline{ background:var(--lencana-off-bg); color:var(--emas-tua); border-color:var(--seri-offline); }
.lencana--transfer{ background:var(--lencana-trf-bg); color:var(--seri-transfer); border-color:var(--seri-transfer); }
.lencana--batal{ background:var(--krem-tua); color:var(--batal); border-color:var(--batal); }
.lencana--terbaru{ background:var(--lencana-ok-bg); color:var(--masuk); border-color:var(--masuk); }
.lencana--jadwal{ background:var(--lencana-off-bg); color:var(--emas-tua); border-color:var(--emas); }
.lencana--menyusul{ background:var(--krem-tua); color:var(--batal); border-color:var(--batal); }

/* ── BARIS TRANSAKSI ──────────────────────────────────────────── */
.daftar-transaksi{ display:grid; }
.baris{
  display:grid; grid-template-columns:1fr auto; gap:3px var(--r3);
  padding:var(--r3) 0; border-bottom:1px solid var(--garis-kisi); align-items:baseline;
}
.baris:last-child{ border-bottom:0; }
.baris__alamat{ font-weight:700; font-size:1rem; }
.baris__jumlah{ font-weight:800; font-size:1rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.baris__meta{ grid-column:1; font-size:.8125rem; color:var(--tinta-lembut); display:flex; align-items:center; gap:var(--r2); flex-wrap:wrap; }
.baris__aksi{ grid-column:2; display:flex; gap:6px; }
.baris--masuk .baris__jumlah{ color:var(--masuk); }
.baris--keluar .baris__jumlah{ color:var(--keluar); }
.baris--batal{ background:var(--krem-tua); }
.baris--batal .baris__alamat,.baris--batal .baris__jumlah{ text-decoration:line-through; color:var(--batal); }

/* ── KOTAK "MENYUSUL" & TERKUNCI (DESIGN §4.10, §4.16) ────────── */
.menyusul,.terkunci{
  background:var(--krem-tua); border:2px dashed var(--emas);
  border-radius:var(--sudut-sedang); padding:var(--r4); display:grid; gap:6px;
}
.menyusul__judul,.terkunci__judul{
  font-size:.875rem; font-weight:800; display:flex; gap:7px; align-items:center;
}
.menyusul__teks,.terkunci__teks{ font-size:.9375rem; color:var(--tinta-lembut); line-height:1.55; }
.menyusul__janji,.terkunci__kapan{ font-size:.8125rem; font-weight:800; color:var(--emas-tua); }

/* ── LANGKAH BERNOMOR (DESIGN §4.15) ──────────────────────────── */
.langkah-deret{ display:grid; gap:var(--r2); }
.langkah{
  display:grid; grid-template-columns:auto 1fr; gap:var(--r3); align-items:start;
  background:var(--krem-tua); border:1px solid var(--garis-kartu);
  border-radius:var(--sudut-sedang); padding:var(--r3) var(--r4);
}
.langkah__nomor{
  width:38px; height:38px; border-radius:50%; background:var(--merah); color:#fff;
  display:grid; place-items:center; font-size:1.0625rem; font-weight:800; flex:none;
}
.langkah__judul{ font-size:1rem; font-weight:800; }
.langkah__teks{ font-size:.875rem; color:var(--tinta-lembut); line-height:1.5; }
@media (min-width:768px){ .langkah-deret--tiga{ grid-template-columns:repeat(3,1fr); } }

/* ── AJAKAN HADIAH ────────────────────────────────────────────
   Dulu kotak ini bergaris putus-putus emas — bentuk yang PERSIS SAMA
   dengan kotak "menyusul" dan "terkunci". Satu bentuk yang berarti tiga
   hal berbeda adalah repetisi yang menyesatkan, bukan yang menyatukan.
   Sekarang bentuknya tegas berbeda: pita merah pekat berisi, teks emas.
   Aturannya: garis putus-putus HANYA berarti "belum waktunya". */
.ajakan-hadiah{
  display:flex; align-items:center; justify-content:center; gap:12px;
  font-family:var(--huruf-judul); font-size:clamp(1.125rem,5vw,1.625rem);
  letter-spacing:.02em; line-height:1.15; text-align:center;
  color:var(--emas-di-merah); text-transform:uppercase;
  background:linear-gradient(135deg,var(--merah) 0%, var(--merah-tua) 100%);
  border-radius:var(--sudut-pil); padding:var(--r4) var(--r5);
  box-shadow:var(--bayang-1);
}
.ajakan-hadiah span{ font-family:var(--huruf-teks); font-size:1.5rem; line-height:1; }

/* ── BLOK CARA MENDAFTAR (pita merah terakhir) ────────────────── */
.pita-bagian--merah .langkah{ background:rgba(255,255,255,.10); border-color:rgba(255,216,138,.35); }
.pita-bagian--merah .langkah__judul{ color:#fff; }
.pita-bagian--merah .langkah__teks{ color:#FBE7D2; }
.pita-bagian--merah .langkah__nomor{ background:var(--emas-di-merah); color:#8E0D17; }
/* Kotak "menyusul" di dalam blok merah — warnanya dibalik supaya tetap
   terbaca, tapi bentuknya (garis putus-putus) tetap sama dengan yang di
   latar krem, sehingga "belum waktunya" punya satu bahasa visual. */
.menyusul--di-merah{
  background:rgba(255,255,255,.10); border-color:rgba(255,216,138,.5);
  max-width:var(--lebar-form); margin-inline:auto;
}
.menyusul--di-merah .menyusul__judul{ color:var(--emas-di-merah); text-transform:uppercase; letter-spacing:.06em; }
.menyusul--di-merah .menyusul__teks{ color:#FBE7D2; }
.menyusul--di-merah .menyusul__janji{ color:var(--emas-di-merah); }

/* Tombol utama membentang penuh sehingga tepinya sejajar dengan tepi
   kartu dan teks di atasnya — itu yang menjaga perataan tetap satu garis. */
.blok-daftar__aksi{ margin-top:var(--jarak-sedang); display:grid; gap:var(--jarak-rapat); }
.blok-daftar__nota{ font-size:.9375rem; color:#FBE7D2; }

/* ── GRAFIK (DESIGN §6) ───────────────────────────────────────── */
.grafik-bungkus{ overflow-x:auto; }
.grafik svg{ display:block; width:100%; height:auto; }
.batang__cincin{ fill:var(--merah); opacity:0; transition:opacity var(--gerak-cepat) var(--lengkung); }
.batang:hover .batang__cincin{ opacity:.09; }
.batang:focus-visible{ outline:none; }
.batang:focus-visible .batang__cincin{ opacity:.18; }

.tumpuk{ display:flex; gap:2px; height:36px; }   /* jarak 2px = warna permukaan */
.tumpuk__seg{ height:100%; }
.tumpuk__seg:first-child{ border-radius:var(--sudut-kecil) 0 0 var(--sudut-kecil); }
.tumpuk__seg:last-child{ border-radius:0 var(--sudut-kecil) var(--sudut-kecil) 0; }
.legenda{ display:grid; gap:var(--r2); }
.legenda__baris{ display:flex; align-items:center; gap:var(--r2); font-size:.9375rem; }
.legenda__kotak{ width:14px; height:14px; border-radius:3px; flex:none; }
.legenda__nilai{ margin-left:auto; font-weight:800; font-variant-numeric:tabular-nums; }

details{ border-top:1px solid var(--garis-kisi); padding-top:var(--r3); margin-top:var(--r3); }
summary{ cursor:pointer; font-size:.875rem; font-weight:700; color:var(--merah-teks); }
.tabel-bungkus{ overflow-x:auto; margin-top:var(--r3); }
table{ border-collapse:collapse; width:100%; font-size:.9375rem; }
th,td{ text-align:left; padding:9px var(--r2); border-bottom:1px solid var(--garis-kisi); }
th{ font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-lembut); }
td.angka,th.angka{ text-align:right; font-variant-numeric:tabular-nums; }

/* ── NAVIGASI BAWAH ───────────────────────────────────────────── */
.nav-bawah{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--permukaan); border-top:2px solid var(--garis-kartu);
  padding-bottom:env(safe-area-inset-bottom);
}
.nav-bawah a{
  display:grid; justify-items:center; gap:2px; padding:9px 2px 11px;
  font-size:.6875rem; font-weight:700; color:var(--tinta-lembut); text-decoration:none;
  border-top:3px solid transparent; margin-top:-2px;
}
.nav-bawah a[aria-current="page"]{ color:var(--merah-teks); border-top-color:var(--merah); }
.nav-bawah span{ font-size:1.25rem; line-height:1; }

/* ── BATANG SALDO BENDAHARA ───────────────────────────────────── */
.batang-saldo{
  position:sticky; top:0; z-index:15;
  background:var(--merah-tua); color:#fff;
  padding:var(--r3) var(--r4);
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--r3);
}
.batang-saldo__label{ font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:#F3C9A0; }
.batang-saldo__angka{ font-size:1.25rem; font-weight:800; font-variant-numeric:tabular-nums; }

/* ── TOAST & KONFETI ──────────────────────────────────────────── */
.toast{
  position:fixed; left:var(--r3); right:var(--r3);
  bottom:calc(84px + env(safe-area-inset-bottom)); z-index:40;
  max-width:520px; margin-inline:auto;
  background:var(--merah-tua); color:#fff;
  border-radius:var(--sudut-sedang); box-shadow:var(--bayang-2);
  padding:var(--r3) var(--r3) 0; overflow:hidden;
  transform:translateY(180%); transition:transform var(--gerak-sedang) var(--lengkung);
}
.toast--tampil{ transform:translateY(0); }
.toast__baris{ display:flex; align-items:center; justify-content:space-between; gap:var(--r2); }
.toast__teks{ font-size:.9375rem; font-weight:600; }
.toast__batal{
  min-height:42px; padding:0 var(--r3); border:2px solid rgba(255,255,255,.5);
  background:transparent; color:#fff; border-radius:var(--sudut-pil);
  font-family:inherit; font-size:.8125rem; font-weight:800; letter-spacing:.06em; cursor:pointer; flex:none;
}
.toast__bilah{ height:4px; background:rgba(255,255,255,.28); margin:var(--r3) calc(-1 * var(--r3)) 0; }
.toast__bilah i{ display:block; height:100%; background:var(--emas); width:100%; transform-origin:left; }
.toast--jalan .toast__bilah i{ animation:susut 8s linear forwards; }
@keyframes susut{ from{transform:scaleX(1)} to{transform:scaleX(0)} }

.konfeti{ position:fixed; inset:0; pointer-events:none; z-index:35; overflow:hidden; }
.konfeti i{ position:absolute; top:-14px; width:9px; height:15px; border-radius:2px; animation:jatuh 900ms var(--lengkung) forwards; }
@keyframes jatuh{ 0%{transform:translateY(0) rotate(0);opacity:1} 100%{transform:translateY(105vh) rotate(540deg);opacity:0} }
@media (prefers-reduced-motion: reduce){ .konfeti{ display:none; } }

/* ── PESAN ────────────────────────────────────────────────────── */
.pesan{ border-radius:var(--sudut-sedang); padding:var(--r3) var(--r4); font-size:.9375rem; font-weight:600; border:2px solid; }
.pesan--ok{ background:var(--lencana-ok-bg); border-color:var(--masuk); color:var(--masuk); }
.pesan--galat{ background:#FBE7E4; border-color:var(--keluar); color:var(--keluar); }
.pesan--info{ background:var(--krem-tua); border-color:var(--emas); color:var(--emas-tua); }

/* ── KENDALI HURUF ────────────────────────────────────────────── */
.kendali-huruf-bungkus{ padding-block:var(--r6); }
.kendali-huruf{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.kendali-huruf span{ font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-lembut); }
.kendali-huruf button{
  min-width:46px; min-height:44px; border:2px solid var(--garis-kartu); background:var(--permukaan);
  border-radius:var(--sudut-pil); cursor:pointer; font-family:inherit; font-weight:800; color:var(--tinta);
  line-height:1;
}
.kendali-huruf button[aria-pressed="true"]{ background:var(--merah); border-color:var(--merah); color:#fff; }
.kendali-huruf__a1{ font-size:.875rem; }
.kendali-huruf__a2{ font-size:1.0625rem; }
.kendali-huruf__a3{ font-size:1.25rem; }

/* ── PEMBANTU KECIL ───────────────────────────────────────────
   Sengaja sedikit dan bernama menurut maksudnya. Yang menggantikan
   puluhan style="margin-top:…" sebelumnya bukan kelas-kelas ini,
   melainkan .tumpuk-kartu — jarak datang dari tata letak. */
.teks-lembut{ color:var(--tinta-lembut); }
.angka-lurus{ font-variant-numeric:tabular-nums; }
.jarak-atas{ margin-top:var(--jarak-sedang); }
.kelompok{ display:grid; gap:var(--jarak-rapat); }
.kartu__label--blok{ display:block; margin-bottom:var(--r2); }
.chip--mati{ pointer-events:none; background:var(--krem-tua); color:var(--tinta-lembut); }

/* Banner ramping untuk halaman selain beranda */
.banner--ramping{ max-height:none; padding-bottom:var(--r6); }
.banner__tanggal--kecil{ font-size:clamp(1.75rem,7vw,2.75rem); }

/* Belanja per kategori — batang berurut, satu warna.
   Kategori tidak punya urutan alami, jadi warna berbeda per kategori
   hanya akan mengulang informasi yang sudah dibawa panjang batang. */
.daftar-kategori{ display:grid; gap:var(--jarak-rapat); }
.kategori__baris{ display:flex; justify-content:space-between; gap:var(--r3); font-size:.9375rem; }
.kategori__jalur{ height:14px; background:var(--krem-tua); border-radius:7px; margin-top:5px; overflow:hidden; }
.kategori__isi{ height:100%; border-radius:7px; background:var(--merah); }

/* ── KOSONG / MEMUAT ──────────────────────────────────────────── */
.kosong{ text-align:center; color:var(--tinta-lembut); padding:var(--r7) var(--r4); font-size:.9375rem; }

/* ── KAKI ─────────────────────────────────────────────────────── */
.kaki{ background:var(--merah-tua); color:#FBE7D2; margin-top:var(--r9); }
.kaki__isi{ padding-block:var(--r7); display:grid; gap:var(--r2); }
.kaki__nama{ color:#fff; font-weight:800; }
.kaki__teks{ font-size:.9375rem; max-width:60ch; }
.kaki a{ color:var(--emas-di-merah); }

/* ── LAYAR LEBAR ──────────────────────────────────────────────── */
@media (min-width:768px){
  :root{ --jarak-bagian:80px; --jarak-sedang:24px; }
  .kartu-bagian__isi,.kartu-jangkar{ padding:var(--r6); }

  /* Pembuka bagian dan isinya dijajarkan: judul di kiri, isi di kanan,
     berbagi satu tepi kiri yang sama sepanjang halaman. */
  .bagian-berkolom{ display:grid; grid-template-columns:minmax(220px,300px) 1fr; gap:var(--r8); align-items:start; }
  .bagian-berkolom .pembuka{ margin-bottom:0; position:sticky; top:var(--r5); }
}
@media (min-width:1024px){
  body{ padding-bottom:0; }
  .nav-bawah{
    position:static; max-width:var(--lebar-konten); margin:var(--r5) auto 0;
    border:2px solid var(--garis-kartu); border-radius:var(--sudut-pil); overflow:hidden;
  }
}

/* ── CETAK (untuk Laporan Akhir di musyawarah warga) ──────────── */
@media print{
  body{ background:#fff; color:#000; padding:0; font-size:11pt; }
  .nav-bawah,.batang-petugas,.toast,.konfeti,.kendali-huruf,.lewati,
  .tombol,.chip-deret,.banner,.pita-bagian--merah{ display:none !important; }
  .pita-bagian{ padding-block:var(--r5); background:#fff !important; }
  .kartu,.kartu-bagian{ border:1px solid #000; box-shadow:none; break-inside:avoid; }
  /* Tabel kembar tiap grafik dibuka otomatis sebelum mencetak
     (lihat app.js — peristiwa beforeprint), lalu tombolnya disembunyikan. */
  details > summary{ display:none; }
  tr{ break-inside:avoid; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; }
}