/* Halaman katalog dan halaman produk. */

/*
 * Baris chip kategori di /games.
 *
 * Dua aturan dasar ini sempat hilang: berkas ini pernah disusun ulang dan
 * yang tersisa hanya varian .is-active, jadi chipnya tampil sebagai tautan
 * biru polos tanpa kotak. Kalau menyunting berkas ini lagi, pastikan
 * .ts-rail dan .ts-cat tetap ada, bukan hanya turunannya.
 */
.ts-rail {
  display: flex;
  align-items: stretch;
  gap: .6rem;
  overflow-x: auto;
  padding-bottom: .35rem;
  scroll-snap-type: x proximity;

  /* Batang gulir disembunyikan, gulirnya tetap jalan lewat sentuh dan roda. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ts-rail::-webkit-scrollbar { display: none; }

.ts-cat {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem 1rem;
  background: #fff;
  border: 1px solid var(--ts-line);
  border-radius: 999px;
  color: var(--ts-ink);
  text-decoration: none;
  transition: border-color .16s ease, color .16s ease, transform .16s ease;
}

.ts-cat:hover {
  border-color: var(--ts-blue);
  color: var(--ts-blue-dark);
  transform: translateY(-2px);
}

.ts-cat i {
  font-size: 1rem;
  color: var(--ts-blue);
}

.ts-cat span {
  display: grid;
  line-height: 1.25;
}

.ts-cat span b {
  font-size: .88rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Baris kedua, jumlah produk. Tidak ada di chip "semua produk". */
.ts-cat span span {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .68rem;
  color: var(--ts-slate);
}

.ts-cat.is-active { background: var(--ts-ink); color: #fff; }
.ts-cat.is-active i { color: var(--ts-cyan); }
.ts-cat.is-active span span { color: rgba(255, 255, 255, .6); }

.ts-cat.is-active:hover {
  border-color: var(--ts-ink);
  color: #fff;
}

.ts-cat-empty { text-align: center; padding: 3rem 1rem; color: var(--ts-slate); }
.ts-cat-empty i { font-size: 2rem; color: var(--ts-line); display: block; margin-bottom: .75rem; }

.ts-crumbs { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.ts-crumbs a { color: var(--ts-slate); }
.ts-crumbs a:hover { color: var(--ts-blue-dark); }
.ts-crumbs i { font-size: .6rem; color: var(--ts-line); }

/* ---- Tata letak halaman produk ---- */
.ts-pdp { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.ts-pdp__aside { position: sticky; top: 96px; display: grid; gap: 1rem; }

.ts-pdp__art {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--ts-radius);
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid var(--ts-line);
}
/* Gambar ditumpuk di atas nama produk, bukan menggantikannya, supaya
   sumber yang mati menyisakan petak gradien berisi nama. */
.ts-pdp__art img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  /* cover tanpa padding, sama seperti kartu produk, supaya gambar memenuhi
     seluruh petak dan gradiennya tidak terlihat. */
  object-fit: cover;
}
.ts-pdp__artname {
  font-family: "Chakra Petch", sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.6rem;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
}

.ts-pdp__points { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ts-pdp__points li {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: #fff;
  border: 1px solid var(--ts-line);
  border-radius: 10px;
  padding: .7rem .9rem;
  font-size: .88rem;
}
.ts-pdp__points i { color: var(--ts-blue); }

.ts-pdp__note { background: #fff; border: 1px solid var(--ts-line); border-radius: 12px; padding: 1rem; font-size: .88rem; }
.ts-pdp__note b { display: block; font-family: "Chakra Petch", sans-serif; text-transform: uppercase; margin-bottom: .35rem; }
.ts-pdp__note p { margin: 0; color: var(--ts-slate); }

/* ---- Kolom kanan ---- */
.ts-pdp__title { font-size: clamp(1.9rem, 4vw, 3rem); font-style: italic; text-transform: uppercase; margin: .6rem 0 .3rem; line-height: 1.02; }
.ts-pdp__tagline { color: var(--ts-slate); font-size: 1.02rem; max-width: 42rem; }

.ts-pdp__band {
  --ts-cut: 12px;
  display: flex;
  align-items: baseline;
  gap: .75rem;
  flex-wrap: wrap;
  background: var(--ts-ink);
  color: #fff;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0 1.75rem;
  clip-path: polygon(var(--ts-cut) 0, 100% 0, 100% calc(100% - var(--ts-cut)), calc(100% - var(--ts-cut)) 100%, 0 100%, 0 var(--ts-cut));
}
.ts-pdp__band span { font-family: "JetBrains Mono", monospace; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ts-gold); }
.ts-pdp__band b { font-family: "Chakra Petch", sans-serif; font-size: 1.9rem; line-height: 1; }
.ts-pdp__band em { margin-left: auto; font-style: normal; font-family: "JetBrains Mono", monospace; font-size: .72rem; color: rgba(255, 255, 255, .6); }

.ts-step { margin-bottom: 1.75rem; }
.ts-step h2 {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: 1.05rem;
  text-transform: uppercase;
  font-style: italic;
  margin-bottom: .9rem;
}
.ts-step h2 span {
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--ts-cool);
  color: #fff;
  border-radius: 50%;
  font-family: "JetBrains Mono", monospace;
  font-size: .78rem;
  font-style: normal;
}

.ts-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; }
.ts-option { display: block; cursor: pointer; }
.ts-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.ts-option__box {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  background: #fff;
  border: 1px solid var(--ts-line);
  border-radius: 10px;
  padding: .8rem .9rem;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.ts-option:hover .ts-option__box { border-color: #C9DBFF; transform: translateY(-2px); }
.ts-option input:checked + .ts-option__box { border-color: var(--ts-blue); background: #F2F7FF; box-shadow: inset 0 0 0 1px var(--ts-blue); }
.ts-option input:focus-visible + .ts-option__box { outline: 3px solid var(--ts-cyan); outline-offset: 2px; }
.ts-option__name { font-weight: 600; font-size: .92rem; color: var(--ts-ink); display: flex; align-items: center; gap: .45rem; }
.ts-option__price { font-family: "Chakra Petch", sans-serif; font-weight: 700; color: var(--ts-blue-dark); }

.ts-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; }
.ts-fields label { display: grid; gap: .3rem; }
.ts-fields label > span { font-family: "JetBrains Mono", monospace; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ts-slate); }
.ts-fields input, .ts-fields select {
  border: 1px solid var(--ts-line);
  background: #fff;
  border-radius: 9px;
  padding: .75rem .9rem;
  font-size: .95rem;
  font-family: inherit;
  color: var(--ts-ink);
  outline: none;
}
.ts-fields input:focus, .ts-fields select:focus { border-color: var(--ts-blue); }

.ts-pdp__warn {
  margin: .85rem 0 0;
  background: #FFF6E6;
  border: 1px solid #FFE0AC;
  color: #6B4A05;
  border-radius: 9px;
  padding: .7rem .9rem;
  font-size: .86rem;
}
.ts-pdp__warn i { color: var(--ts-amber); }

.ts-pay-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .6rem; margin-top: .9rem; }

.ts-pdp__buy {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--ts-line);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  position: sticky;
  bottom: 1rem;
  box-shadow: var(--ts-sh-2);
}
.ts-pdp__buy span { display: block; }
.ts-pdp__buy b { font-family: "Chakra Petch", sans-serif; font-size: 1.4rem; color: var(--ts-ink); }
.ts-pdp__buy .ts-btn { margin-left: auto; }

.ts-pdp__desc { margin-top: 2rem; border-top: 1px solid var(--ts-line); padding-top: 1.5rem; }
.ts-pdp__desc h2 { font-size: 1.1rem; text-transform: uppercase; font-style: italic; margin-bottom: .6rem; }
.ts-pdp__desc p { color: var(--ts-slate); max-width: 46rem; }

@media (max-width: 991.98px) {
  .ts-pdp { grid-template-columns: 1fr; }
  .ts-pdp__aside { position: static; grid-template-columns: 160px 1fr; align-items: start; }
  .ts-pdp__points { grid-column: 2; }
  .ts-pdp__note { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
  .ts-pdp__aside { grid-template-columns: 1fr; }
  .ts-pdp__points { grid-column: 1; }
  .ts-options { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   Deskripsi produk, selebar penuh di bawah area pembelian.
   ===================================================================== */
.ts-desc {
  background: #fff;
  border: 1px solid var(--ts-line);
  border-radius: var(--ts-radius);
  padding: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(1.5rem, 3.5vw, 2.5rem);
}

.ts-desc__head { margin-bottom: .85rem; }
.ts-desc__head h2 {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-style: italic;
  text-transform: uppercase;
  margin: .25rem 0 0;
}

/*
   Inti dari permintaan "jangan mendatar" ada di satu baris ini.

   pre-wrap menahan baris baru DAN spasi berurutan persis seperti yang
   diketik di dashboard, sekaligus tetap membungkus teks panjang mengikuti
   lebar kotak. nl2br tidak dipakai karena ia hanya menangani satu baris
   baru, dan meratakan baris kosong ganda yang biasa dipakai memisahkan
   paragraf.

   Emoji dan simbol yang ditempel dari mana pun ikut tampil apa adanya,
   selama kolomnya utf8mb4, dan itu sudah dipastikan di skema.
*/
.ts-desc__body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: .97rem;
  line-height: 1.75;
  color: var(--ts-slate);
  max-width: 78ch;
}

/* Blok deskripsi lama di kolom kanan tidak dipakai lagi. */
.ts-pdp__desc { display: none; }

/* =====================================================================
   Dua kelas yang dipakai halaman produk tapi belum pernah didefinisikan.

   Keduanya ketahuan lewat audit, bukan lewat laporan. Chip kategori
   selama ini memakai gaya dasar .ts-chip saja, jadi varian hot tidak
   memberi efek apa pun. Sementara .ts-pdp__main tidak punya aturan,
   sehingga kolom kanan halaman produk tidak pernah dibatasi lebarnya.
   ===================================================================== */
.ts-chip--hot { background: var(--ts-hot); color: var(--ts-ink); }

.ts-pdp__main { min-width: 0; }

/* Pesan galat di halaman produk. Selama ini hanya hidup di auth.css, yang
   tidak dimuat halaman toko, jadi pesannya tampil polos tanpa warna. */
.ts-alert {
  --ts-cut: 10px;
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .75rem .9rem;
  margin-bottom: 1rem;
  font-size: .88rem;
}
.ts-alert--error { background: #FFF1F1; border: 1px solid #FFD0D0; color: #8A1F1F; }
.ts-alert--ok    { background: #EEFBF3; border: 1px solid #BCEBCE; color: #14653A; }
.ts-alert i { font-size: 1rem; line-height: 1.3; }