/*
 * TEMPLATE 7 — "NEON"
 *
 * Kerangka aplikasi GELAP untuk toko yang pembelinya datang dari TAUTAN: status
 * WhatsApp, bio TikTok, komentar Instagram. Pembeli seperti itu mendarat di HP,
 * sudah membawa niat, dan menilai tokonya dalam dua detik pertama.
 *
 * Empat hal yang membedakannya dari enam template lain:
 *
 * 1. LAYAR PERTAMA MILIK YANG MENDESAK. Promo yang sedang berjalan berdiri di
 *    paling atas, lengkap dengan hitung mundurnya. T6 sebaliknya: layar
 *    pertamanya milik kolom cari, karena pembelinya datang membawa nama game.
 * 2. TAB DI BAWAH, TANPA FOOTER — sama seperti T4. Yang berbeda nadanya: T4
 *    terang dan menjelaskan, T7 gelap dan menawarkan.
 * 3. KARTU BERPENDAR. Aksen dipakai sebagai cahaya (gradien, bayang berwarna,
 *    garis tipis), bukan cuma sebagai isi tombol. Inilah alasan paletnya
 *    dipilih dari nada MENYALA dan bukan nada tua.
 * 4. TOMBOL BERTULISAN GELAP. Di atas aksen menyala, teks putih berhenti di
 *    sekitar 3,9 — di bawah ambang WCAG AA — dan tombol "Bayar" jadi bagian
 *    paling sulit dibaca di seluruh toko. Tinta gelap membalikkannya jadi 7 ke
 *    atas tanpa meredupkan warnanya. Lihat kunci `uji` template ini di
 *    config/fireflazz.php; kalau nilai di sini digeser, alat uji kontras
 *    mengukur warna yang tak pernah dilihat pembeli.
 *
 * KEJUJURAN. Aturan yang ditulis di theme.css T6 tetap berlaku: tak ada
 * bintang, jumlah terjual, ulasan, atau stok palsu. Hitung mundur dan sisa slot
 * di tema ini BUKAN pengecualian — keduanya membaca kolom `promos.selesai_at`
 * dan `promos.terpakai` yang memang ada isinya, dan gayanya pun tinggal di
 * store/partials/promo.blade.php supaya keenam template lain ikut memakainya.
 *
 * Warna toko masuk lewat --accent / --accent-2 / --brand dari layout. JANGAN
 * menulis nilai aksen harfiah di sini: T1 dulu mematok oranye di 47 tempat dan
 * toko biru tetap berkilau oranye.
 *
 * Kosakata kelasnya `n7-*` — tak bertabrakan dengan gm-*, t2-*, b3-*, a4-*,
 * k5-*, maupun p6-*.
 */

:root {
  --bg:    #0A0E1A;
  --card:  #141A2E;
  --sunk:  #0F1526;
  --line:  #232B45;
  --ink:   #EEF1F8;
  --ink-2: #A7B0C6;
  /* 3,88 di atas --card — di bawah AA, dan warna ini memegang harga coret di
     kartu game maupun kartu nominal. */
  --ink-3: #78829E;

  /* Nilai bawaan; layout menimpanya dengan warna toko. --accent-2 adalah TINTA
     beraksen (70% aksen + putih) — rumusnya wajib sama persis dengan kunci
     `uji.tinta` template ini di config/fireflazz.php. */
  --accent:   #A78BFA;
  --accent-2: color-mix(in srgb, var(--accent) 70%, #ffffff);
  --brand:    #22D3EE;

  --a-08: color-mix(in srgb, var(--accent) 8%, transparent);
  --a-14: color-mix(in srgb, var(--accent) 14%, transparent);
  --a-28: color-mix(in srgb, var(--accent) 28%, transparent);
  --a-45: color-mix(in srgb, var(--accent) 45%, transparent);

  --ok:   #34D399;
  --bad:  #FB7185;
  --warn: #FBBF24;

  --r:    16px;
  --r-sm: 11px;

  /* Bayang di tema gelap tak terlihat sebagai bayang — yang terbaca cuma
     PENDARnya. Karena itu bayang kartu berwarna aksen, bukan hitam. */
  --sh:   0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px -18px rgba(0,0,0,.9);
  --glow: 0 0 0 1px var(--a-28), 0 12px 34px -18px var(--a-45);

  /* Tinggi bilah atas dan bilah tab. Dihitung SEKALI di sini: menghitungnya
     ulang di dua tempat berarti chip kategori menutupi kolom cari, atau tombol
     bayar tertimbun tab. */
  --top-h: 56px;
  --tab-h: calc(64px + env(safe-area-inset-bottom, 0px));
  --bar-h: calc(72px + env(safe-area-inset-bottom, 0px));
}

* { box-sizing: border-box; }

/* Menang atas display:flex/grid komponen. Tanpa ini bilah bayar bertanda
   `hidden` tetap terlihat sebelum nominal dipilih. */
[hidden] { display: none !important; }

/* Sasaran tautan dalam-halaman (#katalog, #saldo) harus berhenti DI BAWAH bilah
   atas yang menempel, kalau tidak judulnya tertutup dan pembeli mengira
   tautannya melompat ke tempat yang salah. */
[id] { scroll-margin-top: calc(var(--top-h) + 14px); }
/* Beranda menumpuk DUA bilah: atas (56px) lalu kategori (48px). */
.n7-beranda [id] { scroll-margin-top: calc(var(--top-h) + 62px); }

html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  /* Tab bawah menutupi 64px terakhir halaman. Tanpa ruang ini, baris terakhir
     tiap halaman — biasanya tombol — berada persis di baliknya. */
  padding-bottom: var(--tab-h);
  -webkit-font-smoothing: antialiased;
}

/*
 * Dua pendar besar di pojok atas. Ini satu-satunya hiasan murni di tema ini,
 * dan ia dipasang di ::before body supaya tak ikut menggulir bersama isi —
 * gradien yang menggulir terlihat seperti gambar latar yang salah pasang.
 */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 420px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(90% 120% at 12% 0%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 62%),
    radial-gradient(80% 110% at 92% 6%, color-mix(in srgb, var(--brand) 14%, transparent) 0%, transparent 60%);
}
body > * { position: relative; z-index: 1; }

a { color: var(--accent-2); }
img { max-width: 100%; display: block; }

/* ─────────────────────────────── Kerangka ─────────────────────────────── */

.n7-wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 16px 32px; }

/* Bingkai isi yang dibaca blok bersama (lapak, artikel). WAJIB sama persis
   dengan .n7-wrap di atas; alasannya di t1/theme.css. */
:root { --ff-wrap: 760px; --ff-gutter: 16px; }

.n7-sec { margin-top: 26px; }
.n7-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.n7-sec-title { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
/* Kotak sentuh 20px -> 32px tanpa menggeser tata letak; lihat .a4-sec-link. */
.n7-sec-link {
  font-size: 13px; font-weight: 700; text-decoration: none;
  display: inline-block; padding: 7px 0; margin: -7px 0;
}
.n7-sec-link:hover { text-decoration: underline; }

.n7-small { font-size: 12.5px; }
.n7-mute  { color: var(--ink-2); }
.n7-dim   { color: var(--ink-3); }
.n7-mono  { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.n7-num   { font-variant-numeric: tabular-nums; }
.n7-center{ text-align: center; }
.n7-danger{ color: var(--bad); }
.n7-mt-1 { margin-top: 8px; }
.n7-mt-2 { margin-top: 14px; }
.n7-mt-3 { margin-top: 20px; }
.n7-mb-2 { margin-bottom: 12px; }

/* ────────────────────────────── Bilah atas ────────────────────────────── */

.n7-top {
  position: sticky; top: 0; z-index: 40;
  height: var(--top-h);
  /* Latar buram, bukan pekat: isi yang lewat di bawahnya harus terasa lewat,
     bukan menghilang di balik dinding. */
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
/* Lebar dan padding-nya sendiri, bukan menumpang .n7-wrap: .n7-wrap membawa
   padding bawah 32px untuk isi halaman, dan di dalam bilah setinggi 56px itu
   mendorong isinya keluar. */
.n7-top-in {
  display: flex; align-items: center; gap: 10px;
  height: var(--top-h); max-width: 760px; margin: 0 auto; padding: 0 16px;
}

.n7-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; min-width: 0; }
.n7-brand-mark {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center; overflow: hidden;
  font-size: 15px; font-weight: 800; color: #0A0E1A;
  background: linear-gradient(140deg, var(--accent), var(--brand));
}
.n7-brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.n7-brand-name { font-size: 14.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Nama toko disembunyikan di layar sempit supaya kolom cari tetap dapat ruang
   yang layak; markanya tetap ada, jadi identitas tokonya tak hilang. */
@media (max-width: 400px) { .n7-brand-name { display: none; } }

.n7-search { position: relative; flex: 1 1 auto; min-width: 0; }
.n7-search-ic {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--ink-3); pointer-events: none;
}
.n7-search input {
  width: 100%; height: 38px; padding: 0 12px 0 33px;
  border-radius: 99px; border: 1px solid var(--line);
  background: var(--sunk); color: var(--ink);
  font: inherit; font-size: 13.5px;
}
.n7-search input::placeholder { color: var(--ink-3); }
.n7-search input:focus { outline: none; border-color: var(--a-45); box-shadow: 0 0 0 3px var(--a-14); }
/* Silang bawaan Safari/Chrome berwarna gelap di atas kolom gelap. */
.n7-search input::-webkit-search-cancel-button { filter: invert(1) opacity(.4); }

.n7-acc {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 99px;
  color: var(--ink-2); text-decoration: none;
  border: 1px solid var(--line); background: var(--sunk);
}
.n7-acc svg { width: 18px; height: 18px; }
.n7-acc:hover { color: var(--accent-2); border-color: var(--a-45); }

/* Pil saldo di bilah atas. Hanya dicetak kalau saldonya memang ada. */
.n7-saldo-pil {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 13px; border-radius: 99px;
  font-size: 13px; font-weight: 800; text-decoration: none;
  color: #0A0E1A; background: linear-gradient(120deg, var(--accent), var(--brand));
  white-space: nowrap;
}

/* ─────────────────────────── Bilah kategori ───────────────────────────── */

.n7-cats {
  position: sticky; top: var(--top-h); z-index: 35;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.n7-cats-in {
  display: flex; gap: 7px; overflow-x: auto; padding: 9px 16px;
  max-width: 760px; margin: 0 auto;
  scrollbar-width: none;
}
.n7-cats-in::-webkit-scrollbar { display: none; }

.n7-chip {
  flex: 0 0 auto; padding: 6px 13px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--sunk); color: var(--ink-2);
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
.n7-chip:hover { color: var(--ink); }
.n7-chip.is-active {
  color: #0A0E1A; font-weight: 800;
  background: var(--accent); border-color: var(--accent);
}
.n7-chiprow { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; scrollbar-width: none; }
.n7-chiprow::-webkit-scrollbar { display: none; }

/* ────────────────────────────── Judul depan ───────────────────────────── */

.n7-lead { padding: 20px 0 4px; }
.n7-lead h1 { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 800; letter-spacing: -.02em; }
.n7-lead p { margin: 7px 0 0; font-size: 13.5px; color: var(--ink-2); }

/* Deret janji mendatar. Di tempat ini marketplace lain memasang komidi putar
   promo karangan; yang dipajang di sini janji yang benar-benar berlaku. */
.n7-strip { display: flex; gap: 8px; overflow-x: auto; margin-top: 14px; padding-bottom: 4px; scrollbar-width: none; }
.n7-strip::-webkit-scrollbar { display: none; }
.n7-strip-item {
  flex: 0 0 auto; display: flex; align-items: flex-start; gap: 7px; margin: 0;
  width: 190px; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--card); border: 1px solid var(--line);
  font-size: 11.5px; line-height: 1.4; color: var(--ink-2);
}
.n7-strip-item svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px; color: var(--accent); }
.n7-strip-item strong { display: block; color: var(--ink); font-size: 12.5px; }

/* ──────────────────────────── Kartu & deret ───────────────────────────── */

.n7-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 132px;
  gap: 10px; overflow-x: auto; padding-bottom: 6px;
  scroll-snap-type: x proximity; scrollbar-width: none;
}
.n7-rail::-webkit-scrollbar { display: none; }
.n7-rail > * { scroll-snap-align: start; }

.n7-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (min-width: 520px) { .n7-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 720px) { .n7-grid { grid-template-columns: repeat(5, 1fr); } }

.n7-card {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r); text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.n7-card:hover { transform: translateY(-2px); border-color: var(--a-45); box-shadow: var(--glow); }
.n7-card:focus-visible { outline: 3px solid var(--a-45); outline-offset: 2px; }

.n7-card-art { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--sunk); }
.n7-card-art img { width: 100%; height: 100%; object-fit: cover; }
.n7-card-art-kosong {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-size: 26px; font-weight: 800; color: var(--accent-2);
  background: linear-gradient(150deg, var(--a-14), transparent);
}

/*
 * Lencana potongan menempel di gambar. Angkanya dihitung dari HARGA yang
 * dipajang (StorefrontController), bukan dari persen yang diketik seller —
 * harga promo dijepit lantai modal, jadi keduanya bisa berbeda.
 *
 * BRAND DIPAKAI SEBAGAI TEKS YANG DITERANGKAN, bukan sebagai latar. Sepuluh
 * palet template ini memang cerah, tapi pemilih warna bebas di panel tetap ada
 * dan seller boleh memasang cokelat tua atau biru dongker. Tinta gelap di atas
 * warna itu berhenti di sekitar 3 — lencana diskon, satu-satunya hal yang mau
 * dibaca orang di kartu ini, jadi yang paling sulit dibaca. Dicampur putih
 * dulu, warna segelap apa pun tetap terbaca di atas tabir hitamnya, dan brand
 * cerah tetap terbaca sebagai warnanya sendiri.
 */
.n7-card-badge {
  position: absolute; top: 6px; left: 6px;
  padding: 2px 7px; border-radius: 99px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .01em;
  color: color-mix(in srgb, var(--brand) 45%, #ffffff);
  background: rgba(6, 9, 18, .72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.n7-card-in { padding: 9px 10px 11px; display: flex; flex-direction: column; gap: 1px; }
.n7-card-name {
  font-size: 12.5px; font-weight: 700; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.n7-card-meta { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n7-card-coret { font-size: 10.5px; color: var(--ink-3); text-decoration: line-through; }
.n7-card-price { margin-top: 2px; font-size: 12.5px; font-weight: 800; color: var(--accent-2); }
.n7-card-price small { display: block; font-size: 10px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }

/* ───────────────────────────── Baris daftar ───────────────────────────── */

.n7-rows { display: flex; flex-direction: column; gap: 8px; }
.n7-row {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 13px; border-radius: var(--r-sm);
  background: var(--card); border: 1px solid var(--line);
  text-decoration: none; color: inherit; text-align: left;
  font: inherit; cursor: pointer;
}
.n7-row:hover { border-color: var(--a-45); }
.n7-row-static { cursor: default; }
.n7-row-static:hover { border-color: var(--line); }
.n7-row-ic {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; overflow: hidden;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 800; color: var(--accent-2);
  background: var(--a-14);
}
.n7-row-ic img { width: 100%; height: 100%; object-fit: cover; }
.n7-row-in { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.n7-row-in strong { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n7-row-in span { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n7-row-go { flex: 0 0 auto; color: var(--ink-3); font-size: 20px; line-height: 1; }
.n7-row-act {
  flex: 0 0 auto; padding: 5px 11px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--ink-2);
  font: inherit; font-size: 12px; font-weight: 700;
}
.n7-row-act:hover { color: var(--bad); border-color: var(--bad); }
.n7-amt { flex: 0 0 auto; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.n7-amt-in  { color: var(--ok); }
.n7-amt-out { color: var(--ink-2); }

/* ──────────────────────────── Saldo & akun ────────────────────────────── */

/*
 * Kartu saldo. Di situs rujukan tempat ini diisi lencana "Member VIP" — status
 * karangan yang tak berdiri di atas data apa pun. Yang dipajang di sini
 * angkanya sendiri: saldo betulan, yang lahir dari refund pesanan gagal dan
 * bisa langsung dipakai membayar.
 */
.n7-saldo {
  display: block; margin-top: 16px; padding: 16px 18px;
  border-radius: 18px; text-decoration: none; color: inherit;
  background:
    radial-gradient(120% 150% at 100% 0%, color-mix(in srgb, var(--brand) 30%, transparent) 0%, transparent 62%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
  border: 1px solid var(--a-28);
}
/* `> span` yang polos, bukan .n7-saldo span: keterangan di bawah nominal juga
   sebuah <span>, dan tanpa pembatas ini ia ikut jadi huruf kapital renggang. */
.n7-saldo > span { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-2); }
.n7-saldo > strong { display: block; margin-top: 3px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.n7-saldo > .n7-saldo-ket {
  margin-top: 4px; font-size: 12px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--ink-2);
}

.n7-akunhead { display: flex; align-items: center; gap: 13px; padding: 20px 0 2px; }
.n7-akunhead-av {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 18px;
  display: grid; place-items: center; overflow: hidden;
  font-size: 24px; font-weight: 800; color: #0A0E1A;
  background: linear-gradient(140deg, var(--accent), var(--brand));
}
.n7-akunhead-in { min-width: 0; }
.n7-akunhead-in h1 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.n7-akunhead-in p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; }

/* ───────────────────────── Kepala halaman game ────────────────────────── */

.n7-crumb { display: flex; align-items: center; gap: 6px; padding: 14px 0 0; font-size: 12px; color: var(--ink-3); }
.n7-crumb a { color: var(--ink-2); text-decoration: none; }
.n7-crumb a:hover { color: var(--accent-2); }
.n7-crumb b { color: var(--ink); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.n7-gamehead { display: flex; align-items: center; gap: 14px; padding: 14px 0 2px; }
.n7-gamehead-art {
  flex: 0 0 auto; width: 76px; height: 76px; border-radius: 18px; overflow: hidden;
  display: grid; place-items: center;
  font-size: 30px; font-weight: 800; color: var(--accent-2);
  background: var(--card); border: 1px solid var(--line);
  box-shadow: var(--glow);
}
.n7-gamehead-art img { width: 100%; height: 100%; object-fit: cover; }
.n7-gamehead-in { min-width: 0; }
.n7-gamehead-in h1 { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; }

.n7-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.n7-tag {
  padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 700;
  color: var(--ink-2); background: var(--sunk); border: 1px solid var(--line);
}
.n7-tag-a { color: #0A0E1A; background: var(--accent); border-color: var(--accent); }

/* ──────────────────────────── Panel & formulir ────────────────────────── */

.n7-panel {
  margin-top: 14px; padding: 15px; border-radius: var(--r);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh);
}
.n7-panel-title { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 14.5px; font-weight: 800; }
.n7-step-no {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 99px;
  font-size: 11.5px; font-weight: 800; color: #0A0E1A; background: var(--accent);
}

.n7-label { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.n7-input {
  width: 100%; height: 44px; padding: 0 13px;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--sunk); color: var(--ink);
  font: inherit; font-size: 15px;
}
.n7-input:focus { outline: none; border-color: var(--a-45); box-shadow: 0 0 0 3px var(--a-14); }
select.n7-input { appearance: none; background-image: none; }
.n7-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.n7-hint { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }
.n7-link { color: var(--accent-2); }

.n7-nick { margin: 9px 0 0; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.n7-nick.is-ok  { color: var(--ok); }
.n7-nick.is-bad { color: var(--bad); }

/* ID yang pernah dipakai — menghapus langkah paling merepotkan dari alurnya:
   mencari ID di dalam game. */
.n7-saved { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 12px; padding-bottom: 4px; scrollbar-width: none; }
.n7-saved::-webkit-scrollbar { display: none; }
.n7-saved-btn {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 8px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--line); background: var(--sunk); color: inherit;
  font: inherit; text-align: left;
}
.n7-saved-btn.is-active { border-color: var(--accent); background: var(--a-14); }
.n7-saved-av {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 99px;
  font-size: 12px; font-weight: 800; color: #0A0E1A; background: var(--accent);
}
.n7-saved-in { display: flex; flex-direction: column; min-width: 0; }
.n7-saved-in strong { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.n7-saved-in span { font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }

/* ─────────────────────────── Kartu nominal ────────────────────────────── */

.n7-tier { margin: 14px 0 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.n7-noms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
@media (min-width: 520px) { .n7-noms { grid-template-columns: repeat(3, 1fr); } }

.n7-nom {
  position: relative; display: flex; flex-direction: column; gap: 1px;
  padding: 11px 12px; border-radius: var(--r-sm); cursor: pointer;
  background: var(--sunk); border: 1px solid var(--line);
}
.n7-nom:hover { border-color: var(--a-45); }
.n7-nom.is-active {
  border-color: var(--accent);
  background: var(--a-14);
  box-shadow: 0 0 0 1px var(--accent), 0 10px 26px -18px var(--a-45);
}
/* Radio-nya `hidden`, jadi cincin fokus harus dipindah ke kartunya sendiri —
   kalau tidak, pengguna papan tik tak tahu sedang berada di nominal mana. */
.n7-nom:focus-within { outline: 3px solid var(--a-45); outline-offset: 2px; }

/* HARGA DULUAN, nama nominal di baris kedua: yang dibandingkan lebih dulu
   adalah angkanya, dan daftar ini memang urut menaik. */
.n7-nom-price { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; color: var(--accent-2); font-variant-numeric: tabular-nums; }
.n7-nom-name { font-size: 11.5px; color: var(--ink-2); line-height: 1.35; }
.n7-coret { font-size: 11px; color: var(--ink-3); text-decoration: line-through; }
/* Alasan yang sama dengan .n7-card-badge: brand jadi teks yang diterangkan,
   bukan latar bertinta gelap yang bisa lenyap kalau sellernya memilih warna tua. */
.n7-hemat {
  padding: 1px 6px; border-radius: 99px;
  font-size: 10px; font-weight: 800;
  color: color-mix(in srgb, var(--brand) 45%, #ffffff);
  background: color-mix(in srgb, var(--brand) 20%, transparent);
}

/* ──────────────────────────── Ringkasan bayar ─────────────────────────── */

.n7-buy { display: block; }
@media (min-width: 880px) {
  /* Di layar lebar ringkasan berdiri di kanan dan ikut menggulir sampai
     berhenti — di HP tugasnya diambil alih bilah bayar di bawah. */
  .n7-buy { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
  .n7-side { position: sticky; top: calc(var(--top-h) + 14px); }
}

.n7-sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13px; border-bottom: 1px dashed var(--line); }
.n7-sum-row > span:first-child { color: var(--ink-3); }
.n7-sum-row > span:last-child { text-align: right; overflow-wrap: anywhere; }
.n7-sum-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 11px; }
.n7-sum-total b { font-size: 20px; font-weight: 800; color: var(--accent-2); font-variant-numeric: tabular-nums; }

.n7-pays { display: flex; flex-direction: column; gap: 7px; }
.n7-pay { padding: 9px 11px; border-radius: var(--r-sm); background: var(--sunk); border: 1px solid var(--line); }
.n7-pay strong { display: block; font-size: 12.5px; font-weight: 700; }
.n7-pay span { font-size: 11px; color: var(--ink-3); }

.n7-trust { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.n7-trust-item { display: flex; align-items: flex-start; gap: 7px; margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--ink-2); }
.n7-trust-item svg { flex: 0 0 auto; width: 13px; height: 13px; margin-top: 2px; color: var(--ok); }

/* ───────────────────────────────── Tombol ─────────────────────────────── */

.n7-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 46px; padding: 0 20px; border-radius: 99px; border: 0;
  font: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  /* Tinta GELAP di atas aksen menyala. Lihat catatan di kepala berkas: putih
     di sini jatuh di bawah ambang WCAG AA. */
  color: #0A0E1A;
  background: linear-gradient(120deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--brand)));
  box-shadow: 0 10px 26px -14px var(--a-45);
}
.n7-btn:hover { filter: brightness(1.07); }
.n7-btn:focus-visible { outline: 3px solid var(--a-45); outline-offset: 2px; }
.n7-btn:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; filter: none; }
.n7-btn-full { display: flex; width: 100%; }
.n7-btn-ghost {
  color: var(--ink); background: transparent; border: 1px solid var(--line); box-shadow: none;
}
.n7-btn-ghost:hover { border-color: var(--a-45); color: var(--accent-2); filter: none; }

/* Bilah bayar di zona jempol. `hidden` ditegakkan CSS: atribut hidden
   sendirian kalah oleh display:flex dan bilahnya muncul menawarkan Rp 0. */
.n7-bar {
  position: fixed; left: 0; right: 0; bottom: var(--tab-h); z-index: 45;
  display: flex; align-items: center; gap: 12px;
  /* Tanpa safe-area di sini: bilah ini berdiri DI ATAS bilah tab, dan tab
     yang sudah menyerap inset itulah yang menyentuh tepi layar. */
  padding: 11px 16px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.n7-bar-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.n7-bar-info span { font-size: 11px; color: var(--ink-3); }
.n7-bar-info strong { font-size: 17px; font-weight: 800; color: var(--accent-2); font-variant-numeric: tabular-nums; }
/* Halaman berbilah bayar menyisakan ruang untuk DUA lapis: bilah + tab. */
.n7-has-bar { padding-bottom: calc(var(--tab-h) + var(--bar-h)); }
@media (min-width: 880px) { .n7-bar { display: none !important; } }

/* ──────────────────────────── Lencana & pesan ─────────────────────────── */

.n7-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 99px;
  font-size: 11.5px; font-weight: 800;
}
.n7-badge-ok   { color: var(--ok);   background: color-mix(in srgb, var(--ok) 15%, transparent); }
.n7-badge-bad  { color: var(--bad);  background: color-mix(in srgb, var(--bad) 15%, transparent); }
.n7-badge-wait { color: var(--warn); background: color-mix(in srgb, var(--warn) 15%, transparent); }
.n7-badge-run  { color: var(--accent-2); background: var(--a-14); }
.n7-dot {
  width: 6px; height: 6px; border-radius: 99px; background: currentColor;
  animation: n7-pulse 1.4s ease-in-out infinite;
}
@keyframes n7-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .n7-dot { animation: none; } }

.n7-alert { margin: 12px 0 0; padding: 11px 13px; border-radius: var(--r-sm); font-size: 13px; line-height: 1.5; }
.n7-alert-info  { color: var(--ink); background: var(--a-08); border: 1px solid var(--a-28); }
.n7-alert-ok    { color: var(--ok);  background: color-mix(in srgb, var(--ok) 12%, transparent);  border: 1px solid color-mix(in srgb, var(--ok) 32%, transparent); }
.n7-alert-error { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); border: 1px solid color-mix(in srgb, var(--bad) 32%, transparent); }

/* ───────────────────────── Tabel & kode serial ────────────────────────── */

.n7-table-wrap { overflow-x: auto; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.n7-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.n7-table td { padding: 11px 14px; border-top: 1px solid var(--line); }
.n7-table tr:first-child td { border-top: 0; }
.n7-table td:last-child { text-align: right; overflow-wrap: anywhere; }

.n7-serial {
  margin: 6px 0 0; padding: 12px 14px; border-radius: var(--r-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px; letter-spacing: .04em; overflow-wrap: anywhere;
  background: var(--sunk); border: 1px dashed var(--a-45);
}

/* ───────────────────────────── Bilah tab ──────────────────────────────── */

/*
 * Empat tujuan, selalu terlihat, di zona jempol. Menggantikan footer
 * sepenuhnya — tautan bantuan dan kebijakan pindah ke halaman Akun. Footer
 * panjang di tema yang bertab-bawah cuma ruang mati yang harus digulir.
 */
.n7-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: repeat(4, 1fr);
  height: var(--tab-h); padding-bottom: env(safe-area-inset-bottom, 0px);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
}
.n7-tab {
  /* Jangkar untuk garis penanda di bawah; tanpa ini garisnya diposisikan
     terhadap seluruh halaman dan melayang entah di mana. */
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-decoration: none; color: var(--ink-3);
  font-size: 10.5px; font-weight: 700;
}
.n7-tab svg { width: 21px; height: 21px; }
.n7-tab.is-active { color: var(--accent-2); }
.n7-tab:focus-visible { outline: 3px solid var(--a-45); outline-offset: -3px; }

/* Garis penanda tab aktif. Ditaruh di ATAS ikon, bukan di bawah label: bagian
   bawah bilah ini tertutup indikator gestur iOS di sebagian HP. */
.n7-tab.is-active::before {
  content: ""; position: absolute; top: 6px;
  width: 20px; height: 3px; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--brand));
}

/* ────────────────────────── Bukti sosial (popup) ──────────────────────── */

/*
 * Transaksi NYATA. Toko seller sungguhan hanya memajang transaksi yang
 * benar-benar terjadi; toko demo memakai isi peraga. Lihat App\Services\
 * SocialProof.
 */
.n7-proof {
  position: fixed; left: 12px; right: 12px; bottom: calc(var(--tab-h) + 10px); z-index: 46;
  display: flex; align-items: center; gap: 10px;
  max-width: 340px; padding: 10px 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--card) 96%, transparent);
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px -22px rgba(0,0,0,.95);
  opacity: 0; transform: translateY(10px);
  transition: opacity .26s ease, transform .26s ease;
}
.n7-proof.is-in { opacity: 1; transform: translateY(0); }
.n7-has-bar .n7-proof { bottom: calc(var(--tab-h) + var(--bar-h) + 10px); }
.n7-proof-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 99px; background: var(--ok); }
.n7-proof-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.n7-proof-title { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n7-proof-meta { font-size: 10.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n7-proof-x {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 99px; cursor: pointer;
  border: 0; background: transparent; color: var(--ink-3); font-size: 17px; line-height: 1;
}
.n7-proof-x:hover { color: var(--ink); }

@media (min-width: 560px) { .n7-proof { left: auto; right: 16px; } }