@font-face{font-family:Fustat;font-weight:300;src:url(assets/fonts/fustat-300.ttf) format("truetype");font-display:swap}
@font-face{font-family:Fustat;font-weight:500;src:url(assets/fonts/fustat-500.ttf) format("truetype");font-display:swap}
@font-face{font-family:Fustat;font-weight:700;src:url(assets/fonts/fustat-700.ttf) format("truetype");font-display:swap}
@font-face{font-family:Fustat;font-weight:800;src:url(assets/fonts/fustat-800.ttf) format("truetype");font-display:swap}
:root{--bg:#06090c;--bg2:#0a1015;--line:rgba(79,209,232,.22);--line2:rgba(79,209,232,.45);--cy:#4fd1e8;--gr:#6fe0a0;--am:#ffb14a;--tx:#e9eef0;--mu:#8fa3ab;--sil:#d0c7bc;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg)}
body{font-family:Fustat,system-ui,sans-serif;font-weight:500;color:var(--tx);background:radial-gradient(1200px 700px at 70% -10%,#0d1b22 0,transparent 60%),var(--bg);line-height:1.55;overflow-x:hidden}
img{display:block;max-width:100%}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:#fff;color:#000;padding:8px}
:focus-visible{outline:2px solid var(--cy);outline-offset:3px}

/* bingkai */
.frame{position:fixed;inset:10px;pointer-events:none;z-index:40}
.c{position:absolute;width:22px;height:22px;border:2px solid var(--cy);opacity:.8}
.tl{left:0;top:0;border-right:0;border-bottom:0}.tr{right:0;top:0;border-left:0;border-bottom:0}
.bl{left:0;bottom:0;border-right:0;border-top:0}.br{right:0;bottom:0;border-left:0;border-top:0}
.scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px)}
.bar{position:fixed;top:0;left:0;right:0;z-index:41;display:flex;justify-content:space-between;align-items:center;padding:22px 34px;background:linear-gradient(#06090cee,#06090c00)}
.bar-logo{height:20px;width:auto}
.bar-stat{font:500 12px var(--mono);letter-spacing:.14em;color:var(--mu);display:flex;gap:10px;align-items:center}
.dot{width:8px;height:8px;border-radius:50%;background:var(--gr);box-shadow:0 0 10px var(--gr);animation:blink 2s infinite}
.sep{opacity:.4}
@keyframes blink{50%{opacity:.35}}
.prog{position:fixed;left:10px;right:10px;top:10px;height:2px;z-index:42}
.prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cy),var(--gr));box-shadow:0 0 12px var(--cy)}
.rail{position:fixed;right:30px;top:50%;transform:translateY(-50%);z-index:41;display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.rail a{display:flex;gap:10px;align-items:center;color:var(--mu);text-decoration:none;font:500 11px var(--mono);letter-spacing:.12em;opacity:.55;transition:.3s}
.rail a span{opacity:0;transform:translateX(8px);transition:.3s;text-transform:uppercase}
.rail a b{font-weight:500;border:1px solid var(--line);padding:3px 6px;background:#06090c99}
.rail a:hover,.rail a.on{opacity:1;color:var(--cy)}.rail a:hover span,.rail a.on span{opacity:1;transform:none}
.rail a.on b{border-color:var(--cy);box-shadow:0 0 12px rgba(79,209,232,.4)}

/* umum */
.sec{position:relative;padding:130px 0;min-height:100vh}
.wrap{width:min(1180px,100% - 160px);margin:0 auto}
.tag{font:500 12px var(--mono);letter-spacing:.2em;color:var(--cy);margin-bottom:18px}
.h1{display:flex;flex-direction:column;gap:6px;margin:14px 0 20px}
.h1 span{font-weight:300;font-size:clamp(18px,2.4vw,26px);color:var(--sil)}
.h1 strong{font-weight:800;font-size:clamp(40px,7.6vw,96px);line-height:1;letter-spacing:-.02em}
.h1 em,.h2 em{font-style:normal;background:linear-gradient(100deg,var(--cy),var(--gr));-webkit-background-clip:text;background-clip:text;color:transparent}
.h2{font-weight:800;font-size:clamp(30px,4.4vw,56px);line-height:1.08;letter-spacing:-.015em;max-width:18ch;margin-bottom:18px}
.h2.big{font-size:clamp(44px,8vw,110px);max-width:none}
.sub,.lead{color:var(--mu);font-size:clamp(16px,1.5vw,19px);max-width:56ch}
.lead{color:#b9c6cb}.lead.mid{margin:0 auto 34px;text-align:center}
.note{margin-top:26px;font:500 12px var(--mono);color:var(--mu);letter-spacing:.1em}
.cta{display:inline-flex;align-items:center;gap:14px;margin-top:30px;padding:15px 24px;border:1px solid var(--cy);color:var(--cy);text-decoration:none;font:500 13px var(--mono);letter-spacing:.16em;text-transform:uppercase;background:rgba(79,209,232,.06);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));transition:.25s}
.cta i{width:8px;height:8px;border-right:2px solid;border-bottom:2px solid;transform:rotate(45deg);margin-top:-4px}
.cta:hover{background:var(--cy);color:#06090c;box-shadow:0 0 30px rgba(79,209,232,.5)}

/* nyala bertahap */
.wrap>*,.hero-in>*{transition:opacity .8s,transform .8s,filter .8s}
.js .sec:not(.in):not(.hero):not(.pin) .wrap>*{opacity:0;transform:translateY(24px);filter:blur(4px)}
.js .sec.in .wrap>*:nth-child(2){transition-delay:.1s}.js .sec.in .wrap>*:nth-child(3){transition-delay:.2s}.js .sec.in .wrap>*:nth-child(4){transition-delay:.3s}

/* hero */
.hero{display:flex;align-items:center;padding:140px 0 100px}
#radar{position:absolute;inset:0;width:100%;height:100%;opacity:.95}
.hero-in{position:relative;width:min(1180px,100% - 160px);margin:0 auto}
.bootlog{font:500 12px/1.7 var(--mono);color:#5d7f89;min-height:5.6em;margin-bottom:6px;white-space:pre-wrap}
.bootlog b{color:var(--gr);font-weight:500}
.scrollcue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);font:500 11px var(--mono);letter-spacing:.2em;color:var(--mu);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.scrollcue span{width:1px;height:38px;background:linear-gradient(var(--cy),transparent);animation:drop 1.8s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* panel sensor */
.panels{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:46px}
.panel{position:relative;padding:18px 18px 14px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(79,209,232,.07),rgba(6,9,12,.7));clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);opacity:.25;filter:saturate(0);transition:opacity .7s,filter .7s,box-shadow .7s,transform .7s;transform:translateY(16px)}
.panel.on{opacity:1;filter:none;transform:none;box-shadow:0 0 40px rgba(79,209,232,.08) inset;border-color:var(--line2)}
.panel header{display:flex;justify-content:space-between;font:500 12px var(--mono);letter-spacing:.16em;color:var(--mu)}
.panel header i{font-style:normal;padding:2px 8px;border:1px solid;font-size:10px}
.ok{color:var(--gr)}.warn{color:var(--am)}
.gauge{position:relative;width:140px;height:140px;margin:18px auto 12px}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.g-bg{fill:none;stroke:rgba(255,255,255,.07);stroke-width:7}
.g-fg{fill:none;stroke:var(--cy);stroke-width:7;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 6px var(--cy));transition:stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1)}
.gauge.amber .g-fg{stroke:var(--am);filter:drop-shadow(0 0 6px var(--am))}
.gauge b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:34px}
.gauge b span{font-feature-settings:"tnum"}
.panel p{text-align:center;color:var(--mu);font-size:14px;min-height:2.7em}
.spark{display:block;width:100%;height:46px;margin-top:10px}

/* agen: bagian menempel */
.pin{padding:0;min-height:300vh}
.pin-in{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;padding:100px 0 60px}
.agen-grid{display:grid;grid-template-columns:.9fr 1.2fr;gap:56px;align-items:center}
.agents{list-style:none;margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.agents li{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);font:500 13px var(--mono);color:var(--mu);transition:.3s}
.agents li i{width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
.agents li.talk{color:var(--tx);border-color:var(--c,#4fd1e8);background:rgba(255,255,255,.04)}
.term{border:1px solid var(--line2);background:rgba(4,8,11,.82);box-shadow:0 0 60px rgba(79,209,232,.08);min-height:430px;display:flex;flex-direction:column;backdrop-filter:blur(6px)}
.term-h{padding:12px 16px;border-bottom:1px solid var(--line);font:500 11px var(--mono);letter-spacing:.16em;color:var(--mu);display:flex;gap:10px;align-items:center}
.term-h em{margin-left:auto;font-style:normal;color:var(--am)}.term-h em.live{color:var(--gr)}
.term-b{padding:16px;font:500 14px/1.6 var(--mono);display:flex;flex-direction:column;gap:12px;flex:1}
.msg{display:grid;grid-template-columns:auto 1fr;gap:12px;animation:rise .5s both}
.msg .who{font-size:11px;letter-spacing:.1em;padding:3px 8px;border:1px solid var(--c);color:var(--c);align-self:start;white-space:nowrap}
.msg .tx{color:#cdd8dc}
.msg .tx.typing::after{content:"▌";color:var(--cy);animation:blink .8s infinite;margin-left:2px}
.msg.ok2 .tx{color:var(--gr)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}

/* modul */
.mods{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:46px}
.mod{position:relative;padding:22px 18px 18px;border:1px solid var(--line);background:linear-gradient(170deg,rgba(255,255,255,.04),rgba(6,9,12,.7));color:inherit;text-align:left;cursor:pointer;font:inherit;display:flex;flex-direction:column;gap:14px;min-height:190px;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));transition:.3s;overflow:hidden}
.mod::before{content:"";position:absolute;inset:0;background:radial-gradient(240px 160px at var(--mx,50%) var(--my,0%),var(--c),transparent 70%);opacity:0;transition:.3s;mix-blend-mode:screen}
.mod:hover,.mod:focus-visible{border-color:var(--c);transform:translateY(-4px);box-shadow:0 14px 40px -12px var(--c)}
.mod:hover::before{opacity:.22}
.mod img{height:40px;width:auto;max-width:100%;object-fit:contain;object-position:left}
.mod small{font:500 11px var(--mono);letter-spacing:.14em;color:var(--mu)}
.mod span{font-size:14px;color:#b9c6cb;margin-top:auto}
.mod .st{position:absolute;right:16px;top:14px;font:500 10px var(--mono);letter-spacing:.14em;color:var(--gr)}
.mod .st::before{content:"● ";}
.drawer{position:fixed;inset:0;z-index:60;background:rgba(3,6,8,.78);backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px}
.drawer[hidden]{display:none}
.d-card{position:relative;width:min(560px,100%);max-height:90vh;overflow:auto;padding:34px;border:1px solid var(--c);background:linear-gradient(160deg,#0e1a20,#070b0e);box-shadow:0 0 80px -10px var(--c);animation:pop .35s both}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(14px)}}
.d-x{position:absolute;right:14px;top:10px;background:none;border:0;color:var(--mu);font-size:30px;cursor:pointer}
.d-card img{margin-bottom:20px;max-width:240px;height:44px;width:auto}
.d-card h3{font-weight:800;font-size:28px;margin:4px 0 10px}
.d-card p{color:#b9c6cb}
.d-card ul{margin:18px 0;list-style:none;display:grid;gap:8px}
.d-card li{padding-left:22px;position:relative;color:var(--tx)}
.d-card li::before{content:"▸";position:absolute;left:0;color:var(--c)}
.d-chip{display:flex;flex-wrap:wrap;gap:8px}
.d-chip span{font:500 11px var(--mono);letter-spacing:.1em;padding:4px 10px;border:1px solid var(--line2);color:var(--mu)}

/* alur */
.flow{position:relative;margin-top:40px;border:1px solid var(--line);background:rgba(4,8,11,.6)}
#flowCv{display:block;width:100%;height:520px}
.flow-info{margin:0;padding:12px 18px;border-top:1px solid var(--line2);background:rgba(6,9,12,.85);min-height:66px;font-size:14px;display:flex;flex-direction:column;gap:2px}
.flow-info b{color:var(--cy);font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.flow-info span{color:#b9c6cb}

/* penutup */
.end{display:flex;align-items:center;text-align:center;background:radial-gradient(700px 400px at 50% 40%,rgba(79,209,232,.12),transparent 70%)}
.end .wrap{display:flex;flex-direction:column;align-items:center}
.end-logo{margin-bottom:24px;filter:drop-shadow(0 0 24px rgba(79,209,232,.5));animation:float 5s ease-in-out infinite}
.end .h2{max-width:none}.end .lead{width:min(560px,100%)}.end-logo{height:72px;width:72px}
.foot{margin-top:60px;font:500 11px var(--mono);color:var(--mu);letter-spacing:.12em}
@keyframes float{50%{transform:translateY(-8px)}}

/* responsif */
@media(max-width:1100px){.panels,.mods{grid-template-columns:repeat(2,1fr)}.agen-grid{grid-template-columns:1fr}.rail{display:none}.wrap,.hero-in{width:min(1180px,100% - 64px)}}
@media(max-width:640px){
 .bar{padding:18px 22px}.bar-logo{height:16px}.bar-stat{font-size:10px;gap:6px}#clock,.sep{display:none}
 .frame{inset:6px}.wrap,.hero-in{width:calc(100% - 44px)}
 .sec{padding:100px 0}.hero{padding:110px 0 90px}
 .panels{gap:12px}.panel{padding:12px}.gauge{width:104px;height:104px}.gauge b{font-size:24px}.panel p{font-size:12px}
 .mods{gap:10px}.mod{padding:16px 12px;min-height:150px}.mod span{font-size:12px}.mod img{height:30px}
 .agents{grid-template-columns:1fr 1fr}.term{min-height:380px}.term-b{font-size:12px;padding:12px}.msg{grid-template-columns:1fr;gap:4px}
 .pin{min-height:260vh}.pin-in{padding:84px 0 30px}.pin .h2{font-size:26px}.pin .sub{display:none}.agents{margin-top:14px}
 #flowCv{height:460px}.flow-info{font-size:12px}
 .d-card{padding:24px}
}
@media(prefers-reduced-motion:reduce){
 *{animation:none!important;transition:none!important}html{scroll-behavior:auto}
 .js .sec:not(.hero):not(.pin) .wrap>*{opacity:1!important;transform:none!important;filter:none!important}
 .panel{opacity:1;filter:none;transform:none}.g-fg{stroke-dashoffset:calc(100 - var(--v))}
 .pin{min-height:0}.pin-in{position:static}
}