/* =========================================================================
   SIMANTAP LPQQ — Sistem Informasi Manajemen Terpadu
   Identitas: Hijau tua #004D40 · Hijau utama #087443 · Hijau muda #D8E9DF
   Latar #F5F9F6 · Putih #FFFFFF · Modern, Islami, elegan, minimalis
   ========================================================================= */
:root{
  --hijau-tua:#004D40;
  --hijau-tua-2:#003A30;
  --hijau:#087443;
  --hijau-2:#0B8F55;
  --hijau-muda:#D8E9DF;
  --hijau-lembut:#EDF6F1;
  --bg:#F5F9F6;
  --kartu:#FFFFFF;
  --garis:#DEE9E2;
  --garis-2:#EDF3EF;
  --tinta:#0C2A21;
  --mut:#5B7166;
  --merah:#B42318;
  --merah-lembut:#FDECEA;
  --kuning:#8A5A00;
  --kuning-lembut:#FFF6DA;
  --biru:#1B4F8A;
  --biru-lembut:#EAF1FA;
  --radius:18px;
  --radius-sm:13px;
  --bayang:0 10px 26px rgba(0,45,34,.07);
  --bayang-kecil:0 2px 8px rgba(0,45,34,.05);
  --bayang-naik:0 18px 40px rgba(0,45,34,.14);
  --tinggi-nav:66px;
  --safe-bawah:env(safe-area-inset-bottom,0px);
  --sidebar:252px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--tinta);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--hijau);text-decoration:none}
h1,h2,h3,h4{margin:0 0 6px;line-height:1.28;letter-spacing:-.015em;font-weight:700}
h1{font-size:1.34rem}h2{font-size:1.08rem}h3{font-size:.98rem}
p{margin:0 0 10px}
small,.muted{color:var(--mut)}
hr{border:0;border-top:1px solid var(--garis);margin:18px 0}
.ikon{width:20px;height:20px;flex:0 0 auto;display:inline-block;vertical-align:-3px}
.ikon.putar{transform:rotate(180deg)}
.hanya-hp{display:inline-flex}
.posisi-notif{position:relative}
.titik-notif{position:absolute;top:-2px;right:-2px;min-width:17px;height:17px;border-radius:99px;background:var(--merah);color:#fff;font-size:.62rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid #fff}

/* ---------------- kerangka ---------------- */
.aplikasi{display:flex;min-height:100vh}
.sidebar{
  position:fixed;inset:0 auto 0 0;width:var(--sidebar);z-index:50;display:none;
  flex-direction:column;background:linear-gradient(180deg,#00594A 0%,var(--hijau-tua) 45%,#003029 100%);
  color:#fff;overflow-y:auto;
}
.sidebar-brand{display:flex;align-items:center;gap:10px;padding:18px 16px 14px;border-bottom:1px solid rgba(255,255,255,.12)}
.sidebar-brand img{width:42px;height:42px;object-fit:contain;border-radius:12px;background:#fff;padding:3px}
.sidebar-brand div{min-width:0;flex:1}
.sidebar-brand strong{display:block;font-size:.92rem;letter-spacing:.01em}
.sidebar-brand small{display:block;color:rgba(255,255,255,.68);font-size:.68rem;line-height:1.35}
.tutup-sidebar{display:none;background:rgba(255,255,255,.12);color:#fff;width:36px;height:36px;flex:0 0 36px}
.sidebar-nav{padding:8px 10px 4px;flex:1}
.sidebar-judul{font-size:.62rem;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.5);margin:16px 8px 6px;font-weight:700}
.sidebar-grup{display:flex;flex-direction:column;gap:2px}
.sidebar-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:11px;color:rgba(255,255,255,.86);font-size:.84rem;font-weight:500}
.sidebar-item .si-ikon{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);flex:0 0 26px}
.sidebar-item .ikon{width:16px;height:16px}
.sidebar-item:hover{background:rgba(255,255,255,.1);color:#fff}
.sidebar-item.aktif{background:#fff;color:var(--hijau-tua);font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.sidebar-item.aktif .si-ikon{background:var(--hijau-muda)}
.sidebar-kaki{padding:12px 16px 20px;border-top:1px solid rgba(255,255,255,.12)}
.sidebar-kaki p{font-size:.68rem;margin:10px 0 0;color:rgba(255,255,255,.55)}
.tombol-instal{display:inline-flex;align-items:center;gap:7px;width:100%;justify-content:center;border:1px dashed rgba(255,255,255,.4);background:rgba(255,255,255,.08);color:#fff;border-radius:11px;padding:9px 10px;font:inherit;font-size:.78rem;font-weight:600;cursor:pointer}
.tombol-instal[hidden]{display:none}
.tombol-instal .ikon{width:16px;height:16px}
.kerangka{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:6px;
  padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px;
  background:rgba(255,255,255,.96);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--garis);
}
.topbar-logo{width:32px;height:32px;border-radius:9px;object-fit:contain;background:#fff;margin-right:2px}
.topbar-judul{flex:1;min-width:0;padding-left:2px}
.topbar-judul strong{display:block;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-judul small{display:block;font-size:.68rem;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn-ikon{width:42px;height:42px;border-radius:13px;border:0;background:#F1F6F2;color:var(--tinta);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 42px;transition:background .16s,transform .12s}
.btn-ikon:active{transform:scale(.94);background:#E6EFE9}
.btn-profil{display:inline-flex;margin-left:2px}
.isi{padding:14px 14px calc(var(--tinggi-nav) + 26px + var(--safe-bawah));flex:1;width:100%;max-width:1240px;margin:0 auto}
.isi-penuh{max-width:none}
.footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 16px 24px;font-size:.72rem;color:var(--mut);max-width:1240px;margin:0 auto;width:100%}

@media (min-width:1024px){
  .sidebar{display:flex;transform:none}
  .kerangka{margin-left:var(--sidebar)}
  .hanya-hp{display:none!important}
  .isi{padding:22px 26px 40px}
  .bottomnav{display:none!important}
  .lembar-menu{display:none!important}
  .topbar{padding:10px 26px}
}

/* ---------------- bottom nav ---------------- */
.bottomnav{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:45;display:flex;
  width:100%;max-width:620px;background:rgba(255,255,255,.98);
  backdrop-filter:saturate(180%) blur(16px);
  border:1px solid var(--garis);border-bottom:0;border-radius:20px 20px 0 0;
  padding:7px 6px calc(7px + var(--safe-bawah));
  box-shadow:0 -8px 26px rgba(0,45,34,.10);
}
.bn-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 2px;color:#7A8D82;font-size:.63rem;font-weight:650;border-radius:13px;min-width:0}
.bn-item .ikon{width:22px;height:22px}
.bn-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.bn-item.aktif{color:var(--hijau);background:var(--hijau-lembut)}
.bn-item.aktif .ikon{stroke-width:2.1}
.bn-ikon-bulat{width:34px;height:34px;border-radius:50%;background:var(--hijau);color:#fff;display:flex;align-items:center;justify-content:center;margin-top:-10px;box-shadow:0 4px 12px rgba(8,116,67,.32)}
.bn-ikon-bulat .ikon{width:19px;height:19px}

/* ---------------- lembar menu ---------------- */
.lembar-menu{position:fixed;inset:0;z-index:70;background:var(--bg);display:flex;flex-direction:column;animation:naik .22s ease}
.lembar-menu[hidden]{display:none}
@keyframes naik{from{transform:translateY(14px);opacity:.4}to{transform:none;opacity:1}}
.lembar-kepala{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:calc(12px + env(safe-area-inset-top,0px)) 14px 12px;background:#fff;border-bottom:1px solid var(--garis)}
.orang{display:flex;gap:10px;align-items:center;min-width:0}
.orang strong{display:block;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orang small{display:block;font-size:.72rem;color:var(--mut)}
.lembar-isi{flex:1;overflow:auto;padding:14px 14px calc(20px + var(--safe-bawah))}
.lembar-judul{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);margin:16px 4px 8px;font-weight:800}
.lembar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lembar-item{display:flex;flex-direction:column;align-items:center;gap:7px;padding:13px 6px;background:#fff;border:1px solid var(--garis);border-radius:16px;color:var(--tinta);font-size:.71rem;font-weight:650;text-align:center;box-shadow:var(--bayang-kecil)}
.lembar-item .li-ikon{width:44px;height:44px;border-radius:13px;background:var(--hijau-lembut);color:var(--hijau);display:flex;align-items:center;justify-content:center}
.lembar-item .li-ikon .ikon{width:22px;height:22px}
.lembar-item.aktif{border-color:#B7DCC7;background:#F4FBF7}
.lembar-item:active{transform:scale(.96)}
.lembar-kaki{font-size:.7rem;color:var(--mut);text-align:center;margin:20px 0 0}
@media (min-width:600px){.lembar-grid{grid-template-columns:repeat(4,1fr)}}

/* ---------------- avatar ---------------- */
.avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(150deg,var(--hijau),var(--hijau-tua));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;flex:0 0 auto;overflow:hidden}
.avatar-foto{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:#EAF2EC;border:1px solid var(--garis)}
.avatar-mini{width:34px;height:34px;border-radius:50%;background:var(--hijau-lembut);color:var(--hijau);display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex:0 0 34px;overflow:hidden}
img.avatar-mini{object-fit:cover;background:#EAF2EC}

/* ---------------- kartu, grid, statistik ---------------- */
.card{background:var(--kartu);border:1px solid var(--garis);border-radius:var(--radius);padding:16px;box-shadow:var(--bayang-kecil);min-width:0}
.card + .card{margin-top:14px}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.card-head h2,.card-head h3{margin:0}
.card-head small{display:block;color:var(--mut);font-size:.76rem;margin-top:2px}
.grid{display:grid;gap:16px}
.grid > *{min-width:0}
.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
.seksi{margin-bottom:20px}
.seksi > h2{font-size:1rem;margin-bottom:10px;display:flex;align-items:center;gap:8px}
@media (min-width:640px){.grid-2{grid-template-columns:repeat(2,1fr)}.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}.grid-2.kartu-besar{grid-template-columns:1.4fr 1fr}}

.grid-auto{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.grid-auto::-webkit-scrollbar{display:none}
.grid-auto > .stat{flex:0 0 76%;max-width:290px;scroll-snap-align:start}
@media (min-width:760px){.grid-auto{display:grid;grid-template-columns:repeat(4,1fr);overflow:visible;gap:16px}.grid-auto > .stat{flex:none;max-width:none}}
.stat{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--garis);border-radius:16px;padding:14px;box-shadow:var(--bayang-kecil)}
.stat-ikon{width:42px;height:42px;border-radius:13px;background:var(--hijau-lembut);color:var(--hijau);display:flex;align-items:center;justify-content:center;flex:0 0 42px}
.stat-isi{min-width:0}
.stat-isi small{display:block;font-size:.66rem;color:var(--mut);text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.stat-isi strong{display:block;font-size:1.24rem;line-height:1.25;letter-spacing:-.02em;margin-top:1px}
.stat-isi span{display:block;font-size:.72rem;color:var(--mut);margin-top:1px}
.stat.kuning .stat-ikon{background:var(--kuning-lembut);color:var(--kuning)}
.stat.biru .stat-ikon{background:var(--biru-lembut);color:var(--biru)}
.stat.merah .stat-ikon{background:var(--merah-lembut);color:var(--merah)}
.stat.gelap{background:linear-gradient(135deg,var(--hijau-tua),var(--hijau));color:#fff;border:0}
.stat.gelap .stat-ikon{background:rgba(255,255,255,.16);color:#fff}
.stat.gelap .stat-isi small,.stat.gelap .stat-isi span{color:rgba(255,255,255,.78)}

/* ---------------- hero ---------------- */
.hero{
  border-radius:22px;padding:20px;color:#fff;margin-bottom:18px;position:relative;overflow:hidden;
  background:linear-gradient(130deg,var(--hijau-tua) 0%,var(--hijau) 62%,#0A9A58 100%);
  box-shadow:0 12px 30px rgba(0,77,64,.18);
}
.hero::after{content:"";position:absolute;right:-70px;top:-80px;width:230px;height:230px;border-radius:50%;background:rgba(255,255,255,.07)}
.hero::before{content:"";position:absolute;left:-40px;bottom:-90px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.05)}
.hero h1{font-size:1.2rem;margin-bottom:4px;position:relative}
.hero p{margin:0;color:rgba(255,255,255,.88);font-size:.84rem;max-width:660px;position:relative}
.hero-aksi{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap;position:relative}
.hero .btn{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28);color:#fff}
.hero .btn-solid{background:#fff;color:var(--hijau-tua);border-color:#fff;font-weight:700}
.hero-identitas{display:flex;align-items:center;gap:14px;position:relative}
.hero-identitas img{width:56px;height:56px;object-fit:contain;background:#fff;border-radius:14px;padding:4px;flex:0 0 56px}
.hero-kecil{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);font-weight:700}

/* ---------------- tombol ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;border-radius:13px;padding:11px 16px;font-size:.86rem;font-weight:650;background:var(--hijau);color:#fff;cursor:pointer;line-height:1.2;transition:transform .12s,filter .16s,background .16s;font-family:inherit;min-height:44px;text-align:center}
.btn:active{transform:scale(.975);filter:brightness(.97)}
.btn .ikon{width:17px;height:17px}
.btn-ghost{background:#fff;border-color:var(--garis);color:var(--tinta)}
.btn-ghost:active{background:#F2F7F4}
.btn-danger{background:var(--merah)}
.btn-tua{background:var(--hijau-tua)}
.btn-kuning{background:var(--kuning-lembut);color:var(--kuning);border-color:#F0DFA8}
.btn-sm{padding:8px 12px;font-size:.78rem;border-radius:11px;min-height:38px}
.btn-sm .ikon{width:14px;height:14px}
.btn-blok{width:100%}
.btn-baris{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.link-aksi{display:inline-flex;align-items:center;gap:4px;font-size:.79rem;font-weight:650;color:var(--hijau);padding:4px 2px;background:none;border:0;font-family:inherit;cursor:pointer}
.link-aksi .ikon{width:15px;height:15px}
.link-aksi.merah{color:var(--merah)}

/* ---------------- tabel ---------------- */
.tabel-wrap{overflow-x:auto;max-width:100%;border:1px solid var(--garis);border-radius:var(--radius-sm);background:#fff}
table.tabel{width:100%;border-collapse:collapse;font-size:.85rem;min-width:560px}
table.tabel th{background:#F7FAF8;text-align:left;padding:10px 12px;font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);border-bottom:1px solid var(--garis);white-space:nowrap;font-weight:800}
table.tabel td{padding:11px 12px;border-bottom:1px solid var(--garis-2);vertical-align:top}
table.tabel tbody tr:last-child td{border-bottom:0}
table.tabel td.num,table.tabel th.num{text-align:right;white-space:nowrap}
table.tabel .nama-utama{font-weight:650}
table.tabel td .kecil{font-size:.73rem;color:var(--mut);display:block}
table.tabel tfoot td{font-weight:700;background:#F7FAF8}
table.tabel tr.baris-batal td{opacity:.6;text-decoration:line-through}
@media (max-width:899px){
  table.tabel{min-width:0}
  table.tabel thead{display:none}
  table.tabel,table.tabel tbody,table.tabel tr,table.tabel td{display:block;width:100%}
  table.tabel tr{border-bottom:1px solid var(--garis);padding:8px 0}
  table.tabel tr:last-child{border-bottom:0}
  table.tabel td{border:0;padding:6px 12px;display:flex;gap:10px;justify-content:space-between;align-items:flex-start;text-align:right}
  table.tabel td::before{content:attr(data-label);font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);text-align:left;flex:0 0 42%}
  table.tabel td:empty{display:none}
  table.tabel td.num{text-align:right}
  table.tabel td[data-label=""]::before{content:""}
}

/* ---------------- bentuk & formulir ---------------- */
.form-grid{display:grid;gap:12px}
@media (min-width:720px){.form-grid.dua{grid-template-columns:repeat(2,1fr)}.form-grid.tiga{grid-template-columns:repeat(3,1fr)}}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field > label{font-size:.76rem;font-weight:700;color:#28483C}
.field > label .wajib{color:var(--merah)}
.field small{font-size:.72rem}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=time],input[type=month],input[type=tel],input[type=url],input[type=search],select,textarea{
  width:100%;padding:11px 12px;border:1px solid var(--garis);border-radius:11px;background:#fff;font:inherit;font-size:16px;color:var(--tinta);min-height:44px;
}
textarea{min-height:92px;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:2px solid #9ED4B8;border-color:var(--hijau);outline-offset:0}
input[type=file]{font-size:.82rem;padding:9px;border:1px dashed var(--garis);border-radius:11px;background:#FBFDFB;width:100%}
input[type=checkbox],input[type=radio]{width:18px;height:18px;accent-color:var(--hijau);vertical-align:-3px}
label.cek{display:flex;gap:9px;align-items:flex-start;font-size:.84rem;padding:8px 0;cursor:pointer}
.seg{display:inline-flex;border:1px solid var(--garis);border-radius:11px;overflow:hidden;background:#F7FAF8;flex-wrap:wrap}
.seg label{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;font-size:.82rem;font-weight:600;cursor:pointer;color:var(--mut)}
.seg input{display:none}
.seg input:checked + span{color:#fff}
.seg label:has(input:checked){background:var(--hijau);color:#fff}
.form-aksi{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--garis-2)}
.galat{background:var(--merah-lembut);color:#7A1C2A;border:1px solid #F5C6C0;padding:10px 12px;border-radius:11px;font-size:.83rem;margin-bottom:12px}
.info-box{background:var(--hijau-lembut);border:1px solid #CBE5D6;color:#1F4A38;padding:10px 12px;border-radius:11px;font-size:.82rem}
.peringatan{background:var(--kuning-lembut);border:1px solid #F0DFA8;color:#6C4A00;padding:10px 12px;border-radius:11px;font-size:.82rem}

/* ---------------- flash, demo, kosong ---------------- */
.flash{display:flex;align-items:flex-start;gap:9px;padding:11px 13px;border-radius:12px;margin-bottom:12px;font-size:.85rem;font-weight:550;border:1px solid}
.flash .ikon{width:18px;height:18px;margin-top:1px}
.flash-ok{background:#EAF7F0;border-color:#BFE3CE;color:#14563B}
.flash-err{background:var(--merah-lembut);border-color:#F3C6C1;color:#7A1C2A}
.pita-demo{display:flex;gap:8px;align-items:flex-start;background:#FFF9E8;border:1px dashed #E7D08A;color:#6C4A00;border-radius:12px;padding:9px 12px;font-size:.76rem;margin-bottom:12px}
.pita-demo .ikon{width:16px;height:16px;margin-top:1px}
.kosong{text-align:center;padding:26px 14px;color:var(--mut)}
.kosong .ikon{width:34px;height:34px;color:#9DB4A8;margin-bottom:6px}
.kosong p{margin:0;font-size:.85rem}
.ikon-besar{width:64px;height:64px;border-radius:20px;background:var(--hijau-lembut);color:var(--hijau);display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.ikon-besar .ikon{width:30px;height:30px}
.kartu-tolak{max-width:520px;margin:40px auto;text-align:center}

/* ---------------- badge ---------------- */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:99px;font-size:.7rem;font-weight:700;white-space:nowrap;line-height:1.45}
.badge-hijau{background:#E4F4EB;color:#0B6B3F}
.badge-kuning{background:var(--kuning-lembut);color:var(--kuning)}
.badge-merah{background:var(--merah-lembut);color:#93261A}
.badge-biru{background:var(--biru-lembut);color:var(--biru)}
.badge-mut{background:#EEF3F0;color:#4F665B}

/* ---------------- daftar ---------------- */
.list{display:flex;flex-direction:column;gap:0}
.list-item{display:flex;gap:11px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--garis-2);min-width:0}
.list-item:last-child{border-bottom:0}
.list-item .li-utama{flex:1;min-width:0}
.list-item strong{display:block;font-size:.88rem;font-weight:650;line-height:1.35}
.list-item small{display:block;font-size:.75rem;color:var(--mut);margin-top:1px}
.list-item .li-kanan{text-align:right;flex:0 0 auto;font-size:.8rem;font-weight:650}
.list-main{display:flex;gap:11px;align-items:flex-start;flex:1;min-width:0;color:inherit}
.list-ikon{width:38px;height:38px;border-radius:11px;background:var(--hijau-lembut);color:var(--hijau);display:flex;align-items:center;justify-content:center;flex:0 0 38px}
.list-ikon .ikon{width:19px;height:19px}

/* ---------------- keuangan ---------------- */
.uang{font-variant-numeric:tabular-nums;font-weight:700}
.uang.masuk{color:var(--hijau)}
.uang.keluar{color:var(--merah)}
.legenda{display:flex;gap:14px;flex-wrap:wrap;font-size:.74rem;color:var(--mut);margin-top:6px}
.legenda span{display:inline-flex;align-items:center;gap:6px}
.legenda i{width:10px;height:10px;border-radius:3px;display:inline-block}
.grafik-wrap{width:100%;overflow-x:auto}
.grafik{width:100%;height:auto;min-width:300px;display:block}
.bar{height:8px;border-radius:99px;background:#EDF3EF;overflow:hidden;margin:6px 0 3px}
.bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--hijau),var(--hijau-2))}
.bar.kuning span{background:linear-gradient(90deg,#D9A400,#F2C33C)}
.bar.merah span{background:linear-gradient(90deg,#C0453B,#E0705F)}

/* ---------------- filter & tab ---------------- */
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.filter-bar .field{flex:1 1 150px;min-width:130px}
.filter-bar .field.cari{flex:2 1 220px}
.tabs{display:flex;gap:6px;overflow-x:auto;padding:4px 0 8px;scrollbar-width:none;margin-bottom:6px}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:8px 13px;border-radius:99px;background:#fff;border:1px solid var(--garis);font-size:.8rem;font-weight:650;color:var(--mut);white-space:nowrap}
.tab.aktif{background:var(--hijau);border-color:var(--hijau);color:#fff}
.tab .angka{background:rgba(0,0,0,.08);border-radius:99px;padding:0 6px;margin-left:5px;font-size:.7rem}
.tab.aktif .angka{background:rgba(255,255,255,.25)}
.paginasi{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:14px;font-size:.8rem}

/* ---------------- peta ---------------- */
#peta{height:min(64vh,520px);width:100%;border-radius:16px;border:1px solid var(--garis);background:#E8F1EC;z-index:1}
.peta-bungkus{position:relative}
.peta-legend{display:grid;gap:8px;grid-template-columns:repeat(2,1fr);margin-top:12px}
@media (min-width:760px){.peta-legend{grid-template-columns:repeat(4,1fr)}}
.kartu-peta{min-width:230px;max-width:260px}
.kartu-peta img{width:100%;height:110px;object-fit:cover;border-radius:10px;background:#EDF3EF;margin-bottom:7px}
.kartu-peta strong{display:block;font-size:.9rem}
.kartu-peta small{display:block;font-size:.74rem;color:var(--mut)}
.kartu-peta .btn{margin-top:7px;width:100%}
.leaflet-popup-content{margin:10px 12px;font-family:Inter,system-ui,sans-serif}
.leaflet-container{font-family:Inter,system-ui,sans-serif}
.pin-label{background:var(--hijau-tua);color:#fff;border:0;border-radius:8px;padding:1px 6px;font-size:10px;font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.pin-label::before{display:none}

/* ---------------- galeri & berita ---------------- */
.galeri{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){.galeri{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.galeri{grid-template-columns:repeat(4,1fr)}}
.galeri-item{background:#fff;border:1px solid var(--garis);border-radius:14px;overflow:hidden;box-shadow:var(--bayang-kecil);color:inherit;min-width:0}
.galeri-foto{aspect-ratio:4/3;background:linear-gradient(140deg,#D8E9DF,#BBD5C6);display:flex;align-items:center;justify-content:center;color:#4E7A66;overflow:hidden}
.galeri-foto img{width:100%;height:100%;object-fit:cover;display:block}
.galeri-foto .ikon{width:30px;height:30px}
.galeri-isi{padding:10px 11px}
.galeri-isi strong{display:block;font-size:.82rem;line-height:1.3}
.galeri-isi small{display:block;font-size:.71rem;color:var(--mut);margin-top:2px}
.berita-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--garis-2);color:inherit}
.berita-item:last-child{border-bottom:0}
.berita-foto{width:92px;height:70px;border-radius:11px;object-fit:cover;background:linear-gradient(140deg,#D8E9DF,#BBD5C6);flex:0 0 92px;display:flex;align-items:center;justify-content:center;color:#4E7A66;overflow:hidden}
.berita-foto img{width:100%;height:100%;object-fit:cover}
.berita-isi{min-width:0;flex:1}
.berita-isi strong{display:block;font-size:.88rem;line-height:1.35}
.berita-isi small{display:block;font-size:.72rem;color:var(--mut);margin-top:3px}
.artikel{font-size:.93rem;line-height:1.7}
.artikel p{margin:0 0 12px}
.artikel h2,.artikel h3{margin-top:18px}

/* ---------------- struktur / bagan ---------------- */
.bagan{overflow-x:auto;padding:10px 0}
.bagan-dalam{min-width:640px;display:flex;flex-direction:column;align-items:center;gap:0}
.bagan-baris{display:flex;gap:14px;justify-content:center;flex-wrap:nowrap;position:relative}
.bagan-garis{width:1px;height:18px;background:#BFD6C8}
.bagan-node{background:#fff;border:1px solid var(--garis);border-radius:13px;padding:10px 12px;min-width:150px;max-width:190px;text-align:center;box-shadow:var(--bayang-kecil)}
.bagan-node strong{display:block;font-size:.8rem;line-height:1.3}
.bagan-node small{display:block;font-size:.68rem;color:var(--mut);margin-top:2px}
.bagan-node.inti{background:linear-gradient(135deg,var(--hijau-tua),var(--hijau));color:#fff;border:0;min-width:210px}
.bagan-node.inti small{color:rgba(255,255,255,.8)}
.bagan-node.bidang{background:var(--hijau-lembut);border-color:#C7E1D2}
.bagan-node img{width:46px;height:46px;border-radius:50%;object-fit:cover;margin:0 auto 5px;display:block;background:#EAF2EC}
.bagan-konektor{width:70%;height:1px;background:#BFD6C8;margin:0 auto}

/* ---------------- portal publik ---------------- */
.publik{background:var(--bg);min-height:100vh}
.publik-nav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--garis)}
.publik-nav-dalam{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:10px 16px}
.publik-nav img{width:40px;height:40px;object-fit:contain}
.publik-nav .nama{flex:1;min-width:0}
.publik-nav .nama strong{display:block;font-size:.94rem;line-height:1.2}
.publik-nav .nama small{display:block;font-size:.68rem;color:var(--mut)}
.publik-nav a.masuk{display:inline-flex;align-items:center;gap:6px;background:var(--hijau);color:#fff;border-radius:11px;padding:9px 13px;font-size:.8rem;font-weight:650}
.publik-menu{display:none;gap:4px}
.publik-menu a{padding:8px 10px;border-radius:9px;font-size:.82rem;font-weight:600;color:var(--mut)}
.publik-menu a:hover{background:var(--hijau-lembut);color:var(--hijau)}
@media (min-width:860px){.publik-menu{display:flex}}
.publik-wadah{max-width:1120px;margin:0 auto;padding:18px 16px 60px}
.publik-hero{background:linear-gradient(130deg,var(--hijau-tua),var(--hijau));color:#fff;border-radius:24px;padding:26px 22px;margin-bottom:20px;position:relative;overflow:hidden}
.publik-hero::after{content:"";position:absolute;right:-80px;top:-90px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.08)}
.publik-hero h1{font-size:1.5rem;margin-bottom:6px}
.publik-hero p{color:rgba(255,255,255,.88);max-width:640px;font-size:.9rem}
.publik-seksi{margin:26px 0}
.publik-seksi > h2{font-size:1.1rem;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.publik-kaki{background:var(--hijau-tua);color:rgba(255,255,255,.8);padding:26px 16px;font-size:.8rem;text-align:center}

/* ---------------- login ---------------- */
.login-bungkus{min-height:100vh;display:grid;grid-template-columns:1fr;background:var(--bg)}
@media (min-width:920px){.login-bungkus{grid-template-columns:1.05fr .95fr}}
.login-kiri{background:linear-gradient(150deg,#00594A,var(--hijau-tua) 55%,#002E27);color:#fff;padding:32px 26px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.login-kiri::after{content:"";position:absolute;right:-120px;bottom:-120px;width:340px;height:340px;border-radius:50%;background:rgba(255,255,255,.06)}
.login-kiri .merek{display:flex;align-items:center;gap:12px;position:relative}
.login-kiri .merek img{width:56px;height:56px;object-fit:contain;background:#fff;border-radius:14px;padding:4px}
.login-kiri h1{font-size:1.35rem;margin:0}
.login-kiri h1 small{display:block;font-size:.72rem;font-weight:500;color:rgba(255,255,255,.65);letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
.login-kiri .sorot{margin:34px 0;position:relative}
.login-kiri .sorot h2{font-size:1.5rem;line-height:1.3;margin-bottom:8px}
.login-kiri .sorot p{color:rgba(255,255,255,.8);font-size:.9rem;max-width:420px}
.login-kiri ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:9px;font-size:.85rem;color:rgba(255,255,255,.86);position:relative}
.login-kiri li{display:flex;gap:9px;align-items:flex-start}
.login-kiri li .ikon{width:17px;height:17px;color:#9BE3BF;margin-top:2px;flex:0 0 17px}
.login-kaki{font-size:.74rem;color:rgba(255,255,255,.55);position:relative}
.login-kanan{display:flex;align-items:center;justify-content:center;padding:30px 20px}
.login-kartu{width:100%;max-width:400px}
.login-kartu .logo-hp{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.login-kartu .logo-hp img{width:44px;height:44px;object-fit:contain}
.login-kartu .logo-hp strong{font-size:1rem;display:block}
.login-kartu .logo-hp small{font-size:.7rem;color:var(--mut)}
.login-kartu h2{font-size:1.2rem}
.login-kartu p.sub{font-size:.83rem;color:var(--mut);margin-bottom:16px}
.login-kartu .field{margin-bottom:12px}
.pw-bungkus{position:relative}
.pw-bungkus input{padding-right:52px}
.pw-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:42px;height:38px;border:0;background:none;color:var(--mut);cursor:pointer;display:flex;align-items:center;justify-content:center}
.login-info{margin-top:18px;background:#fff;border:1px dashed var(--garis);border-radius:12px;padding:10px 12px;font-size:.75rem;color:var(--mut)}
.login-info strong{color:var(--tinta)}
@media (min-width:920px){.login-kartu .logo-hp{display:none}}
@media (max-width:919px){.login-kiri{padding:22px 20px}.login-kiri .sorot{margin:18px 0}.login-kiri .sorot h2{font-size:1.2rem}.login-kiri ul{display:none}}

/* ---------------- modal ---------------- */
.modal-latar{position:fixed;inset:0;z-index:90;background:rgba(7,32,25,.5);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:18px;animation:muncul .16s ease}
.modal-latar[hidden]{display:none}
@keyframes muncul{from{opacity:0}to{opacity:1}}
.modal-kartu{background:#fff;border-radius:18px;max-width:420px;width:100%;padding:20px;box-shadow:var(--bayang-naik);max-height:90vh;overflow:auto}
.modal-kartu h3{margin-bottom:6px}
.modal-kartu p{font-size:.86rem;color:var(--mut)}
.modal-aksi{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.modal-ikon{width:46px;height:46px;border-radius:14px;background:var(--merah-lembut);color:var(--merah);display:flex;align-items:center;justify-content:center;margin-bottom:10px}

/* ---------------- proses / loading ---------------- */
.tirai-proses{position:fixed;inset:0;z-index:95;background:rgba(255,255,255,.72);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;gap:10px;font-size:.88rem;font-weight:600;color:var(--hijau-tua)}
.tirai-proses.tampil{display:flex}
.spinner{width:20px;height:20px;border:2.5px solid #CFE3D6;border-top-color:var(--hijau);border-radius:50%;animation:putar .7s linear infinite;display:inline-block}
@keyframes putar{to{transform:rotate(360deg)}}
.btn.loading{opacity:.8;pointer-events:none}

/* ---------------- foto profil ---------------- */
.profil-head{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.profil-foto{width:74px;height:74px;border-radius:20px;overflow:hidden;background:linear-gradient(150deg,var(--hijau),var(--hijau-tua));color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:700;flex:0 0 74px}
.profil-foto img{width:100%;height:100%;object-fit:cover}
.profil-foto-pratinjau{display:flex;gap:10px;align-items:center;margin-top:8px}
.profil-foto-pratinjau img{width:56px;height:56px;border-radius:14px;object-fit:cover;border:1px solid var(--garis)}

/* ---------------- cetak ---------------- */
.mode-cetak .sidebar,.mode-cetak .topbar,.mode-cetak .bottomnav,.mode-cetak .footer,.mode-cetak .pita-demo,.mode-cetak .noprint{display:none!important}
.mode-cetak .kerangka{margin:0}
.mode-cetak .isi{max-width:none;padding:0}
@media print{
  .noprint,.sidebar,.topbar,.bottomnav,.footer,.pita-demo{display:none!important}
  body{background:#fff;font-size:12px}
  .kerangka{margin:0!important}
  .isi{max-width:none;padding:0!important}
  .card{box-shadow:none;border-color:#ccc;break-inside:avoid}
  table.tabel{font-size:11px;min-width:0}
  table.tabel th,table.tabel td{padding:5px 6px}
  @page{size:A4;margin:12mm}
}

/* ---------------- editor berita ---------------- */
.editor-toolbar{display:flex;gap:4px;flex-wrap:wrap;border:1px solid var(--garis);border-bottom:0;border-radius:11px 11px 0 0;padding:6px;background:#F5FAF7}
.editor-toolbar button{min-width:34px;height:32px;border:1px solid var(--garis);background:#fff;border-radius:8px;cursor:pointer;font:inherit;font-size:.82rem;color:var(--tinta)}
.editor-toolbar button:hover{background:var(--hijau-lembut);border-color:#BFDCCB}
.editor{min-height:230px;border:1px solid var(--garis);border-radius:0 0 11px 11px;padding:12px;background:#fff;font-size:.93rem;line-height:1.7;overflow:auto}
.editor:focus{outline:2px solid #9ED4B8;border-color:var(--hijau)}
.editor p{margin:0 0 10px}
.editor h2,.editor h3{margin:12px 0 6px}
.editor blockquote{margin:8px 0;padding:6px 12px;border-left:3px solid var(--hijau-muda);color:var(--mut)}

/* ---------------- kalender ---------------- */
.kalender{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.kalender-kepala{text-align:center;font-size:.64rem;font-weight:800;text-transform:uppercase;color:var(--mut);padding:4px 0;letter-spacing:.05em}
.kalender-sel{min-height:74px;border:1px solid var(--garis-2);border-radius:9px;padding:3px;background:#fff;overflow:hidden}
.kalender-sel.kosong-sel{background:#FAFCFA;border-style:dashed}
.kalender-sel.hari-ini{border-color:var(--hijau);box-shadow:inset 0 0 0 1px var(--hijau)}
.kalender-sel.libur{background:#FFF9F4}
.kalender-angka{font-size:.68rem;font-weight:700;color:var(--mut);display:block;padding:1px 2px}
.kalender-chip{display:block;font-size:.58rem;line-height:1.3;background:var(--hijau-lembut);color:var(--hijau-tua);border-radius:5px;padding:2px 3px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kalender-chip.selesai{background:#EEF1EF;color:#5B7166}
@media (min-width:720px){.kalender-sel{min-height:98px}.kalender-chip{font-size:.66rem;padding:3px 4px}}

/* ---------------- util ---------------- */
.kartu-grid-rapat{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.teks-tengah{text-align:center}
.aksen-kiri{border-left:4px solid var(--hijau)}
.wrap-any{overflow-wrap:anywhere}

/* =========================================================================
   DESIGN SYSTEM v2 — token spacing/typography, tema terang & gelap,
   scrollbar kustom, loading page, transisi halaman, toggle tema.
   Semua komponen baru WAJIB memakai var(--...) di bawah ini.
   ========================================================================= */
:root{
  /* spacing 4px base */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-7:28px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
  --jarak-kartu:16px; --pad-kartu:16px; --jarak-seksi:24px;
  /* tipografi */
  --font-ui:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-serif:"Times New Roman","Liberation Serif",Georgia,serif;
  --fs-2xs:.66rem; --fs-xs:.72rem; --fs-sm:.8rem; --fs-md:.88rem; --fs-base:1rem;
  --fs-lg:1.15rem; --fs-xl:1.35rem; --fs-2xl:1.7rem;
  --berat-normal:400; --berat-sedang:600; --berat-tebal:700;
  --lacak-label:.07em;
  /* radius & bayangan */
  --r-xs:8px; --r-sm:11px; --r-md:14px; --r-lg:18px; --r-xl:22px; --r-penuh:999px;
  --bayang-1:0 1px 3px rgba(0,45,34,.06);
  --bayang-2:0 8px 22px rgba(0,45,34,.08);
  --bayang-3:0 18px 40px rgba(0,45,34,.16);
  --cincin-fokus:0 0 0 3px rgba(8,116,67,.22);
  --durasi-cepat:.16s; --durasi-sedang:.24s; --durasi-lambat:.35s;
  --easing:cubic-bezier(.4,.14,.3,1);
  --aksen:#087443; --aksen-lembut:#EDF6F1; --emas:#C9A227;
  color-scheme:light;
}

/* ---------------- tema gelap ---------------- */
html[data-tema="gelap"]{
  color-scheme:dark;
  --hijau-tua:#0E7A5C;
  --hijau-tua-2:#0A5C46;
  --hijau:#25A46C;
  --hijau-2:#31B77B;
  --hijau-muda:#1B3A30;
  --hijau-lembut:#152F26;
  --bg:#0B1713;
  --kartu:#12211C;
  --garis:#23372F;
  --garis-2:#1B2C25;
  --tinta:#E7F1EB;
  --mut:#9CB3A8;
  --merah:#F08379;
  --merah-lembut:#33191A;
  --kuning:#E9C46A;
  --kuning-lembut:#2C2413;
  --biru:#8FBAF0;
  --biru-lembut:#152634;
  --bayang:0 10px 26px rgba(0,0,0,.42);
  --bayang-kecil:0 2px 10px rgba(0,0,0,.34);
  --bayang-naik:0 20px 44px rgba(0,0,0,.55);
  --aksen:#31B77B; --aksen-lembut:#152F26;
  --bayang-1:0 1px 3px rgba(0,0,0,.4);
  --bayang-2:0 8px 22px rgba(0,0,0,.45);
  --bayang-3:0 18px 40px rgba(0,0,0,.55);
  --cincin-fokus:0 0 0 3px rgba(49,183,123,.3);
}
html[data-tema="gelap"] body{background:var(--bg);color:var(--tinta)}
html[data-tema="gelap"] .topbar,
html[data-tema="gelap"] .bottomnav,
html[data-tema="gelap"] .lembar-kepala,
html[data-tema="gelap"] .publik-nav{background:rgba(18,33,28,.94);border-color:var(--garis)}
html[data-tema="gelap"] .card,
html[data-tema="gelap"] .stat,
html[data-tema="gelap"] .lembar-item,
html[data-tema="gelap"] .modal-kartu,
html[data-tema="gelap"] .tab,
html[data-tema="gelap"] .tabel-wrap,
html[data-tema="gelap"] .galeri-item,
html[data-tema="gelap"] .login-info,
html[data-tema="gelap"] .editor,
html[data-tema="gelap"] .kalender-sel{background:var(--kartu);border-color:var(--garis);color:var(--tinta)}
html[data-tema="gelap"] .btn-ikon{background:#1B2E27;color:#DCEAE3}
html[data-tema="gelap"] .btn-ikon:active{background:#223A31}
html[data-tema="gelap"] .btn-ghost{background:#16261F;border-color:var(--garis);color:var(--tinta)}
html[data-tema="gelap"] input,html[data-tema="gelap"] select,html[data-tema="gelap"] textarea{
  background:#0F1E19;border-color:var(--garis);color:var(--tinta)}
html[data-tema="gelap"] input[type=file]{background:#101F1A}
html[data-tema="gelap"] input:focus,html[data-tema="gelap"] select:focus,html[data-tema="gelap"] textarea:focus{
  outline:2px solid rgba(49,183,123,.5);border-color:var(--hijau)}
html[data-tema="gelap"] table.tabel th{background:#152720;color:var(--mut);border-color:var(--garis)}
html[data-tema="gelap"] table.tabel td{border-color:var(--garis-2)}
html[data-tema="gelap"] table.tabel tfoot td{background:#152720}
html[data-tema="gelap"] table.tabel tr.baris-batal td{opacity:.5}
html[data-tema="gelap"] .seg{background:#101F1A;border-color:var(--garis)}
html[data-tema="gelap"] .seg label{color:var(--mut)}
html[data-tema="gelap"] .seg label:has(input:checked){background:var(--hijau);color:#04140F}
html[data-tema="gelap"] .sidebar{background:linear-gradient(180deg,#0C2C22,#0A1F19 55%,#081713)}
html[data-tema="gelap"] .sidebar-item.aktif{background:#173A2D;color:#EAF6EF;box-shadow:none;border:1px solid #24513F}
html[data-tema="gelap"] .sidebar-item.aktif .si-ikon{background:#1F4A39}
html[data-tema="gelap"] .badge-mut{background:#1B2E27;color:#A9BFB4}
html[data-tema="gelap"] .badge-hijau{background:#153B2C;color:#7FE0AE}
html[data-tema="gelap"] .badge-kuning{background:#2C2413;color:#EFCB79}
html[data-tema="gelap"] .badge-merah{background:#3A1B1A;color:#F4A199}
html[data-tema="gelap"] .badge-biru{background:#152634;color:#9CC6F5}
html[data-tema="gelap"] .flash-ok{background:#12322A;border-color:#1F5B45;color:#8FE7BC}
html[data-tema="gelap"] .flash-err{background:#33191A;border-color:#5E2A28;color:#F6A9A2}
html[data-tema="gelap"] .info-box{background:#12302A;border-color:#1E5443;color:#A7DCC5}
html[data-tema="gelap"] .peringatan{background:#2C2413;border-color:#57481F;color:#EBCB84}
html[data-tema="gelap"] .galat{background:#33191A;border-color:#5E2A28;color:#F6A9A2}
html[data-tema="gelap"] .pita-demo{background:#2A2413;border-color:#5A4A1F;color:#E5C97F}
html[data-tema="gelap"] .stat.gelap{background:linear-gradient(135deg,#12513F,#1B7A5C)}
html[data-tema="gelap"] .hero{background:linear-gradient(130deg,#0F4D3C 0%,#12774F 62%,#17975F 100%)}
html[data-tema="gelap"] .btn{color:#04140F}
html[data-tema="gelap"] .btn-ghost,html[data-tema="gelap"] .btn-kuning{color:var(--tinta)}
html[data-tema="gelap"] .link-aksi{color:var(--hijau)}
html[data-tema="gelap"] .editor-toolbar{background:#152720;border-color:var(--garis)}
html[data-tema="gelap"] .editor-toolbar button{background:#1B2E27;border-color:var(--garis);color:var(--tinta)}
html[data-tema="gelap"] .laci-profil,html[data-tema="gelap"] .select2{background:#101F1A}
html[data-tema="gelap"] .bar{background:#1E332B}
html[data-tema="gelap"] .galeri-foto{background:linear-gradient(140deg,#173A2D,#12281F)}
html[data-tema="gelap"] .publik-hero{background:linear-gradient(130deg,#0F4D3C,#12774F)}
html[data-tema="gelap"] .publik-kaki{background:#081713}
html[data-tema="gelap"] .login-bungkus{background:var(--bg)}
html[data-tema="gelap"] .login-kanan{background:var(--bg)}
html[data-tema="gelap"] .login-info{border-color:var(--garis)}

/* ---------------- scrollbar kustom (tipis, sesuai tema) ---------------- */
*{scrollbar-width:thin;scrollbar-color:var(--hijau) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--hijau),var(--hijau-tua));border-radius:99px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--hijau-tua);background-clip:content-box}
html[data-tema="gelap"] *::-webkit-scrollbar-thumb{background:#2C5C49;background-clip:content-box}
.grid-auto::-webkit-scrollbar,.tabs::-webkit-scrollbar,.sidebar::-webkit-scrollbar{height:0;width:0}

/* ---------------- toggle tema (switch matahari–bulan) ---------------- */
.tema-tombol{
  position:relative;width:56px;height:30px;border-radius:var(--r-penuh);border:1px solid var(--garis);
  background:linear-gradient(120deg,#EAF1FA,#DCEBF7);cursor:pointer;padding:0;flex:0 0 56px;
  transition:background var(--durasi-sedang) var(--easing),border-color var(--durasi-sedang);
  overflow:hidden;
}
.tema-tombol .tema-bola{
  position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;
  background:linear-gradient(160deg,#FFD569,#F4A73B);display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.22);
  transition:transform var(--durasi-lambat) var(--easing),background var(--durasi-sedang);
}
.tema-tombol .tema-bola .ikon{width:14px;height:14px;color:#7A4B00;stroke-width:2.2}
.tema-tombol .ikon-bulan{display:none}
html[data-tema="gelap"] .tema-tombol{background:linear-gradient(120deg,#14263A,#0E1B2A);border-color:#2A4356}
html[data-tema="gelap"] .tema-tombol .tema-bola{transform:translateX(26px);background:linear-gradient(160deg,#BBD2FF,#7C9BE0)}
html[data-tema="gelap"] .tema-tombol .tema-bola .ikon{color:#12233A}
html[data-tema="gelap"] .tema-tombol .ikon-matahari{display:none}
html[data-tema="gelap"] .tema-tombol .ikon-bulan{display:inline-block}
.tema-tombol:active .tema-bola{width:27px}
.tema-tombol:focus-visible{outline:none;box-shadow:var(--cincin-fokus)}

/* ---------------- loading page (splash) ---------------- */
.app-loader{
  position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:radial-gradient(circle at 50% 30%,#0A6A50,#004D40 55%,#00312A 100%);
  color:#fff;transition:opacity .45s ease,visibility .45s ease;
}
.app-loader.selesai{opacity:0;visibility:hidden;pointer-events:none}
.app-loader .loader-logo{
  width:88px;height:88px;border-radius:26px;background:#fff;padding:8px;object-fit:contain;
  box-shadow:0 18px 44px rgba(0,0,0,.35);
  animation:denyut 1.5s ease-in-out infinite;
}
@keyframes denyut{
  0%,100%{transform:scale(1);box-shadow:0 18px 44px rgba(0,0,0,.32)}
  50%{transform:scale(1.075);box-shadow:0 22px 54px rgba(0,0,0,.42)}
}
.app-loader strong{font-size:1.05rem;letter-spacing:.03em;text-align:center}
.app-loader small{font-size:.72rem;color:rgba(255,255,255,.7);text-align:center;max-width:80%;line-height:1.5}
.app-loader .loader-bar{width:132px;height:4px;border-radius:99px;background:rgba(255,255,255,.2);overflow:hidden;margin-top:4px}
.app-loader .loader-bar i{display:block;height:100%;width:40%;border-radius:99px;background:#fff;animation:loaderJalan 1.15s ease-in-out infinite}
@keyframes loaderJalan{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}
.app-loader .loader-titik{display:flex;gap:6px;margin-top:2px}
.app-loader .loader-titik span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);animation:titikPulse 1.1s ease-in-out infinite}
.app-loader .loader-titik span:nth-child(2){animation-delay:.16s}
.app-loader .loader-titik span:nth-child(3){animation-delay:.32s}
@keyframes titikPulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}

/* ---------------- transisi halaman ---------------- */
@keyframes halamanMasuk{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.isi,.publik-wadah,.login-kartu{animation:halamanMasuk .3s var(--easing) both}
body.halaman-keluar .isi,body.halaman-keluar .publik-wadah{
  opacity:.25;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease;
}
.card,.stat,.galeri-item{transition:transform var(--durasi-cepat) var(--easing),box-shadow var(--durasi-cepat),border-color var(--durasi-cepat)}
@media (hover:hover){
  .card.hover-naik:hover,.galeri-item:hover{transform:translateY(-2px);box-shadow:var(--bayang-2);border-color:#BEDCCB}
  html[data-tema="gelap"] .card.hover-naik:hover,html[data-tema="gelap"] .galeri-item:hover{border-color:#2C5C49}
}
.btn:hover{filter:brightness(1.05)}
.btn-ghost:hover{background:var(--hijau-lembut)}
.loading-aksi{position:relative;pointer-events:none;opacity:.85}
.loading-aksi::after{
  content:"";width:14px;height:14px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;
  display:inline-block;animation:putar .7s linear infinite;margin-left:6px;
}
.btn-ghost.loading-aksi::after{border-color:var(--garis);border-top-color:var(--hijau)}

/* ---------------- util design system ---------------- */
.u-tumpuk-2{display:flex;flex-direction:column;gap:var(--sp-2)}
.u-tumpuk-3{display:flex;flex-direction:column;gap:var(--sp-3)}
.u-baris{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.u-tengah{text-align:center}
.u-kanan{text-align:right}
.u-sembunyi{display:none!important}
.u-teks-xs{font-size:var(--fs-xs)}
.u-teks-sm{font-size:var(--fs-sm)}
.u-muted{color:var(--mut)}
.u-penuh{width:100%}
.u-putus{overflow-wrap:anywhere}
.u-kartu{background:var(--kartu);border:1px solid var(--garis);border-radius:var(--r-lg);padding:var(--pad-kartu);box-shadow:var(--bayang-1)}
.u-panel{background:var(--hijau-lembut);border:1px solid var(--garis);border-radius:var(--r-md);padding:var(--sp-3)}
.u-label{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:var(--lacak-label);font-weight:800;color:var(--mut)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .app-loader .loader-logo{animation:none}
}
/* saat mode cetak / dokumen, jangan pernah pakai latar gelap */
@media print{
  html[data-tema="gelap"] body{background:#fff!important;color:#000!important}
}

/* ---------------- donasi ---------------- */
.rekening-kartu{border:1px dashed var(--garis);border-radius:var(--r-md);padding:12px;background:var(--hijau-lembut)}
.rekening-baris{display:flex;justify-content:space-between;gap:12px;font-size:.85rem;padding:3px 0;flex-wrap:wrap}
.rekening-baris strong{text-align:right;word-break:break-word}
.rekening-nomor{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.02rem;letter-spacing:.04em}
.rekening-qris{margin-top:10px;text-align:center}
.rekening-qris img{width:132px;height:132px;object-fit:contain;background:#fff;border-radius:10px;padding:6px}
.rekening-qris small{display:block;font-size:.7rem;color:var(--mut);margin-top:4px}

/* ---------------- program & donasi (dipakai donasi.php) ---------------- */
.program-baris,.donasi-baris{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--garis);border-radius:var(--r-md);background:var(--kartu);flex-wrap:wrap}
.program-foto{width:64px;height:64px;border-radius:12px;object-fit:cover;flex:0 0 64px;background:var(--hijau-lembut)}
.program-foto-kosong{display:flex;align-items:center;justify-content:center;color:var(--hijau)}
.program-foto-kosong .ikon{width:26px;height:26px}
.program-isi,.donasi-isi{flex:1;min-width:0}
.donasi-aksi{display:flex;gap:10px;flex-wrap:wrap;flex:0 0 auto}
@media (max-width:600px){.program-foto{width:52px;height:52px;flex:0 0 52px}.donasi-aksi{width:100%}}

/* ---------------- formulir pendaftaran ---------------- */
.formulir-kartu{display:flex;flex-direction:column;gap:8px}
.formulir-baris{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--garis);border-radius:var(--r-md);background:var(--kartu);flex-wrap:wrap}
.formulir-isi{flex:1;min-width:0}
.field-baris{display:grid;grid-template-columns:1fr 150px 90px 40px;gap:8px;align-items:end;padding:8px 0;border-bottom:1px dashed var(--garis)}
@media (max-width:620px){.field-baris{grid-template-columns:1fr 1fr;}}

/* ---------------- kartu program donasi (publik) ---------------- */
.program-publik{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--garis);border-radius:var(--r-md);background:var(--kartu);color:inherit}
.program-publik img,.program-publik-kosong{width:68px;height:68px;border-radius:12px;object-fit:cover;flex:0 0 68px;background:var(--hijau-lembut)}
.program-publik-kosong{display:flex;align-items:center;justify-content:center;color:var(--hijau)}
.program-publik-isi{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.program-publik-isi strong{font-size:.95rem}
.program-publik-isi small{color:var(--mut);font-size:.78rem}
.program-publik > .ikon{color:var(--mut);width:18px;height:18px}
@media (hover:hover){.program-publik:hover{border-color:#BEDCCB;transform:translateY(-1px)}}