:root{--b:#0b4f8a;--bg:#f2f5f9;--c:#fff;--t:#1d2b3a;--m:#6b7b8c}
*{box-sizing:border-box}body{margin:0;font:14px/1.5 system-ui,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--t)}
header{background:#fff;color:var(--b);padding:14px 24px;border-bottom:1px solid #e1e8f0}header h1{margin:0;font-size:20px}header p{margin:2px 0 0;opacity:.8;font-size:12px}
main{max-width:1200px;margin:auto;padding:16px}
.bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
select,input{padding:7px 10px;border:1px solid #c5d0dc;border-radius:6px;font:inherit;background:#fff}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:14px}
.card{background:var(--c);border-radius:10px;padding:14px 16px;box-shadow:0 1px 3px #0001}
.card small{color:var(--m)}.card b{display:block;font-size:24px;color:var(--b)}
.row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));margin-bottom:14px}
h2{font-size:15px;margin:0 0 10px}svg{width:100%;height:auto;display:block}
.tbl{max-height:420px;overflow:auto}table{width:100%;border-collapse:collapse}
th,td{padding:6px 8px;border-bottom:1px solid #e6ecf2;text-align:left;white-space:nowrap}th{position:sticky;top:0;background:#eaf0f7;cursor:pointer}
td.n,th.n{text-align:right}.bt{display:flex;align-items:center;gap:6px;margin:3px 0}.bt i{display:block;height:14px;background:var(--b);border-radius:3px}
.bt span{width:120px;font-size:12px;overflow:hidden;text-overflow:ellipsis}.bt em{font-style:normal;font-size:12px;color:var(--m)}

.top{background:var(--b);color:#fff;height:48px;padding:0 16px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:8}
.top button{background:none;border:0;color:#fff;font-size:20px;cursor:pointer}
.wrap{display:flex;align-items:flex-start}.ct{flex:1;min-width:0}
#sb{width:260px;flex:none;background:#eceff3;padding:14px 0;overflow:auto;position:sticky;top:48px;height:calc(100vh - 48px)}
.hide #sb{display:none}.st{padding:0 24px 8px;font-size:12px;font-weight:700;color:var(--m);letter-spacing:.5px}
#ms{margin:0 18px 8px;width:calc(100% - 36px)}
.mi{display:flex;align-items:center;gap:12px;padding:10px 18px;cursor:pointer;color:#4a5866}.mi:hover{background:#e2e7ed}
.mi.on{color:#3b6fe0;font-weight:500}.ic{width:20px;text-align:center}.tx{flex:1}.cv{font-size:11px}
.sub a{display:block;padding:7px 18px 7px 50px;cursor:pointer;color:#4a5866}.sub a:hover{background:#e2e7ed}.sub a.on{color:#3b6fe0;font-weight:500}
.sub em{display:block;padding:6px 18px 6px 50px;color:var(--m);font-size:12px}
@media(max-width:800px){#sb{position:fixed;left:0;top:48px;z-index:9;box-shadow:2px 0 8px #0003}}
footer{color:var(--m);font-size:12px;padding:8px 0 24px}
.tls{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:20px;margin:24px 0}.tl{cursor:pointer;text-align:center;display:block}.ti{height:220px;border-radius:8px;background:linear-gradient(180deg,#5b86ad 0%,#2c6aa0 55%,#0b4f8a 100%);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:18px;position:relative;overflow:hidden;box-shadow:0 1px 3px #0003}.ti .te{position:absolute;top:34px;left:0;right:0;font-size:64px;opacity:.35}.ti b{font-size:20px;color:#fff}.ti small{font-size:14px;color:#fff}.tn{color:#1b5a9e;font-weight:700;margin-top:10px;font-size:14px}.tc{color:var(--m);font-size:12px}.tl:hover .ti{filter:brightness(1.1)}
.site-h{position:sticky;top:0;z-index:20;height:56px;background:var(--b);color:#fff;display:flex;align-items:center;gap:14px;padding:0 16px}
#hb{background:none;border:0;color:#fff;font-size:22px;cursor:pointer;padding:4px 8px}
.brand{display:flex;align-items:center;gap:12px;cursor:pointer;min-width:0}.brand img{height:38px;width:auto;border-radius:4px;flex:none}
.brand b{display:block;font-size:16px;line-height:1.2}.brand small{display:block;font-size:11.5px;opacity:.85}
#bc{margin-left:auto;font-size:12px;opacity:.85;text-align:right}
#sb{top:56px;height:calc(100vh - 56px)}
.mi.l1{font-weight:700;color:#1d2b3a}.mi.l1.o{color:#3b6fe0}
.mi.l2{padding-left:28px}.sub a{padding-left:58px}
.car{position:relative;border-radius:14px;overflow:hidden;background:#0b4f8a;color:#fff;min-height:405px;box-shadow:0 1px 3px #0003}
.sl{position:absolute;inset:0;display:grid;grid-template-columns:minmax(260px,46%) 1fr;opacity:0;visibility:hidden;transition:opacity .7s}.sl.on{opacity:1;visibility:visible}
.sl .bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(28px) brightness(.55);transform:scale(1.2)}
.sl .im{position:relative;display:flex;align-items:center;justify-content:center;padding:20px}.sl .im img{max-width:100%;max-height:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;box-shadow:0 8px 28px #0008}
.sl .cp{position:relative;display:flex;flex-direction:column;justify-content:center;padding:28px 56px 28px 16px}
.cp .tg{align-self:flex-start;background:#fff;color:#0b4f8a;font-weight:700;font-size:12px;padding:3px 10px;border-radius:99px}.cp h2{font-size:clamp(22px,3vw,34px);line-height:1.2;margin:12px 0 10px}.cp p{margin:0;font-size:15px;opacity:.92;max-width:52ch}
.nv{position:absolute;top:50%;transform:translateY(-50%);z-index:3;background:#0008;color:#fff;border:0;width:40px;height:40px;border-radius:50%;font-size:20px;cursor:pointer}#cpv{left:10px}#cnx{right:10px}
.dots{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:3}.dots i{width:10px;height:10px;border-radius:50%;background:#fff6;cursor:pointer}.dots i.on{background:#fff;width:26px;border-radius:6px}
.hint{color:var(--m);font-size:12px;margin:10px 4px}
.fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}.fg label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--m)}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.bn{border:0;border-radius:6px;padding:8px 14px;font:inherit;font-weight:600;cursor:pointer;background:var(--b);color:#fff}.bn.o{background:none;border:1px solid var(--b);color:var(--b)}.bn.d{background:none;color:#c0392b;padding:2px 6px}
.emp{color:var(--m);padding:14px 4px;text-align:center}#i-msg{font-size:12.5px;color:var(--m);margin-top:8px;min-height:18px}
.site-f{background:#fff;color:#6b7b8c;padding:18px 20px;border-top:1px solid #e1e8f0;font-size:12.5px;display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between}
.site-f b{color:#1d2b3a;display:block;margin-bottom:2px}.site-f a{color:#0b4f8a;text-decoration:none}
@media(max-width:800px){#sb{top:56px}.car{min-height:515px}.sl{grid-template-columns:1fr;grid-template-rows:auto 1fr}.sl .im{padding:14px 14px 0}.sl .im img{max-height:240px}.sl .cp{padding:14px 18px 44px}#bc{display:none}.brand small{display:none}}
/* tema gelap */
:root{--bg:#0d1520;--c:#15202e;--t:#e6edf5;--m:#93a4b7;--b:#5aaeff;color-scheme:dark}
body{background:#0d1520;color:#e6edf5}
.site-h{height:64px;background:linear-gradient(100deg,#0a2a5e,#0b4f8a);border-bottom:3px solid #f2b632}
.brand img{height:44px}
#sb{top:64px;height:calc(100vh - 64px);background:#111c29;border-right:1px solid #26364a}
@media(max-width:800px){#sb{top:64px}}
.st{color:#93a4b7}
.mi{color:#e6edf5}.mi:hover{background:#1b2a3c}.mi.on{color:#6fb3ff}
.mi.l1{color:#e6edf5;background:#16253a;border-left:4px solid transparent}.mi.l1.o{color:#6fb3ff;border-left-color:#f2b632}
.sub a{color:#93a4b7}.sub a:hover{background:#1b2a3c}.sub a.on{color:#6fb3ff}.sub em{color:#93a4b7}
select,input{background:#0d1520;color:#e6edf5;border:1px solid #26364a}
#pv header{background:#15202e;border-bottom:1px solid #26364a;color:#6fb3ff}
.card{border:1px solid #26364a;box-shadow:none}
th{background:#1b2a3c;color:#e6edf5}th,td{border-bottom:1px solid #26364a}
.bn{background:#0b4f8a;color:#fff}.bn.o{background:none;border:1px solid #5aaeff;color:#5aaeff}.bn.d{color:#ff8a7a}
.tn{color:#6fb3ff}
svg line[stroke="#e1e8f0"]{stroke:#26364a}
svg [fill="#e5eaf0"]{fill:#1f2d3f}
.car{background:#0a2a5e;box-shadow:0 6px 24px #0008}
.cp .tg{background:#f2b632;color:#3a2a00}
.dots i.on{background:#f2b632}
.site-f{background:#0a2a5e;color:#cfe0f5;border-top:3px solid #f2b632}
.wrap{background:linear-gradient(90deg,#111c29 260px,#26364a 260px,#26364a 261px,transparent 261px)}.hide .wrap{background:none}
a.mi{text-decoration:none}
#tip{position:fixed;display:none;transform:translateY(-50%);z-index:60;background:#15202e;color:#fff;border:1px solid #f2b632;padding:6px 12px;border-radius:6px;font-size:12.5px;white-space:nowrap;pointer-events:none;box-shadow:0 4px 14px #0008}
.hrow{display:flex;gap:16px;align-items:stretch;height:405px}.hrow .car{flex:0 0 calc(70% - 8px);min-width:0}.org{flex:1;min-width:0;border-radius:14px;overflow:hidden;background:#0a2a5e;border:1px solid #26364a;cursor:zoom-in;display:flex}.org img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
#lb{position:fixed;inset:0;z-index:50;background:#000c;display:flex;align-items:center;justify-content:center;padding:16px;cursor:zoom-out}#lb img{max-width:100%;max-height:100%;border-radius:8px}
@media(max-width:800px){.hrow{flex-direction:column;height:auto}.hrow .car{flex:none;width:100%}.org img{height:auto}}
select{background-color:#0d1520!important;color:#e6edf5!important}option{background:#15202e;color:#e6edf5}
svg [fill="#0b4f8a"]{fill:#5aaeff}svg [stroke="#0b4f8a"]{stroke:#5aaeff}
.site-f b{color:#fff}.site-f a{color:#9fd0ff}
.h3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}.h3c{min-width:0;display:flex;flex-direction:column}.h3c h2{font-size:16px;margin:0 0 10px}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.gal img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;cursor:zoom-in}
.rq{display:flex;flex-direction:column;gap:8px}.rq input,.rq select,.rq textarea{padding:8px;border-radius:6px;font:inherit;border:1px solid #d0d8e2}.rq button{align-self:flex-start}.h3m{font-size:12.5px;color:var(--m)}
.cb{height:230px;overflow:auto;display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid #d0d8e233;border-radius:6px}.cb div{max-width:85%;padding:6px 10px;border-radius:10px;font-size:13px;background:#e6edf5;color:#111}.cb div.me{align-self:flex-end;background:#0b4f8a;color:#fff}
.cf{display:flex;gap:6px;margin-top:8px}.cf input{flex:1;padding:8px;border-radius:6px;border:1px solid #d0d8e2;font:inherit}
.rq textarea,.cf input,.rq input,.rq select{background:#0d1520;color:#e6edf5;border-color:#26364a}@media(max-width:1000px){.h3{grid-template-columns:1fr}}
.h3c{height:430px}.gal{grid-template-columns:repeat(2,1fr);overflow:auto;align-content:start}.rq{flex:1}.rq textarea{flex:1;resize:none}.cb{flex:1;height:auto;min-height:0}
.h4{display:grid;grid-template-columns:calc((100% - 32px)/6) 1fr;gap:16px;margin-top:16px}
.st4 h2{font-size:15px}.stl{flex:1;overflow:auto;display:flex;flex-direction:column;gap:2px;min-height:0}.stl div{display:flex;gap:7px;align-items:flex-start;font-size:11.5px;line-height:1.3;padding:5px 6px;border-radius:6px;cursor:pointer}.stl div:hover,.stl div.on{background:#7f8c9b33}.stl i{flex:none;width:9px;height:9px;border-radius:50%;margin-top:3px;background:#3ecf6e;box-shadow:0 0 0 3px #3ecf6e33}.stl i.off{background:#e5534b;box-shadow:0 0 0 3px #e5534b33}
.dh{display:flex;align-items:center;gap:10px}.dh h2{flex:1;margin:0;font-size:17px}.dm{font-size:11px;opacity:.6}.dn{display:flex;gap:6px}.dn .bn{padding:2px 12px}
.db{display:flex;align-items:center;gap:14px;margin:10px 0}.db svg{width:76px;height:76px;border-radius:50%;border:3px solid #f2b632;background:#7f8c9b33;flex:none}.db b{display:block;font-size:15px}.db span{font-size:12.5px;opacity:.75}.bd{display:inline-block;margin-left:8px;padding:1px 9px;border-radius:10px;font-size:11px;color:#fff;background:#2fa85a}.bd.off{background:#d0453d}
.dd{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.pn{min-height:0;overflow:auto;border-radius:8px;padding:10px 12px;background:#7f8c9b1f;font-size:12.5px}.pn h3{margin:0 0 8px;font-size:13.5px}
.kp{margin-bottom:9px}.kp div{display:flex;justify-content:space-between}.kp u{display:block;height:6px;border-radius:3px;background:#7f8c9b33;margin-top:3px;text-decoration:none}.kp u s{display:block;height:100%;border-radius:3px;background:#f2b632;text-decoration:none}
.pf p{margin:0 0 6px}.pf b{opacity:.7;font-weight:600}.pg{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.pg img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
@media(max-width:1000px){.h3c{height:auto;min-height:430px}.h4{grid-template-columns:1fr}.stl{max-height:260px}.dd{grid-template-columns:1fr}}
#h4 .pn b,#h4 .db b{font-size:inherit;color:inherit;line-height:1.3}#h4 .db b{display:block;font-size:15px}#h4 .kp b{font-weight:700}#h4 .st4 h2{font-size:14px}*{scrollbar-width:none;-ms-overflow-style:none}*::-webkit-scrollbar{display:none;width:0;height:0}.hm{position:relative;margin-left:10px}.hmb{background:none;border:0;color:#fff;font:inherit;font-weight:600;padding:8px 12px;border-radius:6px;cursor:pointer}.hmb span{font-size:9px;margin-left:4px}.hmb:hover,.hm.o .hmb{background:#ffffff26}.hmd{display:none;position:absolute;top:100%;left:0;min-width:210px;background:#15202e;border:1px solid #26364a;border-top:3px solid #f2b632;border-radius:0 0 8px 8px;box-shadow:0 6px 18px #0009;z-index:70;padding:4px}.hm.o .hmd{display:block}.hmd a{display:block;padding:9px 12px;color:#e6edf5;border-radius:6px;cursor:pointer;font-size:13.5px;white-space:nowrap}.hmd a:hover{background:#1b2a3c;color:#6fb3ff}@media(max-width:800px){.hmb{padding:8px 6px}}
/* Galeri di slot bekas bagan struktur; kolom Pengaduan Masyarakat */
.hrow .h3c{height:100%;flex:1;min-width:0}.hrow #galp{flex:1}
.hrow .gal{flex:1;min-height:0}
.pgi{display:flex;gap:6px;margin-bottom:8px}.pgi input{flex:1;min-width:0;padding:8px;border-radius:6px;border:1px solid #26364a;background:#0d1520;color:#e6edf5;font:inherit}
.hmb{padding:8px 14px}
@media(max-width:800px){.hrow .h3c{height:auto;min-height:405px}}