/* ══════════════════════════════════════════════════════════════════
   TEMA 2026 — redesign beranda (kontrak: comp-beranda-v18-KUNCI.html)
   Nilai di sini DISALIN dari comp, bukan dikira-kira. Mengubah angka
   di sini = mengubah kontrak; lihat catatan-proyek/redesign-2026/.

   Palet dari logo V2: indigo #2F318B, oranye #F08519.
   JANGAN pakai color-mix(... , transparent) di ruang oklch untuk latar —
   Safari iOS menggeser hue-nya ke merah (kejadian 10 Agu 2026).
   ══════════════════════════════════════════════════════════════════ */

body.tema-2026 {
  --tj-bg: #0B0C14;
  --tj-surface: #131522;
  --tj-surface-2: #1A1D2E;
  --tj-line: rgba(139, 143, 199, .16);
  --tj-text: #EDEEF6;
  --tj-muted: #9A9DB8;
  --tj-brand: #2F318B;
  --tj-brand-lite: #8B8FF2;
  --tj-cta: #F08519;
  --tj-ok: #34C77B;
  --tj-radius: 14px;

  background: var(--tj-bg);
  color: var(--tj-text);
  /* Font kontrak (comp v12): stack sistem — menimpa 'Plus Jakarta Sans'
     warisan custom-styles.css. Inilah font yang dilihat pemilik di comp. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Dasar 15px = kontrak SEMUA comp (body font-size:15px); warisan 16px
     membuat teks tak berukuran eksplisit tampak lebih besar dari comp
     (veto pemilik 12 Agu, halaman order). */
  font-size: 15px;
  padding-bottom: calc(60px + env(safe-area-inset-bottom)); /* ruang bottom-nav HP konsisten safe-area */
}
@media (min-width: 760px) {
  body.tema-2026 { padding-bottom: 0; }
}

/* ---------- cincin fokus: satu aturan untuk semua isian ----------
   `tailwind.css` warisan (baris ~240) memberi SETIAP input/select/textarea yang
   difokus cincin **merah menyala #c20404** plus `border-color:#ad0000`. Itu sisa
   skrip yang dibeli, bukan pilihan desain — dan ia menyerang siapa pun yang
   menambah isian baru ke halaman bertema.

   Sampai 14 Agu 2026 hanya kotak cari navbar yang ditambal satu per satu, jadi
   kotak cari di /akun tetap menyala merah begitu diklik (dilaporkan pemilik
   lewat tangkapan layar). Sekarang dimatikan sekali di sini, dan diganti cincin
   oranye — pola yang memang sudah dipakai tema ini di sembilan tempat lain
   (`.f-in input:focus`, `.form-control:focus`, dst).

   Jangan dihapus dengan alasan "sudah tidak ada yang merah": yang merah bukan
   aturan ini, melainkan tailwind.css yang masih dimuat di semua halaman. */
.tema-2026 input:focus,
.tema-2026 select:focus,
.tema-2026 textarea:focus {
  outline: 0;
  box-shadow: 0 0 0 2px var(--tj-cta);
  border-color: var(--tj-line);
}

/* ---------- resep tombol Kumo, CSS murni ---------- */
.tema-2026 .tj-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; border: 0; border-radius: 999px;
  font: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
  transition: filter .15s, transform .05s;
  text-decoration: none;
}
.tema-2026 .tj-btn:active { transform: translateY(1px); }
.tema-2026 .tj-btn-cta {
  color: #fff;
  background: linear-gradient(to bottom, color-mix(in oklch, var(--tj-cta), white 15%), var(--tj-cta));
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--tj-cta), black 12%),
              inset 0 1px 0 rgba(255, 255, 255, .28),
              0 1px 2px rgba(0, 0, 0, .5);
}
.tema-2026 .tj-btn-cta:hover { filter: brightness(1.07); color: #fff; }
.tema-2026 .tj-btn-sec {
  color: var(--tj-text); background: var(--tj-surface-2);
  box-shadow: 0 0 0 1px var(--tj-line), inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 2px rgba(0, 0, 0, .45);
}
.tema-2026 .tj-btn-sec:hover { background: #22263a; color: var(--tj-text); }
.tema-2026 .tj-btn-sm { height: 32px; padding: 0 13px; font-size: 13px; }

/* ---------- navbar dua baris ---------- */
.tema-2026 .tj-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(11, 12, 20, .88); /* rgba polos, BUKAN color-mix+transparent */
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--tj-line);
  padding-top: max(0px, calc(env(safe-area-inset-top, 0px) - var(--pwa-install-banner-height, 0px)));
}
.tema-2026 .tj-wrap { max-width: 1080px; margin: 0 auto; padding: 0 14px; }
.tema-2026 .tj-nav { display: flex; align-items: center; gap: 10px; height: 54px; }
.tema-2026 .tj-nav img.tj-logo { height: 26px; width: auto; flex-shrink: 0; }
@media (min-width: 760px) {
  .tema-2026 .tj-nav { gap: 14px; height: 60px; }
  .tema-2026 .tj-nav img.tj-logo { height: 34px; }
}
.tema-2026 .tj-cari {
  flex: 1; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
  border-radius: 999px; background: var(--tj-surface-2);
  box-shadow: 0 0 0 1px var(--tj-line), inset 0 1px 2px rgba(0, 0, 0, .35);
  color: var(--tj-muted); font-size: 13px; min-width: 0; text-decoration: none;
}
.tema-2026 .tj-cari .q { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Kotak cari jadi <input> 14 Agu 2026 (sebelumnya tautan mati ke /cari).
   Pil-nya tetap persis comp: input transparan, tanpa border, tinggi ikut
   induk — yang terlihat tetap kotak abu-abu berbingkai satu piksel. */
.tema-2026 .tj-cari { position: relative; }
.tema-2026 .tj-cari input.q {
  flex: 1; min-width: 0; height: 100%; padding: 0; margin: 0;
  border: 0; outline: 0; background: transparent;
  font: inherit; color: var(--tj-text);
}
.tema-2026 .tj-cari input.q::placeholder { color: var(--tj-muted); opacity: 1; }
/* Fokusnya dipindah ke pil-nya sendiri (aturan berikutnya), jadi input di
   dalamnya tidak ikut bercincin — kalau tidak, dua cincin bertumpuk. */
.tema-2026 .tj-cari input.q:focus { box-shadow: none; border-color: transparent; }
.tema-2026 .tj-cari:focus-within {
  box-shadow: 0 0 0 1px var(--tj-brand-lite), inset 0 1px 2px rgba(0, 0, 0, .35);
}
.tema-2026 .tj-cari input.q::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.tema-2026 .tj-cari-hasil[hidden] { display: none; }
.tema-2026 .tj-cari-hasil {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  margin: 0; padding: 6px; list-style: none; max-height: 60vh; overflow-y: auto;
  border-radius: var(--tj-radius); background: var(--tj-surface);
  box-shadow: 0 0 0 1px var(--tj-line), 0 12px 28px rgba(0, 0, 0, .55);
}
.tema-2026 .tj-cari-hasil li { margin: 0; }
.tema-2026 .tj-cari-hasil a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 10px; color: var(--tj-text); text-decoration: none; font-size: 14px;
}
.tema-2026 .tj-cari-hasil a:hover, .tema-2026 .tj-cari-hasil a:focus {
  background: var(--tj-surface-2); color: var(--tj-text);
}
.tema-2026 .tj-cari-hasil img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.tema-2026 .tj-cari-hasil .kosong { padding: 10px; color: var(--tj-muted); font-size: 13px; }
.tema-2026 .tj-navrow2 { border-top: 1px solid var(--tj-line); }
.tema-2026 .tj-navrow2 .in {
  display: flex; align-items: center; gap: 2px; height: 44px;
  overflow-x: auto; scrollbar-width: none;
  /* iOS: tanpa dua baris ini baris menu ikut bisa DISERET NAIK-TURUN
     (rubber-band vertikal pada wadah overflow) — veto pemilik 11 Agu. */
  overflow-y: hidden; touch-action: pan-x;
}
.tema-2026 .tj-navrow2 .in::-webkit-scrollbar { display: none; }
.tema-2026 .tj-nlink {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 0 12px; height: 100%; font-size: 13px; font-weight: 600; color: var(--tj-muted);
  border-bottom: 2px solid transparent; position: relative; text-decoration: none;
}
.tema-2026 .tj-nlink svg { width: 15px; height: 15px; }
.tema-2026 .tj-nlink.on { color: var(--tj-cta); border-bottom-color: var(--tj-cta); }
.tema-2026 .tj-nlink .tj-dot-baru {
  width: 7px; height: 7px; border-radius: 99px; background: var(--tj-cta);
  position: absolute; top: 8px; right: 4px;
}
.tema-2026 .tj-navrow2 .sp { flex: 1; min-width: 12px; }
@media (max-width: 479px) { .tema-2026 .tj-btn-masuk { display: none; } }

/* ---------- strip JB & promo carousel ---------- */
.tema-2026 .tj-promo-section {
  margin-top: 12px;
}
.tema-2026 .tj-promo-carousel {
  position: relative;
  overflow: hidden;
  border-radius: var(--tj-radius);
  outline: none;
}
.tema-2026 .tj-promo-carousel:focus-visible {
  box-shadow: 0 0 0 2px var(--tj-cta);
}
.tema-2026 .tj-promo-track {
  display: grid;
  grid-template-areas: "slide";
  width: 100%;
}
.tema-2026 .tj-promo-slide {
  grid-area: slide;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
  transform: translateX(16px);
  width: 100%;
}
.tema-2026 .tj-promo-slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}
.tema-2026 .strip-jb {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(to right, color-mix(in oklch, var(--tj-brand), var(--tj-bg) 72%), var(--tj-surface));
  border: 1px solid color-mix(in oklch, var(--tj-brand-lite), var(--tj-bg) 70%);
  border-radius: var(--tj-radius); padding: 10px 14px;
  color: var(--tj-text); text-decoration: none;
  min-height: 58px;
  box-sizing: border-box;
}
.tema-2026 .strip-jb b { font-size: 14px; }
.tema-2026 .strip-jb small { display: block; color: var(--tj-muted); font-size: 12px; }
.tema-2026 .strip-jb .chev { margin-left: auto; color: var(--tj-cta); font-weight: 800; flex-shrink: 0; }
.tema-2026 .strip-komunitas {
  background: linear-gradient(to right, color-mix(in oklch, #8b5cf6, var(--tj-bg) 76%), var(--tj-surface));
  border-color: color-mix(in oklch, #a78bfa, var(--tj-bg) 70%);
}
.tema-2026 .strip-icon-chat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #10b981;
  flex-shrink: 0;
}
.tema-2026 .strip-icon-chat svg {
  width: 22px;
  height: 22px;
}
.tema-2026 .tj-promo-indicators {
  position: absolute;
  bottom: 8px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 2;
}
.tema-2026 .tj-promo-dot {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.28);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all .25s ease;
}
.tema-2026 .tj-promo-dot.active {
  background: var(--tj-cta);
  width: 16px;
}
@media (prefers-reduced-motion: reduce) {
  .tema-2026 .tj-promo-slide {
    transition: none !important;
    transform: none !important;
  }
}
.tema-2026 .tj-badge-baru {
  background: linear-gradient(to bottom, color-mix(in oklch, var(--tj-cta), white 15%), var(--tj-cta));
  color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .06em;
  padding: 4px 8px; border-radius: 7px; flex-shrink: 0;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--tj-cta), black 12%), inset 0 1px 0 rgba(255, 255, 255, .3);
}

/* ---------- banner (carousel bawaan, kulit baru) ---------- */
.tema-2026 .carousel-inner { border-radius: var(--tj-radius); border: 1px solid var(--tj-line); }

/* ---------- kepala seksi ---------- */
.tema-2026 .tj-sec-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-size: 16px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; color: var(--tj-text);
}
.tema-2026 .tj-sec-head .dot { width: 8px; height: 8px; border-radius: 99px; background: var(--tj-cta); flex-shrink: 0; }

/* ---------- populer ---------- */
.tema-2026 .tj-pop {
  display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--tj-radius);
  background: var(--tj-surface); box-shadow: 0 0 0 1px var(--tj-line);
  transition: box-shadow .15s; text-decoration: none; color: var(--tj-text);
}
.tema-2026 .tj-pop:hover { box-shadow: 0 0 0 1px var(--tj-brand-lite); }
.tema-2026 .tj-pop img { width: 52px; height: 52px; border-radius: 11px; flex-shrink: 0; object-fit: cover; }
.tema-2026 .tj-pop .nm { font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--tj-text); }
.tema-2026 .tj-pop .sub { font-size: 10px; color: var(--tj-muted); }
.tema-2026 .tj-pop .pr { font-size: 11px; font-weight: 600; color: var(--tj-cta); margin-top: 2px; }

/* ---------- tab pill (menimpa kulit .tab-button bawaan) ---------- */
/* Padding kiri: pil aktif di-scale(1.05) oleh kulit warisan sehingga tepi
   kirinya terpotong wadah overflow — seluruh barisan digeser sedikit ke
   kanan (veto pemilik 11 Agu). 6px > selisih scale (~3px) + ring 1px. */
.tema-2026 #myTab { padding-left: 6px; padding-right: 6px; }
.tema-2026 .tab-button {
  flex-shrink: 0; height: 34px; padding: 0 15px; border-radius: 999px; border: 0;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--tj-muted);
  background: var(--tj-surface); box-shadow: 0 0 0 1px var(--tj-line); cursor: pointer;
}
.tema-2026 .tab-button.active {
  color: #fff;
  background: linear-gradient(to bottom, color-mix(in oklch, var(--tj-brand), white 18%), var(--tj-brand));
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--tj-brand), black 15%), inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* ---------- grid game (kulit di atas markup bawaan) ---------- */
.tema-2026 .featured-game-card {
  border-radius: 12px; box-shadow: 0 0 0 1px var(--tj-line);
}
/* Lipatan grid = SELALU 3 baris (veto pemilik 11 Agu): HP 3 kolom -> 9,
   tablet/laptop 5 kolom -> 15, desktop lebar 6 kolom -> 18. Tombol "Muat
   lebih banyak" membuka lipatan; kelas .tj-semua dipasang JS saat diklik. */
@media (max-width: 759px) {
  .tema-2026 #kategoriContainer:not(.tj-semua) > a:nth-child(n+10) { display: none; }
}
@media (min-width: 760px) and (max-width: 1279px) {
  .tema-2026 #kategoriContainer:not(.tj-semua) > a:nth-child(n+16) { display: none; }
}
@media (min-width: 1280px) {
  .tema-2026 #kategoriContainer:not(.tj-semua) > a:nth-child(n+19) { display: none; }
}

/* ---------- etalase akun ---------- */
.tema-2026 .etalase-akun {
  border-radius: 18px; padding: 16px 14px 18px;
  background: linear-gradient(180deg, color-mix(in oklch, var(--tj-brand), var(--tj-bg) 80%), var(--tj-surface));
  border: 1px solid color-mix(in oklch, var(--tj-brand-lite), var(--tj-bg) 72%);
}
.tema-2026 .etalase-akun .lead { color: var(--tj-muted); font-size: 13px; margin: 2px 0 0; }
.tema-2026 .etalase-grid {
  display: flex; gap: 10px; margin-top: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-bottom: 4px;
}
.tema-2026 .etalase-grid::-webkit-scrollbar { display: none; }
.tema-2026 .etalase-card {
  flex: 0 0 45%; scroll-snap-align: start;
  background: var(--tj-surface-2); border-radius: 12px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--tj-line); text-decoration: none; color: var(--tj-text);
  display: block;
}
@media (min-width: 760px) {
  .tema-2026 .etalase-grid { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; }
  .tema-2026 .etalase-card { flex: none; }
}
/* Rasio 4:5 = ukuran template unggahan pemilik (1080×1350), bukan angka
   karangan. Comp S6 menggambarnya 1:1 dan itu SENGAJA ditinggalkan (perintah
   pemilik 14 Agu): di kotak 1:1 poster 4:5 menyisakan ±25px pita gelap di kiri
   dan kanan — "frame luarnya tidak fit dengan template desain". Rasio yang sama
   sudah dipakai galeri detail sejak 2 Agu (AkunDetailKayaTest); kartu-kartunya
   yang tertinggal. `contain` tetap dipertahankan supaya foto berukuran lain
   tidak pernah terpotong. */
.tema-2026 .etalase-card .ph {
  aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center;
  background: #10121D;
}
.tema-2026 .etalase-card .ph img { width: 100%; height: 100%; object-fit: contain; } /* foto tidak pernah dipotong */
.tema-2026 .etalase-card .bd { display: block; padding: 8px 9px 9px; }
.tema-2026 .etalase-card .ttl {
  display: block; font-size: 12px; font-weight: 600; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tema-2026 .etalase-card .sub {
  display: block; font-size: 10.5px; color: var(--tj-muted); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tema-2026 .etalase-card .hrga {
  display: block; font-size: 12.5px; font-weight: 800; color: var(--tj-cta); margin-top: 4px;
}
.tema-2026 .etalase-cta { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* ---------- bottom nav HP ---------- */
.tema-2026 .bnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: rgba(11, 12, 20, .92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--tj-line);
  display: flex; justify-content: space-evenly; align-items: center;
  padding: 6px 2px calc(6px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}
@media (min-width: 760px) { .tema-2026 .bnav { display: none; } }
.tema-2026 .bnav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 11px; font-weight: 600; color: var(--tj-muted); position: relative;
  flex: 1; max-width: 90px; min-height: 44px; text-decoration: none;
  padding: 2px 0;
  box-sizing: border-box;
}
.tema-2026 .bnav a.on { color: var(--tj-cta); }
.tema-2026 .bnav svg { width: 22px; height: 22px; flex-shrink: 0; }
.tema-2026 .bnav .tj-dot-baru {
  position: absolute; top: 2px; right: calc(50% - 14px); width: 7px; height: 7px; border-radius: 99px;
  background: var(--tj-cta); box-shadow: 0 0 0 2px var(--tj-bg);
}

/* ---------- penyesuaian elemen warisan di bawah tema baru ---------- */
/* Tombol Chat CS mengambang: di HP naik ke atas bottom-nav (tadinya nempel
   bawah dan menutup tombol Profil), dan warna merah warisan → oranye merek. */
@media (max-width: 759px) {
  /* !important: melawan utilitas .bottom-0 warisan yang menang entah lewat
     jalur mana di Safari — diverifikasi komputasi, bukan tebakan berkas. */
  .tema-2026 #wa-float-default { bottom: calc(70px + env(safe-area-inset-bottom)) !important; }
  .tema-2026 #wa-float-default > a { border-radius: 999px; }
}
.tema-2026 #wa-float-default > a {
  background: linear-gradient(to bottom, color-mix(in oklch, var(--tj-cta), white 15%), var(--tj-cta));
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--tj-cta), black 12%), inset 0 1px 0 rgba(255, 255, 255, .28);
}
/* Footer warisan: gelombang biru & gradasi abu tema lama diselaraskan. */
.tema-2026 svg.wave path { fill: var(--tj-surface); }
.tema-2026 footer.bg-gradient-to-t {
  background: var(--tj-surface);
  border-top: 1px solid var(--tj-line);
}

/* ══════════════════════════════════════════════════════════════════
   HALAMAN ORDER (kontrak: comp-order-v13-KUNCI.html)
   Ganti-kulit murni di atas markup jalur uang — selektor menimpa kelas
   bawaan; NOL id/nama elemen yang diubah, order-scripts.js tak disentuh.
   ══════════════════════════════════════════════════════════════════ */

/* O1 header game: banner besar + animasi lingkaran tema lama disembunyikan,
   kartu produk jadi panel indigo ala strip. */
.tema-2026 .games-bg { display: none; }
.tema-2026 section.bg-nvd {
  background: none; /* buang ornamen bg-nvd warisan */
}
.tema-2026 .shadow-detail-card {
  box-shadow: none;
  max-width: 1080px; margin: 14px auto 0; padding: 0 14px;
}
.tema-2026 .tj-gamehead {
  background: linear-gradient(to right, color-mix(in oklch, var(--tj-brand), var(--tj-bg) 72%), var(--tj-surface));
  border: 1px solid color-mix(in oklch, var(--tj-brand-lite), var(--tj-bg) 70%);
  border-radius: var(--tj-radius); padding: 14px;
}
.tema-2026 .product-thumbnail-container {
  margin-top: 0 !important; background: none !important; padding: 0 !important;
}
/* Kontrak comp O1: thumb PORTRET 86px meregang setinggi kartu. */
.tema-2026 .tj-gamehead { align-items: stretch !important; }
.tema-2026 .product-thumbnail-container { display: flex; align-self: stretch; }
.tema-2026 .product-thumbnail-container img {
  width: 86px !important; height: auto !important; align-self: stretch;
  border-radius: 14px; object-fit: cover;
  box-shadow: 0 0 0 1px var(--tj-line);
}
.tema-2026 .tj-gamehead h1 {
  font-size: 18px; font-weight: 800; line-height: 1.2;
}
@media (min-width: 760px) { .tema-2026 .tj-gamehead h1 { font-size: 24px; } }
.tema-2026 .tj-gamehead .flex-1 { padding-top: 0 !important; margin-top: 0 !important; }
.tema-2026 .tj-fitur { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; font-size: 11px; }
.tema-2026 .tj-fitur span {
  display: flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 1px var(--tj-line); font-weight: 600;
}
.tema-2026 .tj-fitur b { color: var(--tj-ok); }

/* Kartu langkah: kulit kartu + bilah kepala + nomor kotak oranye. */
.tema-2026 .shadow-form,
.tema-2026 .card {
  background: var(--tj-surface);
  border: 0;
  box-shadow: 0 0 0 1px var(--tj-line);
  border-radius: var(--tj-radius);
  color: var(--tj-text);
}
.tema-2026 .card .card { box-shadow: none; } /* kartu bersarang tidak dobel garis */
.tema-2026 .border-murky-600 {
  border-color: var(--tj-line);
  background: rgba(255, 255, 255, .035);
  border-radius: var(--tj-radius) var(--tj-radius) 0 0;
}
/* Kotak nomor langkah (1/2/3): warisan pakai gradien merah-hitam. */
.tema-2026 .rounded-tl-xl.bg-gradient-to-b,
.tema-2026 .from-black-900.to-red-black {
  background: linear-gradient(to bottom, color-mix(in oklch, var(--tj-cta), white 15%), var(--tj-cta)) !important;
  border-radius: 8px !important;
  margin: 8px 0 8px 10px;
  width: 30px; height: 30px; padding: 0 !important;
  font-size: 14px; font-weight: 800; color: #fff;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--tj-cta), black 12%), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.tema-2026 .card-titel, .tema-2026 .card-title { font-size: 15px !important; font-weight: 700; }

/* Input (ID/server/WA/voucher): pill gelap fokus oranye — kontrak O2/O5. */
.tema-2026 .card input[type="text"],
.tema-2026 .card input[type="number"],
.tema-2026 .card input[type="tel"],
.tema-2026 .card select {
  height: 42px; border-radius: 999px !important; border: 0 !important;
  padding: 0 16px; font-size: 13px;
  /* surface-2, bukan #10121D: di atas kartu gelap kolom isian nyaris tak
     terlihat (veto pemilik 11 Agu). */
  background: var(--tj-surface-2) !important; color: var(--tj-text) !important;
  box-shadow: 0 0 0 1px var(--tj-line);
}
.tema-2026 .card input:focus, .tema-2026 .card select:focus {
  outline: 0; box-shadow: 0 0 0 2px var(--tj-cta) !important;
}
.tema-2026 .card input::placeholder { color: var(--tj-muted); }
.tema-2026 .card label.block, .tema-2026 .card label.form-label { color: var(--tj-text); }

/* Pill region & paket — indigo tactile saat aktif (kontrak O3). */
.tema-2026 .btn-region,
.tema-2026 .btn-category {
  border-radius: 999px !important;
  background: var(--tj-surface-2) !important;
  color: var(--tj-muted) !important;
  box-shadow: 0 0 0 1px var(--tj-line);
  font-size: 12.5px !important; font-weight: 600 !important;
  border: 0 !important;
}
.tema-2026 .btn-region.active,
.tema-2026 .btn-category.active {
  color: #fff !important;
  background: linear-gradient(to bottom, color-mix(in oklch, var(--tj-brand), white 18%), var(--tj-brand)) !important;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--tj-brand), black 15%), inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* Kartu nominal: radio tersembunyi + label; terpilih = ring oranye + ✓
   (kontrak O3). Pola input:checked+label mengikuti markup bawaan. */
.tema-2026 .list-group .list-group-item {
  background: var(--tj-surface-2); border: 0; border-radius: 11px;
  box-shadow: 0 0 0 1px var(--tj-line); color: var(--tj-text);
  cursor: pointer; position: relative; transition: box-shadow .15s;
}
.tema-2026 .list-group input[type="radio"]:checked + label.list-group-item {
  box-shadow: 0 0 0 2px var(--tj-cta);
  background: color-mix(in srgb, var(--tj-cta) 9%, var(--tj-surface-2));
}
.tema-2026 .list-group input[type="radio"]:checked + label.list-group-item::after {
  content: "\2713"; position: absolute; top: 6px; right: 8px;
  color: var(--tj-cta); font-weight: 800; font-size: 12px;
}
.tema-2026 .hayutopup-prod { font-size: 12px; font-weight: 600; line-height: 1.25; }
.tema-2026 .sale-price { color: var(--tj-cta) !important; font-weight: 800; font-style: normal; }
.tema-2026 .regular-price { color: var(--tj-muted); text-decoration: line-through; font-size: 11px; }

/* Metode pembayaran (kontrak O4): laci kelompok + baris radio. */
.tema-2026 .payment-drawwer {
  background: var(--tj-surface); border-radius: var(--tj-radius);
  box-shadow: 0 0 0 1px var(--tj-line); overflow: hidden;
}
.tema-2026 .payment-drawwer .header { background: rgba(255, 255, 255, .035); }
.tema-2026 .list-group1 input[type="radio"]:checked + label.list-group-item {
  box-shadow: 0 0 0 2px var(--tj-cta);
  background: color-mix(in srgb, var(--tj-cta) 9%, var(--tj-surface-2));
}
.tema-2026 .list-group1 .list-group-item {
  background: var(--tj-surface-2); border: 0; border-radius: 11px;
  box-shadow: 0 0 0 1px var(--tj-line); color: var(--tj-text); cursor: pointer;
  transition: box-shadow .15s;
}

/* Sidebar ringkasan: pindah KANAN di desktop (kontrak O6) — kolom pertama
   warisan dipindah lewat order flex/grid, markup tidak berubah. */
@media (min-width: 768px) {
  .tema-2026 .grid.grid-cols-3 > .col-span-3.md\:col-span-1 { order: 2; }
  .tema-2026 .grid.grid-cols-3 > .col-span-3.md\:col-span-2 { order: 1; }
}
/* Tombol Pesan Sekarang! → resep Kumo oranye, 40px (kontrak). */
.tema-2026 #orderr {
  background: linear-gradient(to bottom, color-mix(in oklch, var(--tj-cta), white 15%), var(--tj-cta)) !important;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--tj-cta), black 12%),
              inset 0 1px 0 rgba(255, 255, 255, .28), 0 1px 2px rgba(0, 0, 0, .5) !important;
  border-radius: 999px !important; height: 40px; font-size: 14px !important; font-weight: 600;
}
/* Kotak "Belum ada item produk yang dipilih" → putus-putus netral (kontrak O6). */
.tema-2026 .bg-yellow-50, .tema-2026 [class*="bg-yellow"] {
  background: transparent !important;
  border: 1.5px dashed var(--tj-line) !important; border-radius: 11px;
}
.tema-2026 .text-yellow-700 { color: var(--tj-muted) !important; }

/* FAQ (kontrak O7) & seksi bawah. */
.tema-2026 #faqAccordion .card { margin-bottom: 8px; }
.tema-2026 #faqAccordion .card-header { background: transparent; border: 0; }
.tema-2026 #faqAccordion button { color: var(--tj-text); font-weight: 600; }
.tema-2026 .tj-chip-lama { display: none; }
/* Gradien .bg-gradient Bootstrap di label nominal menodai warna kartu —
   matikan; keadaan terpilih cukup ring oranye. */
.tema-2026 .list-group .list-group-item.bg-gradient,
.tema-2026 .list-group1 .list-group-item.bg-gradient { background-image: none !important; }
/* Strip pratinjau logo metode bayar: warisan putih terang — jadi gelap,
   logo tetap terbaca di atas chip putih kecil masing-masing. */
.tema-2026 .short-payment-support-info {
  background: #10121D !important;
  border-top: 1px solid var(--tj-line);
}
.tema-2026 .short-payment-support-info img {
  background: #fff; border-radius: 4px; padding: 2px 4px; height: 20px !important; width: auto;
}
/* Tombol Pakai Voucher merah warisan → sekunder tema. */
.tema-2026 .btn-voucher {
  background: var(--tj-surface-2) !important; color: var(--tj-text) !important;
  border-radius: 10px !important;
  box-shadow: 0 0 0 1px var(--tj-line), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Kartu nominal biru warisan: order-styles.css menyetel background #0d3196
   lewat selektor input+label yang lebih spesifik — ditimpa setara + penting. */
.tema-2026 .list-group input[type="radio"] + .list-group-item {
  background-color: var(--tj-surface-2) !important;
  color: var(--tj-text) !important;
  border: 0 !important;
}
.tema-2026 .list-group input[type="radio"]:checked + .list-group-item {
  background: color-mix(in srgb, var(--tj-cta) 9%, var(--tj-surface-2)) !important;
  color: var(--tj-text) !important;
  box-shadow: 0 0 0 2px var(--tj-cta);
}
.tema-2026 .list-group input[type="radio"]:checked + label .hayutopup-prod {
  color: var(--tj-text) !important;
}
.tema-2026 .list-group1 input[type="radio"] + .list-group-item {
  background-color: var(--tj-surface-2) !important;
  color: var(--tj-text) !important;
  border: 0 !important;
}
.tema-2026 .list-group1 input[type="radio"]:checked + .list-group-item {
  background: color-mix(in srgb, var(--tj-cta) 9%, var(--tj-surface-2)) !important;
  color: var(--tj-text) !important;
  box-shadow: 0 0 0 2px var(--tj-cta);
}
.tema-2026 .nominal-price { font-family: inherit !important; font-style: normal !important; }

/* PILIH REGION sesuai comp: label kecil kapital + pill SATU BARIS digeser,
   bukan membungkus tiga baris. Paket juga satu baris (selektor :has —
   peramban tanpa :has jatuh ke grid lama, tidak rusak). */
.tema-2026 #region-filter > p {
  font-size: 11px !important; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tj-muted) !important; margin-bottom: 7px;
}
.tema-2026 #region-filter .d-flex.flex-wrap {
  flex-wrap: nowrap !important; overflow-x: auto;
  scrollbar-width: none; padding-bottom: 4px;
}
/* Desktop: pil region MEMBUNGKUS, bukan baris geser — tanpa layar sentuh
   baris overflow tak bisa digeser dan pil ujung terpotong (veto pemilik). */
@media (min-width: 760px) {
  .tema-2026 #region-filter .d-flex.flex-wrap { flex-wrap: wrap !important; overflow-x: visible; row-gap: 6px; }
}
.tema-2026 #region-filter .d-flex.flex-wrap::-webkit-scrollbar { display: none; }
.tema-2026 .btn-region { flex-shrink: 0; white-space: nowrap; }
.tema-2026 .row:has(> div > .btn-category) {
  display: flex; flex-wrap: nowrap !important; overflow-x: auto;
  scrollbar-width: none; padding-bottom: 4px;
}
.tema-2026 .row:has(> div > .btn-category)::-webkit-scrollbar { display: none; }
.tema-2026 .row:has(> div > .btn-category) > [class*="col-"] {
  width: auto; flex: 0 0 auto; margin-bottom: 0 !important;
}
.tema-2026 .btn-category { white-space: nowrap; }

/* Tombol order ada DUA di markup warisan (utama .melll + sidebar #orderr) —
   kulit resep Kumo dipasang lewat kelas bersama .btn-order supaya keduanya kena. */
.tema-2026 .btn-order {
  background: linear-gradient(to bottom, color-mix(in oklch, var(--tj-cta), white 15%), var(--tj-cta)) !important;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--tj-cta), black 12%),
              inset 0 1px 0 rgba(255, 255, 255, .28), 0 1px 2px rgba(0, 0, 0, .5) !important;
  border-radius: 999px !important; height: 40px; font-size: 14px !important; font-weight: 600;
}
/* Tombol Pakai Voucher: duduk rapi DI DALAM pill input, tinggi pas, kanan 4px. */
.tema-2026 .btn-voucher {
  position: absolute !important;
  top: 4px !important; right: 4px !important; bottom: 4px !important;
  height: auto !important; padding: 0 14px !important;
  border-radius: 999px !important;
  display: inline-flex; align-items: center;
}

/* ══════════════════════════════════════════════════════════════════
   HALAMAN INVOICE (kontrak: comp-invoice-v7-KUNCI.html)
   ══════════════════════════════════════════════════════════════════ */

.tema-2026 .css-scrciq {
  background: var(--tj-surface) !important;
  border: 0; box-shadow: 0 0 0 1px var(--tj-line);
  border-radius: var(--tj-radius) !important;
  color: var(--tj-text);
}
/* Hitung mundur: kotak merah gradien + label BATAS PEMBAYARAN (kontrak I1). */
.tema-2026 .count-down {
  display: inline-flex !important; flex-direction: column; align-items: center;
  width: fit-content; max-width: 100%; margin: 8px auto 0;
  background: linear-gradient(to bottom, #D64545, #C22) !important;
  border-radius: 10px !important; padding: 7px 14px !important;
  font-weight: 800; font-size: 13.5px; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.tema-2026 .count-down::before { font-size: 9px; }
.tema-2026 .count-down::before {
  content: "BATAS PEMBAYARAN";
  font-size: 10px; font-weight: 600; letter-spacing: .08em; opacity: .85;
}
/* Ikon status SVG tergambar (kontrak I1) — pengganti gif warisan. */
.tema-2026 .tj-gif-lama { display: none !important; }
.tema-2026 .tj-ikon-status { display: flex; justify-content: center; margin-top: 10px; width: 100%; }
.tema-2026 .tj-ikon-status svg { width: 64px; height: 64px; display: block; }
.tema-2026 .tj-ikon-status .lingkar {
  fill: none; stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 176; stroke-dashoffset: 176;
  animation: tj-gambar .55s ease-out forwards;
}
.tema-2026 .tj-ikon-status .isi {
  fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: tj-gambar .4s ease-out .45s forwards;
}
@keyframes tj-gambar { to { stroke-dashoffset: 0; } }
.tema-2026 .tj-ik-sukses {
  animation: tj-lompat 2.4s cubic-bezier(.3, .1, .3, 1) .8s infinite;
  transform-origin: 50% 100%;
}
@keyframes tj-lompat {
  0% { transform: translateY(0) scale(1, 1); }
  8% { transform: translateY(0) scale(1.12, .88); }
  28% { transform: translateY(-16px) scale(.94, 1.08) rotate(6deg); }
  46% { transform: translateY(0) scale(1.1, .9) rotate(0); }
  58% { transform: translateY(-6px) scale(.98, 1.02); }
  70% { transform: translateY(0) scale(1.04, .96); }
  78%, 100% { transform: translateY(0) scale(1, 1); }
}
.tema-2026 .tj-ik-batal svg { animation: tj-goyang 2.6s ease-in-out .8s infinite; }
@keyframes tj-goyang {
  0%, 100% { transform: translateX(0); }
  4% { transform: translateX(-7px) rotate(-4deg); }
  8% { transform: translateX(6px) rotate(3deg); }
  12% { transform: translateX(-4px) rotate(-2deg); }
  16% { transform: translateX(2px) rotate(1deg); }
  20% { transform: translateX(0); }
}
.tema-2026 .tj-ik-proses { animation: tj-putar 1.1s linear infinite; }
.tema-2026 .tj-ik-proses .jejak { fill: none; stroke: var(--tj-line); stroke-width: 5; }
.tema-2026 .tj-ik-proses .busur {
  fill: none; stroke: var(--tj-brand-lite); stroke-width: 5;
  stroke-linecap: round; stroke-dasharray: 132 176;
}
@keyframes tj-putar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .tema-2026 .tj-ik-sukses, .tema-2026 .tj-ik-batal, .tema-2026 .tj-ik-proses { animation: none; }
}
/* QR & kode bayar (kontrak I2). */
.tema-2026 .qrCode {
  background: var(--tj-surface) !important;
  box-shadow: 0 0 0 1px var(--tj-line); border-radius: var(--tj-radius);
}
.tema-2026 .qrCode img { background: #fff; border-radius: 12px; padding: 8px; }
.tema-2026 .qrCode kbd {
  background: #10121D !important; color: var(--tj-text);
  border-radius: 10px; box-shadow: 0 0 0 1px var(--tj-line);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 6px 12px;
}

/* Invoice: RESTRUKTUR layout ke comp (satu kolom 760px, kartu bertumpuk,
   baris rincian label-kiri nilai-kanan) — markup warisan tetap. */
.tema-2026 main.my-4 > .mx-auto { max-width: 760px !important; padding-left: 14px; padding-right: 14px; }
.tema-2026 .min-w-0.flex-1 { display: block !important; }         /* matikan xl:flex dua kolom */
.tema-2026 .lg\:w-80 { width: 100% !important; }                  /* kartu status selebar kolom */
.tema-2026 .grow.gap-8 { display: block !important; }
/* Kartu 4 pasang (Tanggal/Nomor/Metode/Status): dari 4 kolom sejajar
   menjadi baris-baris comp. */
.tema-2026 .css-scrciq.justify-between {
  flex-direction: column !important; gap: 0 !important; padding: 14px !important;
}
.tema-2026 .css-scrciq.justify-between > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--tj-line);
}
.tema-2026 .css-scrciq.justify-between > div:last-child { border-bottom: 0; }
.tema-2026 .css-scrciq.justify-between h5.font-medium {
  color: var(--tj-muted); font-size: 12.5px; margin: 0;
}
.tema-2026 .css-scrciq.justify-between h5.font-bold {
  font-size: 12.5px; margin: 0; text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Kepala produk: h1 raksasa warisan → baris produk kompak. */
.tema-2026 .css-scrciq .text-xl h1 { font-size: 16px; font-weight: 700; }
.tema-2026 .css-scrciq .text-xl img { width: 44px !important; height: 44px !important; }
/* Baris <dl> Detail: label kiri muted, nilai kanan tebal. */
.tema-2026 .css-scrciq dl > div {
  display: flex !important; justify-content: space-between; gap: 12px;
  padding: 9px 0 !important; border-bottom: 1px solid var(--tj-line);
}
.tema-2026 .css-scrciq dl > div:last-child { border-bottom: 0; }
.tema-2026 .css-scrciq dl dt { color: var(--tj-muted); font-size: 12.5px; }
.tema-2026 .css-scrciq dl dd { font-size: 12.5px; text-align: right; margin: 0; }
.tema-2026 .css-scrciq dl h1 { font-size: 13px; }
.tema-2026 .border-\[\#626274\] { border-color: var(--tj-line) !important; }
/* Chip status warisan → bentuk chip comp. */
.tema-2026 .css-scrciq .bg-yellow-500 { background: rgba(245,197,24,.14) !important; color: #F5C518 !important; font-weight: 800; border-radius: 6px; }
.tema-2026 .css-scrciq .bg-sky-600 { background: rgba(139,143,242,.16) !important; color: var(--tj-brand-lite) !important; font-weight: 800; border-radius: 6px; }
.tema-2026 .css-scrciq .bg-green-800 { background: rgba(52,199,123,.15) !important; color: var(--tj-ok) !important; font-weight: 800; border-radius: 6px; }
.tema-2026 .css-scrciq .text-danger { background: rgba(220,60,60,.14) !important; color: #E66 !important; font-weight: 800; border-radius: 6px; padding: 4px 8px; }
/* Baris aksi comp. */
.tema-2026 .tj-aksi-invoice { display: flex; gap: 8px; margin-top: 14px; }
.tema-2026 .tj-aksi-invoice .tj-btn { flex: 1; }
/* Modal testimoni (muncul otomatis saat Success) — ikut tema gelap. */
.tema-2026 .modal-content {
  background: var(--tj-surface) !important; color: var(--tj-text) !important;
  border: 0; box-shadow: 0 0 0 1px var(--tj-line), 0 18px 50px rgba(0, 0, 0, .55);
  border-radius: 16px;
}
.tema-2026 .modal-content textarea, .tema-2026 .modal-content input[type="text"] {
  background: #10121D; color: var(--tj-text); border: 0;
  box-shadow: 0 0 0 1px var(--tj-line); border-radius: 10px;
}
.tema-2026 .modal-header, .tema-2026 .modal-footer { border-color: var(--tj-line); }
.tema-2026 .modal-footer .btn, .tema-2026 .modal-content button[type="submit"] {
  background: linear-gradient(to bottom, color-mix(in oklch, var(--tj-cta), white 15%), var(--tj-cta)) !important;
  color: #fff !important; border: 0; border-radius: 999px;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--tj-cta), black 12%), inset 0 1px 0 rgba(255, 255, 255, .28);
}

/* Ikon status: paksa flex menang atas apa pun; goyang dianimasikan di svg. */
.tema-2026 .tj-ikon-status { display: flex !important; }
/* Total Pembayaran: harga oranye tebal tabular + tombol Salin pill kecil. */
.tema-2026 .total, .tema-2026 .total * {
  color: var(--tj-cta) !important;
  -webkit-text-fill-color: var(--tj-cta) !important; /* warisan pakai text-fill merah */
  font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums;
}
.tema-2026 .tj-salin-kecil {
  border: 0; cursor: pointer; margin-left: 8px; vertical-align: 2px;
  height: 26px; padding: 0 12px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 11px !important; font-weight: 700;
  line-height: 1 !important; color: var(--tj-text) !important;
  -webkit-text-fill-color: var(--tj-text) !important; /* warisan menyetel fill transparan */
  background: var(--tj-surface-2);
  box-shadow: 0 0 0 1px var(--tj-line), inset 0 1px 0 rgba(255,255,255,.05);
}
/* Kerapatan kartu rincian: padding warisan p-6/pb-8 dirapatkan ke comp. */
.tema-2026 .css-scrciq dl { padding: 4px 14px !important; border-bottom: 1px solid var(--tj-line) !important; }
.tema-2026 .css-scrciq .flex.justify-between.p-4 { padding: 12px 14px !important; }
.tema-2026 .css-scrciq .items-center.gap-2 { padding: 12px 14px !important; }
.tema-2026 .css-scrciq dl h1 { color: var(--tj-muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }

/* Kartu Rincian Pesanan tunggal (kontrak comp-invoice v7 I3). */
.tema-2026 .tj-rincian { padding: 0 !important; overflow: hidden; }
.tema-2026 .tj-rincian-judul {
  margin: 0; padding: 11px 14px; font-size: 14px; font-weight: 700;
  background: rgba(255, 255, 255, .035); border-bottom: 1px solid var(--tj-line);
}
.tema-2026 .tj-rincian-isi { padding: 4px 14px 10px; }
.tema-2026 .tj-baris {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--tj-line); font-size: 12.5px;
}
.tema-2026 .tj-baris:last-child { border-bottom: 0; }
.tema-2026 .tj-baris .k { color: var(--tj-muted); flex-shrink: 0; }
.tema-2026 .tj-baris b { font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.tema-2026 .tj-baris-total .k { color: var(--tj-text); font-weight: 700; }
.tema-2026 .chip-tj {
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
  padding: 3px 9px; border-radius: 6px;
}
.tema-2026 .chip-tj-kuning { background: rgba(245, 197, 24, .14); color: #F5C518; }
.tema-2026 .chip-tj-biru { background: rgba(139, 143, 242, .18); color: var(--tj-brand-lite); }
.tema-2026 .chip-tj-hijau { background: rgba(52, 199, 123, .16); color: var(--tj-ok); }
.tema-2026 .chip-tj-merah { background: rgba(220, 60, 60, .15); color: #E66; }
/* Aksi di bawah QR (kontrak I2): tombol unduh + teks bantu. */
.tema-2026 .tj-qr-aksi { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 12px; }
.tema-2026 .tj-qr-bantu { font-size: 11.5px; color: var(--tj-muted) !important; margin: 0; text-align: center; }

/* ══════════════════════════════════════════════════════════════════
   HALAMAN /AKUN (kontrak: comp-akun-v7-KUNCI.html)
   Sistem mk-* dipertahankan; token dipetakan ke palet tema, kartu
   dirombak ke gaya jbalwikobra, bar mk & navbawah lokal diganti global.
   ══════════════════════════════════════════════════════════════════ */

body.tema-2026.mk-page {
  --mk-bg: var(--tj-bg);
  --mk-surface: var(--tj-surface);
  --mk-surface-quiet: var(--tj-surface);
  --mk-surface-control: var(--tj-surface-2);
  --mk-surface-neutral: var(--tj-surface-2);
  --mk-surface-input: #10121D;
  --mk-surface-nav: var(--tj-surface);
  --mk-surface-empty: var(--tj-surface);
  --mk-border: 1px solid var(--tj-line);
  --mk-border-quiet: 1px solid var(--tj-line);
  --mk-border-control: 1px solid var(--tj-line);
  --mk-accent: var(--tj-cta);
  --mk-accent-fill: linear-gradient(180deg, #f59a3d, var(--tj-cta));
  --mk-accent-fill-hover: linear-gradient(180deg, #f8a955, #f28c22);
  --mk-accent-fill-active: linear-gradient(180deg, var(--tj-cta), #d97612);
  --mk-accent-border: color-mix(in oklch, var(--tj-cta), black 12%);
  --mk-on-accent: #fff;
  --mk-accent-text: #f5a44c;
  --mk-accent-text-soft: #f5b06a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Token font mk ikut dipetakan: banyak elemen mk memakai shorthand
     `font: ... var(--mk-font)` yang menang atas family di body — Inter
     warisan itulah "font masih beda". */
  --mk-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* Bar header mk lokal digantikan tj-header global. */
.tema-2026 .mk-hero__bar { display: none; }
/* Hero: glow oranye comp di atas dasar tema. */
.tema-2026 .mk-hero {
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(240, 133, 25, .22), rgba(11, 12, 20, 0) 60%),
    linear-gradient(180deg, var(--tj-surface-2), var(--tj-surface));
}

/* ---- Kartu gaya jbalwikobra (kontrak A3) ---- */
.tema-2026 .mk-card { border-radius: 14px; }
.tema-2026 .mk-card__media { margin: 8px; border-radius: 10px; overflow: hidden; }
/* 4:5, alasan sama dengan .etalase-card .ph di §etalase akun: itu ukuran
   template unggahan pemilik. Sampai 14 Agu baris ini 3/4 sementara `.mk-ph`
   (placeholder) sudah 4/5 di §detail — jadi foto dan kotak kosongnya berbeda
   rasio di komponen yang sama, persis percabangan yang dilarang komentar
   mk-marketplace.css §24. */
.tema-2026 .mk-card__media img, .tema-2026 .mk-ph { aspect-ratio: 4 / 5; object-fit: contain; background: #10121D; }
/* Chip nama game nempel foto (pojok kanan-atas). */
.tema-2026 .tj-chip-game {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  font-size: 9px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(8, 9, 15, .82); color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14);
}
/* Chip tier berwarna per tingkat (kontrak: premium emas, reguler abu,
   pelajar indigo) — menimpa mk-badge--tint satu warna. */
.tema-2026 .mk-badge--tier-premium {
  color: #F5C518 !important; background: rgba(245, 197, 24, .09) !important;
  box-shadow: 0 0 0 1px currentColor; border: 0 !important;
}
.tema-2026 .mk-badge--tier-reguler {
  color: var(--tj-muted) !important; background: rgba(255, 255, 255, .05) !important;
  box-shadow: 0 0 0 1px currentColor; border: 0 !important;
}
.tema-2026 .mk-badge--tier-pelajar {
  color: var(--tj-brand-lite) !important;
  background: color-mix(in srgb, var(--tj-brand-lite) 12%, transparent) !important;
  box-shadow: 0 0 0 1px currentColor; border: 0 !important;
}
/* Terjual: selubung gelap + pill hitam (mk-habis sudah mirip — pertegas). */
.tema-2026 .mk-habis__selubung { background: rgba(5, 6, 10, .55); }
.tema-2026 .mk-habis__label {
  background: #08090F; color: #fff; border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
  font-weight: 800; letter-spacing: .1em;
}
/* Navbawah mk lokal tak dipakai lagi (diganti bnav global) — kalau ada
   sisa include di halaman turunan, sembunyikan. */
.tema-2026 .mk-navbawah { display: none !important; }

/* /akun — kepala seksi & tata comp (kontrak A2-A5), menimpa gaya mk lama. */
.tema-2026 .mk-section__head h2 {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px !important; font-weight: 700; letter-spacing: .02em !important;
  text-transform: uppercase;
}
.tema-2026 .mk-section__head h2::before {
  content: ""; width: 8px; height: 8px; border-radius: 99px;
  background: var(--tj-cta); flex-shrink: 0;
}
.tema-2026 .mk-section__more { color: var(--tj-brand-lite); font-weight: 600; }
/* Ubin layanan: kotak ikon indigo membulat (kontrak A2). */
.tema-2026 .mk-action__ikon {
  width: 36px; height: 36px; border-radius: 10px;
  background: color-mix(in srgb, var(--tj-brand-lite) 14%, var(--tj-surface-2)) !important;
  color: var(--tj-brand-lite) !important;
  display: flex; align-items: center; justify-content: center;
  border: 0 !important; box-shadow: none !important;
}
/* Stok di HP: baris geser horizontal 45% + snap (kontrak A3) — bukan grid 2 kolom. */
@media (max-width: 759px) {
  .tema-2026 #stok .mk-grid, .tema-2026 #riwayat .mk-grid, .tema-2026 #titipan .mk-grid {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; padding-bottom: 4px; gap: 10px;
  }
  .tema-2026 #stok .mk-grid::-webkit-scrollbar,
  .tema-2026 #riwayat .mk-grid::-webkit-scrollbar,
  .tema-2026 #titipan .mk-grid::-webkit-scrollbar { display: none; }
  .tema-2026 #stok .mk-grid > *, .tema-2026 #riwayat .mk-grid > *, .tema-2026 #titipan .mk-grid > * {
    flex: 0 0 45%; scroll-snap-align: start;
  }
}
/* Keadaan kosong (rental/stok): kotak putus-putus netral (kontrak A4). */
.tema-2026 .mk-kosong {
  background: transparent !important;
  border: 1.5px dashed var(--tj-line) !important;
  border-radius: var(--tj-radius) !important;
  box-shadow: none !important;
  text-align: center; color: var(--tj-muted) !important;
}
/* Chip filter game (Semua/FF) ikut pill tema: aktif indigo, bukan oranye blok. */
.tema-2026 .mk-chip {
  border-radius: 999px !important; background: var(--tj-surface-2) !important;
  color: var(--tj-muted) !important; border: 0 !important;
  box-shadow: 0 0 0 1px var(--tj-line) !important; font-weight: 600;
}
.tema-2026 .mk-chip.is-aktif {
  color: #fff !important;
  background: linear-gradient(to bottom, color-mix(in oklch, var(--tj-brand), white 18%), var(--tj-brand)) !important;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--tj-brand), black 15%), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}

/* /akun paritas comp tahap 2 (umpan balik "masih beda"). */
/* Hero jadi KARTU membulat ber-inset, bukan blok full-bleed. */
.tema-2026 .mk-hero {
  margin: 14px 14px 0; border-radius: 18px;
  border: 1px solid var(--tj-line); overflow: hidden;
}
/* Kartu stok: comp cuma chip tier + judul + harga — spek & badge garansi
   di badan kartu disembunyikan (tetap ada di halaman detail). */
.tema-2026 .mk-card__spek { display: none !important; }
.tema-2026 .mk-card__body .mk-badge--tint:not([class*="mk-badge--tier-"]) { display: none !important; }
/* Badge tier di ATAS foto ikut disembunyikan — comp menaruhnya di badan. */
.tema-2026 .mk-card__media .mk-badge--tint { display: none !important; }
/* Harga: oranye tebal (comp), coret utk terjual sudah dari mk. */
.tema-2026 .mk-card__price { color: var(--tj-cta) !important; font-weight: 800 !important; }
.tema-2026 .mk-card__price--lepas { color: var(--tj-muted) !important; text-decoration: line-through; font-weight: 600 !important; }
/* Tanggal di selubung terjual (kontrak A5). */
.tema-2026 .tj-habis-tanggal { color: rgba(255, 255, 255, .75); font-size: 10px; margin-top: 5px; display: block; text-align: center; }
/* Tombol titip rental: sekunder tema (comp), bukan hijau WA. */
.tema-2026 .mk-kosong .mk-btn--wa {
  background: var(--tj-surface-2) !important; color: var(--tj-text) !important;
  border: 0 !important; border-radius: 999px !important;
  box-shadow: 0 0 0 1px var(--tj-line), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

/* /akun paritas comp tahap 3 (sanding desktop+HP pemilik). */
/* Chips pintasan kategori: comp tidak memilikinya di hub — sembunyikan. */
.tema-2026 .mk-chips { display: none !important; }
/* Ubin: semua setara — kartu lebar Top Up jadi ubin biasa (ikut grid),
   tanpa aksen ungu & tanpa panah; ikon SERAGAM indigo (bukan warna-warni). */
.tema-2026 .mk-action--lebar {
  grid-column: auto !important;
  background: var(--tj-surface) !important;
  border: 1px solid var(--tj-line) !important;
}
.tema-2026 .mk-action--lebar > svg:last-child { display: none; } /* panah */
/* Ubin comp: ikon kolom kiri (merentang 2 baris), judul & sub BERTUMPUK di
   kanan — bukan flex sebaris yang membuat teks berdesakan. */
.tema-2026 .mk-action {
  display: grid !important;
  grid-template-columns: auto 1fr;
  column-gap: 11px; row-gap: 1px;
  align-items: center; align-content: center;
}
.tema-2026 .mk-action__ikon { grid-row: 1 / 3; margin: 0 !important; }
.tema-2026 .mk-action__title { grid-column: 2; margin-top: 0 !important; font-weight: 700; font-size: 13px !important; line-height: 1.25; }
.tema-2026 .mk-action__sub { grid-column: 2; line-height: 1.3; }
.tema-2026 .mk-action svg { color: var(--tj-brand-lite) !important; }
.tema-2026 .mk-action__ikon,
.tema-2026 .mk-action--lebar .mk-action__ikon {
  background: color-mix(in srgb, var(--tj-brand-lite) 14%, var(--tj-surface-2)) !important;
  color: var(--tj-brand-lite) !important;
}
@media (min-width: 900px) {
  .tema-2026 .mk-actions { grid-template-columns: repeat(4, 1fr); }
}
/* Stok: sel ajakan putus-putus & tautan "Semua stok" diganti tombol oranye
   tengah (kontrak A3). */
.tema-2026 #stok .mk-kosong--sel { display: none !important; }
.tema-2026 .tj-stok-cta { display: flex; justify-content: center; margin-top: 24px; margin-bottom: 24px; }
.tema-2026 #riwayat { margin-bottom: 56px; }
@media (min-width: 1000px) {
  .tema-2026 #stok .mk-grid, .tema-2026 #riwayat .mk-grid { grid-template-columns: repeat(4, 1fr); }
}
/* Chip tier badan kartu grid: hanya hidup di tema (di luar tema disembunyikan,
   badge pojok foto lama yang tampil). */
.tj-tier-body { display: none !important; }
.tema-2026 .tj-tier-body { display: flex !important; margin-bottom: 6px; }
.tema-2026 .tj-tier-body .mk-badge--tint[class*="mk-badge--tier-"] { display: inline-flex !important; }
/* /akun: kolom cari navbar disembunyikan — cari cukup satu di hero
   (kontrak comp-akun v3, keputusan pemilik "biar gak bingung 2 search bar"). */
.tema-2026.mk-page .tj-cari { display: none; }
.tema-2026.mk-page .tj-nav { justify-content: space-between; }

/* LEBAR HALAMAN /akun = beranda = comp (1080px).
   mk-marketplace membatasi BODY 720/960px di desktop — akar "lebar beda".
   Batas body dilepas; tiap blok isi level-atas diberi kontainer 1080
   terpusat. Header & bottom-nav tetap full-bleed (garisnya menyentuh tepi,
   isinya sudah pakai .tj-wrap sendiri). */
body.tema-2026.mk-page { max-width: none !important; }
/* Blanket 1080 pada anak body DIBUANG (10 Agu malam): seluruh konten halaman
   ternyata bersarang di <main> tunggal, jadi blanket itu mengkotakkan SATU
   halaman penuh. Hub kini full tj — tiap seksi membawa .tj-wrap sendiri. */

/* ══════════════════════════════════════════════════════════════════
   HUB /AKUN v2 — porting VERBATIM dari comp-akun-v7 (bedah dari 0,
   perintah pemilik 10 Agu). Kelas ak-* dan tj-stok-* menggantikan mk-* di hub.
   ══════════════════════════════════════════════════════════════════ */

.tema-2026 .ak-hero__body { display: flex; gap: 12px; align-items: center; }
.tema-2026 .ak-hero__copy { min-width: 0; flex: 1; }
.tema-2026 .ak-hero h1 { font-size: 25px; font-weight: 800; line-height: 1.14; margin: 0; }
.tema-2026 .ak-hero p { font-size: 12.5px; color: var(--tj-muted); margin: 6px 0 0; }
.tema-2026 .ak-maskot { width: 132px; height: auto; flex: none; margin: -6px -6px -14px 0;
  filter: drop-shadow(0 6px 14px rgba(6, 7, 14, .55)); }
.tema-2026 .ak-search {
  display: flex; margin-top: 15px; border-radius: 12px; overflow: hidden;
  background: #10121D;
  box-shadow: 0 0 0 1px var(--tj-line), inset 0 1px 2px rgba(0, 0, 0, .35);
}
.tema-2026 .ak-search input {
  flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 13.5px;
  color: var(--tj-text); padding: 12px; outline: none;
}
.tema-2026 .ak-search input::placeholder { color: var(--tj-muted); }
.tema-2026 .ak-search button {
  margin: 3px; border: 0; border-radius: 9px; padding: 0 16px; font: inherit; font-size: 13px; font-weight: 600;
  color: #fff; cursor: pointer;
  background: linear-gradient(to bottom, color-mix(in oklch, var(--tj-cta), white 15%), var(--tj-cta));
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--tj-cta), black 12%), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.tema-2026 .ak-facts {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px;
  font-size: 9.5px; font-weight: 600; letter-spacing: .08em; color: var(--tj-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.tema-2026 .tj-sec-samping { margin-left: auto; font-size: 11.5px; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--tj-muted); }
.tema-2026 .tj-sec-samping a { color: var(--tj-brand-lite); font-weight: 600; }
.tema-2026 .tj-sec-lead { color: var(--tj-muted); font-size: 13px; margin: -4px 0 12px; }

.tema-2026 .aksi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 760px) { .tema-2026 .aksi-grid { grid-template-columns: repeat(4, 1fr); } }
.tema-2026 .ubin {
  display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: var(--tj-radius);
  background: var(--tj-surface); box-shadow: 0 0 0 1px var(--tj-line);
  text-decoration: none; color: var(--tj-text);
}
.tema-2026 .ubin:hover { box-shadow: 0 0 0 1px var(--tj-brand-lite); color: var(--tj-text); }
.tema-2026 .ubin .ic {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--tj-brand-lite) 14%, var(--tj-surface-2));
  color: var(--tj-brand-lite);
}
.tema-2026 .ubin .ic svg { width: 18px; height: 18px; }
.tema-2026 .ubin b { display: block; font-size: 12.5px; line-height: 1.25; }
.tema-2026 .ubin small { display: block; font-size: 10.5px; color: var(--tj-muted); margin-top: 1px; line-height: 1.3; }

/* Ubin "Jual Akun" sebagai pemilih admin (18 Agu 2026). `<details>` native,
   nol JavaScript — lihat komentar di components/akun/index.blade.php.

   `display:block` MEMBATALKAN `display:flex` milik `.ubin`: pada <details>,
   flex menaruh summary dan isi berdampingan alih-alih bertumpuk. Flexnya
   pindah ke summary, yang isinya memang sederet.

   Tiap baris menyebut background DAN color secara eksplisit. Aturan tema yang
   cuma menyebut sebagian properti sudah lima kali membuat Bootstrap mengisi
   sisanya dengan nilai tema TERANG, dan tidak pernah terlihat di pratinjau. */
.tema-2026 .ubin-pilih { display: block; cursor: pointer; }
.tema-2026 .ubin-pilih > summary { display: flex; gap: 10px; align-items: center; list-style: none; }
.tema-2026 .ubin-pilih > summary::-webkit-details-marker { display: none; }
.tema-2026 .ubin-pilih-tanda { margin-left: auto; flex-shrink: 0; color: var(--tj-muted); display: flex; }
.tema-2026 .ubin-pilih-tanda svg { width: 16px; height: 16px; transition: transform .15s ease; }
.tema-2026 .ubin-pilih[open] .ubin-pilih-tanda svg { transform: rotate(180deg); }
.tema-2026 .ubin-pilih-isi { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.tema-2026 .ubin-pilih-baris {
  display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 10px;
  background: var(--tj-surface-2); color: var(--tj-text); text-decoration: none;
}
.tema-2026 .ubin-pilih-baris:hover { box-shadow: 0 0 0 1px var(--tj-brand-lite); color: var(--tj-text); }
.tema-2026 .ubin-pilih-baris .ava { width: 32px; height: 32px; font-size: 12px; }
.tema-2026 .ubin-pilih-teks { min-width: 0; }

/* Logo admin (18 Agu 2026). `.ava` aslinya kotak inisial dengan gradien merek;
   sebagai <img> ia butuh latar netral dan `contain` supaya logo BERTULISAN
   tidak terpotong — aturan yang sama sudah dipakai `.konsultan img`. */
.tema-2026 img.ava { object-fit: contain; background: #0B0C14; }
.tema-2026 .ubin-pilih-baris b { display: block; font-size: 12.5px; line-height: 1.25; }
.tema-2026 .ubin-pilih-baris small { display: block; font-size: 10.5px; color: var(--tj-muted); margin-top: 1px; line-height: 1.3; }
.tema-2026 .ubin-pilih-cta {
  margin-left: auto; flex-shrink: 0; font-size: 11px; font-weight: 700;
  padding: 5px 10px; border-radius: 99px;
  background: var(--tj-brand); color: #fff;
}

.tema-2026 .tj-stok-grid {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 4px;
}
.tema-2026 .tj-stok-grid::-webkit-scrollbar { display: none; }
@media (min-width: 760px) {
  .tema-2026 .tj-stok-grid { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; }
}
/* Katalog Penuh (Stok Ready & Daftar Riwayat Terjual) menurun ke bawah:
   - Di HP (< 760px): grid 2 kolom menurun ke bawah (layar pertama memuat 4 kartu pas 2x2)
   - Di PC (>= 760px): grid 4 kolom ke samping */
.tema-2026 .seksi-stok .tj-stok-grid:not(.tj-stok-slider),
.tema-2026 #riwayat-semua .tj-stok-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px;
  overflow-x: visible !important;
  padding-bottom: 0;
}
.tema-2026 .seksi-stok .tj-stok-grid:not(.tj-stok-slider) .tj-stok-card,
.tema-2026 #riwayat-semua .tj-stok-grid .tj-stok-card {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
}
@media (min-width: 760px) {
  .tema-2026 .seksi-stok .tj-stok-grid:not(.tj-stok-slider),
  .tema-2026 #riwayat-semua .tj-stok-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px;
  }
}
/* Slider 4 kartu otomatis untuk showcase (Stok Baru, Rental, Titipan, Riwayat Penjualan) */
.tema-2026 .tj-stok-slider {
  display: flex !important;
  gap: 12px;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding-bottom: 6px;
}
.tema-2026 .tj-stok-slider::-webkit-scrollbar {
  display: none !important;
}
.tema-2026 .tj-stok-slider .tj-stok-card {
  flex: 0 0 46%;
  max-width: 46%;
  scroll-snap-align: start;
}
@media (min-width: 600px) {
  .tema-2026 .tj-stok-slider .tj-stok-card {
    flex: 0 0 calc((100% - 24px) / 3);
    max-width: calc((100% - 24px) / 3);
  }
}
@media (min-width: 760px) {
  .tema-2026 .tj-stok-grid.tj-stok-slider,
  .tema-2026 .tj-stok-slider {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
  }
  .tema-2026 .tj-stok-slider .tj-stok-card {
    flex: 0 0 calc((100% - 36px) / 4) !important;
    max-width: calc((100% - 36px) / 4) !important;
    scroll-snap-align: start;
  }
}
/* Tombol navigasi panah di header seksi */
.tema-2026 .tj-slider-nav {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tema-2026 .tj-slider-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tj-surface-2, #141622);
  border: 1px solid var(--tj-line, rgba(255, 255, 255, .12));
  color: var(--tj-text, #fff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s ease;
  padding: 0;
  outline: none;
}
.tema-2026 .tj-slider-btn:hover {
  background: var(--tj-brand, #F08519);
  color: #fff;
  border-color: var(--tj-brand, #F08519);
  box-shadow: 0 0 10px rgba(240, 133, 25, .35);
}
.tema-2026 .tj-slider-btn:active {
  transform: scale(0.92);
}
.tema-2026 .tj-slider-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}
.tema-2026 .tj-stok-card {
  flex: 0 0 45%; scroll-snap-align: start;
  background: var(--tj-surface-2); border-radius: 14px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--tj-line); position: relative;
  text-decoration: none; color: var(--tj-text); display: block;
}
/* 4:5 — kartu ini yang dipakai SEMUA daftar akun (/akun, /akun/rental,
   halaman game, "akun serupa" di detail), jadi ia permukaan terbesar tempat
   rasio yang salah terlihat. Alasan angkanya: lihat .etalase-card .ph. */
.tema-2026 .tj-stok-card .ph {
  aspect-ratio: 4 / 5; position: relative; display: flex; align-items: center; justify-content: center;
  background: #10121D; margin: 8px; border-radius: 10px; overflow: hidden;
}
.tema-2026 .tj-stok-card .ph img { width: 100%; height: 100%; object-fit: contain; } /* tidak pernah dipotong */
.tema-2026 .tj-ph-kosong { color: var(--tj-muted); font-size: 11px; letter-spacing: .08em; }
.tema-2026 .tj-stok-card .bd { display: block; padding: 2px 12px 12px; }
.tema-2026 .tj-chip-baris { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 6px; }
.tema-2026 .chip-tier {
  display: inline-flex; width: fit-content; font-size: 9.5px; font-weight: 800; letter-spacing: .07em;
  padding: 3px 9px; border-radius: 6px; box-shadow: 0 0 0 1px currentColor;
}
.tema-2026 .tier-premium { color: #F5C518; background: rgba(245, 197, 24, .09); }
.tema-2026 .tier-reguler { color: var(--tj-muted); background: rgba(255, 255, 255, .05); }
.tema-2026 .tier-pelajar { color: var(--tj-brand-lite); background: color-mix(in srgb, var(--tj-brand-lite) 12%, transparent); }
.tema-2026 .tier-flash { color: var(--tj-cta); background: color-mix(in srgb, var(--tj-cta) 10%, transparent); }
.tema-2026 .tier-titipan { color: var(--tj-text); background: rgba(255, 255, 255, .06); }
.tema-2026 .tj-stok-card .ttl {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13px; font-weight: 700; line-height: 1.35; letter-spacing: .01em; min-height: 2.7em;
}
.tema-2026 .tj-stok-card .hrga {
  display: block; font-size: 13.5px; font-weight: 800; color: var(--tj-cta); margin-top: 7px;
  font-variant-numeric: tabular-nums;
}
.tema-2026 .tj-stok-card .hrga .awalan { color: var(--tj-muted); font-weight: 600; font-size: 11px; }
.tema-2026 .tj-stok-card .hrga .normal { color: var(--tj-muted); font-weight: 600; font-size: 11px; margin-left: 4px; }
.tema-2026 .tj-stok-card .hrga.coret { color: var(--tj-muted); text-decoration: line-through; font-weight: 600; }
.tema-2026 .tj-terjual .ph img { filter: grayscale(.9) brightness(.7); }
.tema-2026 .tj-selubung {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px; background: rgba(5, 6, 10, .55);
}
.tema-2026 .tj-selubung .pil {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; padding: 6px 14px; border-radius: 8px;
  background: #08090F; color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
}
.tema-2026 .tj-selubung small { font-size: 10px; color: rgba(255, 255, 255, .75); }
.tema-2026 .tj-kosong {
  border: 1.5px dashed var(--tj-line); border-radius: var(--tj-radius); padding: 20px 16px;
  text-align: center; font-size: 12.5px; color: var(--tj-muted);
}
.tema-2026 .tj-kosong b { color: var(--tj-text); }

/* dipindah ke ujung: rule ini misterius hilang dari CSSOM di posisi lama */
.tema-2026 .ak-hero {
  margin-top: 14px; border-radius: 18px; padding: 18px 16px; position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(240, 133, 25, .22), rgba(11, 12, 20, 0) 60%),
    linear-gradient(180deg, var(--tj-surface-2), var(--tj-surface));
  border: 1px solid var(--tj-line);
}

/* Footer /akun dirapikan (desktop & HP): jarak antar tautan warisan 44px
   lantai-sentuh + gap besar = kolom melompong. Padat ala comp. */
.tema-2026 .mk-footer .mk-stack { gap: 2px !important; }
.tema-2026 .mk-footer a.mk-muted {
  min-height: 32px !important; display: inline-flex; align-items: center;
  font-size: 12.5px;
}
.tema-2026 .mk-footer .mk-kicker { margin: 14px 0 4px !important; }
.tema-2026 .mk-footer .mk-grid { gap: 0 18px !important; align-items: start; }
.tema-2026 .mk-footer > .mk-section { padding-top: 18px; padding-bottom: 18px; }
.tema-2026 .mk-footer p.mk-muted { font-size: 12.5px; line-height: 1.6; }
@media (min-width: 760px) {
  .tema-2026 .mk-footer .mk-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

/* Footer tema 2026 (dibangun ulang dari 0 — bukan warisan mk). */
.tema-2026 .tj-footer {
  margin-top: 34px; border-top: 1px solid var(--tj-line);
  background: var(--tj-surface);
  padding: 22px 0 18px; font-size: 12.5px; color: var(--tj-muted);
}
.tema-2026 .tj-footer-logo {
  font-size: 16px; font-weight: 800; letter-spacing: -.01em;
  color: var(--tj-text); text-decoration: none;
}
.tema-2026 .tj-footer-logo span { color: var(--tj-cta); }
.tema-2026 .tj-footer-desk { max-width: 68ch; margin: 8px 0 0; line-height: 1.6; }
.tema-2026 .tj-footer-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; margin-top: 18px;
}
@media (min-width: 760px) { .tema-2026 .tj-footer-nav { grid-template-columns: repeat(4, 1fr); } }
.tema-2026 .tj-kicker {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tj-text); margin: 12px 0 6px;
}
.tema-2026 .tj-footer-tautan { display: flex; flex-direction: column; gap: 2px; }
.tema-2026 .tj-footer-tautan a {
  color: var(--tj-muted); text-decoration: none;
  min-height: 30px; display: inline-flex; align-items: center;
}
.tema-2026 .tj-footer-tautan a:hover { color: var(--tj-text); }
.tema-2026 .tj-footer-chip { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.tema-2026 .tj-btn-ikon {
  width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tj-surface-2); color: var(--tj-muted);
  box-shadow: 0 0 0 1px var(--tj-line); text-decoration: none;
}
.tema-2026 .tj-btn-ikon:hover { color: var(--tj-text); }
.tema-2026 .tj-footer-legal { margin: 6px 0 0; font-size: 12px; line-height: 1.6; }
/* mk-marketplace menyembunyikan svg di footer non-mk (footer:not(.mk-footer)
   svg display:none) — footer tj bukan mk, hidupkan lagi ikonnya. */
body.tema-2026.mk-body .tj-footer svg { display: inline-block !important; }
/* (spesifisitas dinaikkan: aturan mk `body.mk-body footer:not(.mk-footer) svg`
   ber-!important dgn (0,2,3) — versi awal (0,2,1) kalah) */
.tema-2026 .tj-footer-chip img { background: #f4f5f8 !important; }
.tema-2026 .tj-footer-logo img { background: transparent !important; }
/* Logo pembayaran footer utama di halaman mk: aturan mk lama menggelapkan
   plat putihnya (#252838 + opacity .85) karena dulu footer utama dianggap
   nyasar. Kini hub sah memakai footer utama — pulihkan plat putih persis
   beranda. */
/* Logo & gambar footer lain: pulihkan opacity, latar tetap transparan. */
body.tema-2026.mk-body footer:not(.mk-footer) img {
  background-color: transparent !important;
  opacity: 1 !important;
}
/* KHUSUS logo pembayaran (marquee): plat putih seperti beranda.
   Wajib SESUDAH aturan generik di atas — spesifisitas lebih tinggi
   plus urutan, supaya tidak ditimpa balik. */
body.tema-2026.mk-body footer:not(.mk-footer) marquee img {
  background-color: #f4f5f8 !important;
}

/* ══════════════════════════════════════════════════════════════════
   HALAMAN MASUK/DAFTAR (kontrak: comp-auth-v4-KUNCI.html)
   ══════════════════════════════════════════════════════════════════ */
.tema-2026 .auth-wrap { max-width: 420px; margin: 0 auto; padding: 0 14px; }
.tema-2026 .auth-card {
  margin-top: 22px; border-radius: 18px; padding: 20px 18px; position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(240, 133, 25, .16), rgba(11, 12, 20, 0) 60%),
    linear-gradient(180deg, var(--tj-surface-2), var(--tj-surface));
  border: 1px solid var(--tj-line);
}
.tema-2026 .auth-logo { display: flex; justify-content: center; margin-bottom: 14px; }
.tema-2026 .auth-logo img { height: 44px; width: auto; background: transparent; }
.tema-2026 .auth-tab {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 999px;
  background: #10121D; box-shadow: inset 0 0 0 1px var(--tj-line);
}
.tema-2026 .auth-tab a {
  border: 0; border-radius: 999px; height: 36px; font-size: 13px; font-weight: 700;
  color: var(--tj-muted); background: transparent; text-decoration: none;
  display: flex; align-items: center; justify-content: center;
}
.tema-2026 .auth-tab a.on {
  color: #fff;
  background: linear-gradient(to bottom, color-mix(in oklch, var(--tj-cta), white 15%), var(--tj-cta));
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--tj-cta), black 12%), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.tema-2026 .auth-sub { font-size: 12.5px; color: var(--tj-muted); text-align: center; margin: 14px 0 0; }
.tema-2026 .f-lbl { display: block; font-size: 12px; font-weight: 600; margin: 14px 0 6px; }
.tema-2026 .f-in { position: relative; display: flex; }
.tema-2026 .f-in input {
  flex: 1; min-width: 0; height: 44px; border-radius: 999px; border: 0; padding: 0 16px;
  font: inherit; font-size: 13.5px;
  background: #10121D; color: var(--tj-text);
  box-shadow: 0 0 0 1px var(--tj-line); transition: box-shadow .15s;
  -moz-appearance: textfield; appearance: textfield;
}
.tema-2026 .f-in input::-webkit-outer-spin-button,
.tema-2026 .f-in input::-webkit-inner-spin-button { -webkit-appearance: none; }
.tema-2026 .f-in input:focus { outline: 0; box-shadow: 0 0 0 2px var(--tj-cta); }
.tema-2026 .f-in input::placeholder { color: var(--tj-muted); }
.tema-2026 .f-in .mata {
  position: absolute; right: 6px; top: 6px; width: 32px; height: 32px; border-radius: 99px;
  border: 0; cursor: pointer; background: var(--tj-surface-2);
  box-shadow: 0 0 0 1px var(--tj-line); color: var(--tj-muted); font-size: 13px;
}
.tema-2026 .auth-baris {
  display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 12px;
}
.tema-2026 .auth-baris a { color: var(--tj-brand-lite); font-weight: 600; text-decoration: none; }
.tema-2026 .cek {
  display: flex; align-items: center; gap: 8px; color: var(--tj-muted);
  font-size: 12px; margin-top: 12px; cursor: pointer;
}
.tema-2026 .cek input { width: 16px; height: 16px; accent-color: var(--tj-cta); flex-shrink: 0; }
.tema-2026 .cek a { color: var(--tj-brand-lite); }
.tema-2026 .btn-auth { width: 100%; margin-top: 16px; height: 44px !important; font-size: 14.5px !important; }
.tema-2026 .auth-alt { text-align: center; font-size: 12.5px; color: var(--tj-muted); margin: 14px 0 0; }
.tema-2026 .auth-alt a { color: var(--tj-cta); font-weight: 700; text-decoration: none; }
.tema-2026 .wa-note {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 9px 12px;
  border-radius: 10px; font-size: 11.5px; line-height: 1.5; color: #D9C3A5;
  background: rgba(184, 155, 120, .08); border: 1px solid rgba(184, 155, 120, .25);
}

/* ══════════════════════════════════════════════════════════════════
   DASHBOARD USER (kontrak: comp-dashboard-v2-KUNCI.html)
   ══════════════════════════════════════════════════════════════════ */
.tema-2026 .db-wrap { max-width: 1080px; margin: 0 auto; padding: 0 14px; }
.tema-2026 .db-grid { display: grid; gap: 12px; margin-top: 14px; }
@media (min-width: 860px) { .tema-2026 .db-grid { grid-template-columns: 1fr 1fr; } }
.tema-2026 .db-card {
  border-radius: var(--tj-radius); padding: 14px;
  background: var(--tj-surface); box-shadow: 0 0 0 1px var(--tj-line);
}
.tema-2026 .db-profil { display: flex; gap: 12px; align-items: center; }
.tema-2026 .ava {
  width: 52px; height: 52px; border-radius: 99px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; color: #fff;
  background: linear-gradient(to bottom, color-mix(in oklch, var(--tj-brand), white 18%), var(--tj-brand));
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--tj-brand), black 15%), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.tema-2026 .db-profil b { font-size: 15px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tema-2026 .db-profil small { color: var(--tj-muted); font-size: 12px; }
.tema-2026 .db-saldo { display: flex; align-items: center; gap: 12px; }
.tema-2026 .db-saldo .rp { display: block; font-size: 24px; font-weight: 800; color: var(--tj-cta); font-variant-numeric: tabular-nums; }
.tema-2026 .db-saldo small { display: block; color: var(--tj-muted); font-size: 11.5px; margin-bottom: 2px; letter-spacing: .06em; }
.tema-2026 .upsell {
  margin-top: 12px; display: flex; gap: 10px; align-items: center;
  border-radius: var(--tj-radius); padding: 11px 14px; font-size: 12.5px;
  background: linear-gradient(to right, color-mix(in oklch, var(--tj-brand), var(--tj-bg) 65%), var(--tj-surface));
  border: 1px solid color-mix(in oklch, var(--tj-brand-lite), var(--tj-bg) 70%);
}
.tema-2026 .stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }
@media (min-width: 640px) { .tema-2026 .stat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .tema-2026 .stat-grid { grid-template-columns: repeat(6, 1fr); } }
.tema-2026 .stat { border-radius: 12px; padding: 11px 12px; background: var(--tj-surface); box-shadow: 0 0 0 1px var(--tj-line); }
.tema-2026 .stat b { font-size: 17px; font-variant-numeric: tabular-nums; display: block; }
.tema-2026 .stat small { font-size: 10.5px; color: var(--tj-muted); letter-spacing: .03em; }
.tema-2026 .stat.kuning b { color: #F5C518; }
.tema-2026 .stat.biru b { color: var(--tj-brand-lite); }
.tema-2026 .stat.hijau b { color: var(--tj-ok); }
.tema-2026 .stat.merah b { color: #E66; }
.tema-2026 .tbl-bungkus { overflow-x: auto; border-radius: var(--tj-radius); box-shadow: 0 0 0 1px var(--tj-line); }
.tema-2026 table.riwayat { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 680px; background: var(--tj-surface); margin: 0 !important; color: var(--tj-text); }
.tema-2026 .riwayat th {
  text-align: left; font-size: 10.5px; letter-spacing: .06em; color: var(--tj-muted);
  padding: 11px 12px; border-bottom: 1px solid var(--tj-line) !important;
  background: var(--tj-surface-2); text-transform: uppercase; border-top: 0 !important;
}
.tema-2026 .riwayat td {
  padding: 11px 12px; border-bottom: 1px solid var(--tj-line) !important;
  white-space: nowrap; border-top: 0 !important;
}
.tema-2026 .riwayat tr:last-child td { border-bottom: 0 !important; }
.tema-2026 .riwayat .inv { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--tj-brand-lite); }
.tema-2026 .riwayat .hg { font-weight: 700; color: var(--tj-cta); font-variant-numeric: tabular-nums; }
/* Kulit kontrol DataTables (cari/paging) ikut tema. */
.tema-2026 .dataTables_wrapper { color: var(--tj-muted); font-size: 12.5px; }
.tema-2026 .dataTables_wrapper .form-control,
.tema-2026 .dataTables_wrapper .form-select,
.tema-2026 .dataTables_wrapper input[type="search"] {
  background: #10121D; color: var(--tj-text); border: 0;
  box-shadow: 0 0 0 1px var(--tj-line); border-radius: 999px;
}
.tema-2026 .dataTables_wrapper .page-link {
  background: var(--tj-surface-2); color: var(--tj-text); border-color: transparent;
}
.tema-2026 .dataTables_wrapper .page-item.active .page-link {
  background: var(--tj-brand); color: #fff;
}
/* Alat tabel pesanan (cari + paginasi vanilla). */
.tema-2026 .tj-tabel-alat {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px;
}
.tema-2026 .tj-tabel-alat input[type="search"] {
  flex: 1; min-width: 160px; height: 36px; border-radius: 999px; border: 0; padding: 0 14px;
  font: inherit; font-size: 13px; background: #10121D; color: var(--tj-text);
  box-shadow: 0 0 0 1px var(--tj-line);
}
.tema-2026 .tj-tabel-alat input[type="search"]:focus { outline: 0; box-shadow: 0 0 0 2px var(--tj-cta); }
.tema-2026 #info-pesanan { font-size: 11.5px; color: var(--tj-muted); }
.tema-2026 .tj-tabel-nav { display: flex; gap: 6px; margin-left: auto; }
.tema-2026 .tj-tabel-nav button:disabled { opacity: .45; cursor: default; }
/* Dropdown akun navbar (auth). Baris menu ber-overflow-x:auto MENGKLIP
   menu absolut — di desktop baris tak butuh scroll, jadi overflow
   dilepas; di HP menu dipatok fixed di bawah header. */
@media (min-width: 760px) {
  .tema-2026 .tj-navrow2 .in { overflow: visible; }
}
@media (min-width: 760px) and (max-width: 899px) {
  .tema-2026 .tj-header { max-width: 100vw; overflow-x: clip; }
  .tema-2026 .tj-navrow2 .in { gap: 0; }
  .tema-2026 .tj-nlink { padding: 0 7px; font-size: 12px; gap: 4px; }
  .tema-2026 .tj-nlink svg { width: 13px; height: 13px; }
  .tema-2026 .tj-masuk-daftar { display: inline-flex; gap: 4px; flex-shrink: 0; }
  .tema-2026 .tj-masuk-daftar .tj-btn-sm { padding: 4px 8px; font-size: 12px; }
}
.tema-2026 .tj-menu-user { position: relative; }
@media (max-width: 759px) {
  .tema-2026 .tj-menu-jatuh {
    position: fixed !important; top: 102px; right: 14px; left: auto !important;
  }
}
.tema-2026 .tj-menu-jatuh {
  display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 210px; flex-direction: column; padding: 6px;
  background: var(--tj-surface); border-radius: 12px;
  box-shadow: 0 0 0 1px var(--tj-line), 0 14px 40px rgba(0, 0, 0, .5);
}
.tema-2026 .tj-menu-jatuh.buka { display: flex; }
.tema-2026 .tj-menu-jatuh small {
  padding: 7px 11px 4px; font-size: 11px; color: var(--tj-muted); line-height: 1.45;
}
.tema-2026 .tj-menu-jatuh small b { color: var(--tj-text); }
.tema-2026 .tj-menu-jatuh a, .tema-2026 .tj-keluar {
  display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--tj-text); text-decoration: none;
  background: transparent; border: 0; width: 100%; cursor: pointer; font-family: inherit; text-align: left;
}
.tema-2026 .tj-menu-jatuh a:hover, .tema-2026 .tj-keluar:hover { background: var(--tj-surface-2); color: var(--tj-text); }
.tema-2026 .tj-keluar { color: #E66; }
.tema-2026 .tj-menu-jatuh hr { border: 0; border-top: 1px solid var(--tj-line); margin: 5px 4px; }

/* Modal tema (kontrak comp: kartu kecil tengah + latar blur). */
.tema-2026 .tj-modal-latar {
  display: none; position: fixed; inset: 0; z-index: 70;
  background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  align-items: center; justify-content: center; padding: 20px;
}
.tema-2026 .tj-modal-latar.buka { display: flex; }
.tema-2026 .tj-modal {
  width: 100%; max-width: 380px; border-radius: 16px; padding: 16px;
  background: var(--tj-surface);
  box-shadow: 0 0 0 1px var(--tj-line), 0 18px 50px rgba(0, 0, 0, .55);
}
.tema-2026 .tj-modal h3 {
  font-size: 15px; font-weight: 700; display: flex; align-items: center; margin: 0 0 10px;
}
.tema-2026 .tj-modal .tutup {
  margin-left: auto; width: 28px; height: 28px; border-radius: 99px; border: 0; cursor: pointer;
  background: var(--tj-surface-2); box-shadow: 0 0 0 1px var(--tj-line);
  color: var(--tj-muted); font-size: 13px; font-weight: 700;
}
.tema-2026 .tj-modal-isi { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--tj-muted); }
.tema-2026 .tj-modal-isi .tj-detail-judul { color: var(--tj-text); font-size: 14px; margin-bottom: 2px; }

/* ===== /deposit (kontrak comp-deposit-v1-KUNCI) ===== */
.tema-2026 .dp-wrap { max-width: 760px; margin: 0 auto; padding: 0 14px; }
.tema-2026 .dp-alert { margin-top: 14px; border-radius: 10px; padding: 10px 13px; font-size: 12.5px; }
.tema-2026 .dp-alert-merah { color: #E66; background: rgba(220, 60, 60, .1); border: 1px solid rgba(220, 60, 60, .3); }
.tema-2026 .dp-alert-hijau { color: var(--tj-ok); background: rgba(52, 199, 123, .1); border: 1px solid rgba(52, 199, 123, .3); }
.tema-2026 .info-wa {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; padding: 10px 13px;
  border-radius: 10px; font-size: 12.5px; line-height: 1.5; color: #D9C3A5;
  background: rgba(184, 155, 120, .08); border: 1px solid rgba(184, 155, 120, .25);
}
.tema-2026 .info-wa a { color: var(--tj-cta); font-weight: 700; }
.tema-2026 .kartu {
  background: var(--tj-surface); border-radius: var(--tj-radius);
  box-shadow: 0 0 0 1px var(--tj-line); padding: 14px; margin-top: 14px;
}
.tema-2026 .kartu > h2 {
  font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 10px;
  margin: -14px -14px 12px; padding: 10px 14px;
  background: rgba(255, 255, 255, .035); border-bottom: 1px solid var(--tj-line);
  border-radius: var(--tj-radius) var(--tj-radius) 0 0;
}
.tema-2026 .nomor {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff;
  background: linear-gradient(to bottom, color-mix(in oklch, var(--tj-cta), white 15%), var(--tj-cta));
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--tj-cta), black 12%), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.tema-2026 .inp-rp { position: relative; display: flex; margin-top: 10px; }
.tema-2026 .inp-rp .pre {
  position: absolute; left: 16px; top: 0; height: 44px; display: flex; align-items: center;
  font-size: 13.5px; font-weight: 700; color: var(--tj-muted);
}
.tema-2026 .inp-rp input {
  flex: 1; min-width: 0; height: 44px; border-radius: 999px; border: 0; padding: 0 16px 0 44px;
  font: inherit; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--tj-surface-2) 78%, var(--tj-bg)); color: var(--tj-text);
  box-shadow: 0 0 0 1px var(--tj-line);
}
.tema-2026 .inp-rp input:focus { outline: 0; box-shadow: 0 0 0 2px var(--tj-cta); }
.tema-2026 .inp-rp input::placeholder { color: var(--tj-muted); font-weight: 400; }
.tema-2026 .min-note { font-size: 11px; color: var(--tj-muted); margin-top: 7px; }
.tema-2026 .min-note.merah { color: #E66; }
.tema-2026 .cepat { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.tema-2026 .grup-pay { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--tj-muted); margin-top: 12px; }
.tema-2026 .paylist { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.tema-2026 .pay {
  display: flex; align-items: center; gap: 10px; border-radius: 11px; background: var(--tj-surface-2);
  box-shadow: 0 0 0 1px var(--tj-line); padding: 9px 12px; cursor: pointer; margin: 0;
}
.tema-2026 .pay input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.tema-2026 .pay img {
  height: 20px; width: auto; max-width: 64px; object-fit: contain;
  background: #fff; border-radius: 4px; padding: 2px 4px;
}
.tema-2026 .pay .pn { font-size: 13px; font-weight: 600; }
.tema-2026 .pay .ph2 { font-size: 11px; color: var(--tj-muted); }
.tema-2026 .pay .kanan { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--tj-cta); flex-shrink: 0; }
.tema-2026 .pay:has(input:checked) {
  box-shadow: 0 0 0 2px var(--tj-cta);
  background: color-mix(in srgb, var(--tj-cta) 9%, var(--tj-surface-2));
}
.tema-2026 .dp-riwayat { margin-top: 26px; }
.tema-2026 .dp-riwayat .tbl-bungkus { margin-top: 0; }
.tema-2026 .dp-paginasi { display: flex; justify-content: center; margin-top: 12px; }

/* ===== /cari (kontrak comp-cek-v3-KUNCI) ===== */
.tema-2026 .ct-wrap { max-width: 760px; margin: 0 auto; padding: 0 14px; }
/* Heading kartu C1 = h1 halaman (H1HalamanAlatTest) — kulitnya kulit h2 kartu. */
.tema-2026 .kartu > .ct-judul {
  font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 10px;
  margin: -14px -14px 12px; padding: 10px 14px;
  background: rgba(255, 255, 255, .035); border-bottom: 1px solid var(--tj-line);
  border-radius: var(--tj-radius) var(--tj-radius) 0 0;
}
.tema-2026 .lacak {
  display: flex; margin-top: 12px; border-radius: 12px; overflow: hidden;
  background: color-mix(in srgb, var(--tj-surface-2) 78%, var(--tj-bg));
  box-shadow: 0 0 0 1px var(--tj-line), inset 0 1px 2px rgba(0, 0, 0, .35);
}
.tema-2026 .lacak input {
  flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 13.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--tj-text); padding: 13px 14px; outline: none; text-transform: uppercase;
}
.tema-2026 .lacak input::placeholder { color: var(--tj-muted); font-family: inherit; text-transform: none; }
.tema-2026 .lacak button {
  margin: 3px; border: 0; border-radius: 9px; padding: 0 16px; font: inherit; font-size: 13px;
  font-weight: 600; color: #fff; cursor: pointer; flex-shrink: 0;
  background: linear-gradient(to bottom, color-mix(in oklch, var(--tj-cta), white 15%), var(--tj-cta));
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--tj-cta), black 12%), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.tema-2026 .bantu { font-size: 11px; color: var(--tj-muted); }
.tema-2026 .hasil-lacak {
  margin-top: 12px; border-radius: var(--tj-radius); padding: 13px 14px;
  background: color-mix(in srgb, var(--tj-surface-2) 78%, var(--tj-bg));
  box-shadow: 0 0 0 1px var(--tj-line); font-size: 13px;
}
.tema-2026 .ct-riwayat { margin-top: 26px; }
.tema-2026 .ct-lead { color: var(--tj-muted); font-size: 13px; margin: -6px 0 10px; }

/* ===== /topten (komponen terkunci, tanpa comp sendiri) ===== */
.tema-2026 .tt-kepala { margin-top: 20px; text-align: center; }
.tema-2026 .tt-kepala h1 { font-size: 21px; font-weight: 800; line-height: 1.2; }
.tema-2026 .tt-kepala p { color: var(--tj-muted); font-size: 12.5px; margin-top: 5px; }
.tema-2026 .tt-seksi { margin-top: 22px; }
.tema-2026 .tt-tabel { min-width: 0; }
.tema-2026 .tt-rank { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--tj-muted); }
.tema-2026 .tt-rank.emas { color: #F5C518; }

/* ===== /user/edit/profile ===== */
.tema-2026 .ep-apikey { display: flex; gap: 8px; }
.tema-2026 .ep-apikey input {
  flex: 1; min-width: 0; height: 36px; border-radius: 999px; border: 0; padding: 0 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  background: color-mix(in srgb, var(--tj-surface-2) 78%, var(--tj-bg)); color: var(--tj-text);
  box-shadow: 0 0 0 1px var(--tj-line);
}

/* ===== Halaman statis/alat warisan (check-region, kalkulator, dll):
   bootstrap generik dipetakan ke tema — input gelap, btn-primary = CTA Kumo. */
.tema-2026 .form-control {
  background: color-mix(in srgb, var(--tj-surface-2) 78%, var(--tj-bg)) !important;
  color: var(--tj-text) !important; border: 0 !important;
  box-shadow: 0 0 0 1px var(--tj-line); border-radius: 999px; height: 40px; padding: 0 14px;
}
.tema-2026 .form-control:focus { outline: 0; box-shadow: 0 0 0 2px var(--tj-cta); }
.tema-2026 .form-control::placeholder { color: var(--tj-muted); }
.tema-2026 textarea.form-control { height: auto; border-radius: 12px; padding: 10px 14px; }
.tema-2026 .btn-primary {
  color: #fff !important; border: 0 !important; border-radius: 999px;
  background: linear-gradient(to bottom, color-mix(in oklch, var(--tj-cta), white 15%), var(--tj-cta)) !important;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--tj-cta), black 12%),
              inset 0 1px 0 rgba(255, 255, 255, .28), 0 1px 2px rgba(0, 0, 0, .5) !important;
  font-weight: 600;
}
.tema-2026 .btn-primary:hover { filter: brightness(1.07); }
.tema-2026 .result.bg-light {
  background: var(--tj-surface) !important; color: var(--tj-text) !important;
  box-shadow: 0 0 0 1px var(--tj-line);
}
/* Hero biru + bintang jatuh pricelist warisan: dipetakan ke panel indigo tema. */
.tema-2026 .starfall-area {
  background: linear-gradient(to right, color-mix(in oklch, var(--tj-brand), var(--tj-bg) 72%), var(--tj-surface)) !important;
}
.tema-2026 .falling-stars span { display: none !important; }

/* ===== verifikasi OTP: enam kotak ===== */
.tema-2026 .otp-baris { display: flex; gap: 8px; margin-top: 14px; }
.tema-2026 .otp-baris input {
  flex: 1; min-width: 0; width: 100%; height: 48px; text-align: center;
  font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums;
  border: 0; border-radius: 11px;
  background: color-mix(in srgb, var(--tj-surface-2) 78%, var(--tj-bg)); color: var(--tj-text);
  box-shadow: 0 0 0 1px var(--tj-line);
  -moz-appearance: textfield; appearance: textfield;
}
.tema-2026 .otp-baris input::-webkit-outer-spin-button,
.tema-2026 .otp-baris input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tema-2026 .otp-baris input:focus { outline: 0; box-shadow: 0 0 0 2px var(--tj-cta); }

/* ===== Katalog akun per game (kontrak comp-katalog-v1-KUNCI) ===== */
.tema-2026 .topbar { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.tema-2026 .crumb { font-size: 11.5px; color: var(--tj-muted); }
.tema-2026 .crumb b { color: var(--tj-text); }
.tema-2026 .kepala-game { margin-top: 16px; }
.tema-2026 .kepala-game h1 { font-size: 21px; font-weight: 800; line-height: 1.2; }
.tema-2026 .kepala-game p { font-size: 12.5px; color: var(--tj-muted); margin-top: 6px; max-width: 62ch; line-height: 1.55; }
.tema-2026 .tingkat {
  display: flex; gap: 8px; overflow-x: auto; margin-top: 13px; padding-bottom: 2px;
  scrollbar-width: none; align-items: center;
}
.tema-2026 .tingkat::-webkit-scrollbar { display: none; }
.tema-2026 .ting {
  flex-shrink: 0; height: 32px; padding: 0 14px; border-radius: 999px; border: 0;
  display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 600;
  color: var(--tj-muted); background: var(--tj-surface); box-shadow: 0 0 0 1px var(--tj-line);
}
.tema-2026 .ting.on {
  color: #fff;
  background: linear-gradient(to bottom, color-mix(in oklch, var(--tj-brand), white 18%), var(--tj-brand));
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--tj-brand), black 15%), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.tema-2026 .tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.tema-2026 .tier-tile {
  display: block; padding: 10px 12px; border-radius: 11px; background: var(--tj-surface);
  box-shadow: 0 0 0 1px var(--tj-line);
}
.tema-2026 .tier-tile:hover { box-shadow: 0 0 0 1px color-mix(in oklch, var(--tj-brand-lite), transparent 40%); }
.tema-2026 .tier-tile.on { box-shadow: 0 0 0 2px var(--tj-cta); }
.tema-2026 .tier-tile b { display: block; font-size: 12.5px; }
.tema-2026 .tier-tile small { display: block; font-size: 10.5px; color: var(--tj-cta); font-weight: 700; margin-top: 2px; }
.tema-2026 .hint { font-size: 12px; color: var(--tj-muted); margin-top: 10px; }
.tema-2026 .hint a { color: var(--tj-brand-lite); font-weight: 600; }
.tema-2026 .baris-sort { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.tema-2026 .jml { font-size: 11.5px; color: var(--tj-muted); }
.tema-2026 .sort {
  margin-left: auto; height: 32px; border-radius: 999px; border: 0; padding: 0 30px 0 12px;
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--tj-text); box-shadow: 0 0 0 1px var(--tj-line);
  -webkit-appearance: none; appearance: none;
  background: var(--tj-surface-2)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239A9DB8' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>")
    no-repeat right 10px center;
}
.tema-2026 .seksi-stok { margin-top: 12px; }
.tema-2026 section { margin-top: 22px; }
.tema-2026 .kosong-ak {
  border: 1.5px dashed var(--tj-line); border-radius: var(--tj-radius); padding: 20px 16px;
  text-align: center; font-size: 12.5px; color: var(--tj-muted); line-height: 1.6;
}
.tema-2026 .kosong-ak b { color: var(--tj-text); }
.tema-2026 .kosong-ak a { color: var(--tj-brand-lite); font-weight: 600; }
/* FAQ akordeon (katalog + detail) */
.tema-2026 .faq details {
  border-radius: 11px; background: var(--tj-surface); box-shadow: 0 0 0 1px var(--tj-line);
  padding: 11px 13px; margin-top: 8px;
}
.tema-2026 .faq summary { font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; display: flex; align-items: center; }
.tema-2026 .faq summary::-webkit-details-marker { display: none; }
.tema-2026 .faq summary::after { content: "+"; margin-left: auto; color: var(--tj-muted); font-weight: 700; }
.tema-2026 .faq details[open] summary::after { content: "\2212"; }
.tema-2026 .faq p { font-size: 12px; color: var(--tj-muted); margin-top: 7px; line-height: 1.6; }
/* Paginasi katalog (partial akun._paginasi kelas mk-paginasi — kulit tema) */
.tema-2026 .mk-paginasi {
  display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 18px;
  font-size: 12.5px; font-weight: 600;
}
.tema-2026 .mk-paginasi a, .tema-2026 .mk-paginasi span {
  min-width: 32px; height: 32px; padding: 0 10px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--tj-muted); background: var(--tj-surface); box-shadow: 0 0 0 1px var(--tj-line);
}
.tema-2026 .mk-paginasi .is-aktif {
  color: #fff;
  background: linear-gradient(to bottom, color-mix(in oklch, var(--tj-cta), white 15%), var(--tj-cta));
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--tj-cta), black 12%);
}
/* Baris spek ringkas kartu katalog (comp-katalog-v1). */
.tema-2026 .tj-stok-card .meta { display: flex; gap: 5px; flex-wrap: wrap; }
.tema-2026 .tj-stok-card .meta span {
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; padding: 3px 8px; border-radius: 6px;
  background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 1px var(--tj-line); color: var(--tj-muted);
}
/* Tombol di panel kosong: teks panjang boleh melipat, jangan terpotong. */
.tema-2026 .kosong-ak .tj-btn { white-space: normal; height: auto; min-height: 32px; padding: 7px 14px; line-height: 1.3; }
.tema-2026 .kosong-ak a.tj-btn-cta { color: #fff; } /* jangan kena warna tautan panel */

/* ---------- CTA Komunitas FF di Katalog Akun ---------- */
.tema-2026 .tj-cta-komunitas-wrap {
  margin: 22px 0;
}
.tema-2026 .tj-cta-komunitas-card {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(18, 20, 32, 0.95) 100%);
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: var(--tj-radius);
  padding: 20px 24px;
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.45);
}
.tema-2026 .tj-cta-komunitas-main {
  display: flex;
  align-items: center;
  gap: 18px;
}
.tema-2026 .tj-cta-komunitas-icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: rgba(168, 85, 247, 0.16);
  border: 1px solid rgba(168, 85, 247, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c084fc;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.25);
}
.tema-2026 .tj-cta-komunitas-icon svg {
  width: 26px;
  height: 26px;
}
.tema-2026 .tj-cta-komunitas-body {
  flex: 1;
  min-width: 0;
}
.tema-2026 .tj-cta-komunitas-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px 0;
  letter-spacing: -0.01em;
}
.tema-2026 .tj-cta-komunitas-sub {
  font-size: 13px;
  color: var(--tj-muted);
  margin: 0;
  line-height: 1.45;
}
.tema-2026 .tj-cta-komunitas-action {
  flex-shrink: 0;
}
.tema-2026 .tj-cta-komunitas-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 9px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
}
.tema-2026 .tj-cta-komunitas-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.4;
}
.tema-2026 .tj-cta-komunitas-footer a {
  color: #c084fc;
  font-weight: 600;
  text-decoration: underline;
}
.tema-2026 .tj-cta-info-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: #a78bfa;
}
@media (max-width: 640px) {
  .tema-2026 .tj-cta-komunitas-card {
    padding: 18px 16px;
  }
  .tema-2026 .tj-cta-komunitas-main {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  .tema-2026 .tj-cta-komunitas-action {
    width: 100%;
  }
  .tema-2026 .tj-cta-komunitas-btn {
    width: 100%;
    justify-content: center;
  }
  .tema-2026 .tj-cta-komunitas-footer {
    text-align: left;
    align-items: flex-start;
  }
}

/* ---------- Teaser Aktivitas Komunitas Live di Katalog Akun ---------- */
.tema-2026 .tj-comm-teaser {
  margin: 14px 0 18px 0;
  position: relative;
}
.tema-2026 .tj-comm-teaser-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.09) 0%, rgba(18, 22, 34, 0.95) 45%, rgba(147, 51, 234, 0.08) 100%);
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: var(--tj-radius);
  padding: 14px 18px;
  box-shadow: 0 4px 18px -4px rgba(0, 0, 0, 0.45);
}
.tema-2026 .tj-comm-teaser-main {
  flex: 1;
  min-width: 0;
}
.tema-2026 .tj-comm-teaser-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.tema-2026 .tj-comm-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #4ade80;
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.35);
  padding: 3px 8px;
  border-radius: 9999px;
  text-transform: uppercase;
}
.tema-2026 .tj-comm-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  animation: tj-comm-pulse 2s infinite cubic-bezier(0.66, 0, 0, 1);
  display: inline-block;
}
@keyframes tj-comm-pulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
  70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.tema-2026 .tj-comm-stat-pill {
  font-size: 12px;
  color: #94a3b8;
}
.tema-2026 .tj-comm-stat-pill strong {
  color: #f1f5f9;
  font-weight: 700;
}
.tema-2026 .tj-comm-teaser-title {
  font-size: 14.5px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 3px 0;
  line-height: 1.35;
}
.tema-2026 .tj-comm-teaser-title strong {
  color: #38bdf8;
}
.tema-2026 .tj-comm-teaser-sub {
  font-size: 12.5px;
  color: #94a3b8;
  margin: 0;
  line-height: 1.4;
}
.tema-2026 .tj-comm-teaser-action {
  flex-shrink: 0;
}
.tema-2026 .tj-comm-teaser-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 9px;
  text-decoration: none;
  border: 1px solid rgba(52, 211, 153, 0.35);
  box-shadow: 0 2px 10px rgba(5, 150, 105, 0.35);
  transition: all 0.2s ease;
  min-height: 38px;
}
.tema-2026 .tj-comm-teaser-btn:hover {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.5);
  transform: translateY(-1px);
  color: #ffffff;
}
.tema-2026 .tj-comm-arrow {
  transition: transform 0.2s ease;
}
.tema-2026 .tj-comm-teaser-btn:hover .tj-comm-arrow {
  transform: translateX(3px);
}
@media (max-width: 640px) {
  .tema-2026 .tj-comm-teaser-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px;
  }
  .tema-2026 .tj-comm-teaser-btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
}


/* ===== Detail listing akun (kontrak comp-detail-v1-KUNCI) ===== */
.tema-2026 .dt-atas { margin-top: 14px; }
@media (min-width: 1024px) {
  .tema-2026 .dt-atas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
  /* Seksi yang dikeluarkan dari kolom (spesifikasi dkk) dibentangkan penuh —
     padanan aturan mk lama `.mk-detail-atas > section`. */
  .tema-2026 .dt-atas > section { grid-column: 1 / -1; }
}
.tema-2026 .galeri {
  position: relative; border-radius: 16px; overflow: hidden; background: #10121D;
  box-shadow: 0 0 0 1px var(--tj-line);
}
.tema-2026 .galeri img { width: 100%; aspect-ratio: 4/5; object-fit: contain; display: block; cursor: zoom-in; }
.tema-2026 .galeri .badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; z-index: 1; }
.tema-2026 .badge-b {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 4px 10px; border-radius: 7px;
  background: rgba(8, 9, 15, .82); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
}
.tema-2026 .badge-b.emas { color: #F5C518; }
.tema-2026 .galeri .hitung {
  position: absolute; bottom: 10px; right: 12px; font-size: 10.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 99px; background: rgba(8, 9, 15, .8); color: #fff;
}
.tema-2026 .thumbs { display: flex; gap: 8px; margin: 12px 0 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 4px 4px; }
.tema-2026 .thumbs::-webkit-scrollbar { display: none; }
/* Bingkai foto akun keenam — yang ketinggalan waktu lima lainnya dirapikan ke
   4:5 pada 14 Agu 2026, dan yang dilihat pemilik di halaman detail: 64×48 itu
   4:3 MENDATAR, sementara fotonya 4:5 TEGAK, jadi tiap thumbnail menyisakan
   12px pita gelap di kiri dan kanan. Tingginya ikut lebarnya sekarang; jangan
   kembalikan `height` tetap. */
.tema-2026 .mk-thumb {
  flex: 0 0 64px; aspect-ratio: 4 / 5; height: auto;
  /* padding 2px dibuang bersamaan: dengan box-sizing border-box ia memakan
     kotaknya dari dalam, jadi fotonya berakhir 0.789 — meleset tipis dari 4:5
     justru di aturan yang dibuat supaya pas. */
  border-radius: 9px; overflow: hidden; border: 0; padding: 0;
  cursor: pointer; background: #10121D; box-shadow: 0 0 0 1px var(--tj-line);
}
.tema-2026 .mk-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tema-2026 .mk-thumb.is-aktif { box-shadow: 0 0 0 2px var(--tj-cta); }
.tema-2026 .mk-ph {
  aspect-ratio: 4/5; display: flex; align-items: center; justify-content: center;
  color: var(--tj-muted); font-size: 12px;
}
.tema-2026 .dt-judul { font-size: 19px; font-weight: 800; line-height: 1.25; margin-top: 14px; }
@media (min-width: 1024px) { .tema-2026 .dt-judul { margin-top: 0; } }
.tema-2026 .dt-sub { font-size: 11.5px; color: var(--tj-muted); margin-top: 5px; }
.tema-2026 .salin-kode {
  border: 0; background: var(--tj-surface-2); box-shadow: 0 0 0 1px var(--tj-line); border-radius: 6px;
  padding: 1px 7px; font: inherit; font-size: 10.5px; font-weight: 700; color: var(--tj-muted);
  cursor: pointer; margin-left: 4px;
}
.tema-2026 .baris-bagikan { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.tema-2026 .dilihat {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  white-space: nowrap; color: var(--tj-text); height: 32px; padding: 0 13px; border-radius: 999px;
  background: var(--tj-surface-2);
  box-shadow: 0 0 0 1px var(--tj-line), inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 2px rgba(0, 0, 0, .45);
}
.tema-2026 .dt-detail { margin-top: 14px; }
.tema-2026 .prosa { font-size: 13px; line-height: 1.65; color: var(--tj-muted); }
.tema-2026 .panel-harga {
  margin-top: 12px; border-radius: 14px; padding: 13px 14px; background: var(--tj-surface);
  box-shadow: 0 0 0 1px var(--tj-line);
}
.tema-2026 .panel-harga .kepala {
  display: flex; align-items: center; gap: 10px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .08em; color: var(--tj-cta);
}
.tema-2026 .panel-harga .kepala .jam {
  margin-left: auto; font-variant-numeric: tabular-nums; color: var(--tj-text);
  background: var(--tj-surface-2); border-radius: 7px; padding: 2px 8px; box-shadow: 0 0 0 1px var(--tj-line);
}
.tema-2026 .panel-harga .baris { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.tema-2026 .panel-harga .now { font-size: 24px; font-weight: 800; color: var(--tj-cta); font-variant-numeric: tabular-nums; }
.tema-2026 .panel-harga .was { font-size: 13px; color: var(--tj-muted); text-decoration: line-through; }
.tema-2026 .panel-harga .note { font-size: 11.5px; color: var(--tj-muted); margin-top: 6px; }
.tema-2026 .strip-percaya { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.tema-2026 .strip-percaya span {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .03em; padding: 4px 9px; border-radius: 6px; color: var(--tj-ok);
  background: color-mix(in srgb, var(--tj-ok) 12%, transparent);
}
.tema-2026 .panel-laku {
  margin-top: 12px; border-radius: 14px; padding: 14px; background: var(--tj-surface);
  box-shadow: 0 0 0 1px var(--tj-line); border: 1.5px dashed var(--tj-line); text-align: center;
}
.tema-2026 .panel-laku b { font-size: 14px; }
.tema-2026 .panel-laku small { display: block; color: var(--tj-muted); font-size: 11.5px; margin-top: 5px; line-height: 1.5; }
.tema-2026 .aksi-beli { display: flex; gap: 8px; margin-top: 12px; }
.tema-2026 .aksi-beli .tj-btn { flex: 1; height: 34px; font-size: 13px; }
.tema-2026 .btn-wa {
  color: #fff !important;
  background: linear-gradient(to bottom, color-mix(in oklch, #34C77B, white 12%), #2EAD6C);
  box-shadow: 0 0 0 1px color-mix(in oklch, #2EAD6C, black 12%), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.tema-2026 .konsultan {
  display: flex; align-items: center; gap: 10px; border-radius: 14px;
  padding: 11px 13px; background: var(--tj-surface); box-shadow: 0 0 0 1px var(--tj-line);
}
.tema-2026 .konsultan img { width: 38px; height: 38px; border-radius: 99px; background: #0B0C14; object-fit: contain; }
/* Avatar inisial saat listing menunjuk admin perorangan (18 Agu 2026).
   `.ava` bawaan 52px, sedangkan slot di kartu ini 38px seperti logo toko di
   atas — tanpa aturan ini kartu admin jadi lebih tinggi daripada kartu toko. */
.tema-2026 .konsultan .ava { width: 38px; height: 38px; font-size: 13px; }
.tema-2026 .konsultan .nm { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.tema-2026 .konsultan .nm svg { color: var(--tj-brand-lite); flex-shrink: 0; }
.tema-2026 .konsultan small { display: block; font-size: 10.5px; color: var(--tj-muted); margin-top: 1px; }
.tema-2026 .konsultan .tj-btn { margin-left: auto; flex-shrink: 0; }
.tema-2026 .langkah { margin-top: 16px; }
.tema-2026 .langkah .item { display: flex; gap: 10px; margin-top: 10px; font-size: 12.5px; }
.tema-2026 .langkah .no {
  width: 24px; height: 24px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 800; color: #fff;
  background: linear-gradient(to bottom, color-mix(in oklch, var(--tj-cta), white 15%), var(--tj-cta));
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--tj-cta), black 12%);
}
.tema-2026 .langkah b { display: block; font-size: 12.5px; }
.tema-2026 .langkah small { color: var(--tj-muted); font-size: 11.5px; line-height: 1.5; }
.tema-2026 .awas {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; padding: 10px 13px;
  border-radius: 10px; font-size: 12px; line-height: 1.55; color: #D9C3A5;
  background: rgba(184, 155, 120, .08); border: 1px solid rgba(184, 155, 120, .25);
}
.tema-2026 .awas a { color: var(--tj-cta); font-weight: 700; }
/* Spesifikasi: struktur dl/ul mk dipertahankan (penjaga), kulitnya tabel tema. */
/* Tiap pasangan label-nilai dibungkus div.mk-spek__row — barisnya flex
   label kiri redup, nilai kanan tebal (kontrak comp-detail-v1 D5 SPEK). */
.tema-2026 .mk-spek { border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--tj-line); margin: 0; background: var(--tj-surface); }
.tema-2026 .mk-spek__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px 12px; border-bottom: 1px solid var(--tj-line);
}
.tema-2026 .mk-spek__row:last-child { border-bottom: 0; }
.tema-2026 .mk-spek dt { color: var(--tj-muted); font-size: 12.5px; margin: 0; }
.tema-2026 .mk-spek dd { font-weight: 600; font-size: 12.5px; text-align: right; margin: 0; overflow-wrap: anywhere; min-width: 0; }
.tema-2026 .mk-spek__value--accent { color: var(--tj-ok); }
.tema-2026 .mk-spek-polos {
  list-style: none; margin: 10px 0 0; padding: 0; border-radius: 12px; overflow: hidden;
  background: var(--tj-surface); box-shadow: 0 0 0 1px var(--tj-line);
}
.tema-2026 .mk-spek-polos__row { padding: 9px 12px; font-size: 12.5px; font-weight: 600; color: var(--tj-text); border-bottom: 1px solid var(--tj-line); }
.tema-2026 .mk-spek-polos__row:last-child { border-bottom: 0; }
/* Form: kait uang mk dipertahankan, kulit tema. */
.tema-2026 .mk-field { margin-top: 12px; }
.tema-2026 .mk-field > label:not(.mk-opt) { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.tema-2026 .mk-opt {
  display: flex; align-items: center; gap: 10px; border-radius: 11px; background: var(--tj-surface-2);
  box-shadow: 0 0 0 1px var(--tj-line); padding: 11px 13px; cursor: pointer; font-size: 13px;
  font-weight: 600; margin-top: 8px;
}
.tema-2026 .mk-opt input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.tema-2026 .mk-opt.is-aktif {
  box-shadow: 0 0 0 2px var(--tj-cta);
  background: color-mix(in srgb, var(--tj-cta) 9%, var(--tj-surface-2));
}
.tema-2026 .mk-opt__harga { margin-left: auto; text-align: right; }
.tema-2026 .mk-opt__nilai { font-weight: 800; color: var(--tj-cta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tema-2026 .mk-opt__coret { display: block; font-size: 11px; color: var(--tj-muted); text-decoration: line-through; }
.tema-2026 .mk-input {
  width: 100%; height: 42px; border-radius: 999px; border: 0; padding: 0 16px; font: inherit;
  font-size: 13px; background: color-mix(in srgb, var(--tj-surface-2) 78%, var(--tj-bg));
  color: var(--tj-text); box-shadow: 0 0 0 1px var(--tj-line);
}
.tema-2026 .mk-input:focus { outline: 0; box-shadow: 0 0 0 2px var(--tj-cta); }
.tema-2026 .mk-galat { min-height: 20px; margin-top: 10px; font-size: 12.5px; color: #E66; }
.tema-2026 .mk-galat:empty { visibility: hidden; }
/* Pil metode + sheet (kontrak comp — radio asli di dalam sheet). */
.tema-2026 .pilih-metode {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; padding: 0 14px;
  border-radius: 999px; border: 0; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  text-align: left; background: color-mix(in srgb, var(--tj-surface-2) 78%, var(--tj-bg));
  color: var(--tj-text); box-shadow: 0 0 0 1px var(--tj-line);
}
.tema-2026 .pilih-metode .plc { color: var(--tj-muted); font-weight: 400; }
.tema-2026 .pilih-metode .caret { margin-left: auto; color: var(--tj-muted); flex-shrink: 0; }
.tema-2026 .sheet-latar {
  display: none; position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  align-items: center; justify-content: center; padding: 20px;
}
.tema-2026 .sheet-latar.buka { display: flex; }
.tema-2026 .sheet {
  width: 100%; max-width: 400px; background: var(--tj-surface); border-radius: 18px; padding: 14px;
  box-shadow: 0 0 0 1px var(--tj-line), 0 18px 50px rgba(0, 0, 0, .55); max-height: 72vh; overflow-y: auto;
}
.tema-2026 .sheet h3 { font-size: 14px; font-weight: 700; display: flex; align-items: center; margin-bottom: 12px; }
.tema-2026 .sheet .tutup {
  margin-left: auto; width: 28px; height: 28px; border-radius: 99px; border: 0; cursor: pointer;
  background: var(--tj-surface-2); box-shadow: 0 0 0 1px var(--tj-line); color: var(--tj-muted);
  font-size: 13px; font-weight: 700;
}
.tema-2026 .sheet .grup { font-size: 10px; font-weight: 800; letter-spacing: .07em; color: var(--tj-muted); margin: 14px 0 8px; }
.tema-2026 .sheet .grup:first-of-type { margin-top: 0; }
.tema-2026 .m-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 11px; border-radius: 11px;
  border: 0; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left;
  background: var(--tj-surface-2); color: var(--tj-text); box-shadow: 0 0 0 1px var(--tj-line); margin-top: 8px;
}
.tema-2026 .m-item input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.tema-2026 .m-item small { display: block; font-size: 10.5px; color: var(--tj-muted); font-weight: 400; margin-top: 1px; }
.tema-2026 .m-item .hg { margin-left: auto; white-space: nowrap; flex-shrink: 0; padding-left: 8px; font-weight: 800; color: var(--tj-cta); font-size: 12px; font-variant-numeric: tabular-nums; }
.tema-2026 .m-item.on { box-shadow: 0 0 0 2px var(--tj-cta); background: color-mix(in srgb, var(--tj-cta) 9%, var(--tj-surface-2)); }
.tema-2026 .total-bayar {
  display: flex; align-items: baseline; gap: 10px; margin-top: 14px; padding: 11px 14px;
  border-radius: 11px; background: var(--tj-surface); box-shadow: 0 0 0 1px var(--tj-line); font-size: 12.5px;
}
.tema-2026 .total-bayar b { margin-left: auto; font-size: 16px; font-weight: 800; color: var(--tj-cta); font-variant-numeric: tabular-nums; }
.tema-2026 .total-bayar small { color: var(--tj-muted); font-size: 10.5px; }
/* Sosial + ulasan */
.tema-2026 .sosial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.tema-2026 .sosial-kotak {
  border-radius: 12px; padding: 11px 12px; text-align: center;
  background: var(--tj-surface); box-shadow: 0 0 0 1px var(--tj-line);
}
.tema-2026 .sosial-kotak small { display: block; font-size: 10.5px; color: var(--tj-muted); letter-spacing: .03em; }
.tema-2026 .sosial-kotak b { font-size: 18px; }
.tema-2026 .ulasan-grid { display: grid; gap: 10px; }
@media (min-width: 760px) { .tema-2026 .ulasan-grid { grid-template-columns: repeat(3, 1fr); } }
.tema-2026 .ulasan { border-radius: 12px; padding: 12px 13px; background: var(--tj-surface); box-shadow: 0 0 0 1px var(--tj-line); }
.tema-2026 .ulasan .bint { color: #F5C518; font-size: 12px; letter-spacing: 2px; }
.tema-2026 .ulasan p { font-size: 12.5px; line-height: 1.55; color: var(--tj-muted); margin-top: 6px; }
.tema-2026 .ulasan .siapa { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 11px; font-weight: 700; }
.tema-2026 .ulasan .ava {
  width: 24px; height: 24px; border-radius: 99px; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff;
  background: linear-gradient(to bottom, color-mix(in oklch, var(--tj-brand), white 18%), var(--tj-brand));
}
.tema-2026 .ulasan .siapa small { color: var(--tj-muted); font-weight: 400; }
/* Actionbar HP + lightbox */
.tema-2026 .actionbar {
  position: fixed; left: 0; right: 0; bottom: calc(58px + env(safe-area-inset-bottom)); z-index: 40;
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: rgba(11, 12, 20, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--tj-line);
}
.tema-2026 .actionbar .hg { white-space: nowrap; font-size: 16px; font-weight: 800; color: var(--tj-cta); font-variant-numeric: tabular-nums; }
.tema-2026 .actionbar small { display: block; font-size: 10px; color: var(--tj-muted); }
.tema-2026 .actionbar .tj-btn { min-width: 0; padding: 0 14px; height: 34px; font-size: 13px; flex-shrink: 0; }
.tema-2026 .actionbar .tj-btn:first-of-type { margin-left: auto; }
@media (min-width: 1024px) { .tema-2026 .actionbar { display: none; } }
body.tema-2026.ada-actionbar { padding-bottom: 150px; }
.tema-2026 .lb {
  display: none; position: fixed; inset: 0; z-index: 70; background: rgba(5, 6, 10, .92);
  align-items: center; justify-content: center; overflow: hidden; touch-action: none;
}
.tema-2026 .lb.buka { display: flex; }
.tema-2026 .lb img { max-width: 92vw; max-height: 82vh; transform-origin: center; transition: transform .12s; cursor: grab; }
.tema-2026 .lb .alat { position: fixed; top: 14px; right: 14px; display: flex; gap: 8px; z-index: 71; }
.tema-2026 .lb .alat button {
  width: 38px; height: 38px; border-radius: 99px; border: 0; cursor: pointer; font-size: 17px; font-weight: 700;
  color: var(--tj-text); background: var(--tj-surface-2); box-shadow: 0 0 0 1px var(--tj-line);
}

/* Keluarga /akun: kotak cari navbar disembunyikan (pemilik 11 Agu — hub
   punya pencarian sendiri, katalog/detail biar konsisten). */
.tema-2026.halaman-akun .tj-cari { display: none; }
/* Tombol Chat CS jangan menutupi actionbar Beli/Chat di HP. */
@media (max-width: 1023px) {
  body.tema-2026.ada-actionbar #wa-float-default { bottom: 170px !important; }
}

/* ===== /komunitas (kontrak comp-saluran-v1-KUNCI: baris ringkas) ===== */
.tema-2026 .w-kepala { margin-top: 16px; }
.tema-2026 .w-kepala h1 { font-size: 22px; font-weight: 800; line-height: 1.2; }
.tema-2026 .w-kepala p { font-size: 12.5px; color: var(--tj-muted); margin-top: 6px; max-width: 60ch; line-height: 1.55; }
.tema-2026 .w-hitung {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 11px; font-size: 11px;
  font-weight: 700; letter-spacing: .04em; color: var(--tj-ok); padding: 5px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--tj-ok) 10%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tj-ok) 35%, transparent);
}
.tema-2026 .kanal-list {
  margin-top: 14px; border-radius: 16px; overflow: hidden; background: var(--tj-surface);
  box-shadow: 0 0 0 1px var(--tj-line);
}
@media (min-width: 860px) { .tema-2026 .kanal-list { max-width: 640px; } }
.tema-2026 .kanal-grup-judul {
  font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--tj-muted);
  padding: 11px 14px 7px; border-bottom: 1px solid var(--tj-line); background: rgba(255, 255, 255, .02);
}
.tema-2026 .kanal-baris { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-bottom: 1px solid var(--tj-line); }
.tema-2026 .kanal-baris:last-child { border-bottom: 0; }
.tema-2026 .kanal-baris .ava {
  width: 40px; height: 40px; border-radius: 99px; flex-shrink: 0; overflow: hidden;
  background: linear-gradient(to bottom, color-mix(in oklch, var(--tj-brand), white 18%), var(--tj-brand));
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff;
}
.tema-2026 .kanal-baris .ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tema-2026 .kanal-baris .isi { min-width: 0; flex: 1; }
.tema-2026 .kanal-baris .nama { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; min-width: 0; }
.tema-2026 .kanal-baris .nama .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tema-2026 .kanal-baris .nama svg { color: var(--tj-brand-lite); flex-shrink: 0; }
.tema-2026 .kanal-baris .desc { display: block; font-size: 11px; color: var(--tj-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tema-2026 .kanal-baris .aksi { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tema-2026 .kanal-baris .aksi .tj-btn { height: 30px; padding: 0 13px; font-size: 12px; }
.tema-2026 .btn-salin-kecil {
  width: 30px; height: 30px; border-radius: 99px; border: 0; cursor: pointer; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; color: var(--tj-muted);
  background: var(--tj-surface-2); box-shadow: 0 0 0 1px var(--tj-line); font-size: 13px;
}
.tema-2026 .btn-salin-kecil:hover { color: var(--tj-text); }

/* ===== Rekber (kontrak comp-rekber-v1-KUNCI) ===== */
.tema-2026 .r-hero {
  margin-top: 14px; border-radius: 18px; padding: 18px 16px; position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 88% -10%, rgba(240, 133, 25, .22), rgba(11, 12, 20, 0) 60%),
    linear-gradient(180deg, var(--tj-surface-2), var(--tj-surface));
  border: 1px solid var(--tj-line);
}
.tema-2026 .r-hero__body { display: flex; gap: 12px; align-items: center; }
.tema-2026 .r-hero__copy { min-width: 0; flex: 1; }
.tema-2026 .r-hero h1 { font-size: 24px; font-weight: 800; line-height: 1.16; }
.tema-2026 .r-hero p { font-size: 12.5px; color: var(--tj-muted); margin-top: 6px; line-height: 1.55; }
.tema-2026 .r-maskot { width: 112px; flex: none; margin: -4px -4px -12px 0; filter: drop-shadow(0 6px 14px rgba(6, 7, 14, .55)); }
.tema-2026 .r-cta { display: grid; gap: 9px; margin-top: 14px; }
.tema-2026 .r-facts {
  display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 13px; font-size: 9.5px; font-weight: 600;
  letter-spacing: .08em; color: var(--tj-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.tema-2026 .r-facts span { display: inline-flex; align-items: center; gap: 5px; }
.tema-2026 .r-facts svg { flex-shrink: 0; }
.tema-2026 .admin-grid { display: grid; gap: 10px; }
@media (min-width: 760px) { .tema-2026 .admin-grid { grid-template-columns: 1fr 1fr; } }
.tema-2026 .admin-kartu {
  display: flex; align-items: center; gap: 11px; border-radius: 14px; padding: 12px 13px;
  background: var(--tj-surface); box-shadow: 0 0 0 1px var(--tj-line);
}
.tema-2026 .admin-kartu .ava {
  width: 42px; height: 42px; border-radius: 99px; flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; font-size: 14px; font-weight: 800; color: #fff;
  background: linear-gradient(to bottom, color-mix(in oklch, var(--tj-brand), white 18%), var(--tj-brand));
}
.tema-2026 .admin-kartu .nm { display: flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 700; }
.tema-2026 .admin-kartu .nm svg { color: var(--tj-brand-lite); flex-shrink: 0; }
.tema-2026 .admin-kartu small { display: block; font-size: 11px; color: var(--tj-muted); margin-top: 1px; }
.tema-2026 .tabel-fee { border-radius: 14px; overflow: hidden; background: var(--tj-surface); box-shadow: 0 0 0 1px var(--tj-line); }
.tema-2026 .fee-baris {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--tj-line); font-size: 12.5px; color: var(--tj-muted);
}
.tema-2026 .fee-baris:last-child { border-bottom: 0; }
.tema-2026 .fee-baris b { color: var(--tj-cta); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tema-2026 .tarif-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tema-2026 .tarif { border-radius: 14px; padding: 13px 14px; background: var(--tj-surface); box-shadow: 0 0 0 1px var(--tj-line); }
.tema-2026 .tarif b { display: block; font-size: 12.5px; }
.tema-2026 .tarif small { display: block; font-size: 10.5px; color: var(--tj-muted); margin-top: 3px; line-height: 1.45; }
.tema-2026 .contoh {
  margin-top: 10px; border-radius: 12px; padding: 12px 14px; background: var(--tj-surface);
  box-shadow: 0 0 0 1px var(--tj-line); font-size: 12.5px; color: var(--tj-muted); line-height: 1.6;
}
.tema-2026 .contoh b { color: var(--tj-text); }
.tema-2026 .ulasan-geser {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 4px; margin-top: 2px;
}
.tema-2026 .ulasan-geser::-webkit-scrollbar { display: none; }
.tema-2026 .ulasan-geser .tarif { flex: 0 0 78%; scroll-snap-align: start; }
@media (min-width: 760px) { .tema-2026 .ulasan-geser .tarif { flex: 0 0 32%; } }
/* Wizard/kartu ajukan */
.tema-2026 .opsi-baris { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tema-2026 .opsi-baris.tiga { grid-template-columns: 1fr 1fr 1fr; }
.tema-2026 .opsi {
  display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 11px;
  background: var(--tj-surface-2); box-shadow: 0 0 0 1px var(--tj-line); padding: 11px 10px;
  cursor: pointer; font-size: 12.5px; font-weight: 600; text-align: center; margin: 0;
}
.tema-2026 .opsi input { position: absolute; opacity: 0; pointer-events: none; }
.tema-2026 .opsi small { display: block; font-size: 10px; color: var(--tj-muted); font-weight: 400; }
.tema-2026 .opsi:has(input:checked) { box-shadow: 0 0 0 2px var(--tj-cta); background: color-mix(in srgb, var(--tj-cta) 9%, var(--tj-surface-2)); }
.tema-2026 .f-in select, .tema-2026 .f-in textarea {
  width: 100%; border-radius: 12px; border: 0; padding: 11px 14px; font: inherit; font-size: 13px;
  background: color-mix(in srgb, var(--tj-surface-2) 78%, var(--tj-bg)); color: var(--tj-text);
  box-shadow: 0 0 0 1px var(--tj-line);
}
.tema-2026 .f-in select:focus, .tema-2026 .f-in textarea:focus { outline: 0; box-shadow: 0 0 0 2px var(--tj-cta); }
.tema-2026 .kalk {
  margin-top: 12px; border-radius: 12px; padding: 12px 14px; background: var(--tj-surface);
  box-shadow: 0 0 0 1px var(--tj-line); font-size: 12.5px;
}
.tema-2026 .kalk .baris { display: flex; justify-content: space-between; margin-top: 5px; color: var(--tj-muted); }
.tema-2026 .kalk .baris b { color: var(--tj-text); font-variant-numeric: tabular-nums; }
.tema-2026 .kalk .total { border-top: 1px solid var(--tj-line); margin-top: 9px; padding-top: 9px; font-weight: 800; color: var(--tj-text); }
.tema-2026 .kalk .total b { color: var(--tj-cta); font-size: 15px; }
.tema-2026 .unggah {
  display: block; border: 1.5px dashed var(--tj-line); border-radius: 12px; padding: 14px;
  text-align: center; font-size: 12px; color: var(--tj-muted); cursor: pointer; margin-top: 6px;
}
/* Room lacak */
.tema-2026 .tahap-bar { display: flex; gap: 5px; margin-top: 14px; }
.tema-2026 .tahap-bar .t { flex: 1; }
.tema-2026 .tahap-bar .bar { height: 4px; border-radius: 99px; background: var(--tj-surface-2); box-shadow: 0 0 0 1px var(--tj-line); }
.tema-2026 .tahap-bar .t.ok .bar { background: linear-gradient(to right, color-mix(in oklch, var(--tj-ok), white 10%), var(--tj-ok)); box-shadow: none; }
.tema-2026 .tahap-bar .lbl { font-size: 8.5px; font-weight: 700; letter-spacing: .03em; color: var(--tj-muted); margin-top: 5px; line-height: 1.25; }
.tema-2026 .tahap-bar .t.ok .lbl { color: var(--tj-ok); }
.tema-2026 .status-panel { margin-top: 14px; border-radius: 14px; padding: 13px 14px; background: var(--tj-surface); box-shadow: 0 0 0 1px var(--tj-line); }
.tema-2026 .status-panel .kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: var(--tj-cta); }
.tema-2026 .status-panel p { font-size: 12.5px; color: var(--tj-muted); margin-top: 5px; line-height: 1.55; }
.tema-2026 .room-chat {
  margin-top: 14px; border-radius: 16px; background: var(--tj-surface); box-shadow: 0 0 0 1px var(--tj-line);
  display: flex; flex-direction: column; overflow: hidden;
}
.tema-2026 .room-chat .isi-chat {
  padding: 14px; display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto;
  background: radial-gradient(140% 100% at 100% 0%, rgba(47, 49, 139, .14), transparent 55%), var(--tj-bg);
}
.tema-2026 .bubble { position: relative; max-width: 82%; border-radius: 14px; padding: 9px 12px; font-size: 12.5px; line-height: 1.5; align-self: flex-start; border-bottom-left-radius: 4px; }
.tema-2026 .bubble .siapa { display: flex; gap: 8px; align-items: baseline; font-size: 10.5px; font-weight: 700; margin-bottom: 3px; }
.tema-2026 .bubble .siapa .waktu { color: var(--tj-muted); font-weight: 400; font-size: 9.5px; margin-left: auto; padding-left: 10px; }
.tema-2026 .bubble--kanan { align-self: flex-end; border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; }
.tema-2026 .bubble--pembeli { background: color-mix(in srgb, var(--tj-cta) 15%, var(--tj-surface-2)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tj-cta) 32%, transparent); }
.tema-2026 .bubble--pembeli .siapa span:first-child { color: var(--tj-cta); }
.tema-2026 .bubble--penjual { background: color-mix(in srgb, var(--tj-ok) 13%, var(--tj-surface-2)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tj-ok) 32%, transparent); }
.tema-2026 .bubble--penjual .siapa span:first-child { color: var(--tj-ok); }
.tema-2026 .bubble--admin { background: color-mix(in srgb, var(--tj-brand-lite) 13%, var(--tj-surface-2)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tj-brand-lite) 32%, transparent); }
.tema-2026 .bubble--admin .siapa span:first-child { color: var(--tj-brand-lite); }
.tema-2026 .bubble--sistem {
  align-self: center; text-align: center; font-size: 11px; font-weight: 600;
  color: #C9CBE0; background: var(--tj-surface-2); border-radius: 999px; padding: 6px 14px;
  box-shadow: 0 0 0 1px var(--tj-line); max-width: 92%;
}
.tema-2026 .bubble--aksi {
  align-self: center; max-width: 92%; width: 100%; text-align: center;
  background: color-mix(in srgb, var(--tj-cta) 8%, var(--tj-surface)); border-radius: 14px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tj-cta) 35%, transparent); padding: 12px;
}
.tema-2026 .bubble--aksi .tj-btn { width: 100%; height: 40px; margin-top: 9px; }
.tema-2026 .bubble--aksi .ket { font-size: 11px; color: var(--tj-muted); margin-top: 7px; line-height: 1.5; }
.tema-2026 .tulis-pesan { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--tj-line); background: var(--tj-surface); }
.tema-2026 .tulis-pesan textarea {
  flex: 1; min-width: 0; border: 0; border-radius: 12px; padding: 10px 13px; font: inherit;
  font-size: 13px; resize: none; background: color-mix(in srgb, var(--tj-surface-2) 78%, var(--tj-bg));
  color: var(--tj-text); box-shadow: 0 0 0 1px var(--tj-line);
}
.tema-2026 .tulis-pesan textarea:focus { outline: 0; box-shadow: 0 0 0 2px var(--tj-cta); }
.tema-2026 .pihak-baris { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--tj-line); font-size: 12.5px; }
.tema-2026 .pihak-baris:last-child { border-bottom: 0; }
.tema-2026 .pihak-baris .hrf {
  width: 34px; height: 34px; border-radius: 99px; flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 800; color: #fff;
  background: linear-gradient(to bottom, color-mix(in oklch, var(--tj-brand), white 18%), var(--tj-brand));
}
.tema-2026 .pihak-baris .hrf.aktif { background: linear-gradient(to bottom, color-mix(in oklch, var(--tj-cta), white 15%), var(--tj-cta)); }
.tema-2026 .pihak-baris b { display: block; font-size: 12.5px; }
.tema-2026 .pihak-baris small { display: block; font-size: 10.5px; color: var(--tj-muted); }
/* Rekber room: bubble aturan + sheet peraturan + panel sengketa (comp) */
.tema-2026 .status-panel.merah .kicker { color: #E66; }
.tema-2026 .status-panel.merah { box-shadow: 0 0 0 1px rgba(220, 60, 60, .4); }
.tema-2026 .bubble--aturan {
  align-self: center; max-width: 92%; width: 100%; background: rgba(184, 155, 120, .07);
  border-radius: 14px; padding: 12px; box-shadow: 0 0 0 1px rgba(184, 155, 120, .28);
}
.tema-2026 .bubble--aturan .kepala-a { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: #D9C3A5; }
.tema-2026 .bubble--aturan ol { margin: 7px 0 0; padding-left: 18px; font-size: 11.5px; color: var(--tj-muted); line-height: 1.6; }
.tema-2026 .bubble--aturan .tj-btn { width: 100%; height: 32px; margin-top: 9px; font-size: 12px; }
.tema-2026 .sheet-latar {
  display: none; position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(3px); align-items: center; justify-content: center; padding: 20px;
}
.tema-2026 .sheet-latar.buka { display: flex; }
.tema-2026 .sheet-aturan {
  width: 100%; max-width: 420px; background: var(--tj-surface); border-radius: 18px; padding: 16px;
  box-shadow: 0 0 0 1px var(--tj-line), 0 18px 50px rgba(0, 0, 0, .55); max-height: 78vh; overflow-y: auto;
}
.tema-2026 .sheet-aturan h3 { font-size: 14px; font-weight: 800; display: flex; align-items: center; margin-bottom: 4px; }
.tema-2026 .sheet-aturan .tutup {
  margin-left: auto; width: 28px; height: 28px; border-radius: 99px; border: 0; cursor: pointer;
  background: var(--tj-surface-2); box-shadow: 0 0 0 1px var(--tj-line); color: var(--tj-muted); font-size: 13px; font-weight: 700;
}
.tema-2026 .aturan-item { display: flex; gap: 10px; margin-top: 12px; font-size: 12.5px; line-height: 1.55; }
.tema-2026 .aturan-item .no {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 800; color: #fff;
  background: linear-gradient(to bottom, color-mix(in oklch, var(--tj-cta), white 15%), var(--tj-cta));
}
.tema-2026 .aturan-item b { color: var(--tj-text); }
.tema-2026 .aturan-item span { color: var(--tj-muted); }
/* Rekber room gelombang 3: bubble rekening/lampiran/kunci + salin (comp) */
.tema-2026 .bubble--rek {
  align-self: center; max-width: 92%; width: 100%; padding: 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--tj-brand-lite) 8%, var(--tj-surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tj-brand-lite) 35%, transparent);
}
.tema-2026 .bubble--rek .kepala-rek {
  display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .06em; color: var(--tj-brand-lite);
}
.tema-2026 .bubble--rek .norek {
  display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 9px 11px;
  border-radius: 10px; background: rgba(8, 9, 15, .35); box-shadow: 0 0 0 1px var(--tj-line);
}
.tema-2026 .bubble--rek .norek b { font-size: 14px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.tema-2026 .bubble--rek .norek small { display: block; font-size: 10.5px; color: var(--tj-muted); }
.tema-2026 .btn-salin-kecil {
  flex-shrink: 0; width: 30px; height: 30px; border: 0; border-radius: 9px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: var(--tj-muted);
  background: var(--tj-surface-2); box-shadow: 0 0 0 1px var(--tj-line); margin-left: auto;
}
.tema-2026 .btn-salin-kecil:hover { color: var(--tj-text); }
.tema-2026 .pilih-tujuan { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.tema-2026 .pilih-tujuan button {
  font: inherit; font-size: 11.5px; font-weight: 700; padding: 7px 12px; border-radius: 999px;
  border: 0; cursor: pointer; color: var(--tj-muted); background: var(--tj-surface-2);
  box-shadow: 0 0 0 1px var(--tj-line);
}
.tema-2026 .pilih-tujuan button.on {
  color: #fff;
  background: linear-gradient(to bottom, color-mix(in oklch, var(--tj-brand), white 18%), var(--tj-brand));
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--tj-brand), black 15%);
}
.tema-2026 .bubble--rek .total-rek { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--tj-muted); }
.tema-2026 .bubble--rek .total-rek b { color: var(--tj-cta); font-size: 13px; white-space: nowrap; }
.tema-2026 .bubble .lampiran-dok {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 8px 11px;
  border-radius: 10px; background: rgba(8, 9, 15, .35); box-shadow: 0 0 0 1px var(--tj-line);
  font-size: 12px; font-weight: 600; max-width: 100%; color: inherit; text-decoration: none;
}
.tema-2026 .bubble .lampiran-img {
  display: block; max-width: 200px; width: 100%; border-radius: 10px; margin-top: 6px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
}
.tema-2026 .btn-lampir {
  width: 38px; flex-shrink: 0; border: 0; border-radius: 12px; cursor: pointer; font-size: 16px;
  color: var(--tj-muted); background: color-mix(in srgb, var(--tj-surface-2) 78%, var(--tj-bg));
  box-shadow: 0 0 0 1px var(--tj-line);
}
.tema-2026 .btn-lampir:hover { color: var(--tj-text); }
.tema-2026 .tombol-kunci {
  width: 38px; flex-shrink: 0; border: 0; border-radius: 12px; cursor: pointer; font-size: 14px;
  color: var(--tj-muted); background: color-mix(in srgb, var(--tj-surface-2) 78%, var(--tj-bg));
  box-shadow: 0 0 0 1px var(--tj-line);
}
.tema-2026 .tombol-kunci.on { color: var(--tj-brand-lite); box-shadow: 0 0 0 2px var(--tj-brand-lite); }
.tema-2026 .bubble--kunci { outline: 1.5px dashed color-mix(in srgb, var(--tj-brand-lite) 45%, transparent); outline-offset: 2px; }
.tema-2026 .chip-kunci {
  display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 800;
  letter-spacing: .05em; color: var(--tj-brand-lite); margin-bottom: 4px;
}
/* ===== Bantuan (kontrak comp-bantuan-v1-KUNCI) ===== */
.tema-2026 .b-hero {
  margin-top: 14px; border-radius: 18px; padding: 16px; position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 88% -10%, rgba(47, 49, 139, .35), rgba(11, 12, 20, 0) 60%),
    linear-gradient(180deg, var(--tj-surface-2), var(--tj-surface));
  border: 1px solid var(--tj-line);
}
.tema-2026 .b-hero h1 { font-size: 21px; font-weight: 800; line-height: 1.2; }
.tema-2026 .b-hero p { font-size: 12.5px; color: var(--tj-muted); margin-top: 6px; line-height: 1.55; }
.tema-2026 .b-hero p a { color: var(--tj-brand-lite); font-weight: 600; }
.tema-2026 .chip-topik { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-top: 12px; padding-bottom: 4px; }
.tema-2026 .chip-topik::-webkit-scrollbar { display: none; }
.tema-2026 .chip-topik a {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  padding: 8px 13px; border-radius: 999px; background: var(--tj-surface-2);
  box-shadow: 0 0 0 1px var(--tj-line); color: var(--tj-text);
}
.tema-2026 .chip-topik a svg { color: var(--tj-cta); flex-shrink: 0; }
.tema-2026 .tj-sec-head .ikon {
  width: 26px; height: 26px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; background: rgba(139, 143, 242, .12);
  box-shadow: 0 0 0 1px rgba(139, 143, 242, .3); color: var(--tj-brand-lite);
}
@media (min-width: 760px) { .tema-2026 .langkah-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; } }
/* Tombol WhatsApp (resep Kumo hijau) — dipakai bantuan & CTA WA lain. */
.tema-2026 .tj-btn-wa {
  color: #fff;
  background: linear-gradient(to bottom, #2ea86a, #1f8f57);
  box-shadow: 0 0 0 1px #177244, inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 0, 0, .45);
}
.tema-2026 .tj-btn-wa:hover { filter: brightness(1.07); }

/* Logo kanal bayar di akordeon: banyak PNG transparan berseni gelap
   (QRIS dsb) tak terbaca di kartu gelap — beri chip putih (veto pemilik). */
.tema-2026 .list-group1 .list-group-item .info-top img {
  background: #fff; border-radius: 6px; padding: 3px 6px;
}

/* Order: penyetaraan tipografi ke comp (veto pemilik 12 Agu). */
.tema-2026 .tj-gamehead p { font-weight: 400 !important; }        /* .gs comp: normal, bukan light */
.tema-2026 h4.card-titel { font-size: 14px !important; }          /* .kartu h2 comp */
.tema-2026 .sale-price, .tema-2026 .regular-price,
.tema-2026 .text-white.meltih { font-size: 12px !important; }     /* .nh comp */

/* Logo produk hero: efek miring 3D warisan dimatikan — comp lurus
   (veto pemilik 12 Agu). */
.tema-2026 .product-thumbnail-container img { transform: none !important; }

/* ===== Order langkah #3 (revisi): HANYA jarak VERTIKAL yang dirapatkan —
   kolom kiri-kanan tidak disentuh (grid-cols-3 gap-8 tetap; veto pemilik:
   "kiri kanan udah pas"). space-y-8 (32px) -> gap 14px ala comp. ===== */
.tema-2026 .tj-rapat { gap: 14px !important; }
.tema-2026 .tj-rapat > * { margin-top: 0 !important; }
/* Order: tiga lapis padding-top menumpuk (card-body 16 + .row pt-3 16 +
   #region-filter pt-3 16 = 48px) bikin PILIH REGION menggantung jauh dari
   kepala kartu — sisakan satu lapis (veto pemilik 12 Agu). */
.tema-2026 .card-body > .row:has(#region-filter) { padding-top: 0 !important; }
.tema-2026 #region-filter { padding-top: 0 !important; }
/* Baris pil kategori paket: desktop MEMBUNGKUS (nowrap tak bisa digeser
   mouse & pil ujung terpotong — penyakit sama dengan pil region). */
@media (min-width: 760px) {
  .tema-2026 .row:has(> div > .btn-category) { flex-wrap: wrap !important; overflow-x: visible; row-gap: 6px; }
}
/* Kartu kanal bayar: teks .text-dark warisan (untuk kartu putih lama) nyaris
   hitam di kartu gelap + latar drawer abu inline — terangkan (veto pemilik). */
.tema-2026 .button-action-payment { background: transparent !important; }
.tema-2026 .list-group1 .list-group-item .text-dark,
.tema-2026 .list-group1 .list-group-item h6 { color: var(--tj-text) !important; }
.tema-2026 .list-group1 .list-group-item .italic { color: var(--tj-muted) !important; font-size: 11px; }
/* Harga per kanal (diisi changeHarga saat nominal dipilih) — oranye comp. */
.tema-2026 .list-group1 .list-group-item .info-bottom .selected-order,
.tema-2026 .list-group1 .list-group-item .glowing-text { color: var(--tj-cta) !important; font-weight: 800; }
/* Kartu kanal bayar DIANGKAT lebih terang: surface-2 terlalu dekat dgn kartu
   induk sehingga tetap terasa gelap (veto pemilik ronde 2). */
.tema-2026 .list-group1 input[type="radio"] + .list-group-item {
  background-color: color-mix(in oklch, var(--tj-surface-2), white 8%) !important;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--tj-line), white 12%);
}
.tema-2026 .list-group1 input[type="radio"] + .list-group-item:hover {
  background-color: color-mix(in oklch, var(--tj-surface-2), white 13%) !important;
}
/* Kanal TERPILIH ikut dasar terang: aturan checked lama masih mencampur dari
   surface-2 gelap sehingga kartu balik gelap saat diklik (veto pemilik). */
.tema-2026 .list-group1 input[type="radio"]:checked + .list-group-item {
  background: color-mix(in oklch, color-mix(in oklch, var(--tj-surface-2), white 8%), var(--tj-cta) 12%) !important;
}
/* Nominal TERPILIH ikut dasar terang — penyakit sama dengan kanal bayar
   (campuran checked lama dari surface-2 gelap; veto pemilik). */
.tema-2026 .list-group input[type="radio"]:checked + label.list-group-item,
.tema-2026 .list-group input[type="radio"]:checked + .list-group-item {
  background: color-mix(in oklch, color-mix(in oklch, var(--tj-surface-2), white 8%), var(--tj-cta) 12%) !important;
}
/* Kartu NOMINAL belum-dipilih ikut diangkat terang — kemarin hanya kartu
   kanal bayar yang diangkat, nominal tertinggal gelap (veto pemilik 12 Agu). */
.tema-2026 .list-group input[type="radio"] + label.list-group-item,
.tema-2026 #tempatNominal .list-group .list-group-item {
  background: color-mix(in oklch, var(--tj-surface-2), white 8%) !important;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--tj-line), white 12%);
}
.tema-2026 .list-group input[type="radio"] + label.list-group-item:hover {
  background: color-mix(in oklch, var(--tj-surface-2), white 13%) !important;
}
/* Terpilih tetap paling terang (aturan sebelumnya menang karena :checked
   lebih spesifik dan berada lebih bawah). */
.tema-2026 .list-group input[type="radio"]:checked + label.list-group-item,
.tema-2026 .list-group input[type="radio"]:checked + .list-group-item {
  background: color-mix(in oklch, color-mix(in oklch, var(--tj-surface-2), white 8%), var(--tj-cta) 12%) !important;
}
/* Varian ber-#id supaya menang atas aturan belum-dipilih ber-#id di atas. */
.tema-2026 #tempatNominal .list-group input[type="radio"]:checked + label.list-group-item,
.tema-2026 #tempatNominal .list-group input[type="radio"]:checked + .list-group-item {
  background: color-mix(in oklch, color-mix(in oklch, var(--tj-surface-2), white 8%), var(--tj-cta) 12%) !important;
}
/* Keadaan TERPILIH lengkap (ring oranye + teks terang) pada kekuatan #id —
   aturan ring/warna lama kalah dari aturan belum-dipilih ber-#id sehingga
   saat diklik ringnya abu & judul kebiruan (veto pemilik ronde 3). */
.tema-2026 #tempatNominal .list-group input[type="radio"]:checked + label.list-group-item,
.tema-2026 #tempatNominal .list-group input[type="radio"]:checked + .list-group-item {
  background: color-mix(in oklch, color-mix(in oklch, var(--tj-surface-2), white 10%), var(--tj-cta) 14%) !important;
  box-shadow: 0 0 0 2px var(--tj-cta) !important;
}
.tema-2026 #tempatNominal .list-group input[type="radio"]:checked + .list-group-item .hayutopup-prod,
.tema-2026 #tempatNominal .list-group .list-group-item .hayutopup-prod {
  color: var(--tj-text) !important;
}
/* Pil paket halaman TANPA region (voucher dkk): lapis padding yang sama
   (row pt-3 + row pt-3 = 32px) — rapatkan seperti halaman ber-region. */
.tema-2026 .card-body > .row:has(.btn-category) { padding-top: 0 !important; }
.tema-2026 .card-body > .row:has(.btn-category) .row:has(> div > .btn-category) { padding-top: 0 !important; }
/* Baris pil region & paket di HP: beri napas tepi supaya pil ujung tidak
   menempel/terpotong bibir wadah gulir (veto pemilik). */
.tema-2026 #region-filter .d-flex.flex-wrap,
.tema-2026 .row:has(> div > .btn-category) {
  padding-left: 4px !important; padding-right: 4px !important;
  scroll-padding-left: 4px;
}
/* Catatan kartu 1: URL contoh panjang tanpa spasi meluber keluar kotak
   (RF Online dkk) — patahkan di mana pun perlu (veto pemilik). */
.tema-2026 .note-text {
  overflow-wrap: anywhere; word-break: break-word; min-width: 0;
}

/* Modal Panduan Pembayaran (tombol ? di kartu 1) — kulit tema + URL patah. */
.tema-2026 #petunjukModal .modal-content {
  background: var(--tj-surface) !important; border-radius: 16px !important;
  box-shadow: 0 0 0 1px var(--tj-line), 0 18px 50px rgba(0, 0, 0, .55) !important;
  color: var(--tj-text);
}
.tema-2026 #petunjukModal .panduan-icon {
  background: linear-gradient(to bottom, color-mix(in oklch, var(--tj-cta), white 15%), var(--tj-cta)) !important;
}
.tema-2026 #petunjukModal .panduan-title { color: var(--tj-text) !important; }
.tema-2026 #petunjukModal .panduan-subtitle { color: var(--tj-muted) !important; }
.tema-2026 #petunjukModal .panduan-list li {
  font-size: 12.5px; color: var(--tj-muted); overflow-wrap: anywhere;
}
.tema-2026 #petunjukModal .panduan-list .panduan-judul {
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--tj-cta); margin-top: 10px; list-style: none;
}
.tema-2026 #petunjukModal .step-number {
  background: var(--tj-surface-2) !important; color: var(--tj-text) !important;
  box-shadow: 0 0 0 1px var(--tj-line);
}
.tema-2026 #petunjukModal .btn-close-icon {
  background: var(--tj-surface-2) !important; color: var(--tj-muted) !important;
  box-shadow: 0 0 0 1px var(--tj-line);
}
/* Pelicinan font = bawaan browser, seperti SEMUA comp (yang tak pernah
   menyetelnya): warisan memaksa antialiased sehingga huruf terasa lebih
   kurus dari comp — "font beda" yang dirasa pemilik 12 Agu. */
body.tema-2026, .tema-2026 * {
  -webkit-font-smoothing: auto !important;
  -moz-osx-font-smoothing: auto !important;
}
/* Nominal/kanal TERPILIH: isi kartu SAMA dengan belum-dipilih — pembeda
   hanya ring oranye + centang (veto pemilik: campuran cta 14% terasa
   kemerahan; comp cuma garis luar oranye). */
.tema-2026 #tempatNominal .list-group input[type="radio"]:checked + label.list-group-item,
.tema-2026 #tempatNominal .list-group input[type="radio"]:checked + .list-group-item,
.tema-2026 .list-group input[type="radio"]:checked + label.list-group-item,
.tema-2026 .list-group1 input[type="radio"]:checked + .list-group-item {
  /* Semburat cta 5% (veto pemilik ronde 4): comp memang punya sedikit
     kehangatan di tengah, tapi 14% kemarin kemerahan. */
  background: color-mix(in oklch, color-mix(in oklch, var(--tj-surface-2), white 8%), var(--tj-cta) 5%) !important;
  box-shadow: 0 0 0 2px var(--tj-cta) !important;
}

/* Penjaga FOUC halaman order (veto pemilik 12 Agu): aturan kritis ini
   tadinya hanya ada di order-styles.css yang dimuat ASINKRON (174KB, demi
   LCP) — sebelum ia tiba, radio mentah & kartu telanjang sempat berkedip
   saat refresh. Duplikat kecil di sini (blocking) menutup kedipannya. */
.tema-2026 .list-group input[type="radio"],
.tema-2026 .list-group1 input[type="radio"] { display: none; }
.tema-2026 .list-group input[type="radio"] + .list-group-item {
  text-align: left; cursor: pointer; font-size: 12px; display: block;
}
.tema-2026 .list-group1 input[type="radio"] + .list-group-item { cursor: pointer; display: block; }
/* Sela antara blok region dan pil paket (veto pemilik): hanya halaman
   ber-region yang butuh — halaman tanpa region sudah pas. */
.tema-2026 #region-filter { padding-bottom: 12px !important; }

/* Badge waktu proses nyata di invoice (23 Agu 2026) — pil hijau, sewarna ikon sukses. */
.tema-2026 .tj-durasi-proses {
  display: inline-flex; align-items: center; gap: .45rem;
  margin: 0 auto 1rem; padding: .3rem .8rem;
  border: 1px solid rgba(52, 199, 123, .45); border-radius: 999px;
  background: rgba(52, 199, 123, .1); color: #1f9a5d;
  font-size: .85rem; font-weight: 600;
}
.tema-2026 .tj-durasi-proses span { color: #34C77B; font-size: .6rem; }
.tema-2026 .tj-durasi-proses b { font-weight: 700; font-variant-numeric: tabular-nums; }
.tema-2026 .tj-durasi-batal, .tema-2026 .tj-durasi-lama {
  border-color: rgba(224, 91, 91, .45); background: rgba(224, 91, 91, .1); color: #b93c3c;
}
.tema-2026 .tj-durasi-batal span, .tema-2026 .tj-durasi-lama span { color: #E05B5B; }

/* Modal Testimoni Rating di invoice — tampil tepat di tengah layar (mobile & desktop) */
.tema-2026 #rating.modal {
  padding-left: 0 !important;
  z-index: 1055 !important;
}
.tema-2026 #rating.modal.show {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.tema-2026 #rating .modal-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92%;
  max-width: 440px;
  margin: 1.5rem auto;
  pointer-events: auto;
}
@media (max-width: 575.98px) {
  .tema-2026 #rating .modal-dialog {
    margin: 1rem auto;
    width: 94%;
  }
}
.tema-2026 #rating .modal-content {
  width: 100%;
  border-radius: 20px;
  border: 1px solid var(--tj-line, rgba(255, 255, 255, 0.12));
  background: var(--tj-surface, #131522);
  color: var(--tj-text, #EDEEF6);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65);
  overflow: hidden;
}
.tema-2026 #rating .modal-header {
  border-bottom: 1px solid var(--tj-line, rgba(255, 255, 255, 0.08));
  padding: 16px 20px;
}
.tema-2026 #rating .modal-title {
  color: var(--tj-text, #EDEEF6);
  font-weight: 700;
  font-size: 1.15rem;
}
.tema-2026 #rating .modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.7;
}
.tema-2026 #rating .modal-header .btn-close:hover {
  opacity: 1;
}
.tema-2026 #rating .modal-body {
  padding: 20px;
  text-align: left;
}
.tema-2026 #rating .modal-footer {
  border-top: 1px solid var(--tj-line, rgba(255, 255, 255, 0.08));
  padding: 14px 20px;
}
.tema-2026 #rating .star-rating {
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 32px;
  margin: 10px 0 16px;
  color: var(--tj-cta, #F08519);
  cursor: pointer;
}
.tema-2026 #rating .star-rating .bintang {
  transition: transform 0.15s ease, color 0.15s ease;
}
.tema-2026 #rating .star-rating .bintang:hover {
  transform: scale(1.15);
}
.tema-2026 #rating textarea.form-control {
  background: var(--tj-surface-2, #1A1D2E) !important;
  color: var(--tj-text, #EDEEF6) !important;
  border: 1px solid var(--tj-line, rgba(255, 255, 255, 0.12)) !important;
  border-radius: 12px;
}


/* ---------- tombol hamburger navbar mobile ---------- */
.tema-2026 .tj-btn-hamburger {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--tj-surface-2); border: 1px solid var(--tj-line);
  color: var(--tj-text); cursor: pointer; flex-shrink: 0; padding: 0;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.tema-2026 .tj-btn-hamburger:hover, .tema-2026 .tj-btn-hamburger:focus {
  background: #22263a; color: var(--tj-cta); border-color: var(--tj-brand-lite);
}
.tema-2026 .tj-btn-hamburger svg { width: 20px; height: 20px; }
@media (min-width: 760px) {
  .tema-2026 .tj-btn-hamburger { display: none !important; }
}

/* ---------- mobile nav drawer (hamburger menu) ---------- */
.tj-drawer-backdrop {
  position: fixed; inset: 0; z-index: 1040;
  background: rgba(5, 6, 12, 0.72);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}
.tj-drawer-backdrop.buka { opacity: 1; visibility: visible; pointer-events: auto; }

.tj-nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 85%; max-width: 320px;
  z-index: 1050; background: #0c0e17;
  border-left: 1px solid var(--tj-line);
  box-shadow: -10px 0 35px rgba(0, 0, 0, .6);
  display: flex; flex-direction: column;
  transform: translateX(100%); pointer-events: none;
  transition: transform .28s cubic-bezier(0.16, 1, 0.3, 1);
}
.tj-nav-drawer.buka { transform: translateX(0); pointer-events: auto; }

.tj-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  height: 58px; padding: 0 18px; border-bottom: 1px solid var(--tj-line);
}
.tj-drawer-brand img { height: 26px; width: auto; }
.tj-btn-drawer-close {
  background: transparent; border: none; font-size: 26px; line-height: 1;
  color: var(--tj-muted); cursor: pointer; padding: 6px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.tj-btn-drawer-close:hover { color: var(--tj-text); background: var(--tj-surface-2); }

.tj-drawer-body {
  flex: 1; overflow-y: auto; padding: 16px 14px 24px;
  display: flex; flex-direction: column; gap: 20px;
}
.tj-drawer-sec-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tj-muted); margin-bottom: 8px; padding-left: 6px;
}
.tj-drawer-nav { display: flex; flex-direction: column; gap: 4px; }
.tj-drawer-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  color: var(--tj-text); text-decoration: none; font-size: 14px; font-weight: 600;
  transition: background .15s ease, color .15s ease;
}
.tj-drawer-link:hover, .tj-drawer-link.on {
  background: var(--tj-surface-2); color: var(--tj-cta);
}
.tj-drawer-link svg { width: 19px; height: 19px; }
.tj-drawer-link-text { flex: 1; }
.tj-drawer-link .tj-badge-baru {
  font-size: 9.5px; font-weight: 800; padding: 1px 6px; border-radius: 99px;
  background: var(--tj-cta); color: #fff;
}

.tj-drawer-footer {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--tj-line);
}
.tj-drawer-auth-btns { display: flex; flex-direction: column; gap: 8px; }
.tj-drawer-auth-btns .tj-btn { width: 100%; justify-content: center; height: 38px; font-size: 13.5px; }

.tj-drawer-user-card {
  background: var(--tj-surface); border: 1px solid var(--tj-line); border-radius: 12px;
  padding: 12px; display: flex; flex-direction: column; gap: 8px;
}
.tj-drawer-user-info small { color: var(--tj-muted); font-size: 11px; display: block; }
.tj-drawer-user-info b { color: var(--tj-text); font-size: 14px; }
.tj-drawer-saldo a {
  display: inline-block; color: #4ade80; font-weight: 700; font-size: 13px; text-decoration: none;
}
.tj-drawer-user-actions { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.tj-drawer-logout-btn { width: 100%; justify-content: center; color: #ef4444 !important; }

/* ══════════════════════════════════════════════════════════════════
   VOUCHER BATCH REDEEM (Wavegame & Multi-voucher) - PREMIUM 2026
   ══════════════════════════════════════════════════════════════════ */
.tema-2026 .tj-voucher-container {
  padding: 16px;
  margin: 12px 0 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--tj-line);
  border-radius: 16px;
  position: relative;
}

@media (max-width: 640px) {
  .tema-2026 .tj-voucher-container {
    padding: 12px 10px;
    margin: 10px 0 14px;
    border-radius: 14px;
  }
}

.tema-2026 .tj-voucher-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.tema-2026 .tj-voucher-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tema-2026 .tj-voucher-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(240, 133, 25, 0.12);
  border: 1px solid rgba(240, 133, 25, 0.25);
  color: var(--tj-cta);
  flex-shrink: 0;
}

.tema-2026 .tj-voucher-title-text {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tema-2026 .tj-voucher-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}

.tema-2026 .tj-link-portal {
  font-size: 12.5px;
  font-weight: 700;
  color: #FFA240;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(240, 133, 25, 0.18) 0%, rgba(240, 133, 25, 0.08) 100%);
  border: 1px solid rgba(240, 133, 25, 0.4);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.tema-2026 .tj-link-portal:hover {
  background: linear-gradient(180deg, rgba(240, 133, 25, 0.3) 0%, rgba(240, 133, 25, 0.15) 100%);
  color: #fff;
  border-color: rgba(240, 133, 25, 0.6);
  box-shadow: 0 4px 14px rgba(240, 133, 25, 0.3);
  transform: translateY(-1px);
}

@media (max-width: 520px) {
  .tema-2026 .tj-link-portal {
    width: 100%;
    padding: 8px 14px;
  }
}

/* Alert Tips Banner */
.tema-2026 .tj-voucher-alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(240, 133, 25, 0.06);
  border: 1px solid rgba(240, 133, 25, 0.22);
  margin-bottom: 12px;
  font-size: 12px;
  line-height: 1.5;
}

.tema-2026 .tj-voucher-alert-icon {
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1.2;
}

.tema-2026 .tj-voucher-alert-text {
  color: var(--tj-text);
}

.tema-2026 .tj-voucher-alert-text strong {
  display: block;
  margin-bottom: 2px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.tema-2026 .tj-voucher-alert-text p {
  margin: 0;
  color: #cbd5e1;
  font-size: 11.5px;
}

/* Batch Navigation Pills */
.tema-2026 .tj-voucher-batch-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}

.tema-2026 .tj-batch-pill {
  flex-shrink: 0;
  border: 1px solid var(--tj-line);
  background: var(--tj-surface-2);
  color: var(--tj-muted);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tema-2026 .tj-batch-pill:hover {
  color: var(--tj-text);
  border-color: rgba(255, 255, 255, 0.25);
}

.tema-2026 .tj-batch-pill.aktif {
  background: var(--tj-cta);
  color: #fff;
  border-color: var(--tj-cta);
  box-shadow: 0 2px 8px rgba(240, 133, 25, 0.35);
}

/* Hero Batch Card */
.tema-2026 .tj-voucher-batch-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--tj-line);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

@media (max-width: 640px) {
  .tema-2026 .tj-voucher-batch-card {
    padding: 10px 10px;
  }
}

.tema-2026 .tj-voucher-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--tj-muted);
  font-weight: 600;
}

.tema-2026 .tj-voucher-hint-badge {
  font-size: 11px;
  color: var(--tj-muted);
  background: rgba(255, 255, 255, 0.04);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.tema-2026 .tj-voucher-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

@media (max-width: 320px) {
  .tema-2026 .tj-voucher-actions-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .tema-2026 .tj-hide-compact {
    display: none;
  }
}

.tema-2026 .tj-btn-batch-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid rgba(240, 133, 25, 0.35);
  background: linear-gradient(180deg, rgba(240, 133, 25, 0.16) 0%, rgba(240, 133, 25, 0.08) 100%);
  color: #FFA240;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 40px;
  width: 100%;
}

.tema-2026 .tj-btn-batch-copy:hover {
  background: var(--tj-cta);
  color: #fff;
  border-color: var(--tj-cta);
  box-shadow: 0 4px 12px rgba(240, 133, 25, 0.3);
  transform: translateY(-1px);
}

.tema-2026 .tj-btn-batch-copy.berhasil {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important;
  color: #fff !important;
  border-color: #16a34a !important;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35) !important;
  transform: none !important;
}

.tema-2026 .tj-voucher-secondary-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.tema-2026 .tj-btn-outline-copy {
  background: transparent;
  border: 1px solid var(--tj-line);
  color: var(--tj-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tema-2026 .tj-btn-outline-copy:hover {
  color: var(--tj-text);
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.04);
}

.tema-2026 .tj-btn-outline-copy.berhasil {
  color: var(--tj-ok) !important;
  border-color: var(--tj-ok) !important;
}

/* Individual Voucher Items Container */
.tema-2026 .tj-voucher-table-wrap {
  border: 1px solid var(--tj-line);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 12px;
  background: var(--tj-surface);
}

.tema-2026 .tj-voucher-table-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--tj-line);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--tj-muted);
}

.tema-2026 .tj-btn-filter-toggle {
  background: transparent;
  border: 0;
  color: var(--tj-cta);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  transition: color 0.15s ease;
}

.tema-2026 .tj-btn-filter-toggle:hover {
  text-decoration: underline;
  color: #FFA240;
}

/* Desktop Table View */
.tema-2026 .tj-voucher-desktop-view {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tema-2026 .tj-voucher-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.tema-2026 .tj-voucher-table th {
  background: rgba(255, 255, 255, 0.02);
  color: var(--tj-muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--tj-line);
}

.tema-2026 .tj-voucher-table td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: middle;
}

.tema-2026 .tj-voucher-table tr:last-child td {
  border-bottom: 0;
}

.tema-2026 .tj-voucher-table tr:hover {
  background: rgba(255, 255, 255, 0.025);
}

.tema-2026 .tj-voucher-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tema-2026 .tj-code-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.03em;
  word-break: break-all;
}

.tema-2026 .tj-code-pin {
  color: #FFA240;
  letter-spacing: 0.04em;
}

/* Mobile Cards View */
.tema-2026 .tj-voucher-cards-mobile {
  display: none;
  padding: 8px 6px;
  flex-direction: column;
  gap: 8px;
}

.tema-2026 .tj-vcard {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.15s ease;
}

.tema-2026 .tj-vcard:hover {
  border-color: rgba(240, 133, 25, 0.25);
}

.tema-2026 .tj-vcard-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.tema-2026 .tj-vcard-num {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--tj-cta);
  letter-spacing: 0.02em;
}

.tema-2026 .tj-vcard-tag {
  font-size: 10px;
  color: var(--tj-muted);
}

.tema-2026 .tj-vcard-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tema-2026 .tj-vcard-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.tema-2026 .tj-vcard-item-code {
  background: rgba(240, 133, 25, 0.05);
  border-color: rgba(240, 133, 25, 0.2);
}

.tema-2026 .tj-vcard-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.tema-2026 .tj-vcard-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tj-muted);
}

.tema-2026 .tj-vcard .tj-code-mono {
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tema-2026 .tj-vcard .tj-code-pin {
  color: #FFA240;
}

/* Switch between desktop table and mobile cards */
@media (max-width: 640px) {
  .tema-2026 .tj-voucher-desktop-view {
    display: none !important;
  }
  .tema-2026 .tj-voucher-cards-mobile {
    display: flex !important;
  }
}

.tema-2026 .tj-salin-kecil.berhasil {
  background: var(--tj-ok) !important;
  color: #fff !important;
  border-color: var(--tj-ok) !important;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.4) !important;
}