/* =========================================================================
   Typing Scenes - storefront, tema terang, layout full width
   Warna & bentuk diturunkan dari logo: plat navy, rim neon biru,
   wordmark emas-oranye, potongan chevron.
   ========================================================================= */

/* 1 - Token ------------------------------------------------------------- */
:root {
  --ts-ink: #0B1220;
  --ts-ink-2: #16233A;
  --ts-slate: #5C6D87;
  --ts-line: #E4EAF4;
  --ts-paper: #F2F5FB;
  --ts-surface: #FFFFFF;

  --ts-blue: #1668FF;
  --ts-blue-dark: #0B4ED1;
  --ts-cyan: #37CBFF;
  --ts-amber: #FF9B12;
  --ts-gold: #FFC42E;

  --ts-hot: linear-gradient(100deg, var(--ts-gold), var(--ts-amber));
  --ts-cool: linear-gradient(100deg, var(--ts-cyan), var(--ts-blue));
  --ts-rim: linear-gradient(90deg, var(--ts-blue), var(--ts-cyan) 45%, var(--ts-gold) 70%, var(--ts-amber));

  --ts-sh-1: 0 2px 10px rgba(11, 18, 32, .05);
  --ts-sh-2: 0 22px 44px -28px rgba(11, 18, 32, .55);
  --ts-radius: 14px;
  --ts-cut: 14px;

  /* Lebar penuh, tapi isi tetap dibatasi supaya baris teks & grid tidak melar */
  --ts-max: 1560px;
  --ts-gutter: clamp(16px, 3.2vw, 48px);

  --bs-body-font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-color: #1C2942;
  --bs-body-bg: var(--ts-paper);
  --bs-border-color: var(--ts-line);
  --bs-link-color: var(--ts-blue-dark);
  --bs-link-hover-color: var(--ts-blue);
}

/* 2 - Dasar -------------------------------------------------------------- */
body {
  background: var(--ts-paper);
  color: var(--bs-body-color);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
.ts-display {
  font-family: "Chakra Petch", var(--bs-body-font-family);
  font-weight: 700;
  color: var(--ts-ink);
  letter-spacing: -.01em;
  line-height: 1.12;
}

.ts-mono {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .74rem;
  letter-spacing: .02em;
  color: var(--ts-slate);
}

.ts-eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ts-blue-dark);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.ts-eyebrow::before {
  content: "//";
  color: var(--ts-amber);
  font-weight: 700;
}

.ts-grad-hot {
  background: var(--ts-hot);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

a {
  text-decoration: none;
}

::selection {
  background: var(--ts-blue);
  color: #fff;
}

:focus-visible {
  outline: 3px solid var(--ts-cyan);
  outline-offset: 2px;
  border-radius: 4px;
}

.ts-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--ts-ink);
  color: #fff;
  padding: .6rem 1rem;
}

.ts-skip:focus {
  left: 1rem;
  top: 1rem;
}

/* 3 - Wadah full width --------------------------------------------------- */
.ts-wrap {
  width: 100%;
  max-width: var(--ts-max);
  margin-inline: auto;
  padding-inline: var(--ts-gutter);
}

.ts-section {
  padding: clamp(48px, 5.5vw, 80px) 0;
}

.ts-section--tight {
  padding: clamp(28px, 3vw, 40px) 0;
}

.ts-section--white {
  background: var(--ts-surface);
  border-top: 1px solid var(--ts-line);
  border-bottom: 1px solid var(--ts-line);
}

.ts-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.ts-head h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-style: italic;
  text-transform: uppercase;
  margin: .35rem 0 0;
}

/* 4 - Bentuk, tombol, chip ----------------------------------------------- */
.ts-cut {
  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-btn {
  --ts-cut: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .8rem 1.5rem;
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease, background .18s ease, color .18s ease;
  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-btn:hover {
  transform: translateY(-2px);
}

.ts-btn:active {
  transform: translateY(0);
}

.ts-btn--primary {
  background: linear-gradient(100deg, var(--ts-blue-dark), var(--ts-blue) 55%, var(--ts-cyan));
  color: #fff;
}

.ts-btn--primary:hover {
  filter: brightness(1.06);
  color: #fff;
}

.ts-btn--hot {
  background: var(--ts-hot);
  color: var(--ts-ink);
}

.ts-btn--hot:hover {
  filter: brightness(1.05);
  color: var(--ts-ink);
}

.ts-btn--ghost {
  background: transparent;
  color: var(--ts-ink);
  box-shadow: inset 0 0 0 2px var(--ts-line);
}

.ts-btn--ghost:hover {
  background: #fff;
  color: var(--ts-blue-dark);
  box-shadow: inset 0 0 0 2px var(--ts-blue);
}

.ts-btn--sm {
  padding: .55rem 1.05rem;
  font-size: .82rem;
  --ts-cut: 8px;
}

.ts-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .38rem .85rem;
  background: var(--ts-ink);
  color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: skewX(-10deg);
}

.ts-chip>* {
  transform: skewX(10deg);
}

/* 5 - Topbar ------------------------------------------------------------- */
/*
 * Topbar harus berada di atas navbar sticky. Tanpa z-index eksplisit, .sticky-top
 * (z-index 1020) menang atas dropdown topbar (z-index 1000), sehingga latar navbar
 * dan tombol di dalamnya menutupi menu bahasa/mata uang/wilayah.
 */
.ts-topbar {
  background: var(--ts-ink);
  color: rgba(255, 255, 255, .78);
  font-size: .78rem;
  position: relative;
  z-index: 1035;
}

.ts-topbar::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--ts-rim);
}

.ts-topbar__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 42px;
}

.ts-topbar__promo {
  font-family: "JetBrains Mono", monospace;
  font-size: .73rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ts-topbar__promo i {
  color: var(--ts-cyan);
}

.ts-topbar a {
  color: rgba(255, 255, 255, .8);
}

.ts-topbar a:hover {
  color: var(--ts-cyan);
}

/* Pemilih bahasa / mata uang / wilayah */
.ts-pick {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .06em;
  padding: .32rem .6rem;
  transition: background .16s ease, border-color .16s ease;
}

.ts-pick:hover,
.ts-pick[aria-expanded="true"] {
  background: rgba(255, 255, 255, .16);
  border-color: var(--ts-cyan);
  color: #fff;
}

.ts-pick i {
  font-size: .8rem;
  opacity: .8;
}

.dropdown-menu.ts-menu {
  --bs-dropdown-zindex: 1040;
  --bs-dropdown-border-color: var(--ts-line);
  --bs-dropdown-link-active-bg: var(--ts-ink);
  --bs-dropdown-font-size: .88rem;
  --bs-dropdown-border-radius: 10px;
  box-shadow: var(--ts-sh-2);
  padding: .35rem;
  min-width: 12rem;
}

.ts-menu .dropdown-item {
  border-radius: 7px;
  padding: .45rem .6rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--ts-ink);
}

.ts-menu .dropdown-item:hover,
.ts-menu .dropdown-item:focus {
  background: var(--ts-paper);
  color: var(--ts-ink);
}

.ts-menu .dropdown-item.active {
  background: var(--ts-ink);
  color: #fff;
}

.ts-menu .dropdown-item .ts-code {
  font-family: "JetBrains Mono", monospace;
  font-size: .68rem;
  font-weight: 700;
  color: var(--ts-blue-dark);
  background: var(--ts-paper);
  padding: .1rem .35rem;
  border-radius: 4px;
  min-width: 2.4rem;
  text-align: center;
}

.ts-menu .dropdown-item.active .ts-code,
.ts-menu .dropdown-item:active .ts-code {
  color: var(--ts-ink);
  background: var(--ts-gold);
}

.ts-menu .dropdown-header {
  font-family: "JetBrains Mono", monospace;
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ts-slate);
}

/* 6 - Navbar ------------------------------------------------------------- */
.ts-nav {
  z-index: 1030;
  /* di bawah topbar, di atas isi halaman */
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--ts-line);
  padding: .5rem 0;
  transition: box-shadow .2s ease, padding .2s ease;
}

.ts-nav.is-stuck {
  box-shadow: var(--ts-sh-1);
  padding: .3rem 0;
}

.ts-nav>.ts-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.ts-nav__logo {
  height: 58px;
  width: auto;
  transition: height .2s ease;
}

.ts-nav.is-stuck .ts-nav__logo {
  height: 46px;
}

.ts-nav__mark {
  height: 40px;
  width: 40px;
}

.ts-nav__wordmark {
  font-family: "Chakra Petch", sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--ts-ink);
  letter-spacing: -.02em;
}

.ts-nav__wordmark em {
  font-style: italic;
  background: var(--ts-hot);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ts-nav__tagline {
  font-family: "JetBrains Mono", monospace;
  font-size: .52rem;
  letter-spacing: .18em;
  color: var(--ts-slate);
  text-transform: uppercase;
}

.ts-nav__home {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ts-ink);
  padding: .5rem .2rem;
  border-bottom: 2px solid var(--ts-blue);
}

/* Tombol menu, hanya muncul di bawah 992px */
.ts-nav__toggle {
  --ts-cut: 10px;
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--ts-paper);
  border: 1px solid var(--ts-line);
  color: var(--ts-ink);
  font-size: 1.4rem;
  line-height: 1;
  padding: 0;
  transition: background .16s ease, color .16s ease;
}

.ts-nav__toggle:hover,
.ts-nav__toggle[aria-expanded="true"] {
  background: var(--ts-ink);
  color: #fff;
}

.ts-menu-mobile {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .6rem 0 .35rem;
  border-top: 1px solid var(--ts-line);
}

.ts-menu-mobile>a:not(.ts-btn) {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem .6rem;
  border-radius: 9px;
  font-family: "Chakra Petch", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ts-ink);
  transition: background .16s ease, color .16s ease;
}

.ts-menu-mobile>a:not(.ts-btn):hover,
.ts-menu-mobile>a:not(.ts-btn):focus {
  background: var(--ts-paper);
  color: var(--ts-blue-dark);
}

.ts-menu-mobile>a i {
  color: var(--ts-blue);
  font-size: 1.1rem;
}

.ts-menu-mobile>a:not(.ts-btn):hover i {
  color: var(--ts-blue-dark);
}

/* Kontrol akun di navbar, bersebelahan dengan tombol lacak pesanan */
.ts-account {
  --ts-cut: 8px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .85rem;
  background: var(--ts-paper);
  border: 1px solid var(--ts-line);
  color: var(--ts-ink);
  font-family: "Chakra Petch", sans-serif;
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .02em;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.ts-account:hover,
.ts-account[aria-expanded="true"] {
  background: var(--ts-ink);
  color: #fff;
  border-color: var(--ts-ink);
}

.ts-account i:first-child {
  font-size: 1.05rem;
  color: var(--ts-blue);
}

.ts-account:hover i:first-child,
.ts-account[aria-expanded="true"] i:first-child {
  color: var(--ts-cyan);
}

.ts-account__name {
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Identitas pengguna di kepala menu mobile */
.ts-menu-mobile__user {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem .6rem .9rem;
  margin-bottom: .2rem;
  border-bottom: 1px dashed var(--ts-line);
}

.ts-menu-mobile__user i {
  font-size: 1.9rem;
  color: var(--ts-blue);
}

.ts-menu-mobile__user strong {
  display: block;
  font-family: "Chakra Petch", sans-serif;
  font-size: 1rem;
  color: var(--ts-ink);
  line-height: 1.2;
}

.ts-menu-mobile__user small {
  font-family: "JetBrains Mono", monospace;
  font-size: .68rem;
  color: var(--ts-slate);
  word-break: break-all;
}

/* Ikon di dalam menu dropdown topbar dipakai menggantikan kode dua huruf */
.ts-menu .dropdown-item .ts-code i {
  font-size: .8rem;
}

/* Kotak pencarian navbar: mengambil sisa lebar yang ada */
.ts-navsearch {
  flex: 1 1 380px;
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--ts-paper);
  border: 1px solid var(--ts-line);
  padding: .6rem 1rem;
  --ts-cut: 10px;
  transition: border-color .16s ease, background .16s ease;
}

.ts-navsearch:focus-within {
  border-color: var(--ts-blue);
  background: #fff;
}

.ts-navsearch input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: .92rem;
  outline: none;
  color: var(--ts-ink);
}

.ts-navsearch i {
  color: var(--ts-slate);
}

/* 7 - Hero --------------------------------------------------------------- */
.ts-hero {
  position: relative;
  padding: clamp(40px, 5vw, 72px) 0 clamp(36px, 4vw, 56px);
  overflow: hidden;
}

.ts-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(55% 80% at 10% 0%, rgba(22, 104, 255, .16), transparent 62%),
    radial-gradient(48% 70% at 95% 15%, rgba(255, 155, 18, .16), transparent 64%),
    repeating-linear-gradient(-20deg, rgba(11, 18, 32, .028) 0 2px, transparent 2px 26px);
  pointer-events: none;
}

.ts-hero>.ts-wrap {
  position: relative;
  z-index: 1;
}

.ts-hero__inner {
  max-width: 60rem;
}

.ts-hero__title {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  font-style: italic;
  line-height: 1.03;
  text-transform: uppercase;
}

.ts-hero__title span {
  display: block;
}

.ts-hero__lead {
  font-size: 1.05rem;
  color: var(--ts-slate);
  max-width: 40rem;
}

/* Kotak pencarian utama */
.ts-searchbar {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 2px solid var(--ts-ink);
  box-shadow: var(--ts-sh-2);
  max-width: 62rem;
  --ts-cut: 16px;
  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-searchbar__region {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 0 1rem 0 1.35rem;
  border-right: 1px solid var(--ts-line);
  flex: none;
}

.ts-searchbar__region i {
  color: var(--ts-blue);
}

.ts-searchbar select {
  border: 0;
  background: transparent;
  outline: none;
  font-family: "JetBrains Mono", monospace;
  font-size: .78rem;
  font-weight: 500;
  color: var(--ts-ink);
  padding: .2rem 0;
  cursor: pointer;
}

.ts-searchbar input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  padding: 1.15rem 1.25rem;
  font-size: 1.02rem;
  color: var(--ts-ink);
}

.ts-searchbar input::placeholder {
  color: #93A3BC;
}

.ts-searchbar button {
  flex: none;
  border: 0;
  padding: 0 1.8rem;
  background: linear-gradient(100deg, var(--ts-blue-dark), var(--ts-blue) 55%, var(--ts-cyan));
  color: #fff;
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: filter .18s ease;
}

.ts-searchbar button:hover {
  filter: brightness(1.07);
}

.ts-quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.ts-quick__label {
  font-family: "JetBrains Mono", monospace;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ts-slate);
}

.ts-quick a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .8rem;
  background: #fff;
  border: 1px solid var(--ts-line);
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--ts-ink);
  transition: border-color .16s ease, color .16s ease, transform .16s ease;
}

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

/* 8 - Strip kepercayaan --------------------------------------------------- */
.ts-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.ts-trust__item {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
}

.ts-trust__icon {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: var(--ts-paper);
  color: var(--ts-blue);
  font-size: 1.15rem;
  --ts-cut: 10px;
}

.ts-trust__item h3 {
  font-size: 1rem;
  margin: 0 0 .15rem;
  text-transform: uppercase;
  letter-spacing: .01em;
}

.ts-trust__item p {
  font-size: .86rem;
  color: var(--ts-slate);
  margin: 0;
}

/* 9 - Kartu produk -------------------------------------------------------- */
.ts-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.25rem;
}

.ts-grid--wide {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ts-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ts-surface);
  border: 1px solid var(--ts-line);
  border-radius: var(--ts-radius);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.ts-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--ts-sh-2);
  border-color: #C9DBFF;
}

.ts-tile__art {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 1rem .75rem;
  background: var(--ts-ink);
  overflow: hidden;
}

.ts-tile__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(-20deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 22px),
    radial-gradient(70% 70% at 30% 15%, rgba(255, 255, 255, .18), transparent 70%);
}

.ts-tile__name {
  position: relative;
  z-index: 1;
  font-family: "Chakra Petch", sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.05;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.ts-tile__unit {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: .35rem;
  font-family: "JetBrains Mono", monospace;
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}

.ts-tile__off {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  background: var(--ts-hot);
  color: var(--ts-ink);
  font-family: "JetBrains Mono", monospace;
  font-size: .66rem;
  font-weight: 700;
  padding: .3rem .6rem;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

.ts-tile__body {
  padding: .8rem .9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  flex: 1;
}

.ts-tile__title {
  font-size: .98rem;
  margin: 0;
  line-height: 1.2;
}

.ts-tile__title a {
  color: var(--ts-ink);
}

.ts-tile__title a:hover {
  color: var(--ts-blue-dark);
}

.ts-tile__price {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ts-ink);
}

.ts-tile__from {
  font-family: "JetBrains Mono", monospace;
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ts-slate);
}

.ts-tile__regions {
  margin-top: auto;
  padding-top: .55rem;
  font-family: "JetBrains Mono", monospace;
  font-size: .62rem;
  color: var(--ts-slate);
  display: flex;
  align-items: center;
  gap: .3rem;
}

.ts-tone-a {
  background: linear-gradient(135deg, #0B1220, #123A7E 55%, #1668FF);
}

.ts-tone-b {
  background: linear-gradient(135deg, #0B1220, #0E4C6B 55%, #37CBFF);
}

.ts-tone-c {
  background: linear-gradient(135deg, #131A2C, #5B3A0B 55%, #FF9B12);
}

.ts-tone-d {
  background: linear-gradient(135deg, #0B1220, #2A2350 55%, #6C5CE7);
}

.ts-tone-e {
  background: linear-gradient(135deg, #0B1220, #123A7E 45%, #FF9B12);
}

/* Catatan kunci wilayah */
.ts-note {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  background: #FFF6E6;
  border: 1px solid #FFE0AC;
  color: #6B4A05;
  padding: .85rem 1rem;
  font-size: .88rem;
  --ts-cut: 10px;
}

.ts-note i {
  color: var(--ts-amber);
  font-size: 1.05rem;
  line-height: 1.3;
}

/* 10 - Swiper ------------------------------------------------------------- */
.swiper {
  padding-bottom: 3rem !important;
}

.swiper-wrapper {
  align-items: stretch;
}

.swiper-slide {
  height: auto;
}

.swiper-pagination-bullet {
  background: var(--ts-ink);
  opacity: .18;
}

.swiper-pagination-bullet-active {
  background: var(--ts-blue);
  opacity: 1;
  width: 22px;
  border-radius: 4px;
}

.ts-swiper-nav {
  width: 42px;
  height: 42px;
  border: 1px solid var(--ts-line);
  background: #fff;
  color: var(--ts-ink);
  display: grid;
  place-items: center;
  transition: background .18s ease, color .18s ease;
  --ts-cut: 8px;
}

.ts-swiper-nav:hover {
  background: var(--ts-ink);
  color: #fff;
}

.ts-swiper-nav.is-disabled {
  opacity: .4;
  pointer-events: none;
}

/* 11 - Langkah ------------------------------------------------------------ */
.ts-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  counter-reset: step;
}

.ts-step {
  position: relative;
  background: var(--ts-surface);
  border: 1px solid var(--ts-line);
  border-radius: var(--ts-radius);
  padding: 1.5rem 1.4rem;
}

.ts-step__no {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ts-blue);
  display: block;
  margin-bottom: .75rem;
}

.ts-step h3 {
  font-size: 1.1rem;
  text-transform: uppercase;
  font-style: italic;
  margin: 0 0 .4rem;
}

.ts-step p {
  font-size: .92rem;
  color: var(--ts-slate);
  margin: 0;
}

.ts-step::after {
  content: "";
  position: absolute;
  right: -1.1rem;
  top: 50%;
  width: .7rem;
  height: 2px;
  background: var(--ts-line);
}

.ts-step:last-child::after {
  display: none;
}

/* 12 - Pita gelap & lacak pesanan ----------------------------------------- */
.ts-band {
  position: relative;
  background: var(--ts-ink);
  color: #fff;
  overflow: hidden;
}

.ts-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46% 120% at 6% 0%, rgba(22, 104, 255, .5), transparent 62%),
    radial-gradient(42% 110% at 96% 100%, rgba(255, 155, 18, .42), transparent 64%),
    repeating-linear-gradient(-20deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 24px);
}

.ts-band>.ts-wrap {
  position: relative;
}

.ts-band h2 {
  color: #fff;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
}

.ts-band p {
  color: rgba(255, 255, 255, .74);
}

.ts-band .ts-eyebrow {
  color: var(--ts-cyan);
}

.ts-trackform {
  display: flex;
  gap: .75rem;
  max-width: 34rem;
}

.ts-trackform input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  padding: .85rem 1rem;
  font-size: .95rem;
  outline: none;
  --ts-cut: 10px;
}

.ts-trackform input::placeholder {
  color: rgba(255, 255, 255, .45);
}

.ts-trackform input:focus {
  border-color: var(--ts-cyan);
}

/* 13 - Pembayaran --------------------------------------------------------- */
.ts-pay {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.ts-pay span {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .95rem;
  background: var(--ts-surface);
  border: 1px solid var(--ts-line);
  font-size: .85rem;
  font-weight: 600;
  color: var(--ts-ink);
  --ts-cut: 9px;
}

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

/* 14 - Footer ------------------------------------------------------------- */
.ts-footer {
  background: var(--ts-ink);
  color: rgba(255, 255, 255, .7);
  padding: clamp(44px, 5vw, 68px) 0 0;
}

.ts-footer__logo {
  height: 58px;
  width: auto;
}

.ts-footer h4 {
  color: #fff;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 1rem;
}

.ts-footer a {
  color: rgba(255, 255, 255, .7);
  font-size: .92rem;
}

.ts-footer a:hover {
  color: var(--ts-cyan);
}

.ts-footer__links li {
  padding: .3rem 0;
}

.ts-footer__social a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  transition: background .18s ease, border-color .18s ease;
}

.ts-footer__social a:hover {
  background: var(--ts-blue);
  border-color: var(--ts-blue);
}

.ts-footer input {
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  padding: .7rem .9rem;
  font-size: .9rem;
  outline: none;
  --ts-cut: 8px;
}

.ts-footer input::placeholder {
  color: rgba(255, 255, 255, .45);
}

.ts-footer__legal {
  margin-top: 2.25rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 1.1rem 0 1.4rem;
  font-size: .78rem;
  color: rgba(255, 255, 255, .5);
}

.ts-totop {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1030;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--ts-ink);
  color: #fff;
  border: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  --ts-cut: 10px;
}

.ts-totop.is-on {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ts-totop:hover {
  background: var(--ts-blue);
}

/* 15 - Responsif ---------------------------------------------------------- */
@media (max-width: 1399.98px) {
  .ts-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .ts-navsearch {
    flex: 1 1 100%;
    order: 2;
  }

  .ts-nav>.ts-wrap {
    gap: .75rem;
    row-gap: .6rem;
  }

  .ts-trust {
    grid-template-columns: repeat(2, 1fr);
  }

  .ts-steps {
    grid-template-columns: 1fr;
  }

  .ts-step::after {
    display: none;
  }

  .ts-nav__logo {
    height: 46px;
  }

  .ts-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ts-grid--wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .ts-searchbar {
    flex-wrap: wrap;
  }

  .ts-searchbar__region {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--ts-line);
    padding: .7rem 1.1rem;
  }

  .ts-searchbar input {
    width: 100%;
    flex: 1 1 100%;
    padding: .95rem 1.1rem;
  }

  .ts-searchbar button {
    width: 100%;
    padding: .9rem;
  }

  .ts-hero__title {
    font-size: 2rem;
  }

  .ts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
  }

  .ts-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 479.98px) {
  .ts-trust {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =====================================================================
   Gambar produk di kartu.

   Gambar ditumpuk DI ATAS petak gradien berisi nama produk, bukan
   menggantikannya. Kalau sumbernya gagal dimuat, elemen img dibuang oleh
   onerror dan yang tersisa petak gradien, bukan ikon gambar rusak.

   object-fit memakai cover tanpa padding, jadi gambar memenuhi seluruh
   petak dan gradien di belakangnya tidak lagi terlihat.

   Petaknya persegi, dan gambar produk dari supplier hampir selalu persegi
   juga, jadi cover mengisi pas tanpa memotong apa pun. Gambar yang TIDAK
   persegi akan dipotong di bagian tengah, dan itu konsekuensi yang perlu
   kamu tahu: unggah gambar persegi kalau tidak mau ada yang terpotong.
   ===================================================================== */
.ts-tile__img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Jaring pengaman: gambar apa pun di dalam kartu tidak boleh melebihi
   kotaknya, walau lupa diberi aturan sendiri. */
.ts-tile img {
  max-width: 100%;
}

/* =====================================================================
   Lencana toko aplikasi di footer.

   KENAPA DULU MENUMPUK

   Pada tinggi 64px, Play selebar 240px dan App Store 222px, ditambah jarak
   18px menjadi 480px. Kolom footer hanya sekitar 330 sampai 380px, jadi
   flex-wrap memindahkan yang kedua ke baris bawah.

   CARA BARU: LEBAR YANG MENENTUKAN, BUKAN TINGGI

   Keduanya kini berbagi satu baris dan tidak pernah membungkus. Lebarnya
   dibagi mengikuti rasio artwork masing-masing, dan karena lebar menentukan
   tinggi pada gambar yang rasionya tetap, keduanya otomatis sama tinggi
   tanpa satu pun angka tinggi ditulis.

     playstore  rasio 3.742
     appstore   rasio 3.461

   Ukurannya mengikuti lebar yang tersedia, jadi di kolom sempit mengecil
   sendiri, tidak pernah terpotong dan tidak pernah menumpuk.

   MENGATUR UKURAN

     --ts-stores-max     batas lebar keseluruhan, ini pengatur ukurannya
     --ts-play-scale     tinggi Play relatif terhadap App Store

   Angka 0.86 berarti Play tampil 14 persen lebih pendek. Lencana Play
   berlatar terang dan bergaris tepi, sehingga pada tinggi yang sama persis
   ia terbaca lebih besar daripada lencana Apple yang gelap polos. Angka ini
   disetel dengan mata, bukan rumus, dan boleh kamu ubah lagi.
   ===================================================================== */
.ts-stores {
  --ts-stores-max: 340px;
  --ts-play-scale: 0.86;
  --ts-stores-gap: 14px;

  margin-top: 1.25rem;
  display: grid;
  gap: .55rem;
  justify-items: start;
  width: 100%;
  max-width: var(--ts-stores-max);
}

.ts-stores__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--ts-stores-gap);
  width: 100%;
}

.ts-stores__badge {
  min-width: 0;
  display: block;
  line-height: 0;
  border-radius: 10px;
  transition: transform .16s ease, opacity .16s ease;
}

.ts-stores__badge img {
  width: 100%;
  height: auto;
  display: block;
}

/* Pembagian lebar mengikuti rasio artwork, jadi tingginya ikut seragam. */
.ts-stores__badge--playstore {
  flex-grow: calc(3.742 * var(--ts-play-scale));
  flex-shrink: 1;
  flex-basis: 0;
}

.ts-stores__badge--appstore {
  flex-grow: 3.461;
  flex-shrink: 1;
  flex-basis: 0;
}

a.ts-stores__badge:hover {
  transform: translateY(-2px);
}

a.ts-stores__badge:focus-visible {
  outline: 3px solid var(--ts-cyan);
  outline-offset: 3px;
}

/* Belum bisa diklik selama alamat aplikasinya belum diisi. */
.ts-stores__badge--soon {
  opacity: .5;
  cursor: default;
  filter: grayscale(1);
}

.ts-stores__note {
  font-family: "JetBrains Mono", monospace;
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}