@font-face{font-family:'Teko';src:url(/assets/fonts/teko.woff2) format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url(/assets/fonts/plus-jakarta-sans.woff2) format('woff2');font-weight:200 800;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#030D18}
body{min-height:100vh;color:#F4F2ED;font:15px/1.5 'Plus Jakarta Sans',system-ui,sans-serif;background:radial-gradient(ellipse 120% 50% at 50% 0%,#163E6E,#06182B 55%,#030D18) no-repeat,#030D18}
a{color:inherit}
.sg-top{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:rgba(3,13,24,.82);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.06)}
.sg-brand{font-family:'Teko',sans-serif;font-weight:700;font-size:24px;line-height:.8;text-transform:uppercase;text-decoration:none}
.sg-brand b{display:block;font-size:14px;letter-spacing:.06em}.sg-brand b span:nth-child(1){color:#14B866}.sg-brand b span:nth-child(3){color:#D8343A}
.sg-back{font-size:13px;font-weight:700;color:#C9D4E0;text-decoration:none}
.sg-demo{display:none;background:#E9D49A;color:#0B2344;text-align:center;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:6px}
.is-demo .sg-demo{display:block}
.sg-wrap{max-width:720px;margin:0 auto;padding:22px 18px 50px}
.kick{font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#E9D49A}
.sg-h1{margin-top:8px;font-family:'Teko',sans-serif;font-weight:700;font-size:clamp(50px,9vw,84px);line-height:.88;text-transform:uppercase}
.gold{background:linear-gradient(180deg,#F6E7B8,#DCBF7C 55%,#B8924A);-webkit-background-clip:text;background-clip:text;color:transparent}
.tri{display:flex;width:80px;height:4px;border-radius:2px;overflow:hidden;margin-top:14px}.tri i{flex:1}.tri i:nth-child(1){background:#14B866}.tri i:nth-child(2){background:#F4F2ED}.tri i:nth-child(3){background:#D8343A}
.sg-p{margin-top:12px;color:#A9B9CC;max-width:520px}
.sg-h2{margin:30px 0 12px;font-family:'Teko',sans-serif;font-weight:700;font-size:30px;line-height:1;text-transform:uppercase}
.sg-card{margin-top:16px;padding:16px;border-radius:18px;background:linear-gradient(160deg,#0E2A4C,#081D38);border:1px solid rgba(255,255,255,.08);text-align:center}
.sg-when{margin-top:6px;font-family:'Teko',sans-serif;font-weight:700;font-size:34px;line-height:1;text-transform:uppercase}
.sg-mut{color:#A9B9CC;font-size:12.5px;margin-top:4px}
.sg-wait{margin-top:12px;text-align:center;color:#E9D49A;font-weight:700}
.sg-cd{display:flex;justify-content:center;gap:10px;margin-top:18px}.sg-cd div{width:76px;padding:12px 0;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);text-align:center}
.sg-cd b{display:block;font-family:'Teko',sans-serif;font-weight:600;font-size:44px;line-height:.85;font-variant-numeric:tabular-nums}.sg-cd span{font-size:10px;color:#A9B9CC;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.sg-btn,.sg-btn2{display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;margin-top:12px;border-radius:14px;font:800 15px 'Plus Jakarta Sans',system-ui,sans-serif;text-decoration:none;cursor:pointer}
.sg-btn{background:#E9D49A;color:#0B2344;border:0}.sg-btn2{background:transparent;color:#F4F2ED;border:1px solid rgba(233,212,154,.5)}
.sg-btn[hidden]{display:none}
.sg-how{list-style:none;display:grid;gap:10px}.sg-how li{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.sg-how li>b{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#E9D49A;color:#0B2344;font-family:'Teko',sans-serif;font-size:24px;padding-top:3px}
.sg-how strong{display:block;font-size:15px}.sg-how span{color:#A9B9CC;font-size:13.5px}
.cr{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:#fff;overflow:hidden}.cr img{width:78%;height:78%;object-fit:contain}.cr b{font-family:'Teko',sans-serif;color:#7C8797;font-size:18px;padding-top:2px}
.sg-pot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media(min-width:620px){.sg-pot{grid-template-columns:repeat(6,minmax(0,1fr))}}
.sg-pt{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 4px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);text-align:center}
.sg-pt .cr{width:48px;height:48px}.sg-pt>span:last-child{font-family:'Teko',sans-serif;font-weight:600;font-size:15px;line-height:1;text-transform:uppercase;max-width:100%;overflow-wrap:anywhere}
.gold-pot .sg-pt{border-color:rgba(233,212,154,.5);background:linear-gradient(160deg,rgba(233,212,154,.14),rgba(233,212,154,.03))}
.gold-pot .sg-pt .cr{box-shadow:0 0 0 3px rgba(233,212,154,.6)}
.sg-pt.unk{border-style:dashed}
.sg-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
@media(min-width:620px){.sg-groups{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sg-gp{padding:9px;border-radius:14px;background:linear-gradient(160deg,#0E2A4C,#081D38);border:1px solid rgba(255,255,255,.08);transition:border-color .3s,box-shadow .3s}
.sg-gp.hl{border-color:#E9D49A;box-shadow:0 0 0 3px rgba(233,212,154,.15)}
.sg-gh{display:flex;align-items:baseline;gap:6px;margin-bottom:2px}.sg-gh b{font-family:'Teko',sans-serif;font-size:28px;line-height:1}.sg-gh span{font-size:9.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#A9B9CC}
.sg-sl{display:flex;align-items:center;gap:7px;height:32px;font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden}
.sg-sl>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;flex:1}
.sg-sl .cr{width:24px;height:24px}.sg-sl i{font-style:normal;color:#E9D49A;font-size:11px}
.sg-sl.em{color:#5F7590}.sg-sl.em .cr{background:rgba(255,255,255,.06)}
.sg-sl.new{background:rgba(233,212,154,.12);border-radius:8px;margin:0 -3px;padding:0 3px;color:#E9D49A;animation:slIn .6s cubic-bezier(.16,1,.3,1)}
@keyframes slIn{from{transform:translateX(-12px);opacity:0}}
.sg-row{display:flex;justify-content:space-between;align-items:center}
.sg-live,.sg-end{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.sg-live{background:rgba(242,139,139,.15);border:1px solid rgba(242,139,139,.5);color:#F28B8B}.sg-live:before{content:"";width:7px;height:7px;border-radius:50%;background:#F28B8B;animation:blink 1s ease-in-out infinite alternate}
.sg-end{background:rgba(20,184,102,.15);border:1px solid rgba(20,184,102,.5);color:#5FD49A}
@keyframes blink{to{opacity:.3}}
.sg-pots{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.sg-pots div{padding:10px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);text-align:center}
.sg-pots b{display:block;font-family:'Teko',sans-serif;font-size:30px;line-height:.9}.sg-pots span{font-size:11px;color:#A9B9CC;font-weight:700}
.sg-reveal{text-align:center;padding:10px 0 4px}
.sg-num{margin-top:14px;font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#A9B9CC}
.sg-ball{height:230px;display:grid;place-items:center}
.sg-orb{width:200px;height:200px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#fff,#E7E2D6 45%,#B8B0A0);box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 80px rgba(233,212,154,.35)}
.sg-orb .cr.big{width:150px;height:150px}
.sg-reveal.go .sg-orb{animation:orbIn var(--d,1.2s) cubic-bezier(.3,1.4,.5,1) both}
.sg-reveal.go .sg-orb .cr{animation:crIn .6s cubic-bezier(.16,1,.3,1) calc(var(--d,1.2s)*.8) both}
.sg-pot-l{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#E9D49A}
.sg-name{margin-top:6px;font-family:'Teko',sans-serif;font-weight:700;font-size:clamp(46px,10vw,72px);line-height:.9;text-transform:uppercase;background:linear-gradient(180deg,#F6E7B8,#DCBF7C 55%,#B8924A);-webkit-background-clip:text;background-clip:text;color:transparent}
.sg-city{color:#A9B9CC;font-size:14px;margin-top:4px;min-height:21px}
.sg-to{display:inline-block;margin-top:12px;padding:9px 18px;border-radius:999px;background:#E9D49A;color:#0B2344;font-weight:900;font-size:15px}
.sg-reveal.go .sg-pot-l,.sg-reveal.go .sg-name,.sg-reveal.go .sg-city{animation:upIn .6s cubic-bezier(.16,1,.3,1) calc(var(--dd,1.1s)) both}
.sg-reveal.go .sg-to{animation:popIn .5s cubic-bezier(.3,1.4,.5,1) 1.5s both}
@keyframes orbIn{0%{transform:translateY(-140px) scale(.5) rotate(-120deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes crIn{from{transform:scale(0) rotate(-30deg);opacity:0}}
@keyframes upIn{from{transform:translateY(20px);opacity:0;filter:blur(6px)}}
@keyframes popIn{from{transform:scale(0);opacity:0}}
.sg-prog{display:flex;justify-content:space-between;margin-top:18px;font-size:12.5px;color:#A9B9CC}.sg-prog b{color:#F4F2ED}
.sg-bar{height:8px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:6px}.sg-bar i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,#B89A55,#E9D49A);transition:width .6s ease}
.sg-foot{margin-top:18px;color:#7F93AA;font-size:11.5px;text-align:center}
/* fasi */
[class*="only-"]{display:none}
[data-phase="pre"] .only-pre,[data-phase="wait"] .only-wait,[data-phase="live"] .only-live,[data-phase="done"] .only-done{display:block}
[data-phase="live"] .sg-live.only-live,[data-phase="done"] .sg-end.only-done{display:inline-flex}
[data-phase="live"] span.only-live{display:inline}
.sg-cd[hidden]{display:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}
.sg-endbtn{margin-top:6px}
