/* ===== Layar TV ===== */
body.tv-on{overflow:hidden}
#tv{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;color:#e8f1f8;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:clamp(13px,1.12vw,30px);background:#070b14;overflow:hidden;cursor:none}
#tv.act{cursor:default}
#tv *{box-sizing:border-box}
.tv-bg{position:absolute;inset:0;background:radial-gradient(60vw 45vh at 12% 0%,rgba(45,212,191,.16),transparent 60%),radial-gradient(50vw 50vh at 100% 100%,rgba(99,102,241,.18),transparent 60%),linear-gradient(160deg,#0b1424,#070b14 55%);overflow:hidden}
.tv-bg::before,.tv-bg::after{content:"";position:absolute;width:38vw;height:38vw;border-radius:50%;filter:blur(90px);opacity:.22;animation:tvfloat 24s ease-in-out infinite alternate}
.tv-bg::before{background:#14b8a6;left:-10vw;top:-14vw}
.tv-bg::after{background:#6366f1;right:-12vw;bottom:-16vw;animation-delay:-9s}
@keyframes tvfloat{to{transform:translate(6vw,4vw) scale(1.15)}}
.tv-head{background:none;border:0;flex-wrap:nowrap;position:relative;display:flex;justify-content:space-between;align-items:center;padding:2.2vh 3vw 1vh}
.tv-brand{display:flex;align-items:center;gap:1em}
.tv-logo{width:3em;height:3em;border-radius:.9em;background:linear-gradient(135deg,#2dd4bf,#6366f1);display:grid;place-items:center;box-shadow:0 .5em 1.6em rgba(45,212,191,.35)}
.tv-logo svg{width:60%;height:60%}
.tv-title{font-size:1.7em;font-weight:750;letter-spacing:-.01em}
.tv-sub{opacity:.6;font-size:.95em}
.tv-mid{position:absolute;left:50%;transform:translateX(-50%);font-size:1.15em;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.tv-clock{text-align:right}
.tv-time{font-size:2.6em;font-weight:750;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tv-date{opacity:.65;margin-top:.2em}
#tv-stage{position:relative;flex:1;min-height:0;max-width:none;margin:0;padding:1vh 3vw 0}
.tv-slide{height:100%;animation:tvin .7s cubic-bezier(.22,1,.36,1)}
@keyframes tvin{from{opacity:0;transform:translateY(2.2vh) scale(.985)}to{opacity:1;transform:none}}
.tv-glass{background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);border-radius:1.5em;backdrop-filter:blur(14px);box-shadow:0 1.4em 3.4em rgba(0,0,0,.35)}
.tv-lbl{font-size:.95em;letter-spacing:.12em;text-transform:uppercase;opacity:.65;font-weight:600}
.tv-note{opacity:.6;margin-top:.35em}
.tv-ov{display:grid;grid-template-columns:1.12fr 1fr;grid-template-rows:minmax(0,1.25fr) minmax(0,1fr);gap:1.3em;height:100%;padding-bottom:1vh}
.tv-hero{display:flex;align-items:center;gap:2.4em;padding:1.4em 2.4em;min-height:0}
.tv-ringwrap{position:relative;flex:0 0 auto;height:100%;max-height:100%;aspect-ratio:1}
.tv-ring{width:100%;height:100%;display:block}
.tv-track{fill:none;stroke:rgba(255,255,255,.09)}
.tv-arc{fill:none;stroke-linecap:round;transition:stroke-dashoffset 1.7s cubic-bezier(.22,1,.36,1);filter:drop-shadow(0 0 .45em rgba(45,212,191,.5))}
.tv-ringtxt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.tv-big{font-size:5.4em;font-weight:800;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.tv-big small{font-size:.42em;font-weight:700;opacity:.7;margin-left:.1em}
.tv-herotxt{flex:1;min-width:0}
.tv-units{font-size:1em;margin:.3em 0 .8em;white-space:nowrap}
.tv-units b{font-size:4.3em;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.tv-units span{font-size:1.5em;opacity:.7;margin-left:.3em}
.tv-barl{height:.8em;border-radius:1em;background:rgba(255,255,255,.1);overflow:hidden}
.tv-fill{height:100%;width:0;border-radius:1em;transition:width 1.6s cubic-bezier(.22,1,.36,1)}
.tv-fill.hi{background:linear-gradient(90deg,#2dd4bf,#22c55e)}
.tv-fill.mid{background:linear-gradient(90deg,#38bdf8,#2dd4bf)}
.tv-fill.lo{background:linear-gradient(90deg,#f59e0b,#f87171)}
.tv-kpis{display:grid;grid-template-columns:1fr;grid-template-rows:1fr 1fr;gap:1.3em;min-height:0}
.tv-kpi{padding:1.2em 1.6em;display:flex;flex-direction:column;justify-content:center;min-width:0}
.tv-kv{font-size:3.4em;font-weight:800;line-height:1.05;margin-top:.15em;font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.tv-kpi.good .tv-kv{color:#5eead4}.tv-kpi.warn .tv-kv{color:#fbbf24}.tv-kpi.bad .tv-kv{color:#f87171}.tv-kpi.info .tv-kv{color:#a5b4fc}
.tv-pms{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(13em,1fr));gap:1.3em;min-height:0}
.tv-pm{display:flex;align-items:center;gap:.8em;padding:.9em .9em;min-width:0}
.tv-pm .tv-note{font-size:.85em}
.tv-pmring{position:relative;flex:0 0 auto;width:4.8em;height:4.8em}
.tv-pmring span{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:1.15em;font-variant-numeric:tabular-nums}
.tv-pmname{font-size:1.3em;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-pmu{margin-top:.2em;font-size:.95em;white-space:nowrap}.tv-pmu b{font-size:1.5em}
.tv-sec{font-size:1.5em;font-weight:700;margin:0 0 .7em;display:flex;align-items:center;gap:.7em}
.tv-sec i{font-style:normal;opacity:.55;font-weight:500;font-size:.7em}
.tv-sites{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,minmax(0,1fr));gap:.9em 1.6em;height:100%;padding-bottom:1vh}
.tv-tile{padding:.5em 1.3em;min-width:0;display:flex;flex-direction:column;justify-content:center;line-height:1.2}
.tv-tile>*{flex:0 0 auto}
.tv-tn{display:flex;align-items:center;gap:.5em;font-weight:700;font-size:1.1em}
.tv-tn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tv-dot2{flex:0 0 auto;width:.65em;height:.65em;border-radius:50%;background:#475569}.tv-dot2.on{background:#22c55e;box-shadow:0 0 .8em #22c55e}
.tv-ts{opacity:.6;font-size:.88em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:.1em 0 .45em}
.tv-tr{display:flex;justify-content:space-between;align-items:baseline;margin-top:.3em}
.tv-tp{font-size:1.7em;font-weight:800;font-variant-numeric:tabular-nums}
.tv-tu{opacity:.75;font-variant-numeric:tabular-nums}
.tv-pill{display:inline-block;margin-left:.5em;padding:.1em .6em;border-radius:1em;background:rgba(45,212,191,.18);color:#5eead4;font-size:.85em}
.tv-items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));gap:.8em 1.1em;height:100%;padding-bottom:1vh}
.tv-it{padding:.5em 1em;min-width:0;display:flex;flex-direction:column;justify-content:center;line-height:1.2}
.tv-it>*{flex:0 0 auto}
.tv-ih{display:flex;justify-content:space-between;gap:1em;align-items:baseline;margin-bottom:.5em}
.tv-ih b{font-size:1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-ih span{font-weight:800;font-size:1.3em;font-variant-numeric:tabular-nums}
.tv-empty{opacity:.55;padding:2em;text-align:center;font-size:1.2em}
.tv-foot{position:relative;display:flex;justify-content:space-between;align-items:center;padding:1.2vh 3vw 1.8vh;font-size:.95em;opacity:.9}
.tv-dots{display:flex;gap:.5em;align-items:center}
.tv-dot{width:.7em;height:.7em;border-radius:1em;background:rgba(255,255,255,.2);transition:all .4s}
.tv-dot.on{width:2.3em;background:#2dd4bf}
.tv-upd{opacity:.6}.tv-off{color:#f87171;margin-left:.8em;font-weight:700}
.tv-live{display:inline-flex;align-items:center;gap:.5em;margin-right:1em;color:#5eead4;font-weight:700;letter-spacing:.1em}
.tv-live::before{content:"";width:.6em;height:.6em;border-radius:50%;background:#22c55e;animation:tvpulse 1.6s infinite}
@keyframes tvpulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.7)}100%{box-shadow:0 0 0 .9em rgba(34,197,94,0)}}
.tv-bar{position:absolute;left:0;right:0;bottom:0;height:.28em;background:rgba(255,255,255,.05)}
.tv-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2dd4bf,#6366f1)}
@keyframes tvbar{from{width:0}to{width:100%}}
.tv-ctl{position:absolute;top:1.2em;right:1.4em;z-index:3;display:flex;gap:.6em;opacity:0;transition:opacity .4s;pointer-events:none}
#tv.act .tv-ctl{opacity:1;pointer-events:auto}
.tv-ctl button{min-height:0;height:2.6em;min-width:2.6em;padding:0 .9em;border-radius:1.4em;border:1px solid rgba(255,255,255,.2);background:rgba(15,23,42,.75);color:#e8f1f8;font-size:1em;backdrop-filter:blur(8px);justify-content:center}
.tv-ctl button:hover{background:rgba(45,212,191,.3)}
.tv-load{display:grid;place-items:center;height:100%;font-size:1.6em;opacity:.7}
@media (max-width:900px){
 #tv-stage{overflow-y:auto;padding:1vh 4vw 0}.tv-slide{height:auto}
 .tv-head{padding:1.6vh 4vw .6vh}.tv-clock,.tv-mid,.tv-sub{display:none}.tv-title{font-size:1.35em}
 .tv-ov{grid-template-columns:1fr;grid-template-rows:none;height:auto}.tv-hero{flex-direction:column;padding:1.2em}.tv-ringwrap{height:auto;width:min(70vw,50vh)}
 .tv-kpis{grid-template-columns:1fr 1fr;grid-template-rows:none}.tv-kv{font-size:2.4em}.tv-units b{font-size:3em}
 .tv-sites,.tv-items{grid-template-columns:1fr 1fr;grid-template-rows:none;height:auto}
 .tv-tile,.tv-it{display:block}.tv-foot{padding:1vh 4vw 1.4vh}
}
@media (max-width:560px){.tv-sites,.tv-items,.tv-kpis{grid-template-columns:1fr}}