/* Lapisan "hidup" situs SAP: jaring partikel, teks berputar, penanda LIVE, marquee, tilt, progres gulir (22/10/2026) */
#bg-net{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
#prog{position:fixed;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,#17a673,#f2b01e);z-index:99;box-shadow:0 0 12px rgba(242,176,30,.7)}
.rot{display:inline-block;min-width:1ch;position:relative;white-space:nowrap}.rot:after{content:"";display:inline-block;width:4px;height:.85em;margin-left:6px;background:#f2b01e;vertical-align:-.08em;animation:kursor .9s steps(1) infinite}@keyframes kursor{50%{opacity:0}}
.hero h1 .sub2{display:block;font-size:.42em;font-weight:600;line-height:1.35;color:#cfe9dc;margin-top:14px;letter-spacing:0}
.live{display:inline-flex;align-items:center;gap:12px;margin:6px 0 22px;padding:9px 18px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);font-size:14px;color:#e7f6ee;flex-wrap:wrap}
.live b{color:#2af0b0}.live .tt{display:inline-flex;align-items:center;gap:7px;font-weight:800;letter-spacing:.12em;font-size:12px;color:#ff6b6b}.live .tt i{width:9px;height:9px;border-radius:50%;background:#ff4d4d;box-shadow:0 0 0 0 rgba(255,77,77,.7);animation:siar 1.6s infinite}@keyframes siar{70%{box-shadow:0 0 0 10px rgba(255,77,77,0)}100%{box-shadow:0 0 0 0 rgba(255,77,77,0)}}
.live .sp{opacity:.4}
.mq{background:#06281e;color:#d7efe3;overflow:hidden;padding:18px 0;margin-top:46px;border-block:1px solid rgba(255,255,255,.08);position:relative}.mq:before,.mq:after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2}.mq:before{left:0;background:linear-gradient(90deg,#06281e,transparent)}.mq:after{right:0;background:linear-gradient(-90deg,#06281e,transparent)}
.mq .tr{display:flex;gap:44px;width:max-content;animation:mq 38s linear infinite}.mq:hover .tr{animation-play-state:paused}.mq span{display:inline-flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.06em;font-size:15px;white-space:nowrap}.mq span:before{content:"";width:12px;height:12px;background:#f2b01e;transform:rotate(45deg);border-radius:2px;box-shadow:0 0 10px rgba(242,176,30,.7)}@keyframes mq{to{transform:translateX(-50%)}}
.fk{transform-style:preserve-3d;will-change:transform}.fk svg{transition:transform .35s}.fk:hover svg{transform:translateZ(30px) scale(1.04)}.fk .roda{animation-play-state:paused}.fk:hover .roda{animation-play-state:running}
.kartu>div,.alasan>div{position:relative}.kartu>div:before,.alasan>div:before,.fk:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(242,176,30,.16),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}.kartu>div:hover:before,.alasan>div:hover:before,.fk:hover:before{opacity:1}
.rv.kiri{transform:translateX(-50px)}.rv.kanan{transform:translateX(50px)}.rv.zoom{transform:scale(.92)}.rv.on.kiri,.rv.on.kanan,.rv.on.zoom{transform:none}
.alur:after{content:"";position:absolute;left:10%;top:34px;height:3px;width:calc(var(--p,0)*80%);background:linear-gradient(90deg,#f2b01e,#2af0b0);box-shadow:0 0 14px rgba(242,176,30,.8);border-radius:3px;z-index:1}
.alur div.nyala:before{animation:denyut 1.6s ease-out 1}@keyframes denyut{0%{box-shadow:0 0 0 0 rgba(242,176,30,.8)}100%{box-shadow:0 0 0 22px rgba(242,176,30,0)}}
.jln{position:relative;height:150px;background:linear-gradient(#0a3a2c,#04201a);overflow:hidden;border-top:1px solid rgba(255,255,255,.06)}.jln .aspal{position:absolute;left:0;right:0;bottom:0;height:46px;background:#041a14;border-top:4px solid #f2b01e}.jln .gr{position:absolute;left:0;bottom:19px;height:5px;width:200%;background:repeating-linear-gradient(90deg,#f4e7b0 0 44px,transparent 44px 96px);animation:garis2 1.4s linear infinite;opacity:.9}@keyframes garis2{to{transform:translateX(-96px)}}
.jln .t{position:absolute;bottom:20px;left:0;width:320px;animation:lewat 20s linear infinite}.jln .t svg{width:100%;height:auto}.jln .t2{bottom:20px;animation-duration:27s;animation-delay:-11s;width:380px}@keyframes lewat{from{transform:translateX(-420px)}to{transform:translateX(calc(100vw + 60px))}}
.jln .bt{position:absolute;left:50%;top:26px;transform:translateX(-50%);color:#9fd8bf;font-weight:700;letter-spacing:.25em;font-size:12px;text-align:center;white-space:nowrap}
.denah .gd{cursor:pointer;position:relative}.denah .gd .ps{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) scale(.9);background:#06281e;color:#fff;padding:7px 12px;border-radius:10px;font-size:12px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:.2s;z-index:3}.denah .gd:hover .ps{opacity:1;transform:translateX(-50%) scale(1)}
.tbl tr.hl td{background:rgba(242,176,30,.22)}
.naik{position:fixed;right:22px;bottom:230px;width:44px;height:44px;border-radius:50%;border:0;background:#0f6b4b;color:#fff;font-size:20px;cursor:pointer;opacity:0;pointer-events:none;transition:.3s;z-index:70;box-shadow:0 8px 20px rgba(0,0,0,.35)}.naik.on{opacity:1;pointer-events:auto}
.btn{will-change:transform}
@media(max-width:700px){.live{font-size:12.5px;padding:8px 14px}.jln{height:120px}.naik{bottom:210px;right:14px}}
@media(prefers-reduced-motion:reduce){.rot:after{animation:none}.mq .tr,.jln .t,.jln .gr{animation:none}#bg-net{display:none}}
@media(max-width:700px){.rv.kiri,.rv.kanan{transform:translateY(30px)}.rv.on.kiri,.rv.on.kanan{transform:none}}
html{overflow-x:clip}