:root{
  color-scheme: light;
  --ink:#FFFFFF; --ink-2:#F4F7FD; --panel:#FFFFFF; --panel-2:#EEF3FF; --line:#E2E8F4;
  --text:#141B34; --muted:#5B6787;
  --blue:#2C66F5; --blue-soft:#4A80FF;
  --gold:#B45F06; --gold-fill:#FFC53D; --gold-line:#F2B01E; --gold-bg:#FFF6DC;
  --green:#0B7F5C; --green-fill:#2ED4A1; --red:#E5484D;
  --shadow:0 1px 2px rgba(20,27,52,.04), 0 10px 28px -14px rgba(20,27,52,.16);
  --radius:14px; --maxw:1120px;
  box-sizing:border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top: 84px}
body{
  margin:0;
  background:
    radial-gradient(900px 420px at 85% -8%, rgba(44,102,245,.09), transparent 60%),
    radial-gradient(700px 380px at 0% 0%, rgba(46,212,161,.09), transparent 55%),
    var(--ink);
  color:var(--text);
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; line-height:1.2; font-weight:800; letter-spacing:-.02em}
p{margin:0}
button{font-family:inherit}
a{color:inherit}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 18px}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:6px}

header.site{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.86); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; gap:22px; height:64px}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; letter-spacing:-.03em; text-decoration:none}
.logo .mark{width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:linear-gradient(145deg,var(--blue),#8A5BFF); box-shadow:0 6px 18px rgba(44,102,245,.35); font-size:17px}
.logo span.go{color:var(--gold)}
.nav .links{display:flex; gap:20px; margin-left:auto; font-size:14px; color:var(--muted); font-weight:600}
.nav .links a{text-decoration:none}
.nav .links a:hover{color:var(--blue)}
@media(max-width:820px){ .nav .links{display:none} }

.cs-wa{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:10px;background:#16a34a;color:#fff!important;text-decoration:none!important;font-size:13px;font-weight:800;white-space:nowrap;box-shadow:0 5px 14px rgba(22,163,74,.18)}
.cs-wa:hover{background:#15803d;color:#fff!important}
.cs-wa-icon{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:rgba(255,255,255,.18);font-size:10px;font-weight:900;letter-spacing:-.04em}
@media(max-width:640px){.nav{gap:10px}.cs-wa{margin-left:auto;padding:7px 10px;font-size:12px}.cs-wa-icon{width:20px;height:20px}.logo-img{max-width:145px}}

.hero{padding:26px 18px 8px}
.hero-card{display:grid; grid-template-columns:168px 1fr; gap:22px; background:linear-gradient(120deg,#FFFFFF 0%, #EAF1FF 100%); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:20px; padding:20px; position:relative; overflow:hidden}
.hero-card::after{content:""; position:absolute; right:-70px; top:-70px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle,rgba(255,197,61,.30),transparent 65%)}
.thumb{border-radius:16px; aspect-ratio:1; display:grid; place-items:center; background:linear-gradient(160deg,#E6FAF1,#FFFFFF); border:1px solid var(--line)}
.coin{width:96px; height:96px; border-radius:50%; background:radial-gradient(circle at 34% 30%, #FFE79A, var(--gold-fill) 55%, #C98A00); display:grid; place-items:center; font-weight:800; font-size:40px; color:#4A3200; box-shadow:0 12px 30px rgba(255,197,61,.35), inset 0 -5px 0 rgba(0,0,0,.18)}
.hero h1{font-size:30px}
.hero .sub{color:var(--muted); margin-top:8px; max-width:56ch; font-size:14.5px}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; position:relative; z-index:1}
.tag{font-size:12.5px; font-weight:700; padding:6px 11px; border-radius:99px; background:rgba(44,102,245,.08); border:1px solid rgba(44,102,245,.25); color:#2456D6}
.tag.gold{background:#FFF4D6; border-color:#F5D27A; color:#8F5200}
.tag.green{background:#E5F8F0; border-color:#A9E5CF; color:var(--green)}
@media(max-width:640px){ .hero-card{grid-template-columns:96px 1fr; gap:16px; padding:16px} .coin{width:60px;height:60px;font-size:26px} .hero h1{font-size:22px} }

.main{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:22px; padding:26px 18px 60px; align-items:start}
@media(max-width:940px){ .main{grid-template-columns:minmax(0,1fr)} }

.step{background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:var(--radius); padding:18px; margin-bottom:16px}
.step-head{display:flex; align-items:center; gap:11px; margin-bottom:14px}
.step-no{width:26px; height:26px; flex:none; border-radius:8px; display:grid; place-items:center; background:var(--blue); color:#fff; font-weight:800; font-size:13px}
.step-head h2{font-size:16.5px}
.step-head .note{margin-left:auto; font-size:12.5px; color:var(--muted); font-weight:600}

label.field{display:block; font-size:13px; font-weight:700; color:var(--muted); margin-bottom:6px}
input[type=text], input[type=email], input[type=tel]{width:100%; padding:12px 13px; border-radius:10px; font-size:14.5px; background:var(--ink-2); border:1px solid var(--line); color:var(--text)}
input::placeholder{color:#939DBA}
input:focus{border-color:var(--blue); background:#fff; outline:none; box-shadow:0 0 0 3px rgba(44,102,245,.16)}
.row{display:flex; gap:10px}
.row input{flex:1}
.btn{border:none; border-radius:10px; padding:12px 18px; font-weight:800; font-size:14px; background:var(--blue); color:#fff; cursor:pointer; box-shadow:0 6px 16px -8px rgba(44,102,245,.65)}
.btn:hover{background:#1F55DB}
.btn.ghost{background:#fff; border:1px solid var(--line); color:var(--text); box-shadow:none}
.btn.ghost:hover{background:var(--panel-2); border-color:var(--blue-soft)}
.btn:disabled{opacity:.45; cursor:not-allowed; box-shadow:none}
.hint{font-size:12.5px; color:var(--muted); margin-top:9px}
.error-text{font-size:12.5px; color:var(--red); margin-top:9px; display:none}
.error-text.show{display:block}

.account-found{margin-top:12px; display:none; align-items:center; gap:12px; padding:11px 13px; background:#EAF9F3; border:1px solid #A9E5CF; border-radius:11px}
.account-found.show{display:flex}
.avatar{width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center; background:linear-gradient(150deg,var(--blue),#8A5BFF); color:#fff; font-weight:800; overflow:hidden}
.avatar img{width:100%; height:100%; object-fit:cover}
.account-found .name{font-weight:700; font-size:14px}
.account-found .uid{font-size:12.5px; color:var(--muted)}
.account-found .ok{margin-left:auto; color:var(--green); font-weight:700; font-size:13px}

.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
@media(max-width:560px){ .grid{grid-template-columns:repeat(2,1fr)} }
.pick{position:relative; text-align:left; cursor:pointer; background:var(--ink-2); border:1.5px solid var(--line); border-radius:12px; padding:12px; color:var(--text); transition:border-color .15s, background .15s, box-shadow .15s}
.pick:hover{border-color:var(--blue-soft); background:#fff}
.pick[aria-pressed=true]{border-color:var(--gold-line); background:var(--gold-bg); box-shadow:0 0 0 3px rgba(255,197,61,.22)}
.pick .amount{display:flex; align-items:center; gap:7px; font-weight:800; font-size:15px}
.pick .amount i{width:17px;height:17px;border-radius:50%;flex:none; background:radial-gradient(circle at 35% 30%,#FFE79A,var(--gold-fill) 60%,#C98A00)}
.pick .price{margin-top:7px; font-weight:800; color:var(--gold); font-size:14.5px}
.pick .strike{font-size:12px; color:var(--muted); text-decoration:line-through}
.ribbon{position:absolute; top:-8px; right:8px; font-size:10.5px; font-weight:800; background:var(--red); color:#fff; padding:2px 7px; border-radius:6px}
.ribbon.best{background:var(--green-fill); color:#04231A}

.tabs{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:13px}
.tab{background:var(--ink-2); border:1px solid var(--line); color:var(--muted); padding:8px 13px; border-radius:99px; font-weight:700; font-size:13px; cursor:pointer}
.tab:hover{border-color:var(--blue-soft); color:var(--text)}
.tab[aria-selected=true]{background:var(--blue); border-color:var(--blue); color:#fff}
.pay-list{display:grid; grid-template-columns:repeat(2,1fr); gap:9px}
@media(max-width:560px){ .pay-list{grid-template-columns:1fr} }
.pay{display:flex; align-items:center; gap:11px; cursor:pointer; text-align:left; background:var(--ink-2); border:1.5px solid var(--line); border-radius:11px; padding:11px; color:var(--text)}
.pay:hover{border-color:var(--blue-soft); background:#fff}
.pay[aria-pressed=true]{border-color:var(--gold-line); background:var(--gold-bg); box-shadow:0 0 0 3px rgba(255,197,61,.2)}
.pay .badge{width:44px; height:30px; flex:none; border-radius:7px; display:grid; place-items:center; font-size:10px; font-weight:800; color:#0B1020; letter-spacing:-.02em; background:#E8ECFF}
.pay .pname{font-weight:700; font-size:13.5px}
.pay .pfee{font-size:11.5px; color:var(--muted)}

.summary{background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:var(--radius); padding:18px; position:sticky; top:84px}
.summary h3{font-size:15px; margin-bottom:14px}
.sline{display:flex; justify-content:space-between; gap:12px; font-size:13.5px; padding:6px 0; color:var(--muted)}
.sline b{color:var(--text); font-weight:700; text-align:right}
.sep{height:1px; background:var(--line); margin:11px 0}
.total{display:flex; justify-content:space-between; align-items:center; font-size:15px; font-weight:800}
.total .val{color:var(--gold); font-size:19px}
.summary .btn{width:100%; margin-top:14px; padding:14px}
.safe{display:flex; gap:7px; align-items:center; justify-content:center; margin-top:11px; font-size:12px; color:var(--muted)}
@media(max-width:940px){ .summary{position:static} }

section.block{padding:34px 0; border-top:1px solid var(--line)}
section.block h2{font-size:21px; margin-bottom:6px}
section.block .lead{color:var(--muted); font-size:14px; margin-bottom:18px; max-width:62ch}
.cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media(max-width:820px){ .cards3{grid-template-columns:1fr} }
.mini{background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:12px; padding:16px}
.mini h4{font-size:14.5px; margin-bottom:6px}
.mini p{font-size:13.5px; color:var(--muted)}

.overlay{position:fixed; inset:0; background:rgba(20,27,52,.45); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; padding:18px; z-index:60}
.overlay.show{display:flex}
.modal{background:var(--panel); border:1px solid var(--line); box-shadow:0 24px 60px -20px rgba(20,27,52,.38); border-radius:18px; width:100%; max-width:430px; max-height:88vh; overflow-y:auto; padding:22px}
.modal h3{font-size:17px}
.qr{width:200px; height:200px; margin:16px auto 10px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:9px}
.qr img{width:100%; height:100%; display:block; object-fit:contain}
.countdown{text-align:center; font-weight:800; color:var(--gold); font-size:15px}
.kv{display:flex; justify-content:space-between; font-size:13.5px; padding:6px 0; color:var(--muted)}
.kv b{color:var(--text)}
.modal .btn{width:100%; margin-top:12px}
.status-wrap{text-align:center; padding:8px 0}
.spinner{width:42px;height:42px;margin:14px auto;border-radius:50%; border:3px solid var(--line); border-top-color:var(--blue); animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tickmark{width:60px;height:60px;margin:6px auto 12px;border-radius:50%;display:grid;place-items:center; background:#E5F8F0; border:2px solid var(--green); color:var(--green); font-size:30px}
.waitmark{width:60px;height:60px;margin:6px auto 12px;border-radius:50%;display:grid;place-items:center; background:var(--gold-bg); border:2px solid var(--gold-line); color:var(--gold); font-size:26px}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} html{scroll-behavior:auto} }

.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(22px + env(safe-area-inset-bottom,0px)); background:#141B34; border:1px solid #141B34; color:#fff; padding:11px 17px; border-radius:11px; font-size:13.5px; font-weight:600; opacity:0; pointer-events:none; transition:opacity .2s; z-index:70; box-shadow:0 12px 30px -10px rgba(20,27,52,.5)}
.toast.show{opacity:1}

table.orders{width:100%; border-collapse:collapse; font-size:13px}
table.orders th{text-align:left; color:var(--muted); font-weight:700; padding:9px; border-bottom:1px solid var(--line)}
table.orders td{padding:9px; border-bottom:1px solid var(--line)}
.pill{font-size:11.5px; font-weight:800; padding:3px 9px; border-radius:99px}
.pill.paid{background:#E5F8F0; color:var(--green)}
.pill.pending{background:#FFF4D6; color:var(--gold)}
.pill.bad{background:#FDECEC; color:#C63037}
.empty{color:var(--muted); font-size:13.5px; padding:14px 0}

footer{border-top:1px solid var(--line); padding:26px 0 40px; color:var(--muted); font-size:13px; background:#FAFBFE}

.product-tabs{margin-bottom:12px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px}.product-tab{white-space:nowrap}.substep-title{font-size:13px;font-weight:800;color:var(--text);margin:2px 0 10px}

/* RobuxGo logo asset */
.logo-img {
  display:block !important;
  width:150px !important;
  height:48px !important;
  max-width:150px !important;
  max-height:48px !important;
  object-fit:contain !important;
  object-position:left center !important;
}
@media (max-width:640px){
  .logo-img { width:130px !important; height:42px !important; max-width:130px !important; max-height:42px !important; }
}

/* Payment method logos (v4) - chip 58x28, gambar 48x20: kecil & seragam */
.pay .pay-logo{width:58px!important;height:28px!important;flex:0 0 58px!important;background:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;border-radius:6px!important;border:1px solid var(--line)!important}
.pay .pay-logo-img{width:48px!important;height:20px!important;max-width:48px!important;max-height:20px!important;object-fit:contain!important;object-position:center!important;display:block!important}
.pay .badge-fallback{width:100%;height:100%;display:grid;place-items:center;font-size:9px;font-weight:800;color:#0B1020;letter-spacing:-.02em;background:#E8ECFF}
.pay .badge{display:none}

/* Hero image (gambar maskot RobuxGo) */
.hero-img{width:100%; height:100%; object-fit:contain; padding:14px; box-sizing:border-box; display:block}
@media(max-width:640px){ .hero-img{padding:8px!important} }

/* Mobile fix: cegah halaman melebar (overflow horizontal) di layar HP */
.main > *{min-width:0}
.row input, .field input{min-width:0}
.product-tabs{max-width:100%}
img, svg{max-width:100%}

/* Tab kategori: di HP turun ke bawah (wrap), tidak geser samping */
@media(max-width:640px){
  .product-tabs{flex-wrap:wrap!important; overflow-x:visible!important; padding-bottom:0}
  .product-tab{white-space:nowrap}
}