/* Portal publik E-SAKIP - template 4 "Komando": layar kendali futuristik (latar kota hologram, panel HUD, dok modul) */
:root{--teks:#e6f7ff;--redup:#a3c2d4;--redup-2:#56768a;--hijau-hud:#53f0c4;--garis:rgba(var(--c-rgb),.22);--huruf:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;--hud:'Rajdhani','Inter',sans-serif;--sudut:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,12px 100%,0 calc(100% - 12px));--sudut-kecil:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,6px 100%,0 calc(100% - 6px))}
:root{--c:#48d5ff;--c2:#ffca72;--c3:#c0a9ff;--c-rgb:72,213,255;--dasar:#020b15;--dasar-rgb:2,11,21;--foto:none}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--huruf);font-size:14px;line-height:1.55;color:var(--teks);background:var(--dasar);min-height:100vh}
a{color:var(--c)}
h1,h2,h3{margin:0;line-height:1.2}
p{margin:0}
button,input,select{font:inherit;color:inherit}
img{max-width:100%;height:auto}
svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.p-sprite{position:absolute;width:0;height:0;overflow:hidden}
.p-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.p-lompat{position:absolute;left:12px;top:-60px;z-index:300;background:var(--c);color:var(--dasar);padding:10px 14px;font-weight:700}
.p-lompat:focus{top:12px}
::selection{background:rgba(var(--c-rgb),.35)}

/* latar */
.f-latar{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--dasar)}
.f-latar i{position:absolute;inset:0}
.f-foto{inset:-2%!important;background:url(komando/latar.jpg) center 60%/cover no-repeat;filter:var(--foto);opacity:.3}
.hal-beranda .f-foto{opacity:1}
.f-bayang{background:linear-gradient(90deg,rgba(var(--dasar-rgb),.9),rgba(var(--dasar-rgb),.45) 22%,rgba(var(--dasar-rgb),.05) 49%,rgba(var(--dasar-rgb),.15) 72%,rgba(var(--dasar-rgb),.9)),linear-gradient(180deg,rgba(var(--dasar-rgb),.55),transparent 27%,transparent 58%,rgba(var(--dasar-rgb),.85))}
body:not(.hal-beranda) .f-bayang{background:linear-gradient(180deg,rgba(var(--dasar-rgb),.55),rgba(var(--dasar-rgb),.88) 40%,var(--dasar))}
.f-kisi{background-image:linear-gradient(rgba(var(--c-rgb),.05) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--c-rgb),.05) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse at 50% 0,#000,transparent 75%);mask-image:radial-gradient(ellipse at 50% 0,#000,transparent 75%)}
.f-latar::after{content:"";position:absolute;inset:0;background:rgb(var(--c-rgb));mix-blend-mode:color;opacity:var(--tint,0);pointer-events:none}
.f-garis{opacity:.08;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(var(--c-rgb),.25) 4px)}

/* kepala HUD */
.f-pucuk{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:16px;padding:14px 2.6vw;transition:background .2s,border-color .2s;border-bottom:1px solid transparent}
.f-pucuk.gulir,body:not(.hal-beranda) .f-pucuk{background:linear-gradient(180deg,rgba(var(--dasar-rgb),.94),rgba(var(--dasar-rgb),.78));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:var(--garis)}
.f-merek{display:flex;align-items:center;gap:11px;color:var(--teks);text-decoration:none;flex:none}
.f-lambang{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--c);background:rgba(var(--c-rgb),.12);clip-path:polygon(18% 0,82% 0,100% 20%,100% 80%,80% 100%,20% 100%,0 80%,0 20%)}
.f-merek b{display:block;font:700 23px/1 var(--hud);letter-spacing:2px}
.f-merek b i{font-style:normal;color:var(--c)}
.f-merek small{display:block;font:600 10px var(--hud);letter-spacing:1.6px;color:var(--redup);margin-top:3px}
.f-lokasi{display:inline-flex;align-items:center;gap:9px;margin-left:28px;padding-left:18px;border-left:1px solid rgba(var(--c-rgb),.3);font:600 12px var(--hud);letter-spacing:2.4px;color:rgba(var(--c-rgb),.95);white-space:nowrap}
.f-lokasi i{width:8px;height:8px;background:var(--c);box-shadow:0 0 10px var(--c);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
/* dok modul melayang di bawah (pengganti menu teks) */
.f-nav{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:4px;max-width:calc(100% - 24px);padding:6px 10px;border:1px solid rgba(var(--c-rgb),.35);background:linear-gradient(rgba(var(--dasar-rgb),.72),rgba(var(--dasar-rgb),.92));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 0 30px rgba(var(--c-rgb),.12),inset 0 1px 0 rgba(var(--c-rgb),.25)}
.f-nav::before{content:"";position:absolute;left:-1px;top:-1px;width:46px;height:2px;background:var(--c);box-shadow:0 0 12px var(--c)}
.f-nav::-webkit-scrollbar{display:none}
.f-nav a{position:relative;width:44px;height:42px;display:grid;place-items:center;border:1px solid transparent;color:#83bad1;text-decoration:none;transition:.15s}
.f-nav a svg{width:19px;height:19px;filter:drop-shadow(0 0 6px rgba(var(--c-rgb),.45))}
.f-nav a span{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%,4px);padding:4px 9px;background:var(--dasar);border:1px solid rgba(var(--c-rgb),.6);color:#fff;font:600 11px var(--hud);letter-spacing:1.4px;text-transform:uppercase;white-space:nowrap;opacity:0;pointer-events:none;transition:.15s}
.f-nav a:hover,.f-nav a:focus-visible{color:#fff;border-color:rgba(var(--c-rgb),.55);background:rgba(var(--c-rgb),.12)}
.f-nav a:hover span,.f-nav a:focus-visible span{opacity:1;transform:translate(-50%,0)}
.f-nav a.aktif{color:var(--c);border-color:rgba(var(--c-rgb),.75);background:rgba(var(--c-rgb),.16);box-shadow:inset 0 -2px var(--c),0 0 14px rgba(var(--c-rgb),.25)}
.f-nav a:first-child{margin-right:6px}
.f-nav a:first-child::after{content:"";position:absolute;right:-6px;top:8px;bottom:8px;width:1px;background:rgba(var(--c-rgb),.3)}
.hal-beranda .f-nav{display:none}
body:not(.hal-beranda){padding-bottom:84px}
body:not(.hal-beranda) .p-pesan{bottom:90px}
.f-sistem{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none;font:600 12px var(--hud);letter-spacing:1px;color:#bdefff}
.hal-beranda .f-sistem{margin-left:auto}
.f-daring{display:inline-flex;align-items:center;gap:7px}
.f-daring i,.f-titik{width:7px;height:7px;border-radius:50%;background:var(--hijau-hud);box-shadow:0 0 10px var(--hijau-hud);animation:denyut 2s infinite}
.f-sistem strong{font:600 18px var(--hud);letter-spacing:1px;margin-left:8px;color:#fff}
.f-sistem small{font-size:9px;color:var(--redup)}
.f-suara{display:inline-grid;place-items:center;width:34px;height:34px;margin-left:8px;padding:0;background:transparent;border:1px solid rgba(var(--c-rgb),.45);color:var(--c);cursor:pointer;clip-path:var(--sudut-kecil);transition:.15s}
.f-suara svg{width:16px;height:16px}
.f-suara:hover,.f-suara:focus-visible{background:rgba(var(--c-rgb),.18);color:#fff}
.f-suara .s-mati,.f-suara.bisu .s-hidup{display:none}
.f-suara.bisu .s-mati{display:block}
.f-suara.bisu{color:var(--redup);border-color:rgba(var(--c-rgb),.25)}
.f-masuk{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;margin-left:10px;border:1px solid rgba(var(--c-rgb),.6);color:var(--c);text-decoration:none;font:700 12px var(--hud);letter-spacing:1.4px;clip-path:var(--sudut-kecil);transition:.15s}
.f-masuk svg{width:15px;height:15px}
.f-masuk:hover{background:var(--c);color:var(--dasar)}
.f-isi{width:100%;max-width:1340px;margin:0 auto;padding:18px 2.6vw 40px}
.hal-beranda .f-isi{max-width:none;padding:0}
.f-alis{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 12.5px var(--hud);letter-spacing:2.6px;color:rgba(var(--c-rgb),.9);white-space:nowrap}
.f-alis i{width:24px;height:1px;background:var(--c);box-shadow:0 0 8px var(--c)}

/* beranda: layar kendali */
.f-layar{position:relative;min-height:calc(100vh - 72px);display:grid;grid-template-columns:minmax(250px,340px) minmax(0,1fr) minmax(250px,340px);grid-template-rows:auto 1fr auto auto;grid-template-areas:"p1 t p2" "p3 . p4" "d d d" "v v v";gap:18px 24px;padding:2vh 2.6vw 2.6vh;overflow:hidden}
.f-tengah{grid-area:t;text-align:center;align-self:start;padding-top:2vh;position:relative;z-index:2}
.f-tengah h1{font:700 clamp(34px,3.6vw,58px)/.98 var(--hud);text-transform:uppercase;letter-spacing:2.5px;margin:16px 0 10px;text-shadow:0 4px 24px rgba(0,0,0,.6)}
.f-tengah h1 span{color:var(--c);text-shadow:0 0 26px rgba(var(--c-rgb),.45)}
.f-tengah > p{font-size:15px;line-height:1.5;color:#dcebf3;max-width:520px;margin:0 auto;text-shadow:0 2px 10px rgba(0,0,0,.8)}
.f-skor{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-top:16px;font:600 12.5px var(--hud);letter-spacing:1.6px;color:#9fc3d6}
.f-skor strong{font:700 34px var(--hud);color:#fff;text-shadow:0 0 18px rgba(var(--c-rgb),.5)}
.f-skor em{font-style:normal;color:var(--redup)}
.f-skor b{font-size:12px;color:var(--dasar);background:var(--hijau-hud);padding:1px 8px;margin-left:6px;clip-path:var(--sudut-kecil)}
.f-cari{display:flex;align-items:center;gap:8px;max-width:440px;margin:18px auto 0;height:46px;padding:0 4px 0 14px;border:1px solid rgba(var(--c-rgb),.45);background:rgba(var(--dasar-rgb),.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);clip-path:var(--sudut)}
.f-cari svg{color:var(--c)}
.f-cari input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:#fff}
.f-cari input::placeholder{color:var(--redup)}
.f-cari button{height:36px;padding:0 18px;border:0;background:var(--c);color:var(--dasar);font:700 13px var(--hud);letter-spacing:2px;cursor:pointer;clip-path:var(--sudut-kecil)}
.f-panel{position:relative;z-index:3;padding:14px 15px;background:linear-gradient(135deg,rgba(var(--dasar-rgb),.92),rgba(var(--dasar-rgb),.8));border:1px solid rgba(var(--c-rgb),.32);box-shadow:inset 0 0 24px rgba(var(--c-rgb),.06);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);clip-path:var(--sudut);transition:border-color .16s,box-shadow .16s}
.f-panel::before,.k-kartu::before,.p-pembaca-panel::before,.p-modal-panel::before{content:"";position:absolute;top:0;left:0;width:46px;height:2px;background:var(--c);box-shadow:0 0 12px var(--c);z-index:2}
.f-panel:hover{border-color:rgba(var(--c-rgb),.75);box-shadow:inset 0 0 22px rgba(var(--c-rgb),.1),0 0 22px rgba(var(--c-rgb),.12)}
.f-panel header{display:flex;align-items:center;justify-content:space-between;gap:8px;font:600 12px var(--hud);letter-spacing:1px;color:rgba(var(--c-rgb),.85)}
.f-panel header > i{font-style:normal;color:var(--hijau-hud);font-size:10px}
.f-panel header > b{color:var(--hijau-hud)}
.f-p1{grid-area:p1;align-self:start}
.f-p2{grid-area:p2;align-self:start}
.f-p3{grid-area:p3;align-self:end}
.f-p4{grid-area:p4;align-self:end}
.f-jaring{width:100%;height:auto;display:block;margin:10px 0 6px;filter:drop-shadow(0 0 5px rgba(var(--c-rgb),.35))}
.f-meta{display:flex;justify-content:space-between;gap:8px;font:600 12px var(--hud);letter-spacing:.8px;color:var(--redup)}
.f-meta i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--c);margin-right:6px}
.f-meta b{color:#bdefff}
.f-metrik{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:14px;font-size:13.5px;color:#cfe3ee}
.f-metrik b{font:700 26px/1 var(--hud);color:#fff}
.f-metrik small{font-size:12px;color:var(--redup);margin-left:1px}
.f-bar{height:3px;background:rgba(255,255,255,.08);margin-top:7px}
.f-bar i{display:block;height:100%;background:linear-gradient(90deg,rgba(var(--c-rgb),.5),var(--c));box-shadow:0 0 10px rgba(var(--c-rgb),.7)}
.f-bar-2 i{background:linear-gradient(90deg,var(--c2),#fff3d6);box-shadow:0 0 10px var(--c2)}
.f-bar-3 i{background:linear-gradient(90deg,var(--c3),#fff);box-shadow:0 0 10px var(--c3)}
.f-kolom{display:flex;align-items:stretch;gap:6px;height:118px;margin-top:12px}
.f-kolom div{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.f-kolom em{font:600 12.5px var(--hud);font-style:normal;color:#dff6ff}
.f-kolom i{flex:1;width:100%;display:flex;align-items:flex-end;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(var(--c-rgb),.4)}
.f-kolom i b{display:block;width:100%;background:linear-gradient(180deg,rgb(var(--h)),rgba(var(--h),.35));box-shadow:0 0 10px rgba(var(--h),.5)}
.f-kolom span{font:600 11px var(--hud);letter-spacing:.3px;color:var(--redup);white-space:nowrap}
.f-arus{list-style:none;margin:6px 0 0;padding:0}
.f-arus li{display:flex;align-items:center;gap:10px;padding-top:9px;margin-top:8px;border-top:1px solid rgba(var(--c-rgb),.14)}
.f-arus li:first-child{border-top:0;margin-top:0}
.f-arus li > div{flex:1;min-width:0}
.f-arus b{display:block;font-size:13.5px;font-weight:600;color:#d5f2ff}
.f-arus span{display:block;height:3px;margin-top:5px;background:rgba(255,255,255,.07)}
.f-arus s{display:block;height:100%;background:var(--p);box-shadow:0 0 8px var(--p);text-decoration:none}
.f-tautan{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font:700 11.5px var(--hud);letter-spacing:1.4px;color:var(--c);text-decoration:none}
.f-tautan svg{width:14px;height:14px}
.f-tautan:hover{color:#fff}
.f-redup{color:var(--redup);font-size:12.5px;margin-top:10px}
.f-orbit{position:absolute;left:50%;top:70%;z-index:1;border:1px solid rgba(var(--c-rgb),.33);border-radius:50%;transform:translate(-50%,-50%) rotateX(68deg);pointer-events:none;opacity:.5}
.f-orbit-a{width:46vw;height:30vh}
.f-orbit-b{width:60vw;height:40vh;border-style:dashed;opacity:.38}
.f-orbit-c{width:74vw;height:50vh;opacity:.22}
.f-dok{grid-area:d;justify-self:center;position:relative;z-index:4;display:flex;gap:clamp(4px,1.2vw,18px);padding:8px 16px;border:1px solid rgba(var(--c-rgb),.3);background:linear-gradient(rgba(var(--dasar-rgb),.5),rgba(var(--dasar-rgb),.82));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
.f-dok a{width:74px;height:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;color:#83bad1;text-decoration:none;transition:.16s}
.f-dok a svg{width:22px;height:22px;color:var(--c);filter:drop-shadow(0 0 8px rgba(var(--c-rgb),.55))}
.f-dok a small{font:700 12px var(--hud);letter-spacing:1px}
.f-dok a:hover{border-color:rgba(var(--c-rgb),.6);background:rgba(var(--c-rgb),.12);color:#fff}
.f-visi{grid-area:v;justify-self:center;position:relative;z-index:3;max-width:920px;margin:6vh auto 7vh;padding:0 20px;text-align:center}
.f-visi p{font:600 clamp(20px,2.2vw,30px)/1.3 var(--hud);letter-spacing:.6px;color:#e3f8ff;margin-top:14px;text-shadow:0 0 22px rgba(var(--c-rgb),.25)}

/* panel umum halaman isi */
.k-kartu{position:relative;padding:18px;color:var(--teks);background:linear-gradient(135deg,rgba(var(--dasar-rgb),.86),rgba(var(--dasar-rgb),.7));border:1px solid var(--garis);box-shadow:inset 0 0 26px rgba(var(--c-rgb),.05);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);clip-path:var(--sudut)}
.k-kartu h2{font:700 17px var(--hud);letter-spacing:1px;text-transform:uppercase}
.k-kartu > small{display:block;color:var(--redup);font-size:12px}
.k-redup{color:var(--redup);font-size:13px}
.k-bagian{font:700 18px var(--hud);letter-spacing:1.5px;text-transform:uppercase;margin:28px 0 12px;display:flex;align-items:baseline;gap:10px}
.k-bagian small{font:600 12px var(--huruf);letter-spacing:0;text-transform:none;color:var(--redup)}
.k-tautan{display:inline-flex;align-items:center;gap:6px;color:var(--c);font:700 12px var(--hud);letter-spacing:1.3px;text-decoration:none}
.k-angka-ikon{width:42px;height:42px;display:grid;place-items:center;color:var(--c);border:1px solid rgba(var(--c-rgb),.5);background:rgba(var(--c-rgb),.08);clip-path:polygon(18% 0,82% 0,100% 20%,100% 80%,80% 100%,20% 100%,0 80%,0 20%)}
.p-t,.k-tombol{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:0 13px;border:1px solid rgba(var(--c-rgb),.45);background:rgba(var(--c-rgb),.08);color:#cdf3ff;font:700 12.5px var(--hud);letter-spacing:1.2px;text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap;clip-path:var(--sudut-kecil);transition:.15s}
.p-t svg,.k-tombol svg{width:15px;height:15px}
.p-t:hover,.k-tombol:hover{background:var(--c);border-color:var(--c);color:var(--dasar)}
.p-t-ikon{width:36px;padding:0}
.p-t-utama{background:var(--c);border-color:var(--c);color:var(--dasar)}
.p-t-utama:hover{background:#fff;border-color:#fff}
.k-tombol-penuh{width:100%;margin-top:auto}
.k-aksi-dua{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto}

.k-judul{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:22px 24px;margin-bottom:14px;position:relative;background:linear-gradient(110deg,rgba(var(--c-rgb),.14),rgba(var(--dasar-rgb),.6) 55%);border:1px solid rgba(var(--c-rgb),.35);clip-path:var(--sudut)}
.k-judul::after{content:"";position:absolute;right:-30px;top:-60px;width:240px;height:240px;border-radius:50%;border:1px dashed rgba(var(--c-rgb),.25);pointer-events:none}
.k-judul-ikon{width:56px;height:56px;display:grid;place-items:center;color:var(--c);border:1px solid var(--c);background:rgba(var(--c-rgb),.1);box-shadow:0 0 18px rgba(var(--c-rgb),.25);clip-path:polygon(18% 0,82% 0,100% 20%,100% 80%,80% 100%,20% 100%,0 80%,0 20%)}
.k-judul-ikon svg{width:26px;height:26px}
.k-judul-teks{flex:1 1 320px;min-width:0}
.k-judul .f-alis{justify-content:flex-start;font-size:10px}
.k-judul .f-alis i:first-child{display:none}
.k-judul h1{font:700 32px/1.05 var(--hud);letter-spacing:1.8px;text-transform:uppercase;margin-top:6px}
.k-judul p{color:#9cbccd;font-size:13px;margin-top:6px;max-width:760px}
.k-tahun{display:flex;flex-wrap:wrap;gap:6px;position:relative;z-index:1}
.k-tahun a{display:inline-grid;place-items:center;height:34px;padding:0 14px;color:#cdf3ff;text-decoration:none;font:700 15px var(--hud);letter-spacing:1px;border:1px solid rgba(var(--c-rgb),.35);clip-path:var(--sudut-kecil)}
.k-tahun a:hover{background:rgba(var(--c-rgb),.12)}
.k-tahun a.aktif{background:var(--c);border-color:var(--c);color:var(--dasar)}
.k-tahap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:16px}
.k-tahap a{display:flex;align-items:center;gap:10px;padding:10px 14px;color:#8fb9cf;text-decoration:none;font:700 14px var(--hud);letter-spacing:1.2px;text-transform:uppercase;border:1px solid var(--garis);background:rgba(var(--dasar-rgb),.6);clip-path:var(--sudut-kecil);transition:.15s}
.k-tahap a i{font-style:normal;font:700 18px var(--hud);color:rgba(var(--c-rgb),.6)}
.k-tahap a:hover{color:#fff;border-color:rgba(var(--c-rgb),.5)}
.k-tahap a.aktif{color:#fff;border-color:var(--c);background:rgba(var(--c-rgb),.14);box-shadow:inset 0 -2px var(--c)}
.k-tahap a.aktif i{color:var(--c)}

.k-alat{padding:12px;margin-bottom:14px;border:1px solid var(--garis);background:rgba(var(--dasar-rgb),.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);clip-path:var(--sudut)}
.k-alat-atas{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.k-cari{flex:1 1 260px;display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border:1px solid rgba(var(--c-rgb),.28);background:rgba(255,255,255,.03);clip-path:var(--sudut-kecil)}
.k-cari:focus-within{border-color:var(--c)}
.k-cari svg{color:var(--c)}
.k-cari input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:#fff}
.k-cari input::placeholder{color:var(--redup)}
.k-jumlah{font:600 12px var(--hud);letter-spacing:1px;text-transform:uppercase;color:var(--redup);padding:0 6px}
.k-saring{display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;margin-top:10px;padding-bottom:2px}
.k-saring button,.k-periode button{flex:none;height:32px;padding:0 13px;border:1px solid rgba(var(--c-rgb),.25);background:transparent;color:#9cc3d6;font:700 12.5px var(--hud);letter-spacing:1px;text-transform:uppercase;cursor:pointer;clip-path:var(--sudut-kecil)}
.k-saring button:hover,.k-periode button:hover{color:#fff;border-color:rgba(var(--c-rgb),.6)}
.k-saring button.aktif,.k-periode button.aktif{background:rgba(var(--c-rgb),.18);border-color:var(--c);color:#fff}
.k-alat-kedua{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:-4px 0 14px;font-size:13px;color:var(--redup)}
.k-alat-kedua select,.k-urut select{height:36px;border:1px solid rgba(var(--c-rgb),.3);background:rgba(var(--dasar-rgb),.85);color:#e6f7ff;padding:0 12px;max-width:100%}
select option{background:var(--dasar);color:#e6f7ff}

.k-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.k-skpd{display:flex;flex-direction:column;gap:12px;padding:16px;transition:border-color .15s,box-shadow .15s}
.k-skpd:hover{border-color:rgba(var(--c-rgb),.65);box-shadow:inset 0 0 26px rgba(var(--c-rgb),.1)}
.k-skpd-kepala{display:flex;align-items:center;gap:12px}
.k-skpd-kepala h3{font-size:14px;font-weight:600;color:#eaf9ff;line-height:1.35}
.k-skpd-kepala small{display:block;color:var(--redup);font-size:11.5px;margin-top:2px}
.k-skpd-no{flex:none;min-width:34px;height:34px;padding:0 6px;display:grid;place-items:center;color:var(--c);font:700 15px var(--hud);border:1px solid rgba(var(--c-rgb),.4);background:rgba(var(--c-rgb),.07);clip-path:var(--sudut-kecil)}
.k-skpd-no.juara{color:var(--dasar);border:0}
.k-skpd-no.j1{background:#ffd166} .k-skpd-no.j2{background:#cbd5e1} .k-skpd-no.j3{background:#f4a261}
.k-status{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;padding:3px 10px;font:700 12px var(--hud);letter-spacing:1px;text-transform:uppercase;color:#fff;background:rgba(var(--h),.28);border:1px solid rgba(var(--h),.7);clip-path:var(--sudut-kecil)}
.k-status i{width:7px;height:7px;border-radius:50%;background:rgb(var(--h));box-shadow:0 0 8px rgb(var(--h))}
.k-statistik{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.k-statistik div{padding:7px 10px;border:1px solid rgba(var(--c-rgb),.15);background:rgba(var(--c-rgb),.05)}
.k-statistik dt{font:600 11px var(--hud);letter-spacing:1px;text-transform:uppercase;color:var(--redup)}
.k-statistik dd{margin:0;font:700 22px/1.1 var(--hud);color:#fff}
.k-chip-baris{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.k-chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:30px;padding:0 10px;border:1px solid rgba(var(--c-rgb),.35);background:rgba(var(--c-rgb),.06);color:#bfeeff;font:700 12.5px var(--hud);letter-spacing:.6px;cursor:pointer;text-decoration:none;clip-path:var(--sudut-kecil);transition:.15s}
.k-chip svg{width:13px;height:13px}
.k-chip:hover{background:var(--c);border-color:var(--c);color:var(--dasar)}
.k-chip.mati,.k-chip.mati:hover{cursor:default;color:var(--redup-2);background:transparent;border:1px dashed rgba(255,255,255,.14)}
.k-chip.redam{opacity:.28}
.k-chip-angka .k-chip{border-color:rgba(var(--h),.55);background:rgba(var(--h),.16);color:#fff}
.k-chip-angka .k-chip i{width:7px;height:7px;border-radius:50%;background:rgb(var(--h));box-shadow:0 0 6px rgb(var(--h))}
.k-chip-angka .k-chip:hover{background:rgb(var(--h));border-color:rgb(var(--h));color:#fff}
.k-chip-angka .k-chip.k-chip-semua{border-color:var(--c);background:rgba(var(--c-rgb),.18)}
.k-chip-angka .k-chip.k-chip-semua:hover{background:var(--c);color:var(--dasar)}
.k-meter{display:flex;align-items:center;gap:10px}
.k-meter span{flex:1;height:4px;background:rgba(255,255,255,.07);overflow:hidden}
.k-meter span b{display:block;height:100%;background:linear-gradient(90deg,rgba(var(--c-rgb),.45),var(--c));box-shadow:0 0 8px rgba(var(--c-rgb),.6)}
.k-meter em{font:600 12px var(--hud);font-style:normal;letter-spacing:.8px;color:var(--redup);white-space:nowrap}
.k-meter em.penuh{color:var(--hijau-hud)}
.k-nilai-isi{display:flex;align-items:center;gap:10px}
.k-nilai-isi b{font:700 34px/1 var(--hud);color:#fff;text-shadow:0 0 14px rgba(var(--c-rgb),.35)}
.k-redup-kartu{opacity:.6}
.k-kosong{margin-top:14px;padding:26px;text-align:center;color:var(--redup);border:1px dashed rgba(var(--c-rgb),.3);background:rgba(var(--dasar-rgb),.6)}
.k-catatan{display:flex;align-items:flex-start;gap:8px;margin-top:16px;font-size:12px;color:var(--redup)}
.k-catatan svg{width:15px;height:15px;color:var(--c);margin-top:1px}

/* cincin */
.k-cincin{--p:0;--t:110px;--tebal:9px;position:relative;flex:none;width:var(--t);height:var(--t);border-radius:50%;display:grid;place-items:center;align-content:center;text-align:center;background:conic-gradient(var(--cincin,var(--c)) calc(var(--p) * 1%),rgba(255,255,255,.07) 0);filter:drop-shadow(0 0 8px rgba(var(--c-rgb),.35))}
.k-cincin::before{content:"";position:absolute;inset:var(--tebal);border-radius:50%;background:var(--dasar);box-shadow:inset 0 0 0 1px rgba(var(--c-rgb),.18)}
.k-cincin > *{position:relative}
.k-cincin b{font:700 22px/1 var(--hud);color:#fff}
.k-cincin b em{font-style:normal;font-size:.6em;color:var(--redup)}
.k-cincin-sedang{--t:104px}
.k-cincin-kecil{--t:52px;--tebal:5px}
.k-cincin-kecil b{font-size:14px}

/* kategori capaian */
.h-na{--h:148,156,171} .h-k1{--h:190,40,40} .h-k2{--h:239,68,68} .h-k3{--h:249,115,22} .h-k4{--h:251,146,60} .h-k5{--h:250,204,21} .h-pas{--h:52,211,153} .h-lebih{--h:56,189,248}
.w-hijau{--h:52,211,153} .w-kuning{--h:250,204,21} .w-merah{--h:248,80,80}
.k-batang-tumpuk{display:flex;height:10px;gap:2px;overflow:hidden;background:rgba(255,255,255,.05)}
.k-batang-tumpuk span{min-width:4px;background:rgb(var(--h));box-shadow:0 0 8px rgba(var(--h),.5)}
.k-batang-tipis{height:6px}
.k-legenda{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--redup)}
.k-legenda li{display:inline-flex;align-items:center;gap:6px}
.k-legenda i{width:9px;height:9px;background:rgb(var(--h));box-shadow:0 0 6px rgb(var(--h))}
.k-legenda b{color:#fff}
.k-ringkas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:16px}
.k-ringkas-item{display:flex;align-items:center;gap:14px;padding:16px}
.k-ringkas-item .k-cincin{--cincin:rgb(var(--h))}
.k-ringkas-item > div:last-child b{display:block;font:700 28px/1 var(--hud);color:#fff}
.k-ringkas-item small{color:var(--redup);font-size:12px}
.k-tab{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;margin-bottom:14px;border:1px solid var(--garis);background:rgba(var(--dasar-rgb),.7);clip-path:var(--sudut-kecil)}
.k-tab button{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px;border:0;background:transparent;color:#9cc3d6;font:700 13px var(--hud);letter-spacing:1.2px;text-transform:uppercase;cursor:pointer;clip-path:var(--sudut-kecil)}
.k-tab button svg{width:15px;height:15px}
.k-tab button.aktif{background:var(--c);color:var(--dasar)}
.k-periode{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.k-urut{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--c)}
.k-sebaran{display:flex;align-items:center;gap:22px;margin-bottom:14px}
.k-sebaran-isi{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.k-sebaran-isi > b{font:700 17px var(--hud);letter-spacing:1px;text-transform:uppercase}
.k-sebaran-isi > small{color:var(--redup);font-size:12px;margin-top:-6px}
.k-eval-atas{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
.k-podium{list-style:none;margin:16px 0 0;padding:0;display:flex;align-items:flex-end;justify-content:center;gap:12px;min-height:240px}
.k-podium li{flex:1;max-width:190px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.k-podium-nama{font:700 14px/1.2 var(--hud);letter-spacing:1px;text-transform:uppercase;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.k-podium-nilai{font:700 24px var(--hud);display:inline-flex;align-items:center;gap:6px;color:#fff}
.k-podium-tiang{width:100%;display:grid;place-items:center;border:1px solid rgba(var(--c-rgb),.55);border-bottom:0;background:linear-gradient(180deg,rgba(var(--c-rgb),.35),rgba(var(--c-rgb),.04));box-shadow:inset 0 2px 0 var(--c);clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%,0 10px)}
.k-podium-tiang i{font-style:normal;font:700 34px var(--hud);color:#fff;text-shadow:0 0 16px var(--c)}
.k-podium-1 .k-podium-tiang{height:130px}
.k-podium-2 .k-podium-tiang{height:98px}
.k-podium-3 .k-podium-tiang{height:74px}
.k-eval-ringkas{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px 18px}
.k-eval-ringkas .k-pred-daftar{grid-column:1/-1;margin-top:0}
.k-eval-teks b{display:flex;align-items:center;gap:8px;font:700 18px var(--hud);letter-spacing:1px;text-transform:uppercase}
.k-eval-teks small{color:var(--redup);font-size:12px}
.k-pred-daftar{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.k-pred-daftar li{display:grid;grid-template-columns:44px 1fr 28px;align-items:center;gap:10px}
.k-pred-daftar i{height:6px;background:rgba(255,255,255,.07)}
.k-pred-daftar i b{display:block;height:100%;background:var(--p);box-shadow:0 0 8px var(--p)}
.k-pred-daftar em{font:700 15px var(--hud);font-style:normal;text-align:right}
.k-predikat,[data-predikat]{--p:#8aa0b4}
.k-predikat{display:inline-grid;place-items:center;min-width:36px;height:22px;padding:0 7px;font:700 13px var(--hud);font-style:normal;letter-spacing:.5px;color:#03111c;background:var(--p);clip-path:var(--sudut-kecil)}
[data-predikat="AA"]{--p:#2dd4bf} [data-predikat="A"]{--p:#4ade80} [data-predikat="BB"]{--p:#60a5fa} [data-predikat="B"]{--p:#38bdf8}
[data-predikat="CC"]{--p:#fbbf24} [data-predikat="C"]{--p:#fb923c} [data-predikat="D"]{--p:#f87171}
.k-dok-ringkas{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-bottom:16px}
.k-dok-item{display:flex;align-items:center;gap:12px;padding:14px}
.k-dok-item b{display:block;font-size:13px;font-weight:600;line-height:1.3}
.k-dok-item small{color:var(--redup);font-size:11.5px}
.k-daftar-aturan{display:flex;flex-direction:column;gap:10px}
.k-aturan{display:flex;align-items:center;gap:16px;padding:14px 18px}
.k-aturan-tahun{flex:none;width:60px;height:60px;display:grid;place-items:center;color:var(--c);font:700 19px var(--hud);border:1px solid rgba(var(--c-rgb),.5);background:rgba(var(--c-rgb),.08);clip-path:polygon(18% 0,82% 0,100% 20%,100% 80%,80% 100%,20% 100%,0 80%,0 20%)}
.k-aturan-teks{flex:1;min-width:0}
.k-aturan-teks h3{font-size:14px;font-weight:600}
.k-aturan-teks small{color:var(--redup);font-size:12px}
.k-galeri{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.k-foto{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--garis);clip-path:var(--sudut)}
.k-foto img{width:100%;height:100%;object-fit:cover;transition:transform .3s,filter .3s;filter:saturate(.85)}
.k-foto:hover img{transform:scale(1.05);filter:none}
.k-foto span{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 12px;font-size:12px;font-weight:600;line-height:1.35;background:linear-gradient(transparent,rgba(var(--dasar-rgb),.95))}
.k-foto span small{display:block;color:var(--c);font-size:11px}
.k-kontak{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px}
.k-kontak-alamat{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.k-kontak-alamat p{color:#9cbccd}
.k-pintasan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;margin-top:8px}
.k-pintasan a{display:flex;flex-direction:column;gap:8px;padding:12px;color:#cdf3ff;text-decoration:none}
.k-pintasan a svg{color:var(--c)}
.k-pintasan a b{font:700 13px var(--hud);letter-spacing:1px;text-transform:uppercase}
.k-peta{padding:0;overflow:hidden;min-height:380px}
.k-peta iframe{display:block;width:100%;height:100%;min-height:380px;border:0;filter:invert(.9) hue-rotate(180deg) saturate(.7)}
.k-pesan{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:44px 24px}
.k-galat-kode{font:700 96px/1 var(--hud);color:var(--c);text-shadow:0 0 30px rgba(var(--c-rgb),.6);letter-spacing:6px}
.k-galat b{font:700 22px var(--hud);letter-spacing:1px;text-transform:uppercase}
.k-galat p{color:var(--redup)}

/* kaki */
.f-kaki{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding:16px 2.6vw;border-top:1px solid var(--garis);background:rgba(var(--dasar-rgb),.8);font:600 11px var(--hud);letter-spacing:1px;color:var(--redup)}
.f-kaki span{display:inline-flex;align-items:center;gap:10px}
.f-kaki i{width:3px;height:3px;border-radius:50%;background:var(--c)}

/* pembaca laporan dan rincian indikator */
.p-pembaca,.p-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:2vh 2vw}
.p-pembaca-latar{position:absolute;inset:0;background:rgba(var(--dasar-rgb),.78);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.p-pembaca-panel{position:relative;width:min(1340px,100%);height:94vh;display:flex;flex-direction:column;overflow:hidden;background:var(--dasar);border:1px solid rgba(var(--c-rgb),.65);box-shadow:0 0 40px rgba(var(--c-rgb),.18);clip-path:var(--sudut);animation:muncul .22s}
.p-pembaca-kepala{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 18px;background:linear-gradient(110deg,rgba(var(--c-rgb),.14),transparent 60%);border-bottom:1px solid var(--garis)}
.p-pembaca-teks{flex:1 1 260px;min-width:0}
.p-pembaca-teks small{display:block;color:var(--c);font:600 12px var(--hud);letter-spacing:1.2px;text-transform:uppercase}
.p-pembaca-teks h2{font:700 21px var(--hud);letter-spacing:1px;text-transform:uppercase}
.p-pembaca-pilih{display:flex;flex-direction:column;gap:2px;flex:1 1 240px;max-width:420px}
.p-pembaca-pilih label{font:600 11px var(--hud);letter-spacing:1px;color:var(--c)}
.p-pembaca-pilih select{height:34px;border:1px solid rgba(var(--c-rgb),.35);background:rgba(255,255,255,.04);color:#fff;padding:0 8px;font-size:12.5px}
.p-pembaca-alat{display:flex;flex-wrap:wrap;gap:6px}
.p-pembaca-badan{position:relative;flex:1;min-height:0;padding:12px;background:rgba(255,255,255,.02)}
.p-pembaca-badan iframe{width:100%;height:100%;border:0;background:#fff}
.p-memuat{position:absolute;inset:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--dasar);color:var(--redup);font:600 13px var(--hud);letter-spacing:1.4px;text-transform:uppercase;z-index:1}
.p-memuat span{width:44px;height:44px;border-radius:50%;border:2px solid rgba(var(--c-rgb),.2);border-top-color:var(--c);box-shadow:0 0 14px rgba(var(--c-rgb),.35);animation:putar .8s linear infinite}
.p-modal-panel{position:relative;width:min(1000px,100%);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;background:var(--dasar);border:1px solid rgba(var(--c-rgb),.65);box-shadow:0 0 40px rgba(var(--c-rgb),.18);clip-path:var(--sudut);animation:muncul .22s}
.p-modal-panel > header{display:flex;align-items:center;gap:12px;padding:16px 16px 12px;border-bottom:1px solid var(--garis)}
.p-modal-panel > header div{flex:1}
.p-modal-panel small{color:var(--c);font:600 12px var(--hud);letter-spacing:1px;text-transform:uppercase}
.p-modal-panel h3{font:700 19px var(--hud);letter-spacing:1px;text-transform:uppercase}
.p-modal-badan{overflow:auto}
.p-ind-wadah{overflow:auto}
.p-ind{width:100%;border-collapse:collapse;font-size:12.5px;color:#dbeefa}
.p-ind th{position:sticky;top:0;background:#0b2233;color:var(--c);text-align:left;padding:9px 10px;font:700 12px var(--hud);letter-spacing:1px;text-transform:uppercase}
.p-ind td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.07);vertical-align:top}
.p-ind .p-kanan{text-align:right;white-space:nowrap}
.p-ind-sasaran td{background:rgba(var(--c-rgb),.08);color:var(--c)}
.p-cap{display:inline-block;padding:1px 7px;font-weight:700;color:#fff;font-size:11.5px}
.c-na{background:#64748b} .c-k1{background:#991b1b} .c-k2{background:#dc2626} .c-k3{background:#ea580c} .c-k4{background:#f08a24} .c-k5{background:#ca8a04} .c-pas{background:#059669} .c-lebih{background:#2563eb}
.p-redup{color:var(--redup)}
.p-kosong{display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px;color:var(--redup)}
.p-pesan{position:fixed;left:50%;bottom:22px;transform:translate(-50%,16px);z-index:120;padding:11px 18px;background:var(--dasar);border:1px solid var(--c);color:#d9f7ff;font:600 13px var(--hud);letter-spacing:1px;box-shadow:0 0 22px rgba(var(--c-rgb),.25);opacity:0;pointer-events:none;transition:.25s}
.p-pesan.tampil{opacity:1;transform:translate(-50%,0)}
body.terkunci{overflow:hidden}
@keyframes muncul{from{opacity:0;transform:scale(.985)}}
@keyframes putar{to{transform:rotate(360deg)}}
@keyframes denyut{50%{opacity:.4;box-shadow:0 0 2px var(--hijau-hud)}}


/* beranda pas satu layar (desktop): kelas html.f-pas dan --z dipasang portal.js sesuai ukuran layar */
html.f-pas,html.f-pas body{height:100%;overflow:hidden}
.f-pas .f-layar{height:calc(100vh - var(--pucuk,72px));min-height:0;grid-template-columns:calc(340px * var(--z,1)) minmax(0,1fr) calc(340px * var(--z,1));grid-template-rows:auto 1fr auto auto;grid-template-areas:"p1 t p2" "p3 t p4" "d d d" "v v v";gap:1.6vh 2vw;padding:1.4vh 2.2vw 1.2vh}
.f-pas .f-tengah,.f-pas .f-panel,.f-pas .f-dok,.f-pas .f-visi{zoom:var(--z,1)}
.f-pas .f-tengah{padding-top:1vh}
.f-pas .f-pucuk > *{zoom:var(--zp,1)}
.f-pas .f-visi{margin:0;max-width:1100px;display:flex;align-items:center;gap:14px;text-align:left}
.f-pas .f-visi .f-alis{flex:none}
.f-pas .f-visi p{margin:0;font-size:15px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.f-pas .f-kaki{display:none}

/* responsif */
@media (max-width:1180px){
	.f-daring{display:none}
}
@media (max-width:1050px){
	.f-layar{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;grid-template-areas:"t t" "d d" "p1 p2" "p3 p4" "v v";min-height:0}
	.f-p1,.f-p2,.f-p3,.f-p4{align-self:stretch}
	.f-orbit{display:none}
	.f-dok{flex-wrap:wrap;justify-content:center}
	.k-eval-atas,.k-kontak{grid-template-columns:1fr}
}
@media (max-width:760px){
	.f-foto{background-image:url(komando/latar-ponsel.jpg);background-position:center 30%;background-size:cover;inset:0!important}
	.f-pucuk{flex-wrap:wrap;gap:8px 10px;padding:10px 16px}
	.f-merek b{font-size:20px}
	.f-merek small{font-size:9px}
	.f-sistem strong{font-size:15px;margin-left:0}
	.f-masuk{margin-left:4px;padding:0 10px}
	.f-masuk span{display:none}
	.f-lokasi{display:none}
	.f-nav{bottom:8px;max-width:calc(100% - 16px);overflow-x:auto;scrollbar-width:none;padding:5px 6px;justify-content:flex-start}
	.f-nav a{flex:none;width:40px}
	.f-nav a span{display:none}
	.f-isi{padding:12px 16px 32px}
	.f-layar{grid-template-columns:1fr;grid-template-areas:"t" "d" "p1" "p2" "p3" "p4" "v";padding:12px 16px 20px;gap:12px}
	.f-tengah{padding-top:4vh;padding-bottom:30vh}
	.f-tengah h1{font-size:34px}
	.f-alis{font-size:10.5px;letter-spacing:1.4px;white-space:normal}
	.f-dok{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:6px;width:100%}
	.f-dok a{width:auto;height:58px}
	.k-judul{padding:18px}
	.k-judul h1{font-size:24px}
	.k-tahap{display:flex;overflow-x:auto;scrollbar-width:none}
	.k-tahap a{flex:none}
	.k-grid,.k-ringkas{grid-template-columns:1fr}
	.k-sebaran{flex-direction:column;align-items:stretch}
	.k-sebaran .k-cincin{align-self:center}
	.k-urut{margin-left:0;width:100%}
	.k-urut select{flex:1}
	.k-podium{gap:6px;min-height:210px}
	.k-podium-nama{font-size:12px}
	.k-podium-nilai{font-size:17px;flex-direction:column;gap:2px}
	.k-aturan{flex-wrap:wrap}
	.k-aturan .k-tombol{width:100%}
	.k-pintasan{grid-template-columns:1fr}
	.p-pembaca,.p-modal{padding:0}
	.p-pembaca-panel{height:100vh}
	.p-pembaca-alat .p-t span{display:none}
	.p-pembaca-alat .p-t{width:36px;padding:0}
	.k-peta,.k-peta iframe{min-height:300px}
	.f-kaki{padding:14px 16px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* kartu melayang bertingkat (hover panel beranda dan dok modul) */
[data-pohon]{cursor:pointer}
.f-panel:focus-visible{outline:2px solid var(--c);outline-offset:3px}
.f-tumpuk{position:fixed;inset:0;z-index:90;pointer-events:none}
.f-melayang{position:absolute;max-height:min(72vh,640px);overflow:auto;pointer-events:auto;padding:12px 10px 9px;color:var(--teks);background:linear-gradient(145deg,rgba(var(--dasar-rgb),.97),rgba(var(--dasar-rgb),.93));border:1px solid rgba(var(--c-rgb),.45);box-shadow:0 7px 18px rgba(0,0,0,.4),inset 0 0 18px rgba(var(--c-rgb),.05);-webkit-backdrop-filter:blur(13px);backdrop-filter:blur(13px);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,10px 100%,0 calc(100% - 10px));scrollbar-width:thin;scrollbar-color:rgba(var(--c-rgb),.35) transparent;filter:saturate(.8);transition:border-color .14s ease;animation:muncul .18s}
.f-melayang.teratas{filter:none;border-color:rgba(var(--c-rgb),.9);box-shadow:0 12px 34px rgba(0,0,0,.5),0 0 18px rgba(var(--c-rgb),.14),inset 0 0 22px rgba(var(--c-rgb),.08)}
.f-melayang::before{content:"";position:absolute;left:0;top:0;width:45px;height:2px;background:var(--c);box-shadow:0 0 9px var(--c)}
.fm-kepala{display:flex;justify-content:space-between;align-items:center;gap:6px;font:600 11px var(--hud);letter-spacing:1px;color:rgba(var(--c-rgb),.85)}
.fm-tingkat{margin-left:auto;color:var(--hijau-hud);white-space:nowrap;font-size:9.5px}
.fm-tutup{display:none;width:22px;height:22px;border:1px solid rgba(var(--c-rgb),.4);background:transparent;color:var(--c);font:700 12px var(--hud);cursor:pointer}
@media (hover:none){.fm-tutup{display:inline-grid;place-items:center}}
.fm-judul{font:700 18px/1.1 var(--hud);letter-spacing:.5px;margin-top:9px;color:#fff}
.fm-ringkas{margin-top:8px;padding:7px 8px;background:rgba(var(--c-rgb),.07);border:1px solid rgba(var(--c-rgb),.17)}
.fm-ringkas b{display:block;font:700 17px var(--hud);color:var(--c)}
.fm-ringkas span{display:block;font-size:12.5px;line-height:1.4;color:#9cbccd;margin-top:2px}
.fm-daftar{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.fm-baris{display:grid;grid-template-columns:12px minmax(0,1fr) auto;align-items:center;gap:6px;width:100%;padding:7px 6px;text-align:left;text-decoration:none;color:#dff8ff;background:rgba(var(--c-rgb),.05);border:1px solid rgba(var(--c-rgb),.17);cursor:pointer;font:inherit;transition:background-color .12s,border-color .12s}
.fm-baris:hover,.fm-baris:focus-visible,.fm-baris.aktif{outline:none;background:rgba(var(--c-rgb),.16);border-color:rgba(var(--c-rgb),.85);box-shadow:inset 2px 0 var(--c)}
.fm-panah{font:700 13px var(--hud);font-style:normal;color:var(--c);text-align:center}
.fm-teks{min-width:0}
.fm-teks b{display:block;font:600 14px/1.2 var(--hud);letter-spacing:.3px}
.fm-teks small{display:block;font-size:11.5px;line-height:1.35;color:var(--redup);margin-top:2px}
.fm-nilai{font:700 12px var(--hud);font-style:normal;color:var(--c);text-align:right;max-width:76px;overflow-wrap:anywhere}
.fm-ujung{padding:9px 5px;text-align:center;color:var(--c);border:1px dashed rgba(var(--c-rgb),.3);font:600 10px var(--hud);letter-spacing:.8px}
.fm-kaki{display:flex;justify-content:space-between;gap:6px;margin-top:8px;padding-top:7px;border-top:1px solid rgba(var(--c-rgb),.17);font:600 9.5px var(--hud);letter-spacing:.9px;color:var(--redup)}
.fm-kaki a{color:var(--c);text-decoration:none}
.fm-kaki a:hover{color:#fff}
@media (max-width:760px){.f-melayang{max-height:62vh}}
@media (prefers-reduced-motion:reduce){.f-melayang,.fm-baris{transition:none!important;animation:none!important}}

/* petunjuk cara membuka kartu rincian */
.f-petunjuk{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:6px 12px;border:1px solid rgba(var(--c-rgb),.35);background:rgba(var(--dasar-rgb),.7);font-size:12.5px;color:#d6ecf6;clip-path:var(--sudut-kecil)}
.f-petunjuk svg{width:15px;height:15px;color:var(--c)}
.f-petunjuk .sentuh{display:none}
@media (hover:none){.f-petunjuk .kursor{display:none}.f-petunjuk .sentuh{display:inline}}
.f-panel header > i.f-per{flex:none;font-style:normal;color:#bfe9f7;font-size:11px;letter-spacing:.8px;white-space:nowrap}
/* ponsel: tanpa efek kaca buram supaya ringan */
@media (max-width:760px){
	.f-panel,.k-kartu,.k-alat,.f-dok,.f-nav,.f-pucuk,.f-cari,.f-melayang,.p-pembaca-latar{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
	.f-panel,.k-kartu,.k-alat{background:rgba(var(--dasar-rgb),.94)}
	.f-nav,.f-dok{background:rgba(var(--dasar-rgb),.96)}
}

/* ===== Pilihan warna (SETTING > Tampilan Portal Publik). Bawaan template ini: biru ===== */
body.warna-biru{--tint:0;--c:#48d5ff;--c2:#ffca72;--c3:#c0a9ff;--c-rgb:72,213,255;--dasar:#020b15;--dasar-rgb:2,11,21;--foto:none}
body.warna-toska{--tint:.3;--c:#3ef0d0;--c2:#ffb36b;--c3:#8fd3ff;--c-rgb:62,240,208;--dasar:#01110f;--dasar-rgb:1,17,15;--foto:none}
body.warna-hijau{--tint:.3;--c:#5cf08a;--c2:#ffd36b;--c3:#9be7ff;--c-rgb:92,240,138;--dasar:#020f08;--dasar-rgb:2,15,8;--foto:none}
body.warna-ungu{--tint:.3;--c:#b794ff;--c2:#ff9de2;--c3:#7fdcff;--c-rgb:183,148,255;--dasar:#0a0518;--dasar-rgb:10,5,24;--foto:none}
body.warna-marun{--tint:.32;--c:#ff5d7a;--c2:#ffcf70;--c3:#ffa0b4;--c-rgb:255,93,122;--dasar:#130308;--dasar-rgb:19,3,8;--foto:none}
body.warna-jingga{--tint:.3;--c:#ffb547;--c2:#ff7a59;--c3:#ffe1a8;--c-rgb:255,181,71;--dasar:#140902;--dasar-rgb:20,9,2;--foto:none}
body.warna-grafit{--tint:.5;--c:#d7e3ee;--c2:#fbbf24;--c3:#9fb3c8;--c-rgb:215,227,238;--dasar:#080a0e;--dasar-rgb:8,10,14;--foto:none}
/* warna tambahan 20-10-2026 */
body.warna-nila{--tint:.3;--c:#8f9bff;--c2:#ffd166;--c3:#c4b5fd;--c-rgb:143,155,255;--dasar:#07061a;--dasar-rgb:7,6,26;--foto:none}
body.warna-langit{--tint:.25;--c:#5fd4ff;--c2:#ffb067;--c3:#a5f3fc;--c-rgb:95,212,255;--dasar:#03121d;--dasar-rgb:3,18,29;--foto:none}
body.warna-fuksia{--tint:.32;--c:#ff7ae6;--c2:#ffd166;--c3:#f9a8d4;--c-rgb:255,122,230;--dasar:#16031a;--dasar-rgb:22,3,26;--foto:none}
body.warna-kopi{--tint:.35;--c:#f0b07a;--c2:#ffe0a3;--c3:#d6b59b;--c-rgb:240,176,122;--dasar:#120a06;--dasar-rgb:18,10,6;--foto:none}
body.warna-emas{--tint:.35;--c:#ffd36b;--c2:#7fc8ff;--c3:#ffe8a8;--c-rgb:255,211,107;--dasar:#070b16;--dasar-rgb:7,11,22;--foto:none}

/* nilai SAKIP pemerintah kota di halaman evaluasi */
.k-eval-kota{display:flex;align-items:center;gap:16px;margin-bottom:16px;border-left:4px solid var(--c)}
.k-eval-kota-teks{flex:1;min-width:0}
.k-eval-kota-teks b{display:block;font:700 18px var(--hud);letter-spacing:1px;text-transform:uppercase}
.k-eval-kota-teks small{display:block;color:var(--redup);font-size:12.5px;margin-top:2px}
.k-eval-kota-nilai{display:flex;align-items:center;gap:10px;flex:none}
.k-eval-kota-nilai b{font:700 40px/1 var(--hud);color:var(--c);text-shadow:0 0 18px rgba(var(--c-rgb),.45)}
@media (max-width:760px){.k-eval-kota{flex-wrap:wrap}.k-eval-kota-nilai{width:100%}}