:root{
  --merah:#A32D2D; --merah-tua:#791F1F; --merah-muda:#F7C1C1; --merah-pucat:#FCEBEB;
  --biru:#185FA5; --hijau:#0F6E56; --kuning:#854F0B;
  --oranye:#993C1D; --toska:#3B6D11; --ungu:#534AB7;
  --teks:#26251F; --teks-lembut:#6B6A63; --garis:#E3E1D9;
  --bg:#F6F5F0; --putih:#FFFFFF; --radius:10px;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--teks); font-size:15px; line-height:1.6;
  -webkit-text-size-adjust:100%;
}
a{color:inherit;text-decoration:none}
.tautan{color:var(--biru);text-decoration:underline}

/* ============ SIDEBAR ============ */
.sidebar{
  position:fixed; top:0; left:0; width:230px; height:100vh;
  background:var(--merah); color:var(--merah-pucat);
  display:flex; flex-direction:column; padding:14px 10px;
  overflow-y:auto; overscroll-behavior:contain; z-index:50;
  transition:transform .25s ease; scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.25) transparent;
}
.sidebar::-webkit-scrollbar{width:5px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:9px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar-brand{padding:2px 8px 11px}
.brand-nama{font-size:16px;font-weight:600;color:#fff}
.brand-sub{font-size:11px;color:var(--merah-muda);margin-top:1px}

.sidebar-user{
  display:flex;align-items:center;gap:9px;
  background:var(--merah-tua);border-radius:var(--radius);
  padding:8px 10px;margin-bottom:10px;
}
.avatar{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:var(--merah-muda);color:var(--merah-tua);
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:13px;
}
.sidebar-user-info .nama{font-size:12px;color:#fff;font-weight:500}
.sidebar-user-info .sub{font-size:11px;color:var(--merah-muda)}

.sidebar-nav{flex:1}
.nav-grup{
  font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;
  color:#F09595;margin:11px 0 4px;padding:0 8px;
}
.sidebar-nav a{
  display:block;padding:6.5px 10px;border-radius:var(--radius);
  font-size:13px;color:var(--merah-muda);margin-bottom:1px;
}
.sidebar-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.sidebar-nav a.aktif{background:var(--merah-tua);color:#fff;font-weight:500}

.sidebar-keluar{
  padding:10px 4px 2px;border-top:1px solid rgba(255,255,255,.15);
  margin-top:12px;flex-shrink:0;
}
.sidebar-keluar button{
  width:100%;padding:8px;border:1px solid rgba(255,255,255,.3);
  background:transparent;color:var(--merah-pucat);
  border-radius:var(--radius);font-size:13px;cursor:pointer;font-family:inherit;
}
.sidebar-keluar button:hover{background:rgba(255,255,255,.1)}

.overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:45;
}
.overlay.tampil{display:block}

/* ============ KONTEN ============ */
.konten{margin-left:230px;min-height:100vh}
.topbar{
  background:var(--putih);border-bottom:1px solid var(--garis);
  padding:14px 22px;display:flex;align-items:center;gap:12px;
  position:sticky;top:0;z-index:20;
}
.topbar h1{font-size:18px;font-weight:600}
.tombol-menu{
  display:none;background:none;border:none;font-size:21px;
  cursor:pointer;color:var(--teks);line-height:1;
}
.isi{padding:20px 22px 40px}
.sub-judul{font-size:12.5px;color:var(--teks-lembut);margin-bottom:14px}

/* ============ KARTU STATISTIK ============ */
.grid-kartu{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:11px;margin-bottom:11px;
}
.grid-kecil{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.kartu{border-radius:var(--radius);padding:14px 15px;color:#fff}
.kartu-angka{font-size:24px;font-weight:600;line-height:1.25}
.kartu-angka.kecil{font-size:18px}
.kartu-label{font-size:11.5px;opacity:.85;margin-top:2px}

.k-merah{background:var(--merah)} .k-biru{background:var(--biru)}
.k-hijau{background:var(--hijau)} .k-kuning{background:var(--kuning)}
.k-oranye{background:var(--oranye)} .k-toska{background:var(--toska)}
.k-ungu{background:var(--ungu)}

/* ============ PANEL ============ */
.panel{
  background:var(--putih);border:1px solid var(--garis);
  border-radius:var(--radius);padding:15px 17px;margin-top:16px;
}
.panel-judul{font-size:14px;font-weight:600;margin-bottom:11px}
.panel-info p{font-size:13.5px;color:var(--teks-lembut)}

.bar-luar{height:8px;background:var(--bg);border-radius:99px;overflow:hidden}
.bar-dalam{height:100%;background:var(--hijau);transition:width .4s ease}
.bar-info{
  display:flex;justify-content:space-between;
  font-size:12px;color:var(--teks-lembut);margin-top:7px;gap:8px;
}

/* ============ LOGIN ============ */
.halaman-login{
  background:var(--merah);display:flex;align-items:center;
  justify-content:center;min-height:100vh;padding:20px;
}
.kotak-login{
  background:var(--putih);border-radius:14px;padding:30px 26px;
  width:100%;max-width:370px;
}
.login-header{text-align:center;margin-bottom:20px}
.login-logo{
  width:52px;height:52px;border-radius:14px;background:var(--merah);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:600;margin:0 auto 11px;
}
.login-header h1{font-size:17px;font-weight:600}
.login-header p{font-size:12.5px;color:var(--teks-lembut)}

.kotak-login label{
  display:block;font-size:12.5px;font-weight:500;
  margin:12px 0 5px;color:var(--teks-lembut);
}
.kotak-login input{
  width:100%;padding:11px 12px;border:1px solid var(--garis);
  border-radius:var(--radius);font-size:15px;font-family:inherit;
  background:var(--putih);color:var(--teks);
}
.kotak-login input:focus{outline:none;border-color:var(--merah)}

.tombol-utama{
  width:100%;margin-top:18px;padding:12px;background:var(--merah);
  color:#fff;border:none;border-radius:var(--radius);
  font-size:15px;font-weight:500;cursor:pointer;font-family:inherit;
}
.tombol-utama:hover{background:var(--merah-tua)}

.pesan-error{
  background:var(--merah-pucat);color:var(--merah-tua);
  border-radius:var(--radius);padding:10px 12px;font-size:13px;margin-bottom:4px;
}
.login-kaki{
  text-align:center;font-size:11.5px;color:var(--teks-lembut);margin-top:16px;
}

/* ============ TAMPILAN HP ============ */
@media (max-width:820px){
  .sidebar{transform:translateX(-100%);width:250px}
  .sidebar.buka{transform:translateX(0)}
  .konten{margin-left:0}
  .tombol-menu{display:block}
  .isi{padding:15px 14px 40px}
  .topbar{padding:12px 15px}
  .topbar h1{font-size:16px}
  .kartu-angka{font-size:21px}
  .grid-kartu{grid-template-columns:repeat(2,1fr);gap:9px}
}

/* ============ NOTIFIKASI ============ */
.notif{
  padding:11px 14px;border-radius:var(--radius);
  font-size:13.5px;margin-bottom:14px;
}
.n-ok{background:#E1F5EE;color:#04342C;border:1px solid #9FE1CB}
.n-err{background:var(--merah-pucat);color:#501313;border:1px solid #F09595}

/* ============ TOMBOL ============ */
.tombol{
  display:inline-block;padding:9px 15px;border-radius:var(--radius);
  border:1px solid var(--garis);background:var(--putih);color:var(--teks);
  font-size:13.5px;font-family:inherit;cursor:pointer;text-align:center;
  line-height:1.3;
}
.tombol:hover{background:var(--bg);border-color:#CFCDC3}
.tombol.utama{background:var(--merah);border-color:var(--merah);color:#fff}
.tombol.utama:hover{background:var(--merah-tua)}
.tombol.kecil{padding:6px 11px;font-size:12.5px}
.tombol.bahaya{color:#A32D2D;border-color:#F09595}
.tombol.bahaya:hover{background:var(--merah-pucat)}

/* ============ FORM ============ */
.form-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px 14px;
}
.form-grid label{
  display:block;font-size:12.5px;font-weight:500;
  color:var(--teks-lembut);margin-bottom:4px;
}
.form-grid input,.form-grid select,.form-baris input,.form-baris select{
  width:100%;padding:9px 11px;border:1px solid var(--garis);
  border-radius:var(--radius);font-size:14.5px;font-family:inherit;
  background:var(--putih);color:var(--teks);
}
.form-grid input:focus,.form-grid select:focus,
.form-baris input:focus,.form-baris select:focus{outline:none;border-color:var(--merah)}
.form-grid .lebar-penuh{grid-column:1/-1}
.form-aksi{grid-column:1/-1;display:flex;gap:8px;margin-top:4px}

.form-baris{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.form-baris input,.form-baris select{flex:1;min-width:150px;width:auto}
.form-baris button{flex-shrink:0}

.baris-atas{
  display:flex;gap:10px;justify-content:space-between;
  align-items:center;flex-wrap:wrap;margin-bottom:4px;
}
.baris-atas .form-baris{flex:1;min-width:240px}

/* ============ TABEL ============ */
.tabel-bungkus{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabel{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
.tabel th{
  text-align:left;font-weight:500;font-size:12px;color:var(--teks-lembut);
  padding:8px 10px;border-bottom:1px solid var(--garis);white-space:nowrap;
}
.tabel td{padding:10px;border-bottom:1px solid var(--garis);vertical-align:top}
.tabel tr:last-child td{border-bottom:none}
.tabel tr:hover td{background:#FAF9F5}
.tabel .kanan{text-align:right;white-space:nowrap}
.kecil{font-size:11.5px;color:var(--teks-lembut);margin-top:1px}
.kosong{font-size:13.5px;color:var(--teks-lembut);padding:6px 0}

/* ============ BADGE ============ */
.badge{
  display:inline-block;padding:3px 9px;border-radius:99px;
  font-size:11px;font-weight:500;white-space:nowrap;
}
.b-hijau{background:#E1F5EE;color:#04342C}
.b-biru{background:#E6F1FB;color:#042C53}
.b-kuning{background:#FAEEDA;color:#412402}
.b-merah{background:var(--merah-pucat);color:#501313}
.b-abu{background:#F1EFE8;color:#2C2C2A}

@media (max-width:820px){
  .form-grid{grid-template-columns:1fr}
  .baris-atas{flex-direction:column;align-items:stretch}
  .baris-atas .tombol{width:100%}
}

/* ============ TOMBOL KEMBALI ============ */
.tombol-kembali{
  background:none;border:1px solid var(--garis);border-radius:var(--radius);
  padding:5px 11px;font-size:13px;font-family:inherit;cursor:pointer;
  color:var(--teks-lembut);flex-shrink:0;
}
.tombol-kembali:hover{background:var(--bg);color:var(--teks)}

/* ============ DETAIL ============ */
.detail-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:13px 16px;font-size:14px;
}
.detail-grid .lebar-penuh{grid-column:1/-1}
.label-kecil{
  display:block;font-size:11.5px;color:var(--teks-lembut);
  margin-bottom:2px;font-weight:500;
}
.mono{font-family:ui-monospace,"Courier New",monospace;font-size:13.5px;letter-spacing:.3px}

/* ============ SUB MENU SIDEBAR ============ */
.sidebar-nav a.anak{
  padding-left:24px;font-size:12px;position:relative;
}
.sidebar-nav a.anak::before{
  content:"";position:absolute;left:13px;top:50%;
  width:5px;height:1px;background:currentColor;opacity:.5;
}

/* ============ AKSI DALAM BARIS TABEL ============ */
.aksi-baris{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.aksi-baris form{display:inline}

/* ============ CENTANG IZIN ============ */
.grup-izin{margin-top:13px}
.grup-judul{
  font-size:11.5px;font-weight:500;color:var(--teks-lembut);
  text-transform:uppercase;letter-spacing:.4px;margin-bottom:7px;
}
.centang-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:7px;
}
.centang{
  display:flex;align-items:flex-start;gap:8px;cursor:pointer;
  border:1px solid var(--garis);border-radius:var(--radius);
  padding:9px 11px;font-size:13px;background:var(--putih);
}
.centang:hover{border-color:var(--merah-muda);background:#FDFCFA}
.centang input{margin-top:2px;flex-shrink:0;width:15px;height:15px;accent-color:var(--merah)}
.centang span{line-height:1.4}


/* ============ KARTU YANG BISA DIKLIK ============ */
.kartu.bisa-klik{
  display:block;text-decoration:none;cursor:pointer;
  transition:transform .12s ease,filter .12s ease;
}
.kartu.bisa-klik:hover{filter:brightness(1.09)}
.kartu.bisa-klik:active{transform:scale(.985)}
.kartu.bisa-klik::after{
  content:"›";position:absolute;right:12px;top:11px;
  font-size:17px;opacity:.5;line-height:1;
}
.kartu{position:relative}

/* ============ KOTAK GRAFIK ============ */
.kotak-grafik{position:relative;height:200px}

/* Dua panel berdampingan di layar lebar, menumpuk di layar sempit */
.grid-panel{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:14px;align-items:start;
}
.grid-panel .panel{margin-top:16px}
@media (max-width:820px){
  .kotak-grafik{height:190px}
  .grid-panel{grid-template-columns:1fr;gap:0}
}

/* ============ KOTAK KREDENSIAL ============ */
.kotak-kredensial{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:12px;background:var(--bg);border-radius:var(--radius);padding:14px 16px;
}
.nilai-kredensial{
  font-family:ui-monospace,"Courier New",monospace;
  font-size:20px;font-weight:600;letter-spacing:1px;
  color:var(--teks);word-break:break-all;margin-top:3px;
}
@media print{
  .sidebar,.topbar,.overlay,.aksi-baris,.notif{display:none !important}
  .konten{margin-left:0}
  .panel{border:1px solid #999;break-inside:avoid}
}

/* ============ KARTU INFORMASI ============ */
.kartu-info{
  border:1px solid var(--garis);border-radius:var(--radius);
  padding:13px 15px;margin-bottom:11px;background:var(--putih);
}
.kartu-info.penting{border-color:#F09595;background:#FFFCFC}
.kartu-info:last-child{margin-bottom:0}
.isi-pengumuman{font-size:14px;line-height:1.65;white-space:pre-wrap;margin-top:4px}

.kotak-tanggapan{
  background:var(--bg);border-radius:var(--radius);
  padding:10px 12px;margin-top:11px;
}
.kotak-tanggapan p{font-size:13.5px;line-height:1.6;margin:3px 0 5px;white-space:pre-wrap}

/* ============ STATUS BESAR DI PORTAL WARGA ============ */
.tanda-status{
  width:56px;height:56px;border-radius:50%;margin:0 auto 11px;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;font-weight:600;
}
.tanda-status.hijau{background:#E1F5EE;color:#0F6E56}
.tanda-status.merah{background:var(--merah-pucat);color:var(--merah)}
.tanda-status.abu{background:#F1EFE8;color:#5F5E5A}
.status-besar{font-size:17px;font-weight:600;margin-bottom:4px}

/* ============ AREA TEKS ============ */
textarea{
  width:100%;padding:10px 12px;border:1px solid var(--garis);
  border-radius:var(--radius);font-size:14.5px;font-family:inherit;
  background:var(--putih);color:var(--teks);line-height:1.6;resize:vertical;
}
textarea:focus{outline:none;border-color:var(--merah)}

/* ============ BARIS PENOMORAN HALAMAN ============ */
.baris-halaman{
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;flex-wrap:wrap;margin-top:13px;
  border-top:1px solid var(--garis);padding-top:11px;
}
@media (max-width:820px){
  .baris-halaman{flex-direction:column;align-items:stretch}
  .baris-halaman .aksi-baris{justify-content:center}
}

/* ============ AJAKAN MEMASANG APLIKASI ============ */
.ajakan-pasang{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:60;
  background:var(--putih);border:1px solid var(--garis);
  border-radius:12px;padding:12px 14px;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;box-shadow:0 4px 18px rgba(0,0,0,.13);
}
@media (min-width:821px){
  .ajakan-pasang{left:auto;right:20px;bottom:20px;max-width:380px}
}