/* ============ Halaman pembelian (modern) ============ */
.back{gap:8px;padding:7px 14px 7px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--pri);box-shadow:var(--sh);transition:.15s}
.back:hover{transform:translateX(-2px);border-color:var(--pri)}
.back i{font-size:12px}

.gh2{position:relative;overflow:hidden;border-radius:calc(var(--r) + 6px);margin-bottom:14px;color:#fff;
  background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 12px 28px var(--pri-glow)}
.gh2::before,.gh2::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.14);pointer-events:none}
.gh2::before{width:180px;height:180px;right:-50px;top:-70px}
.gh2::after{width:110px;height:110px;right:70px;bottom:-60px;background:rgba(255,255,255,.1)}
.gh2-in{position:relative;z-index:1;display:flex;gap:16px;align-items:center;padding:18px}
.gh2-img{width:104px;height:104px;flex:none;border-radius:calc(var(--r) - 2px);overflow:hidden;background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.55);
  box-shadow:0 10px 24px rgba(0,0,0,.28);display:grid;place-items:center;font-size:34px}
.gh2-img img{width:100%;height:100%;object-fit:cover}
.gh2-t{min-width:0}
.gh2-t h1{margin:0;font-family:"Outfit","Inter",system-ui,sans-serif;font-size:clamp(21px,5.6vw,30px);line-height:1.15;font-weight:800;text-shadow:0 2px 10px rgba(0,0,0,.25)}
.gh2-t p{margin:4px 0 0;opacity:.92;font-size:14px}
.gh2-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.gh2-tags span{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:600;
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.35)}
.gh2-tags i{font-size:11px}

.stp2{background:var(--card);border:1px solid var(--line);border-radius:calc(var(--r) + 2px);box-shadow:var(--sh);padding:18px 16px 14px;margin-bottom:14px}
.stp2-h{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.stp2-h .n{width:34px;height:34px;font-size:15px;font-weight:800;flex:none;box-shadow:0 6px 14px var(--pri-glow)}
.stp2-h h2{margin:0;font-size:17px;line-height:1.25;font-weight:700}
.stp2-h h2 em{font-style:normal;font-size:11px;font-weight:600;color:var(--muted);background:var(--card2);border:1px solid var(--line);padding:2px 8px;border-radius:999px;margin-left:6px;vertical-align:2px}
.stp2-h small{display:block;color:var(--muted);font-size:12.5px;margin-top:1px}
.stp2 .f{margin-bottom:4px}
.stp2 .f label{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700;margin-bottom:7px}

.fi{position:relative}
.fi>i{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:15px;pointer-events:none;transition:.15s}
.fi .input{padding:14px 14px 14px 43px;min-height:52px;background:var(--card2);border:1.5px solid transparent;border-radius:var(--r-s);font-size:15.5px;transition:.15s}
.fi .input:hover{border-color:var(--line)}
.fi .input:focus{outline:0;background:var(--card);border-color:var(--pri);box-shadow:0 0 0 4px var(--pri-l)}
.fi:focus-within>i{color:var(--pri)}
.fi select.input{appearance:none;-webkit-appearance:none;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}

.nominal{gap:10px}
.nom-b{position:relative;overflow:hidden;gap:8px;justify-content:space-between;min-height:88px;padding:13px 13px 12px;border:1.5px solid var(--line);
  border-radius:var(--r-s);background:var(--card);transition:transform .15s,border-color .15s,box-shadow .15s,background .15s}
.nom-b::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;background:linear-gradient(135deg,var(--pri-l),transparent 70%);opacity:0;transition:.2s}
.nom-b>*{position:relative}
.nom:hover .nom-b{transform:translateY(-2px);border-color:var(--pri);box-shadow:0 8px 20px var(--pri-l)}
.nom-n{font-weight:600;font-size:13.5px;line-height:1.35;padding-right:22px}
.nom-h{font-size:15.5px;font-weight:800;color:var(--pri);letter-spacing:-.01em}
.nom-ck{position:absolute!important;top:9px;right:9px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;
  font-size:10px;color:transparent;transition:.18s;background:var(--card)}
.nom input:checked + .nom-b{border-color:var(--pri);background:var(--card);box-shadow:0 0 0 3px var(--pri-l),0 10px 24px var(--pri-glow);transform:translateY(-2px)}
.nom input:checked + .nom-b::before{opacity:1}
.nom input:checked + .nom-b .nom-ck{background:linear-gradient(135deg,var(--pri),var(--pri2));border-color:transparent;color:#fff;transform:scale(1.08)}

.stp2-h h2 em.req{color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,transparent);border-color:color-mix(in srgb,var(--bad) 30%,transparent)}
#stWa{scroll-margin-top:90px}

/* ringkasan + tombol pesan (langkah 4) */
.ck{margin-bottom:18px}
.ck-box{background:var(--card2);border:1px solid var(--line);border-radius:var(--r-s);padding:4px 14px;margin-bottom:14px}
.ck-r{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px dashed var(--line)}
.ck-r:last-child{border-bottom:0}
.ck-k{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;flex:none}
.ck-k i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:12px;color:var(--pri);background:var(--pri-l)}
.ck-v{font-weight:600;font-size:13.5px;text-align:right;min-width:0}
small.ck-v.muted{color:var(--muted);font-weight:500}
.ck-t{padding:14px 0}
.ck-t .ck-k{font-weight:600;color:var(--ink);font-size:14px}
.ck-t b{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--pri);line-height:1.1}
.ck .btn.big{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 20px;font-size:16px;border-radius:calc(var(--r-s) + 2px)}
.ck .btn:not(:disabled){box-shadow:0 12px 26px var(--pri-glow)}
.ck .btn:disabled{background:var(--card2);border:1px solid var(--line);color:var(--muted)}
.ck-s2{margin:12px 0 0;text-align:center;font-size:12px;color:var(--muted)}
.ck-s2 i{color:var(--ok);margin-right:4px}

/* header langsung tampil tanpa animasi turun */
.top{animation:none!important}

/* popup konfirmasi */
.cf{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.cf[hidden]{display:none}
.cf-bg{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;background:rgba(8,12,28,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:cfF .2s ease-out}
.cf-p{position:relative;width:100%;max-width:440px;max-height:92vh;overflow:auto;background:var(--card);color:var(--ink);padding:26px 20px calc(20px + env(safe-area-inset-bottom));
  border-radius:26px 26px 0 0;box-shadow:0 -20px 60px rgba(0,0,0,.35);text-align:center;animation:cfU .28s cubic-bezier(.2,.9,.3,1)}
@media(min-width:560px){.cf{align-items:center;padding:16px}.cf-p{border-radius:26px}}
.cf-ic{width:60px;height:60px;margin:0 auto 12px;border-radius:20px;display:grid;place-items:center;font-size:26px;color:#fff;background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 10px 24px var(--pri-glow)}
.cf-p h3{margin:0;font-family:"Outfit","Inter",system-ui,sans-serif;font-size:21px;font-weight:800}
.cf-sub{margin:4px 0 16px;color:var(--muted);font-size:13.5px}
.cf-l{margin:0;padding:6px 14px;background:var(--card2);border:1px solid var(--line);border-radius:var(--r-s);text-align:left}
.cf-l>div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px dashed var(--line)}
.cf-l>div:last-child{border-bottom:0}
.cf-l dt{color:var(--muted);font-size:13px;flex:none}
.cf-l dd{margin:0;font-weight:600;font-size:14px;text-align:right;word-break:break-word}
.cf-tot dd{color:var(--pri);font-size:18px;font-weight:800}
.cf-note{margin:12px 0 0;font-size:12px;color:var(--warn);display:flex;gap:6px;justify-content:center;align-items:flex-start;text-align:left}
.cf-a{display:grid;grid-template-columns:1fr 1.6fr;gap:10px;margin-top:16px}
.cf-a .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 10px}
@keyframes cfU{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
@keyframes cfF{from{opacity:0}to{opacity:1}}

@media(max-width:380px){.gh2-img{width:84px;height:84px}.gh2-in{gap:12px;padding:14px}}
@media(min-width:640px){.gh2-in{padding:24px;gap:22px}.gh2-img{width:128px;height:128px}.stp2{padding:22px 22px 18px}.nom-b{min-height:96px}}

/* ============ Daftar produk ============ */
.pl-hero{display:flex;align-items:center;gap:14px;padding:18px 16px;margin:0 0 14px;border-radius:calc(var(--r) + 4px);background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;position:relative;overflow:hidden;box-shadow:0 12px 28px var(--pri-glow)}
.pl-hero::before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.14);right:-40px;top:-60px}
.pl-hero>*{position:relative}
.pl-ic{width:56px;height:56px;border-radius:17px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.35);display:grid;place-items:center;font-size:23px;flex:none}
.pl-hero h1{margin:0 0 2px;font-family:"Outfit","Inter",system-ui,sans-serif;font-size:24px;font-weight:800}
.pl-hero p{margin:0;font-size:13.5px;opacity:.95;line-height:1.45}
.pl-stat{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.pl-stat span{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.32);padding:3px 11px;border-radius:999px;font-size:12px}
.pl-stat b{font-weight:800}
.pl-search{margin-bottom:14px}
.pl-search .input{border-color:var(--line);background:var(--card)}
.pl-g{background:var(--card);border:1px solid var(--line);border-radius:calc(var(--r) + 2px);box-shadow:var(--sh);margin-bottom:10px;overflow:hidden}
.pl-g[hidden]{display:none}
.pl-g summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:12px 14px}
.pl-g summary::-webkit-details-marker{display:none}
.pl-gi{position:relative;width:46px;height:46px;border-radius:13px;overflow:hidden;flex:none;display:grid;place-items:center;background:var(--pri-l);color:var(--pri);border:1px solid var(--line)}
.pl-gi img{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;object-fit:cover;background:var(--card)}
.pl-gt{display:flex;flex-direction:column;min-width:0;flex:1}
.pl-gt b{font-size:15px;line-height:1.3}
.pl-gt small{color:var(--muted);font-size:12px}
.pl-ch{color:var(--muted);transition:transform .2s;font-size:13px}
.pl-g[open] .pl-ch{transform:rotate(180deg);color:var(--pri)}
.pl-gb{padding:0 14px 14px}
.pl-slug{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 12px;border-radius:var(--r-s);background:var(--card2);border:1px solid var(--line);margin-bottom:10px;font-size:13px}
.pl-slug>span{color:var(--muted)}
.pl-slug code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;color:var(--pri);background:var(--pri-l);padding:3px 9px;border-radius:8px;word-break:break-all}
.pl-cp{border:0;background:var(--card);border:1px solid var(--line);color:var(--muted);width:30px;height:30px;border-radius:9px;cursor:pointer}
.pl-cp:hover{color:var(--pri);border-color:var(--pri)}
.pl-open{margin-left:auto;font-weight:700;font-size:12.5px}
.pl-tb{border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden}
.pl-r{display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line);font-size:13.5px}
.pl-r:last-child{border-bottom:0}
.pl-th{background:var(--card2);color:var(--muted);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.pl-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);font-size:12.5px}
.pl-n{font-weight:600;line-height:1.35}
.pl-h{font-weight:800;color:var(--pri);white-space:nowrap}

/* daftar produk: pemoles */
.pl-search .input{min-height:52px;border-radius:calc(var(--r-s) + 2px);box-shadow:var(--sh)}
.pl-g{transition:border-color .15s,box-shadow .15s}
.pl-g[open]{border-color:var(--pri);box-shadow:0 10px 28px var(--pri-glow)}
.pl-gi{width:52px;height:52px;border-radius:15px}
.pl-gt small em{font-style:normal;color:var(--pri);font-weight:700}
.pl-ch{width:30px;height:30px;border-radius:50%;background:var(--card2);display:grid;place-items:center;flex:none}
.pl-g[open] .pl-ch{background:var(--pri-l)}
.pl-tb{border:0;display:grid;gap:8px}
.pl-th{display:none}
.pl-r{grid-template-columns:auto 1fr auto;border:1px solid var(--line);border-radius:var(--r-s);background:var(--card2);padding:11px 12px;transition:.15s}
.pl-r:last-child{border-bottom:1px solid var(--line)}
.pl-r:hover{border-color:var(--pri);background:var(--pri-l)}
.pl-id{background:var(--card);border:1px solid var(--line);padding:3px 8px;border-radius:8px;font-weight:700;min-width:44px;text-align:center}
.pl-h{font-size:14.5px}

/* ============ Panel Pterodactyl ============ */
.pnl-hero-ic{font-size:40px;color:#fff}
.pnl-paket .nom-b{min-height:118px}
.pnl-spek{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:11.5px;color:var(--muted);line-height:1.35}
.pnl-spek span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.pnl-spek i{margin-right:6px}
.pnl-spek i{width:12px;font-size:10.5px;color:var(--pri);text-align:center}
.pnl-dur{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(min-width:640px){.pnl-dur{grid-template-columns:repeat(6,1fr)}}
.pnl-d{position:relative;cursor:pointer}
.pnl-d input{position:absolute;opacity:0;top:0;right:0;bottom:0;left:0;inset:0;cursor:pointer}
.pnl-d span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:56px;border:1.5px solid var(--line);border-radius:var(--r-s);background:var(--card);transition:.14s}
.pnl-d b{font-size:17px;font-weight:800;line-height:1.1}
.pnl-d small{font-size:11px;color:var(--muted)}
.pnl-d:hover span{border-color:var(--pri)}
.pnl-d input:checked + span{border-color:transparent;color:#fff;background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 8px 18px var(--pri-glow)}
.pnl-d input:checked + span small{color:rgba(255,255,255,.85)}
.pnl-d input:focus-visible + span{outline:2px solid var(--pri);outline-offset:2px}
@media(min-width:640px){.pnl-row2{grid-template-columns:1fr 1fr}}
.pnl-hint{display:block;margin-top:6px;font-size:12px;color:var(--muted)}
.pnl-opt{font-style:normal;text-transform:none;letter-spacing:0;font-weight:600;color:var(--muted);margin-left:4px}
.pnl-pw .input{padding-right:48px}
.pnl-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:10px;background:transparent;color:var(--muted);cursor:pointer;font-size:15px}
.pnl-eye:hover{color:var(--pri);background:var(--pri-l)}

/* kartu Panel di beranda */
.game-img.pnl-card{background:linear-gradient(135deg,var(--pri),var(--pri2))}
.game-img.pnl-card i{font-size:42px;color:#fff;filter:drop-shadow(0 6px 14px rgba(0,0,0,.25))}
.pnl-badge{position:absolute;top:7px;left:7px;z-index:2;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:800;color:var(--pri);background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.18)}

/* invoice: data login panel */
.pnl-akun{margin:0;padding:16px;border-radius:calc(var(--r) + 2px);border:1px solid var(--line);background:var(--card);box-shadow:var(--sh)}
.pnl-akun .pnl-kv>div{background:var(--card2)}
.pnl-akun h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:15px;font-weight:800}
.pnl-akun h3 i{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:13px;color:#fff;background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 4px 10px var(--pri-glow)}
.pnl-kv{display:grid;gap:7px}
.pnl-kv>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border-radius:10px;background:var(--card);border:1px solid var(--line)}
.pnl-kv dt{font-size:12.5px;color:var(--muted);flex:none}
.pnl-kv dd{margin:0;display:flex;align-items:center;gap:6px;min-width:0;font-weight:700;font-size:13.5px;text-align:right}
.pnl-kv dd code,.pnl-kv dd a{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;word-break:break-all}
.pnl-cp{flex:none;width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--card2);color:var(--muted);cursor:pointer}
.pnl-cp:hover{color:var(--pri);border-color:var(--pri)}
.pnl-warn{display:flex;gap:7px;margin:10px 0 0;font-size:12px;color:var(--muted);line-height:1.45}
.pnl-warn i{color:var(--warn);margin-top:2px}
.pnl-open{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px;padding:12px}

/* ============ Layanan digital ============ */
.nom.ly-habis{opacity:.5;cursor:not-allowed}
.nom.ly-habis .nom-h{color:var(--muted)}
.ly-teks{margin:10px 0 0;padding:12px;border-radius:10px;background:var(--card);border:1px solid var(--line);font:12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-word;max-height:420px;overflow:auto}
.ly-teks-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;font-size:12.5px;font-weight:700;color:var(--muted)}

/* grid pilihan tidak boleh melebar keluar layar (teks panjang) */
.nominal{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:640px){.nominal{grid-template-columns:repeat(3,minmax(0,1fr))}}
.nom,.nom-b,.nom-n{min-width:0}
.nom-n{overflow-wrap:anywhere}
.pnl-dur{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(min-width:640px){.pnl-dur{grid-template-columns:repeat(6,minmax(0,1fr))}}
html,body{overflow-x:clip}

/* footer: jarak bawah rapat */
.foot{padding-bottom:calc(22px + env(safe-area-inset-bottom))}
.foot-bot{margin-top:14px;padding-top:10px}

.ly-wa{background:linear-gradient(135deg,#16a34a,#25d366);box-shadow:0 8px 18px rgba(37,211,102,.3)}

/* ============ MLBB Stalker & Kalkulator ML ============ */
.tl-tab{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tl-tab button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:64px;padding:8px 6px;border:1.5px solid var(--line);border-radius:var(--r-s);background:var(--card);color:var(--ink);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:.14s;text-align:center;line-height:1.2}
.tl-tab button i{font-size:16px;color:var(--pri)}
.tl-tab button:hover{border-color:var(--pri)}
.tl-tab button.on{border-color:transparent;color:#fff;background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 8px 18px var(--pri-glow)}
.tl-tab button.on i{color:#fff}
.tl-ket{margin:12px 2px 0;font-size:13px;color:var(--muted)}
.tl-go{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:9px;margin-top:6px;padding:14px 18px}
.stp2-h .n i{font-size:14px}
@media(min-width:640px){.pnl-row3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kl-sl{display:grid;grid-template-columns:1fr 90px;gap:12px;align-items:center}
.kl-sl input[type=range]{width:100%;accent-color:var(--pri);height:28px}
.kl-num{text-align:center;font-weight:800}
.kl-res{margin-top:14px;padding:14px;border-radius:var(--r-s);background:var(--card2);border:1px solid var(--line);text-align:center}
.kl-res small{display:block;color:var(--muted);font-size:12.5px}
.kl-res b{display:block;margin-top:2px;font-size:26px;font-weight:800;color:var(--pri);letter-spacing:-.01em}
.kl-res p{margin:6px 0 0;font-size:13px;color:var(--muted)}
.kl-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px;text-align:left}
.kl-g div{padding:10px 12px;border-radius:10px;background:var(--card);border:1px solid var(--line)}
.kl-g span{display:block;font-size:11.5px;color:var(--muted)}
.kl-g strong{font-size:16px}
.kl-rinci{margin:10px 0 0;padding:0;list-style:none;text-align:left}
.kl-rinci li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:13px}
.kl-rinci li:last-child{border-bottom:0}
.kl-skin{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:4px 0 8px}
@media(min-width:640px){.kl-skin{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kl-skin .input{min-height:46px;background:var(--card2);border:1.5px solid transparent;border-radius:var(--r-s);text-align:center;font-weight:700}
.kl-skin label{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:700;margin-bottom:5px}
.stk-ok{color:var(--ok);font-weight:800}.stk-no{color:var(--bad);font-weight:800}

/* daftar harga: layanan lainnya */
.pl-gi-ly{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;border-color:transparent;font-size:19px}
.pl-ket{display:block;font-size:11.5px;font-weight:500;color:var(--muted);line-height:1.35}
.pl-h .pl-ket{text-align:right}
.pl-r.pl-habis{opacity:.55}.pl-r.pl-habis .pl-h{color:var(--muted)}
.pl-n{min-width:0;overflow-wrap:anywhere}

/* Daftar Harga: pilihan TopUp Game / Layanan Lainnya */
.pl-tab{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:0 0 12px;background:var(--card);border:1px solid var(--line);border-radius:calc(var(--r-s) + 4px);box-shadow:var(--sh)}
.pl-tab::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 6px);border-radius:var(--r-s);background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 4px 12px var(--pri-glow);transition:transform .22s ease}
.pl-tab[data-aktif="ly"]::before{transform:translateX(calc(100% + 4px))}
.pl-tab button{position:relative;z-index:1;border:0;background:none;font:inherit;font-size:13.5px;font-weight:700;color:var(--muted);padding:11px 6px;border-radius:var(--r-s);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;min-width:0;transition:color .2s}
.pl-tab button.on{color:#fff}

/* Filter kategori produk di halaman game (sama dengan web utama) */
.kat-wrap{margin:0 -16px 12px;position:relative}
.kat{display:flex;gap:8px;overflow-x:auto;padding:4px 16px 6px;scroll-padding:0 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.kat::-webkit-scrollbar{display:none}
.kat-b{flex:none;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--card2);color:var(--ink);border-radius:999px;padding:8px 13px;font:inherit;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.kat-b span{font-size:11px;font-weight:700;min-width:20px;padding:1px 6px;border-radius:999px;background:var(--card);color:var(--muted);text-align:center}
.kat-b:hover{border-color:var(--pri)}
.kat-b.on{background:linear-gradient(135deg,var(--pri),var(--pri2));border-color:transparent;color:#fff;box-shadow:none}
.kat-b.on span{background:rgba(255,255,255,.25);color:#fff}
.nom[hidden]{display:none}
@media(min-width:640px){.kat-wrap{margin:0 -22px 12px}.kat{padding:4px 22px 6px;scroll-padding:0 22px}}

/* Keterangan produk (dari web utama) */
.kp{background:var(--card);border:1px solid var(--line);border-radius:calc(var(--r) + 2px);box-shadow:var(--sh);margin-bottom:14px;overflow:hidden;transition:border-color .15s}
.kp[open]{border-color:var(--pri)}
.kp summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px}
.kp summary::-webkit-details-marker{display:none}
.kp-ic{width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;font-size:17px;color:#fff;background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 4px 12px var(--pri-glow)}
.kp-t{display:flex;flex-direction:column;flex:1;min-width:0}
.kp-t b{font-size:15px}
.kp-t small{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.kp-ch{width:30px;height:30px;border-radius:50%;background:var(--card2);display:grid;place-items:center;flex:none;color:var(--muted);font-size:13px;transition:transform .2s}
.kp[open] .kp-ch{transform:rotate(180deg);color:var(--pri);background:var(--pri-l)}
.kp-isi{padding:2px 16px 16px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.6;color:var(--ink);max-height:60vh;overflow-y:auto;overflow-wrap:anywhere}
.kp-isi p{margin:6px 0 0}
.kp-isi .kp-jeda{margin-top:14px}
.kp-isi .kp-judul{display:inline-block;margin-top:12px;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--pri);background:var(--pri-l);padding:3px 10px;border-radius:999px}
.kp-isi>p:first-child{margin-top:12px}
.kp-isi .kp-item{display:flex;gap:9px;align-items:flex-start}
.kp-isi .kp-no{flex:none;min-width:22px;height:22px;padding:0 5px;border-radius:7px;background:var(--card2);border:1px solid var(--line);display:grid;place-items:center;font-size:11.5px;font-weight:800;color:var(--pri);margin-top:1px}
.kp-isi .kp-item span:last-child{min-width:0}
.kp-isi .kp-teks{color:var(--muted)}

/* ID + Server dalam satu baris (seperti web utama) */
.row.row-2,.pnl-row2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.row.row-2 .f,.pnl-row2 .f{min-width:0}
/* Tombol cek (MLBB: region / bundle / DM ganda, Free Fire: username) */
#cekRow.cek-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
#cekRow.cek-row .cek-b1{grid-column:1/-1}
.cek-b{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;border:1px solid var(--line);background:var(--pri-l);color:var(--pri);font:inherit;font-size:12.5px;font-weight:700;padding:10px 6px;border-radius:var(--r-s);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s,border-color .15s,color .15s}
.cek-b i{flex:none}
.cek-b:hover{border-color:var(--pri)}
.cek-b.on{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;border-color:transparent}
.cek-b[disabled]{opacity:.65;cursor:wait}
@media(max-width:380px){.cek-b{font-size:11.5px;gap:5px;padding:10px 4px}}
.cek-hasil{margin-top:10px;border:1px solid var(--line);background:var(--card2);border-radius:var(--r-s);padding:12px 14px;font-size:13.5px}
.cek-hasil.err{border-color:#fca5a5;background:rgba(239,68,68,.08);color:#dc2626}
.cek-h-t{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-weight:800;font-size:13px}
.cek-h-t button{border:0;background:none;color:var(--muted);cursor:pointer;font-size:15px;padding:2px 4px}
.cek-hasil dl{margin:0;display:grid;gap:6px}
.cek-hasil dl div{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.cek-hasil dt{color:var(--muted)}
.cek-hasil dd{margin:0;font-weight:700;text-align:right;min-width:0;overflow-wrap:anywhere}
.cek-hasil .stk-ok{color:#16a34a}.cek-hasil .stk-no{color:#dc2626}

/* ---------- Navigasi bawah (gaya aplikasi) ---------- */
/* Tombol melayang naik di atas navigasi bawah */
.cs{bottom:calc(88px + env(safe-area-inset-bottom))}
.btt{bottom:calc(92px + env(safe-area-inset-bottom))}
.btt-up{bottom:calc(150px + env(safe-area-inset-bottom))}
/* Lembar pilihan Jasa Mlbb */
.bs{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center}
.bs[hidden]{display:none}
.bs-bg{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;background:rgba(5,8,20,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:fade .2s}
.bs-p{position:relative;width:100%;max-width:520px;background:var(--card);border:1px solid var(--line);border-bottom:0;border-radius:28px 28px 0 0;padding:8px 16px calc(20px + env(safe-area-inset-bottom));box-shadow:0 -16px 50px rgba(0,0,0,.3);animation:bsUp .25s cubic-bezier(.2,.8,.2,1);max-height:86vh;overflow-y:auto;overscroll-behavior:contain}
@keyframes bsUp{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.bs-grip{width:44px;height:5px;border-radius:5px;background:var(--line);margin:4px auto 12px}
.bs-hero{position:relative;display:flex;align-items:center;gap:12px;padding:14px;border-radius:20px;color:#fff;background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 10px 26px var(--pri-glow);overflow:hidden}
.bs-hero::before{content:"";position:absolute;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.14);right:-30px;top:-60px}
.bs-hero>*{position:relative}
.bs-hi{width:46px;height:46px;border-radius:14px;flex:none;display:grid;place-items:center;font-size:21px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.35)}
.bs-ht{display:flex;flex-direction:column;flex:1;min-width:0}
.bs-ht b{font-family:"Outfit","Inter",system-ui,sans-serif;font-size:18px;font-weight:800;line-height:1.2}
.bs-ht small{font-size:12.5px;opacity:.9}
.bs-x{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.18);color:#fff;cursor:pointer;flex:none}
.bs-s{display:flex;align-items:center;gap:10px;margin:16px 2px 10px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.bs-s i{flex:1;height:1px;background:var(--line)}
.bs-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bs-g .bs-c:last-child:nth-child(odd){grid-column:1/-1}
.bs-c{position:relative;display:flex;flex-direction:column;gap:3px;padding:14px 12px 12px;border:1px solid var(--line);border-radius:18px;background:var(--card2);color:var(--ink);text-decoration:none;min-width:0;overflow:hidden;transition:transform .15s,border-color .15s,box-shadow .15s}
.bs-c::after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;background:var(--pri-l);right:-34px;bottom:-40px;transition:transform .25s}
.bs-c>*{position:relative;z-index:1}
.bs-c:hover,.bs-c.on{border-color:var(--pri);box-shadow:0 8px 22px var(--pri-glow)}
.bs-c:hover::after{transform:scale(1.25)}
.bs-c:active{transform:scale(.97)}
.bs-c .bs-ic{margin-bottom:8px}
.bs-c b{font-size:14px;line-height:1.25}
.bs-c small{font-size:11.5px;color:var(--muted);line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bs-c em{font-style:normal;font-size:12px;font-weight:800;color:var(--pri);margin-top:4px}
.bs-go{position:absolute!important;top:14px;right:12px;font-size:12px;color:var(--muted);transition:transform .15s,color .15s}
.bs-c:hover .bs-go{transform:translateX(3px);color:var(--pri)}
.bs-ic{width:42px;height:42px;border-radius:13px;flex:none;display:grid;place-items:center;color:#fff;font-size:17px;background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 6px 14px var(--pri-glow)}
.bs-ic2{background:var(--pri-l);color:var(--pri);box-shadow:none;border:1px solid var(--line)}
.bs-l{display:grid;gap:8px}
.bs-l a{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:16px;background:var(--card2);color:var(--ink);text-decoration:none;transition:border-color .15s,background .15s}
.bs-l a:hover,.bs-l a.on{border-color:var(--pri);background:var(--pri-l)}
.bs-t{display:flex;flex-direction:column;min-width:0;flex:1}
.bs-t b{font-size:14px}
.bs-t small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bs-free{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#16a34a;background:rgba(22,163,74,.12);border:1px solid rgba(22,163,74,.3);padding:3px 9px;border-radius:999px}

/* ---------- MLBB Booster ---------- */
.bst-on{display:flex;align-items:center;gap:12px;padding:14px 16px;margin-bottom:14px;border-radius:calc(var(--r) + 2px);border:1px solid rgba(22,163,74,.35);background:rgba(22,163,74,.08)}
.bst-on-i{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#16a34a,#22c55e);font-size:17px;flex:none}
.bst-on-t{display:flex;flex-direction:column;min-width:0}
.bst-on-t b{color:#16a34a;font-size:15px}
.bst-on-t small{color:var(--muted);font-size:12.5px}
.bst-ft{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media(max-width:400px){.bst-ft{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bst-f{position:relative;cursor:pointer}
.bst-f input{position:absolute;opacity:0;pointer-events:none}
.bst-f>span{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px 12px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--card2);text-align:center;transition:border-color .15s,background .15s,box-shadow .15s}
.bst-f>span>i{font-size:18px;color:var(--muted)}
.bst-f b{font-size:12.5px;font-weight:700}
.bst-ck{position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:9px;color:#fff;background:var(--line);font-style:normal}
.bst-f input:checked+span{border-color:var(--pri);background:var(--pri-l);box-shadow:0 4px 14px var(--pri-glow)}
.bst-f input:checked+span>i{color:var(--pri)}
.bst-f input:checked+span .bst-ck{background:linear-gradient(135deg,var(--pri),var(--pri2))}
.bst-f input:focus-visible+span{outline:2px solid var(--pri);outline-offset:2px}
#bstKomenBox{margin-top:12px}
.bst-ta{min-height:84px;resize:vertical;padding:12px 14px;font:inherit}
.bst-opt{margin-top:12px}
.bst-note{margin:10px 0 0;font-size:12.5px;color:var(--muted);display:flex;gap:7px;align-items:center}
.bst-term{margin-top:14px;border-radius:calc(var(--r) + 2px);overflow:hidden;border:1px solid #1f2937;background:#0b1020;box-shadow:var(--sh)}
.bst-term-h{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#111827;color:#e5e7eb;font-size:13px}
.bst-dots{display:flex;gap:5px}
.bst-dots i{width:10px;height:10px;border-radius:50%;background:#ef4444}
.bst-dots i:nth-child(2){background:#f59e0b}.bst-dots i:nth-child(3){background:#22c55e}
.bst-st{margin-left:auto;font-size:11.5px;color:#9ca3af}
.bst-st.on{color:#22c55e}
.bst-log{height:300px;overflow-y:auto;padding:10px 14px;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#d1d5db;white-space:pre-wrap;overflow-wrap:anywhere;overscroll-behavior:contain}
.bst-log .t{color:#6b7280;margin-right:6px}
.bst-log .ok{color:#4ade80}.bst-log .er{color:#f87171}.bst-log .in{color:#60a5fa}
.bst-buy{position:relative;overflow:hidden;padding:18px 16px;margin-bottom:14px;border-radius:calc(var(--r) + 2px);background:var(--card);border:1px solid var(--line);box-shadow:var(--sh)}
.bst-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;padding:14px 16px;border-radius:var(--r-s);color:#fff;background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 10px 24px var(--pri-glow)}
.bst-price small{width:100%;font-size:12px;opacity:.9}
.bst-price b{font-family:"Outfit","Inter",system-ui,sans-serif;font-size:30px;font-weight:800;line-height:1.1}
.bst-price span{font-size:13px;opacity:.95}
.bst-list{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.bst-list li{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;padding:9px 10px;border-radius:var(--r-s);background:var(--card2);border:1px solid var(--line)}
.bst-list li i{color:var(--pri);width:16px;text-align:center}
.bst-info{margin:12px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}
.bst-info i{color:var(--pri);margin-right:4px}
.bst-hbs{margin:0 0 14px}
.bst-wait{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:14px;border-radius:var(--r-s);border:1px solid var(--pri);background:var(--pri-l);color:var(--ink);text-decoration:none}
.bst-wait>i:first-child{color:var(--pri);font-size:18px}
.bst-wait span{display:flex;flex-direction:column;flex:1;min-width:0}
.bst-wait small{color:var(--muted);font-size:12px}
/* invoice: kartu akses booster */
.bst-inv{display:flex;flex-direction:column;gap:10px}
.bst-inv .btn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px}

.bst-dur{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bst-d{position:relative;cursor:pointer}
.bst-d input{position:absolute;opacity:0;pointer-events:none}
.bst-d>span{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 14px 12px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--card2);transition:border-color .15s,background .15s,box-shadow .15s}
.bst-d b{font-family:"Outfit","Inter",system-ui,sans-serif;font-size:26px;font-weight:800;line-height:1}
.bst-d b small{font-size:13px;font-weight:700;color:var(--muted)}
.bst-d>span>i{font-style:normal;font-weight:800;color:var(--pri);font-size:14px}
.bst-d .bst-ck{top:10px;right:10px}
.bst-d input:checked+span{border-color:var(--pri);background:var(--pri-l);box-shadow:0 4px 14px var(--pri-glow)}
.bst-d input:checked+span .bst-ck{background:linear-gradient(135deg,var(--pri),var(--pri2))}
.bst-d input:focus-visible+span{outline:2px solid var(--pri);outline-offset:2px}
.bst-sum{margin-top:12px}
/* Bot Generate */
.gen-ok{margin:10px 0 0;padding:10px 12px;border-radius:var(--r-s);border:1px solid rgba(22,163,74,.35);background:rgba(22,163,74,.08);color:#16a34a;font-size:13px;line-height:1.5}
.gen-ok[hidden]{display:none}
.gen-plan{grid-template-columns:repeat(3,minmax(0,1fr))}
#genStep2{margin-top:0}

.bs-kosong{margin:14px 2px 4px;color:var(--muted);font-size:13.5px}

/* ---------- Navigasi bawah v2: modern, kaca, tombol aktif berbentuk pil, label 1 baris ---------- */
.an{--an-h:68px;position:fixed;left:50%;bottom:calc(10px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:45;
  width:calc(100% - 20px);max-width:560px;height:var(--an-h);display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);align-items:stretch;
  padding:0 6px;border-radius:24px;border:1px solid color-mix(in srgb,var(--line) 80%,transparent);
  background:var(--card);background:color-mix(in srgb,var(--card) 94%,transparent);-webkit-backdrop-filter:saturate(170%) blur(18px);backdrop-filter:saturate(170%) blur(18px);
  box-shadow:0 12px 34px rgba(15,23,42,.16),0 2px 6px rgba(15,23,42,.06)}
.an::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
[data-theme=dark] .an::before{box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.an-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-width:0}
.an-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.an-i{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;padding:0 1px;border:0;background:none;
  font:inherit;color:var(--muted);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.an-i i{display:grid;place-items:center;width:44px;height:28px;border-radius:999px;font-size:17px;transition:background .2s,color .2s,transform .15s}
.an-i span{max-width:100%;font-size:clamp(9px,2.4vw,11px);font-weight:600;line-height:1.2;letter-spacing:-.15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.an-i:hover{color:var(--ink)}

.an-i.on{color:var(--pri)}
.an-i.on i{color:var(--pri)}
.an-i.on span{font-weight:600}
.an-i:active i{transform:scale(.9)}
.an-i:focus-visible{outline:none}
.an-i:focus-visible i{outline:2px solid var(--pri);outline-offset:2px}
.an-c{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;padding:0 0 10px;border:0;background:none;font:inherit;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent;min-width:0}
.an-c>span:last-child{font-size:clamp(9px,2.4vw,11px);font-weight:600;white-space:nowrap}
.an-cb{position:relative;width:54px;height:54px;margin-top:-28px;border-radius:50%;display:grid;place-items:center;font-size:20px;color:#fff;
  background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 10px 22px var(--pri-glow),0 0 0 5px var(--bg);transition:transform .2s,box-shadow .2s}
.an-cb i{transition:transform .25s}
.an-c:hover .an-cb{box-shadow:0 12px 26px var(--pri-glow),0 0 0 5px var(--bg)}
.an-c:active .an-cb{transform:scale(.92)}
.an-c:hover .an-cb i{transform:rotate(90deg)}
/* layar kecil: rapatkan, sembunyikan teks hanya bila sangat sempit */
@media(max-width:380px){.an{width:calc(100% - 12px);padding:0 3px;grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr);--an-h:64px}.an-i i{width:38px;height:26px;font-size:16px}.an-cb{width:48px;height:48px;border-radius:50%}}
@media(max-width:330px){.an-i span{display:none}.an-i i{width:40px;height:32px;font-size:18px}}
/* layar lebar (tablet/desktop): lebih lega */
@media(min-width:640px){.an{bottom:16px;--an-h:72px;padding:0 10px}.an-i i{width:52px;height:30px;font-size:18px}.an-i span{font-size:12px}}

/* Tombol CS melayang v2: kotak membulat, modern */
.cs-fab{width:52px;height:52px;border-radius:16px;border:1px solid rgba(255,255,255,.28);
  background:linear-gradient(145deg,var(--pri),var(--pri2));box-shadow:0 10px 24px var(--pri-glow),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .18s,box-shadow .18s,border-radius .2s}
.cs-fab::before{top:-4px;right:-4px;bottom:-4px;left:-4px;inset:-4px;border-radius:20px;background:none;border:2px solid var(--pri2);opacity:0;animation:csRing 2.8s ease-out infinite}
@keyframes csRing{0%{opacity:.55;transform:scale(.92)}70%,100%{opacity:0;transform:scale(1.18)}}
.cs-fab::after{content:"";position:absolute;top:-3px;right:-3px;width:12px;height:12px;border-radius:50%;background:#22c55e;border:2px solid var(--bg);box-shadow:0 0 0 0 rgba(34,197,94,.5)}
.cs.open .cs-fab::after{opacity:0}
.cs-fab:hover{transform:translateY(-2px);box-shadow:0 14px 28px var(--pri-glow),inset 0 1px 0 rgba(255,255,255,.35)}
.cs-fab:active{transform:scale(.94)}
.cs.open .cs-fab{border-radius:50%}
.cs-fi svg{width:24px;height:24px}

/* Kembali ke atas v2: kotak membulat, menempel di atas tombol CS */
.btt{right:20px;width:44px;height:44px;border-radius:14px;border:1px solid var(--line);
  background:var(--card);background:color-mix(in srgb,var(--card) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:var(--pri);font-size:16px;box-shadow:0 8px 20px rgba(15,23,42,.14)}
.btt:hover{background:linear-gradient(145deg,var(--pri),var(--pri2));border-color:transparent;color:#fff;transform:translateY(-2px)}
.btt:active{transform:scale(.94)}
.cs-kiri~.btt,.btt:not(.btt-up){right:16px}
/* Popup "Butuh bantuan?" responsif: tidak pernah keluar layar */
.cs-m{width:min(calc(100vw - 32px),380px);max-height:calc(100vh - 88px - 52px - 40px - env(safe-area-inset-bottom));max-height:calc(100dvh - 88px - 52px - 40px - env(safe-area-inset-bottom))}
.cs-mb{overflow-y:auto;overscroll-behavior:contain;min-height:0}
@media(max-width:360px){.cs{right:12px}.cs-m{width:calc(100vw - 24px)}}
@media(max-height:560px){.cs-mh{padding-top:10px;padding-bottom:10px}}
/* lebar tiap menu mengikuti panjang labelnya (label panjang tidak terpotong) */
.an-g,.an-g3{display:flex;justify-content:space-evenly}
.an-g .an-i{flex:0 0 auto;padding:0 1px}
.an-g .an-i span{overflow:visible;text-overflow:clip;font-size:clamp(9px,2.3vw,11px)}

/* Menu samping: kartu kelompok (Layanan, Jasa Mlbb, dll.) lebih modern */
.drw-s{display:flex;align-items:center;gap:8px;padding:18px 4px 10px}
.drw-s::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.drw-k{gap:10px}
.drw-k a{position:relative;overflow:hidden;gap:10px;padding:12px;border-radius:16px;background:var(--card);box-shadow:0 2px 8px rgba(15,23,42,.05);min-height:86px;justify-content:space-between}
.drw-k a::after{content:"";position:absolute;right:-22px;bottom:-26px;width:70px;height:70px;border-radius:50%;background:var(--pri-l);opacity:.7;transition:transform .25s}
.drw-k a>*{position:relative;z-index:1}
.drw-k a i{width:36px;height:36px;border-radius:12px;font-size:15px;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;box-shadow:0 6px 14px var(--pri-glow)}
.drw-k a span{font-size:13px;font-weight:700}
.drw-k a:hover{border-color:var(--pri);background:var(--card);box-shadow:0 10px 22px var(--pri-glow)}
.drw-k a:hover::after{transform:scale(1.3)}
.drw-k a:active{transform:scale(.97)}
.drw-k a.on{border-color:var(--pri);background:var(--pri-l)}
.drw-k a.on span{color:var(--pri)}

/* ---------- Pencarian di header ---------- */
.srch{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:95}
.srch[hidden]{display:none}
.srch-bg{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;background:rgba(5,8,20,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fade .2s}
.srch-p{position:relative;margin:10px auto 0;width:calc(100% - 20px);max-width:620px;max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:0 20px 50px rgba(0,0,0,.3);overflow:hidden;animation:srchTurun .22s cubic-bezier(.2,.8,.2,1)}
@keyframes srchTurun{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.srch-f{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 16px;border-bottom:1px solid var(--line);flex:none}
.srch-ic{display:grid;place-items:center;color:var(--pri)}
.srch-ic svg{width:21px;height:21px}
.srch-f input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:16px;color:var(--ink);padding:8px 0}
.srch-f input::-webkit-search-cancel-button{display:none}
.srch-x{border:0;background:var(--card2);color:var(--muted);font:inherit;font-size:13px;font-weight:700;padding:8px 12px;border-radius:10px;cursor:pointer;flex:none}
.srch-r{overflow-y:auto;overscroll-behavior:contain;padding:6px 8px 12px}
.srch-h{padding:10px 8px 6px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.srch-it{display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:14px;color:var(--ink);text-decoration:none;transition:background .15s}
.srch-it:hover,.srch-it:focus-visible{background:var(--pri-l);outline:none}
.srch-im{position:relative;width:44px;height:44px;border-radius:12px;overflow:hidden;flex:none;display:grid;place-items:center;background:var(--pri-l);color:var(--pri);font-size:17px}
.srch-im img{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.srch-im2{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;box-shadow:0 6px 14px var(--pri-glow)}
.srch-t{display:flex;flex-direction:column;min-width:0;flex:1}
.srch-t b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srch-t small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srch-it em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--pri);background:var(--pri-l);padding:3px 8px;border-radius:999px;flex:none}
.srch-0{padding:26px 12px;text-align:center;color:var(--muted);font-size:14px}
@media(max-width:360px){.top-act .ibtn{width:40px;height:40px}}

/* Pencarian v2: kosong sebelum mengetik, tampilan lebih modern */
.srch-p{margin-top:12px;border-radius:24px;background:var(--card);border:1px solid color-mix(in srgb,var(--pri) 25%,var(--line));
  box-shadow:0 24px 60px rgba(0,0,0,.32),0 0 0 4px color-mix(in srgb,var(--pri) 10%,transparent)}
.srch-f{padding:8px 8px 8px 10px;border-bottom:0;gap:8px}
.srch-ic{width:40px;height:40px;border-radius:13px;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;box-shadow:0 6px 14px var(--pri-glow);flex:none}
.srch-ic svg{width:19px;height:19px}
.srch-f input{font-size:15.5px;font-weight:500}
.srch-f input::placeholder{color:var(--muted);opacity:.85}
.srch-x{width:40px;height:40px;padding:0;border-radius:13px;font-size:0;display:grid;place-items:center;position:relative}
.srch-x::before,.srch-x::after{content:"";position:absolute;width:15px;height:2px;border-radius:2px;background:var(--muted)}
.srch-x::before{transform:rotate(45deg)}.srch-x::after{transform:rotate(-45deg)}
.srch-r:empty{display:none}
.srch.ada .srch-r{border-top:1px solid var(--line)}
.srch-r{padding:4px 8px 10px;max-height:min(70vh,560px)}
.srch-h{padding:12px 8px 6px}
.srch-it{gap:12px;padding:8px;border-radius:16px;animation:srchIt .18s ease-out both}
@keyframes srchIt{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.srch-it+.srch-it{margin-top:2px}
.srch-im{width:46px;height:46px;border-radius:14px}
.srch-t b{font-size:14px;font-weight:700}
.srch-it em{font-size:10px;letter-spacing:.02em}
.srch-it:hover .srch-t b{color:var(--pri)}
.srch-0{display:flex;flex-direction:column;align-items:center;gap:4px;padding:24px 12px 20px}
.srch-0 span{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--pri-l);color:var(--pri);font-size:20px;margin-bottom:6px}
.srch-0 b{color:var(--ink);font-size:15px}
.srch-0 small{font-size:12.5px}

/* ---------- Beranda: Lagi Populer (gaya web utama) ---------- */
.lpop{margin:4px 0 16px}
.lpop-h{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-family:"Outfit","Inter",system-ui,sans-serif;font-size:20px;font-weight:800;color:var(--ink)}
.lpop-h span{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:15px;color:#fff;background:linear-gradient(135deg,#f97316,#ef4444);box-shadow:0 6px 14px rgba(239,68,68,.3)}
.lpop-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:760px){.lpop-g{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lpop-c{position:relative;display:flex;align-items:center;gap:10px;min-width:0;padding:8px;border-radius:16px;overflow:hidden;color:#fff;text-decoration:none;
  background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 8px 20px var(--pri-glow);transition:transform .15s,box-shadow .15s}
.lpop-c::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;background:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1.5px) 0 0/9px 9px;opacity:.55;pointer-events:none}
.lpop-c::after{content:"";position:absolute;right:-24px;top:-30px;width:90px;height:90px;border-radius:50%;background:rgba(255,255,255,.12)}
.lpop-c>*{position:relative;z-index:1}
.lpop-c:hover{transform:translateY(-2px);box-shadow:0 12px 26px var(--pri-glow)}
.lpop-c:active{transform:scale(.98)}
.lpop-im{position:relative;width:62px;height:62px;flex:none;border-radius:12px;overflow:hidden;display:grid;place-items:center;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.55);font-size:22px}
.lpop-im img{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.lpop-t{display:flex;flex-direction:column;min-width:0;gap:2px}
.lpop-t b{font-size:13.5px;font-weight:800;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lpop-t small{font-size:12px;opacity:.88;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:360px){.lpop-im{width:52px;height:52px}.lpop-t b{font-size:12.5px}}
/* Lagi Populer v2: judul polos seperti web utama, teks kartu 1 baris */
.lpop-h{gap:8px;font-family:inherit;font-size:19px;font-weight:700;letter-spacing:-.01em;margin:2px 2px 12px}
.lpop-h span{width:auto;height:auto;border-radius:0;background:none;box-shadow:none;color:var(--pri);font-size:19px}
.lpop-c{gap:11px;padding:8px 10px 8px 8px}
.lpop-im{width:58px;height:66px;border-radius:12px}
.lpop-t{flex:1;gap:3px}
.lpop-t b{display:block;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:unset}
.lpop-t small{font-size:11.5px}
@media(max-width:360px){.lpop-im{width:50px;height:58px}.lpop-t b{font-size:12px}}
.lpop-c{gap:9px;padding:7px 8px 7px 7px}.lpop-im{width:52px;height:60px}.lpop-t b{font-size:clamp(11px,3.05vw,13px);letter-spacing:-.2px}.lpop-t small{font-size:clamp(10px,2.8vw,11.5px)}

/* ---------- Kartu game v2 (gaya web utama): gambar penuh, label nama di bawah, tanpa harga ---------- */
.game2{position:relative;border:0;border-radius:18px;background:linear-gradient(160deg,var(--pri),var(--pri2));padding:5px;box-shadow:0 10px 24px var(--pri-glow)}
.game2::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;border-radius:inherit;background:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1.5px) 0 0/9px 9px;opacity:.5;pointer-events:none}
.game2 .game-img{aspect-ratio:4/5;border-radius:14px;background:color-mix(in srgb,var(--pri) 30%,#0b1020)}
.game2 .game-img img.game-main{object-fit:cover}
.game2 .game-bg{display:none}
.game2 .game-fb{color:#fff;font-size:42px}
.game2 .game-t{position:absolute;left:5px;right:5px;bottom:5px;z-index:2;padding:22px 6px 9px;text-align:center;align-items:center;gap:1px;border-radius:0 0 14px 14px;
  background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--pri) 55%,rgba(8,12,30,.75)) 42%,color-mix(in srgb,var(--pri) 70%,#0b1020) 100%)}
.game2 .game-t b{color:#fff;min-height:0;font-size:clamp(11.5px,3.2vw,14px);font-weight:800;display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.game2 .game-t small{color:rgba(255,255,255,.85);font-size:clamp(10px,2.8vw,12px);max-width:100%}
.game2:hover{transform:translateY(-3px);box-shadow:0 14px 30px var(--pri-glow)}
.game2 .game-t b{font-size:clamp(10.5px,2.85vw,13.5px);letter-spacing:-.2px}.game2 .game-t{padding:20px 4px 8px}.game2 .game-fb{align-items:start;padding-top:22%}
/* ---------- Kartu game v3: SAMA PERSIS dengan web utama (.cards-games .card) ---------- */
#grid.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(min-width:640px){#grid.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}}
@media(min-width:768px){#grid.grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}}
@media(min-width:1024px){#grid.grid{gap:22px}}
.game2{min-height:150px;border-radius:14px;overflow:hidden;position:relative;padding:0;border:0;background:transparent;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center}
.game2::before{display:none}
.game2:hover{transform:none;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.08)}
.game2:active{transform:none;border:4px solid #3EC1ED}
.game2 .game-img{position:static;width:100%;height:100%;aspect-ratio:auto;border-radius:0;background:var(--card2);display:block}
.game2 .game-img img.game-main{position:static;display:block;width:100%;height:100%;object-fit:cover;transition:all .3s ease}
.game2:active .game-img img.game-main{filter:blur(4px)}
.game2 .game-fb{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;padding-top:0;align-items:center;font-size:38px;color:var(--pri)}
.game2 .game-img img.game-main~.game-fb{display:none}
.game2 .game-t{position:absolute;left:0;right:0;bottom:0;height:28%;min-height:46px;padding:4px 8px;border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:0;text-align:center;
  background:rgba(15,23,42,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all 2s ease}
.game2 .game-t b{display:block;color:#fff;font-size:12px;font-weight:700;line-height:1.35;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:none;min-height:0}
.game2 .game-t small{display:block;color:#d1d5db;font-size:12px;font-weight:400;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(min-width:768px){.game2 .game-t b{font-size:20px}.game2 .game-t small{font-size:14px}}
.game2 .game-img{background:linear-gradient(160deg,var(--pri),var(--pri2))}.game2 .game-fb{color:#fff}.game2 .game-img:not(:has(img.game-main)){aspect-ratio:2/3}
/* ---------- Kartu game v4: logo kotak (1:1) + nama di bawah, serasi tema ---------- */
.game2{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;min-height:0;padding:6px;border-radius:18px;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--sh);transition:transform .2s,border-color .2s,box-shadow .2s}
.game2 .game-img{position:relative;width:100%;height:auto;aspect-ratio:1/1;border-radius:13px;overflow:hidden;background:var(--pri-l)}
.game2 .game-img:not(:has(img.game-main)){aspect-ratio:1/1;background:linear-gradient(145deg,var(--pri),var(--pri2))}
.game2 .game-img img.game-main{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.game2 .game-t{position:static;height:auto;min-height:0;padding:8px 2px 4px;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;transition:none;gap:1px}
.game2 .game-t b{color:var(--ink);font-size:12.5px;font-weight:700;line-height:1.3}
.game2 .game-t small{color:var(--muted);font-size:11px}
.game2:hover{transform:translateY(-3px);border-color:var(--pri);box-shadow:0 12px 26px var(--pri-glow)}
.game2:hover .game-img img.game-main{transform:scale(1.06)}
.game2:hover .game-t b{color:var(--pri)}
.game2:active{transform:scale(.97);border:1px solid var(--pri)}
.game2:active .game-img img.game-main{filter:none}
@media(min-width:768px){.game2 .game-t b{font-size:14px}.game2 .game-t small{font-size:12px}}
/* ---------- Kartu game v5: kartu panjang bergradasi tema, border 1px, logo kotak ---------- */
.game2{position:relative;padding:6px;border-radius:18px;border:1px solid color-mix(in srgb,var(--pri) 55%,transparent);
  background:linear-gradient(165deg,var(--pri) 0%,var(--pri2) 100%);box-shadow:0 8px 20px var(--pri-glow);overflow:hidden}
.game2::before{display:block;content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.6px) 0 0/9px 9px;opacity:.6}
.game2::after{content:"";position:absolute;left:-30%;right:-30%;bottom:-38%;height:60%;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.game2>*{position:relative;z-index:1}
.game2 .game-img{aspect-ratio:1/1;border-radius:13px;background:rgba(255,255,255,.14);box-shadow:0 6px 14px rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.25)}
.game2 .game-img:not(:has(img.game-main)){background:rgba(255,255,255,.16)}
.game2 .game-fb{color:#fff}
.game2 .game-t{flex:1;display:flex;flex-direction:column;justify-content:center;padding:12px 2px 10px;gap:2px}
.game2 .game-t b{color:#fff;font-size:12.5px;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.game2 .game-t small{color:rgba(255,255,255,.82);font-size:11px}
.game2:hover{transform:translateY(-3px);border-color:color-mix(in srgb,#fff 45%,var(--pri));box-shadow:0 14px 30px var(--pri-glow)}
.game2:hover .game-t b{color:#fff}
.game2:active{transform:scale(.97);border:1px solid color-mix(in srgb,#fff 45%,var(--pri))}
@media(min-width:768px){.game2 .game-t{padding:14px 4px 12px}.game2 .game-t b{font-size:14px}.game2 .game-t small{font-size:12px}}
/* ---------- Tombol kategori beranda v2: kotak membulat, sedikit lebih besar ---------- */
#chips.chips{gap:10px;padding:6px 2px 14px;margin:0 -2px}
#chips .chip{position:relative;border-radius:12px;padding:10px 18px;font-size:14px;font-weight:700;letter-spacing:-.1px;
  background:var(--card);border:1px solid var(--line);color:var(--ink);box-shadow:0 2px 8px rgba(15,23,42,.05);
  transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .15s}
#chips .chip:hover{border-color:var(--pri);color:var(--pri);background:var(--pri-l)}
#chips .chip:active{transform:scale(.96)}
#chips .chip.on{background:linear-gradient(135deg,var(--pri),var(--pri2));border-color:transparent;color:#fff;box-shadow:0 8px 18px var(--pri-glow)}
#chips .chip.on::after{content:"";position:absolute;left:50%;bottom:5px;transform:translateX(-50%);width:16px;height:3px;border-radius:3px;background:rgba(255,255,255,.75)}
@media(max-width:360px){#chips .chip{padding:9px 14px;font-size:13px}}
/* Footer: ruang di bawah supaya tidak tertutup navigasi bawah (tinggi nav 68px + jarak 10px) */
.foot{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
@media(min-width:640px){.foot{padding-bottom:calc(112px + env(safe-area-inset-bottom))}}

/* Logo layanan (config.php gambar_layanan) */
.ly-logo{width:100%;height:100%;object-fit:cover;display:block}
.has-logo{background:#fff!important;padding:0!important;overflow:hidden;border-color:var(--line)!important}
.has-logo>.ly-logo{border-radius:inherit}
.bs-ic.has-logo,.pl-gi.has-logo{box-shadow:0 4px 10px rgba(15,23,42,.12)}

/* Lagi Populer: logo kotak */
.lpop-im{width:58px;height:58px;aspect-ratio:1/1;border-radius:12px}
@media(max-width:360px){.lpop-im{width:50px;height:50px}}
.lpop-im{border-radius:9px}.lpop-im img{border-radius:0}

/* Cek pesanan: kolom kode melebar penuh, tombol di kanan */
.cek-form .cek-row{display:flex;gap:8px;align-items:stretch}
.cek-form .cek-row>.cek-in{flex:1;min-width:0}
.cek-form .cek-row .btn{flex:none}
/* Footer: hak cipta tepat di tengah */
.foot-bot{padding:12px 0 0!important;text-align:center;display:flex;justify-content:center}
.foot-bot span{display:block;width:100%;text-align:center}
/* Teks di bawah nama game lebih terbaca */
.game2 .game-t small,.lpop-t small{color:#fff;opacity:.95;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.25)}

/* Pagination banner: di luar banner, model pil modern */
.bn{margin-bottom:10px}
.bn-dots{position:static;display:flex;justify-content:center;align-items:center;gap:6px;margin:0 auto 16px;padding:5px 8px;width:max-content;max-width:100%;
  border-radius:999px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh);pointer-events:auto}
.bn-dots[hidden]{display:none}
.bn-dots i{width:8px;height:8px;border-radius:999px;background:var(--line);box-shadow:none;cursor:pointer;transition:width .3s,background .3s}
.bn-dots i:hover{background:color-mix(in srgb,var(--pri) 45%,var(--line))}
.bn-dots i.on{width:24px;background:linear-gradient(90deg,var(--pri),var(--pri2))}
/* Jarak pagination -> Lagi Populer dirapatkan */
.bn-dots{margin-bottom:6px}
.lpop{margin-top:0}
.lpop-h{margin-top:0}
/* Ikon api menyala */
.lpop-h span{position:relative;display:inline-grid;place-items:center}
.lpop-h span i{color:#f97316;background:linear-gradient(180deg,#facc15 0%,#f97316 55%,#ef4444 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  transform-origin:50% 90%;animation:apiNyala 1.6s ease-in-out infinite;filter:drop-shadow(0 0 4px rgba(249,115,22,.65)) drop-shadow(0 0 10px rgba(239,68,68,.35))}
.lpop-h span::after{content:"";position:absolute;left:50%;bottom:-2px;width:18px;height:6px;transform:translateX(-50%);border-radius:50%;background:rgba(249,115,22,.35);filter:blur(4px);animation:apiBayang 1.6s ease-in-out infinite}
@keyframes apiNyala{0%,100%{transform:scale(1) rotate(-2deg)}25%{transform:scale(1.08,1.14) rotate(2deg)}50%{transform:scale(.96,1.04) rotate(-3deg)}75%{transform:scale(1.06,1.1) rotate(1deg)}}
@keyframes apiBayang{0%,100%{opacity:.55;width:16px}50%{opacity:.9;width:22px}}
@media(prefers-reduced-motion:reduce){.lpop-h span i,.lpop-h span::after{animation:none}}
/* Api: warna mengikuti tema, glow tipis */
.lpop-h span i{color:var(--pri);background:linear-gradient(180deg,var(--pri2) 0%,var(--pri) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 2px color-mix(in srgb,var(--pri) 35%,transparent))}
.lpop-h span::after{background:color-mix(in srgb,var(--pri) 22%,transparent);filter:blur(3px)}
/* Latar halaman: grid garis tipis warna tema, memudar ke bawah */
body{position:relative}
body::before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(to right,color-mix(in srgb,var(--pri) 9%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in srgb,var(--pri) 9%,transparent) 1px,transparent 1px);
  background-size:28px 28px;background-position:-1px -1px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 45%,transparent 90%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 45%,transparent 90%)}
html[data-theme=dark] body::before{background-image:linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px)}
/* ---------- Latar v2: grid lebih jelas di atas + cahaya buram di sudut ---------- */
body::before{background-image:linear-gradient(to right,color-mix(in srgb,var(--pri) 14%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in srgb,var(--pri) 14%,transparent) 1px,transparent 1px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.7) 40%,transparent 92%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.7) 40%,transparent 92%)}
html[data-theme=dark] body::before{background-image:linear-gradient(to right,rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.07) 1px,transparent 1px)}
body::after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-2;pointer-events:none;
  background:radial-gradient(420px 320px at -6% 4%,color-mix(in srgb,var(--pri) 20%,transparent),transparent 70%),
             radial-gradient(380px 300px at 108% 46%,color-mix(in srgb,var(--pri2) 18%,transparent),transparent 70%)}
html[data-theme=dark] body::after{opacity:.75}
/* ---------- Kartu muncul halus saat digulir ---------- */
.muncul{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.muncul.tampil{opacity:1;transform:none}
/* ---------- Kilau tipis lewat di kartu Lagi Populer ---------- */
.lpop-c{isolation:isolate}
.lpop-c .lpop-kilau{position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.28) 50%,transparent 100%);transform:skewX(-18deg);animation:kilau 5.5s ease-in-out infinite}
.lpop-c:nth-child(2) .lpop-kilau{animation-delay:.35s}.lpop-c:nth-child(3) .lpop-kilau{animation-delay:.7s}.lpop-c:nth-child(4) .lpop-kilau{animation-delay:1.05s}
@keyframes kilau{0%,62%{left:-60%}82%,100%{left:130%}}
@media(prefers-reduced-motion:reduce){.muncul{opacity:1;transform:none;transition:none}.lpop-c .lpop-kilau{display:none}}
/* ---------- Hover kartu v2 (kartu utama + Lagi Populer) ---------- */
.game2,.lpop-c{will-change:transform;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease,opacity .5s ease}
.game2 .game-img img.game-main,.lpop-im img{transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .4s ease}
/* garis cahaya tepi (ring) yang muncul saat hover */
.game2 .game-ring,.lpop-c .lpop-ring{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;z-index:3;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.65),0 0 0 3px color-mix(in srgb,var(--pri) 35%,transparent);opacity:0;transition:opacity .35s ease}
@media(hover:hover) and (pointer:fine){
  .game2.muncul.tampil:hover,.game2:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 18px 34px var(--pri-glow),0 6px 12px rgba(15,23,42,.12)}
  .game2:hover .game-ring{opacity:1}
  .game2:hover .game-img img.game-main{transform:scale(1.08);filter:saturate(1.12) brightness(1.04)}
  .game2:hover .game-img{box-shadow:0 10px 20px rgba(0,0,0,.25)}
  .lpop-c.muncul.tampil:hover,.lpop-c:hover{transform:translateY(-4px);box-shadow:0 16px 30px var(--pri-glow)}
  .lpop-c:hover .lpop-ring{opacity:1}
  .lpop-c:hover .lpop-im img{transform:scale(1.1) rotate(-2deg)}
  .lpop-c:hover .lpop-kilau{animation-duration:1.1s}
}
/* sentuhan di HP: tekan = mengecil sedikit + ring */
.game2:active,.game2.muncul.tampil:active{transform:scale(.96);transition-duration:.12s}
.game2:active .game-ring,.lpop-c:active .lpop-ring{opacity:1}
.lpop-c:active,.lpop-c.muncul.tampil:active{transform:scale(.97);transition-duration:.12s}
@media(prefers-reduced-motion:reduce){.game2:hover,.lpop-c:hover{transform:none}.game2:hover .game-img img.game-main,.lpop-c:hover .lpop-im img{transform:none}}
/* ---------- Hover v3: garis berputar mengelilingi tepi kartu + respon sentuh instan ---------- */
.game2,.lpop-c{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.game2 img,.lpop-c img{-webkit-touch-callout:none;-webkit-user-drag:none;pointer-events:none}
.game2 .game-ring,.lpop-c .lpop-ring{box-shadow:none;padding:2px;overflow:hidden;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.game2 .game-ring::before,.lpop-c .lpop-ring::before{content:"";position:absolute;left:50%;top:50%;width:250%;height:250%;
  transform:translate(-50%,-50%) rotate(0deg);
  background:conic-gradient(from 0deg,transparent 0 62%,color-mix(in srgb,var(--pri2) 70%,#fff) 74%,#fff 82%,var(--pri2) 90%,transparent 100%);
  animation:ringPutar 1.8s linear infinite;animation-play-state:paused}
@keyframes ringPutar{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media(hover:hover) and (pointer:fine){.game2:hover .game-ring::before,.lpop-c:hover .lpop-ring::before{animation-play-state:running}}
/* sentuhan HP (class .tekan dipasang JS saat jari menyentuh) */
.game2.tekan,.game2.muncul.tampil.tekan{transform:translateY(-4px) scale(1.02);box-shadow:0 16px 30px var(--pri-glow)}
.game2.tekan .game-ring,.lpop-c.tekan .lpop-ring{opacity:1}
.game2.tekan .game-ring::before,.lpop-c.tekan .lpop-ring::before{animation-play-state:running}
.game2.tekan .game-img img.game-main{transform:scale(1.08)}
.lpop-c.tekan,.lpop-c.muncul.tampil.tekan{transform:translateY(-3px);box-shadow:0 14px 28px var(--pri-glow)}
.lpop-c.tekan .lpop-im img{transform:scale(1.1) rotate(-2deg)}
@media(prefers-reduced-motion:reduce){.game2 .game-ring::before,.lpop-c .lpop-ring::before{animation:none}}
.game2 .game-ring,.lpop-c .lpop-ring{padding:3px}
.game2 .game-ring::before,.lpop-c .lpop-ring::before{
  background:conic-gradient(from 0deg,transparent 0 30%,#7dd3fc 40%,#fff 48%,transparent 50%,transparent 80%,#7dd3fc 90%,#fff 98%,transparent 100%);
  filter:drop-shadow(0 0 3px #fff)}

/* HP: matikan efek hover bawaan (sticky hover) — yang dipakai hanya class .tekan */
@media(hover:none),(pointer:coarse){
  .game2:hover,.lpop-c:hover{transform:none;box-shadow:0 8px 20px var(--pri-glow)}
  .game2:hover:not(.tekan) .game-ring,.lpop-c:hover:not(.tekan) .lpop-ring{opacity:0}
  .game2:hover:not(.tekan) .game-img img.game-main,.lpop-c:hover:not(.tekan) .lpop-im img{transform:none;filter:none}
  .game2:active:not(.tekan),.lpop-c:active:not(.tekan){transform:none}
  .game2.tekan,.game2.muncul.tampil.tekan{transform:translateY(-4px) scale(1.02)}
  .lpop-c.tekan,.lpop-c.muncul.tampil.tekan{transform:translateY(-3px)}
}
/* Warna garis berputar mengikuti tema */
.game2 .game-ring::before,.lpop-c .lpop-ring::before{
  background:conic-gradient(from 0deg,transparent 0 30%,var(--pri) 38%,color-mix(in srgb,var(--pri2) 60%,#fff) 47%,transparent 50%,transparent 80%,var(--pri) 88%,color-mix(in srgb,var(--pri2) 60%,#fff) 97%,transparent 100%);
  filter:drop-shadow(0 0 3px color-mix(in srgb,var(--pri2) 70%,#fff))}

/* Respon sentuh lebih cepat */
.game2.tekan,.lpop-c.tekan{transition:transform .14s ease-out,box-shadow .14s ease-out!important;transition-delay:0s!important}
.game2.tekan .game-ring,.lpop-c.tekan .lpop-ring{transition:opacity .08s!important}
.game2.tekan .game-img img.game-main,.lpop-c.tekan .lpop-im img{transition-duration:.25s}
/* Garis berputar: warna cerah tema + putih, lebih tebal, kontras dengan kartu */
.game2 .game-ring,.lpop-c .lpop-ring{padding:3px}
.game2 .game-ring::before,.lpop-c .lpop-ring::before{
  background:conic-gradient(from 0deg,transparent 0 26%,color-mix(in srgb,var(--pri2) 45%,#fff) 36%,#fff 46%,transparent 50%,transparent 76%,color-mix(in srgb,var(--pri2) 45%,#fff) 86%,#fff 96%,transparent 100%);
  filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 2px color-mix(in srgb,var(--pri2) 50%,#fff))}
/* Navigasi bawah: kaca transparan seperti header */
.an{background:var(--glass);-webkit-backdrop-filter:saturate(1.8) blur(16px);backdrop-filter:saturate(1.8) blur(16px);
  border:1px solid color-mix(in srgb,var(--line) 70%,transparent);box-shadow:0 10px 30px rgba(15,23,42,.10)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.an{background:var(--card)}}

/* Header: tombol kotak membulat; mode/tema/cari jadi satu kartu, menu terpisah */
.top{border-radius:0 0 18px 18px}
.top-act{gap:8px;align-items:center}
.top-grp{display:flex;align-items:center;gap:2px;padding:3px;border-radius:14px;background:var(--card2);border:1px solid var(--line)}
.top-grp .ibtn{width:36px;height:36px;border:0;border-radius:11px;background:transparent}
.top-grp .ibtn:hover{background:var(--pri-l);color:var(--pri)}
.top-grp .ibtn svg{width:18px;height:18px}
.top-act .menu-btn{width:44px;height:44px;border-radius:14px}
@media(max-width:360px){.top-grp .ibtn{width:32px;height:32px}.top-act .menu-btn{width:40px;height:40px}}

/* Nama toko di header (animasi & Logo Header) dipindah ke assets/brand.css */

/* ---------- Header halaman topup game (model web utama): gambar header penuh + kartu game, ikut tema ---------- */
.gh3{position:relative;margin:-16px -14px 14px;background:linear-gradient(90deg,var(--pri),var(--pri2));color:#fff;overflow:hidden}
.gh3::after{content:"";position:absolute;width:200px;height:200px;right:-60px;bottom:-110px;border-radius:50%;background:rgba(255,255,255,.1);pointer-events:none}
.gh3-ban{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,var(--pri),var(--pri2))}
.gh3-ban img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gh3-ban.is-def{max-height:420px}
.gh3-ban::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(2,6,23,.3)}
.gh3-ban::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:34%;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,var(--pri),var(--pri2));-webkit-mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.55) 55%,#000);mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.55) 55%,#000)}
.gh3-ban.is-def img{filter:blur(16px) brightness(70%) saturate(1.2);transform:scale(1.25)}
.gh3-hujan{position:absolute;inset:0;pointer-events:none;z-index:2}
.gh3-hujan i{position:absolute;top:0;width:2px;height:140px;border-radius:0 0 3px 3px;background:linear-gradient(transparent,#fff);
  box-shadow:0 6px 10px rgba(255,255,255,.55);opacity:.95;transform:translateY(-110%);animation:gh3Hujan 1.2s linear infinite}
.gh3-hujan i:nth-child(1){left:4%;animation-duration:0.99s;animation-delay:-.4s}
.gh3-hujan i:nth-child(2){left:11%;width:1px;animation-duration:1.40s;animation-delay:-1.9s}
.gh3-hujan i:nth-child(3){left:18%;width:3px;animation-duration:1.12s;animation-delay:-1.1s}
.gh3-hujan i:nth-child(4){left:26%;animation-duration:1.53s;animation-delay:-2.6s}
.gh3-hujan i:nth-child(5){left:33%;width:1px;animation-duration:0.90s;animation-delay:-.2s}
.gh3-hujan i:nth-child(6){left:41%;animation-duration:1.26s;animation-delay:-1.5s}
.gh3-hujan i:nth-child(7){left:49%;width:3px;animation-duration:1.62s;animation-delay:-3s}
.gh3-hujan i:nth-child(8){left:57%;width:1px;animation-duration:1.03s;animation-delay:-.9s}
.gh3-hujan i:nth-child(9){left:64%;animation-duration:1.35s;animation-delay:-2.2s}
.gh3-hujan i:nth-child(10){left:72%;width:3px;animation-duration:1.08s;animation-delay:-.6s}
.gh3-hujan i:nth-child(11){left:79%;width:1px;animation-duration:1.48s;animation-delay:-1.7s}
.gh3-hujan i:nth-child(12){left:86%;animation-duration:0.95s;animation-delay:-1.2s}
.gh3-hujan i:nth-child(13){left:92%;width:3px;animation-duration:1.30s;animation-delay:-2.4s}
.gh3-hujan i:nth-child(14){left:97%;width:1px;animation-duration:1.17s;animation-delay:-.1s}
@keyframes gh3Hujan{to{transform:translateY(260%)}}
.gh3-head{position:relative;z-index:4;display:flex;flex-direction:column;gap:14px;padding:0 16px 16px}
.gh3-atas{position:relative;display:flex;align-items:flex-end;gap:14px}
/* logo game kotak dengan garis cahaya berputar + kilau */
.gh3-img{position:relative;flex:none;width:92px;height:92px;margin-top:-46px;padding:3px;border-radius:22px;overflow:hidden;
  background:var(--card);box-shadow:0 0 0 1px var(--line)}
.gh3-img::before{content:"";position:absolute;inset:-60%;background:conic-gradient(from 0deg,transparent 0 55%,var(--pri2) 70%,#fff 78%,var(--pri) 86%,transparent 94%);
  animation:gh3Putar 3.2s linear infinite}
.gh3-img-in{position:relative;z-index:1;width:100%;height:100%;border-radius:19px;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;font-size:30px}
.gh3-img-in img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.gh3-img-in::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);animation:gh3Kilau 4.5s ease-in-out infinite}
@keyframes gh3Putar{to{transform:rotate(1turn)}}
@keyframes gh3Kilau{0%,62%{transform:translateX(-120%)}82%,100%{transform:translateX(120%)}}
.gh3-teks{min-width:0;padding:10px 0 4px}
.gh3-nama{margin:0;font-family:"Outfit","Inter",system-ui,sans-serif;font-size:clamp(20px,5.6vw,27px);font-weight:800;font-style:italic;line-height:1.18;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.25);
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.gh3-sub{margin:3px 0 0;font-size:13px;font-weight:600;color:rgba(255,255,255,.88);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gh3-fitur{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.gh3-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;font-size:11px;font-weight:700;color:#fff;white-space:nowrap;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.38);border-radius:10px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.gh3-chip i{font-size:11px}
.gh3-chip .kn{color:#fde047}.gh3-chip .br{color:#fff}
@media(max-width:400px){.gh3-chip{font-size:10.5px;padding:4px 8px;gap:4px}.gh3-fitur{gap:5px}}
@media(max-width:360px){.gh3-chip{font-size:10px;padding:4px 7px}.gh3-img{width:82px;height:82px}}
@media(min-width:640px){.gh3-head{padding:0 22px 20px}.gh3-img{width:112px;height:112px;margin-top:-56px;border-radius:26px}.gh3-img-in{border-radius:23px}}
@media(min-width:1001px){.gh3{margin:0 0 16px;border-radius:calc(var(--r) + 8px)}}
@media(prefers-reduced-motion:reduce){.gh3-hujan{display:none}.gh3-img::before,.gh3-img-in::after{animation:none}}

/* ============ Header langkah model web utama (semua halaman beli) ============
   Pil gradasi yang menempel di tepi kiri layar (HP) / kartu (layar lebar), badge nomor kotak berbingkai
   putih, dan tombol "?" bulat di kanan. Warna tetap memakai --pri/--pri2. */
.stp2:not(.kl-p) .stp2-h{
  gap:12px;margin:-10px 0 14px -31px;padding:9px 14px 9px 30px;
  background:linear-gradient(to right,var(--pri),var(--pri2));
  border:1px solid rgba(255,255,255,.35);border-left:0;border-radius:0 999px 999px 0;
  box-shadow:0 4px 14px var(--pri-glow);overflow:hidden}
.stp2:not(.kl-p) .stp2-h .n{
  width:32px;height:32px;font-size:14px;font-weight:800;color:#fff;flex:none;
  background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.85);
  border-radius:9px;box-shadow:none;display:flex;align-items:center;justify-content:center}
.stp2:not(.kl-p) .stp2-h>div{flex:1 1 auto;min-width:0}
.stp2:not(.kl-p) .stp2-h h2{font-size:15px;font-weight:700;color:#fff;line-height:1.3}
.stp2:not(.kl-p) .stp2-h small{display:none}
.stp2:not(.kl-p) .stp2-h h2 em,.stp2:not(.kl-p) .stp2-h h2 em.req{
  color:#fff;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.7)}
.stp2:not(.kl-p) .stp2-h .dtl{
  margin-left:auto;flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  font-size:14px;color:#fff;background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.85);
  border-radius:50%;cursor:pointer;padding:0;font-family:inherit;transition:background .2s,transform .15s}
.stp2:not(.kl-p) .stp2-h .dtl:hover{background:rgba(255,255,255,.32)}
.stp2:not(.kl-p) .stp2-h .dtl:active{transform:scale(.92)}
@media(min-width:640px){.stp2:not(.kl-p) .stp2-h{margin:-14px 0 14px -23px;padding-left:22px}}

/* ===== Radius kartu langkah = web utama (rounded-lg 8px) + panel keterangan ===== */
.stp2:not(.kl-p){border-radius:8px}
.ket-pn .kp-isi{border-top:0;padding:2px 4px 8px;max-height:none}
.ket-kosong{margin:8px 4px;color:var(--muted);font-size:13.5px}
#pnBeli[hidden],#pnKet[hidden]{display:none}

/* ===== Tombol cek model web utama (gradasi + kilau) & kotak panduan ===== */
#cekRow.cek-row{gap:7px}
.cek-b{position:relative;padding:7px 6px;font-size:10.5px;line-height:1.2;color:#fff;
  background:linear-gradient(to right,var(--pri),var(--pri2));border:1px solid rgba(255,255,255,.45);
  border-radius:8px;gap:5px;text-overflow:clip;transition:filter .18s,transform .18s}
.cek-b i{font-size:11px}
.cek-b:hover{filter:brightness(1.1);border-color:rgba(255,255,255,.45)}
.cek-b:active{transform:scale(.96)}
.cek-b::after{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.32) 50%,rgba(255,255,255,.08) 100%);
  transform:skewX(-20deg);animation:cekShine 3s infinite}
@keyframes cekShine{0%{left:-75%}60%,100%{left:130%}}
.cek-b.on{filter:brightness(.95)}
@media(max-width:380px){.cek-b{font-size:9.5px;padding:7px 4px;gap:4px}.cek-b i{font-size:10px}}
@media(prefers-reduced-motion:reduce){.cek-b::after{animation:none;display:none}}
.stp2 .ket{display:flex;align-items:flex-start;gap:9px;margin-top:10px;padding:10px 12px;
  background:var(--pri-l);border:1px solid color-mix(in srgb,var(--pri) 25%,var(--line));border-left:3px solid var(--pri);border-radius:10px;
  font-size:11.5px;line-height:1.6}
.stp2 .ket>i{flex:none;font-size:12px;color:var(--pri);margin-top:2px}
.ket-isi{min-width:0;font-size:11.5px;line-height:1.6;color:var(--ink);overflow-wrap:anywhere}
.ket-isi p{margin:0}.ket-isi p+p{margin-top:4px}

/* ===== Kontras: kartu putih vs latar, kolom input vs kartu ===== */
.stp2,.kp,.pl-tab,.pl-g{
  border-color:transparent;
  box-shadow:0 10px 28px color-mix(in srgb,var(--ink) 16%,transparent),0 2px 6px color-mix(in srgb,var(--ink) 8%,transparent)}
.stp2 .fi .input,.stp2 select.input,.fi .input{
  background:color-mix(in srgb,var(--ink) 7%,var(--card));
  border:1.5px solid color-mix(in srgb,var(--ink) 20%,var(--card))}
.fi .input:hover{border-color:color-mix(in srgb,var(--pri) 45%,var(--line))}
.fi .input:focus{background:var(--card);border-color:var(--pri)}
.fi .input::placeholder{color:color-mix(in srgb,var(--ink) 50%,var(--card));opacity:1}
.nom-b{border-color:color-mix(in srgb,var(--ink) 18%,var(--card))}
.ck-box,.cek-hasil{border-color:color-mix(in srgb,var(--ink) 16%,var(--card))}

/* ===== Kartu produk & tombol kategori model web utama ===== */
/* Kartu nominal: abu rata, sudut 8px, tanpa lift/bayangan; terpilih = putih + bingkai 2px + lencana centang di pojok kanan-bawah */
.nominal{gap:12px}
.nominal .nom-b{
  min-height:0;justify-content:flex-start;gap:6px;padding:8px;
  background:color-mix(in srgb,var(--ink) 7%,var(--card));
  border:2px solid transparent;border-radius:8px;box-shadow:none;transform:none;overflow:hidden}
.nominal .nom-b::before{display:none}
.nominal .nom:hover .nom-b{transform:none;box-shadow:none}
.nominal .nom-n{font-size:12px;font-weight:800;line-height:1.35;padding-right:0;text-align:left;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.nominal .nom-h{font-size:12px;font-weight:800;letter-spacing:0;margin-top:auto;padding-top:4px;
  background:linear-gradient(to right,var(--pri),var(--pri2));-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;width:max-content;max-width:100%}
.nominal .nom-ck{
  top:auto!important;right:0!important;bottom:0;left:auto;width:auto;height:auto;padding:4px 12px;
  border:0;border-radius:12px 0 6px 0;background:linear-gradient(to right,var(--pri),var(--pri2));
  font-size:15px;color:#fff;display:none;transform:none}
.nominal .nom input:checked + .nom-b{border-color:transparent;box-shadow:none;transform:none;
  background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,var(--pri),var(--pri2)) border-box}
.nominal .nom input:checked + .nom-b .nom-ck{display:grid;background:linear-gradient(to right,var(--pri),var(--pri2));transform:none}
.nominal .nom.ly-habis .nom-h{-webkit-text-fill-color:var(--muted);background:none;color:var(--muted)}
.nominal.pnl-paket .nom-b,.pnl-paket .nom-b{min-height:118px}

/* Tombol kategori: chip 13px, aktif = gradasi + tebal + terangkat + garis putih di dasar */
.kat{gap:10px;padding:6px 16px 10px}
.kat-b{position:relative;min-height:44px;padding:11px 16px;font-size:14px;font-weight:600;border-radius:13px;
  color:var(--muted);background:color-mix(in srgb,var(--ink) 9%,var(--card));
  border:1px solid color-mix(in srgb,var(--pri) 22%,var(--line));
  box-shadow:inset 0 1px 4px color-mix(in srgb,var(--ink) 12%,transparent);
  transition:color .22s,border-color .22s,background .22s,box-shadow .22s,transform .18s}
.kat-b:hover{color:var(--ink);border-color:color-mix(in srgb,var(--pri) 50%,var(--line))}
.kat-b.on{color:#fff;font-weight:800;background:linear-gradient(135deg,var(--pri),var(--pri2));
  border-color:transparent;box-shadow:none;transform:none}
.kat-b.on::after{display:none}
.kat-b span{display:none}

/* ===== Judul pil tebal + tombol pencarian di pil + bilah hasil ===== */
.stp2:not(.kl-p) .stp2-h h2{font-weight:800}
.stp2-h .cari-btn{margin:-9px -14px -9px auto;flex:none;align-self:stretch;display:flex;align-items:center;gap:6px;padding:0 14px;
  font:inherit;font-size:11.5px;font-weight:700;letter-spacing:.3px;color:#fff;white-space:nowrap;cursor:pointer;
  background:rgba(255,255,255,.14);border:0;border-left:1px solid rgba(255,255,255,.55);border-radius:0;transition:background .2s}
.stp2-h .cari-btn i{font-size:12px}
.stp2-h .cari-btn:hover{background:rgba(255,255,255,.28)}
.stp2-h .cari-btn:active{background:rgba(255,255,255,.36)}
.cari-bar{display:none;align-items:center;gap:10px;margin:0 0 12px;padding:10px 12px;
  background:var(--pri-l);border:1px solid color-mix(in srgb,var(--pri) 25%,var(--line));border-radius:12px}
.cari-bar.tampil{display:flex}
.cari-bar-ikon{flex:none;width:28px;height:28px;display:grid;place-items:center;font-size:12px;color:#fff;
  background:linear-gradient(135deg,var(--pri),var(--pri2));border-radius:9px}
.cari-bar-teks{flex:1 1 auto;min-width:0;font-size:11.5px;line-height:1.5;color:var(--ink)}
.cari-bar-teks b{color:var(--pri)}
.cari-hapus{flex:none;padding:7px 11px;font:inherit;font-size:10.5px;font-weight:700;color:#fff;cursor:pointer;white-space:nowrap;
  background:linear-gradient(to right,var(--pri),var(--pri2));border:0;border-radius:999px}
.cr-in{width:100%;margin-top:4px;text-align:left}
.cr-err{margin:8px 0 0;font-size:12.5px;color:var(--bad);text-align:left}

/* ===== Kartu produk dirapikan: font sama dengan web utama (Plus Jakarta Sans) agar tebalnya terbaca ===== */
.nominal .nom-n,.nominal .nom-h,.kat-b,.stp2-h h2{font-family:"Plus Jakarta Sans","Inter",system-ui,sans-serif}
.nominal .nom-b{gap:8px;padding:10px 10px 10px;min-height:92px}
.nominal .nom-n{font-size:12.5px;font-weight:700;line-height:1.4;letter-spacing:0}
.nominal .nom-h{font-size:13px;font-weight:800;padding-top:0;margin-top:auto}
.pnl-paket .nom-b{min-height:118px}

/* ===== Logo produk (dari web utama) di sisi kanan kartu ===== */
.nominal .nom-b{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;row-gap:8px;align-items:start;align-content:space-between}
.nominal .nom-n{grid-column:1;grid-row:1}
.nominal .nom-h{grid-column:1;grid-row:2;margin-top:0;align-self:end}
.nominal .nom-lg{grid-column:2;grid-row:1/3;align-self:center;width:36px;height:36px;object-fit:contain;display:block}
.pnl-paket .nom-b{display:flex}

/* Nama produk tampil penuh (tanpa dipotong "...") */
.nominal .nom-n{display:block;-webkit-line-clamp:unset;-webkit-box-orient:unset;overflow:visible}

/* ===== Kartu produk gaya baru: nama, logo + harga, strip badge pengiriman ===== */
.nominal .nom-b.nb2{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;min-height:0;border-radius:12px}
.nb2 .nom-top{display:flex;flex-direction:column;gap:10px;padding:12px 12px 12px}
.nb2 .nom-n{grid-column:auto;grid-row:auto;font-size:12.5px;font-weight:700;line-height:1.35;padding-right:18px}
.nb2 .nom-row{display:flex;align-items:center;gap:10px;min-width:0}
.nb2 .nom-lg{grid-column:auto;grid-row:auto;flex:none;width:30px;height:30px;align-self:center;object-fit:contain}
.nb2 .nom-h{grid-column:auto;grid-row:auto;margin:0;padding:0;font-size:15px;font-weight:800;align-self:center;line-height:1.2}
.nb2 .nom-ft{display:flex;justify-content:flex-end;padding:8px 10px;margin-top:auto;
  background:color-mix(in srgb,var(--pri) 9%,color-mix(in srgb,var(--ink) 9%,var(--card)))}
.nb2 .nom-ins{display:inline-flex;align-items:center;gap:6px;padding:4px 9px 4px 7px;border-radius:7px;background:var(--card);
  box-shadow:0 1px 3px color-mix(in srgb,var(--ink) 16%,transparent)}
.nb2 .nom-ins i{font-size:14px;color:var(--pri)}
.nb2 .nom-ins-t{display:flex;flex-direction:column;line-height:1.05}
.nb2 .nom-ins-t small{font-size:8.5px;font-weight:600;color:var(--muted);letter-spacing:.2px}
.nb2 .nom-ins-t b{font-size:11px;font-weight:800;color:var(--ink);letter-spacing:.3px}
.nb2 .nom-ck{top:0!important;right:0!important;bottom:auto!important;left:auto;padding:3px 9px;border-radius:0 0 0 10px;font-size:13px;z-index:2}
.nominal .nom input:checked + .nom-b.nb2 .nom-ft{background:color-mix(in srgb,var(--pri) 14%,var(--card))}

/* Badge lebih kecil + badge "100% Aman" + centang lebih besar */
.nb2 .nom-ft{justify-content:flex-end;flex-wrap:wrap;gap:4px;padding:6px 8px}
.nb2 .nom-ins{gap:4px;padding:3px 6px 3px 5px;border-radius:6px}
.nb2 .nom-ins i{font-size:11px}
.nb2 .nom-aman i{color:var(--ok)}
.nb2 .nom-ins-t small{font-size:7px}
.nb2 .nom-ins-t b{font-size:9px;letter-spacing:.2px;white-space:nowrap}
.nb2 .nom-ck{padding:5px 12px;font-size:17px;border-radius:0 0 0 12px}
.nb2 .nom-n{padding-right:26px}
.nb2 .nom-ft{flex-wrap:nowrap;justify-content:space-between}
.nb2 .nom-aman small{display:none}
.nb2 .nom-ins{min-width:0}
@media(max-width:360px){.nb2 .nom-ft{flex-wrap:wrap;justify-content:flex-end}}
.nb2 .nom-ft{padding:6px 6px;gap:3px}
.nb2 .nom-ins{padding:3px 5px 3px 4px;gap:3px}
.nb2 .nom-ins i{font-size:10px}
.nb2 .nom-ins-t small{font-size:6.5px}
.nb2 .nom-ins-t b{font-size:8.5px;letter-spacing:.1px}
.nb2 .nom-aman small{display:block}

/* ===== Nomor WhatsApp: kode negara + keterangan ===== */
.wa-row{display:flex;gap:10px;align-items:stretch}
.wa-row .fi{flex:1;min-width:0}
.wa-row .fi>i{display:none}
.wa-row .fi .input{padding-left:14px}
.wa-row select.wa-neg{flex:0 0 auto;width:auto;min-width:104px;min-height:52px;padding:0 30px 0 14px;font-weight:700;font-size:15.5px;
  background-color:var(--card2);border:1.5px solid transparent;border-radius:var(--r-s);color:var(--ink);cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.wa-row select.wa-neg:focus{outline:0;border-color:var(--pri);box-shadow:0 0 0 4px var(--pri-l)}
.wa-hint{margin:8px 2px 0;font-size:12.5px;color:var(--muted);line-height:1.5}
.wa-hint b{color:var(--pri);font-weight:800;letter-spacing:.02em}
.wa-hint.salah b{color:#ef4444}
.wa-info{display:flex;align-items:flex-start;gap:10px;margin-top:12px;padding:11px 13px;font-size:13px;line-height:1.55;color:var(--ink);
  background:color-mix(in srgb,var(--pri) 8%,var(--card2));border-left:3px solid var(--pri);border-radius:var(--r-s)}
.wa-info>i{color:var(--pri);font-size:17px;margin-top:2px}
.wa-info b{font-weight:800}
.wa-row .fi .input{width:100%;min-width:0}

/* ===== revisi: badge wajib di ujung, pilih negara warna pil, hover produk tanpa border ===== */
.stp2:not(.kl-p) .stp2-h h2{display:flex;align-items:center;gap:6px}
.stp2:not(.kl-p) .stp2-h h2 em.req{margin-left:auto;margin-right:2px}
.wa-hint:empty{display:none}
.wa-row select.wa-neg{background-color:transparent;background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%),linear-gradient(to right,var(--pri),var(--pri2));
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%,0 0;background-size:5px 5px,5px 5px,100% 100%;background-repeat:no-repeat;
  color:#fff;border:1px solid rgba(255,255,255,.35);box-shadow:0 4px 14px var(--pri-glow)}
.wa-row select.wa-neg option{color:#111;background:#fff}
.nominal .nom:hover .nom-b{border-color:transparent;background:color-mix(in srgb,var(--pri) 10%,var(--card2))}
.nominal .nom input:checked + .nom-b,.nominal .nom:hover input:checked + .nom-b{border-color:transparent;
  background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,var(--pri),var(--pri2)) border-box}

/* ===== pilih negara: gradasi rata lewat pembungkus ===== */
.wa-selw{position:relative;flex:none;display:flex;border-radius:var(--r-s);
  background:linear-gradient(to right,var(--pri),var(--pri2));border:1px solid rgba(255,255,255,.35);box-shadow:0 4px 14px var(--pri-glow)}
.wa-selw::after{content:"";position:absolute;right:13px;top:50%;width:7px;height:7px;margin-top:-6px;
  border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);pointer-events:none}
.wa-row .wa-selw select.wa-neg{background:transparent!important;background-image:none!important;border:0;box-shadow:none;color:#fff;
  min-width:104px;height:100%;min-height:50px;padding:0 34px 0 14px;border-radius:var(--r-s)}

/* ===== ringkasan & konfirmasi modern ===== */
.ck-box{background:transparent;border:0!important;padding:0;display:grid;gap:8px}
.ck-r,.cf-l>div{padding:12px 14px;border:0;border-radius:14px;
  background:color-mix(in srgb,var(--pri) 7%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pri) 12%,transparent)}
.ck-r:last-child,.cf-l>div:last-child{border-bottom:0}
.ck-k i{border-radius:10px;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff}
.ck-t,.cf-tot{background:linear-gradient(to right,var(--pri),var(--pri2))!important;box-shadow:0 8px 20px var(--pri-glow)!important}
.ck-t .ck-k,.ck-t b,.cf-tot dt,.cf-tot dd{color:#fff!important}
.ck-t .ck-k i{background:rgba(255,255,255,.2)}
.ck-t b{font-size:22px}
.cf-l{background:transparent;border:0;padding:0;display:grid;gap:8px}
.cf-l dt{font-weight:600}
.cf-l dd{font-weight:700}
.cf-tot dd{font-size:19px;font-weight:800}
.cf-ic{border-radius:50%;box-shadow:0 0 0 8px color-mix(in srgb,var(--pri) 12%,transparent),0 10px 24px var(--pri-glow)}
.cf-note{margin-top:14px;padding:9px 12px;border-radius:12px;justify-content:center;align-items:center;
  background:color-mix(in srgb,var(--warn) 12%,transparent)}
.cf-a .btn{border-radius:14px;min-height:50px;font-weight:800}
.cf-a .btn.ghost{background:transparent;border:1.5px solid var(--pri);color:var(--pri)}

/* ===== revisi: satu card, total polos, tombol ikut tema ===== */
.ck-box,.cf-l{display:block;background:color-mix(in srgb,var(--pri) 6%,var(--card));border-radius:16px;padding:2px 14px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pri) 14%,transparent)}
.ck-r,.cf-l>div{background:transparent;box-shadow:none;border-radius:0;padding:12px 0;border-bottom:1px dashed color-mix(in srgb,var(--pri) 25%,var(--line))}
.ck-r:last-child,.cf-l>div:last-child{border-bottom:0}
.ck-t,.cf-tot{background:transparent!important;box-shadow:none!important;padding:14px 0}
.ck-t .ck-k,.cf-tot dt{color:var(--ink)!important}
.ck-t b,.cf-tot dd{color:var(--pri)!important}
.ck-t .ck-k i{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff}
.btn.big,#btnBayar,#cfOk,#bstBeli{background:linear-gradient(to right,var(--pri),var(--pri2))!important;color:#fff!important;border:0;
  box-shadow:0 8px 20px var(--pri-glow)}
.btn.big:disabled,#btnBayar:disabled{opacity:.55;box-shadow:none}

/* ===== footer: gelombang animasi ===== */
.foot{border-radius:0!important;box-shadow:none!important;margin-top:46px;overflow:visible}
.foot-wave{position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:54px;pointer-events:none;overflow:hidden}
.foot-wave i{position:absolute;left:0;right:0;bottom:0;height:100%;display:block;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30C100 6 200 6 300 30S500 54 600 30V60H0Z'/%3E%3C/svg%3E") repeat-x 0 100%/360px 100%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30C100 6 200 6 300 30S500 54 600 30V60H0Z'/%3E%3C/svg%3E") repeat-x 0 100%/360px 100%}
.foot-wave i:nth-child(1){background:color-mix(in srgb,var(--pri) 22%,transparent);height:100%;animation:wv1 14s linear infinite}
.foot-wave i:nth-child(2){background:color-mix(in srgb,var(--pri2) 30%,transparent);height:80%;animation:wv2 10s linear infinite}
.foot-wave i:nth-child(3){background:var(--card);height:55%;animation:wv3 7s linear infinite}
@keyframes wv1{to{-webkit-mask-position:360px 100%;mask-position:360px 100%}}
@keyframes wv2{from{-webkit-mask-position:360px 100%;mask-position:360px 100%}to{-webkit-mask-position:0 100%;mask-position:0 100%}}
@keyframes wv3{to{-webkit-mask-position:-360px 100%;mask-position:-360px 100%}}
@media(prefers-reduced-motion:reduce){.foot-wave i{animation:none}}
/* tutup sambungan gelombang–footer: tepi bawah mask yang anti-alias membuat lapisan biru bocor jadi garis lurus 1px */
.foot-wave::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--card)}

/* ===== halaman Cek Pesanan: gaya sama seperti halaman pembelian ===== */
.stp2[hidden]{display:none!important}
.cek-st .cek-sub{margin:0 0 14px;color:var(--muted);font-size:13.5px;line-height:1.5}
.cek-st .cek-lb{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.cek-st .cek-in>i{color:var(--muted)}
.cek-st .cek-in .input{background:var(--card2);border:1.5px solid transparent;border-radius:var(--r-s);min-height:52px;font-size:15.5px;padding-left:42px}
.cek-st .cek-in .input:focus{outline:0;background:var(--card);border-color:var(--pri);box-shadow:0 0 0 4px var(--pri-l)}
.cek-st .cek-in:focus-within>i{color:var(--pri)}
.cek-st .cek-row .btn{min-height:52px;padding:0 20px;border-radius:var(--r-s);font-weight:800;border:0;color:#fff;
  background:linear-gradient(to right,var(--pri),var(--pri2));box-shadow:0 8px 20px var(--pri-glow)}
.cek-st .cek-hint{display:flex;gap:6px;align-items:flex-start;margin-top:12px;padding:10px 12px;font-size:13px;line-height:1.5;color:var(--ink);
  background:color-mix(in srgb,var(--pri) 8%,var(--card2));border-left:3px solid var(--pri);border-radius:var(--r-s)}
.cek-st .cek-hint i{color:var(--pri);margin-top:3px}
.cek-st .alert{margin-top:12px}
.cek-st .cek-clear{margin-left:auto;color:#fff;border-radius:50%}
.cek-st .cek-clear:hover{color:#fff;background:rgba(255,255,255,.32)}
.cek-st .rw{border:0;background:color-mix(in srgb,var(--pri) 7%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pri) 12%,transparent);border-radius:14px}
.cek-st .rw:hover{border:0;transform:none;background:color-mix(in srgb,var(--pri) 13%,var(--card))}
.cek-st .rw-i{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;border-radius:11px}
.cek-st .rw-t b{font-weight:800}

/* ===== Cek Pesanan: banner atas ===== */
.cek-top{position:relative;overflow:hidden;margin:0 0 22px;border-radius:22px;color:#fff;
  background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 10px 26px var(--pri-glow)}
.cek-top::after{content:"";position:absolute;width:190px;height:190px;right:-60px;bottom:-100px;border-radius:50%;background:rgba(255,255,255,.12);pointer-events:none}
.cek-top-in{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 16px 18px}
.cek-top-ic{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:24px;
  background:rgba(255,255,255,.2);border:1.5px solid rgba(255,255,255,.7);box-shadow:0 0 0 7px rgba(255,255,255,.1)}
.cek-top h1{margin:12px 0 12px;font-size:21px;font-weight:800;color:#fff;letter-spacing:-.01em}
.cek-chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.cek-chips span{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.45)}
.cek-hero{margin-bottom:22px}

/* ===== Daftar Harga: kartu pil + daftar modern ===== */
.pl-st .pl-search{margin-bottom:14px}
.pl-st .pl-search .input{background:var(--card2);border:1.5px solid transparent;box-shadow:none;min-height:52px;border-radius:var(--r-s)}
.pl-st .pl-search .input:focus{background:var(--card);border-color:var(--pri);box-shadow:0 0 0 4px var(--pri-l)}
.pl-st .pl-g{border:0;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pri) 12%,transparent);border-radius:16px;margin-bottom:10px;
  background:color-mix(in srgb,var(--pri) 6%,var(--card))}
.pl-st .pl-g[open]{box-shadow:inset 0 0 0 1.5px var(--pri),0 10px 24px var(--pri-glow)}
.pl-st .pl-g summary{padding:12px}
.pl-st .pl-gi{border:0;border-radius:14px;box-shadow:0 4px 12px rgba(15,23,42,.14)}
.pl-st .pl-gt b{font-weight:800}
.pl-st .pl-gt small em{font-weight:800}
.pl-st .pl-ch{background:var(--card);box-shadow:0 2px 6px rgba(15,23,42,.08)}
.pl-st .pl-g[open] .pl-ch{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff}
.pl-st .pl-gb{padding:0 12px 12px}
.pl-st .pl-slug{border:0;background:var(--card);border-radius:12px}
.pl-st .pl-open{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;color:#fff;
  background:linear-gradient(to right,var(--pri),var(--pri2))}
.pl-st .pl-r{border:0;background:var(--card);border-radius:12px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pri) 10%,transparent)}
.pl-st .pl-r:hover{background:color-mix(in srgb,var(--pri) 10%,var(--card));border:0}
.pl-st .pl-id{border:0;color:#fff;background:linear-gradient(135deg,var(--pri),var(--pri2));font-size:11.5px}
.pl-st .pl-h{background:linear-gradient(to right,var(--pri),var(--pri2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.pl-st .pl-r.pl-habis .pl-h{-webkit-text-fill-color:var(--muted);background:none}
.pl-st .empty{margin:8px 0 0}

/* ===== revisi: jarak Cek Pesanan = Daftar Harga; kolom cari = gaya pembelian ===== */
.cek{gap:0}
.cek-hero{margin-bottom:14px}
.pl-st .pl-search .input{background:color-mix(in srgb,var(--ink) 7%,var(--card));border:1.5px solid color-mix(in srgb,var(--ink) 20%,var(--card));box-shadow:none}
.pl-st .pl-search .input:hover{border-color:color-mix(in srgb,var(--pri) 45%,var(--line))}
.pl-st .pl-search .input:focus{background:var(--card);border-color:var(--pri);box-shadow:0 0 0 4px var(--pri-l)}

/* ===== tombol silang: merah ===== */
.bs-x{background:#ef4444;border:1.5px solid rgba(255,255,255,.85);color:#fff;box-shadow:0 4px 12px rgba(239,68,68,.45)}
.bs-x:active{transform:scale(.92)}
.srch-x{background:#ef4444!important;color:#fff!important;box-shadow:0 4px 12px rgba(239,68,68,.4)}
.srch-x svg,.srch-x i{color:#fff;stroke:#fff}

/* ===== Kalkulator: gaya sama seperti MLBB Stalker ===== */
.kl .tl-ket{margin:0 2px 14px}
.kl .kl-res{background:color-mix(in srgb,var(--pri) 7%,var(--card));border:0;border-radius:14px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pri) 14%,transparent)}
.kl .kl-res b{background:linear-gradient(to right,var(--pri),var(--pri2));-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.kl .kl-g div{background:var(--card);border:0;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pri) 12%,transparent)}
.kl .kl-num{min-height:52px;border-radius:var(--r-s)}
.kl .tl-go{margin-top:14px}
.srch-x::before,.srch-x::after{background:#fff!important}

/* ===== Bottom sheet (Generate / Jasa Mlbb / dll): modern ===== */
.bs-p{border:0;border-radius:30px 30px 0 0;padding:10px 16px calc(22px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,color-mix(in srgb,var(--pri) 9%,var(--card)) 0,var(--card) 140px)}
.bs-grip{width:48px;height:5px;margin:2px auto 14px;background:linear-gradient(to right,var(--pri),var(--pri2));opacity:.55}
.bs-hero{border-radius:22px;padding:16px;gap:14px;border:1px solid rgba(255,255,255,.35)}
.bs-hi{width:50px;height:50px;border-radius:50%;font-size:21px;border:1.5px solid rgba(255,255,255,.8);box-shadow:0 0 0 6px rgba(255,255,255,.12)}
.bs-ht b{font-size:19px;letter-spacing:-.01em}
.bs-s{margin:20px 2px 12px}
.bs-s span{padding:5px 12px;border-radius:999px;color:#fff;background:linear-gradient(to right,var(--pri),var(--pri2));box-shadow:0 4px 12px var(--pri-glow)}
.bs-s i{background:linear-gradient(90deg,color-mix(in srgb,var(--pri) 35%,transparent),transparent)}
.bs-c{border:0;border-radius:20px;padding:14px 13px 13px;
  background:color-mix(in srgb,var(--pri) 6%,var(--card));box-shadow:0 6px 18px color-mix(in srgb,var(--ink) 9%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--pri) 12%,transparent);
  animation:bsIn .35s cubic-bezier(.2,.8,.2,1) both}
.bs-c:nth-child(2){animation-delay:.04s}.bs-c:nth-child(3){animation-delay:.08s}.bs-c:nth-child(4){animation-delay:.12s}
@keyframes bsIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.bs-c:hover{box-shadow:0 10px 24px var(--pri-glow),inset 0 0 0 1px color-mix(in srgb,var(--pri) 30%,transparent)}
.bs-c.on{background:linear-gradient(color-mix(in srgb,var(--pri) 8%,var(--card)),color-mix(in srgb,var(--pri) 8%,var(--card))) padding-box,linear-gradient(135deg,var(--pri),var(--pri2)) border-box;
  border:2px solid transparent;box-shadow:0 10px 24px var(--pri-glow)}
.bs-c b{font-weight:800;font-size:14.5px}
.bs-c em{align-self:flex-start;margin-top:8px;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:800;color:#fff;
  background:linear-gradient(to right,var(--pri),var(--pri2))}
.bs-go{width:26px;height:26px;border-radius:50%;display:grid!important;place-items:center;font-size:11px;color:var(--pri);background:var(--card);box-shadow:0 2px 6px rgba(15,23,42,.12)}
.bs-c:hover .bs-go{color:#fff;background:linear-gradient(135deg,var(--pri),var(--pri2))}
.bs-ic{border-radius:14px}
.bs-l a{border:0;border-radius:18px;padding:12px;background:color-mix(in srgb,var(--pri) 6%,var(--card));
  box-shadow:0 4px 14px color-mix(in srgb,var(--ink) 8%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--pri) 12%,transparent)}
.bs-l a:hover,.bs-l a.on{background:color-mix(in srgb,var(--pri) 12%,var(--card));box-shadow:0 8px 20px var(--pri-glow),inset 0 0 0 1.5px var(--pri)}
.bs-l a .bs-t b{font-weight:800}
.bs-ic2{border:0;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;box-shadow:0 6px 14px var(--pri-glow)}
@media(prefers-reduced-motion:reduce){.bs-c{animation:none}}
.bs-s span{border-radius:8px;padding:6px 12px}
.bs-s i{height:2px;border-radius:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--pri) 60%,transparent),color-mix(in srgb,var(--pri) 12%,transparent))}

/* ===== Layanan (Mlbb Checker dll): kartu lebar + detail data yang dicek ===== */
.nominal.ly-list{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.ly-it{display:block;cursor:pointer}
.ly-it input{position:absolute;opacity:0;pointer-events:none}
.ly-c{position:relative;display:block;padding:14px 14px 12px;border-radius:16px;border:2px solid transparent;overflow:hidden;
  background:color-mix(in srgb,var(--pri) 6%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pri) 12%,transparent);transition:.15s}
.ly-it:hover .ly-c{background:color-mix(in srgb,var(--pri) 11%,var(--card))}
.ly-it input:checked + .ly-c{background:linear-gradient(color-mix(in srgb,var(--pri) 8%,var(--card)),color-mix(in srgb,var(--pri) 8%,var(--card))) padding-box,linear-gradient(135deg,var(--pri),var(--pri2)) border-box;
  box-shadow:0 10px 24px var(--pri-glow)}
.ly-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-right:30px}
.ly-nm{display:flex;flex-direction:column;gap:2px;min-width:0}
.ly-nm b{font-size:15.5px;font-weight:800;line-height:1.3;color:var(--ink)}
.ly-nm small{font-size:12.5px;color:var(--muted);line-height:1.4}
.ly-hg{flex:none;padding:5px 12px;border-radius:999px;font-size:13px;font-weight:800;color:#fff;white-space:nowrap;
  background:linear-gradient(to right,var(--pri),var(--pri2));box-shadow:0 4px 12px var(--pri-glow)}
.ly-dt{display:block;margin-top:12px;padding-top:10px;border-top:1px dashed color-mix(in srgb,var(--pri) 28%,var(--line))}
.ly-dt em{display:block;font-style:normal;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.ly-ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:7px}
@media(min-width:520px){.ly-ul{grid-template-columns:1fr 1fr}}
.ly-ul li{display:flex;align-items:flex-start;gap:8px;font-size:12.8px;line-height:1.4;color:var(--ink)}
.ly-ul li i{flex:none;margin-top:2px;font-size:13px;color:#16a34a}
.ly-ck{position:absolute;top:0;right:0;width:30px;height:30px;display:none;place-items:center;border-radius:0 14px 0 12px;color:#fff;font-size:14px;
  background:linear-gradient(to right,var(--pri),var(--pri2))}
.ly-it input:checked + .ly-c .ly-ck{display:grid}
.ly-it.ly-habis{opacity:.5;cursor:not-allowed}

/* ===== revisi kartu layanan: harga di pojok + tombol Pilih ===== */
.ly-top{padding-right:92px;min-height:34px}
.ly-hg{position:absolute;top:0;right:0;border-radius:0 14px 0 14px;padding:7px 14px;font-size:13px;box-shadow:none}
.ly-pick{display:block;margin-top:14px}
.ly-pick>span{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:12px;font-weight:800;font-size:14px}
.ly-p0{color:var(--pri);background:var(--card);box-shadow:inset 0 0 0 1.5px var(--pri)}
.ly-p1{display:none!important;color:#fff;background:linear-gradient(to right,var(--pri),var(--pri2));box-shadow:0 8px 18px var(--pri-glow)}
.ly-it input:checked + .ly-c .ly-p0{display:none}
.ly-it input:checked + .ly-c .ly-p1{display:flex!important}
.ly-it.ly-habis .ly-pick{display:none}
.ly-ck{display:none!important}
/* form data akun: kolom tunggal penuh bila server disembunyikan */
#lyAkun .pnl-row2:has(#lySrvBox[hidden]){grid-template-columns:minmax(0,1fr)}
#lyAkun #lySrvBox[hidden]{display:none}
.ly-p0{color:#fff;background:linear-gradient(to right,var(--pri),var(--pri2));box-shadow:0 6px 14px var(--pri-glow)}
.ly-it:not(:has(input:checked)) .ly-p0{opacity:.92}
#lyAkun.kunci .fi{opacity:.55}
#lyAkun.kunci .input{cursor:not-allowed}

/* ===== kunci data akun + alert modern ===== */
#lyAkun{position:relative}
.ly-lock{display:none;position:absolute;left:0;right:0;bottom:0;top:62px;z-index:4;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
#lyAkun.belum .ly-lock{display:block}
.stp2.ly-kedip{animation:lyKedip 1.1s ease-out 1}
@keyframes lyKedip{0%,100%{box-shadow:0 10px 28px color-mix(in srgb,var(--ink) 16%,transparent)}35%{box-shadow:0 0 0 4px var(--pri-l),0 14px 34px var(--pri-glow)}}
.ly-alert{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(8,12,28,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:lyAf .2s ease-out}
.ly-alert.out{opacity:0;transition:opacity .2s}
@keyframes lyAf{from{opacity:0}to{opacity:1}}
.ly-alert-b{width:100%;max-width:330px;padding:26px 22px 20px;text-align:center;background:var(--card);color:var(--ink);border-radius:26px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);animation:lyAp .35s cubic-bezier(.2,1.2,.3,1)}
@keyframes lyAp{from{transform:scale(.8) translateY(14px);opacity:0}to{transform:none;opacity:1}}
.ly-alert-i{width:68px;height:68px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;font-size:28px;color:#fff;
  background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 0 0 8px color-mix(in srgb,var(--pri) 14%,transparent),0 10px 24px var(--pri-glow);animation:lyAn .7s .15s ease-in-out}
@keyframes lyAn{0%,100%{transform:translateY(0)}30%{transform:translateY(-8px)}60%{transform:translateY(0)}80%{transform:translateY(-3px)}}
.ly-alert-b b{display:block;font-size:19px;font-weight:800;margin-bottom:6px}
.ly-alert-b p{margin:0 0 18px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.ly-alert-ok{width:100%;min-height:46px;border:0;border-radius:14px;font:inherit;font-weight:800;font-size:14.5px;color:#fff;cursor:pointer;
  background:linear-gradient(to right,var(--pri),var(--pri2));box-shadow:0 8px 20px var(--pri-glow)}

/* ===== alert: notifikasi di atas (bukan popup) ===== */
.ly-alert{inset:auto;top:calc(76px + env(safe-area-inset-top));left:0;right:0;display:flex;justify-content:center;padding:0 14px;
  background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none;animation:none}
.ly-alert.out{opacity:0;transform:translateY(-14px);transition:opacity .22s,transform .22s}
.ly-alert-b{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;width:100%;max-width:420px;padding:12px 14px;text-align:left;
  border-radius:18px;pointer-events:auto;background:var(--card);
  box-shadow:0 14px 34px rgba(8,12,28,.28),inset 0 0 0 1px color-mix(in srgb,var(--pri) 18%,transparent);animation:lyTin .38s cubic-bezier(.2,1.1,.3,1)}
@keyframes lyTin{from{transform:translateY(-26px);opacity:0}to{transform:none;opacity:1}}
.ly-alert-i{width:42px;height:42px;margin:0;flex:none;font-size:18px;box-shadow:0 6px 14px var(--pri-glow);animation:none}
.ly-alert-t{display:flex;flex-direction:column;min-width:0}
.ly-alert-t b{display:block;margin:0;font-size:14.5px;font-weight:800;color:var(--ink)}
.ly-alert-t small{font-size:12.5px;color:var(--muted);line-height:1.4}
.ly-alert-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:linear-gradient(to right,var(--pri),var(--pri2));transform-origin:left;animation:lyBar 2.8s linear forwards}
@keyframes lyBar{to{transform:scaleX(0)}}

/* ===== alert: pil ringkas, tidak full ===== */
.ly-alert{padding:0 12px}
.ly-alert-b{width:auto;max-width:min(92vw,360px);gap:10px;padding:7px 18px 7px 7px;border-radius:999px;overflow:visible;
  background:rgba(15,23,42,.9);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 14px 34px rgba(8,12,28,.35),0 0 0 1px rgba(255,255,255,.12)}
.ly-alert-i{width:36px;height:36px;font-size:15px;box-shadow:0 0 0 4px rgba(255,255,255,.1)}
.ly-alert-t b{font-size:13.5px;color:#fff;line-height:1.25}
.ly-alert-t small{font-size:11.5px;color:rgba(255,255,255,.72);line-height:1.3}
.ly-alert-bar{display:none}

/* ===== alert: pojok kanan, kotak, warna tema, ada tombol X ===== */
.ly-alert{justify-content:flex-end;padding:0 12px}
.ly-alert.out{transform:translateX(18px)}
.ly-alert-b{width:auto;max-width:min(88vw,340px);gap:10px;padding:10px 10px 10px 10px;border-radius:12px;
  background:linear-gradient(135deg,var(--pri),var(--pri2));backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 14px 30px var(--pri-glow),0 0 0 1px rgba(255,255,255,.3);animation:lyTr .35s cubic-bezier(.2,1.1,.3,1)}
@keyframes lyTr{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.ly-alert-i{width:34px;height:34px;border-radius:9px;font-size:15px;background:rgba(255,255,255,.2);box-shadow:none;border:1px solid rgba(255,255,255,.55)}
.ly-alert-t b{color:#fff}
.ly-alert-t small{color:rgba(255,255,255,.88)}
.ly-alert-x{flex:none;margin-left:2px;width:28px;height:28px;border-radius:8px;border:0;display:grid;place-items:center;cursor:pointer;
  font-size:13px;color:#fff;background:rgba(255,255,255,.2)}
.ly-alert-x:active{background:rgba(255,255,255,.35)}
.ly-alert-x{background:#ef4444;box-shadow:0 3px 8px rgba(239,68,68,.45)}
.ly-alert-x:active{background:#dc2626}
.ly-alert-b{border:2px solid #fff;box-shadow:0 14px 30px var(--pri-glow)}
.ly-alert-b{overflow:hidden}
.ly-alert-bar{display:block;left:0;bottom:0;height:4px;background:#fff;opacity:.95;border-radius:0 2px 2px 0}

/* ===== isi input: tebal di semua form ===== */
.input,input.input,select.input,textarea.input,.fi .input,.cek-in .input,.wa-row .input,.kl-num,.kl-skin .input,.pl-search .input,#plCari{
  font-weight:700;font-family:"Plus Jakarta Sans","Inter",system-ui,sans-serif}
.input::placeholder{font-weight:500}
.wa-row select.wa-neg{font-weight:800}

/* Lisensi DK: pilih brand */
.br-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:4px 14px 14px}
.br-it{display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.br-it input{position:absolute;opacity:0;pointer-events:none}
.br-c{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px 14px;text-align:center;border-radius:14px;background:var(--card2,rgba(255,255,255,.05));border:1.5px solid rgba(255,255,255,.1);transition:.2s}
.br-c b{font-weight:800;font-size:15px;color:var(--ink,#fff)}
.br-c small{font-size:12px;color:var(--muted,#9aa)}
.br-lg{position:relative;width:76px;height:76px;border-radius:16px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;font-size:28px}
.br-lg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#111;z-index:1}
.br-ck{position:absolute;top:8px;right:8px;color:#fff;font-size:18px;opacity:0;transform:scale(.6);transition:.2s;filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}
.br-it input:checked+.br-c{border-color:transparent;background:linear-gradient(var(--card,#16181f),var(--card,#16181f)) padding-box,linear-gradient(135deg,var(--pri),var(--pri2)) border-box;box-shadow:0 6px 20px var(--pri-glow,rgba(0,0,0,.3))}
.br-it input:checked+.br-c .br-ck{opacity:1;transform:none;color:var(--pri)}
#lyDur{position:relative}
#lyDur.belum .ly-lock{display:block}
#lyDur.belum .ly-list{opacity:.5}
#lyDur.belum .ly-list::before{content:"Pilih brand terlebih dahulu";display:block;padding:18px 14px;text-align:center;font-size:13px;font-weight:600;color:var(--muted,#9aa)}
.ly-it[hidden]{display:none!important}

/* Lisensi DK: daftar durasi 2 kolom (kartu memakai gaya kartu game) */
#lyDur.dkd .nominal.ly-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#lyDur.dkd .nom-lg{border-radius:8px;object-fit:cover}
#lyDur.belum .ly-list{display:block;opacity:1}
#lyDur.belum .ly-list::before{content:"\f023\00a0\00a0Pilih brand terlebih dahulu";font-family:inherit;display:flex;align-items:center;justify-content:center;text-align:center;min-height:96px;margin:2px 0 4px;padding:18px 16px;
  border-radius:16px;font-size:14px;font-weight:700;color:var(--pri);
  background:linear-gradient(135deg,color-mix(in srgb,var(--pri) 12%,var(--card)),color-mix(in srgb,var(--pri2) 6%,var(--card)));
  border:1.5px dashed color-mix(in srgb,var(--pri) 45%,transparent);box-shadow:0 8px 20px color-mix(in srgb,var(--pri) 10%,transparent)}
/* brand: kartu modern berlatar gradasi + glow logo */
.br-c{padding:18px 10px 16px;border:1.5px solid color-mix(in srgb,var(--pri) 16%,transparent);border-radius:18px;overflow:hidden;
  background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--pri) 24%,transparent),transparent 62%),linear-gradient(160deg,color-mix(in srgb,var(--pri) 12%,var(--card)),color-mix(in srgb,var(--pri2) 5%,var(--card)));
  box-shadow:0 10px 24px color-mix(in srgb,var(--pri) 14%,transparent),inset 0 1px 0 rgba(255,255,255,.5)}
.br-lg{width:80px;height:80px;border-radius:20px;box-shadow:0 0 0 3px #fff,0 10px 22px var(--pri-glow)}
.br-it:active .br-c{transform:scale(.98)}
.br-it input:checked+.br-c{background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--pri) 30%,transparent),transparent 62%) padding-box,linear-gradient(160deg,color-mix(in srgb,var(--pri) 14%,var(--card)),var(--card)) padding-box,linear-gradient(135deg,var(--pri),var(--pri2)) border-box;
  box-shadow:0 12px 28px var(--pri-glow)}

/* Panel Bot: kartu paket rapi + form tersusun 1 kolom (2 baris) */
.pnl-paket .nom-b{padding:14px 14px 12px;gap:8px;min-height:0}
.pnl-paket .nom-n{font-size:14.5px;font-weight:800;padding-right:30px}
.pnl-paket .pnl-spek{gap:5px;font-size:12.5px;color:var(--ink);padding-top:8px;border-top:1px dashed color-mix(in srgb,var(--ink) 18%,transparent)}
.pnl-paket .pnl-spek span{display:flex;align-items:center;white-space:nowrap;-webkit-line-clamp:unset}
.pnl-paket .nom-h{margin-top:2px;font-size:16px;text-align:left}
.pnl-paket .nom-ck{top:0!important;bottom:auto!important;right:0!important;border-radius:0 0 0 10px;padding:3px 9px;font-size:13px}
.pnl-row2.pnl-stack{grid-template-columns:minmax(0,1fr)!important}
.pnl-row2.pnl-stack .ket,.pnl-row2.pnl-stack small{overflow-wrap:anywhere}

/* Panel Bot: rapikan kartu resource + durasi bergaya kartu layanan */
.pnl-paket .nom-b{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:10px;padding:14px;border-radius:12px;border:2px solid transparent}
.pnl-paket .nom-n{padding-right:26px;font-size:15px}
.pnl-paket .pnl-spek{align-self:stretch;width:100%;margin:0;padding:10px 0 0;gap:7px}
.pnl-paket .pnl-spek i{width:16px;font-size:13px}
.pnl-paket .nom-h{align-self:stretch;margin-top:auto;padding:9px 0 0;border-top:1px dashed color-mix(in srgb,var(--ink) 18%,transparent);text-align:left;font-size:17px}
.pnl-paket .nom-n+.pnl-spek{border-top:1px dashed color-mix(in srgb,var(--ink) 18%,transparent)}
.pnl-paket .nom input:checked + .nom-b{background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,var(--pri),var(--pri2)) border-box}
.pnl-d span{background:color-mix(in srgb,var(--ink) 7%,var(--card));border:2px solid transparent;border-radius:12px;min-height:60px}
.pnl-d:hover span{background:color-mix(in srgb,var(--pri) 10%,var(--card2));border-color:transparent}
.pnl-d input:checked + span,.pnl-d:hover input:checked + span{color:var(--ink);box-shadow:none;border-color:transparent;
  background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,var(--pri),var(--pri2)) border-box}
.pnl-d input:checked + span b{color:var(--pri)}
.pnl-d input:checked + span small{color:var(--muted)}

/* Panel Bot: teks lebih kecil, centang di bawah, durasi aktif penuh gradasi */
.pnl-paket .nom-b{gap:8px;padding:12px}
.pnl-paket .nom-n{font-size:13.5px}
.pnl-paket .pnl-spek{font-size:11.5px;gap:5px;padding-top:8px}
.pnl-paket .pnl-spek i{width:14px;font-size:11.5px}
.pnl-paket .nom-h{font-size:14.5px;padding-top:8px}
.pnl-paket .nom-ck{top:auto!important;bottom:0!important;right:0!important;border-radius:10px 0 12px 0;padding:4px 11px;font-size:13px}
.pnl-d input:checked + span,.pnl-d:hover input:checked + span{color:#fff;border-color:transparent;
  background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 8px 18px var(--pri-glow)}
.pnl-d input:checked + span b{color:#fff}
.pnl-d input:checked + span small{color:rgba(255,255,255,.85)}

/* Booster / Alight Motion / Netflix: kartu pelengkap & durasi akses rapi */
.bst-buy{padding:16px 14px 14px}
.bst-hd{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.bst-hd i{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;color:#fff;font-size:15px;background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 6px 14px var(--pri-glow)}
.bst-hd b{font-size:16px;font-weight:800}
.bst-list{margin:0;gap:10px}
.bst-list li{align-items:center;gap:10px;padding:10px;border:2px solid transparent;border-radius:12px;font-size:12.5px;font-weight:700;line-height:1.3;
  background:color-mix(in srgb,var(--ink) 7%,var(--card))}
.bst-list li i{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:8px;font-size:12.5px;color:var(--pri);background:var(--card);box-shadow:0 1px 3px color-mix(in srgb,var(--ink) 16%,transparent)}
.bst-info{display:flex;align-items:flex-start;gap:10px;margin:12px 0 0;padding:11px 12px;border-radius:12px;font-size:12.5px;line-height:1.5;color:var(--ink);
  background:linear-gradient(135deg,color-mix(in srgb,var(--pri) 12%,var(--card)),color-mix(in srgb,var(--pri2) 6%,var(--card)));border-left:3px solid var(--pri)}
.bst-info i{flex:none;margin:2px 0 0;font-size:15px;color:var(--pri)}
.bst-info span{min-width:0}
.bst-d>span{gap:6px;padding:13px 13px 12px;border:2px solid transparent;border-radius:12px;background:color-mix(in srgb,var(--ink) 7%,var(--card))}
.bst-d:hover>span{background:color-mix(in srgb,var(--pri) 10%,var(--card2))}
.bst-d b{font-size:20px;font-weight:800}
.bst-d b small{font-size:12px}
.bst-d>span>i{font-size:14.5px}
.bst-d .bst-ck{top:0;right:0;width:auto;height:auto;padding:3px 9px;border-radius:0 0 0 10px;font-size:12px;background:transparent;color:transparent}
.bst-d input:checked+span,.bst-d:hover input:checked+span{border-color:transparent;box-shadow:none;
  background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,var(--pri),var(--pri2)) border-box}
.bst-d input:checked+span .bst-ck{background:linear-gradient(to right,var(--pri),var(--pri2));color:#fff}

/* ===== Layar verifikasi modern ===== */
.vf{background:radial-gradient(circle at 18% 12%,color-mix(in srgb,var(--pri) 22%,transparent),transparent 46%),radial-gradient(circle at 85% 88%,color-mix(in srgb,var(--pri2) 20%,transparent),transparent 46%),var(--bg)}
.vf::before,.vf::after{content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(46px);opacity:.5;animation:vfMel 7s ease-in-out infinite alternate}
.vf::before{width:220px;height:220px;left:-60px;top:18%;background:var(--pri)}
.vf::after{width:200px;height:200px;right:-60px;bottom:14%;background:var(--pri2);animation-delay:-3s}
@keyframes vfMel{to{transform:translate(30px,-26px) scale(1.15)}}
.vf-in{position:relative;z-index:1;width:100%;max-width:340px;padding:34px 24px 26px;gap:18px;border-radius:26px;
  background:color-mix(in srgb,var(--card) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid color-mix(in srgb,var(--pri) 18%,transparent);box-shadow:0 24px 60px color-mix(in srgb,var(--pri) 24%,transparent)}
.vf-logo{box-sizing:content-box;width:46px;height:46px;padding:20px;border-radius:50%;color:#fff;
  background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 0 0 8px color-mix(in srgb,var(--pri) 14%,transparent),0 0 0 16px color-mix(in srgb,var(--pri) 7%,transparent),0 14px 30px var(--pri-glow)}
.vf-t{font-family:"Plus Jakarta Sans","Inter",system-ui,sans-serif;font-size:17px;font-weight:800;line-height:1.4;color:var(--ink);margin-top:6px}
.vf-bar{width:100%;max-width:220px;height:6px;background:color-mix(in srgb,var(--pri) 16%,transparent)}
.vf-s{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;font-size:12px;font-weight:600;color:var(--muted);
  background:color-mix(in srgb,var(--ink) 6%,var(--card))}
.vf-s i{color:var(--pri)}
@media(prefers-reduced-motion:reduce){.vf::before,.vf::after{animation:none}}

/* centang kartu: ukuran sama dengan pembelian game; di bawah (booster/panel), lisensi mengikuti ukuran */
.bst-d .bst-ck,.pnl-paket .nom-ck{padding:5px 12px;font-size:17px;top:auto!important;bottom:0!important;right:0!important;border-radius:12px 0 10px 0}
.bst-d .bst-ck{position:absolute}
.bst-d>span{padding-bottom:12px}
#lyDur.dkd .nb2 .nom-ck{padding:5px 12px;font-size:17px}
.vf-id{margin:2px 0 0;font-size:10.5px;letter-spacing:.02em;color:var(--muted);opacity:.85}
.vf-id span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700}
.vf-id{position:absolute;left:0;right:0;bottom:calc(22px + env(safe-area-inset-bottom,0px));margin:0;text-align:center;z-index:1}
.vf-logo{animation:none;overflow:visible}
.vf-logo path{stroke-dasharray:140;stroke-dashoffset:140;animation:vfDraw 2.2s ease-in-out infinite}
.vf-logo path+path{stroke-dasharray:40;stroke-dashoffset:40;animation-delay:.5s}
@keyframes vfDraw{0%{stroke-dashoffset:140}55%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-140}}
.vf-logo path+path{animation-name:vfDraw2}
@keyframes vfDraw2{0%,20%{stroke-dashoffset:40}55%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-40}}

/* VPN: grid logo aplikasi (mengikuti web utama) + masa aktif 2 kolom */
.vp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:2px 0 4px}
.vp-it{display:block;cursor:pointer;min-width:0;-webkit-tap-highlight-color:transparent}
.vp-it input{position:absolute;opacity:0;pointer-events:none}
.vp-c{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:12px;border:2px solid transparent;background:color-mix(in srgb,var(--ink) 7%,var(--card));transition:.15s}
.vp-lg{position:relative;display:block;aspect-ratio:1/1;background:linear-gradient(135deg,var(--pri),var(--pri2))}
.vp-lg b{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:22px;font-weight:800}
.vp-lg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;background:#fff}
.vp-nm{display:block;padding:5px 3px 6px;text-align:center;font-size:9.5px;font-weight:800;letter-spacing:.02em;line-height:1.2;text-transform:uppercase;color:var(--ink);
  background:color-mix(in srgb,var(--pri) 12%,var(--card));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-ck{position:absolute;top:0;right:0;z-index:2;display:none;padding:2px 6px;font-size:11px;color:#fff;border-radius:0 0 0 8px;background:linear-gradient(to right,var(--pri),var(--pri2))}
.vp-it:hover .vp-c{border-color:color-mix(in srgb,var(--pri) 40%,transparent)}
.vp-it input:checked+.vp-c{border-color:transparent;box-shadow:0 8px 18px var(--pri-glow);
  background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,var(--pri),var(--pri2)) border-box}
.vp-it input:checked+.vp-c .vp-ck{display:block}
#lyDur.vpd .nominal.ly-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

/* VPN: badge nama mengikuti tema, chip stok & login sama besar, stiker HABIS */
.vp-nm{color:#fff;background:linear-gradient(to right,var(--pri),var(--pri2));font-size:9.5px;padding:6px 3px 7px;text-shadow:0 1px 2px rgba(0,0,0,.25)}
#lyDur.vpd .nom-ft{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 10px}
#lyDur.vpd .nom-ft .nom-ins{width:100%;min-width:0;justify-content:flex-start;box-sizing:border-box;min-height:34px}
#lyDur.vpd .nom-ft .nom-ins:only-child{grid-column:1/-1}
#lyDur.vpd .nom-ins-t small{font-size:8px}
#lyDur.vpd .nom-ins-t b{font-size:10px}
#lyDur.vpd .ly-it.ly-habis{opacity:1;position:relative}
#lyDur.vpd .ly-it.ly-habis .nom-b{opacity:.55;filter:grayscale(.6)}
.vp-habis{position:absolute;z-index:5;left:50%;top:42%;width:78px;height:78px;margin:-39px 0 0 -39px;display:grid;place-items:center;border-radius:50%;
  transform:rotate(-14deg);color:#fff;pointer-events:none;
  background:radial-gradient(circle at 32% 28%,#ff6b6b,#dc2626 62%,#b91c1c);
  border:3px dashed rgba(255,255,255,.85);outline:3px solid #dc2626;box-shadow:0 8px 18px rgba(220,38,38,.45)}
.vp-habis b{font-size:15px;font-weight:900;letter-spacing:.06em}

/* VPN: stiker lebih kecil, logo terpisah jelas dari latar */
.vp-habis{width:54px;height:54px;margin:-27px 0 0 -27px;border-width:2px;outline-width:2px;box-shadow:0 5px 12px rgba(220,38,38,.4)}
.vp-habis b{font-size:11px;letter-spacing:.04em}
#lyDur.vpd .nom-ins-t small{white-space:nowrap}
.vp-c{border:2px solid color-mix(in srgb,var(--pri) 38%,var(--card));box-shadow:0 4px 12px color-mix(in srgb,var(--ink) 22%,transparent);background:color-mix(in srgb,var(--ink) 14%,var(--card))}
.vp-lg::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 18%,transparent)}
.vp-it:hover .vp-c{border-color:var(--pri)}
.vp-it input:checked+.vp-c{box-shadow:0 8px 20px var(--pri-glow)}

/* ===== Konten beranda ===== */
.hm-c{margin:26px 0 8px}
.hm-h{text-align:center;margin-bottom:16px}
.hm-k{display:inline-block;padding:5px 14px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.04em;color:#fff;background:linear-gradient(to right,var(--pri),var(--pri2));box-shadow:0 6px 14px var(--pri-glow)}
.hm-h h2{margin:10px 0 0;font-size:20px;line-height:1.3;font-weight:800}
.hm-why{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hm-w{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px 14px 14px;border-radius:16px;overflow:hidden;
  background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--pri) 18%,transparent),transparent 60%),color-mix(in srgb,var(--ink) 6%,var(--card));
  border:1px solid color-mix(in srgb,var(--pri) 14%,transparent);box-shadow:0 6px 16px color-mix(in srgb,var(--ink) 10%,transparent)}
.hm-w i{width:40px;height:40px;display:grid;place-items:center;margin-bottom:8px;border-radius:12px;color:#fff;font-size:17px;background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 8px 16px var(--pri-glow)}
.hm-w b{font-size:14px;font-weight:800}
.hm-w small{font-size:12px;line-height:1.45;color:var(--muted)}
.hm-st{margin-top:14px;padding:16px;border-radius:18px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh)}
.hm-sh{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:16px}
.hm-sh i{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;color:#fff;background:linear-gradient(135deg,var(--pri),var(--pri2))}
.hm-st ol{list-style:none;margin:0;padding:0;position:relative}
.hm-st li{position:relative;display:flex;gap:12px;padding-bottom:14px}
.hm-st li:last-child{padding-bottom:0}
.hm-st li:not(:last-child)::before{content:"";position:absolute;left:15px;top:32px;bottom:2px;width:2px;background:linear-gradient(var(--pri),color-mix(in srgb,var(--pri) 15%,transparent));border-radius:2px}
.hm-st li>span{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;font-weight:800;font-size:14px;color:#fff;background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 4px 10px var(--pri-glow)}
.hm-st li b{display:block;font-size:14px;font-weight:800;margin-top:2px}
.hm-st li small{display:block;font-size:12.5px;color:var(--muted);line-height:1.45}

/* ===== Pertanyaan umum (semua halaman) ===== */
.faq{margin:22px 0 6px;padding:18px 14px 12px;border-radius:calc(var(--r) + 2px);background:var(--card);border:1px solid var(--line);box-shadow:var(--sh)}
.faq-h{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.faq-ic{flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:12px;color:#fff;font-size:17px;background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 6px 14px var(--pri-glow)}
.faq-h h2{margin:0;font-size:17px;font-weight:800;line-height:1.25}
.faq-h small{color:var(--muted);font-size:12px}
.faq-l{display:flex;flex-direction:column;gap:8px}
.faq-i{border-radius:12px;border:2px solid transparent;background:color-mix(in srgb,var(--ink) 6%,var(--card));transition:.15s}
.faq-i[open]{background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,var(--pri),var(--pri2)) border-box;box-shadow:0 6px 16px var(--pri-glow)}
.faq-i summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 12px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.faq-i summary::-webkit-details-marker{display:none}
.faq-q{font-size:13.5px;font-weight:700;line-height:1.4}
.faq-c{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;font-size:11px;color:var(--pri);background:var(--card);box-shadow:0 1px 3px color-mix(in srgb,var(--ink) 18%,transparent);transition:transform .2s}
.faq-i[open] .faq-c{transform:rotate(180deg);color:#fff;background:linear-gradient(135deg,var(--pri),var(--pri2))}
.faq-a{padding:0 12px 13px;font-size:13px;line-height:1.6;color:var(--muted)}

/* ===== Revisi: jarak beranda lebih lega ===== */
.hm-c{margin:46px 0 14px}
.hm-h{margin-bottom:22px}
.hm-h h2{margin-top:14px;font-size:21px}
.hm-why{gap:16px}
.hm-w{padding:18px 16px 16px;gap:6px;border-radius:18px}
.hm-st{margin-top:26px;padding:20px 18px;border-radius:20px}
.hm-sh{margin-bottom:18px}
.hm-st li{gap:14px;padding-bottom:20px}
.hm-st li:not(:last-child)::before{left:15px;top:36px;bottom:4px}

/* ===== FAQ ala web utama: judul pill + daftar bernomor ===== */
.faq{margin:44px 0 10px;padding:0;background:none;border:0;box-shadow:none}
.faq-h{position:relative;display:flex;align-items:center;gap:14px;margin:0 0 -22px;padding:14px 16px 36px 14px;border-radius:20px;color:#fff;
  background:linear-gradient(to right,var(--pri),var(--pri2));box-shadow:0 10px 24px var(--pri-glow);z-index:1}
.faq-ic{flex:none;width:48px;height:48px;display:grid;place-items:center;border-radius:14px;font-size:20px;color:#fff;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.7);box-shadow:none}
.faq-h h2{margin:0;font-size:19px;font-weight:800;letter-spacing:.04em;color:#fff}
.faq-h small{display:block;margin-top:2px;font-size:12.5px;color:rgba(255,255,255,.9)}
.faq-l{position:relative;z-index:2;display:flex;flex-direction:column;gap:12px;padding:16px 14px 18px;border-radius:22px;
  background:var(--card);border:1px solid var(--line);box-shadow:0 14px 32px color-mix(in srgb,var(--ink) 14%,transparent)}
.faq-i{border:1.5px solid color-mix(in srgb,var(--pri) 22%,transparent);border-radius:16px;
  background:color-mix(in srgb,var(--pri) 7%,var(--card));box-shadow:none}
.faq-i[open]{border-color:transparent;background:linear-gradient(color-mix(in srgb,var(--pri) 8%,var(--card)),color-mix(in srgb,var(--pri) 8%,var(--card))) padding-box,linear-gradient(135deg,var(--pri),var(--pri2)) border-box;box-shadow:0 8px 20px var(--pri-glow)}
.faq-i summary{gap:12px;padding:14px 14px}
.faq-n{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;font-size:14px;font-weight:800;color:var(--pri);
  border:2px solid color-mix(in srgb,var(--pri) 45%,transparent);background:var(--card)}
.faq-i[open] .faq-n{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--pri),var(--pri2))}
.faq-q{flex:1;min-width:0;font-size:14px;font-weight:800;line-height:1.4}
.faq-c{flex:none;width:22px;height:22px;position:relative;background:none;box-shadow:none;transform:none!important}
.faq-c::before,.faq-c::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2.5px;margin:-1.25px 0 0 -7px;border-radius:2px;background:var(--pri);transition:.2s}
.faq-c::after{transform:rotate(90deg)}
.faq-i[open] .faq-c::after{transform:rotate(0);opacity:0}
.faq-a{padding:0 16px 16px 60px;font-size:13px;line-height:1.65;color:var(--muted)}

/* ===== Popup pengumuman ala web utama ===== */
.pop{background:rgba(6,10,26,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:26px;animation:popF .25s ease-out}
.pop-box{max-width:min(88vw,400px);animation:popZ .35s cubic-bezier(.2,.9,.3,1.2)}
.pop-box img{border-radius:22px;border:3px solid rgba(255,255,255,.9);box-shadow:0 0 0 1px color-mix(in srgb,var(--pri) 40%,transparent),0 22px 60px rgba(0,0,0,.6),0 0 40px var(--pri-glow)}
.pop-x{top:-14px;right:-14px;width:36px;height:36px;font-size:22px;color:#111;background:#fff;border:2px solid rgba(255,255,255,.9);box-shadow:0 6px 16px rgba(0,0,0,.45);transition:transform .15s}
.pop-x:active{transform:scale(.9)}
@keyframes popF{from{opacity:0}to{opacity:1}}
@keyframes popZ{from{opacity:0;transform:scale(.88) translateY(14px)}to{opacity:1;transform:none}}

/* ===== FAQ persis web utama: pill judul terpisah + logo, daftar di card sendiri ===== */
.faq{margin:40px 0 10px}
.faq-top{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:12px;padding-right:4px}
.faq-h{flex:1;min-width:0;margin:0;padding:12px 14px;border-radius:20px;box-shadow:0 10px 22px var(--pri-glow);z-index:auto}
.faq-ic{width:46px;height:46px;border-radius:14px}
.faq-lg{flex:none;position:relative;width:84px;height:84px;margin:-26px 0 -6px;display:grid;place-items:center;border-radius:22px;overflow:hidden;
  background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 12px 24px var(--pri-glow),0 0 0 3px #fff}
.faq-lg b{font-size:34px;font-weight:900;color:#fff;line-height:1}
.faq-lg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--card);z-index:1;padding:6px}
.faq-l{position:relative;gap:14px;padding:14px 12px 16px;border-radius:24px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--pri) 10%,var(--card)),var(--card));
  border:1.5px solid color-mix(in srgb,var(--pri) 25%,transparent);box-shadow:0 14px 32px color-mix(in srgb,var(--ink) 14%,transparent)}
.faq-bar{position:relative;display:block;height:30px;border-radius:999px;background:linear-gradient(to right,var(--pri),var(--pri2));
  border:2px solid color-mix(in srgb,#fff 55%,transparent);box-shadow:0 6px 14px var(--pri-glow)}
.faq-bar i{position:absolute;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:color-mix(in srgb,var(--ink) 60%,var(--pri));border:2px solid rgba(255,255,255,.55)}
.faq-bar i:first-child{left:10px}.faq-bar i:last-child{right:10px}
.faq-bar-b{height:8px;border:0;background:linear-gradient(to right,transparent,var(--pri),var(--pri2),transparent);box-shadow:none;margin:2px 36px 0;overflow:visible}
.faq-bar-b i{width:12px;height:12px;margin-top:-6px}
.faq-bar-b i:first-child{left:38%}.faq-bar-b i:last-child{right:38%}
.faq-i{border-radius:18px;border:2px solid color-mix(in srgb,var(--pri) 55%,transparent);background:color-mix(in srgb,var(--ink) 6%,var(--card));box-shadow:0 4px 10px color-mix(in srgb,var(--ink) 12%,transparent)}
.faq-i[open]{background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,var(--pri),var(--pri2)) border-box;border-color:transparent;box-shadow:0 8px 20px var(--pri-glow)}
.faq-i summary{padding:14px 14px}
.faq-n{width:36px;height:36px;border:2px solid color-mix(in srgb,var(--ink) 35%,var(--card));color:var(--ink);background:transparent}
.faq-q{font-size:14.5px}
.faq-c::before,.faq-c::after{background:var(--pri)}
.faq-a{padding:0 16px 16px 62px}

/* garis pemisah tengah */
.sec-line{position:relative;height:18px;margin:38px 0 0;display:flex;align-items:center;justify-content:center}
.sec-line::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;border-radius:2px;
  background:linear-gradient(to right,transparent,color-mix(in srgb,var(--pri) 55%,transparent) 22%,var(--pri) 50%,color-mix(in srgb,var(--pri) 55%,transparent) 78%,transparent)}
.sec-line i{position:relative;z-index:1;width:12px;height:12px;border-radius:3px;transform:rotate(45deg);background:linear-gradient(135deg,var(--pri),var(--pri2));
  box-shadow:0 0 0 5px var(--bg),0 4px 10px var(--pri-glow)}
.sec-end{margin:30px 0 26px}
.faq{margin-top:30px}

/* FAQ: pill judul & logo sama besar, mengotak */
.faq-top{align-items:stretch;gap:12px;padding-right:0;margin-bottom:16px}
.faq-h{border-radius:16px;min-height:88px;padding:12px 14px;align-items:center}
.faq-ic{border-radius:12px}
.faq-lg{width:88px;height:88px;margin:0;border-radius:16px;box-shadow:0 10px 22px var(--pri-glow);border:2px solid color-mix(in srgb,var(--pri) 35%,transparent);background:var(--card)}
.faq-lg img{padding:0;object-fit:cover;background:var(--card)}
.faq-lg b{color:var(--pri);font-size:32px}
.faq-lg b i{display:block}

/* ===== Popup Berita & Informasi (model web utama) ===== */
.pop-box{width:min(92vw,420px);max-width:none;max-height:92vh;overflow:hidden;display:flex;flex-direction:column;border-radius:22px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--pri) 14%,var(--card)),var(--card));
  border:1.5px solid color-mix(in srgb,var(--pri) 45%,transparent);box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 36px var(--pri-glow)}
.pop-h{padding:14px 16px;text-align:center;font-size:16px;font-weight:800;letter-spacing:.05em;color:#fff;background:linear-gradient(to right,var(--pri),var(--pri2))}
.pop-h i{margin-right:8px}
.pop-im{background:color-mix(in srgb,var(--ink) 8%,var(--card));overflow:hidden}
.pop-box img{display:block;width:100%;max-width:100%;max-height:56vh;object-fit:contain;border:0;border-radius:0;box-shadow:none;background:transparent}
.pop-dots{display:flex;justify-content:center;gap:8px;padding:10px 0 4px}
.pop-dots i{width:10px;height:10px;border-radius:50%;background:color-mix(in srgb,var(--ink) 25%,var(--card))}
.pop-dots i.on{background:var(--pri);box-shadow:0 0 0 3px var(--pri-l)}
.pop-tx{margin:6px 14px 0;padding:12px 14px;border-radius:14px;text-align:center;font-size:14px;font-weight:700;color:#fff;
  background:linear-gradient(to right,var(--pri),var(--pri2));box-shadow:0 8px 18px var(--pri-glow);overflow-wrap:anywhere}
.pop-hide{display:flex;align-items:center;gap:10px;margin:10px 14px 0;padding:11px 12px;border-radius:14px;cursor:pointer;font-size:13px;font-weight:700;
  background:color-mix(in srgb,var(--ink) 7%,var(--card));border:1.5px solid color-mix(in srgb,var(--pri) 25%,transparent)}
.pop-hide input{position:absolute;opacity:0;pointer-events:none}
.pop-cb{flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:6px;font-size:12px;color:transparent;background:var(--card);border:2px solid color-mix(in srgb,var(--ink) 35%,var(--card))}
.pop-hide input:checked+.pop-cb{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--pri),var(--pri2))}
.pop .pop-x{position:static;width:auto;height:auto;margin:12px 0 0;padding:14px;border:0;border-radius:0;font-size:16px;font-weight:800;letter-spacing:.06em;
  color:#fff;background:linear-gradient(to right,var(--pri),var(--pri2));box-shadow:none}

/* ===== Popup: revisi (tanpa border, teks berjalan, footer ringkas) ===== */
.pop-box{border:0;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.pop-h{font-family:"Plus Jakarta Sans","Inter",system-ui,sans-serif;font-weight:800;font-size:16px}
.pop-tx{overflow:hidden;white-space:nowrap;padding:11px 0;margin:10px 14px 0;text-align:left;font-weight:700;font-size:13.5px}
.pop-mq{display:inline-flex;width:max-content;animation:popMq 22s linear infinite;will-change:transform}
.pop-mq>span{flex:none;padding-right:0}
@keyframes popMq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.pop-mq{animation:none}}
.pop-ft{display:flex;align-items:stretch;gap:0;margin-top:12px;background:linear-gradient(to right,var(--pri),var(--pri2))}
.pop-ft .pop-hide{flex:1;min-width:0;margin:0;padding:0 12px;border:0;border-radius:0;gap:8px;font-size:12px;font-weight:700;color:#fff;background:rgba(0,0,0,.14)}
.pop-ft .pop-cb{width:18px;height:18px;border-radius:5px;font-size:10px;border:2px solid rgba(255,255,255,.85);background:transparent}
.pop-ft .pop-hide input:checked+.pop-cb{background:#fff;color:var(--pri);border-color:#fff}
.pop .pop-ft .pop-x{margin:0;flex:none;min-width:46%;padding:15px 12px;font-family:"Plus Jakarta Sans","Inter",system-ui,sans-serif;font-weight:800;font-size:16px;letter-spacing:.08em;background:transparent}

/* ===== Popup: teks berjalan mengotak berjarak, checkbox terpisah, tombol Tutup penuh ===== */
.pop-tx{border-radius:8px;padding:11px 0;margin:10px 16px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.pop-mq>span{padding-left:28px}
.pop .pop-hide{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px 16px 0;padding:2px 0;border:0;border-radius:0;background:none;
  font-size:12px;font-weight:700;color:var(--muted)}
.pop .pop-hide .pop-cb{width:18px;height:18px;border-radius:5px;font-size:10px;border:2px solid color-mix(in srgb,var(--ink) 40%,var(--card));background:var(--card)}
.pop .pop-hide input:checked+.pop-cb{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--pri),var(--pri2))}
.pop .pop-x{display:block;width:100%;margin:12px 0 0;padding:15px 12px;min-width:0;flex:none;font-family:"Plus Jakarta Sans","Inter",system-ui,sans-serif;font-weight:800;font-size:16px;letter-spacing:.08em;
  color:#fff;background:linear-gradient(to right,var(--pri),var(--pri2))}

/* ===== Garis beranda: pendek, bergaya titik, jarak rapat ===== */
.sec-end{height:14px;margin:12px 0 4px}
.sec-end::before{left:50%;right:auto;width:150px;margin-left:-75px;height:3px;margin-top:-1.5px;
  background:linear-gradient(to right,transparent,var(--pri2),var(--pri),var(--pri2),transparent);border-radius:3px}
.sec-end i{width:8px;height:8px;border-radius:50%;transform:none;box-shadow:0 0 0 4px var(--bg),0 0 12px var(--pri-glow)}
.sec-end::after{content:"";position:absolute;left:50%;top:50%;width:200px;height:10px;margin:-5px 0 0 -100px;pointer-events:none;
  background:radial-gradient(circle,var(--pri) 0 2px,transparent 2.5px) 0 50%/16px 10px repeat-x;opacity:.0}
.hm-c{margin-bottom:6px}

/* ===== FAQ: pill ringkas + logo menonjol tanpa kotak (model web utama) ===== */
.faq-top{position:relative;display:block;margin:0 0 14px;padding:0}
.faq-h{width:76%;min-height:0;padding:10px 14px;gap:12px;border-radius:18px;box-shadow:0 8px 18px var(--pri-glow)}
.faq-ic{width:42px;height:42px;font-size:18px;border-radius:12px}
.faq-h h2{font-size:16.5px;letter-spacing:.05em}
.faq-h small{font-size:11.5px}
.faq-lg{position:absolute;right:2px;bottom:-26px;width:92px;height:92px;margin:0;border:0;border-radius:0;overflow:visible;background:none;box-shadow:none;z-index:3;display:block;
  filter:drop-shadow(0 8px 12px color-mix(in srgb,var(--ink) 35%,transparent))}
.faq-lg img{position:static;width:100%;height:100%;object-fit:contain;border-radius:20px;background:none;padding:0}
.faq-lg b{position:absolute;inset:8px;display:grid;place-items:center;border-radius:50%;font-size:34px;color:#fff;background:linear-gradient(135deg,var(--pri),var(--pri2))}
.faq-lg img+b{display:none}
.faq-l{padding-top:26px}

/* Popup: teks berjalan tanpa pudar, dibatasi jelas dengan jarak dalam */
.pop-tx{-webkit-mask-image:none;mask-image:none;overflow:hidden;padding:0 16px;border-radius:8px}
.pop-clip{overflow:hidden;padding:11px 0}
.pop-mq>span{padding-left:0;padding-right:36px}

/* FAQ: pill + ikon menonjol di kiri + logo kotak rapi di kanan (model web utama) */
.faq-top{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:0 0 0 6px}
.faq-h{position:relative;flex:1;width:auto;min-width:0;min-height:62px;margin:0;padding:10px 12px 10px 66px;gap:0;display:block;border-radius:16px}
.faq-ic{position:absolute;left:-8px;top:50%;width:54px;height:54px;margin-top:-27px;font-size:24px;border-radius:14px;color:#fff;
  background:linear-gradient(135deg,var(--pri),var(--pri2));border:2px solid rgba(255,255,255,.85);box-shadow:0 8px 16px var(--pri-glow)}
.faq-h h2{margin:0;font-size:16px;white-space:nowrap}
.faq-h small{display:block;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.faq-lg{position:relative;right:auto;bottom:auto;flex:none;width:76px;height:76px;margin:0;display:grid;place-items:center;overflow:hidden;border-radius:18px;
  border:2px solid #fff;background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 8px 18px var(--pri-glow);filter:none}
.faq-lg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;background:var(--card)}
.faq-lg b{position:static;display:grid;place-items:center;width:auto;height:auto;border-radius:0;background:none;font-size:30px;color:#fff}
.faq-l{padding-top:14px}

/* FAQ: jarak lebih rapat, logo kecil sejajar pill */
.faq{margin-top:20px}
.faq-top{margin-bottom:10px;gap:10px}
.faq-h{min-height:56px;padding:8px 12px 8px 62px;border-radius:14px}
.faq-ic{width:48px;height:48px;margin-top:-24px;font-size:21px;left:-6px}
.faq-h h2{font-size:15px}
.faq-h small{font-size:11px}
.faq-lg{width:56px;height:56px;border-radius:14px;border-width:2px}
.faq-lg b{font-size:22px}
.faq-l{padding-top:12px}
.sec-line{margin-top:26px}

/* Badge Pengiriman/Jaminan/Stok: skala mengikuti lebar kartu (container query) */
.nominal .nom-b.nb2{container-type:inline-size}
.nb2 .nom-ft{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3.2cqw;padding:4cqw 4.4cqw;justify-content:stretch}
.nb2 .nom-ins{display:flex;align-items:center;gap:2.4cqw;min-width:0;width:100%;box-sizing:border-box;padding:2.2cqw 2.6cqw;border-radius:3.6cqw;overflow:hidden}
.nb2 .nom-ins i{flex:none;font-size:7.4cqw}
.nb2 .nom-ins-t{min-width:0}
.nb2 .nom-ins-t small{font-size:max(7.5px,4.2cqw);white-space:nowrap}
.nb2 .nom-ins-t b{font-size:max(9px,5.1cqw);white-space:nowrap;letter-spacing:.1px}

/* badge footer: dipadatkan agar "100% AMAN" tidak terpotong */
.nb2 .nom-ft{gap:2.4cqw;padding:3.4cqw 3cqw}
.nb2 .nom-ins{gap:1.8cqw;padding:1.9cqw 2cqw;border-radius:3cqw}
.nb2 .nom-ins i{font-size:6cqw}
.nb2 .nom-ins-t small{font-size:max(7px,3.9cqw)}
.nb2 .nom-ins-t b{font-size:max(8px,4.6cqw);letter-spacing:0}

/* ===== Popup verifikasi keamanan (captcha) ===== */
.cap{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:22px;
  background:rgba(6,10,26,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:popF .2s ease-out}
.cap.out{opacity:0;transition:opacity .2s}
.cap-box{width:min(92vw,400px);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(180deg,color-mix(in srgb,var(--pri) 14%,var(--card)),var(--card));
  border:1.5px solid color-mix(in srgb,var(--pri) 45%,transparent);box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 36px var(--pri-glow);animation:popZ .3s cubic-bezier(.2,.9,.3,1.2)}
.cap-h{padding:14px 16px;text-align:center;font-size:15px;font-weight:800;letter-spacing:.05em;color:#fff;background:linear-gradient(to right,var(--pri),var(--pri2))}
.cap-h i{margin-right:8px}
.cap-b{padding:16px 16px 6px;text-align:center}
.cap-t{margin:0 0 14px;font-size:13px;font-weight:600;line-height:1.5;color:var(--muted)}
.cap-w{display:flex;justify-content:center;min-height:68px;align-items:center}
.cap-w>div{max-width:100%}
.cap-s{min-height:20px;margin:10px 0 4px;font-size:12.5px;font-weight:700;color:var(--muted)}
.cap-s.err{color:var(--bad)}
.cap-x{display:block;width:100%;margin:8px 0 0;padding:15px 12px;border:0;border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent);background:transparent;cursor:pointer;
  font-family:"Plus Jakarta Sans","Inter",system-ui,sans-serif;font-weight:800;font-size:15px;letter-spacing:.08em;color:var(--ink)}
.cap-x:active{background:color-mix(in srgb,var(--ink) 8%,transparent)}

/* ===== Captcha inline (di atas tombol) ===== */
.cap-in{margin:14px 0 12px;padding:10px 8px;border-radius:var(--r-s);background:color-mix(in srgb,var(--pri) 7%,var(--card));border:1px solid color-mix(in srgb,var(--pri) 28%,var(--line));transition:border-color .2s,background .2s}
.cap-lb{display:flex;align-items:center;gap:7px;margin:0 0 9px;font-size:12px;font-weight:800;letter-spacing:.03em;color:var(--muted)}
.cap-lb i{color:var(--pri)}
.cap-ts{display:flex;justify-content:center;min-height:65px;align-items:center}
.cap-ts>div{max-width:100%}
.cap-in.ok{border-color:color-mix(in srgb,var(--pri) 55%,transparent)}
.cap-in.err{border-color:color-mix(in srgb,var(--bad) 55%,transparent)}
.cap-in.err .cap-ts::after{content:"Verifikasi gagal dimuat. Muat ulang halaman.";font-size:12px;font-weight:700;color:var(--bad);text-align:center}
.cek-form .cap-in{margin:4px 0 12px}

/* ===== Popup: tombol Tutup tidak mengecil saat ditekan ===== */
.pop .pop-x{-webkit-tap-highlight-color:transparent;transition:filter .12s}
.pop .pop-x:active{transform:none;filter:brightness(.88)}
.pop .pop-hide{-webkit-tap-highlight-color:transparent}

/* ===== Centang pilihan: lencana pojok kanan-bawah kartu (boleh menutup badge), model halaman Alight Motion ===== */
.nominal .nom-b.nb2 .nom-top{position:static}
.nominal .nom-b.nb2 .nom-top .nom-ck{position:absolute!important;top:auto!important;left:auto!important;right:0!important;bottom:0!important;z-index:3;
  width:auto;height:auto;margin:0!important;padding:5px 12px!important;border-radius:12px 0 10px 0!important;font-size:17px!important}
.nominal .nom-b.nb2 .nom-n{padding-right:0!important}

/* ===== Cek Pesanan: kolom input sama dengan form di halaman lain ===== */
.cek-st .cek-in .input{background:color-mix(in srgb,var(--ink) 7%,var(--card));border:1.5px solid color-mix(in srgb,var(--ink) 20%,var(--card))}
.cek-st .cek-in .input:hover{border-color:color-mix(in srgb,var(--pri) 45%,var(--line))}
.cek-st .cek-in .input:focus{background:var(--card);border-color:var(--pri)}
.cek-st .cek-in .input::placeholder{color:color-mix(in srgb,var(--ink) 50%,var(--card));opacity:1;font-weight:500}

/* ===== Popup captcha: jarak bawah rapat, tombol Batal merah ===== */
.cap-b{padding:16px 16px 12px}
.cap-t{margin:0 0 10px}
.cap-w{min-height:0}
.cap-s{min-height:0;margin:8px 0 0}
.cap-s:empty{display:none}
.cap-x{margin:0;border:0;color:#fff;background:linear-gradient(to right,var(--bad),color-mix(in srgb,var(--bad) 65%,#fff));-webkit-tap-highlight-color:transparent}
.cap-x:active{background:linear-gradient(to right,var(--bad),color-mix(in srgb,var(--bad) 65%,#fff));filter:brightness(.88)}

/* ===== Invoice: urutan baru (total > rincian > QRIS), rapi ===== */
.tkt:has(+ .qrbox[hidden]){display:none}
.qrbox{margin:4px 18px 14px;padding:16px 14px 18px}
.qr-h{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;font-size:15px;font-weight:800;color:var(--ink)}
.qr-h i{color:var(--pri)}
.qrbox .countdown{margin:8px 0 14px}
.qrbox .qr-frame{margin-bottom:12px}
.qr-note{margin:0 0 12px;line-height:1.5}
.qrbox>p.center:last-child{margin:0}
.inv-total{margin:0 18px 10px}
.detail{margin:0 0 4px}
.detail>div:last-child{border-bottom:0}
.kode{margin:8px 18px 0;padding:12px 12px 14px;border:1px dashed color-mix(in srgb,var(--pri) 40%,var(--line));border-radius:var(--r-s);background:color-mix(in srgb,var(--pri) 5%,var(--card))}
.kode small.muted{display:block;font-size:12px;font-weight:700}
.inv-foot{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 18px 18px}
.inv-foot a{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 8px;border-radius:var(--r-s);font-weight:800;font-size:13px;color:var(--pri);
  background:color-mix(in srgb,var(--pri) 8%,var(--card));border:1px solid color-mix(in srgb,var(--pri) 28%,var(--line))}
.inv-foot a i{margin:0}

/* ===== Invoice modern (gaya web utama) — prefiks iv- ===== */
.invw{display:grid;gap:14px}
.invw>*{margin:0}
.invw [hidden]{display:none!important}
.iv-hero{padding:18px 16px 16px}
.iv-pill{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.08em;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.38)}
.iv-ht{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 6px}
.iv-ht h1{margin:0;font-size:24px;line-height:1.15;font-weight:800;color:#fff}
.iv-hero #stInfo{margin:0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.88)}
.iv-cd,.iv-no{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(4px)}
.iv-cd-i,.iv-no-i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;font-size:17px;background:rgba(255,255,255,.22)}
.iv-cd small,.iv-no small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.8);text-transform:uppercase}
.iv-cd b{display:block;font-size:20px;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums}
.iv-cd.low{background:rgba(220,38,38,.45)}
.iv-no>div{min-width:0;flex:1}
.iv-no code{display:block;margin-top:2px;font-size:13.5px;font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:none;color:#fff;padding:0;border:0}
.iv-no button{flex:none;border:0;cursor:pointer;font:inherit;font-size:12.5px;font-weight:700;color:var(--pri-d);background:#fff;border-radius:10px;padding:8px 12px;display:inline-flex;gap:6px;align-items:center}
.iv-sec{margin-bottom:0}
.iv-box{background:var(--card2);border:1px solid var(--line);border-radius:var(--r-s);padding:12px 14px;margin:0}
.iv-prod{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}
.iv-pi{width:60px;height:60px;border-radius:14px;flex:none;position:relative;overflow:hidden;display:grid;place-items:center;font-size:24px;color:#fff;background:linear-gradient(135deg,var(--pri),var(--pri2))}
.iv-pi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.iv-pt{min-width:0;flex:1}
.iv-pt>b{display:block;font-size:15.5px;line-height:1.25}
.iv-pt>span{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.iv-pt dl{margin:8px 0 0;display:grid;gap:4px}
.iv-pt dl div{display:flex;gap:8px;font-size:12.5px;justify-content:space-between}
.iv-pt dt{color:var(--muted);display:flex;gap:6px;align-items:center}
.iv-pt dd{margin:0;font-weight:700;word-break:break-all;text-align:right}
.iv-rows>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.iv-rows>div:last-child{border-bottom:0}
.iv-rows dt{color:var(--muted);display:flex;align-items:center;gap:8px;flex:none}
.iv-rows dt i{width:16px;text-align:center;color:var(--pri)}
.iv-rows dd{margin:0;font-weight:700;text-align:right;min-width:0;word-break:break-word}
.iv-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.iv-pl{display:inline-block;padding:6px 14px;border-radius:999px;color:#fff;font-weight:800;background:linear-gradient(135deg,var(--pri),var(--pri2))}
.iv-bd{display:inline-block}
.iv-bd i{display:none;font-style:normal;font-size:12px;font-weight:800;padding:4px 11px;border-radius:999px;border:1px solid transparent}
.invw[data-tahap=bayar] .bt-bayar,.invw[data-tahap=proses] .bt-proses,.invw[data-tahap=sukses] .bt-sukses,.invw[data-tahap=gagal] .bt-gagal,.invw[data-tahap=kadaluarsa] .bt-kadaluarsa,
.invw[data-tahap=bayar] .bp-bayar,.invw[data-tahap=proses] .bp-paid,.invw[data-tahap=sukses] .bp-paid,.invw[data-tahap=gagal] .bp-paid,.invw[data-tahap=kadaluarsa] .bp-kadaluarsa{display:inline-block}
.bt-bayar,.bp-bayar{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent);border-color:color-mix(in srgb,var(--warn) 35%,transparent)!important}
.bt-proses{color:var(--pri);background:color-mix(in srgb,var(--pri) 14%,transparent);border-color:color-mix(in srgb,var(--pri) 35%,transparent)!important}
.bt-sukses,.bp-paid{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent);border-color:color-mix(in srgb,var(--ok) 35%,transparent)!important}
.bt-gagal,.bt-kadaluarsa,.bp-kadaluarsa{color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent);border-color:color-mix(in srgb,var(--bad) 32%,transparent)!important}
/* timeline */
.iv-tl{list-style:none;display:grid;gap:0}
.iv-tl li{position:relative;display:flex;gap:12px;padding:0 0 18px}
.iv-tl li:last-child{padding-bottom:0}
.iv-tl li::before{content:"";position:absolute;left:17px;top:38px;bottom:2px;width:2px;background:var(--line)}
.iv-tl li:last-child::before{display:none}
.iv-ti{width:36px;height:36px;border-radius:12px;flex:none;display:grid;place-items:center;font-size:15px;background:var(--card);border:1px solid var(--line);color:var(--muted)}
.iv-ti i{display:none}
.iv-tx{display:none;min-width:0;padding-top:1px}
.iv-tx b{display:block;font-size:14px}
.iv-tx small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;line-height:1.4}
.iv-a .i-ok,.iv-a .t-ok{display:grid}
.iv-a .t-ok{display:block}
.iv-a .iv-ti{background:var(--pri);border-color:var(--pri);color:#fff}
/* b = pembayaran */
.invw[data-tahap=bayar] .iv-b .i-on,.invw[data-tahap=bayar] .iv-b .t-on{display:block}
.invw[data-tahap=bayar] .iv-b .i-on{display:inline}
.invw[data-tahap=proses] .iv-b .i-ok,.invw[data-tahap=sukses] .iv-b .i-ok,.invw[data-tahap=gagal] .iv-b .i-ok{display:inline}
.invw[data-tahap=proses] .iv-b .t-ok,.invw[data-tahap=sukses] .iv-b .t-ok,.invw[data-tahap=gagal] .iv-b .t-ok{display:block}
.invw[data-tahap=kadaluarsa] .iv-b .i-er{display:inline}
.invw[data-tahap=kadaluarsa] .iv-b .t-er{display:block}
.invw[data-tahap=bayar] .iv-b .iv-ti{color:var(--pri);border-color:var(--pri);background:color-mix(in srgb,var(--pri) 12%,var(--card))}
.invw[data-tahap=proses] .iv-b .iv-ti,.invw[data-tahap=sukses] .iv-b .iv-ti,.invw[data-tahap=gagal] .iv-b .iv-ti{background:var(--pri);border-color:var(--pri);color:#fff}
.invw[data-tahap=kadaluarsa] .iv-b .iv-ti,.invw[data-tahap=gagal] .iv-c .iv-ti,.invw[data-tahap=kadaluarsa] .iv-c .iv-ti{background:var(--bad);border-color:var(--bad);color:#fff}
/* c = pesanan */
.invw[data-tahap=bayar] .iv-c .i-wt,.invw[data-tahap=bayar] .iv-c .t-wt{display:block}
.invw[data-tahap=bayar] .iv-c .i-wt{display:inline}
.invw[data-tahap=proses] .iv-c .i-on{display:inline}
.invw[data-tahap=proses] .iv-c .t-on{display:block}
.invw[data-tahap=proses] .iv-c .iv-ti{color:var(--pri);border-color:var(--pri);background:color-mix(in srgb,var(--pri) 12%,var(--card))}
.invw[data-tahap=sukses] .iv-c .i-ok{display:inline}
.invw[data-tahap=sukses] .iv-c .t-ok{display:block}
.invw[data-tahap=sukses] .iv-c .iv-ti{background:var(--ok);border-color:var(--ok);color:#fff}
.invw[data-tahap=gagal] .iv-c .i-er,.invw[data-tahap=kadaluarsa] .iv-c .i-er{display:inline}
.invw[data-tahap=gagal] .iv-c .t-er,.invw[data-tahap=kadaluarsa] .iv-c .t-er{display:block}
/* bayar QR */
.iv-pay-h{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.iv-pay-h>span{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;font-size:18px;background:linear-gradient(135deg,var(--pri),var(--pri2));flex:none}
.iv-pay-h b{display:block;font-size:15px}
.iv-pay-h small{display:block;color:var(--muted);font-size:12.5px}
.iv-qr{background:#fff;border-radius:18px;padding:14px;display:grid;place-items:center;border:1px solid var(--line)}
.iv-qr img.qr{width:100%;max-width:260px;height:auto;display:block}
.iv-tot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;padding:12px 14px;border-radius:14px;color:#fff;font-size:12.5px;font-weight:800;letter-spacing:.04em;background:linear-gradient(135deg,var(--pri),var(--pri2))}
.iv-tot b{font-size:17px;letter-spacing:0}
.iv-act{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.iv-act button{border:0;cursor:pointer;font:inherit;font-weight:700;font-size:14px;padding:13px 10px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.iv-act button:only-child{grid-column:1/-1}
.iv-b1{color:#fff;background:linear-gradient(135deg,var(--pri),var(--pri2))}
.iv-b2{color:var(--pri);background:color-mix(in srgb,var(--pri) 10%,var(--card));border:1px solid color-mix(in srgb,var(--pri) 35%,transparent)!important}
.iv-act button:disabled{opacity:.6}
.iv-foot{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.iv-foot a{display:inline-flex;gap:7px;align-items:center;font-size:13px;font-weight:700;color:var(--pri);padding:9px 14px;border-radius:999px;background:color-mix(in srgb,var(--pri) 8%,var(--card));border:1px solid var(--line)}

/* Cek Manual = warna Unduh QR */
.iv-b2{color:#fff;background:linear-gradient(135deg,var(--pri),var(--pri2));border:0!important}

/* FAQ: bar lebih tipis, border logo = border kartu, teks pertanyaan dirapikan (semua halaman) */
.faq-bar{height:16px;border-width:1.5px;box-shadow:0 4px 10px var(--pri-glow)}
.faq-bar i{width:9px;height:9px;margin-top:-4.5px;border-width:1.5px}
.faq-bar i:first-child{left:7px}.faq-bar i:last-child{right:7px}
.faq-bar-b{height:6px;margin:0 36px}
.faq-bar-b i{width:9px;height:9px;margin-top:-4.5px}
.faq-l{gap:10px;padding:12px 12px 14px}
.faq-lg{border:2px solid color-mix(in srgb,var(--pri) 55%,transparent);box-shadow:0 4px 10px color-mix(in srgb,var(--ink) 12%,transparent);background:color-mix(in srgb,var(--ink) 6%,var(--card));border-radius:18px}
.faq-lg img{border-radius:16px}
.faq-i summary{align-items:center;gap:12px;padding:12px 14px}
.faq-n{width:32px;height:32px;font-size:13px;font-weight:800;border:2px solid color-mix(in srgb,var(--pri) 45%,transparent);color:var(--pri);background:color-mix(in srgb,var(--pri) 8%,var(--card))}
.faq-i[open] .faq-n{border-color:transparent}
.faq-q{font-size:14px;font-weight:700;line-height:1.4;letter-spacing:0;text-wrap:balance;overflow-wrap:anywhere}
.faq-a{padding:0 16px 14px 58px;font-size:13px;line-height:1.6}

/* FAQ: garis bawah = garis atas, radius sama dengan kartu lain, nomor warna tema */
.faq-bar-b{height:16px;margin:0;border:1.5px solid color-mix(in srgb,#fff 55%,transparent);background:linear-gradient(to right,var(--pri),var(--pri2));box-shadow:0 4px 10px var(--pri-glow)}
.faq-bar-b i{width:9px;height:9px;margin-top:-4.5px}
.faq-bar-b i:first-child{left:7px}.faq-bar-b i:last-child{right:7px}
.faq-l{border-radius:calc(var(--r) + 2px)}
.faq-h,.faq-lg{border-radius:calc(var(--r) + 2px)}
.faq-lg img{border-radius:calc(var(--r) - 1px)}
.faq-i{border-radius:var(--r-s)}
.faq-ic{border-radius:var(--r-s)}
.faq-n{color:#fff;border:0;background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 4px 10px var(--pri-glow)}
.faq-i[open] .faq-n{background:linear-gradient(135deg,var(--pri),var(--pri2))}

/* FAQ terbuka: ikon minus polos, tidak bulat */
.faq-i[open] .faq-c{background:none!important;box-shadow:none!important;border-radius:0!important;color:inherit}
.faq-i[open] .faq-c::before{background:var(--pri)}
.faq-i[open] .faq-c::after{opacity:0}

/* hasil pesanan = kartu ke-4 (sama dengan kartu lain) */
.stp2.pnl-akun{padding:18px 16px 14px;margin:0}
.pnl-akun .stp2-h h2 i{display:none}
.pnl-akun .pnl-kv>div{background:var(--card2)}
.pnl-akun .pnl-open{border-radius:14px}
.iv-tx b{color:var(--ink)}
.iv-tx small{color:var(--muted)}
.bs-g.bs-g1{grid-template-columns:1fr}

/* ===== card menu bawah: teks keterangan selalu 2 baris (pendek diberi ruang, panjang dipotong) ===== */
.bs-c small{-webkit-line-clamp:2!important;line-clamp:2;line-height:1.35!important;min-height:calc(1.35em * 2);max-height:calc(1.35em * 2);}

/* ===== Menu samping: tepi lurus (tanpa lengkungan) + judul kelompok bergaya badge seperti menu bawah ===== */
.drw-p{border-radius:0!important}
.drw-s{gap:10px;padding:20px 2px 12px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.drw-s span{padding:6px 12px;border-radius:8px;color:#fff;background:linear-gradient(to right,var(--pri),var(--pri2));box-shadow:0 4px 12px var(--pri-glow);white-space:nowrap}
.drw-s::after{height:2px;border-radius:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--pri) 60%,transparent),color-mix(in srgb,var(--pri) 12%,transparent))}
.drw-body>.drw-s:first-child{padding-top:6px}