/* Viralin — CSS hasil pecahan dari HTML live (8 blok <style> digabung urut dokumen).
   Sumber: referensi/html-live-asli.html (md5 abfc867c7c51ec9af6aaf3c9e4cbf5df). Isi tidak diubah. */

/* ===== blok style 1 (posisi asal @2390) ===== */


:root{--ink:#0B0F19;--ink2:#101828;--panel:#131C31;--line:rgba(255,255,255,.09);--lime:#A3E635;--lime-dim:#365314;--paper:#F4F5EF;--paper-line:#E2E4D8;--txt-dark:#131711;--txt-mut:#5A6B7D;--mut:#8A97A8;--txt:#EDF2E4;--mono:'IBM Plex Mono','DejaVu Sans Mono',ui-monospace,monospace;--disp:'Sora',system-ui,sans-serif;--body:'Inter',system-ui,sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--body);background:var(--ink);color:var(--txt);-webkit-font-smoothing:antialiased;line-height:1.6;font-size:15px}
a{color:inherit}
h1,h2,h3{font-family:var(--disp);letter-spacing:-.03em;line-height:1.12}
.mono{font-family:var(--mono)}
.muted{color:var(--mut)}.small{font-size:13px}
input,select,textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.04);color:var(--txt);font:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--lime);outline-offset:1px}
label{display:block;margin:14px 0 4px;font-weight:600;font-size:13.5px}
button,.btn{display:inline-block;background:var(--lime);color:var(--ink);border:0;border-radius:10px;padding:12px 22px;cursor:pointer;font-weight:600;font-size:14.5px;text-decoration:none;transition:transform .18s ease,box-shadow .2s ease,background .2s ease}
button:hover,.btn:hover{transform:translateY(-1px)}
.btn.secondary,.btn-ghost{background:transparent;color:var(--txt);border:1px solid rgba(255,255,255,.25)}
.btn.small{padding:8px 14px;font-size:13px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;margin:16px 0}
.banner{background:rgba(163,230,53,.08);border:1px solid rgba(163,230,53,.35);border-radius:12px;padding:14px 18px;margin:16px 0}
.stat{font-family:var(--mono);font-size:32px;font-weight:600;line-height:1.2}
.view{display:none}.view.active{display:block;animation:fadeIn .2s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--ink2);border:1px solid var(--line);border-radius:15px;overflow:hidden}
th{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;color:var(--mut);text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
td{padding:14px 16px;font-size:13.5px;border-bottom:1px solid rgba(255,255,255,.045);vertical-align:middle}
tr:last-child td{border-bottom:none}
.tablewrap{overflow:auto}
.badge{display:inline-block;padding:3px 9px;border:1px solid var(--line);border-radius:999px;font-size:12px;font-weight:600;color:var(--mut);font-family:var(--mono)}
.pill{display:inline-block;padding:7px 14px;border:1px solid var(--line);border-radius:999px;cursor:pointer;margin:2px;background:rgba(255,255,255,.02);font-weight:600;font-family:var(--mono);font-size:12px;color:#C6D0BE}
.pill.active{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.pill-done{background:rgba(163,230,53,.16);color:var(--lime)}
.pill-live{background:rgba(96,165,250,.16);color:#7FB3FA}
.drop{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;font-family:var(--mono);margin-left:6px;white-space:nowrap}
.drop-good{background:rgba(163,230,53,.16);color:var(--lime)}
.drop-warn{background:rgba(250,204,21,.16);color:#FACC15}
.drop-bad{background:rgba(248,113,113,.16);color:#F87171}
.rec{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;font-family:var(--mono);background:var(--lime);color:var(--ink);margin-left:6px;white-space:nowrap}
/* ---- landing ---- */
.topbar{background:#06090F;color:#B9C4AE;font-size:12.5px;letter-spacing:.02em;text-align:center;padding:9px 16px;border-bottom:1px solid var(--line)}
.topbar b{color:var(--lime);font-weight:600}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.landnav{display:flex;align-items:center;gap:14px;padding:20px 0}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:-.02em}
.logo .mark{width:34px;height:34px;border-radius:9px;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-size:19px;font-weight:800}
.logo img.markimg{width:34px;height:34px;border-radius:9px}
.logo img.lockup{height:34px;width:auto;display:block}
.logo small{display:block;font-family:var(--mono);font-weight:400;font-size:10px;color:var(--mut);letter-spacing:.14em}
.navlinks{margin-left:auto;display:flex;gap:26px;font-size:14px;color:#C6D0BE}
.navlinks a{color:inherit;text-decoration:none}
.hero{position:relative;padding:34px 0 74px;background:radial-gradient(720px 340px at 82% 8%,rgba(163,230,53,.14),transparent 60%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),var(--ink);background-size:auto,44px 44px,44px 44px,auto}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:start}
.badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--lime);border:1px solid rgba(163,230,53,.4);border-radius:999px;padding:6px 13px;margin-bottom:22px}
.badge i{width:7px;height:7px;border-radius:50%;background:var(--lime);display:inline-block}
.hero h1{font-weight:800;font-size:54px;line-height:1.04;margin-bottom:20px}
.hero h1 .hl{color:var(--lime);box-shadow:inset 0 -0.32em 0 rgba(163,230,53,.22)}
.sub{font-size:17px;line-height:1.6;color:#B9C4AE;max-width:480px;margin-bottom:28px}
.cta-row{display:flex;gap:12px;margin-bottom:26px;flex-wrap:wrap}
.proof{display:flex;gap:20px;font-family:var(--mono);font-size:12px;color:var(--mut);flex-wrap:wrap}
.proof b{color:var(--txt);font-weight:600}
.dash{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:0 34px 70px rgba(0,0,0,.5);overflow:hidden}
.dash-head{display:flex;align-items:center;gap:10px;padding:15px 20px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--mut)}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.dash-head .saldo{margin-left:auto;color:var(--txt);font-size:13px}
.dash-head .saldo b{color:var(--lime)}
.dash-body{padding:18px 20px 20px}
.order{border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin-bottom:10px;background:rgba(255,255,255,.02)}
.order .r1{display:flex;align-items:baseline;gap:9px;font-size:14px;font-weight:600}
.order .r1 .harga{margin-left:auto;font-family:var(--mono);font-size:13.5px;color:var(--txt)}
.order .r2{font-family:var(--mono);font-size:11.5px;color:var(--mut);margin-top:5px;display:flex;gap:12px;flex-wrap:wrap}
.dash-cta{display:flex;gap:10px;margin-top:16px}
.dash-cta .btn{flex:1;text-align:center;padding:11px}
.logincard{background:var(--panel);border:1px solid rgba(163,230,53,.4);border-radius:18px;padding:22px;margin-top:16px}
.logincard h2{font-size:20px;margin-bottom:4px}
.authtabs{display:flex;gap:8px;margin:4px 0 6px}
.authtabs button{flex:1;background:transparent;color:var(--mut);border:1px solid var(--line);padding:9px}
.authtabs button.on{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.passwrap{position:relative}
.passwrap input{padding-right:84px}
.eyebtn{position:absolute;right:6px;top:50%;transform:translateY(-50%);padding:6px 11px;font-size:12px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--txt);border-radius:8px}
.eyebtn:hover{transform:translateY(-50%)}
.authmsg{display:none;border-radius:10px;padding:10px 13px;font-size:13.5px;margin:10px 0}
.authmsg.err{display:block;background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.4);color:#FCA5A5}
.authmsg.ok{display:block;background:rgba(163,230,53,.1);border:1px solid rgba(163,230,53,.4);color:var(--lime)}
.linklike2{color:var(--lime);cursor:pointer;text-decoration:underline;font-size:13.5px}
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0E1524}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.statbox{padding:30px 26px;border-left:1px solid var(--line)}
.statbox:first-child{border-left:none}
.statbox .num{font-family:var(--disp);font-weight:800;font-size:40px;color:var(--lime);letter-spacing:-.02em}
.statbox .lbl{font-size:13px;color:var(--mut);margin-top:5px;line-height:1.5}
.light{background:var(--paper);color:var(--txt-dark)}
.light-alt{background:#ECEEE2;color:var(--txt-dark)}
.sec{padding:78px 0}
.kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:#6B7A56;font-weight:600;margin-bottom:12px}
.sec h2{font-size:36px;margin-bottom:14px}
.sec-sub{color:var(--txt-mut);font-size:16px;max-width:560px;line-height:1.6;margin-bottom:40px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cards .card{background:#fff;border:1px solid var(--paper-line);color:var(--txt-dark)}
.cards .card p{color:var(--txt-mut)}
.gly{width:42px;height:42px;border-radius:11px;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-family:var(--mono);font-size:17px;font-weight:600;margin-bottom:15px}
.cards .card h3{font-size:17.5px;font-weight:700;margin-bottom:7px}
.cards .card p{font-size:14px;line-height:1.6}
.harga-mono{font-family:var(--mono);font-size:12px;color:#6B7A56;margin-top:13px;display:block}
.kenapa{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px}
.why-row{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid var(--paper-line)}
.why-row:first-child{padding-top:6px}
.why-num{font-family:var(--disp);font-weight:800;font-size:30px;color:transparent;-webkit-text-stroke:1.6px var(--ink);min-width:52px}
.why-row h3{font-size:16.5px;font-weight:700;margin-bottom:5px}
.why-row p{font-size:14.5px;color:var(--txt-mut);line-height:1.6}
.track{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin-top:44px}
.track::before{content:'';position:absolute;top:21px;left:6%;right:6%;height:2px;background:var(--paper-line)}
.step{padding:0 18px 0 0;position:relative}
.step .n{width:42px;height:42px;border-radius:50%;background:var(--lime);color:var(--ink);font-family:var(--mono);font-weight:600;font-size:14px;display:grid;place-items:center;position:relative;z-index:1;margin-bottom:16px}
.step h3{font-size:16px;font-weight:700;margin-bottom:6px}
.step p{font-size:14px;color:var(--txt-mut);line-height:1.6}
.tiket{border:1.5px dashed #C9CCBB;border-radius:16px;padding:30px;text-align:center;color:var(--txt-mut);background:#FBFBF7}
.tiket .mono{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:#6B7A56;display:block;margin-bottom:8px}
/* Bukti sosial: popup order melayang + testimoni geser (datanya contoh, lihat blok DATA CONTOH di script) */
.spop{position:fixed;left:20px;bottom:20px;z-index:60;width:322px;max-width:calc(100vw - 32px);background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 22px 48px rgba(0,0,0,.45);padding:14px 38px 14px 14px;display:flex;gap:12px;align-items:flex-start;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .45s ease,transform .45s ease}
.spop.show{opacity:1;transform:translateY(0);pointer-events:auto}
.spop-av{width:42px;height:42px;border-radius:50%;background:var(--lime);display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:17px;color:var(--ink);flex:none}
.spop-body{min-width:0}
.spop-user{font-weight:700;font-size:14px;color:var(--txt)}
.spop-order{font-size:13.5px;color:var(--txt);margin-top:1px}
.spop-order .num{font-family:var(--mono);color:var(--lime);font-weight:600}
.spop-time{font-size:12px;color:var(--mut);margin-top:2px}
.spop-time .ok{color:var(--lime);font-weight:700}
.spop-x{position:absolute;top:6px;right:8px;background:none;border:0;color:var(--mut);font-size:17px;cursor:pointer;padding:2px 7px;line-height:1.2}
.spop-x:hover{color:var(--txt)}
@media(max-width:640px){.spop{left:16px;right:16px;bottom:76px;width:auto}}
.tmarq{overflow:hidden;margin-top:28px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.tmarq-track{display:flex;width:max-content;animation:tscroll 65s linear infinite}
.tmarq:hover .tmarq-track{animation-play-state:paused}
@keyframes tscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tcard{flex:none;width:340px;max-width:82vw;margin-right:18px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;color:var(--txt)}
.tcard .tstars{color:var(--lime);font-size:15px;letter-spacing:3px}
.tcard p{font-size:14.5px;line-height:1.65;margin:10px 0 0}
.tcard .tuser{font-family:var(--mono);font-size:12.5px;color:var(--mut);margin-top:12px}
@media(prefers-reduced-motion:reduce){.tmarq-track{animation:none}.spop{transition:none}}
.cta-band{background:var(--ink);border-radius:22px;padding:52px;display:flex;align-items:center;gap:40px;color:#fff}
.cta-band h2{color:#fff;margin-bottom:10px}
.cta-band p{color:#B9C4AE;line-height:1.6;max-width:520px}
.cta-band .btn{margin-left:auto;white-space:nowrap}
.landfoot{padding:30px 0 40px;font-family:var(--mono);font-size:12px;color:#67707E;display:flex;gap:20px;flex-wrap:wrap}
/* ---- dashboard ---- */
#authView{display:block}
#app{display:none}#app.on{display:grid;grid-template-columns:264px 1fr;min-height:100vh}
.sidebar{background:var(--ink2);border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;overflow:auto}
.sidebar .logo{padding:2px 8px 16px;font-size:16.5px}
.sidebar .logo .mark{width:31px;height:31px;border-radius:8px;font-size:16px}
.saldo-card{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:13px 14px;margin-bottom:14px}
.saldo-card .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--mut)}
.saldo-card .amt{font-family:var(--mono);font-size:19px;font-weight:600;color:#fff;margin:4px 0 10px}
.saldo-card .amt b{color:var(--lime)}
.saldo-card .btn{display:block;text-align:center;padding:8px;font-size:13px}
.grup{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:#5B6B82;padding:12px 10px 5px}
.menu button{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;color:#C6D0BE;background:none;border:0;font-size:13.5px;width:100%;text-align:left;font-weight:400}
.menu button .g{font-family:var(--mono);font-size:11px;width:22px;height:22px;border-radius:6px;background:rgba(255,255,255,.05);display:grid;place-items:center;color:var(--mut);flex:none}
.menu button .g svg{width:16px;height:16px;display:block;flex:none}
.menu button:hover{background:rgba(255,255,255,.04);transform:none}
.menu button.active{background:rgba(163,230,53,.13);color:#fff;font-weight:600}
.menu button.active .g{background:var(--lime);color:var(--ink)}
.menu button .bdg{margin-left:auto;font-family:var(--mono);font-size:10px;background:rgba(163,230,53,.16);color:var(--lime);border-radius:99px;padding:2px 7px}
.userchip{margin-top:auto;display:flex;gap:10px;align-items:center;border-top:1px solid var(--line);padding:14px 8px 2px}
.userchip .av{width:32px;height:32px;border-radius:50%;background:var(--lime);color:var(--ink);font-weight:700;display:grid;place-items:center;font-size:13px;flex:none;overflow:hidden}
.userchip .av img{width:100%;height:100%;object-fit:cover;display:block}
.userchip .nm{font-size:13px;font-weight:600}
.userchip .rl{font-family:var(--mono);font-size:10.5px;color:var(--mut)}
.userchip .btn{margin-left:auto;padding:7px 12px;font-size:12px}
#main{padding:0 30px 34px;background:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px),#0B0F19;background-size:44px 44px;min-width:0}
.apptop{display:flex;align-items:center;gap:14px;padding:18px 0 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.apptop h1{font-size:21px;font-weight:800;letter-spacing:-.02em}
.apptop input{flex:1;min-width:220px;max-width:520px;background:var(--panel);font-family:var(--mono);font-size:12.5px}
.hambtn{display:none;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 11px;color:#fff;cursor:pointer;place-items:center;flex:none;line-height:0}
.side-backdrop{display:none}
.home-grid{display:grid;grid-template-columns:1fr 330px;gap:18px;align-items:start}
.home-greet{font-family:var(--disp);font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.12;margin:6px 0 2px}
.saldo-hero{background:linear-gradient(135deg,var(--panel),#0E1524);border:1px solid rgba(163,230,53,.35);border-radius:16px;padding:22px 24px;margin-bottom:16px}
.saldo-hero .amt{font-family:var(--mono);font-size:34px;font-weight:700;color:var(--lime)}
.home-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
.home-stats .stat{font-family:var(--mono);font-size:26px;font-weight:700;color:var(--lime)}
.lvl-card{margin:0 0 6px}
.lvl-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.lvl-bar{height:10px;background:rgba(255,255,255,.07);border-radius:99px;overflow:hidden;margin:12px 0 10px}
.lvl-fill{height:100%;background:var(--lime);border-radius:99px;transition:width .6s ease}
.gap-num{font-family:var(--mono);color:var(--lime);font-weight:700}
.myrank-gap{margin:10px 0 0}
.plat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.plat-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;cursor:pointer}
.plat-card:hover{border-color:rgba(163,230,53,.5)}
.home-side-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.linklike{background:none;border:0;color:var(--lime);font-weight:600;font-size:13px;cursor:pointer;padding:0}
#homeRecent .badge{text-transform:uppercase}
.top-saldo{font-family:var(--mono);font-weight:700;color:var(--lime);background:rgba(163,230,53,.12);border:1px solid rgba(163,230,53,.3);border-radius:99px;padding:9px 16px;white-space:nowrap}
.bell-btn{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 13px;cursor:pointer;font-size:16px}
.promo-chip{display:none;align-items:center;gap:8px;background:var(--panel);border:1px solid rgba(163,230,53,.45);border-radius:999px;padding:7px 8px 7px 13px;font-size:13px;color:var(--txt);white-space:nowrap}
.promo-chip.on{display:inline-flex}
.promo-chip .pc-clock{color:var(--lime);font-size:14px}
.promo-chip .pc-label{font-weight:700;letter-spacing:.02em}
.promo-chip .pc-count{font-family:var(--mono);font-size:13px;font-weight:600}
.promo-chip .pc-badge{background:var(--lime);color:var(--ink);font-family:var(--mono);font-weight:700;font-size:12px;border-radius:999px;padding:3px 9px}
.price-old{color:var(--mut);text-decoration:line-through;font-weight:400}
.price-promo{color:var(--lime)}
.ordnav-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:2px 0 14px}
.ordcrumbs{font-size:13.5px;color:var(--mut)}
.ordcrumbs a{color:var(--lime);cursor:pointer}
.ordcrumbs a:hover{text-decoration:underline}
.ordcrumbs .crumb-cur{color:var(--txt);font-weight:600}
.ordcat{display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:10px 0;cursor:pointer}
.ordcat:hover{border-color:rgba(163,230,53,.5)}
.ordcat .plat-left{display:flex;gap:12px;align-items:center;min-width:0;flex:1 1 auto}
.ordcat .plat-left>div{min-width:0}
.ordcat .plat-left b{overflow-wrap:anywhere}
.ordcat .meta{color:var(--mut);font-size:13px}
.ordcat-price{flex:none;text-align:right;white-space:nowrap;font-family:var(--mono);font-size:14.5px}
.ordcat-price .meta{font-family:var(--body)}
.ordcat-go{color:var(--lime);font-weight:600;font-family:var(--body)}
@media(max-width:640px){.ordcat{flex-wrap:wrap}.ordcat .plat-left{flex:1 1 100%}.ordcat-price{flex:1 0 100%;margin-top:2px}}
/* ---- top 10 pengguna ---- */
/* podium sungguhan: #2 kiri undakan sedang, #1 tengah tertinggi, #3 kanan rendah */
.t10-podium{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin-bottom:12px}
.t10-col{flex:1 1 0;max-width:350px;min-width:0;display:flex;flex-direction:column}
.t10-col[data-rank="2"]{order:1}.t10-col[data-rank="1"]{order:2}.t10-col[data-rank="3"]{order:3}
.t10-cinfo{text-align:center;padding:2px 6px 12px}
.t10-step{position:relative;overflow:hidden;display:grid;place-items:center;background:linear-gradient(180deg,var(--panel),#0E1524);border:1px solid var(--line);border-radius:12px;font-family:var(--mono);font-weight:700;color:var(--mut)}
.t10-step.s1{height:66px;font-size:30px;color:var(--lime);border-color:rgba(163,230,53,.55);border-top:3px solid var(--lime);background:linear-gradient(180deg,rgba(163,230,53,.13),#0E1524)}
.t10-step.s2{height:46px;font-size:22px}
.t10-step.s3{height:32px;font-size:17px}
.t10-step.s1::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(163,230,53,.16),transparent);transform:skewX(-18deg);animation:t10sweep 5.5s ease-in-out infinite;pointer-events:none}
@keyframes t10sweep{0%{left:-60%}55%,100%{left:125%}}
.t10-rank{width:32px;height:32px;border-radius:50%;border:2px solid var(--lime);background:rgba(163,230,53,.08);color:var(--lime);font-family:var(--mono);font-weight:700;font-size:14px;display:grid;place-items:center;margin:0 auto 10px}
.t10-col[data-rank="1"] .t10-rank{width:40px;height:40px;font-size:17px;background:var(--lime);color:var(--ink);border-color:var(--lime)}
.t10-av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:19px;color:var(--ink);margin:0 auto 8px;overflow:hidden}
.t10-av img{width:100%;height:100%;object-fit:cover;display:block}
/* Pilihan avatar profil bawaan (Profil Saya) */
.pf-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.pf-av{width:64px;height:64px;border-radius:50%;background:var(--lime);color:var(--ink);font-family:var(--disp);font-weight:800;font-size:26px;display:grid;place-items:center;overflow:hidden;flex:none}
.pf-av img{width:100%;height:100%;object-fit:cover;display:block}
.avgrid{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.avcell{display:flex;flex-direction:column;align-items:center;gap:5px}
.avcell .lb{font-size:10.5px;color:var(--mut)}
.avtile{position:relative;width:64px;height:64px;border-radius:50%;padding:0;border:2px solid var(--line);background:var(--panel2,#1A2438);cursor:pointer}
.avtile img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.avtile .avinit{width:100%;height:100%;border-radius:50%;background:var(--lime);color:var(--ink);font-family:var(--disp);font-weight:800;font-size:24px;display:grid;place-items:center}
.avtile.sel{border-color:var(--lime);box-shadow:0 0 0 2px rgba(163,230,53,.35)}
.avtile .ck{position:absolute;right:-3px;bottom:-3px;width:21px;height:21px;border-radius:50%;background:var(--lime);color:var(--ink);font-size:12px;font-weight:800;display:none;place-items:center;border:2px solid var(--panel,#131C31)}
.avtile.sel .ck{display:grid}
.avtile:active{transform:scale(.96)}
.t10-col[data-rank="1"] .t10-av{width:56px;height:56px;font-size:23px}
.t10-name{font-weight:700;font-size:16px}
.t10-col[data-rank="1"] .t10-name{font-size:17px}
.t10-badge{margin-top:6px}
.t10-ord{color:var(--mut);font-size:13px;margin-top:3px}
.t10-spend{font-family:var(--mono);color:var(--lime);font-weight:700;font-size:17px;margin-top:5px}
.t10-col[data-rank="1"] .t10-spend{font-size:21px}
.t10-list{display:flex;flex-direction:column;gap:10px}
.t10-row{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 16px;transition:transform .25s ease,border-color .25s ease}
.t10-row:hover{transform:translateY(-2px);border-color:rgba(163,230,53,.5)}
.t10-row .t10-rank{width:28px;height:28px;margin:0;flex:none;font-size:13px}
.t10-row .t10-av{width:38px;height:38px;font-size:16px;margin:0;flex:none}
.t10-mid{flex:1;min-width:0}
.t10-row .t10-spend{margin-top:0;font-size:16px}
.lvl{display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.05em;padding:2px 8px;border-radius:999px;vertical-align:middle}
.lvl-j{background:rgba(163,230,53,.16);color:var(--lime);border:1px solid rgba(163,230,53,.5)}
.lvl-r{background:rgba(255,255,255,.05);color:var(--mut);border:1px solid var(--line)}
.t10-anim{animation:t10up .55s cubic-bezier(.22,.8,.3,1) backwards;animation-delay:calc(var(--i,0)*70ms)}
@keyframes t10up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.t10-anim{animation:none}.t10-step.s1::after{animation:none;display:none}.t10-row{transition:none}.t10-row:hover{transform:none}}
.promo-tag{display:inline-block;background:var(--lime);color:var(--ink);font-family:var(--mono);font-size:10.5px;font-weight:700;border-radius:999px;padding:2px 8px;margin-left:6px;vertical-align:middle}
.promo-tag.juragan{background:var(--ink);color:var(--lime);border:1px solid var(--lime)}
.t10-kicker{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--lime);margin:0 0 4px}
@media(max-width:640px){
.t10-podium{gap:6px}
.t10-cinfo{padding:0 2px 8px}
.t10-podium .t10-rank{width:25px;height:25px;font-size:11px;margin-bottom:6px;border-width:1.5px}
.t10-col[data-rank="1"] .t10-rank{width:30px;height:30px;font-size:13px}
.t10-podium .t10-av{width:36px;height:36px;font-size:15px;margin-bottom:6px}
.t10-col[data-rank="1"] .t10-av{width:42px;height:42px;font-size:17px}
.t10-podium .t10-name{font-size:12.5px}
.t10-col[data-rank="1"] .t10-name{font-size:13.5px}
.t10-podium .t10-badge{margin-top:4px}
.t10-podium .lvl{font-size:9px;padding:1px 6px}
.t10-podium .t10-ord{font-size:11px}
.t10-podium .t10-spend{font-size:12.5px;white-space:nowrap;letter-spacing:-.02em}
.t10-col[data-rank="1"] .t10-spend{font-size:14px}
.t10-step.s1{height:48px;font-size:22px}
.t10-step.s2{height:35px;font-size:17px}
.t10-step.s3{height:26px;font-size:14px}
}
/* ---- chat bantuan ---- */
.vbadge{width:15px;height:15px;vertical-align:-2px;margin-left:5px;flex:none}
.chathead{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line)}
.chathead h3{margin:0;font-size:17px}
.cchip{font-family:var(--mono);font-size:11px;padding:3px 10px;border-radius:20px;letter-spacing:.04em}
.cchip.wait{background:rgba(253,224,71,.12);color:#FDE047;border:1px solid rgba(253,224,71,.45)}
.cchip.ans{background:rgba(163,230,53,.14);color:var(--lime);border:1px solid rgba(163,230,53,.4)}
.cchip.done{background:rgba(255,255,255,.06);color:var(--mut);border:1px solid var(--line)}
.cchip.topic{background:rgba(255,255,255,.06);color:var(--mut);border:1px solid var(--line)}
.topics{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:14px 0 2px}
.topics .lbl{font-family:var(--mono);font-size:11px;color:var(--mut);letter-spacing:.08em}
.topics button{background:transparent;color:var(--txt);border:1px solid rgba(255,255,255,.22);border-radius:20px;padding:6px 14px;font-weight:600;cursor:pointer;font-size:13px;transform:none}
.topics button.on{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.chat-thread{display:flex;flex-direction:column;gap:14px;padding:20px 2px 6px}
.msg{display:flex;gap:10px;max-width:78%}
.msg .av{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:12px;background:#22304F;color:var(--txt)}
.msg .av-img{width:30px;height:30px;border-radius:50%;flex:none;object-fit:cover}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.msg.me .av{background:var(--lime);color:var(--ink)}
.bub{border-radius:14px;padding:11px 14px;font-size:14px;white-space:pre-wrap;word-break:break-word;min-width:0}
.msg.them .bub{background:#1A2745;border:1px solid var(--line);border-top-left-radius:4px}
.msg.me .bub{background:rgba(163,230,53,.13);border:1px solid rgba(163,230,53,.35);border-top-right-radius:4px}
.bub .who{font-size:12px;font-weight:700;margin-bottom:3px;display:flex;align-items:center}
.bub .tm{font-family:var(--mono);font-size:10.5px;color:var(--mut);margin-top:6px;text-align:right}
.msg.them .bub .tm{text-align:left}
.daysep{align-self:center;font-family:var(--mono);font-size:10.5px;color:var(--mut);letter-spacing:.1em;background:rgba(255,255,255,.05);border:1px solid var(--line);padding:3px 12px;border-radius:20px}
.chat-composer{display:flex;gap:10px;padding-top:16px;border-top:1px solid var(--line);margin-top:8px;align-items:stretch}
.chat-composer textarea{flex:1;resize:none}
.chat-composer button{flex:none}
.chat-note{font-size:12.5px;color:var(--mut);margin-top:12px}
.chat-note b{color:var(--txt)}
.chat-empty{border:1px dashed rgba(255,255,255,.25);border-radius:16px;padding:24px 18px;text-align:center;background:rgba(255,255,255,.02);width:100%}
.chat-empty h3{font-size:16px;margin-bottom:5px}
.chat-empty p{color:var(--mut);font-size:13.5px;max-width:520px;margin:0 auto}
@media(max-width:980px){.home-grid{grid-template-columns:1fr}.plat-grid{grid-template-columns:repeat(2,1fr)}.home-stats{grid-template-columns:1fr 1fr}}
#content{max-width:1100px}
#content .view>h2{display:none}#view-order>h2{display:none}
#content h2{font-size:24px;margin:24px 0 8px}
#content h3{font-size:18px;margin:20px 0 8px}
#content p{margin:8px 0}
#svcList{background:var(--ink2);border:1px solid var(--line);border-radius:15px;overflow:hidden;margin-top:12px}
#svcList .svcrow{border-bottom:1px solid rgba(255,255,255,.045);padding:14px 16px;margin:0}
#svcList .svcrow:last-child{border-bottom:none}
.svcrow{display:flex;gap:12px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:14px 0}
.svcrow b{display:block}.svcrow .meta{color:var(--mut);font-size:13px}
#content footer{border-top:1px solid var(--line);margin-top:32px;padding:20px 0;color:var(--mut)}
#content footer button{background:none;border:0;color:var(--txt);cursor:pointer;font-weight:600;padding:0 6px;font-size:14px}
.plat-chip{display:inline-flex;align-items:center;gap:7px}
.plat-ic{position:relative;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:rgba(163,230,53,.08);color:var(--lime);font-family:var(--mono);font-size:12px;font-weight:700;flex:none}
.plat-ic img{width:18px;height:18px;border-radius:4px;background:transparent}
.plat-ic.lg{width:30px;height:30px;font-size:14px}.plat-ic.lg img{width:26px;height:26px}
.plat-ic.sm{width:20px;height:20px;font-size:11px}.plat-ic.sm img{width:16px;height:16px}
.svcrow .plat-left{display:flex;gap:12px;align-items:center;min-width:0}
.svcrow .plat-left>div{min-width:0}
#svcTabs{display:flex;flex-wrap:wrap;gap:6px}
.ord-total{font-family:var(--mono);font-size:30px;font-weight:600;color:var(--lime);line-height:1.2}
.ord-warn{color:#FBBF24}
@media(max-width:640px){.plat-chip{font-size:11px;padding:6px 11px}.svcrow{flex-wrap:wrap}}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:50;overflow:auto}
.modal.on{display:flex}.modalbox{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;max-width:640px;width:100%;max-height:calc(100vh - 80px);overflow-y:auto}
.modalbox h3{margin:0}
.modalbox h4{margin:16px 0 6px;font-size:14px}
.modalbox h4:first-child{margin-top:0}
#modalBody{line-height:1.55}
#modalBody ul,#modalBody ol{margin:6px 0;padding-left:18px}
#modalBody li{margin:3px 0}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr}.cards{grid-template-columns:1fr 1fr}.stats .wrap{grid-template-columns:1fr 1fr}.kenapa{grid-template-columns:1fr}#app.on{grid-template-columns:1fr}}
@media(max-width:980px){.sidebar{position:fixed;left:0;top:0;width:min(300px,84vw);height:100dvh;z-index:70;transform:translateX(-105%);transition:transform .28s ease;box-shadow:24px 0 48px rgba(0,0,0,.45);overflow-y:auto}body.side-open .sidebar{transform:none}.side-backdrop{display:block;position:fixed;inset:0;background:rgba(3,6,12,.55);opacity:0;pointer-events:none;transition:opacity .28s ease;z-index:65}body.side-open .side-backdrop{opacity:1;pointer-events:auto}body.side-open{overflow:hidden}.hambtn{display:grid}}
@media(max-width:980px) and (prefers-reduced-motion: reduce){.sidebar,.side-backdrop{transition:none}}
@media(max-width:640px){.hero h1{font-size:40px}.cards{grid-template-columns:1fr}.track{grid-template-columns:1fr 1fr}.stats .wrap{grid-template-columns:1fr 1fr}.cta-band{flex-direction:column;align-items:flex-start}.cta-band .btn{margin-left:0}.navlinks{display:none}.apptop input{margin-left:0;max-width:none;flex:1 1 200px}}
@media(max-width:640px){.wrap{padding-left:24px;padding-right:24px}.sec{padding-left:24px;padding-right:24px}.hero h1{font-size:36px}.hero .sub{font-size:15.5px;line-height:1.65}.sec h2{font-size:32px;line-height:1.18}.sec-sub{font-size:14.5px;line-height:1.65}.cta-band{padding:30px 22px}#layanan .feat-card h3{font-size:16.5px}#layanan .est{margin-top:16px;padding-top:14px}#layanan .est-row{margin-top:10px}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}



/* ===== blok style 2 (posisi asal @35800) ===== */

/* Toast panel Viralin (QA-FIX #12): pengganti alert bawaan browser di sisi buyer, pola yang sama dengan panel admin */
#toasts{position:fixed;top:16px;right:16px;z-index:400;display:flex;flex-direction:column;gap:9px;max-width:min(384px,calc(100vw - 32px))}
.toast{background:#131C31;border:1px solid rgba(255,255,255,.1);border-left:3px solid #A3E635;border-radius:12px;padding:12px 13px;font-size:13.5px;line-height:1.55;color:#EDF2E4;display:flex;gap:10px;align-items:flex-start;box-shadow:0 14px 34px rgba(0,0,0,.5)}
.toast.err{border-left-color:#F87171}
.toast.warn{border-left-color:#FEBC2E}
.toast .tx{flex:1;min-width:0;word-break:break-word}
.toast .x{background:none;border:none;color:#8A97A8;cursor:pointer;font-size:16px;line-height:1.1;padding:0 2px;font-family:inherit;flex:none}
.toast .x:hover{color:#EDF2E4}


/* ===== blok style 3 (posisi asal @37338) ===== */

/* hero: animasi masuk berjenjang, kata platform berganti, kartu melayang + miring 3D, strip harga live */
.hero{overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20% -10%;background:radial-gradient(560px 300px at 78% 0%,rgba(163,230,53,.13),transparent 62%);pointer-events:none;animation:heroGlow 16s ease-in-out infinite alternate}
@keyframes heroGlow{from{transform:translate3d(-2%,0,0)}to{transform:translate3d(3%,2%,0)}}
.hero-grid{position:relative;z-index:1}
.hero-anim .rv{opacity:0;transform:translateY(16px)}
.hero-anim.go .rv{opacity:1;transform:translateY(0);transition:opacity .6s ease,transform .6s ease}
.hero-anim.go .rv-d1{transition-delay:.05s}
.hero-anim.go .rv-d2{transition-delay:.15s}
.hero-anim.go .rv-d3{transition-delay:.25s}
.hero-anim.go .rv-d4{transition-delay:.35s}
.hero-anim.go .rv-d5{transition-delay:.45s}
.hero-anim.go .rv-d6{transition-delay:.55s}
.hero h1 .hl{box-shadow:none;background-image:linear-gradient(rgba(163,230,53,.25),rgba(163,230,53,.25));background-repeat:no-repeat;background-size:0% .32em;background-position:0 96%;animation:hlSweep 1.1s .55s ease forwards}
@keyframes hlSweep{to{background-size:100% .32em}}
.hero h1 .rot{display:inline-block;min-width:8.8ch;color:var(--lime);transition:opacity .28s ease,transform .28s ease}
.hero h1 .rot.out{opacity:0;transform:translateY(8px)}
.hero-side{perspective:1200px}
@keyframes cardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.hero-side .floatwrap{animation:cardFloat 7s ease-in-out infinite}
#daftarCard{transition:transform .25s ease-out}
.hlive{margin-top:16px;background:rgba(19,28,49,.72);border:1px solid var(--line);border-radius:14px;padding:13px 15px 5px}
.hlive-head{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--txt);margin-bottom:10px}
.hlive-dot{width:7px;height:7px;border-radius:50%;background:var(--lime);flex:none;animation:hlivePulse 2.2s ease-in-out infinite}
@keyframes hlivePulse{0%,100%{opacity:1}50%{opacity:.35}}
.hlive-note{margin-left:auto;color:var(--mut);letter-spacing:0;font-size:11px}
#landDashRows{transition:opacity .22s ease}
#landDashRows.swap{opacity:0}
#landDashRows .order:last-child{margin-bottom:8px}
@media(max-width:640px){.hero h1 .rot{min-width:0}}
@media(prefers-reduced-motion:reduce){
.hero::before{animation:none}
.hero h1 .hl{animation:none;background-size:100% .32em}
.hero-side .floatwrap{animation:none}
.hlive-dot{animation:none}
#landDashRows{transition:none}
#daftarCard{transition:none}
}


/* ===== blok style 4 (posisi asal @47816) ===== */

#layanan .cards.feat{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){#layanan .cards.feat{grid-template-columns:1fr 1fr}}
@media(max-width:640px){#layanan .cards.feat{grid-template-columns:1fr}}
#layanan .feat-card{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease,opacity .5s ease}
#layanan .feat-card:hover{transform:translateY(-4px);border-color:rgba(163,230,53,.6);box-shadow:0 16px 32px rgba(11,15,25,.12)}
#layanan .feat-card.rv{opacity:0;transform:translateY(16px);transition-delay:var(--d,0s)}
#layanan .feat-card.rv.on{opacity:1;transform:translateY(0)}
#layanan .feat-ic{overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}
#layanan .feat-ic img{width:23px;height:23px;display:block}
#layanan .feat-card:hover .feat-ic{transform:rotate(-6deg) scale(1.07);box-shadow:0 0 0 4px rgba(163,230,53,.18),0 8px 18px rgba(101,140,20,.35)}
#layanan .est{margin-top:14px;padding-top:12px;border-top:1px dashed var(--paper-line)}
#layanan .est-lbl{font-size:12.5px;font-weight:600;color:var(--txt-dark)}
#layanan .est-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:8px;font-size:13px;color:var(--txt-mut)}
#layanan .est-qty,#layanan .est-total{font-family:var(--mono);font-weight:700;color:var(--txt-dark)}
#layanan .est-total{color:#4C6B1F;font-size:15px}
#layanan .est-range{width:100%;margin-top:10px;accent-color:#7FB81F;cursor:pointer}
#layanan .est-note{font-size:12px;color:var(--txt-mut);margin-top:8px;line-height:1.5}
#layanan .feat-cta{display:inline-block;margin-top:14px;font-size:13.5px;font-weight:700;color:var(--txt-dark);text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:2px;text-underline-offset:3px;cursor:pointer}
#layanan .feat-cta:hover{color:#4C6B1F}
@media (prefers-reduced-motion: reduce){#layanan .feat-card{transition:none}#layanan .feat-card.rv{opacity:1;transform:none}#layanan .feat-card:hover{transform:none}#layanan .feat-card:hover .feat-ic{transform:none}}


/* ===== blok style 5 (posisi asal @55571) ===== */

#kenapa .why-row{transition:opacity .5s ease,transform .5s ease}
#kenapa .why-row.rv{opacity:0;transform:translateY(14px);transition-delay:var(--d,0s)}
#kenapa .why-row.rv.on{opacity:1;transform:translateY(0)}
#kenapa .why-num{transition:color .3s ease,-webkit-text-stroke-color .3s ease}
#kenapa .why-row:hover .why-num,#kenapa .why-row.open .why-num{color:var(--lime)}
#kenapa .why-body{flex:1;min-width:0}
#kenapa .why-head{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;background:none;border:0;border-radius:0;padding:0;margin:0;cursor:pointer;text-align:left;color:var(--txt-dark);font:inherit}
#kenapa .why-title{font-family:var(--disp);font-size:16.5px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
#kenapa .why-chev{flex:none;width:9px;height:9px;border-right:2px solid var(--txt-mut);border-bottom:2px solid var(--txt-mut);transform:rotate(45deg);transition:transform .35s ease,border-color .3s ease;margin-right:4px}
#kenapa .why-head:hover .why-chev{border-color:#7FB81F}
#kenapa .why-row.open .why-chev{transform:rotate(-135deg);border-color:#7FB81F}
#kenapa .why-ev{margin-top:2px}
#kenapa.acc .why-ev{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .45s ease,opacity .35s ease}
#kenapa.acc .why-ev>.why-ev-in{overflow:hidden;min-height:0}
#kenapa.acc .why-row.open .why-ev{grid-template-rows:1fr;opacity:1}
#kenapa .kp-lead{font-size:13px;color:var(--txt-mut);margin-top:10px}
#kenapa .kp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
#kenapa .kp-chip{display:inline-flex;align-items:baseline;gap:6px;background:#fff;border:1px solid var(--paper-line);border-radius:999px;padding:7px 13px;font-family:var(--mono);font-size:12.5px;color:var(--txt-dark)}
#kenapa .kp-chip .kp-p{font-weight:700}
#kenapa .kp-mock{background:var(--panel);border-radius:14px;padding:16px 18px;color:var(--txt);max-width:430px;margin-top:12px}
#kenapa .km-t{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;color:var(--mut);margin-bottom:8px}
#kenapa .km-row{display:flex;justify-content:space-between;gap:14px;padding:6px 0;font-size:13.5px;border-bottom:1px dashed rgba(255,255,255,.09)}
#kenapa .km-row .km-k{color:var(--mut)}
#kenapa .km-row .km-v{font-weight:600;text-align:right}
#kenapa .km-row .km-v.mono{font-family:var(--mono);font-size:12.5px;font-weight:500;word-break:break-all}
#kenapa .km-row.total .km-v{color:var(--lime);font-family:var(--mono);font-weight:700}
#kenapa .km-btn{width:100%;margin-top:12px;padding:11px;border-radius:10px;font-size:14px;opacity:.55;cursor:not-allowed}
#kenapa .kp-cap{font-size:12px;color:var(--txt-mut);margin-top:8px}
#kenapa .kp-flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
#kenapa .kp-step{font-family:var(--mono);font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;border:1px solid var(--paper-line);background:#fff;color:var(--txt-dark)}
#kenapa .kp-step.done{background:var(--lime);border-color:var(--lime);color:var(--ink)}
#kenapa .kp-arrow{color:var(--txt-mut);font-family:var(--mono);font-size:13px}
#kenapa .kp-nums{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
#kenapa .kp-nums[hidden]{display:none}
#kenapa .kp-num{display:inline-flex;align-items:baseline;gap:7px;background:#fff;border:1px solid var(--paper-line);border-radius:999px;padding:7px 13px;font-size:12.5px;color:var(--txt-dark)}
#kenapa .kp-num b{font-family:var(--mono);font-size:14.5px;color:#4C6B1F}
#kenapa .kp-note{font-size:12px;color:var(--txt-mut);margin-top:8px}
#kenapa .kp-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
#kenapa .kp-tag{border:1px solid var(--paper-line);background:#fff;border-radius:10px;padding:8px 12px;font-size:13px;font-weight:600;color:var(--txt-dark)}
#kenapa .kp-stats{display:flex;gap:34px;margin-top:30px}
#kenapa .kp-stats[hidden]{display:none}
#kenapa .kp-stat{border-left:3px solid var(--lime);padding-left:14px}
#kenapa .kp-big{font-family:var(--mono);font-size:34px;font-weight:700;color:var(--txt-dark);line-height:1.1}
#kenapa .kp-lbl{font-size:13px;color:var(--txt-mut);margin-top:2px}
@media (prefers-reduced-motion: reduce){#kenapa .why-row{transition:none}#kenapa .why-row.rv{opacity:1;transform:none}#kenapa .why-chev{transition:none}#kenapa.acc .why-ev{transition:none}}


/* ===== blok style 6 (posisi asal @68728) ===== */

#caraKerja .ck{display:grid;grid-template-columns:minmax(290px,5fr) 7fr;gap:30px;margin-top:44px;align-items:start}
#caraKerja .ck-list{position:relative}
#caraKerja .ck-rail{position:absolute;left:33px;top:35px;bottom:35px;width:2px;background:var(--paper-line);border-radius:2px}
#caraKerja .ck-rail span{display:block;width:100%;height:25%;background:var(--lime);border-radius:2px;transition:height .5s ease}
#caraKerja .ck-step{display:flex;gap:14px;width:100%;text-align:left;-webkit-appearance:none;appearance:none;background:transparent;border:1px solid transparent;border-radius:14px;padding:14px 16px 14px 12px;cursor:pointer;font-family:var(--body);color:var(--txt-dark);position:relative;transition:background .25s ease,border-color .25s ease}
#caraKerja .ck-step:hover{background:#fff}
#caraKerja .ck-step.act{background:#fff;border-color:var(--paper-line);box-shadow:0 10px 30px rgba(11,15,25,.06)}
#caraKerja .ck-n{flex:none;width:42px;height:42px;border-radius:50%;border:2px solid var(--paper-line);background:var(--paper);color:var(--txt-mut);font-family:var(--mono);font-weight:600;font-size:14px;display:grid;place-items:center;position:relative;z-index:1;transition:background .25s ease,border-color .25s ease,color .25s ease}
#caraKerja .ck-step.act .ck-n{background:var(--lime);border-color:var(--lime);color:var(--ink)}
#caraKerja .ck-h{display:block;font-size:16px;font-weight:700;margin:2px 0 4px}
#caraKerja .ck-d{display:block;font-size:14px;color:var(--txt-mut);line-height:1.6}
#caraKerja .ck-progbar{display:none}
#caraKerja .ck-stage{background:var(--panel);border-radius:18px;padding:20px 22px 22px;color:var(--txt);box-shadow:0 24px 50px rgba(11,15,25,.18)}
#caraKerja .ck-phead{display:flex;align-items:center;gap:7px;margin-bottom:6px}
#caraKerja .ck-phead i{width:10px;height:10px;border-radius:50%;background:#2A3852;display:block}
#caraKerja .ck-phead i:first-child{background:var(--lime)}
#caraKerja .ck-phead span{margin-left:6px;font-family:var(--mono);font-size:12px;color:var(--mut)}
#caraKerja .ck-panel{display:none}
#caraKerja .ck-panel.act{display:block;animation:ckIn .45s ease both}
@keyframes ckIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
#caraKerja .ck-lab{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin:16px 0 7px;font-weight:600}
#caraKerja .ck-lab:first-of-type{margin-top:10px}
#caraKerja .ck-field{background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:14px;color:var(--mut);display:flex;justify-content:space-between;align-items:center;gap:10px}
#caraKerja .ck-eye{font-size:12px;border:1px solid var(--line);border-radius:99px;padding:2px 9px;color:var(--txt);flex:none}
#caraKerja .ck-btn{display:inline-block;margin-top:18px;background:var(--lime);color:var(--ink);font-weight:700;font-size:14px;border-radius:99px;padding:11px 26px}
#caraKerja .ck-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
#caraKerja .ck-chip{border:1px solid var(--line);border-radius:99px;padding:7px 13px;font-size:13px;color:var(--txt)}
#caraKerja .ck-chip.on{background:var(--lime);border-color:var(--lime);color:var(--ink);font-weight:600}
#caraKerja .ck-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.12);font-size:14px}
#caraKerja .ck-row .k{color:var(--mut)}
#caraKerja .ck-mono{font-family:var(--mono)}
#caraKerja .ck-price{font-family:var(--mono);color:var(--lime);font-weight:600;white-space:nowrap}
#caraKerja .ck-total{font-family:var(--mono);color:var(--lime);font-weight:700;font-size:16px;white-space:nowrap}
#caraKerja .ck-svc{padding:11px 0;border-bottom:1px dashed rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:14px;align-items:baseline}
#caraKerja .ck-svc:last-child{border-bottom:0}
#caraKerja .ck-svc .nm{font-size:14px;line-height:1.45}
#caraKerja .ck-svc .nt{font-size:12.5px;color:var(--mut);white-space:nowrap}
#caraKerja .ck-note{margin-top:16px;font-size:12px;color:var(--mut);line-height:1.6}
#caraKerja .ck-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:20px}
#caraKerja .ck-status .st{border:1px solid var(--line);border-radius:99px;padding:6px 12px;font-size:12.5px}
#caraKerja .ck-status .st.done{background:var(--lime);color:var(--ink);border-color:var(--lime);font-weight:600}
#caraKerja .ck-status .arr{color:var(--mut)}
#caraKerja .ck-rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease var(--d,0s),transform .6s ease var(--d,0s)}
#caraKerja .ck-rv.ck-on{opacity:1;transform:none}
@media(max-width:900px){#caraKerja .ck{grid-template-columns:minmax(0,1fr)}#caraKerja .ck>*{min-width:0}}
@media(max-width:640px){
#caraKerja .ck-list{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
#caraKerja .ck-rail{display:none}
#caraKerja .ck-step{flex:none;width:auto;align-items:center;padding:8px 13px 8px 9px;border-radius:99px;background:#fff;border-color:var(--paper-line)}
#caraKerja .ck-n{width:26px;height:26px;font-size:12px;border-width:1px}
#caraKerja .ck-d{display:none}
#caraKerja .ck-h{margin:0;font-size:14px}
#caraKerja .ck-progbar{display:block;height:3px;background:var(--paper-line);border-radius:3px;margin-top:10px}
#caraKerja .ck-progbar span{display:block;height:100%;width:25%;background:var(--lime);border-radius:3px;transition:width .5s ease}
#caraKerja .ck-stage{padding:18px}
}
@media (prefers-reduced-motion: reduce){
#caraKerja .ck-panel.act{animation:none}
#caraKerja .ck-rail span,#caraKerja .ck-progbar span,#caraKerja .ck-step,#caraKerja .ck-n{transition:none}
}


/* ===== blok style 7 (posisi asal @86474) ===== */

#faq .faq-col{max-width:840px}
#faq .faq-search{margin:24px 0 4px}
#faq .faq-search input{width:100%;box-sizing:border-box;background:#fff;border:1px solid var(--paper-line);border-radius:12px;padding:12px 15px;font:inherit;font-size:14.5px;color:var(--txt-dark)}
#faq .faq-search input::placeholder{color:var(--txt-mut)}
#faq .faq-search input:focus{outline:none;border-color:#7FB81F}
#faq .faq-item{padding:20px 0;border-bottom:1px solid var(--paper-line);transition:opacity .5s ease,transform .5s ease}
#faq .faq-item:first-child{padding-top:14px}
#faq .faq-item[hidden]{display:none}
#faq .faq-item.rv{opacity:0;transform:translateY(14px);transition-delay:var(--d,0s)}
#faq .faq-item.rv.on{opacity:1;transform:translateY(0)}
#faq .faq-head{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;background:none;border:0;border-radius:0;padding:0;margin:0;cursor:pointer;text-align:left;color:var(--txt-dark);font:inherit}
#faq .faq-q{font-family:var(--disp);font-size:16.5px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
#faq .faq-chev{flex:none;width:9px;height:9px;border-right:2px solid var(--txt-mut);border-bottom:2px solid var(--txt-mut);transform:rotate(45deg);transition:transform .35s ease,border-color .3s ease;margin-right:4px}
#faq .faq-head:hover .faq-chev{border-color:#7FB81F}
#faq .faq-item.open .faq-chev{transform:rotate(-135deg);border-color:#7FB81F}
#faq.acc .faq-ev{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .45s ease,opacity .35s ease}
#faq.acc .faq-ev>.faq-ev-in{overflow:hidden;min-height:0}
#faq.acc .faq-item.open .faq-ev{grid-template-rows:1fr;opacity:1}
#faq .faq-ev p{font-size:14.5px;color:var(--txt-mut);line-height:1.65;padding-top:10px}
#faq .faq-none{font-size:14px;color:var(--txt-mut);line-height:1.6;padding:20px 0 2px}
#faq .faq-none[hidden]{display:none}
@media (prefers-reduced-motion: reduce){#faq .faq-item{transition:none}#faq .faq-item.rv{opacity:1;transform:none}#faq .faq-chev{transition:none}#faq.acc .faq-ev{transition:none}}


/* ===== blok style 8 (posisi asal @96720) ===== */

#ctaBand{position:relative;overflow:hidden;border:1px solid rgba(163,230,53,.22);isolation:isolate}
#ctaBand::after{content:"";position:absolute;top:-70%;bottom:-70%;left:0;width:55%;background:linear-gradient(100deg,transparent,rgba(163,230,53,.13),transparent);transform:translateX(-130%) rotate(0.001deg);animation:ctaSheen 8s ease-in-out infinite;pointer-events:none;z-index:0}
@keyframes ctaSheen{0%,55%{transform:translateX(-130%)}90%,100%{transform:translateX(320%)}}
#ctaBand>*{position:relative;z-index:1}
#ctaBand.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
#ctaBand.rv.on{opacity:1;transform:none}
#ctaBand .cta-main{max-width:600px}
#ctaBand .cta-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
#ctaBand .cta-chip{display:inline-flex;align-items:baseline;gap:6px;padding:7px 13px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.04);font-size:12.5px;color:#B9C4AE}
#ctaBand .cta-chip b{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--lime)}
#ctaBand .cta-trust{margin-top:16px;font-size:12.5px;color:#8A97A8;line-height:1.7}
#ctaBand .cta-side{margin-left:auto;width:340px;flex:none}
#ctaBand .cta-lbl{display:block;font-size:13px;font-weight:600;color:#fff;margin-bottom:8px}
#ctaBand .cta-row2{display:flex;gap:10px}
#ctaBand .cta-row2 input{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--txt);font-size:14.5px;font-family:var(--body)}
#ctaBand .cta-go{white-space:nowrap}
#ctaBand .cta-go:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(163,230,53,.28)}
#ctaBand .cta-err{margin-top:9px;font-size:13px;color:#FCA5A5;line-height:1.5}
#ctaBand .cta-alt{display:inline-block;margin-top:14px;font-size:13.5px;color:#B9C4AE;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#ctaBand .cta-alt:hover{color:var(--lime)}
@media(max-width:900px){#ctaBand{flex-direction:column;align-items:stretch}#ctaBand .cta-side{margin-left:0;width:auto;margin-top:26px}}
@media(max-width:520px){#ctaBand .cta-row2{flex-direction:column}#ctaBand .cta-go{text-align:center}}
@media (prefers-reduced-motion: reduce){#ctaBand::after{animation:none}#ctaBand.rv{opacity:1;transform:none;transition:none}}


/* ---- Tema terang (toggle dark/light, permintaan Owner 2026-11-03) ----
   Kulit terang dari tata letak yang sama: variabel permukaan dibalik,
   lime dipergelap khusus teks di atas terang, topbar tetap gelap sebagai
   jangkar identitas. Bawaan tetap tema gelap. */
[data-theme="light"]{--panel:#FFFFFF;--ink2:#FFFFFF;--line:rgba(11,15,25,.13);--txt:#1B2115;--mut:#5A6B7D;--lime:#6FA80C}
[data-theme="light"] body{background:#EDF0E2}
[data-theme="light"] input,[data-theme="light"] select,[data-theme="light"] textarea{background:rgba(11,15,25,.04)}
[data-theme="light"] th{background:rgba(11,15,25,.03)}
[data-theme="light"] .hero{background:radial-gradient(720px 340px at 82% 8%,rgba(163,230,53,.20),transparent 60%),linear-gradient(rgba(11,15,25,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(11,15,25,.05) 1px,transparent 1px),#F6F7EE;background-size:auto,44px 44px,44px 44px,auto}
[data-theme="light"] .saldo-hero{background:linear-gradient(135deg,#FFFFFF,#EDF2DC);border-color:rgba(111,168,12,.5)}
[data-theme="light"] .t10-step{background:linear-gradient(180deg,#FFFFFF,#EDF2DC)}
[data-theme="light"] .dash{box-shadow:0 24px 50px rgba(27,33,21,.18)}
[data-theme="light"] .btn.secondary,[data-theme="light"] .btn-ghost{border-color:rgba(11,15,25,.3)}
[data-theme="light"] .pill{color:#42506B}
[data-theme="light"] .hambtn{color:#1B2115}
[data-theme="light"] #main{background:linear-gradient(rgba(11,15,25,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(11,15,25,.045) 1px,transparent 1px),#EDF0E2;background-size:44px 44px}
[data-theme="light"] .apptop input{background:#FFFFFF}