/* Tampilan dashboard publik: laporan kas. Hijau dan emas dari logo DKM. Gerak: navbar penanda + muncul saat terlihat. */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:500 800;font-display:swap;src:url(/fonts/BricolageGrotesque-500-800.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/PublicSans-400.woff2) format("woff2")}
:root{
  --kertas:#F3F6F2; --tinta:#10261A; --redup:#46594D; --hijau:#0A6238; --emas:#DDB023; --garis:#C5D3C9; --jalur:#E4ECE6;
  --tampil:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --isi:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{background:var(--kertas);scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;color:var(--tinta);font:400 1.0625rem/1.55 var(--isi);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:var(--hijau)}
h1,h2,h3{font-family:var(--tampil);margin:0;letter-spacing:-.02em;line-height:1.05}
.bungkus{max-width:1120px;margin:0 auto;padding:0 var(--s5)}
.kecil{font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--redup);margin:0}
.lompat{position:absolute;left:-9999px}
.lompat:focus{left:var(--s4);top:var(--s2);z-index:50;background:var(--kertas);padding:var(--s2) var(--s3)}

/* navbar: menempel di atas, penanda aktif berpindah */
.menu{position:sticky;top:0;z-index:30;background:var(--kertas);border-bottom:1px solid var(--garis)}
.menu .dalam{max-width:1120px;margin:0 auto;padding:0 var(--s5);height:56px;display:flex;align-items:stretch;justify-content:space-between;gap:var(--s5)}
.merek{display:flex;align-items:center;gap:10px;font:700 1rem var(--tampil);letter-spacing:-.01em;color:var(--hijau);text-decoration:none;white-space:nowrap}
.merek::before{content:"";width:10px;height:10px;transform:rotate(45deg);background:var(--emas);flex:none}
.rel{position:relative;display:flex}
.menu ul{list-style:none;margin:0;padding:0;display:flex;gap:var(--s5)}
.menu li{display:flex}
.tautan{display:flex;align-items:center;min-height:44px;padding:0 2px;color:var(--redup);font-size:.9375rem;font-weight:500;text-decoration:none;transition:color .2s}
.tautan:hover,.tautan:focus-visible{color:var(--tinta)}
.tautan[aria-current="true"]{color:var(--tinta);font-weight:700}
.garis{position:absolute;left:0;bottom:-1px;height:3px;width:0;background:var(--hijau);transition:transform .32s var(--ease),width .32s var(--ease)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--hijau);outline-offset:3px}

/* kepala */
.kepala{display:flex;align-items:flex-end;gap:var(--s6);padding:var(--s6) 0 var(--s5)}
.logo{width:196px;height:auto;flex:none;display:block}
.judul h1{font-size:clamp(2rem,5.2vw,3.5rem);font-weight:800;color:var(--hijau)}
.judul .sub{margin:var(--s2) 0 0;color:var(--redup)}
.judul .akun{margin:var(--s2) 0 0;font-size:.9375rem;color:var(--redup)}
.link{background:none;border:0;padding:0;font:inherit;color:var(--hijau);font-weight:600;text-decoration:underline;cursor:pointer}
.pita{height:5px;background:linear-gradient(var(--hijau) 0 3px,transparent 3px 4px,var(--emas) 4px)}

/* bagian */
.bagian{padding:var(--s7) 0;border-bottom:1px solid var(--garis)}
.bagian:last-of-type{border-bottom:0}
.bagian h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:700;margin-bottom:var(--s2)}
.bagian>p.pengantar{margin:0 0 var(--s6);max-width:58ch;color:var(--redup)}
.kas{padding-top:var(--s8);display:grid;grid-template-columns:7fr 5fr;gap:var(--s7);align-items:end}
.angka{font:800 clamp(3.25rem,10.5vw,7rem)/.92 var(--tampil);letter-spacing:-.04em;color:var(--hijau);margin:var(--s3) 0 var(--s4)}
.angka small{font-size:.38em;letter-spacing:0;margin-right:.18em;font-weight:600}
.kas p.ket{margin:0;max-width:34ch;color:var(--redup)}
.buku{margin:0}
.buku div{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--garis)}
.buku dt{color:var(--redup)}
.buku dd{margin:0;font-weight:600;white-space:nowrap}
.buku .jumlah{border-bottom:0;border-top:2px solid var(--tinta);margin-top:var(--s1)}
.buku .jumlah dt{color:var(--tinta);font-weight:600}
.buku .jumlah dd{font:800 1.5rem var(--tampil);color:var(--hijau)}

/* penggaris kesiapan */
.penggaris{position:relative;height:40px;background:var(--jalur);border:1px solid var(--tinta)}
.isi{position:absolute;inset:0 auto 0 0;width:var(--p,0%);background:var(--hijau);transform-origin:left}
.penggaris::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to right,transparent 0 calc(8.3333% - 1px),rgba(16,38,26,.55) calc(8.3333% - 1px) 8.3333%)}
.penggaris .target{position:absolute;right:-1px;top:-10px;bottom:-10px;width:4px;background:var(--emas);z-index:2}
.skala{display:flex;justify-content:space-between;gap:var(--s3);margin-top:var(--s2);font-size:.875rem;color:var(--redup)}
.skala b{color:var(--tinta)}

/* iuran warga */
.dua{display:grid;grid-template-columns:5fr 7fr;gap:var(--s7);align-items:start}
.tunggak{font:800 clamp(2.25rem,5vw,3.25rem)/1 var(--tampil);letter-spacing:-.03em;margin:var(--s2) 0 var(--s3)}
.tunggak small{font-size:.45em;font-weight:600;margin-right:.2em}
.dua p.ket2{margin:0;color:var(--redup)}
.kisi{display:flex;flex-wrap:wrap;gap:6px 8px}
.kisi i{width:30px;height:30px;position:relative;display:block}
.kisi i::before{content:"";position:absolute;inset:6px;transform:rotate(45deg);border:2px solid var(--hijau)}
.kisi i.lunas::before{background:var(--hijau)}
.legenda{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);margin-top:var(--s4);font-size:.9375rem;color:var(--redup)}
.legenda span::before{content:"";display:inline-block;width:10px;height:10px;transform:rotate(45deg);border:2px solid var(--hijau);margin-right:10px;vertical-align:1px}
.legenda .l::before{background:var(--hijau)}
.catatan-nama{margin:var(--s4) 0 0;font-size:.9375rem;color:var(--redup)}
.lebar{grid-column:1/-1;margin-top:var(--s4)}
.lebar h3{font-size:1.25rem;font-weight:700}
.lebar .sub{margin:var(--s1) 0 var(--s3);color:var(--redup);font-size:.9375rem}

/* pengeluaran */
.baris{display:grid;grid-template-columns:13rem 1fr 7.5rem;gap:var(--s4);align-items:center;padding:var(--s3) 0;border-bottom:1px solid var(--garis)}
.baris:first-child{border-top:2px solid var(--tinta)}
.baris .nama{font-weight:500}
.baris .batang{height:12px;background:var(--hijau);width:var(--w);transform-origin:left}
.baris .rp{text-align:right;font-weight:600}
.total{display:flex;justify-content:space-between;padding:var(--s3) 0;font-weight:700}
.kosong{padding:var(--s5) 0;color:var(--redup)}

/* catatan dan kaki */
.catatan{display:flex;gap:var(--s4);align-items:flex-start;margin:0;color:var(--redup);max-width:60ch}
.catatan::before{content:"";flex:none;width:10px;height:10px;margin-top:9px;transform:rotate(45deg);background:var(--emas)}
.kaki{padding:var(--s6) 0 var(--s8);font-size:.9375rem;color:var(--redup);display:flex;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;border-top:5px solid var(--hijau)}

/* infaq */
.basmalah{margin:0 0 var(--s5);text-align:center;color:var(--hijau);font:400 clamp(1.75rem,4vw,2.5rem)/1.7 "Amiri","Noto Naskh Arabic","Scheherazade New","Traditional Arabic","Geeza Pro","Arabic Typesetting",serif}
.infaq h2{max-width:24ch;text-wrap:balance}
.infaq .pengantar{text-wrap:balance;max-width:48ch}
.sama{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:start}
.infaq .sama{margin-top:var(--s6)}
.infaq h3,.qris h3{font-size:1.25rem;font-weight:700;margin:0 0 var(--s3)}
.infaq p{max-width:62ch;margin:0 0 var(--s3)}
.ayat{padding-left:var(--s4);border-left:3px solid var(--emas);font-weight:500}
.poin{margin:0;border-top:2px solid var(--tinta)}
.poin div{padding:var(--s3) 0;border-bottom:1px solid var(--garis)}
.poin dt{font-weight:700;margin:0 0 var(--s1);font-size:.9375rem}
.poin dd{margin:0;color:var(--redup)}
.rekening{margin:var(--s4) 0 0;border-top:2px solid var(--tinta)}
.sama>*{min-width:0}
.rekening div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s1) var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--garis)}
.rekening dt{color:var(--redup)}
.rekening dd{margin:0;font-weight:600;text-align:right}
.rekening .nomor dd{font:800 clamp(1.2rem,6.2vw,2.1rem)/1.1 var(--tampil);letter-spacing:-.01em;color:var(--hijau);white-space:nowrap}
.aksi-rek{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s3);margin:var(--s4) 0 var(--s3)}
.tombol-salin{min-height:44px;padding:0 var(--s5);border:0;background:var(--hijau);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.tombol-salin:hover{background:#08522f}
#status-salin{font-size:.9375rem;color:var(--hijau);font-weight:600}
.konfirmasi{margin:0;color:var(--redup)}
.konfirmasi a{white-space:nowrap}
.daftar{border-top:1px solid var(--garis);padding-top:var(--s5);margin-top:var(--s2)}
.daftar h3{font-size:1.25rem;font-weight:700;margin:0 0 var(--s3)}
.daftar p{max-width:62ch;margin:0 0 var(--s3)}
.tombol-form{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s5);background:var(--hijau);color:#fff;font-weight:600;text-decoration:none}
.tombol-form:hover{background:#08522f}
.konfirmasi-daftar{margin:0;padding-left:1.2em;color:var(--redup)}
.konfirmasi-daftar a{white-space:nowrap}
.qris img{display:block;width:min(100%,340px);height:auto;border:1px solid var(--tinta);background:#fff}
.qris p{margin:var(--s3) 0 0;font-size:.9375rem}
#dlg-qris{border:0;padding:var(--s2);background:var(--kertas);width:min(calc(100vw - 8px),560px);max-width:none}
#dlg-qris::backdrop{background:rgba(16,38,26,.72)}
#dlg-qris img{display:block;width:100%;height:auto;max-height:82vh;object-fit:contain;margin-top:var(--s3)}

/* daftar KK (pengurus) */
.alat{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0 0 var(--s3)}
.alat input{flex:1 1 200px;min-width:0;padding:10px 12px;border:1px solid var(--tinta);border-radius:0;background:#fff;font:inherit;font-size:.9375rem}
.saring{display:flex}
.saring button{padding:9px 14px;border:1px solid var(--tinta);border-left-width:0;background:transparent;color:var(--tinta);font:inherit;font-size:.9rem;cursor:pointer}
.saring button:first-child{border-left-width:1px}
.saring button.aktif{background:var(--hijau);border-color:var(--hijau);color:#fff}
.tabel-gulir{max-height:440px;overflow:auto;border-top:2px solid var(--tinta);border-bottom:1px solid var(--garis)}
.tabel{width:100%;border-collapse:collapse;font-size:.9375rem}
.tabel th,.tabel td{padding:10px 8px;text-align:left;border-bottom:1px solid var(--garis)}
.tabel th{position:sticky;top:0;background:var(--kertas);font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--redup)}
.tabel tr:last-child td{border-bottom:0}
.lencana{display:inline-block;padding:2px 10px;font-size:.8125rem;font-weight:700;white-space:nowrap;border:1.5px solid var(--hijau);color:var(--hijau)}
.lencana.lunas{background:var(--hijau);color:#fff}

/* gerak: hanya bila JS aktif, dan semua tetap terbaca bila gagal */
.js .muncul{opacity:0;transform:translateY(14px);filter:blur(5px);transition:opacity .55s var(--ease) var(--d,0s),transform .55s var(--ease) var(--d,0s),filter .55s ease-out var(--d,0s)}
.js .muncul.terlihat{opacity:1;transform:none;filter:none}
.js .isi{transform:scaleX(0);transition:transform .8s var(--ease) .1s}
.js .jalan .isi{transform:none}
.js .baris .batang{transform:scaleX(0);transition:transform .6s var(--ease) var(--d,0s)}
.js .jalan .batang{transform:none}
.js .kisi i{opacity:0;transform:scale(.6);transition:opacity .35s ease-out var(--d,0s),transform .35s var(--ease) var(--d,0s)}
.js .jalan i{opacity:1;transform:none}
.semua .muncul{opacity:1!important;transform:none!important;filter:none!important}
.semua .isi,.semua .batang,.semua .kisi i{transform:none!important;opacity:1!important}

/* halaman login dan Catat Iuran */
.menu .kanan{display:flex;align-items:center;gap:var(--s4)}
.menu .email{font-size:.875rem;color:var(--redup);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:24ch}
.tautan.kembali{white-space:nowrap}
.bungkus.hal{padding-top:var(--s7);padding-bottom:var(--s8)}
.menu.sederhana .merek{display:flex}
.menu.sederhana .dalam{justify-content:space-between}
@media (max-width:520px){.menu.sederhana.banyak .merek span{display:none}}
@media (max-width:340px){.menu.sederhana.banyak .merek{display:none}}
.menu.sederhana .merek span{display:inline}
.hal h1{font-size:clamp(2rem,5.2vw,3.25rem);font-weight:800;color:var(--hijau);margin:0 0 var(--s5)}
.hal .pengantar{margin:0 0 var(--s6);max-width:56ch;color:var(--redup)}
.logo-kecil{width:150px;height:auto;display:block;margin-bottom:var(--s5)}
.peringatan{margin:0 0 var(--s5);padding:var(--s3) var(--s4);max-width:56ch;background:#fff;border:1px solid var(--garis);border-left:6px solid #8A2B14;color:#8A2B14;font-weight:500}
.tombol-form.besar{min-height:52px;padding:0 var(--s6);font-size:1.0625rem}
.khusus{margin:0 0 var(--s4);font-weight:600;color:var(--tinta)}
.formulir{max-width:720px}
.formulir label,.formulir legend{display:block;margin:var(--s5) 0 var(--s1);padding:0;font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--redup)}
.formulir input:not([type=radio]){width:100%;min-height:48px;padding:10px 12px;border:1px solid var(--tinta);border-radius:0;background:#fff;color:var(--tinta);font:inherit}
.formulir fieldset{border:0;margin:var(--s3) 0 0;padding:0}
.formulir .pilih{display:inline-flex;align-items:center;gap:var(--s2);margin:0 var(--s5) 0 0;min-height:44px;text-transform:none;letter-spacing:0;font-size:1rem;font-weight:500;color:var(--tinta)}
.formulir .pilih input{width:20px;height:20px;min-height:0;accent-color:var(--hijau)}
.baris-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.hint{margin:var(--s2) 0 0;min-height:1.4em;font-size:.9375rem;color:var(--redup)}
.ringkasan{margin:var(--s5) 0 0;padding:var(--s4);background:#fff;border:1px solid var(--tinta);border-left:6px solid var(--emas);font-weight:500}
.pesan{margin:var(--s5) 0 0;padding:var(--s3) var(--s4);background:#fff;border:1px solid var(--garis);border-left:6px solid #8A2B14;color:#8A2B14;font-weight:500}
.sukses{margin:var(--s5) 0 0;padding:var(--s3) var(--s4);background:#fff;border:1px solid var(--garis);border-left:6px solid var(--hijau);color:var(--hijau);font-weight:600}
.aksi{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.tombol{min-height:48px;padding:0 var(--s6);border:0;background:var(--hijau);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.tombol:hover{background:#08522f}
.tombol:disabled{opacity:.6;cursor:wait}
.tombol-lain{min-height:48px;padding:0 var(--s5);border:1px solid var(--tinta);background:transparent;color:var(--tinta);font:inherit;font-weight:600;cursor:pointer}
.empty{padding:var(--s5) 0;color:var(--redup)}
.subnav{display:flex;gap:var(--s5);overflow-x:auto;border-bottom:1px solid var(--garis);margin-top:0}
.subnav a{flex:none;padding:14px 0 11px;color:var(--redup);font-weight:500;text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap}
.subnav a:hover{color:var(--tinta)}
.subnav a[aria-current=page]{color:var(--tinta);font-weight:700;border-bottom-color:var(--hijau)}
.tombol-kecil{padding:6px 12px;min-height:36px;border:1px solid var(--tinta);background:transparent;color:var(--tinta);font:inherit;font-size:.875rem;font-weight:600;cursor:pointer}
.tombol-kecil:hover{background:var(--tinta);color:#fff}
.dibatalkan td{color:var(--redup);text-decoration:line-through}
.dibatalkan td:last-child,.pembalik td:last-child{text-decoration:none}
.pembalik td{color:var(--redup);font-style:italic}
.panel{max-width:720px;margin:var(--s5) 0 0;padding:var(--s4);background:#fff;border:1px solid var(--tinta);border-left:6px solid var(--emas)}
.panel h3{margin:0 0 var(--s3);font-size:1.125rem}
.panel .pilih{display:flex;margin:var(--s2) 0}
.aksi-baris{display:inline-flex;gap:var(--s2);flex-wrap:wrap}
.pratinjau-alert{max-width:560px;border-top:2px solid var(--tinta)}
.baris-alert{display:grid;grid-template-columns:1fr auto auto;gap:var(--s4);align-items:center;padding:var(--s3) 0;border-bottom:1px solid var(--garis)}
@media (max-width:520px){.baris-alert{grid-template-columns:1fr auto}.baris-alert span:nth-child(2){grid-column:1/-1;order:3;color:var(--redup)}}
.status{display:inline-block;padding:2px 10px;font-size:.8125rem;font-weight:700;border:1.5px solid var(--tinta);white-space:nowrap}
.status.aman{background:var(--hijau);border-color:var(--hijau);color:#fff}
.status.waspada{background:var(--emas);border-color:var(--emas);color:var(--tinta)}
.status.kritis{background:#8A2B14;border-color:#8A2B14;color:#fff}
.percobaan{margin:0 0 var(--s5);padding:var(--s3) var(--s4);max-width:720px;background:#fff;border:1px solid var(--garis);border-left:6px solid var(--emas);color:var(--tinta);font-size:.9375rem}
.formulir select{width:100%;min-height:48px;padding:10px 12px;border:1px solid var(--tinta);border-radius:0;background:#fff;color:var(--tinta);font:inherit}
#riwayat .tabel-gulir{max-height:none}
#riwayat .tabel td:nth-child(1),#riwayat .tabel td:nth-child(4),#riwayat .tabel td:nth-child(3){white-space:nowrap}
@media (max-width:520px){.baris-2{grid-template-columns:1fr}.menu .email{display:none}.sembunyi-hp{display:none}
  /* tabel pengurus di HP: tiap catatan menjadi satu kartu bertumpuk, tanpa geser samping */
  .tabel.kartu thead{display:none}
  .tabel.kartu,.tabel.kartu tbody{display:block}
  .tabel.kartu tr{display:block;padding:var(--s3) 0;border-bottom:1px solid var(--garis)}
  .tabel.kartu td{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding:5px 0;border:0;text-align:right;white-space:normal!important}
  .tabel.kartu td::before{content:attr(data-label);flex:none;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--redup);text-align:left}
  .tabel.kartu td.sembunyi-hp{display:flex}
  .tabel.kartu td:last-child{padding-top:var(--s2)}
  .tabel-gulir:has(.tabel.kartu){border-top:0;max-height:none;overflow:visible}
}

@media (max-width:760px){
  .bungkus,.menu .dalam{padding:0 var(--s4)}
  .merek span{display:none}
  .menu ul{gap:var(--s4)}
  .tautan{font-size:.875rem}
  .kepala{flex-direction:column;align-items:flex-start;gap:var(--s4);padding-top:var(--s5)}
  .logo{width:150px}
  .kas,.dua,.sama{grid-template-columns:1fr;gap:var(--s6)}
  .kas{padding-top:var(--s7)}
  .bagian{padding:var(--s6) 0}
  .skala{flex-wrap:wrap;row-gap:var(--s2)}
  .skala span{white-space:nowrap}
  .skala span:nth-child(2){order:3;flex-basis:100%;white-space:normal}
  .baris{grid-template-columns:1fr auto;gap:var(--s2) var(--s4)}
  .baris .batang{grid-column:1/-1;grid-row:2}
  #anggota .tabel th:nth-child(2),#anggota .tabel td:nth-child(2){display:none}
}
@media (max-width:360px){
  .menu .dalam{padding:0 12px}
  .menu ul{gap:12px}
  .tautan{font-size:.8125rem}
}
@media (max-width:340px){
  .merek{display:none}
  .menu .dalam{justify-content:center}
  .menu ul{gap:10px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .muncul{opacity:1;transform:none;filter:none;transition:none}
  .js .isi,.js .baris .batang,.js .kisi i{transform:none;opacity:1;transition:none}
  .garis{transition:none}
}