html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
/* Optimize rendering of offscreen sections during scroll */
.ft, .pilar-sec, .wom-sec, .cmp-sec, .why-sec, .opc-sec, .faq-sec {
  content-visibility: auto;
  contain-intrinsic-size: 1px 600px;
}
/* Optimize sticky & canvas layer promotion */
canvas.wave, #hvC, #bwC, #sbCv {
  transform: translateZ(0);
}

/* Layout: "fajar" — navy dalam (percaya) → zamrud (uang) → emas-krem (hoki, cerah). Hijau = share/uang, merah-oranye = beli. Dua dunia: Netizen (beranda) & Brand (/untuk-brand). */
:root{
  --navy:#0B1F3A; --navy-2:#12305A; --emerald:#0C4A3E; --money:#0E8A55; --money-dk:#0A6B43; --money-lt:#E9F4EE;
  --red:#E4572E; --red-dk:#C9320F; --gold:#FFD84D; --gold-dk:#D9A814; --gold-soft:#FFF4CC; --cream:#F6F3EC;
  --bg:#FAF8F4; --card:#FFFFFF; --ink:#172033; --muted:#5F6B7E; --line:#E9E4D6;
  --f-display:"Bricolage Grotesque","Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --r:16px; --gut:max(16px,env(safe-area-inset-left,0px)); --gutr:max(16px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:15px/1.55 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--navy)}
h1,h2,h3{font-family:var(--f-display);line-height:1.04;margin:0;text-wrap:balance;letter-spacing:-.015em}
h2{font-size:clamp(1.7rem,6vw,2.7rem);color:var(--navy)} h3{font-size:1.1rem;color:var(--navy)}
p{margin:0} a{color:inherit} button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:8px}
.wrap{max-width:1140px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gutr)}
.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--money-dk)}
.muted{color:var(--muted)}
.c{text-align:center}.c h2,.c p{margin-inline:auto}
.tiny{font-size:.74rem;color:var(--muted)}

/* Buttons — 3D, tekan terasa */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border-radius:999px;border:0;font-weight:800;font-size:1rem;text-decoration:none;transition:transform .12s,box-shadow .12s;white-space:nowrap}
.btn-money{background:var(--money);color:#fff;box-shadow:0 12px 26px rgba(18,161,80,.35)}
.btn-money:active{transform:translateY(4px);box-shadow:0 1px 0 var(--money-dk)}
.btn-buy{background:var(--red);color:#fff;box-shadow:0 12px 26px rgba(240,68,32,.3)}
.btn-buy:active{transform:translateY(4px);box-shadow:0 1px 0 var(--red-dk)}
.btn-gold{background:var(--gold);color:var(--navy);box-shadow:0 12px 26px rgba(217,168,20,.3)}
.btn-gold:active{transform:translateY(4px);box-shadow:0 1px 0 var(--gold-dk)}
.btn-line{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.btn-sm{min-height:42px;padding:0 16px;font-size:.88rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.pulse{animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(27,192,98,.6)}60%{box-shadow:0 0 0 14px rgba(27,192,98,0)}}

/* Header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(11,31,58,.96);backdrop-filter:blur(8px);color:#fff;transform:translateZ(0);will-change:transform}
.top .wrap{display:flex;align-items:center;gap:10px;height:60px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--f-display);font-weight:800;font-size:1.22rem;flex-shrink:0;color:#fff}
.logo-mark{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--gold),#F5B731);display:grid;place-items:center}
.logo b{color:var(--gold)}
.sp{flex:1}
.nav-d{display:none;gap:2px}
.nav-d a{text-decoration:none;font-weight:700;font-size:.9rem;padding:8px 12px;border-radius:10px;color:#D5DEEC}
.nav-d a:hover,.nav-d a.on{color:#fff;background:rgba(255,255,255,.08)}
.icon-btn{position:relative;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;text-decoration:none;flex-shrink:0}
.badge-n{position:absolute;top:4px;right:2px;min-width:18px;height:18px;border-radius:9px;background:var(--red);color:#fff;font-size:.68rem;font-weight:800;display:grid;place-items:center;padding:0 4px}
.aud{display:inline-flex;background:rgba(255,255,255,.08);border-radius:999px;padding:3px;font-size:.78rem;font-weight:800}
.aud a{text-decoration:none;padding:7px 12px;border-radius:999px;color:#C9D6E8;min-height:34px;display:flex;align-items:center}
.aud a.on{background:var(--gold);color:var(--navy)}
@media(max-width:360px){.aud a{padding:7px 9px}}
@media(min-width:960px){.nav-d{display:flex}}
@media(max-width:959px){.hide-m{display:none!important}}
@media(min-width:960px){.hide-d{display:none!important}}

/* Bottom nav */
nav.bottom{position:fixed;left:0;right:0;bottom:0;z-index:55;transform:translateZ(0);will-change:transform;background:var(--card);border-top:1px solid var(--line);padding:6px var(--gutr) calc(6px + env(safe-area-inset-bottom,0px)) var(--gut);display:grid;grid-template-columns:repeat(5,1fr)}
nav.bottom a{display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;font-size:.7rem;font-weight:700;color:var(--muted);min-height:48px;justify-content:center}
nav.bottom a.on{color:var(--navy)}
nav.bottom .mid span.ic{width:50px;height:50px;margin-top:-24px;border-radius:50%;background:var(--money);display:grid;place-items:center;box-shadow:0 6px 16px rgba(18,161,80,.45);border:3px solid var(--card)}
nav.bottom .mid{color:var(--money-dk)}
@media(min-width:960px){nav.bottom{display:none}}
main{padding-bottom:84px}
@media(min-width:960px){main{padding-bottom:0}}

/* Hero — gelap */
.hero{background:radial-gradient(90% 70% at 85% 100%,rgba(18,161,80,.35),transparent 60%),radial-gradient(60% 50% at 0% 0%,rgba(255,216,77,.14),transparent 70%),linear-gradient(180deg,var(--navy) 0%,#0D2C4A 50%,var(--emerald) 100%);color:#fff}
.hero .wrap{display:grid;gap:26px;padding-block:30px 34px}
@media(min-width:920px){.hero .wrap{grid-template-columns:1fr 1fr;align-items:center;padding-block:60px}}
.hero h1{color:#fff;font-size:clamp(2.7rem,12vw,5rem);font-weight:800;letter-spacing:-.03em}
.hero h1 em{font-style:normal;color:var(--gold);display:block}
.hero .sub{font-size:1.12rem;color:#D3E2EE;margin-top:14px;font-weight:500}
.hero .sub b{color:#fff}
.ticks{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ticks span{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;font-weight:700;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:6px 12px;border-radius:999px}
.ticks span::before{content:"✓";color:var(--money);font-weight:900}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;align-items:center}
.cta-row .btn-line{color:#fff}
.dawn{height:70px;background:linear-gradient(180deg,var(--emerald),#5E8F62 30%,#E9D99A 70%,var(--cream))}

/* Network demo */
.net-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:14px;display:grid;gap:12px}
.net{position:relative}
.net svg{width:100%;height:auto;display:block}
.net line{stroke:rgba(255,255,255,.14);stroke-width:2;transition:stroke .3s}
.net line.on{stroke:var(--money)}
.net line.re{stroke-dasharray:4 5}
.net line.re.on{stroke:var(--gold)}
.net circle.n{fill:#22426B;transition:fill .3s}
.net circle.n.on{fill:var(--money)}
.net circle.n.re.on{fill:var(--gold)}
.fl{position:absolute;transform:translate(-50%,-50%);font-family:var(--f-display);font-weight:800;font-size:.78rem;background:#fff;color:var(--money-dk);padding:2px 7px;border-radius:999px;pointer-events:none;white-space:nowrap}
.fl.g{color:#8A6400}
.wallet{display:flex;align-items:center;justify-content:space-between;gap:10px;background:linear-gradient(135deg,#FFE47A,var(--gold));color:var(--navy);border-radius:16px;padding:12px 16px;flex-wrap:wrap}
.wallet small{display:flex;align-items:center;gap:6px;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.live{width:8px;height:8px;border-radius:50%;background:var(--money);animation:live 1.4s infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(18,161,80,.6)}70%,100%{box-shadow:0 0 0 7px rgba(18,161,80,0)}}
.wallet .amt{font-family:var(--f-display);font-weight:800;font-size:1.9rem;line-height:1.05;font-variant-numeric:tabular-nums}
.wallet .stats{font-size:.8rem;font-weight:700;text-align:right;line-height:1.5}
.wallet.bump{animation:bump .3s}
@keyframes bump{50%{transform:scale(1.04)}}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.74rem;color:#B9C8DA;justify-content:center}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px}

section.sec{padding-block:56px}
.sec-cream{background:var(--cream)}

.earn{display:grid;gap:12px;margin-top:28px}
@media(min-width:560px){.earn{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.earn{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ec{background:var(--card);border-radius:22px;padding:22px;display:grid;gap:10px;justify-items:start;border:1px solid var(--line);position:relative;overflow:hidden}
.ec .ico{width:58px;height:58px;border-radius:18px;display:grid;place-items:center}
.ec b.x{position:absolute;top:16px;right:18px;font-family:var(--f-display);font-size:2.4rem;color:var(--line);line-height:1}
.ec h3{font-size:1.45rem}
.ec p{color:var(--muted);font-size:.92rem}
.ec{align-content:start}.ec.n .ico{background:#E8EFFF}.ec.n{border:2px solid #1E5BD8}.ec h3{font-size:1.3rem}
.ec.k .ico{background:var(--money-lt)}.ec.r .ico{background:var(--gold-soft)}.ec.b .ico{background:#FFE6DE}

.race{display:grid;gap:14px;margin-top:26px}
@media(min-width:780px){.race{grid-template-columns:1fr 1fr}}
.rc{background:var(--card);border-radius:22px;padding:20px;border:1px solid var(--line);display:grid;gap:12px}
.rc.win{border:2px solid var(--money);box-shadow:0 18px 40px rgba(18,161,80,.14)}
.rc .hd{display:flex;justify-content:space-between;align-items:center;gap:8px}
.rc .tag{font-size:.72rem;font-weight:800;padding:4px 10px;border-radius:999px;background:var(--bg);color:var(--muted)}
.rc.win .tag{background:var(--money);color:#fff}
.bar{height:16px;border-radius:999px;background:#F1ECDD;overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--money));transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.rc .row{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:.9rem}
.rc .big{font-family:var(--f-display);font-size:2rem;color:var(--navy);line-height:1}
.rc.win .big{color:var(--money-dk)}

.sec-head{display:flex;justify-content:space-between;align-items:end;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:700px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media(min-width:1040px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pc{background:var(--card);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;min-width:0;box-shadow:0 8px 24px rgba(11,31,58,.05);transition:transform .2s,box-shadow .2s}
.pc:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(11,31,58,.1)}
.pc .img{aspect-ratio:1/1;max-width:100%;display:block;position:relative}
.pc .img svg{width:100%;height:100%;display:block}
.p-img-wrap{width:100%;height:100%;position:relative;overflow:hidden;background:linear-gradient(135deg,#f8fafc,#e2e8f0);display:flex;align-items:center;justify-content:center}
.p-real-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.pc:hover .p-real-img{transform:scale(1.05)}
.st-art .p-img-wrap{width:150px;height:150px;border-radius:18px;overflow:hidden;box-shadow:0 18px 24px rgba(0,0,0,.25);animation:hyFloat 5s ease-in-out infinite}
.st-mi .p-img-wrap{border-radius:8px}
.cpc{position:absolute;left:8px;bottom:8px;background:var(--money);color:#fff;font-size:.72rem;font-weight:800;padding:4px 9px;border-radius:999px;box-shadow:0 4px 10px rgba(0,0,0,.15)}
.tag-ex{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.9);color:var(--muted);font-size:.6rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 6px;border-radius:6px}
.pc .body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:2px;flex:1}
.pc-sub{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%}
.sl-metric{font-size:.68rem;font-weight:700;color:var(--money-dk);background:rgba(14,138,85,.1);padding:2px 6px;border-radius:4px;white-space:nowrap;display:inline-flex;align-items:center;line-height:1.2}
.pc .nm{font-weight:700;font-size:.88rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-decoration:none;color:var(--ink)}
.pc .br{font-size:.74rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.price{font-family:var(--f-display);font-weight:800;color:var(--navy);font-size:1.1rem;font-variant-numeric:tabular-nums}
.pc .acts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:auto;padding-top:10px}
.pc .acts .btn{min-height:42px;padding:0 6px;font-size:.84rem;gap:5px;box-shadow:0 1px 2px rgba(14,23,38,.08)}
.pc .acts .btn-buy{box-shadow:0 1px 2px rgba(14,23,38,.08)}
.pc .acts .btn-line{box-shadow:inset 0 0 0 2px var(--line);color:var(--muted)}
.pc .acts .btn:active{transform:translateY(2px);box-shadow:none}

.trust{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));margin-top:24px}
.trust div{background:var(--card);border-radius:var(--r);padding:18px;border:1px solid var(--line);display:grid;gap:6px;align-content:start}
.trust .ic{width:40px;height:40px;border-radius:12px;background:var(--money-lt);display:grid;place-items:center}
.trust p{font-size:.88rem;color:var(--muted)}

details{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:10px}
summary{cursor:pointer;padding:16px 18px;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px;color:var(--navy)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--f-display);font-size:1.3rem;line-height:1;color:var(--money)}
details[open] summary::after{content:"–"}
details>div{padding:0 18px 16px;color:var(--muted);font-size:.92rem}

.closing{background:#F3EEDF;text-align:center}
.closing .wrap{padding-block:60px}
.closing h2{font-size:clamp(2.2rem,9vw,3.6rem)}
.closing .cta-row{justify-content:center}
.brand-strip{background:var(--navy);color:#fff}
.brand-strip .wrap{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-block:22px}
.brand-strip b{font-family:var(--f-display);font-size:1.25rem}
.brand-strip span{color:#B9C8DA;font-size:.95rem}

footer{background:#081629;color:#9FB0C8;font-size:.86rem}
footer .wrap{padding-block:34px;display:grid;gap:20px}
@media(min-width:960px){footer .wrap{grid-template-columns:2fr 1fr 1fr 1fr}}
footer a{display:block;text-decoration:none;padding:4px 0}
footer a:hover{color:#fff}
footer h4{color:#fff;margin:0 0 6px;font-size:.9rem}

/* Brand page */
.bhero{background:radial-gradient(70% 60% at 100% 100%,rgba(255,216,77,.16),transparent 60%),linear-gradient(180deg,var(--navy),#123056 60%,#1B3D66);color:#fff}
.bhero .wrap{padding-block:42px 46px;display:grid;gap:26px}
@media(min-width:920px){.bhero .wrap{grid-template-columns:1.05fr .95fr;align-items:center;padding-block:70px}}
.bhero h1{color:#fff;font-size:clamp(2.6rem,11vw,4.6rem)}
.bhero h1 em{font-style:normal;color:var(--gold)}
.bhero .sub{color:#C9D6E8;font-size:1.08rem;margin-top:14px;max-width:44ch}
.bhero .cta-row .btn-line{color:#fff}
.bdawn{height:60px;background:linear-gradient(180deg,#1B3D66,#8C93A0 40%,#EADFC0 75%,var(--bg))}
.engine{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:18px;display:grid;gap:8px}
.estep{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;background:rgba(255,255,255,.05);border-radius:14px;padding:10px 12px;animation:estep 6s infinite;animation-delay:calc(var(--i)*1s)}
.estep .d{width:40px;height:40px;border-radius:12px;background:#22426B;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;color:var(--gold)}
.estep b{display:block;font-size:.95rem}
.estep small{color:#9FB4D0;font-size:.78rem}
.estep .auto{font-size:.64rem;font-weight:800;letter-spacing:.08em;color:#8BE0B7;text-transform:uppercase}
@keyframes estep{0%,12%{background:rgba(18,161,80,.25)}20%,100%{background:rgba(255,255,255,.05)}}
.loop{font-size:.8rem;color:var(--gold);text-align:center;font-weight:700;margin-top:4px}
.un{display:grid;gap:14px;margin-top:26px}
@media(min-width:820px){.un{grid-template-columns:repeat(3,1fr)}}
.unc{background:var(--card);border-radius:22px;padding:24px;border:1px solid var(--line);display:grid;gap:10px;align-content:start}
.unc .k{font-family:var(--f-display);font-size:1.8rem;color:var(--navy);line-height:1;font-weight:800}
.unc .k s{color:var(--red);text-decoration:none}
.unc .one{font-weight:800;color:var(--money-dk)}
.unc p{color:var(--muted);font-size:.92rem}
.vs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:24px;border-radius:20px;overflow:hidden;border:1px solid var(--line)}
.vs div{padding:14px 16px;font-size:.9rem;border-bottom:1px solid var(--line);min-width:0}
.vs .h{font-weight:800;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.vs .a{background:var(--card);color:var(--muted)}
.vs .b{background:var(--money-lt);color:#0B4A28;font-weight:700}
.vs .h.b{background:var(--money);color:#fff}
.metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:760px){.metrics{grid-template-columns:repeat(4,minmax(0,1fr))}}
.metric{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;min-width:0}
.metric small{color:var(--muted);font-size:.76rem;font-weight:700;display:block}
.metric b{font-family:var(--f-display);font-size:1.5rem;color:var(--navy);font-variant-numeric:tabular-nums}
.metric em{display:block;font-style:normal;font-size:.74rem;color:var(--money-dk);font-weight:700}
.steps{display:grid;gap:12px;margin-top:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.step{display:flex;gap:14px;align-items:flex-start;background:var(--card);border-radius:var(--r);padding:18px;border:1px solid var(--line)}
.step b.n{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:var(--navy);color:var(--gold);display:grid;place-items:center;font-family:var(--f-display);font-size:1.1rem}

/* Generic */
.page-head{padding-block:24px 8px}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;min-height:42px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);font-weight:700;font-size:.86rem;color:var(--navy)}
.chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin:14px 0}
select,input[type=text],input[type=tel],input[type=search],textarea{font:inherit;min-height:48px;border:1.5px solid var(--line);border-radius:12px;padding:0 12px;background:var(--card);color:var(--ink);width:100%;font-size:16px}
textarea{padding:12px;min-height:84px}
select:focus,input:focus,textarea:focus{outline:0;border-color:var(--navy)}
.toolbar select{width:auto}
.empty{text-align:center;padding:48px 16px;background:var(--card);border:1px dashed var(--line);border-radius:var(--r)}
.crumb{font-size:.8rem;color:var(--muted);padding-top:14px;display:flex;gap:6px;flex-wrap:wrap}
.crumb a{text-decoration:none}
.pd{display:grid;gap:22px;padding-block:14px 30px}
@media(min-width:900px){.pd{grid-template-columns:1.05fr 1fr;gap:40px;align-items:start}}
.gallery{border-radius:20px;overflow:hidden;aspect-ratio:1/1;max-width:100%;position:relative}
.gallery svg{width:100%;height:100%;display:block}
.pd-info{display:flex;flex-direction:column;gap:12px;min-width:0}
.pd-info h1{font-size:clamp(1.5rem,5vw,2.2rem);color:var(--navy)}
.pd-price{font-family:var(--f-display);font-weight:800;font-size:2rem;color:var(--navy);font-variant-numeric:tabular-nums}
.meta-row{display:flex;flex-wrap:wrap;gap:8px;font-size:.84rem}
.meta-row span{background:var(--card);border:1px solid var(--line);padding:5px 10px;border-radius:8px}
.stock{color:var(--money-dk);font-weight:800}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;background:var(--card)}
.qty button{width:44px;height:44px;border:0;background:transparent;font-size:1.2rem;color:var(--navy)}
.qty output{min-width:34px;text-align:center;font-weight:800}
.variants{display:flex;gap:8px;flex-wrap:wrap}
.earnbox{background:linear-gradient(135deg,var(--emerald),#0F5E4C);color:#fff;border-radius:20px;padding:18px;display:grid;gap:12px}
.earnbox .t{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.earnbox h3{color:#fff;font-size:1.15rem}
.earnbox .rate{font-family:var(--f-display);font-weight:800;font-size:1.5rem;color:var(--gold)}
.earnbox .rate small{font-family:var(--f-body);font-size:.75rem;color:#BFE7D0;font-weight:700}
.earnbox .chipsx{display:flex;gap:6px;flex-wrap:wrap;font-size:.76rem;font-weight:700}
.earnbox .chipsx span{background:rgba(255,255,255,.12);padding:4px 10px;border-radius:999px}
.buy-d{display:flex;gap:10px;flex-wrap:wrap}
.buy-d .btn{flex:1}
.sticky-buy{position:fixed;left:0;right:0;bottom:0;z-index:56;background:var(--card);border-top:1px solid var(--line);padding:10px var(--gutr) calc(10px + env(safe-area-inset-bottom,0px)) var(--gut);display:grid;grid-template-columns:1fr 1fr;gap:8px;box-shadow:0 -8px 24px rgba(11,31,58,.08)}
.sticky-buy .btn{min-height:50px;padding:0 10px;font-size:.92rem}
@media(min-width:960px){.sticky-buy{display:none}}
body.pdp nav.bottom{display:none}
.two{display:grid;gap:20px;padding-block:20px 30px}
@media(min-width:900px){.two{grid-template-columns:1.5fr 1fr;align-items:start}}
.ci{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-bottom:10px}
.ci .th{width:76px;height:76px;border-radius:10px;overflow:hidden}
.ci .th svg{width:100%;height:100%}
.ci .row{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.link-btn{background:none;border:0;color:var(--red);font-weight:700;padding:8px 4px;min-height:40px}
.summary{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:grid;gap:10px}
.summary .ln{display:flex;justify-content:space-between;gap:10px;font-variant-numeric:tabular-nums}
.summary .tot{border-top:1px dashed var(--line);padding-top:10px;font-weight:800;color:var(--navy);font-size:1.1rem}
.field{display:grid;gap:6px}
.field label{font-weight:700;font-size:.86rem;color:var(--navy)}
.field .err{color:var(--red);font-size:.8rem}
.form{display:grid;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.status{border-radius:var(--r);padding:20px;display:grid;gap:10px;background:var(--gold-soft);border:1.5px solid #F1D86A;margin-bottom:24px}
.brand-hero{background:var(--cream);border-bottom:1px solid var(--line)}
.brand-hero .wrap{padding-block:26px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.brand-logo{width:72px;height:72px;border-radius:18px;background:var(--navy);color:var(--gold);display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:1.6rem;flex-shrink:0}

.scrim{position:fixed;inset:0;background:rgba(8,22,41,.6);z-index:90;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--card);width:100%;max-width:520px;border-radius:24px 24px 0 0;padding:18px var(--gutr) calc(22px + env(safe-area-inset-bottom,0px)) var(--gut);display:grid;gap:14px;max-height:92vh;overflow:auto}
@media(min-width:640px){.scrim{align-items:center}.sheet{border-radius:24px;padding:24px}}
.sheet .grab{width:44px;height:5px;border-radius:3px;background:var(--line);margin:0 auto}
.sheet .earnline{background:var(--money-lt);color:#0B4A28;border-radius:14px;padding:12px 14px;font-weight:800;display:flex;align-items:center;gap:10px}
.preview{border:1px solid var(--line);border-radius:14px;overflow:hidden;display:grid;grid-template-columns:76px minmax(0,1fr)}
.preview .th svg{width:76px;height:76px;display:block}
.preview div.t{padding:10px 12px;min-width:0}
.preview small{color:var(--muted);font-size:.72rem}
.share-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sh-opt{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--bg);border:1.5px solid var(--line);border-radius:14px;padding:12px 4px;font-size:.78rem;font-weight:700;color:var(--navy);text-decoration:none;min-height:86px;justify-content:center}
.sh-opt:hover{border-color:var(--money)}
.sh-opt .c2{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff}
.urlbox{display:flex;gap:6px}
.urlbox input{font-size:.82rem;min-height:44px}
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--navy);color:#fff;padding:12px 18px;border-radius:999px;font-weight:700;font-size:.9rem;z-index:100;display:flex;gap:8px;align-items:center;max-width:calc(100% - 32px)}
.toast i{width:20px;height:20px;border-radius:50%;background:var(--money);display:grid;place-items:center;font-style:normal;font-size:.75rem}
.burst{position:fixed;pointer-events:none;z-index:120;width:8px;height:8px;border-radius:50%}
.demo-flag{background:#081629;color:#9FB0C8;font-size:.72rem;text-align:center}
.demo-flag .wrap{padding-block:5px}
@media(prefers-reduced-motion:reduce){.pulse,.live,.estep,.wallet.bump{animation:none}.bar i{transition:none}}

/* === Big Wave === */
.hero,.bhero{position:relative;overflow:hidden;isolation:isolate}
.hero>.wrap,.bhero>.wrap{position:relative;z-index:2}
canvas.wave{position:absolute;left:0;right:0;bottom:0;width:100%;height:62%;z-index:1;pointer-events:none;display:block}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:.74rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;margin-bottom:16px;background:linear-gradient(90deg,#FFD84D,#FFF3B8,#8BE0B7,#FFD84D);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 6s linear infinite}
.kicker::before{content:"";width:28px;height:2px;background:var(--gold);flex-shrink:0}
@keyframes sheen{to{background-position:300% 0}}
.hero h1.elg,.bhero h1.elg{font-size:clamp(2.3rem,9.6vw,4.5rem);font-weight:800;letter-spacing:-.035em;line-height:1}
.hero h1.elg span,.bhero h1.elg span{display:block}
.hero h1.elg em,.bhero h1.elg em{font-style:normal;display:block;background:linear-gradient(100deg,#FFE47A 0%,#FFD84D 40%,#F5B731 70%,#FFF1A8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.rule{width:64px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--money));margin-top:20px}
.net .ringw{fill:none;stroke:var(--gold);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.net .ringw.go{animation:shock 1.6s cubic-bezier(.15,.7,.3,1) forwards}
.net .ringw.go:nth-of-type(2){animation-delay:.25s}.net .ringw.go:nth-of-type(3){animation-delay:.5s}
@keyframes shock{0%{opacity:.95;transform:scale(.3)}100%{opacity:0;transform:scale(4.6)}}
.net circle.n{transform-box:fill-box;transform-origin:center}
.net circle.n.on{animation:popn .45s cubic-bezier(.3,1.8,.5,1)}
@keyframes popn{0%{transform:scale(.4)}100%{transform:scale(1)}}
.net-card{background:rgba(8,22,41,.45);backdrop-filter:blur(6px)}
@media(prefers-reduced-motion:reduce){.kicker,.net .ringw.go,.net circle.n.on{animation:none}}

/* === Brand Wave stage === */
.bw{background:rgba(8,22,41,.5);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:16px;display:grid;gap:12px;color:#fff}
.bw-cap{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;min-height:52px}
.bw-cap small{display:block;font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#9FB4D0}
.bw-cap h3{font-family:var(--f-display);font-size:clamp(1.35rem,5.5vw,1.7rem);color:var(--gold);line-height:1.05;transition:opacity .25s}
.bw-cap p{font-size:.92rem;color:#E1EAF4;font-weight:600;margin-top:2px}
.bw canvas{width:100%;aspect-ratio:6/5;max-width:100%;display:block;border-radius:16px;background:radial-gradient(circle at 50% 48%,rgba(255,216,77,.08),transparent 60%)}
.bw-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.bw-steps button{min-height:46px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:#B9C8DA;font-weight:800;font-size:.8rem;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 4px;transition:background .25s,color .25s,border-color .25s}
.bw-steps button i{font-style:normal;width:18px;height:18px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;font-size:.62rem;flex-shrink:0}
.bw-steps button.on{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.bw-steps button.done{color:#8BE0B7;border-color:rgba(74,222,128,.5)}
.bw-steps button.done i{background:#8BE0B7;color:var(--navy);border-color:#8BE0B7}
.bw-meter{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center}
.bw-meter div{background:rgba(255,255,255,.06);border-radius:12px;padding:8px 4px}
.bw-meter b{display:block;font-family:var(--f-display);font-size:1.15rem;color:#fff;font-variant-numeric:tabular-nums}
.bw-meter span{font-size:.68rem;color:#9FB4D0;font-weight:700}
.bw-meter .z b{color:#8BE0B7}
[hidden]{display:none!important}
.hero .wrap>*,.bhero .wrap>*{min-width:0}
.hero .wrap,.bhero .wrap{grid-template-columns:minmax(0,1fr)}
@media(min-width:920px){.hero .wrap,.bhero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:48px}.hero .wrap>div:first-child,.bhero .wrap>div:first-child{position:sticky;top:96px;padding-top:28px}}
.bw{grid-template-columns:minmax(0,1fr)}.bw canvas{min-width:0}.bw-steps,.bw-meter{grid-template-columns:repeat(3,minmax(0,1fr))}.bw-steps button{min-width:0;font-size:.74rem}
@media(max-width:600px){.hero .ticks{display:none}}

.bw-ctl{display:grid;gap:8px;background:rgba(255,255,255,.05);border-radius:14px;padding:10px 12px}
.bw-ctl label{display:flex;justify-content:space-between;font-size:.8rem;font-weight:700;color:#C9D6E8}
.bw-ctl label b{color:var(--gold);font-family:var(--f-display);font-size:1rem}
.bw-ctl input[type=range]{width:100%;accent-color:var(--gold);height:26px}
.bw-price{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.bw-price button{min-height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:transparent;color:#C9D6E8;font-weight:800;font-size:.78rem}
.bw-price button.on{background:#fff;color:var(--navy)}
.bw-price::before{content:"Harga produk";grid-column:1/-1;font-size:.72rem;font-weight:700;color:#9FB4D0}
.bw-meter{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media(max-width:480px){.bw-meter{grid-template-columns:repeat(2,minmax(0,1fr))!important}.bw-meter b{font-size:1.15rem!important}}
.bw-meter b{font-size:1rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bw-meter span{font-size:.62rem!important;display:block;line-height:1.2}
.bw-bar{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.12);margin:5px 6px 0;overflow:hidden}
.bw-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#8BE0B7,var(--gold))}
.bw-res{background:#fff;color:var(--ink);border-radius:16px;padding:14px;display:grid;gap:8px;animation:resin .5s cubic-bezier(.2,.8,.2,1)}
@keyframes resin{from{transform:translateY(8px);opacity:0}}
.bw-res .rh{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);font-weight:700}
.bw-res .rh b{color:var(--navy)}
.bw-res .rr{display:grid;grid-template-columns:76px minmax(0,1fr) 48px;gap:8px;align-items:center;font-size:.82rem;font-weight:700}
.bw-res .rr em{height:14px;border-radius:7px;background:#F1ECDD;overflow:hidden}
.bw-res .rr i{display:block;height:100%;border-radius:7px;background:#B9C1CC;animation:grow 1.2s cubic-bezier(.2,.8,.2,1)}
.bw-res .rr.win i{background:linear-gradient(90deg,var(--gold),var(--money))}
.bw-res .rr b{text-align:right;font-family:var(--f-display);font-size:1rem;color:var(--navy)}
.bw-res .rr.win b{color:var(--money-dk)}
@keyframes grow{from{width:0}}
.bw-res .rx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;border-top:1px dashed var(--line);padding-top:8px;text-align:center}
.bw-res .rx small{display:block;font-size:.66rem;color:var(--muted);font-weight:700}
.bw-res .rx b{font-family:var(--f-display);font-size:1.05rem;color:var(--money-dk)}
.bw-res .rx div:last-child b{color:var(--muted)}
@media(prefers-reduced-motion:reduce){.bw-res,.bw-res .rr i{animation:none}}

/* === HYB social proof (ringkas) === */
.hyb{background:linear-gradient(135deg,#0B1F3A,#1A1030 60%,#3A0F14);color:#fff;border-radius:22px;padding:16px;display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-areas:"img head" "body body";gap:12px 14px;align-items:start}
@media(min-width:760px){.hyb{grid-template-columns:168px minmax(0,1fr);grid-template-areas:"img head" "img body";padding:22px;gap:10px 26px}}
.hyb img{grid-area:img;width:100%;height:auto;border-radius:12px;display:block;border:2px solid #fff;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.hyb .hd{grid-area:head;min-width:0}
.hyb .bd{grid-area:body;min-width:0;display:grid;gap:10px}
.hyb .ey{font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.hyb h2{color:#fff;font-size:clamp(1.15rem,3.6vw,1.7rem);margin-top:6px;line-height:1.12}
.hyb h2 em{font-style:normal;color:var(--gold)}
.hyb .lead{color:#C9D6E8;font-size:.9rem}
.hyb .row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.hyb .pill{font-size:.74rem;font-weight:800;padding:6px 10px;border-radius:999px}
.hyb .pill.o{background:rgba(255,255,255,.06);color:#8A9BB5}
.hyb .pill.o s{text-decoration-color:rgba(240,68,32,.85)}
.hyb .pill.n{background:var(--gold);color:var(--navy)}
.hyb .arw{color:var(--gold);font-weight:900}
.hyb .ch{font-size:.72rem;color:#8A9BB5;font-weight:700}

/* === Iklan vs SukaLOKAL (interaktif) === */
.cmpx{margin-top:24px;display:grid;gap:14px}
.cx-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.per{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px}
.per button{min-height:38px;padding:0 14px;border:0;border-radius:999px;background:transparent;font-weight:800;font-size:.82rem;color:var(--muted)}
.per button.on{background:var(--navy);color:#fff}
.replay{border:0;background:none;color:var(--money-dk);font-weight:800;min-height:38px}
.cx-grid{display:grid;gap:14px}
@media(min-width:820px){.cx-grid{grid-template-columns:1fr 1fr}}
.cx{border-radius:22px;padding:18px;display:grid;gap:12px;align-content:start;position:relative;overflow:hidden;min-width:0}
.cx.old{background:linear-gradient(160deg,#1B2333,#2A1A1E);color:#E1E6EE}
.cx.new{background:linear-gradient(160deg,#FFFDF3,#EAF8EE);border:2px solid var(--money);box-shadow:0 18px 40px rgba(18,161,80,.14)}
.cx-h b{display:block;font-family:var(--f-display);font-size:1.4rem;line-height:1.1}
.cx.old .cx-h b{color:#fff}.cx.new .cx-h b{color:var(--navy)}
.cx-h span{font-size:.86rem;font-weight:700}
.cx.old .cx-h span{color:#FF8A70}.cx.new .cx-h span{color:var(--money-dk)}
.plats{display:flex;flex-wrap:wrap;gap:5px}
.plats i{font-style:normal;font-size:.68rem;font-weight:800;padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.08);color:#AEB8C8}
.pile{display:flex;flex-wrap:wrap;gap:6px;min-height:58px}
.pile span{background:#F4F1EA;color:#2A2F3A;font-size:.72rem;font-weight:800;padding:6px 9px;border-radius:4px;box-shadow:0 3px 8px rgba(0,0,0,.35);transform:rotate(calc((var(--i) - 2) * 3deg))}
.bub{display:flex;flex-wrap:wrap;gap:6px;min-height:58px}
.bub i{font-style:normal;font-size:.74rem;font-weight:800;padding:7px 11px;border-radius:14px 14px 14px 4px;background:var(--gold);color:var(--navy)}
.stamp{justify-self:start;font-size:.78rem;font-weight:800;color:#1B4FD8;background:#E8EEFF;border:1.5px solid #1B4FD8;border-radius:10px;padding:5px 10px}
.stamp span{color:#D9A814}
.price{display:flex;align-items:baseline;gap:4px}
.price b{font-family:var(--f-display);font-size:clamp(2.4rem,9vw,3.4rem);line-height:1;font-variant-numeric:tabular-nums}
.cx.old .price b{color:#FF5A3C}.cx.new .price b{color:var(--money-dk)}
.price small{font-weight:800;font-size:.9rem}
.cx ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.cx li{display:flex;gap:9px;align-items:flex-start;font-size:.88rem;font-weight:600}
.cx li em{font-style:normal;flex-shrink:0;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.7rem;font-weight:900;color:#fff;margin-top:1px}
.cx.old li em{background:#E5484D}.cx.new li em{background:var(--money)}
.cx.new li{color:var(--ink)}
.cx-save{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;justify-content:center;background:var(--navy);color:#fff;border-radius:18px;padding:14px 18px;text-align:center}
.cx-save>span{font-size:.86rem;color:#C9D6E8;font-weight:700}
.cx.old .price small{color:#C9D0DC}.cx.new .price small{color:var(--navy)}
.cx-save b{font-family:var(--f-display);font-size:1.6rem;color:var(--gold);font-variant-numeric:tabular-nums}
.cx-save b small{font-size:.8rem;color:#C9D6E8;margin-left:2px}
/* animasi: hanya saat .go */
.cmpx.go .pile span{animation:drop .6s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(.35s + var(--i)*.22s)}
@keyframes drop{0%{opacity:0;transform:translateY(-36px) rotate(-14deg)}}
.cmpx.go .cx.old li{animation:fadeL .45s both;animation-delay:calc(1.4s + var(--i)*.18s)}
.cmpx.go .cx.old li em{animation:shake .4s both;animation-delay:calc(1.5s + var(--i)*.18s)}
@keyframes fadeL{0%{opacity:0;transform:translateX(-10px)}}
@keyframes shake{30%{transform:translateX(-3px)}60%{transform:translateX(3px)}}
.cmpx.go .bub i{animation:popb .5s cubic-bezier(.3,1.7,.5,1) both;animation-delay:calc(2.6s + var(--i)*.25s)}
@keyframes popb{0%{opacity:0;transform:scale(.4) translateY(10px)}}
.cmpx.go .stamp{animation:stamp .5s cubic-bezier(.3,1.6,.5,1) both;animation-delay:3.5s}
@keyframes stamp{0%{opacity:0;transform:scale(1.8) rotate(-8deg)}}
.cmpx.go .cx.new li{animation:fadeR .45s both;animation-delay:calc(3.7s + var(--i)*.14s)}
.cmpx.go .cx.new li em{animation:popb .45s both;animation-delay:calc(3.75s + var(--i)*.14s)}
@keyframes fadeR{0%{opacity:0;transform:translateX(10px)}}
.cmpx.go .cx-save{animation:fadeL .6s both;animation-delay:5s}
@media(prefers-reduced-motion:reduce){.cmpx.go *{animation:none!important}}

/* === Sheet konversi === */
.sheet.sx{position:relative;gap:12px;padding-top:14px}
.sx-x{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:0;background:var(--bg);color:var(--muted);font-size:1rem;font-weight:800}
.sx-p{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;padding-right:44px}
.sx-p .th{width:64px;height:64px;border-radius:14px;overflow:hidden}.sx-p .th svg{width:100%;height:100%;display:block}
.sx-p b{display:block;font-family:var(--f-display);font-size:1.1rem;color:var(--navy);line-height:1.15}
.sx-p span{font-size:.86rem;color:var(--muted);font-weight:700}
.sx-p em{font-style:normal}.sx-p .ok{color:var(--money-dk)}.sx-p .no{color:var(--red)}
.sx-q{font-weight:800;color:var(--navy);font-size:.92rem}
.roles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.roles button{border:1.5px solid var(--line);background:var(--card);border-radius:14px;padding:9px 4px;display:grid;gap:1px;text-align:center;min-height:76px;align-content:center;transition:transform .15s,border-color .2s,background .2s}
.roles button b{font-size:.82rem;color:var(--navy)}
.roles button small{font-size:.64rem;color:var(--muted);font-weight:700}
.roles button em{font-style:normal;font-size:.7rem;font-weight:800;color:var(--money-dk);margin-top:3px}
.roles button[data-role="beli"] em{color:var(--red)}
.roles button.on{border-color:var(--navy);background:var(--navy);transform:translateY(-2px);box-shadow:0 8px 18px rgba(11,31,58,.18)}
.roles button.on b{color:#fff}.roles button.on small{color:#B9C8DA}.roles button.on em{color:var(--gold)!important}
.pn{display:grid;gap:10px;background:var(--bg);border-radius:18px;padding:14px}
.pn.in{animation:pnin .3s cubic-bezier(.2,.8,.2,1)}
@keyframes pnin{from{opacity:0;transform:translateY(6px)}}
.pn-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pn small{display:block;font-size:.7rem;color:var(--muted);font-weight:700}
.pn .big{font-family:var(--f-display);font-size:1.6rem;color:var(--navy);font-variant-numeric:tabular-nums}
.pn .qty output{min-width:44px;font-size:.8rem}
.calc{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:6px;align-items:center;text-align:center}
.calc.one{grid-template-columns:1fr 1fr}
.calc>div{background:var(--card);border-radius:12px;padding:8px 4px;min-width:0}
.calc b{font-family:var(--f-display);font-size:.98rem;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
.calc .win{background:var(--money-lt)}.calc .win b{color:var(--money-dk);font-size:1.1rem}
.calc i{font-style:normal;color:var(--muted);font-weight:900}
.rng{display:grid;gap:4px;font-size:.84rem;font-weight:700;color:var(--navy)}
.rng input{width:100%;accent-color:var(--money);height:26px}
.nudge{font-size:.8rem;color:var(--muted);text-align:center;margin:0}
.nudge b{color:var(--money-dk)}
.pulse-r{animation:pulser 2.2s ease-in-out infinite}
@keyframes pulser{0%,100%{box-shadow:0 0 0 0 rgba(240,68,32,.5)}60%{box-shadow:0 0 0 12px rgba(240,68,32,0)}}
.sx-share{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px dashed var(--line);padding-top:12px;flex-wrap:wrap}
.sx-share>span{font-size:.8rem;font-weight:800;color:var(--navy)}
.logos{display:flex;gap:8px}
.logos a,.logos button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:0;color:#fff;transition:transform .15s;box-shadow:0 4px 10px rgba(0,0,0,.15)}
.logos a:hover,.logos button:hover{transform:translateY(-3px) scale(1.06)}
.sr{position:absolute;left:-9999px;width:1px;height:1px}
@media(max-width:330px){.roles{grid-template-columns:repeat(2,minmax(0,1fr))}.logos a,.logos button{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){.pulse-r,.pn.in{animation:none}}

/* === Sheet ringkas seukuran HP === */
.scrim{align-items:flex-end}
@media(min-width:640px){.scrim{align-items:center}}
.sheet.sx{max-width:360px;width:100%;max-height:min(640px,94vh)!important;overflow-y:auto;overscroll-behavior:contain;gap:10px;padding:12px max(14px,env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px));max-height:88vh;border-radius:22px 22px 0 0}
@media(min-width:640px){.sheet.sx{border-radius:24px;padding:14px;width:360px;box-shadow:0 30px 80px rgba(0,0,0,.4)}}
.sheet.sx .grab{width:36px;height:4px}
.sx-x{top:8px;right:8px;width:34px;height:34px;font-size:.85rem}
.sx-p{grid-template-columns:48px minmax(0,1fr);gap:10px;padding-right:38px}
.sx-p .th{width:48px;height:48px;border-radius:10px}
.sx-p b{font-size:.95rem}
.sx-p span{font-size:.78rem}
.sx-q{font-size:.8rem}
.roles{gap:5px}
.roles button{min-height:60px;padding:6px 2px;border-radius:12px}
.roles button b{font-size:.74rem}
.roles button small{font-size:.58rem}
.roles button em{font-size:.66rem;margin-top:1px}
.pn{padding:10px;gap:8px;border-radius:14px}
.pn .big{font-size:1.25rem}
.pn .qty button{width:38px;height:38px}
.sheet.sx .btn{min-height:44px;font-size:.92rem}
.calc b{font-size:.8rem}.calc .win b{font-size:.9rem}
.calc>div{padding:6px 2px}
.nudge{font-size:.72rem}
.sx-share{padding-top:10px;gap:8px}
.sx-share>span{font-size:.74rem}
.logos{gap:6px}
.logos a,.logos button{width:38px;height:38px}
.logos svg{width:17px;height:17px}
.sx-st{display:grid;line-height:1.2}.sx-st b{font-size:.82rem;color:var(--navy)}.sx-st span{font-size:.8rem;font-weight:800;color:var(--money-dk)}.sx-st em{font-style:normal;color:var(--muted);font-weight:700}
.rule2{display:grid;gap:6px}.rule2>div{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:start;background:var(--card);border-radius:12px;padding:9px 10px}.rule2>div.win{background:var(--money-lt)}.rule2 span{font-size:1.1rem;line-height:1.2}.rule2 b{display:block;font-size:.82rem;color:var(--navy)}.rule2 small{font-size:.74rem;color:var(--muted);font-weight:600}.rule2 strong{color:var(--money-dk)}

/* === Warna peran (psikologi) — fokus pembelian === */
.btn-blue{background:#1E5BD8;color:#fff;box-shadow:0 12px 26px rgba(30,91,216,.3)}
.btn-blue:active{transform:translateY(4px);box-shadow:0 1px 0 #1442A8}
.roles button{position:relative}
.roles button[data-role="beli"]{border-color:#FFB9A6;background:#FFF4F0}
.roles button[data-role="beli"]::after{content:"Utama";position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;font-size:.52rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:999px}
.roles button[data-role="beli"] em{color:var(--red)!important}
.roles button[data-role="reseller"] em{color:#A97A00!important}
.roles button[data-role="drop"] em{color:#1E5BD8!important}
.roles button[data-role="promo"] em{color:var(--money-dk)!important}
.roles button.on{transform:translateY(-3px) scale(1.03)}
.roles button.on[data-role="beli"]{background:linear-gradient(160deg,#FF6B45,#E5361A);border-color:#E5361A;box-shadow:0 10px 22px rgba(240,68,32,.38)}
.roles button.on[data-role="reseller"]{background:linear-gradient(160deg,#FFE47A,#F5B731);border-color:#E3A51C;box-shadow:0 10px 22px rgba(217,168,20,.35)}
.roles button.on[data-role="drop"]{background:linear-gradient(160deg,#4A88F5,#1E5BD8);border-color:#1E5BD8;box-shadow:0 10px 22px rgba(30,91,216,.32)}
.roles button.on[data-role="promo"]{background:linear-gradient(160deg,#22C468,#0E8F45);border-color:#0E8F45;box-shadow:0 10px 22px rgba(18,161,80,.32)}
.roles button.on b,.roles button.on small,.roles button.on em{color:#fff!important}
.roles button.on small{opacity:.85}
.roles button.on[data-role="reseller"] b,.roles button.on[data-role="reseller"] small,.roles button.on[data-role="reseller"] em{color:var(--navy)!important}
.roles button.on[data-role="beli"]::after{background:#fff;color:var(--red)}
.pn{border:1.5px solid transparent;transition:background .25s,border-color .25s}
.pn[data-r="beli"]{background:#FFF1EC;border-color:#FFD0C3}
.pn[data-r="reseller"]{background:#FFF8DD;border-color:#F3DC8A}
.pn[data-r="drop"]{background:#EEF4FF;border-color:#C7D8FA}
.pn[data-r="promo"]{background:#EAF8EF;border-color:#BFE6CC}
.pn[data-r="beli"] .big{color:#C9320F}
.link-buy{border:0;background:none;font-size:.76rem;color:var(--muted);font-weight:600;min-height:32px;padding:0}
.link-buy b{color:var(--red)}
.roles{margin-top:6px}.roles button[data-role="beli"]{padding-top:10px}
.hero h1.h4l{font-size:min(7.3vw,2.8rem);line-height:1.04}
.hero h1.h4l span,.hero h1.h4l em,.h4l em{white-space:nowrap}.bhero h1.elg.h4l{font-size:min(7.3vw,2.8rem);line-height:1.04}.h4l small.mny{color:#8BE0B7!important}.h4l small.ln5{font-size:min(.86em,6vw);margin-top:.12em;white-space:nowrap!important}
.hero h1.h4l small,.bhero h1.h4l small{display:block;font-size:1em;color:#fff;font-weight:800;letter-spacing:inherit;margin-top:0;white-space:nowrap}
.notx{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin-top:16px}
.notx s{font-size:.8rem;font-weight:800;color:#9FB0C8;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:4px 10px;border-radius:999px;text-decoration-color:#FF6B45;text-decoration-thickness:2px}
.notx b{font-size:.84rem;color:var(--gold);font-weight:800}

/* === 4 kotak hoki === */
.ec{transition:transform .25s,box-shadow .25s,background .3s,border-color .3s}
.ec h3,.ec p,.ec b.x{transition:color .3s}
.ec:hover{transform:translateY(-6px)}
.ec.k:hover{background:linear-gradient(160deg,#1DBF6B,#0A6B43);border-color:#0A6B43;box-shadow:0 18px 36px rgba(18,161,80,.35)}
.ec.r:hover{background:linear-gradient(160deg,#FFE47A,#F0B429);border-color:#D9A814;box-shadow:0 18px 36px rgba(217,168,20,.35)}
.ec.b:hover{background:linear-gradient(160deg,#FF9A3C,#E8590C);border-color:#E8590C;box-shadow:0 18px 36px rgba(232,89,12,.35)}
.ec.k:hover h3,.ec.k:hover p,.ec.b:hover h3,.ec.b:hover p{color:#fff}
.ec.k:hover b.x,.ec.b:hover b.x{color:rgba(255,255,255,.3)}
.ec.r:hover h3{color:var(--navy)}.ec.r:hover p{color:#5A4300}.ec.r:hover b.x{color:rgba(11,31,58,.18)}
.ec:hover .ico{background:rgba(255,255,255,.9)!important}
/* kotak 4: pusat hoki — merah angpao + emas */
.ec.n{background:linear-gradient(150deg,#B30F23 0%,#D4202C 45%,#E8A317 100%);border:2px solid #FFD84D;box-shadow:0 14px 34px rgba(200,16,46,.32),0 0 0 4px rgba(255,216,77,.25);overflow:hidden}
.ec.n::before{content:"";position:absolute;inset:-60%;background:linear-gradient(115deg,transparent 45%,rgba(255,240,180,.35) 50%,transparent 55%);animation:hokiShine 4.5s ease-in-out infinite;pointer-events:none}
@keyframes hokiShine{0%,55%{transform:translateX(-45%)}100%{transform:translateX(45%)}}
.ec.n h3{color:#FFE47A}.ec.n p{color:#FFF4D6}.ec.n b.x{color:rgba(255,228,122,.35)}
.ec.n .ico{background:#FFD84D!important}.ec.n .ico svg{stroke:#B30F23}
.ec.n::after{content:"Pusat hoki";position:absolute;top:14px;right:44px;font-size:.6rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:#FFD84D;color:#8A0A18;padding:3px 8px;border-radius:999px}
.ec.n:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 24px 48px rgba(200,16,46,.45),0 0 0 6px rgba(255,216,77,.4)}
@media(min-width:1000px){.ec.n{transform:scale(1.04)}.ec.n:hover{transform:translateY(-8px) scale(1.06)}}
@media(prefers-reduced-motion:reduce){.ec.n::before{animation:none}.ec:hover,.ec.n{transform:none}}

/* === Logo baru === */
.logo-mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#FFE47A,#F5B731 60%,#E8A317);box-shadow:inset 0 -2px 0 rgba(0,0,0,.12),0 4px 12px rgba(245,183,49,.35)}
.wm{display:grid;line-height:1;font-family:var(--f-display);font-weight:800;font-size:1.28rem;letter-spacing:-.02em;grid-template-columns:auto;}
.wm b{color:var(--gold)}.wm i{font-style:normal;font-size:.62em;color:#9FB4D0;font-weight:700}
.wm{display:block}
.wm .tg{display:block;font-family:var(--f-body);font-size:.6rem;font-weight:700;letter-spacing:.04em;color:#C9D6E8;margin-top:3px}
@media(max-width:480px){.wm .tg{display:none}.wm i{display:none}.wm{font-size:1.12rem}.aud{font-size:.7rem}.aud a{white-space:nowrap;padding:6px 9px}.logo-mark{width:34px;height:34px}}

/* tagline bertumbuh */
.tl{display:inline}
.tl i{font-style:normal;display:inline-block}
.tl i{font-size:1em;opacity:1;margin-right:.2em}
.tl i.up{color:var(--money);white-space:nowrap;margin-right:0}
.wm{font-size:1.4rem}
.wm .tg{font-size:.7rem;letter-spacing:.02em;color:#E1EAF4;margin-top:4px}
.logo-mark{width:42px;height:42px}
.nav-d a{font-size:.8rem;font-weight:600;color:#9FB0C8;padding:6px 10px}
.nav-d{margin-left:8px}
@media(max-width:480px){.wm{font-size:1.12rem}.logo-mark{width:34px;height:34px}}
.tl i.up svg{vertical-align:-.12em;animation:rise 2.4s ease-in-out infinite}
@keyframes rise{0%,100%{transform:translate(0,0)}50%{transform:translate(2px,-3px)}}
.wm .tg .tl i.up{color:#8BE0B7}
footer .tl i.up,.hero .tl i.up{color:#8BE0B7}
.closing .tl i.up{color:var(--money-dk)}
@media(prefers-reduced-motion:reduce){.tl i.up svg{animation:none}}

/* === Simulator ringkas & fancy === */
.bwx{gap:10px;padding:14px;background:linear-gradient(160deg,rgba(18,48,90,.75),rgba(8,22,41,.85));box-shadow:0 24px 60px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08)}
.bx-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.bx-ttl small{display:block;font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#9FB4D0}
.bx-ttl h3{font-family:var(--f-display);font-size:1.35rem;color:var(--gold);line-height:1.1}
.bx-play{width:40px;height:40px;border-radius:50%;border:0;background:var(--gold);color:var(--navy);font-weight:900;font-size:.9rem;box-shadow:0 0 0 0 rgba(255,216,77,.5);animation:playp 2.4s infinite;flex-shrink:0}
@keyframes playp{60%{box-shadow:0 0 0 10px rgba(255,216,77,0)}}
.bx-sub{font-size:.86rem;color:#E1EAF4;font-weight:600;margin-top:-6px}
.bx-ctl{display:grid;gap:6px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:8px 10px}
.bx-row{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:8px;font-size:.74rem;font-weight:700;color:#9FB4D0}
.bx-row>div{grid-column:2/4}
.bx-row input{width:100%;accent-color:var(--gold);height:22px;margin:0}
.bx-row b{color:var(--gold);font-family:var(--f-display);font-size:.95rem;min-width:62px;text-align:right}
.bwx .bw-price::before{display:none}
.bwx .bw-price button{min-height:30px;font-size:.72rem;border-radius:8px}
.bx-stage{position:relative;border-radius:16px;overflow:hidden;background:radial-gradient(circle at 50% 50%,rgba(255,216,77,.10),transparent 62%),rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.06)}
.bwx canvas{aspect-ratio:360/240;width:100%;display:block;border-radius:0;background:none}
.bx-m{position:absolute;background:rgba(8,22,41,.72);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:5px 8px;min-width:76px}
.bx-m small{display:block;font-size:.56rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#9FB4D0}
.bx-m b{font-family:var(--f-display);font-size:.98rem;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.bx-m.tl{top:8px;left:8px}.bx-m.tr{top:8px;right:8px;text-align:right}.bx-m.bl{bottom:8px;left:8px}.bx-m.br{bottom:8px;right:8px;text-align:right}
.bx-m.win{background:rgba(18,161,80,.85);border-color:#8BE0B7}.bx-m.win small{color:#D9FBE6}
.bx-m .bw-bar{margin:4px 0 0}
.bwx .bw-steps button{min-height:34px;font-size:.7rem;border-radius:999px}
.bwx .bw-res{padding:10px 12px;gap:6px;border-radius:14px}
.bwx .bw-res .rh{display:none}
.bwx .bw-res .rr{grid-template-columns:70px minmax(0,1fr) 40px;font-size:.74rem}
.bwx .bw-res .rr em{height:10px}
.bwx .bw-res .rx{padding-top:6px}
.bwx .bw-res .rx b{font-size:.95rem}
.bx-as{font-size:.66rem;color:#7F93B0}
.bx-as summary{cursor:pointer;list-style:none;font-weight:700;text-align:center}
.bx-as summary::-webkit-details-marker{display:none}
.bx-as p{margin-top:4px;text-align:center}
@media(prefers-reduced-motion:reduce){.bx-play{animation:none}}

.bx-as{background:none!important;border:0!important;margin:0!important}
.bx-as summary{padding:0!important;color:#7F93B0!important;justify-content:center;font-size:.66rem}
.bx-as summary::after{display:none!important}
.bx-as p{padding:0!important;color:#7F93B0}
.bwx .bw-res{background:rgba(255,255,255,.06);border:1px solid rgba(255,216,77,.3);color:#E1EAF4}
.bwx .bw-res .rr span{color:#C9D6E8}
.bwx .bw-res .rr em{background:rgba(255,255,255,.1)}
.bwx .bw-res .rr b{color:#fff}
.bwx .bw-res .rr.win b{color:#8BE0B7}
.bwx .bw-res .rx{border-top-color:rgba(255,255,255,.12)}
.bwx .bw-res .rx small{color:#9FB4D0}
.bwx .bw-res .rx b{color:var(--gold)}
.bwx .bw-res .rx div:last-child b{color:#9FB4D0}
.earnchain{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.earnchain span{display:inline-flex;align-items:center;gap:6px;font-size:.9rem;font-weight:600;color:#E1EAF4;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:7px 12px;border-radius:999px}
.earnchain b{color:#8BE0B7;font-weight:800}
.earnchain span:last-child{background:rgba(255,216,77,.14);border-color:rgba(255,216,77,.45)}
.earnchain span:last-child b{color:var(--gold)}

/* === HYB v3: soft hoki & hidup === */
.hyb2{position:relative;overflow:hidden;border-radius:24px;padding:16px;display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-areas:"img head" "body body";gap:14px;align-items:start;
 background:radial-gradient(120% 100% at 100% 0%,rgba(255,216,77,.45),transparent 55%),radial-gradient(90% 90% at 0% 100%,rgba(18,161,80,.18),transparent 60%),linear-gradient(135deg,#FFF9E8 0%,#FFF1D0 50%,#FFE8DA 100%);
 border:1px solid #F3DFA8;box-shadow:0 18px 44px rgba(217,168,20,.18)}
.hyb2::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 0 70%,rgba(255,216,77,.25) 80%,transparent 90%);animation:hySpin 14s linear infinite;pointer-events:none}
@keyframes hySpin{to{transform:rotate(360deg)}}
.hyb2>*{position:relative}
.hy-img{grid-area:img}.hy-head{grid-area:head;display:grid;gap:6px;min-width:0}.hy-body{grid-area:body}
@media(min-width:760px){.hyb2{grid-template-columns:180px minmax(0,1fr);grid-template-areas:"img head" "img body";padding:24px;gap:14px 28px}}
.hy-opc small{display:block;font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#A97A00}
.hy-fx{position:absolute;inset:0;pointer-events:none}
.hy-fx b{position:absolute;bottom:20%;right:-4px;font-size:15px;opacity:0;animation:hyUp 4s ease-out infinite}
.hy-fx b:nth-child(2){animation-delay:1s;right:14px}.hy-fx b:nth-child(3){animation-delay:2s;right:-10px}.hy-fx b:nth-child(4){animation-delay:3s;right:6px}
@keyframes hyUp{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1;transform:translateY(-14px) scale(1)}100%{opacity:0;transform:translateY(-90px) translateX(18px) scale(.9)}}
.hy-img{position:relative;animation:hyFloat 5s ease-in-out infinite}
@keyframes hyFloat{50%{transform:translateY(-6px) rotate(-1deg)}}
.hy-img img{width:100%;height:auto;display:block;border-radius:14px;border:3px solid #fff;box-shadow:0 14px 30px rgba(11,31,58,.22)}
.hy-live{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:5px;background:#E5484D;color:#fff;font-size:.6rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px}
.hy-live i{width:6px;height:6px;border-radius:50%;background:#fff;animation:live 1.4s infinite}
.hy-body{display:grid;gap:10px;min-width:0}
.hy-ey{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#A97A00}
.hy-ey b{color:var(--money-dk)}
.hyb2 h2{font-size:clamp(1.15rem,3.4vw,1.65rem);color:var(--navy);line-height:1.15}
.hyb2 h2 em{font-style:normal;color:#C9320F}
.hy-opc{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #F3DFA8;border-radius:16px;padding:10px 14px;box-shadow:0 6px 16px rgba(217,168,20,.12)}
.hy-opc>div{display:flex;align-items:baseline;gap:4px;flex-shrink:0}
.hy-num{font-family:var(--f-display);font-size:2.2rem;line-height:1;color:var(--money-dk);font-variant-numeric:tabular-nums}
.hy-opc span{font-family:var(--f-display);font-weight:800;color:var(--money-dk);font-size:1.1rem}
.hy-opc p{font-size:.82rem;color:var(--muted);font-weight:600;line-height:1.35}
.hy-opc strong{color:var(--navy)}
.hy-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.hy-row .pill{font-size:.74rem;font-weight:800;padding:6px 10px;border-radius:999px}
.hy-row .pill.o{background:rgba(11,31,58,.06);color:#8A94A6}
.hy-row .pill.o s{text-decoration-color:#E5484D}
.hy-row .pill.n{background:var(--money);color:#fff}
.hy-row .arw{color:var(--money-dk);font-weight:900}
.hy-logos{display:flex;flex-wrap:wrap;gap:8px}
.hy-lg{position:relative;width:38px;height:38px;border-radius:12px;background:var(--c);display:grid;place-items:center;box-shadow:0 6px 14px rgba(11,31,58,.18);animation:hyBob 3s ease-in-out infinite;animation-delay:calc(var(--i)*.18s);cursor:default;transition:transform .2s}
.hy-lg::after{content:"";position:absolute;inset:0;border-radius:12px;border:2px solid var(--c);opacity:0;animation:hyRing 3s ease-out infinite;animation-delay:calc(var(--i)*.18s);background:none}
@keyframes hyBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes hyRing{0%,40%{opacity:0;transform:scale(1)}50%{opacity:.6}100%{opacity:0;transform:scale(1.5)}}
.hy-lg em{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%) scale(.8);background:var(--navy);color:#fff;font-style:normal;font-size:.62rem;font-weight:700;padding:3px 7px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:.15s}
.hy-lg:hover{animation-play-state:paused;transform:translateY(-6px) scale(1.12)}
.hy-lg:hover em{opacity:1;transform:translateX(-50%) scale(1)}
@media(max-width:480px){.hy-logos{gap:6px;flex-wrap:nowrap}.hy-lg{width:34px;height:34px;border-radius:10px}.hy-lg svg{width:16px;height:16px}.hy-row .pill{font-size:.68rem;padding:5px 8px}.hy-row{flex-wrap:nowrap}.hy-row .pill{white-space:nowrap}.hy-row .arw{flex-shrink:0}}
@media(prefers-reduced-motion:reduce){.hyb2::before,.hy-img,.hy-lg,.hy-lg::after{animation:none}.hy-fx{display:none}}

/* === HYB v4: hijau → orange, ringkas === */
.hyb2{background:radial-gradient(70% 90% at 100% 100%,rgba(255,216,77,.55),transparent 60%),linear-gradient(125deg,#0B2E3A 0%,var(--emerald) 30%,#2E8B57 55%,#F5A524 85%,#FF8A2B 100%);border:0;box-shadow:0 18px 44px rgba(12,74,62,.3);color:#fff}
.hyb2::before{background:conic-gradient(from 0deg,transparent 0 70%,rgba(255,255,255,.14) 80%,transparent 90%)}
.hyb2 .hy-ey{color:#FFE27A}
.hyb2 h2{color:#fff}.hyb2 h2 em{color:#FFD84D;display:block}
.hy-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;counter-reset:f}
.hy-flow li{position:relative;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(6px);border-radius:14px;padding:10px 8px;text-align:center;display:grid;gap:2px;animation:hyLit 4.5s infinite;animation-delay:calc(var(--i)*1.5s);will-change:transform}
.hy-flow li:not(:last-child)::after{content:"→";position:absolute;right:-9px;top:50%;transform:translateY(-50%);width:16px;height:16px;border-radius:50%;background:#FFD84D;color:var(--navy);font-size:.65rem;font-weight:900;display:grid;place-items:center;z-index:1}
.hy-flow .ic{font-size:1.3rem;line-height:1.2}
.hy-flow b{font-size:.78rem;line-height:1.15}
.hy-flow small{font-size:.66rem;opacity:.85}
@keyframes hyLit{0%,30%{background:rgba(255,255,255,.95);color:var(--navy);transform:translateY(-3px)}40%,100%{background:rgba(255,255,255,.14);color:#fff;transform:none}}
.hy-foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.hyb2 .hy-opc{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;background:rgba(11,31,58,.35);border:1px solid rgba(255,216,77,.5);box-shadow:none;border-radius:999px;padding:6px 12px;color:#fff;font-weight:800;font-size:.85rem}
.hyb2 .hy-opc span{color:#fff;font-family:inherit;font-size:inherit;font-weight:800}
.hyb2 .hy-opc .hy-num{font-size:1.25rem;color:#FFD84D}
.hyb2 .hy-opc small{font-size:.62rem;opacity:.8;font-weight:600;letter-spacing:0;text-transform:none;color:#fff;display:inline}
.hyb2 .hy-lg{box-shadow:0 6px 14px rgba(0,0,0,.25);outline:2px solid rgba(255,255,255,.7)}
@media(min-width:760px){.hy-flow b{font-size:.9rem}.hy-flow small{font-size:.74rem}}
@media(max-width:480px){.hy-foot{justify-content:flex-start}.hyb2 .hy-opc{padding:5px 12px}.hy-flow li{padding:8px 4px}}
@media(prefers-reduced-motion:reduce){.hy-flow li{animation:none}}

/* === Store popup 360×640 === */
.st-scrim{align-items:center!important;padding:8px}
.st{position:relative;width:min(360px,100%);height:min(640px,calc(100dvh - 16px));background:#FAF8F4;border-radius:26px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 6px rgba(255,255,255,.08);animation:stIn .35s cubic-bezier(.2,.8,.3,1)}
@keyframes stIn{from{transform:translateY(24px) scale(.97);opacity:0}}
.st-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;padding-bottom:12px;scrollbar-width:none}
.st-scroll::-webkit-scrollbar{display:none}
.st-hero{position:relative;height:196px;background:radial-gradient(80% 70% at 50% 60%,var(--b),var(--a));overflow:hidden}
.st-top{position:absolute;inset:10px 10px auto;display:flex;align-items:center;gap:8px;z-index:2;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-radius:16px;padding:6px 6px 6px 6px;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.st-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--emerald),var(--money));color:#fff;font-weight:800;font-size:.78rem;display:grid;place-items:center;border:2px solid #F5B731;flex-shrink:0}
.st-nm{min-width:0;flex:1;line-height:1.15}.st-nm b{display:flex;align-items:center;gap:3px;font-size:.84rem;color:var(--navy);white-space:nowrap;overflow:hidden}.st-nm small{font-size:.66rem;color:var(--muted)}
.st-x:focus:not(:focus-visible){outline:none;box-shadow:none}.st-x{width:30px;height:30px;border-radius:50%;border:0;background:var(--navy);color:#fff;font-size:.8rem;cursor:pointer;flex-shrink:0}
.st-art{position:absolute;inset:50px 60px 0;display:grid;place-items:end center}
.st-art svg{width:150px;height:150px;filter:drop-shadow(0 18px 24px rgba(0,0,0,.25));animation:hyFloat 5s ease-in-out infinite}
.st-art svg>rect:first-child{fill:transparent}
.st-rail{position:absolute;right:10px;top:70px;display:grid;gap:5px;background:#fff;border-radius:999px;padding:5px;box-shadow:0 8px 20px rgba(0,0,0,.15)}
.st-rail button{position:relative;width:32px;height:32px;border-radius:50%;border:0;background:#FFF4D6;color:var(--navy);display:grid;place-items:center;cursor:pointer}
.st-rail button svg{width:18px;height:18px}
.st-rail button.on{background:#FFE1DA;color:#E5484D}.st-rail button.on svg path{fill:#E5484D}
.st-rail em{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);background:var(--money);color:#fff;font-style:normal;font-size:.55rem;font-weight:800;padding:1px 4px;border-radius:6px}
.st-ex{position:absolute;left:10px;bottom:10px;background:rgba(11,31,58,.7);color:#fff;font-size:.6rem;font-weight:700;padding:2px 7px;border-radius:6px}
.st-bar{display:flex;gap:6px;padding:8px 12px 6px;align-items:center}
.st-q{flex:1;display:flex;align-items:center;gap:6px;border:1.5px solid var(--navy);border-radius:12px;padding:0 10px;height:38px;background:#fff;color:var(--navy)}
.st-q svg{width:16px;height:16px;flex-shrink:0}.st-q input{border:0;outline:0;background:none;font:inherit;font-size:.8rem;width:100%;min-width:0}
.st-ib{position:relative;width:38px;height:38px;border-radius:12px;border:1.5px solid var(--navy);background:#fff;color:var(--navy);display:grid;place-items:center;cursor:pointer;flex-shrink:0}
.st-ib svg{width:20px;height:20px}.st-ib.wa{background:#25D366;border-color:#25D366}
.st-ib i{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;border-radius:9px;background:var(--red);color:#fff;font-style:normal;font-size:.62rem;font-weight:800;display:grid;place-items:center;padding:0 4px;border:2px solid #FAF8F4}
.st-chips{display:flex;gap:6px;padding:2px 12px 8px;overflow-x:auto;scrollbar-width:none}
.st-chips button{flex-shrink:0;border:1px solid #EADFC4;background:#fff;border-radius:999px;padding:6px 12px;font:inherit;font-size:.74rem;font-weight:700;color:var(--navy)}
.st-chips button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.st-feat{margin:0 12px;background:#fff;border-radius:18px;padding:12px 14px;box-shadow:0 8px 24px rgba(11,31,58,.08);border:1px solid #F1E6CB;display:grid;gap:8px}
.st-tag{justify-self:start;background:linear-gradient(90deg,var(--red),#FF7A3D);color:#fff;font-size:.66rem;font-weight:800;padding:3px 9px;border-radius:999px}
.st-feat h3{font-size:1.02rem;color:var(--navy);line-height:1.2}
.st-ben{font-size:.74rem;color:var(--muted);line-height:1.35;margin-top:-4px}
.st-pr{display:flex;align-items:center;justify-content:space-between;gap:8px}
.st-pr b{font-family:var(--f-display);font-size:1.45rem;color:var(--red)}
.st-stk{display:inline-flex;align-items:center;gap:3px;font-size:.68rem;font-weight:800;padding:3px 8px;border-radius:999px;background:var(--money-lt);color:var(--money-dk)}
.st-stk svg{width:11px;height:11px}.st-stk.low{background:#FFE7DF;color:#C9320F;animation:live 1.4s infinite}.st-stk.no{background:#eee;color:#888}
.st-var{display:flex;flex-wrap:wrap;gap:6px}
.st-var button{border:1.5px solid #E5DCC5;background:#fff;border-radius:10px;padding:5px 10px;font:inherit;font-size:.72rem;font-weight:700;color:var(--navy);cursor:pointer}
.st-var button.on{border-color:var(--red);background:#FFF1EC;color:#C9320F}
.st-buy{display:flex;gap:8px;align-items:stretch}
.st-buy .qty{display:flex;align-items:center;border:1.5px solid #E5DCC5;border-radius:12px;overflow:hidden;flex-shrink:0}
.st-buy .qty button{width:30px;height:46px;border:0;background:#F6F3EC;font-size:1.05rem;font-weight:800;color:var(--navy);cursor:pointer}
.st-buy .qty output{width:28px;text-align:center;font-weight:800}
.st-go{flex:1;min-height:46px;font-size:.95rem}
.st-add{border:0;background:none;color:var(--navy);font:inherit;font-weight:700;font-size:.78rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:2px}
.st-trust{display:flex;justify-content:space-between;gap:4px;border-top:1px dashed #EADFC4;padding-top:8px}
.st-trust span{display:flex;align-items:center;gap:3px;font-size:.62rem;font-weight:700;color:var(--muted)}
.st-trust svg{width:13px;height:13px;color:var(--money-dk)}












.st-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.st-mini{border:1px solid #F1E6CB;background:#fff;border-radius:14px;padding:6px;text-align:left;display:grid;gap:2px;cursor:pointer;font:inherit}
.st-mini svg{width:100%;height:auto;border-radius:10px;aspect-ratio:1}
.st-mini b{font-size:.7rem;color:var(--navy);line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.st-mini span{font-size:.74rem;font-weight:800;color:var(--red)}
.st-nav{flex-shrink:0;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;background:#fff;border-top:1px solid #F1E6CB;padding:6px 6px calc(8px + env(safe-area-inset-bottom,0px));box-shadow:0 -8px 20px rgba(11,31,58,.06)}
.st-nav>*{display:grid;justify-items:center;gap:2px;border:0;background:none;font:inherit;color:var(--navy);text-decoration:none;cursor:pointer;padding:4px 0}
.st-nav svg{width:22px;height:22px}
.st-nav span{font-size:.62rem;font-weight:700}
.st-nav .sh{color:var(--money-dk)}
.st-nav .mid i{width:54px;height:54px;margin-top:-26px;border-radius:18px;background:var(--red);color:#fff;display:grid;place-items:center;box-shadow:0 10px 20px rgba(240,68,32,.4);border:3px solid #fff;animation:stPulse 2.2s infinite}
.st-nav .mid i svg{width:26px;height:26px}
.st-nav .mid span{color:var(--red);font-weight:800;white-space:nowrap}
@keyframes stPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.st,.st-art svg,.st-nav .mid i,.st-stk.low{animation:none}}

.st-rail button[data-stmenu].on{background:var(--navy);color:#FFD84D}
.st-menu{position:absolute;right:56px;top:70px;z-index:5;background:#fff;border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.22);padding:6px;display:grid;min-width:160px;animation:stIn .2s ease}
.st-menu[hidden]{display:none}
.st-menu a{padding:9px 10px;border-radius:10px;font-size:.8rem;font-weight:700;color:var(--navy);text-decoration:none}
.st-menu a:hover{background:#FFF4D6}
.st-more h4 small{font-size:.7rem;color:var(--money-dk);font-weight:700}
.st-nav .wa i{width:26px;height:26px;border-radius:8px;background:#25D366;display:grid;place-items:center}
.st-nav .wa i svg{width:17px;height:17px}
.st-nav .wa span{color:#128C4A}

.st-more{margin:14px 12px 0}.st-more h4{font-size:.86rem;color:var(--navy);margin-bottom:8px;text-align:center}
.st-earn{margin:12px 12px 0;background:#fff;border:1px solid #F1E6CB;border-radius:16px;padding:10px 12px;display:grid;gap:8px}
.st-eh b{font-size:.8rem;color:var(--navy)}
.st-ec{display:flex;gap:6px}
.st-ec span{flex:1;min-width:0;white-space:nowrap;font-size:.64rem;font-weight:700;color:var(--muted);border-radius:10px;padding:6px 4px;text-align:center}
.st-ec b{font-size:.76rem}
.st-ec .g{background:#FFF4D0}.st-ec .g b{color:#A86A00}
.st-ec .m{background:var(--money-lt)}.st-ec .m b{color:var(--money-dk)}
.st-earn .logos{display:flex;gap:6px}
.st-earn .logos>*{flex:1;height:34px;border-radius:10px;display:grid;place-items:center;border:0;color:#fff;cursor:pointer;transition:transform .15s}
.st-earn .logos>*:hover{transform:translateY(-2px)}
.st-earn .logos svg{width:17px;height:17px}
.st-en{font-size:.62rem;color:var(--muted);text-align:center;margin:-2px 0 0}
.st-rail button[data-stfav] svg,.st-rail button[data-share] svg{animation:beat 1.2s ease-in-out infinite;transform-origin:center}
.st-rail button[data-share] svg{animation-delay:.6s}
.st-rail button[data-stfav] svg path{fill:#FFB3A8;stroke:#E5484D}
.st-rail button[data-stfav].on svg path{fill:#E5484D}
@keyframes beat{0%,40%,100%{transform:scale(1)}10%{transform:scale(1.22)}20%{transform:scale(.96)}30%{transform:scale(1.14)}}
@media(prefers-reduced-motion:reduce){.st-rail button[data-stfav] svg,.st-rail button[data-share] svg{animation:none}}

.st-ben.st-d{-webkit-line-clamp:4}.st-mini p.st-d{-webkit-line-clamp:2}.st-feat .st-info{margin-top:-6px}
.st-d{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.st-mini{display:flex;flex-direction:column;gap:3px;cursor:default}
.st-mi{border:0;padding:0;background:none;cursor:pointer;display:block}
.st-mini p.st-d{font-size:.64rem;line-height:1.35;color:var(--muted);margin:0}
.st-ma{display:flex;gap:4px;align-items:center;margin-top:auto;padding-top:4px}
.st-info{border:0;background:none;padding:0;font:inherit;font-size:.64rem;font-weight:800;color:var(--emerald);cursor:pointer;text-align:left;justify-self:start}
.st-ma .st-info{flex:1}
.st-mb{border:0;border-radius:8px;background:var(--red);color:#fff;font:inherit;font-size:.7rem;font-weight:800;padding:5px 12px;cursor:pointer;box-shadow:0 1px 2px rgba(14,23,38,.08)}
.st-mb:disabled{background:#ccc;box-shadow:none}
.st-dsc{position:absolute;inset:0;z-index:6;background:rgba(11,31,58,.5);display:flex;align-items:flex-end;animation:stIn .2s ease}
.st-dsc[hidden]{display:none}
.st-dp{width:100%;max-height:82%;background:#fff;border-radius:22px 22px 0 0;display:flex;flex-direction:column;padding:14px;gap:10px}
.st-dh{display:flex;gap:10px;align-items:center}
.st-dh .th{width:48px;height:48px;border-radius:12px;overflow:hidden;flex-shrink:0}.st-dh .th svg{width:100%;height:100%}
.st-dh div:nth-child(2){flex:1;min-width:0;display:grid;line-height:1.2}.st-dh b{font-size:.86rem;color:var(--navy)}.st-dh span{font-size:.7rem;color:var(--red);font-weight:700}
.st-dh button{width:30px;height:30px;border-radius:50%;border:0;background:#F2EEE3;cursor:pointer;flex-shrink:0}
.st-db{overflow-y:auto;font-size:.8rem;line-height:1.55;color:#334}
.st-db ul{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:4px;font-size:.74rem;font-weight:700;color:var(--navy)}
.st-dgo{width:100%;min-height:46px}

.st-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.st-mini{padding:5px;border-radius:12px;gap:2px}
.st-mini svg{border-radius:8px}
.st-mini b{font-size:.62rem;line-height:1.2;min-height:2.4em}
.st-mini span{font-size:.66rem}
.st-mini p.st-d{font-size:.56rem;line-height:1.3}
.st-ma{flex-direction:column;align-items:stretch;gap:4px}
.st-ma .st-info{font-size:.58rem;text-align:left}
.st-mb{width:100%;padding:5px 0;font-size:.68rem}

.si{padding:0 12px;display:grid;gap:10px}
.si-top{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:8px;background:#FAF8F4;margin:0 -12px;padding:10px 12px;border-bottom:1px solid #F1E6CB}
.si-top b{flex:1;text-align:center;color:var(--navy);font-size:.92rem}
.si-top button{width:36px;height:36px;border-radius:12px;border:1.5px solid var(--navy);background:#fff;color:var(--navy);display:grid;place-items:center;cursor:pointer}
.si-top button svg{width:20px;height:20px}
.si-top button[data-stshare]{background:var(--money);border-color:var(--money);color:#fff;animation:beat 1.6s ease-in-out infinite}
.si-hero{display:flex;gap:10px;align-items:center;background:linear-gradient(135deg,var(--emerald),#1F7A55 60%,#E9A93A);color:#fff;border-radius:16px;padding:12px}
.si-hero .st-av{width:46px;height:46px;font-size:.95rem;background:#fff;color:var(--emerald)}
.si-hero b{display:flex;align-items:center;gap:4px;font-size:.98rem}.si-hero small{font-size:.7rem;opacity:.9}
.si-about{background:#fff;border:1px solid #F1E6CB;border-radius:14px;padding:10px 12px;display:grid;gap:4px}
.si-about p{font-size:.76rem;line-height:1.5;color:#3A4558;margin:0;-webkit-line-clamp:2}
.si-about p.open{-webkit-line-clamp:unset;display:block}
.si-list{background:#fff;border:1px solid #F1E6CB;border-radius:14px;overflow:hidden}
.si-row{display:flex;align-items:center;gap:8px;padding:10px 10px;border-bottom:1px solid #F5EEDC;text-decoration:none;color:var(--navy);cursor:pointer;transition:background .15s}
.si-row:last-child{border-bottom:0}.si-row:hover,.si-row:active{background:#F6F3EC}
.si-ic{width:28px;height:28px;border-radius:8px;background:#E3F5EE;color:#2E9B76;display:grid;place-items:center;flex-shrink:0}.si-ic svg{width:15px;height:15px}
.si-row b{font-size:.76rem;flex-shrink:0}
.si-row em{flex:1;min-width:0;font-style:normal;text-align:right;font-size:.7rem;color:#5B667A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.si-row i{width:14px;color:#B9B2A0;flex-shrink:0}.si-row i svg{width:14px;height:14px}
.si-lihat{background:#E5484D;color:#fff;font-weight:800;padding:3px 10px;border-radius:6px;font-size:.68rem}
.si-g{display:grid;gap:8px}
.si-g a{display:flex;align-items:center;gap:10px;border-radius:14px;padding:10px 12px;text-decoration:none;font-weight:800;font-size:.82rem;color:#fff;box-shadow:0,0,.15)}
.si-g a>span{width:30px;height:30px;border-radius:50%;background:#fff;display:grid;place-items:center;flex-shrink:0}.si-g a>span svg{width:18px;height:18px}
.si-g a i{margin-left:auto;width:16px}.si-g a i svg{width:16px;height:16px}
.si-gr{background:linear-gradient(120deg,#E53935,#B71C1C)}
.si-gm{background:linear-gradient(120deg,#1A73E8,#0B57D0)}
.si-mitra{background:linear-gradient(160deg,#F7F1E1,#FFFFFF 70%);border:1.5px solid #F5C842;border-radius:16px;padding:12px;display:grid;gap:10px;box-shadow:0 8px 20px rgba(245,183,49,.18)}
.si-mh b{display:block;color:var(--navy);font-size:.88rem}.si-mh small{font-size:.7rem;color:var(--muted)}
.si-mb{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.si-mb button{border:0;border-radius:12px;padding:10px 6px;display:grid;gap:2px;cursor:pointer;font:inherit;color:#fff;box-shadow:0,0,.18);transition:transform .1s}
.si-mb button:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.18)}
.si-mb b{font-size:.78rem}.si-mb small{font-size:.6rem;opacity:.95;font-weight:700}
.si-drop{background:#2E7D32}.si-res{background:#F2A93B}
.si-cats{display:flex;gap:6px;flex-wrap:wrap}.si-cats span{background:#F2EEE3;color:#6B7280;font-size:.66rem;font-weight:700;padding:4px 9px;border-radius:999px}
.si-login{background:#fff;border:1px solid #F1E6CB;border-radius:14px;padding:12px;display:grid;gap:8px}
.si-login b{color:#3A4558;font-size:.86rem}
.si-lg{justify-self:start;background:#B3261E;color:#fff;font-weight:800;font-size:.84rem;padding:10px 18px;border-radius:10px;text-decoration:none;box-shadow:0 1px 2px rgba(14,23,38,.08)}
.si-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.si-btns button{border:0;border-radius:8px;padding:9px 6px;font:inherit;font-size:.7rem;font-weight:800;color:#fff;cursor:pointer;box-shadow:0,0,.15)}
.si-btns .c1{background:#B3261E}.si-btns .c2{background:#5BC0B0}.si-btns .c3{background:#4AA3BA}.si-btns .c4{background:#F2B035;color:#1E2533}.si-btns .w{grid-column:1/-1}
.si-ex{font-size:.6rem;color:var(--muted);text-align:center;margin:0}

.si-g a>div{display:grid;line-height:1.2}.si-g a>div b{font-size:.84rem}.si-g a>div small{font-size:.62rem;font-weight:600;opacity:.9}
.si-mb button{position:relative;padding:12px 8px 10px;justify-items:center;text-align:center;gap:3px;overflow:hidden}
.si-mb button::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-100%);animation:siShine 3.2s infinite}
.si-res::after{animation-delay:1.6s!important}
@keyframes siShine{60%,100%{transform:translateX(100%)}}
.si-bi{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.95);display:grid;place-items:center;box-shadow:0 3px 8px rgba(0,0,0,.15)}
.si-bi svg{width:21px;height:21px}
.si-drop .si-bi{color:#2E7D32}.si-res .si-bi{color:#C77A0A}
.si-mb b{font-size:.8rem}.si-mb small{font-size:.6rem;opacity:.95}
.si-mb em{font-style:normal;font-size:.7rem;font-weight:800;background:rgba(0,0,0,.18);padding:2px 8px;border-radius:999px;margin-top:2px}
.si-drop{background:linear-gradient(160deg,#3FA34D,#256B2A)}.si-res{background:linear-gradient(160deg,#F7B84B,#E08E12)}
.si-lg{display:flex;align-items:center;gap:10px;background:linear-gradient(120deg,#C62828,#8E1B14);color:#fff;text-decoration:none;border-radius:12px;padding:8px 12px;box-shadow:0 1px 2px rgba(14,23,38,.08);justify-self:stretch}
.si-lg .si-bi{width:32px;height:32px;color:#B3261E}.si-lg .si-bi svg{width:18px;height:18px}
.si-lg div{display:grid;line-height:1.15}.si-lg small{font-size:.6rem;opacity:.85;font-weight:600}.si-lg b{font-size:.86rem}
.si-lg i{margin-left:auto;width:16px}.si-lg i svg{width:16px;height:16px}
.si-btns{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.si-btns button{display:grid;justify-items:center;gap:5px;padding:10px 4px 9px;border-radius:12px;transition:transform .1s}
.si-btns button:active{transform:translateY(2px)}
.si-btns b{font-size:.62rem;line-height:1.15}
.si-hi{width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.95);display:grid;place-items:center}
.si-hi svg{width:18px;height:18px}
.si-btns .c1 .si-hi{color:#B3261E}.si-btns .c2 .si-hi{color:#2E9B8A}.si-btns .c3 .si-hi{color:#2F7F96}.si-btns .c4 .si-hi{color:#B87800}
.si-btns .w{grid-column:1/-1;display:flex;justify-content:center;align-items:center;gap:10px;padding:8px}
.si-btns .w b{font-size:.76rem}
@media(prefers-reduced-motion:reduce){.si-mb button::after{animation:none}}

.si-pay{position:relative}
.si-vf{display:inline-flex;align-items:center;gap:4px;background:#fff;color:#0E7C3A;font-size:.62rem;font-weight:800;padding:3px 8px 3px 5px;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.12);animation:vfGlow 2.4s ease-in-out infinite}
@keyframes vfGlow{0%,100%{box-shadow:0 0 0 0 rgba(18,161,80,.45)}50%{box-shadow:0 0 0 5px rgba(18,161,80,0)}}
.si-vtag{display:inline-flex;align-items:center;gap:4px;margin-top:4px;border:0;background:#fff;color:#0E7C3A;font:inherit;font-size:.62rem;font-weight:800;padding:3px 8px 3px 5px;border-radius:999px;cursor:pointer;animation:vfGlow 2.4s ease-in-out infinite}
.si-hero>div{display:grid;justify-items:start}
.vf-h{display:flex;align-items:center;gap:10px}
.vf-ic{width:44px;height:44px;border-radius:14px;background:#E9F4EE;display:grid;place-items:center;flex-shrink:0}.vf-ic svg{width:28px;height:28px}
.vf-h div{flex:1;display:grid;line-height:1.2}.vf-h small{font-size:.66rem;color:var(--muted);font-weight:700}.vf-h b{font-size:.95rem;color:#0E7C3A}
.vf-h button{width:30px;height:30px;border-radius:50%;border:0;background:#F2EEE3;cursor:pointer}
.vf-lead{margin:0 0 8px;font-size:.8rem}
.vf-l{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.vf-l li{display:flex;gap:8px;align-items:flex-start}
.vf-l i{width:20px;height:20px;border-radius:50%;background:var(--money);color:#fff;font-style:normal;font-weight:900;font-size:.7rem;display:grid;place-items:center;flex-shrink:0;margin-top:1px}
.vf-l div{display:grid;line-height:1.3}.vf-l b{font-size:.78rem;color:var(--navy)}.vf-l small{font-size:.68rem;color:var(--muted)}
.vf-pm{margin-top:10px;display:grid;gap:4px}.vf-pm small{font-size:.64rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.vf-pm div{display:flex;flex-wrap:wrap;gap:5px}.vf-pm span{font-size:.68rem;font-weight:800;color:var(--navy);background:#F2EEE3;padding:4px 9px;border-radius:8px}
@media(prefers-reduced-motion:reduce){.si-vf,.si-vtag{animation:none}}

.st-dp.so{background:radial-gradient(120% 60% at 100% 0%,rgba(255,216,77,.55),transparent 60%),radial-gradient(90% 60% at 0% 100%,rgba(18,161,80,.18),transparent 60%),linear-gradient(180deg,#FFF9E8,#FFF1D0);gap:12px}
.so-h{display:flex;align-items:center;gap:10px}
.so-hi{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--emerald),var(--money));color:#fff;display:grid;place-items:center;box-shadow:0 6px 14px rgba(12,74,62,.3);flex-shrink:0}.so-hi svg{width:22px;height:22px}
.so-h div{flex:1;display:grid;line-height:1.2}.so-h b{font-size:1rem;color:var(--navy)}.so-h small{font-size:.68rem;color:var(--muted);font-weight:600}
.so-h button{width:30px;height:30px;border-radius:50%;border:0;background:#fff;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.1)}
.so-l{display:grid;gap:7px;overflow-y:auto}
.so-o{display:flex;align-items:center;gap:10px;border:1.5px solid #F1E2B8;background:#fff;border-radius:14px;padding:9px 10px;cursor:pointer;font:inherit;text-align:left;transition:transform .12s,border-color .15s,box-shadow .15s}
.so-o:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.08)}
.so-o.on{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
.so-ic{width:38px;height:38px;border-radius:12px;background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c);display:grid;place-items:center;flex-shrink:0}.so-ic svg{width:21px;height:21px}
.so-o.on .so-ic{background:var(--c);color:#fff}
.so-o div{flex:1;min-width:0;display:grid;line-height:1.25}
.so-o b{font-size:.84rem;color:var(--navy)}.so-o small{font-size:.66rem;color:var(--muted)}
.so-o em{font-style:normal;font-size:.62rem;font-weight:800;color:var(--c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.so-o i{width:22px;height:22px;border-radius:50%;font-style:normal;font-weight:900;font-size:.72rem;display:grid;place-items:center;border:2px solid #E8DDBF;color:#fff;flex-shrink:0}
.so-o.on i{background:var(--c);border-color:var(--c)}
.so-reset{border:1.5px dashed #C9B98A;background:rgba(255,255,255,.6);border-radius:12px;padding:10px;font:inherit;font-weight:800;font-size:.78rem;color:var(--navy);cursor:pointer}
.st-more.flash .st-grid{animation:soFlash .9s ease}
@keyframes soFlash{0%{opacity:.3;transform:translateY(8px)}100%{opacity:1;transform:none}}

.pc .ds{font-size:.74rem;line-height:1.4;color:var(--muted);margin:4px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc .ds-more{align-self:flex-start;border:0;background:none;padding:2px 0;font:inherit;font-size:.72rem;font-weight:800;color:var(--emerald);cursor:pointer}
.pc .ds-more:hover{text-decoration:underline}
@media(min-width:1040px){.grid.g6{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
 .g6 .pc .body{padding:9px 10px 10px}.g6 .pc .nm{font-size:.8rem}.g6 .pc .price{font-size:.95rem}
 .g6 .pc .acts{grid-template-columns:1fr;gap:5px}.g6 .pc .acts .btn{min-height:36px;font-size:.78rem}}
.dsc-m{background:#fff;width:min(420px,100%);max-height:88vh;border-radius:22px 22px 0 0;padding:16px;display:flex;flex-direction:column;gap:12px;animation:stIn .25s ease}
@media(min-width:640px){.dsc-m{border-radius:22px}}
.dsc-a{display:grid;grid-template-columns:1fr 1.4fr;gap:8px}.dsc-a .btn{min-height:46px}

.rx{margin-top:22px;display:grid;gap:14px}
.rx-ctl{background:#fff;border:1px solid var(--line);border-radius:20px;padding:14px;display:grid;gap:12px;box-shadow:0 8px 24px rgba(11,31,58,.05)}
.rx-sl{display:grid;gap:6px;font-weight:700;color:var(--navy);font-size:.9rem}.rx-sl b{color:var(--money-dk);font-size:1.1rem}
.rx-sl input{width:100%;accent-color:var(--money)}
.rx-ty{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.rx-ty>span{font-size:.8rem;font-weight:700;color:var(--muted);margin-right:2px}
.rx-ty button{border:1.5px solid var(--line);background:var(--bg);border-radius:999px;padding:7px 12px;font:inherit;font-size:.8rem;font-weight:800;color:var(--navy);cursor:pointer}
.rx-ty button.on{background:var(--money);border-color:var(--money);color:#fff;box-shadow:0 1px 2px rgba(14,23,38,.08)}
.rx-go{justify-self:start}
@media(min-width:760px){.rx-ctl{grid-template-columns:1.1fr 1.6fr auto;align-items:center}}
.rx-boxes{display:grid;gap:14px}
@media(min-width:760px){.rx-boxes{grid-template-columns:1fr 1fr}}
.rx-b{border-radius:22px;padding:16px;display:grid;gap:10px;border:1px solid var(--line);background:#fff}
.rx-b.hi{background:linear-gradient(160deg,#0C4A3E,#0F6B4E 55%,#1F8B5C);color:#fff;border:0;box-shadow:0 18px 40px rgba(12,74,62,.3)}
.rx-h{display:flex;justify-content:space-between;align-items:center}.rx-h b{font-size:1rem}
.rx-h span{font-size:.7rem;font-weight:800;padding:4px 10px;border-radius:999px;background:var(--bg);color:var(--muted)}
.rx-b.hi .rx-h span{background:var(--gold);color:var(--navy)}
.rx-b canvas{width:100%;height:auto;aspect-ratio:640/380;border-radius:14px;background:var(--bg)}
.rx-b.hi canvas{background:rgba(255,255,255,.07)}
.rx-st{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.rx-st div{background:var(--bg);border-radius:12px;padding:8px;text-align:center;display:grid}
.rx-b.hi .rx-st div{background:rgba(255,255,255,.1)}
.rx-st small{font-size:.66rem;font-weight:700;opacity:.75}.rx-st b{font-family:var(--f-display);font-size:1.1rem;font-variant-numeric:tabular-nums}
.rx-m{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.rx-m small{font-size:.8rem;font-weight:700;opacity:.8}
.rx-m b{font-family:var(--f-display);font-size:1.7rem;font-variant-numeric:tabular-nums}
.rx-b.hi .rx-m b{color:var(--gold)}
.rx-m em{font-style:normal;margin-left:auto;background:var(--gold);color:var(--navy);font-weight:900;font-size:.8rem;padding:5px 10px;border-radius:999px;animation:live 1.6s infinite}

.pc .acts.ia{grid-template-columns:1fr 1fr!important;gap:8px}
.pc .acts.ia .btn{min-height:42px;padding:0;border-radius:14px}
.ib-sh svg{width:22px;height:22px;animation:beat 1.3s ease-in-out infinite;transform-origin:center}
.ib-buy svg{transition:transform .2s}.ib-buy:hover svg{transform:translateX(2px) rotate(-6deg)}
@media(prefers-reduced-motion:reduce){.ib-sh svg{animation:none}}

.fq{column-gap:10px}
@media(min-width:700px){.fq{columns:2}}
@media(min-width:1040px){.fq{columns:3}}
.fq-i{margin:0 0 10px!important;break-inside:avoid;display:block;border-radius:16px!important;transition:box-shadow .2s,border-color .2s}
.fq-i:hover{border-color:#F3D27A;box-shadow:0 8px 20px rgba(217,168,20,.12)}
.fq-i[open]{border-color:var(--money);box-shadow:0 10px 24px rgba(18,161,80,.12)}
.fq-i summary{align-items:center;justify-content:flex-start!important;padding:14px 14px!important;gap:10px!important}
.fq-i summary b{flex:1;font-size:.9rem;line-height:1.3}
.fq-q{width:30px;height:30px;border-radius:10px;background:linear-gradient(135deg,#FFE47A,#F5B731);color:var(--navy);font-weight:900;display:grid;place-items:center;flex-shrink:0;box-shadow:0 1px 2px rgba(14,23,38,.08)}
.fq-i[open] .fq-q{background:linear-gradient(135deg,var(--money),var(--money-dk));color:#fff;box-shadow:0 1px 2px rgba(14,23,38,.08)}
.fq-a{display:flex;gap:10px;padding:0 14px 14px!important;align-items:flex-start}
.fq-ai{width:30px;height:30px;border-radius:10px;background:var(--money-lt);color:var(--money-dk);font-weight:900;display:grid;place-items:center;flex-shrink:0}
.fq-a p{margin:4px 0 0;font-size:.86rem;line-height:1.5;color:#4A5568}

.fq-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:620px;margin:0 auto 16px}
.fq-tabs button{border:1.5px solid var(--line);background:#fff;border-radius:16px;padding:10px 12px;display:grid;gap:2px;cursor:pointer;font:inherit;text-align:center;transition:.15s}
.fq-tabs b{font-size:.92rem;color:var(--navy)}.fq-tabs small{font-size:.68rem;color:var(--muted);font-weight:600}
.fq-tabs button.on{background:linear-gradient(135deg,var(--emerald),var(--money));border-color:transparent;box-shadow:0 6px 16px rgba(18,161,80,.3)}
.fq-tabs button.on b{color:#fff}.fq-tabs button.on small{color:#D6F5E2}
.fq[hidden]{display:none}

.rx-ctl{display:grid;gap:14px}
@media(min-width:760px){.rx-ctl{grid-template-columns:1.6fr 1fr!important;align-items:center}}
.rx-lb{display:block;font-size:.78rem;font-weight:800;color:var(--muted);letter-spacing:.02em;margin-bottom:6px;width:100%}
.rx-ty{display:grid!important;grid-template-columns:repeat(3,1fr);gap:8px!important}
.rx-ty .rx-lb{grid-column:1/-1;margin:0}
.rx-ty button{display:grid;justify-items:center;gap:2px;border-radius:16px!important;padding:10px 6px!important;transition:transform .15s}
.rx-ty button i{font-style:normal;font-size:1.6rem;line-height:1}
.rx-ty button b{font-size:.76rem}
.rx-ty button.on{transform:translateY(-2px)}
.rx-sl b{font-size:1.3rem}
.rx-h span{background:var(--gold)!important;color:var(--navy)!important;font-weight:900!important;font-size:.8rem!important;animation:live 1.6s infinite}
.rx-ch{display:flex;flex-wrap:wrap;gap:6px}
.rx-ch span{font-size:.74rem;font-weight:700;background:var(--bg);border-radius:999px;padding:5px 10px}
.rx-b.hi .rx-ch span{background:rgba(255,255,255,.12)}
.rx-ch b{font-variant-numeric:tabular-nums}
.rx-m b{font-size:2rem!important}
.rx-leg{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;font-size:.76rem;font-weight:700;color:var(--muted)}
.rx-leg span{display:flex;align-items:center;gap:6px}.rx-leg i{width:12px;height:12px;border-radius:50%}
.rx-leg .g{background:#0E8A55}.rx-leg .w{background:#fff;border:2px solid #0E8A55}.rx-leg .y{background:#FFD84D}

/* rx compact */
.rx{max-width:880px;margin-inline:auto;gap:10px!important}
.rx-ctl{padding:10px 12px!important;border-radius:16px!important;gap:10px!important}
@media(min-width:760px){.rx-ctl{grid-template-columns:auto 1fr!important}}
.rx-ty{display:flex!important;gap:6px!important;align-items:center;flex-wrap:wrap}
.rx-ty .rx-lb{width:auto;margin:0 4px 0 0}
.rx-ty button{display:inline-flex!important;align-items:center;gap:5px!important;padding:6px 10px!important;border-radius:999px!important;transform:none!important}
.rx-ty button i{font-size:1rem!important}.rx-ty button b{font-size:.74rem!important}
.rx-sl{display:flex!important;align-items:center;gap:10px!important}
.rx-sl .rx-lb{margin:0;white-space:nowrap;width:auto}.rx-sl b{font-size:1rem!important}
.rx-sl input{flex:1;min-width:90px}
.rx-boxes{gap:10px!important}
.rx-b{padding:10px 12px!important;border-radius:16px!important;gap:6px!important}
.rx-h b{font-size:.86rem!important}.rx-h span{font-size:.7rem!important;padding:3px 9px!important}
.rx-b canvas{aspect-ratio:640/250!important;border-radius:12px!important}
.rx-m{gap:6px!important}.rx-m small{font-size:.72rem!important}.rx-m b{font-size:1.35rem!important}
.rx-ch{gap:4px!important}.rx-ch span{font-size:.66rem!important;padding:3px 8px!important}
.rx-b.hi{box-shadow:0 10px 26px rgba(12,74,62,.25)!important}
.rx-leg{font-size:.68rem!important;gap:10px!important}
.rx-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}

.pc{position:relative}
.pc .tag-ex{right:auto;left:8px}
.pc-ov{position:absolute;top:8px;right:8px;z-index:2;display:flex;gap:6px}
.pc-ov .ib{width:34px;height:34px;border-radius:50%;border:2px solid #fff;display:grid;place-items:center;cursor:pointer;padding:0;box-shadow:0 4px 10px rgba(11,31,58,.22);transition:transform .15s;text-decoration:none}
.pc-ov .ib:hover{transform:scale(1.1)}.pc-ov .ib:active{transform:scale(.94)}
.pc-ov .ib svg{width:17px!important;height:17px!important}
.pc-ov .ib-sh{background:var(--money)}.pc-ov .ib-buy{background:var(--red)}
.pc-ov .ib-no{width:auto;padding:0 10px;border-radius:999px;background:#fff;color:var(--muted);font-size:.66rem;font-weight:800}

/* Booster OPC */
.bo{position:relative}
.bo-btn{display:flex;align-items:center;gap:6px;border:1.5px solid rgba(255,216,77,.55);background:linear-gradient(135deg,rgba(255,216,77,.18),rgba(18,161,80,.18));color:#fff;border-radius:999px;padding:6px 12px;font:inherit;font-size:.8rem;cursor:pointer;min-height:36px;white-space:nowrap}
.bo-btn b{font-weight:800}.bo-btn b em{font-style:normal;color:var(--gold)}.bo-btn i{font-style:normal;font-size:.7rem;opacity:.8}
.bo-btn.on,.bo-btn[aria-expanded="true"]{background:var(--gold);color:var(--navy);border-color:var(--gold)}.bo-btn.on b em,.bo-btn[aria-expanded="true"] b em{color:var(--navy)}
.bo-r{display:inline-block;animation:boR 2.4s ease-in-out infinite}
@keyframes boR{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px) rotate(-8deg)}}
.bo-menu{position:absolute;top:calc(100% + 10px);right:0;width:280px;background:#fff;border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.3);padding:8px;display:grid;gap:2px;z-index:60;animation:stIn .2s ease}
.bo-menu[hidden]{display:none}
.bo-menu>small{font-size:.66rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:6px 10px 4px}
.bo-menu a{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:12px;text-decoration:none;color:var(--navy)}
.bo-menu a:hover{background:#FFF6DA}
.bo-menu a>span{width:36px;height:36px;border-radius:11px;background:color-mix(in srgb,var(--c) 14%,#fff);display:grid;place-items:center;font-size:1.1rem;flex-shrink:0}
.bo-menu a div{display:grid;line-height:1.2}.bo-menu a b{font-size:.86rem}.bo-menu a em{font-style:normal;font-size:.7rem;color:var(--muted)}
@media(max-width:640px){.bo-btn b{display:none}.bo-btn{padding:6px 9px}.bo-btn i{display:none}.bo-menu{position:fixed;top:64px;left:12px;right:12px;width:auto}}
.tl-hero{background:radial-gradient(70% 90% at 100% 0%,color-mix(in srgb,var(--tc) 45%,transparent),transparent 60%),linear-gradient(160deg,var(--navy),#0F3A4A 60%,var(--emerald));color:#fff;padding:34px 0 30px}
.tl-hero .wrap{display:grid;gap:8px}
.tl-ey{justify-self:start;font-size:.72rem;font-weight:800;background:rgba(255,255,255,.12);padding:5px 12px;border-radius:999px}
.tl-hero h1{font-size:clamp(1.7rem,6vw,2.8rem);line-height:1.1}.tl-hero h1 em{font-style:normal;color:var(--gold)}
.tl-hero p{color:#C9D6E8;max-width:560px}
.tl-nav{display:flex;gap:6px;overflow-x:auto;margin-bottom:16px;scrollbar-width:none}
.tl-nav a{flex-shrink:0;padding:8px 14px;border-radius:999px;background:#fff;border:1.5px solid var(--line);text-decoration:none;font-weight:800;font-size:.82rem;color:var(--navy)}
.tl-nav a.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.tl-two{display:grid;gap:14px}@media(min-width:860px){.tl-two{grid-template-columns:1fr 1fr}}
.tl-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px;display:grid;gap:12px;box-shadow:0 8px 24px rgba(11,31,58,.05);align-content:start}
.tl-card h2{font-size:1.1rem}
.tl-card label{display:grid;gap:6px;font-size:.84rem;font-weight:700;color:var(--navy)}
.tl-card label b{color:var(--money-dk)}
.tl-card select,.tl-card input[type=number],.tl-card textarea{font:inherit;font-size:.86rem;border:1.5px solid var(--line);border-radius:12px;padding:10px;background:var(--bg);width:100%}
.tl-card input[type=range]{width:100%;accent-color:var(--money)}
.tl-card textarea{resize:vertical;line-height:1.45}
.tl-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px}
.tl-out div{background:var(--bg);border-radius:12px;padding:10px;display:grid;gap:2px}
.tl-out small{font-size:.66rem;font-weight:700;color:var(--muted)}.tl-out b{font-family:var(--f-display);font-size:1.05rem;color:var(--navy)}
.tl-out .win{background:linear-gradient(135deg,var(--money),var(--money-dk))}.tl-out .win small{color:#D6F5E2}.tl-out .win b{color:#fff;font-size:1.2rem}
.tl-chips{display:flex;gap:6px}.tl-chips button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font:inherit;font-size:.78rem;font-weight:800;cursor:pointer}
.tl-chips button.on{background:var(--money);border-color:var(--money);color:#fff}
.tl-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tl-feat{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px}@media(min-width:860px){.tl-feat{grid-template-columns:repeat(4,1fr)}}
.tl-feat div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;display:grid;gap:3px}
.tl-feat span{font-size:1.4rem}.tl-feat b{font-size:.86rem;color:var(--navy)}.tl-feat small{font-size:.72rem;color:var(--muted)}
.tl-bar{height:10px;border-radius:99px;background:var(--bg);overflow:hidden}.tl-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--money));transition:width .3s}
.tl-pc{color:var(--money-dk)}
.tl-ck{display:flex!important;align-items:center;gap:10px!important;padding:8px 10px;border-radius:12px;background:var(--bg);cursor:pointer;font-weight:600!important}
.tl-ck input{width:20px;height:20px;accent-color:var(--money)}
@media(max-width:480px){.top .wm{font-size:1rem!important;letter-spacing:-.03em}.hd-cart{display:none!important}.bo-btn{min-height:34px;padding:5px 8px}}
.tl-card label{display:flex!important;flex-wrap:wrap;align-items:baseline;gap:6px 5px!important}.tl-card label>select,.tl-card label>input:not([type=checkbox]),.tl-card label>textarea{flex-basis:100%}

/* Affiliate vs SukaLOKAL */
.avs{max-width:980px;margin:20px auto 0;display:grid;gap:12px}
.av-ctl{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;display:grid;gap:10px}
@media(min-width:860px){.av-ctl{grid-template-columns:1.2fr auto;align-items:center}.av-sc{grid-column:1/-1}}
.av-sl{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.84rem;color:var(--navy);flex-wrap:wrap}.av-sl b{color:var(--money-dk);font-size:1rem}.av-sl input{flex:1;min-width:140px;accent-color:var(--money)}
.av-pr,.av-sc{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.av-pr span{font-size:.78rem;font-weight:700;color:var(--muted);margin-right:2px}
.av-pr button,.av-sc button{border:1.5px solid var(--line);background:var(--bg);border-radius:999px;padding:6px 12px;font:inherit;font-size:.76rem;font-weight:800;color:var(--navy);cursor:pointer}
.av-pr button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.av-sc button{flex:1;min-width:150px}.av-sc button.on{background:var(--gold);border-color:var(--gold)}
.av-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}@media(min-width:860px){.av-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.av-c{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:12px;display:grid;gap:6px;align-content:start;transition:border-color .3s,box-shadow .3s,transform .3s;position:relative}
.av-c.av-pr,.av-c.av-ds{background:linear-gradient(170deg,#F2FBF5,#fff 60%)}
.av-c.win{border-color:var(--money);box-shadow:0 10px 26px rgba(18,161,80,.22);transform:translateY(-3px)}
.av-c.win::after{content:"Terbesar di simulasi ini";position:absolute;top:-10px;right:10px;background:var(--gold);color:var(--navy);font-size:.62rem;font-weight:900;padding:3px 8px;border-radius:999px}
.av-h{display:flex;align-items:center;gap:8px}.av-h span{width:30px;height:30px;border-radius:10px;background:color-mix(in srgb,var(--c) 14%,#fff);display:grid;place-items:center;flex-shrink:0}
.av-h b{font-size:.8rem;line-height:1.2;color:var(--navy)}
.av-m small{display:block;font-size:.64rem;font-weight:700;color:var(--muted)}.av-m b{font-family:var(--f-display);font-size:1.3rem;color:var(--c);font-variant-numeric:tabular-nums}
.av-bar{height:8px;border-radius:99px;background:var(--bg);overflow:hidden}.av-bar i{display:block;height:100%;width:0;background:var(--c);border-radius:99px}
.av-how{font-size:.64rem;color:var(--muted);min-height:2.4em;line-height:1.25}
.av-c ul{list-style:none;margin:2px 0 0;padding:6px 0 0;border-top:1px dashed var(--line);display:grid;gap:3px}
.av-c li{font-size:.68rem;line-height:1.3}.av-c li.y{color:var(--money-dk);font-weight:700}.av-c li.n{color:#8A94A6}
@media(max-width:480px){.av-m b{font-size:1.1rem}.av-h b{font-size:.74rem}}
.av-note{font-size:.72rem;line-height:1.5;color:#5B4A12;background:#F7F1E1;border:1px solid #F3D27A;border-radius:12px;padding:10px 12px}.av-note b{display:block;color:#7A5A00}.av-note span{display:block;margin-top:4px;color:var(--muted)}

.ft-soon{display:flex;flex-wrap:wrap;align-items:center;gap:12px;background:linear-gradient(135deg,#F3ECFF,#F6F3EC);border:1.5px solid #D8C4FF;border-radius:18px;padding:14px 16px}
.ft-soon>span{font-size:1.8rem}.ft-soon div{flex:1;min-width:200px;display:grid;gap:2px}.ft-soon b{color:#5B21B6;font-size:1rem}.ft-soon small{color:var(--muted);font-size:.8rem}
.ft-h{font-size:1.1rem;margin:22px 0 10px}
.ft-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}@media(min-width:860px){.ft-steps{grid-template-columns:repeat(4,1fr)}}
.ft-steps div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;display:grid;gap:4px}
.ft-steps i{font-style:normal;width:30px;height:30px;border-radius:50%;background:#3559C7;color:#fff;font-weight:900;display:grid;place-items:center}
.ft-steps b{color:var(--navy)}.ft-steps small{font-size:.76rem;color:var(--muted)}

/* Cara Kerja */
.ck-btn.on{background:var(--gold);color:var(--navy);box-shadow:0 1px 2px rgba(14,23,38,.08)}
.ck-hero{background:radial-gradient(60% 80% at 90% 0%,rgba(255,216,77,.3),transparent 60%),linear-gradient(160deg,var(--navy),#0F3A4A 55%,var(--emerald));color:#fff;padding:26px 0 30px;text-align:center}
.ck-hero .wrap{display:grid;gap:12px;justify-items:center}
.ck-lens{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:rgba(255,255,255,.1);padding:5px;border-radius:18px;width:min(520px,100%)}
.ck-lens button{border:0;border-radius:14px;padding:9px 6px;background:none;color:#C9D6E8;font:inherit;font-weight:800;font-size:.86rem;cursor:pointer;display:grid;gap:1px}
.ck-lens small{font-size:.62rem;font-weight:600;opacity:.8}
.ck-lens button.on{background:var(--gold);color:var(--navy)}
.ck-hero h1{font-size:clamp(1.8rem,7vw,3.2rem);line-height:1.08}.ck-hero h1 em{font-style:normal;color:var(--gold)}
.ck-hero p{color:#D6E2F0;max-width:560px}
.ck-flow{display:grid;gap:14px;margin-top:18px;max-width:900px;margin-inline:auto}@media(min-width:860px){.ck-flow{grid-template-columns:1.1fr 1fr;align-items:center}}
.ck-stage{position:relative;background:linear-gradient(170deg,#FFF9E8,#fff);border:1px solid var(--line);border-radius:22px;padding:16px 12px;display:grid;justify-items:center;gap:0}
.ck-n{display:flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--line);border-radius:999px;padding:6px 12px 6px 6px;opacity:.35;transform:scale(.94);transition:.35s;position:relative}
.ck-n span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:900;color:#fff;background:#8A94A6;flex-shrink:0}
.ck-n b{font-size:.8rem;color:var(--navy)}
.ck-n.on{opacity:1;transform:none}.ck-n.cur{box-shadow:0 0 0 5px rgba(255,216,77,.55);border-color:var(--gold)}
.n-brand span{background:var(--navy)}.n-a span{background:#2563EB}.n-b span{background:#E5484D}.n-c span{background:var(--money)}.n-buy span{background:var(--red)}
.ck-w{font-style:normal;font-size:.7rem;font-weight:900;background:var(--money-lt);color:var(--money-dk);padding:2px 8px;border-radius:999px;margin-left:2px}.ck-w.z{background:#FDECEC;color:#C9320F}
.ck-l{width:3px;height:22px;background:var(--line);transition:.4s}.ck-stage.s1 .l1,.ck-stage.s4 .l2{background:linear-gradient(var(--gold),var(--money))}
.ck-fork{position:relative;width:min(300px,80%);height:22px}.ck-fork i{position:absolute;top:0;width:50%;height:100%;border-top:3px solid var(--line);transition:.4s}
.ck-fork .fl{left:0;border-left:3px solid var(--line);border-radius:12px 0 0 0}.ck-fork .fr{right:0;border-right:3px solid var(--line);border-radius:0 12px 0 0}
.ck-stage.s2 .fl{border-color:#E5484D}.ck-stage.s3 .fr{border-color:var(--money)}
.ck-row2{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.ck-row2 .ck-n{flex-direction:column;border-radius:16px;padding:8px 10px;gap:3px;min-width:110px}
.ck-split{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px;width:min(320px,100%);opacity:0;transform:translateY(6px);transition:.4s}
.ck-stage.s4 .ck-split{opacity:1;transform:none}
.ck-split div{border-radius:12px;padding:6px 8px;text-align:center;display:grid}.ck-split small{font-size:.62rem;font-weight:700;color:var(--muted)}.ck-split b{font-family:var(--f-display)}
.ck-split .sc{background:var(--money-lt)}.ck-split .sc b{color:var(--money-dk)}.ck-split .sm{background:#EEF2F8}.ck-split .sm b{color:var(--navy)}
.ck-pops{position:absolute;inset:0;pointer-events:none}
.ck-pops .pop{position:absolute;left:50%;top:40%;transform:translateX(-50%);font-family:var(--f-display);font-weight:900;font-size:1.3rem;padding:4px 12px;border-radius:999px;background:var(--gold);color:var(--navy);box-shadow:0 8px 20px rgba(0,0,0,.18);opacity:0;animation:ckPop 1.8s ease forwards}
.ck-pops .p-C{background:var(--money);color:#fff}.ck-pops .p-T{background:var(--navy);color:#fff;top:58%}
@keyframes ckPop{0%{opacity:0;transform:translate(-50%,20px) scale(.6)}20%{opacity:1;transform:translate(-50%,0) scale(1.1)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-40px) scale(1)}}
.ck-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px;display:grid;gap:10px;box-shadow:0 10px 26px rgba(11,31,58,.06)}
.ck-dots{display:flex;gap:6px}.ck-dots button{flex:1;height:6px;border:0;border-radius:99px;background:var(--line);cursor:pointer;padding:0}.ck-dots button.on{background:var(--money)}
.ck-no{font-size:.68rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
#ckTxt h3{font-size:1.2rem;color:var(--navy);margin:4px 0}#ckTxt p{font-size:.92rem;line-height:1.5;color:#3A4558;margin:0}
.ck-pay{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.ck-pay span{font-size:.74rem;background:#FFF4D0;border-radius:10px;padding:5px 9px}.ck-pay b{margin-right:4px;color:#A86A00}
.ck-pay .p-C b{color:var(--money-dk)}.ck-pay .p-T b{color:var(--navy)}
.ck-nav{display:grid;grid-template-columns:44px 1fr 44px;gap:8px}.ck-nav button{height:42px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);font:inherit;font-weight:800;cursor:pointer;color:var(--navy);font-size:.9rem}
.ck-em{font-style:normal;color:var(--money-dk)}
.ck-pk{display:grid;gap:10px;margin-top:16px;max-width:820px;margin-inline:auto}@media(min-width:760px){.ck-pk{grid-template-columns:1fr 1fr}}
.ck-pk>div{border-radius:20px;padding:16px;display:grid;gap:6px;background:#fff;border:2px solid}
.ck-pk .pk1{border-color:#BFD3F5}.ck-pk .pk2{border-color:#9EE2B8}
.ck-pk span{font-size:1.8rem}.ck-pk b{color:var(--navy)}.ck-pk p{margin:0;font-size:.9rem}.ck-pk small{font-size:.76rem;color:var(--muted);background:var(--bg);border-radius:10px;padding:6px 8px}
.ck-who{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px}@media(min-width:860px){.ck-who{grid-template-columns:repeat(4,1fr)}}
.ck-who div{background:#fff;border:1px solid var(--line);border-top:4px solid var(--c);border-radius:16px;padding:12px;display:grid;gap:3px}
.ck-who span{width:30px;height:30px;border-radius:50%;background:var(--c);color:#fff;font-weight:900;display:grid;place-items:center}
.ck-who b{font-size:.84rem;color:var(--navy)}.ck-who strong{font-family:var(--f-display);font-size:1.25rem;color:var(--c)}.ck-who small{font-size:.72rem;color:var(--muted)}
.ck-dark{background:linear-gradient(160deg,var(--navy),#12305A)}
.ck-sh{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px}@media(min-width:860px){.ck-sh{grid-template-columns:repeat(5,1fr)}}
.ck-sh div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:12px;display:grid;gap:4px;color:#fff;animation:ckIn .6s ease both;animation-delay:calc(var(--i)*.12s)}
.ck-sh span{font-size:1.5rem}.ck-sh b{font-size:.84rem}.ck-sh small{font-size:.72rem;color:#C9D6E8;line-height:1.4}
@keyframes ckIn{from{opacity:0;transform:translateY(10px)}}
.ck-calc{max-width:620px;margin:16px auto 0}
.ck-res{display:grid;gap:8px}.ck-res div{border-radius:14px;padding:10px 12px;display:grid}
.ck-res small{font-size:.72rem;font-weight:700;color:var(--muted)}.ck-res b{font-family:var(--f-display);font-size:1.25rem;color:var(--navy)}.ck-res em{font-style:normal;font-size:.7rem;color:var(--muted)}
.ck-res .b1{background:#EEF4FF}.ck-res .b2{background:var(--money-lt)}.ck-res .b3{background:linear-gradient(135deg,var(--money),var(--money-dk))}.ck-res .b3 *{color:#fff!important}
@media(prefers-reduced-motion:reduce){.ck-sh div{animation:none}}

.ck-row2{gap:24px!important;flex-wrap:nowrap!important}.ck-row2 .ck-n{width:128px;min-width:0!important}
.ck-fork{width:152px!important}
.ck-pops .pop{left:auto!important;right:10px;top:10px!important;transform:none!important;font-size:1rem!important;animation:ckPop2 1.8s ease forwards!important}
.ck-pops .p-T{top:48px!important}
@keyframes ckPop2{0%{opacity:0;transform:translateY(10px) scale(.7)}20%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
.ck-fork i{background:none!important;box-shadow:none!important;height:20px!important}

/* Cara Kerja v2: Standar Ritme Seksi SukaLOKAL */
body.pg-ck #app{background:var(--bg,#FAF7F0);color:var(--ink)}
body.pg-ck #app .ck-hero{background:radial-gradient(60% 90% at 88% 0%,rgba(139,224,183,.10),transparent 60%),#0E1726!important;color:#fff}
body.pg-ck #app .sec.ck-dark{background:linear-gradient(160deg,#081629 0%,#0D2235 100%)!important;color:#fff}
body.pg-ck #app .sec.ck-dark .c h2{color:#fff!important}
body.pg-ck #app .sec.ck-dark .eyebrow{color:var(--gold,#F2B705)!important}
body.pg-ck #app .sec.ck-dark .c p{color:#C9D6E8!important}
body.pg-ck .ck-em{color:var(--money-dk,#0A6B43)}
.ckx{display:grid;gap:14px;max-width:960px;margin:18px auto 0}@media(min-width:860px){.ckx{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start}}
.ckx-phone{background:#0B141A;border:6px solid #1E2A33;border-radius:28px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45);display:flex;flex-direction:column;height:430px}
.ckx-top{display:flex;align-items:center;gap:10px;background:#1F2C34;padding:10px 12px;color:#fff}.ckx-top span{width:34px;height:34px;border-radius:50%;background:#2A3942;display:grid;place-items:center}
.ckx-top div{display:grid;line-height:1.2}.ckx-top b{font-size:.86rem}.ckx-top small{font-size:.66rem;color:#8696A0}
.ckx-chat{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;background:#0B141A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='10' cy='10' r='1.2' fill='%23ffffff10'/%3E%3C/svg%3E");scroll-behavior:smooth;scrollbar-width:none}
.ckx-chat .m{display:flex;gap:6px;align-items:flex-end;max-width:88%}
.ckx-chat .m p{margin:0;padding:8px 10px;border-radius:12px;font-size:.8rem;line-height:1.4;color:#E9EDEF;background:#202C33}
.ckx-chat .m i{font-style:normal;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.7rem;font-weight:900;color:#fff;flex-shrink:0}
.ckx-chat .m-b i{background:#E5484D}.ckx-chat .m-c i{background:var(--money)}
.ckx-chat .m-me{align-self:flex-end}.ckx-chat .m-me p{background:#005C4B}
.ckx-chat .m-sys,.ckx-chat .m-ok{align-self:center;max-width:94%}.ckx-chat .m-sys p{background:#1F2C34;color:#D1D7DB;text-align:center;font-size:.74rem}
.ckx-chat .m-ok p{background:linear-gradient(135deg,#FFD84D,#F5B731);color:#3A2A00;text-align:center;font-size:.74rem;font-weight:600}
.ckx-chat .lk{display:block;margin-top:6px;background:rgba(0,0,0,.25);border-left:3px solid #25D366;border-radius:6px;padding:6px 8px;font-size:.72rem;color:#9FE8C6}
.ckx-chat .m.new{animation:ckMsg .45s cubic-bezier(.2,.8,.3,1.2) both}.ckx-chat .m-ok.new{animation-delay:.6s}
@keyframes ckMsg{from{opacity:0;transform:translateY(12px) scale(.96)}}
.ckx-side{display:grid;gap:12px}
.ck-dots button.done{background:#7FD9A0}
.ckx-board{background:#fff;border-radius:22px;padding:12px;display:grid;gap:6px;box-shadow:0 18px 40px rgba(0,0,0,.3)}
.ckx-bh{font-weight:900;color:var(--navy);display:flex;align-items:baseline;gap:8px;padding:2px 4px 4px}.ckx-bh small{font-weight:600;font-size:.68rem;color:var(--muted)}
.ckx-row{display:grid;grid-template-columns:34px 1fr auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;border-radius:14px;padding:8px 10px;background:var(--bg);border:1.5px solid transparent;transition:.3s}
.ckx-row span{grid-row:1/3;width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--c) 14%,#fff);display:grid;place-items:center}
.ckx-row b{font-size:.78rem;color:var(--navy)}.ckx-row strong{grid-row:1/3;grid-column:3;font-family:var(--f-display);font-size:1.1rem;color:var(--c);font-variant-numeric:tabular-nums}
.ckx-row em{font-style:normal;font-size:.7rem;font-weight:900;min-height:1em}.ckx-row em.up{color:var(--money-dk)}.ckx-row em.dn{color:#C9320F}
.ckx-row.hit{border-color:var(--c);background:#fff;box-shadow:0 6px 16px rgba(11,31,58,.1);animation:ckHit .6s ease}
@keyframes ckHit{30%{transform:scale(1.03)}}
body.pg-ck .ck-card{box-shadow:0 18px 40px rgba(0,0,0,.3);border:0}
body.pg-ck .ck-pk>div,body.pg-ck .ck-who div{box-shadow:0 14px 30px rgba(0,0,0,.25)}
body.pg-ck .ck-calc{box-shadow:0 18px 40px rgba(0,0,0,.3);border:0}
body.pg-ck .ck-calc .tiny{color:var(--muted)}
body.pg-ck .ck-pk p{color:#1E2533}body.pg-ck .ck-pk p strong{color:var(--money-dk)}
@media(max-width:860px){.ckx-phone{height:380px}}

.ck-calc{max-width:960px!important;display:grid!important;gap:16px!important}
@media(min-width:760px){.ck-calc{grid-template-columns:1fr 1fr;align-items:start}}
.ck-cl,.ck-cr{display:grid;gap:12px;min-width:0}
@media(min-width:760px){.ck-cr{border-left:1px dashed var(--line);padding-left:16px}}

/* header buttons: ukuran & font seragam (Cara Kerja, Masuk / Login, Booster, Audience) */
.top .bo-btn,.top .aud a,.top .ck-btn,.top .hd-login-btn,.top .hd-user-btn{height:38px!important;min-height:38px!important;max-height:38px!important;padding:0 14px!important;font-size:.82rem!important;font-weight:800!important;border-radius:999px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;line-height:1!important;white-space:nowrap!important;box-sizing:border-box!important;vertical-align:middle!important}
.top .bo-btn b{font-weight:800}
.top .aud{background:none!important;padding:0!important;gap:8px;font-size:.82rem}
.top .aud a{border:1.5px solid rgba(255,255,255,.22)!important;color:#E6EEF8!important}
.top .aud a.on{background:var(--gold)!important;color:var(--navy)!important;border-color:var(--gold)!important}
.top .ck-btn{background:#0E8A55!important;border:1.5px solid #0E8A55!important;color:#FFFFFF!important;box-shadow:0 2px 6px rgba(14,138,85,.25)!important;transition:all .15s ease!important}
.top .ck-btn:hover{background:#0A6B43!important;border-color:#0A6B43!important;transform:translateY(-1px)!important;box-shadow:0 4px 12px rgba(14,138,85,.35)!important}
.top .ck-btn.on{box-shadow:0 2px 8px rgba(14,138,85,.4)!important;background:#0A6B43!important}
.top .hd-login-btn{background:#F0FDF4!important;border:1.5px solid #BBF7D0!important;color:#0E8A55!important;box-shadow:0 2px 6px rgba(11,31,58,.06)!important;transition:all .15s ease!important}
.top .hd-login-btn:hover,.top .hd-login-btn[aria-expanded="true"]{background:#DCFCE7!important;border-color:#86EFAC!important;color:#0F5132!important;transform:translateY(-1px)!important;box-shadow:0 4px 12px rgba(14,138,85,.2)!important}
.bo-ck{display:none!important}
.top .ck-btn{display:inline-flex!important}
@media(max-width:959px){.top .ck-btn{display:none!important}.bo-ck{display:flex!important}}

/* kalkulator cara kerja v3 */
.ckcs{display:flex;flex-direction:column;gap:18px;margin-top:16px;max-width:1000px;margin-inline:auto}
.ckc{background:#fff;color:var(--ink);border-radius:22px;padding:18px;box-shadow:0 18px 40px rgba(0,0,0,.3);display:grid;gap:14px}
.ckc-br{border-top:5px solid var(--gold)}.ckc[data-calc="m"]{border-top:5px solid var(--money)}
.ckc-h .eyebrow{color:var(--money-dk)!important}.ckc-br .ckc-h .eyebrow{color:#A86A00!important}
.ckc-h h2{font-size:1.35rem;color:var(--navy)!important;margin:4px 0 2px}.ckc-h p{margin:0;font-size:.86rem;color:var(--muted)!important}
.ckc-b{display:grid;gap:16px}@media(min-width:800px){.ckc-b{grid-template-columns:1fr 1.15fr;align-items:start}.ckc-out{border-left:1px dashed var(--line);padding-left:16px}}
.ckc-in{display:grid;gap:12px}.ckc-in label{display:grid;gap:6px;font-size:.84rem;font-weight:700;color:var(--navy)}.ckc-in label[hidden]{display:none}
.ckc-in label b{color:var(--money-dk)}.ckc-in small{font-weight:600;color:var(--muted)}.ckc-in input[type=range]{width:100%;accent-color:var(--money)}
.ckc-seg{display:flex;gap:4px;background:var(--bg);border-radius:12px;padding:3px}.ckc-seg button{flex:1;border:0;background:none;border-radius:10px;padding:7px 4px;font:inherit;font-size:.76rem;font-weight:800;color:var(--muted);cursor:pointer}
.ckc-seg button.on{background:var(--navy);color:#fff}
.ckc-out{display:grid;gap:8px;min-width:0}
.ckc-flow{display:flex;flex-wrap:wrap;align-items:center;gap:4px;background:var(--bg);border-radius:14px;padding:8px}
.ckc-flow span{display:grid;text-align:center;font-size:.62rem;color:var(--muted);font-weight:700;flex:1;min-width:58px}.ckc-flow b{font-family:var(--f-display);font-size:1rem;color:var(--navy)}.ckc-flow i{font-style:normal;color:var(--money)}
.ckc-r{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px dashed var(--line);padding:6px 2px}
.ckc-r div{display:grid}.ckc-r b{font-size:.82rem;color:var(--navy)}.ckc-r small{font-size:.68rem;color:var(--muted)}.ckc-r strong{font-family:var(--f-display);color:var(--money-dk);white-space:nowrap}
.ckc-tot{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ckc-tot div{border-radius:14px;padding:10px;background:var(--money-lt);display:grid}
.ckc-tot div:first-child{background:linear-gradient(135deg,var(--money),var(--money-dk))}.ckc-tot div:first-child *{color:#fff}
.ckc-tot small{font-size:.66rem;font-weight:700;color:var(--muted)}.ckc-tot b{font-family:var(--f-display);font-size:1.2rem;color:var(--navy)}
.ckc-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.ckc-3 div{border-radius:12px;padding:8px;display:grid;gap:2px}
.ckc-3 small{font-size:.58rem;font-weight:900;letter-spacing:.06em}.ckc-3 b{font-family:var(--f-display);font-size:.98rem;color:var(--navy)}.ckc-3 em{font-style:normal;font-size:.62rem;color:var(--muted);line-height:1.3}
.ckc-3 .u1{background:#FFF4D0}.ckc-3 .u1 small{color:#A86A00}.ckc-3 .u2{background:#E8F0FF}.ckc-3 .u2 small{color:#2563EB}.ckc-3 .u3{background:var(--money-lt)}.ckc-3 .u3 small{color:var(--money-dk)}
@media(max-width:480px){.ckc-3{grid-template-columns:1fr}}
.ckc-n{margin:0;font-size:.72rem;color:#7A5A00;background:#F7F1E1;border-radius:10px;padding:6px 9px}
.ckc-as{max-width:1000px;margin:12px auto 0;font-size:.72rem;line-height:1.55;color:#C9D6E8;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px 12px}.ckc-as b{color:var(--gold)}
.ckc-in label{display:flex!important;flex-wrap:wrap;align-items:baseline;gap:6px 4px!important}.ckc-in label>.ckc-seg,.ckc-in label>input{flex-basis:100%}
.ckc-in label[hidden]{display:none!important}
@media(max-width:480px){.ckc-flow i{display:none}.ckc-flow span{min-width:0}}
.ckc[hidden]{display:none!important}
.ckc-read{background:#F4F7FB;border:1px solid #D8E2EE;border-left:4px solid var(--navy);border-radius:12px;padding:10px 12px;font-size:.76rem;color:#3A4558}.ckc-read>b{display:block;color:var(--navy);margin-bottom:4px;font-size:.82rem}.ckc-read ul{margin:0;padding-left:16px;display:grid;gap:4px;line-height:1.45}.ckc-read li b{color:var(--navy)}

.ckc-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ckc-sc{border-radius:14px;padding:10px;display:grid;gap:4px}.ckc-sc>small{font-size:.62rem;font-weight:900;letter-spacing:.04em;margin-bottom:2px}
.ckc-sc div{display:flex;justify-content:space-between;gap:6px;font-size:.72rem;border-bottom:1px dashed rgba(11,31,58,.1);padding-bottom:3px}
.ckc-sc span{color:var(--muted)}.ckc-sc b{color:var(--navy);text-align:right}
.ckc-sc.sa{background:#F4F7FB;border:1px solid #D8E2EE}.ckc-sc.sa>small{color:#3A4558}
.ckc-sc.sb{background:linear-gradient(160deg,#F7F1E1,#FFFDF5);border:1.5px solid #F3D27A}.ckc-sc.sb>small{color:#A86A00}.ckc-sc.sb b{color:#7A4E00}
@media(max-width:480px){.ckc-2{grid-template-columns:1fr}}
.ckc-tot b{font-size:1.02rem!important}

.ckt{max-width:1000px;margin:18px auto 0;background:#fff;border-radius:22px;padding:18px;box-shadow:0 18px 40px rgba(0,0,0,.3);border-top:5px solid var(--gold);display:grid;gap:14px}
.ckt-h .eyebrow{color:#A86A00!important}.ckt-h h2{font-size:1.3rem;color:var(--navy)!important;margin:4px 0 2px}.ckt-h p{margin:0;font-size:.86rem;color:var(--muted)!important}
.ckt-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}@media(min-width:900px){.ckt-g{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:480px){.ckt-g{grid-template-columns:1fr}}
.ckt-g>div{border:1px solid var(--line);border-radius:16px;padding:12px;display:grid;gap:6px;align-content:start;background:linear-gradient(170deg,#FFFDF6,#fff)}
.ckt-g span{font-size:1.5rem}.ckt-g b{font-size:.88rem;color:var(--navy)}.ckt-g p{margin:0;font-size:.76rem;line-height:1.45;color:#3A4558!important}
.ckt-g .ex,.ckt-g .co{font-size:.72rem;line-height:1.4;border-radius:10px;padding:6px 8px;color:#1E2533}
.ckt-g .ex{background:var(--money-lt)}.ckt-g .co{background:#F4F7FB}
.ckt-g small{display:block;font-size:.6rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.ckt-rule{font-size:.78rem;line-height:1.5;color:#5B4A12;background:#F7F1E1;border:1px solid #F3D27A;border-radius:12px;padding:10px 12px}

.ckt-steps{display:flex;gap:6px;flex-wrap:wrap}.ckt-steps span{display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:900;color:var(--c);background:color-mix(in srgb,var(--c) 10%,#fff);border-radius:999px;padding:4px 10px 4px 4px}
.ckt-steps i,.ckt-th i{font-style:normal;width:22px;height:22px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-size:.72rem}
.ckt-tier{border-left:4px solid var(--c);padding-left:12px;display:grid;gap:10px}
.ckt-th{display:flex;gap:8px;align-items:center}.ckt-th i{width:30px;height:30px;font-size:.9rem;flex-shrink:0}.ckt-th div{display:grid}.ckt-th b{color:var(--navy);font-size:.92rem}.ckt-th small{color:var(--muted);font-size:.74rem}
.ckt-tier .ckt-g{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:860px){.ckt-tier .ckt-g{grid-template-columns:1fr}}
.ckt-g .stp{font-size:.72rem;line-height:1.4;border-radius:10px;padding:6px 8px;color:#1E2533;background:#FFF4D0}

/* ===== Selalu Brand-mu ===== */
.sb-hero{background:radial-gradient(60% 80% at 90% 0%,rgba(255,216,77,.28),transparent 60%),radial-gradient(50% 70% at 0% 100%,rgba(18,161,80,.35),transparent 60%),linear-gradient(160deg,#0B1F3A,#0F3A4A 55%,#0C4A3E);color:#fff;padding:40px 0 36px;overflow:hidden}
.sb-hero .wrap{display:grid;gap:12px}
.sb-hero h1{font-size:clamp(1.8rem,6.4vw,3.1rem);line-height:1.08;color:#fff}
.sb-hero h1 em{font-style:normal;color:var(--gold)}
.sb-lead{color:#D5E1F0;max-width:620px;font-size:1rem;line-height:1.6}.sb-lead b{color:#fff}
.sb-pills{display:flex;flex-wrap:wrap;gap:8px}.sb-pills span{font-size:.78rem;font-weight:800;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff}
.sb-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.sb-ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.35);color:#fff}

/* ===== Redesain Image 1: Komparasi 3 Pilar (Unmarketing, Unbranding, Unselling) ===== */
.sb-vs-grid {
  display: grid;
  gap: 20px;
  margin-top: 24px;
}
.sb-vs-card {
  background: #FFFFFF;
  border: 1.5px solid var(--line, #E2DCD0);
  border-radius: 20px;
  padding: 22px 24px;
  box-shadow: 0 10px 30px rgba(11, 31, 58, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: sbIn 0.6s var(--d, 0s) both;
}
.sb-vs-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(11, 31, 58, 0.09);
  border-color: rgba(14, 138, 85, 0.3);
}
.sb-vs-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 1px dashed var(--line, #E2DCD0);
  padding-bottom: 14px;
  margin-bottom: 16px;
}
.sb-vs-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.sb-vs-badge span {
  font-family: var(--f-display, system-ui);
  font-weight: 800;
  font-size: 0.84rem;
  background: var(--navy, #0B1F3A);
  color: var(--gold, #FFD84D);
  padding: 3px 10px;
  border-radius: 8px;
  letter-spacing: 0.05em;
}
.sb-vs-badge b {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--navy, #0B1F3A);
  letter-spacing: -0.01em;
}
.sb-vs-tagline {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--money-dk, #0A6B43);
  background: rgba(14, 138, 85, 0.08);
  padding: 4px 12px;
  border-radius: 999px;
  margin: 0;
}
.sb-vs-body {
  display: grid;
  grid-template-columns: 1fr auto 1.3fr;
  gap: 16px;
  align-items: center;
}
.sb-vs-side {
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  box-sizing: border-box;
}
.sb-vs-old {
  background: #FFF5F5;
  border: 1.5px solid rgba(229, 72, 77, 0.22);
}
.sb-vs-side-label {
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.sb-vs-old .sb-vs-side-label {
  color: #C53B40;
}
.sb-bad-dot {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #E5484D;
  color: #FFFFFF;
  display: grid;
  place-items: center;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
}
.sb-vs-side-main {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.sb-side-ico {
  font-style: normal;
  font-size: 1.45rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.sb-side-content {
  flex: 1;
}
.sb-old-slogan {
  display: block;
  font-size: 0.94rem;
  font-weight: 700;
  color: #717D91;
  text-decoration-color: #E5484D;
  text-decoration-thickness: 2.5px;
  line-height: 1.35;
}
.sb-old-sub {
  font-size: 0.82rem;
  color: #8C96A8;
  margin: 6px 0 0;
  line-height: 1.45;
}
.sb-vs-divider {
  display: grid;
  place-items: center;
}
.sb-vs-arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--money-lt, #E9F4EE);
  color: var(--money-dk, #0A6B43);
  border: 1px solid rgba(14, 138, 85, 0.25);
  font-weight: 900;
  font-size: 1.05rem;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 10px rgba(14, 138, 85, 0.12);
}
.sb-vs-new {
  background: linear-gradient(135deg, #F0FDF4 0%, #FFFFFF 100%);
  border: 1.5px solid rgba(14, 138, 85, 0.35);
  box-shadow: 0 8px 24px rgba(14, 138, 85, 0.07);
}
.sb-vs-new .sb-vs-side-label {
  color: #0A6B43;
}
.sb-good-dot {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #0E8A55;
  color: #FFFFFF;
  display: grid;
  place-items: center;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
}
.sb-new-head {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy, #0B1F3A);
  line-height: 1.3;
}
.sb-new-text {
  font-size: 0.86rem;
  color: var(--ink-2, #2B3A4F);
  line-height: 1.45;
  margin: 6px 0 0;
}
.sb-vs-perk {
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(14, 138, 85, 0.1);
  color: #0A6B43;
  font-size: 0.78rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
}
.sb-perk-ico {
  color: var(--gold, #E8A317);
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .sb-vs-body {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .sb-vs-arrow {
    transform: rotate(90deg);
    margin: 2px 0;
  }
  .sb-vs-card {
    padding: 18px 16px;
  }
  .sb-vs-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* ===== Perbaikan Background Image 2 & 3 (.sb-live): Executive Dark Canvas ===== */
#app .sec.sb-live,
#app #sbLive,
section.sb-live {
  background: radial-gradient(80% 60% at 50% 25%, rgba(18, 161, 80, 0.28), transparent 70%),
              radial-gradient(60% 50% at 10% 90%, rgba(255, 216, 77, 0.12), transparent 60%),
              linear-gradient(170deg, #07172B 0%, #0A2438 50%, #072B24 100%) !important;
  color: #FFFFFF !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-block: clamp(48px, 6vw, 72px) !important;
}

#app .sec.sb-live .c h2,
#app #sbLive .c h2,
section.sb-live .c h2,
.sb-live .c h2,
#app .sec.sb-live h2,
#app #sbLive h2,
section.sb-live h2,
.sb-live h2 {
  color: #FFFFFF !important;
  font-weight: 850 !important;
}

#app .sec.sb-live h2 em,
#app #sbLive h2 em,
section.sb-live h2 em,
.sb-live h2 em {
  color: var(--gold, #FFD84D) !important;
  font-style: normal !important;
}

#app .sec.sb-live .c p,
#app #sbLive .c p,
section.sb-live .c p,
.sb-live .c p,
#app .sec.sb-live p,
#app #sbLive p,
section.sb-live p,
.sb-live p {
  color: #D1DEED !important;
}

#app .sec.sb-live .eyebrow,
#app #sbLive .eyebrow,
section.sb-live .eyebrow,
.sb-live .eyebrow {
  color: var(--gold, #FFD84D) !important;
}

.sb-stage {
  margin-top: 20px;
  display: grid;
  gap: 14px;
}
.sb-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.sb-steps div {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  transition: all 0.3s ease;
  opacity: 0.65;
  box-sizing: border-box;
}
.sb-steps i {
  font-style: normal;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.15) !important;
  font-weight: 900;
  font-size: 0.84rem;
  color: #FFFFFF !important;
}
.sb-steps b {
  font-size: 0.82rem !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
}
.sb-steps small {
  font-size: 0.68rem !important;
  color: #B9C8DA !important;
  line-height: 1.3 !important;
}
.sb-steps div.on {
  opacity: 1 !important;
  background: rgba(18, 161, 80, 0.28) !important;
  border-color: #0E8A55 !important;
  box-shadow: 0 6px 20px rgba(14, 138, 85, 0.35) !important;
  transform: translateY(-2px);
}
.sb-steps div.on i {
  background: var(--gold, #FFD84D) !important;
  color: var(--navy, #0B1F3A) !important;
}
.sb-steps div.dn {
  opacity: 0.9 !important;
}
.sb-steps div.dn i {
  background: #0E8A55 !important;
  color: #FFFFFF !important;
}

.sb-cvw {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: radial-gradient(circle at 50% 50%, #10324A, #071627 75%) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35) !important;
}
#sbCv {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 900/520;
}
.sb-cap {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  font-size: 0.82rem;
  font-weight: 900;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(255, 216, 77, 0.95);
  color: #0B1F3A;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  transition: 0.3s;
  max-width: 92%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sb-ms {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 760px) {
  .sb-ms {
    grid-template-columns: repeat(4, 1fr);
  }
}
.sb-ms div {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
  backdrop-filter: blur(8px) !important;
}
.sb-ms small {
  display: block !important;
  font-size: 0.74rem !important;
  color: #B9C8DA !important;
  font-weight: 700 !important;
  margin-bottom: 2px !important;
}
.sb-ms b {
  font-size: 1.25rem !important;
  color: #FFFFFF !important;
  font-family: var(--f-display, system-ui) !important;
  font-variant-numeric: tabular-nums !important;
}
.sb-ms div:nth-child(3) b {
  color: var(--gold, #FFD84D) !important;
}

.sb-ct {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.sb-ct span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  background: rgba(255, 216, 77, 0.14) !important;
  border: 1px solid rgba(255, 216, 77, 0.4) !important;
}
.sb-ct i {
  font-style: normal;
}

.sb-ctl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: #D5E1F0 !important;
  font-weight: 700;
  justify-content: center;
  padding-block: 4px;
}
.sb-ctl button {
  font: inherit;
  font-weight: 800;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: #FFFFFF !important;
  cursor: pointer;
  transition: all 0.2s ease;
}
.sb-ctl button:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}
.sb-ctl button.on {
  background: #0E8A55 !important;
  border-color: #0E8A55 !important;
  box-shadow: 0 4px 14px rgba(14, 138, 85, 0.4) !important;
}
.sb-ctl .sb-re {
  margin-left: 8px;
  background: var(--gold, #FFD84D) !important;
  color: var(--navy, #0B1F3A) !important;
  border-color: var(--gold, #FFD84D) !important;
  font-weight: 800 !important;
}

.sb-plat {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 4px;
}
.sb-plat span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  color: #E2EAF4 !important;
  padding: 5px 12px 5px 6px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}
.sb-plat i {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  flex: none;
}
.sb-plat i svg {
  width: 14px;
  height: 14px;
}

.sb-note {
  font-size: 0.76rem !important;
  line-height: 1.6 !important;
  color: #B9C8DA !important;
  text-align: center;
  max-width: 780px;
  margin: 6px auto 0 !important;
}
.sb-note b {
  color: var(--gold, #FFD84D) !important;
}
.sb-g3{display:grid;gap:12px;margin-top:18px}
.sb-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;display:grid;gap:6px;box-shadow:0 8px 22px rgba(11,31,58,.05)}
.sb-card i{font-style:normal;font-size:1.6rem}.sb-card b{font-size:1rem;color:var(--navy)}.sb-card p{font-size:.86rem;line-height:1.55;color:var(--muted)}
.sb-card small{font-size:.74rem;font-weight:800;color:var(--money-dk,#0A6B43);background:var(--money-lt,#E6F6EC);padding:5px 10px;border-radius:10px;justify-self:start}
.sb-end{margin-top:18px;border-radius:20px;padding:20px;background:linear-gradient(135deg,#0B1F3A,#0C4A3E);color:#fff;display:grid;gap:6px;text-align:center;justify-items:center}
.sb-end b{font-size:1.25rem;color:var(--gold)}.sb-end span{color:#C9D6E8;font-size:.92rem}.sb-end div{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
@media(min-width:760px){.sb-row{grid-template-columns:1fr auto 1.6fr;align-items:center;gap:16px;padding:16px 20px}.sb-ar{transform:none;margin:0}.sb-ms{grid-template-columns:repeat(4,1fr)}.sb-g3{grid-template-columns:repeat(3,1fr)}.sb-steps small{font-size:.72rem}.sb-steps b{font-size:.86rem}}
@media(max-width:480px){.sb-cap{font-size:.68rem;padding:5px 10px;top:8px}.sb-steps b{font-size:.66rem}.sb-steps small{display:none}}
@media(prefers-reduced-motion:reduce){.sb-row,.sb-ar{animation:none}}
.sb-ct{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.sb-ct span{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:800;color:#fff;padding:5px 12px;border-radius:999px;background:rgba(255,216,77,.12);border:1px solid rgba(255,216,77,.35)}.sb-ct i{font-style:normal}

/* hero visual beranda */
.hv{position:relative;background:linear-gradient(160deg,rgba(11,31,58,.75),rgba(12,74,62,.55));backdrop-filter:blur(6px);border:1px solid rgba(255,216,77,.28);border-radius:26px;padding:14px;display:grid;gap:10px;color:#fff;box-shadow:0 20px 50px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08);min-width:0}
.hv-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.hv-top b{font-size:.9rem;color:#fff}
.hv-live{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;font-size:.7rem;font-weight:900;letter-spacing:.08em;color:#0B1F3A;background:#8BE0B7;box-sizing:border-box;line-height:1}
.hv-live i{width:7px;height:7px;border-radius:50%;background:#E5484D;animation:hvB 1s infinite}
@keyframes hvB{50%{opacity:.25}}
.hv-cw{position:relative;border-radius:18px;overflow:hidden;background:radial-gradient(circle at 50% 50%,#13385A,#081A30 78%)}
#hvC{display:block;width:100%;aspect-ratio:360/320}
.hv-ntf{position:absolute;left:10px;right:10px;bottom:10px;display:grid;gap:6px;pointer-events:none}
.hv-t{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.95);color:#0B1F3A;border-radius:14px;padding:7px 10px;box-shadow:0 8px 20px rgba(0,0,0,.3);animation:hvIn .45s cubic-bezier(.2,1.4,.4,1) both;transition:opacity .5s,transform .5s;max-width:280px}
.hv-t i{font-style:normal;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:#E6F6EC;font-size:.95rem;flex:none}
.hv-t.s i{background:#FFF3C4}.hv-t b{display:block;font-size:.86rem;color:#0A6B43;line-height:1.1}.hv-t.s b{color:#B07A00}.hv-t small{font-size:.7rem;color:#4A5668}
.hv-t.out{opacity:0;transform:translateY(6px)}
@keyframes hvIn{from{opacity:0;transform:translateY(16px) scale(.92)}}
.hv-leg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.hv-leg span{display:grid;justify-items:center;text-align:center;gap:1px;font-size:.7rem;font-weight:700;color:#C9D6E8;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:7px 4px}
.hv-leg i{font-style:normal;font-size:1rem}.hv-leg b{color:#8BE0B7;font-size:.86rem}.hv-leg .g{background:rgba(255,216,77,.12);border-color:rgba(255,216,77,.4)}.hv-leg .g b{color:var(--gold)}
.hv-ilu{font-size:.64rem;color:#8FA3BD;text-align:center}
@media(max-width:480px){.hv-t:nth-child(n+2){display:none}.hv-t{padding:5px 9px;max-width:230px}.hv-t i{width:24px;height:24px}.hv-t b{font-size:.78rem}.hv-t small{font-size:.64rem}.hv-ntf{bottom:8px;left:8px}}
@media(prefers-reduced-motion:reduce){.hv-t{animation:none}.hv-live i{animation:none}}
.hc-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px;margin:4px 0 18px;width:100%}
.hc-tabs button{font:inherit;cursor:pointer;display:grid;justify-items:center;gap:2px;padding:12px 6px;border-radius:16px;border:1px solid var(--line);background:#fff;color:var(--navy);box-shadow:0 6px 16px rgba(11,31,58,.05);transition:.2s;width:100%!important;min-width:0!important;box-sizing:border-box!important}
.hc-tabs button:hover,.hc-tabs button.on{border-color:var(--money);background:var(--money-lt,#E6F6EC);transform:translateY(-2px)}
.hc-tabs i{font-style:normal;font-size:1.4rem}.hc-tabs b{font-size:.84rem;line-height:1.2;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.hc-tabs small{font-size:.68rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hc-sec{scroll-margin-top:80px;margin-bottom:22px}
.hc-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.hc-h i{color:#fff!important;font-style:normal;font-size:1.3rem;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#0E8A55,#0C4A3E);flex:none}
.hc-h i .ik,.hc-h i svg{stroke:#fff!important;color:#fff!important;fill:none!important}
.hc-h b{display:block;font-size:1.15rem;color:var(--navy)}.hc-h small{font-size:.84rem;color:var(--muted)}
#hcRes{scroll-margin-top:80px}

/* ===== Rekomendasi teman + simulator ===== */
.tr-sec{background:#F3F8F4}
.tr-data{max-width:760px;margin:20px auto 0;background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px 18px;display:grid;gap:12px;box-shadow:0 10px 30px rgba(11,31,58,.06)}
.tr-bl{display:flex;justify-content:space-between;align-items:baseline;gap:10px}.tr-bl b{font-size:.9rem;color:var(--navy)}.tr-bl em{font-style:normal;font-family:var(--f-display);font-weight:800;font-size:1.6rem;color:#8A94A6;font-variant-numeric:tabular-nums}
.tr-bar.g .tr-bl em{color:var(--money);font-size:2rem}
.tr-tk{height:12px;border-radius:99px;background:#EEF1F5;overflow:hidden;margin-top:6px}.tr-tk i{display:block;height:100%;width:0;border-radius:inherit;background:#B6BFCC;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.tr-bar.g .tr-tk i{background:linear-gradient(90deg,#0E8A55,#8BE0B7);box-shadow:0 0 12px rgba(18,161,80,.4)}
.tr-data.in .tr-tk i{width:var(--w)}
.tr-src{font-size:.7rem;color:var(--muted);line-height:1.5}
.tr-vs{max-width:760px;margin:12px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tr-way{border-radius:16px;padding:12px 14px;border:1px solid var(--line);background:#fff}.tr-way b{font-size:.88rem}
.tr-way ol{margin:6px 0 0;padding-left:18px;font-size:.8rem;line-height:1.6;color:var(--muted)}
.tr-way.ad{background:#F6F7F9}.tr-way.ad li:last-child{color:#C2410C;font-weight:700}
.tr-way.sl{background:#E9F4EE;border-color:#BFE6CC}.tr-way.sl b{color:#0A6B43}.tr-way.sl li:last-child{color:#0A6B43;font-weight:800}
.tr-sim{margin-top:22px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:16px;box-shadow:0 16px 40px rgba(11,31,58,.08);display:grid;gap:14px}
.tr-ctl{display:grid;gap:12px}
.tr-grp{display:grid;gap:6px}.tr-lb{font-size:.74rem;font-weight:800;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}.tr-lb b{color:var(--money);font-size:1rem}
.tr-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tr-chips button{font:inherit;font-size:.8rem;font-weight:800;cursor:pointer;display:grid;justify-items:center;gap:2px;padding:8px 4px;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--navy);transition:.2s}
.tr-chips i{font-style:normal;font-size:1.1rem}.tr-chips button.on{border-color:var(--money);background:#E9F4EE;color:#0A6B43;box-shadow:0 4px 12px rgba(18,161,80,.18)}
#trV{accent-color:var(--money);width:100%}
.tr-ai{font:inherit;cursor:pointer;display:flex;align-items:center;gap:12px;text-align:left;padding:10px 12px;border-radius:14px;border:1.5px dashed #C9D2DE;background:#F8FAFC;color:var(--navy);transition:.25s}
.tr-ai b{display:block;font-size:.88rem}.tr-ai small{font-size:.72rem;color:var(--muted)}
.tr-sw{width:40px;height:22px;border-radius:99px;background:#C9D2DE;position:relative;flex:none;transition:.25s}.tr-sw i{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.25s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tr-ai.on{border-style:solid;border-color:#3559C7;background:linear-gradient(135deg,#F3ECFF,#E9F4EE)}.tr-ai.on .tr-sw{background:linear-gradient(90deg,#3559C7,#0E8A55)}.tr-ai.on .tr-sw i{left:21px}
.tr-main{display:grid;gap:14px}
.tr-ph{justify-self:center;width:210px;border-radius:28px;background:#0B1F3A;padding:8px;box-shadow:0 14px 34px rgba(11,31,58,.25)}
.tr-scr{border-radius:22px;background:#E9F3EE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23cfe3d7'/%3E%3C/svg%3E");min-height:250px;padding:10px;display:grid;gap:8px;align-content:start;overflow:hidden}
.tr-app{display:grid;gap:1px;background:#075E54;color:#fff;margin:-10px -10px 2px;padding:9px 12px}.tr-app b{font-size:.8rem}.tr-app small{font-size:.62rem;opacity:.9;line-height:1.25}
.tr-msg{justify-self:end;max-width:92%;background:#DCF8C6;border-radius:12px 12px 2px 12px;padding:6px;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.tr-msg p{font-size:.7rem;line-height:1.4;color:#1A2B22;margin:5px 2px 0;min-height:2.8em}
.tr-card>div{border-radius:8px;height:74px;display:grid;place-items:center;overflow:hidden}
.tr-card .tf{background:linear-gradient(135deg,#6B3E26,#E9C48A)}.tr-card .tf i{font-style:normal;font-size:2rem}
.tr-card .tv{background:linear-gradient(135deg,#1A1A2E,#3E2A5E);position:relative}.tr-card .tv i{font-style:normal;width:32px;height:32px;border-radius:50%;background:#FF3B3B;color:#fff;display:grid;place-items:center;font-size:.8rem;animation:trP 1.4s infinite}.tr-card .tv small{position:absolute;right:6px;bottom:4px;font-size:.6rem;color:#fff}
.tr-card .tl{background:#fff;border:1px solid #D8E2DC;place-items:start;align-content:center;padding:0 10px;gap:2px}.tr-card .tl b{font-size:.7rem;color:#1877F2}.tr-card .tl small{font-size:.66rem;color:#333}
.tr-card .trv{background:#F7F3E8;align-content:center;gap:2px}.tr-card .trv b{font-size:.8rem}.tr-card .trv small{font-size:.66rem;color:#5B4A12}
@keyframes trP{50%{transform:scale(1.15)}}
.tr-plats{display:flex;gap:4px;justify-content:flex-end;opacity:0;transform:translateY(6px);transition:.4s}.tr-plats.go{opacity:1;transform:none}
.tr-plats span{font-size:.6rem;font-weight:800;color:#fff;background:var(--c);padding:3px 7px;border-radius:99px;animation:trIn .5s both}.tr-plats.go span:nth-child(2){animation-delay:.15s}.tr-plats.go span:nth-child(3){animation-delay:.3s}
@keyframes trIn{from{opacity:0;transform:scale(.6)}}
.tr-fun{display:grid;gap:8px;align-content:start}
.tr-st{display:grid;grid-template-columns:118px 1fr 64px;align-items:center;gap:8px}
.tr-sl{display:flex;align-items:center;gap:7px}.tr-sl i{font-style:normal;font-size:1rem;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:#F1F4F8;flex:none}
.tr-sl b{display:block;font-size:.78rem;color:var(--navy);line-height:1.15}.tr-sl small{font-size:.62rem;color:var(--muted)}
.tr-tr{position:relative;height:18px;border-radius:99px;background:#F1F4F8;overflow:hidden}
.tr-fl{height:100%;width:3%;border-radius:inherit;transition:width .9s cubic-bezier(.2,.8,.2,1);background:linear-gradient(90deg,#9FB0C8,#C9D2DE);position:relative;overflow:hidden}
.tr-fl::after{content:"";position:absolute;top:0;bottom:0;left:-18px;right:0;background:repeating-linear-gradient(90deg,transparent 0 14px,rgba(255,255,255,.5) 14px 18px);animation:trF .9s linear infinite}
@keyframes trF{to{transform:translateX(18px)}}
[data-trs="t"] .tr-fl{background:linear-gradient(90deg,#5BC8A0,#9BE3C6)}[data-trs="k"] .tr-fl{background:linear-gradient(90deg,#1B74E4,#6AA8F5)}[data-trs="r"] .tr-fl{background:linear-gradient(90deg,#0E8A55,#8BE0B7)}[data-trs="s"] .tr-fl{background:linear-gradient(90deg,#E8A400,#FFD84D)}
.tr-n{font-family:var(--f-display);font-size:1rem;text-align:right;color:var(--navy);font-variant-numeric:tabular-nums}
[data-trs="s"] .tr-n{color:#B07A00}[data-trs="r"] .tr-n{color:#0A6B43}
.tr-money{margin-top:4px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border-radius:16px;background:linear-gradient(135deg,#0B1F3A,#0C4A3E);color:#fff}
.tr-money small{display:block;font-size:.72rem;color:#A9BAD0}.tr-money>div>b{font-family:var(--f-display);font-size:1.7rem;color:var(--gold);font-variant-numeric:tabular-nums}
.tr-dl{text-align:right}.tr-dl b{display:block;font-size:1rem;color:#8BE0B7}.tr-dl small{font-size:.66rem;line-height:1.35}
.tr-brk{display:grid;gap:4px}.tr-brk span{font-size:.74rem;color:var(--muted)}.tr-brk b{color:var(--navy)}
.tr-note{font-size:.68rem;line-height:1.55;color:var(--muted);margin:0}
.tr-sim.ai .tr-ph{box-shadow:0 0 0 3px rgba(123,63,228,.35),0 14px 34px rgba(11,31,58,.25)}
@media(min-width:860px){.tr-sim{padding:22px;gap:18px}.tr-ctl{grid-template-columns:1.3fr 1fr 1.2fr;align-items:end}.tr-main{grid-template-columns:230px 1fr;align-items:center;gap:26px}.tr-st{grid-template-columns:150px 1fr 80px}.tr-n{font-size:1.15rem}}
@media(max-width:420px){.tr-st{grid-template-columns:104px 1fr 54px}.tr-sl small{display:none}.tr-vs{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.tr-fl::after,.tr-card .tv i,.tr-plats span{animation:none}}

/* Integrasi Koperasi */
.kp-flow{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:6px}
.kp-flow>div{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;display:grid;gap:4px;box-shadow:0 8px 22px rgba(11,31,58,.05);animation:sbIn .6s var(--d) both}
.kp-flow i{font-style:normal;font-size:1.6rem}.kp-flow em{position:absolute;top:10px;right:12px;font-style:normal;font-weight:900;font-size:.72rem;color:#fff;background:#0E7C66;width:22px;height:22px;border-radius:50%;display:grid;place-items:center}
.kp-flow b{font-size:.92rem;color:var(--navy)}.kp-flow small{font-size:.76rem;color:var(--muted);line-height:1.45}
.kp-why{display:grid;gap:10px;margin-top:16px}
.kp-c{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;display:grid;gap:4px}
.kp-c i{font-style:normal;font-size:1.5rem;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#E3F5EE,#F7F1E1)}
.kp-c b{font-size:.95rem;color:var(--navy);margin-top:4px}.kp-c p{font-size:.84rem;line-height:1.55;color:var(--muted);margin:0}
.kp-two{display:grid;gap:12px;margin-top:18px}
.kp-box{border-radius:20px;padding:16px 18px;background:linear-gradient(160deg,#0B1F3A,#0E4A44);color:#DCE6F2}
.kp-box h3{color:#fff;font-size:1.02rem;margin:0 0 8px}.kp-box ul{margin:0;padding-left:18px;display:grid;gap:7px;font-size:.86rem;line-height:1.55}.kp-box b{color:var(--gold)}
.kp-box.g{background:#E9F4EE;border:1px solid #BFE6CC;color:#29413A}.kp-box.g h3{color:#0A6B43}.kp-box.g b{color:#0A6B43}
@media(min-width:760px){.kp-flow{grid-template-columns:repeat(4,1fr)}.kp-why{grid-template-columns:repeat(3,1fr)}.kp-two{grid-template-columns:1fr 1fr}}

/* Income QRIS */
.qr-how{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:6px}
.qr-how>div{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;display:grid;gap:4px;box-shadow:0 8px 22px rgba(11,31,58,.05);animation:sbIn .6s var(--d) both}
.qr-how i{font-style:normal;font-size:1.6rem}.qr-how em{position:absolute;top:10px;right:12px;font-style:normal;font-weight:900;font-size:.72rem;color:#fff;background:#1B74E4;width:22px;height:22px;border-radius:50%;display:grid;place-items:center}
.qr-how b{font-size:.92rem;color:var(--navy)}.qr-how small{font-size:.76rem;color:var(--muted);line-height:1.45}
.qr-inc{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px}
.qr-i{background:linear-gradient(160deg,#0B1F3A,#123A6B);color:#DCE6F2;border-radius:18px;padding:14px;display:grid;gap:3px}
.qr-i i{font-style:normal;font-size:1.3rem}.qr-i b{color:#fff;font-size:.9rem}.qr-i strong{color:var(--gold);font-size:.86rem}.qr-i small{font-size:.7rem;color:#A9BAD0}
.qr-ul{margin:0;padding-left:18px;display:grid;gap:8px;font-size:.88rem;line-height:1.5;color:var(--muted)}.qr-ul b{color:var(--navy)}
.qr-plans{display:grid;gap:12px;margin-top:16px}
.qr-p{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px 16px;display:grid;gap:8px;align-content:start;box-shadow:0 8px 22px rgba(11,31,58,.05)}
.qr-p>b{font-size:1rem;color:var(--navy)}.qr-p strong{font-family:var(--f-display);font-size:1.6rem;color:#1B74E4}.qr-p strong small{font-size:.8rem;color:var(--muted);font-family:inherit}
.qr-p ul{margin:0 0 6px;padding-left:18px;font-size:.82rem;line-height:1.55;color:var(--muted);display:grid;gap:3px}
.qr-p.pop{border:2px solid var(--gold);box-shadow:0 14px 34px rgba(245,183,49,.25)}
.qr-tag{position:absolute;top:-11px;left:16px;font-size:.66rem;font-weight:900;background:var(--gold);color:var(--navy);padding:3px 10px;border-radius:99px}
@media(min-width:760px){.qr-how{grid-template-columns:repeat(4,1fr)}.qr-inc{grid-template-columns:repeat(5,1fr)}.qr-plans{grid-template-columns:repeat(4,1fr)}}

.qr-mk{margin-top:16px;gap:14px}
.qr-dt,.qr-res{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.qr-dt>div,.qr-res>div{background:#F4F7FB;border-radius:14px;padding:10px 12px;display:grid;gap:2px}
.qr-dt small,.qr-res small{font-size:.7rem;color:var(--muted);font-weight:700}.qr-dt b,.qr-res b{font-family:var(--f-display);font-size:1.15rem;color:var(--navy)}.qr-dt em,.qr-res em{font-style:normal;font-size:.68rem;color:#1B74E4;font-weight:700}
.qr-res .win{background:linear-gradient(135deg,#0B1F3A,#123A6B)}.qr-res .win small{color:#A9BAD0}.qr-res .win b{color:var(--gold)}.qr-res .win em{color:#8FC1FF}
.qr-as{display:grid;gap:10px}
.qr-pos{display:grid;gap:12px;margin-top:22px}
.qr-pb{border-radius:20px;padding:18px;background:linear-gradient(160deg,#0B1F3A,#123A6B);color:#DCE6F2}.qr-pb h3{color:#fff;font-size:1.15rem;margin:6px 0 8px}.qr-pb p{font-size:.88rem;line-height:1.6;margin:0}
.qr-pb.g{background:#EEF5FF;border:1px solid #CFE0FA;color:#2C3E57}.qr-pb.g h3{color:#1B74E4;margin-top:0}.qr-pb ol{margin:0;padding-left:18px;display:grid;gap:6px;font-size:.86rem;line-height:1.5}.qr-pb.g b{color:var(--navy)}
.qr-sum{margin-top:12px;border-radius:18px;padding:16px 18px;background:#F7F3E8;border:1px solid #F3D27A}.qr-sum b{color:#7A5A00}.qr-sum p{margin:6px 0 0;font-size:.88rem;line-height:1.6;color:#4A3B0E}
@media(min-width:760px){.qr-dt,.qr-res{grid-template-columns:repeat(4,1fr)}.qr-as{grid-template-columns:repeat(3,1fr)}.qr-pos{grid-template-columns:1fr 1fr}}

.ds-pr{margin-top:6px;border-radius:18px;padding:16px 18px;background:#FFF4E5;border:1px solid #F5CF92}.ds-pr b{color:#8A4B00}.ds-pr ul{margin:8px 0 0;padding-left:18px;display:grid;gap:5px;font-size:.88rem;line-height:1.5;color:#5A3A10}
.ds-fl em{background:#C27C0E!important}
.ds-im{display:flex;flex-wrap:wrap;gap:6px}.ds-im span{font-size:.76rem;background:#FFF4E5;border:1px solid #F5CF92;color:#5A3A10;padding:5px 10px;border-radius:99px}.ds-im b{color:#8A4B00}

/* OPI Commander */
.op-hero{background:radial-gradient(60% 80% at 90% 0%,rgba(123,63,228,.35),transparent 60%),radial-gradient(50% 70% at 0% 100%,rgba(18,161,80,.3),transparent 60%),linear-gradient(160deg,#0B1F3A,#141B3F 55%,#0C4A3E);color:#fff;padding:34px 0 30px}
.op-hero .wrap{display:grid;gap:16px}
.op-id{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.op-av{position:relative;width:86px;height:86px;border-radius:26px;background:linear-gradient(135deg,#3559C7,#0E8A55);display:grid;place-items:center;box-shadow:0 0 0 4px rgba(255,255,255,.08),0 14px 34px rgba(123,63,228,.45);flex:none}
.op-av span{font-family:var(--f-display);font-weight:900;font-size:1.5rem;letter-spacing:.06em}
.op-av i{position:absolute;inset:-6px;border-radius:30px;border:2px solid rgba(255,216,77,.55);animation:opPulse 2.2s infinite}
@keyframes opPulse{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.18)}}
.op-hero h1{font-size:clamp(1.9rem,6.5vw,3rem);line-height:1.05;color:#fff}.op-hero h1 em{font-style:normal;color:var(--gold)}
.op-role{color:#C9D6E8;font-weight:700;margin-top:4px}
.op-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.op-meta span{font-size:.78rem;font-weight:800;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:6px 10px}.op-meta small{display:block;font-size:.6rem;color:#A9BAD0;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.op-mis{background:rgba(255,255,255,.07);border:1px solid rgba(255,216,77,.3);border-radius:18px;padding:14px 16px;max-width:760px}.op-mis b{color:var(--gold)}.op-mis p{margin:6px 0 0;color:#DCE6F2;line-height:1.6}
.op-dna{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px}
.op-d{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;display:grid;gap:4px;box-shadow:0 8px 22px rgba(11,31,58,.05);animation:sbIn .6s var(--d) both}
.op-d em{position:absolute;top:10px;right:12px;font-style:normal;font-weight:900;font-size:.72rem;color:#fff;background:#3559C7;width:22px;height:22px;border-radius:50%;display:grid;place-items:center}
.op-d i{font-style:normal;font-size:1.5rem}.op-d b{font-size:.92rem;color:var(--navy)}.op-d small{font-size:.78rem;color:var(--muted);line-height:1.45}
.op-run{display:grid;gap:14px;margin-top:16px}
.op-steps{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.op-steps li{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:9px 12px;font-size:.86rem;color:var(--muted);transition:.3s}
.op-steps i{font-style:normal;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#F1F4F8;font-weight:900;font-size:.78rem;color:var(--navy);flex:none;transition:.3s}
.op-steps li.on{border-color:#3559C7;background:#F5F0FF;color:var(--navy);transform:translateX(4px);box-shadow:0 6px 16px rgba(123,63,228,.15)}.op-steps li.on i{background:#3559C7;color:#fff}
.op-steps li.dn i{background:#0E8A55;color:#fff}
.op-con{background:#0B1220;border-radius:18px;overflow:hidden;border:1px solid #1E2A44;box-shadow:0 16px 40px rgba(11,31,58,.25);display:flex;flex-direction:column;min-height:300px}
.op-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#121C33}.op-bar i{width:9px;height:9px;border-radius:50%;background:#E5484D}.op-bar i:nth-child(2){background:#F5B731}.op-bar i:nth-child(3){background:#0E8A55}.op-bar b{font-size:.72rem;color:#A9BAD0;margin-left:6px}
.op-log{padding:12px;display:grid;gap:8px;align-content:start;max-height:330px;overflow:auto;flex:1}
.op-l{display:flex;gap:10px;animation:trIn .35s both;font-size:.82rem;color:#DCE6F2;line-height:1.45}
.op-l>b{flex:none;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:rgba(123,63,228,.3);color:#D9C6FF;font-size:.74rem}
.op-l small{display:block;font-size:.64rem;color:#7F8DA8;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.op-l em{font-style:normal;font-weight:800;color:#fff;background:var(--c);padding:2px 8px;border-radius:99px;display:inline-block}
.op-two{display:grid;gap:12px;margin-top:24px}
.op-pr{border-radius:20px;padding:16px 18px}.op-pr h3{font-size:1.02rem;margin:0 0 8px}.op-pr ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:.88rem;line-height:1.5}
.op-pr.ok{background:#E9F4EE;border:1px solid #BFE6CC;color:#29413A}.op-pr.ok h3{color:#0A6B43}
.op-pr.no{background:#FFF1F1;border:1px solid #F5C2C2;color:#5A2A2A}.op-pr.no h3{color:#B42318}
.op-fmt{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:16px}
.op-fmt div{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px}.op-fmt b{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#3559C7,#0E8A55);color:#fff;font-family:var(--f-display);flex:none}.op-fmt span{font-size:.86rem;font-weight:700;color:var(--navy)}
.op-st{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px;justify-content:center}.op-st span{font-size:.8rem;font-weight:800;color:var(--muted)}.op-st i{font-style:normal;font-size:.74rem;font-weight:800;color:#fff;background:var(--c);padding:4px 10px;border-radius:99px}
.op-rule{margin-top:22px;border-radius:20px;padding:18px;background:linear-gradient(160deg,#0B1F3A,#141B3F);color:#DCE6F2}.op-rule b{color:var(--gold)}.op-rule p{margin:6px 0 12px;line-height:1.6;font-size:.9rem}
.op-3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.op-3 span{display:grid;justify-items:center;gap:4px;text-align:center;font-size:.8rem;font-weight:800;color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:10px 6px}.op-3 i{font-style:normal;font-size:1.3rem}
@media(min-width:760px){.op-dna{grid-template-columns:repeat(3,1fr)}.op-run{grid-template-columns:1fr 1.1fr;align-items:stretch}.op-two{grid-template-columns:1fr 1fr}.op-fmt{grid-template-columns:repeat(4,1fr)}}
@media(prefers-reduced-motion:reduce){.op-av i{animation:none}}

/* LOGIN button */
.lg{position:relative}
.lg-btn{position:relative;display:flex;align-items:center;gap:6px;height:38px;padding:0 14px;border:0;border-radius:999px;font:inherit;font-size:.82rem;font-weight:800;color:#fff;cursor:pointer;white-space:nowrap;background:linear-gradient(135deg,#FF4D4D,#D61F1F 60%,#B01212);box-shadow:0 6px 18px rgba(214,31,31,.45),inset 0 1px 0 rgba(255,255,255,.35);overflow:hidden;animation:lgGlow 2s ease-in-out infinite}
.lg-btn b{letter-spacing:.06em}.lg-btn i{font-style:normal;font-size:.7rem;opacity:.85}.lg-ic{font-size:.9rem}
.lg-btn::before{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid rgba(255,90,90,.8);animation:lgRing 2s ease-out infinite;pointer-events:none}
.lg-btn::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:lgShine 3s ease-in-out infinite}
.lg-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
@keyframes lgGlow{50%{box-shadow:0 8px 26px rgba(255,59,59,.7),inset 0 1px 0 rgba(255,255,255,.35)}}
@keyframes lgRing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}
@keyframes lgShine{0%,55%{left:-60%}100%{left:130%}}
.lg-menu{position:absolute;top:calc(100% + 10px);right:0;width:270px;background:#fff;border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.3);padding:8px;display:grid;gap:2px;z-index:61;animation:stIn .2s ease}
.lg-menu>small{font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:6px 10px 4px}
.lg-menu a{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:12px;text-decoration:none;color:var(--navy)}
.lg-menu a:hover{background:#FFF1F1}
.lg-menu span{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 14%,#fff);flex:none}
.lg-menu b{display:block;font-size:.86rem}.lg-menu em{font-style:normal;font-size:.7rem;color:var(--muted)}
.lg-menu[hidden]{display:none!important}
.lg-btn.sm{height:28px!important;min-height:28px!important;max-height:28px!important;line-height:1;padding:0 12px;font-size:.72rem;font-weight:850;gap:5px;border-radius:999px;box-shadow:0 3px 12px rgba(214,31,31,.45);display:inline-flex;align-items:center;box-sizing:border-box}.lg-btn.sm b{letter-spacing:.08em;font-size:.72rem;font-weight:900}.lg-btn.sm i{font-size:.65rem}
.hv-top{position:relative;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.hv-top .lg{position:static}.hv-top .lg-menu{left:0;right:auto;top:calc(100% + 8px);width:min(280px,100%)}
@media(prefers-reduced-motion:reduce){.lg-btn,.lg-btn::before,.lg-btn::after{animation:none}}

/* LOGIN menu: rapat & fancy */
.lg .lg-menu{padding:6px;gap:0;border-radius:16px;background:#FFF7F7;border:1px solid #FFD9D9;box-shadow:0 18px 44px rgba(11,31,58,.28),0 0 0 4px rgba(255,77,77,.06)}
.lg .lg-menu>small{padding:6px 10px 6px;color:#D61F1F;border-bottom:1px dashed #FFD0D0;margin-bottom:2px}
.lg .lg-menu a{position:relative;gap:10px;padding:7px 10px;border-radius:10px;transition:background .2s,padding .2s}
.lg .lg-menu a span{width:auto;height:auto;background:none!important;font-size:1.15rem;line-height:1;flex:none}
.lg .lg-menu a div{display:grid;gap:0;line-height:1.2}
.lg .lg-menu a b{display:block;font-size:.84rem;color:var(--navy)!important;font-weight:800}
.lg .lg-menu a em{display:block;font-size:.68rem;color:var(--muted)}
.lg .lg-menu a::after{content:"›";margin-left:auto;font-size:1.1rem;color:#E5484D;opacity:0;transform:translateX(-4px);transition:.2s}
.lg .lg-menu a:hover{background:#FFECEC;padding-left:14px}.lg .lg-menu a:hover::after{opacity:1;transform:none}
.lg .lg-menu a::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:linear-gradient(#FF4D4D,#B01212);opacity:0;transition:.2s}.lg .lg-menu a:hover::before{opacity:1}

/* ===== Footer baru ===== */
footer.ft{background:#081629;color:#9FB0C8;font-size:.86rem}
footer.ft .wrap.ft-top{padding-block:36px 26px;display:grid;gap:26px;grid-template-columns:1fr}
.ft-desc{margin-top:6px;max-width:40ch;line-height:1.55}
.ft-cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
footer.ft a.ft-b{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:99px;font-weight:800;font-size:.8rem;border:1px solid rgba(255,255,255,.2);color:#fff}
footer.ft a.ft-b.g{background:var(--money);border-color:var(--money)}footer.ft a.ft-b:hover{filter:brightness(1.1)}
.ft-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 16px}
footer.ft h4{display:flex;align-items:center;gap:6px;color:#fff;font-size:.86rem;margin:0 0 8px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.08)}
footer.ft h4 span{font-size:.95rem}
.ft-col a{display:block;padding:5px 0;color:#B6C3D6;text-decoration:none;transition:.15s}.ft-col a:hover{color:var(--gold);transform:translateX(3px)}
.ft-trust{border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02)}
.ft-trust .wrap{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:center;padding-block:11px;font-size:.78rem;color:#C9D6E8}
.ft-trust span{display:inline-flex!important;align-items:center!important;gap:5px!important}
.ft-trust span svg.ik,.ft-trust span .ik{margin:0!important;flex-shrink:0!important;width:15px!important;height:15px!important}
footer.ft a svg.ik,footer.ft h4 svg.ik{margin-right:6px!important}
footer.ft .wrap.ft-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding-block:16px;font-size:.74rem;color:#7F8DA8}
.ft-bot nav{display:flex;flex-wrap:wrap;gap:4px 14px}.ft-bot nav a{display:inline;padding:0;color:#9FB0C8;text-decoration:none}.ft-bot nav a:hover{color:#fff}
@media(min-width:900px){footer.ft .wrap.ft-top{grid-template-columns:1.1fr 2.4fr;gap:40px}.ft-cols{grid-template-columns:repeat(4,1fr)}}
@media(max-width:600px){footer.ft{padding-bottom:70px}}
/* ===== Legal ===== */
.lgl-hero{background:linear-gradient(160deg,#0B1F3A,#0F3A4A 60%,#0C4A3E);color:#fff;padding:34px 0 28px}.lgl-hero .wrap{display:grid;gap:8px}
.lgl-hero h1{font-size:clamp(1.8rem,6vw,2.8rem);color:#fff;line-height:1.1}.lgl-hero h1 em{font-style:normal;color:var(--gold)}.lgl-hero p{color:#C9D6E8;max-width:640px;line-height:1.6}
.lgl-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}.lgl-meta span{font-size:.72rem;font-weight:700;background:rgba(255,255,255,.1);padding:5px 10px;border-radius:99px}
.lgl-g{display:grid;gap:18px}
.lgl-toc{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.lgl-toc::-webkit-scrollbar{display:none}
.lgl-toc b{display:none}.lgl-toc a{flex:none;font-size:.76rem;font-weight:700;color:var(--navy);text-decoration:none;background:#fff;border:1px solid var(--line);padding:6px 11px;border-radius:99px;white-space:nowrap}
.lgl-toc a:hover{border-color:var(--money);color:var(--money)}.lgl-toc .lgl-sw{background:var(--navy);color:#fff;border-color:var(--navy)}
.lgl-body{display:grid;gap:14px;min-width:0}
.lgl-lead{background:#F7F3E8;border:1px solid #F3D27A;border-radius:18px;padding:14px 16px}.lgl-lead>b{color:#7A5A00}.lgl-lead ul{margin:6px 0 0}
.lgl-s{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 18px;scroll-margin-top:80px}
.lgl-s h2{display:flex;align-items:center;gap:12px;font-size:1.24rem;font-weight:800!important;color:var(--navy)!important;margin:0 0 12px}.lgl-s h2 b{font-weight:800!important;color:var(--navy)!important}.lgl-s h2 i,.lgl-s h2 i.lgl-ico{font-style:normal;width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:#EEF2F6;color:var(--navy);font-size:1rem;flex:none}.lgl-s h2 i svg.ik,.lgl-s h2 i.lgl-ico svg.ik{width:20px!important;height:20px!important;stroke:var(--navy)!important;stroke-width:2!important;display:block!important}
.lgl-s.role h2 i{background:#E9F4EE;color:#0A6B43}.lgl-s.role h2 i svg.ik{stroke:#0A6B43!important}.lgl-s.brand{border-color:#F3D27A;box-shadow:0 10px 26px rgba(245,183,49,.12)}.lgl-s.brand h2 i{background:#FDF4DC;color:#7A5A00}.lgl-s.brand h2 i svg.ik{stroke:#7A5A00!important}
.lgl-s h3{font-size:.92rem;color:var(--navy);margin:14px 0 6px}
.lgl-s p{font-size:.88rem;line-height:1.65;color:#3A4558;margin:0 0 8px}
.lgl-s ul,.lgl-lead ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:.87rem;line-height:1.6;color:#3A4558}
.lgl-tbl{display:grid;gap:8px;margin-bottom:10px}.lgl-tbl div{display:grid;gap:2px;background:#F6F8FB;border-radius:12px;padding:10px 12px}.lgl-tbl b{font-size:.84rem;color:var(--navy)}.lgl-tbl span{font-size:.84rem;color:#4A5668;line-height:1.5}
.lgl-hk{display:grid;gap:10px}.lgl-hk>div{border-radius:14px;padding:12px 14px}.lgl-hk>div>b{display:block;margin-bottom:6px;font-size:.88rem}
.lgl-hk .h{background:#E9F4EE;border:1px solid #BFE6CC}.lgl-hk .h>b{color:#0A6B43}.lgl-hk .k{background:#F4F7FB;border:1px solid #DCE3EE}.lgl-hk .k>b{color:var(--navy)}
.lgl-warn{background:#FFF1F1;border:1px solid #F5C2C2;border-radius:12px;padding:10px 12px;color:#8A1C1C!important;margin-top:10px!important}
.lgl-steps{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px}.lgl-steps span{font-size:.78rem;font-weight:800;background:#FFF1F1;color:#B42318;border:1px solid #F5C2C2;padding:5px 10px;border-radius:99px}
.lgl-rights{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:10px}.lgl-rights div{display:grid;gap:2px;background:#F6F8FB;border-radius:12px;padding:10px 12px}.lgl-rights i{font-style:normal;font-size:1.2rem}.lgl-rights b{font-size:.86rem;color:var(--navy)}.lgl-rights small{font-size:.76rem;color:var(--muted);line-height:1.45}
.lgl-end{display:grid;gap:6px;justify-items:start;border-radius:18px;padding:16px 18px;background:linear-gradient(135deg,#0B1F3A,#0C4A3E);color:#C9D6E8}.lgl-end b{color:var(--gold)}
@media(min-width:900px){.lgl-g{grid-template-columns:240px 1fr;align-items:start}.lgl-toc{position:sticky;top:84px;flex-direction:column;overflow:visible;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px}.lgl-toc b{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:2px 6px 4px}.lgl-toc a{border:0;background:none;padding:6px 8px;border-radius:8px;white-space:normal}.lgl-toc a:hover{background:#F1F4F8}.lgl-toc .lgl-sw{margin-top:6px;text-align:center;border-radius:10px}.lgl-tbl{grid-template-columns:1fr 1fr}.lgl-hk{grid-template-columns:1fr 1fr}.lgl-rights{grid-template-columns:repeat(3,1fr)}}

/* Untuk Brand menu & BigDeal */
.ub-car{font-style:normal;font-size:.6rem;opacity:.8;margin-left:2px}
.bd-hero{background:radial-gradient(60% 80% at 90% 0%,rgba(229,72,77,.35),transparent 60%),radial-gradient(50% 70% at 0% 100%,rgba(255,216,77,.22),transparent 60%),linear-gradient(160deg,#0B1F3A,#2A1530 60%,#0C4A3E);color:#fff;padding:36px 0 32px}
.bd-hero .wrap{display:grid;gap:12px}
.bd-hero h1{font-size:clamp(1.9rem,6.5vw,3.1rem);line-height:1.08;color:#fff}.bd-hero h1 em{font-style:normal;color:var(--gold)}
.bd-lead{color:#D5E1F0;max-width:660px;line-height:1.65}.bd-lead b{color:#fff}
.bd-price{display:flex;flex-wrap:wrap;align-items:center;gap:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,216,77,.4);border-radius:18px;padding:12px 16px;justify-self:start}
.bd-price small{display:block;font-size:.7rem;color:#FFB3B5;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.bd-price b{font-family:var(--f-display);font-size:1.7rem;color:var(--gold)}.bd-price b span{font-size:.85rem;color:#C9D6E8}.bd-price em{display:block;font-style:normal;font-size:.76rem;color:#C9D6E8}
.bd-flow{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px}
.bd-flow>div{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;display:grid;gap:4px;box-shadow:0 8px 22px rgba(11,31,58,.05);animation:sbIn .6s var(--d) both}
.bd-flow>div:last-child{grid-column:1/-1}
.bd-flow i{font-style:normal;font-size:1.5rem}.bd-flow em{position:absolute;top:10px;right:12px;font-style:normal;font-weight:900;font-size:.72rem;color:#fff;background:#E5484D;width:22px;height:22px;border-radius:50%;display:grid;place-items:center}
.bd-flow b{font-size:.95rem;color:var(--navy)}.bd-flow small{font-size:.78rem;color:var(--muted);line-height:1.45}
.bd-feat{display:grid;gap:8px;margin-top:16px}
.bd-f{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 13px}
.bd-f>i{font-style:normal;font-size:1.3rem;line-height:1.2;flex:none}.bd-f b{display:block;font-size:.88rem;color:var(--navy)}.bd-f small{font-size:.76rem;color:var(--muted);line-height:1.45}
.bd-f b span{margin-left:6px;font-size:.6rem;font-weight:900;color:#3559C7;background:#F3ECFF;padding:2px 7px;border-radius:99px;vertical-align:middle}.bd-f b span.fr{color:#0A6B43;background:#E9F4EE}
.bd-plan{display:grid;gap:14px;margin-top:24px}
.bd-pl{position:relative;background:#fff;border:2px solid var(--gold);border-radius:22px;padding:20px 18px;box-shadow:0 16px 38px rgba(245,183,49,.22);display:grid;gap:6px}
.bd-tag{position:absolute;top:-12px;left:18px;font-size:.7rem;font-weight:900;background:#E5484D;color:#fff;padding:4px 12px;border-radius:99px}
.bd-pl h3{margin:4px 0 0;color:var(--navy)}.bd-pp{font-family:var(--f-display);font-size:2.2rem;color:#E5484D;margin:0}.bd-pp small{font-size:.9rem;color:var(--muted)}.bd-pq{margin:0;font-weight:800;color:var(--navy);font-size:.86rem}
.bd-pl ul{margin:6px 0 10px;padding-left:18px;display:grid;gap:5px;font-size:.86rem;color:#3A4558}.bd-ad{font-size:.72rem;color:var(--muted)}
.bd-why{border-radius:22px;padding:20px 18px;background:linear-gradient(160deg,#0B1F3A,#2A1530);color:#DCE6F2}.bd-why h3{color:#fff;margin:0 0 8px}.bd-why p{line-height:1.65;font-size:.9rem;margin:0}.bd-why b{color:var(--gold)}
.bd-chk{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.bd-chk span{font-size:.76rem;font-weight:800;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:5px 10px;border-radius:99px}
@media(min-width:760px){.bd-flow{grid-template-columns:repeat(5,1fr)}.bd-flow>div:last-child{grid-column:auto}.bd-feat{grid-template-columns:repeat(3,1fr)}.bd-plan{grid-template-columns:1fr 1.3fr;align-items:center}}

/* footer font lebih kecil + sitemap */
footer.ft{font-size:.8rem}footer.ft h4{font-size:.8rem}.ft-col a{padding:4px 0;font-size:.79rem}.ft-desc{font-size:.78rem}footer.ft a.ft-b{font-size:.74rem;padding:7px 12px}.ft-trust .wrap{font-size:.7rem}footer.ft .wrap.ft-bot{font-size:.7rem}footer.ft .ft-brand p[style]{font-size:1rem!important}
.smp{display:grid;gap:14px}
.smp-g{background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px;display:grid;gap:2px;border-top:4px solid var(--c)}
.smp-g h2{display:flex;align-items:center;gap:8px;font-size:1rem;color:var(--navy);margin:2px 4px 8px}.smp-g h2 em{margin-left:auto;font-style:normal;font-size:.7rem;color:#fff;background:var(--c);padding:2px 8px;border-radius:99px}
.smp-g a{display:grid;grid-template-columns:1fr auto;align-items:center;padding:8px 10px;border-radius:10px;text-decoration:none;color:var(--navy)}
.smp-g a b{font-size:.86rem}.smp-g a small{grid-column:1;font-size:.72rem;color:var(--muted)}.smp-g a i{grid-row:1/3;grid-column:2;font-style:normal;color:var(--c);font-size:1.1rem;opacity:.6;transition:.2s}
.smp-g a:hover{background:color-mix(in srgb,var(--c) 8%,#fff)}.smp-g a:hover i{opacity:1;transform:translateX(3px)}
@media(min-width:760px){.smp{grid-template-columns:repeat(3,1fr);align-items:start}}

/* BigDeal vs Evermos */
.ev-hook{background:linear-gradient(90deg,#E5484D,#C9320F 45%,#F5B731);color:#fff;padding:22px 0}
.ev-hook .wrap{display:grid;gap:14px}
.ev-k{display:inline-block;font-size:.7rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;background:rgba(0,0,0,.2);padding:4px 10px;border-radius:99px}
.ev-h h2{font-size:clamp(1.4rem,5vw,2.2rem);color:#fff;margin:6px 0 4px;line-height:1.1}.ev-h h2 em{font-style:normal;color:#0B1F3A;background:var(--gold);padding:0 8px;border-radius:8px}
.ev-h p{margin:0;font-weight:700;color:#FFF3E0}
.ev-st{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.ev-st div{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);border-radius:14px;padding:10px 12px;animation:evPop .6s var(--d) both}
.ev-st b{display:block;font-family:var(--f-display);font-size:1.6rem;line-height:1}.ev-st small{font-size:.74rem;font-weight:700;color:#FFF3E0}
@keyframes evPop{from{opacity:0;transform:translateY(10px) scale(.95)}}
.ev-tb{margin-top:16px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 12px 30px rgba(11,31,58,.07)}
.ev-r{display:grid;grid-template-columns:1fr;gap:4px;padding:12px 14px;border-top:1px solid var(--line)}
.ev-r:first-child{border-top:0}
.ev-hd{display:none}
.ev-r .a{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--navy);font-size:.84rem}.ev-r .a i{font-style:normal}
.ev-r .sl{position:relative;background:#E9F4EE;border-radius:10px;padding:8px 10px 8px 32px;font-size:.84rem;color:#1F3B2C;line-height:1.45}.ev-r .sl b{color:#0A6B43}
.ev-r .sl em{position:absolute;left:10px;top:8px;font-style:normal;font-weight:900;color:#fff;background:var(--money);width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:.62rem}
.ev-r .ev,.ev-r .tt{font-size:.8rem;color:var(--muted);padding:2px 10px}.ev-r .ev::before{content:"Evermos: ";font-weight:800;color:#8A94A6}.ev-r .tt::before{content:"TikTok: ";font-weight:800;color:#8A94A6}
.ev-3{display:grid;gap:12px;margin-top:16px}
.ev-c{border-radius:20px;padding:16px 18px;display:grid;gap:6px;align-content:start}.ev-c i{font-style:normal;font-size:1.6rem}.ev-c b{font-size:1rem}.ev-c ul{margin:0;padding-left:18px;display:grid;gap:5px;font-size:.85rem;line-height:1.5}
.ev-c.k{background:#EEF5FF;border:1px solid #CFE0FA;color:#2C3E57}.ev-c.k b{color:#1B74E4}
.ev-c.d{background:#E9F4EE;border:1px solid #BFE6CC;color:#29413A}.ev-c.d b{color:#0A6B43}
.ev-c.u{background:linear-gradient(160deg,#0B1F3A,#2A1530);color:#DCE6F2}.ev-c.u>b{color:var(--gold)}.ev-c.u li b{color:#fff}
@media(min-width:760px){.ev-hook .wrap{grid-template-columns:1.2fr 1fr;align-items:center}.ev-hd{display:grid;background:#0B1F3A;color:#fff;font-weight:800;font-size:.8rem}.ev-hd .sl{background:none;color:var(--gold);padding-left:10px}
 .ev-r{grid-template-columns:.9fr 1.6fr 1fr 1fr;align-items:center;gap:12px}.ev-r .ev::before,.ev-r .tt::before{content:none}.ev-r:nth-child(even):not(.ev-hd){background:#FAFBFD}.ev-3{grid-template-columns:repeat(3,1fr)}}
.ev-ch{background:#0B1F3A;color:#fff;padding:16px 0}.ev-ch .wrap{display:grid;gap:10px;justify-items:center;text-align:center}.ev-ch b{font-size:.95rem}.ev-ch small{font-size:.76rem;color:#A9BAD0}
.ev-lg{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.ev-lg span{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;color:#DCE6F2;padding:4px 10px 4px 4px;border-radius:99px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);animation:evPop .5s var(--d) both}
.ev-lg i{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex:none}.ev-lg i svg{width:14px;height:14px}

.ft-col a{display:flex!important;align-items:center;gap:7px}.ft-col .fi{font-style:normal;font-size:.78rem;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;background:rgba(255,255,255,.06);flex:none;transition:.2s}.ft-col a:hover .fi{background:rgba(255,216,77,.2);transform:scale(1.1)}
.smp-g a{grid-template-columns:auto 1fr auto!important;column-gap:10px}.smp-g a .smi{grid-row:1/3;grid-column:1;font-style:normal;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 12%,#fff);font-size:.95rem;opacity:1!important;color:inherit}
.smp-g a b,.smp-g a small{grid-column:2!important}.smp-g a .smr{grid-row:1/3;grid-column:3!important;font-style:normal;color:var(--c);font-size:1.1rem;opacity:.6;transition:.2s}.smp-g a:hover .smr{opacity:1;transform:translateX(3px)}
.ft-col .fi,footer.ft h4 span{color:transparent!important;text-shadow:0 0 0 #7CC4FF;background:rgba(124,196,255,.1)!important}footer.ft h4 span{background:none!important}.ft-col a:hover .fi{text-shadow:0 0 0 #B5DEFF;background:rgba(124,196,255,.2)!important}

.dv-hero{background:radial-gradient(60% 80% at 90% 0%,rgba(14,116,144,.45),transparent 60%),radial-gradient(50% 70% at 0% 100%,rgba(255,216,77,.2),transparent 60%),linear-gradient(160deg,#0B1F3A,#0E2F4A 55%,#0C4A3E);color:#fff;padding:36px 0 30px}.dv-hero .wrap{display:grid;gap:12px}
.dv-hero h1{font-size:clamp(1.9rem,6.5vw,3.1rem);line-height:1.08;color:#fff}.dv-hero h1 em{font-style:normal;color:var(--gold)}
.dv-lead{color:#D5E1F0;max-width:680px;line-height:1.65}.dv-lead b{color:#fff}
.dv-big{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:620px}.dv-big div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:10px 12px}.dv-big small{display:block;font-size:.68rem;color:#A9BAD0;font-weight:700}.dv-big b{font-family:var(--f-display);font-size:1.25rem;color:var(--gold)}
.dv-vs{display:grid;gap:10px;margin-top:4px}.dv-vs>div{border-radius:16px;padding:14px 16px}.dv-vs p{margin:4px 0 0;font-size:.88rem;line-height:1.55}
.dv-vs .o{background:#F6F7F9;border:1px solid var(--line);color:var(--muted)}.dv-vs .n{background:#E6F6FA;border:1px solid #A9DCE8;color:#164E5E}.dv-vs .n>b{color:#0E7490}
.dv-fl em{background:#0E7490!important}
.dv-tier{margin-top:18px;border-radius:20px;padding:16px 18px;background:linear-gradient(160deg,#0B1F3A,#0E2F4A);color:#DCE6F2}.dv-tier h3{color:#fff;margin:0 0 10px;font-size:1.02rem}
.dv-tier>div{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.dv-tier span{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:10px;text-align:center}.dv-tier span small{display:block;font-size:.7rem;color:#A9BAD0}.dv-tier span b{display:block;font-family:var(--f-display);font-size:1.3rem;color:var(--gold)}.dv-tier span em{font-style:normal;font-size:.66rem;color:#A9BAD0}
.dv-tier p{margin:10px 0 0;font-size:.8rem;line-height:1.55;color:#C9D6E8}
@media(min-width:760px){.dv-vs{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.dv-big b{font-size:1rem}}

/* UX pack */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.tl-h{display:block;font-size:.7rem;font-weight:500;color:var(--muted);line-height:1.4;margin-top:2px}
.ckc .tl-h{color:inherit;opacity:.72}
.tl-ks{border-radius:14px;padding:10px 12px;background:#F7F3E8;border:1px solid #F3D27A;font-size:.82rem;line-height:1.55;color:#4A3B0E}.tl-ks>b{display:block;color:#7A5A00;font-size:.78rem;margin-bottom:2px}.tl-ks span b{color:#0A6B43}
.to-top{position:fixed;right:16px;bottom:92px;z-index:55;width:42px;height:42px;border-radius:50%;border:0;background:var(--navy);color:#fff;font-size:1.1rem;font-weight:900;box-shadow:0 8px 20px rgba(11,31,58,.35);cursor:pointer;opacity:0;transform:translateY(10px);pointer-events:none;transition:.25s}
.to-top.on{opacity:.92;transform:none;pointer-events:auto}.to-top:hover{background:var(--money)}
@media(min-width:900px){.to-top{bottom:24px}}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #7CC4FF;outline-offset:2px}
@supports not (color:color-mix(in srgb,red 50%,white)){.lg-menu span,.smp-g a .smi{background:#F1F4F8!important}.smp-g a:hover{background:#F6F8FB}}

/* positioning band */
.pos{background:#fff;border-bottom:1px solid var(--line);padding:16px 0}.pos .wrap{display:grid;gap:12px}
.pos-k{display:block;font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--money)}.pos-l b{font-family:var(--f-display);font-size:clamp(1.1rem,3.6vw,1.5rem);color:var(--navy);line-height:1.25}.pos-l em{font-style:normal;background:linear-gradient(transparent 60%,#FFE47A 60%)}
.pos-3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.pos-3 div{border:1px solid var(--line);border-radius:14px;padding:10px;display:grid;gap:2px;background:#FAFBFD}.pos-3 i{font-style:normal;font-size:1.2rem}.pos-3 b{font-size:.82rem;color:var(--navy)}.pos-3 small{font-size:.7rem;color:var(--muted);line-height:1.4}
.pos-3 .on{border-color:var(--money);background:#E9F4EE;box-shadow:0 6px 16px rgba(18,161,80,.12)}
@media(min-width:900px){.pos .wrap{grid-template-columns:1fr 1.3fr;align-items:center}}
@media(max-width:420px){.pos-3 small{display:none}}
/* iklan vs sukalokal */
.ivs-sec{background:var(--bg)}
.ivs{margin-top:16px;gap:16px}.ivs-in{display:grid;gap:10px}
.ivs-out{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ivs-col{border-radius:16px;padding:12px;display:grid;gap:6px;align-content:start}.ivs-col h3{margin:0 0 4px;font-size:.95rem}.ivs-col h3 small{font-weight:600;font-size:.7rem;opacity:.8}
.ivs-col>div{display:flex;justify-content:space-between;gap:8px;font-size:.78rem;border-bottom:1px dashed rgba(0,0,0,.08);padding-bottom:5px}.ivs-col>div span{color:var(--muted)}.ivs-col>div b{text-align:right;color:var(--navy);font-variant-numeric:tabular-nums}
.ivs-col .t{border:0;padding-top:4px}.ivs-col .t b{font-size:1rem}
.ivs-col.ad{background:#F4F6F9;border:1px solid #DDE3EB}.ivs-col.ad h3{color:#5B6676}
.ivs-col.sl{background:#E9F4EE;border:2px solid var(--money)}.ivs-col.sl h3{color:#0A6B43}.ivs-col.sl .t b{color:#0A6B43}
.ivs-bar{display:grid;gap:8px}.ivs-bar>div{display:grid;grid-template-columns:150px 1fr 60px;align-items:center;gap:8px;font-size:.78rem;color:var(--muted)}
.ivs-bar i{height:14px;border-radius:99px;background:#EEF1F5;overflow:hidden;display:block}.ivs-bar em{display:block;height:100%;width:0;border-radius:inherit;background:#9FB0C8;transition:width .6s cubic-bezier(.2,.8,.2,1)}.ivs-bar em.g{background:linear-gradient(90deg,#0E8A55,#8BE0B7)}.ivs-bar b{color:var(--navy);text-align:right}
@media(min-width:900px){.ivs{grid-template-columns:1fr 1.5fr}.ivs .tl-ks,.ivs-bar,.ivs>.tiny{grid-column:1/-1}.ivs>h2{grid-column:1/-1}}
@media(max-width:480px){.ivs-out{grid-template-columns:1fr}.ivs-bar>div{grid-template-columns:110px 1fr 44px}}
/* tentang kami */
.ab-hero{background:radial-gradient(60% 80% at 90% 0%,rgba(255,216,77,.25),transparent 60%),linear-gradient(160deg,#0B1F3A,#0F3A4A 60%,#0C4A3E);color:#fff;padding:36px 0 30px}.ab-hero .wrap{display:grid;gap:12px}
.ab-hero h1{font-size:clamp(1.8rem,6vw,2.9rem);line-height:1.1;color:#fff}.ab-hero h1 em{font-style:normal;color:var(--gold)}.ab-hero p{color:#D5E1F0;max-width:680px;line-height:1.65}.ab-hero p b{color:#fff}
.ab-pos{justify-self:start;background:rgba(255,255,255,.08);border:1px solid rgba(255,216,77,.4);border-radius:14px;padding:10px 14px}.ab-pos span{display:block;font-size:.66rem;color:#A9BAD0;font-weight:800;text-transform:uppercase;letter-spacing:.1em}.ab-pos b{color:var(--gold)}
.ab-ppl{display:grid;gap:14px;margin-top:16px}
.ab-p{display:grid;gap:14px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:0 12px 30px rgba(11,31,58,.07)}
.ab-p.hy{border:2px solid var(--gold);box-shadow:0 16px 36px rgba(245,183,49,.2)}
.ab-av{width:84px;height:84px;border-radius:24px;display:grid;place-items:center;font-family:var(--f-display);font-weight:900;font-size:1.6rem;color:#fff;background:linear-gradient(135deg,#E5484D,#F5B731)}.ab-p.ru .ab-av{background:linear-gradient(135deg,#1B74E4,#0E8A55)}
.ab-tx small{font-size:.7rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--money)}.ab-tx h3{margin:2px 0;font-size:1.35rem;color:var(--navy)}.ab-q{margin:0 0 8px;font-weight:800;color:#B07A00}
.ab-tx p{font-size:.88rem;line-height:1.65;color:#3A4558;margin:0 0 8px}
.ab-tags{display:flex;flex-wrap:wrap;gap:6px}.ab-tags span{font-size:.72rem;font-weight:800;background:#F4F7FB;border:1px solid var(--line);padding:4px 10px;border-radius:99px;color:var(--navy)}
.ab-mis{display:grid;gap:10px;margin-top:14px}.ab-mis div{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;display:grid;gap:4px}.ab-mis i{font-style:normal;font-size:1.5rem}.ab-mis b{color:var(--navy)}.ab-mis small{color:var(--muted);font-size:.82rem;line-height:1.5}
.ab-val{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}.ab-val span{display:grid;gap:2px;background:#E9F4EE;border:1px solid #BFE6CC;border-radius:14px;padding:10px 12px}.ab-val i{font-style:normal}.ab-val b{font-size:.86rem;color:#0A6B43}.ab-val small{font-size:.74rem;color:#29413A}
@media(min-width:760px){.ab-p{grid-template-columns:auto 1fr}.ab-ppl{grid-template-columns:1fr 1fr}.ab-mis{grid-template-columns:repeat(3,1fr)}.ab-val{grid-template-columns:repeat(4,1fr)}}

/* Kontak */
.kt-hero{background:radial-gradient(60% 80% at 90% 0%,rgba(240,68,32,.3),transparent 60%),linear-gradient(160deg,#0B1F3A,#0F3A4A 60%,#0C4A3E);color:#fff;padding:34px 0 28px}.kt-hero .wrap{display:grid;gap:10px}
.kt-hero h1{font-size:clamp(1.8rem,6vw,2.8rem);color:#fff;line-height:1.1;font-weight:850!important}.kt-hero h1 em{font-style:normal;color:var(--gold);font-weight:850!important}.kt-hero h1 b{font-weight:850!important}.kt-hero p{color:#D5E1F0;max-width:660px;line-height:1.6}
.kt-badges{display:flex;flex-wrap:wrap;gap:6px}.kt-badges span{font-size:.74rem;font-weight:800;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);padding:5px 10px;border-radius:99px}
.kt-g{display:grid;gap:16px}
.kt-side{display:grid;gap:12px;align-content:start}.kt-box{border-radius:18px;padding:14px 16px;background:#F7F3E8;border:1px solid #F3D27A;color:#4A3B0E}.kt-box h3{margin:0 0 8px;font-size:1.02rem;font-weight:800!important;color:#7A5A00}.kt-box h3 b{font-weight:800!important}.kt-box ol{margin:0;padding-left:18px;display:grid;gap:6px;font-size:.84rem;line-height:1.5}.kt-box.g{background:#E9F4EE;border-color:#BFE6CC;color:#29413A}.kt-box.g h3{color:#0A6B43;font-weight:800!important}.kt-box.g h3 b{font-weight:800!important}
.kt-form{background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px;display:grid;gap:14px;box-shadow:0 14px 34px rgba(11,31,58,.07)}
.kt-form fieldset{border:0;padding:0;margin:0;display:grid;gap:10px}.kt-form legend{font-weight:900;color:var(--navy);font-size:.95rem;margin-bottom:6px;padding:0}
.kt-form label{display:grid;gap:5px;font-size:.8rem;font-weight:700;color:var(--navy)}
.kt-form input:not([type=checkbox]),.kt-form select,.kt-form textarea{font:inherit;font-size:.9rem;font-weight:500;width:100%;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);background:#FAFBFD;color:var(--ink);box-sizing:border-box}
.kt-form input:focus,.kt-form select:focus,.kt-form textarea:focus{border-color:var(--money);background:#fff;outline:none;box-shadow:0 0 0 3px rgba(18,161,80,.15)}
.kt-2,.kt-3{display:grid;gap:10px}
.kt-chk{display:flex;flex-wrap:wrap;gap:6px}.kt-chk label{display:inline-flex!important;cursor:pointer}.kt-chk input{position:absolute;opacity:0;pointer-events:none}.kt-chk span{font-size:.78rem;font-weight:700;padding:7px 12px;border-radius:99px;border:1.5px solid var(--line);background:#fff;transition:.15s}.kt-chk input:checked+span{background:#E9F4EE;border-color:var(--money);color:#0A6B43}.kt-chk input:checked+span::before{content:"✓ "}.kt-chk input:focus-visible+span{outline:3px solid #7CC4FF}
.kt-agree{display:flex!important;gap:8px;align-items:flex-start;font-weight:500!important;font-size:.8rem!important;line-height:1.5}.kt-agree input{margin-top:3px;width:18px;height:18px;accent-color:var(--money);flex:none}
.kt-bad input,.kt-bad select,input.kt-bad,.kt-chk.kt-bad span{border-color:#E5484D!important;background:#FFF5F5!important}.kt-agree.kt-bad{color:#B42318}
.kt-err{margin:0;background:#FFF1F1;border:1px solid #F5C2C2;color:#B42318;border-radius:12px;padding:10px 12px;font-size:.84rem;font-weight:700}
.kt-ok{background:#fff;border:2px solid var(--money);border-radius:22px;padding:18px;display:grid;gap:12px;box-shadow:0 14px 34px rgba(18,161,80,.15)}
.kt-okh{display:flex;gap:12px;align-items:center}.kt-okh>span{font-size:2rem}.kt-okh b{display:block;color:#0A6B43;font-size:1.05rem}.kt-okh small{color:var(--muted);font-size:.84rem;line-height:1.5}
.kt-sum{display:grid;gap:4px}.kt-sum div{display:grid;grid-template-columns:130px 1fr;gap:8px;font-size:.82rem;padding:6px 0;border-bottom:1px dashed var(--line)}.kt-sum span{color:var(--muted)}.kt-sum b{color:var(--navy)}
.kt-act{display:flex;flex-wrap:wrap;gap:8px}
@media(min-width:700px){.kt-2{grid-template-columns:1fr 1fr}.kt-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.kt-g{grid-template-columns:330px 1fr;align-items:start}.kt-side{position:sticky;top:84px}.kt-form,.kt-ok{grid-column:2}.kt-ok{grid-row:1}}

.kt-badges .bd{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.kt-box.bd{background:linear-gradient(160deg,#0B1F3A,#2A1530);border:2px solid var(--gold);color:#DCE6F2}.kt-box.bd h3{color:var(--gold)}.kt-box.bd p{margin:0 0 8px;font-size:.84rem;line-height:1.55}.kt-box.bd b{color:#fff}.kt-box.bd a{font-size:.82rem;font-weight:800;color:var(--gold)}
.kt-chk .lock span{background:#F7F1E1!important;border-color:var(--gold)!important;color:#7A5A00!important;cursor:default}.kt-chk .lock input:checked+span::before{content:"🔒 "}
.kt-hyb{border-radius:16px;padding:12px 14px;background:#FFF1F1;border:1px solid #F5C2C2;display:grid;gap:8px}
.kt-hyb-h{display:flex;gap:10px;align-items:center}.kt-hyb-h>span{width:36px;height:36px;border-radius:10px;background:#FF0000;color:#fff;display:grid;place-items:center;flex:none}.kt-hyb-h b{display:block;color:var(--navy);font-size:.9rem}.kt-hyb-h small{font-size:.74rem;color:var(--muted);font-weight:500}
.kt-rad input:checked+span{background:#FFE4E4;border-color:#E5484D;color:#B42318}.kt-rad input:checked+span::before{content:"● "}
.kt-hyb-n{font-size:.72rem;color:#8A4B4B;font-weight:500;line-height:1.45}

/* ===== Halaman Daftarkan Brand (BigDeal Store) - SukaLOKAL Theme ===== */
.db-sec{background:radial-gradient(75% 65% at 85% 10%,rgba(14,138,85,.22),transparent 60%),radial-gradient(55% 55% at 15% 90%,rgba(255,216,77,.12),transparent 50%),linear-gradient(160deg,#0B1F3A 0%,#122849 50%,#0B2B28 100%);color:#fff;padding:44px 0 68px;min-height:80vh}
.db-wrap{max-width:1140px;margin-inline:auto;padding-inline:16px}
.db-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:36px;align-items:start}
@media(max-width:900px){.db-grid{grid-template-columns:1fr;gap:28px}}
.db-left{display:grid;gap:16px}
.db-ey{justify-self:start;font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:rgba(14,138,85,.3);border:1px solid rgba(14,138,85,.6);color:#A3E4D7;padding:6px 14px;border-radius:99px}
.db-left h1{font-family:var(--f-display);font-size:clamp(1.85rem,5vw,2.75rem);font-weight:800;line-height:1.15;color:#fff;margin:0}
.db-left h1 em{font-style:normal;color:var(--gold)}
.db-sub{color:#D3E2EE;font-size:.98rem;line-height:1.65;margin:0}
.db-benefits{display:grid;gap:10px;margin-top:6px}
.db-benefit-item{display:flex;align-items:flex-start;gap:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:11px 14px;font-size:.88rem;color:#E2ECF6;backdrop-filter:blur(8px)}
.db-benefit-item i{font-style:normal;font-size:1.15rem;flex:none}
.db-quote{background:rgba(14,138,85,.12);border-left:3px solid #0E8A55;border-radius:12px;padding:14px 16px;margin-top:6px;font-size:.86rem;line-height:1.55;color:#C8E5D8}
.db-quote b{color:#fff}
.db-pts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.db-pts span{font-size:.74rem;font-weight:700;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);padding:5px 12px;border-radius:99px;color:#E2ECF6}

/* Card Form Brand */
.db-card{background:#ffffff;color:var(--navy);border-radius:22px;padding:28px 24px;box-shadow:0 20px 48px rgba(11,31,58,.28);border:1px solid rgba(255,255,255,.4)}
.db-card-hd h2{font-family:var(--f-display);font-size:1.4rem;font-weight:800;color:var(--navy);margin:0 0 4px}
.db-card-hd p{color:var(--muted);font-size:.86rem;margin:0 0 18px;line-height:1.5}
.db-form{display:grid;gap:14px}
.db-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.db-row{grid-template-columns:1fr}}
.db-field{display:grid;gap:4px}
.db-field label{font-size:.84rem;font-weight:700;color:#1E293B}
.db-field label span.req{color:#E5484D}
.db-field input,.db-field select,.db-field textarea{font:inherit;font-size:.92rem;padding:10px 13px;border-radius:10px;border:1.5px solid #CBD5E1;background:#F8FAFC;color:#0F172A;width:100%;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}
.db-field input:focus,.db-field select:focus,.db-field textarea:focus{border-color:#0E8A55;background:#ffffff;outline:3px solid rgba(14,138,85,.15)}
.db-field input::placeholder{color:#94A3B8}
.db-sub-prev{background:#ECFDF5;border:1px solid #A7F3D0;color:#065F46;border-radius:8px;padding:5px 10px;font-size:.78rem;font-weight:600;font-family:ui-monospace,Consolas,monospace;margin-top:2px}
.db-input-wa{display:flex}
.db-input-wa span{display:grid;place-items:center;background:#E2E8F0;border:1.5px solid #CBD5E1;border-right:none;border-radius:10px 0 0 10px;padding:0 11px;font-weight:700;font-size:.88rem;color:#475569}
.db-input-wa input{border-radius:0 10px 10px 0}
.db-agree{display:flex;align-items:flex-start;gap:8px;font-size:.8rem;color:#475569;line-height:1.45;cursor:pointer;margin-top:4px}
.db-agree input{margin-top:3px;accent-color:#0E8A55}
.db-hcap{display:flex;justify-content:center;margin:6px 0;min-height:78px}
.db-submit-btn{font:inherit;font-weight:800;font-size:1rem;padding:13px 18px;border:0;border-radius:12px;background:linear-gradient(135deg,#0E8A55,#0A6B43);color:#fff;cursor:pointer;box-shadow:0 8px 20px rgba(14,138,85,.28);transition:all .2s;width:100%}
.db-submit-btn:hover{background:linear-gradient(135deg,#109D61,#0E8A55);transform:translateY(-1px)}
.db-foot{text-align:center;font-size:.8rem;color:#64748B;margin-top:12px;line-height:1.5}
.db-foot a{color:var(--navy);font-weight:700;text-decoration:underline}

/* ===== Halaman /daftar (Daftar Mitra Promotor & Dropshipper) ===== */
.rg-sec{padding:34px 16px 54px;max-width:500px;margin-inline:auto}
.rg-card{background:#ffffff;border-radius:22px;padding:28px 24px;box-shadow:0 16px 40px rgba(11,31,58,.12);border:1px solid var(--line)}
.rg-card-hd h1{font-family:var(--f-display);font-size:1.85rem;font-weight:800;color:var(--navy);margin:0 0 4px}
.rg-card-hd p{color:var(--muted);font-size:.88rem;margin:0 0 18px;line-height:1.5}
.rg-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#F1F5F9;padding:4px;border-radius:12px;margin-bottom:18px}
.rg-tab{font:inherit;font-size:.84rem;font-weight:700;padding:9px 12px;border-radius:9px;border:0;background:transparent;color:#64748B;cursor:pointer;transition:.15s}
.rg-tab.on{background:#ffffff;color:var(--navy);box-shadow:0 2px 8px rgba(11,31,58,.08)}
.rg-info-pill{background:#EFF6FF;border:1px solid #BFDBFE;border-radius:12px;padding:10px 14px;font-size:.8rem;color:#1E40AF;line-height:1.5;margin-bottom:16px;text-align:center}
.rg-info-pill b{color:#0A6B43}
.rg-pass-wrap{position:relative;display:flex;align-items:center;width:100%}
.rg-pass-wrap input{width:100%;padding-right:44px!important}
.rg-pass-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#64748B;padding:6px;display:inline-flex;align-items:center;justify-content:center;transition:color .15s ease;z-index:2}
.rg-pass-toggle:hover{color:#0E8A55}
.rg-pass-toggle svg{width:18px;height:18px;display:block}
.rg-note{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:10px;padding:9px 12px;font-size:.74rem;color:#64748B;line-height:1.45;margin-top:10px}
.rg-succ{text-align:center;padding:20px 10px;display:grid;gap:12px}
.rg-succ-ic{width:64px;height:64px;border-radius:50%;background:#DCFCE7;color:#16A34A;display:grid;place-items:center;font-size:2rem;margin-inline:auto}
.rg-succ h3{margin:0;font-size:1.25rem;color:var(--navy)}

/* Header Auth & User Menu */
.hd-auth-wrap{display:flex;align-items:center;margin-left:4px;position:relative}
.hd-login-menu{position:relative}
.hd-login-btn{display:inline-flex;align-items:center;gap:6px;height:38px;min-height:38px;padding:0 16px;border-radius:999px;background:#F0FDF4;border:1.5px solid #BBF7D0;color:#0E8A55;font-size:0.82rem;font-weight:800;text-decoration:none;transition:all .15s;cursor:pointer;font-family:inherit;line-height:1;box-sizing:border-box}
.hd-login-btn:hover,.hd-login-btn[aria-expanded="true"]{background:#DCFCE7;border-color:#86EFAC;color:#0F5132;box-shadow:0 3px 10px rgba(14,138,85,.15)}
.hd-login-caret{font-size:0.75rem;margin-left:1px;color:#15803D;transition:transform .15s ease}
.hd-login-btn[aria-expanded="true"] .hd-login-caret{transform:rotate(180deg)}
.hd-login-dropdown{position:absolute;right:0;left:auto;top:calc(100% + 8px);width:280px;z-index:100;animation:hdUdIn .18s ease-out}
@media(max-width:480px){.hd-login-dropdown{right:-6px;width:min(280px,calc(100vw - 20px))}}
.hd-user-menu{position:relative}
.hd-user-btn{display:inline-flex;align-items:center;gap:8px;height:38px;min-height:38px;padding:0 12px 0 6px;background:#FFFFFF;border:1.5px solid #CBD5E1;border-radius:999px;font:inherit;font-size:0.82rem;font-weight:800;color:var(--navy);cursor:pointer;transition:all .15s;box-shadow:0 2px 6px rgba(11,31,58,.06);box-sizing:border-box}
.hd-user-btn:hover,.hd-user-btn[aria-expanded="true"]{border-color:#0E8A55;box-shadow:0 4px 12px rgba(14,138,85,.15)}
.hd-user-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#0E8A55,#16A34A);color:#FFFFFF;display:grid;place-items:center;font-size:0.75rem;font-weight:800;letter-spacing:.5px}
.hd-user-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hd-user-caret{font-size:0.7rem;color:#64748B;transition:transform .15s}
.hd-user-btn[aria-expanded="true"] .hd-user-caret{transform:rotate(180deg)}
.hd-user-dropdown{position:absolute;right:0;top:calc(100% + 8px);width:260px;background:#FFFFFF;border:1px solid #E2E8F0;border-radius:16px;box-shadow:0 12px 32px rgba(11,31,58,.16);padding:8px;z-index:99;animation:hdUdIn .18s ease-out}
@keyframes hdUdIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.hd-ud-header{padding:10px 12px 8px;display:flex;gap:10px;align-items:flex-start}
.hd-ud-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#0E8A55,#16A34A);color:#fff;display:grid;place-items:center;font-size:0.85rem;font-weight:800;flex-shrink:0}
.hd-ud-info{min-width:0;flex:1}
.hd-ud-name{display:block;font-size:0.88rem;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hd-ud-email{display:block;font-size:0.75rem;color:#64748B;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.hd-ud-badge{display:inline-flex;align-items:center;gap:4px;font-size:0.68rem;font-weight:800;color:#0E8A55;background:#F0FDF4;padding:2px 7px;border-radius:99px;margin-top:5px;border:1px solid #DCFCE7}
.hd-ud-divider{height:1px;background:#F1F5F9;margin:6px 0}
.hd-ud-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;font-size:0.83rem;font-weight:600;color:#334155;text-decoration:none;transition:background .12s,color .12s;border:none;background:transparent;width:100%;cursor:pointer;text-align:left}
.hd-ud-item:hover{background:#F8FAFC;color:#0E8A55}
.hd-ud-item svg{color:#64748B;flex-shrink:0;transition:color .12s}
.hd-ud-item:hover svg{color:#0E8A55}
.hd-ud-ext{font-size:0.75rem;color:#94A3B8;margin-left:auto}
.hd-ud-logout{color:#DC2626}
.hd-ud-logout:hover{background:#FEF2F2;color:#B91C1C}
.hd-ud-logout svg{color:#DC2626}
.hd-ud-logout:hover svg{color:#B91C1C}

/* Akun Mitra Profile Page */
.ak-sec{padding:36px 0 60px;background:radial-gradient(800px 300px at 50% 0%,#F0FDF4 0,transparent 70%),#FAFBFD;min-height:80vh}
.ak-wrap{max-width:960px;margin-inline:auto;padding-inline:16px;display:grid;gap:20px}
.ak-header-card{background:#FFFFFF;border:1px solid #E2E8F0;border-radius:24px;padding:28px 24px;box-shadow:0 12px 36px rgba(11,31,58,.06);display:grid;gap:20px}
.ak-profile-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ak-avatar{width:68px;height:68px;border-radius:50%;background:linear-gradient(135deg,#0E8A55,#16A34A);color:#FFFFFF;display:grid;place-items:center;font-size:1.6rem;font-weight:900;letter-spacing:1px;box-shadow:0 8px 20px rgba(14,138,85,.25);flex-shrink:0}
.ak-info{min-width:0;flex:1}
.ak-badge-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.ak-badge{display:inline-flex;align-items:center;gap:5px;font-size:0.72rem;font-weight:800;color:#0E8A55;background:#F0FDF4;padding:4px 10px;border-radius:99px;border:1px solid #BBF7D0}
.ak-badge-store{font-size:0.72rem;font-weight:700;color:#64748B;background:#F1F5F9;padding:4px 10px;border-radius:99px}
.ak-name{font-family:var(--f-display);font-size:1.65rem;font-weight:800;color:var(--navy);margin:0 0 6px}
.ak-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:#64748B;font-size:0.85rem;margin:0}
.ak-stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-top:16px;border-top:1px solid #F1F5F9}
.ak-stat-card{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:14px;padding:12px 14px;display:grid;gap:3px}
.ak-stat-card small{font-size:0.7rem;color:#64748B;text-transform:uppercase;font-weight:700;letter-spacing:.04em}
.ak-stat-card b{font-size:0.95rem;color:var(--navy)}
.ak-stat-card span{font-size:0.74rem;color:#0E8A55}
.ak-body-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:20px}
.ak-card{background:#FFFFFF;border:1px solid #E2E8F0;border-radius:20px;padding:24px;box-shadow:0 8px 24px rgba(11,31,58,.04)}
.ak-card-title{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.ak-card-title svg{color:#0E8A55}
.ak-card-title h3{font-size:1.15rem;font-weight:800;color:var(--navy);margin:0}
.ak-card-desc{font-size:0.84rem;color:#64748B;line-height:1.5;margin:0 0 16px}
.ak-actions-list{display:grid;gap:10px}
.ak-action-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#F8FAFC;border:1px solid #E2E8F0;border-radius:14px;text-decoration:none;transition:all .15s}
.ak-action-item:hover{background:#F0FDF4;border-color:#BBF7D0;transform:translateX(3px)}
.ak-ai-icon{width:36px;height:36px;border-radius:10px;background:#FFFFFF;border:1px solid #E2E8F0;display:grid;place-items:center;font-size:1.1rem;flex-shrink:0}
.ak-ai-text{flex:1;min-width:0}
.ak-ai-text b{display:block;font-size:0.86rem;color:var(--navy)}
.ak-ai-text small{display:block;font-size:0.74rem;color:#64748B;margin-top:2px;line-height:1.4}
.ak-ai-arrow{color:#94A3B8;font-size:1rem;font-weight:700}
.ak-action-item:hover .ak-ai-arrow{color:#0E8A55}
.ak-logout-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:99px;border:1px solid #FCA5A5;background:#FEF2F2;color:#DC2626;font:inherit;font-size:0.83rem;font-weight:700;cursor:pointer;transition:all .15s}
.ak-logout-btn:hover{background:#FEE2E2;border-color:#F87171}
@media(max-width:768px){
  .ak-stats-grid{grid-template-columns:1fr;gap:8px}
  .ak-body-grid{grid-template-columns:1fr}
}
.rg-succ p{margin:0;font-size:.88rem;color:var(--muted);line-height:1.5}

/* OPC-AI tabs */
.oa-tabs-w{background:#fff;border-bottom:1px solid var(--line);padding:14px 0;position:sticky;top:60px;z-index:30;box-shadow:0 6px 16px rgba(11,31,58,.05)}
.oa-tabs-w .wrap{display:grid;gap:8px}
.oa-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.oa-tabs button{font:inherit;cursor:pointer;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;padding:10px 12px;border-radius:14px;border:2px solid var(--line);background:#FAFBFD;color:var(--navy);transition:.2s}
.oa-tabs i{grid-row:1/3;font-style:normal;font-size:1.4rem}.oa-tabs b{font-size:.92rem}.oa-tabs small{font-size:.7rem;color:var(--muted)}
.oa-tabs button.on{border-color:#3559C7;background:linear-gradient(135deg,#F3ECFF,#E9F4EE);box-shadow:0 8px 18px rgba(123,63,228,.18)}
.oa-hint{margin:0;font-size:.74rem;color:var(--muted);text-align:center}
.oa-hero{background:radial-gradient(60% 80% at 90% 0%,rgba(18,161,80,.35),transparent 60%),linear-gradient(160deg,#0B1F3A,#141B3F 55%,#0C4A3E);color:#fff;padding:32px 0 28px}.oa-hero .wrap{display:grid;gap:10px}
.oa-k{justify-self:start;font-size:.7rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;background:#0E8A55;padding:4px 10px;border-radius:99px}
.oa-hero h1{font-size:clamp(1.8rem,6vw,2.8rem);color:#fff;line-height:1.1}.oa-hero h1 em{font-style:normal;color:var(--gold)}.oa-hero p{color:#D5E1F0;max-width:680px;line-height:1.65}.oa-hero p b{color:#fff}
.oa-mini{display:flex;flex-wrap:wrap;gap:6px}.oa-mini span{font-size:.72rem;font-weight:800;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);padding:5px 10px;border-radius:99px}
.oa-two{display:grid;gap:10px;margin-top:16px;align-items:stretch}
.oa-side{border-radius:18px;padding:16px}.oa-side h3{margin:0 0 8px;font-size:1rem}.oa-side ul{margin:0;padding-left:18px;display:grid;gap:7px;font-size:.86rem;line-height:1.5}
.oa-side.b{background:#F7F3E8;border:1px solid #F3D27A;color:#4A3B0E}.oa-side.b h3{color:#7A5A00}
.oa-side.m{background:#E9F4EE;border:1px solid #BFE6CC;color:#29413A}.oa-side.m h3{color:#0A6B43}
.oa-link{display:grid;place-items:center;align-content:center;gap:2px}.oa-link span{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#3559C7,#0E8A55);display:grid;place-items:center;font-size:1.3rem;box-shadow:0 8px 18px rgba(123,63,228,.3)}.oa-link small{font-size:.66rem;font-weight:800;color:#3559C7;text-transform:uppercase;letter-spacing:.08em}
.oa-cap{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}.oa-cap div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;display:grid;gap:3px}.oa-cap i{font-style:normal;font-size:1.4rem}.oa-cap b{font-size:.9rem;color:var(--navy)}.oa-cap small{font-size:.76rem;color:var(--muted);line-height:1.45}
.oa-flow{display:grid;gap:6px;margin-top:14px}.oa-flow div{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 12px;font-size:.86rem;color:var(--navy)}.oa-flow em{font-style:normal;font-weight:900;width:26px;height:26px;border-radius:50%;background:#3559C7;color:#fff;display:grid;place-items:center;flex:none;font-size:.78rem}
.oa-trust{margin-top:18px;border-radius:18px;padding:14px 16px;background:linear-gradient(160deg,#0B1F3A,#141B3F);color:#DCE6F2}.oa-trust b{color:var(--gold)}.oa-trust p{margin:6px 0 0;font-size:.86rem;line-height:1.6}.oa-trust p b{color:#fff}
.oa-faq{display:grid;gap:8px;margin-top:16px}.oa-faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 14px}.oa-faq summary{font-weight:800;color:var(--navy);cursor:pointer;font-size:.9rem}.oa-faq p{margin:6px 0 0;font-size:.85rem;line-height:1.55;color:var(--muted)}
@media(min-width:760px){.oa-two{grid-template-columns:1fr auto 1fr}.oa-cap{grid-template-columns:repeat(3,1fr)}.oa-flow{grid-template-columns:repeat(3,1fr)}.oa-faq{grid-template-columns:repeat(3,1fr);align-items:start}}
@media(max-width:759px){.oa-link{grid-auto-flow:column;gap:8px}}
@media(max-width:420px){.oa-tabs small{display:none}}@media(max-width:600px){.oa-hint{display:none}.oa-tabs-w{padding:10px 0}.oa-tabs-w .tl-ey{display:none}}

/* ===== Produk Lokal v2: warna hangat (beli) + hijau (share), 6 kolom ===== */
body.mpg{background:radial-gradient(900px 420px at 92% -6%,#FFD9A8 0,transparent 62%),radial-gradient(760px 380px at -8% 4%,#FFEFB8 0,transparent 58%),linear-gradient(180deg,#FFF3DC 0,#FFF9EE 38%,#FFF6E8 100%);background-attachment:fixed}
.wrap.mpw{max-width:1140px!important;margin-inline:auto!important}
.mph{display:grid;gap:14px;padding-block:22px 10px}
.mph-ey{display:inline-flex;gap:6px;align-items:center;font-size:.74rem;font-weight:800;letter-spacing:.06em;color:#B5560C;background:#FFE9C7;border:1px solid #FFD49A;padding:5px 11px;border-radius:999px}
.mph h1{font-family:var(--f-display)!important;font-weight:800!important;letter-spacing:-.03em!important;font-size:clamp(2rem,6.4vw,3rem)!important;color:var(--navy)!important;margin:8px 0 6px!important;background:none!important;-webkit-text-fill-color:var(--navy)!important}
.mph p{color:#4A4F5C;max-width:58ch;font-size:.95rem}.mph p b{color:#0A6B43}
.mph-s{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mph-s div{background:rgba(255,255,255,.75);backdrop-filter:blur(6px);border:1px solid #F3DDB5;border-radius:14px;padding:9px 6px;text-align:center;box-shadow:0 6px 18px rgba(201,120,20,.08)}
.mph-s b{display:block;font-family:var(--f-display);font-size:1.05rem;color:var(--navy);white-space:nowrap}.mph-s small{font-size:.68rem;color:#7A6A55;font-weight:700}
@media(min-width:900px){.mph{grid-template-columns:1fr auto;align-items:end;padding-block:30px 14px}.mph-s{grid-template-columns:repeat(4,108px)}}
.pwa-bar{display:flex;align-items:center;gap:12px;margin:6px 0 4px;padding:10px 12px;border-radius:18px;background:linear-gradient(110deg,#0B1F3A,#163a6b 60%,#0C4A3E);color:#fff;box-shadow:0 10px 26px rgba(11,31,58,.22);position:relative;overflow:hidden}
.pwa-bar::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,216,77,.18) 50%,transparent 70%);transform:translateX(-100%);animation:pwaShine 4.5s ease-in-out infinite}
@keyframes pwaShine{60%,100%{transform:translateX(100%)}}
.pwa-ic{flex-shrink:0;display:grid;justify-items:center;gap:2px}.pwa-ic svg{width:42px;height:42px;padding:6px;border-radius:12px;background:linear-gradient(135deg,#FFE47A,#F5B731 60%,#E8A317);box-shadow:0 4px 10px rgba(0,0,0,.25)}
.pwa-ic i{font-style:normal;font-size:.56rem;font-weight:800;letter-spacing:.02em}.pwa-ic.sm svg{width:36px;height:36px;padding:5px}
.pwa-t{min-width:0;flex:1}.pwa-t b{display:block;font-size:.95rem}.pwa-t small{display:block;font-size:.76rem;opacity:.85;line-height:1.35}
.pwa-go{position:relative;z-index:1;flex-shrink:0;border:0;border-radius:999px;min-height:42px;padding:0 16px;font-weight:800;font-size:.85rem;color:#0B1F3A;background:#F5B731;box-shadow:0 1px 2px rgba(14,23,38,.08);animation:pwaPulse 2.2s ease-in-out infinite}
@keyframes pwaPulse{50%{box-shadow:0 0 0 7px rgba(255,216,77,.22)}}
.pwa-x{position:relative;z-index:1;flex-shrink:0;background:none;border:0;color:#fff;opacity:.7;width:32px;height:32px;font-size:1rem}
@media(max-width:560px){.pwa-bar{flex-wrap:wrap}.pwa-t{flex-basis:calc(100% - 100px)}.pwa-go{flex:1}.pwa-x{position:absolute;top:4px;right:4px}}
.mpf{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--hdr,60px));z-index:20;background:rgba(255,246,228,.88);backdrop-filter:blur(10px);border-bottom:1px solid #F1DDB8;margin-top:10px}
.mpf-in{display:flex;flex-direction:column;gap:10px;padding-block:12px 10px}
.mpf-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.mpf-q{flex:1;min-width:240px;max-width:480px;display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid #F0D6A8;border-radius:999px;padding:0 16px;min-height:44px;transition:border-color .2s,box-shadow .2s;position:relative}
.mpf-q svg{width:18px;height:18px;color:#8A6A40;flex-shrink:0;transition:color .2s}
.mpf-q:focus-within{border-color:var(--money)!important;box-shadow:0 0 0 3px rgba(14,138,85,.18)!important}
.mpf-q:focus-within svg{color:var(--money)!important}
.mpf-q input[type=search],.mpf-q input#q{border:none!important;outline:none!important;box-shadow:none!important;background:transparent!important;min-height:42px!important;padding:0!important;width:100%!important;font-family:var(--f-display)!important;font-size:.92rem!important;font-weight:600!important;color:var(--navy)!important;-webkit-appearance:none;-moz-appearance:none;appearance:none}
.mpf-q input[type=search]::placeholder{color:#9BA3AF!important;font-weight:400!important}
.mpf-q input[type=search]::-webkit-search-cancel-button,.mpf-q input[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.mpf-t{display:flex;align-items:center;gap:14px;margin-left:auto;flex-shrink:0}
.mpf-t label{display:flex;gap:7px;align-items:center;font-size:.84rem;font-weight:700;color:var(--navy);cursor:pointer;user-select:none;white-space:nowrap}
.mpf-t input{width:18px;height:18px;accent-color:#0E8A55;cursor:pointer}
.mpf-t select{min-height:38px;border-radius:999px;border:1.5px solid #F0D6A8;background:#fff;font:inherit;font-size:.84rem;font-weight:700;padding:0 14px;color:var(--navy);outline:none;cursor:pointer}
.mpf-c{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;width:100%}
.mpf-c::-webkit-scrollbar{display:none}
.mpf .chip{min-height:36px;padding:0 14px;background:#fff;border:1.5px solid #F0D6A8;border-radius:999px;font-size:.84rem;font-weight:700;white-space:nowrap;cursor:pointer;transition:all .18s ease;color:var(--navy)}
.mpf .chip:hover{border-color:#E4572E;color:#E4572E}
.mpf .chip.on{background:#0E1726;border-color:#0E1726;color:#fff;box-shadow:0 3px 8px rgba(14,23,38,.2)}
@media(max-width:640px){
  .mpf-row{flex-direction:column;align-items:stretch;gap:10px}
  .mpf-q{max-width:100%}
  .mpf-t{width:100%;justify-content:space-between;margin-left:0}
}
.mp-n{font-size:.84rem;font-weight:800;color:#7A5520;margin:14px 0 10px}
.xgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:620px){.xgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media(min-width:960px){.xgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.mp-sentinel{grid-column:1/-1;display:flex;justify-content:center;align-items:center;padding:20px 0 14px;min-height:56px}
.mp-loading-dots{display:inline-flex;gap:7px;align-items:center}
.mp-loading-dots span{width:8px;height:8px;border-radius:50%;background:var(--money);animation:mpDotPulse 1.2s infinite ease-in-out both}
.mp-loading-dots span:nth-child(1){animation-delay:-.32s}
.mp-loading-dots span:nth-child(2){animation-delay:-.16s}
@keyframes mpDotPulse{0%,80%,100%{transform:scale(0);opacity:.35}40%{transform:scale(1);opacity:1}}
.mp-loading-pill{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1.5px solid #F0D6A8;padding:8px 20px;border-radius:999px;box-shadow:0 6px 18px rgba(14,23,38,.07);font-size:.82rem;font-weight:800;color:var(--navy);letter-spacing:.01em}
.mp-spin{width:16px;height:16px;border:2.5px solid #E5E7EB;border-top-color:#0E8A55;border-radius:50%;animation:mpSpin .7s linear infinite;flex-shrink:0}
@keyframes mpSpin{to{transform:rotate(360deg)}}
.mp-end{grid-column:1/-1;text-align:center;font-size:.84rem;font-weight:700;color:#7F8DA8;padding:22px 0 10px}
.xc.skel{pointer-events:none;border-color:#F5EAD4;background:#fff;opacity:.92}
.skel-img{aspect-ratio:1;background:#F6F3EC;position:relative;overflow:hidden}
.skel-line{height:12px;background:#F0EADB;border-radius:6px;position:relative;overflow:hidden;margin-bottom:6px}
.skel-line.sm{width:42%;height:10px}
.skel-line.lg{width:92%;height:14px}
.skel-line.md{width:75%;height:14px;margin-bottom:8px}
.skel-line.pr{width:50%;height:18px;margin-top:6px}
.skel-box{height:28px;background:#EAF3ED;border-radius:8px;position:relative;overflow:hidden;margin-top:4px}
.skel-act{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.skel-btn{height:38px;background:#F0EADB;border-radius:12px;position:relative;overflow:hidden}
.skel-img::after,.skel-line::after,.skel-box::after,.skel-btn::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:skelShimmer 1.3s ease-in-out infinite}
@keyframes skelShimmer{100%{transform:translateX(100%)}}
.xc.in-view{animation:cardReveal .32s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * .04s);will-change:transform,opacity;transform:translate3d(0,0,0)}
@keyframes cardReveal{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.xc{position:relative;display:flex;flex-direction:column;min-width:0;background:#fff;border-radius:18px;overflow:hidden;border:1px solid #F3E3C6;box-shadow:0 10px 24px rgba(160,90,20,.07);transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s}
@media(hover:hover){.xc:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(160,90,20,.16)}.xc:hover .xc-img svg{transform:scale(1.06)}}
.xc.hoki{border:2px solid #F5B731;box-shadow:0 0 0 4px rgba(255,216,77,.25),0 12px 28px rgba(201,143,18,.2)}
.xc-img{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:#FFF6E4}.xc-img svg{display:block;width:100%;height:100%;transition:transform .35s}
.xc-hk{position:absolute;top:8px;left:8px;background:#F5B731;color:#5A3A00;font-size:.68rem;font-weight:800;padding:4px 9px;border-radius:999px;box-shadow:0 3px 8px rgba(0,0,0,.15)}
.xc-low{position:absolute;bottom:8px;left:8px;background:#E4572E;color:#fff;font-size:.66rem;font-weight:800;padding:3px 8px;border-radius:999px;animation:xcBlink 1.6s ease-in-out infinite}.xc-no{background:#5F6B7E;animation:none}
@keyframes xcBlink{50%{opacity:.75}}
.xc-ex{position:absolute;top:8px;right:8px;background:rgba(11,31,58,.55);color:#fff;font-size:.6rem;font-weight:700;padding:2px 7px;border-radius:999px}
.xc-b{display:flex;flex-direction:column;gap:3px;padding:12px 12px 13px;flex:1}
.xc-b .pc-sub{min-width:0}
.xc-br{font-size:.7rem;font-weight:800;color:#0A6B43;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.xc-nm,a.xc-nm,.pc .nm{font-family:var(--f-display)!important;font-weight:800!important;font-size:.94rem!important;line-height:1.35!important;color:var(--navy)!important;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.xc-pr{font-family:var(--f-display);font-weight:800;font-size:1.05rem;color:#C9320F}
.xc-earn{display:flex;justify-content:space-between;align-items:center;gap:4px;background:#E9F4EE;border-radius:9px;padding:5px 8px;font-size:.7rem;color:#0A6B43;font-weight:700;margin-top:2px}.xc-earn b{font-size:.8rem;white-space:nowrap}
.xc-act{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:7px}
.xc-act button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:40px;border:0;border-radius:12px;font-weight:800;font-size:.84rem;color:#fff;transition:transform .12s,box-shadow .12s}
.xc-act svg{width:15px;height:15px}
.xc-buy{background:#E4572E;box-shadow:0 1px 2px rgba(14,23,38,.08)}
.xc-sh{background:#0E8A55;box-shadow:0 1px 2px rgba(14,23,38,.08)}
.xc-act button:active{transform:translateY(3px);box-shadow:none}.xc-buy:disabled{background:#C9CED6;box-shadow:0 1px 2px rgba(14,23,38,.08);cursor:not-allowed}
.xc-ft{font-size:.66rem;color:#8A6A40;text-align:center;margin-top:5px;font-weight:600}
.xc.out .xc-img svg{filter:grayscale(.6);opacity:.7}
.pwa-sh{gap:12px}.pwa-hd{display:flex;gap:12px;align-items:center}.pwa-app svg{width:56px;height:56px;padding:8px;border-radius:15px;background:linear-gradient(135deg,#FFE47A,#F5B731 60%,#E8A317);box-shadow:0 6px 14px rgba(201,143,18,.35)}
.pwa-hd b{display:block;font-family:var(--f-display);font-size:1.25rem;color:var(--navy)}.pwa-hd small{color:var(--muted);font-size:.8rem}
.pwa-st{list-style:none;margin:0;padding:0;display:grid;gap:8px}.pwa-st li{display:flex;gap:10px;align-items:flex-start;background:#F6F3EC;border:1px solid #F3E3C6;border-radius:12px;padding:10px}
.pwa-st li>span{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#0E8A55;color:#fff;font-weight:800;font-size:.82rem}
.pwa-st small{display:block;color:var(--muted);font-size:.76rem;margin-top:2px}.pwa-k{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:6px;background:#E8EEF7;color:#1B74E4;font-size:.8rem;padding:0 4px}
.pwa-ben{display:flex;flex-wrap:wrap;gap:6px}.pwa-ben span{font-size:.74rem;font-weight:700;background:#E9F4EE;color:#0A6B43;padding:5px 10px;border-radius:999px}
.pwa-nudge{position:fixed;left:50%;bottom:calc(76px + env(safe-area-inset-bottom,0px));transform:translate(-50%,140%);z-index:85;width:min(440px,calc(100% - 24px));display:flex;align-items:center;gap:10px;background:#0B1F3A;color:#fff;border-radius:16px;padding:10px 10px 10px 12px;box-shadow:0 16px 36px rgba(0,0,0,.3);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.pwa-nudge.on{transform:translate(-50%,0)}.pwa-nudge div{flex:1;min-width:0}.pwa-nudge b{display:block;font-size:.88rem}.pwa-nudge small{font-size:.74rem;opacity:.85}
.pwa-nudge button{border:0;border-radius:999px;font-weight:800;font-size:.8rem}.pwa-nudge button[data-pwa=go]{background:#F5B731;color:#0B1F3A;min-height:36px;padding:0 14px}.pwa-nudge button[data-pwa=nx]{background:none;color:#fff;opacity:.7;width:28px;height:28px}
@media(max-width:899px){.mpf{position:relative;top:auto}.mph{padding-block:16px 6px}.mph-s div{padding:7px 4px}.mph-s b{font-size:.95rem}}
@media(max-width:440px){.xc-earn i{display:none}.xc-b{padding:9px 8px 10px}.xc-act button{font-size:.8rem}}
.xc-earn span,.xc-earn i{white-space:nowrap;font-style:normal}.mpf-t label{white-space:nowrap}.mpf-t select{max-width:62%}
@media(prefers-reduced-motion:reduce){.pwa-bar::after,.pwa-go,.xc-low{animation:none}.xc,.xc-img svg{transition:none}}

/* ===== BigDeal Store v2 (konversi) ===== */
.st-nav .mid{padding-top:0}.st-nav .mid i{width:58px;height:58px}.st-nav .mid span{font-size:.66rem}
.st-nav .mid:disabled i{background:#C9CED6;box-shadow:0 1px 2px rgba(14,23,38,.08);animation:none}.st-nav .mid:disabled span{color:var(--muted)}
.st-nav .sh span{color:var(--money-dk);font-weight:800}.st-nav .ct{position:relative}
.stn2{position:absolute;top:0;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--red);color:#fff;font-size:.62rem;display:grid;place-items:center;border:2px solid #fff}
.st-native{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;margin-top:10px;border:0;border-radius:999px;font-weight:800;font-size:.95rem;color:#fff;background:#0E8A55;box-shadow:0 10px 22px rgba(18,161,80,.3)}
.st-native svg{width:20px;height:20px}.st-native:active{transform:translateY(3px);box-shadow:0 1px 0 #0A6B43}
.st-native svg *{stroke:#fff}
.st-eh small{display:block;font-size:.72rem;color:var(--muted);font-weight:600;margin-top:2px}
.st-jm{display:block;width:100%;margin-top:10px;border:1.5px dashed #F0D6A8;background:#F6F3EC;border-radius:12px;padding:10px;font-size:.8rem;color:var(--navy);text-align:center}
#stMore h4{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left}.st-so{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;border:1.5px solid var(--line);background:#fff;border-radius:999px;font-size:.7rem;font-weight:800;padding:4px 10px;color:var(--navy)}.st-so svg{width:14px;height:14px}
.st-none{font-size:.84rem;color:var(--muted);padding:10px 0}
.st-mini[hidden]{display:none}
.st-hl{animation:stHl 1.2s ease}@keyframes stHl{0%{box-shadow:0 0 0 0 rgba(255,216,77,.9)}40%{box-shadow:0 0 0 8px rgba(255,216,77,.5)}100%{box-shadow:0 0 0 0 rgba(255,216,77,0)}}
.st-chips{scrollbar-width:none}.st-chips::-webkit-scrollbar{display:none}
@media(prefers-reduced-motion:reduce){.st-hl{animation:none}}

/* BigDeal Store: rapikan layout (anti-overflow) */
.st-feat,.st-earn,.st-more,.st-buy,.st-pr,.st-trust{min-width:0}
.st-feat>*{min-width:0;max-width:100%}
.st-feat h3,.st-ben{overflow-wrap:anywhere}
.st-buy{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;gap:8px;align-items:center}
.st-go{min-width:0!important;width:100%;flex-direction:column!important;gap:0!important;line-height:1.1;padding:6px 10px!important;min-height:54px}
.st-go .stg-l{font-size:1rem;white-space:nowrap}.st-go #stT{font-size:.78rem;font-weight:700;opacity:.92;white-space:nowrap}
.st-pr{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px}
.st-trust{display:flex!important;flex-wrap:wrap;justify-content:space-between;gap:4px 8px}.st-trust span{white-space:nowrap;font-size:.66rem}
.st-ec{display:grid!important;grid-template-columns:1fr 1fr;gap:6px}.st-ec span{min-width:0;font-size:.7rem!important;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:7px 9px!important}.st-ec span b{font-size:.92rem}
.st-earn .logos{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.st-earn .logos>*{min-width:0;width:auto!important}
.st-nav span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.st-mini{min-width:0}.st-mini b{overflow-wrap:anywhere}
@media(max-width:520px){.st-scrim{padding:0!important}.st{width:100%!important;height:100dvh!important;border-radius:0!important;box-shadow:none!important}.st-top{margin-top:env(safe-area-inset-top,0px)}}
.st-earn .logos{align-items:stretch}.st-earn .logos>*{height:40px!important;margin:0!important;transform:none;align-self:stretch}
@media(max-width:340px){.st-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(min-width:900px){.st{width:460px!important;height:min(860px,calc(100dvh - 40px))!important}}

/* ===== Mobile fit: cegah layout melebar ===== */
html,body{max-width:100%;overflow-x:clip}
@supports not (overflow:clip){html,body{overflow-x:hidden}}
img,svg,video,canvas,iframe,table{max-width:100%}
input,select,textarea{max-width:100%;min-width:0}
.kt-chk input{width:1px!important;height:1px!important;left:0;top:0}
.kt-g>*,.tl-two>*,.tl-card>*,.grid>*,.xgrid>*,.kt-form>*,.wrap>*{min-width:0}
.tl-card label,.tl-card select,.tl-card input{max-width:100%}
.tl-row{grid-template-columns:repeat(2,minmax(0,1fr))}.tl-row>*{min-width:0;white-space:normal;padding-inline:10px;text-align:center}
.op-fmt{grid-template-columns:repeat(2,minmax(0,1fr))}.op-fmt>*{min-width:0}.op-fmt span{overflow-wrap:anywhere}
@media(min-width:760px){.op-fmt{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ===== Skala tipografi: Judul halaman (H1) > Topik (H2) > Sub-topik (H3) ===== */
#app h1:not(.h4l){font-size:clamp(1.9rem,1.25rem + 3vw,3.1rem)!important;line-height:1.06}
:where(#app) h2{font-size:clamp(1.3rem,1.02rem + 1.45vw,2rem)}
:where(#app) h3{font-size:clamp(1rem,.95rem + .3vw,1.15rem)}
:where(#app) h4{font-size:clamp(.92rem,.9rem + .15vw,1rem)}
.closing h2{font-size:clamp(1.3rem,1rem + 1.6vw,2.3rem)!important}
.earn .ec h3,.qr-pos .qr-pb h3{font-size:clamp(.98rem,.94rem + .25vw,1.05rem)!important}
.ab-tx h3{font-size:clamp(1.1rem,.98rem + .5vw,1.3rem)!important}
.ev-h h2{font-size:clamp(1.3rem,1.02rem + 1.45vw,2rem)!important}

/* ikon garis */
svg.ik{width:1.05em!important;height:1.05em!important;display:inline-block!important;vertical-align:-.16em;flex-shrink:0;stroke-width:1.8;transform:none!important;position:static!important;margin:0!important}
/* =====================================================================
   SukaLOKAL Design System v2 — editorial, tenang, satu aksen
   ink #0E1726 · paper #FAF8F4 · hijau #0E8A55 (uang/aksi) · oranye #E4572E (beli)
   ===================================================================== */
:root{
 --navy:#0E1726;--navy-2:#16233A;--ink:#0E1726;--ink-2:#3B4658;--muted:#5D6778;
 --money:#0E8A55;--money-dk:#0A6B43;--money-lt:#E9F4EE;--emerald:#0B4A39;
 --red:#E4572E;--red-dk:#C2431F;--gold:#F2B705;--gold-dk:#C99400;--gold-soft:#FBF3DC;
 --cream:#F6F3EC;--bg:#FAF8F4;--card:#FFFFFF;--line:#E6E2D8;
 --f-display:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
 --sh-1:0 1px 2px rgba(14,23,38,.06),0 1px 3px rgba(14,23,38,.08);
 --sh-2:0 2px 4px rgba(14,23,38,.04),0 8px 24px rgba(14,23,38,.08);
}
body{font-size:15.5px;line-height:1.6;color:var(--ink);background:var(--bg);font-feature-settings:"ss01","cv11"}
h1,h2,h3,h4{font-family:var(--f-display)!important;color:inherit}
h1,h2{font-weight:800;letter-spacing:-.03em;line-height:1.08}
h3{font-weight:700;letter-spacing:-.012em;line-height:1.25}
p{text-wrap:pretty}
.eyebrow,.pos-k,.kicker{font-weight:700!important;letter-spacing:.09em!important;font-size:.72rem!important}
.kicker{background:none!important;-webkit-text-fill-color:currentColor!important;color:#8BE0B7!important}
.muted,.tiny{color:var(--muted)}

/* Tombol: datar, tegas, satu bahasa */
.btn{border-radius:12px!important;font-weight:700;letter-spacing:-.005em;transition:background-color .15s,color .15s,border-color .15s,transform .15s;box-shadow:none!important}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:none}
.btn-money{background:var(--money)!important;color:#fff!important}.btn-money:hover{background:var(--money-dk)!important}
.btn-buy{background:var(--red)!important;color:#fff!important}.btn-buy:hover{background:var(--red-dk)!important}
.btn-gold{background:var(--gold)!important;color:#1A1400!important}
.pulse,.pulse-r,.beat,[class*="pulse"]{animation:none!important}

/* Hentikan animasi dekoratif yang berulang (tetap: transisi & ilustrasi) */
.live,.live::before,.st-stk.low,.xc-low,.pwa-go,.pwa-bar::after,.ec.n::before,.st-nav .mid i,.si-top button[data-stshare],[data-stfav] svg,.st-rail button svg,.lg-btn,.lg-btn::before,.lg-btn::after{animation:none!important}
.ec.n::before,.pwa-bar::after{display:none!important}

/* Header */
header.top{background:rgba(14,23,38,.97)!important;border-bottom:1px solid rgba(255,255,255,.06)}
.aud{background:rgba(255,255,255,.06)!important;border-radius:10px!important}
.aud a{border-radius:8px!important;color:#AEB9C9!important;font-weight:700}
.aud a.on{background:#fff!important;color:var(--ink)!important}
.bo-btn{background:transparent!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:10px!important}
.bo-btn b em{color:inherit!important}
.bo-btn .ik{width:16px!important;height:16px!important;stroke:currentColor!important;stroke-width:1.8!important;vertical-align:-2px!important}
.bo-btn.on,.bo-btn[aria-expanded="true"]{background:#fff!important;color:var(--ink)!important;border-color:#fff!important}
.ck-btn{border-radius:999px!important}
.ck-btn .ik{width:16px!important;height:16px!important;stroke:currentColor!important;stroke-width:2!important;vertical-align:-2px!important}
.bo-menu{border:1px solid rgba(15,23,42,.08)!important;box-shadow:0 18px 45px rgba(11,31,58,.18)!important}
.bo-menu a:hover{background:#F8FAFC!important}
.bo-menu a>span,.ub-menu a>span,.lg-menu a span,.lg-menu span,.smp-g a .smi,.av-h span{width:34px!important;height:34px!important;border-radius:10px!important;background:#F1F4F8!important;color:#1E293B!important;display:grid!important;place-items:center!important;font-size:1rem!important;flex-shrink:0!important;box-shadow:inset 0 0 0 1px rgba(15,23,42,.04)!important;text-shadow:none!important}
.bo-menu a>span .ik,.ub-menu a>span .ik,.lg-menu a span .ik,.lg-menu span .ik,.smp-g a .smi .ik,.av-h span .ik{width:18px!important;height:18px!important;stroke:#1E293B!important;stroke-width:1.8!important;fill:none!important}
.bo-menu a:hover>span,.ub-menu a:hover>span,.lg-menu a:hover span,.smp-g a:hover .smi{background:#E2E8F0!important;color:#0F172A!important}
.bo-menu a:hover>span .ik,.ub-menu a:hover>span .ik,.lg-menu a:hover span .ik,.smp-g a:hover .smi .ik{stroke:#0F172A!important}

/* Hero: satu warna judul, satu aksen */
.hero,.bhero{background:#0E1726!important}
.h4l em,.h4l span,.h4l small,.hero h1 em,.bhero h1 em,.hero h1.elg em,.bhero h1.elg em{color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important}
.h4l small.mny,.hero h1 .mny{color:#8BE0B7!important;-webkit-text-fill-color:#8BE0B7!important}
.mph h1{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--ink)!important}
.pos-l em{background:none!important;color:var(--money-dk);box-shadow:inset 0 -.12em 0 rgba(14,138,85,.22)}

/* Kartu: putih, garis tipis, bayangan halus */
.ec,.card,.tl-card,.kt-box,.ab-p,.xc,.qr-pb{box-shadow:var(--sh-1)!important}
.ec .ico{background:#F2F0EA!important;color:var(--ink)!important}
.ec.n{background:#0E1726!important;border:1px solid #0E1726!important;box-shadow:var(--sh-2)!important}
.ec.n h3{color:#fff!important}.ec.n p{color:#C3CCD9!important}.ec.n .ico{background:rgba(255,255,255,.08)!important;color:#F2B705!important}

/* Banner HYB: tenang, tanpa pelangi */
.hyb2{background:radial-gradient(70% 120% at 100% 0%,rgba(242,183,5,.14),transparent 60%),#0F2B24!important;box-shadow:var(--sh-2)!important}

/* Penutup */
.closing{background:var(--cream)!important}

/* Footer: ikon emoji berwarna asli */
footer.ft[data-emoji] .ft-col .fi, footer.ft[data-emoji] h4 span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-style: normal !important;
  font-size: 1rem !important;
  margin-right: 6px !important;
  color: initial !important;
  text-shadow: none !important;
  background: transparent !important;
}
footer.ft[data-emoji] .ft-col a:hover .fi {
  transform: scale(1.15) !important;
}

/* Chip & tab aktif: tinta, bukan gradien */
.chip.on,.fq-tabs button.on{background:var(--ink)!important;border-color:var(--ink)!important;color:#fff!important;box-shadow:none!important}
.mpf .chip.on{background:var(--ink)!important;border-color:var(--ink)!important;box-shadow:none!important}

/* Produk Lokal v2: hangat tapi kalem */
body.mpg{background:var(--bg)!important}
.mph-ey{background:transparent!important;border:0!important;padding:0!important;color:var(--money-dk)!important;letter-spacing:.09em;text-transform:uppercase;font-size:.72rem!important}
.mph-s div{background:#fff!important;border-color:var(--line)!important;box-shadow:none!important}
.mpf{background:rgba(250,248,244,.92)!important;border-color:var(--line)!important}
.mpf-q,.mpf .chip,.mpf-t select{border-color:var(--line)!important}
.xc{border-color:var(--line)!important}
.xc:hover{box-shadow:var(--sh-2)!important}
.xc.hoki{border:1px solid #E9C46A!important;box-shadow:0 0 0 3px rgba(242,183,5,.15)!important}
.xc-hk{background:#fff!important;color:#7A5A00!important;box-shadow:var(--sh-1)!important}
.xc-act button,.st-native,.st-go{border-radius:10px!important}
.xc-buy{background:var(--red)!important}.xc-sh{background:var(--money)!important}
.pwa-bar{background:#0E1726!important;box-shadow:var(--sh-2)!important}
.pwa-go{background:#fff!important;color:var(--ink)!important}

/* Toko BigDeal */
.st-native{background:var(--money)!important;box-shadow:none!important}
.st-nav .mid i{background:var(--red)!important;box-shadow:0 6px 16px rgba(228,87,46,.28)!important}
.st-tag{background:var(--ink)!important}

/* v2 penyempurnaan */
.btn-line{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,currentColor 40%,transparent)!important}
.btn-line:hover{box-shadow:inset 0 0 0 1.5px currentColor!important}
.av-sc button.on,.av-pr button.on{background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important;box-shadow:none!important}
.tr-ai.on{background:#F2F7F4!important;border-color:var(--money)!important}
.ec .ico{color:var(--money-dk)!important}.ec .ico svg [stroke]{stroke:currentColor}.ec .ico svg [fill]:not([fill="none"]){fill:currentColor}
.ec.n .ico{color:var(--gold)!important}
.dawn{display:none!important}
#audU.on,#audB.on,.aud a.on{background:#fff!important;color:var(--ink)!important}
.bhero .btn-gold,.hero .btn-gold{background:#fff!important;color:var(--ink)!important}
/* Hero halaman: satu bahasa visual */
.kt-hero,.bd-hero,.sb-hero,.op-hero,.dv-hero,.oa-hero,.ab-hero,.lgl-hero,.tl-hero,.ck-hero{background:radial-gradient(60% 90% at 88% 0%,rgba(139,224,183,.10),transparent 60%),#0E1726!important}
.kt-hero h1 em,.bd-hero h1 em,.sb-hero h1 em,.op-hero h1 em,.dv-hero h1 em,.oa-hero h1 em,.ab-hero h1 em,.lgl-hero h1 em,.tl-hero h1 em,.ck-hero h1 em,.hero h1 em,.bhero h1 em{color:#8BE0B7!important;-webkit-text-fill-color:#8BE0B7!important;background:none!important}
.ck-lens button.on{background:#fff!important;color:var(--ink)!important}
.ev-hook{background:var(--cream)!important;color:var(--ink)!important;border-bottom:1px solid var(--line)}
.ev-h h2{color:var(--ink)!important}.ev-h h2 em{background:none!important;color:var(--money-dk)!important;padding:0!important}
.ev-h p{color:var(--ink-2)!important}.ev-k{background:#fff!important;color:var(--money-dk)!important;border:1px solid var(--line)}
.ev-st div{background:#fff!important;border-color:var(--line)!important;animation:none!important}.ev-st small{color:var(--muted)!important}.ev-st b{color:var(--ink)}
.hyb h2 em,.roles button.on em{color:#8BE0B7!important}
.btn-gold{background:#fff!important;color:var(--ink)!important;box-shadow:inset 0 0 0 1px var(--line)!important}
.ab-av{background:#0E1726!important;border-radius:18px!important;font-weight:800!important}
.ab-p.ru .ab-av,.ab-p:nth-of-type(2) .ab-av{background:#0A6B43!important}
.ab-p.hy,.ab-p{border:1px solid var(--line)!important;box-shadow:var(--sh-1)!important}
.ab-pos{border-color:rgba(255,255,255,.14)!important}.ab-pos b{color:#8BE0B7!important}
.aud a,.aud a.on{border:0!important;outline:0}
#audU.on,#audB.on{box-shadow:none!important}
#app h2 em,#app h2 span[style*="color"],#app h2 b[style*="color"]{color:var(--money)!important;-webkit-text-fill-color:currentColor!important;background:none!important}
.pg-ck #app h2 em,.pg-ck #app h2 span[style*="color"],#app .hyb2 h2 em,#app [class*="hero"] h2 em{color:#8BE0B7!important}
.kp-flow em,.op-d em,.kp-flow>div>em{background:var(--ink)!important;color:#fff!important}

/* ===== FastTrack 1M ===== */
.f1-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 22px;background:#EFECE4;padding:5px;border-radius:14px}
.f1-tabs button{border:0;background:transparent;border-radius:10px;padding:12px 10px;display:grid;gap:2px;text-align:center;color:var(--ink-2);font:inherit;cursor:pointer}
.f1-tabs button b{font-size:.95rem}.f1-tabs button small{font-size:.74rem;color:var(--muted)}
.f1-tabs button.on{background:#fff;color:var(--ink);box-shadow:var(--sh-1)}
.f1-goal{display:grid;gap:18px;margin-bottom:22px}
.f1-goal h2{margin:6px 0 8px}.f1-goal p{color:var(--ink-2);max-width:60ch}
.f1-sum{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.f1-sum li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;display:grid;gap:2px}
.f1-sum b{font-size:.98rem;color:var(--ink)}.f1-sum small{font-size:.74rem;color:var(--muted);line-height:1.35}
@media(min-width:900px){.f1-goal{grid-template-columns:1.25fr 1fr;align-items:end}}
@media(max-width:560px){.f1-sum{grid-template-columns:1fr}}
.f1-calc{margin-bottom:30px}
.f1-grid{display:grid;gap:12px}
@media(min-width:760px){.f1-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px}}
.f1-bar{display:flex;align-items:center;gap:12px;margin:4px 0 2px}
.f1-bar>div{flex:1;height:10px;border-radius:99px;background:#EFECE4;overflow:hidden}
.f1-bar i{display:block;height:100%;background:var(--money);border-radius:99px;transition:width .35s}
.f1-bar span{font-size:.8rem;color:var(--muted);white-space:nowrap}.f1-bar span b{color:var(--ink)}
.f1-sh{display:grid;gap:4px;margin:8px 0 14px}.f1-sh h2{margin:4px 0 6px}
.f1-p{display:flex;align-items:center;gap:10px;max-width:420px}.f1-p>div{flex:1;height:6px;border-radius:99px;background:#EFECE4;overflow:hidden}.f1-p i{display:block;height:100%;width:0;background:var(--ink);transition:width .3s}.f1-p b{font-size:.76rem;color:var(--muted);font-weight:600;white-space:nowrap}
.f1-road{display:grid;gap:12px}
@media(min-width:760px){.f1-road{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.f1-road{grid-template-columns:repeat(4,minmax(0,1fr))}}
.f1-wk{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;display:grid;gap:8px;align-content:start;box-shadow:var(--sh-1)}
.f1-wh{display:grid;gap:2px}.f1-wh span{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--money-dk)}
.f1-wh b{font-size:1.05rem;color:var(--ink)}.f1-wh em{font-style:normal;font-size:.76rem;color:var(--muted)}
.f1-wk p{font-size:.84rem;color:var(--ink-2)}
.f1-wk ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;border-top:1px solid var(--line);padding-top:10px}
.f1-wk label{display:flex;gap:9px;align-items:flex-start;font-size:.84rem;line-height:1.4;cursor:pointer;color:var(--ink)}
.f1-wk input{flex-shrink:0;width:18px;height:18px;margin-top:1px;accent-color:var(--money)}
.f1-wk input:checked+span{color:var(--muted);text-decoration:line-through}
.f1-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:22px 0;padding:18px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.f1-cta>div{flex:1;min-width:220px;display:grid;gap:2px}.f1-cta b{font-size:1.02rem}.f1-cta small{color:var(--muted)}
.f1-next{margin:8px 0 18px;padding:18px;border-radius:16px;background:#0E1726;color:#fff}
.f1-next .eyebrow{color:#8BE0B7}.f1-next h3{margin:4px 0 12px;color:#fff}
.f1-nx{display:grid;gap:10px}@media(min-width:760px){.f1-nx{grid-template-columns:repeat(3,minmax(0,1fr))}}
.f1-nx div{border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px;display:grid;gap:3px}.f1-nx b{font-size:.92rem}.f1-nx small{color:#AEB9C9;font-size:.78rem;line-height:1.4}
.f1-rule{background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:16px;display:grid;gap:8px}
@media(max-width:560px){.f1-calc .tl-out{grid-template-columns:1fr 1fr!important}.f1-calc .tl-out .win{grid-column:1/-1}}
.f1-rule ul{margin:0;padding-left:18px;display:grid;gap:4px;font-size:.84rem;color:var(--ink-2)}

/* ===== FastTrack 1M: Landing Page Section & Formulir Minat ===== */
.ft1m-hero {
  background: linear-gradient(180deg, #0B1F3A 0%, #102A4E 100%);
  color: #fff;
  padding-block: 28px 36px;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ft1m-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: 12px;
}
.ft1m-crumb a { color: rgba(255,255,255,0.8); text-decoration: none; }
.ft1m-crumb a:hover { color: #fff; text-decoration: underline; }
.ft1m-crumb i { font-style: normal; opacity: 0.5; }
.ft1m-crumb b { color: #FFD84D; }
.ft1m-hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.22;
  color: #fff;
  margin: 6px 0 12px;
}
.ft1m-hero h1 em {
  color: #FFD84D;
  font-style: normal;
  font-weight: 800;
}
.ft1m-lead {
  font-size: 1.02rem;
  line-height: 1.55;
  color: #C9D6E8;
  max-width: 68ch;
  margin: 0 0 18px;
}
.ft1m-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ft1m-badges span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: #E2E8F0;
}
.ft1m-sec {
  padding-block: 36px 64px;
  background: #FAF8F4;
}
.ft1m-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 900px) {
  .ft1m-grid { grid-template-columns: 1fr; gap: 24px; }
}
.ft1m-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 4px 16px rgba(11,31,58,0.03);
}
.ft1m-box h3 {
  font-size: 1.22rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 10px;
}
.ft1m-box p {
  font-size: 0.88rem;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0 0 14px;
}
.ft1m-box-primary {
  background: linear-gradient(180deg, #FDFBF7 0%, #F6F2E9 100%);
  border-color: #E2DCD0;
}
.ft1m-box-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--money-dk);
  background: rgba(14,138,85,0.1);
  padding: 3px 10px;
  border-radius: 6px;
  margin-bottom: 8px;
}
.ft1m-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 560px) {
  .ft1m-dual { grid-template-columns: 1fr; }
}
.ft1m-dual-col {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ft1m-dual-col b {
  font-size: 1.05rem;
  color: var(--navy);
}
.ft1m-dual-col p {
  font-size: 0.82rem;
  color: var(--ink-2);
  line-height: 1.45;
  margin: 0;
}
.ft1m-role-badge {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  margin-bottom: 2px;
}
.ft1m-role-badge.m { background: #E6F4EA; color: #0E8A55; }
.ft1m-role-badge.b { background: #E8EEF8; color: #1E5BD8; }
.ft1m-perks {
  display: grid;
  gap: 14px;
}
.ft1m-perk {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.ft1m-perk-ico {
  font-size: 1.25rem;
  line-height: 1;
  padding-top: 2px;
  flex-shrink: 0;
}
.ft1m-perk b {
  display: block;
  font-size: 0.88rem;
  color: var(--navy);
  margin-bottom: 2px;
}
.ft1m-perk p {
  font-size: 0.82rem;
  color: var(--ink-2);
  line-height: 1.4;
  margin: 0;
}
.ft1m-steps-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 10px;
  font-size: 0.84rem;
  color: var(--ink-2);
  line-height: 1.45;
}
.ft1m-steps-list b { color: var(--navy); font-weight: 800; }
.ft1m-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 8px 24px rgba(11,31,58,0.05);
  position: sticky;
  top: 84px;
}
.ft1m-card-h h2 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--navy);
  margin: 6px 0 8px;
}
.ft1m-card-h p {
  font-size: 0.86rem;
  color: var(--ink-2);
  line-height: 1.45;
  margin: 0 0 18px;
}
.ft1m-roles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}
@media (max-width: 640px) {
  .ft1m-hero { padding-block: 22px 28px; }
  .ft1m-hero h1 { font-size: 1.65rem; font-weight: 800; line-height: 1.25; }
  .ft1m-lead { font-size: 0.92rem; margin-bottom: 14px; }
  .ft1m-badges span { font-size: 0.72rem; padding: 5px 10px; }
  .ft1m-sec { padding-block: 20px 48px; }
  .ft1m-box { padding: 18px 14px; border-radius: 14px; margin-bottom: 14px; }
  .ft1m-box h3 { font-size: 1.1rem; font-weight: 800; }
  .ft1m-card { padding: 20px 14px; border-radius: 16px; position: static; }
  .ft1m-card-h h2 { font-size: 1.25rem; font-weight: 800; }
  .ft1m-roles { grid-template-columns: 1fr; gap: 8px; }
}
.ft1m-role {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #FAF8F4;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
}
.ft1m-role:hover {
  border-color: #CBD5E1;
}
.ft1m-role.on {
  background: #F0FDF4;
  border-color: var(--money);
  box-shadow: 0 0 0 1px var(--money);
}
.ft1m-role-ic {
  font-size: 1.25rem;
}
.ft1m-role b {
  display: block;
  font-size: 0.82rem;
  color: var(--navy);
}
.ft1m-role small {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.2;
}
.ft1m-agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--ink-2);
  line-height: 1.4;
  margin-top: 14px;
  cursor: pointer;
}
.ft1m-agree input {
  margin-top: 3px;
  flex-shrink: 0;
}
.ft1m-err-summary {
  background: #FEE2E2;
  border: 1px solid #FCA5A5;
  color: #B91C1C;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.82rem;
  margin-top: 12px;
}
.ft1m-success {
  text-align: center;
  padding: 10px 0;
}
.ft1m-success-ico {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #E6F4EA;
  color: var(--money);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-bottom: 12px;
}
.ft1m-success h3 {
  font-size: 1.3rem;
  color: var(--navy);
  margin: 0 0 6px;
}
.ft1m-success p {
  font-size: 0.86rem;
  color: var(--ink-2);
  line-height: 1.45;
  margin: 0 0 16px;
}
.ft1m-success-sum {
  text-align: left;
  background: #FAF8F4;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 16px 0;
  display: grid;
  gap: 8px;
  font-size: 0.84rem;
}
.ft1m-success-sum div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.ft1m-success-sum div span { color: var(--muted); }
.ft1m-success-sum div b { color: var(--navy); text-align: right; }
.ft1m-success-act {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

/* === BRAND STRIP (ABOVE FOOTER) === */
.brand-strip {
  background: var(--navy) !important;
  color: #fff !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}
.brand-strip .wrap {
  display: flex !important;
  gap: 14px !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  padding-block: 22px !important;
}
.brand-strip b {
  font-family: var(--f-display) !important;
  font-size: 1.25rem !important;
  color: #fff !important;
}
.brand-strip span {
  color: #B9C8DA !important;
  font-size: 0.95rem !important;
}

/* === FAQ HIGH-PRECISION CARDS & ALIGNMENT === */
.fq-tabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  max-width: 620px !important;
  margin: 0 auto 20px !important;
}
.fq-tabs button {
  border: 1.5px solid var(--line) !important;
  background: #fff !important;
  border-radius: 16px !important;
  padding: 10px 14px !important;
  display: grid !important;
  gap: 2px !important;
  cursor: pointer !important;
  font: inherit !important;
  text-align: center !important;
  transition: all .2s !important;
}
.fq-tabs button b {
  font-size: .95rem !important;
  color: var(--navy) !important;
}
.fq-tabs button small {
  font-size: .7rem !important;
  color: var(--muted) !important;
  font-weight: 600 !important;
}
.fq-tabs button.on {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.fq-tabs button.on b {
  color: #fff !important;
}
.fq-tabs button.on small {
  color: #B9C8DA !important;
}

.fq {
  column-gap: 12px !important;
}
@media (min-width: 640px) {
  .fq {
    columns: 2 !important;
  }
}
@media (min-width: 960px) {
  .fq {
    columns: 3 !important;
  }
}

.fq-i {
  display: block !important;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  margin: 0 0 12px !important;
  break-inside: avoid !important;
  box-shadow: 0 2px 8px rgba(14,23,38,.03) !important;
  transition: box-shadow .2s, border-color .2s !important;
}
.fq-i:hover {
  border-color: #F3D27A !important;
  box-shadow: 0 8px 20px rgba(217,168,20,.12) !important;
}
.fq-i[open] {
  border-color: var(--money) !important;
  box-shadow: 0 10px 24px rgba(18,161,80,.12) !important;
}
.fq-i summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 16px !important;
  gap: 12px !important;
  cursor: pointer !important;
  list-style: none !important;
}
.fq-i summary::-webkit-details-marker {
  display: none !important;
}
.fq-i summary b {
  flex: 1 !important;
  font-size: .92rem !important;
  line-height: 1.35 !important;
  color: var(--navy) !important;
  text-align: left !important;
}
.fq-i summary::after {
  content: "+" !important;
  font-family: var(--f-display) !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: var(--money) !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  transition: transform .2s !important;
}
.fq-i[open] summary::after {
  content: "–" !important;
  color: var(--money-dk) !important;
}
.fq-q {
  width: 30px !important;
  height: 30px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #FFE47A, #F5B731) !important;
  color: var(--navy) !important;
  font-weight: 900 !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 2px rgba(14,23,38,.08) !important;
}
.fq-i[open] .fq-q {
  background: linear-gradient(135deg, var(--money), var(--money-dk)) !important;
  color: #fff !important;
}
.fq-a {
  display: flex !important;
  gap: 10px !important;
  padding: 0 16px 16px !important;
  align-items: flex-start !important;
}
.fq-ai {
  width: 30px !important;
  height: 30px !important;
  border-radius: 10px !important;
  background: var(--money-lt) !important;
  color: var(--money-dk) !important;
  font-weight: 900 !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}
.fq-a p {
  margin: 4px 0 0 !important;
  font-size: .86rem !important;
  line-height: 1.5 !important;
  color: #4A5568 !important;
}









/* =====================================================================
   SukaLOKAL UI/UX Master Hierarchy - Stabil, Pakem, Bersih & Cepat
   ===================================================================== */

/* 1. BUTTON SYSTEM: Hierarchy, Rounded 14px, Font 750, Smooth Hover */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 50px !important;
  padding: 0 24px !important;
  border-radius: 14px !important;
  font-family: var(--f-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 0.96rem !important;
  font-weight: 750 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.btn:hover {
  transform: translateY(-1.5px) !important;
}
.btn:active {
  transform: translateY(0) !important;
}
.btn-money {
  background: #0A6B43 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 14px rgba(10, 107, 67, 0.28) !important;
}
.btn-money:hover {
  background: #085434 !important;
  box-shadow: 0 8px 24px rgba(10, 107, 67, 0.38) !important;
}
.btn-gold {
  background: #F2B705 !important;
  color: #0E1726 !important;
  font-weight: 800 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 14px rgba(242, 183, 5, 0.24) !important;
}
.btn-gold:hover {
  background: #E0A700 !important;
  box-shadow: 0 8px 24px rgba(242, 183, 5, 0.35) !important;
}
.hero .btn-line,
.bhero .btn-line {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
.hero .btn-line:hover,
.bhero .btn-line:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}
.sec .btn-line,
.sec-cream .btn-line,
.sec-head .btn-line {
  background: #FFFFFF !important;
  border: 1.5px solid #D5DDD7 !important;
  color: var(--ink) !important;
  box-shadow: 0 2px 6px rgba(14, 23, 38, 0.04) !important;
}
.sec .btn-line:hover,
.sec-cream .btn-line:hover,
.sec-head .btn-line:hover {
  background: #F8FAF8 !important;
  border-color: #0A6B43 !important;
  color: #0A6B43 !important;
}
.btn-sm {
  min-height: 40px !important;
  padding: 0 18px !important;
  font-size: 0.88rem !important;
  border-radius: 12px !important;
}
.pc-ov .ib {
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.pc-ov .ib:hover {
  transform: scale(1.08) !important;
}
.pc-ov .ib-sh {
  background: #0A6B43 !important;
}
.pc-ov .ib-buy {
  background: #E05332 !important;
}

/* 2. HEADER: Beri padding dalam yang leluasa, tidak mepet ke tepi */
header.top {
  position: sticky !important;
  top: env(safe-area-inset-top, 0px) !important;
  z-index: 50 !important;
  background: rgba(14, 23, 38, 0.98) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 12px 0 !important;
}
.top .wrap {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 48px !important;
  height: auto !important;
  padding-inline: clamp(16px, 2.5vw, 32px) !important;
}

/* 3. IKON UP MELESAT: Harus selalu di SAMPING teks secara horizontal */
.tl i.up,
.up,
h2 i.up,
h1 i.up,
.logo i.up,
.wm i.up,
.closing i.up,
footer i.up {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  vertical-align: baseline !important;
}
.tl i.up svg,
.up svg,
h2 i.up svg,
h1 i.up svg,
.logo i.up svg,
.wm i.up svg,
.closing i.up svg,
footer i.up svg {
  display: inline-block !important;
  width: 0.92em !important;
  height: 0.92em !important;
  vertical-align: -0.05em !important;
  margin-left: 3px !important;
  flex-shrink: 0 !important;
  animation: none !important;
}

/* 4. HERO SECTION REFINEMENT: Ruang Nafas, Rapi, Tenang */
.hero .wave {
  opacity: 0.22 !important;
  pointer-events: none !important;
}
@media (min-width: 920px) {
  .hero .wrap {
    grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr) !important;
    gap: 48px !important;
    align-items: start !important;
    padding-block: 36px 44px !important;
  }
  .hero .wrap > div:first-child {
    padding-top: 10px !important;
    top: 80px !important;
  }
}
.hero .rule {
  width: 44px !important;
  height: 3px !important;
  background: #12A150 !important;
  border: 0 !important;
  border-radius: 99px !important;
  margin: 20px 0 16px !important;
}
.hero .notx {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 10px !important;
  align-items: center !important;
  margin: 0 0 14px 0 !important;
}
.hero .notx s {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: #94A3B8 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  text-decoration-color: #EF4444 !important;
  text-decoration-thickness: 1.5px !important;
}
.hero .notx b {
  color: #FBBF24 !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  margin-left: 2px !important;
}
.hero p.sub {
  font-size: 1.05rem !important;
  line-height: 1.55 !important;
  color: #CBD5E1 !important;
  margin: 0 0 14px 0 !important;
}
.hero p.sub b {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}
.earnchain,
.hero .earnchain {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 10px !important;
  align-items: center !important;
  margin: 0 0 18px 0 !important;
}
.earnchain span,
.hero .earnchain span,
.earnchain span:last-child,
.hero .earnchain span:last-child {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: #E2E8F0 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
  transition: background 0.2s, border-color 0.2s !important;
}
.earnchain span b,
.hero .earnchain span b {
  color: #8BE0B7 !important;
  font-weight: 750 !important;
}
.earnchain span:last-child b,
.hero .earnchain span:last-child b {
  color: #FFD84D !important;
  font-weight: 750 !important;
}
.hero .cta-row {
  display: flex !important;
  gap: 14px !important;
  align-items: center !important;
  margin-top: 22px !important;
}

/* 5. CARD 4 "3 JALAN UANG MASUK": Oceanic Sapphire Navy */
.ec.n {
  background: linear-gradient(145deg, #1A365D 0%, #152E52 100%) !important;
  border: 1.5px solid #2B5797 !important;
  box-shadow: 0 12px 28px rgba(21, 46, 82, 0.18) !important;
  border-radius: 20px !important;
  position: relative !important;
  overflow: hidden !important;
}
.ec.n::after {
  content: "PUSAT HOKI" !important;
  position: absolute !important;
  top: 16px !important;
  right: 20px !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background: #FBBF24 !important;
  color: #78350F !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.35) !important;
}
.ec.n b.x {
  color: rgba(255, 255, 255, 0.15) !important;
}
.ec.n .ico {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #FBBF24 !important;
}
.ec.n .ico svg {
  stroke: #FBBF24 !important;
}
.ec.n h3 {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}
.ec.n p {
  color: #C5D4E8 !important;
  line-height: 1.55 !important;
}

/* 6. HYB BANNER (Image 2): Kecilkan ukuran, space padding atas lebih lega */
.hy-foot {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 26px !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.hyb2 .hy-opc {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(11, 31, 58, 0.4) !important;
  border: 1px solid rgba(255, 216, 77, 0.45) !important;
  box-shadow: none !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
}
.hyb2 .hy-opc .hy-num {
  font-size: 1.05rem !important;
  color: #FFD84D !important;
  font-weight: 800 !important;
}
.hy-logos {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
}
.hy-lg,
.hyb2 .hy-lg {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
  outline: 1.5px solid rgba(255, 255, 255, 0.4) !important;
  transition: transform 0.15s ease !important;
}
.hy-lg:hover,
.hyb2 .hy-lg:hover {
  transform: scale(1.1) !important;
}
.hy-lg svg,
.hyb2 .hy-lg svg {
  width: 15px !important;
  height: 15px !important;
}

/* 7. CLOSING SECTION (Image 3): Ikon Up di Samping & Kurangi Padding Bawah */
.closing .wrap {
  padding-top: clamp(34px, 4vw, 48px) !important;
  padding-bottom: clamp(20px, 2.5vw, 30px) !important;
}

/* 8. SECTION TITLES: Proporsional, Elegan & Berwibawa */
:where(#app) .sec > .wrap > .c > h2,
:where(#app) .sec > .wrap > .sec-head > h2,
:where(#app) .sec > .wrap > h2,
:where(#app) .c > h2,
:where(#app) .sec-head > h2,
#app .sec > .wrap > .c > h2,
#app .sec > .wrap > .sec-head > h2,
#app .sec > .wrap > h2,
#app .c > h2,
#app .sec-head > h2,
.sec-head > h2,
.c > h2,
.sec-title {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.15rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.2 !important;
  color: var(--ink) !important;
  margin-bottom: 0 !important;
  padding-bottom: 6px !important;
}

/* =========================================================
   SECTION HEADER SPACING & BREATHING ROOM
   Memberikan jarak bawah yang lega dan proporsional untuk header seksi
   ========================================================= */
#app .c,
#app .sec .c,
.c,
.sec-head,
#app .sec-head {
  margin-bottom: clamp(24px, 2.8vw, 36px) !important;
  padding-bottom: 4px !important;
}

/* Step Flow Cards (kp-flow, dv-fl, ds-fl) Spacing */
.kp-flow,
#app .kp-flow,
#app .sec .kp-flow {
  margin-top: clamp(22px, 2.5vw, 32px) !important;
  margin-bottom: clamp(26px, 3vw, 38px) !important;
}

/* =========================================================
   CARD, WIDGET & TOOL HEADING HIERARCHY (BALANCED)
   Mengatur ukuran heading di dalam kartu agar seimbang dengan hierarki konten
   ========================================================= */
#app .tl-card h2,
#app .tl-card > h2,
#app .sec .tl-card h2,
#app .sec .tl-two .tl-card h2,
.tl-card h2,
.tl-card > h2 {
  font-size: 1.2rem !important;
  font-weight: 750 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.3 !important;
  color: var(--navy) !important;
  margin: 0 0 8px 0 !important;
}

#app .db-card h2,
#app .db-card-hd h2,
#app .sec .db-card h2,
#app .db-card-hd > h2,
.db-card h2,
.db-card-hd h2 {
  font-size: 1.3rem !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
  color: var(--navy) !important;
  margin: 4px 0 4px 0 !important;
}

#app .rg-card h2,
#app .rg-card-hd h2,
#app .sec .rg-card h2,
#app .rg-card-hd > h2,
.rg-card h2,
.rg-card-hd h2 {
  font-size: 1.3rem !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
  color: var(--navy) !important;
  margin: 4px 0 4px 0 !important;
}

#app .smp-g h2,
#app .sec .smp-g h2,
.smp-g h2 {
  font-size: 1.15rem !important;
  font-weight: 750 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.25 !important;
  color: var(--navy) !important;
  margin: 2px 4px 10px !important;
}

#app .av-ctl h2,
#app .sec .av-ctl h2,
.av-ctl h2 {
  font-size: 1.2rem !important;
  font-weight: 750 !important;
  line-height: 1.3 !important;
  color: var(--navy) !important;
}

#app .sb-vs-card h2,
#app .sb-vs-col h2,
.sb-vs-card h2 {
  font-size: 1.15rem !important;
  font-weight: 750 !important;
  line-height: 1.3 !important;
}
.eyebrow,
.pos-k,
.sec-head .eyebrow,
.c .eyebrow,
.sec .eyebrow {
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #0A6B43 !important;
  display: inline-block !important;
  margin-bottom: 8px !important;
}
.sec .c p,
.sec-head + p,
.sec-desc {
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.16rem) !important;
  line-height: 1.6 !important;
  color: #4A5568 !important;
  max-width: 65ch !important;
  margin-inline: auto !important;
}

/* Positioning bar .pos-l standard */
.pos-l {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.pos-k {
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #0A6B43 !important;
  margin: 0 !important;
}
.pos-l b {
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem) !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  color: var(--ink) !important;
}

/* Penegasan judul pada banner gelap (HYB, Hero, dark-card) */
#app .sec .hyb2 h2,
#app .hyb2 h2,
#app .hy-head h2,
.hyb2 h2,
.hy-head h2,
#app .hero h2,
#app .bhero h2,
.hero h2,
.bhero h2 {
  color: #FFFFFF !important;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem) !important;
  font-weight: 850 !important;
  line-height: 1.18 !important;
}
#app .sec .hyb2 h2 em,
#app .hyb2 h2 em,
#app .hy-head h2 em,
.hyb2 h2 em,
.hy-head h2 em {
  color: #8BE0B7 !important;
  display: block !important;
}

/* 9. FOOTER LINKS (Image 4): Tanpa Icon/Emoji, Bullet Warna Secondary Background */
footer.ft[data-emoji] .ft-col .fi,
footer.ft .ft-col .fi,
.ft-col .fi,
footer.ft h4 span,
.ft-col h4 span {
  display: none !important;
}
.ft-col h4 {
  font-size: 0.86rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  color: #FFFFFF !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.ft-col a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 0 !important;
  color: #9FB0C8 !important;
  font-size: 0.82rem !important;
  text-decoration: none !important;
  transition: color 0.15s ease, transform 0.15s ease !important;
}
.ft-col a::before {
  content: "•" !important;
  color: #4A5E78 !important; /* Secondary tone dari background footer */
  font-size: 1.1rem !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  transition: color 0.15s ease, transform 0.15s ease !important;
}
.ft-col a:hover {
  color: #FFFFFF !important;
  transform: translateX(3px) !important;
}
.ft-col a:hover::before {
  color: var(--gold) !important;
}

/* ==========================================================================
   10. MASTER SUBPAGE UI/UX SYSTEM: HARMONISASI KONTRAST, KARTU & TIPOGRAFI
   ========================================================================== */

/* A. Context-Aware Color & Contrast Guard (Dark Sections) */
.sec.ck-dark,
.ck-dark,
.op-hero,
.oa-hero,
.sb-hero,
.tl-hero,
.bd-hero,
.kt-hero,
.dv-hero,
.ab-hero,
.lgl-hero,
.ck-hero,
.bhero,
.hero,
.hyb2,
.sb-live,
footer.ft,
.oa-tabs-w {
  color: #FFFFFF;
}

/* Heading di dalam area gelap WAJIB putih dan kontras */
.sec.ck-dark h1,
.sec.ck-dark h2,
.sec.ck-dark h3,
.ck-dark h1,
.ck-dark h2,
.ck-dark h3,
.op-hero h1,
.op-hero h2,
.op-hero h3,
.oa-hero h1,
.oa-hero h2,
.oa-hero h3,
.sb-hero h1,
.sb-hero h2,
.sb-hero h3,
.tl-hero h1,
.tl-hero h2,
.tl-hero h3,
.bd-hero h1,
.bd-hero h2,
.bd-hero h3,
.dv-hero h1,
.dv-hero h2,
.dv-hero h3,
.ab-hero h1,
.ab-hero h2,
.ab-hero h3,
.lgl-hero h1,
.lgl-hero h2,
.lgl-hero h3,
.ck-hero h1,
.ck-hero h2,
.ck-hero h3,
.bhero h1,
.bhero h2,
.bhero h3,
.hero h1,
.hero h2,
.hero h3,
.hyb2 h1,
.hyb2 h2,
.hyb2 h3,
.sb-live h1,
.sb-live h2,
.sb-live h3 {
  color: #FFFFFF !important;
}

/* Eyebrow di area gelap WAJIB warna gold / mint cerah, BUKAN hijau tua pekat */
.sec.ck-dark .eyebrow,
.ck-dark .eyebrow,
.op-hero .eyebrow,
.oa-hero .eyebrow,
.sb-hero .eyebrow,
.tl-hero .eyebrow,
.bd-hero .eyebrow,
.dv-hero .eyebrow,
.ab-hero .eyebrow,
.lgl-hero .eyebrow,
.ck-hero .eyebrow,
.bhero .eyebrow,
.hero .eyebrow,
.hyb2 .eyebrow,
.sb-live .eyebrow {
  color: var(--gold, #F2B705) !important;
}

/* Seksi Closing: Background Cream Terang, Teks Gelap Tegas */
.closing {
  background: var(--cream, #F6F3EC) !important;
  color: var(--navy, #0E1726) !important;
  text-align: center;
}
.closing h2,
.closing h2 .tl,
.closing h2 .tl i {
  color: var(--navy, #0E1726) !important;
  font-style: normal;
}
.closing h2 .tl i.up {
  color: var(--money-dk, #0A6B43) !important;
}
.closing p {
  color: #5D6778 !important;
}

/* Deskripsi / paragraf di area gelap WAJIB soft slate cerah */
.sec.ck-dark p,
.sec.ck-dark .c p,
.ck-dark p,
.op-hero p,
.oa-hero p,
.sb-hero p,
.tl-hero p,
.bd-hero p,
.dv-hero p,
.ab-hero p,
.lgl-hero p,
.ck-hero p,
.bhero p,
.hero p,
.hyb2 p,
.sb-live p {
  color: #C9D6E8 !important;
}

/* ==========================================================================
   B. CARA KERJA (Image 1): Anti Curang Dark Card & Kalkulator Smooth Match
   ========================================================================== */

/* Section Anti Curang: Executive Dark Canvas */
.sec.ck-dark,
.ck-dark {
  background: linear-gradient(160deg, #081629 0%, #0F2238 60%, #0B1F33 100%) !important;
  padding-block: clamp(44px, 5vw, 64px) !important;
  color: #FFFFFF !important;
}

.sec.ck-dark .c h2,
.ck-dark .c h2 {
  font-size: clamp(1.85rem, 1.35rem + 1.8vw, 2.75rem) !important;
  font-weight: 850 !important;
  color: #FFFFFF !important;
}

.sec.ck-dark .eyebrow,
.ck-dark .eyebrow {
  color: #5CE5A3 !important;
}

.sec.ck-dark p,
.ck-dark p {
  color: #C9D6E8 !important;
}

/* 5 Kartu Anti-Curang: Dark glass cards dengan outline lembut */
.ck-sh {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  margin-top: 24px !important;
}
@media (min-width: 860px) {
  .ck-sh {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}
.ck-sh div {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 18px !important;
  padding: 16px 14px !important;
  display: grid !important;
  gap: 6px !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22) !important;
  transition: transform 0.2s ease, border-color 0.2s ease !important;
}
.ck-sh div:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(92, 229, 163, 0.45) !important;
}
.ck-sh span {
  font-size: 1.6rem !important;
  line-height: 1 !important;
}
.ck-sh b {
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
}
.ck-sh small {
  font-size: 0.76rem !important;
  color: #D1DEED !important;
  line-height: 1.48 !important;
}

/* Section Kalkulator ("Hitung Sendiri, Angkanya Jujur"):
   Background halus var(--bg) cream, card putih membaur lembut tanpa silau */
body.pg-ck .sec:has(.ckcs),
.sec:has(.ckcs) {
  background: var(--bg, #FAF7F0) !important;
  padding-block: clamp(44px, 5vw, 64px) !important;
}

.sec:has(.ckcs) .c h2,
.sec:has(.ckc) .c h2 {
  color: var(--ink, #0B1F3A) !important;
  font-size: clamp(1.85rem, 1.35rem + 1.8vw, 2.75rem) !important;
  font-weight: 850 !important;
}

.sec:has(.ckcs) .eyebrow,
.sec:has(.ckc) .eyebrow {
  color: #0A6B43 !important;
}

.sec:has(.ckcs) .c p,
.sec:has(.ckc) .c p {
  color: #5A6A85 !important;
}

/* Kartu Kalkulator .ckc: Soft & Smooth Integration */
.ckc {
  background: #FFFFFF !important;
  color: var(--ink, #0B1F3A) !important;
  border: 1px solid rgba(11, 31, 58, 0.08) !important;
  border-radius: 24px !important;
  padding: clamp(20px, 3vw, 32px) !important;
  box-shadow: 0 16px 44px rgba(11, 31, 58, 0.06), 0 2px 6px rgba(11, 31, 58, 0.02) !important;
}
.ckc[data-calc="m"] {
  border-top: 4px solid var(--money, #0E8A55) !important;
}
.ckc-br {
  border-top: 4px solid var(--gold, #F2B705) !important;
}
.ckc-h h2 {
  font-size: 1.45rem !important;
  font-weight: 850 !important;
  color: var(--ink, #0B1F3A) !important;
}
.ckc-h .eyebrow {
  color: var(--money-dk, #0A6B43) !important;
}
.ckc-h p {
  color: #5A6A85 !important;
  font-size: 0.9rem !important;
}
.ckc-in label {
  color: var(--navy, #0B1F3A) !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
}
.ckc-in label b {
  color: var(--money-dk, #0A6B43) !important;
  font-size: 1.02rem !important;
}
.ckc-in small {
  color: #718096 !important;
}
.ckc-seg {
  background: #F1F4F8 !important;
  border-radius: 12px !important;
  padding: 4px !important;
}
.ckc-seg button {
  font-weight: 800 !important;
  font-size: 0.78rem !important;
  color: #5A6A85 !important;
  border-radius: 9px !important;
  padding: 8px 6px !important;
}
.ckc-seg button.on {
  background: var(--navy, #0B1F3A) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 10px rgba(11, 31, 58, 0.15) !important;
}
.ckc-tot div {
  border-radius: 16px !important;
}
.ckc-tot div:first-child {
  background: linear-gradient(135deg, #0E8A55, #085A37) !important;
}
.ckc-tot div:first-child * {
  color: #FFFFFF !important;
}
.ckc-tot div:last-child {
  background: #EAF4EE !important;
  border: 1px solid #BCE2CE !important;
}
.ckc-tot div:last-child b {
  color: #0A6B43 !important;
}
.ckc-as {
  background: rgba(11, 31, 58, 0.035) !important;
  border: 1px solid rgba(11, 31, 58, 0.08) !important;
  border-radius: 16px !important;
  color: #4A5568 !important;
  padding: 14px 18px !important;
  font-size: 0.76rem !important;
}
.ckc-as b {
  color: var(--ink, #0B1F3A) !important;
}

/* ==========================================================================
   C. OPC-AI (Image 2) & BOOSTER PAGES: Penghapusan Belang & Transisi Halus
   ========================================================================== */

/* 1. Top Tab Bar .oa-tabs-w: Warna Gelap Selaras dengan Header & Hero */
.oa-tabs-w {
  position: relative !important;
  top: auto !important;
  background: #081629 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
  padding: 18px 0 12px 0 !important;
  z-index: 10 !important;
}
.oa-tabs-w .tl-ey {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #FFD84D !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  display: inline-block !important;
  margin-bottom: 8px !important;
}
.oa-tabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
.oa-tabs button {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  color: #FFFFFF !important;
  padding: 12px 16px !important;
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  grid-template-rows: auto auto !important;
  column-gap: 12px !important;
  align-items: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}
.oa-tabs button i {
  font-size: 1.5rem !important;
}
.oa-tabs button b {
  font-size: 0.95rem !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
}
.oa-tabs button small {
  font-size: 0.72rem !important;
  color: #A9BAD0 !important;
}
.oa-tabs button:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}
.oa-tabs button.on {
  background: linear-gradient(135deg, rgba(53, 89, 199, 0.35), rgba(14, 138, 85, 0.35)) !important;
  border: 2px solid #5CE5A3 !important;
  box-shadow: 0 0 0 1px #5CE5A3, 0 8px 24px rgba(14, 138, 85, 0.25) !important;
}
.oa-tabs button.on b {
  color: #FFFFFF !important;
}
.oa-tabs button.on small {
  color: #D1FAE5 !important;
}
.oa-hint {
  color: #8E9FB8 !important;
  font-size: 0.76rem !important;
  margin-top: 6px !important;
}

/* 2. Hero Halaman Booster (.op-hero, .oa-hero, .sb-hero, dll.) */
.op-hero,
.oa-hero,
.sb-hero,
.tl-hero,
.bd-hero,
.dv-hero,
.ab-hero,
.lgl-hero,
.ck-hero {
  background: radial-gradient(70% 90% at 85% 0%, rgba(139, 224, 183, 0.12), transparent 60%),
              radial-gradient(50% 60% at 10% 100%, rgba(53, 89, 199, 0.1), transparent 60%),
              #0E1726 !important;
  color: #FFFFFF !important;
  padding-block: clamp(40px, 5vw, 56px) clamp(34px, 4vw, 48px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.op-hero h1,
.oa-hero h1,
.sb-hero h1,
.tl-hero h1,
.bd-hero h1,
.dv-hero h1,
.ab-hero h1,
.lgl-hero h1,
.ck-hero h1 {
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.2rem) !important;
  font-weight: 850 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.03em !important;
  color: #FFFFFF !important;
}
.op-hero h1 em,
.oa-hero h1 em,
.sb-hero h1 em,
.tl-hero h1 em,
.bd-hero h1 em,
.dv-hero h1 em,
.ab-hero h1 em,
.lgl-hero h1 em,
.ck-hero h1 em {
  color: #8BE0B7 !important;
  -webkit-text-fill-color: #8BE0B7 !important;
  background: none !important;
}
.op-role {
  color: #A9BAD0 !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
}
.op-meta span {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #FFFFFF !important;
  border-radius: 12px !important;
  padding: 6px 12px !important;
  font-size: 0.8rem !important;
}
.op-meta small {
  color: #8E9FB8 !important;
}
.op-mis {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 216, 77, 0.35) !important;
  border-radius: 18px !important;
  padding: 16px 20px !important;
}
.op-mis b {
  color: var(--gold, #F2B705) !important;
}
.op-mis p {
  color: #DCE6F2 !important;
  margin-top: 6px !important;
  line-height: 1.6 !important;
}

/* 3. Transisi Seksi Bawah Hero: Background Lembut & Floating Dock .tl-nav */
.oa-p .sec,
#app .sec {
  background: var(--bg, #FAF7F0) !important;
  padding-block: clamp(36px, 4vw, 54px) !important;
}

/* Floating Dock .tl-nav: Terpusat, Rapi, dan Bernyawa */
.tl-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(11, 31, 58, 0.08) !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 20px rgba(11, 31, 58, 0.04) !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 auto 34px auto !important;
  justify-content: center !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.tl-nav::-webkit-scrollbar {
  display: none !important;
}
.tl-nav a {
  padding: 8px 16px !important;
  border-radius: 999px !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  color: #4A5568 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  transition: all 0.18s ease !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.tl-nav a:hover {
  color: var(--navy, #0B1F3A) !important;
  background: #F1F4F8 !important;
}
.tl-nav a.on {
  background: var(--navy, #0B1F3A) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(11, 31, 58, 0.18) !important;
}

/* 4. Kartu 6 Mesin .op-d di OPI Commander: Bersih, Rapi & Elegan */
.op-d {
  background: #FFFFFF !important;
  border: 1px solid rgba(11, 31, 58, 0.08) !important;
  border-radius: 20px !important;
  padding: 18px 20px !important;
  box-shadow: 0 8px 24px rgba(11, 31, 58, 0.04) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.op-d:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(11, 31, 58, 0.08) !important;
}
.op-d b {
  color: var(--ink, #0B1F3A) !important;
  font-size: 1.02rem !important;
  font-weight: 800 !important;
}
.op-d small {
  color: var(--muted, #5A6A85) !important;
  font-size: 0.84rem !important;
  line-height: 1.55 !important;
}
.op-d em {
  background: #0E8A55 !important;
  font-weight: 800 !important;
}

/* 5. Kartu Format Laporan & Prinsip OPI Commander */
.op-fmt div {
  background: #FFFFFF !important;
  border: 1px solid rgba(11, 31, 58, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 14px rgba(11, 31, 58, 0.03) !important;
}
.op-pr {
  border-radius: 20px !important;
  box-shadow: 0 6px 20px rgba(11, 31, 58, 0.04) !important;
}
.op-steps li {
  background: #FFFFFF !important;
  border: 1px solid rgba(11, 31, 58, 0.08) !important;
  box-shadow: 0 4px 12px rgba(11, 31, 58, 0.02) !important;
}

/* ===== Header Mobile: Bersih, Rapi & Proporsional Tanpa Tumpang Tindih ===== */
@media (max-width: 768px) {
  header.top {
    padding: 0 !important;
    width: 100% !important;
    overflow: visible !important;
  }
  .top .wrap {
    gap: 6px !important;
    min-height: 48px !important;
    height: 50px !important;
    padding-inline: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Spacer dinonaktifkan di mobile agar elemen tidak terdorong keluar layar */
  .top .sp {
    display: none !important;
  }

  /* 1. Logo responsif: kompak, sembunyikan .com dan tagline di mobile */
  .top .logo {
    gap: 6px !important;
    font-size: 1.05rem !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .top .logo-mark {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }
  .top .logo-mark svg {
    width: 20px !important;
    height: 20px !important;
  }
  .top .wm {
    font-size: 1.05rem !important;
    line-height: 1 !important;
    display: inline-block !important;
  }
  .top .wm .wm-tld,
  .top .wm i,
  .top .wm .tg,
  .top .wm i.up,
  .top .logo small {
    display: none !important;
  }

  /* 2. Sembunyikan ikon cart & Cara Kerja di header mobile */
  .top .hd-cart,
  .top .ck-btn {
    display: none !important;
  }

  /* 3. Tombol Booster OPC mobile: ikon presisi 30x30px */
  .top .bo {
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
  .top .bo-btn {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
  }
  .top .bo-btn b,
  .top .bo-btn i:not(.ik) {
    display: none !important;
  }
  .top .bo-btn .bo-r {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    animation: none !important;
    width: 15px !important;
    height: 15px !important;
  }
  .top .bo-btn .ik,
  .top .bo-btn svg {
    width: 15px !important;
    height: 15px !important;
    display: block !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
  }
  .top .bo-btn.on,
  .top .bo-btn[aria-expanded="true"] {
    background: var(--gold) !important;
    color: var(--navy) !important;
    border-color: var(--gold) !important;
  }

  /* 4. Audience pills (.aud): Proporsional, sejajar, dan anti-overflow */
  .top .aud {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 999px !important;
    padding: 2px !important;
    gap: 2px !important;
    flex-shrink: 0 !important;
  }
  .top .aud .aud-prefix {
    display: none !important;
  }
  .top .aud a {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 8px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    color: #C9D6E8 !important;
    border: none !important;
  }
  .top .aud a.on {
    background: #FFFFFF !important;
    color: var(--navy) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  }

  /* 5. Auth / Login CTA: Masuk presisi, anti-cut-off */
  .top .hd-auth-wrap {
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }
  .top .hd-login-btn {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 9px !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }
  .top .hd-login-btn .hd-login-extra {
    display: none !important;
  }
  .top .hd-login-btn svg {
    width: 13px !important;
    height: 13px !important;
    flex-shrink: 0 !important;
  }
  .top .hd-login-caret {
    font-size: 0.65rem !important;
    margin-left: 0 !important;
  }

  /* 6. User Button Saat Sudah Login */
  .top .hd-user-btn {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 6px 0 3px !important;
    font-size: 0.74rem !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
  }
  .top .hd-user-avatar {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.68rem !important;
  }
  .top .hd-user-name {
    max-width: 60px !important;
    font-size: 0.72rem !important;
  }
  .top .hd-user-caret {
    font-size: 0.65rem !important;
  }
}

@media (max-width: 360px) {
  .top .wrap {
    gap: 4px !important;
    padding-inline: 6px !important;
  }
  .top .logo {
    font-size: 0.95rem !important;
    gap: 4px !important;
  }
  .top .logo-mark {
    width: 26px !important;
    height: 26px !important;
  }
  .top .bo-btn {
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
  }
  .top .aud a {
    padding: 0 6px !important;
    font-size: 0.68rem !important;
    height: 28px !important;
    min-height: 28px !important;
  }
  .top .hd-login-btn {
    padding: 0 6px !important;
    font-size: 0.7rem !important;
    height: 28px !important;
    min-height: 28px !important;
  }
}

@media (max-width: 330px) {
  .top .bo {
    display: none !important;
  }
}

/* ===== Redesain Modern Form Daftar Brand (/daftar-brand) ===== */
.db-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(14, 138, 85, 0.25);
  border: 1px solid rgba(14, 138, 85, 0.6);
  color: #6EE7B7;
  padding: 6px 14px;
  border-radius: 99px;
  width: fit-content;
}
.db-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: dbPulse 2s infinite;
}
@keyframes dbPulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.db-title {
  font-family: var(--f-display);
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 800;
  line-height: 1.18;
  color: #ffffff;
  margin: 0;
}
.db-highlight {
  background: linear-gradient(135deg, #FFD84D 0%, #F5A623 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.db-browser-mockup {
  background: rgba(11, 31, 58, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  padding: 9px 12px;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  margin: 2px 0 6px;
}
.db-browser-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.db-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}
.db-dot-r { background: #EF4444; }
.db-dot-y { background: #F59E0B; }
.db-dot-g { background: #10B981; }
.db-browser-url {
  flex: 1;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 5px 10px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.8rem;
  color: #E2ECF6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-browser-url strong {
  color: #FFD84D;
  font-weight: 800;
}
.db-browser-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: #10B981;
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 3px 8px;
  border-radius: 99px;
  white-space: nowrap;
}
.db-feature-cards {
  display: grid;
  gap: 10px;
  margin: 4px 0;
}
.db-feat-card {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 12px 14px;
  backdrop-filter: blur(8px);
  transition: all .2s;
}
.db-feat-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}
.db-feat-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  flex: none;
}
.db-feat-card b {
  display: block;
  font-size: 0.9rem;
  color: #FFFFFF;
  margin-bottom: 2px;
}
.db-feat-card p {
  font-size: 0.82rem;
  color: #CBD5E1;
  margin: 0;
  line-height: 1.45;
}
.db-quote-box {
  background: rgba(14, 138, 85, 0.14);
  border-left: 3px solid #10B981;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: #D1FAE5;
  margin-top: 4px;
}
.db-quote-box p {
  margin: 0 0 4px;
  font-style: italic;
}
.db-quote-box span {
  display: block;
  font-weight: 700;
  color: #FFFFFF;
  font-size: 0.78rem;
}
.db-card-badge-top {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #0E8A55;
  background: #DCFCE7;
  padding: 4px 10px;
  border-radius: 99px;
  margin-bottom: 8px;
}
.db-section-box {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 16px;
  display: grid;
  gap: 12px;
}
.db-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--navy);
  border-bottom: 1px solid #E2E8F0;
  padding-bottom: 8px;
  margin-bottom: 2px;
}
.db-sec-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #0B1F3A;
  color: #FFD84D;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 800;
  flex: none;
}
.db-sub-input-wrap {
  display: flex;
  align-items: center;
  border: 1.5px solid #CBD5E1;
  border-radius: 10px;
  background: #FFFFFF;
  overflow: hidden;
  transition: all .15s;
}
.db-sub-input-wrap:focus-within {
  border-color: #0E8A55;
  box-shadow: 0 0 0 3px rgba(14, 138, 85, 0.15);
}
.db-sub-prefix, .db-sub-suffix {
  background: #F1F5F9;
  color: #64748B;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 10px 11px;
  white-space: nowrap;
  flex: none;
}
.db-sub-input-wrap input {
  border: none !important;
  border-radius: 0 !important;
  padding: 10px 8px !important;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.94rem;
  font-weight: 700;
  color: #0B1F3A;
  background: transparent !important;
  flex: 1;
  min-width: 0;
  outline: none !important;
  box-shadow: none !important;
}
.db-hint {
  font-size: 0.74rem;
  color: #64748B;
  margin-top: 2px;
  display: block;
}
.db-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media(max-width: 520px) {
  .db-type-grid { grid-template-columns: 1fr; }
}
.db-type-card {
  border: 1.5px solid #CBD5E1;
  border-radius: 12px;
  background: #FFFFFF;
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: all .15s;
  font: inherit;
}
.db-type-card:hover {
  border-color: #94A3B8;
  background: #F8FAFC;
}
.db-type-card.on {
  border-color: #0E8A55;
  background: #F0FDF4;
  box-shadow: 0 4px 12px rgba(14, 138, 85, 0.15);
}
.db-type-icon { font-size: 1.25rem; }
.db-type-card b { font-size: 0.82rem; color: #0F172A; }
.db-type-card.on b { color: #0A6B43; }
.db-type-card small { font-size: 0.68rem; color: #64748B; line-height: 1.2; }

/* ===== Searchable Select untuk Pilihan Brand Mitra (/daftar) ===== */
.rg-search-select {
  position: relative;
  width: 100%;
}
.rg-ss-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border: 1.5px solid #CBD5E1;
  border-radius: 12px;
  background: #F8FAFC;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: all .15s;
}
.rg-ss-trigger:hover, .rg-ss-trigger:focus {
  border-color: #0E8A55;
  background: #FFFFFF;
  outline: none;
  box-shadow: 0 0 0 3px rgba(14, 138, 85, 0.15);
}
.rg-ss-trigger.has-error {
  border-color: #E5484D !important;
  background: #FFF5F5 !important;
  box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.2) !important;
}
.rg-ss-avatar {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #1E40AF;
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-weight: 800;
  flex: none;
}
.rg-ss-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.rg-ss-text b {
  font-size: 0.9rem;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rg-ss-text small {
  font-size: 0.72rem;
  color: #64748B;
}
.rg-ss-chevron {
  font-size: 0.9rem;
  color: #94A3B8;
  flex: none;
}
.rg-ss-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(11, 31, 58, 0.2);
  z-index: 60;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.rg-ss-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #E2E8F0;
  background: #F8FAFC;
}
.rg-ss-search-bar input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  font: inherit;
  font-size: 0.88rem;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: #0F172A;
}
.rg-ss-list {
  max-height: 220px;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rg-ss-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: none;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .12s;
}
.rg-ss-item:hover {
  background: #F1F5F9;
}
.rg-ss-item.selected {
  background: #ECFDF5;
}
.rg-ss-item-av {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #E2E8F0;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.78rem;
  color: #334155;
  flex: none;
}
.rg-ss-item.selected .rg-ss-item-av {
  background: #10B981;
  color: #ffffff;
}
.rg-ss-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.rg-ss-item-name {
  font-size: 0.86rem;
  color: #0F172A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rg-ss-item.selected .rg-ss-item-name {
  color: #065F46;
  font-weight: 800;
}
.rg-ss-item-desc {
  font-size: 0.72rem;
  color: #64748B;
}
.rg-ss-item-check {
  color: #10B981;
  font-weight: 800;
  font-size: 0.95rem;
  flex: none;
}
.rg-ss-empty {
  padding: 16px;
  text-align: center;
  font-size: 0.82rem;
  color: #64748B;
}

/* =========================================================
   1. SITEMAP HEADING FONT SIZE NORMALIZATION
   ========================================================= */
.smp-g h2,
#app .smp-g h2,
#app .sec .smp-g h2,
.smp-g h2,
.sec .smp-g h2,
:where(#app) .smp-g h2 {
  font-size: 1.15rem !important;
  font-weight: 750 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.25 !important;
  margin: 2px 4px 10px !important;
}
#app .tl-card h2,
#app .sec .tl-card h2,
.tl-card h2,
.sec .tl-card h2,
:where(#app) .tl-card h2 {
  font-size: 1.2rem !important;
  font-weight: 750 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.3 !important;
  margin: 0 0 8px 0 !important;
}

/* =========================================================
   2. MULTI-STEP WIZARD FOR DAFTAR BRAND (/daftar-brand)
   ========================================================= */
.db-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  position: relative;
  padding: 0 4px;
}
.db-stepper::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 20px;
  right: 20px;
  height: 2px;
  background: #E2E8F0;
  z-index: 1;
}
.db-stepper-progress {
  position: absolute;
  top: 15px;
  left: 20px;
  height: 2px;
  background: #0E8A55;
  z-index: 2;
  transition: width 0.3s ease;
  width: 0%;
}
.db-step-item {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
}
.db-step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #CBD5E1;
  color: #64748B;
  display: grid;
  place-items: center;
  font-size: 0.82rem;
  font-weight: 750;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.db-step-item.active .db-step-circle {
  background: #0B1F3A;
  border-color: #0B1F3A;
  color: #FFD84D;
  box-shadow: 0 0 0 4px rgba(11, 31, 58, 0.15);
}
.db-step-item.completed .db-step-circle {
  background: #0E8A55;
  border-color: #0E8A55;
  color: #FFFFFF;
}
.db-step-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748B;
  transition: color 0.2s;
  white-space: nowrap;
}
.db-step-item.active .db-step-label {
  color: #0B1F3A;
  font-weight: 800;
}
.db-step-item.completed .db-step-label {
  color: #0E8A55;
}
.db-step-pane {
  display: none;
}
.db-step-pane.active {
  display: grid;
  gap: 14px;
  animation: dbFadeIn 0.22s ease-out;
}
@keyframes dbFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.db-step-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}
.db-step-prev-btn {
  background: #F1F5F9;
  border: 1.5px solid #CBD5E1;
  color: #334155;
  border-radius: 12px;
  padding: 11px 18px;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.15s;
}
.db-step-prev-btn:hover {
  background: #E2E8F0;
  color: #0F172A;
}
.db-step-next-btn {
  flex: 1;
  background: linear-gradient(135deg, #0B1F3A 0%, #173860 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 12px;
  padding: 12px 20px;
  font-weight: 800;
  font-size: 0.92rem;
  cursor: pointer;
  transition: all 0.18s;
  box-shadow: 0 4px 14px rgba(11, 31, 58, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.db-step-next-btn:hover {
  background: linear-gradient(135deg, #122849 0%, #1e4676 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(11, 31, 58, 0.28);
}

/* =========================================================
   3. DIFFERENTIATED 2-COLUMN THEME FOR DAFTAR MITRA (/daftar)
   ========================================================= */
.rg-sec {
  background: radial-gradient(75% 65% at 15% 10%, rgba(14, 138, 85, 0.28), transparent 60%),
              radial-gradient(55% 55% at 85% 90%, rgba(255, 216, 77, 0.15), transparent 50%),
              linear-gradient(160deg, #071526 0%, #0B1F3A 50%, #06261D 100%) !important;
  color: #fff !important;
  padding: 44px 0 68px !important;
  min-height: 80vh !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
}
.rg-wrap {
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 16px;
}
.rg-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 36px;
  align-items: start;
}
@media (max-width: 900px) {
  .rg-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
.rg-left {
  display: grid;
  gap: 16px;
}
.rg-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(14, 138, 85, 0.2);
  border: 1px solid rgba(14, 138, 85, 0.45);
  color: #6EE7B7;
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  justify-self: start;
}
.rg-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 10px #10B981;
  animation: dbPulseAnim 1.8s infinite;
}
.rg-title {
  font-family: var(--f-display);
  font-size: clamp(1.85rem, 5vw, 2.75rem);
  font-weight: 850;
  line-height: 1.14;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: -0.03em;
}
.rg-highlight {
  background: linear-gradient(90deg, #10B981 0%, #34D399 45%, #FDE047 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.rg-sub {
  color: #D1E5DE;
  font-size: 0.96rem;
  line-height: 1.65;
  margin: 0;
}
.rg-cuan-box {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 16px;
  padding: 16px;
  backdrop-filter: blur(10px);
  display: grid;
  gap: 10px;
}
.rg-cuan-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6EE7B7;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
}
.rg-cuan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 500px) {
  .rg-cuan-grid {
    grid-template-columns: 1fr;
  }
}
.rg-cuan-stat {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 8px 10px;
}
.rg-cuan-stat small {
  display: block;
  font-size: 0.68rem;
  color: #94A3B8;
  font-weight: 600;
}
.rg-cuan-stat b {
  font-size: 1.05rem;
  color: #FFD84D;
  font-family: var(--f-display);
}
.rg-feature-cards {
  display: grid;
  gap: 10px;
}
.rg-feat-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 12px 14px;
  backdrop-filter: blur(8px);
  transition: transform 0.2s, background 0.2s;
}
.rg-feat-card:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}
.rg-feat-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.35);
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  flex: none;
}
.rg-feat-card b {
  display: block;
  font-size: 0.9rem;
  color: #FFFFFF;
  margin-bottom: 2px;
}
.rg-feat-card p {
  font-size: 0.78rem;
  color: #CBD5E1;
  line-height: 1.45;
  margin: 0;
}
.rg-quote-box {
  background: rgba(14, 138, 85, 0.12);
  border-left: 3px solid #10B981;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #C8E5D8;
}
.rg-quote-box span {
  display: block;
  font-size: 0.72rem;
  color: #6EE7B7;
  font-weight: 700;
  margin-top: 4px;
}
.rg-card {
  background: #FFFFFF !important;
  color: var(--navy) !important;
  border-radius: 22px !important;
  padding: 28px 24px !important;
  box-shadow: 0 20px 48px rgba(11, 31, 58, 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* =========================================================
   4. PRODUCT SEARCHABLE SELECT WITH CAMPAIGNS & IMAGES
   ========================================================= */
.rg-ss-prod-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  flex: none;
}
.rg-ss-badge-camp {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  color: #92400E;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  white-space: nowrap;
}
.rg-ss-badge-kom {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #065F46;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  white-space: nowrap;
}
.rg-ss-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  flex-wrap: wrap;
}
.rg-ss-price-tag {
  font-family: var(--f-display);
  font-size: 0.82rem;
  font-weight: 750;
  color: #0F172A;
}

/* ==========================================================================
   1. BOLD HEADINGS REINFORCEMENT (Kontak & Legal)
   ========================================================================== */
#app .kt-hero h1,
#app .kt-hero h1 b,
#app .kt-hero h1 em,
.kt-hero h1,
.kt-hero h1 b {
  font-weight: 850 !important;
}

#app .kt-box h3,
#app .kt-box h3 b,
.kt-box h3,
.kt-box h3 b {
  font-weight: 800 !important;
  font-size: 1.05rem !important;
}

#app .kt-box.bd h3,
#app .kt-box.bd h3 b {
  color: var(--gold) !important;
  font-weight: 800 !important;
}

#app .kt-box.g h3,
#app .kt-box.g h3 b {
  color: #0A6B43 !important;
  font-weight: 800 !important;
}

/* ==========================================================================
   2. UNIVERSAL REQUIRED ASTERISK RED COLOR (* Wajib Diisi)
   ========================================================================== */
#app label .req,
#app label span.req,
#app .field label .req,
#app .field label span.req,
#app .kt-form label .req,
#app .ft1m-form label .req,
#app .db-form label .req,
#app .rg-form label .req,
#app .form label .req,
#app .kt-agree .req,
#app .ft1m-agree .req,
#app p.tiny .req,
label .req,
label span.req,
.req {
  color: #E5484D !important;
  font-weight: 800 !important;
  display: inline !important;
  margin-left: 2px !important;
}

/* ==========================================================================
   3. SYARAT KETENTUAN & KEBIJAKAN PRIVASI: BOLD JUDUL & IKON TERLIHAT
   ========================================================================== */
#app .lgl-s h2,
.lgl-s h2 {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: var(--navy) !important;
  margin: 0 0 12px !important;
}

#app .lgl-s h2 b,
.lgl-s h2 b {
  font-weight: 800 !important;
  color: var(--navy) !important;
  font-size: 1.25rem !important;
}

#app .lgl-s h2 i,
#app .lgl-s h2 i.lgl-ico,
.lgl-s h2 i,
.lgl-s h2 i.lgl-ico {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #F1F4F8 !important;
  color: var(--navy) !important;
  flex: none !important;
}

#app .lgl-s h2 i svg.ik,
#app .lgl-s h2 i.lgl-ico svg.ik,
.lgl-s h2 i svg.ik,
.lgl-s h2 i.lgl-ico svg.ik {
  width: 20px !important;
  height: 20px !important;
  stroke: var(--navy) !important;
  stroke-width: 2 !important;
  display: block !important;
}

#app .lgl-s.role h2 i,
.lgl-s.role h2 i {
  background: #E9F4EE !important;
  color: #0A6B43 !important;
}

#app .lgl-s.role h2 i svg.ik,
.lgl-s.role h2 i svg.ik {
  stroke: #0A6B43 !important;
}

#app .lgl-s.brand h2 i,
.lgl-s.brand h2 i {
  background: #FDF4DC !important;
  color: #7A5A00 !important;
}

#app .lgl-s.brand h2 i svg.ik,
.lgl-s.brand h2 i svg.ik {
  stroke: #7A5A00 !important;
}

/* ==========================================================================
   4. TENTANG KAMI: FOTO PROFIL PENDIRI (HELMY YAHYA & RIYEKE USTADIYANTO)
   ========================================================================== */
#app .ab-p .ab-av,
.ab-p .ab-av {
  width: 96px !important;
  height: 96px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
  border: 2px solid #E2E8F0 !important;
  background: #0E1726 !important;
  box-shadow: 0 8px 24px rgba(11,31,58,.14) !important;
}

#app .ab-p.hy .ab-av {
  border-color: var(--gold) !important;
}

#app .ab-p.ru .ab-av {
  border-color: #10B981 !important;
}

#app .ab-p .ab-av img,
.ab-p .ab-av img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
  border-radius: 18px !important;
}

/* ==========================================================================
   5. CENTRAL LOGIN & REGISTER HUB PORTALS (/login, /daftar)
   ========================================================================== */
.hub-sec {
  background: radial-gradient(75% 65% at 15% 10%, rgba(14, 138, 85, 0.28), transparent 60%),
              radial-gradient(55% 55% at 85% 90%, rgba(255, 216, 77, 0.15), transparent 50%),
              linear-gradient(160deg, #071526 0%, #0B1F3A 50%, #06261D 100%) !important;
  color: #fff !important;
  padding: 52px 0 76px !important;
  min-height: 80vh !important;
}
.hub-wrap {
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 16px;
}
.hub-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 38px;
}
.hub-header h1 {
  font-family: var(--f-display);
  font-size: clamp(1.85rem, 4vw, 2.75rem);
  font-weight: 850;
  line-height: 1.15;
  color: #FFFFFF;
  margin: 0 0 12px;
  letter-spacing: -0.03em;
}
.hub-header p {
  color: #D1E5DE;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}
.hub-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 1024px) {
  .hub-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}
@media (max-width: 640px) {
  .hub-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
.hub-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  backdrop-filter: blur(12px);
  position: relative;
}
.hub-card:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(16, 185, 129, 0.45);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}
.hub-card.brand-card {
  border-color: rgba(255, 216, 77, 0.25);
}
.hub-card.brand-card:hover {
  border-color: rgba(255, 216, 77, 0.6);
}
.hub-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #34D399;
  margin-bottom: 16px;
}
.hub-card.brand-card .hub-card-icon {
  background: rgba(255, 216, 77, 0.16);
  border-color: rgba(255, 216, 77, 0.35);
  color: #FFD84D;
}
.hub-role-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6EE7B7;
  margin-bottom: 6px;
}
.hub-card.brand-card .hub-role-tag {
  color: #FFD84D;
}
.hub-card h3 {
  font-size: 1.22rem;
  color: #FFFFFF;
  margin: 0 0 8px;
  font-weight: 800;
}
.hub-card p {
  font-size: 0.84rem;
  color: #CBD5E1;
  line-height: 1.5;
  margin: 0 0 16px;
  flex: 1 1 auto;
}
.hub-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: grid;
  gap: 8px;
}
.hub-perks li {
  font-size: 0.78rem;
  color: #E2E8F0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hub-perks li svg {
  color: #10B981;
  flex: none;
}
.hub-card.brand-card .hub-perks li svg {
  color: #FFD84D;
}
.hub-card .btn {
  width: 100%;
  text-align: center;
  padding: 11px 16px;
  font-size: 0.88rem;
  font-weight: 800;
  border-radius: 12px;
}
.hub-sublink {
  text-align: center;
  margin-top: 12px;
  font-size: 0.78rem;
  color: #94A3B8;
}
.hub-sublink a {
  color: #6EE7B7;
  font-weight: 700;
  text-decoration: underline;
}
.hub-card.brand-card .hub-sublink a {
  color: #FFD84D;
}

/* Role Switcher Bar inside Form Header (Segmented Control: 4-kolom Desktop, 2x2 Grid Rapi di Mobile) */
.role-switcher-bar {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 4px !important;
  background: #F1F5F9 !important;
  padding: 4px !important;
  border-radius: 12px !important;
  margin-bottom: 20px !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}
.role-switch-item {
  text-align: center !important;
  padding: 8px 10px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  color: #334155 !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}
.role-switch-item svg {
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
}
.role-switch-item:hover:not(.active) {
  color: #0F172A !important;
  background: #FFFFFF !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}
.role-switch-item.active {
  background: #0E8A55 !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(14, 138, 85, 0.35) !important;
  font-weight: 800 !important;
}
.role-switch-item.active.brand-role {
  background: #FFD84D !important;
  color: #0B1F3A !important;
  box-shadow: 0 2px 8px rgba(255, 216, 77, 0.45) !important;
  font-weight: 800 !important;
}

/* Mobile Responsif: Segmented Bar 2x2 Grid, Form & Simulasi Cuan */
@media (max-width: 580px) {
  .role-switcher-bar {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    padding: 6px !important;
  }
  .role-switch-item {
    padding: 9px 8px !important;
    font-size: 0.78rem !important;
    gap: 5px !important;
  }
  .role-switch-item svg {
    width: 14px !important;
    height: 14px !important;
  }
}

@media (max-width: 540px) {
  .db-sec, .hub-sec, .rg-sec {
    padding: 24px 0 54px !important;
  }
  .db-wrap, .rg-sec {
    padding-inline: 12px !important;
  }
  .db-card, .rg-card {
    padding: 20px 16px !important;
    border-radius: 18px !important;
  }
  .db-left h1 {
    font-size: 1.65rem !important;
    line-height: 1.2 !important;
  }
  .rg-cuan-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .rg-cuan-stat:nth-child(3) {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    background: linear-gradient(135deg, rgba(14, 138, 85, 0.25), rgba(255, 216, 77, 0.12)) !important;
    border: 1px solid rgba(255, 216, 77, 0.35) !important;
    padding: 10px !important;
  }
  .rg-cuan-stat:nth-child(3) b {
    font-size: 1.15rem !important;
  }
}