:root{--ink:#12294d;--mut:#5c7396;--blue:#2f6df6;--teal:#22b8cf;--green:#0f9d58;--amber:#b87d00;--red:#d93c4f}
*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--ink);font:16px/1.5 -apple-system,"Segoe UI",system-ui,sans-serif;background:#f4f9ff;background:linear-gradient(135deg,#7fb8e6,#a9d2ee 35%,#cfe4f3 70%,#e6f0f8) fixed}
main{max-width:1280px;margin:0 auto;padding:8px 24px 48px;display:grid;gap:18px}main.narrow{max-width:420px;padding-top:12vh}
.top{max-width:1280px;margin:0 auto;padding:28px 24px 10px;display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
h1{margin:.1em 0 0;font-size:1.9rem}.eyebrow{margin:0;font-size:.72rem;letter-spacing:.14em;font-weight:700;color:var(--mut)}
.card{padding:20px 24px;border-radius:22px;background:#fffffff0;border:1px solid rgba(255,255,255,.88);box-shadow:0 12px 34px rgba(33,70,120,.16)}
@supports (backdrop-filter:blur(1px)){.card{background:rgba(255,255,255,.56);backdrop-filter:blur(22px) saturate(160%)}}
.slim{padding:12px 20px;display:flex;gap:18px;flex-wrap:wrap;align-items:center;font-size:.9rem}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.kpi .v{font-size:2rem;font-weight:700;margin:.15em 0}.kpi .s{font-size:.85rem;color:var(--mut)}
.up{color:var(--green)}.down{color:var(--red)}.mut{color:var(--mut)}.small{font-size:.8rem}.ok{color:var(--green)}.warn{color:var(--amber)}.bad{color:var(--red)}
.tag{display:inline-block;padding:1px 9px;border-radius:999px;font-size:.7rem;font-weight:700;background:#fff3d6;color:var(--amber)}
.ctl{display:flex;gap:12px;align-items:center}select,input{font:inherit;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.75);color:var(--ink)}
.btn{font:inherit;font-weight:600;padding:9px 20px;border:0;border-radius:999px;background:var(--blue);color:#fff;cursor:pointer}.btn.ghost{background:rgba(255,255,255,.75);color:var(--ink)}
label{display:block;margin:12px 0;color:var(--mut);font-size:.85rem}label input{display:block;width:100%;margin-top:4px;border-radius:12px}
.chart svg{width:100%;height:auto;display:block}.leg{display:flex;gap:18px;font-size:.8rem;color:var(--mut)}.leg span::before{content:"";display:inline-block;width:18px;height:3px;margin-right:6px;vertical-align:middle;border-radius:2px}
.k1::before{background:var(--blue)}.k2::before{background:#9db2d0}
.scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:.92rem}th{font-size:.72rem;letter-spacing:.08em;color:var(--mut);text-align:right;padding:8px 10px;border-bottom:1px solid rgba(18,41,77,.12)}
td{text-align:right;padding:9px 10px;border-bottom:1px solid rgba(18,41,77,.06)}th:first-child,td:first-child,th:nth-child(2),td:nth-child(2){text-align:left}
.g1{stroke:#2f6df6}.g2{stroke:#9db2d0}.ax{stroke:#12294d;stroke-opacity:.15}.tx{fill:#5c7396;font-size:11px}
@media(max-width:1100px){.grid4{grid-template-columns:1fr 1fr}.grid2{grid-template-columns:1fr}}
@media(max-width:560px){.grid4{grid-template-columns:1fr}main,.top{padding-left:16px;padding-right:16px}}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}td a{color:var(--ink);font-weight:600}
.c1{stroke:#2f6df6;fill:#2f6df6}.c2{stroke:#22b8cf;fill:#22b8cf}.c3{stroke:#0f9d58;fill:#0f9d58}.c4{stroke:#d99100;fill:#d99100}.c5{stroke:#d93c4f;fill:#d93c4f}
.leg .c1::before{background:#2f6df6}.leg .c2::before{background:#22b8cf}.leg .c3::before{background:#0f9d58}.leg .c4::before{background:#d99100}.leg .c5::before{background:#d93c4f}
path.c1,path.c2,path.c3,path.c4,path.c5{fill:none}
.h0{fill:#e6f0f8}.h1{fill:#cfe0f5}.h2{fill:#a9c6f0}.h3{fill:#6f9cf0}.h4{fill:#2f6df6}.hx{fill:#12294d;font-size:10px}
.seg{display:flex;gap:6px}.seg button{font:inherit;font-size:.8rem;padding:4px 14px;border-radius:999px;border:0;background:rgba(255,255,255,.7);color:var(--ink);cursor:pointer}.seg button.on{background:#d3e2ff;color:var(--blue);font-weight:700}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.na{color:var(--mut);font-style:italic;font-size:.85rem}
input[type=checkbox]{width:auto;display:inline;margin:0;padding:0}.sel td{background:#d3e2ff55}
.picker{display:flex;gap:8px;flex-wrap:wrap}.chip{padding:3px 12px;border-radius:999px;background:#d3e2ff;font-size:.85rem}.chip b{cursor:pointer;margin-left:6px}
path.g1,path.g2{fill:none}
a.btn{display:inline-block;color:#fff}a.btn.ghost{color:var(--ink)}a.btn:hover{text-decoration:none}
.tag.kritis{background:#fde2e5;color:var(--red)}.tag.waspada{background:#fff3d6;color:var(--amber)}
table.left td,.left td{text-align:left}.left th{text-align:left}
.slide{--u:1px;width:calc(1280*var(--u));height:calc(720*var(--u));margin:0 auto;display:flex;flex-direction:column;padding:calc(28*var(--u)) calc(40*var(--u));border-radius:calc(22*var(--u));background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.88);box-shadow:0 12px 34px rgba(33,70,120,.16);overflow:hidden;font-size:calc(17*var(--u))}
.slide .sh{display:flex;justify-content:space-between;align-items:center}.slide .sb{flex:1;overflow:hidden;display:flex;flex-direction:column;gap:calc(14*var(--u))}
.slide h2{margin:calc(6*var(--u)) 0 0;font-size:calc(34*var(--u))}.slide .eyebrow{font-size:calc(12*var(--u))}
.slide .kpi .v{font-size:calc(40*var(--u))}.slide table{font-size:calc(14*var(--u))}.slide .small{font-size:calc(13*var(--u))}.slide .tag{font-size:calc(12*var(--u))}
.slide .chart svg{max-height:calc(330*var(--u))}.slide .grid4,.slide .grid2{gap:calc(14*var(--u))}
.bul{margin:0;padding-left:calc(22*var(--u));display:grid;gap:calc(14*var(--u));font-size:calc(21*var(--u));line-height:1.45}
.sn{display:flex;justify-content:space-between;align-items:center;font-size:calc(14*var(--u))}.sn a{color:var(--ink)}.dots a{color:#9db2d0;margin:0 calc(3*var(--u));font-size:calc(14*var(--u))}.dots a.on{color:var(--blue)}
body.stage .top{display:none}body.stage main{max-width:none;padding:0}body.stage{display:flex;align-items:center;justify-content:center}
body.stage .top .ctl{display:flex}
[hidden]{display:none!important}
.slide td,.slide th{padding-top:calc(4*var(--u));padding-bottom:calc(4*var(--u))}
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px 14px;margin-bottom:10px}.fgrid label{margin:6px 0}.fgrid select,.fgrid input{width:100%;border-radius:12px;margin-top:4px}
td select,td input{font-size:.85rem;padding:5px 10px;max-width:220px}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
.snapbar a{font-weight:600}
/* --- responsif ponsel/tablet --- */
main>*,.grid4>*,.grid2>*,.card{min-width:0}
.top .ctl{flex-wrap:wrap}.slim>*{min-width:0;overflow-wrap:anywhere}
html,body{max-width:100%;overflow-x:hidden}
.hint{display:none}
@media(max-width:700px){
  .top{padding:18px 16px 6px}h1{font-size:1.5rem}.top .ctl{gap:8px;width:100%}.top .ctl .btn,.top .ctl a.btn{padding:7px 14px;font-size:.82rem;white-space:nowrap}
  .top .ctl select{max-width:100%;flex:1 1 140px}main{padding:8px 16px 40px;gap:14px}.card{padding:16px 18px;border-radius:18px}
  .kpi .v{font-size:1.7rem}.slim{font-size:.82rem;gap:6px 12px}.fgrid{grid-template-columns:1fr}
  td,th{padding:7px 8px;font-size:.82rem;white-space:nowrap}td a{white-space:normal;min-width:130px;display:inline-block}
  .row{align-items:flex-start}.picker{width:100%}td select,td input{max-width:150px}
}
@media(max-width:700px) and (orientation:portrait){body.stage .hint{display:block;position:fixed;top:0;left:0;right:0;padding:8px 12px;text-align:center;font-size:.8rem;color:var(--ink);background:#fff3d6;z-index:5}body.stage main{padding-top:36px}}
/* slide = kanvas 16:9 skala tetap, kebal terhadap aturan responsif halaman */
.slide .grid2{grid-template-columns:1fr 1fr!important}.slide .grid4{grid-template-columns:repeat(4,1fr)!important}
.slide td,.slide th{font-size:calc(14*var(--u))!important;padding:calc(4*var(--u)) calc(8*var(--u))!important;white-space:normal!important}
.slide td a{min-width:0!important;display:inline!important}.slide .kpi .v{font-size:calc(40*var(--u))!important}.slide .card{padding:calc(12*var(--u)) calc(16*var(--u));border-radius:calc(16*var(--u))}
.slide .tag{font-size:calc(12*var(--u))}.slide h2{font-size:calc(34*var(--u))!important}.slide .btn{font-size:calc(14*var(--u))!important;padding:calc(7*var(--u)) calc(16*var(--u))!important}
.slide th{white-space:nowrap!important}
.fgrid1{display:grid;gap:4px;max-width:420px}.fgrid1 input{width:100%;border-radius:12px;margin-top:4px}#me{font-size:.85rem}