/* =========================================================================
   WansSMP Store
   Palet diambil dari logonya sendiri: es biru pada "WANS", ungu-magenta pada
   "SMP", dan latar biru malam yang nyaris hitam. Tidak ada warna yang dipilih
   di luar tiga itu, supaya halamannya terbaca sebagai satu benda dengan
   lambangnya, bukan sebagai halaman yang kebetulan menempelkan logo.
   ========================================================================= */

:root {
  /* dasar */
  --ink:        #05070f;
  --ink-2:      #080c18;
  --ink-3:      #0c1224;
  --line:       rgba(140, 180, 255, .13);
  --line-soft:  rgba(140, 180, 255, .07);

  /* warna logo */
  --ice:        #8ee7ff;
  --cyan:       #3bbdf8;
  --blue:       #4f7cff;
  --violet:     #9b6bff;
  --magenta:    #e879f9;

  /* teks */
  --text:       #e9efff;
  --dim:        #a9b8dc;
  --faint:      #8998bc;

  --radius:     18px;
  --radius-sm:  12px;
  --shell:      1180px;

  --shadow:     0 24px 60px rgba(0, 0, 0, .55);
  --glow-cyan:  0 0 40px rgba(59, 189, 248, .35);
  --glow-violet:0 0 40px rgba(155, 107, 255, .35);
}

* { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0 !important; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Aturan display milik kelas mengalahkan [hidden] bawaan peramban, jadi panel
   yang dinyatakan tersembunyi tetap tergambar. Satu baris ini membuat atribut
   hidden benar-benar berarti tersembunyi di seluruh halaman. */
[hidden] { display: none !important; }
html:not(.js) .head-act { display: none; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 400 16px/1.65 Inter, ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, .brand b, .num, .total b {
  font-family: Outfit, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.02em;
  line-height: 1.12;
  margin: 0;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .92em;
       color: var(--ice); background: rgba(59,189,248,.09); padding: .1em .4em; border-radius: 6px; }

svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2;
      stroke-linecap: round; stroke-linejoin: round; }

.wrap { width: min(100% - 40px, var(--shell)); margin-inline: auto; }
.wrap.narrow { max-width: 780px; }

/* Header menempel di atas layar, jadi lompatan dari menu harus berhenti di
   bawahnya. Tanpa ini judul bagian yang dituju tersembunyi persis di balik
   header, dan pengunjung mengira tautannya salah. */
section[id] { scroll-margin-top: 92px; }

.skip {
  position: fixed; top: -100px; left: 16px; z-index: 200;
  background: var(--cyan); color: #04121f; padding: 10px 16px; border-radius: 10px; font-weight: 700;
}
.skip:focus { top: 16px; }

:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; border-radius: 6px; }

/* =========================================================================
   Latar
   ========================================================================= */

.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--ink); }

.aurora { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; }
.aurora-1 { width: 720px; height: 720px; top: -280px; left: -180px;
            background: radial-gradient(circle, rgba(59,189,248,.55), transparent 62%); }
.aurora-2 { width: 640px; height: 640px; top: 180px; right: -220px;
            background: radial-gradient(circle, rgba(155,107,255,.5), transparent 62%); }
.aurora-3 { width: 900px; height: 560px; bottom: -260px; left: 30%;
            background: radial-gradient(circle, rgba(232,121,249,.26), transparent 65%); }

/* Kisi isometrik tipis: memberi kedalaman tanpa menuntut perhatian. */
.grid {
  position: absolute; inset: -50%;
  background-image:
    linear-gradient(rgba(140,180,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140,180,255,.055) 1px, transparent 1px);
  background-size: 62px 62px;
  transform: perspective(700px) rotateX(58deg) translateY(-14%);
  mask-image: radial-gradient(ellipse 70% 55% at 50% 42%, #000 30%, transparent 78%);
}

#motes { position: absolute; inset: 0; width: 100%; height: 100%; }

/* =========================================================================
   Bilah alamat
   ========================================================================= */

.ticker { border-bottom: 1px solid var(--line-soft); background: rgba(5,7,15,.7);
          backdrop-filter: blur(12px); position: relative; z-index: 40; }
.ticker-in { display: flex; align-items: center; gap: 12px; height: 46px; font-size: 13.5px; }

.live { display: inline-flex; align-items: center; gap: 8px; color: var(--dim); font-weight: 600; white-space: nowrap; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80;
          box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: pulse 2.4s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }

.ip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(140,180,255,.06); border: 1px solid var(--line);
  color: var(--text); font: inherit; padding: 5px 12px; border-radius: 999px;
  cursor: pointer; transition: border-color .18s, background .18s, transform .18s;
}
.ip:hover { border-color: rgba(59,189,248,.45); background: rgba(59,189,248,.1); transform: translateY(-1px); }
.ip svg { width: 14px; height: 14px; color: var(--faint); }
.ip-label { color: var(--faint); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.ip b { font-weight: 600; color: var(--ice); }
.ip small { color: var(--faint); font-weight: 500; }
.ip.copied { border-color: #4ade80; background: rgba(74,222,128,.12); }
.ip.copied b { color: #4ade80; }

.ticker-note { margin-left: auto; color: var(--faint); font-size: 12.5px; white-space: nowrap; }
@media (max-width: 860px) { .ticker-note { display: none; } }

@media (max-width: 620px) {
  /* Alamat server terlalu penting untuk dipotong diam-diam. Di layar sempit
     bilahnya digeser, bukan dipangkas, dan batang gulirnya disembunyikan
     supaya tidak terlihat seperti kerusakan. */
  .ticker-in { gap: 8px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .ticker-in::-webkit-scrollbar { display: none; }
  .ip { flex: none; }
  .live { flex: none; }
  .live span { display: none; }
}

/* =========================================================================
   Header
   ========================================================================= */

.head { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent;
        transition: background .25s, border-color .25s, backdrop-filter .25s; }
.head.stuck { background: rgba(5,7,15,.82); backdrop-filter: blur(16px); border-bottom-color: var(--line); }
.head-in { display: flex; align-items: center; gap: 24px; height: 74px; }

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand img { filter: drop-shadow(0 0 14px rgba(59,189,248,.45)); }
.brand span { display: grid; line-height: 1.05; }
.brand b { font-size: 19px; font-weight: 800; }
.brand small { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); font-weight: 700; }

.nav { display: flex; gap: 4px; margin-left: 12px; }
.nav a { padding: 9px 14px; border-radius: 10px; color: var(--dim); font-weight: 500; font-size: 14.5px;
         transition: color .18s, background .18s; }
.nav a:hover, .nav a.on { color: var(--text); background: rgba(140,180,255,.08); }

.head-act { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.cart-btn {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  background: linear-gradient(135deg, rgba(59,189,248,.16), rgba(155,107,255,.16));
  border: 1px solid rgba(59,189,248,.3); color: var(--text); font: 600 14.5px/1 Inter, sans-serif;
  padding: 10px 16px; border-radius: 12px; transition: border-color .18s, transform .18s, box-shadow .18s;
}
.cart-btn:hover { border-color: rgba(59,189,248,.6); transform: translateY(-1px); box-shadow: var(--glow-cyan); }
.cart-btn svg { width: 17px; height: 17px; }
.cart-btn em { font-style: normal; min-width: 21px; height: 21px; display: grid; place-items: center;
               background: var(--cyan); color: #04121f; border-radius: 999px; font-size: 12px; font-weight: 800; }
.cart-btn em.zero { background: rgba(140,180,255,.16); color: var(--faint); }

.burger { display: none; background: none; border: 1px solid var(--line); border-radius: 10px;
          width: 42px; height: 42px; cursor: pointer; padding: 0; }
.burger span { display: block; width: 18px; height: 2px; background: var(--text); margin: 4px auto; border-radius: 2px;
               transition: transform .22s, opacity .22s; }
.burger.on span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.on span:nth-child(2) { opacity: 0; }
.burger.on span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 980px) {
  .burger { display: block; }
  .cart-btn span { display: none; }
  .nav {
    position: fixed; inset: 120px 20px auto 20px; flex-direction: column; gap: 2px; margin: 0;
    background: rgba(8,12,24,.97); backdrop-filter: blur(20px);
    border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow);
    opacity: 0; visibility: hidden; transform: translateY(-10px); transition: .22s;
  }
  .nav.open { opacity: 1; visibility: visible; transform: none; }
  .nav a { padding: 13px 16px; font-size: 16px; }
}

/* =========================================================================
   Hero
   ========================================================================= */

.hero { padding: 40px 0 88px; }

/* Satu kolom, ditengahkan. Wordmark-nya jadi satu-satunya benda besar di layar
   pertama, dan segala sesuatu yang lain berbaris di bawahnya. */
.hero-in { display: flex; flex-direction: column; align-items: center; text-align: center; }

.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 26px;
           font-size: 12.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
           color: var(--ice); background: rgba(59,189,248,.09);
           border: 1px solid rgba(59,189,248,.22); padding: 7px 14px; border-radius: 999px; }
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 10px var(--ice); }

/* ---- wordmark sebagai hero ---- */

.hero-art { position: relative; margin: 0 0 34px; width: min(100%, 760px);
            display: grid; place-items: center; }

.hero-art img {
  width: 100%; height: auto; position: relative; z-index: 2;
  filter: drop-shadow(0 18px 50px rgba(59,189,248,.34)) drop-shadow(0 6px 30px rgba(155,107,255,.3));
  /* Masuk sekali saat dimuat, lalu mengapung pelan selamanya. Keduanya
     dipisah supaya animasi masuk tidak mengulang setiap kali siklus apungnya
     kembali ke awal. */
  animation: crest-in .9s cubic-bezier(.2, .9, .25, 1) both,
             crest-float 7.5s ease-in-out 1s infinite;
  will-change: transform;
}

@keyframes crest-in {
  from { opacity: 0; transform: translateY(26px) scale(.93); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes crest-float {
  0%, 100% { transform: translateY(-9px); }
  50%      { transform: translateY(9px); }
}

/* Cahaya di belakangnya, berdenyut selambat napas. Elemen tersendiri supaya
   denyutnya tidak ikut menggeser wordmark-nya. */
.hero-glow {
  position: absolute; z-index: 1; width: 78%; aspect-ratio: 2 / 1; border-radius: 50%;
  background: radial-gradient(ellipse at center,
              rgba(59,189,248,.5), rgba(155,107,255,.28) 45%, transparent 72%);
  filter: blur(52px);
  animation: crest-breathe 6s ease-in-out infinite;
}
@keyframes crest-breathe {
  0%, 100% { opacity: .55; transform: scale(.94); }
  50%      { opacity: .95; transform: scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art img { animation: none; }
  .hero-glow { animation: none; opacity: .7; }
}

.lede { font-size: 17.5px; line-height: 1.7; color: var(--dim); max-width: 56ch; margin: 0 0 32px; }
.lede b { color: var(--text); font-weight: 600; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
       padding: 14px 26px; border-radius: 13px; font: 700 15px/1 Inter, sans-serif;
       cursor: pointer; border: 1px solid transparent; transition: transform .18s, box-shadow .18s, border-color .18s, background .18s; }
.btn svg { width: 17px; height: 17px; }
.btn-main { background: linear-gradient(135deg, var(--cyan), var(--violet)); color: #030814;
            box-shadow: 0 10px 34px rgba(59,189,248,.32); }
.btn-main:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 44px rgba(59,189,248,.46); }
.btn-main:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }
.btn-ghost { background: rgba(140,180,255,.06); border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: rgba(59,189,248,.45); background: rgba(59,189,248,.09); transform: translateY(-2px); }
.btn.wide { width: 100%; }

.trust { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 0; margin: 0;
         color: var(--dim); font-size: 14px; }
.trust li { display: inline-flex; align-items: center; gap: 8px; }
.trust svg { width: 15px; height: 15px; color: #4ade80; }

.hero-cta, .trust { justify-content: center; }

@media (max-width: 980px) {
  .hero { padding: 26px 0 60px; }
  .hero-art { margin-bottom: 26px; }
}

/* =========================================================================
   Bagian
   ========================================================================= */

.sect { padding: 92px 0; position: relative; }
.sect-alt::before { content: ""; position: absolute; inset: 0; z-index: -1;
                    background: linear-gradient(180deg, transparent, rgba(12,18,36,.72) 18%, rgba(12,18,36,.72) 82%, transparent); }

.sect-head { text-align: center; max-width: 660px; margin: 0 auto 54px; }
.kicker { margin: 0 0 14px; font-size: 12.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
          background: linear-gradient(90deg, var(--cyan), var(--magenta));
          -webkit-background-clip: text; background-clip: text; color: transparent; }
.sect-head h2 { font-size: clamp(28px, 4.4vw, 42px); font-weight: 800; margin-bottom: 16px; }
.sub { color: var(--dim); font-size: 16.5px; line-height: 1.72; margin: 0; }

.fineprint { text-align: center; color: var(--faint); font-size: 13.5px; margin: 40px auto 0; max-width: 62ch; }

/* =========================================================================
   Kartu rank
   ========================================================================= */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }

.card {
  display: flex; flex-direction: column; min-width: 0;
  position: relative; border-radius: var(--radius); padding: 32px 26px 28px;
  background: linear-gradient(180deg, rgba(18,26,48,.82), rgba(10,15,30,.9));
  border: 1px solid var(--line); overflow: hidden;
  transition: transform .24s, border-color .24s, box-shadow .24s;
}
.card:hover { transform: translateY(-6px); border-color: var(--tint-b); box-shadow: 0 24px 60px rgba(0,0,0,.5); }

/* Sinar tipis di tepi atas, warnanya mengikuti tingkat kartunya. */
.card::before { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
                background: linear-gradient(90deg, transparent, var(--tint-b), transparent); }
.card::after { content: ""; position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
               width: 220px; height: 220px; border-radius: 50%; opacity: .17; pointer-events: none;
               background: radial-gradient(circle, var(--tint-b), transparent 66%); }

.card.hot { border-color: var(--tint-b); box-shadow: 0 0 0 1px rgba(155,107,255,.18), 0 24px 60px rgba(0,0,0,.5); }

.flag { position: absolute; top: 16px; right: 16px; font-size: 10.5px; font-weight: 800;
        letter-spacing: .12em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px;
        background: linear-gradient(135deg, var(--tint-a), var(--tint-b)); color: #05070f; }

/* Belah ketupat yang mengutip permata di tengah lambang. */
.gem { width: 62px; height: 62px; margin: 6px auto 20px; position: relative; }
.gem i { position: absolute; inset: 0; transform: rotate(45deg); border-radius: 12px;
         background: linear-gradient(145deg, var(--tint-a), var(--tint-b));
         box-shadow: 0 0 26px var(--tint-b), inset 0 0 18px rgba(255,255,255,.3); }
.gem b { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2;
         font: 800 20px/1 Outfit, sans-serif; color: #05070f; }

.card h3 { text-align: center; font-size: 25px; font-weight: 800; margin-bottom: 8px; }
.card .tagline { text-align: center; color: var(--dim); font-size: 14.5px; margin: 0 0 22px; min-height: 42px; }

.price { text-align: center; margin-bottom: 22px; }
.price b { font: 800 34px/1 Outfit, sans-serif;
           background: linear-gradient(135deg, var(--tint-a), var(--tint-b));
           -webkit-background-clip: text; background-clip: text; color: transparent; }
.price span { display: block; color: var(--faint); font-size: 12.5px; margin-top: 6px; }

.perks { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 11px; flex: 1; align-content: start;
         border-top: 1px solid var(--line-soft); padding-top: 22px; }
.perks li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--dim); }
.perks svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--tint-b); }
.perks b { color: var(--text); font-weight: 600; }

.card .btn { width: 100%; }
.card .btn-tier { background: linear-gradient(135deg, var(--tint-a), var(--tint-b)); color: #05070f;
                  box-shadow: 0 10px 30px color-mix(in srgb, var(--tint-b) 32%, transparent); }
.card .btn-tier:hover { transform: translateY(-2px); box-shadow: 0 14px 40px color-mix(in srgb, var(--tint-b) 46%, transparent); }
.card .btn-tier.added { background: rgba(74,222,128,.18); color: #4ade80; box-shadow: none; }

.t1 { --tint-a: var(--ice); --tint-b: var(--cyan); }
.t2 { --tint-a: var(--blue); --tint-b: var(--violet); }
.t3 { --tint-a: var(--violet); --tint-b: var(--magenta); }

@media (max-width: 900px) { .cards { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } }

/* =========================================================================
   Key
   ========================================================================= */

.keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }

.key {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center;
  padding: 22px; border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(18,26,48,.8), rgba(10,15,30,.88));
  transition: transform .22s, border-color .22s;
}
.key:hover { transform: translateY(-4px); border-color: var(--tint-b); }

.key-icon { width: 58px; height: 58px; border-radius: 14px; display: grid; place-items: center;
            background: linear-gradient(145deg, color-mix(in srgb, var(--tint-a) 26%, transparent),
                                                color-mix(in srgb, var(--tint-b) 26%, transparent));
            border: 1px solid color-mix(in srgb, var(--tint-b) 42%, transparent); }
.key-icon svg { width: 26px; height: 26px; color: var(--tint-b); }

.key h3 { font-size: 17.5px; font-weight: 700; margin-bottom: 4px; }
.key p { margin: 0 0 12px; color: var(--faint); font-size: 13.5px; }
.key-buy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.key-buy b { font: 700 19px/1 Outfit, sans-serif; color: var(--text); }
.key-buy button { background: rgba(140,180,255,.08); border: 1px solid var(--line); color: var(--text);
                  font: 600 13px/1 Inter, sans-serif; padding: 9px 15px; border-radius: 10px; cursor: pointer;
                  transition: border-color .18s, background .18s; }
.key-buy button:hover { border-color: var(--tint-b); background: color-mix(in srgb, var(--tint-b) 14%, transparent); }
.key-buy button.added { border-color: #4ade80; color: #4ade80; }

/* =========================================================================
   Tabel perbandingan
   ========================================================================= */

.table-scroll { overflow-x: auto; max-width: 100%; border: 1px solid var(--line); border-radius: var(--radius);
                background: rgba(10,15,30,.6); }
.cmp { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 14.5px; }
.cmp th, .cmp td { padding: 16px 18px; text-align: center; border-bottom: 1px solid var(--line-soft); }
.cmp thead th { font: 700 13px/1 Inter, sans-serif; color: var(--faint); text-transform: uppercase;
                letter-spacing: .1em; background: rgba(140,180,255,.04); }
.cmp tbody th { text-align: left; font-weight: 600; color: var(--text); }
.cmp td { color: var(--dim); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp tbody tr:hover td, .cmp tbody tr:hover th { background: rgba(140,180,255,.035); }
.cmp .best { color: var(--ice); font-weight: 700; }
.cmp .yes { color: #4ade80; font-weight: 600; }
.cmp .no { color: var(--faint); }

.tier-chip { display: inline-block; padding: 5px 12px; border-radius: 999px; font-weight: 800; font-size: 12px;
             background: linear-gradient(135deg, var(--tint-a), var(--tint-b)); color: #05070f; letter-spacing: 0; }

/* =========================================================================
   Langkah
   ========================================================================= */

.steps { list-style: none; padding: 0; margin: 0; counter-reset: s;
         display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.steps li { position: relative; padding: 28px 22px; border-radius: var(--radius);
            border: 1px solid var(--line); background: rgba(10,15,30,.55); }
.num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; margin-bottom: 16px;
       font: 800 17px/1 Outfit, sans-serif; color: #05070f;
       background: linear-gradient(135deg, var(--cyan), var(--violet)); }
.steps h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.steps p { margin: 0; color: var(--dim); font-size: 14.5px; }

/* =========================================================================
   Tanya jawab
   ========================================================================= */

.faq { display: grid; gap: 12px; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius-sm);
               background: rgba(10,15,30,.55); overflow: hidden; transition: border-color .2s; }
.faq details[open] { border-color: rgba(59,189,248,.34); }
.faq summary { cursor: pointer; padding: 18px 52px 18px 20px; font-weight: 600; font-size: 15.5px;
               position: relative; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px;
                      border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint);
                      transform: translateY(-70%) rotate(45deg); transition: transform .22s, border-color .22s; }
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); border-color: var(--ice); }
.faq summary:hover { color: var(--ice); }
.faq p { margin: 0; padding: 0 20px 20px; color: var(--dim); font-size: 14.8px; line-height: 1.72; }

/* =========================================================================
   Footer
   ========================================================================= */

.foot { border-top: 1px solid var(--line); background: rgba(5,7,15,.75); padding: 46px 0 26px; margin-top: 40px; }
.foot-in { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between;
           padding-bottom: 26px; border-bottom: 1px solid var(--line-soft); }
.foot-brand { display: flex; align-items: center; gap: 13px; }
.foot-brand div { display: grid; line-height: 1.35; }
.foot-brand b { font-weight: 700; }
.foot-brand span { color: var(--faint); font-size: 13px; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 22px; }
.foot-nav a { color: var(--dim); font-size: 14px; }
.foot-nav a:hover { color: var(--ice); }
.foot-legal { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
              padding-top: 22px; color: var(--faint); font-size: 12.5px; }
.foot-legal p { margin: 0; }

/* =========================================================================
   Keranjang
   ========================================================================= */

.scrim { position: fixed; inset: 0; z-index: 90; background: rgba(3,5,12,.7); backdrop-filter: blur(4px);
         animation: fade .22s ease; }
@keyframes fade { from { opacity: 0; } }

.cart { position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; width: min(100%, 420px);
        display: flex; flex-direction: column; min-height: 0; max-height: 100dvh;
        background: linear-gradient(180deg, #0b1020, #070a14); border-left: 1px solid var(--line);
        box-shadow: -24px 0 60px rgba(0,0,0,.6); animation: slide .26s cubic-bezier(.2,.8,.2,1); }
@keyframes slide { from { transform: translateX(100%); } }

.cart-head { display: flex; align-items: center; justify-content: space-between;
             padding: 22px 22px 18px; border-bottom: 1px solid var(--line); }
.cart-head h2 { font-size: 20px; font-weight: 700; }
.x { background: none; border: 1px solid var(--line); border-radius: 10px; width: 44px; height: 44px; flex: none;
     display: grid; place-items: center; color: var(--dim); cursor: pointer; transition: .18s; }
.x:hover { color: var(--text); border-color: rgba(59,189,248,.45); }
.x svg { width: 16px; height: 16px; }

.cart-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px; }

.field { display: block; margin-bottom: 26px; }
.field > label { display: block; font-size: 13px; font-weight: 700; color: var(--dim); margin-bottom: 9px;
                letter-spacing: .04em; }
.field-in { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 10px;
            background: rgba(140,180,255,.05); border: 1px solid var(--line); border-radius: 12px;
            transition: border-color .18s; }
.field-in:focus-within { border-color: rgba(59,189,248,.55); }
.field-in img { width: 32px; height: 32px; border-radius: 7px; image-rendering: pixelated;
                background: rgba(140,180,255,.09); flex: none; }
.field-in input { flex: 1; min-width: 0; width: 100%; background: none; border: 0; color: var(--text); font: 500 16px/1 Inter, sans-serif;
                  padding: 11px 6px; outline: none; }
.field small { display: block; margin-top: 8px; color: var(--faint); font-size: 12.5px; }
.field small.warn { color: #fbbf24; }

.cart-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.cart-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: start;
             padding: 13px; border: 1px solid var(--line); border-radius: var(--radius-sm);
             background: rgba(140,180,255,.04); }
.cart-gem { width: 34px; height: 34px; border-radius: 9px; transform: rotate(45deg); border-radius: 8px;
            background: linear-gradient(145deg, var(--tint-a), var(--tint-b)); }
.cart-item h4 { margin: 0 0 2px; font: 600 14.5px/1.3 Inter, sans-serif; }
.cart-item small { color: var(--faint); font-size: 12.5px; }
.cart-item .rm { background: none; border: 0; color: var(--faint); cursor: pointer; padding: 10px; min-width: 40px; min-height: 40px;
                 border-radius: 8px; transition: .16s; }
.cart-item .rm:hover { color: #f87171; background: rgba(248,113,113,.1); }
.cart-item .rm svg { width: 16px; height: 16px; }

.cart-empty { text-align: center; color: var(--faint); font-size: 14px; padding: 30px 0; margin: 0; }

.cart-foot { flex: none; padding: 20px 22px max(24px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(5,7,15,.6); }
.total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 15px; }
.total span { color: var(--dim); font-size: 14px; }
.total b { font: 800 25px/1 Outfit, sans-serif;
           background: linear-gradient(135deg, var(--cyan), var(--magenta));
           -webkit-background-clip: text; background-clip: text; color: transparent; }
.cart-note { margin: 12px 0 0; color: var(--faint); font-size: 12.5px; text-align: center; }

/* =========================================================================
   Toast
   ========================================================================= */

.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 24px); z-index: 150;
         width: max-content; max-width: calc(100vw - 32px); overflow-wrap: anywhere; text-align: center;
         background: rgba(11,16,32,.97); border: 1px solid rgba(59,189,248,.4); color: var(--text);
         padding: 13px 22px; border-radius: 12px; font-size: 14px; font-weight: 600;
         box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: .26s; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* =========================================================================
   Muncul saat digulir
   ========================================================================= */

/* Keadaan tersembunyinya dipasang hanya kalau JS memang berjalan. Kalau tidak -
   skrip gagal dimuat, atau pengunjung mematikannya - seluruh isi halaman tetap
   terlihat. Animasi masuk tidak sepadan dengan risiko toko yang kosong. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* =========================================================================
   Pemilihan akun, jumlah key, dan ringkasan pesanan
   Mengikuti warna dan bentuk kartu yang sudah ada.
   ========================================================================= */

.cart-kicker, .cart-stage-label {
  display: block; margin: 0 0 7px; color: var(--ice);
  font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
}
.cart-head { flex: none; gap: 16px; }
.cart-head h2 { line-height: 1.2; }
.cart-feedback { flex: none; margin: 0; padding: 11px 22px; border-bottom: 1px solid rgba(59,189,248,.2);
                 background: rgba(59,189,248,.08); color: var(--ice); font-size: 12px; line-height: 1.6; }

.edition-picker { min-width: 0; border: 0; padding: 0; margin: 0 0 20px;
                  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.edition-picker legend { padding: 0; margin-bottom: 10px; color: var(--dim); font-size: 13px; font-weight: 700; }
.edition-choice { min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px;
                  padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px;
                  background: rgba(140,180,255,.04); color: var(--dim); cursor: pointer;
                  font-size: 13px; font-weight: 600; transition: background .18s, border-color .18s; }
.edition-choice input { margin: 0; width: 15px; height: 15px; accent-color: var(--cyan); flex: none; }
.edition-choice:has(input:checked) { border-color: rgba(59,189,248,.6); background: rgba(59,189,248,.1); color: var(--ice); }
.edition-choice:has(input:focus-visible) { outline: 2px solid var(--ice); outline-offset: 3px; }
.edition-choice:hover { border-color: rgba(59,189,248,.5); }
.field-in .player-avatar { width: 32px; height: 32px; flex: none; display: grid; place-items: center;
                          border-radius: 7px; background: linear-gradient(135deg, rgba(59,189,248,.2), rgba(155,107,255,.2));
                          color: var(--ice); font: 700 12px/1 Inter, sans-serif; text-transform: uppercase; }
.field-in:has(input[aria-invalid="true"]) { border-color: #fbbf24; }
.field small { line-height: 1.55; }
.cart-policy { margin: -6px 0 22px; padding: 11px 13px; border: 1px solid var(--line-soft); border-radius: 10px;
               background: rgba(140,180,255,.035); color: var(--dim); font-size: 12px; line-height: 1.6; }
.cart-list + .cart-policy { margin-top: 16px; }
.review-body > .total { margin-top: 24px; }
.review-title:focus, section[tabindex='-1']:focus { outline: none; }

.cart-item-info { min-width: 0; }
.cart-item h4 { overflow-wrap: anywhere; }
.cart-item small { display: block; line-height: 1.45; }
.cart-item .cart-gem { margin: 7px 0 0; width: 28px; height: 28px; border-radius: 7px; }
.cart-gem.key-gem { display: grid; place-items: center; transform: none; width: 34px; height: 34px;
                    margin-top: 2px; color: var(--ice); border: 1px solid var(--line);
                    background: rgba(140,180,255,.07); }
.cart-gem.key-gem svg { width: 19px; height: 19px; }
.cart-item-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 12px; margin-top: 10px; }
.line-price { display: block; color: var(--text); font-size: 14px; font-weight: 700; white-space: nowrap; }
.quantity-control { display: inline-flex; align-items: center; overflow: hidden; border: 1px solid var(--line);
                    border-radius: 9px; background: rgba(5,7,15,.5); }
.quantity-control button { display: grid; place-items: center; width: 36px; min-height: 36px; padding: 0;
                           border: 0; background: none; color: var(--ice); font: 500 20px/1 Inter, sans-serif;
                           cursor: pointer; transition: background .18s; }
.quantity-control button svg { width: 14px; height: 14px; }
.quantity-control button:hover:not(:disabled) { background: rgba(59,189,248,.13); }
.quantity-control button:focus-visible { outline-offset: -3px; }
.quantity-control button:disabled { opacity: .35; cursor: not-allowed; }
.quantity-control output { min-width: 26px; padding: 0 3px; text-align: center;
                           color: var(--text); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }

.cart-empty { padding: 30px 10px; }
.cart-empty > svg { width: 44px; height: 44px; color: var(--cyan); margin: 0 auto 20px; }
.cart-empty h3 { margin: 0 0 10px; color: var(--text); font-size: 20px; }
.cart-empty p { max-width: 27ch; margin: 0 auto 22px; font-size: 13px; line-height: 1.65; }
.cart-empty .btn { min-height: 44px; padding: 13px 18px; font-size: 13px; }

.order-review { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.review-body { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 22px; }
.review-status { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 17px; padding: 6px 10px;
                 border: 1px solid rgba(59,189,248,.25); border-radius: 999px; background: rgba(59,189,248,.08);
                 color: var(--ice); font-size: 11px; font-weight: 600; }
.review-status svg { width: 14px; height: 14px; }
.review-title { margin: 0 0 12px; font-size: 24px; line-height: 1.2; }
.review-body > p { color: var(--dim); font-size: 13px; line-height: 1.65; }
.review-recipient { display: grid; gap: 5px; margin: 24px 0; padding: 16px; border: 1px solid var(--line);
                    border-radius: 12px; background: rgba(140,180,255,.04); }
.review-recipient > span { color: var(--faint); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.review-recipient strong { color: var(--text); font-size: 18px; overflow-wrap: anywhere; }
.review-recipient small { color: var(--dim); font-size: 12px; }
.review-items { padding: 0; margin: 0; list-style: none; }
.review-items li { display: flex; align-items: start; justify-content: space-between; gap: 16px;
                   padding: 15px 0; border-bottom: 1px solid var(--line-soft); }
.review-items li:first-child { padding-top: 0; }
.review-items li > div { min-width: 0; }
.review-items strong { display: block; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.review-items small { display: block; margin-top: 4px; color: var(--faint); font-size: 12px; }
.review-items b { flex: none; color: var(--ice); font-size: 13px; white-space: nowrap; }
.review-note { color: var(--faint); margin: 20px 0 0; font-size: 12px; line-height: 1.65; }
.review-actions { display: grid; gap: 10px; }
.review-actions .btn { min-height: 46px; font-size: 13px; padding: 14px 18px; line-height: 1.35; }

.table-hint { display: none; }
.cmp tr > :first-child { position: sticky; left: 0; z-index: 1; background: #0c1222; }
.cmp thead tr > :first-child { z-index: 2; background: #10172a; }
.cmp tbody tr:hover > :first-child { background: #141d32; }
.cmp caption { text-align: left; color: var(--dim); padding: 16px 18px; font-size: 14px; }
.key-buy button { min-height: 40px; }

@media (max-width: 980px) {
  /* Menu mengikuti bagian bawah header, termasuk setelah halaman digulir. */
  .nav { position: absolute; inset: 74px 20px auto; }
  .cart-btn { min-height: 44px; }
}

@media (max-width: 700px) {
  .table-hint { display: flex; justify-content: center; align-items: center; gap: 7px;
                margin: 0 0 14px; color: var(--faint); font-size: 12px; }
  .table-hint svg { width: 15px; height: 15px; flex: none; }
  .cmp tr > :first-child { max-width: 152px; min-width: 134px; box-shadow: 5px 0 10px rgba(3,5,12,.2); }
  .cmp th, .cmp td { padding: 15px 14px; }
  .quantity-control button { width: 40px; min-height: 40px; }
  .cart-item .rm { min-width: 40px; min-height: 40px; }
  .key-buy button { min-height: 44px; }
  .toast { bottom: max(18px, env(safe-area-inset-bottom)); font-size: 13px; padding: 12px 16px; }
}

@media (max-width: 360px) {
  .cart-body, .review-body { padding: 18px; }
  .cart-head { padding: 18px; }
  .cart-foot { padding-inline: 18px; }
  .cart-item { gap: 9px; padding: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}