:root{
  --hijau:#0f4c3a;
  --hijau-2:#166a51;
  --hijau-3:#e8f2ee;
  --hijau-4:#0a3729;
  --tanah:#8a5a2b;
  --tanah-2:#f5efe6;
  --teks:#16211c;
  --teks-2:#5b6b63;
  --teks-3:#8b9a93;
  --garis:#dfe6e2;
  --garis-2:#eef2f0;
  --bg:#f6f8f7;
  --putih:#fff;
  --merah:#a5281f;
  --merah-bg:#fdecea;
  --kuning:#8a6a12;
  --radius:14px;
  --radius-sm:10px;
  --sp:8px;
  --shadow:0 1px 2px rgba(16,32,26,.06),0 8px 24px rgba(16,32,26,.05);
  --shadow-lift:0 2px 4px rgba(16,32,26,.05),0 12px 32px rgba(16,32,26,.09);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--teks);background:var(--bg);line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3{margin:0;line-height:1.2;letter-spacing:-.021em;font-weight:750}
h1{font-size:clamp(28px,7.2vw,42px)}
h2{font-size:clamp(19px,2.4vw,22px)}
h3{font-size:16px}
p{margin:0}
small{font-size:12px;color:var(--teks-2)}
label{display:block;font-size:13px;font-weight:600;color:var(--teks-2);margin-bottom:16px}
input,select,textarea{
  display:block;width:100%;margin-top:6px;padding:12px 13px;
  font-size:15px;font-family:inherit;color:var(--teks);
  background:var(--putih);border:1.5px solid var(--garis);border-radius:var(--radius-sm);
  transition:border-color .15s ease,box-shadow .15s ease;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--hijau-2);box-shadow:0 0 0 3px var(--hijau-3);
}

/* ---------- tombol ---------- */
.btn-solid,.btn-line{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:var(--radius-sm);font-size:15px;font-weight:650;
  cursor:pointer;text-decoration:none;border:1.5px solid transparent;
  transition:background .16s ease,border-color .16s ease,transform .1s ease,box-shadow .16s ease;
  min-height:48px;font-family:inherit;
}
.btn-solid{background:var(--hijau);color:#fff;box-shadow:0 1px 2px rgba(15,76,58,.24)}
.btn-solid:hover{background:var(--hijau-2);box-shadow:0 4px 12px rgba(15,76,58,.24)}
.btn-solid:active{transform:translateY(1px)}
.btn-line{background:transparent;color:var(--hijau);border-color:var(--garis)}
.btn-line:hover{border-color:var(--hijau-2);background:var(--hijau-3)}
.btn-line:active{transform:translateY(1px)}
.btn-solid[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}
.wide{width:100%;margin-top:8px}
.icon{
  width:40px;height:40px;border-radius:var(--radius-sm);border:1.5px solid var(--garis);
  background:var(--putih);font-size:17px;line-height:1;cursor:pointer;color:var(--teks);
  transition:background .15s ease,border-color .15s ease;
}
.icon:hover{background:var(--hijau-3);border-color:var(--hijau-2)}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 20px;background:var(--hijau);color:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.1);
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand .mark{
  width:40px;height:40px;flex:0 0 40px;border-radius:12px;
  background:rgba(255,255,255,.18);display:grid;place-items:center;
  font-weight:800;font-size:15px;letter-spacing:.03em;
  border:1px solid rgba(255,255,255,.14);
}
.brand strong{display:block;font-size:15.5px;line-height:1.2;letter-spacing:-.01em}
.brand small{color:rgba(255,255,255,.74);font-size:11.5px;letter-spacing:.01em}
.topbar .btn-line{color:#fff;border-color:rgba(255,255,255,.34);padding:9px 18px;min-height:42px}
.topbar .btn-line:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55)}
.appbar{background:var(--putih);color:var(--teks);border-bottom:1px solid var(--garis);box-shadow:none;padding:12px 16px}
.appbar strong{font-size:15.5px;font-weight:650;flex:1;text-align:center;letter-spacing:-.01em}
.appbar .icon{font-size:14px;font-weight:600;width:auto;padding:0 12px;min-width:64px}

/* ---------- publik ---------- */
.hero{
  padding:56px 20px 40px;max-width:1080px;margin:0 auto;
  animation:masuk .45s ease both;
}
@keyframes masuk{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.eyebrow{
  display:inline-block;font-size:11.5px;font-weight:750;letter-spacing:.11em;
  text-transform:uppercase;color:var(--tanah);
  padding:5px 11px;border-radius:999px;background:var(--tanah-2);
  border:1px solid rgba(138,90,43,.14);margin-bottom:18px;
}
.hero h1{max-width:16ch;letter-spacing:-.028em;line-height:1.12}
.hero p{margin-top:16px;color:var(--teks-2);font-size:16.5px;max-width:54ch;line-height:1.65}
.hero-actions{display:flex;gap:10px;margin-top:32px;flex-wrap:wrap}

.stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
  padding:0 20px 16px;max-width:1080px;margin:0 auto;
}
.stat{
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--radius);
  padding:18px 18px 16px;display:flex;flex-direction:column;gap:2px;
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
  position:relative;overflow:hidden;
}
.stat::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--hijau);opacity:.55;
}
.stat:hover{box-shadow:var(--shadow-lift);transform:translateY(-1px);border-color:#cfdcd6}
.stat .n{font-size:30px;font-weight:780;color:var(--hijau);letter-spacing:-.032em;font-variant-numeric:tabular-nums;line-height:1.05}
.stat .l{font-size:12.5px;color:var(--teks-2);font-weight:600;letter-spacing:.005em}

.blok{padding:56px 24px;max-width:1080px;margin:0 auto}
.blok-head{margin-bottom:20px}
.blok-head h2{position:relative;padding-left:14px}
.blok-head h2::before{
  content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:3px;
  border-radius:2px;background:var(--tanah);opacity:.8;
}
.blok-head .sub,.sub{color:var(--teks-2);font-size:13.5px;margin-top:6px;padding-left:14px;line-height:1.6}
.blok-head:not(:has(h2)) .sub{padding-left:0}
.filterbar{display:flex;gap:12px;margin-bottom:18px}
.filterbar label{margin:0;flex:1;max-width:230px}

.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{
  padding:9px 15px;border-radius:999px;background:var(--putih);
  border:1.5px solid var(--garis);font-size:13.5px;font-weight:600;color:var(--teks-2);
  transition:border-color .15s ease,background .15s ease;
}
.chip:hover{border-color:var(--hijau-2);background:var(--hijau-3)}
.chip b{color:var(--hijau)}

.card{
  background:var(--putih);border:1px solid var(--garis);
  border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);
}

/* ---------- kontak darurat ---------- */
.darurat-grid{display:grid;grid-template-columns:1fr;gap:10px}
.darurat{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--radius);
  padding:14px 16px;transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease;
}
.darurat:hover{box-shadow:0 4px 14px rgba(22,33,28,.08);border-color:#cfdcd6}
.darurat:focus-within{border-color:var(--hijau-2);box-shadow:0 0 0 3px rgba(15,76,58,.10)}
.darurat .info{min-width:0;flex:1}
.darurat .jab{font-size:13.5px;font-weight:700;color:var(--hijau);letter-spacing:-.005em}
.darurat .nm{font-size:13.5px;color:var(--teks);font-weight:600;margin-top:1px}
.darurat .hp{
  font-size:12.5px;color:var(--teks-3);font-variant-numeric:tabular-nums;
  margin-top:3px;letter-spacing:.035em;
}
.aksi-grup{display:flex;gap:6px;flex:0 0 auto}
.darurat a.aksi{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:12px;
  text-decoration:none;color:#fff;
  transition:transform .12s ease,filter .12s ease,box-shadow .12s ease;
  box-shadow:0 1px 2px rgba(0,0,0,.10);
}
.darurat a.aksi:hover{filter:brightness(1.07)}
.darurat a.aksi:focus-visible{outline:2px solid var(--hijau);outline-offset:2px}
.darurat a.aksi:active{transform:scale(.93)}
.darurat a.aksi:hover{filter:brightness(1.09);box-shadow:0 3px 10px rgba(0,0,0,.18)}
.darurat a.aksi.telp{background:var(--hijau)}
.darurat a.aksi.wa{background:#25D366}
.darurat a.aksi.sms{background:#2f7fd1}
.darurat a.aksi svg{width:20px;height:20px;fill:currentColor;display:block}
.darurat span.aksi.kosong{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:12px;background:#c3cdc8;color:#fff;font-weight:700;
}
.darurat.off{opacity:.6}

.list{display:flex;flex-direction:column;gap:10px}
.item{
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--radius);
  padding:16px 18px;transition:box-shadow .18s ease,border-color .18s ease;
}
.item:hover{box-shadow:var(--shadow);border-color:#cfdcd6}
.item .t{font-weight:680;font-size:14.5px;letter-spacing:-.008em}
.item .d{font-size:13.5px;color:var(--teks-2);margin-top:4px;white-space:pre-wrap;line-height:1.65}
.item .m{font-size:11.5px;color:var(--teks-3);margin-top:8px;letter-spacing:.01em}

/* ---------- app dalam ---------- */
#app{display:flex;flex-direction:column;min-height:100vh}
.tabbar{
  display:flex;overflow-x:auto;gap:3px;padding:8px 10px;
  background:var(--putih);border-bottom:1px solid var(--garis);
  position:sticky;top:65px;z-index:15;scrollbar-width:none;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
}
.tabbar::-webkit-scrollbar{display:none}
.tabbar button{
  flex:1 1 0;min-width:0;padding:9px 8px;border-radius:var(--radius-sm);border:none;background:transparent;
  font-size:12.5px;font-weight:600;color:var(--teks-2);cursor:pointer;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;scroll-snap-align:center;font-family:inherit;
  transition:background .15s ease,color .15s ease;
}
@media (max-width:380px){.tabbar button{font-size:11px;padding:8px 3px}}
@media (max-width:340px){.tabbar button{font-size:10px;padding:8px 2px;letter-spacing:-.2px}}
.tabbar button:hover{background:var(--hijau-3)}
.tabbar button.on{background:var(--hijau-3);color:var(--hijau);font-weight:700}
#layar{padding:24px 16px 72px;max-width:1080px;width:100%;margin:0 auto;flex:1}

.grid2{display:grid;grid-template-columns:1fr;gap:14px}
.panel{background:var(--putih);border:1px solid var(--garis);border-radius:var(--radius);padding:18px}
.panel h3{margin-bottom:12px;font-size:15px}

.kv{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--garis-2);font-size:14px}
.kv:last-child{border-bottom:none;padding-bottom:0}
.kv:first-child{padding-top:0}
.kv .k{color:var(--teks-2)}
.kv .v{font-weight:600;text-align:right}

.pill{display:inline-block;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.01em}
.pill.ok{background:var(--hijau-3);color:var(--hijau)}
.pill.wait{background:#fdf6e3;color:var(--kuning)}
.pill.no{background:var(--merah-bg);color:var(--merah)}

.tblwrap{overflow-x:auto;border:1px solid var(--garis);border-radius:var(--radius);background:var(--putih)}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--garis-2);white-space:nowrap}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:520px){
  table{font-size:12.5px}
  th,td{padding:9px 10px}
  th{font-size:10.5px;letter-spacing:.04em}
  .tblwrap{-webkit-overflow-scrolling:touch}
}
th{background:#fbfdfc;font-weight:680;color:var(--teks-2);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em}
tr:last-child td{border-bottom:none}
tbody tr{transition:background .12s ease}
tbody tr:hover{background:#fbfdfc}

.err{color:var(--merah);font-size:13px;font-weight:600;margin:0 0 12px}
.toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%);
  background:#16211c;color:#fff;padding:13px 22px;border-radius:12px;
  font-size:13.5px;font-weight:600;z-index:100;max-width:90vw;text-align:center;
  box-shadow:0 8px 28px rgba(0,0,0,.28);
  animation:toastMasuk .22s ease both;
}
@keyframes toastMasuk{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%)}}
.toast[hidden]{display:none}

.modal{position:fixed;inset:0;background:rgba(12,24,18,.52);display:grid;place-items:center;padding:20px;z-index:60;animation:fadeIn .18s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-box{
  background:var(--putih);border-radius:18px;padding:26px;width:100%;max-width:390px;
  box-shadow:0 24px 70px rgba(0,0,0,.3);animation:masuk .24s ease both;
}
.modal-box h2{margin-bottom:6px}
.modal-box form{margin-top:22px}
[hidden]{display:none !important}

@media(min-width:640px){
  .stats{grid-template-columns:repeat(4,1fr)}
  .grid2{grid-template-columns:1fr 1fr}
  .darurat-grid{grid-template-columns:1fr 1fr}
  .blok{padding:56px 20px}
  .hero{padding:72px 20px 52px}
}
@media(min-width:1024px){
  .hero h1{font-size:52px;line-height:1.08}
  .hero{padding:88px 24px 64px}
  .blok{padding:64px 24px}
  .darurat-grid{grid-template-columns:1fr 1fr;gap:14px}
  .stats{gap:16px}
}

/* ---------- aksesibilitas ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
:focus-visible{outline:2px solid var(--hijau-2);outline-offset:2px}

@media(prefers-color-scheme:dark){
  :root{
    --teks:#e6ece9;--teks-2:#9aaba3;--teks-3:#71817a;--garis:#26332d;--garis-2:#1e2a25;
    --bg:#0d1512;--putih:#141d19;--hijau-3:#17332a;--merah-bg:#3a1c19;--tanah-2:#2a2118;
    --shadow:0 1px 2px rgba(0,0,0,.3);--shadow-lift:0 2px 4px rgba(0,0,0,.34),0 12px 32px rgba(0,0,0,.4);
  }
  .topbar{background:#0a2b21}
  .appbar{background:var(--putih)}
  th{background:#182420}
  tbody tr:hover{background:#182420}
  .stat::before{opacity:.7}
  .toast{background:#1e2a25}
}