/* =====================================================================
   Fire Hotspot Monitoring — gaya bersama untuk halaman peta, admin, login, dan pemasang.
   ===================================================================== */
:root{
  --bg:#0B1216; --bg2:#0E1A1F; --panel:#12212A; --panel2:#172A33;
  --line:#22343E; --line2:#2E4652;
  --text:#E6EEEF; --muted:#90A6AE; --faint:#5F757F;
  --e1:#FFC857; --e2:#F2803C; --e3:#D42A43;
  --act:#54B7A9; --act-ink:#04201D;
  --shadow:0 18px 44px -24px rgba(0,0,0,.85);
  color-scheme:dark;
}
:root[data-tema="terang"]{
  --bg:#E9EDEC; --bg2:#F3F6F5; --panel:#FFFFFF; --panel2:#F1F5F3;
  --line:#D5DEDA; --line2:#BFCCC7;
  --text:#10201F; --muted:#546862; --faint:#7C918B;
  --e1:#D89A16; --e2:#DF5F1C; --e3:#B3132C;
  --act:#16786C; --act-ink:#FFFFFF;
  --shadow:0 14px 34px -22px rgba(16,32,31,.45);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Bricolage Grotesque","IBM Plex Sans",sans-serif;font-weight:700;letter-spacing:-.022em;margin:0;line-height:1.14}
h1{font-size:clamp(1.5rem,4vw,2.1rem)}
h2{font-size:clamp(1.2rem,3vw,1.6rem);margin-top:28px}
h3{font-size:1.05rem}
p{margin:0 0 .7em}
a{color:var(--act)}
code,pre,.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
pre{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;overflow:auto;font-size:.85rem}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--act);outline-offset:2px;border-radius:6px}
.redup{color:var(--muted)}
.ok{color:var(--act)}
.tidak{color:var(--e3)}
@media (prefers-reduced-motion: reduce){*{transition-duration:.001ms !important;animation-duration:.001ms !important}}

/* ------------------------------------------------------------- chrome */
.topbar{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--line)}
.topbar-in{max-width:1500px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.merek{display:flex;align-items:center;gap:10px;margin-right:auto;text-decoration:none;color:inherit}
.merek b{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.2rem;letter-spacing:-.04em}
.merek small{display:block;color:var(--muted);font-size:.76rem;line-height:1.1}
.tabs{display:flex;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px}
.tabs a,.tabs button{background:none;border:0;padding:6px 14px;border-radius:999px;color:var(--muted);cursor:pointer;font-size:.87rem;text-decoration:none;white-space:nowrap}
.tabs a[aria-current="page"],.tabs button[aria-current="true"]{background:var(--act);color:var(--act-ink);font-weight:600}
.ikon{background:var(--panel);border:1px solid var(--line);color:var(--muted);width:36px;height:36px;border-radius:10px;cursor:pointer;display:grid;place-items:center}
.ikon:hover{color:var(--text)}

/* ------------------------------------------------------------- tombol */
.btn{background:var(--act);color:var(--act-ink);border:0;border-radius:9px;padding:9px 15px;font-weight:600;font-size:.87rem;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn.samar{background:transparent;color:var(--text);border:1px solid var(--line2)}
.btn.samar:hover{background:var(--panel2);filter:none}
.btn.bahaya{background:var(--e3);color:#fff}
.btn.kecil{padding:5px 10px;font-size:.8rem;border-radius:7px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.baris{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* -------------------------------------------------------------- isian */
.isian{display:flex;flex-direction:column;gap:5px;min-width:0}
.isian span,label>span{font-size:.76rem;color:var(--muted)}
input,select,textarea{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 10px;width:100%;min-width:0}
textarea{resize:vertical;min-height:80px}
.form-kolom{display:flex;flex-direction:column;gap:12px;max-width:420px;margin-top:12px}
.form-kolom label{display:flex;flex-direction:column;gap:5px;font-size:.76rem;color:var(--muted)}
.form-kolom input{color:var(--text)}
.kolom2{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media (max-width:620px){.kolom2{grid-template-columns:1fr}}

/* ------------------------------------------------------------- wadah */
.panel{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:16px 18px;margin:16px 0}
.panel-kepala{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.panel-kepala p{margin:0;color:var(--muted);font-size:.84rem}
.angka{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:16px 0}
.angka .kotak{border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:var(--panel)}
.angka b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:1.9rem;font-weight:700;letter-spacing:-.04em;line-height:1.05}
.angka span{font-size:.78rem;color:var(--muted)}
.angka .kotak.api b{color:var(--e3)}
.angka .kotak.kecil b{font-size:1.3rem}

/* Di layar sempit (ponsel), lima kotak angka jadi padat kalau ditumpuk
   sebagai grid. Ubah jadi baris yang bisa digeser (scroll) horizontal,
   satu tampilan yang lebih ringkas dan terasa dinamis di ponsel. */
@media (max-width:640px){
  .angka{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    gap:9px;
    margin:12px -16px;
    padding:2px 16px 8px;
    -webkit-overflow-scrolling:touch;
  }
  .angka::-webkit-scrollbar{height:4px}
  .angka::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px}
  .angka .kotak{
    flex:0 0 auto;
    min-width:132px;
    scroll-snap-align:start;
    padding:10px 13px;
  }
  .angka b{font-size:1.35rem}
  .angka .kotak.kecil b{font-size:1.05rem}
  .angka span{font-size:.71rem;white-space:nowrap}
}

/* ------------------------------------------------------------- tabel */
.tabel-bungkus{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
table{border-collapse:collapse;width:100%;font-size:.86rem}
th,td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--muted);font-weight:500;font-size:.78rem;background:var(--panel)}
th[data-urut]{cursor:pointer}
th[data-urut]:hover{color:var(--text)}
tbody tr:hover{background:var(--panel2)}
tbody tr:last-child td{border-bottom:0}
td.num{font-family:"IBM Plex Mono",monospace}
.tabel-rapat td{border-bottom:1px solid var(--line);padding:6px 10px;font-size:.86rem}
.label{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.72rem;border:1px solid var(--line2)}
.label.rendah{color:var(--e1);border-color:color-mix(in srgb,var(--e1) 45%,transparent)}
.label.sedang{color:var(--e2);border-color:color-mix(in srgb,var(--e2) 45%,transparent)}
.label.tinggi{color:var(--e3);border-color:color-mix(in srgb,var(--e3) 50%,transparent)}
.halaman-nav{display:flex;gap:8px;align-items:center;justify-content:center;padding:12px;color:var(--muted);font-size:.84rem}
.kosong{text-align:center;color:var(--muted);padding:32px 16px}

/* -------------------------------------------------------------- pesan */
.pesan{border-radius:10px;padding:10px 14px;margin:12px 0;font-size:.88rem;border:1px solid var(--line2);background:var(--panel2)}
.pesan.baik{border-color:color-mix(in srgb,var(--act) 55%,transparent)}
.pesan.buruk{border-color:color-mix(in srgb,var(--e3) 55%,transparent)}
#kabar{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:900;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.kabar{background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:9px 15px;font-size:.85rem;box-shadow:var(--shadow);transition:opacity .4s}
.kabar.buruk{border-color:color-mix(in srgb,var(--e3) 60%,transparent)}

/* ------------------------------------------------------- halaman kecil */
.halaman-sempit{display:grid;place-items:start center;min-height:100vh;padding:28px 16px}
.kartu-tengah{width:min(680px,100%);background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px 28px;box-shadow:var(--shadow)}
.kartu-masuk{width:min(400px,100%)}

/* --------------------------------------------------------------- peta */
.peta-bingkai{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
#peta{width:100%;height:clamp(380px,64vh,720px);background:var(--bg2)}
.ol-attribution{font-size:.7rem}
.mengambang{position:absolute;z-index:20;display:flex;flex-direction:column;gap:8px}
.mengambang.kiri-atas{top:12px;left:12px;max-width:min(330px,calc(100% - 24px))}
.mengambang.kanan-atas{top:12px;right:56px;max-width:min(260px,calc(100% - 68px))}
.mengambang.kiri-bawah{bottom:40px;left:12px;max-width:min(240px,calc(100% - 24px))}
.mengambang.kanan-bawah{bottom:40px;right:12px}
.tombol-panel{align-self:flex-start;background:color-mix(in srgb,var(--panel) 93%,transparent);backdrop-filter:blur(10px)}
#panelLapisan.sembunyi{display:none !important}
.tombol-lokasi{display:flex;align-items:center;gap:6px;box-shadow:var(--shadow)}
.tombol-lokasi.aktif{filter:brightness(1.1)}
.tombol-lokasi:disabled{opacity:.6;cursor:progress}

/* Bilah koordinat: mengikuti posisi pointer mouse di atas peta, selalu
   menempel di bagian bawah bingkai peta. pointer-events:none supaya tidak
   menghalangi klik/seret pada peta di baliknya. */
.bilah-koordinat{
  position:absolute;left:0;right:0;bottom:0;z-index:21;
  text-align:center;padding:5px 10px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.76rem;
  color:var(--text);
  background:color-mix(in srgb,var(--panel) 80%,transparent);
  backdrop-filter:blur(6px);
  border-top:1px solid var(--line);
  pointer-events:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

@media (max-width:720px){
  .mengambang.kiri-bawah{max-width:min(220px,calc(100% - 24px))}
}
.kartu-peta{background:color-mix(in srgb,var(--panel) 93%,transparent);border:1px solid var(--line);border-radius:12px;padding:10px 12px;backdrop-filter:blur(10px);font-size:.84rem}
.kartu-peta h4{font-size:.95rem;margin-bottom:4px}
.kartu-peta dl{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:8px 0 0;font-size:.8rem}
.kartu-peta dt{color:var(--muted)}
.kartu-peta dd{margin:0;text-align:right;font-family:"IBM Plex Mono",monospace}
.kartu-peta .tutup{float:right;background:none;border:0;color:var(--muted);cursor:pointer;font-size:1.1rem;line-height:1;padding:0 2px}
.cip-baris{display:flex;gap:6px;flex-wrap:wrap}
.cip{background:color-mix(in srgb,var(--panel) 93%,transparent);border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:.78rem;color:var(--muted);cursor:pointer;backdrop-filter:blur(10px)}
.cip[aria-pressed="true"]{color:var(--text);border-color:var(--line2);background:var(--panel2)}
.cip i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}
/* --------------------------------------------------- pencarian lokasi */
.kotak-cari{
  display:flex;align-items:center;gap:4px;
  background:color-mix(in srgb,var(--panel) 93%,transparent);
  border:1px solid var(--line);border-radius:10px;
  padding:3px 3px 3px 12px;backdrop-filter:blur(10px);box-shadow:var(--shadow);
}
.kotak-cari input{background:none;border:0;padding:6px 2px;flex:1;min-width:0;font-size:.85rem}
.kotak-cari input:focus{outline:0}
.kotak-cari button{
  background:var(--act);color:var(--act-ink);border:0;border-radius:7px;
  width:32px;height:32px;flex:0 0 auto;display:grid;place-items:center;
  cursor:pointer;font-size:.95rem;
}
.daftar-saran{
  list-style:none;margin:6px 0 0;padding:4px;max-height:280px;overflow:auto;
  background:color-mix(in srgb,var(--panel) 96%,transparent);
  border:1px solid var(--line);border-radius:10px;backdrop-filter:blur(10px);
  box-shadow:var(--shadow);
}
.daftar-saran li{padding:8px 10px;border-radius:7px;cursor:pointer;font-size:.82rem;color:var(--text)}
.daftar-saran li:hover{background:var(--panel2)}
.daftar-saran li small{display:block;color:var(--muted);font-size:.72rem;margin-top:1px;font-weight:400}

.daftar-layer label{display:flex;align-items:center;gap:8px;font-size:.82rem;padding:3px 0;color:var(--text);cursor:pointer}
.daftar-layer input{width:auto;margin:0}
.daftar-layer .garis{display:inline-block;width:16px;height:0;border-top-width:2px;border-top-style:solid;margin-right:2px}
.saring{display:grid;gap:10px;margin:16px 0;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:end}

/* --------------------------------------------------------- grafik bar */
.bar-baris{display:grid;grid-template-columns:150px 1fr 54px;gap:10px;align-items:center;font-size:.84rem;padding:3px 0}
.bar-jalur{height:9px;background:var(--panel2);border-radius:99px;overflow:hidden}
.bar-isi{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--e1),var(--e2) 55%,var(--e3))}
.bar-baris em{font-style:normal;color:var(--muted);text-align:right;font-family:"IBM Plex Mono",monospace;font-size:.8rem}

/* -------------------------------------------------------------- modal */
.modal{position:fixed;inset:0;z-index:800;display:none;place-items:center;padding:16px;background:rgba(3,8,10,.66)}
.modal.tampil{display:grid}
.modal .lembar{background:var(--panel);border:1px solid var(--line2);border-radius:16px;width:min(640px,100%);max-height:88vh;overflow:auto;padding:20px;box-shadow:var(--shadow)}

footer{border-top:1px solid var(--line);color:var(--muted);font-size:.8rem;padding:18px 16px;max-width:1500px;margin:0 auto}
main.isi{max-width:1500px;margin:0 auto;padding:18px 16px 80px}
.sembunyi{display:none !important}