body.sumangga-page{margin:0;background:#fff}
.sg{--soga:#8B4513;--soga2:#6f3710;--kunyit:#D4A574;--kapas:#F5F0E8;--arang:#2C2C2C;--ok:#2f7d4f;--bad:#b3261e;font-family:'Plus Jakarta Sans',Arial,sans-serif;font-size:17px;line-height:1.65;color:var(--arang)}
.sg *{box-sizing:border-box}.sg img,.sg svg{max-width:100%;height:auto}
.sg h1,.sg h2,.sg h3,.sg h4{font-family:'Plus Jakarta Sans',sans-serif;margin:0 0 12px;line-height:1.2}
.sg h1{font-size:clamp(36px,6vw,64px);font-weight:700}.sg h2{font-size:clamp(26px,4vw,36px);font-weight:700}.sg h3{font-size:21px;font-weight:600}.sg h4{font-size:18px}
.sg p{margin:0 0 14px}.sg a{color:var(--soga)}.sg ul,.sg ol{padding-left:20px;margin:0 0 14px}
.sg .w{max-width:1160px;margin:0 auto;padding:0 24px}.sg .narrow{max-width:640px}
.sg section{padding:72px 0}.sg .alt{background:var(--kapas)}
.sg .sub{color:#5b524a;margin-bottom:28px}.sg .small{font-size:14px;color:#6a625a}
.sg :focus-visible{outline:3px solid var(--kunyit);outline-offset:2px}
.sg .btn{display:inline-block;background:var(--soga);color:#fff!important;padding:12px 24px;border-radius:8px;font:700 16px/1.4 'Plus Jakarta Sans',Arial,sans-serif;text-decoration:none;border:2px solid var(--soga);cursor:pointer;transition:background .15s,transform .1s}
.sg .btn:hover{background:var(--soga2);border-color:var(--soga2)}.sg .btn:active{transform:translateY(1px)}
.sg .btn:disabled{opacity:.45;cursor:not-allowed}
.sg .btn.o{background:transparent;color:var(--soga)!important}.sg .btn.o:hover{background:var(--kapas)}
.sg .btn.sm{padding:8px 16px;font-size:15px}.sg .btn.lt{background:#fff;color:var(--soga)!important;border-color:#fff}.sg .btn.danger{background:var(--bad);border-color:var(--bad)}
.sg .nav{background:#fff;border-bottom:3px solid var(--kunyit);position:sticky;top:0;z-index:50}
.sg .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.sg .logo{display:flex;align-items:center;gap:10px;font:700 24px 'Plus Jakarta Sans',sans-serif;color:var(--soga);text-decoration:none}.sg .logo img{height:40px;width:auto}
.sg .nav nav{display:flex;align-items:center;gap:22px}.sg .nav nav a:not(.btn){text-decoration:none;color:var(--arang);font-weight:700;font-size:15px;padding:4px 0;border-bottom:2px solid transparent}
.sg .nav nav a.cur{border-color:var(--soga);color:var(--soga)}
.sg .burger{display:none;background:none;border:0;padding:10px;cursor:pointer}.sg .burger i{display:block;width:24px;height:2px;background:var(--arang);margin:5px 0}
.sg .hero{background:var(--kapas);padding:64px 0 72px;overflow:hidden}
.sg .hgrid{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center}
.sg .lead{font-size:19px;max-width:30em}.sg .acts{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 12px}.sg .note{font-size:14px;color:#6a625a}
.sg .demo{position:relative;display:flex;gap:18px;align-items:flex-end;padding-bottom:56px}
.sg .tablet{flex:1.6;background:#fff;border:10px solid var(--arang);border-radius:22px;min-height:380px;padding:0;box-shadow:0 18px 40px rgba(60,35,10,.18);overflow:hidden}
.sg .tablet .bar{min-height:0;padding:8px 16px;background:var(--soga);color:#fff;font-size:13px}
.sg .tablet form,.sg .tablet .state,.sg .tablet .muster{padding:18px}
.sg .tablet label{display:block;font-size:13px;font-weight:700;margin-bottom:10px}
.sg .tablet input{display:block;width:100%;margin-top:4px;padding:9px 12px;border:1.5px solid #cdbfae;border-radius:8px;font:16px 'Plus Jakarta Sans',sans-serif}
.sg .lbl{font-size:13px;font-weight:700;margin-bottom:6px}
.sg .hosts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.sg .host{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:#fff;border:1.5px solid #cdbfae;border-radius:10px;padding:8px 10px;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif}
.sg .host.on{border-color:var(--soga);background:var(--kapas);box-shadow:inset 0 0 0 1px var(--soga)}.sg .host:disabled{opacity:.5;cursor:not-allowed}.sg .host small{color:#6a625a}
.sg .pill{font-style:normal;font-size:12px;font-weight:700;padding:1px 9px;border-radius:99px;background:#e6f2ea;color:var(--ok)}.sg .pill.wfh{background:#fff1d6;color:#8a5a00}.sg .pill.off{background:#eee;color:#666}
.sg .hint{font-size:13px;color:#8a5a00;margin-bottom:10px}
.sg .state{text-align:center;padding:36px 24px!important}.sg .state p{max-width:26em;margin:0 auto 16px}
.sg .spin{width:44px;height:44px;margin:0 auto 14px;border:4px solid var(--kapas);border-top-color:var(--soga);border-radius:50%;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.sg .tick{width:56px;height:56px;line-height:56px;margin:0 auto 12px;border-radius:50%;background:var(--ok);color:#fff;font-size:30px;text-align:center}.sg .tick.wt{background:var(--kunyit)}.sg .tick.big{width:84px;height:84px;line-height:84px;font-size:46px;margin-bottom:20px}
.sg .muster ul{list-style:none;padding:0}.sg .muster li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #eee;font-size:15px}.sg .muster li span{color:#6a625a}
.sg .phone{flex:1;max-width:210px;background:#fff;border:8px solid var(--arang);border-radius:28px;min-height:340px;padding:10px 12px;box-shadow:0 18px 40px rgba(60,35,10,.18);display:flex;flex-direction:column}
.sg .notch{width:56px;height:6px;border-radius:9px;background:var(--arang);margin:0 auto 10px}.sg .pbar{font-weight:700;font-size:14px;margin-bottom:10px}
.sg .notif,.sg .alert{background:var(--kapas);border-radius:12px;padding:12px;font-size:14px;animation:pop .35s ease}.sg .alert{background:#fde8e6;border:1px solid var(--bad)}.sg .alert b{color:var(--bad)}
@keyframes pop{from{transform:translateY(-8px);opacity:0}}
.sg .notif p,.sg .alert p{margin:4px 0 10px}.sg .row2{display:flex;gap:6px}.sg .row2 .btn{padding:6px 10px;font-size:14px}
.sg .idle{font-size:14px;color:#6a625a}.sg .pstat{margin-top:auto;font-size:13px;padding-top:10px}
.sg .alarm{position:absolute;bottom:0;left:0;background:none;border:1.5px dashed var(--bad);color:var(--bad);font:700 14px 'Plus Jakarta Sans',sans-serif;padding:8px 14px;border-radius:8px;cursor:pointer}.sg .alarm.on{background:var(--bad);color:#fff;border-style:solid}
.sg .phero{background:var(--kapas);padding:64px 0 48px}.sg .phero p{font-size:19px;max-width:36em;margin:0}.sg .phero+section{padding-top:56px}
.sg .g2,.sg .g3,.sg .g4{display:grid;gap:20px}.sg .g2{grid-template-columns:repeat(2,1fr)}.sg .g3{grid-template-columns:repeat(3,1fr)}.sg .g4{grid-template-columns:repeat(4,1fr)}
.sg .card{background:#fff;border:1px solid #e3d8c8;border-radius:12px;padding:24px}.sg .alt .card{border-color:#e0d3bf}
.sg .prob{border-top:4px solid var(--kunyit)}.sg .card h3{font-size:19px}
.sg .steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:28px}
.sg .steps li{display:flex;flex-direction:column;gap:10px}.sg .n{width:40px;height:40px;border-radius:50%;background:var(--soga);color:#fff;font:700 18px 'Plus Jakarta Sans',sans-serif;display:grid;place-items:center}
.sg .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}.sg .chips button,.sg .toggle button{background:#fff;border:1.5px solid #cdbfae;color:var(--arang);padding:8px 16px;border-radius:99px;font:700 15px 'Plus Jakarta Sans',sans-serif;cursor:pointer}
.sg .chips .on,.sg .toggle .on{background:var(--soga);border-color:var(--soga);color:#fff}.sg .toggle{display:flex;gap:8px;margin-top:24px;flex-wrap:wrap}
.sg .formprev{max-width:520px}.sg .fake{padding:10px 14px;border:1.5px dashed #cdbfae;border-radius:8px;margin-bottom:8px;color:#6a625a;animation:pop .3s ease}
.sg .plan{display:flex;flex-direction:column;position:relative}.sg .plan.pop{border:2px solid var(--soga)}.sg .plan ul{flex:1}.sg .plan li{margin-bottom:4px}
.sg .badge{position:absolute;top:-13px;right:20px;background:var(--kunyit);color:var(--arang);font-size:13px;font-weight:700;padding:2px 12px;border-radius:99px}
.sg .price{font:700 28px 'Plus Jakarta Sans',sans-serif;color:var(--soga);margin-bottom:12px}.sg .price small{font:400 15px 'Plus Jakarta Sans',sans-serif;color:#6a625a}
.sg .calc{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.sg .calc label{display:block;margin-bottom:14px}.sg .calc input[type=range]{width:100%;accent-color:var(--soga)}
.sg .chk{display:flex!important;gap:8px;font-size:15px}.sg .total{font:700 34px 'Plus Jakarta Sans',sans-serif;color:var(--soga)}.sg .total small{font:400 15px 'Plus Jakarta Sans',sans-serif;color:#6a625a}
.sg .tbl{border-collapse:collapse;width:100%;max-width:640px}.sg .tbl td,.sg .doc td,.sg .doc th{border-bottom:1px solid #e3d8c8;padding:10px 8px;text-align:left;vertical-align:top}
.sg .faq{max-width:760px}.sg .faq>div{border-bottom:1px solid #e0d3bf}.sg .faq button{width:100%;display:flex;justify-content:space-between;background:none;border:0;padding:16px 0;font:700 17px 'Plus Jakarta Sans',sans-serif;color:var(--arang);cursor:pointer;text-align:left}.sg .faq p{padding-bottom:14px;color:#4b443d}
.sg .two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}.sg .two.top{align-items:start}.sg .mark{max-width:240px;justify-self:center}
.sg .form label{display:block;font-weight:700;font-size:15px;margin-bottom:14px}.sg .form input:not(.hp),.sg .form select,.sg .form textarea{display:block;width:100%;margin-top:4px;padding:10px 12px;border:1.5px solid #cdbfae;border-radius:8px;font:16px 'Plus Jakarta Sans',sans-serif;background:#fff}
.sg .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}.sg .msg{padding:10px 14px;border-radius:8px;margin-top:14px}.sg .msg.ok{background:#e6f2ea;color:var(--ok)}.sg .msg.err{background:#fde8e6;color:var(--bad)}
.sg .info div{margin-bottom:14px}.sg .info dt{font-weight:700;font-size:14px;color:#6a625a}.sg .info dd{margin:0}.sg .soc{margin-right:16px;font-weight:700}
.sg .cta{background:var(--soga);color:#fff;text-align:center}.sg .cta h2,.sg .cta p{color:#fff}
.sg .done{text-align:center;padding:120px 0}
.sg .foot{background:var(--arang);color:#ddd;padding:48px 0 0}.sg .fg{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}.sg .fl{font:700 24px 'Plus Jakarta Sans',sans-serif;color:#fff}
.sg .foot a{color:#ddd;margin-left:20px;text-decoration:none}.sg .foot a:hover{text-decoration:underline}.sg .copy{padding-top:24px;padding-bottom:24px;font-size:14px;color:#aaa}
.sg .doc section{padding:40px 0}.sg .doc .w{max-width:900px}.sg .doc .card{margin-bottom:14px}.sg .doc table{width:100%;border-collapse:collapse;margin:12px 0;font-size:15px}.sg .doc svg{background:#fff;border:1px solid #e3d8c8;border-radius:10px;padding:8px}.sg .doc .c{text-align:center}
@media(max-width:960px){.sg .hgrid,.sg .calc,.sg .two{grid-template-columns:1fr}.sg .g4,.sg .steps{grid-template-columns:repeat(2,1fr)}.sg .g3{grid-template-columns:1fr}}
@media(max-width:720px){.sg{font-size:16px}.sg section{padding:52px 0}.sg .burger{display:block}
 .sg .nav nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;align-items:stretch;padding:12px 24px 20px;border-bottom:3px solid var(--kunyit)}.sg .nav nav.open{display:flex}
 .sg .g2,.sg .g4,.sg .steps{grid-template-columns:1fr}.sg .demo{flex-direction:column;align-items:stretch}.sg .phone{max-width:none;min-height:0}.sg .tablet{min-height:0}.sg .alarm{position:static;margin-top:8px}.sg .demo{padding-bottom:0}
 .sg .doc table{display:block;overflow-x:auto}}
@media(prefers-reduced-motion:reduce){.sg *{animation:none!important;transition:none!important}}
.sg .fl2{display:flex;flex-wrap:wrap;gap:8px 0}.sg .fl2 a:first-child{margin-left:0}
@media(max-width:720px){.sg .foot a{margin-left:0;margin-right:18px}}
.sg .btn{text-align:center}
/* ---- v2.1: lebih hidup ---- */
.sg .prog{position:fixed;top:0;left:0;height:3px;width:var(--sp,0);background:var(--kunyit);z-index:60;pointer-events:none}
.sg .hero{position:relative;background:radial-gradient(900px circle at var(--mx,70%) var(--my,30%),rgba(212,165,116,.20),transparent 55%),linear-gradient(160deg,#1d130b,#2e1b0d 60%,#3a2210);color:#f5f0e8}
.sg .hero .stars{position:absolute;inset:0;pointer-events:none}.sg .hero .w{position:relative}
.sg .hero h1{color:#fff}.sg .hero .lead{color:#eadfce}.sg .hero .note{color:#bfae98}
.sg .hero .btn.o{color:#f5f0e8!important;border-color:var(--kunyit)}.sg .hero .btn.o:hover{background:rgba(212,165,116,.18)}
.sg .hero .btn:not(.o){background:var(--kunyit);border-color:var(--kunyit);color:#2c1a0a!important}.sg .hero .btn:not(.o):hover{background:#e3b987;border-color:#e3b987}
.sg .hero .tablet .btn,.sg .hero .phone .btn{background:var(--soga);border-color:var(--soga);color:#fff!important}.sg .hero .tablet .btn.o,.sg .hero .phone .btn.o{background:transparent;color:var(--soga)!important}
.sg .hero .tablet,.sg .hero .phone{box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 0 1px rgba(212,165,116,.25);animation:fl 6s ease-in-out infinite}.sg .hero .phone{animation-delay:-3s}
@keyframes fl{50%{transform:translateY(-8px)}}
.sg .playbtn{position:absolute;bottom:0;right:0;background:rgba(212,165,116,.18);border:1.5px solid var(--kunyit);color:#f5f0e8;font:700 14px 'Plus Jakarta Sans',sans-serif;padding:8px 14px;border-radius:8px;cursor:pointer}
.sg .hero .alarm{color:#ffb4ab;border-color:#ffb4ab}.sg .hero .alarm.on{background:var(--bad);color:#fff;border-color:var(--bad)}
.sg .marq{overflow:hidden;background:var(--soga);color:#fff;padding:12px 0;white-space:nowrap}.sg .marq div{display:inline-block;animation:mq 32s linear infinite}
.sg .marq span{display:inline-block;margin:0 28px;font:600 18px 'Plus Jakarta Sans',sans-serif}.sg .marq span:after{content:'✦';margin-left:56px;color:var(--kunyit)}
@keyframes mq{to{transform:translateX(-50%)}}
.sg .stats{padding:56px 0 8px}.sg .stats .g4>div{text-align:center;padding:8px}.sg .stats b{display:block;font:700 clamp(36px,5vw,52px)/1.1 'Plus Jakarta Sans',sans-serif;color:var(--soga)}.sg .stats div>span{font-size:15px;color:#5b524a}
.sg .rng{display:block;font-weight:700;margin-bottom:12px}.sg .rng input{width:100%;accent-color:var(--soga);margin-top:8px}
.sg .cmp .bars>div{margin-bottom:18px}.sg .cmp .bars span{font-weight:700;font-size:15px}.sg .cmp .bars b{display:block;margin-top:4px;font-family:'Plus Jakarta Sans',sans-serif;font-size:22px}
.sg .bar2{height:18px;background:#efe7da;border-radius:99px;overflow:hidden;margin:6px 0}.sg .bar2 i{display:block;height:100%;border-radius:99px;transition:width .5s cubic-bezier(.2,.8,.2,1)}.sg .bar2 .bad{background:#b3a79a}.sg .bar2 .good{background:var(--ok)}
.sg .saving{margin:0;padding:12px 14px;background:#e6f2ea;border-radius:10px;color:#1f5a38}
.sg .rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}.sg .rv.in{opacity:1;transform:none}
.sg .card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s}.sg .card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(80,45,15,.12);border-color:var(--kunyit)}
.sg .rv.card:hover{transform:translateY(-4px)}
.sg .chips button{transition:transform .15s,background .15s}.sg .chips button:hover{transform:translateY(-2px)}
.sg .page{animation:pg .4s ease}@keyframes pg{from{opacity:0}}
@media(max-width:720px){.sg .playbtn{position:static;margin-top:8px}.sg .hero .tablet,.sg .hero .phone{animation:none}}
@media(prefers-reduced-motion:reduce){.sg .rv{opacity:1;transform:none}.sg .marq div{animation:none}}
.sg .rv.card{transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s}
.sg .tablet,.sg .phone{color:var(--arang)}.sg .stats div>span{display:block}
/* ===== v3: tema gelap ala SwitchFest ===== */
body.sumangga-page{background:#06040f}
.sg{--soga:#F2A33A;--soga2:#ffc063;--kunyit:#F2A33A;--kapas:rgba(255,255,255,.04);--arang:#ECEAF5;--mut:#A9A4BE;--line:rgba(255,255,255,.12);--glass:rgba(255,255,255,.045);
 position:relative;isolation:isolate;background:#06040f;color:var(--arang);font-family:'Plus Jakarta Sans',Arial,sans-serif;min-height:100vh;overflow-x:hidden}
.sg::before{content:'';position:fixed;inset:-10%;z-index:-1;pointer-events:none;background:radial-gradient(620px 520px at 6% 14%,rgba(62,72,230,.30),transparent 62%),radial-gradient(560px 560px at 96% 62%,rgba(242,163,58,.13),transparent 62%),radial-gradient(520px 420px at 78% 4%,rgba(30,120,255,.16),transparent 62%);animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(-3%,2%,0) scale(1.06)}}
.sg h1,.sg h2{font-weight:800;text-transform:uppercase;letter-spacing:-.015em;color:#fff;line-height:1.05}
.sg h3,.sg h4{font-weight:700;color:#fff}
.sg h2{font-size:clamp(28px,4.6vw,46px)}.sg .ctr{text-align:center}.sg .sub.ctr{margin-left:auto;margin-right:auto;max-width:34em}
.sg p{color:#C9C5DA}.sg .sub,.sg .small{color:var(--mut)}.sg a{color:var(--soga)}
.sg .alt{background:rgba(255,255,255,.025)}
/* tombol */
.sg .btn{background:#fff;border-color:#fff;color:#0a0714!important;border-radius:99px;padding:13px 28px}
.sg .btn:hover{background:var(--soga);border-color:var(--soga)}
.sg .btn.o{background:transparent;color:#fff!important;border-color:rgba(255,255,255,.3)}.sg .btn.o:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55)}
.sg .btn.sm{padding:9px 20px}.sg .btn.lt{background:#fff;color:#0a0714!important}
.sg .btn.danger{background:var(--bad);border-color:var(--bad);color:#fff!important}
/* nav pil melayang */
.sg .nav{position:fixed;top:14px;left:0;right:0;background:none;border:0;z-index:50;pointer-events:none}
.admin-bar .sg .nav{top:46px}@media(max-width:782px){.admin-bar .sg .nav{top:60px}}
.sg .nav .bar{pointer-events:auto;max-width:1100px;min-height:62px;padding:0 12px 0 20px;border:1px solid rgba(255,255,255,.28);border-radius:99px;background:rgba(10,7,22,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);margin:0 auto}
.sg .logo{color:#fff;font-size:21px}.sg .logo img{height:36px}
.sg .nav nav a:not(.btn){color:#E6E3F2}.sg .nav nav a.cur{color:#fff;border-color:#fff}
.sg .burger i{background:#fff}
.sg .nav .btn.sm{padding:10px 20px}
/* hero */
.sg .hero{background:radial-gradient(800px circle at var(--mx,70%) var(--my,30%),rgba(242,163,58,.11),transparent 55%);color:var(--arang);padding:150px 0 80px}
.sg .hero h1{font-size:clamp(46px,8.6vw,104px);line-height:.95;margin-bottom:18px}
.sg .hero h1 em{font-style:normal;color:var(--soga)}
.sg .hero .lead{color:#C9C5DA}.sg .hero .note{color:var(--mut)}
.sg .hero .btn:not(.o){background:#fff;border-color:#fff;color:#0a0714!important}.sg .hero .btn:not(.o):hover{background:var(--soga);border-color:var(--soga)}
.sg .hero .btn.o{color:#fff!important;border-color:rgba(255,255,255,.3)}
.sg .typer{font-size:clamp(17px,2.2vw,22px);color:#C9C5DA;min-height:1.7em;margin:0 0 18px}
.sg .caret{display:inline-block;width:2px;height:1.1em;background:var(--soga);vertical-align:-.15em;margin-left:2px;animation:bl 1s steps(1) infinite}@keyframes bl{50%{opacity:0}}
.sg .pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}.sg .pills span{font-size:13px;font-weight:600;color:#D9D5EA;padding:7px 14px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.04)}
.sg .hright{display:flex;flex-direction:column;gap:14px}
.sg .live{margin:0 auto;width:min(100%,430px);padding:14px 18px 16px;border:1px solid var(--line);border-radius:16px;background:rgba(14,10,32,.7);backdrop-filter:blur(10px);box-shadow:0 0 40px rgba(62,72,230,.25)}
.sg .lt{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:#D9D5EA;margin-bottom:10px}
.sg .pulse{width:8px;height:8px;border-radius:50%;background:#ff5a3c;animation:pl 1.4s ease-out infinite}@keyframes pl{0%{box-shadow:0 0 0 0 rgba(255,90,60,.6)}100%{box-shadow:0 0 0 9px rgba(255,90,60,0)}}
.sg .lg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.sg .lg div{text-align:center;border:1px solid var(--line);border-radius:10px;padding:8px 0;background:rgba(255,255,255,.05)}
.sg .lg b{display:block;font-size:24px;color:#fff;font-variant-numeric:tabular-nums}.sg .lg span{font-size:11px;color:var(--mut)}
/* perangkat tetap terang */
.sg .tablet,.sg .phone{--soga:#8B4513;--soga2:#6f3710;--kapas:#F5F0E8;--arang:#2C2C2C;--kunyit:#D4A574;color:#2C2C2C;border-color:#14111f}
.sg .tablet h4,.sg .phone b,.sg .tablet b,.sg .tablet .state h4,.sg .muster h4{color:#2C2C2C}.sg .tablet p,.sg .phone p{color:#4b443d}.sg .tablet .bar{color:#fff}
.sg .tablet .btn,.sg .phone .btn{background:#8B4513;border-color:#8B4513;color:#fff!important}.sg .tablet .btn:hover,.sg .phone .btn:hover{background:#6f3710}
.sg .tablet .btn.o,.sg .phone .btn.o{background:transparent;color:#8B4513!important}.sg .phone .btn.danger{background:var(--bad);border-color:var(--bad)}
.sg .notch{background:#14111f}.sg .hero .tablet,.sg .hero .phone{box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.18)}
.sg .hero .alarm{color:#ffb4ab;border-color:#ffb4ab}.sg .hero .alarm.on{background:var(--bad);color:#fff;border-color:var(--bad)}
.sg .hero .playbtn,.sg .playbtn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35);color:#fff}
/* kartu kaca */
.sg .card,.sg .alt .card{background:var(--glass);border:1px solid var(--line);border-radius:18px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.sg .card:hover{border-color:rgba(242,163,58,.55);box-shadow:0 14px 34px rgba(0,0,0,.35)}
.sg .prob{border-top:1px solid var(--line);border-left:3px solid var(--soga)}
.sg .marq{background:rgba(255,255,255,.03);border-block:1px solid var(--line);color:#fff}.sg .marq span:after{color:var(--soga)}
.sg .stats b{color:#fff}.sg .stats div>span{color:var(--mut)}
.sg .n{background:var(--soga);color:#1a1006}
.sg .chips button,.sg .toggle button{background:var(--glass);border-color:var(--line);color:#E6E3F2}.sg .chips .on,.sg .toggle .on{background:var(--soga);border-color:var(--soga);color:#1a1006}
.sg .fake{border-color:rgba(255,255,255,.25);color:#D9D5EA}
.sg .price{color:var(--soga)}.sg .plan.pop{border-color:var(--soga);box-shadow:0 0 40px rgba(242,163,58,.12)}.sg .badge{color:#1a1006}
.sg .tbl td,.sg .doc td,.sg .doc th{border-bottom-color:var(--line)}
.sg .faq>div{border-bottom-color:var(--line)}.sg .faq button{color:#fff}.sg .faq p{color:#C9C5DA}
.sg .form input:not(.hp),.sg .form select,.sg .form textarea{background:rgba(255,255,255,.06);border-color:var(--line);color:#fff}.sg .form select option{color:#111}
.sg .form label{color:#E6E3F2}.sg .info dt{color:var(--mut)}.sg .soc{color:var(--soga)}
.sg .bar2{background:rgba(255,255,255,.1)}.sg .saving{background:rgba(47,125,79,.2);color:#8be0ae}
.sg .msg.ok{background:rgba(47,125,79,.2);color:#8be0ae}.sg .msg.err{background:rgba(179,38,30,.2);color:#ffb4ab}
.sg .rng input,.sg .calc input[type=range]{accent-color:var(--soga)}.sg .total{color:var(--soga)}
.sg .doc svg{background:#fff}.sg .doc a{color:var(--soga)}
/* page hero tengah */
.sg .phero{background:none;text-align:center;padding:150px 0 28px}.sg .phero p{margin:0 auto;color:#C9C5DA}.sg .phero .toggle{justify-content:center}.sg .phero+section{padding-top:36px}
.sg .phero h1{font-size:clamp(34px,6vw,64px)}
.sg .done h1{font-size:clamp(34px,6vw,60px)}
/* CTA */
.sg .cta{background:none;padding:30px 0 90px}.sg .cta .w{max-width:1112px;padding:60px 24px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(135deg,rgba(242,163,58,.16),rgba(70,80,255,.14))}
.sg .cta h2,.sg .cta p{color:#fff}
.sg .foot{background:rgba(3,2,8,.85);border-top:1px solid var(--line)}
/* roadmap */
.sg .road{position:relative;max-width:920px;margin:48px auto 0;display:grid;gap:34px}
.sg .road:before{content:'';position:absolute;left:50%;top:0;bottom:0;border-left:3px dashed rgba(255,255,255,.28);transform:translateX(-50%)}
.sg .ri{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0}
.sg .ri .card{width:calc(100% - 44px)}.sg .ri.r .card{grid-column:2;justify-self:end}
.sg .ri small{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--soga);margin-bottom:8px}
.sg .node{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;display:grid;place-items:center;background:#0d0a1c;border:2px solid var(--soga);color:var(--soga);font-weight:800;font-size:18px;box-shadow:0 0 0 6px #06040f,0 0 26px rgba(242,163,58,.35)}
/* chat */
.sg .chat{max-width:760px;margin:36px auto 0;border:1px solid var(--line);border-radius:24px;background:var(--glass);backdrop-filter:blur(10px);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.sg .chead{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.03)}
.sg .chead img{width:42px;height:42px;border-radius:50%;background:#fff;padding:4px;object-fit:contain}.sg .chead b{display:block;color:#fff}.sg .chead span{font-size:13px;color:var(--mut)}
.sg .msgs{height:320px;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px}
.sg .bub{max-width:82%;padding:11px 15px;border-radius:16px;font-size:15.5px;line-height:1.55;animation:pop .3s ease}
.sg .bub.b{align-self:flex-start;background:rgba(255,255,255,.08);color:#ECEAF5;border-bottom-left-radius:4px}.sg .bub.u{align-self:flex-end;background:var(--soga);color:#1a1006;border-bottom-right-radius:4px;font-weight:600}
.sg .dots{display:flex;gap:5px;padding:14px 16px}.sg .dots i{width:7px;height:7px;border-radius:50%;background:#C9C5DA;animation:dt 1s infinite}.sg .dots i:nth-child(2){animation-delay:.15s}.sg .dots i:nth-child(3){animation-delay:.3s}@keyframes dt{40%{transform:translateY(-5px);opacity:.5}}
.sg .qs{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 14px}.sg .qs button{background:transparent;border:1px solid rgba(242,163,58,.5);color:#F5C987;padding:7px 13px;border-radius:99px;font:600 13.5px 'Plus Jakarta Sans',sans-serif;cursor:pointer;transition:background .15s}.sg .qs button:hover{background:rgba(242,163,58,.16)}
.sg .cin{display:flex;gap:10px;padding:12px 14px;border-top:1px solid var(--line)}.sg .cin input{flex:1;min-width:0;background:rgba(255,255,255,.06);border:1px solid var(--line);color:#fff;border-radius:99px;padding:10px 16px;font:15px 'Plus Jakarta Sans',sans-serif}
@media(max-width:960px){.sg .hero{padding-top:130px}.sg .hright{margin-top:8px}}
@media(max-width:720px){
 .sg .nav{top:10px}.sg .nav .bar{padding:0 8px 0 16px}.sg .nav nav{top:calc(100% + 8px);border:1px solid var(--line);border-radius:22px;background:rgba(10,7,22,.94);backdrop-filter:blur(14px)}.sg .nav nav.open{display:flex}
 .sg .hero{padding:112px 0 56px}.sg .phero{padding-top:112px}
 .sg .road:before{left:24px;transform:none}.sg .ri,.sg .ri.r{grid-template-columns:1fr}.sg .ri .card,.sg .ri.r .card{grid-column:1;width:calc(100% - 60px);margin-left:60px;justify-self:stretch}.sg .node{left:24px}
 .sg .bub{max-width:92%}.sg .msgs{height:300px}}
@media(prefers-reduced-motion:reduce){.sg::before{animation:none}.sg .caret{animation:none}}
.sg .hero h1{font-size:clamp(42px,6.6vw,86px)}
.sg .tablet .btn.o,.sg .phone .btn.o{border-color:#8B4513}
.sg .logo img{background:#fff;border-radius:10px;padding:2px}
.sg .chead b{margin-bottom:2px}