/* SiWarga — tampilan versi 1.1.0 (Bricolage Grotesque, kartu berperforasi)
   =====================================================================
   SiWarga — sistem visual
   Rujukan bentuk: kartu iuran bulanan berperforasi, buku kas bergaris,
   dan stempel tinta bendahara. Hijau pandan sebagai warna kerja,
   kunyit untuk yang menunggu, bata untuk yang tertunggak.
   ===================================================================== */
:root{
  --tinta:#0f1d17;          /* teks utama & panel gelap  */
  --tinta-2:#1a2f26;        /* lapis kedua panel gelap   */
  --redup:#5b6b60;          /* teks sekunder             */
  --redup-2:#8a9a8f;
  --kertas:#e9eee6;         /* latar halaman             */
  --kartu:#ffffff;
  --pandan:#1c6b4a;         /* warna aksi utama          */
  --pandan-tua:#0f4c33;
  --pandan-muda:#e2efe7;
  --lumut:#48876a;
  --kunyit:#b9800f;         /* menunggu / peringatan     */
  --kunyit-muda:#fbf1da;
  --bata:#a63a24;           /* tunggakan / darurat       */
  --bata-muda:#f8e6e1;
  --garis:#d7ded4;
  --garis-tebal:#b6c4b8;
  --r-kecil:7px; --r:11px; --r-besar:16px;
  --bayang-1:0 1px 2px rgba(15,29,23,.05);
  --bayang:0 1px 2px rgba(15,29,23,.05), 0 10px 24px -18px rgba(15,29,23,.45);
  --bayang-naik:0 2px 4px rgba(15,29,23,.06), 0 18px 34px -20px rgba(15,29,23,.5);
  --sidebar:270px;
  --display:'Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;
  --teks:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--tinta); font-family:var(--teks);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
  background:var(--kertas);
  background-image:radial-gradient(1100px 460px at 12% -8%, #f4f7f1 0%, transparent 70%);
  background-attachment:fixed;
}
h1,h2,h3,h4{
  font-family:var(--display); margin:0 0 .4em; line-height:1.14;
  letter-spacing:-.021em; font-weight:700;
}
h1{font-size:1.72rem} h2{font-size:1.28rem} h3{font-size:1.04rem} h4{font-size:.93rem}
p{margin:0 0 1em; max-width:68ch}
a{color:var(--pandan-tua); text-underline-offset:3px}
a:hover{color:var(--pandan)}
hr{border:0;border-top:1px solid var(--garis);margin:1.5rem 0}
:focus-visible{outline:2.5px solid var(--pandan); outline-offset:2px; border-radius:5px}
::selection{background:var(--pandan-muda)}
.mono{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.94em}
.redup{color:var(--redup)} .kecil{font-size:.845rem} .tebal{font-weight:700}
.tengah{text-align:center} .kanan{text-align:right} .nowrap{white-space:nowrap}
.mt0{margin-top:0}.mb0{margin-bottom:0}.mt1{margin-top:.75rem}.mt2{margin-top:1.5rem}.mb2{margin-bottom:1.5rem}

/* ------------------------------ kerangka ------------------------------ */
.tata{display:flex; min-height:100vh}
.sisi{
  width:var(--sidebar); flex:0 0 var(--sidebar); color:#c3d3c8;
  background:linear-gradient(180deg,var(--tinta) 0%,var(--tinta-2) 100%);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;
  scrollbar-width:thin;
}
.sisi-kepala{padding:20px 18px 16px; border-bottom:1px solid rgba(255,255,255,.08)}
.sisi-kepala .merek{
  display:flex; gap:11px; align-items:center; color:#fff;
  font-family:var(--display); font-weight:700; font-size:1.14rem; letter-spacing:-.02em;
}
/* lencana monogram: bentuk stempel bundar kecil */
.merek-cap{
  width:32px; height:32px; flex:0 0 32px; border-radius:9px; display:grid; place-items:center;
  background:var(--pandan); color:#fff; font-size:.95rem; font-weight:700;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28);
}
.sisi-kepala .lokasi{font-size:.8rem; color:var(--redup-2); margin-top:8px; line-height:1.45}
.nav{padding:10px 10px 16px; flex:1}
.nav-judul{font-size:.74rem; color:#7c9186; padding:15px 12px 6px; font-weight:600}
.nav a{
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:var(--r);
  color:#c3d3c8; text-decoration:none; font-size:.92rem; font-weight:500;
  position:relative; transition:background .13s ease,color .13s ease;
}
.nav a:hover{background:rgba(255,255,255,.06); color:#fff}
.nav a.aktif{background:rgba(72,135,106,.24); color:#fff; font-weight:600}
.nav a.aktif::before{
  content:''; position:absolute; left:0; top:9px; bottom:9px; width:3px;
  border-radius:0 3px 3px 0; background:#6cc79a;
}
.nav a .ikon{width:18px; text-align:center; flex:0 0 18px; opacity:.75; font-size:.95em}
.nav a.aktif .ikon{opacity:1}
.nav .lencana{
  margin-left:auto; background:var(--bata); color:#fff; font-size:.7rem;
  font-weight:700; border-radius:20px; padding:1px 7px; font-variant-numeric:tabular-nums;
}
.sisi-kaki{padding:14px 16px; border-top:1px solid rgba(255,255,255,.08); font-size:.82rem}
.sisi-kaki a{color:#9db0a4; text-decoration:none}
.sisi-kaki a:hover{color:#fff}

.utama{flex:1; min-width:0; display:flex; flex-direction:column}
.bar{
  background:rgba(255,255,255,.86); backdrop-filter:saturate(1.5) blur(10px);
  border-bottom:1px solid var(--garis); padding:12px 26px;
  display:flex; align-items:center; gap:14px; position:sticky; top:0; z-index:30;
}
.bar h1{font-size:1.16rem; margin:0}
.bar .kanan-bar{margin-left:auto; display:flex; align-items:center; gap:10px}
.isi{padding:26px; max-width:1180px; width:100%}
.tombol-menu{display:none}

/* ------------------------------ kartu --------------------------------- */
.kartu{
  background:var(--kartu); border:1px solid var(--garis); border-radius:var(--r-besar);
  box-shadow:var(--bayang); padding:20px;
}
.kartu + .kartu{margin-top:18px}
.kartu-kepala{display:flex; align-items:baseline; gap:12px; margin-bottom:14px}
.kartu-kepala h2,.kartu-kepala h3{margin:0}
.kartu-kepala .aksi{margin-left:auto}
.grid{display:grid; gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g-sisi{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}

/* ------- angka penting: saldo kas, tunggakan, nominal iuran ------------ */
.angka{
  font-family:var(--display); font-size:2rem; font-weight:700;
  letter-spacing:-.035em; line-height:1.08; font-variant-numeric:tabular-nums;
}
.angka-kecil{
  font-family:var(--display); font-size:1.3rem; font-weight:700;
  letter-spacing:-.025em; font-variant-numeric:tabular-nums;
}
.label{font-size:.82rem; color:var(--redup); font-weight:600}
.stat{
  background:var(--kartu); border:1px solid var(--garis); border-radius:var(--r-besar);
  padding:17px 19px 18px; box-shadow:var(--bayang-1); position:relative; overflow:hidden;
}
/* garis tipis penanda jenis angka, bukan hiasan */
.stat::before{content:''; position:absolute; left:0; top:0; width:100%; height:3px; background:var(--garis-tebal)}
.stat.ok::before{background:var(--pandan)}
.stat.bahaya::before{background:var(--bata)}
.stat.tegas::before{background:var(--kunyit)}
.stat.bahaya{background:var(--bata-muda); border-color:#eccabf}
.stat.bahaya .angka{color:var(--bata)}
.stat.ok{background:var(--pandan-muda); border-color:#c2dbcc}
.stat.ok .angka{color:var(--pandan-tua)}
.stat.tegas{
  background:var(--tinta); color:#fff; border-color:var(--tinta);
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 9px,transparent 9px 18px);
}
.stat.tegas .label{color:#93a89a}
.stat.tegas a{color:#8ed3ad}

/* --------------- KARTU IURAN: elemen khas aplikasi ini ---------------- */
.kartu-iuran{
  background:var(--kartu); border:1px solid var(--garis); border-radius:var(--r-besar);
  overflow:hidden; box-shadow:var(--bayang);
}
.kartu-iuran .kepala{
  background:var(--tinta); color:#fff; padding:17px 22px; display:flex; align-items:center; gap:14px;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 10px,transparent 10px 20px);
  position:relative;
}
/* tepi perforasi seperti kartu iuran yang disobek dari bukunya */
.kartu-iuran .kepala::after{
  content:''; position:absolute; left:0; right:0; bottom:-7px; height:14px;
  background:radial-gradient(circle at 7px 7px, var(--kartu) 5.5px, transparent 6px) 0 0/16px 14px repeat-x;
}
.kartu-iuran .kepala .nama{font-family:var(--display); font-weight:700; font-size:1.06rem; letter-spacing:-.02em}
.kartu-iuran .kepala .sub{font-size:.8rem; color:#9db1a3; margin-top:2px}
.kartu-iuran .kepala .tahun{
  margin-left:auto; font-family:var(--display); font-size:1.75rem; font-weight:700;
  letter-spacing:.01em; color:#8ed3ad; font-variant-numeric:tabular-nums;
}
.bulan-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:0; padding-top:8px}
.bulan{
  border-right:1px dashed var(--garis); border-bottom:1px dashed var(--garis);
  padding:14px 8px 16px; text-align:center; position:relative; min-height:96px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  text-decoration:none; color:inherit; transition:background .13s ease;
}
a.bulan:hover{background:#f5f9f3}
.bulan:nth-child(6n){border-right:0}
.bulan:nth-child(n+7){border-bottom:0}
.bulan .bln{font-size:.78rem; font-weight:700; color:var(--redup)}
.bulan .cap{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  font-size:.68rem; font-weight:800; letter-spacing:.02em;
  border:2px solid var(--garis-tebal); color:var(--garis-tebal);
}
/* stempel lunas: cincin ganda, miring, sedikit tembus seperti tinta */
.bulan.lunas .cap{
  border-color:var(--pandan); color:var(--pandan); transform:rotate(-11deg); opacity:.92;
  box-shadow:inset 0 0 0 2px #fff, inset 0 0 0 3.5px var(--pandan);
}
.bulan.lunas .bln{color:var(--pandan-tua)}
.bulan.belum .cap{border-color:var(--bata); color:var(--bata); border-style:dashed}
.bulan.menunggu .cap{border-color:var(--kunyit); color:var(--kunyit)}
.bulan.kosong .cap{border-style:dotted; opacity:.5}
.bulan.sekarang{background:#f6faf4; box-shadow:inset 0 0 0 2px var(--pandan)}
.kartu-iuran .kaki{
  padding:13px 22px; border-top:1px solid var(--garis); display:flex;
  flex-wrap:wrap; gap:16px; font-size:.8rem; color:var(--redup); align-items:center;
  background:#fbfcfa;
}
.keterangan-cap{display:inline-flex; align-items:center; gap:6px}
.titik{width:11px; height:11px; border-radius:50%; border:2px solid}
.titik.l{border-color:var(--pandan)} .titik.b{border-color:var(--bata); border-style:dashed}
.titik.m{border-color:var(--kunyit)} .titik.k{border-color:var(--garis-tebal); border-style:dotted}

/* ------------------------------ tombol -------------------------------- */
.tbl{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 17px; border-radius:var(--r); border:1px solid transparent;
  background:var(--pandan); color:#fff; font:inherit; font-weight:600; font-size:.9rem;
  cursor:pointer; text-decoration:none; box-shadow:var(--bayang-1);
  transition:background .14s ease, box-shadow .14s ease, transform .06s ease;
}
.tbl:hover{background:var(--pandan-tua); color:#fff; box-shadow:var(--bayang)}
.tbl:active{transform:translateY(1px)}
.tbl:disabled{opacity:.45; cursor:not-allowed; box-shadow:none}
.tbl-garis{background:#fff; color:var(--tinta); border-color:var(--garis-tebal)}
.tbl-garis:hover{background:#fff; color:var(--tinta); border-color:var(--tinta)}
.tbl-bahaya{background:var(--bata)} .tbl-bahaya:hover{background:#87301d}
.tbl-tinta{background:var(--tinta)} .tbl-tinta:hover{background:#000}
.tbl-kecil{padding:6px 12px; font-size:.82rem; border-radius:var(--r-kecil)}
.tbl-blok{width:100%}
.tbl-besar{padding:14px 24px; font-size:1rem}
.tbl-grup{display:flex; flex-wrap:wrap; gap:8px}

/* ------------------------------ formulir ------------------------------ */
.baris{margin-bottom:15px}
.baris label{display:block; font-weight:600; font-size:.86rem; margin-bottom:6px}
.baris .bantuan{font-size:.79rem; color:var(--redup); margin-top:5px; max-width:60ch}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],
input[type=datetime-local],input[type=tel],input[type=search],input[type=month],select,textarea{
  width:100%; padding:10px 13px; border:1px solid var(--garis-tebal); border-radius:var(--r);
  font:inherit; background:#fff; color:var(--tinta);
  transition:border-color .13s ease, box-shadow .13s ease;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--pandan); box-shadow:0 0 0 3px rgba(28,107,74,.14);
}
textarea{min-height:110px; resize:vertical}
input[type=file]{
  width:100%; padding:10px; border:1px dashed var(--garis-tebal);
  border-radius:var(--r); background:#fbfcfa; font-size:.88rem;
}
input:disabled,select:disabled{background:#f1f4ef; color:var(--redup)}
.baris-2{display:grid; grid-template-columns:1fr 1fr; gap:15px}
.baris-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:15px}
.cek{display:flex; align-items:flex-start; gap:9px; font-size:.9rem; font-weight:500}
.cek input{margin-top:3px; width:16px; height:16px; accent-color:var(--pandan)}
.saring{
  display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-bottom:18px;
  background:#fff; border:1px solid var(--garis); border-radius:var(--r-besar);
  padding:14px 16px; box-shadow:var(--bayang-1);
}
.saring .baris{margin:0; min-width:150px}
.saring .tumbuh{flex:1; min-width:200px}
.saring label{font-size:.78rem; color:var(--redup)}

/* ------------------------------ tabel --------------------------------- */
.tabel-bungkus{
  overflow-x:auto; border:1px solid var(--garis); border-radius:var(--r-besar);
  background:#fff; box-shadow:var(--bayang-1);
}
table{width:100%; border-collapse:collapse; font-size:.9rem}
th,td{padding:12px 15px; text-align:left; border-bottom:1px solid var(--garis); vertical-align:middle}
th{background:#f4f7f1; font-weight:600; font-size:.79rem; color:var(--redup); white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#f8fbf7}
td.angka-sel,th.angka-sel{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
tfoot td{background:#f4f7f1; font-weight:700; border-top:2px solid var(--garis-tebal)}

/* ------------------------------ pil status ---------------------------- */
.pil{
  display:inline-block; padding:3px 11px; border-radius:20px; font-size:.75rem;
  font-weight:600; white-space:nowrap; border:1px solid transparent;
}
.pil-ok{background:var(--pandan-muda); color:var(--pandan-tua); border-color:#c2dbcc}
.pil-bahaya{background:var(--bata-muda); color:var(--bata); border-color:#eccabf}
.pil-tunggu{background:var(--kunyit-muda); color:#7d5606; border-color:#ecdcb2}
.pil-netral{background:#eef1eb; color:var(--redup); border-color:var(--garis)}

/* ------------------------------ pesan --------------------------------- */
.pesan{
  padding:13px 17px; border-radius:var(--r); margin-bottom:18px; font-size:.9rem;
  border:1px solid; border-left-width:4px; display:flex; gap:10px; align-items:flex-start;
}
.pesan-sukses{background:var(--pandan-muda); border-color:var(--pandan); color:var(--pandan-tua)}
.pesan-bahaya{background:var(--bata-muda); border-color:var(--bata); color:#7a291a}
.pesan-info{background:#e6eef4; border-color:#39688a; color:#204359}
.pesan-tunggu{background:var(--kunyit-muda); border-color:var(--kunyit); color:#734e05}
.kosong{text-align:center; padding:46px 22px; color:var(--redup)}
.kosong h3{color:var(--tinta)}
.kosong .tbl{margin-top:12px}

/* ------------------------------ halaman masuk ------------------------- */
.masuk-tata{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); min-height:100vh}
.masuk-kiri{
  background:linear-gradient(160deg,var(--tinta) 0%,#16352a 100%);
  color:#fff; padding:44px 46px; display:flex; flex-direction:column; justify-content:space-between;
  background-image:
    radial-gradient(700px 320px at 85% 12%, rgba(72,135,106,.35) 0%, transparent 70%),
    linear-gradient(160deg,var(--tinta) 0%,#16352a 100%);
}
.masuk-kiri h2{font-size:1.95rem; color:#fff; max-width:15ch; line-height:1.16}
.masuk-kiri p{color:#a9bdb0; max-width:38ch}
.masuk-kanan{display:flex; align-items:center; justify-content:center; padding:40px 24px}
.masuk-kotak{width:100%; max-width:400px}
/* contoh kartu iuran mini sebagai gambaran isi aplikasi */
.contoh-kartu{
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.13);
  border-radius:14px; padding:16px 18px; max-width:330px;
}
.contoh-kartu .baris-cap{display:grid; grid-template-columns:repeat(6,1fr); gap:9px; margin-top:12px}
.contoh-kartu .c{
  aspect-ratio:1; border-radius:50%; border:2px solid rgba(255,255,255,.22);
  display:grid; place-items:center; font-size:.55rem; font-weight:800; color:rgba(255,255,255,.35);
}
.contoh-kartu .c.l{border-color:#6cc79a; color:#6cc79a; transform:rotate(-11deg)}
.contoh-kartu .c.b{border-color:#e08a74; color:#e08a74; border-style:dashed}

/* ------------------------------ kuitansi ------------------------------ */
.kuitansi{
  background:#fff; max-width:640px; margin:0 auto; border:1px solid var(--garis);
  border-radius:var(--r-besar); overflow:hidden; box-shadow:var(--bayang);
}
.kuitansi .kop{padding:22px 26px; border-bottom:2px solid var(--tinta)}
.kuitansi .kop .lembaga{font-family:var(--display); font-weight:700; font-size:1.1rem}
.kuitansi .isi-kuitansi{padding:24px 26px; position:relative}
.kuitansi table{font-size:.92rem}
.kuitansi th{background:none; letter-spacing:0}
.stempel{
  position:absolute; right:26px; bottom:14px; transform:rotate(-14deg);
  border:3px double var(--pandan); color:var(--pandan); border-radius:9px;
  padding:7px 15px; font-family:var(--display); font-weight:700; font-size:1.2rem;
  letter-spacing:.05em; opacity:.85;
}
.stempel.tolak{border-color:var(--bata); color:var(--bata)}
.stempel.tunggu{border-color:var(--kunyit); color:var(--kunyit)}

/* ------------------------------ QRIS ---------------------------------- */
.qris-kotak{
  background:#fff; border:1px solid var(--garis); border-radius:var(--r-besar);
  padding:20px; text-align:center; max-width:340px; margin:0 auto; box-shadow:var(--bayang);
}
.qris-kotak img{width:100%; max-width:280px; height:auto; border-radius:var(--r)}

/* ------------------------------ tombol darurat ------------------------ */
.darurat-tombol{
  width:100%; max-width:270px; aspect-ratio:1; border-radius:50%; border:0;
  background:radial-gradient(circle at 34% 28%, #c14a32 0%, var(--bata) 55%, #8b2f1d 100%);
  color:#fff; font-family:var(--display); font-size:1.28rem; font-weight:700; cursor:pointer;
  box-shadow:0 0 0 10px var(--bata-muda), 0 16px 34px -14px rgba(166,58,36,.75);
  display:grid; place-items:center; margin:26px auto; line-height:1.3; padding:20px;
  transition:transform .08s ease, box-shadow .18s ease;
}
.darurat-tombol:active{transform:scale(.97)}
.darurat-tombol[aria-pressed=true]{
  background:#7e2b1c; box-shadow:0 0 0 18px var(--bata-muda), 0 16px 34px -14px rgba(166,58,36,.9);
}

/* ------------------------------ kartu tamu ---------------------------- */
.pas-tamu{
  max-width:400px; margin:0 auto; background:#fff; border:1px solid var(--garis);
  border-radius:var(--r-besar); overflow:hidden; text-align:center; box-shadow:var(--bayang);
}
.pas-tamu .kepala{background:var(--tinta); color:#fff; padding:15px; position:relative}
.pas-tamu .kepala::after{
  content:''; position:absolute; left:0; right:0; bottom:-7px; height:14px;
  background:radial-gradient(circle at 7px 7px, #fff 5.5px, transparent 6px) 0 0/16px 14px repeat-x;
}
.pas-tamu .kode{
  font-family:var(--display); font-size:1.7rem; font-weight:700;
  letter-spacing:.15em; margin:18px 0 4px;
}
.pas-tamu .barcode{padding:0 18px 14px}
.pas-tamu .rincian{text-align:left; padding:0 20px 20px; font-size:.88rem}
.pas-tamu .rincian div{
  display:flex; justify-content:space-between; gap:12px; padding:6px 0;
  border-bottom:1px dashed var(--garis);
}

/* ------------------------------ lain-lain ----------------------------- */
.daftar-notif{list-style:none; margin:0; padding:0}
.daftar-notif li{padding:14px 17px; border-bottom:1px solid var(--garis); display:flex; gap:12px}
.daftar-notif li:last-child{border-bottom:0}
.daftar-notif li.baru{background:#f7faf6}
.titik-baru{width:8px;height:8px;border-radius:50%;background:var(--pandan);margin-top:7px;flex:0 0 8px}
.avatar{
  width:34px;height:34px;border-radius:10px;background:var(--pandan);color:#fff;
  display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:.9rem;
  flex:0 0 34px;text-decoration:none;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25);
}
.avatar:hover{background:var(--pandan-tua); color:#fff}
.tab-bawah{display:none}
.timeline{border-left:2px solid var(--garis); margin-left:8px; padding-left:18px}
.timeline .item{position:relative; padding-bottom:16px}
.timeline .item::before{
  content:''; position:absolute; left:-25px; top:6px; width:10px; height:10px;
  border-radius:50%; background:var(--pandan); box-shadow:0 0 0 3px #fff;
}
.gambar-bukti{max-width:100%; border-radius:var(--r); border:1px solid var(--garis)}
.tumpuk{display:flex; flex-wrap:wrap; gap:10px; align-items:center}

/* ------------------------------ responsif ----------------------------- */
@media (max-width:1000px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3,.g-sisi{grid-template-columns:1fr}
  .masuk-tata{grid-template-columns:1fr}
  .masuk-kiri{padding:30px 26px}
  .masuk-kiri h2{font-size:1.6rem}
  .contoh-kartu{display:none}
}
@media (max-width:760px){
  body{font-size:14.5px}
  .sisi{
    position:fixed; z-index:60; inset:0 auto 0 0; transform:translateX(-100%);
    transition:transform .22s ease; box-shadow:0 0 46px rgba(0,0,0,.45);
  }
  .sisi.buka{transform:none}
  .tombol-menu{display:inline-flex}
  .isi{padding:16px 14px 92px}
  .bar{padding:10px 14px}
  .g2,.baris-2,.baris-3{grid-template-columns:1fr}
  .bulan-grid{grid-template-columns:repeat(3,1fr)}
  .bulan:nth-child(6n){border-right:1px dashed var(--garis)}
  .bulan:nth-child(3n){border-right:0}
  .bulan:nth-child(n+7){border-bottom:1px dashed var(--garis)}
  .bulan:nth-child(n+10){border-bottom:0}
  .angka{font-size:1.62rem}
  .saring{padding:12px 13px}
  .tab-bawah{
    display:flex; position:fixed; bottom:0; left:0; right:0;
    background:rgba(255,255,255,.94); backdrop-filter:blur(10px);
    border-top:1px solid var(--garis); z-index:50; padding:6px 4px env(safe-area-inset-bottom);
  }
  .tab-bawah a{
    flex:1; text-align:center; padding:7px 2px; font-size:.68rem; color:var(--redup);
    text-decoration:none; font-weight:600; display:flex; flex-direction:column; gap:3px; align-items:center;
  }
  .tab-bawah a.aktif{color:var(--pandan-tua)}
  .tab-bawah a.aktif .ikon{
    background:var(--pandan-muda); border-radius:9px; padding:1px 11px;
  }
  .tab-bawah .ikon{font-size:1.05rem; line-height:1.3}
  .selubung{position:fixed; inset:0; background:rgba(15,29,23,.55); z-index:55; display:none}
  .selubung.tampil{display:block}
}

/* ------------------------------ cetak --------------------------------- */
@media print{
  .sisi,.bar,.tab-bawah,.tanpa-cetak,.selubung{display:none !important}
  body{background:#fff; font-size:12pt}
  .isi{padding:0; max-width:100%}
  .kartu,.tabel-bungkus,.kuitansi,.stat{border:1px solid #999; box-shadow:none; break-inside:avoid}
  table{font-size:10.5pt}
  th{background:#eee !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .pil,.stempel,.bulan .cap{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  a[href]::after{content:''}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}

/* ------------------------- kalender donasi makan ---------------------- */
.kalender-bungkus{background:#fff;border:1px solid var(--garis);border-radius:var(--r-besar);
  overflow:hidden;box-shadow:var(--bayang)}
.kalender-kepala{display:grid;grid-template-columns:repeat(7,1fr);background:#f4f7f1;
  border-bottom:1px solid var(--garis)}
.kalender-kepala div{padding:9px 6px;font-size:.76rem;font-weight:600;color:var(--redup);text-align:center}
.kalender{display:grid;grid-template-columns:repeat(7,1fr)}
.kal-hari{border-right:1px solid var(--garis);border-bottom:1px solid var(--garis);
  min-height:112px;padding:7px 6px 8px;display:flex;flex-direction:column;gap:4px}
.kal-hari:nth-child(7n){border-right:0}
.kal-hari.kosong{background:#fbfcfa}
.kal-hari.lewat{background:#f7f8f5}
.kal-hari.ini{box-shadow:inset 0 0 0 2px var(--pandan);background:#f6faf4}
.kal-tanggal{font-family:var(--display);font-weight:700;font-size:.92rem;color:var(--redup);
  display:flex;align-items:center;gap:6px}
.kal-hari.ini .kal-tanggal{color:var(--pandan-tua)}
.kal-cap{font-family:var(--teks);font-size:.62rem;font-weight:700;background:var(--pandan);
  color:#fff;border-radius:20px;padding:1px 7px}
.kal-slot{display:flex;flex-direction:column;gap:1px;border-radius:8px;padding:7px;
  font-size:.74rem;position:relative;text-align:left;border:1px solid transparent;width:100%;
  flex:1;justify-content:center}
.kal-nama{font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.kal-menu{color:var(--redup);line-height:1.2;overflow-wrap:anywhere}
.kal-slot.terisi{background:var(--pandan-muda);border-color:#c2dbcc}
.kal-slot.terisi.saya{box-shadow:inset 0 0 0 1.5px var(--pandan)}
.kal-slot.lowong{background:#f2f4f0}
.kal-slot.kosong-slot{background:#fff;border:1px dashed var(--garis-tebal);color:var(--redup);
  font:inherit;font-size:.74rem;cursor:pointer;align-items:center;
  transition:border-color .13s ease,background .13s ease}
.kal-slot.kosong-slot:hover{border-color:var(--pandan);background:#f6faf4;color:var(--pandan-tua)}
.kal-tambah{font-weight:700}
.kal-batal{position:absolute;top:2px;right:3px;border:0;background:none;cursor:pointer;
  font-size:.95rem;line-height:1;color:var(--redup);padding:2px 4px}
.kal-batal:hover{color:var(--bata)}
.kal-hari form{margin:0}

/* daftar hari terdekat di dasbor dan halaman donasi */
.makan-hari{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--garis)}
.makan-hari:last-of-type{border-bottom:0}
.makan-tgl{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:52px;padding:6px 4px;border-radius:10px;background:var(--kertas);line-height:1.1}
.makan-hari.terisi .makan-tgl{background:var(--pandan-muda);color:var(--pandan-tua)}
.makan-angka{font-family:var(--display);font-weight:700;font-size:1.15rem}
.makan-bln{font-size:.66rem;font-weight:600;color:var(--redup)}
.makan-hari.terisi .makan-bln{color:var(--pandan-tua)}
.makan-hari form{margin:0}

@media (max-width:760px){
  .kalender-kepala div{font-size:.66rem;padding:7px 2px}
  .kal-hari{min-height:0;padding:5px 3px 6px;gap:3px}
  .kal-tanggal{font-size:.78rem}
  .kal-cap{display:none}
  .kal-slot{padding:3px 4px;font-size:.62rem}
  .kal-menu{display:none}
}

/* --------------------------- jadwal jaga satpam ----------------------- */
.jaga-shift{display:flex;gap:12px;align-items:flex-start;padding:11px 0;
  border-bottom:1px solid var(--garis)}
.jaga-shift:last-of-type{border-bottom:0}
.jaga-label{display:flex;flex-direction:column;min-width:96px;padding:6px 9px;border-radius:10px;
  background:var(--kertas);line-height:1.25}
.jaga-shift.siang .jaga-label{background:var(--pandan-muda);color:var(--pandan-tua)}
.jaga-shift.malam .jaga-label{background:var(--tinta);color:#cfe0d5}
.jaga-shift.malam .jaga-label .redup{color:#93a89a}

/* ------------------------- ajakan pasang aplikasi --------------------- */
.ajakan-pasang{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:70;
  background:#fff; border:1px solid var(--garis); border-radius:14px;
  box-shadow:var(--bayang-naik); padding:13px 15px;
  display:flex; gap:10px; align-items:center;
}
.ajakan-pasang > div{flex:1; min-width:0; line-height:1.35}
.ajakan-pasang .kecil{color:var(--redup)}
@media (max-width:760px){ .ajakan-pasang{bottom:74px} }
@media (display-mode:standalone){ .ajakan-pasang{display:none} }

/* Mode aplikasi: beri ruang untuk bilah status dan area gestur ponsel */
@media (display-mode:standalone){
  .bar{padding-top:calc(12px + env(safe-area-inset-top))}
  .sisi{padding-top:env(safe-area-inset-top)}
  .tab-bawah{padding-bottom:calc(6px + env(safe-area-inset-bottom))}
}

/* --------------------- pilih beberapa bulan saat bayar ---------------- */
.pilih-tagihan{border:1px solid var(--garis);border-radius:var(--r);overflow:hidden}
.baris-tagihan{display:flex;gap:11px;align-items:center;padding:11px 13px;
  border-bottom:1px solid var(--garis);margin:0;cursor:pointer}
.baris-tagihan:last-child{border-bottom:0}
.baris-tagihan:hover{background:#f8fbf7}
.baris-tagihan input:checked ~ span{color:var(--pandan-tua)}
input[readonly]{background:#f1f4ef;color:var(--redup)}

/* --------------------------- alarm darurat ---------------------------- */
.alarm-darurat{
  position:fixed; inset:0; z-index:9999; display:grid; place-items:center; padding:20px;
  background:rgba(90,22,10,.93); backdrop-filter:blur(3px);
  animation:alarm-kedip 1.1s steps(1) infinite;
}
@keyframes alarm-kedip{
  0%,49%{background:rgba(90,22,10,.93)}
  50%,100%{background:rgba(140,38,20,.95)}
}
.alarm-kotak{
  background:#fff; border-radius:var(--r-besar); padding:26px 24px; max-width:420px; width:100%;
  text-align:center; box-shadow:0 30px 70px -20px rgba(0,0,0,.6);
}
.alarm-pita{
  display:inline-block; background:var(--bata); color:#fff; font-weight:800; font-size:.74rem;
  letter-spacing:.08em; padding:5px 14px; border-radius:20px; margin-bottom:12px;
}
.alarm-kotak h2{color:var(--bata); font-size:1.7rem; margin:0 0 .3rem}
.alarm-nama{font-family:var(--display); font-weight:700; font-size:1.2rem}
.alarm-alamat{font-size:1rem; color:var(--redup); margin-bottom:10px}
.alarm-ket{background:var(--bata-muda); border-radius:10px; padding:10px 13px; margin:0 0 12px; font-size:.9rem}
.alarm-waktu{font-size:.82rem; color:var(--redup); margin-bottom:16px}
.alarm-tbl{display:flex; gap:8px; justify-content:center; margin-bottom:14px; flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){ .alarm-darurat{animation:none} }

/* petugas yang sedang bertugas, di halaman tombol darurat */
.jaga-sekarang{background:var(--pandan-muda);border:1px solid #c2dbcc;border-radius:var(--r);
  padding:12px 15px;margin:16px 0;text-align:left}

/* --------------------------- kemajuan kantong ------------------------- */
.bar-target{height:7px;border-radius:20px;background:var(--garis);overflow:hidden;margin:10px 0 6px}
.bar-target span{display:block;height:100%;border-radius:20px;background:var(--pandan)}
.bar-target.gelap{background:rgba(255,255,255,.18)}
.bar-target.gelap span{background:#6cc79a}

/* nominal yang disembunyikan dari warga lain */
.tersembunyi{letter-spacing:.15em;color:var(--garis-tebal);user-select:none}

/* baris kantong di dasbor */
.kantong-baris{display:flex;gap:12px;align-items:center;padding:11px 0;
  border-bottom:1px solid var(--garis);text-decoration:none;color:inherit}
.kantong-baris:last-of-type{border-bottom:0}
.kantong-baris:hover{color:inherit}
.kantong-baris:hover .tebal{color:var(--pandan-tua)}

/* --------------------------- pengurutan tabel ------------------------- */
th.bisa-urut{cursor:pointer; user-select:none; position:relative; padding-right:22px}
th.bisa-urut:hover{color:var(--tinta)}
th.bisa-urut::after{
  content:'↕'; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-size:.78em; opacity:.3;
}
th.bisa-urut:hover::after{opacity:.6}
th.urut-naik::after{content:'↑'; opacity:1; color:var(--pandan)}
th.urut-turun::after{content:'↓'; opacity:1; color:var(--pandan)}
th.bisa-urut:focus-visible{outline:2px solid var(--pandan); outline-offset:-2px}
@media print{ th.bisa-urut::after{display:none} }

/* ------------------------------ ruang warga --------------------------- */
.avatar-foto{object-fit:cover; border-radius:10px; box-shadow:inset 0 0 0 1px rgba(15,29,23,.12)}
.kiriman{padding:16px 18px}
.daftar-komentar{margin-top:12px; border-top:1px solid var(--garis); padding-top:10px}
.komentar{display:flex; gap:9px; align-items:flex-start; padding:6px 0}
.komentar form{margin:0}

/* ------------------------------ paginasi ------------------------------ */
.paginasi{display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  padding:11px 2px 2px; margin-bottom:6px}
.paginasi .pg-info{margin-right:auto}
.paginasi select{width:auto; padding:5px 9px; font-size:.85rem}
.paginasi label{display:inline-flex; align-items:center; gap:7px; margin:0; font-weight:500}
.pg-tombol{display:flex; gap:4px; align-items:center; flex-wrap:wrap}
.pg-btn{
  min-width:32px; padding:5px 9px; border:1px solid var(--garis-tebal); background:#fff;
  border-radius:var(--r-kecil); font:inherit; font-size:.85rem; cursor:pointer; color:var(--tinta);
}
.pg-btn:hover:not(:disabled){border-color:var(--tinta)}
.pg-btn.aktif{background:var(--pandan); border-color:var(--pandan); color:#fff; font-weight:700}
.pg-btn:disabled{opacity:.4; cursor:not-allowed}
@media print{ .paginasi{display:none} }