/* Storefront — tema game Higgs (mobile-first). Warna aksen (--brand) dari tema tenant. */
:root{
  --brand:#4f7cff; --brand-d:#3959be;
  --gold:#f6b60c; --gold-d:#d98e00;
  --bg:#f4f6fa; --card:#ffffff; --txt:#162033; --muted:#667085; --line:#dfe5ee;
  --ok-bg:#e9f9ef; --ok-tx:#0b7a3b; --err-bg:#fdecec; --err-tx:#b42318;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0}
img,.hgi-brand-mark{
  -webkit-user-drag:none;
  -webkit-touch-callout:none;
  user-select:none;
}
body{
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--txt);
  background:
    radial-gradient(900px 360px at 50% -60px, rgba(0,0,0,.06), transparent),
    var(--bg);
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
.muted{color:var(--muted);font-size:13px}

/* Optional advertising consent: equal choices, in-flow, no checkout overlay. */
.sf-ads-privacy{border:1px solid var(--line);background:var(--card);color:var(--txt);border-radius:16px;padding:16px;margin-bottom:20px;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.sf-ads-privacy [hidden]{display:none!important}
.sf-ads-privacy p{margin:8px 0}
.sf-ads-privacy-head{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.sf-ads-privacy button,.sf-ads-privacy summary{min-height:44px;cursor:pointer;font:inherit}
.sf-ads-privacy button{border:1px solid var(--muted);border-radius:10px;background:var(--card);color:var(--txt);padding:10px 14px;white-space:normal}
.sf-ads-privacy-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.sf-ads-privacy-actions button{flex:1 1 180px}
.sf-ads-privacy button:hover{background:var(--bg)}
.sf-ads-privacy button:focus-visible,.sf-ads-privacy a:focus-visible,.sf-ads-privacy summary:focus-visible{outline:3px solid var(--brand-d);outline-offset:3px}
.sf-ads-privacy details{margin-top:12px}
.sf-ads-privacy summary{padding:10px 0;font-weight:600}
.sf-ads-privacy a{color:var(--brand-d);text-decoration:underline}


/* ── Header ── */
.hdr{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-d));
  box-shadow:0 2px 14px rgba(0,0,0,.12);
}
/* min-width:0 + ellipsis: nama toko yang menyerah lebih dulu saat ruang sempit.
   Tanpa ini nama toko memaksa lebarnya sendiri, tombol header terdorong keluar
   viewport, dan halaman meluap mendatar. Terlihat pada layar sangat sempit dan
   pada tenant bernama panjang. */
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px;letter-spacing:.2px;min-width:0}
.brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdr-actions{flex-shrink:0}
.brand img{height:30px;border-radius:7px}
/* Logo nama memanjang, jadi yang dikunci tingginya; lebarnya menyesuaikan isi
   sampai batas yang tidak mendesak tombol aksi header. Tanpa sudut membulat:
   itu milik ikon persegi, bukan tulisan. */
.brand img#brand-wordmark{height:24px;width:auto;max-width:min(58vw,190px);object-fit:contain;border-radius:0}
.brand img#brand-wordmark[hidden]{display:none}
.hdr-actions{display:flex;gap:6px}
.link{background:rgba(255,255,255,.16);border:none;color:#fff;border-radius:20px;padding:7px 12px;font-size:12.5px;font-weight:600;cursor:pointer}
.link:hover{background:rgba(255,255,255,.26)}
.link.has-checkin{box-shadow:inset 0 0 0 1px rgba(255,255,255,.42);background:rgba(255,255,255,.23)}

.wrap{max-width:480px;margin:0 auto;padding:0 14px 28px}

/* ── Hero ── */
.hero{
  position:relative; margin:14px 0 16px; border-radius:18px; overflow:hidden;
  background:linear-gradient(120deg,var(--brand),var(--brand-d));
  color:#fff; padding:22px 20px; box-shadow:0 8px 24px rgba(0,0,0,.14);
}
.hero::after{content:"🪙";position:absolute;right:-8px;bottom:-18px;font-size:110px;opacity:.16;transform:rotate(-12deg)}
.hero h1{margin:0;font-size:22px;font-weight:800}
.hero p{margin:6px 0 0;font-size:13.5px;opacity:.92;max-width:78%}
.hero .badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.2);padding:4px 10px;border-radius:20px;font-size:11.5px;font-weight:700;margin-bottom:8px}
.hero-trust{display:none}
/* Hero dimatikan per domain. Bukan display:none: <h1> berkata kunci ada di
   dalamnya, dan halaman ini tidak punya H1 lain. Teknik sembunyi-visual
   membuatnya tetap terbaca crawler dan pembaca layar, tetapi hilang sama
   sekali dari tata letak — tanpa menyisakan celah setinggi 1px sekalipun.

   Pemilihnya sengaja memakai nama tag: .site-tokohiggs .hero di bawah punya
   kekhususan yang sama persis dan akan menang karena urutan, lengkap dengan
   min-height 238px dan gambar latarnya. */
section.hero.hero-mati{
  position:absolute; width:1px; height:1px; min-height:0;
  margin:-1px; padding:0; border:0; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
  background:none!important; box-shadow:none;
}
section.hero.hero-mati::after{content:none}
/* Hero mengapung keluar alur, jadi jarak 14px ke bilah merek ikut hilang dan
   blok pertama menempel di header. Dikembalikan lewat elemen SESUDAHNYA, bukan
   padding pada .wrap: .wrap dipakai semua halaman, sedangkan yang kehilangan
   jaraknya hanya beranda saat hero mati. Dua baris karena banner event bisa
   tersembunyi (domain tanpa banner) — yang pertama tampil adalah kartu ID. */
section.hero.hero-mati + .event-banner{margin-top:14px}
section.hero.hero-mati + .event-banner[hidden] + .card{margin-top:14px}

/* ── Cards / sections ── */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:14px;box-shadow:0 4px 16px rgba(20,60,40,.05)}
.card h2{margin:0 0 12px;font-size:14px;font-weight:800;display:flex;align-items:center;gap:8px}
/* Kepala kartu "1 Masukan ID": judul di kiri, saklar mode di kanan. Judulnya
   memakai margin-bawah 0 di sini karena jaraknya diatur wadah ini. */
.user-id-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;flex-wrap:wrap}
.user-id-head h2{margin:0}
/* WAJIB: tanpa ini `display:inline-flex` di bawah menimpa aturan bawaan
   [hidden]{display:none}, dan saklar terlihat oleh TAMU yang belum login. */
.id-mode[hidden]{display:none}
/* Kartu berhasil batch. Cangkangnya .paycard sama seperti status order satuan;
   yang ditambah di sini hanya tanda centang dan penunjuk ke riwayat. */
.bulk-done-mark{width:46px;height:46px;margin:0 auto 10px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:#dcfce7;color:#15803d;font-size:24px;font-weight:700;line-height:1}
.bulk-done-note{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:var(--line,#f1f5f9);
  color:var(--muted,#475569);font-size:.82rem;line-height:1.5;text-align:center}
.id-mode{display:inline-flex;background:var(--line,#eef1f6);border-radius:999px;padding:3px;gap:2px}
.id-mode button{appearance:none;border:0;background:none;font:inherit;font-size:.78rem;font-weight:600;
  color:var(--muted,#64748b);padding:6px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;line-height:1.2}
.id-mode button:hover{color:var(--text,#0f172a)}
.id-mode button.is-on{background:#fff;color:var(--brand,#2563eb);box-shadow:0 1px 3px rgba(15,23,42,.14)}
.id-mode button:focus-visible{outline:2px solid var(--brand,#2563eb);outline-offset:2px}
/* Di dalam kartu langkah 1, blok bulk tidak perlu jarak bawah ganda. */
#id-bulk .bulk-field:last-of-type{margin-bottom:10px}
#id-bulk .wallet-topup-message:empty{display:none}
@media (max-width:420px){
  .user-id-head{gap:8px}
  .id-mode{width:100%}
  .id-mode button{flex:1;text-align:center;padding:7px 8px}
}
.card h2 .num{width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}

.row{display:flex;gap:8px}
input{padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;font-size:15px;width:100%;background:#fbfdfc;transition:.15s}
input:focus{outline:none;border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px rgba(26,160,83,.12)}
.row input{flex:1}
button{cursor:pointer;font-size:15px;font-family:inherit}
#check-btn,#buy-btn,#bulk-preview-btn{background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;border:none;border-radius:12px;padding:12px 20px;font-weight:700;white-space:nowrap;box-shadow:0 4px 12px rgba(26,160,83,.28)}
#check-btn:active,#buy-btn:active,#bulk-preview-btn:active{transform:translateY(1px)}
button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.buyer{margin-top:10px;padding:11px 12px;border-radius:12px;background:var(--ok-bg);color:var(--ok-tx);font-size:14px;font-weight:600}
.buyer.err{background:var(--err-bg);color:var(--err-tx)}

/* ── Kategori (Koin/Berlian) ── */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tabs button{padding:9px 18px;border:1.5px solid var(--line);background:#fff;border-radius:24px;font-size:13.5px;font-weight:700;color:var(--muted)}
.tabs button.active{background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(26,160,83,.25)}

/* ── Kartu denominasi (koin) ── */
.grid{display:flex;flex-direction:column;gap:10px}
.prod{
  display:flex;align-items:center;gap:13px;
  padding:12px 14px;border-radius:15px;cursor:pointer;
  background:#fff;border:2px solid var(--line);transition:.15s;
}
.prod:hover{border-color:var(--gold)}
.prod.active{border-color:var(--brand);background:linear-gradient(120deg,#fff,rgba(26,160,83,.06));box-shadow:0 6px 16px rgba(26,160,83,.14)}
.prod .ic{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:24px;
  background:radial-gradient(circle at 35% 30%,#ffe08a,var(--gold) 60%,var(--gold-d));
  box-shadow:inset 0 -2px 4px rgba(0,0,0,.15),0 2px 6px rgba(217,142,0,.35);
}
.prod .ic img{width:34px;height:34px;object-fit:contain}
.site-tokohiggs .prod.prod-image-native .ic{
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.site-tokohiggs .prod.prod-image-native .ic img{
  display:block;
  width:46px;
  height:46px;
  border-radius:0;
  object-fit:contain;
}
.prod .n{flex:1;font-weight:800;font-size:15px;line-height:1.25}
.prod .n small{display:block;font-weight:600;font-size:11.5px;color:var(--muted);margin-top:2px}
.prod .p{background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;padding:8px 14px;border-radius:22px;font-weight:800;font-size:14px;white-space:nowrap;box-shadow:0 3px 8px rgba(26,160,83,.25)}
.prod.active .p{background:linear-gradient(135deg,var(--gold),var(--gold-d));box-shadow:0 3px 8px rgba(217,142,0,.3)}

/* ── Channels ── */
.channels{display:flex;flex-direction:column;gap:14px}
.chgroup .cglabel{font-size:11.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:7px}
.chlist{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.ch{border:1.5px solid var(--line);border-radius:12px;padding:11px 10px;cursor:pointer;text-align:center;background:#fbfdfc;display:flex;flex-direction:column;align-items:center;gap:5px;transition:.12s}
.ch:hover{border-color:var(--gold)}
.ch .chic{font-size:22px;line-height:1;height:26px;display:flex;align-items:center;justify-content:center}
.ch .chic img{height:24px;width:auto;object-fit:contain}
.ch .chname{font-size:12.5px;font-weight:700;line-height:1.2}
.ch.active{border-color:var(--brand);background:rgba(26,160,83,.08);color:var(--brand-d)}
/* Strip info metode (non-klik) utk alur Snap popup */
.chinfo{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:#fbfdfc;border-radius:20px;padding:7px 12px;font-size:12.5px;font-weight:700;color:var(--txt)}
.chip .chic{font-size:15px;line-height:1}
.chip .chic img{height:16px;width:auto;object-fit:contain}

/* ── Bar bayar (dasar) ── posisi, lebar, dan susunannya diatur belakangan di
   blok "SATU komposisi untuk semua lebar"; di sini hanya rupa dasarnya. */
.summary{z-index:10;background:#fff;border:1.5px solid var(--brand);border-radius:16px;padding:13px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 10px 26px rgba(20,60,40,.16);margin-top:4px}
.summary #sum-product{font-weight:700;font-size:14px}
.summary #sum-price{color:var(--brand-d);font-size:16px}
.summary button{flex-shrink:0}
.msg{padding:12px;border-radius:12px;background:var(--err-bg);color:var(--err-tx);font-size:14px;font-weight:600;margin-top:12px}

/* ── Overlays / modal ── */
.overlay{position:fixed;inset:0;background:rgba(10,25,18,.55);display:flex;align-items:center;justify-content:center;padding:16px;z-index:20;backdrop-filter:blur(2px)}
/* WAJIB: rule di atas pakai display:flex yang meng-override atribut [hidden] bawaan.
   Tanpa baris ini, semua overlay (akun/bayar/lacak/login) selalu tampil. */
.overlay[hidden]{display:none}
.paycard{background:#fff;border-radius:20px;padding:24px 22px;max-width:370px;width:100%;position:relative;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.paycard h3{margin:0 0 6px;font-size:17px;font-weight:800}
.close{position:absolute;top:10px;right:14px;background:#f1f5f2;border:none;width:32px;height:32px;border-radius:50%;font-size:20px;color:var(--muted);line-height:1;display:flex;align-items:center;justify-content:center}
.paycard img{max-width:220px;margin:14px auto;display:block;border-radius:10px}
.va{font-size:22px;font-weight:800;letter-spacing:1px;background:#f1f5f2;padding:13px;border-radius:12px;margin:12px 0;word-break:break-all}
.pay-status{margin-top:14px;padding:11px;border-radius:12px;background:#fff7e6;color:#8a5a00;font-size:14px;font-weight:600}
.pay-status.ok{background:var(--ok-bg);color:var(--ok-tx)}
.pay-status.err{background:var(--err-bg);color:var(--err-tx)}
.btn-full{background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;border:none;border-radius:12px;padding:13px;font-weight:700;width:100%;margin-top:10px}
#track-go{background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;border:none;border-radius:12px;padding:12px 18px;font-weight:700;white-space:nowrap}
.acct-bal{font-size:19px;margin:8px 0;font-weight:700}
.ledger{max-height:180px;overflow-y:auto}
.ledger .li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.ledger .li .amt.pos{color:var(--ok-tx);font-weight:700}
.ledger .li .amt.neg{color:var(--err-tx);font-weight:700}
.cglabel{font-size:12px;color:var(--muted);font-weight:700}
.refund-box{border:1.5px solid var(--line);border-radius:14px;padding:13px;margin-top:10px;font-size:14px}
.refund-opt{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.refund-opt button{flex:1;border:1.5px solid var(--brand);color:var(--brand-d);background:#fff;border-radius:12px;padding:10px;font-size:13px;font-weight:700;min-width:90px}
.st-badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700}
.st-badge.ok{background:var(--ok-bg);color:var(--ok-tx)}
.st-badge.err{background:var(--err-bg);color:var(--err-tx)}
.st-badge.wait{background:#fff7e6;color:#8a5a00}

/* == Pembayaran + pelacakan: receipt yang dapat diaudit ================= */
.payment-card,.track-card{
  max-width:420px;
  padding:27px 24px 24px;
  text-align:left;
  border:1px solid rgba(255,255,255,.7);
  overflow:hidden;
}
.payment-card::before,.track-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:5px;
  background:linear-gradient(90deg,var(--brand),var(--brand-d),var(--gold));
}
.pay-kicker{font-size:10px;line-height:1;font-weight:900;letter-spacing:.13em;color:var(--brand);margin-bottom:6px}
.payment-card h3,.track-card h3{font-size:21px;line-height:1.2;margin:0 38px 14px 0;letter-spacing:-.02em}
.pay-invoice{
  position:relative;
  padding:17px 18px 15px;
  border:1px solid color-mix(in srgb,var(--brand) 18%,#e2e8f0);
  border-radius:16px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 10%,#fff),#fff 72%);
  box-shadow:0 8px 22px color-mix(in srgb,var(--brand) 10%,transparent);
}
.pay-invoice-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.pay-invoice-amount{font-size:28px;line-height:1.15;font-weight:900;letter-spacing:-.04em;color:var(--txt);margin-top:2px}
.pay-invoice-product{font-size:13px;color:var(--muted);font-weight:650;margin-top:5px}
.pay-funding-breakdown{
  display:grid;gap:7px;margin-top:13px;padding-top:12px;
  border-top:1px dashed color-mix(in srgb,var(--brand) 20%,#dce4df);
}
.pay-funding-breakdown>div{display:flex;align-items:center;justify-content:space-between;gap:14px}
.pay-funding-breakdown span{color:var(--muted);font-size:11.5px}
.pay-funding-breakdown b{color:var(--txt);font-size:11.5px;text-align:right}
.payment-card .pay-status{margin-top:14px;padding:0;background:transparent;color:var(--txt);font-size:14px;font-weight:400}
.pay-steps{display:flex;align-items:center;justify-content:center;gap:6px;margin:4px 0 14px}
.pay-step{display:inline-flex;align-items:center;gap:5px;color:#94a3b8;font-size:11.5px;font-weight:650;white-space:nowrap}
.pay-step-dot{width:23px;height:23px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#e9eef3;color:#8a9aaa;font-size:11px;font-weight:900}
.pay-step.active,.pay-step.done{color:var(--txt)}
.pay-step.active .pay-step-dot{background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;box-shadow:0 4px 10px color-mix(in srgb,var(--brand) 28%,transparent)}
.pay-step.done .pay-step-dot{background:#23a65b;color:#fff}
.pay-step-line{width:20px;height:2px;border-radius:2px;background:#dfe6e1}
.pay-step-line.done{background:#23a65b}
.pay-state-head{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:#fbfdfc}
.pay-state-symbol{width:34px;height:34px;flex:0 0 34px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;font-size:18px;font-weight:900;box-shadow:0 5px 12px color-mix(in srgb,var(--brand) 22%,transparent)}
.pay-state-head strong{display:block;font-size:14.5px;line-height:1.35;color:var(--txt)}
.pay-state-head p{margin:3px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.pay-status.ok .pay-state-symbol{background:linear-gradient(135deg,#2cc56f,#148344)}
.pay-status.err .pay-state-symbol{background:linear-gradient(135deg,#e7574f,#a9231c)}
.order-ticket{
  position:relative;margin-top:12px;padding:14px 15px 13px;border-radius:14px;
  color:#fff;background:linear-gradient(135deg,#111f39,#17365a);
  box-shadow:0 9px 20px rgba(15,31,57,.2);overflow:hidden;
}
.order-ticket::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;background-image:radial-gradient(circle at 1px 1px,#fff 1px,transparent 1px);background-size:12px 12px}
.order-ticket>*{position:relative;z-index:1}
.order-ticket-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;color:#aebed2;text-transform:uppercase;letter-spacing:.06em}
.order-ticket-top b{color:#fff;font-size:16px;letter-spacing:.04em;text-transform:none}
.order-full-id{display:block;margin-top:7px;color:#d9e6f5;font-size:10.5px;line-height:1.45;word-break:break-all}
.order-ticket-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:11px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.24)}
.order-ticket-actions button{border:1px solid rgba(255,255,255,.25);border-radius:9px;padding:8px 9px;background:rgba(255,255,255,.1);color:#fff;font-size:11.5px;font-weight:800}
.order-ticket-actions button:last-child{background:#fff;color:#173052;border-color:#fff}
.pay-email-note{display:flex;align-items:flex-start;gap:8px;margin-top:11px;padding:10px 11px;border-radius:11px;background:#edf8f1;color:#326047;font-size:11.5px;line-height:1.45}
.pay-email-note>span:first-child{font-size:15px;line-height:1.1}
.track-card{text-align:left}
.track-help{margin:-6px 34px 12px 0;color:var(--muted);font-size:12.5px;line-height:1.45}
.track-card #track-result{margin-top:8px}
.track-error{display:flex;flex-direction:column;gap:4px;margin-top:12px;padding:13px 14px;border:1px solid #f2c9c5;border-radius:13px;background:var(--err-bg);color:var(--err-tx);font-size:12.5px;line-height:1.45}
.track-error b{font-size:14px}
.track-order-card{margin-top:12px;border:1px solid var(--line);border-radius:17px;background:#fff;box-shadow:0 10px 28px rgba(21,45,36,.08);overflow:hidden}
.track-status-head{display:flex;align-items:flex-start;gap:12px;padding:15px 16px 14px;background:linear-gradient(135deg,#fff9e9,#fff 75%);border-bottom:1px solid #f0ead9}
.track-status-icon{width:38px;height:38px;flex:0 0 38px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:linear-gradient(135deg,#f2b735,#d2870f);color:#fff;font-size:18px;font-weight:900;box-shadow:0 5px 12px rgba(210,135,15,.24)}
.track-order-card.ok .track-status-head{background:linear-gradient(135deg,#ebfaf1,#fff 75%);border-bottom-color:#d9eee1}
.track-order-card.ok .track-status-icon{background:linear-gradient(135deg,#2cc56f,#148344);box-shadow:0 5px 12px rgba(20,131,68,.22)}
.track-order-card.err .track-status-head{background:linear-gradient(135deg,#fff0ee,#fff 75%);border-bottom-color:#f2d8d5}
.track-order-card.err .track-status-icon{background:linear-gradient(135deg,#e7574f,#a9231c);box-shadow:0 5px 12px rgba(169,35,28,.2)}
.track-status-head>div{min-width:0}
.track-overline{display:block;margin-bottom:2px;color:#8b6a22;font-size:9.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.track-order-card.ok .track-overline{color:#29744a}
.track-order-card.err .track-overline{color:#9c3c35}
.track-status-head strong{display:block;color:var(--txt);font-size:16px;line-height:1.25}
.track-status-head p{margin:3px 0 4px;color:#52645c;font-size:11.5px;line-height:1.4}
.track-status-head small{display:block;color:#8a9891;font-size:10px}
.track-buyer{display:flex;align-items:center;gap:11px;margin:13px 15px 0;padding:12px 13px;border:1px solid #e3eae5;border-radius:13px;background:#f8fbf9}
.track-avatar{width:39px;height:39px;flex:0 0 39px;display:flex;align-items:center;justify-content:center;border-radius:13px;background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;font-size:13px;font-weight:900;letter-spacing:.04em;box-shadow:0 5px 12px color-mix(in srgb,var(--brand) 22%,transparent)}
.track-buyer>div{min-width:0}
.track-buyer span:not(.track-avatar){display:block;color:var(--muted);font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.track-buyer strong{display:block;margin:1px 0;color:var(--txt);font-size:14px;line-height:1.25;overflow-wrap:anywhere}
.track-buyer small{display:block;color:#687870;font-size:10.5px}
.track-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:12px 15px;border:1px solid #e4eae6;border-radius:13px;overflow:hidden}
.track-detail-grid>div{min-width:0;padding:10px 11px;background:#fff}
.track-detail-grid>div:nth-child(odd){border-right:1px solid #e8ede9}
.track-detail-grid>div:nth-child(-n+2){border-bottom:1px solid #e8ede9}
.track-detail-grid span{display:block;margin-bottom:3px;color:#819087;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.track-detail-grid b{display:block;color:var(--txt);font-size:11.5px;line-height:1.35;overflow-wrap:anywhere}
.track-ticket{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 15px;color:#fff;background:linear-gradient(135deg,#111f39,#17365a)}
.track-ticket span{display:block;color:#aebed2;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.track-ticket b{display:block;margin-top:1px;color:#fff;font-size:15px;letter-spacing:.06em}
.track-ticket button{border:1px solid rgba(255,255,255,.25);border-radius:9px;padding:8px 10px;background:#fff;color:#173052;font-size:10.5px;font-weight:900;white-space:nowrap}

@media(max-width:420px){
  .payment-card,.track-card{padding:25px 18px 19px}
  .payment-card h3,.track-card h3{font-size:19px}
  .pay-invoice-amount{font-size:25px}
  .pay-step{font-size:10.5px;gap:4px}
  .pay-step-dot{width:21px;height:21px}
  .pay-step-line{width:10px}
  .order-ticket-actions{grid-template-columns:1fr}
  .track-detail-grid{margin-left:13px;margin-right:13px}
  .track-buyer{margin-left:13px;margin-right:13px}
}

footer.foot{text-align:center;color:var(--muted);font-size:11.5px;padding:6px 0 20px}


/* == CHIP KATEGORI: kotak & rapat ================================= */
.tabs{gap:6px;margin-bottom:12px}
.tabs button{
  border-radius:8px;      /* dari 24px (pil) → kotak */
  padding:9px 13px;       /* dirapatkan dari 9px 18px */
  font-size:13px;
}
.tabs button.active{box-shadow:0 2px 8px rgba(26,160,83,.22)}


/* == CHIP KATEGORI: melebar penuh ============================= */
/* Chip tumbuh mengisi lebar baris. flex:1 1 auto = tumbuh PROPORSIONAL dengan
   panjang teks (bukan sama rata), jadi "Kartu Mitra" tetap lebih lebar dari
   "VIP" dan terlihat wajar. nowrap: teks tak patah dua baris saat kategori
   bertambah (mis. Express dimunculkan lagi). */
.tabs button{flex:1 1 auto;white-space:nowrap;text-align:center}


/* == CHIP KATEGORI: satu baris =============================== */
.tabs{
  flex-wrap:nowrap;          /* jangan bungkus — cegah chip melar sendirian di baris 2 */
  overflow-x:auto;           /* kategori banyak → geser mendatar, bukan patah baris */
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tabs button{min-width:0}    /* boleh menyusut supaya semua muat sebaris */


/* == CHIP KATEGORI: jangan susut ============================== */
.tabs button{flex:1 0 auto}

/* == STOREFRONT: banner maskot + penanda kepercayaan ================= */
/* Class lama dipertahankan, tetapi dipasang pada seluruh tenant agar domain
   yang sudah ada dan domain baru otomatis memakai desain standar yang sama. */
.site-tokohiggs .hero{
  min-height:238px;
  padding:23px 19px 58px;
  background-color:#082f2a;
  background-image:
    linear-gradient(90deg,rgba(3,20,49,.98) 0%,rgba(4,36,58,.94) 38%,rgba(5,55,53,.50) 61%,rgba(5,55,53,.08) 100%),
    url('/assets/tokohiggs-hero-resmi-mitra-bergaransi.webp');
  background-size:cover;
  background-position:center;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 30px rgba(4,45,38,.24);
}
.site-tokohiggs .hero::after{content:none}
.site-tokohiggs .hero-copy{position:relative;z-index:1;max-width:55%}
.site-tokohiggs .hero h1{
  max-width:210px;
  font-size:26px;
  line-height:1.04;
  letter-spacing:-.035em;
  text-wrap:balance;
  text-shadow:0 2px 14px rgba(0,0,0,.28);
}
.site-tokohiggs .hero p{
  max-width:205px;
  margin-top:9px;
  font-size:12.5px;
  line-height:1.45;
  opacity:.94;
  text-shadow:0 1px 10px rgba(0,0,0,.34);
}
.site-tokohiggs .hgi-brand-mark{
  position:absolute;
  z-index:2;
  top:9px;
  right:10px;
  width:118px;
  height:42px;
  background-image:url('/assets/hgi-higgs-games-island-trust.jpeg');
  background-repeat:no-repeat;
  background-position:center;
  background-size:270% auto;
  mix-blend-mode:screen;
  filter:grayscale(1) contrast(2) brightness(1.2) drop-shadow(0 2px 6px rgba(0,0,0,.42));
  opacity:.9;
  pointer-events:none;
}
.site-tokohiggs .hero .badge{
  margin-bottom:11px;
  padding:5px 9px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
  font-size:10.5px;
  white-space:nowrap;
}
.site-tokohiggs .hero-trust{
  position:absolute;
  z-index:1;
  left:13px;
  right:13px;
  bottom:12px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
}
.site-tokohiggs .hero-trust span{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:0;
  padding:7px 5px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:9px;
  background:linear-gradient(135deg,var(--brand),var(--brand-d));
  color:#fff;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.01em;
  box-shadow:0 3px 10px rgba(4,45,38,.30),inset 0 1px 0 rgba(255,255,255,.16);
}
.site-tokohiggs .hero-trust b{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:15px;
  height:15px;
  flex:0 0 15px;
  border-radius:50%;
  background:#32d583;
  color:#052e24;
  font-size:10px;
}
@media (max-width:520px){
  .site-tokohiggs .hgi-brand-mark{top:8px;right:8px;width:104px;height:38px}
}
@media (max-width:370px){
  .site-tokohiggs .hero{min-height:226px;padding-left:16px;padding-right:16px;background-position:54% center}
  .site-tokohiggs .hero-copy{max-width:58%}
  .site-tokohiggs .hero h1{font-size:23px}
  .site-tokohiggs .hero p{font-size:11.5px}
  .site-tokohiggs .hero .badge{font-size:9.5px;padding-inline:7px}
  .site-tokohiggs .hero-trust{left:10px;right:10px;gap:4px}
  .site-tokohiggs .hero-trust span{font-size:9.5px;padding-inline:3px}
}

/* == TOKOHIGGS: panel User ID bergaya Higgs Games ===================== */
.site-tokohiggs .user-id-card{
  margin-top:32px;
  padding:20px 16px 16px;
  background:linear-gradient(180deg,#e5feed 0%,#c3fce3 100%);
  border-top:1px solid #bdfbdf;
  border-left:2px solid #6bf4c3;
  border-right:2px solid #6bf4c3;
  border-bottom:5px solid #6bf4c3;
  border-radius:20px;
  box-shadow:0 5px 0 #239385,0 14px 28px rgba(35,147,133,.16);
}
.site-tokohiggs .user-id-title{
  display:flex;
  align-items:flex-end;
  gap:11px;
  margin:-41px 0 13px 4px;
  color:#3b8a78;
  font-size:20px;
  font-weight:900;
  line-height:1;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.site-tokohiggs .user-id-title img{
  display:block;
  width:58px;
  height:60px;
  flex:0 0 58px;
  object-fit:contain;
  filter:drop-shadow(0 5px 7px rgba(35,147,133,.18));
}
.site-tokohiggs .user-id-title span{padding-bottom:7px}
.site-tokohiggs .user-id-control{
  display:flex;
  align-items:stretch;
  gap:5px;
  min-height:56px;
  padding:4px;
  background:#39b08f;
  border-radius:11px;
  box-shadow:inset 0 2px 0 #289f7e;
}
.site-tokohiggs .user-id-control #game-id{
  min-width:0;
  height:48px;
  padding:0 9px;
  border:0;
  border-radius:8px;
  background:transparent;
  box-shadow:none;
  color:#fffbc3;
  text-align:center;
  font-size:17px;
  font-weight:800;
  letter-spacing:.02em;
}
.site-tokohiggs .user-id-control #game-id::placeholder{color:rgba(255,251,195,.76);font-weight:700}
.site-tokohiggs .user-id-control #game-id:focus{
  outline:2px solid rgba(255,251,195,.76);
  outline-offset:-2px;
  background:rgba(255,255,255,.06);
}
.site-tokohiggs #user-id-guide-btn{
  display:grid;
  place-items:center;
  width:38px;
  flex:0 0 38px;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
}
.site-tokohiggs #user-id-guide-btn:hover,.site-tokohiggs #user-id-guide-btn:focus-visible{background:rgba(255,255,255,.13);outline:none}
.site-tokohiggs #user-id-guide-btn img{display:block;width:33px;height:33px}
.site-tokohiggs .user-id-control #check-btn{
  min-width:62px;
  padding:0 13px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:8px;
  background:#258d78;
  box-shadow:none;
  color:#fff;
  font-size:14px;
  font-weight:800;
}
.site-tokohiggs .user-id-control #check-btn:hover,.site-tokohiggs .user-id-control #check-btn:focus-visible{background:#187866;outline:2px solid rgba(255,251,195,.75);outline-offset:1px}
.site-tokohiggs .user-id-help-copy{
  margin:13px 0 0;
  padding:12px 14px;
  border-radius:12px;
  background:#a8f2d6;
  color:#278a76;
  font-size:13px;
  line-height:1.42;
}
.site-tokohiggs .user-id-card .buyer{margin-top:12px}
.user-id-guide-overlay{z-index:40;background:rgba(4,49,45,.80);backdrop-filter:blur(2px)}
.user-id-guide-card{
  position:relative;
  width:min(92vw,390px);
  max-height:calc(100vh - 32px);
  filter:drop-shadow(0 22px 44px rgba(0,0,0,.38));
}
.user-id-guide-image{display:block;width:100%;height:auto;max-height:calc(100vh - 32px);object-fit:contain}
#user-id-guide-close{
  position:absolute;
  z-index:2;
  top:-12px;
  right:-12px;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
}
#user-id-guide-close img{display:block;width:46px;height:46px}
#user-id-guide-close:focus-visible{outline:3px solid #fffbc3;outline-offset:2px}
body.user-id-guide-open{overflow:hidden}
@media (max-width:370px){
  .site-tokohiggs .user-id-card{padding-inline:12px}
  .site-tokohiggs .user-id-title{font-size:18px}
  .site-tokohiggs .user-id-control{gap:3px}
  .site-tokohiggs .user-id-control #game-id{font-size:14px;padding-inline:5px}
  .site-tokohiggs .user-id-control #check-btn{min-width:54px;padding-inline:9px;font-size:13px}
}

/* Koreksi: UI kartu tetap memakai bahasa visual TokoHiggs. Dari Topbos hanya
   dipertahankan isi petunjuk dan tombol bantuan. */
.site-tokohiggs .user-id-row #game-id{min-width:0}
.site-tokohiggs .user-id-row #user-id-guide-btn{
  display:grid;
  place-items:center;
  width:44px;
  min-width:44px;
  flex:0 0 44px;
  padding:0;
  border:1.5px solid var(--line);
  border-radius:12px;
  background:#fbfdfc;
}
.site-tokohiggs .user-id-row #user-id-guide-btn:hover,.site-tokohiggs .user-id-row #user-id-guide-btn:focus-visible{
  border-color:var(--brand);
  background:#fff;
  outline:0;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent);
}
.site-tokohiggs .user-id-row #user-id-guide-btn img{display:block;width:30px;height:30px}
.site-tokohiggs .user-id-copy{margin:9px 0 0;line-height:1.45}
@media (max-width:370px){
  .site-tokohiggs .user-id-row{gap:6px}
  .site-tokohiggs .user-id-row #user-id-guide-btn{width:40px;min-width:40px;flex-basis:40px}
  .site-tokohiggs .user-id-row #check-btn{padding-inline:14px}
}


/* == BAR BAYAR BAWAH + warna tema konsisten =================== */
/* app.js:32 menimpa --brand dengan warna tema tenant, tapi --brand-d tetap hijau
   bawaan → semua gradasi jadi biru→hijau (tombol, header, chip aktif) terlihat pudar.
   Diturunkan dari --brand supaya selalu senada, berapa pun warna tema tenant. */
:root{--brand-d:color-mix(in srgb, var(--brand) 72%, #000)}

/* Bar bayar: label Total + harga besar di kiri, tombol tegas di kanan. */
.summary{
  border:none;
  border-radius:14px;
  padding:12px 14px;
  box-shadow:0 8px 26px rgba(20,60,40,.16);
}
.summary > div{display:flex;flex-direction:column;min-width:0}
.summary > div::before{
  content:"Total";
  font-size:11.5px;font-weight:600;color:var(--muted);line-height:1.35;
}
.summary > div br{display:none}
/* Nama produk tak perlu diulang — kartunya sudah tersorot di daftar. */
.summary #sum-product{display:none}
.summary #sum-price{color:var(--txt);font-size:21px;font-weight:800;line-height:1.2}

#buy-btn{
  background:var(--brand);   /* SOLID, bukan gradasi dua warna */
  box-shadow:none;
  border-radius:12px;
  padding:13px 22px;
  font-size:15px;
}
#buy-btn::after{content:" →"}
#buy-btn:disabled{opacity:.4}


/* == BARIS KATA KUNCI DI H1 ==================================== */
/* Frasa kunci dibaca Google sebagai bagian H1, tapi tampil kecil supaya
   nama merek tetap jadi yang menonjol di banner. */
.h1-kw{
  display:block;
  margin-top:4px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.01em;
  opacity:.82;
  text-transform:none;
}


/* == PANDUAN TOKO: editorial storefront ======================== */
/* Konten tetap hadir lengkap di HTML server. Di layar lebar ia keluar dari
   kolom checkout yang sempit supaya terasa sebagai panduan, bukan lampiran. */
.seo-artikel{
  --seo-soft:color-mix(in srgb,var(--brand) 8%,#f7faf8);
  --seo-line:color-mix(in srgb,var(--brand) 16%,var(--line));
  width:min(880px,calc(100vw - 32px));
  margin:30px 50% 18px;
  transform:translateX(-50%);
  overflow:hidden;
  color:var(--txt);
  background:#fff;
  border:1px solid var(--seo-line);
  border-radius:26px 26px 26px 8px;
  box-shadow:0 22px 70px color-mix(in srgb,var(--brand) 12%,transparent);
  font-size:15px;
  line-height:1.72;
}
.seo-article-head{
  position:relative;
  isolation:isolate;
  padding:34px 38px 30px;
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--brand) 13%,#fff),#fff 64%),
    #fff;
  border-bottom:1px solid var(--seo-line);
}
.seo-article-head::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0 0 0 58%;
  opacity:.38;
  background-image:
    linear-gradient(45deg,var(--seo-line) 25%,transparent 25%),
    linear-gradient(-45deg,var(--seo-line) 25%,transparent 25%);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000);
  mask-image:linear-gradient(90deg,transparent,#000);
}
.seo-eyebrow{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  color:var(--brand-d);
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.seo-eyebrow span{width:26px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--brand),var(--gold))}
.seo-artikel h2{
  max-width:720px;
  margin:0;
  font-family:"Trebuchet MS","Aptos Display",system-ui,sans-serif;
  font-size:clamp(25px,3.2vw,36px);
  font-weight:900;
  letter-spacing:-.035em;
  line-height:1.12;
}
.seo-lead{max-width:730px;margin:15px 0 0;color:color-mix(in srgb,var(--txt) 76%,var(--muted));font-size:16px;line-height:1.72}
.seo-route{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:10px;
  max-width:680px;
  margin-top:23px;
  padding:10px;
  border:1px solid var(--seo-line);
  border-radius:15px 15px 15px 5px;
  background:rgba(255,255,255,.78);
  box-shadow:0 8px 24px color-mix(in srgb,var(--brand) 8%,transparent);
}
.seo-route span{padding:5px 8px;text-align:center;color:var(--txt);font-size:12px;font-weight:850;line-height:1.25}
.seo-route i{color:var(--brand);font-style:normal;font-weight:900}
.seo-article-body{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  padding:22px;
  background:linear-gradient(180deg,#fff,var(--seo-soft));
}
.seo-block{
  position:relative;
  min-width:0;
  padding:22px 23px 20px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--seo-line);
  border-radius:18px 18px 18px 6px;
  box-shadow:5px 5px 0 color-mix(in srgb,var(--brand) 5%,transparent);
}
.seo-block::before{
  content:"";
  position:absolute;
  left:-1px;
  top:22px;
  width:4px;
  height:34px;
  border-radius:0 4px 4px 0;
  background:linear-gradient(var(--brand),var(--gold));
}
.seo-block-label{margin-bottom:7px;color:var(--brand-d);font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.seo-artikel h3{
  margin:0 0 12px;
  font-family:"Trebuchet MS","Aptos Display",system-ui,sans-serif;
  font-size:19px;
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.25;
}
.seo-copy p{margin:0 0 11px;color:color-mix(in srgb,var(--txt) 84%,var(--muted))}
.seo-copy p:last-child{margin-bottom:0}
.seo-steps,.seo-faq-block{grid-column:1/-1}
.seo-step-list{
  counter-reset:seo-step;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}
.seo-step-list li{counter-increment:seo-step;display:flex;gap:10px;align-items:flex-start;color:color-mix(in srgb,var(--txt) 84%,var(--muted))}
.seo-step-list li::before{
  content:counter(seo-step);
  flex:0 0 26px;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:9px 9px 9px 3px;
  color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-d));
  font-size:11px;
  font-weight:900;
  box-shadow:0 5px 12px color-mix(in srgb,var(--brand) 20%,transparent);
}
.seo-faq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.seo-faq{
  padding:0;
  overflow:hidden;
  border:1px solid var(--seo-line);
  border-radius:13px 13px 13px 4px;
  background:var(--seo-soft);
}
.seo-faq summary{
  min-height:58px;
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 14px;
  color:var(--txt);
  font-size:13.5px;
  font-weight:800;
  line-height:1.35;
}
.seo-faq summary::-webkit-details-marker{display:none}
.seo-faq summary::after{
  content:"+";
  flex:0 0 26px;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:var(--brand-d);
  background:#fff;
  border:1px solid var(--seo-line);
  font-size:17px;
  line-height:1;
}
.seo-faq[open]{background:#fff}
.seo-faq[open] summary::after{content:"−"}
.seo-faq p{margin:0;padding:0 14px 15px;color:var(--muted);font-size:13.5px;line-height:1.62}
.seo-faq summary:focus-visible,.seo-return:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 36%,transparent);outline-offset:3px}
.seo-return{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:20px 26px;
  color:#fff;
  background:linear-gradient(120deg,var(--brand-d),var(--brand));
  text-decoration:none;
}
.seo-return span{font-family:"Trebuchet MS","Aptos Display",system-ui,sans-serif;font-size:17px;font-weight:900;line-height:1.25}
.seo-return small{display:block;margin-bottom:3px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.72}
.seo-return b{flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.35);border-radius:12px 12px 12px 4px;font-size:20px;transition:transform .16s ease,background .16s ease}
.seo-return:hover b{transform:translateY(-3px);background:rgba(255,255,255,.12)}

@media (max-width:700px){
  .seo-artikel{width:auto;margin:24px 0 14px;transform:none;border-radius:21px 21px 21px 7px;font-size:14px}
  .seo-article-head{padding:25px 20px 22px}
  .seo-artikel h2{font-size:24px;line-height:1.16}
  .seo-lead{font-size:14.5px;line-height:1.68}
  .seo-route{gap:4px;margin-top:18px;padding:7px}
  .seo-route span{padding:5px 2px;font-size:10.5px}
  .seo-article-body{grid-template-columns:1fr;padding:12px;gap:12px}
  .seo-block,.seo-steps,.seo-faq-block{grid-column:1;padding:19px 18px 17px}
  .seo-artikel h3{font-size:17px}
  .seo-step-list{grid-template-columns:1fr}
  .seo-faq-list{grid-template-columns:1fr}
  .seo-faq summary{min-height:52px;font-size:13px}
  .seo-return{padding:17px 18px}
  .seo-return span{font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  .seo-return b{transition:none}
}


/* == TOMBOL BANTUAN TELEGRAM (melayang) ======================== */
/* Diletakkan di atas bar bayar yang lengket supaya tidak saling menutupi.
   Warna resmi Telegram — dikenali pembeli tanpa perlu membaca tulisannya. */
.bantuan-tg{
  position:fixed;
  right:14px;
  bottom:96px;              /* bar bayar ±73px + jarak aman */
  z-index:12;               /* tetap di atas bar, tetapi di bawah modal (20+) */
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:10px 14px 10px 11px;
  border-radius:26px;
  background:linear-gradient(135deg,#2AABEE,#229ED9);
  color:#fff;
  font-size:13.5px;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(34,158,217,.42);
  transition:transform .14s ease, box-shadow .14s ease;
}
.bantuan-tg svg{width:20px;height:20px;flex-shrink:0}
.bantuan-tg:hover{transform:translateY(-2px);box-shadow:0 9px 24px rgba(34,158,217,.5)}
.bantuan-tg:active{transform:translateY(0)}

/* Mobile: ikon saja agar tidak bersaing dengan tombol checkout. Ruang bawah
   dan scroll-padding menjaga bidang terakhir tidak tertutup bar pembayaran. */
@media (max-width:700px){
  html{scroll-padding-bottom:calc(112px + env(safe-area-inset-bottom))}
  .wrap{padding-bottom:calc(82px + env(safe-area-inset-bottom))}
  .bantuan-tg{
    right:14px;
    bottom:calc(102px + env(safe-area-inset-bottom));
    width:44px;
    height:44px;
    padding:0;
    justify-content:center;
    gap:0;
  }
  .bantuan-tg>.bantuan-copy{display:none}
}

/* == MOBILE CHECKOUT FLOW V2 ======================================== */
/* Netral-kan kanvas: bidang kosong tidak lagi terbaca sebagai layar hijau
   yang gagal memuat. Warna tenant tetap menjadi aksen interaktif. */
:root{--bg:#f4f6fa;--line:#dfe5ee;--txt:#162033;--muted:#667085}
body{background:var(--bg)}
.wrap{max-width:960px;padding:0 16px 34px}
/* Isi header disejajarkan dengan kolom konten. Sebelumnya nama toko menempel
   di tepi layar sementara kartu mulai ~260px ke dalam, sehingga bilah atas
   terbaca terlepas dari halamannya di layar lebar. */
.hdr{padding-inline:max(16px,calc((100% - 960px) / 2 + 16px))}
.card{scroll-margin-top:72px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.prod{
  min-width:0;min-height:92px;
  display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;
  align-content:center;column-gap:10px;row-gap:7px;padding:12px;
}
.prod .ic{grid-row:1/3;width:42px;height:42px}
.site-tokohiggs .prod.prod-image-native .ic img{width:42px;height:42px}
.prod .n{min-width:0;font-size:13.5px;line-height:1.25;overflow-wrap:anywhere}
.prod .p{justify-self:start;padding:6px 10px;border-radius:9px;font-size:12.5px;line-height:1}
/* ── Bar bayar: SATU komposisi untuk semua lebar ──────────────────────
   Sebelumnya blok ini hanya hidup di dalam @media (max-width:700px), jadi
   desktop memakai bar yang lain sama sekali: sticky, satu baris, 70px, dan
   TANPA baris jaminan (karena .summary-assurance tetap display:none di luar
   breakpoint itu). Sekarang ponsel dan desktop memakai bar yang sama —
   melayang, dua baris, 91px — dan lebarnya mengikuti kolom 520px sendiri:
   left/right 11px + max-width 498px + margin auto = 11px masuk dari tiap
   sisi bingkai, baik bingkainya selebar layar maupun selebar 520px.
   `bottom` sengaja TIDAK diatur di sini; pemiliknya blok navigasi bawah
   supaya bar selalu duduk di atas bilah nav. */
.summary{
  position:fixed;z-index:15;left:11px;right:11px;
  width:auto;max-width:498px;margin:0 auto;padding:8px 10px 10px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 10px;
  border:1px solid color-mix(in srgb,var(--brand) 34%,#dfe5ee);border-radius:17px;
  box-shadow:0 14px 36px rgba(19,31,55,.22);
}
/* WAJIB: display:grid di atas meng-override atribut [hidden] bawaan, sama
   seperti .overlay. Tanpa baris ini updateSummary() yang menulis s.hidden
   tidak berpengaruh apa pun. */
.summary[hidden]{display:none}
.summary-assurance{
  display:block;grid-column:1/-1;padding-bottom:6px;border-bottom:1px solid var(--line);
  color:var(--brand-d);font-size:11.5px;font-weight:800;
}
.summary > div::before{font-size:10.5px}
.summary #sum-price{font-size:19px}
#buy-btn{min-width:148px;padding:12px 14px;font-size:13.5px}
.store-load-failed .product-card{border-color:#f1b8b3}

@media (max-width:700px){
  html{scroll-padding-top:62px;scroll-padding-bottom:calc(126px + env(safe-area-inset-bottom))}
  body{background:#f4f6fa}
  .hdr{padding:10px 12px}
  .brand{gap:8px;font-size:16px}
  .brand img{height:34px;max-width:44px;object-fit:contain;border-radius:9px}
  /* max-width 44px di atas ditujukan untuk ikon persegi; logo nama memanjang
     dan akan teremas jadi tak terbaca kalau ikut aturan itu. */
  .brand img#brand-wordmark{height:22px;max-width:min(52vw,170px);border-radius:0}
  .hdr-actions{gap:5px}
  .link{padding:7px 9px;font-size:11.5px}
  .wrap{width:100%;max-width:520px;padding:0 11px calc(132px + env(safe-area-inset-bottom))}
  /* Kolom konten menyempit ke 520px; header mengikuti supaya tetap sejajar
     pada lebar antara 520px dan 700px. Di bawah itu keduanya jatuh ke 12px. */
  .hdr{padding-inline:max(12px,calc((100% - 520px) / 2 + 11px))}
  .site-tokohiggs .hero{
    min-height:174px;margin:10px 0 12px;padding:17px 15px 49px;
    border-radius:17px;background-position:53% center;
  }
  .site-tokohiggs .hero-copy{max-width:60%}
  .site-tokohiggs .hero h1{max-width:190px;font-size:23px}
  .site-tokohiggs .hero p{max-width:190px;margin-top:7px;font-size:11.5px;line-height:1.38}
  .site-tokohiggs .hero .badge{margin-bottom:8px;padding:4px 7px;font-size:9.5px}
  .site-tokohiggs .hgi-brand-mark{width:94px;height:34px}
  .site-tokohiggs .hero-trust{left:9px;right:9px;bottom:9px;gap:5px}
  .site-tokohiggs .hero-trust span{padding:6px 4px;font-size:9.5px}
  .card{margin-bottom:10px;padding:14px;border-radius:15px;box-shadow:0 3px 12px rgba(23,34,56,.05)}
  .card h2{margin-bottom:11px;font-size:14px}
  .card h2 .num{width:24px;height:24px;border-radius:8px}
  .tabs{position:sticky;top:54px;z-index:3;margin:0 -4px 11px;padding:4px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px)}
  .tabs button{padding:8px 10px;font-size:12px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .prod{min-height:96px;grid-template-columns:38px minmax(0,1fr);column-gap:7px;padding:10px 9px;border-width:1.5px;border-radius:13px}
  .prod .ic{width:36px;height:36px}
  .site-tokohiggs .prod.prod-image-native .ic img{width:36px;height:36px}
  .prod .n{font-size:12px;line-height:1.22}
  .prod .p{padding:6px 8px;font-size:11.5px}
  .user-id-row{gap:6px}
  .user-id-row #check-btn{padding-inline:14px}
  .user-id-copy{font-size:11.5px;line-height:1.45}
  /* Bar bayar tidak lagi diatur di sini: komposisinya kini sama untuk semua
     lebar, lihat blok .summary di atas breakpoint ini. */
  .bantuan-tg{right:13px;bottom:calc(118px + env(safe-area-inset-bottom));width:42px;height:42px}
  .seo-artikel{margin-top:18px}
}

@media (max-width:360px){
  .grid{grid-template-columns:1fr}
  .prod{min-height:76px;grid-template-columns:42px minmax(0,1fr)}
  #buy-btn{min-width:132px;padding-inline:11px;font-size:12.5px}
}

.foot{padding:22px 8px 4px;text-align:center;color:var(--muted)}
.foot-links{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.foot-links a,.foot-links button{
  border:0;background:transparent;padding:6px;color:var(--brand-d);
  font:inherit;font-size:13px;font-weight:800;text-decoration:none;cursor:pointer;
}
.foot-links a:hover,.foot-links button:hover{text-decoration:underline}
.foot small{display:block;margin-top:6px;font-size:11px;line-height:1.5}
.seo-jelajah{
  width:min(880px,calc(100vw - 32px));margin:24px 50% 0;transform:translateX(-50%);
  padding:13px 16px;border:1px solid var(--line);border-radius:14px;background:#fff;
  color:var(--muted);font-size:12.5px;line-height:1.7;text-align:center;
}
.seo-jelajah a{color:var(--brand-d);font-weight:750;text-decoration:none}
.seo-jelajah a:hover{text-decoration:underline}
@media (max-width:700px){
  .seo-jelajah{width:auto;margin:18px 0 0;transform:none}
}

/* == EXPERIENCE BRANDING: bantuan, pembayaran, dan pelacakan ========== */
/* Kotak info, bukan teks abu. Email kini opsional, jadi kalimat inilah yang
   memberi tahu apa yang hilang bila dikosongkan; ia harus terlihat. Saat
   formatnya salah, kotak yang sama berubah merah lewat data-kind="error". */
.email-help{
  display:flex;align-items:flex-start;gap:8px;
  margin:9px 0 0;padding:9px 11px;
  border:1px solid color-mix(in srgb,var(--brand) 26%,var(--line));
  border-radius:11px;
  background:color-mix(in srgb,var(--brand) 7%,#fff);
  color:var(--brand-d);
  font-size:11.5px;line-height:1.5;
}
.email-help::before{
  content:"i";
  flex:0 0 15px;width:15px;height:15px;margin-top:1px;
  display:grid;place-items:center;border-radius:50%;
  background:var(--brand);color:#fff;
  font-size:10px;font-weight:900;font-style:normal;line-height:1;
}
.email-help[data-kind="error"]{border-color:#f2c9c5;background:var(--err-bg)}
.email-help[data-kind="error"]::before{content:"!";background:var(--err-tx)}
button:focus-visible,.bantuan-tg:focus-visible,.track-ticket button:focus-visible,
.order-ticket-actions button:focus-visible{
  outline:3px solid color-mix(in srgb,var(--brand) 38%,transparent);
  outline-offset:3px;
}
.payment-card,.track-card{
  max-height:calc(100dvh - 24px);
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.visual-logo{
  position:relative;
  display:flex;
  align-items:center;
  min-width:52px;
  height:32px;
}
.visual-logo img{
  position:relative;
  z-index:1;
  display:block;
  width:auto;
  max-width:132px;
  height:100%;
  margin:0;
  border-radius:0;
  object-fit:contain;
  object-position:left center;
}
.visual-logo-fallback{
  display:none;
  place-items:center;
  min-width:52px;
  height:28px;
  padding:0 9px;
  border-radius:9px;
  background:#152540;
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
}
.visual-logo.asset-failed .visual-logo-fallback{display:grid}
.visual-logo.asset-failed img{display:none}
.pay-status-logo{margin:0 0 10px}
.track-status-logo{height:29px;margin:13px 15px 0}
.pay-state-head>div,.track-status-head>div{min-width:0}
.pay-state-symbol,.track-status-icon{
  position:relative;
  overflow:hidden;
}
.status-asset-fallback{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
}
.pay-state-symbol.has-asset{
  width:58px;
  height:58px;
  flex-basis:58px;
  border-radius:16px;
  background:color-mix(in srgb,var(--brand) 9%,#fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 16%,#dfe5ee);
}
.track-status-icon.has-asset{
  width:62px;
  height:62px;
  flex-basis:62px;
  border-radius:17px;
  background:rgba(255,255,255,.76);
  box-shadow:inset 0 0 0 1px rgba(30,52,80,.09),0 7px 18px rgba(30,52,80,.10);
}
.pay-state-symbol.has-asset img,.track-status-icon.has-asset img{
  position:absolute;
  z-index:1;
  inset:3px;
  display:block;
  width:calc(100% - 6px);
  height:calc(100% - 6px);
  margin:0;
  border-radius:0;
  object-fit:contain;
}
.has-asset>.status-asset-fallback{opacity:0}
.has-asset.asset-failed>.status-asset-fallback{opacity:1}
.has-asset.asset-failed>img{display:none}

/* Karakter adalah identitas utama tombol; ikon Telegram menjadi badge kanal. */
.bantuan-tg{
  gap:9px;
  min-height:58px;
  padding:5px 15px 5px 5px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:22px 22px 22px 8px;
  background:linear-gradient(135deg,#168ecb,#2aabee);
  box-shadow:0 10px 28px rgba(23,109,160,.34);
}
.bantuan-avatar{
  position:relative;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  flex:0 0 48px;
  overflow:visible;
  border-radius:17px 17px 17px 6px;
  background:linear-gradient(145deg,#f6f9ff,#dfeaff);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);
}
.bantuan-avatar-fallback{
  color:#22466f;
  font-size:12px;
  font-weight:950;
  letter-spacing:.04em;
}
.bantuan-avatar.has-asset>.bantuan-avatar-fallback{opacity:0}
.bantuan-avatar.has-asset.asset-failed>.bantuan-avatar-fallback{opacity:1}
.bantuan-avatar>img{
  position:absolute;
  z-index:1;
  inset:2px;
  display:block;
  width:44px;
  height:44px;
  margin:0;
  border-radius:15px 15px 15px 5px;
  object-fit:contain;
}
.bantuan-avatar.asset-failed>img{display:none}
.bantuan-channel-badge{
  position:absolute;
  z-index:2;
  right:-5px;
  bottom:-4px;
  display:grid;
  place-items:center;
  width:21px;
  height:21px;
  border:2px solid #fff;
  border-radius:50%;
  background:#229ed9;
  color:#fff;
  box-shadow:0 3px 8px rgba(17,68,104,.28);
}
.bantuan-channel-badge svg{width:12px;height:12px}
.bantuan-copy{display:flex;flex-direction:column;min-width:0;line-height:1.08}
.bantuan-copy small{font-size:9px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;opacity:.78}
.bantuan-copy b{max-width:132px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}

@media (max-width:700px){
  .bantuan-tg{
    right:13px;
    bottom:calc(130px + env(safe-area-inset-bottom));
    width:54px;
    height:54px;
    min-height:54px;
    padding:3px;
    border-radius:19px 19px 19px 7px;
  }
  .bantuan-avatar{width:46px;height:46px;flex-basis:46px;border-radius:16px 16px 16px 6px}
  .bantuan-avatar>img{width:42px;height:42px}
  .bantuan-copy{display:none}
  .pay-state-symbol.has-asset{width:52px;height:52px;flex-basis:52px}
  .track-status-icon.has-asset{width:56px;height:56px;flex-basis:56px}
}

@media (prefers-reduced-motion:reduce){
  .bantuan-tg{transition:none}
  .bantuan-tg:hover{transform:none}
}
/* Commercial catalog: server-effective price, Flash Sale and secure tracking. */
.product-card .tabs button.active,
.product-card .prod.active{
  border-color:#4f6fe7;
  background:linear-gradient(135deg,#eef2ff,#fff);
  color:#16233f;
  box-shadow:0 8px 20px rgba(58,83,173,.14);
}
.product-card .tabs button.active{background:linear-gradient(135deg,#5e7df0,#465fca);color:#fff}
.prod{
  position:relative;
  appearance:none;
  width:100%;
  color:#16233f;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.prod-price{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.prod-price strong{color:#3453c5;font-size:14px;line-height:1.1;white-space:nowrap}
.prod-price del{color:#8a94a8;font-size:11px;font-weight:700;white-space:nowrap}
.prod-points{display:inline-flex;align-items:center;padding:3px 7px;border-radius:999px;background:#fff4d6;color:#8a5a00;font-size:10.5px;font-weight:900;line-height:1;white-space:nowrap}
.promo-badge{
  position:absolute;
  z-index:2;
  top:7px;
  right:7px;
  padding:5px 10px;
  background:#d92d83;
  color:#fff;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  font-size:10px;
  font-weight:900;
  letter-spacing:.05em;
}
.promo-copy{display:flex;grid-column:1/-1;flex-direction:column;gap:2px;min-width:0}
.promo-copy b{color:#d92d83;font-size:11px;line-height:1.2}
.promo-copy small{color:#667085;font-size:9.5px;line-height:1.25}
.flash-sale{
  margin:2px 0 15px;
  padding:12px;
  overflow:hidden;
  border:1px solid #cfd8f6;
  border-radius:18px;
  background:linear-gradient(145deg,#111d39,#1c2d56);
  box-shadow:0 14px 34px rgba(17,29,57,.18);
}
.flash-sale[hidden]{display:none}
.flash-sale-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px;color:#fff}
.flash-sale-head h3{margin:7px 0 0;color:#fff;font-size:16px;line-height:1.15}
.flash-sale-head p{max-width:150px;margin:0;color:#dce5ff;font-size:10px;line-height:1.35;text-align:right}
.flash-ticket{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:4px 13px;
  background:#d92d83;
  color:#fff;
  clip-path:polygon(9px 0,100% 0,100% 70%,calc(100% - 9px) 100%,0 100%,0 9px);
  font-size:10px;
  font-weight:950;
  letter-spacing:.13em;
}
.flash-products{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(205px,75%);
  gap:9px;
  overflow-x:auto;
  padding:2px 2px 7px;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
}
.flash-products .prod{min-height:106px;scroll-snap-align:start;background:#fff;border-color:#cbd6f4}
.flash-products .prod.active{border-color:#f0c54d;box-shadow:0 0 0 2px rgba(240,197,77,.3)}
.catalog-empty{grid-column:1/-1;margin:5px 0;color:#667085;font-size:13px}
.track-security{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid #cbd8f4;border-radius:14px;background:#f5f8ff;color:#17233d}
.track-security b{font-size:15px}
.track-security span{color:#5f6b82;font-size:12px;line-height:1.5}
.prod:focus-visible,
.tabs button:focus-visible,
.flash-products button:focus-visible{
  outline:3px solid #f2c94c;
  outline-offset:3px;
}
@media (min-width:760px){
  .flash-products{grid-auto-flow:initial;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
}
@media (max-width:520px){
  .flash-sale{margin-inline:-2px;padding:10px;border-radius:15px}
  .flash-sale-head{align-items:flex-start;flex-direction:column;gap:5px}
  .flash-sale-head p{max-width:none;text-align:left}
  .flash-products{grid-auto-columns:minmax(196px,84%)}
}
@media (prefers-reduced-motion:reduce){
  .flash-products{scroll-behavior:auto}
  .prod,.tabs button{transition:none!important}
  .prod:hover{transform:none!important}
}

/* == CUSTOMER STOREFRONT: trusted game counter ======================= */
.checkout-benefits{
  margin:0 0 15px;
  padding:12px;
  border:1px solid #cbd6ef;
  border-radius:16px;
  background:linear-gradient(150deg,#f7f9ff,#eef3ff);
  color:#17233d;
}
.checkout-benefits-head,.external-pay-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
}
.checkout-benefits-head{margin-bottom:9px}
.checkout-benefits-head>span,.external-pay-head>span{
  font-size:11px;
  font-weight:950;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.checkout-benefits-head small,.external-pay-head small{
  color:#68758d;
  font-size:10.5px;
  line-height:1.3;
  text-align:right;
}
.benefit-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.benefit-card{
  min-width:0;
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  align-items:center;
  gap:9px;
  padding:11px;
  border:1.5px solid #cfd8eb;
  border-radius:13px;
  background:#fff;
  color:#17233d;
  text-align:left;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.benefit-card:hover{border-color:#6f83d7;transform:translateY(-1px)}
.benefit-card.active{
  border-color:#4f6fe7;
  background:linear-gradient(145deg,#fff,#edf2ff);
  box-shadow:0 0 0 3px rgba(79,111,231,.12);
}
.benefit-card.locked{background:#f5f7fb;color:#6e7890}
.benefit-card>span:last-child{display:flex;min-width:0;flex-direction:column;gap:1px}
.benefit-card b{font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.benefit-card strong{font-size:13.5px;line-height:1.25;overflow-wrap:anywhere}
.benefit-card small{color:#6b778f;font-size:9.5px;line-height:1.35}
.benefit-icon{
  width:36px;height:36px;display:grid;place-items:center;border-radius:11px;
  color:#fff;font-size:12px;font-weight:950;letter-spacing:-.02em;
}
.benefit-icon.wallet{background:linear-gradient(145deg,#3159d5,#263e91)}
.benefit-icon.points{background:linear-gradient(145deg,#efb735,#be7410)}
.benefit-note{margin:9px 1px 0;color:#5e6c85;font-size:10.5px;line-height:1.45}
.external-pay-head{margin:0 0 9px;padding-top:13px;border-top:1px dashed #cbd4e7}
.spender-card{
  position:relative;
  overflow:hidden;
  border-color:#cfd8f2;
  background:linear-gradient(155deg,#fff,#f5f7ff);
}
.account-spender-card{
  margin-top:11px;
  padding:16px;
  border:1px solid #cfd8f2;
  border-radius:18px;
  box-shadow:0 10px 24px rgba(31,50,99,.08);
}
.spender-card[hidden]{display:none}
.spender-card::after{
  content:"";position:absolute;right:-34px;top:-48px;width:120px;height:120px;
  border:18px solid rgba(79,111,231,.07);border-radius:50%;pointer-events:none;
}
.spender-head{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.section-kicker{display:block;color:#5c70bd;font-size:9px;font-weight:950;letter-spacing:.14em}
.spender-head h2{margin:3px 0 2px;font-size:17px}
.spender-head p{margin:0;color:#68758c;font-size:11px;line-height:1.45}
.spender-trophy{
  width:39px;height:39px;display:grid;place-items:center;flex:0 0 39px;
  border-radius:13px;background:linear-gradient(145deg,#ffd861,#eea719);
  color:#6f4200;font-size:18px;box-shadow:0 7px 16px rgba(206,135,19,.23);
}
.spender-periods{
  position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);
  gap:4px;margin:13px 0 8px;padding:4px;border-radius:12px;background:#e9edf8;
}
.spender-periods button{
  border:0;border-radius:9px;padding:8px 6px;background:transparent;
  color:#64708a;font-size:11px;font-weight:850;
}
.spender-periods button[aria-selected="true"]{background:#fff;color:#2e4eb3;box-shadow:0 3px 9px rgba(31,50,99,.1)}
.spender-state{padding:13px 5px;color:#6d7890;font-size:12px;text-align:center}
.spender-list{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.spender-list li{
  display:grid;grid-template-columns:24px 34px minmax(0,1fr) auto;align-items:center;gap:8px;
  min-width:0;padding:9px;border:1px solid #e0e5f1;border-radius:12px;background:rgba(255,255,255,.92);
}
.spender-list li.spender-no-avatar{grid-template-columns:24px minmax(0,1fr) auto}
.spender-rank{color:#8791a5;font-size:12px;font-weight:950;text-align:center}
.spender-list li:first-child .spender-rank{color:#b77708}
.spender-avatar{
  width:34px;height:34px;display:grid;place-items:center;border-radius:11px;
  color:#fff;font-size:14px;font-weight:950;
}
.spender-person{display:flex;min-width:0;flex-direction:column}
.spender-person strong{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spender-person small{display:flex;flex-wrap:wrap;gap:1px 7px;color:#7a8499;font-size:9.5px}
.spender-email,.spender-orders{min-width:0}
.spender-email{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spender-orders{white-space:nowrap}
.spender-list li>b{color:#2e4fb8;font-size:11px;white-space:nowrap}
.spender-zone{display:block;margin-top:8px;color:#8a93a5;font-size:9.5px;text-align:right}

@media (max-width:360px){
  .benefit-grid{grid-template-columns:1fr}
  .account-spender-card{padding:12px}
  .spender-list li{grid-template-columns:22px 30px minmax(0,1fr)}
  .spender-avatar{width:30px;height:30px}
  .spender-list li>b{grid-column:3}
}

/* Bekas modal akun (overlay, kartu, tab) dihapus: area akun kini halaman. */
.account-loading,.account-error{
  margin:12px 16px 0;padding:11px 13px;border-radius:12px;
  background:#fff;color:#667085;font-size:12px;
}
.account-error{border:1px solid #f2c7c2;background:#fff2f0;color:#9e2921}
.account-loading[hidden],.account-error[hidden]{display:none}
.account-panel[hidden]{display:none}
.player-pass{
  position:relative;overflow:hidden;padding:18px;border-radius:20px;
  background:
    linear-gradient(115deg,rgba(255,255,255,.08),transparent 42%),
    linear-gradient(145deg,#142348,#243d77);
  color:#fff;box-shadow:0 14px 30px rgba(20,35,72,.25);
}
.player-pass::before,.player-pass::after{
  content:"";position:absolute;top:118px;width:22px;height:22px;border-radius:50%;
  background:#f3f5fa;
}
.player-pass::before{left:-11px}.player-pass::after{right:-11px}
.player-pass-top{display:flex;align-items:center;gap:12px;min-width:0}
.player-avatar{
  width:54px;height:54px;display:grid;place-items:center;flex:0 0 54px;
  border:2px solid rgba(255,255,255,.74);border-radius:17px;
  color:#fff;font-size:24px;font-weight:950;box-shadow:0 8px 20px rgba(5,12,30,.28);
}
.player-avatar:disabled{cursor:default;opacity:1}
.avatar-orbit{background:linear-gradient(145deg,#587cff,#2e45a2)}
.avatar-bolt{background:linear-gradient(145deg,#ffba3b,#c96a0d)}
.avatar-crown{background:linear-gradient(145deg,#9a69f7,#5933a8)}
.avatar-nova{background:linear-gradient(145deg,#ef5d8f,#a5225c)}
.avatar-jade{background:linear-gradient(145deg,#35bf9a,#14705d)}
.avatar-pixel{background:linear-gradient(145deg,#3c526f,#172539)}
.avatar-initials{background:linear-gradient(145deg,#4269d8,#183469);letter-spacing:.03em}
.avatar-disabled{display:none}
.player-identity{display:flex;min-width:0;flex:1;flex-direction:column}
.player-identity strong{font-size:16px;line-height:1.25}
.player-identity>span{overflow:hidden;color:#cbd6ee;font-size:10.5px;text-overflow:ellipsis;white-space:nowrap}
.player-identity-actions{display:flex;flex-wrap:wrap;gap:5px 12px;margin-top:4px}
.player-identity-actions button{
  padding:0;border:0;background:transparent;
  color:#ffd46b;font-size:10px;font-weight:850;
}
.profile-result{min-height:1.2em;margin-top:3px;color:#d7e2f6;font-size:9px;line-height:1.25}
.profile-result:empty{display:none}
.profile-editor{
  display:grid;gap:7px;margin:13px 0 2px;padding:11px;
  border:1px solid rgba(255,255,255,.18);border-radius:13px;
  background:rgba(7,15,35,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.profile-editor[hidden]{display:none}
.profile-editor>label{
  color:#dbe5f8;font-size:9.5px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;
}
.profile-editor-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px}
.profile-editor input{
  width:100%;min-width:0;min-height:40px;padding:9px 10px;
  border:1px solid rgba(255,255,255,.26);border-radius:10px;
  background:rgba(255,255,255,.96);color:#17233d;font:inherit;font-size:16px;
}
.profile-editor input:focus{border-color:#8ea7ff;outline:3px solid rgba(142,167,255,.24)}
.profile-editor input[aria-invalid="true"]{border-color:#ffbd91;outline-color:rgba(255,189,145,.24)}
.profile-editor button{
  min-height:40px;padding:8px 11px;border-radius:10px;font-size:10.5px;font-weight:900;
}
.profile-save{border:0;background:#ffd66f;color:#604300}
.profile-cancel{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#e5ecfa}
.profile-editor button:disabled,.profile-editor input:disabled{cursor:wait;opacity:.64}
#acct-name-help{color:#b9c8e5;font-size:9px;line-height:1.4}
.profile-editor-status{min-height:1.25em;color:#ffd195;font-size:9px;line-height:1.35}
.tier-chip{
  align-self:flex-start;max-width:96px;padding:6px 9px;border:1px solid rgba(255,220,125,.5);
  border-radius:999px;background:rgba(246,182,12,.14);color:#ffe198;
  font-size:9.5px;font-weight:950;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.avatar-picker{
  margin:13px 0 2px;padding:10px;border:1px solid rgba(255,255,255,.17);
  border-radius:13px;background:rgba(7,15,35,.24);
}
.avatar-picker[hidden]{display:none}
.avatar-picker>span{display:block;margin-bottom:7px;color:#cbd5eb;font-size:9.5px}
.avatar-options{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.avatar-options button{
  aspect-ratio:1;border:1px solid rgba(255,255,255,.18);border-radius:10px;
  background:rgba(255,255,255,.09);color:#fff;font-size:16px;
}
.avatar-options button[aria-pressed="true"]{border-color:#ffd46b;background:rgba(255,212,107,.19)}
.avatar-options button:disabled{cursor:wait;opacity:.58}
.avatar-save-status{display:block;min-height:1.2em;margin-top:7px;color:#dce6fb;font-size:9.5px}
.account-meters{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:18px 0 13px;padding-top:15px;border-top:1px dashed rgba(255,255,255,.24)}
.account-meters>div{display:flex;min-width:0;flex-direction:column;gap:2px}
.account-meters>div+div{padding-left:16px;border-left:1px solid rgba(255,255,255,.16)}
.account-meters span{color:#b9c7e5;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.account-meters strong{font-size:20px;line-height:1.2;overflow-wrap:anywhere}
.tier-progress>div:first-child{display:flex;justify-content:space-between;gap:10px;color:#c9d4ea;font-size:9.5px}
.tier-progress b{color:#fff;font-size:9.5px}
.tier-track{height:7px;margin-top:7px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.14)}
.tier-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ffd45d,#ffae36);transition:width .35s ease}
.checkin-card,.account-rank{
  margin-top:11px;border:1px solid #dce3f0;border-radius:16px;background:#fff;
  box-shadow:0 4px 12px rgba(24,39,76,.05);
}
.checkin-card{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px}
.checkin-mark{
  width:40px;height:40px;display:grid;place-items:center;border-radius:13px;
  background:linear-gradient(145deg,#fff0bb,#ffd55e);color:#805200;font-size:12px;font-weight:950;
}
.checkin-card>div:nth-child(2){display:flex;min-width:0;flex-direction:column}
.checkin-card strong{font-size:13px}
.checkin-card span{color:#717d92;font-size:10.5px;line-height:1.4}
.checkin-card button{
  border:0;border-radius:11px;padding:9px 11px;background:#2f52be;color:#fff;font-size:10.5px;font-weight:900;
}
.checkin-card button:disabled{background:#e6e9f0;color:#7f899b;opacity:1}
.account-rank{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 10px;padding:11px 13px;
  border-color:#ead9a8;background:linear-gradient(145deg,#fffbeb,#fff);
}
.account-rank[hidden]{display:none}
.account-rank span{color:#80621c;font-size:9.5px;font-weight:850;text-transform:uppercase}
.account-rank strong{grid-row:1/3;grid-column:2;color:#b57708;font-size:24px}
.account-rank small{color:#6d7481;font-size:10px}
.account-filter{display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:8px;margin-bottom:10px}
.account-filter.one{grid-template-columns:1fr}
.account-filter label{display:flex;min-width:0;flex-direction:column;gap:5px}
.account-filter label>span{color:#657188;font-size:9.5px;font-weight:850;letter-spacing:.05em;text-transform:uppercase}
.account-filter input,.account-filter select{
  width:100%;min-height:42px;border:1px solid #d9e0ec;border-radius:11px;
  background:#fff;color:#17233d;padding:10px 11px;font:inherit;font-size:12px;
}
.account-list{display:flex;flex-direction:column;gap:7px}
.account-list-state{padding:9px 2px;color:#6e788b;font-size:11px;text-align:center}
.account-list-state:empty{display:none}
.account-entry{
  position:relative;display:grid;min-width:0;gap:9px;padding:12px;
  border:1px solid #dfe5ef;border-radius:14px;background:#fff;color:#17233d;
}
.transaction-entry{grid-template-columns:minmax(0,1fr) auto}
.transaction-entry>button{
  grid-column:1/-1;border:1px solid #cbd6f0;border-radius:9px;padding:7px;
  background:#f4f7ff;color:#3151b2;font-size:10.5px;font-weight:850;
}
.entry-main{display:flex;min-width:0;flex-direction:column}
.entry-main strong{font-size:12.5px;line-height:1.3;overflow-wrap:anywhere}
.entry-main small,.entry-main>span:not(.entry-kicker){color:#7a8495;font-size:9.5px;line-height:1.4}
.entry-kicker{margin-bottom:2px;color:#526bbd;font-size:9px;font-weight:900;letter-spacing:.06em}
.entry-value{display:flex;align-items:flex-end;flex-direction:column;gap:5px}
.entry-value>strong{font-size:12px;white-space:nowrap}
.entry-status{padding:4px 7px;border-radius:99px;background:#fff4d6;color:#805b08;font-size:8.5px;font-weight:900}
.entry-status.ok{background:#e7f7ed;color:#167044}
.entry-status.err{background:#fdecea;color:#9f2922}
.mutation-entry{grid-template-columns:32px minmax(0,1fr) auto;align-items:center}
.mutation-sign{
  width:32px;height:32px;display:grid;place-items:center;border-radius:11px;
  font-size:15px;font-weight:950;
}
.mutation-sign.pos{background:#e6f7ed;color:#187246}.mutation-sign.neg{background:#fdecea;color:#a72d25}
.entry-value.pos{color:#187246}.entry-value.neg{color:#a72d25}
.account-more{
  width:100%;margin-top:9px;border:1px solid #cbd6ef;border-radius:11px;
  padding:10px;background:#fff;color:#3151af;font-size:11px;font-weight:900;
}
.account-more[hidden]{display:none}
.account-footer{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));border-top:1px solid #dce2ec;background:#fff;
  grid-row:5;
}
.account-footer span{color:#7a8495;font-size:9.5px}
.account-footer button{border:0;border-radius:10px;padding:8px 12px;background:#eef1f6;color:#5c6678;font-size:10.5px;font-weight:850}

.account-panel button:focus-visible,.account-panel input:focus-visible,.account-panel select:focus-visible,
.benefit-card:focus-visible,.spender-periods button:focus-visible{
  outline:3px solid rgba(79,111,231,.3);outline-offset:2px;
}

@media (max-width:700px){
  .player-pass{padding:15px;border-radius:18px}
  .player-pass::before,.player-pass::after{top:111px;background:#f3f5fa}
  .player-avatar{width:49px;height:49px;flex-basis:49px;border-radius:15px;font-size:21px}
  .player-identity strong{font-size:14.5px}
  .tier-chip{max-width:78px;padding:5px 7px}
  .account-meters{margin-top:15px}
  .account-meters strong{font-size:18px}
  .checkin-card{grid-template-columns:36px minmax(0,1fr) auto;padding:10px}
  .checkin-mark{width:36px;height:36px}
  .account-filter{grid-template-columns:minmax(0,1fr) 126px}
}

@media (max-width:390px){
  .account-filter{grid-template-columns:1fr}
  .profile-editor-row{grid-template-columns:1fr 1fr}
  .profile-editor input{grid-column:1/-1}
  .profile-editor button{width:100%}
  .player-identity-actions{gap:4px 9px}
  .avatar-options{grid-template-columns:repeat(6,1fr);gap:4px}
  .avatar-options button{border-radius:8px;font-size:14px}
  .checkin-card button{padding-inline:8px}
}
/* Safari iOS otomatis melakukan page zoom saat field yang difokuskan berukuran
   kurang dari 16px. Pertahankan pinch zoom aksesibilitas, dan naikkan hanya
   ukuran field pada perangkat sentuh/mobile. */
@media (hover:none), (pointer:coarse), (max-width:700px){
  input,select,textarea,
  .account-filter input,.account-filter select{font-size:16px}
}


@media (prefers-reduced-motion:reduce){
  .benefit-card,.tier-track span{transition:none}
  .benefit-card:hover{transform:none}
}

/* == TOP UP SALDO: alur pelanggan, status, dan riwayat ================= */
.wallet-topup-card[hidden],.wallet-topup-active[hidden]{display:none}
.wallet-topup-card{
  position:relative;margin:0 0 16px;padding:14px;border:1px solid #dce4f0;
  border-radius:16px;background:linear-gradient(155deg,#f9fbff 0%,#fff 56%,#f4f8ff 100%);
  box-shadow:0 10px 26px rgba(40,62,117,.08);overflow:hidden
}
.wallet-topup-card::before{
  content:"";position:absolute;inset:0 auto 0 0;width:5px;
  background:linear-gradient(180deg,#6080f6,#3155c9 55%,#182958)
}
.wallet-topup-head{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:10px;align-items:center}
.wallet-topup-head h4{margin:1px 0 2px;font-size:16px;line-height:1.2}
.wallet-topup-head p{margin:0;color:#6c778b;font-size:10.5px;line-height:1.4}
.wallet-topup-head>strong{
  align-self:start;padding:6px 9px;border-radius:99px;color:#25459f;background:#e8efff;
  font-size:11px;white-space:nowrap
}
.wallet-topup-mark{
  position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:13px;
  color:#fff;background:linear-gradient(145deg,#6482f2,#2f50b9);font-size:12px;font-weight:900;
  box-shadow:0 7px 16px rgba(53,82,177,.24)
}
.wallet-topup-mark span{
  position:absolute;right:-4px;top:-5px;display:grid;place-items:center;width:19px;height:19px;
  border:2px solid #fff;border-radius:50%;background:#54b979;font-size:12px
}
.wallet-topup-steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:13px 0 14px;padding:0;
  list-style:none;color:#7b8597;font-size:9px;font-weight:800;text-align:center
}
.wallet-topup-steps li{position:relative;display:grid;grid-template-columns:20px 1fr;align-items:center;gap:4px}
.wallet-topup-steps li:not(:last-child)::after{
  content:"";position:absolute;z-index:0;left:calc(50% + 14px);right:-4px;top:10px;height:1px;background:#d5ddea
}
.wallet-topup-steps span{
  position:relative;z-index:1;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:#e9edf4;color:#78849b
}
.wallet-topup-steps .active{color:#2949a3}.wallet-topup-steps .active span{background:#5c78e8;color:#fff}
#wallet-topup-form fieldset{margin:0;padding:0;border:0}
#wallet-topup-form legend{
  margin-bottom:7px;color:#536078;font-size:9.5px;font-weight:900;letter-spacing:.055em;text-transform:uppercase
}
.wallet-topup-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.wallet-topup-presets button{
  min-width:0;border:1px solid #dce3ee;border-radius:10px;padding:9px 5px;background:#fff;color:#29364d;
  font-size:10.5px;font-weight:850;cursor:pointer
}
.wallet-topup-presets button:hover{border-color:#9eb0eb;background:#f4f7ff}
.wallet-topup-presets button[aria-pressed="true"]{
  border-color:#5473e8;background:#eaf0ff;color:#23439d;box-shadow:inset 0 0 0 1px #5473e8
}
.wallet-topup-custom{display:grid;gap:5px;margin-top:9px}
.wallet-topup-custom>span:first-child{color:#68748a;font-size:9.5px;font-weight:800}
.wallet-topup-custom>small{color:#788397;font-size:9.5px}
.wallet-topup-input{display:grid;grid-template-columns:auto 1fr;align-items:center;border:1px solid #d9e1ec;border-radius:11px;background:#fff;overflow:hidden}
.wallet-topup-input:focus-within{border-color:#5b78e8;box-shadow:0 0 0 3px rgba(91,120,232,.12)}
.wallet-topup-input b{padding-left:11px;color:#405170;font-size:12px}
.wallet-topup-input input{width:100%;border:0!important;box-shadow:none!important;padding:10px 11px 10px 7px;background:transparent;font-size:16px;font-weight:800}
.wallet-topup-quote{margin-top:11px}
.wallet-topup-quote>p,.wallet-topup-error{
  margin:0;padding:10px;border-radius:10px;background:#f2f5fa;color:#6d788b;font-size:10.5px;text-align:center
}
.wallet-topup-error{border:1px solid #efd1cc;background:#fff3f1;color:#9d3029}
.wallet-topup-spinner{
  display:inline-block;width:10px;height:10px;margin-right:4px;border:2px solid #c7d2ef;
  border-top-color:#4d6cde;border-radius:50%;animation:wallet-topup-spin .7s linear infinite
}
@keyframes wallet-topup-spin{to{transform:rotate(360deg)}}
.wallet-topup-quote-head{display:flex;justify-content:space-between;gap:8px;align-items:end;margin-bottom:7px}
.wallet-topup-quote-head strong{font-size:11px}.wallet-topup-quote-head span{color:#788397;font-size:9px}
.wallet-topup-methods{display:grid;gap:6px}
.wallet-topup-methods button{
  display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:9px;align-items:center;width:100%;
  min-height:55px;padding:8px;border:1px solid #dce3ed;border-radius:11px;background:#fff;color:#1e293d;
  text-align:left;cursor:pointer
}
.wallet-topup-methods button:hover{border-color:#9eafe8;background:#f8faff}
.wallet-topup-methods button.active{border-color:#5473e8;background:#f0f4ff;box-shadow:inset 0 0 0 1px #5473e8}
.wallet-topup-methods button>span:nth-child(2){display:grid;gap:2px;min-width:0}
.wallet-topup-methods button b{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wallet-topup-methods button small{color:#778399;font-size:8.8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wallet-topup-methods button>strong{font-size:10.5px;white-space:nowrap}
.wallet-topup-method-logo{
  display:grid;place-items:center;width:38px;height:32px;border:1px solid #e8ecf2;border-radius:8px;background:#fff;
  color:#485976;font-size:8px;font-weight:850;overflow:hidden
}
.wallet-topup-method-logo img{display:block;width:30px;max-height:22px;object-fit:contain}
.wallet-topup-breakdown{
  display:flex;justify-content:space-between;gap:10px;margin-top:7px;padding:8px 10px;border-radius:9px;
  background:#ecf8f0;color:#276941;font-size:10px
}
.wallet-topup-submit{
  width:100%;margin-top:10px;border:0;border-radius:11px;padding:11px 14px;color:#fff;
  background:linear-gradient(135deg,#5f7df0,#3654be);font-size:11.5px;font-weight:900;cursor:pointer;
  box-shadow:0 8px 16px rgba(49,78,180,.19)
}
.wallet-topup-submit:disabled{box-shadow:none;background:#ccd4e5;color:#7b879e;cursor:not-allowed}
.wallet-topup-message{min-height:14px;margin:7px 0 0;color:#657289;font-size:9.5px;text-align:center}
.wallet-topup-active{margin-top:12px;padding:11px;border:1px solid #ebce82;border-radius:12px;background:#fff9e9}
.wallet-topup-active-head{display:flex;justify-content:space-between;gap:8px;margin-bottom:7px}
.wallet-topup-active-head strong{color:#76550e;font-size:11px}.wallet-topup-active-head span{color:#88723f;font-size:9px}
.account-subhead{display:flex;align-items:end;justify-content:space-between;gap:10px;margin:5px 0 9px}
.account-subhead>div{display:grid;gap:2px}.account-subhead strong{font-size:12px}.account-subhead span{color:#778296;font-size:9.5px}
.account-subhead button{
  border:1px solid #dfe5ee;border-radius:9px;padding:7px 9px;background:#fff;color:#506079;font-size:9px;font-weight:800
}
.wallet-topup-history:empty{display:none}.wallet-topup-history-list{display:grid;gap:6px;margin-bottom:10px}
.wallet-topup-record{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.8fr) auto;gap:9px;align-items:center;
  padding:9px;border:1px solid #dfe5ed;border-left:4px solid #d7b552;border-radius:10px;background:#fff
}
.wallet-topup-record.process{border-left-color:#5f7be8}.wallet-topup-record.done{border-left-color:#50a971}
.wallet-topup-record.fail{border-left-color:#cf6258}.wallet-topup-record.review{border-left-color:#ab72d6}
.wallet-topup-record>div{display:grid;gap:1px;min-width:0}
.wallet-topup-record span,.wallet-topup-record small{color:#788397;font-size:8.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wallet-topup-record strong{font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wallet-topup-record button{
  border:0;border-radius:8px;padding:8px 10px;background:#4e6bd8;color:#fff;font-size:9px;font-weight:850;white-space:nowrap
}
.wallet-topup-record.compact{padding:8px}
.wallet-topup-record.compact>div:nth-child(2){text-align:right}
.wallet-topup-instruction{grid-column:1/-1;display:grid;gap:5px;justify-items:center;margin:2px 0 0;padding:10px;border:1px solid #e0e5ef;border-radius:11px;background:#fff;color:#687386}
.wallet-topup-instruction img{display:block;width:min(180px,70vw);aspect-ratio:1;object-fit:contain;border-radius:8px;background:#fff}
.wallet-topup-instruction figcaption,.wallet-topup-instruction span{font-size:9px;line-height:1.35;text-align:center}
.wallet-topup-va{justify-items:start}.wallet-topup-va strong{font-size:16px;letter-spacing:.08em;color:#14233d;word-break:break-all}

@media (max-width:420px){
  .wallet-topup-card{padding:12px 10px 13px}
  .wallet-topup-head{grid-template-columns:42px minmax(0,1fr)}
  .wallet-topup-head>strong{grid-column:2;justify-self:start;margin-top:-4px}
  .wallet-topup-mark{width:40px;height:40px}
  .wallet-topup-presets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wallet-topup-steps li{grid-template-columns:18px 1fr;font-size:8px}
  .wallet-topup-steps span{width:18px;height:18px}
  .wallet-topup-methods button{grid-template-columns:34px minmax(0,1fr);gap:7px}
  .wallet-topup-methods button>strong{grid-column:2}
  .wallet-topup-method-logo{width:34px;height:30px}
  .wallet-topup-record{grid-template-columns:1fr auto}
  .wallet-topup-record>div:nth-child(2){text-align:right}
  .wallet-topup-record button{grid-column:1/-1;width:100%}
  .wallet-topup-active-head{display:grid}
}
@media (hover:none),(pointer:coarse),(max-width:700px){
  .wallet-topup-input input{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.wallet-topup-spinner{animation:none}}
/* ── Pesan massal (bulk order) ─────────────────────────────────────────── */
.bulk-field{display:block;margin:0 0 14px}
.bulk-field>span{display:block;font-size:.82rem;font-weight:600;margin-bottom:6px}
.bulk-field select,.bulk-field textarea{width:100%;padding:10px 12px;border:1px solid var(--line,#d8dde8);border-radius:10px;font:inherit;background:#fff}
.bulk-field textarea{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.86rem;line-height:1.5;resize:vertical}
/* HARUS sesudah aturan di atas: spesifisitasnya sama, jadi yang menang adalah
   yang belakangan. Di bawah 16px iOS meng-auto-zoom saat kotak disentuh, dan
   sejak pesan massal pindah ke halaman utama kotak inilah yang paling sering
   disentuh. Situs ini sengaja tidak memakai user-scalable=no. */
@media (hover:none),(pointer:coarse),(max-width:700px){
  .bulk-field textarea{font-size:16px}
}
.bulk-field small{display:block;margin-top:6px;color:var(--muted,#64748b);font-size:.78rem}
.bulk-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.bulk-secondary{padding:11px 16px;border:1px solid var(--line,#d8dde8);background:#fff;border-radius:10px;font:inherit;font-weight:600;cursor:pointer}
.bulk-secondary:disabled{opacity:.55;cursor:not-allowed}
.bulk-summary{margin:14px 0;padding:14px;border:1px solid var(--line,#d8dde8);border-radius:12px;background:#f8fafc}
.bulk-sum-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.bulk-sum-grid>div{display:flex;flex-direction:column;gap:2px}
.bulk-sum-grid span{font-size:.76rem;color:var(--muted,#64748b)}
.bulk-sum-grid strong{font-size:1rem}
.bulk-eta{margin:12px 0 0;font-size:.84rem;line-height:1.5}
.bulk-eta small{color:var(--muted,#64748b)}
.bulk-warn{margin:10px 0 0;padding:9px 11px;border-radius:9px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;font-size:.83rem}
.bulk-rows-report{margin:0 0 14px;padding:12px;border:1px solid #fecaca;background:#fef2f2;border-radius:10px;font-size:.83rem;color:#991b1b}
.bulk-rows-report ul{margin:6px 0 0;padding-left:18px}
.bulk-batch{margin-top:10px}
.bulk-empty{color:var(--muted,#64748b);font-size:.85rem}
.bulk-batch-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.bulk-chips{display:flex;gap:6px;flex-wrap:wrap}
.bulk-chip{display:inline-block;padding:3px 9px;border-radius:999px;font-size:.75rem;font-weight:600;background:#e2e8f0;color:#334155}
/* Lima ember dibedakan warnanya dengan sengaja: menunggu-stok dan sedang-ditinjau
   TIDAK boleh terlihat seperti gagal, karena ordernya masih hidup. */
.bulk-chip-completed{background:#dcfce7;color:#166534}
.bulk-chip-partial{background:#fef9c3;color:#854d0e}
.bulk-chip-failed{background:#fee2e2;color:#991b1b}
.bulk-chip-waiting_stock{background:#e0f2fe;color:#075985}
.bulk-chip-manual_review{background:#ede9fe;color:#5b21b6}
.bulk-chip-processing{background:#e2e8f0;color:#334155}
.bulk-table-wrap{overflow-x:auto}
.bulk-table{width:100%;border-collapse:collapse;font-size:.84rem}
.bulk-table th,.bulk-table td{padding:7px 9px;border-bottom:1px solid var(--line,#e5e9f0);text-align:left;white-space:nowrap}
.bulk-table th{font-size:.76rem;color:var(--muted,#64748b);font-weight:600}
.bulk-no{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;letter-spacing:.02em;
  background:none;border:1px solid var(--line,#e5e9f0);border-radius:6px;padding:2px 6px;cursor:pointer;
  color:inherit;display:inline-flex;align-items:center;gap:5px;line-height:1.5}
.bulk-no:hover{border-color:var(--brand,#2563eb);color:var(--brand,#2563eb)}
.bulk-no span{opacity:.55;font-size:.9em}
.bulk-no-kosong{color:var(--muted,#64748b)}
.bulk-lacak{margin:8px 0 0;font-size:.78rem;color:var(--muted,#64748b)}

/* Tombol Pesan duduk DI BAWAH ringkasan: pembeli membaca total, sisa saldo, dan
   baris yang dilewati dulu, baru sampai ke tombol yang memindahkan uang. */
#bulk-submit-btn{width:100%;margin-top:4px}
.bulk-actions{margin-bottom:4px}

.bulk-history{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.bulk-hist{padding:5px 10px;border:1px solid var(--line,#d8dde8);background:#fff;border-radius:999px;font:inherit;font-size:.78rem;cursor:pointer;color:var(--muted,#64748b)}
.bulk-hist.is-active{border-color:#3959be;color:#3959be;font-weight:600}

/* Dialog konfirmasi bulk. z-index di atas overlay Akun (20) supaya tidak
   tertimbun; .overlay[hidden] tetap berlaku karena kelasnya dipakai ulang. */
.bulk-confirm-overlay{z-index:40}
.bulk-confirm-card{max-width:400px;text-align:left}
.bulk-confirm-card h3{text-align:center;margin-bottom:4px}
.bulk-confirm-sub{margin:0 0 14px;text-align:center;font-size:.84rem;color:var(--muted,#64748b)}
.bulk-confirm-detail{border:1px solid var(--line,#e5e9f0);border-radius:12px;padding:12px 14px;font-size:.88rem}
.bulk-confirm-detail div{display:flex;justify-content:space-between;gap:12px;padding:4px 0}
.bulk-confirm-detail div+div{border-top:1px solid var(--line,#eef1f6)}
.bulk-confirm-detail span{color:var(--muted,#64748b)}
.bulk-confirm-detail strong{text-align:right}
.bulk-confirm-actions{display:flex;gap:10px;margin-top:16px}
.bulk-confirm-actions button{flex:1;padding:12px;border-radius:12px;font:inherit;font-weight:700;cursor:pointer;border:1px solid var(--line,#d8dde8)}
.bulk-confirm-no{background:#fff;color:var(--muted,#475569)}
.bulk-confirm-yes{background:#3959be;color:#fff;border-color:#3959be}

/* Catatan format dua baris: beri jarak baca, dan tebalkan hanya polanya. */
#bulk-rows-hint{line-height:1.55}
#bulk-rows-hint b{color:var(--tx,#0f172a);font-weight:700}

/* Alur pemasangan Telegram Mini App hanya muncul untuk tautan bertanda
   tgMiniAppInstall=1. Prompt native tetap dipicu oleh klik buyer. */
.tg-miniapp-install-overlay{z-index:60;padding:18px;background:rgba(9,18,38,.62);backdrop-filter:blur(5px)}
.tg-miniapp-install-card{width:min(420px,100%);margin:auto;padding:24px;border:1px solid rgba(255,255,255,.65);border-radius:22px;background:#fff;box-shadow:0 24px 70px rgba(9,18,38,.28);text-align:center}
.tg-miniapp-install-mark{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 13px;border-radius:16px;background:linear-gradient(145deg,#e8efff,#dce7ff);color:#315ac7;font-size:27px;font-weight:800}
.tg-miniapp-install-card h3{margin:0;color:#14233d;font-size:1.25rem}
.tg-miniapp-install-card p{margin:9px 0 19px;color:#64748b;font-size:.9rem;line-height:1.55}
.tg-miniapp-install-actions{display:grid;grid-template-columns:minmax(90px,.7fr) minmax(190px,1.3fr);gap:9px}
.tg-miniapp-install-actions button{min-height:46px;padding:10px 13px;border-radius:12px;font:inherit;font-weight:700;cursor:pointer}
.tg-miniapp-install-later{border:1px solid #d8deea;background:#fff;color:#526078}
.tg-miniapp-install-confirm{border:1px solid #315ac7;background:#315ac7;color:#fff}
.tg-miniapp-install-confirm:disabled{border-color:#cbd5e1;background:#e2e8f0;color:#64748b;cursor:not-allowed}
@media (max-width:420px){.tg-miniapp-install-card{padding:21px 16px}.tg-miniapp-install-actions{grid-template-columns:1fr}.tg-miniapp-install-confirm{grid-row:1}}

/* ── Banner event per domain ──────────────────────────────────────────
   Diisi app.js dari /store/config.eventBanner. Slider memakai scroll-snap
   bawaan browser supaya swipe di ponsel terasa alami; tombol/dot hanya
   memanggil scrollTo. Saat mode banner+pop-up, kotak banner sudah menempati
   ruangnya (is-landing: visibility hidden) agar kartu pop-up punya tujuan
   yang pasti untuk "tersedot". */
.event-banner{position:relative;margin:0 0 14px}
.event-banner[hidden]{display:none}
.event-banner.is-landing{visibility:hidden}
.event-slider{position:relative;border-radius:16px;overflow:hidden;background:#0b1020;box-shadow:0 8px 24px rgba(20,60,40,.14)}
.event-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.event-track::-webkit-scrollbar{display:none}
.event-slide{position:relative;display:block;flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;aspect-ratio:16/9;-webkit-tap-highlight-color:transparent}
.event-slide img{display:block;width:100%;height:100%;object-fit:cover}
a.event-slide:focus-visible{outline:3px solid #fff;outline-offset:-4px}
/* Tombol geser TIDAK ADA di perangkat sentuh, dan tersembunyi sampai disapa
   tetikus di perangkat lain.
   Menurunkan transparansi tidak menyelesaikan apa pun: selama tombolnya duduk
   di atas gambar, ia tetap menutupi gambar — cuma lebih samar. Di kolom 393px
   tidak ada ruang di sampingnya, jadi satu-satunya cara benar-benar tidak
   menutupi adalah tidak ada di situ. Yang hilang juga tidak banyak: geser
   dengan jari sudah jalan lewat scroll-snap bawaan, banner berganti sendiri,
   dan titik indikator di bawah gambar bisa diketuk.
   padding-bottom 2px yang dulu menambal posisi glyph guillemet ikut hilang —
   isinya kini SVG yang memang di tengah. */
.event-nav{
  position:absolute;top:50%;z-index:2;width:30px;height:30px;transform:translateY(-50%);
  border:0;border-radius:50%;padding:0;cursor:pointer;color:#162033;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:grid;place-items:center;box-shadow:0 2px 7px rgba(0,0,0,.16);
  opacity:0;transition:opacity .18s ease;
}
/* Tetap bisa di-tab: opacity 0, bukan visibility/display, jadi fokus papan
   ketik masih bisa masuk dan memunculkannya lewat :focus-within. */
.event-slider:hover .event-nav,.event-slider:focus-within .event-nav{opacity:1}
@media (hover:none){.event-nav{display:none}}
@media (prefers-reduced-motion:reduce){.event-nav{transition:none}}
.event-nav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.event-nav.prev{left:7px}
.event-nav.next{right:7px}
.event-nav:focus-visible{outline:3px solid #fff;outline-offset:2px}
/* Titik indikator DI BAWAH gambar, bukan di atasnya. Di dalam banner ia
   menutupi baris paling bawah — tempat syarat dan ketentuan berhuruf kecil
   biasanya dicetak. Karena kini duduk di latar halaman yang terang, warnanya
   ikut merek; putih transparan akan lenyap di situ. */
.event-dots{margin-top:9px;display:flex;justify-content:center;gap:6px}
.event-dots button{width:7px;height:7px;padding:0;border:0;border-radius:4px;background:color-mix(in srgb,var(--brand) 28%,#dfe5ee);cursor:pointer;transition:width .25s,background .25s}
.event-dots button.is-on{width:18px;background:var(--brand)}
.event-dots button:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
/* Satu gambar: tombol geser dan titik memang tidak pernah dibuat app.js.
   Aturan ini penjaga kedua kalau ada jalur lain yang menyisipkannya. */
.event-slider.is-single .event-nav,.event-banner.is-single .event-dots{display:none}
.event-banner .event-slider.is-arriving{animation:event-land .5s cubic-bezier(.2,.8,.2,1)}
@keyframes event-land{0%{transform:scale(.92);opacity:.35}65%{transform:scale(1.02);opacity:1}100%{transform:scale(1);opacity:1}}

/* Pop-up event */
.event-popup-overlay{z-index:40;background:rgba(4,20,45,.78);backdrop-filter:blur(2px);transition:opacity .6s ease}
.event-popup-overlay.is-leaving{opacity:0;pointer-events:none}
.event-popup-card{position:relative;width:min(92vw,420px);border-radius:18px;background:#0b1020;box-shadow:0 22px 44px rgba(0,0,0,.42);transform-origin:top left;will-change:transform,opacity}
.event-popup-card.is-flying{position:fixed;margin:0;z-index:3;transition:transform .6s cubic-bezier(.55,0,.3,1),opacity .6s ease-in,border-radius .6s}
.event-popup-body{border-radius:18px;overflow:hidden}
.event-popup-body .event-slider{border-radius:0;box-shadow:none}
.event-popup-body .event-slide{aspect-ratio:auto}
.event-popup-body .event-slide img{height:auto;max-height:calc(100vh - 150px);object-fit:contain}
.event-popup-cta{display:block;padding:12px 16px;text-align:center;color:#fff;font-weight:800;font-size:14px;text-decoration:none;background:linear-gradient(135deg,var(--brand),var(--brand-d))}
.event-popup-cta:focus-visible{outline:3px solid #fff;outline-offset:-4px}
#event-popup-close{position:absolute;z-index:3;top:-14px;right:-14px;width:40px;height:40px;padding:0 0 2px;border:0;border-radius:50%;background:#fff;color:#162033;font-size:26px;line-height:1;display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.35);cursor:pointer}
#event-popup-close:focus-visible{outline:3px solid #fffbc3;outline-offset:2px}
body.event-popup-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .event-popup-overlay,.event-popup-card.is-flying,.event-dots button{transition:none}
  .event-banner .event-slider.is-arriving{animation:none}
}

/* ══ NAVIGASI BAWAH & HALAMAN (bukan modal) ══════════════════════════
   Satu struktur untuk mobile dan desktop: bilah tetap di bawah, 4 slot.
   Area akun (pesanan, saldo, akun, masuk, bantuan) kini halaman ber-URL,
   bukan overlay. Tinggi bilah dipegang --nav-h supaya bar bayar sticky dan
   tombol CS melayang bisa menghitung jaraknya sendiri. */
:root{--nav-h:60px}
.view[hidden]{display:none}
.wrap{padding-bottom:calc(var(--nav-h) + 18px + env(safe-area-inset-bottom))}
/* Bar bayar duduk DI ATAS bilah nav, bukan tertimpa. */
.summary{bottom:calc(var(--nav-h) + 30px + env(safe-area-inset-bottom))}
/* Bar bayar naik 30px (tombol tengah nav), jadi tombol CS ikut naik. Tingginya
   kini 91px di SEMUA lebar, jadi jaraknya satu angka: 30 + 91 + 13 = 134.
   Sebelumnya desktop memakai 114px — angka untuk bar satu baris 70px — yang
   sesudah bar disamakan berarti tombol CS duduk 7px di dalam bar. */
.bantuan-tg{bottom:calc(var(--nav-h) + 134px + env(safe-area-inset-bottom))}
/* Di luar halaman Top Up tidak ada bar bayar: tombol CS turun mendekati nav.
   Di halaman Bantuan/Masuk ia disembunyikan — kartu CS-nya sudah ada di situ. */
body:not([data-page="topup"]) .bantuan-tg{bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom))}
body[data-page="bantuan"] .bantuan-tg,body[data-page="masuk"] .bantuan-tg{display:none}

.bnav{
  position:fixed;left:0;right:0;bottom:0;z-index:15;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -6px 22px rgba(20,30,60,.08);
}
.bnav ul{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(5,1fr);height:var(--nav-h);max-width:480px}
.bnav li{position:relative;min-width:0}
.bnav a{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  height:100%;padding:6px 4px 4px;color:var(--muted);text-decoration:none;
  font-size:11px;font-weight:600;line-height:1;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.bnav svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.bnav a[aria-current="page"]{color:var(--brand-d);font-weight:800}
.bnav a[aria-current="page"] svg{fill:color-mix(in srgb,var(--brand) 22%,#fff);stroke-width:2.2}
.bnav a[aria-current="page"]::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:34px;height:3px;border-radius:0 0 3px 3px;background:var(--brand)}
.bnav a:focus-visible{outline:2px solid var(--brand);outline-offset:-4px;border-radius:12px}
.bnav .bnav-dot{position:absolute;top:8px;left:calc(50% + 7px);width:8px;height:8px;border-radius:999px;background:var(--err-tx);border:2px solid #fff}
.bnav .bnav-dot.pts{width:auto;height:auto;top:5px;padding:2px 4px;background:var(--gold);color:#3a2a00;font-size:9px;font-weight:900;line-height:1}
@media (min-width:760px){
  :root{--nav-h:64px}
  .bnav a{font-size:12px;gap:4px}
  .bnav svg{width:26px;height:26px}
  .bnav a:hover{background:color-mix(in srgb,var(--brand) 6%,#fff)}
}
@media (prefers-reduced-motion:no-preference){
  .bnav a{transition:color .15s,background-color .15s}
}

/* Halaman non-toko */
.page-head{padding:18px 0 10px}
.page-head h1{margin:0;font-size:22px;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.page-head p{margin:5px 0 0;color:var(--muted);font-size:13px;line-height:1.5}
.page-head .section-kicker{margin-bottom:2px}
.page-back{
  display:inline-flex;align-items:center;gap:6px;margin:12px 0 4px;padding:8px 2px;
  border:0;background:transparent;color:var(--brand-d);font:inherit;font-size:13px;font-weight:700;
  text-decoration:none;cursor:pointer;
}
.page-back[hidden]{display:none}
.track-page-card .row{margin:0}
.track-result:empty{display:none}
.track-result{margin-bottom:4px}
.account-panel[hidden]{display:none}
.account-body[hidden]{display:none}
.account-loading,.account-error{margin:0 0 12px}
.account-menu{display:flex;flex-direction:column;margin:12px 0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.account-menu a{
  display:flex;align-items:center;gap:12px;padding:13px 14px;border-top:1px solid var(--line);
  color:var(--txt);text-decoration:none;font-weight:650;font-size:13.5px;
}
.account-menu a:first-child{border-top:0}
.account-menu a[hidden]{display:none}
.account-menu a>span{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;flex:0 0 30px;background:color-mix(in srgb,var(--brand) 12%,#fff);color:var(--brand-d);font-size:12px;font-weight:900}
.account-menu a>i{margin-left:auto;font-style:normal;color:var(--muted);font-size:18px;line-height:1}
.account-menu a:hover{background:#f8fafc}
.account-footer{margin-top:14px}
.login-card{text-align:left}
.login-card .login-back{display:block;margin-top:8px;color:var(--muted)}
.login-card .login-msg{margin-top:8px;min-height:1em}
.btn-outline{background:#fff;color:var(--brand-d);border:1.5px solid var(--brand);box-shadow:none}
.bantuan-cs{margin-bottom:12px}
.bantuan-cs[hidden]{display:none}
/* Tombol CS yang sama dengan yang melayang, tapi dirender di alur halaman. */
.bantuan-cs .bantuan-tg{position:static;display:flex;width:100%;max-width:none;bottom:auto;right:auto}
body[data-page="bantuan"] .bantuan-cs .bantuan-tg{display:flex}
/* Kartu CS Telegram di halaman Bantuan */
.cs-card{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;background:#fff;border:1px solid var(--line);color:var(--txt);text-decoration:none;box-shadow:0 1px 3px rgba(20,30,60,.06)}
.cs-card:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
.cs-avatar{width:46px;height:46px;flex:0 0 46px;border-radius:14px;background:#2aabee;color:#fff;display:grid;place-items:center;font-weight:900;font-size:13px;overflow:hidden}
.cs-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.cs-copy{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.cs-copy small{font-size:11.5px;color:var(--muted)}
.cs-copy b{font-size:14.5px;line-height:1.2}
.cs-go{margin-left:auto;font-size:22px;color:var(--muted);line-height:1}

/* Panel pembayaran sebagai bagian halaman /pesanan/<nomor>, bukan overlay.
   Kelas .payment-card dipertahankan untuk strip warna dan isi tiketnya;
   batas modal (lebar 420, tinggi layar, gulir sendiri) dilepas. */
.pay-page{
  position:relative;max-width:none;width:100%;max-height:none;overflow:visible;
  margin:0 0 12px;padding:24px 18px 16px;border:1px solid var(--line);border-radius:16px;background:#fff;
  box-shadow:0 1px 3px rgba(20,30,60,.06);
}
.pay-page[hidden]{display:none}
.pay-page h3{margin-right:0}
.pay-page .page-back{margin:14px 0 0}

/* ══ FASE 3: satu layout untuk semua lebar layar (mengikuti mockup) ══════
   Kolom konten 520px terpusat di desktop juga; header, bilah nav, bar bayar,
   tombol CS, dan artikel SEO mengikuti kolom yang sama. Aturan lama 960px
   (di atas) sengaja ditimpa di sini, bukan dihapus, supaya jejaknya terbaca. */
.wrap{max-width:520px;padding-inline:14px}
.hdr{padding-inline:max(14px,calc((100% - 520px) / 2 + 14px))}
.bnav ul{max-width:520px}
.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.bantuan-tg{right:max(14px,calc((100% - 520px) / 2 + 14px))}
/* Hero tetap seperti produksi tokomd.com: maskot, lambang HGI, badge, dan
   tiga chip keunggulan (Cek nickname / Harga tampil / Status terlacak).
   Ukurannya versi ponsel produksi (aturan max-width:700px di atas) dipakai di
   semua lebar, karena kolomnya kini 520px di desktop juga. */
.site-tokohiggs .hero{min-height:174px;margin:10px 0 12px;padding:17px 15px 49px;border-radius:17px;background-position:53% center}
.site-tokohiggs .hero-copy{max-width:60%}
.site-tokohiggs .hero h1{max-width:190px;font-size:23px}
.site-tokohiggs .hero p{max-width:190px;margin-top:7px;font-size:11.5px;line-height:1.38}
.site-tokohiggs .hero .badge{margin-bottom:8px;padding:4px 7px;font-size:9.5px}
.site-tokohiggs .hgi-brand-mark{width:94px;height:34px}
.site-tokohiggs .hero-trust{left:9px;right:9px;bottom:9px;gap:5px}
.site-tokohiggs .hero-trust span{padding:6px 4px;font-size:9.5px}
/* Artikel SEO ikut kolom: satu kolom seperti di ponsel, di semua lebar. */
.seo-artikel{width:auto;margin:24px 0 14px;transform:none;border-radius:21px 21px 21px 7px;font-size:14px}
.seo-article-body{grid-template-columns:1fr;padding:12px;gap:12px}
.seo-block,.seo-steps,.seo-faq-block{grid-column:1}
.seo-step-list,.seo-faq-list{grid-template-columns:1fr}

/* ══ Bingkai aplikasi di layar lebar (mengikuti pola toko top up populer) ═
   Seluruh toko — header, isi, bar bayar, tombol CS, bilah nav — dibatasi
   selebar kolom 520px di tengah dengan latar samping netral, sehingga di
   desktop pun terasa seperti aplikasi ponsel, bukan situs yang dilebarkan.
   Di bawah 701px tidak ada bingkai: kolom memang selebar layar. */
@media (min-width:701px){
  body{background:#e3e7ee}
  /* Latar bingkai dipasang sebagai kolom tetap setinggi viewport DI BELAKANG
     header dan isi, bukan pada .wrap: kalau pada .wrap, latar baru mulai di
     bawah header sehingga bagian atas bingkai terlihat terpotong. */
  body::before{
    content:"";position:fixed;top:0;bottom:0;left:50%;width:520px;transform:translateX(-50%);z-index:-1;
    background:radial-gradient(900px 360px at 50% -60px,rgba(0,0,0,.06),transparent),var(--bg);
    box-shadow:0 0 0 1px rgba(20,30,60,.06),0 24px 60px rgba(20,30,60,.14);
  }
  .hdr{max-width:520px;margin:0 auto;padding-inline:14px}
  .bnav{left:50%;right:auto;width:520px;transform:translateX(-50%)}
  .bnav ul{max-width:none}
  .bantuan-tg{right:calc((100% - 520px) / 2 + 14px)}
}

/* Keluar = baris merah terakhir di menu Akun (mengikuti mockup), bukan tombol
   terpisah di kartu footer. */
.account-menu button{
  display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;border:0;border-top:1px solid var(--line);
  background:transparent;color:var(--txt);font:inherit;font-weight:650;font-size:13.5px;text-align:left;cursor:pointer;
}
.account-menu button>span{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;flex:0 0 30px;background:color-mix(in srgb,var(--brand) 12%,#fff);color:var(--brand-d);font-size:14px;font-weight:900}
.account-menu button.danger{color:var(--err-tx)}
.account-menu button.danger>span{background:var(--err-bg);color:var(--err-tx)}
.account-menu button:hover{background:#f8fafc}
.account-menu button:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.account-session-note{margin:8px 2px 0;font-size:11.5px}

/* Panah back di header, hanya di halaman lapis kedua (router yang menampilkan). */
.hdr-back{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-right:2px;border-radius:10px;color:#fff;background:rgba(255,255,255,.16);text-decoration:none;flex-shrink:0}
.hdr-back[hidden]{display:none}
.hdr-back svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hdr-back:hover{background:rgba(255,255,255,.26)}
.hdr-back:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Header: [back?][merek ...][aksi]. Merek mengisi sisa ruang supaya aksi tetap di kanan. */
.hdr .brand{flex:1 1 auto}

/* Halaman Top Up: bar Total (fixed, ±91px) melayang di atas bilah nav, jadi
   ruang bawah harus memuat KEDUANYA; kalau tidak, kartu Email dan konten
   terakhir tertutup saat digulir mentok. Halaman lain cukup tinggi nav.
   Berlaku di semua lebar: sejak bar disamakan, di desktop pun ia melayang —
   dulu di sana ia sticky dan ikut mengalir, jadi ruang bawahnya dipangkas
   ke tinggi nav saja dan kini akan menelan kartu terakhir. */
body[data-page="topup"] .wrap{padding-bottom:calc(var(--nav-h) + 116px + env(safe-area-inset-bottom))}
html{scroll-padding-bottom:calc(var(--nav-h) + 116px + env(safe-area-inset-bottom))}

/* Navigasi kategori (SSR) ikut kolom 520px di semua lebar, seperti artikel. */
.seo-jelajah{width:auto;margin:18px 0 0;transform:none}
/* Header sticky harus di atas bar Total (z-index 15) dan bilah nav (15);
   tetap di bawah overlay (20+). */
.hdr{z-index:16}

/* Kartu Isi Saldo di halaman /saldo: dulu dirancang rapat untuk tab modal.
   Sebagai bagian halaman ia disamakan dengan kartu lain (tanpa strip kiri,
   tanpa saldo ganda karena sudah ada di kartu atas), langkah 1-2-3 disusun
   bertumpuk supaya garis penghubung tidak menabrak label, dan huruf dibesarkan. */
.wallet-topup-card{padding:16px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 1px 3px rgba(20,30,60,.06)}
.wallet-topup-card::before{display:none}
.wallet-topup-head{grid-template-columns:46px minmax(0,1fr)}
.wallet-topup-head>strong{display:none}
.wallet-topup-head p{font-size:12px}
.wallet-topup-steps{margin:16px 0;font-size:11px}
.wallet-topup-steps li{grid-template-columns:1fr;grid-template-rows:auto auto;justify-items:center;gap:6px}
.wallet-topup-steps li:not(:last-child)::after{left:calc(50% + 14px);right:calc(-50% + 14px);top:11px;height:2px;background:#dfe5ee}
.wallet-topup-steps span{width:24px;height:24px;font-size:11px}
#wallet-topup-form legend{font-size:11px;margin-bottom:8px}
.wallet-topup-presets{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.wallet-topup-presets button{padding:11px 6px;border-radius:12px;font-size:12.5px}
.wallet-topup-custom{margin-top:12px;gap:6px}
.wallet-topup-custom>span:first-child,.wallet-topup-custom>small{font-size:11px}
.wallet-topup-quote>p{font-size:12.5px}

/* Strip check-in Hari 1..N (siklus berulang). Kotak yang sudah dilalui
   bercentang, kotak hari ini disorot, kotak terakhir berlabel bonus. */
.checkin-card{grid-template-columns:40px minmax(0,1fr) auto;grid-auto-rows:auto}
.checkin-days{grid-column:1/-1;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;margin:4px 0 0;padding:0;list-style:none}
.checkin-days[hidden]{display:none}
.checkin-days li{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px 6px;border:1px solid var(--line);border-radius:12px;background:#f8fafc;color:var(--muted);font-size:10px;font-weight:700;min-width:0}
.checkin-days li>span{font-size:9.5px;letter-spacing:.02em;white-space:nowrap}
.checkin-days li>b{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#e9edf4;color:#78849b;font-size:11px}
.checkin-days li>small{font-size:10px;font-weight:800;color:var(--txt);white-space:nowrap}
.checkin-days li.done{background:color-mix(in srgb,var(--brand) 8%,#fff);border-color:color-mix(in srgb,var(--brand) 30%,var(--line))}
.checkin-days li.done>b{background:var(--ok-tx);color:#fff}
.checkin-days li.today{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 22%,transparent)}
.checkin-days li.today:not(.done)>b{background:var(--brand);color:#fff}
.checkin-days li.bonus>small{color:#8a5a00}
.checkin-days li.bonus{background:#fff7e6;border-color:#f3d68a}
@media (max-width:420px){.checkin-days{gap:4px}.checkin-days li{padding:7px 1px 5px}.checkin-days li>span{font-size:9px}.checkin-days li>small{font-size:9.5px}}

/* ── Pesan isian: galat merah, sukses hijau (data-kind dari fieldMsg di app.js) ── */
[data-kind="error"]{color:var(--err-tx)!important;font-weight:700}
[data-kind="ok"]{color:var(--ok-tx)!important}
.player-pass [data-kind="error"]{color:#ffb4ad!important}
.player-pass [data-kind="ok"]{color:#9be4b4!important}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--err-tx)!important;box-shadow:0 0 0 3px rgba(180,35,24,.14)!important}
.email-help[data-kind="error"]{font-weight:700}

/* ── Bilah nav 5 slot: tombol tengah menonjol (gaya m-banking) ─────────
   Slot tengah = aksi utama (Masuk / Saldo / Akun). Tombol bulat 56px naik
   keluar bilah dengan cincin warna latar halaman supaya terlihat "terpotong"
   dari bilah; labelnya tetap di baris label slot lain. */
.bnav li.center a{justify-content:flex-end;padding-bottom:7px;color:var(--brand-d);font-weight:800}
.bnav .bnav-fab{
  position:absolute;top:-24px;left:50%;transform:translateX(-50%);
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:linear-gradient(145deg,var(--brand),var(--brand-d));
  border:4px solid var(--bg);box-shadow:0 8px 20px color-mix(in srgb,var(--brand) 38%,transparent);
}
.bnav .bnav-fab svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:2.1}
.bnav li.center a[aria-current="page"]::before{display:none}
.bnav li.center a[aria-current="page"] .bnav-fab{background:linear-gradient(145deg,color-mix(in srgb,var(--brand) 88%,#000),color-mix(in srgb,var(--brand-d) 82%,#000));box-shadow:0 8px 22px color-mix(in srgb,var(--brand) 50%,transparent)}
.bnav li.center a[aria-current="page"] .bnav-fab svg{fill:none;stroke-width:2.3}
.bnav li.center .bnav-dot.pts{top:-30px;left:calc(50% + 16px)}
.bnav li.center a:focus-visible{outline:none}
.bnav li.center a:focus-visible .bnav-fab{outline:3px solid var(--gold);outline-offset:2px}
@media (min-width:760px){
  .bnav li.center a:hover{background:transparent}
  .bnav .bnav-fab{width:58px;height:58px;top:-26px}
}
@media (prefers-reduced-motion:no-preference){
  .bnav .bnav-fab{transition:transform .15s,box-shadow .15s}
  .bnav li.center a:active .bnav-fab{transform:translateX(-50%) scale(.94)}
}

/* ── Bantuan: pertanyaan umum (dulu di artikel SEO beranda) ────────── */
.faq-card h2{margin-bottom:6px}
.faq-list{display:flex;flex-direction:column}
.faq-item{border-top:1px solid var(--line);padding:10px 0}
.faq-item:first-child{border-top:0;padding-top:2px}
.faq-item summary{list-style:none;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;cursor:pointer;font-size:13.5px;font-weight:700;line-height:1.4}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex:0 0 auto;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:color-mix(in srgb,var(--brand) 10%,#fff);color:var(--brand-d);font-weight:900}
.faq-item[open] summary::after{content:"\2212"}
.faq-item p{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.55}
.faq-item summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}

/* ── Info: promo, artikel, program poin, tentang toko ────────────────── */
/* Promo dan leaderboard sama-sama daftar gambar bertumpuk. height:auto yang
   membuat gambar leaderboard potret ("panjang ke bawah") tampil utuh tanpa
   dipotong seperti slider 16:9 di beranda. */
.info-promo-list,.info-leaderboard-list{display:flex;flex-direction:column;gap:10px}
.info-promo-list img,.info-leaderboard-list img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}
.info-posts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.info-posts li{border-top:1px solid var(--line)}
.info-posts li:first-child{border-top:0}
.info-posts a{display:flex;flex-direction:column;gap:3px;padding:10px 0;color:var(--txt);text-decoration:none}
.info-posts a b{font-size:13.5px;line-height:1.35}
.info-posts a small{color:var(--muted);font-size:11.5px}
.info-posts a:hover b{color:var(--brand-d)}
.info-more{display:inline-block;margin-top:8px;font-size:13px;font-weight:800;color:var(--brand-d);text-decoration:none}
.info-more:hover{text-decoration:underline}
#info-poin-cta{display:block;text-align:center;text-decoration:none}

/* ── Panduan belanja dilipat (details/summary) ────────────────────────
   Kepala artikel = summary: judul selalu tampil, sisanya terbuka saat ditekan. */
.seo-details summary{list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.seo-details summary::-webkit-details-marker{display:none}
.seo-details summary:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 36%,transparent);outline-offset:-3px}
.seo-toggle{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:10px 16px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;font-size:13px;font-weight:800;box-shadow:0 6px 16px color-mix(in srgb,var(--brand) 30%,transparent)}
/* SVG, bukan karakter U+2304. Glyph itu jarang didukung penuh dan metriknya
   membuatnya duduk tinggi di dalam kotak hurufnya, jadi panahnya terlihat
   menclek di sebelah teks. SVG selalu di tengah, di font apa pun. */
.seo-toggle svg{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.seo-toggle [data-buka]{display:none}
.seo-details[open] .seo-toggle [data-buka]{display:inline}
.seo-details[open] .seo-toggle [data-tutup]{display:none}
.seo-details[open] .seo-toggle svg{transform:rotate(180deg)}
.seo-details:not([open]) .seo-article-head{border-bottom:0}
.seo-article-lead{padding:18px 38px 22px;border-bottom:1px solid var(--seo-line);background:#fff}
.seo-article-lead .seo-lead{margin-top:0}
@media (max-width:700px){.seo-article-lead{padding-inline:20px}}
@media (prefers-reduced-motion:reduce){.seo-toggle svg{transition:none}}

/* ── Header: nama toko huruf kapital di kiri, logo di pojok kanan ─────
   .brand mengisi sisa lebar header; logo dipindah ke ujung kanan lewat order.
   Panah kembali (halaman lapis kedua) tetap di kiri nama. */
.brand{flex:1 1 auto;justify-content:space-between}
.brand img{order:2;margin-left:auto;flex-shrink:0}
/* Logo nama TIDAK ikut pindah ke kanan: ia menggantikan tulisan nama, jadi
   tempatnya di kiri persis seperti tulisan yang digantikannya. Ikon persegi
   tetap di pojok kanan dan keduanya boleh tampil bersama — di header jaraknya
   jauh, jadi tidak terbaca sebagai identitas berganda seperti di kaki halaman. */
.brand img#brand-wordmark{order:0;margin-left:0;margin-right:auto}
.brand span{text-transform:uppercase;letter-spacing:.05em}
.hdr-actions:empty{display:none}

/* ── Kartu saldo (/saldo): satu bahasa dengan kartu pemain di /akun ───
   Memakai .player-pass (gradasi gelap, takik kiri-kanan) supaya Saldo dan
   Akun terasa satu keluarga; .wallet-hero lama diganti kartu ini. */
.wallet-pass{margin-bottom:14px}
.wallet-pass::before,.wallet-pass::after{top:92px}
.wallet-pass-top{display:flex;align-items:center;gap:12px;min-width:0}
.wallet-pass-mark{
  width:54px;height:54px;flex:0 0 54px;display:grid;place-items:center;
  border:2px solid rgba(255,255,255,.74);border-radius:17px;
  background:linear-gradient(145deg,#587cff,#2e45a2);color:#fff;
  font-size:18px;font-weight:950;letter-spacing:.02em;box-shadow:0 8px 20px rgba(5,12,30,.28);
}
.wallet-pass-copy{display:flex;min-width:0;flex:1;flex-direction:column;gap:1px}
.wallet-pass-copy .section-kicker{color:#9fb3e6}
.wallet-pass-copy strong{font-size:16px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wallet-pass-copy small{color:#cbd6ee;font-size:10.5px;line-height:1.35}
.wallet-pass-balance{display:flex;flex-direction:column;gap:3px;margin-top:18px;padding-top:15px;border-top:1px dashed rgba(255,255,255,.24)}
.wallet-pass-balance span{color:#b9c7e5;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.wallet-pass-balance strong{font-size:34px;font-weight:800;line-height:1.05;letter-spacing:-.01em;font-variant-numeric:tabular-nums;text-shadow:0 2px 12px rgba(0,0,0,.25)}
.wallet-pass .wallet-pass-meters{margin:14px 0 0;padding-top:13px;border-top:1px solid rgba(255,255,255,.12)}
.wallet-pass-meters strong{font-size:16px}
.wallet-pass-actions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:15px}
.wallet-pass-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:9px 12px;
  border:1px solid rgba(255,255,255,.22);border-radius:12px;background:rgba(255,255,255,.1);
  color:#fff;font-size:12.5px;font-weight:900;text-decoration:none;
}
.wallet-pass-btn b{width:20px;height:20px;display:grid;place-items:center;border-radius:6px;background:rgba(255,255,255,.16);font-size:13px;line-height:1}
.wallet-pass-btn.primary{border-color:transparent;background:#ffd66f;color:#604300}
.wallet-pass-btn.primary b{background:rgba(96,67,0,.14)}
.wallet-pass-btn:hover{background:rgba(255,255,255,.16)}
.wallet-pass-btn.primary:hover{background:#ffde8a}
.wallet-pass-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Judul halaman difokuskan router saat berpindah (untuk pembaca layar).
   Safari iOS menggambar bingkai fokus untuk fokus programatik itu; judul tidak
   dapat dijangkau Tab (tabindex -1), jadi bingkainya aman dimatikan. */
.page-head h1[tabindex="-1"]:focus{outline:none;box-shadow:none}

/* ── Footer identitas badan usaha (theme.footer, per domain) ──────────
   Dirender server; domain tanpa konfigurasi meninggalkan elemennya hidden.
   Kartu, bukan tabel: daftar berikon terbaca sebagai identitas, sedangkan
   kolom label/nilai versi pertama terbaca seperti dump formulir. */
.ident-foot[hidden]{display:none}
/* Kaki halaman dipimpin SEGEL kredensial, bukan alamat badan usaha.
   Sebelumnya bobotnya terbalik: teks hukum dapat panel putih dan ikon
   berwarna, sementara "Mitra resmi Higgs Games Island" — aset kepercayaan
   terkuat toko — cuma jadi keterangan abu-abu. Sekarang segel itu satu-
   satunya yang berwarna, dan sisanya turun jadi cetakan kecil. */
/* --ident-accent boleh ditimpa inline oleh server per domain; tanpa itu ia
   jatuh ke warna utama toko. Turunan gelapnya dihitung dari nilai yang
   berlaku, jadi keduanya selalu sepakat siapa pun yang menang. */
.ident-foot{margin:24px 0 6px;padding:20px 2px 4px;border-top:1px solid var(--line);color:var(--muted);font-size:12.5px;line-height:1.5;--ident-accent:var(--brand);--ident-accent-d:color-mix(in srgb,var(--ident-accent) 72%,#000)}
/* Logo nama menggantikan TULISAN nama saja; penanda persegi tetap di sebelah
   kirinya, sama seperti di bilah merek. Berkasnya sendiri berbeda dari milik
   bilah merek: di sini latarnya abu terang, di sana gradasi gelap. */
.ident-wordmark{display:block;height:24px;width:auto;max-width:min(100%,200px);object-fit:contain;object-position:left center}
/* bindExperienceImages menaruh .asset-failed di INDUK, jadi gambar yang gagal
   hanya bisa dikenali lewat [hidden] yang dipasang di elemen gambarnya. */
.ident-wordmark[hidden]{display:none}
.ident-segel{margin:0}
.ident-segel>span{
  display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 9px;border-radius:999px;
  background:color-mix(in srgb,var(--ident-accent) 10%,#fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ident-accent) 26%,#fff);
  color:var(--ident-accent-d);font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;line-height:1.25;
}
.ident-segel svg{width:15px;height:15px;flex:0 0 15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Kepala: logo toko di kiri, nama dan deskripsi di kanan. Rata tengah, bukan
   rata atas — deskripsi tenant panjangnya bebas, dan rata atas membuat logo
   menggantung sendirian begitu deskripsinya cuma satu baris. */
.ident-head{display:flex;align-items:center;gap:12px;margin-top:14px}
/* Penanda hanya ada kalau logo toko benar-benar ada. Ukurannya dikunci, bukan
   mengikuti gambar: <img> rusak ber-alt kosong menciut jadi 0px lebar dan
   melenyapkan penandanya tanpa gejala apa pun. Kalau gagal dimuat, seluruh
   kotaknya yang disembunyikan — nama toko tepat di sebelahnya sudah cukup. */
.ident-mark{
  flex:0 0 44px;width:44px;height:44px;overflow:hidden;display:block;
  border-radius:13px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);
}
.ident-mark>img{display:block;width:100%;height:100%;padding:4px;object-fit:contain}
.ident-mark.asset-failed{display:none}
.ident-name{display:block;color:var(--txt);font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
/* Tersembunyi selama logo nama masih sanggup dimuat; display:block di atas
   mengalahkan [hidden] bawaan peramban, jadi harus dinyatakan sendiri. */
.ident-name[hidden]{display:none}
/* Deskripsi memakai theme.seoDescription — teks yang sama dengan hero. */
/* Tanpa max-width. Sempat dibatasi 46ch demi panjang baris "nyaman", tetapi di
   kolom 520px batas itu menyisakan ~150px kosong di kanan dan barisnya patah
   di tengah kalimat tanpa sebab yang terlihat. Teks bodi lain di toko ini juga
   mengisi kolom penuh. */
.ident-desc{margin:5px 0 0;font-size:12.5px;line-height:1.5}

/* ── Identitas hukum: cetakan kecil, bukan blok berpanel ──
   Wajib ada, tidak wajib menonjol. Tanpa panel, tanpa ikon, tanpa label —
   pembeli yang mencarinya sudah tahu bentuknya. */
.ident-legal{margin:16px 0 0;font-size:11.5px;line-height:1.55;color:#8a93a6}
.ident-legal-nama{display:block;color:var(--muted);font-size:12px;font-weight:700}
.ident-kontak{display:block;margin-top:2px;overflow-wrap:anywhere}
/* Pemisah titik antar kontak; <i> dipakai sebagai wadah netral, bukan miring. */
.ident-kontak>i{font-style:normal;margin:0 7px;opacity:.55}
/* Tautan ikut tenang: garis bawah tipis, bukan warna merek tebal. */
.ident-kontak a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.ident-kontak a:hover{color:var(--ident-accent-d);border-bottom-color:currentColor}
/* Label NPWP sebaris, bukan bertumpuk. */
.ident-kontak b{margin-right:5px;color:#a4adbd;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.ident-copy{display:block;margin-top:11px;color:#a4adbd;font-size:11px}