/* Dashboard Eksekutif SDM - gaya "ruang kendali" (15 Okt 2026). Orbitron (SIL OFL) disajikan sendiri dari /aset. */
@font-face{font-family:Orbitron;src:url(/aset/orbitron.woff2) format("woff2");font-weight:500 800;font-display:swap}
:root{--latar:#030a14;--panel:rgba(8,24,44,.74);--garis:rgba(0,212,255,.2);--sian:#00d4ff;--sian2:#38f9d7;--teks:#d9e8ff;--redup:#7f98b8;
--merah:#ff4d5e;--kuning:#ffc24b;--hijau:#2ee6a6;--biru:#3a8bff;--angka:Orbitron,"Segoe UI",system-ui,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
html{scroll-behavior:smooth}
body{font-family:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;color:var(--teks);min-height:100vh;background-color:var(--latar);
background-image:radial-gradient(1000px 600px at 12% -10%,rgba(0,212,255,.16),transparent 60%),radial-gradient(800px 500px at 110% 0%,rgba(58,139,255,.14),transparent 60%),
linear-gradient(rgba(0,212,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,.045) 1px,transparent 1px);
background-size:auto,auto,44px 44px,44px 44px;background-attachment:fixed}

/* kepala */
.atas{display:flex;align-items:center;gap:1.5rem;padding:.8rem 1.5rem;border-bottom:1px solid var(--garis);position:sticky;top:0;z-index:1000;
background:linear-gradient(90deg,rgba(0,212,255,.10),rgba(3,10,20,.92) 35%,rgba(3,10,20,.92));backdrop-filter:blur(10px);box-shadow:0 0 24px rgba(0,212,255,.08)}
.merek{display:flex;align-items:center;gap:.8rem;flex:1;min-width:0}
.lambang{width:42px;height:42px;flex:none;filter:drop-shadow(0 0 8px rgba(0,212,255,.55))}
.judul{font-family:var(--angka);font-size:1.15rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;text-shadow:0 0 12px rgba(0,212,255,.45)}
.sub{color:var(--redup);font-size:.85rem}
.tiruan{color:#03121f;background:var(--kuning);border-radius:3px;padding:.05rem .4rem;font-weight:700;font-size:.7rem;letter-spacing:.06em}
.jam{text-align:right}
#jam{font-family:var(--angka);font-size:2rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--sian);text-shadow:0 0 14px rgba(0,212,255,.6)}
.pengguna{display:flex;align-items:center;gap:.6rem;color:var(--redup)}
.pengguna form{margin:0}

/* teks berjalan peringatan */
.ticker{display:flex;align-items:center;border-bottom:1px solid var(--garis);background:rgba(255,77,94,.06);font-size:.85rem;overflow:hidden}
.ticker-label{flex:none;font-family:var(--angka);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--merah);padding:.4rem .8rem;box-shadow:0 0 14px rgba(255,77,94,.6)}
.ticker-jalan{overflow:hidden;flex:1;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
#ticker-isi{display:inline-flex;white-space:nowrap;animation:jalan 80s linear infinite;padding:.4rem 0}
#ticker-isi span{margin-right:2.5rem}
#ticker-isi b{color:var(--kuning);font-weight:600}
.ticker:hover #ticker-isi{animation-play-state:paused}
@keyframes jalan{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* tata letak & panel */
main{padding:1.2rem 1.5rem 2rem;display:grid;gap:1rem;max-width:1600px;margin:0 auto}
main>section{scroll-margin-top:130px;animation:muncul .6s ease both}
main>section:nth-child(2){animation-delay:.08s}main>section:nth-child(3){animation-delay:.16s}main>section:nth-child(n+4){animation-delay:.24s}
@keyframes muncul{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.kartu,.ubin-isi{position:relative;background:linear-gradient(180deg,rgba(10,30,54,.80),rgba(5,16,30,.80));border:1px solid var(--garis);border-radius:4px;
box-shadow:inset 0 0 28px rgba(0,212,255,.05);backdrop-filter:blur(6px)}
.kartu{padding:1rem 1.1rem;min-width:0}
.kartu::before,.kartu::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--sian);pointer-events:none;filter:drop-shadow(0 0 4px var(--sian))}
.kartu::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.kartu::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
h2{font-family:var(--angka);font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sian);margin:0 0 .7rem;display:flex;align-items:center;gap:.5rem}
h2::before{content:"";width:7px;height:7px;background:var(--sian);box-shadow:0 0 8px var(--sian);transform:rotate(45deg);flex:none}
h3{font-size:.92rem;margin:1rem 0 .4rem;color:#fff}
.redup{color:var(--redup);font-size:.85rem}
.kepala{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.6rem}
.kepala h2,.kepala h3{margin:0}
.dua{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:1rem}

/* ubin KPI */
.ubin{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem}
.ubin-isi{padding:.85rem 1rem 1rem;display:grid;grid-template-columns:1fr auto;align-items:center;gap:.2rem .6rem;overflow:hidden}
.ubin-isi>*{grid-column:1}
.ubin-isi::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--hijau);box-shadow:0 0 12px var(--hijau)}
.ubin-isi.merah::after{background:var(--merah);box-shadow:0 0 12px var(--merah)}.ubin-isi.kuning::after{background:var(--kuning);box-shadow:0 0 12px var(--kuning)}
.ubin-isi .label{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--redup)}
.angka{font-family:var(--angka);font-size:1.75rem;font-weight:700;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 0 14px rgba(0,212,255,.5);white-space:nowrap}
.cincin{grid-column:2;grid-row:1/4;width:58px;height:58px}
.cincin .jalur{fill:none;stroke:rgba(255,255,255,.08);stroke-width:5}
.cincin .isi{fill:none;stroke-width:5;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;filter:drop-shadow(0 0 4px currentColor)}
.cincin text{font-family:var(--angka);font-size:10px;fill:#fff;text-anchor:middle;dominant-baseline:central}

/* peta */
#peta{height:430px;border-radius:3px;border:1px solid var(--garis)}
.leaflet-container{background:#020812}
.leaflet-tile-pane{filter:invert(1) hue-rotate(185deg) brightness(.72) contrast(1.08) saturate(.55)}
.leaflet-bar a,.leaflet-bar a:hover{background:#071a2e;color:var(--sian);border-color:var(--garis)}
.leaflet-container .leaflet-control-attribution{background:rgba(3,10,20,.75);color:var(--redup)}
.leaflet-control-attribution a{color:var(--sian)}
.leaflet-tooltip{background:#061426;color:var(--teks);border:1px solid var(--sian);box-shadow:0 0 10px rgba(0,212,255,.35)}
.denyut span{display:block;width:100%;height:100%;border-radius:50%;border:2px solid var(--merah);animation:denyut 1.8s ease-out infinite}
@keyframes denyut{from{transform:scale(.7);opacity:1}to{transform:scale(2.3);opacity:0}}

/* daftar & tabel */
.gulir{max-height:470px;overflow:auto}
.gulir-x{overflow-x:auto}
.baris-peringatan{border-left:3px solid var(--kuning);padding:.45rem .7rem;margin:.35rem 0;background:linear-gradient(90deg,rgba(255,194,75,.08),transparent);border-radius:2px}
.baris-peringatan.merah{border-left-color:var(--merah);background:linear-gradient(90deg,rgba(255,77,94,.10),transparent)}
table{width:100%;border-collapse:collapse;font-size:.88rem;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:.45rem .55rem;border-bottom:1px solid rgba(0,212,255,.1);vertical-align:top}
th{font-family:var(--angka);font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sian);white-space:nowrap}
tr.klik{cursor:pointer}tr.klik:hover{background:rgba(0,212,255,.07);box-shadow:inset 3px 0 0 var(--sian)}
th.klik{cursor:pointer;user-select:none}
#komposisi th,#susut th,#tabel-kegiatan th{position:sticky;top:0;background:#061629;z-index:1}
/* kegiatan SDM */
.ubin-kegiatan-baris{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.6rem;margin:.6rem 0 1rem}
.ubin-kegiatan{display:grid;gap:.25rem;text-align:left;background:rgba(0,212,255,.04);border:1px solid var(--garis);border-top:3px solid var(--sian);color:var(--teks);border-radius:3px;font-weight:400;padding:.6rem .7rem}
.ubin-kegiatan .label{font-size:.75rem;color:var(--redup);letter-spacing:.04em}
.ubin-kegiatan.aktif{background:rgba(0,212,255,.14);box-shadow:0 0 14px rgba(0,212,255,.25)}
.ubin-kegiatan:hover{filter:brightness(1.2)}
.angka-sedang{font-family:var(--angka);font-size:1.3rem;font-weight:700;color:#fff}
.lencana.admin{margin-left:.4rem}
/* tren penyusutan bulanan: batang bertumpuk (kategori pertama paling bawah) */
.tren{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;height:230px;padding-top:.4rem}
.tren-kolom{display:grid;grid-template-rows:auto 1fr auto;gap:4px;text-align:center;min-width:0}
.tren-isi{display:flex;align-items:flex-end;justify-content:center;min-height:0}
.tren-batang{width:72%;display:flex;flex-direction:column-reverse;border-radius:2px 2px 0 0;overflow:hidden;box-shadow:0 0 10px rgba(0,212,255,.18);min-height:2px}
.tren-angka{font-family:var(--angka);font-size:.7rem;color:var(--teks)}
.tren-bulan{font-size:.68rem;color:var(--redup);white-space:nowrap;overflow:hidden}
.legenda{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:.6rem;font-size:.8rem;color:var(--redup)}
.legenda i{display:inline-block;width:10px;height:10px;margin-right:.35rem;border-radius:2px;vertical-align:middle}
.dini{max-height:300px;display:grid;gap:.45rem;align-content:start}
td.panas{color:var(--merah);font-weight:700;text-shadow:0 0 8px rgba(255,77,94,.5)}
.batang{background:rgba(255,255,255,.07);border-radius:999px;height:6px;overflow:hidden;margin-top:.3rem;min-width:80px}
.batang .isi{height:100%;border-radius:999px;box-shadow:0 0 10px rgba(0,212,255,.45)}
.tanda{font-weight:700}.tanda.merah{color:var(--merah)}.tanda.kuning{color:var(--kuning)}.tanda.hijau{color:var(--hijau)}
.polsek{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.5rem;padding:.3rem 0}
.polsek-isi{background:rgba(0,212,255,.03);border-radius:2px;padding:.45rem .6rem;border-left:3px solid var(--hijau)}
.polsek-isi.merah{border-left-color:var(--merah)}.polsek-isi.kuning{border-left-color:var(--kuning)}
.baris-fungsi,.baris-kebijakan{padding:.45rem 0;border-bottom:1px solid rgba(0,212,255,.1)}
.seleksi{padding:.5rem 0;border-bottom:1px solid rgba(0,212,255,.1)}
.corong{display:grid;grid-template-columns:140px 1fr 130px;gap:.6rem;align-items:center;font-size:.85rem;margin:.25rem 0}
.corong .batang{margin:0}
.hijau-teks{color:var(--hijau)}.merah-teks{color:var(--merah)}
a.tautan{color:var(--sian);text-decoration:none}a.tautan:hover{text-decoration:underline}
.rawan{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.5rem;margin:.4rem 0 1rem}
.rawan-isi{display:grid;gap:.25rem;text-align:left;background:linear-gradient(90deg,rgba(255,77,94,.12),rgba(255,77,94,.02));border:1px solid rgba(255,77,94,.25);border-left:3px solid var(--merah);color:var(--teks);border-radius:2px;font-weight:400}
.rawan-isi.kuning{background:linear-gradient(90deg,rgba(255,194,75,.10),rgba(255,194,75,.02));border-color:rgba(255,194,75,.22);border-left-color:var(--kuning)}
.rawan-isi:hover{filter:brightness(1.25)}
.tumpuk{display:flex;height:14px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.07);margin:.3rem 0}
.kotak9{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;max-width:420px}
.kotak9>div{border:1px solid var(--garis);border-radius:2px;padding:.4rem;display:grid;font-size:.78rem}
.kotak9 b{font-family:var(--angka);font-size:1.05rem}

/* kontrol */
button{background:linear-gradient(90deg,#0a6cff,#00c2f0);color:#fff;border:0;border-radius:3px;padding:.55rem 1rem;font:inherit;font-weight:600;cursor:pointer;letter-spacing:.02em}
button.kecil{padding:.3rem .7rem;font-size:.82rem;background:transparent;color:var(--sian);border:1px solid var(--garis)}
button.kecil:hover{background:rgba(0,212,255,.1);box-shadow:0 0 10px rgba(0,212,255,.3)}
select{background:#061426;color:var(--teks);border:1px solid var(--garis);border-radius:3px;padding:.35rem .5rem;font:inherit;font-size:.85rem}
dialog{background:#061426;color:var(--teks);border:1px solid var(--sian);border-radius:4px;max-width:660px;width:92vw;box-shadow:0 0 40px rgba(0,212,255,.25)}
dialog::backdrop{background:rgba(1,6,14,.75);backdrop-filter:blur(3px)}
dialog th{width:40%}
dialog h2{font-size:.9rem}

/* kelola pengguna */
.tombol{display:inline-block;text-decoration:none;border-radius:3px;padding:.3rem .7rem;font-size:.82rem;color:var(--sian);border:1px solid var(--garis);cursor:pointer}
.tombol:hover{background:rgba(0,212,255,.1);box-shadow:0 0 10px rgba(0,212,255,.3)}
.baris-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.7rem;align-items:end}
.baris-form label,.form-ubah label{display:grid;gap:.3rem;font-size:.8rem;color:var(--redup)}
.baris-form input,.form-ubah input,.salin input{background:#030c18;border:1px solid var(--garis);border-radius:3px;padding:.5rem .6rem;color:var(--teks);font:inherit}
.baris-form input:focus,.form-ubah input:focus{outline:none;border-color:var(--sian);box-shadow:0 0 10px rgba(0,212,255,.35)}
.form-ubah{display:grid;gap:.7rem;margin:0}
.hasil{margin-top:.9rem;padding:.8rem;border:1px solid var(--sian);background:rgba(0,212,255,.06);border-radius:3px;display:grid;gap:.5rem}
.hasil.galat{border-color:var(--merah);background:rgba(255,77,94,.08)}
.hasil p{margin:0}
.salin{display:flex;gap:.5rem}.salin input{flex:1;font-family:Consolas,"Cascadia Mono",monospace;font-size:.8rem}
.aksi{display:flex;gap:.35rem;flex-wrap:wrap}
button.bahaya{border-color:var(--merah);color:var(--merah)}
.lencana{display:inline-block;padding:.05rem .45rem;border-radius:2px;font-size:.72rem;letter-spacing:.05em;border:1px solid var(--garis);white-space:nowrap}
.lencana.superadmin{color:var(--kuning);border-color:rgba(255,194,75,.45)}.lencana.admin{color:var(--sian)}
tr.mati td{opacity:.5}
.unggah{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin:1rem 0 .8rem}
.petunjuk{margin-top:1rem;color:var(--teks)}
.petunjuk summary{cursor:pointer;color:var(--sian)}
.petunjuk li{margin:.35rem 0}
code{font-family:Consolas,"Cascadia Mono",monospace;color:var(--sian2);font-size:.9em}
.kuning-teks{color:var(--kuning)}

/* masuk / atur sandi: terbelah - kiri merek SIGAP (radar menyapu), kanan formulir */
body.masuk{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:100vh}
.sisi-merek{position:relative;overflow:hidden;padding:3.5rem clamp(2rem,5vw,5rem);display:flex;flex-direction:column;justify-content:center;gap:1.1rem;
border-right:1px solid var(--garis);background:linear-gradient(160deg,rgba(0,212,255,.12),rgba(10,40,80,.38) 45%,rgba(3,10,20,.25))}
.sisi-merek>*{position:relative}
.radar{position:absolute!important;right:-200px;bottom:-200px;width:600px;height:600px;border-radius:50%;opacity:.6;pointer-events:none;
background:linear-gradient(transparent calc(50% - 1px),rgba(0,212,255,.25) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)),
linear-gradient(90deg,transparent calc(50% - 1px),rgba(0,212,255,.25) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)),
repeating-radial-gradient(circle,transparent 0 74px,rgba(0,212,255,.22) 75px 76px)}
.radar::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,rgba(0,212,255,.42) 55deg,transparent 56deg);animation:sapu 7s linear infinite}
@keyframes sapu{to{transform:rotate(360deg)}}
.logo-besar{width:104px;height:104px;filter:drop-shadow(0 0 20px rgba(0,212,255,.5))}
.logo-instansi{display:flex;align-items:center;gap:1.2rem;margin-bottom:.4rem}
.logo-instansi img{height:92px;max-width:150px;object-fit:contain;filter:drop-shadow(0 0 14px rgba(0,0,0,.6))}
.merek-sigap{display:grid;gap:1.1rem}
.ada-instansi .merek-sigap{display:flex;align-items:center;gap:1rem}
.ada-instansi .logo-besar{width:64px;height:64px}
.ada-instansi .nama-produk{font-size:2.4rem}
.instansi{display:flex;align-items:center;gap:.6rem;padding-left:.9rem;margin-left:.2rem;border-left:1px solid var(--garis)}
.instansi img{height:40px;max-width:70px;object-fit:contain}
.nama-produk{font-family:var(--angka);font-size:3.2rem;font-weight:800;letter-spacing:.14em;line-height:1;
background:linear-gradient(90deg,#38f9d7,#00d4ff 50%,#3a8bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.kepanjangan{color:var(--sian);letter-spacing:.05em;font-size:.95rem;margin-top:.4rem}
.nama-produk.panjang{font-size:2.35rem;letter-spacing:.1em}
.ada-instansi .nama-produk.panjang{font-size:1.9rem}
.polda-merek{display:inline-block;margin-top:.8rem;font-family:var(--angka);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;border:1px solid var(--garis);padding:.35rem .75rem;background:rgba(0,212,255,.08);box-shadow:0 0 12px rgba(0,212,255,.15)}
.slogan{color:var(--teks);max-width:30rem;line-height:1.55;margin:.3rem 0;font-size:1.05rem}
.fitur{list-style:none;padding:0;margin:.2rem 0;display:grid;gap:.65rem}
.fitur li{display:flex;gap:.7rem;align-items:center}
.fitur li::before{content:"";width:8px;height:8px;flex:none;background:var(--sian);box-shadow:0 0 8px var(--sian);transform:rotate(45deg)}
.kaki{margin-top:1.4rem;color:var(--redup);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}
.sisi-form{display:grid;place-items:center;align-content:center;gap:1.2rem;padding:2rem 1rem}
.kartu-masuk{position:relative;background:linear-gradient(180deg,rgba(10,30,54,.85),rgba(5,16,30,.85));border:1px solid var(--garis);border-radius:4px;padding:2.2rem 2rem;
width:min(400px,92vw);display:grid;gap:.9rem;box-shadow:0 0 40px rgba(0,212,255,.12)}
.kartu-masuk::before,.kartu-masuk::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--sian);filter:drop-shadow(0 0 4px var(--sian))}
.kartu-masuk::before{top:-1px;left:-1px;border-right:0;border-bottom:0}.kartu-masuk::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.kartu-masuk h1{margin:0;font-family:var(--angka);font-size:1.15rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;text-shadow:0 0 12px rgba(0,212,255,.5)}
.kartu-masuk p{margin:0}
.kartu-masuk label{display:grid;gap:.35rem;font-size:.85rem;color:var(--redup)}
.kartu-masuk input{width:100%;background:#030c18;border:1px solid var(--garis);border-radius:3px;padding:.65rem .75rem;color:var(--teks);font:inherit}
.kartu-masuk input:focus{outline:none;border-color:var(--sian);box-shadow:0 0 10px rgba(0,212,255,.35)}
.kartu-masuk>button{padding:.7rem 1rem;margin-top:.3rem}
.sandi{position:relative;display:block}
.sandi input{padding-right:2.8rem}
.lihat{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);background:transparent;border:0;padding:.35rem;color:var(--redup);cursor:pointer}
.lihat:hover,.lihat.aktif{color:var(--sian)}
.lihat svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:1.8}
.catatan{color:var(--redup);font-size:.8rem;text-align:center}
.jam-masuk{font-family:var(--angka);color:var(--redup);font-size:.8rem;letter-spacing:.12em}
.jam-masuk #jam{font-size:1.05rem;color:var(--sian);text-shadow:0 0 10px rgba(0,212,255,.5);letter-spacing:.08em}
@media (max-width:860px){body.masuk{grid-template-columns:minmax(0,1fr);align-content:start}.sisi-merek>div{min-width:0}
.sisi-merek{padding:1.4rem 1.2rem;flex-direction:row;align-items:center;border-right:0;border-bottom:1px solid var(--garis);gap:.9rem}
.sisi-merek .slogan,.sisi-merek .fitur,.sisi-merek .kaki,.radar{display:none}
.logo-besar{width:54px;height:54px}.nama-produk{font-size:1.9rem}.kepanjangan{font-size:.75rem}
.merek-sigap{display:flex;align-items:center;gap:.9rem}.logo-instansi img{height:54px}.ada-instansi .logo-besar{display:none}.sisi-merek.ada-instansi{flex-wrap:wrap}}
.galat{color:var(--merah);margin:0}

/* mode TV: layar penuh, kontrol disembunyikan */
body.tv .pengguna{display:none}
body.tv main{max-width:none}

@media (max-width:900px){.instansi img{height:30px}.dua{grid-template-columns:1fr}.atas{flex-wrap:wrap;gap:.6rem}.jam{text-align:left}#jam{font-size:1.4rem}main{padding:1rem}
.corong{grid-template-columns:110px 1fr 110px}.judul{font-size:.95rem}#tombol-tv{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
/* logo & gambar pratinjau di Kelola Wilayah */
.logo-baris{display:flex;flex-wrap:wrap;gap:1rem;margin:.6rem 0 1rem}
.kotak-gambar{display:grid;gap:.45rem;justify-items:start;padding:.8rem;border:1px solid var(--garis);border-radius:3px;background:rgba(0,212,255,.03);min-width:220px}
/* sederhana sengaja: kotak grid + garis putus-putus + latar kotak-kotak membuat Chrome macet melukis (15 Okt 2026) */
.pratinjau-logo{height:96px;max-width:240px;object-fit:contain;background:rgba(255,255,255,.05);border-radius:2px}
.pratinjau-logo.kosong{display:flex;align-items:center;justify-content:center;width:160px;color:var(--redup);font-size:.8rem;border:1px solid var(--garis)}
.logo-mini{height:28px;max-width:60px;object-fit:contain}
.isian-jenis{display:contents}
.isian-jenis label{display:grid;gap:.3rem;font-size:.8rem;color:var(--redup)}
.isian-jenis input{background:#030c18;border:1px solid var(--garis);border-radius:3px;padding:.5rem .6rem;color:var(--teks);font:inherit}
.unggah label:not(.tombol){display:flex;gap:.4rem;align-items:center;font-size:.85rem;color:var(--redup)}
.baris-form select{background:#030c18}
/* data asli */
.tiruan.asli{background:var(--hijau);color:#03121f}
.tag-sumber{font-family:"Segoe UI",system-ui,sans-serif;font-size:.68rem;letter-spacing:.04em;text-transform:none;color:var(--kuning);border:1px solid rgba(255,194,75,.45);padding:.05rem .4rem;border-radius:2px;margin-left:.6rem}
.kartu-data-baris{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:1rem}
.kartu-data{border:1px solid var(--garis);border-radius:3px;padding:.9rem 1rem;background:rgba(0,212,255,.03);display:grid;gap:.5rem;align-content:start;min-width:0}
.kartu-data h3{margin:0}
.kartu-data .kepala{margin:0}
.kolom-wajib{color:var(--teks);font-weight:600}
.tanda-aktif{color:var(--hijau);font-weight:600}
.baris-aktif td{background:rgba(46,230,166,.08)}
.riwayat summary{cursor:pointer;color:var(--sian);font-size:.85rem}
.baris-peringatan.hijau-isi{border-left-color:var(--hijau);background:linear-gradient(90deg,rgba(46,230,166,.10),transparent)}
.tombol.mati{opacity:.4;pointer-events:none}
label.centang{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--teks)}
@media (max-width:900px){.kartu-data-baris{grid-template-columns:1fr}}
/* ubah per baris (halaman Data) */
.kartu-data.lebar{grid-column:1/-1}
.ubah-baris{border-top:1px dashed var(--garis);padding-top:.7rem;display:grid;gap:.55rem}
.ubah-baris h4,.form-baris h4{margin:0;color:var(--sian)}
.ubah-baris table td .aksi{display:flex;gap:.3rem;flex-wrap:wrap}
.cari-baris{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.cari-baris input{flex:1;min-width:14rem;background:#030c18;border:1px solid var(--garis);border-radius:3px;padding:.45rem .6rem;color:var(--teks);font:inherit}
.form-baris{border:1px solid var(--sian);padding:.8rem;border-radius:3px;background:rgba(0,212,255,.04)}
.form-baris h4,.form-baris .hasil,.form-baris > .aksi,.form-baris > p{grid-column:1/-1}
.form-baris label.sorot{color:var(--kuning)}
.form-baris label.sorot input,.form-baris label.sorot select{border-color:var(--kuning)}