/* games.myiskapay.com — standalone theme, independent of wallet dashboard build. */

:root {
  --bg:          #0b0b0d;
  --bg-elev:    #141418;
  --bg-card:    #1a1a20;
  --bg-card-2:  #20202a;
  --border:     rgba(255,255,255,0.06);
  --border-2:   rgba(255,255,255,0.10);
  --text:       #ececee;
  --text-2:     #a7a7b0;
  /* #6e6e78 hanya mencapai 3,43 di atas --bg-card — di bawah AA, padahal yang
     dipakai warna ini antara lain nama publisher di kartu game dan judul
     kelompok nominal. Diukur ulang di halaman sungguhan, bukan dikira. */
  --text-3:     #82828a;
  --accent:     #ff6a00;
  --accent-2:   #ff9240;
  --accent-10:  color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-20:  color-mix(in srgb, var(--accent) 20%, transparent);
  --success:    #16a34a;
  --danger:     #dc2626;
  --warning:    #f59e0b;
  --radius:     14px;
  --radius-sm:  10px;
  --shadow:     0 8px 40px rgba(0,0,0,0.55);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, 'Figtree', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

/* Layout */
.gm-container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .gm-container { padding: 0 24px; } }

/*
 * Bingkai isi, dibaca blok bersama (lapak, artikel) lewat --ff-wrap/--ff-gutter.
 *
 * Blok itu satu berkas untuk ketujuh template dan dulu membawa lebar serta
 * padding sendiri. Akibatnya blok "Produk & Jasa Toko" menjorok 16px lebih
 * dalam daripada seluruh isi beranda di SETIAP template — padding pembungkus
 * dan padding blok bertumpuk — sementara halaman /lapak dan /artikel memakai
 * bingkai yang sama untuk ketujuh tema, jadi lebar halaman meloncat begitu
 * pembeli berpindah dari beranda. Nilainya WAJIB sama persis dengan
 * .gm-container di atas.
 */
:root { --ff-wrap: 1200px; --ff-gutter: 16px; }
@media (min-width: 768px) { :root { --ff-gutter: 24px; } }

/* Nav */
.gm-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11,11,13,0.85);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.gm-nav-inner {
  display: flex; align-items: center; gap: 16px;
  height: 64px;
}
.gm-logo {
  font-weight: 800; letter-spacing: .5px; font-size: 20px;
  display: inline-flex; align-items: center; gap: 8px;
}
.gm-logo-mark {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #111; font-weight: 900;
}
/* --- Nav search with autocomplete dropdown --- */
.gm-search-wrap {
  position: relative;
  flex: 1; min-width: 0; max-width: 460px;
  display: none;
}
@media (min-width: 768px) { .gm-search-wrap { display: block; } }

.gm-search {
  width: 100%;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 999px; padding: 10px 40px 10px 40px;
  color: var(--text); font-size: 14px;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  outline: none;
}
.gm-search::placeholder { color: var(--text-3); }
.gm-search:focus {
  border-color: var(--accent-2);
  background: var(--bg-elev, #121217);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}
.gm-search-wrap.is-open .gm-search {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}
.gm-search-ico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-3); pointer-events: none;
}
.gm-search-clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--text-2);
  border: 0; cursor: pointer; font-size: 16px; line-height: 1;
  display: none; align-items: center; justify-content: center;
  padding: 0;
}
.gm-search-clear.is-visible { display: inline-flex; }
.gm-search-clear:hover { background: rgba(255,255,255,0.16); color: var(--text); }

/* Strip the browser's default "X" so we can render our own */
.gm-search::-webkit-search-cancel-button,
.gm-search::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.gm-search-dd {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  background: #121217;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,0.6), 0 4px 14px -4px rgba(0,0,0,0.4);
  padding: 6px;
  max-height: 420px; overflow-y: auto;
  z-index: 60;
  animation: gm-search-dd-in 140ms ease;
}
@keyframes gm-search-dd-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gm-search-dd::-webkit-scrollbar { width: 8px; }
.gm-search-dd::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 9999px; }

.gm-search-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none; color: var(--text);
  cursor: pointer;
  transition: background .12s ease;
}
.gm-search-item + .gm-search-item { margin-top: 2px; }
.gm-search-item:hover,
.gm-search-item.is-active {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.gm-search-item.is-active { outline: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }

.gm-search-avatar {
  width: 36px; height: 36px; border-radius: 10px;
  background: #0a0a0c center / cover no-repeat;
  border: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-2); font-weight: 700; font-size: 14px;
}
.gm-search-avatar-fallback {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 25%, transparent), color-mix(in srgb, var(--brand) 25%, transparent));
  color: #fff;
}
.gm-search-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.gm-search-name {
  font-size: 14px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gm-search-name mark {
  background: transparent; color: var(--accent-2);
  font-weight: 800; padding: 0;
}
.gm-search-meta {
  font-size: 11.5px; color: var(--text-3);
  letter-spacing: 0.02em;
}
.gm-search-arrow {
  font-size: 12px; color: var(--text-3);
  opacity: 0; transition: opacity .15s ease, transform .15s ease;
}
.gm-search-item:hover .gm-search-arrow,
.gm-search-item.is-active .gm-search-arrow {
  opacity: 1; transform: translateX(2px); color: var(--accent-2);
}

.gm-search-empty {
  padding: 20px 16px;
  display: flex; flex-direction: column; gap: 4px;
  text-align: center;
}
.gm-search-empty-title { font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.gm-search-empty-sub   { font-size: 12px; color: var(--text-3); }
.gm-nav-links { display: none; gap: 20px; color: var(--text-2); font-size: 14px; font-weight: 500; }
.gm-nav-links a:hover { color: var(--text); }
.gm-nav-links a.active { color: var(--accent); }
@media (min-width: 900px) { .gm-nav-links { display: flex; } }
.gm-nav-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: 999px;
  background: var(--accent); color: #111; font-weight: 700; font-size: 14px;
  border: 0; cursor: pointer; white-space: nowrap;
}
.gm-nav-cta:hover { background: var(--accent-2); }
.gm-nav-ghost {
  padding: 9px 14px; color: var(--text-2); font-size: 14px; font-weight: 500;
}
.gm-nav-ghost:hover { color: var(--text); }

/*
 * Menu akun di navbar.
 *
 * Buka-tutupnya memakai atribut [hidden] pada panelnya, bukan kelas di
 * pembungkusnya. Versi sebelumnya menyembunyikan panel dengan `display:none`
 * dan hanya memunculkannya lewat `.gm-user-menu.open` — kelas yang tak pernah
 * dipasang skripnya. Akibatnya menu akun tak pernah bisa dibuka sama sekali,
 * dan saldo pembeli tak punya tempat untuk muncul.
 */
.gm-account { position: relative; margin-left: auto; flex: 0 0 auto; }
.gm-account-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 999px; color: var(--text); cursor: pointer;
  font: inherit; font-size: 13px; line-height: 1.25;
}
.gm-account-btn:hover { border-color: var(--accent); }
.gm-account-btn > svg { margin-left: 6px; color: var(--text-2); }
.gm-account-label { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.gm-account-saldo { font-size: 11px; font-weight: 700; color: var(--accent-2); }

/* Di layar sempit tombolnya menyusut jadi lingkaran ikon saja. */
@media (max-width: 599px) {
  .gm-account-label { display: none; }
  .gm-account-btn { padding: 6px; }
  .gm-account-btn > svg { margin-left: 0; }
}

.gm-user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #111; font-weight: 800; font-size: 13px;
}
.gm-user-name { font-weight: 600; }

.gm-user-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 260px; max-width: calc(100vw - 24px); padding: 6px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow);
  z-index: 60;
}
.gm-user-dropdown[hidden] { display: none; }

.gm-user-meta {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px 14px;
  border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.gm-user-email {
  font-size: 12px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Email dipotong satu baris; kalimat penjelas untuk tamu justru harus utuh. */
.gm-user-email--wrap { white-space: normal; overflow: visible; line-height: 1.4; }
.gm-user-saldo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 10px 14px; margin-bottom: 4px; border-radius: 8px;
  background: var(--bg-elev); font-size: 12.5px; color: var(--text-2);
}
.gm-user-saldo strong { font-size: 14px; color: var(--accent-2); }
.gm-user-saldo:hover { background: var(--bg-card-2); }
.gm-user-item {
  display: block; padding: 10px 14px; border-radius: 8px;
  color: var(--text); font-size: 13px; font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: background .15s, color .15s;
}
.gm-user-item:hover { background: var(--bg-elev); color: var(--accent-2); }
.gm-user-item--btn { width: 100%; text-align: left; background: none; border: 0; font: inherit; }
.gm-user-item--cta {
  margin-top: 4px; text-align: center;
  background: var(--accent); color: #111; font-weight: 700;
}
.gm-user-item--cta:hover { background: var(--accent-2); color: #111; }
.gm-user-note { padding: 8px 14px 4px; margin: 0; font-size: 11.5px; color: var(--text-3); line-height: 1.45; }

/* Hero */
.gm-hero {
  position: relative; margin-top: 20px;
  border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(135deg, #1a1208 0%, #261406 40%, #120a04 100%);
  padding: 48px 28px; min-height: 220px;
  display: flex; align-items: center;
  border: 1px solid var(--border);
}
.gm-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--accent-2) 30%, transparent), transparent 70%) right 10% top -20% / 60% 140% no-repeat,
    radial-gradient(closest-side, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%) left -10% bottom -30% / 50% 120% no-repeat;
  pointer-events: none;
}
.gm-hero-inner { position: relative; z-index: 1; max-width: 620px; }
.gm-hero-eyebrow {
  display: inline-block; padding: 5px 10px; border-radius: 999px;
  background: var(--accent-10); color: var(--accent-2); font-size: 12px; font-weight: 600;
  letter-spacing: .4px; text-transform: uppercase;
}
.gm-hero h1 {
  font-size: 30px; line-height: 1.15; margin: 14px 0 8px; font-weight: 800;
  background: linear-gradient(90deg, #fff 0%, color-mix(in srgb, var(--accent-2) 45%, #ffffff) 70%, var(--accent-2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (min-width: 640px) { .gm-hero { padding: 60px 44px; } .gm-hero h1 { font-size: 42px; } }
.gm-hero p { color: var(--text-2); font-size: 15px; margin: 0 0 20px; }
.gm-hero-stats { display: flex; gap: 24px; flex-wrap: wrap; color: var(--text-2); font-size: 13px; }
.gm-hero-stats strong { color: var(--text); font-weight: 700; }

/* Sections */
.gm-section { margin-top: 36px; }
.gm-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.gm-section-title { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin: 0; }
.gm-section-title::before {
  content: ""; width: 4px; height: 20px; border-radius: 2px; background: var(--accent);
}
.gm-section-link { font-size: 13px; color: var(--text-2); }
.gm-section-link:hover { color: var(--accent-2); }

/* Grid */
.gm-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 560px) { .gm-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px) { .gm-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .gm-grid { grid-template-columns: repeat(6, 1fr); } }

.gm-grid-trending {
  display: grid; gap: 12px;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 560px) { .gm-grid-trending { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .gm-grid-trending { grid-template-columns: repeat(3, 1fr); } }

/* Game card */
.gm-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.gm-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 8%, transparent);
}
.gm-card-art {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #2a2230 0%, #14121a 100%);
  display: grid; place-items: center; color: #fff;
  font-weight: 800; font-size: 24px; letter-spacing: 1px;
  position: relative; overflow: hidden;
}
.gm-card-art::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.08), transparent 50%);
}
.gm-card-body { padding: 12px 14px; }
.gm-card-title { font-size: 14px; font-weight: 700; color: var(--text); margin: 0; line-height: 1.3; }
.gm-card-meta { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.gm-card-starts { font-size: 12px; color: var(--accent-2); margin-top: 6px; font-weight: 600; }

/* Trending (wider) */
.gm-card--wide { flex-direction: row; align-items: stretch; }
.gm-card--wide .gm-card-art {
  width: 96px; aspect-ratio: auto; flex-shrink: 0; font-size: 18px;
}
.gm-card--wide .gm-card-body { flex: 1; padding: 14px 16px; display: flex; flex-direction: column; justify-content: center; }

/* Image-backed variant: drop the gradient + initials, show the photo full-bleed */
.gm-card--img .gm-card-art {
  background-color: #0a0a0c;
  background-size: cover;
  background-position: center;
}
.gm-card--img .gm-card-art::after {
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.35) 100%);
}
.gm-card--img.gm-card--wide .gm-card-art { width: 120px; }

/*
 * Gambar game mengisi penuh kotaknya.
 *
 * width/height di <img> hanya cadangan supaya tata letak tak melompat sebelum
 * gambar termuat. Tanpa aturan ini nilai itu jadi ukuran final, dan gambar yang
 * bukan bujur sangkar — kartu hadiah, banner — ditarik paksa jadi kotak: logonya
 * gepeng, bukan terpotong rapi.
 */
.gm-card-art img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Small genre chip overlaid on card artwork */
.gm-card-genre {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  padding: 3px 8px; border-radius: 9999px;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.gm-card--wide .gm-card-genre { top: 6px; left: 6px; font-size: 9.5px; padding: 2px 6px; }

/* Chips */
.gm-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.gm-chip {
  padding: 7px 14px; border-radius: 999px;
  background: var(--bg-card); color: var(--text-2);
  font-size: 13px; font-weight: 500; border: 1px solid var(--border);
  cursor: pointer;
}
.gm-chip.active, .gm-chip:hover { background: var(--accent); color: #111; border-color: var(--accent); font-weight: 700; }

/* Show page */
.gm-show-header {
  position: relative; margin-top: 20px;
  border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(135deg, #1a1208 0%, #261406 40%, #120a04 100%);
  border: 1px solid var(--border);
  padding: 28px 24px; display: flex; gap: 20px; align-items: center;
}
.gm-show-avatar {
  width: 88px; height: 88px; flex-shrink: 0; border-radius: 16px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  display: grid; place-items: center; color: #111; font-weight: 900; font-size: 28px;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 25%, transparent);
}
.gm-show-title { margin: 0; font-size: 24px; font-weight: 800; }
.gm-show-badges { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); }
.gm-show-badge { display: inline-flex; align-items: center; gap: 6px; }
.gm-show-badge::before { content: "•"; color: var(--accent); }

/* Steps layout */
.gm-step {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; margin-top: 14px;
}
.gm-step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.gm-step-num {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--accent); color: #111; font-weight: 800;
  display: grid; place-items: center; flex-shrink: 0;
}
.gm-step-title { margin: 0; font-size: 16px; font-weight: 700; }

/* Form */
.gm-label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 6px; font-weight: 500; }
.gm-input {
  width: 100%; padding: 12px 14px;
  background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  font-size: 15px; outline: none;
}
.gm-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-10); }
.gm-field-hint { font-size: 12px; color: var(--text-3); margin-top: 6px; }
.gm-field-note { font-size: 12px; color: var(--warning); margin-top: 6px; font-style: italic; }

/* Nominal grid (product tiles) */
.gm-nominal-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 520px) { .gm-nominal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .gm-nominal-grid { grid-template-columns: repeat(3, 1fr); } }

.gm-nominal {
  position: relative; display: flex; gap: 12px; align-items: center;
  background: var(--bg-card); border: 1px solid var(--border);
  padding: 14px; border-radius: var(--radius);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.gm-nominal:hover { border-color: var(--accent-2); }
.gm-nominal.selected { border-color: var(--accent); background: var(--accent-10); }
.gm-nominal-icon {
  width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, #2a2230 0%, #14121a 100%);
  display: grid; place-items: center; color: var(--accent-2); font-size: 20px;
}
.gm-nominal-name { font-size: 14px; font-weight: 600; color: var(--text); margin: 0; }
.gm-nominal-price { font-size: 14px; font-weight: 700; color: var(--accent-2); margin-top: 2px; }

/* Buttons */
.gm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 700;
  border: 0; cursor: pointer; transition: background .15s, transform .1s;
  text-decoration: none;
}
.gm-btn:active { transform: translateY(1px); }
.gm-btn-primary { background: var(--accent); color: #111; }
.gm-btn-primary:hover { background: var(--accent-2); }
.gm-btn-ghost { background: var(--bg-card); color: var(--text); border: 1px solid var(--border); }
.gm-btn-ghost:hover { border-color: var(--accent); color: var(--accent-2); }
.gm-btn-full { width: 100%; }
.gm-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Summary card */
.gm-summary {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; position: sticky; top: 80px;
}
.gm-summary h3 { margin: 0 0 14px; font-size: 15px; font-weight: 700; }
.gm-summary-row { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; color: var(--text-2); }
.gm-summary-row strong { color: var(--text); font-weight: 700; }
.gm-summary-total {
  margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: baseline;
}
.gm-summary-total-label { font-size: 13px; color: var(--text-2); }
.gm-summary-total-value { font-size: 22px; font-weight: 800; color: var(--accent-2); }

/* Two-column checkout */
.gm-cols { display: grid; gap: 20px; margin-top: 20px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .gm-cols { grid-template-columns: 1fr 340px; } }

/* Alerts */
.gm-alert {
  padding: 12px 14px; border-radius: var(--radius-sm);
  font-size: 14px; margin-top: 16px; display: flex; gap: 8px;
  border: 1px solid transparent;
}
.gm-alert-error   { background: rgba(220,38,38,0.12);  border-color: rgba(220,38,38,0.4);  color: #fca5a5; }
.gm-alert-success { background: rgba(22,163,74,0.12);  border-color: rgba(22,163,74,0.4);  color: #86efac; }
.gm-alert-info    { background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.4); color: #93c5fd; }

/* FAQ */
.gm-faq-item {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); margin-top: 10px; overflow: hidden;
}
.gm-faq-q {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px; font-size: 14px; font-weight: 600; cursor: pointer;
  list-style: none;
}
.gm-faq-q::-webkit-details-marker { display: none; }
.gm-faq-q::after { content: "+"; color: var(--accent-2); font-size: 22px; font-weight: 400; }
details[open] .gm-faq-q::after { content: "−"; }
.gm-faq-a { padding: 0 18px 16px; color: var(--text-2); font-size: 14px; }

/* Footer */
.gm-footer {
  margin-top: 60px; padding: 40px 0 24px;
  border-top: 1px solid var(--border); background: #08080a;
}
.gm-footer-cols { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .gm-footer-cols { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.gm-footer h4 { font-size: 13px; font-weight: 700; color: var(--accent-2); margin: 0 0 14px; text-transform: uppercase; letter-spacing: .5px; }
.gm-footer a { display: block; padding: 5px 0; font-size: 14px; color: var(--text-2); }
.gm-footer a:hover { color: var(--accent-2); }
/*
 * `display:block` di atas untuk kolom tautan yang memang menumpuk vertikal.
 * Di baris hak cipta tautannya ada DI TENGAH kalimat: dibuat blok, "Fireflazz"
 * terdorong ke baris sendiri dan titik penutupnya tertinggal sebagai baris
 * ketiga berisi satu karakter.
 */
.gm-footer-bottom a { display: inline; padding: 0; font-size: inherit; }
.gm-footer-bottom { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-3); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

/* Badges */
.gm-badge { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.gm-badge-success { background: rgba(22,163,74,0.15); color: #86efac; }
.gm-badge-pending { background: rgba(245,158,11,0.15); color: #fcd34d; }
.gm-badge-failed  { background: rgba(220,38,38,0.15); color: #fca5a5; }
.gm-badge-accent  { background: var(--accent-10); color: var(--accent-2); }

/* Table */
.gm-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.gm-table th, .gm-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.gm-table th { color: var(--text-2); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; background: var(--bg-elev); }
.gm-table tr:last-child td { border-bottom: 0; }
.gm-table-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }

/* Saved account cards */
.gm-saved-list-wrap { margin-bottom: 20px; }
.gm-saved-list-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px; gap: 12px; flex-wrap: wrap;
}
.gm-saved-list-head h3 {
  margin: 0; font-size: 12px; font-weight: 700;
  color: var(--accent-2); text-transform: uppercase; letter-spacing: .6px;
}
.gm-saved-list-head span { font-size: 12px; color: var(--text-3); }

.gm-saved-list {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.gm-saved-card {
  position: relative; display: flex; align-items: stretch;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
  transition: border-color .15s, background .15s, transform .1s;
}
.gm-saved-card:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 4%, transparent); }
.gm-saved-card.active {
  border-color: var(--accent); background: var(--accent-10);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
}

.gm-saved-card-main {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: transparent; border: 0; color: inherit;
  text-align: left; font: inherit; cursor: pointer;
}
.gm-saved-card-main:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.gm-saved-avatar {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  color: #111; font-weight: 800; font-size: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  letter-spacing: .5px;
}

.gm-saved-info { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.gm-saved-info strong {
  font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.2;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.gm-saved-info small {
  font-size: 11px; color: var(--text-3); line-height: 1.2;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

.gm-saved-card-x {
  flex: 0 0 auto; width: 40px;
  background: transparent; border: 0;
  border-left: 1px solid var(--border);
  color: var(--text-3); cursor: pointer;
  font-size: 20px; line-height: 1;
  transition: color .15s, background .15s;
}
.gm-saved-card-x:hover { color: var(--danger); background: rgba(220,38,38,0.08); }
.gm-saved-card-x:focus-visible { outline: 2px solid var(--danger); outline-offset: -2px; }

/* Payment method chooser */
.gm-paymethods { display: grid; gap: 10px; }
.gm-paymethod {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.gm-paymethod:hover { border-color: var(--accent-2); }
.gm-paymethod input[type="radio"] {
  margin-top: 3px; flex: 0 0 auto;
  accent-color: var(--accent);
  width: 18px; height: 18px; cursor: pointer;
}
.gm-paymethod input[type="radio"]:checked ~ .gm-paymethod-body .gm-paymethod-title { color: var(--accent-2); }
.gm-paymethod:has(input:checked) {
  border-color: var(--accent); background: var(--accent-10);
}
.gm-paymethod-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gm-paymethod-title {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: 14px; font-weight: 700; color: var(--text);
}
.gm-paymethod-meta { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.gm-paymethod-disabled { opacity: 0.5; cursor: not-allowed; }
.gm-paymethod-disabled input { cursor: not-allowed; }

/* Loading overlay */
.gm-loader {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(8,8,12,0.82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.gm-loader.visible { display: flex; }
.gm-loader-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 30px 36px;
  text-align: center; max-width: 340px; box-shadow: var(--shadow);
}
.gm-loader-msg { margin: 16px 0 4px; font-size: 15px; font-weight: 700; color: var(--text); }
.gm-loader-sub { margin: 0; font-size: 12px; color: var(--text-3); }

.gm-spinner {
  width: 44px; height: 44px; margin: 0 auto;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-top-color: var(--accent);
  animation: gm-spin 0.8s linear infinite;
}
@keyframes gm-spin { to { transform: rotate(360deg); } }

/* ───────────────── QRIS pay page (v2 — professional QRIS invoice look) ───────────────── */

.gm-qris-wrap {
  display: grid; gap: 18px; margin-top: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 980px) { .gm-qris-wrap { grid-template-columns: minmax(0, 440px) 1fr; gap: 24px; align-items: start; } }

/* Outer dark card */
.gm-qris-card {
  background: linear-gradient(180deg, #0f0f13 0%, #16161c 100%);
  border: 1px solid var(--border-2);
  border-radius: 18px;
  padding: 18px 18px 14px;
  box-shadow: 0 24px 54px -24px rgba(0,0,0,0.75);
  color: var(--text);
  overflow: hidden;
}

/* Top strip — TOTAL label + orange countdown pill */
.gm-qris-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 6px;
}
.gm-qris-top-label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--text-3); text-transform: uppercase;
}
.gm-qris-timer {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 9999px;
  background: color-mix(in srgb, var(--accent-2) 15%, transparent); color: var(--accent-2);
  border: 1px solid color-mix(in srgb, var(--accent-2) 28%, transparent);
  font-family: ui-monospace, Menlo, monospace;
  font-weight: 800; font-size: 13px;
  letter-spacing: 0.02em;
}
.gm-qris-timer i { font-size: 12px; }
.gm-qris-timer.is-expired {
  background: rgba(239,68,68,0.15); color: #f87171; border-color: rgba(239,68,68,0.28);
}

/* Amount + order id */
.gm-qris-amount {
  font-size: 36px; font-weight: 900; letter-spacing: -0.01em;
  color: var(--text); margin: 2px 0 2px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.gm-qris-orderid {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px; color: var(--text-3);
  margin: 0 0 14px;
  word-break: break-all;
}

/* White QR panel */
.gm-qris-panel {
  background: #ffffff; color: #0f172a;
  border-radius: 12px;
  padding: 18px 16px 14px;
  position: relative;
  /* Decorative dotted border */
  background-image:
    radial-gradient(circle, rgba(0,0,0,0.08) 1px, transparent 1px);
  background-size: 10px 10px;
  background-position: 0 0;
}
.gm-qris-panel-inner {
  background: #fff;
  margin: 0; padding: 8px;
  border-radius: 6px;
}
.gm-qris-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 4px 12px;
}
.gm-qris-panel-qris img,
.gm-qris-panel-gpn  img {
  display: block;
  height: 28px; width: auto;
  image-rendering: auto;
}
.gm-qris-panel-qris img { height: 32px; }
.gm-qris-panel-brand {
  text-align: center; font-weight: 900; letter-spacing: 0.04em;
  font-size: 18px; color: #0f172a;
  margin: 6px 0 14px;
  text-transform: uppercase;
}

.gm-qris-img {
  width: 100%;
  max-width: 340px; margin: 0 auto;
  display: block;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  background: #fff;
  padding: 0;
}

.gm-qris-panel-foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  padding: 14px 4px 4px; margin-top: 10px;
  border-top: 1px dashed rgba(0,0,0,0.08);
  font-size: 11px; color: #475569;
}
.gm-qris-panel-ref small { display: block; line-height: 1.5; font-family: ui-monospace, Menlo, monospace; }
.gm-qris-panel-ref strong { color: #0f172a; font-weight: 700; }
.gm-qris-panel-how { text-align: right; }
.gm-qris-panel-how small { display: block; margin-bottom: 4px; color: #64748b; }
.gm-qris-panel-how-logos { display: inline-flex; gap: 8px; align-items: center; }
.gm-qris-panel-how-logos img { height: 18px; width: auto; display: block; }

/* Bottom meta strip */
.gm-qris-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 4px 4px;
  font-size: 13px; color: var(--text-2);
}
.gm-qris-meta-left  { display: inline-flex; align-items: center; gap: 8px; }
.gm-qris-meta-left i { color: var(--accent-2); }
.gm-qris-meta-right strong { color: var(--text); font-variant-numeric: tabular-nums; }

/* Success / expired banner above the QR card */
.gm-qris-flash {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 10px;
  margin-bottom: 12px;
  font-size: 13.5px;
}
.gm-qris-flash-success { background: rgba(34,197,94,0.12); color: #86efac; border: 1px solid rgba(34,197,94,0.28); }
.gm-qris-flash-expired { background: rgba(239,68,68,0.12); color: #fca5a5; border: 1px solid rgba(239,68,68,0.28); }

/* Status pulse dot (kept from before) */
.gm-qris-status { margin-top: 14px; }
.gm-qris-status-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--warning); margin-right: 6px;
  animation: gm-pulse 1.5s ease-in-out infinite;
}

/* Mobile: outer dark card goes edge-to-edge to match reference */
@media (max-width: 640px) {
  .gm-qris-card {
    margin-left: -16px; margin-right: -16px;
    border-left: 0; border-right: 0; border-radius: 0;
  }
  .gm-qris-amount { font-size: 32px; }
  .gm-qris-panel-brand { font-size: 16px; }
  .gm-qris-panel-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
  .gm-qris-panel-how { text-align: left; }
}
@keyframes gm-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Utilities */
.gm-muted { color: var(--text-2); }
.gm-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.gm-mt-2 { margin-top: 8px; } .gm-mt-4 { margin-top: 16px; } .gm-mt-6 { margin-top: 24px; }
.gm-mb-2 { margin-bottom: 8px; } .gm-mb-4 { margin-bottom: 16px; }
.gm-text-center { text-align: center; }
.gm-small { font-size: 12px; }
.gm-flex { display: flex; }
.gm-items-center { align-items: center; }
.gm-gap-2 { gap: 8px; } .gm-gap-3 { gap: 12px; } .gm-gap-4 { gap: 16px; }

/* ───────────────── Auth pages (login / register / forgot) ───────────────── */

.gm-auth-page {
  position: relative;
  padding: 24px 0 48px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.gm-auth-page::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(520px 320px at 18% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 62%),
    radial-gradient(440px 280px at 82% 12%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 62%);
  pointer-events: none;
}

.gm-auth-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 480px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow:
    0 22px 54px -22px rgba(0,0,0,0.45),
    0 8px 20px -10px rgba(0,0,0,0.25);
}
.gm-auth-card--wide { max-width: 520px; }

.gm-auth-brand { text-align: center; margin-bottom: 22px; }
.gm-auth-brand-mark {
  width: 60px; height: 60px;
  margin: 0 auto 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid; place-items: center;
  color: #fff; font-size: 26px; font-weight: 800;
  box-shadow: 0 14px 30px -8px color-mix(in srgb, var(--accent) 45%, transparent);
}
.gm-auth-title {
  font-size: 24px; font-weight: 800; letter-spacing: -0.01em;
  margin: 0 0 6px; color: var(--text);
}
.gm-auth-title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--accent), var(--accent-2) 60%, #ffd166);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gm-auth-sub { font-size: 14px; color: var(--text-3); margin: 0; line-height: 1.5; }

.gm-auth-google {
  display: inline-flex; width: 100%;
  align-items: center; justify-content: center; gap: 10px;
  padding: 12px 16px; border-radius: 12px;
  background: #ffffff; color: #1f1f1f;
  font-weight: 600; font-size: 14.5px;
  border: 1px solid rgba(0,0,0,0.08);
  text-decoration: none;
  transition: transform 100ms ease, box-shadow 160ms ease, background 160ms ease;
}
.gm-auth-google:hover { background: #f5f5f7; transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(0,0,0,0.28); }
.gm-auth-google:active { transform: translateY(0); }

.gm-auth-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0; color: var(--text-3); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
}
.gm-auth-divider::before, .gm-auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

.gm-auth-trust {
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border);
  font-size: 11px; color: var(--text-3);
}
.gm-auth-trust span { display: inline-flex; align-items: center; gap: 5px; }

.gm-auth-bottom-link {
  text-align: center; margin-top: 22px;
  font-size: 13px; color: var(--text-3);
}
.gm-auth-bottom-link a {
  color: var(--accent-2); font-weight: 600; text-decoration: none;
}
.gm-auth-bottom-link a:hover { text-decoration: underline; }

/* Primary CTA used on forgot-password as the single WA option */
.gm-auth-primary-action {
  display: inline-flex; width: 100%;
  align-items: center; justify-content: center; gap: 10px;
  padding: 14px 18px; border-radius: 12px;
  background: #25d366; color: #fff;
  font-weight: 700; font-size: 15px;
  text-decoration: none;
  box-shadow: 0 12px 26px -10px rgba(37,211,102,0.55);
  transition: transform 100ms ease, background 160ms ease, box-shadow 160ms ease;
}
.gm-auth-primary-action:hover { background: #1fb556; transform: translateY(-1px); }
.gm-auth-primary-action:active { transform: translateY(0); }

@media (max-width: 480px) {
  .gm-auth-card { padding: 24px 20px; border-radius: 16px; }
  .gm-auth-title { font-size: 22px; }
  .gm-auth-brand-mark { width: 52px; height: 52px; font-size: 22px; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * "Minta Temanmu Traktir" — user + public surfaces
 * Visual language: warmer, playful, emoji-forward. Uses the same accent
 * orange as the main games theme but leans more pink/rose to emphasise
 * emotional / gift-giving feel.
 * ═════════════════════════════════════════════════════════════════════ */

:root {
  --treat-warm-1: var(--accent);
  --treat-warm-2: var(--accent-2);
  --treat-pink:   #ff5c8a;
  --treat-lilac:  #a855f7;
  --treat-peach:  #ffd166;
}

/* ---- CTA bar on index page ---- */
.gm-treat-cta-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-top: 20px; padding: 16px 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent) 0%, rgba(168,85,247,0.10) 100%);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
}

/* ---- Treat list cards (index) ---- */
.gm-treat-list {
  display: flex; flex-direction: column; gap: 10px;
}
.gm-treat-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px; align-items: center;
  padding: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: inherit; text-decoration: none;
  transition: border-color 160ms ease, transform 100ms ease;
}
.gm-treat-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.gm-treat-card-avatar { width: 56px; height: 56px; border-radius: 12px; font-size: 20px; }
.gm-treat-card-main { min-width: 0; }
.gm-treat-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.gm-treat-card-title { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.gm-treat-card-sub { font-size: 12.5px; color: var(--text-3); margin: 0 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-treat-card-meta { display: flex; gap: 8px 10px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); }
.gm-treat-card .gm-hist-dot { color: var(--text-3); opacity: .5; }

@media (max-width: 480px) {
  .gm-treat-card { grid-template-columns: 48px 1fr auto; gap: 10px; padding: 12px; }
  .gm-treat-card-avatar { width: 48px; height: 48px; font-size: 18px; border-radius: 10px; }
}

/* ---- Custom slug input with live URL prefix (create form) ---- */
.gm-slug-input {
  display: flex; align-items: stretch;
  background: var(--bg-elev);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.gm-slug-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-10);
}
.gm-slug-prefix {
  display: inline-flex; align-items: center;
  padding: 12px 12px 12px 14px;
  background: rgba(255,255,255,0.03);
  border-right: 1px solid var(--border-2);
  color: var(--text-3);
  font-size: 13px; font-weight: 500;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  white-space: nowrap;
  max-width: 55%; overflow: hidden; text-overflow: ellipsis;
}
.gm-slug-field {
  flex: 1; min-width: 0;
  background: transparent !important;
  border: 0 !important; border-radius: 0 !important;
  padding: 12px 14px;
  color: var(--accent-2) !important; font-weight: 600;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.gm-slug-field:focus { box-shadow: none !important; }

@media (max-width: 480px) {
  .gm-slug-prefix { padding: 10px 10px 10px 12px; font-size: 12px; max-width: 48%; }
  .gm-slug-field { padding: 10px 12px; font-size: 14px; }
}

/* ---- Share link box (user show page) ---- */
.gm-share-box {
  display: flex; gap: 10px; align-items: stretch;
  background: var(--bg-elev);
  border: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent);
  padding: 10px; border-radius: var(--radius-sm);
}
.gm-share-box input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; padding: 6px 10px;
  color: var(--accent-2); font-size: 13px;
}
.gm-share-box input:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.gm-share-box .gm-btn { padding: 10px 16px; font-size: 13px; border-radius: 8px; flex-shrink: 0; }

.gm-share-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gm-share-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 9999px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  border: 1px solid var(--border-2);
  background: var(--bg-card); color: var(--text);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.gm-share-chip:hover { border-color: var(--accent-2); background: var(--bg-elev); }
.gm-share-chip--wa:hover { background: rgba(37,211,102,0.10); border-color: rgba(37,211,102,0.5); }
.gm-share-chip--tg:hover { background: rgba(59,130,246,0.10); border-color: rgba(59,130,246,0.5); }

/* ---- Treat stat cards (user show) ---- */
.gm-treat-stats {
  display: grid; gap: 10px; margin-top: 16px;
  grid-template-columns: repeat(3, 1fr);
}
.gm-treat-stat {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.gm-treat-stat-num { font-size: 24px; font-weight: 800; color: var(--accent-2); }
.gm-treat-stat-label { font-size: 11px; color: var(--text-3); letter-spacing: 0.05em; text-transform: uppercase; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════
 * Public traktir landing — conversion-oriented hero + product picker
 * ═════════════════════════════════════════════════════════════════════ */

.gm-treat-hero {
  position: relative; overflow: hidden;
  margin-top: 20px;
  padding: 32px 24px;
  border-radius: 22px;
  background:
    radial-gradient(520px 320px at 88% -20%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 60%),
    radial-gradient(440px 300px at 5% 110%, rgba(168,85,247,0.22), transparent 60%),
    linear-gradient(145deg, #1b0f1b 0%, #0f0a12 60%);
  border: 1px solid rgba(255,255,255,0.06);
  display: grid; gap: 28px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 720px) {
  .gm-treat-hero { grid-template-columns: minmax(0, 220px) 1fr; padding: 40px 36px; gap: 36px; }
}

/* Character / mascot bubble — pure CSS + emoji, no external asset */
.gm-treat-hero-character {
  position: relative; width: 200px; height: 200px; margin: 0 auto;
}
.gm-treat-char-bubble {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #ffd89b 0%, var(--accent-2) 40%, #ff5c8a 75%, #a855f7 100%);
  display: grid; place-items: center;
  font-size: 96px;
  box-shadow:
    0 30px 60px -20px color-mix(in srgb, var(--accent) 55%, transparent),
    inset 0 -12px 30px rgba(0,0,0,0.15);
  animation: gm-treat-float 3.2s ease-in-out infinite;
}
.gm-treat-char-bubble::before {
  content: ""; position: absolute; top: 10%; left: 18%;
  width: 35%; height: 25%; border-radius: 50%;
  background: rgba(255,255,255,0.45); filter: blur(2px);
}
.gm-treat-char-mouth { display: inline-block; transform: translateY(-6px); filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2)); }

/* Real game art as a subtle hero backdrop (behind the emoji mascot + text).
   The dark gradient over it keeps the copy readable; --treat-art is set
   inline per brand. Emoji mascot stays as-is on top. */
.gm-treat-hero--art::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(150deg, rgba(15,10,18,0.86) 0%, rgba(15,10,18,0.62) 45%, rgba(27,15,27,0.80) 100%),
    var(--treat-art);
  background-size: cover, cover;
  background-position: center, center;
  pointer-events: none;
}
.gm-treat-hero--art > * { position: relative; z-index: 1; }

.gm-treat-char-sparkle {
  position: absolute; font-size: 24px;
  animation: gm-treat-sparkle 2.4s ease-in-out infinite;
  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--accent-2) 45%, transparent));
}
.gm-treat-char-sparkle--a { top: -4px;  right: 8%;  animation-delay: 0s; }
.gm-treat-char-sparkle--b { bottom: 4%; left: -6px; animation-delay: .7s; font-size: 28px; }
.gm-treat-char-sparkle--c { top: 40%;   right: -10px; animation-delay: 1.3s; font-size: 32px; }

@keyframes gm-treat-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-10px) rotate(2deg); }
}
@keyframes gm-treat-sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50%      { transform: scale(1.2) rotate(12deg); opacity: 0.75; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-treat-char-bubble, .gm-treat-char-sparkle { animation: none; }
}

.gm-treat-hero-body { min-width: 0; }
.gm-treat-hero-eyebrow {
  display: inline-block; padding: 5px 12px; border-radius: 9999px;
  background: rgba(255,255,255,0.12); color: #ffd166;
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
}
.gm-treat-hero-title {
  font-size: clamp(1.5rem, 3vw + 0.5rem, 2.4rem);
  line-height: 1.1; letter-spacing: -0.01em;
  margin: 12px 0 10px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, var(--accent-2) 45%, #ffffff) 60%, var(--accent-2) 100%);
  -webkit-background-clip: text; background-clip: text;
}
.gm-treat-hero-sub { color: rgba(255,255,255,0.78); font-size: 15px; line-height: 1.6; margin: 0; }
.gm-treat-hero-sub strong { color: #ffd166; font-weight: 700; }

.gm-treat-note {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 18px; padding: 14px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  color: #fff;
}
.gm-treat-note-icon { font-size: 22px; flex-shrink: 0; }
.gm-treat-note strong { color: #ffd166; font-weight: 700; display: block; margin-bottom: 4px; font-size: 12.5px; }
.gm-treat-note p { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.85); }

/* ---- Recipient card ---- */
.gm-treat-recipient {
  display: flex; align-items: center; gap: 16px;
  margin-top: 20px; padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
}
.gm-treat-recipient-avatar { width: 64px; height: 64px; border-radius: 16px; font-size: 24px; flex-shrink: 0; }
.gm-treat-recipient-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.gm-treat-recipient-name { font-size: 18px; font-weight: 800; color: var(--text); line-height: 1.2; }
.gm-treat-recipient-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--text-2); margin-top: 4px; }
.gm-treat-verify {
  flex-shrink: 0;
  padding: 5px 10px; border-radius: 9999px;
  background: rgba(22,163,74,0.15); color: #86efac;
  border: 1px solid rgba(22,163,74,0.3);
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
}

@media (max-width: 480px) {
  .gm-treat-recipient { flex-wrap: wrap; }
  .gm-treat-recipient-avatar { width: 52px; height: 52px; font-size: 20px; }
  .gm-treat-recipient-name { font-size: 16px; }
  .gm-treat-verify { order: -1; margin-left: auto; }
}

/* ---- Nominals grid (product picker) ---- */
.gm-treat-nominals {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 560px) { .gm-treat-nominals { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .gm-treat-nominals { grid-template-columns: repeat(4, 1fr); } }

.gm-treat-nominal {
  position: relative; display: block; cursor: pointer;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius); padding: 14px;
  transition: border-color 150ms, background 150ms, transform 100ms;
}
.gm-treat-nominal input { position: absolute; opacity: 0; pointer-events: none; }
.gm-treat-nominal:hover { border-color: var(--accent-2); transform: translateY(-1px); }
.gm-treat-nominal.is-selected {
  border-color: var(--accent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), rgba(255,92,138,0.08));
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent) 40%, transparent);
}
.gm-treat-nominal--disabled { opacity: 0.45; cursor: not-allowed; }
.gm-treat-nominal--disabled:hover { transform: none; border-color: var(--border); }

.gm-treat-nominal-body { display: flex; flex-direction: column; gap: 4px; position: relative; }
.gm-treat-nominal-name { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.3; }
.gm-treat-nominal-price { font-size: 15px; font-weight: 800; color: var(--accent-2); margin-top: 4px; }

.gm-treat-nominal-ribbon {
  position: absolute; top: -22px; right: -4px;
  padding: 3px 8px; border-radius: 9999px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--accent); color: #111;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--accent) 35%, transparent);
}
.gm-treat-nominal-ribbon--cheap { background: #22c55e; color: #053310; }
.gm-treat-nominal-ribbon--big { background: linear-gradient(135deg, #ffd166, var(--accent-2)); color: #3a1e00; }

/* ---- Trust row ---- */
.gm-treat-trust {
  display: grid; gap: 10px; margin-top: 18px;
  grid-template-columns: repeat(3, 1fr);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
}
.gm-treat-trust > div {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  font-size: 12px; color: var(--text-2); line-height: 1.4;
}
.gm-treat-trust > div > span { font-size: 22px; }
@media (max-width: 480px) {
  .gm-treat-trust { grid-template-columns: 1fr; }
  .gm-treat-trust > div { flex-direction: row; text-align: left; font-size: 13px; }
  .gm-treat-trust > div > span { font-size: 18px; }
  .gm-treat-trust > div small { display: inline; }
}

/* ---- Sticky bottom CTA ---- */
.gm-treat-sticky-bar {
  position: sticky; bottom: 0;
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  margin-top: 20px; padding: 14px 18px;
  background: linear-gradient(135deg, #1a0f17 0%, #0d0a13 100%);
  border: 1px solid var(--border-2);
  border-radius: 16px;
  box-shadow: 0 -12px 30px -8px rgba(0,0,0,0.55);
  z-index: 10;
  transition: box-shadow 260ms ease, transform 260ms ease;
}
.gm-treat-sticky-bar.is-highlight {
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent), 0 -16px 36px -8px rgba(0,0,0,0.6);
}
.gm-treat-sticky-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gm-treat-sticky-info strong { font-size: 15px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55vw; }
.gm-treat-sticky-bar .gm-btn { flex-shrink: 0; padding: 14px 22px; font-size: 15px; font-weight: 800; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.gm-treat-sticky-bar .gm-btn[disabled] { background: var(--bg-card); color: var(--text-3); }

@media (max-width: 480px) {
  .gm-treat-sticky-bar { border-radius: 14px; padding: 12px 14px; gap: 10px; }
  .gm-treat-sticky-bar .gm-btn { padding: 12px 16px; font-size: 13.5px; }
  .gm-treat-sticky-info strong { font-size: 13.5px; }
}

/* ---- Empty / expired / paused states (public) ---- */
.gm-treat-state {
  text-align: center; padding: 48px 24px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); margin-top: 20px;
}
.gm-treat-state-icon { font-size: 56px; margin-bottom: 14px; }
.gm-treat-state h2 { margin: 0 0 8px; font-size: 22px; font-weight: 800; color: var(--text); }
.gm-treat-state p  { margin: 0 auto 18px; max-width: 28rem; color: var(--text-2); font-size: 14px; line-height: 1.6; }

/* ---- Pay page header (public) ---- */
.gm-treat-pay-header {
  display: flex; align-items: center; gap: 14px;
  margin-top: 16px; margin-bottom: 8px;
}
.gm-treat-pay-avatar { width: 48px; height: 48px; border-radius: 14px; font-size: 20px; flex-shrink: 0; }
.gm-treat-pay-eyebrow { margin: 0; font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; color: #ffd166; }
.gm-treat-pay-product { margin: 2px 0 2px; font-size: 15px; font-weight: 700; color: var(--text); }

/* ---- Result banner (public invoice) ---- */
.gm-treat-result {
  margin-top: 20px; padding: 36px 24px 28px; text-align: center;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.08);
  position: relative; overflow: hidden;
}
.gm-treat-result::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(420px 260px at 50% 0%, rgba(255,255,255,0.12), transparent 70%);
}
.gm-treat-result--ok {
  background: linear-gradient(145deg, #0d2818 0%, #0a1d14 100%);
  border-color: rgba(34,197,94,0.3);
}
.gm-treat-result--ok::before {
  background: radial-gradient(420px 260px at 50% 0%, rgba(34,197,94,0.25), transparent 70%);
}
.gm-treat-result--fail {
  background: linear-gradient(145deg, #2a1010 0%, #1d0a0a 100%);
  border-color: rgba(239,68,68,0.3);
}
.gm-treat-result--pending {
  background: linear-gradient(145deg, #231809 0%, #1a130a 100%);
  border-color: rgba(245,158,11,0.3);
}
.gm-treat-result-icon { font-size: 64px; line-height: 1; margin-bottom: 12px; animation: gm-treat-pop 500ms ease-out; }
@keyframes gm-treat-pop {
  from { transform: scale(0.4) rotate(-20deg); opacity: 0; }
  to   { transform: scale(1)   rotate(0);      opacity: 1; }
}
.gm-treat-result h1 { margin: 4px 0 8px; font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.gm-treat-result p  { margin: 0 auto 8px; max-width: 34rem; color: rgba(255,255,255,0.82); font-size: 15px; line-height: 1.6; }
.gm-treat-result p strong { color: #ffd166; font-weight: 700; }
.gm-treat-result-sub { display: inline-flex; gap: 16px; margin-top: 12px; color: #86efac; font-size: 13px; font-weight: 600; }
.gm-treat-result-sub span { display: inline-flex; align-items: center; gap: 4px; }

@media (max-width: 480px) {
  .gm-treat-hero { padding: 28px 18px; border-radius: 16px; }
  .gm-treat-hero-character { width: 160px; height: 160px; }
  .gm-treat-char-bubble { font-size: 76px; }
  .gm-treat-result h1 { font-size: 22px; }
  .gm-treat-result-icon { font-size: 52px; }
}

/* ---- Social proof banner on hero (public show) ---- */
.gm-treat-social-proof {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 16px; padding: 10px 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,214,102,0.35);
  border-radius: 9999px;
  color: #fff; font-size: 13.5px; line-height: 1.4;
  backdrop-filter: blur(4px);
}
.gm-treat-social-proof strong { color: #ffd166; font-weight: 800; }
.gm-treat-social-proof > span:first-child { font-size: 18px; }

/* ═══════════════════════════════════════════════════════════════════════
 * Papan Traktir (Hall of Fame) — public + owner
 * ═════════════════════════════════════════════════════════════════════ */

.gm-treat-board {
  margin-top: 22px; padding: 24px 20px;
  background:
    radial-gradient(520px 280px at 80% 0%, rgba(255,214,102,0.12), transparent 70%),
    linear-gradient(145deg, #18131c 0%, #0f0c13 100%);
  border: 1px solid rgba(255,214,102,0.18);
  border-radius: 22px;
  position: relative; overflow: hidden;
}

/* Variant when the board appears ABOVE the form — extra glow ring so it
 * catches the eye as the first thing below the recipient card. */
.gm-treat-board--top {
  border-color: rgba(255,214,102,0.35);
  box-shadow: 0 16px 40px -18px color-mix(in srgb, var(--accent-2) 35%, transparent), 0 0 0 1px rgba(255,214,102,0.1);
  animation: gm-treat-board-reveal 500ms ease-out both;
}
@keyframes gm-treat-board-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}
@media (prefers-reduced-motion: reduce) {
  .gm-treat-board--top { animation: none; }
}
.gm-treat-board::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 60%);
  pointer-events: none;
}
.gm-treat-board > * { position: relative; z-index: 1; }

.gm-treat-board-head { text-align: center; margin-bottom: 18px; }
.gm-treat-board-head h2 {
  margin: 0 0 6px; font-size: 20px; font-weight: 800; color: #fff;
  letter-spacing: -0.01em;
}
.gm-treat-board-head p {
  margin: 0 auto; max-width: 32rem; color: var(--text-2);
  font-size: 13.5px; line-height: 1.55;
}
.gm-treat-board-head strong { color: #ffd166; font-weight: 700; }

.gm-treat-board-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.gm-treat-board-item {
  display: grid;
  grid-template-columns: 32px 40px 1fr auto;
  gap: 12px; align-items: center;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: transform 120ms ease, border-color 120ms ease;
}
.gm-treat-board-item:hover { transform: translateX(2px); border-color: var(--accent-2); }

/* Podium — top 3 get special treatment */
.gm-treat-board-item.is-podium {
  border-color: rgba(255,214,102,0.45);
  background: linear-gradient(135deg, rgba(255,214,102,0.08) 0%, var(--bg-card) 60%);
}
.gm-treat-board-item.is-rank-1 {
  border-color: rgba(255,215,0,0.6);
  background: linear-gradient(135deg, rgba(255,215,0,0.18) 0%, color-mix(in srgb, var(--accent-2) 6%, transparent) 100%);
  box-shadow: 0 12px 28px -12px rgba(255,214,102,0.3);
}
.gm-treat-board-item.is-rank-2 {
  border-color: rgba(190,190,190,0.5);
  background: linear-gradient(135deg, rgba(220,220,220,0.1) 0%, var(--bg-card) 70%);
}
.gm-treat-board-item.is-rank-3 {
  border-color: rgba(205,127,50,0.5);
  background: linear-gradient(135deg, rgba(205,127,50,0.12) 0%, var(--bg-card) 70%);
}

.gm-treat-board-medal {
  font-size: 22px; line-height: 1; text-align: center;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.gm-treat-board-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #111; font-weight: 800; font-size: 15px;
  flex-shrink: 0; letter-spacing: .5px;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--accent) 25%, transparent);
}
.gm-treat-board-item.is-rank-1 .gm-treat-board-avatar {
  background: linear-gradient(135deg, #ffd166 0%, var(--accent-2) 100%);
  box-shadow: 0 6px 16px rgba(255,215,0,0.4);
}
.gm-treat-board-item.is-rank-2 .gm-treat-board-avatar {
  background: linear-gradient(135deg, #e5e5e5 0%, #a7a7a7 100%);
  color: #1b1b1b;
}
.gm-treat-board-item.is-rank-3 .gm-treat-board-avatar {
  background: linear-gradient(135deg, #d88c56 0%, #a86b3f 100%);
}

.gm-treat-board-info {
  min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.gm-treat-board-info strong {
  font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gm-treat-board-meta {
  display: flex; gap: 6px 8px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--text-2); align-items: center;
}

.gm-treat-board-crown {
  font-size: 22px; line-height: 1;
  animation: gm-treat-crown-twinkle 2.2s ease-in-out infinite;
}
@keyframes gm-treat-crown-twinkle {
  0%, 100% { transform: rotate(-4deg) scale(1); }
  50%      { transform: rotate(4deg) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .gm-treat-board-crown { animation: none; }
}

.gm-treat-board-cta {
  margin: 18px 0 0; text-align: center;
  font-size: 13.5px; color: var(--accent-2); font-weight: 600;
}

/* Empty-state variant for the public page when nobody has treated yet */
.gm-treat-board--empty { text-align: center; }
.gm-treat-board-empty-icon { font-size: 48px; margin-bottom: 12px; }
.gm-treat-board--empty h2 { margin: 0 0 8px; font-size: 20px; font-weight: 800; color: #fff; }
.gm-treat-board--empty p  { margin: 0 auto; max-width: 28rem; color: var(--text-2); font-size: 14px; line-height: 1.6; }
.gm-treat-board--empty strong { color: #ffd166; }

@media (max-width: 480px) {
  .gm-treat-board { padding: 20px 14px; border-radius: 18px; }
  .gm-treat-board-head h2 { font-size: 17px; }
  .gm-treat-board-item { grid-template-columns: 26px 36px 1fr auto; gap: 10px; padding: 10px 12px; }
  .gm-treat-board-avatar { width: 36px; height: 36px; font-size: 13px; }
  .gm-treat-board-medal { font-size: 18px; }
  .gm-treat-board-crown { font-size: 18px; }
  .gm-treat-board-info strong { font-size: 13.5px; }
}



/* ─── Bagian tambahan Template 1 (hero3, tilewall, brandstrip, featured, filterbar, whygrid) ─── */

    /* ══════════════ Landing-only styles ══════════════ */

    /* ---------- Hero (v3) ---------- */
    .gm-hero3 {
      position: relative; overflow: hidden;
      border-radius: 22px; margin-top: 20px;
      padding: 36px 22px;
      background:
        radial-gradient(620px 360px at 88% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
        radial-gradient(520px 320px at 8% 110%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 60%),
        linear-gradient(145deg, #1b1520 0%, #0b0a0f 60%);
      color: #fff;
      border: 1px solid rgba(255,255,255,0.06);
    }
    .gm-hero3-grid {
      display: grid; grid-template-columns: 1fr; gap: 28px;
      align-items: center;
    }
    @media (min-width: 960px) {
      .gm-hero3 { padding: 56px 52px; }
      .gm-hero3-grid { grid-template-columns: 1.02fr 1fr; gap: 52px; }
    }

    .gm-hero3 h1 {
      font-size: clamp(2rem, 3.2vw + .9rem, 3rem);
      line-height: 1.05; letter-spacing: -0.02em;
      margin: 12px 0 14px; font-weight: 800;
    }
    .gm-hero3 h1 em {
      font-style: normal;
      background: linear-gradient(135deg, var(--accent), var(--accent-2) 50%, #ffd166);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .gm-hero3-lead { color: rgba(255,255,255,0.75); font-size: 1rem; margin: 0 0 22px; max-width: 34rem; line-height: 1.55; }
    .gm-hero3-eyebrow {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 12px; border-radius: 9999px;
      background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-2);
      font-size: 0.76rem; font-weight: 700; letter-spacing: 0.01em;
    }
    .gm-hero3-cta { display: inline-flex; gap: 10px; flex-wrap: wrap; }
    .gm-hero3-cta .gm-btn-primary {
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      color: #fff; font-weight: 700; padding: 13px 24px; border-radius: 12px;
      text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
      box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--accent) 45%, transparent);
      transition: transform 120ms ease, box-shadow 120ms ease;
    }
    .gm-hero3-cta .gm-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 32px -6px color-mix(in srgb, var(--accent) 60%, transparent); }
    .gm-hero3-cta .gm-btn-ghost {
      color: #fff; background: rgba(255,255,255,0.06);
      padding: 13px 22px; border-radius: 12px; text-decoration: none;
      font-weight: 600; border: 1px solid rgba(255,255,255,0.12);
      display: inline-flex; align-items: center; gap: 8px;
    }
    .gm-hero3-cta .gm-btn-ghost:hover { background: rgba(255,255,255,0.12); }
    .gm-hero3-meta {
      margin-top: 22px; display: inline-flex; gap: 18px; flex-wrap: wrap;
      color: rgba(255,255,255,0.62); font-size: 0.82rem;
    }
    .gm-hero3-meta span { display: inline-flex; align-items: center; gap: 6px; }
    .gm-hero3-meta i { color: #4ade80; }

    /* Right-side tile wall */
    .gm-tilewall {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 10px; position: relative;
      perspective: 1000px;
    }
    .gm-tilewall-tile {
      position: relative; display: block;
      aspect-ratio: 3 / 4;
      border-radius: 14px; overflow: hidden;
      border: 1px solid rgba(255,255,255,0.08);
      background: #0a0a0c center / cover no-repeat;
      box-shadow: 0 18px 40px -18px rgba(0,0,0,0.55);
      transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
      text-decoration: none; color: #fff;
      animation: gm-tile-float 7s ease-in-out infinite;
    }
    .gm-tilewall-tile::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.78) 100%);
    }
    .gm-tilewall-tile:nth-child(1) { animation-delay: 0s;   transform: translateY(0) rotate(-1.5deg); }
    .gm-tilewall-tile:nth-child(2) { animation-delay: .6s;  transform: translateY(12px) rotate(1deg); }
    .gm-tilewall-tile:nth-child(3) { animation-delay: 1.1s; transform: translateY(-6px) rotate(-.5deg); }
    .gm-tilewall-tile:nth-child(4) { animation-delay: 1.5s; transform: translateY(6px)  rotate(1.5deg); }
    .gm-tilewall-tile:nth-child(5) { animation-delay: 2.0s; transform: translateY(-8px) rotate(-1deg); }
    .gm-tilewall-tile:nth-child(6) { animation-delay: 2.6s; transform: translateY(10px) rotate(.5deg); }
    .gm-tilewall-tile:hover {
      transform: translateY(-6px) rotate(0) scale(1.04);
      border-color: rgba(255,255,255,0.2);
      box-shadow: 0 26px 60px -18px color-mix(in srgb, var(--accent) 35%, transparent);
      z-index: 2;
      animation-play-state: paused;
    }
    .gm-tilewall-tile-label {
      position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1;
      font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em;
      text-shadow: 0 2px 10px rgba(0,0,0,0.6);
    }
    .gm-tilewall-tile-genre {
      display: inline-block; margin-bottom: 4px;
      font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
      text-transform: uppercase; color: color-mix(in srgb, var(--accent-2) 55%, #ffffff);
    }
    @keyframes gm-tile-float {
      0%,100% { transform: translateY(0) rotate(0); }
      50%     { transform: translateY(-10px) rotate(0.3deg); }
    }
    @media (prefers-reduced-motion: reduce) {
      .gm-tilewall-tile { animation: none; }
    }

    /* Floating sparkle chips around the tile wall */
    .gm-hero3-chip {
      position: absolute; z-index: 5;
      padding: 7px 12px; border-radius: 9999px;
      background: #fff; color: #0a0a0c;
      font-size: 0.78rem; font-weight: 700;
      box-shadow: 0 12px 28px -6px rgba(0,0,0,0.45);
      display: inline-flex; align-items: center; gap: 6px;
    }
    .gm-hero3-chip i { color: var(--accent); }
    .gm-hero3-chip.pos-a { top: -8px; right: 6%; }
    .gm-hero3-chip.pos-b { bottom: -10px; right: 36%; }

    /* ---------- Brand-strip marquee ---------- */
    .gm-brandstrip {
      margin-top: 22px;
      overflow: hidden;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: linear-gradient(180deg, #121217 0%, #0c0c10 100%);
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
              mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    }
    .gm-brandstrip-track {
      display: flex; gap: 14px; padding: 14px;
      width: max-content;
      animation: gm-marquee 36s linear infinite;
    }
    .gm-brandstrip:hover .gm-brandstrip-track { animation-play-state: paused; }
    .gm-brandstrip-pill {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 8px 16px 8px 8px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 9999px;
      color: var(--text); font-weight: 600; font-size: 13px;
      white-space: nowrap; text-decoration: none;
      transition: transform .15s ease, border-color .15s ease, background .15s ease;
    }
    .gm-brandstrip-pill:hover {
      border-color: var(--accent-2); background: color-mix(in srgb, var(--accent) 8%, transparent);
      transform: translateY(-1px);
    }
    .gm-brandstrip-avatar {
      width: 28px; height: 28px; border-radius: 50%;
      background: #14121a center / cover no-repeat;
      flex-shrink: 0;
      border: 1px solid rgba(255,255,255,0.1);
    }
    @keyframes gm-marquee { to { transform: translateX(-50%); } }
    @media (prefers-reduced-motion: reduce) {
      .gm-brandstrip-track { animation: none; }
    }

    /* ---------- Featured scroller ---------- */
    .gm-featured {
      display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 18px;
      scroll-snap-type: x mandatory;
      scrollbar-width: thin;
    }
    .gm-featured::-webkit-scrollbar { height: 8px; }
    .gm-featured::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 9999px; }
    .gm-featured::-webkit-scrollbar-track { background: transparent; }

    .gm-featured-card {
      flex: 0 0 auto;
      width: 260px; min-height: 320px;
      position: relative; overflow: hidden;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,0.06);
      color: #fff; text-decoration: none;
      display: flex; flex-direction: column; justify-content: flex-end;
      padding: 18px;
      scroll-snap-align: start;
      isolation: isolate;
      transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    }
    @media (min-width: 720px) { .gm-featured-card { width: 290px; min-height: 360px; } }
    .gm-featured-card::before {
      content: ""; position: absolute; inset: 0; z-index: -2;
      background-size: cover; background-position: center;
      transition: transform 400ms ease;
    }
    .gm-featured-card::after {
      content: ""; position: absolute; inset: 0; z-index: -1;
      background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.65) 55%, rgba(0,0,0,0.92) 100%);
    }
    .gm-featured-card:hover {
      transform: translateY(-4px);
      border-color: rgba(255,255,255,0.18);
      box-shadow: 0 22px 50px -18px rgba(0,0,0,0.55);
    }
    .gm-featured-card:hover::before { transform: scale(1.06); }
    .gm-featured-card-top {
      position: absolute; top: 14px; left: 14px; right: 14px;
      display: flex; justify-content: space-between; align-items: center;
      z-index: 1;
    }
    .gm-featured-badge {
      display: inline-block;
      padding: 4px 10px; border-radius: 9999px;
      font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
      text-transform: uppercase;
      background: rgba(255,255,255,0.14);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .gm-featured-pub { font-size: 11px; color: rgba(255,255,255,0.7); font-weight: 600; }
    .gm-featured-card h3 { margin: 0 0 4px; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
    .gm-featured-card p  { margin: 0 0 12px; font-size: 0.82rem; opacity: 0.8; line-height: 1.4; }
    .gm-featured-cta {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 0.82rem; font-weight: 700;
      padding: 8px 14px; border-radius: 9999px;
      background: #fff; color: #0a0a0c;
      align-self: flex-start;
      transition: transform 120ms ease, background 120ms ease;
    }
    .gm-featured-card:hover .gm-featured-cta { transform: translateX(3px); background: #ffd166; }

    /* ---------- Search + filter bar ---------- */
    .gm-filterbar {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin-bottom: 16px;
    }
    @media (min-width: 720px) {
      .gm-filterbar { grid-template-columns: 1fr auto; align-items: center; }
    }
    .gm-filterbar-search {
      position: relative;
      display: flex; align-items: center;
    }
    .gm-filterbar-search input {
      width: 100%;
      padding: 12px 14px 12px 40px;
      background: var(--bg-card);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 12px;
      font-size: 14px; outline: none;
      transition: border-color .15s, background .15s;
    }
    .gm-filterbar-search input:focus { border-color: var(--accent); background: var(--bg-elev); }
    .gm-filterbar-search svg {
      position: absolute; left: 13px;
      width: 18px; height: 18px; color: var(--text-3); pointer-events: none;
    }
    .gm-filterbar-chips {
      display: flex; gap: 8px; flex-wrap: wrap; overflow-x: auto;
    }
    .gm-filterbar-chip {
      padding: 8px 14px; border-radius: 9999px;
      background: var(--bg-card); color: var(--text-2);
      font-size: 12.5px; font-weight: 600; border: 1px solid var(--border);
      cursor: pointer; white-space: nowrap;
      transition: background .15s, color .15s, border-color .15s;
    }
    .gm-filterbar-chip:hover { color: var(--text); border-color: var(--accent-2); }
    .gm-filterbar-chip.is-active {
      background: var(--accent); color: #111; border-color: var(--accent); font-weight: 700;
    }

    .gm-grid-empty {
      padding: 40px 20px; text-align: center;
      color: var(--text-3); font-size: 14px;
      background: var(--bg-card); border: 1px dashed var(--border);
      border-radius: var(--radius);
      display: none;
    }
    .gm-grid-empty.is-visible { display: block; }

    /* ---------- Why cards (icons) ---------- */
    .gm-why-card {
      display: flex; align-items: flex-start; gap: 14px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px; transition: border-color 160ms ease, transform 120ms ease;
    }
    .gm-why-card:hover { border-color: var(--accent-2); transform: translateY(-2px); }
    .gm-why-ico {
      width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
      display: grid; place-items: center;
      background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent-2) 8%, transparent));
      border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
      color: var(--accent-2); font-size: 22px;
    }
    .gm-why-card h4 { margin: 0 0 6px; font-size: 14.5px; font-weight: 700; color: var(--text); }
    .gm-why-card p  { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.55; }

    .gm-whygrid {
      display: grid; gap: 12px;
      grid-template-columns: repeat(1, 1fr);
    }
    @media (min-width: 560px) { .gm-whygrid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 900px) { .gm-whygrid { grid-template-columns: repeat(3, 1fr); } }

    /* Wrapper lets the anchor be a direct grid child (preserves equal-
       height rows) while we still toggle data attrs on the wrapper. */
    .gm-card-wrap { display: contents; }
    .gm-card-wrap.is-hidden { display: none; }
  
/* Inisial pengganti gambar game yang tak punya poster di upstream. */
.gm-card-initial {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  font-weight: 900; font-size: 1.6rem; letter-spacing: -.02em;
  color: var(--text-2);
  background: linear-gradient(135deg, var(--bg-card-2), var(--bg-elev));
}

/*
 * Perbaikan lebar untuk nama game panjang.
 *
 * Kolom grid `1fr` sebenarnya `minmax(auto, 1fr)`: lebar minimumnya mengikuti
 * kata terpanjang di dalamnya. Nama seperti "MOBILE LEGENDS INDONESIA" membuat
 * kolom melebar melewati layar, dan SELURUH halaman ikut menggeser ke samping
 * di HP. minmax(0, 1fr) melepas ikatan itu.
 */
.gm-tilewall,
.gm-hero3-grid,
.gm-grid-trending,
.gm-whygrid {
  grid-template-columns: repeat(var(--gm-cols, 1), minmax(0, 1fr));
}
.gm-tilewall { --gm-cols: 3; }
@media (min-width: 640px)  { .gm-grid-trending { --gm-cols: 2; } }
@media (min-width: 960px)  { .gm-grid-trending { --gm-cols: 3; } .gm-hero3-grid { --gm-cols: 2; } .gm-whygrid { --gm-cols: 2; } }

.gm-tilewall-tile,
.gm-card,
.gm-featured-card { min-width: 0; }

.gm-tilewall-tile-label,
.gm-card-title,
.gm-brandstrip-pill { overflow-wrap: anywhere; }

/* Jaring pengaman terakhir: tak ada satu pun elemen yang boleh membuat seluruh
   halaman bisa digeser ke samping. */
html, body { max-width: 100%; overflow-x: hidden; }


/* ─── Halaman game (brand hero, kelompok nominal, chip filter) ─── */

    .gm-brand-hero {
      position: relative; overflow: hidden;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      margin-top: 20px;
      padding: 28px 24px;
      display: flex; gap: 20px; align-items: center;
      isolation: isolate;
              color: #fff;
          }
        .gm-brand-hero::before {
      content: ""; position: absolute; inset: 0; z-index: -2;
      background: var(--hero-img, linear-gradient(135deg, var(--accent), var(--bg-elev))) center / cover no-repeat;
      filter: blur(22px) saturate(120%);
      transform: scale(1.12);
    }
    .gm-brand-hero::after {
      content: ""; position: absolute; inset: 0; z-index: -1;
      background: linear-gradient(120deg, rgba(11,11,13,0.78) 0%, rgba(11,11,13,0.65) 40%, rgba(11,11,13,0.3) 100%);
    }
    
    .gm-brand-hero .gm-show-avatar {
      width: 96px; height: 96px; font-size: 30px;
      border: 2px solid rgba(255,255,255,0.14);
      box-shadow: 0 18px 44px -16px rgba(0,0,0,0.6);
    }
    .gm-brand-hero-title {
      margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.01em;
    }
    @media (min-width: 720px) { .gm-brand-hero-title { font-size: 32px; } }
    .gm-brand-hero-meta {
      display: inline-flex; gap: 8px; flex-wrap: wrap; margin-top: 6px;
    }
    .gm-brand-hero-pill {
      padding: 4px 10px; border-radius: 9999px;
      background: rgba(255,255,255,0.1);
      font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
      color: #fff;
      border: 1px solid rgba(255,255,255,0.1);
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    }
    .gm-brand-hero-pill.is-accent {
      background: color-mix(in srgb, var(--accent-2) 18%, transparent);
      border-color: color-mix(in srgb, var(--accent-2) 40%, transparent);
      color: color-mix(in srgb, var(--accent-2) 55%, #ffffff);
    }
    .gm-brand-hero-tagline {
      margin: 12px 0 0;
      font-size: 14px; color: rgba(255,255,255,0.82);
      max-width: 38rem; line-height: 1.55;
    }
    @media (max-width: 560px) {
      .gm-brand-hero { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
      .gm-brand-hero .gm-show-avatar { width: 76px; height: 76px; font-size: 26px; }
      .gm-brand-hero-title { font-size: 22px; }
    }

    /* ─── Grouped nominal layout ──────────────────────────── */
    /* Compact chips that always wrap to multiple lines — never scroll
       horizontally. Keeps the strip tidy even with many categories. */
    .gm-nominal-filters-wrap { margin: 6px 0 20px; }
    .gm-nominal-filters {
      display: flex; flex-wrap: wrap; gap: 8px;
      padding: 0;
    }

    .gm-chip {
      --chip-accent: var(--accent-2);
      position: relative; flex: 0 0 auto;
      display: inline-flex; align-items: center; gap: 8px;
      padding: 7px 12px 7px 7px;
      border-radius: 10px;
      background: rgba(255,255,255,0.025);
      border: 1px solid rgba(255,255,255,0.07);
      color: var(--text-2);
      font-family: inherit; font-size: 13px; font-weight: 600;
      letter-spacing: 0.01em;
      cursor: pointer;
      transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
      white-space: nowrap;
    }
    .gm-chip:hover {
      background: rgba(255,255,255,0.05);
      border-color: rgba(255,255,255,0.14);
      color: var(--text);
    }
    .gm-chip:active { transform: scale(0.97); }

    .gm-chip-icon {
      flex: 0 0 auto;
      width: 24px; height: 24px;
      display: grid; place-items: center;
      border-radius: 7px;
      background: color-mix(in srgb, var(--chip-accent) 14%, transparent);
      color: var(--chip-accent);
      transition: background .18s ease, color .18s ease, transform .18s ease;
    }
    .gm-chip-icon svg { width: 14px; height: 14px; display: block; }

    .gm-chip-label { display: inline-flex; align-items: baseline; gap: 6px; line-height: 1.15; }
    .gm-chip-label-top { font-size: 13px; font-weight: 700; letter-spacing: 0.01em; color: inherit; }
    .gm-chip-label-sub {
      display: inline-flex; align-items: center;
      min-width: 18px; height: 18px;
      padding: 0 6px; border-radius: 9999px;
      background: rgba(255,255,255,0.07);
      /* Latar pil ini lebih terang daripada kartu, jadi --text-3 pun masih
         kurang di sini; --text-2 yang lolos AA tanpa membuat angkanya
         berteriak. */
      color: var(--text-2);
      font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
    }

    .gm-chip.is-active {
      background: linear-gradient(135deg,
        color-mix(in srgb, var(--chip-accent) 22%, transparent) 0%,
        color-mix(in srgb, var(--chip-accent) 8%, transparent) 100%);
      border-color: color-mix(in srgb, var(--chip-accent) 45%, transparent);
      color: var(--text);
      box-shadow: 0 8px 22px -14px color-mix(in srgb, var(--chip-accent) 60%, transparent);
    }
    .gm-chip.is-active .gm-chip-icon {
      background: color-mix(in srgb, var(--chip-accent) 28%, transparent);
      color: #fff;
      transform: scale(1.05);
    }
    .gm-chip.is-active .gm-chip-label-sub {
      background: color-mix(in srgb, var(--chip-accent) 22%, transparent);
      color: color-mix(in srgb, var(--chip-accent) 85%, #fff 15%);
    }

    /* Group sections */
    .gm-nominal-group { margin-top: 28px; scroll-margin-top: 84px; }
    .gm-nominal-group:first-of-type { margin-top: 4px; }

    .gm-nominal-group-title {
      --title-accent: var(--accent-2);
      display: flex; align-items: center; gap: 12px;
      margin: 0 0 14px; padding: 0;
      font-size: 16px; font-weight: 800; letter-spacing: -0.005em;
      color: var(--text);
    }
    .gm-nominal-group-title-icon {
      flex: 0 0 auto;
      width: 36px; height: 36px;
      display: grid; place-items: center;
      border-radius: 10px;
      background: color-mix(in srgb, var(--title-accent) 14%, transparent);
      color: var(--title-accent);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--title-accent) 22%, transparent);
    }
    .gm-nominal-group-title-icon svg { width: 20px; height: 20px; display: block; }
    .gm-nominal-group-count {
      display: inline-flex; align-items: center;
      padding: 2px 9px; border-radius: 9999px;
      background: color-mix(in srgb, var(--title-accent) 14%, transparent);
      color: var(--title-accent);
      font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
    }

    .gm-nominal-tier-title {
      display: inline-flex; align-items: center; gap: 10px;
      margin: 18px 0 10px; padding: 0;
      font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em;
      color: var(--text-3); text-transform: uppercase;
    }
    .gm-nominal-tier-title::before {
      content: ""; display: inline-block;
      width: 22px; height: 2px; border-radius: 2px;
      background: linear-gradient(90deg, var(--title-accent, var(--accent-2)), transparent);
    }

    /* Card refinements so grouped cards read cleaner */
    .gm-nominal-name { line-height: 1.3; }
    .gm-nominal-sub {
      display: block; font-size: 11.5px; font-weight: 500;
      color: var(--text-3); margin-top: 2px;
    }
    .gm-nominal-icon svg {
      width: 20px; height: 20px; display: block;
      stroke: currentColor;
    }

    /* ─── Mobile tuning ────────────────────────────────────────────── */

    /* Tablet + phone: keep filter bar pinned at top while user browses the
       long nominal list. Sticks inside .gm-step so it floats over the list
       but stays within the card. */
    @media (max-width: 900px) {
      /* Inside the stacked layout the aside makes no sense sticky. */
      .gm-summary { position: static; top: auto; }
    }

    @media (max-width: 720px) {
      /* Mobile: wrap chips across rows, no more horizontal scroll. */
      .gm-nominal-filters-wrap { margin: 4px 0 14px; }
      .gm-nominal-filters { flex-wrap: wrap; gap: 6px; }

      .gm-chip { padding: 6px 10px 6px 6px; gap: 6px; border-radius: 9px; }
      .gm-chip-icon { width: 22px; height: 22px; border-radius: 6px; }
      .gm-chip-icon svg { width: 13px; height: 13px; }
      .gm-chip-label-top { font-size: 12.5px; }
      .gm-chip-label-sub { font-size: 10px; min-width: 16px; height: 16px; padding: 0 5px; }

      .gm-nominal-group { margin-top: 20px; scroll-margin-top: 16px; }
      .gm-nominal-group-title { font-size: 15px; gap: 10px; margin-bottom: 12px; }
      .gm-nominal-group-title-icon { width: 32px; height: 32px; }
      .gm-nominal-group-title-icon svg { width: 18px; height: 18px; }

      .gm-nominal-tier-title { margin: 14px 0 8px; font-size: 11px; }

      .gm-nominal { padding: 12px; gap: 10px; }
      .gm-nominal-icon { width: 36px; height: 36px; }
      .gm-nominal-icon svg { width: 18px; height: 18px; }
    }

    /* Very narrow screens: even tighter pills so 2–3 fit per row */
    @media (max-width: 420px) {
      .gm-nominal-filters { gap: 5px; }
      .gm-chip { padding: 5px 9px 5px 5px; gap: 5px; border-radius: 8px; }
      .gm-chip-icon { width: 20px; height: 20px; border-radius: 5px; }
      .gm-chip-icon svg { width: 12px; height: 12px; }
      .gm-chip-label-top { font-size: 12px; }
      .gm-chip-label-sub { font-size: 9.5px; min-width: 14px; height: 15px; padding: 0 4px; }
      .gm-nominal { padding: 11px; }
      .gm-nominal-name { font-size: 13.5px; }
      .gm-nominal-price { font-size: 13.5px; }
    }

    /* Trim .gm-step card padding on phones so cards get more usable width */
    @media (max-width: 560px) {
      .gm-step { padding: 16px; }
      .gm-step-head { gap: 10px; margin-bottom: 12px; }
      .gm-step-title { font-size: 15px; }
    }
  
/* Kartu nominal: nama dan harga ditumpuk dalam satu kolom supaya tak saling
   dorong saat nama panjang ("Membership Mingguan X3"). */
.gm-nominal > span:last-child { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.gm-nominal-name { display: block; }
.gm-nominal-price { display: block; margin-top: 0; }
.gm-nominal.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.gm-nominal.is-active .gm-nominal-icon { background: var(--accent); color: #111; }

/* Akun game tersimpan (kartu pilih-cepat di atas kolom ID). */
.gm-saved-list-wrap { margin-bottom: 16px; }
.gm-saved-list-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 8px; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
}
.gm-saved-list-head a { color: var(--accent-2); text-transform: none; letter-spacing: 0; font-weight: 600; }
.gm-saved-list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.gm-saved-card {
  flex: 0 0 auto; max-width: 260px;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px; cursor: pointer; text-align: left;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text);
  transition: border-color .15s ease, background .15s ease;
}
.gm-saved-card:hover { border-color: var(--border-2); background: var(--bg-card-2); }
.gm-saved-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.gm-saved-card-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gm-saved-avatar {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #111; font-weight: 800;
}
.gm-saved-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gm-saved-info strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-saved-info .gm-small { font-size: 11.5px; }

/* Blok genre di daftar "Semua Game". */
.gm-genre-block + .gm-genre-block { margin-top: 22px; }
.gm-chip-count {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  border-radius: 999px; background: rgba(255,255,255,.08);
  /* Sama seperti .gm-chip-label-sub: latarnya lebih terang daripada kartu. */
  font-size: 11px; font-weight: 700; color: var(--text-2);
}
.gm-filterbar-chip.is-active .gm-chip-count { background: rgba(0,0,0,.18); color: inherit; }

/* Bilah bayar menempel di bawah layar HP. Di desktop ringkasan samping sudah
   selalu terlihat, jadi bilah ini justru mengganggu — disembunyikan. */
.gm-sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(11,11,13,.94);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-top: 1px solid var(--border-2);
}
.gm-sticky-info { display: flex; flex-direction: column; line-height: 1.2; }
.gm-sticky-info strong { font-size: 17px; font-weight: 800; color: var(--accent-2); }
.gm-sticky-bar .gm-btn { flex: 0 0 auto; }
@media (min-width: 960px) { .gm-sticky-bar { display: none !important; } }

/* Kartu metode pembayaran. */
.gm-paymethods { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .gm-paymethods { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gm-paymethod {
  display: flex; align-items: center; gap: 10px; padding: 12px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.gm-paymethod-title { margin: 0; font-size: 13.5px; font-weight: 700; }
.gm-paymethod-meta { margin: 2px 0 0; font-size: 11.5px; color: var(--text-3); }

/* Atribut hidden kalah oleh display:flex di aturan di atas. Tanpa baris ini
   bilah bayar muncul sebelum pembeli memilih nominal apa pun. */
.gm-sticky-bar[hidden] { display: none !important; }

/* Bilah itu melayang di atas halaman, jadi baris terakhir footer tertutup
   olehnya begitu nominal dipilih. Ruang di bawah ditambah hanya SELAMA bilah
   tampil — kalau dipasang permanen, halaman tanpa bilah punya celah kosong.
   Peramban tanpa :has() mengabaikan aturan ini dan kembali ke keadaan lama. */
@media (max-width: 959px) {
  body:has(.gm-sticky-bar:not([hidden])) { padding-bottom: 76px; }
}

/* Notifikasi transaksi terbaru. Ditaruh di kiri bawah supaya tak menutupi
   bilah bayar menempel yang ada di bawah layar HP. */
.gm-proof {
  position: fixed; left: 14px; right: auto;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 65;
  display: flex; align-items: center; gap: 10px;
  max-width: min(320px, calc(100vw - 28px));
  padding: 10px 12px;
  background: var(--bg-elev); border: 1px solid var(--border-2);
  border-radius: 12px; box-shadow: var(--shadow);
  opacity: 0; transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease;
}
.gm-proof.is-in { opacity: 1; transform: translateY(0); }
.gm-proof-dot {
  width: 8px; height: 8px; flex: 0 0 auto; border-radius: 999px;
  background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent);
}
.gm-proof-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.gm-proof-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gm-proof-meta { font-size: 11.5px; color: var(--text-3); }
.gm-proof-x {
  margin-left: auto; flex: 0 0 auto; background: none; border: 0; cursor: pointer;
  color: var(--text-3); font-size: 18px; line-height: 1; padding: 0 2px;
}
.gm-proof-x:hover { color: var(--text); }
.gm-proof[hidden] { display: none !important; }

/* Di layar kecil bilah bayar menempati bagian bawah — notifikasi dinaikkan,
   TAPI hanya saat bilahnya benar-benar tampil. Dulu 82px dipasang untuk semua
   halaman kecil, jadi di beranda (yang tak punya bilah) popup melayang jauh di
   atas tepi layar dan terbaca menggantung di tengah, bukan toast di pojok. */
@media (max-width: 959px) {
  body:has(.gm-sticky-bar:not([hidden])) .gm-proof { bottom: 82px; }
}
@media (prefers-reduced-motion: reduce) { .gm-proof { transition: none; } }

/* ─────────────────────────── Halaman /akun ──────────────────────────────
 *
 * Dipakai bersama .gm-step dan .gm-table yang sudah ada — yang ditambah di
 * sini hanya yang memang belum punya bentuk: kepala identitas, angka saldo,
 * daftar mutasi, dan daftar ID game tersimpan.
 */
.gm-step-num--teks { font-size: 11px; letter-spacing: -.02em; }

.gm-akun-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 18px 20px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.gm-akun-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #111; font-weight: 800; font-size: 22px;
}
.gm-akun-ident { min-width: 0; flex: 1 1 200px; }
.gm-akun-ident h1 { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.25; }
.gm-akun-ident p { margin: 2px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.gm-akun-keluar { margin-left: auto; }

/* Dua kolom di layar lebar; saldo dan data akun sama-sama pendek. */
.gm-akun-grid { display: grid; gap: 14px; }
@media (min-width: 860px) { .gm-akun-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
@media (min-width: 860px) { .gm-akun-grid > .gm-step { margin-top: 14px; } }

.gm-akun-saldo {
  margin: 0 0 10px; font-size: 30px; font-weight: 800; letter-spacing: -.02em;
  color: var(--accent-2);
}
.gm-akun-subtitle {
  margin: 18px 0 8px; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
}

.gm-akun-mutasi { list-style: none; margin: 0; padding: 0; }
.gm-akun-mutasi li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.gm-akun-mutasi li:last-child { border-bottom: 0; }
.gm-akun-mutasi-ket { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 13px; }
.gm-akun-mutasi-nilai { font-size: 13px; font-weight: 700; white-space: nowrap; }
.gm-akun-mutasi-nilai.is-masuk  { color: var(--success); }
.gm-akun-mutasi-nilai.is-keluar { color: var(--text-2); }

.gm-akun-idlist { list-style: none; margin: 0; padding: 0; }
.gm-akun-idlist li {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 0; border-bottom: 1px solid var(--border);
}
.gm-akun-idlist li:last-child { border-bottom: 0; }
.gm-akun-idlist-game { font-size: 13.5px; font-weight: 700; min-width: 140px; }
.gm-akun-idlist form { margin-left: auto; }
.gm-akun-lupakan {
  background: none; border: 1px solid var(--border-2); border-radius: 999px;
  padding: 5px 12px; color: var(--text-3); font-size: 12px; cursor: pointer;
}
.gm-akun-lupakan:hover { border-color: var(--danger); color: var(--danger); }

/*
 * Riwayat pesanan di /akun.
 *
 * Satu markup, dua tata letak: bertumpuk di HP supaya Total dan Status ikut
 * terbaca, dan berbaris seperti tabel begitu layarnya cukup lebar.
 */
.gm-akun-pesanan { list-style: none; margin: 0; padding: 0; }
.gm-akun-pesanan li {
  display: grid; gap: 4px 12px; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "ref    total"
    "produk produk"
    "tujuan tujuan"
    "status lihat";
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.gm-akun-pesanan li:first-child { padding-top: 0; }
.gm-akun-pesanan li:last-child { border-bottom: 0; padding-bottom: 0; }

.gmp-ref    { grid-area: ref;    font-size: 12px; color: var(--text-3); }
.gmp-produk { grid-area: produk; display: flex; flex-direction: column; gap: 1px; font-size: 14px; font-weight: 600; min-width: 0; }
/* Nama game hanya keterangan — jangan ikut tebal seperti nama nominal. */
.gmp-produk .gm-small { font-weight: 500; }
.gmp-tujuan { grid-area: tujuan; color: var(--text-3); overflow-wrap: anywhere; }
.gmp-total  { grid-area: total;  font-size: 14px; font-weight: 700; white-space: nowrap; }
.gmp-status { grid-area: status; }
.gmp-lihat  { grid-area: lihat;  justify-self: end; color: var(--accent-2); }

@media (min-width: 760px) {
  .gm-akun-pesanan li {
    grid-template-columns: 116px minmax(0, 1.4fr) minmax(0, 1fr) auto auto auto;
    grid-template-areas: "ref produk tujuan total status lihat";
    gap: 12px;
  }
  .gmp-total { text-align: right; }
}

/* Tombol keluar melebar penuh di HP; menempel kanan begitu satu baris cukup. */
@media (max-width: 559px) {
  .gm-akun-keluar { width: 100%; margin-left: 0; }
  .gm-akun-keluar .gm-btn { width: 100%; justify-content: center; }
}

/*
 * Dinding ubin di hero: nama game disembunyikan di layar sempit.
 *
 * Ubinnya tiga kolom tetap, jadi di HP lebarnya hanya ~110px. Bersama
 * `overflow-wrap: anywhere` yang dipasang sebagai jaring pengaman luapan,
 * "MOBILE LEGENDS INDONESIA" pecah jadi "INDONESI / A" dan menumpuk di atas
 * gambarnya. Dindingnya memang dekorasi (aria-hidden) dan nama yang sama sudah
 * muncul di pita judul serta daftar "Semua Game" di bawahnya — jadi di HP
 * gambarnya saja sudah cukup. Ubin TANPA gambar tetap berlabel, kalau tidak ia
 * cuma kotak hitam.
 */
@media (max-width: 639px) {
  .gm-tilewall-tile--img .gm-tilewall-tile-label { display: none; }
  .gm-tilewall-tile--img::after {
    background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.45) 100%);
  }
  .gm-tilewall-tile-label { font-size: 0.68rem; overflow-wrap: normal; }
}

/* Baris jaminan di kaki halaman. Menggantikan ruang kosong tepat di titik
   pembeli paling ragu; isinya hanya yang benar-benar berlaku di sistem. */
.gm-jaminan { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0,1fr)); padding: 26px 0 6px; }
@media (min-width: 860px) { .gm-jaminan { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.gm-jaminan-item {
  display: flex; gap: 10px; align-items: flex-start; margin: 0;
  padding: 13px; border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  background: var(--bg-card); font-size: 12.5px; line-height: 1.45; color: var(--text-2);
}
.gm-jaminan-item svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--accent-2); margin-top: 1px; }
.gm-jaminan-item strong { display: block; color: var(--text); font-size: 13px; }