:root{--bg:#F4F8FE;--card:#fff;--line:#E3ECF8;--tx:#22304A;--mu:#6F7E99;--p:#6FA2F2;--p2:#9CC3FA;--pd:#4F86E6;--soft:#EAF2FF;--ok:#3DBE8B;--bad:#E7706D;--sh:0 8px 28px rgba(79,134,230,.10)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(900px 420px at 80% -80px,#E2EEFF,transparent),var(--bg);color:var(--tx);font:500 15px/1.6 'Plus Jakarta Sans',system-ui,sans-serif}
.hide{display:none!important}.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
a{color:inherit;text-decoration:none}h1,h2,h3{margin:0;letter-spacing:-.02em}h2{font-size:24px;margin-bottom:6px}.mu{color:var(--mu)}.sm{font-size:13px}.center{text-align:center}.grow{flex:1;min-width:0}
#loader{position:fixed;inset:0;background:var(--bg);display:grid;place-items:center;z-index:99;transition:opacity .5s,visibility .5s}#loader.done{opacity:0;visibility:hidden}
.ld{display:grid;justify-items:center;gap:14px;font-size:22px;font-weight:800}.ld .lg{animation:fl 1.6s ease-in-out infinite}@keyframes fl{50%{transform:translateY(-6px)}}
.ldbar{width:140px;height:5px;border-radius:9px;background:var(--line);overflow:hidden}.ldbar u{display:block;height:100%;width:40%;border-radius:9px;background:linear-gradient(90deg,var(--p2),var(--p));animation:ld 1.1s ease-in-out infinite}@keyframes ld{from{margin-left:-40%}to{margin-left:100%}}
.lg{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--p2),var(--p));color:#fff;box-shadow:0 6px 16px rgba(111,162,242,.35)}.lg.big{width:60px;height:60px;border-radius:20px}.lg.big .ic{width:28px;height:28px}
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:20px;padding:12px max(18px,calc(50% - 560px));background:rgba(244,248,254,.8);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px}.nav nav{display:flex;gap:4px;margin-left:12px}.nav nav a{padding:7px 12px;border-radius:10px;color:var(--mu);font-weight:600;font-size:14px}.nav nav a:hover{background:var(--soft);color:var(--pd)}.navr{margin-left:auto;display:flex;align-items:center;gap:12px}
.live{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--mu);font-weight:600}.live i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(61,190,139,.5);animation:pu 2s infinite}@keyframes pu{70%{box-shadow:0 0 0 8px rgba(61,190,139,0)}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;font:700 15px inherit;font-family:inherit;padding:12px 20px;border-radius:14px;color:#fff;background:linear-gradient(135deg,var(--p2),var(--p));box-shadow:0 6px 16px rgba(111,162,242,.3);transition:.2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(111,162,242,.38)}.btn:disabled{opacity:.6;cursor:wait}.btn.sm{padding:8px 14px;font-size:14px;border-radius:12px}.btn.full{width:100%;margin-top:12px}
.btn.ghost{background:#fff;color:var(--pd);border:1px solid var(--line);box-shadow:none}.btn.ghost:hover{background:var(--soft)}.btn.danger{color:var(--bad)}.btn.danger2{background:var(--bad);box-shadow:none}
main{max-width:1120px;margin:0 auto;padding:0 18px}.sec{padding:44px 0 6px}
.hero{text-align:center;padding:64px 0 24px}.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:99px;background:#fff;border:1px solid var(--line);color:var(--pd);font-weight:600;font-size:13.5px;box-shadow:var(--sh)}.chip .ic{width:16px;height:16px}
.hero h1{font-size:clamp(32px,6vw,54px);line-height:1.12;margin:22px 0 14px;font-weight:800}.hero h1 em{font-style:normal;background:linear-gradient(135deg,#8DB8F7,#5F93EA);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{max-width:540px;margin:0 auto;color:var(--mu);font-size:16.5px}.cta{display:flex;gap:12px;justify-content:center;margin:26px 0 34px;flex-wrap:wrap}
.stats{display:inline-grid;grid-template-columns:repeat(3,1fr);background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh)}.stats div{padding:16px 30px;display:grid}.stats div+div{border-left:1px solid var(--line)}.stats b{font-size:26px;font-weight:800;color:var(--pd)}.stats span{font-size:13px;color:var(--mu)}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--sh)}.main{max-width:480px;margin:0 auto}
label{display:block;font-size:13.5px;font-weight:700;margin:16px 0 0;color:var(--tx)}input{width:100%;margin-top:6px;padding:13px 14px;border:1.5px solid var(--line);border-radius:14px;font:500 15px inherit;font-family:inherit;color:var(--tx);background:#FAFCFF;outline:0;transition:.2s}input:focus{border-color:var(--p);box-shadow:0 0 0 4px rgba(111,162,242,.18);background:#fff}
.err{color:var(--bad);font-size:13.5px;min-height:20px;margin:10px 0 0}.inl{display:flex;gap:10px;align-items:center}.inl input{margin:6px 0 0}.inl .btn{margin-top:6px}
.codebox{display:block;width:100%;margin:20px 0 10px;padding:20px;border:2px dashed var(--p2);background:var(--soft);border-radius:18px;font:800 32px/1 ui-monospace,monospace;letter-spacing:.14em;color:var(--pd);cursor:pointer;text-align:center}
.dots{display:flex;gap:6px;justify-content:center;margin:6px 0}.dots i{width:7px;height:7px;border-radius:50%;background:var(--p);animation:bn 1.2s infinite}.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}@keyframes bn{40%{transform:translateY(-6px);opacity:.5}}
.dh{display:flex;align-items:center;gap:12px}.dh b{display:block}.av{display:grid;place-items:center;width:44px;height:44px;border-radius:15px;background:linear-gradient(135deg,var(--p2),var(--p));color:#fff;font-weight:800;flex:none}
.stp{padding:5px 12px;border-radius:99px;font-size:12.5px;font-weight:700;background:var(--soft);color:var(--pd)}.stp.on{background:#E4F7EF;color:#27956A}.stp.off{background:#FDEBEA;color:var(--bad)}
.tabs{display:flex;gap:4px;background:var(--bg);padding:4px;border-radius:14px;margin:18px 0}.tab{flex:1;border:0;background:none;padding:9px;border-radius:11px;font:600 14px inherit;font-family:inherit;color:var(--mu);cursor:pointer}.tab.on{background:#fff;color:var(--pd);box-shadow:0 2px 8px rgba(79,134,230,.12)}
.kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.kpi div{background:var(--bg);border-radius:14px;padding:12px}.kpi span{display:block;font-size:12px;color:var(--mu)}.kpi b{font-size:16px}
.bar{height:8px;background:var(--soft);border-radius:9px;margin:16px 0;overflow:hidden}.bar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--p2),var(--p));transition:width .6s}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.kv{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}.kv span{color:var(--mu)}
.tg{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}.tg>div{flex:1}.tg b{display:block;font-size:14.5px}.tg span{font-size:12.5px;color:var(--mu)}
.sw{width:46px;height:27px;border:0;border-radius:99px;background:#D5E0F1;position:relative;cursor:pointer;transition:.25s;flex:none}.sw:after{content:'';position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.15);transition:.25s}.sw.on{background:var(--p)}.sw.on:after{left:22px}
.shead{display:flex;justify-content:space-between;align-items:end;gap:14px;flex-wrap:wrap;margin-bottom:18px}.srch{position:relative;margin:0;width:230px}.srch .ic{position:absolute;left:12px;top:50%;margin-top:3px;transform:translateY(-50%);color:var(--mu);width:18px}.srch input{padding-left:38px;margin:0;background:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}.bot{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;transition:.2s}.bot:hover{transform:translateY(-2px);box-shadow:var(--sh)}.bot b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bot span{font-size:12.5px;color:var(--mu)}.bot>div:nth-child(2){min-width:0;flex:1}
.bot em,.tag{font-style:normal;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:99px;background:var(--soft);color:var(--pd);white-space:nowrap}.empty{grid-column:1/-1;text-align:center;color:var(--mu);padding:30px;background:#fff;border:1px dashed var(--line);border-radius:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}.grid3.two{grid-template-columns:repeat(2,1fr);max-width:720px}.grid3 b{display:block;margin:10px 0 4px;font-size:16px}.grid3 p{margin:0}.ico{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--soft);color:var(--pd)}
.card.hl{border-color:var(--p2);background:linear-gradient(180deg,#F3F8FF,#fff);position:relative}.tag{position:absolute;top:-11px;right:18px;background:linear-gradient(135deg,var(--p2),var(--p));color:#fff}.price{font-size:26px;font-weight:800;color:var(--pd);margin:6px 0}.price small{font-size:13px;color:var(--mu);font-weight:600}.card ul{padding-left:18px;color:var(--mu);margin:8px 0}
details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 18px;margin-top:10px}summary{cursor:pointer;font-weight:700}details p{margin:8px 0 0;color:var(--mu)}
footer{text-align:center;color:var(--mu);font-size:13.5px;padding:50px 0 34px}
dialog{border:0;border-radius:24px;padding:24px;width:min(92vw,400px);box-shadow:0 24px 60px rgba(40,70,130,.25);color:var(--tx)}dialog::backdrop{background:rgba(34,48,74,.35);backdrop-filter:blur(4px)}dialog h3{font-size:20px}
#plans{display:grid;gap:8px;margin:14px 0 4px}.plan{position:relative;display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border:1.5px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;font:600 15px inherit;font-family:inherit;color:var(--tx)}.plan.on{border-color:var(--p);background:var(--soft)}.plan small{display:block;font-size:12px;color:var(--ok);font-weight:600}.plan em{position:absolute;top:-9px;right:12px;font-style:normal;font-size:11px;font-weight:700;background:var(--p);color:#fff;padding:2px 9px;border-radius:99px}
#toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:#22304A;color:#fff;padding:11px 18px;border-radius:14px;font-size:14px;opacity:0;pointer-events:none;transition:.3s;z-index:90}#toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:720px){.nav nav,.live .t{display:none}.grid3,.grid3.two{grid-template-columns:1fr}.stats div{padding:14px 16px}.kpi{grid-template-columns:1fr 1fr 1fr}.srch{width:100%}}


/* ===== v2.1 — kertas, grid, judul, avatar, tiket pairing ===== */
:root{--paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .5 0 0 0 0 .8 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
body{background:linear-gradient(rgba(111,162,242,.075) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,rgba(111,162,242,.075) 1px,transparent 1px) 0 0/32px 32px,radial-gradient(900px 420px at 80% -80px,#E2EEFF,transparent),var(--bg)}
h1,h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-.01em}
.hero h1{font-weight:400;font-size:clamp(40px,7.4vw,68px);line-height:1.05}.hero h1 em{font-style:italic;padding:0 .08em;background:linear-gradient(135deg,#8DB8F7,#5F93EA);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:32px}h2::after{content:'';display:block;width:46px;height:4px;border-radius:9px;margin-top:8px;background:linear-gradient(90deg,var(--p),transparent)}
.card{background:var(--paper),linear-gradient(180deg,#fff,#FBFDFF);border-color:#DDE8F7;box-shadow:0 1px 0 #fff inset,0 14px 30px -14px rgba(79,134,230,.25)}
.card.hl{background:var(--paper),linear-gradient(180deg,#F1F7FF,#fff)}
.main{position:relative;margin-bottom:22px;box-shadow:0 14px 30px -14px rgba(79,134,230,.3),0 9px 0 -4px #F1F6FE,0 10px 0 -4px #DDE8F7,0 18px 0 -9px #F6FAFF,0 19px 0 -9px #E3ECF8}
.main::after{content:'';position:absolute;top:-1px;right:-1px;width:36px;height:36px;border-radius:0 22px 0 16px;background:linear-gradient(225deg,var(--bg) 50%,#D9E7FB 50%);box-shadow:-3px 3px 7px rgba(79,134,230,.14)}
.bot{background:var(--paper),#fff}.bot .av{width:46px;height:46px}
.av{background:none!important;box-shadow:none;padding:0;overflow:visible}.bav{width:100%;height:100%;display:block;filter:drop-shadow(0 4px 7px rgba(79,134,230,.28))}
.ticket{position:relative;display:flex;justify-content:center;gap:4px;width:100%;margin:22px 0 12px;padding:28px 16px;border:0;cursor:pointer;overflow:hidden;border-radius:16px;font:inherit;
background:var(--paper),linear-gradient(180deg,#F6FAFF,#E8F1FF);
-webkit-mask:radial-gradient(circle 9px at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 9px at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat}
.ticket::before{content:'';position:absolute;inset:9px;border:1.5px dashed #B9D2F7;border-radius:12px;pointer-events:none}
.ch{display:grid;place-items:center;width:clamp(24px,8vw,34px);height:clamp(36px,11vw,46px);border-radius:10px;background:#fff;box-shadow:0 2px 0 #D6E4F8,0 8px 12px -6px rgba(79,134,230,.4);font:700 clamp(17px,5.4vw,24px) ui-monospace,monospace;color:var(--pd);opacity:0;transform:translateY(12px) rotateX(-70deg);animation:flip .55s cubic-bezier(.2,.8,.2,1) forwards}
.sep{align-self:center;width:10px;height:3px;border-radius:3px;background:#B9D2F7;opacity:0;animation:flip .5s forwards}@keyframes flip{to{opacity:1;transform:none}}
.shine{position:absolute;top:0;bottom:0;left:-50%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);animation:sh 3s ease-in-out 1s infinite;pointer-events:none}@keyframes sh{to{left:120%}}
.ttl{height:4px;border-radius:9px;background:var(--soft);overflow:hidden;margin:4px 8px 10px}.ttl i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--p2),var(--p));animation:cd 120s linear forwards}@keyframes cd{to{width:0}}
.steps{counter-reset:s;list-style:none;padding:0;margin:16px 0 8px;display:grid;gap:9px}.steps li{counter-increment:s;display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--mu)}.steps li:before{content:counter(s);flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:8px;background:var(--soft);color:var(--pd);font-weight:700;font-size:12px}.steps b{color:var(--tx)}

/* ===== v2.2 — font santai, ikon duotone, baterai ===== */
.f{fill:currentColor;fill-opacity:.16;stroke:none}
h1,h2{font-family:inherit;font-weight:800;letter-spacing:-.025em}
.hero h1{font-weight:800;font-size:clamp(32px,6vw,54px);line-height:1.12}.hero h1 em{font-style:normal;padding:0}
h2{font-size:26px}h2::after{height:3px;width:38px}
.ico{width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,#EEF5FF,#D9E8FD);box-shadow:inset 0 0 0 1px #D0E1FA,0 6px 12px -6px rgba(79,134,230,.35)}.ico .ic{width:24px;height:24px}
.btn .ic{width:18px;height:18px}.lg .ic{width:20px;height:20px}
.batt{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--pd);background:#fff;border:1px solid var(--line);padding:4px 10px 4px 8px;border-radius:99px}.batt .ic{width:20px;height:20px}.batt #bf{fill:currentColor;stroke:none}.batt.low{color:var(--bad)}.batt.chg{color:#27956A}

/* ===== v2.3 — loader, banner 1:1, pembayaran QR ===== */
#loader{background:linear-gradient(rgba(111,162,242,.08) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,rgba(111,162,242,.08) 1px,transparent 1px) 0 0/32px 32px,radial-gradient(520px 380px at 50% 45%,#E4EFFF,transparent),var(--bg);transition:opacity .6s,visibility .6s,transform .6s,filter .6s}
#loader.done{opacity:0;visibility:hidden;transform:scale(1.04);filter:blur(6px)}
.orb{position:relative;width:132px;height:132px;display:grid;place-items:center}
.orb i{position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:var(--p);animation:spin 1.8s linear infinite}
.orb .r2{inset:12px;border-top-color:var(--p2);animation-duration:2.6s;animation-direction:reverse}
.orb .r3{inset:24px;border:1.5px dashed #C9DCF8;animation:spin 9s linear infinite}
.orb::before{content:'';position:absolute;inset:34px;border-radius:50%;background:radial-gradient(circle,rgba(111,162,242,.4),transparent 70%);animation:glow 2s ease-in-out infinite}
.orb .lg{position:relative}@keyframes spin{to{transform:rotate(360deg)}}@keyframes glow{50%{transform:scale(1.5);opacity:.5}}
.ldt{font-size:26px;letter-spacing:-.02em;background:linear-gradient(100deg,var(--tx) 30%,var(--p) 50%,var(--tx) 70%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shm 2.2s linear infinite}@keyframes shm{to{background-position:-200% 0}}
.ldm{margin:0;color:var(--mu);font-size:13.5px;min-height:20px}.ldbar{width:190px;height:6px}.ldbar u{width:0;margin:0;animation:none;transition:width .15s linear}.ld small{color:var(--pd);font-weight:700;font-size:12px}
.hero{position:relative;isolation:isolate}
.bn{position:absolute;z-index:-2;top:50%;left:50%;width:min(560px,92vw);aspect-ratio:1/1;object-fit:cover;transform:translate(-50%,-50%);border-radius:36px;opacity:.3;-webkit-mask:radial-gradient(circle at 50% 50%,#000 38%,transparent 72%);mask:radial-gradient(circle at 50% 50%,#000 38%,transparent 72%);pointer-events:none}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(rgba(111,162,242,.1) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,rgba(111,162,242,.1) 1px,transparent 1px) 0 0/32px 32px;-webkit-mask:radial-gradient(circle at 50% 45%,#000,transparent 75%);mask:radial-gradient(circle at 50% 45%,#000,transparent 75%)}
.updlg{max-height:92vh;overflow:auto}.updlg .steps{margin:0}.updlg label{margin-top:12px}
.pay{display:grid;grid-template-columns:132px 1fr;gap:14px;align-items:center;margin:14px 0 4px}
.qrw{position:relative;aspect-ratio:1/1;border-radius:16px;background:var(--paper),#fff;border:1px solid var(--line);padding:6px;box-shadow:0 8px 18px -10px rgba(79,134,230,.4)}.qrw img{width:100%;height:100%;object-fit:contain;border-radius:11px;display:block}
.qrph{display:none;position:absolute;inset:0;place-items:center;text-align:center;font-size:11.5px;color:var(--mu);padding:10px}.qrw.noqr img{display:none}.qrw.noqr .qrph{display:grid}
@media(max-width:420px){.pay{grid-template-columns:1fr}.qrw{max-width:200px;margin:auto}}

/* ===== v2.4 — palet gradasi lembut, banner 1:1 berbingkai, QR 2 langkah, loader tenang ===== */
:root{--tx:#3A4763;--mu:#7683A0;--p:#8DB4FA;--p2:#C3D5FF;--pd:#6F8FE8;--soft:#EEF3FF;--line:#E2EAF8;--gb:linear-gradient(135deg,#86B3FC 0%,#A9BDFD 60%,#C6D2FF 100%)}
.btn{background:var(--gb);text-shadow:0 1px 2px rgba(70,110,200,.28);box-shadow:0 8px 18px -8px rgba(120,150,235,.6)}.btn.ghost{text-shadow:none}
.lg{background:linear-gradient(135deg,#A9CBFF,#A9B4F8)}.tag,.sw.on{background:var(--gb)}.bar i,.ttl i,.ldbar u{background:var(--gb)}
.hero h1 em{background:linear-gradient(120deg,#7FB0FF,#AAA6F6);-webkit-background-clip:text;background-clip:text}
.stats{background:linear-gradient(180deg,#fff,#F0F5FF)}.plan.on{background:linear-gradient(135deg,#fff,#E7EFFF)}.card.hl{background:var(--paper),linear-gradient(180deg,#EFF5FF,#fff)}
.bnw{--k:linear-gradient(#9DBEFF,#9DBEFF);position:absolute;z-index:-2;top:50%;left:50%;width:min(500px,86vw);aspect-ratio:1/1;transform:translate(-50%,-50%);pointer-events:none}
.bnw img{width:100%;height:100%;object-fit:cover;display:block;border-radius:28px;opacity:.55;filter:saturate(.85);box-shadow:0 0 0 1px rgba(143,180,250,.55),0 0 0 8px rgba(255,255,255,.6),0 0 0 9px rgba(143,180,250,.3),0 28px 50px -22px rgba(100,140,230,.4)}
.bnw::after{content:'';position:absolute;inset:0;border-radius:28px;background:linear-gradient(180deg,rgba(244,248,254,.6),rgba(244,248,254,.18) 40%,rgba(244,248,254,.24) 60%,rgba(244,248,254,.7))}
.bnw::before{content:'';position:absolute;inset:-17px;pointer-events:none;background:var(--k) 0 0/26px 2px,var(--k) 0 0/2px 26px,var(--k) 100% 0/26px 2px,var(--k) 100% 0/2px 26px,var(--k) 0 100%/26px 2px,var(--k) 0 100%/2px 26px,var(--k) 100% 100%/26px 2px,var(--k) 100% 100%/2px 26px,var(--k) 50% 0/2px 9px,var(--k) 50% 100%/2px 9px,var(--k) 0 50%/9px 2px,var(--k) 100% 50%/9px 2px;background-repeat:no-repeat}
.updlg{width:min(94vw,440px)}.back{border:0;background:none;color:var(--pd);font:700 13.5px inherit;font-family:inherit;cursor:pointer;padding:0 0 8px}
.sum{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-radius:14px;background:linear-gradient(135deg,#fff,#E9F0FF);border:1px solid var(--line);margin:4px 0 12px}.sum span{font-weight:700}.sum b{font-size:21px;color:var(--pd)}
.qrw.big{width:min(100%,300px);margin:6px auto;aspect-ratio:auto;padding:10px;border-radius:20px}.qrw.big img{height:auto;max-height:56vh;object-fit:contain;border-radius:12px}.qrw.big.noqr{aspect-ratio:1/1}
.orb{width:92px;height:92px}.orb .r2,.orb .r3,.orb::before,#ldp,#ldm{display:none}.orb .r1{border-width:2px;animation-duration:1.4s}
.ldt{animation:none;background:none;color:var(--tx);-webkit-text-fill-color:currentColor}.ldbar{width:150px;height:4px}#loader.done{transform:none;filter:none}
@media(max-width:560px){.nav{gap:8px;padding:10px 14px}.logo{font-size:15px;gap:8px}.logo .brand{white-space:nowrap}.navr{gap:8px}.live{font-size:0}.live b{font-size:13px}.batt{padding:3px 8px 3px 6px}}

/* ===== v2.5 — latar full-bleed ala referensi, drawer menu ===== */
html,body{overflow-x:clip}
.hero{padding-bottom:48px}
.bnw{position:absolute;z-index:-2;top:0;bottom:0;left:50%;width:100vw;height:auto;aspect-ratio:auto;transform:translateX(-50%);overflow:hidden}
.bnw::before{display:none}
.bnw img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;border-radius:0;box-shadow:none;opacity:.45;filter:saturate(.8)}
.bnw::after{inset:0;border-radius:0;background:linear-gradient(180deg,rgba(244,248,254,.5) 0%,rgba(244,248,254,.2) 38%,rgba(244,248,254,.3) 62%,rgba(244,248,254,.96) 100%)}
.hero::after{left:50%;right:auto;width:100vw;transform:translateX(-50%);background:linear-gradient(rgba(111,162,242,.14) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(111,162,242,.14) 1px,transparent 1px) 0 0/40px 40px;-webkit-mask:linear-gradient(180deg,#000 55%,transparent);mask:linear-gradient(180deg,#000 55%,transparent)}
.clock{display:inline-block;margin-bottom:14px;padding:6px 16px;border-radius:12px;background:rgba(255,255,255,.75);border:1px solid var(--line);font:600 14px ui-monospace,monospace;letter-spacing:.2em;color:var(--mu);backdrop-filter:blur(6px)}
.icbtn{width:40px;height:40px;border-radius:13px;border:1px solid var(--line);background:linear-gradient(180deg,#fff,#F1F6FF);color:var(--pd);display:grid;place-items:center;cursor:pointer;flex:none}.icbtn:hover{background:var(--soft)}
#scrim{position:fixed;inset:0;background:rgba(58,71,99,.28);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:.25s;z-index:40}#scrim.open{opacity:1;visibility:visible}
#drawer{position:fixed;top:0;right:0;bottom:0;width:min(86vw,340px);background:var(--paper),linear-gradient(180deg,#fff,#F1F6FF);z-index:41;padding:18px;display:flex;flex-direction:column;gap:14px;transform:translateX(105%);transition:transform .3s cubic-bezier(.2,.8,.2,1);box-shadow:-20px 0 50px -20px rgba(79,134,230,.35);overflow:auto;border-radius:24px 0 0 24px}#drawer.open{transform:none}
.dhd{display:flex;justify-content:space-between;align-items:center;font-size:18px}
#drawer nav{display:grid;gap:2px}#drawer nav a{padding:11px 12px;border-radius:12px;font-weight:600;color:var(--tx)}#drawer nav a:hover{background:var(--soft);color:var(--pd)}
.dcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;display:grid;gap:10px;box-shadow:var(--sh)}
.dcard.up{grid-template-columns:auto 1fr;background:linear-gradient(135deg,#fff,#E9F0FF);align-items:center}.dcard.up b{display:block}.dcard.up p{margin:2px 0 0;font-size:13px;color:var(--mu)}.dcard.up .btn{grid-column:1/-1;margin:0}
.dh2{font-size:12.5px;color:var(--mu);text-transform:uppercase;letter-spacing:.07em}
.chrow{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}.chrow b{display:block}.chrow small{display:block;color:var(--mu);font-size:12.5px;line-height:1.4}.chrow em{font-style:normal;color:var(--pd);font-size:24px}
.own{margin:auto 0 0;text-align:center;font-size:13px;color:var(--mu)}body.lock{overflow:hidden}

/* ===== v2.6 — palet silver-blue, navbar ringan, hero baru, gaya balasan ===== */
:root{--bg:#F3F6FA;--tx:#3C4658;--mu:#788397;--p:#7D9CC9;--p2:#B7C8DD;--pd:#5F7FAE;--soft:#EDF2F8;--line:#DFE6EF;--sh:0 8px 28px rgba(95,127,174,.12);--gb:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 55%),linear-gradient(135deg,#7C9BC8 0%,#8FAAD0 55%,#AEC0D9 100%)}
body{background:linear-gradient(rgba(125,156,201,.1) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,rgba(125,156,201,.1) 1px,transparent 1px) 0 0/32px 32px,radial-gradient(900px 420px at 80% -80px,#E4EBF4,transparent),var(--bg)}
.btn{box-shadow:0 8px 18px -8px rgba(95,127,174,.55)}.btn:hover{box-shadow:0 12px 22px -8px rgba(95,127,174,.6)}.btn.ghost{background:#fff;color:var(--pd)}
.lg{background:var(--gb)}.hero h1 em{background:linear-gradient(120deg,#6C8DBC,#9DB3D3 55%,#7E90C0);-webkit-background-clip:text;background-clip:text}
.ico{background:linear-gradient(145deg,#fff,#E2E9F2);box-shadow:inset 0 0 0 1px #D3DCE8,0 6px 12px -6px rgba(95,127,174,.4)}
.nav{background:rgba(243,246,250,.95);backdrop-filter:none;-webkit-backdrop-filter:none;transform:translateZ(0)}
.bnw img{filter:none}.bnw::after{background:linear-gradient(180deg,rgba(243,246,250,.5) 0%,rgba(243,246,250,.2) 38%,rgba(243,246,250,.3) 62%,rgba(243,246,250,.96) 100%)}
.hero::after{background:linear-gradient(rgba(125,156,201,.15) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(125,156,201,.15) 1px,transparent 1px) 0 0/40px 40px}
.clock{backdrop-filter:none;background:rgba(255,255,255,.88)}.live i{animation:pu2 2s ease-in-out infinite;box-shadow:none}@keyframes pu2{50%{opacity:.4}}
#loader{background:linear-gradient(rgba(125,156,201,.08) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,rgba(125,156,201,.08) 1px,transparent 1px) 0 0/32px 32px,radial-gradient(520px 380px at 50% 45%,#E4EBF4,transparent),var(--bg)}#loader.done *{animation:none}
.stats{background:linear-gradient(180deg,#fff,#EEF2F7);box-shadow:var(--sh)}.stats b{background:var(--gb);-webkit-background-clip:text;background-clip:text;color:transparent}
.feat{padding-top:24px}.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.fc{background:var(--paper),linear-gradient(180deg,#fff,#F3F6FA);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--sh);transition:transform .2s}.fc:hover{transform:translateY(-3px)}.fc b{display:block;margin:12px 0 4px;font-size:15.5px}.fc p{margin:0;color:var(--mu);font-size:13.5px;line-height:1.5}
.rs{margin-top:18px}.rs>b{display:block}.rs>span{display:block;font-size:12.5px;color:var(--mu);margin-bottom:8px}
#rstyles{display:grid;gap:8px}.rso{display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:11px 14px;border:1.5px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;font-family:inherit;color:var(--tx);transition:.15s}
.rso i{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid #C5D1E2;display:grid;place-items:center}.rso.on{border-color:var(--p);background:linear-gradient(135deg,#fff,#EDF2F8)}.rso.on i{border-color:var(--p);background:var(--gb);box-shadow:inset 0 0 0 3px #fff}
.rso b{display:block;font-size:14px}.rso small{display:block;font-size:12px;color:var(--mu);line-height:1.35}
@media(max-width:720px){.fgrid{grid-template-columns:1fr 1fr}.fc{padding:14px}}

/* ===== v2.7 — perbaikan bug bayangan beranda, mode gelap/terang, kartu fitur baru, pengaturan ===== */
:root{--surf:#fff;--surf2:#F3F6FA}
html{background:var(--bg)}*{-webkit-tap-highlight-color:transparent}
html.notr *,html.notr *::before,html.notr *::after{transition:none!important}

/* -- FIX bayangan "terbelah": buang transform+mask+blur pada lapisan latar besar & hover transform di layar sentuh -- */
.hero{isolation:auto}
.hero::after{content:none}
.bnw{left:calc(50% - 50vw);transform:none;width:100vw;-webkit-mask:none;mask:none}
.bnw img{will-change:auto}
.bnw::after{background:linear-gradient(180deg,rgba(243,246,250,.55) 0%,rgba(243,246,250,.25) 38%,rgba(243,246,250,.4) 62%,#F3F6FA 100%)}
.clock{-webkit-backdrop-filter:none;backdrop-filter:none}
@media(hover:none){.fc:hover,.bot:hover,.btn:hover{transform:none}}

/* -- teks penjelasan hero: kontras jelas di atas banner -- */
.hero p{max-width:560px;padding:14px 18px;color:var(--tx);font-weight:600;font-size:16px;line-height:1.65;background:rgba(255,255,255,.8);border:1px solid var(--line);border-radius:18px;box-shadow:0 10px 24px -14px rgba(95,127,174,.45)}

/* -- kartu fitur baru -- */
.fgrid{gap:14px}
.fc{position:relative;overflow:hidden;padding:22px 18px 22px;border:1px solid transparent;border-radius:22px;transition:box-shadow .2s;
background:linear-gradient(180deg,var(--surf),var(--surf2)) padding-box,linear-gradient(145deg,rgba(125,156,201,.6),rgba(125,156,201,.08) 45%,rgba(160,150,235,.45)) border-box;
box-shadow:0 12px 26px -16px rgba(95,127,174,.5)}
@media(hover:hover){.fc:hover{transform:none;box-shadow:0 16px 30px -14px rgba(95,127,174,.6)}}
.fc::after{content:'';position:absolute;left:18px;bottom:0;width:38px;height:3px;border-radius:3px 3px 0 0;background:var(--gb)}
.fc .no{position:absolute;right:14px;top:6px;font:800 46px/1 inherit;font-family:inherit;font-style:normal;letter-spacing:-.05em;color:var(--pd);opacity:.13;pointer-events:none}
.fc .ico{width:48px;height:48px;border-radius:50%;color:#fff;background:conic-gradient(from 200deg,#8FB0E6,#B1A6F0,#8FD0E4,#8FB0E6);box-shadow:inset 0 0 0 3px rgba(255,255,255,.55),0 10px 18px -8px rgba(110,130,220,.6)}
.fc .ico .ic{width:22px;height:22px;stroke-width:2}
.fc b{margin:14px 0 4px}
@media(max-width:720px){
.fgrid{grid-template-columns:1fr;gap:12px}
.fc{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;padding:16px 16px 18px}
.fc .ico{grid-row:1/3}.fc b{margin:0 0 2px;align-self:end}.fc p{align-self:start}.fc .no{top:4px;font-size:38px}}

/* -- pengaturan akun -- */
.sethd{display:flex;justify-content:space-between;align-items:center;gap:10px}.sethd b{font-size:16px}
.saved{font-size:12.5px;font-weight:700;color:#27956A;opacity:0;transform:translateY(2px);transition:opacity .25s,transform .25s}.saved.show{opacity:1;transform:none}
.hint{font-size:12px;color:var(--mu);margin:8px 0 0;line-height:1.45}
.acts{display:flex;gap:10px;align-items:center;margin-top:14px}.acts .btn{flex:1;margin:0;padding:12px 16px;transition:.2s}
.btn.sm.idle{opacity:.55;box-shadow:none}.btn.sm.done{background:linear-gradient(135deg,#46C597,#3DBE8B);opacity:1}
.icbtn.rst{width:46px;height:46px;color:var(--bad)}
#toggles{margin-top:6px}

/* -- pilihan tema di menu & tombol di navbar -- */
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--bg);padding:4px;border-radius:14px}
.seg button{border:0;background:none;padding:9px 4px;border-radius:11px;font:600 13.5px inherit;font-family:inherit;color:var(--mu);cursor:pointer}
.seg button.on{background:var(--surf);color:var(--pd);box-shadow:0 2px 8px rgba(79,134,230,.14)}
.tbtn .sun{display:none}html[data-theme=dark] .tbtn .sun{display:block}html[data-theme=dark] .tbtn .moon{display:none}
@media(max-width:560px){.tbtn{display:none}}

/* ================= MODE GELAP ================= */
html[data-theme=light]{color-scheme:light}
html[data-theme=dark]{color-scheme:dark;--bg:#0D121A;--surf:#151B26;--surf2:#111721;--card:#151B26;--line:#232C3B;--tx:#E5EAF3;--mu:#92A0B7;--p:#7C9BCB;--p2:#46587A;--pd:#9DB7E6;--soft:#1A2231;--sh:0 12px 30px -12px rgba(0,0,0,.6);--paper:linear-gradient(transparent,transparent);--gb:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 55%),linear-gradient(135deg,#5E7FB4 0%,#6F8DC0 55%,#8499C6 100%)}
html[data-theme=dark] body{background:linear-gradient(rgba(125,156,201,.06) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,rgba(125,156,201,.06) 1px,transparent 1px) 0 0/32px 32px,radial-gradient(900px 420px at 80% -80px,#1A2433,transparent),var(--bg)}
html[data-theme=dark] :is(.chip,.btn.ghost,.batt,.bot,.empty,details,.plan,.rso,.srch input,.tab.on,.ch,.dcard,.icbtn,.updlg,dialog,.seg button.on){background:var(--surf)}
html[data-theme=dark] .icbtn:hover,html[data-theme=dark] .btn.ghost:hover{background:var(--soft)}
html[data-theme=dark] .qrw{background:#fff}
html[data-theme=dark] .card{background:linear-gradient(180deg,#171E2A,#131923);border-color:var(--line);box-shadow:0 14px 30px -16px rgba(0,0,0,.7)}
html[data-theme=dark] .card.hl{background:linear-gradient(180deg,#1B2538,#151B26);border-color:#3A4D70}
html[data-theme=dark] :is(.stats,.sum,.dcard.up,.plan.on,.rso.on){background:linear-gradient(180deg,#1B2435,#151B26)}
html[data-theme=dark] .ico{background:linear-gradient(145deg,#222C3E,#171E2B);box-shadow:inset 0 0 0 1px #2C3850,0 6px 12px -6px rgba(0,0,0,.6)}
html[data-theme=dark] .fc .ico{background:conic-gradient(from 200deg,#6F90C8,#8F85D6,#6FB4CC,#6F90C8);box-shadow:inset 0 0 0 3px rgba(255,255,255,.22),0 10px 18px -8px rgba(0,0,0,.7)}
html[data-theme=dark] .fc{background:linear-gradient(180deg,#171E2A,#121822) padding-box,linear-gradient(145deg,rgba(157,183,230,.5),rgba(157,183,230,.06) 45%,rgba(160,150,235,.35)) border-box;box-shadow:0 12px 26px -16px rgba(0,0,0,.8)}
html[data-theme=dark] .nav{background:rgba(13,18,26,.95)}
html[data-theme=dark] .clock{background:rgba(21,27,38,.92);color:var(--mu)}
html[data-theme=dark] .hero p{background:rgba(21,27,38,.82);box-shadow:0 10px 24px -14px rgba(0,0,0,.7)}
html[data-theme=dark] .bnw::after{background:linear-gradient(180deg,rgba(13,18,26,.6) 0%,rgba(13,18,26,.4) 38%,rgba(13,18,26,.55) 62%,#0D121A 100%)}
html[data-theme=dark] .bnw img{opacity:.5}
html[data-theme=dark] input{background:#0F141D;border-color:var(--line);color:var(--tx)}
html[data-theme=dark] input:focus{background:#121927;border-color:var(--p);box-shadow:0 0 0 4px rgba(124,155,203,.22)}
html[data-theme=dark] input::placeholder{color:#5F6C82}
html[data-theme=dark] .srch input{background:var(--surf)}
html[data-theme=dark] .sw{background:#2B374C}html[data-theme=dark] .sw.on{background:var(--gb)}
html[data-theme=dark] .stp{background:#1B2434;color:var(--pd)}html[data-theme=dark] .stp.on{background:#12302A;color:#4FD1A0}html[data-theme=dark] .stp.off{background:#3A1E22;color:#F08A87}
html[data-theme=dark] .bot em,html[data-theme=dark] .tag{background:var(--soft);color:var(--pd)}html[data-theme=dark] .tag{background:var(--gb);color:#fff}
html[data-theme=dark] .main{box-shadow:0 14px 30px -14px rgba(0,0,0,.7),0 9px 0 -4px #121822,0 10px 0 -4px var(--line),0 18px 0 -9px #0F141C,0 19px 0 -9px #1B2431}
html[data-theme=dark] .main::after{background:linear-gradient(225deg,var(--bg) 50%,#263147 50%);box-shadow:-3px 3px 7px rgba(0,0,0,.4)}
html[data-theme=dark] .ticket{background:linear-gradient(180deg,#1B2538,#141B28)}
html[data-theme=dark] .ticket::before{border-color:#3A4C6E}
html[data-theme=dark] .ch{box-shadow:0 2px 0 #2A3650,0 8px 12px -6px rgba(0,0,0,.6)}
html[data-theme=dark] .sep{background:#3A4C6E}
html[data-theme=dark] .shine{background:linear-gradient(100deg,transparent,rgba(255,255,255,.12),transparent)}
html[data-theme=dark] #drawer{background:linear-gradient(180deg,#171E2A,#111721);box-shadow:-20px 0 50px -20px rgba(0,0,0,.7)}
html[data-theme=dark] #loader{background:linear-gradient(rgba(125,156,201,.06) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,rgba(125,156,201,.06) 1px,transparent 1px) 0 0/32px 32px,radial-gradient(520px 380px at 50% 45%,#1A2433,transparent),var(--bg)}
html[data-theme=dark] .saved{color:#4FD1A0}
html[data-theme=dark] .seg button.on{box-shadow:none}
html[data-theme=dark] .stats b{background:var(--gb);-webkit-background-clip:text;background-clip:text}

/* ===== v2.8 — FIX banner beranda tidak tampil + grid samar 1:1 + ikon (tampilan saja) ===== */
/* Penyebab: .hero{isolation:auto} (v2.7) membuat .bnw (z-index:-2) jatuh di belakang latar body, jadi hilang. */
.hero{position:relative;isolation:isolate;padding-top:34px;padding-bottom:56px}
.bnw{position:absolute;z-index:-2;top:0;bottom:auto;left:calc(50% - 50vw);width:100vw;height:auto;aspect-ratio:1/1;max-height:100%;transform:none;overflow:hidden;pointer-events:none}
.bnw img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;opacity:.3;filter:none;border-radius:0}
.bnw::before{display:none}
.bnw::after{content:'';position:absolute;inset:0;border-radius:0;background:linear-gradient(180deg,rgba(243,246,250,.15) 0%,rgba(243,246,250,.1) 40%,rgba(243,246,250,.75) 82%,var(--bg) 100%)}
.hero::after{content:'';display:block;position:absolute;z-index:-3;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;transform:none;pointer-events:none;-webkit-mask:none;mask:none;background:linear-gradient(180deg,transparent 60%,var(--bg) 100%),linear-gradient(rgba(125,156,201,.2) 1px,transparent 1px) 0 0/36px 36px,linear-gradient(90deg,rgba(125,156,201,.2) 1px,transparent 1px) 0 0/36px 36px}
@media(min-width:900px){.bnw{width:min(100vw,960px);left:calc(50% - min(100vw,960px)/2)}}
html[data-theme=dark] .bnw img{opacity:.38}
html[data-theme=dark] .bnw::after{background:linear-gradient(180deg,rgba(13,18,26,.2) 0%,rgba(13,18,26,.15) 40%,rgba(13,18,26,.8) 82%,#0D121A 100%)}
html[data-theme=dark] .hero::after{background:linear-gradient(180deg,transparent 60%,var(--bg) 100%),linear-gradient(rgba(125,156,201,.1) 1px,transparent 1px) 0 0/36px 36px,linear-gradient(90deg,rgba(125,156,201,.1) 1px,transparent 1px) 0 0/36px 36px}
.hero .chip{background:var(--soft)}
.hero .cta .btn{min-width:200px}
.hero .cta .btn .ic{width:18px;height:18px}
.stats div{justify-items:center;text-align:center}.stats .si{width:20px;height:20px;color:var(--pd);margin-bottom:4px;opacity:.85}
/* strip ikon */
.plat{padding-top:30px;text-align:center}
.plt{margin:0 0 14px;font-size:12.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--mu)}
.prow{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;max-width:640px;margin:0 auto}
.prow>div{display:grid;justify-items:center;gap:8px}
.prow small{font-size:12px;font-weight:700;color:var(--mu)}
.pi{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--surf);border:1px solid var(--line);color:var(--pd);box-shadow:var(--sh);transition:transform .2s}
.pi .ic{width:26px;height:26px;stroke-width:1.9}
@media(hover:hover){.prow>div:hover .pi{transform:translateY(-3px)}}
@media(max-width:420px){.pi{width:50px;height:50px}.pi .ic{width:23px;height:23px}}
/* ikon judul seksi */
h2 .hi{display:inline-grid;place-items:center;width:34px;height:34px;margin-right:10px;border-radius:11px;vertical-align:-6px;color:#fff;background:var(--gb)}
h2 .hi .ic{width:19px;height:19px;stroke-width:2}
/* menu drawer */
#drawer nav a{display:flex;align-items:center;gap:12px}
#drawer nav a .ic{width:20px;height:20px;color:var(--pd)}

/* ===== v2.9 — FIX garis terbelah & teks menyatu; hero tanpa kotak; tema default terang ===== */
/* banner: tanpa opacity/filter (pemicu garis terbelah di Chrome HP) -> redup lewat lapisan warna solid di atasnya */
.bnw{top:0;bottom:0;height:auto;aspect-ratio:auto;max-height:none;left:calc(50% - 50vw);width:100vw;transform:none;overflow:hidden}
.bnw img{opacity:1;filter:none;object-fit:cover;object-position:center 18%;will-change:auto}
.bnw::after{background:linear-gradient(180deg,rgba(243,246,250,.74) 0%,rgba(243,246,250,.78) 55%,rgba(243,246,250,.9) 85%,#F3F6FA 100%)}
.hero::after{z-index:-1;background:linear-gradient(180deg,transparent 70%,#F3F6FA 100%),linear-gradient(rgba(95,127,174,.16) 1px,transparent 1px) 0 0/36px 36px,linear-gradient(90deg,rgba(95,127,174,.16) 1px,transparent 1px) 0 0/36px 36px}
@media(min-width:900px){.bnw{width:100vw;left:calc(50% - 50vw)}}
html[data-theme=dark] .bnw img{opacity:1}
html[data-theme=dark] .bnw::after{background:linear-gradient(180deg,rgba(13,18,26,.7) 0%,rgba(13,18,26,.74) 55%,rgba(13,18,26,.9) 85%,#0D121A 100%)}
html[data-theme=dark] .hero::after{z-index:-1;background:linear-gradient(180deg,transparent 70%,#0D121A 100%),linear-gradient(rgba(125,156,201,.1) 1px,transparent 1px) 0 0/36px 36px,linear-gradient(90deg,rgba(125,156,201,.1) 1px,transparent 1px) 0 0/36px 36px}
/* teks sambutan: tanpa kotak, kontras jelas */
.hero p,html[data-theme=dark] .hero p{background:none;border:0;box-shadow:none;border-radius:0;padding:0;max-width:540px;font-weight:600;font-size:16px;line-height:1.7;color:var(--tx);text-shadow:0 0 10px var(--bg),0 0 4px var(--bg),0 1px 2px var(--bg)}
.hero h1{color:var(--tx);text-shadow:0 0 14px var(--bg),0 0 5px var(--bg)}
.hero h1 em{background:linear-gradient(120deg,#4A6FA5,#6A78C8);-webkit-background-clip:text;background-clip:text;text-shadow:none}
html[data-theme=dark] .hero h1 em{background:linear-gradient(120deg,#8FB0E8,#B3A9F2);-webkit-background-clip:text;background-clip:text}
.clock,.hero .chip{background:var(--surf)}

/* ===== v2.10 — drawer mulus, loader robot lucu, aturan jadibot, default gelap =====
   Catatan: situs ini sengaja TIDAK mengikuti "kurangi animasi" (tidak ada @media prefers-reduced-motion),
   semua animasi murni CSS transform/opacity supaya ringan. */
#scrim{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(20,28,45,.42);transition:opacity .22s ease,visibility 0s linear .22s}
#scrim.open{transition:opacity .22s ease,visibility 0s}
#drawer{background:linear-gradient(180deg,#fff,#F1F6FF);box-shadow:none;border-radius:0;border-left:1px solid var(--line);will-change:transform;transform:translate3d(100%,0,0);transition:transform .26s cubic-bezier(.22,.8,.3,1);contain:layout paint;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#drawer.open{transform:translate3d(0,0,0)}
html[data-theme=dark] #drawer{background:linear-gradient(180deg,#171E2A,#111721);box-shadow:none}
body.lock{overflow:visible}
/* kartu aturan */
.rules{gap:12px}
.rl{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;color:inherit}
.rl .ico{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;color:#fff;background:var(--gb)}
.rl .ico .ic{width:18px;height:18px;stroke-width:2}
.rl b{display:block;font-size:14px;margin-bottom:2px}
.rl small{display:block;color:var(--mu);font-size:12.5px;line-height:1.5}
/* loader robot lucu (tanpa kaca/blur) */
#loader{backdrop-filter:none;-webkit-backdrop-filter:none}
.orb,.ldt{display:none}
.ld{gap:10px}
.ld #ldm{display:block;font-size:14px;font-weight:700;color:var(--mu);min-height:22px;margin:0}
.ld .ldbar{width:170px;height:8px;border-radius:9px;background:var(--soft);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.ld .ldbar u{display:block;height:100%;border-radius:9px;transition:width .2s linear}
.cb{width:124px;height:128px}
.cb svg{overflow:visible;display:block}
.cb *{transform-box:fill-box}
.cbh{fill:var(--p2);stroke:var(--p);stroke-width:2.5}
.cbf{fill:#27324A}
.cbe{fill:#8FE3D0;transform-origin:center;animation:cbbl 3s infinite}
.cbm{fill:none;stroke:#8FE3D0;stroke-width:2.6;stroke-linecap:round}
.cbb{fill:#FF9DB5;opacity:.85}
.cbn{fill:none;stroke:var(--p);stroke-width:3;stroke-linecap:round}
.cba{fill:#FFC857;transform-origin:center;animation:cbpu 1s ease-in-out infinite}
.cbl,.cbr{fill:var(--p)}
.cbl{transform-origin:50% 12%;animation:cbwl 1s ease-in-out infinite}
.cbr{transform-origin:50% 12%;animation:cbwr 1s ease-in-out infinite}
.cbj{animation:cbjp 1s ease-in-out infinite}
.cbs{fill:rgba(60,80,120,.22);transform-origin:center;animation:cbsh 1s ease-in-out infinite}
.cbk{fill:#FFC857;transform-origin:center;animation:cbtw 1.6s ease-in-out infinite}
.cbk.k2{animation-delay:.5s;fill:#9DB7E6}.cbk.k3{animation-delay:1s;fill:#FF9DB5}
@keyframes cbjp{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes cbsh{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.72);opacity:.55}}
@keyframes cbbl{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.1)}}
@keyframes cbpu{50%{transform:scale(1.35)}}
@keyframes cbwl{0%,100%{transform:rotate(14deg)}50%{transform:rotate(-26deg)}}
@keyframes cbwr{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(26deg)}}
@keyframes cbtw{0%,100%{transform:scale(.4);opacity:.3}50%{transform:scale(1);opacity:1}}