/* ============================================================
   TAKE IT. — assets/theme-futura.css
   Tema visual ke-4: "FUTURA" (hype brand × futuristik).
   ------------------------------------------------------------
   ATURAN MUTLAK FILE INI:
   1. SETIAP selektor diawali html[data-mood="futura"]. Nol selektor
      global. File ini juga hanya di-load saat tema futura aktif
      (lihat includes/header.php), jadi tema default/mewah/ceria
      tidak menanggung satu byte pun dari sini.
   2. Tidak ada perubahan struktur: semua kelas/id yang dipakai JS
      eksisting (search, keranjang, notifikasi, wishlist, form)
      hanya DI-RESTYLE, tidak pernah disembunyikan atau dihapus.
   3. Animasi transform/opacity saja — tanpa properti yang memicu
      reflow layout.
   4. Tema ini DARK-LOCKED. header.php mengunci data-theme="dark",
      sehingga lapisan penyempurnaan dark di styles.css (yang
      menetralkan panel putih hardcoded di checkout/dashboard/
      halaman warisan) ikut aktif. File ini melapis di atasnya.
   ============================================================ */

/* ============================================================
   1. DESIGN TOKEN
   ============================================================ */
html[data-mood="futura"]{
  /* --- override token eksisting --- */
  --paper:       #0A0B0F;
  --card:        #12141C;
  --raised:      #161927;
  --ink:         #F2F4FA;
  --ink-soft:    #B8BECE;
  --muted:       #6E7688;
  --line:        rgba(140,160,200,.16);
  --line-strong: rgba(140,160,200,.32);
  /* DNA merah stempel #D6491F dinaikkan lightness-nya demi kontras AA
     di atas near-black (#FF5C2E di #0A0B0F ≈ 5.5:1). */
  --stamp:       #FF5C2E;
  --stamp-dark:  #E0431A;
  --radius:      6px;                 /* dari 14px → sudut presisi */
  --ok:          #3DFFA0;
  --slab-shadow: 0 12px 32px rgba(0,0,0,.5);
  --slab-ring:   1px solid var(--line-strong);
  --header-bg:   rgba(10,11,15,.72);

  /* --- token BARU khas futura --- */
  --glass:        rgba(16,18,26,.70);
  --glass-header: rgba(10,11,15,.72);
  --glow-cyan:    #00E5FF;
  --holo-1:       #B14BFF;
  --holo-2:       #FF4D9D;
  --holo-iris:    linear-gradient(90deg,#00E5FF,#B14BFF,#FF4D9D);
  --stamp-grad:   linear-gradient(120deg,#FF5C2E,#FF7A50);
  --glow-stamp:   0 0 24px rgba(255,92,46,.40);
  --glow-cyan-s:  0 0 22px rgba(0,229,255,.14);
  --ease-fut:     cubic-bezier(.2,.8,.2,1);

  /* Status pastel diterjemahkan ke kanvas near-black */
  --ok-soft-bg:     rgba(61,255,160,.10);
  --ok-soft-ink:    #3DFFA0;
  --warn-soft-bg:   rgba(255,201,102,.10);
  --warn-soft-ink:  #FFC966;
  --danger-soft-bg: rgba(255,92,46,.12);
  --danger-soft-ink:#FF8A66;
  --chat-me-bg:     rgba(255,92,46,.10);

  /* Tidak ada font baru: Archivo sudah variable (axis wdth 62..125) dan
     sudah dimuat styles.css. Heading futura memakai axis itu — payload
     tambahan ±0 KB. Fallback condensed bila Archivo gagal dimuat. */
  --font-body: 'Archivo','Arial Narrow',system-ui,sans-serif;
}

/* ============================================================
   2. KANVAS: aurora + scanline
   Dua overlay fixed, pointer-events:none, murni dekoratif.
   ============================================================ */
html[data-mood="futura"] body{
  background: #0A0B0F;
  color: var(--ink);
}
html[data-mood="futura"] body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 75% -10%, rgba(177,75,255,.10), transparent 60%),
    radial-gradient(900px 500px at 10% 20%, rgba(0,229,255,.07), transparent 55%);
}
html[data-mood="futura"] body::after{
  content:''; position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.05;
  background:repeating-linear-gradient(0deg, transparent 0 3px, #8CA0C8 3px 4px);
}
/* Ambient drift: dua layer radial gradient bergeser SANGAT lambat (satu siklus
   ~42s) untuk memberi "napas" pada background. Hanya background-position yang
   dianimasikan (compositor-friendly, tanpa repaint berat). Scanline (body::after)
   sengaja dibiarkan statis supaya tidak ramai. Otomatis nonaktif bila pengguna
   minta reduced-motion karena seluruh blok ada di dalam no-preference. */
@media (prefers-reduced-motion: no-preference){
  html[data-mood="futura"] body::before{
    background-size:200% 200%, 200% 200%;
    animation:futAmbientDrift 42s ease-in-out infinite alternate;
  }
  @keyframes futAmbientDrift{
    from{ background-position:0% 0%, 100% 100%; }
    to  { background-position:100% 30%, 0% 60%; }
  }
}
/* Konten halaman selalu di atas dua overlay dekoratif di atas.
   .site-header SENGAJA dikecualikan: ia position:sticky dengan z-index:50
   dari styles.css — menimpanya dengan position:relative akan mematikan
   perilaku sticky header di SELURUH situs. Ia sudah berada di atas
   aurora (z-index 0) tanpa bantuan aturan ini. */
html[data-mood="futura"] body > *:not(.site-header){ position:relative; z-index:1; }

html[data-mood="futura"] ::selection{ background:var(--stamp); color:#0A0B0F; }

/* Focus-ring: WAJIB tetap terlihat jelas di keyboard nav. */
html[data-mood="futura"] :focus-visible{
  outline:2px solid var(--glow-cyan); outline-offset:2px; border-radius:3px;
}

/* ============================================================
   3. TIPOGRAFI
   Archivo axis wdth dinaikkan + uppercase + tracking rapat.
   ============================================================ */
html[data-mood="futura"] :is(.display, .page-title, .section-head h2, .sec-center h2,
                             .hero h1, .hero-copy h1, .auction-band h2){
  font-stretch:118%;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.015em;
  line-height:.98;
}
html[data-mood="futura"] .hero h1{ line-height:.94; }
html[data-mood="futura"] .sec-center p,
html[data-mood="futura"] .page-lead{ color:var(--ink-soft); }

/* Eyebrow & label teknis: Space Mono uppercase, prefix "//" dekoratif. */
html[data-mood="futura"] .sec-center .eyebrow{
  font-family:var(--font-mono); font-size:12px; font-weight:700;
  letter-spacing:.18em; color:var(--glow-cyan); text-transform:uppercase;
}
/* Highlight kata kunci: kotak solid oranye + teks near-black (mengikuti
   gaya "ORIGINAL." di tema default), BUKAN teks gradient transparan.
   box-decoration-break:clone supaya kotak tetap rapi kalau kata pindah baris. */
html[data-mood="futura"] .sec-center h2 .accent,
html[data-mood="futura"] .hero h1 .fut-iris{
  background:var(--stamp);
  -webkit-background-clip:unset; background-clip:unset;
  color:#0A0B0F;
  padding:0 .12em; border-radius:3px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  text-shadow:none;
}

/* Garis grid neon yang "menggambar" sendiri di bawah judul section (M6). */
html[data-mood="futura"] .section-head{
  position:relative; padding-bottom:16px; border-bottom:1px solid var(--line);
}
html[data-mood="futura"] .section-head::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, rgba(0,229,255,.55), transparent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .8s cubic-bezier(.65,0,.35,1) .15s;
}
html[data-mood="futura"] .section-head.fut-in::after{ transform:scaleX(1); }
html[data-mood="futura"] .section-head a{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.12em;
  color:var(--glow-cyan); text-transform:uppercase;
}
html[data-mood="futura"] .section-head a:not(.btn):hover{ color:var(--stamp); }

/* ============================================================
   4. HEADER
   ============================================================ */
html[data-mood="futura"] .site-header{
  background:var(--glass-header);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
}
/* M10 — state scrolled (kelas ditempel theme-futura.js saat scrollY > 24). */
html[data-mood="futura"] .site-header.fut-scrolled{
  background:rgba(10,11,15,.92);
  -webkit-backdrop-filter:blur(22px);
  backdrop-filter:blur(22px);
  border-bottom-color:rgba(0,229,255,.35);
  box-shadow:0 8px 30px rgba(0,0,0,.5);
}
html[data-mood="futura"] .site-header .bar{ transition:height .3s ease; }
html[data-mood="futura"] .site-header.fut-scrolled .bar{ height:56px; }

/* Safari iOS kadang tidak mendukung backdrop-filter → bg lebih pekat
   supaya teks header tetap terbaca di atas konten yang lewat. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-mood="futura"] .site-header{ background:rgba(10,11,15,.96); }
}

html[data-mood="futura"] .logo{ font-stretch:125%; font-weight:900; letter-spacing:-.02em; }
html[data-mood="futura"] .logo .seal{
  background:var(--holo-iris); border:1px solid rgba(0,229,255,.5);
  box-shadow:0 0 12px rgba(0,229,255,.45);
}

/* Nav: mono uppercase + underline neon (M11). */
html[data-mood="futura"] .nav a{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; border-radius:0; padding:6px 2px; margin:0 8px;
  position:relative; background:transparent; color:var(--ink-soft);
}
html[data-mood="futura"] .nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--glow-cyan); transform:scaleX(0); transform-origin:left;
  transition:transform .2s ease-out;
}
html[data-mood="futura"] .nav a:hover,
html[data-mood="futura"] .nav a.active{ background:transparent; color:var(--ink); }
html[data-mood="futura"] .nav a:hover::after,
html[data-mood="futura"] .nav a.active::after{ transform:scaleX(1); }

/* Ikon bulat → kotak presisi. */
html[data-mood="futura"] .icon-btn{
  border-radius:6px; border:1px solid var(--line-strong);
  background:rgba(18,20,28,.6); color:var(--ink-soft);
  transition:border-color .25s var(--ease-fut), color .25s var(--ease-fut), box-shadow .25s var(--ease-fut);
}
html[data-mood="futura"] .icon-btn:hover{
  transform:none; box-shadow:var(--glow-cyan-s);
  border-color:rgba(0,229,255,.55);
}
html[data-mood="futura"] .icon-btn svg{ color:inherit; }
html[data-mood="futura"] .icon-btn:hover svg{ color:var(--glow-cyan); }
html[data-mood="futura"] .icon-btn .badge{
  background:var(--stamp); color:#0A0B0F; border:none; border-radius:3px;
  font-family:var(--font-mono); font-weight:700;
}

/* Search box */
html[data-mood="futura"] .searchbox input{
  border-radius:6px; border:1px solid rgba(140,160,200,.22);
  background:rgba(18,20,28,.8); font-family:var(--font-mono);
  font-size:11px; letter-spacing:.04em; color:var(--ink);
}
html[data-mood="futura"] .searchbox input::placeholder{ color:var(--muted); }
html[data-mood="futura"] .searchbox input:focus{
  outline:none; border-color:rgba(0,229,255,.5); box-shadow:var(--glow-cyan-s);
}
html[data-mood="futura"] .search-suggest,
html[data-mood="futura"] .notif-dropdown{
  background:rgba(16,18,26,.96);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--line-strong); border-radius:6px;
  box-shadow:0 18px 44px rgba(0,0,0,.6);
}
html[data-mood="futura"] .search-suggest .s-item{ border-bottom:1px solid var(--line); }
html[data-mood="futura"] .search-suggest .s-item:hover,
html[data-mood="futura"] .notif-item:hover{ background:rgba(0,229,255,.06); }
html[data-mood="futura"] .search-suggest .s-item .pr{ color:var(--stamp); }
html[data-mood="futura"] .notif-head,
html[data-mood="futura"] .notif-foot{
  background:rgba(10,11,15,.8); border-color:var(--line);
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.12em; font-size:11px;
}
html[data-mood="futura"] .notif-foot{ color:var(--glow-cyan); }
html[data-mood="futura"] .notif-item{ border-bottom:1px solid var(--line); }
html[data-mood="futura"] .notif-item.unread{ background:rgba(255,92,46,.08); }
html[data-mood="futura"] .search-mobile-bar{
  background:rgba(10,11,15,.96);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
html[data-mood="futura"] .authbar .loginlink{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; color:var(--ink-soft);
}
html[data-mood="futura"] .authbar .loginlink:hover{ color:var(--ink); }

/* DARK-LOCKED: toggle terang/gelap disembunyikan (pola sama seperti ceria),
   termasuk tombol "silau?" versi mobile di footer. Tombolnya tetap ada di
   DOM & tetap berfungsi bila dipanggil dari tempat lain — hanya tak tampil. */
html[data-mood="futura"] .theme-toggle-main{ display:none !important; }
html[data-mood="futura"] .silau-strip{ display:none !important; }

/* ============================================================
   5. TOMBOL & FORM
   ============================================================ */
html[data-mood="futura"] .btn{
  border-radius:6px; border:1px solid transparent;
  font-family:var(--font-mono); font-weight:700; font-size:13px;
  letter-spacing:.1em; text-transform:uppercase;
  transition:transform .25s var(--ease-fut), box-shadow .25s var(--ease-fut),
             border-color .25s var(--ease-fut), color .25s var(--ease-fut);
}
html[data-mood="futura"] :is(.btn-stamp, .btn-primary){
  background:var(--stamp-grad); color:#0A0B0F; border-color:transparent;
  box-shadow:var(--glow-stamp);
}
html[data-mood="futura"] :is(.btn-stamp, .btn-primary):hover{
  transform:translateY(-2px); box-shadow:0 0 40px rgba(255,92,46,.65); color:#0A0B0F;
}
html[data-mood="futura"] :is(.btn-stamp, .btn-primary):active{ transform:translateY(0); }
html[data-mood="futura"] .btn-ghost{
  background:transparent; color:var(--ink); border:1px solid var(--line-strong); box-shadow:none;
}
html[data-mood="futura"] .btn-ghost:hover{
  background:transparent; border-color:var(--glow-cyan); color:var(--glow-cyan);
  box-shadow:0 0 20px rgba(0,229,255,.25);
}
html[data-mood="futura"] .btn[disabled]{ box-shadow:none; transform:none; }
html[data-mood="futura"] .section-head a.btn{ font-family:var(--font-mono); font-size:13px; }
html[data-mood="futura"] .section-head a.btn-stamp{ color:#0A0B0F; }
html[data-mood="futura"] .header-cta{
  border-radius:6px; font-family:var(--font-mono); letter-spacing:.1em; font-size:12px;
  background:var(--stamp-grad) !important; border-color:transparent !important;
  color:#0A0B0F !important; box-shadow:0 0 18px rgba(255,92,46,.35);
}
html[data-mood="futura"] .header-cta:hover{ box-shadow:0 0 28px rgba(255,92,46,.6); }

/* Chip holo & chip kategori */
html[data-mood="futura"] .holo-chip{
  background:transparent; border:1px solid rgba(0,229,255,.4); color:var(--glow-cyan);
  border-radius:3px; letter-spacing:.18em; font-size:11px;
}
html[data-mood="futura"] .holo-chip .dot{ background:var(--glow-cyan); box-shadow:0 0 8px var(--glow-cyan); }
html[data-mood="futura"] .cat-chip{
  border-radius:6px; border:1px solid var(--line-strong); background:var(--glass);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
}
html[data-mood="futura"] .cat-chip:hover,
html[data-mood="futura"] .cat-chip.active{
  border-color:rgba(0,229,255,.55); background:rgba(0,229,255,.08); color:var(--ink);
}

html[data-mood="futura"] .input{
  border-radius:6px; border:1px solid var(--line-strong);
  background:rgba(18,20,28,.8); color:var(--ink);
}
html[data-mood="futura"] .input:focus{
  outline:none; border-color:var(--glow-cyan); box-shadow:var(--glow-cyan-s);
}
html[data-mood="futura"] .field label{ letter-spacing:.16em; color:var(--muted); }

/* ============================================================
   6. KARTU PRODUK — "holo-vault card"
   Selektor .slab / .serial / .ph / .price / .holo-mini DIPERTAHANKAN,
   hanya di-restyle. Dipakai lintas halaman (beranda, katalog, toko,
   wishlist, lelang) sehingga semuanya ikut berubah otomatis.
   ============================================================ */
html[data-mood="futura"] .grid{
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px;
}
html[data-mood="futura"] .slab{
  position:relative;
  background:var(--glass);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(140,160,200,.18) !important;
  border-radius:6px;
  box-shadow:none !important;
  overflow:hidden;
  transform:perspective(900px) rotateX(var(--fut-rx,0deg)) rotateY(var(--fut-ry,0deg));
  transition:transform .25s var(--ease-fut), border-color .25s var(--ease-fut), box-shadow .25s var(--ease-fut);
}
/* M7 — hover: naik 4px, border cyan, shadow dalam. Tilt ±6° ditambahkan
   theme-futura.js lewat --fut-rx/--fut-ry (hanya desktop pointer halus). */
html[data-mood="futura"] .slab:hover{
  transform:perspective(900px) rotateX(var(--fut-rx,0deg)) rotateY(var(--fut-ry,0deg)) translateY(-4px) !important;
  border-color:rgba(0,229,255,.55) !important;
  box-shadow:0 12px 32px rgba(0,0,0,.5), var(--glow-cyan-s) !important;
}
/* M8 — sheen sweep sekali tiap pointer masuk. */
html[data-mood="futura"] .slab::before{
  content:''; position:absolute; top:0; bottom:0; width:45%; z-index:4;
  pointer-events:none; opacity:0;
  background:linear-gradient(100deg, transparent, rgba(0,229,255,.10), rgba(255,77,157,.08), transparent);
  transform:translateX(-140%) skewX(-18deg);
}
html[data-mood="futura"] .slab:hover::before{ opacity:1; animation:futSheen .6s ease-out; }
@keyframes futSheen{
  from{ transform:translateX(-140%) skewX(-18deg); }
  to  { transform:translateX(340%)  skewX(-18deg); }
}

/* Header kartu: serial mono + chip CERT gradient iris. */
html[data-mood="futura"] .slab .serial{
  background:transparent;
  border-bottom:1px solid var(--line);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  color:var(--ink-soft); padding:12px 16px;
}
/* .holo-mini (segel holo lama) dipromosikan jadi chip "CERT ✓" —
   elemen & kelasnya tetap, hanya tampilannya yang berubah. */
html[data-mood="futura"] :is(.slab, .bigslab) .serial .holo-mini{
  width:auto; height:auto; border:none; border-radius:3px;
  background:var(--holo-iris);
  padding:2px 8px;
  font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.18em;
  color:#0A0B0F; line-height:1.5;
}
html[data-mood="futura"] :is(.slab, .bigslab) .serial .holo-mini::after{ content:'CERT ✓'; }

/* Panel foto: inset, bg raised bergaris diagonal, bracket viewfinder. */
html[data-mood="futura"] .slab .ph{
  position:relative;
  margin:14px; border:none; border-radius:4px; height:170px; overflow:hidden;
  background:repeating-linear-gradient(45deg,#12141C 0 10px,#161927 10px 20px);
}
/* M9 — 4 bracket sudut digambar sebagai 8 gradient di SATU pseudo-element
   (tanpa menambah elemen ke DOM), fade-in saat hover. */
html[data-mood="futura"] .slab .ph::after{
  content:''; position:absolute; inset:8px; pointer-events:none; z-index:2;
  opacity:0; transition:opacity .2s ease-out;
  background:
    linear-gradient(var(--glow-cyan),var(--glow-cyan)) left  top    / 14px 2px no-repeat,
    linear-gradient(var(--glow-cyan),var(--glow-cyan)) left  top    / 2px 14px no-repeat,
    linear-gradient(var(--glow-cyan),var(--glow-cyan)) right top    / 14px 2px no-repeat,
    linear-gradient(var(--glow-cyan),var(--glow-cyan)) right top    / 2px 14px no-repeat,
    linear-gradient(var(--glow-cyan),var(--glow-cyan)) left  bottom / 14px 2px no-repeat,
    linear-gradient(var(--glow-cyan),var(--glow-cyan)) left  bottom / 2px 14px no-repeat,
    linear-gradient(var(--glow-cyan),var(--glow-cyan)) right bottom / 14px 2px no-repeat,
    linear-gradient(var(--glow-cyan),var(--glow-cyan)) right bottom / 2px 14px no-repeat;
}
html[data-mood="futura"] .slab:hover .ph::after{ opacity:1; }
html[data-mood="futura"] .slab .ph img{ border-radius:4px; }

html[data-mood="futura"] .slab .body{ padding:2px 16px 16px; gap:6px; }
html[data-mood="futura"] .slab .cat{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.2em;
  color:var(--stamp); text-transform:uppercase;
}
html[data-mood="futura"] .slab h3{
  font-weight:800; font-stretch:110%; text-transform:uppercase;
  font-size:15px; line-height:1.2;
}
html[data-mood="futura"] .slab .price{
  font-weight:900; font-stretch:115%; font-size:19px;
  text-shadow:0 0 18px rgba(255,92,46,.45);
}
html[data-mood="futura"] .slab .left,
html[data-mood="futura"] .slab .soldout{
  color:var(--muted); letter-spacing:.1em; text-transform:uppercase; font-size:10px;
}
html[data-mood="futura"] .slab .timer{ color:var(--glow-cyan); letter-spacing:.12em; }

/* Chip kondisi & lokasi bergaya terminal. Emoji bawaan (🆕/♻️) disembunyikan
   dan diganti glyph mono lewat CSS — teks PHP-nya tidak disentuh sama sekali. */
html[data-mood="futura"] .kondisi-tag{
  border-radius:3px; padding:4px 10px; font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; background:transparent !important;
}
html[data-mood="futura"] .kondisi-tag.baru{
  color:var(--ok) !important; border:1px solid rgba(61,255,160,.4);
}
html[data-mood="futura"] .kondisi-tag.bekas{
  color:var(--ink-soft) !important; border:1px solid var(--line-strong);
}
html[data-mood="futura"] .kondisi-tag img.emoji{ display:none; }
html[data-mood="futura"] .kondisi-tag::before{ content:'● '; }
html[data-mood="futura"] .card-foot .loc{
  font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
}
/* Badge "Original" — futura: neon stamp glow di atas near-black, senada
   dengan bahasa visual tema (bukan kotak flat). Emoji flat disembunyikan,
   diganti bullet ✓ neon supaya konsisten dengan .kondisi-tag. */
html[data-mood="futura"] .badge-original{
  border-radius:3px; padding:4px 10px; font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; background:rgba(255,92,46,.08);
  color:var(--stamp); border:1px solid rgba(255,92,46,.55);
  box-shadow:var(--glow-stamp); text-shadow:0 0 8px rgba(255,92,46,.5);
}
html[data-mood="futura"] .badge-original img.emoji{ display:none; }
html[data-mood="futura"] .badge-original::before{ content:'✓ '; }
html[data-mood="futura"] .wl-star:hover{ color:var(--glow-cyan); }
html[data-mood="futura"] .wl-star.on{ color:var(--holo-2); }
html[data-mood="futura"] .stockbar{
  background:var(--raised); border:1px solid var(--line-strong); border-radius:3px;
}
html[data-mood="futura"] .stockbar i{ background:var(--glow-cyan); }
html[data-mood="futura"] .stockbar i.hot{ background:var(--stamp); }

@media (max-width:640px){
  html[data-mood="futura"] .grid{ grid-template-columns:1fr 1fr; gap:11px; }
  html[data-mood="futura"] .slab .ph{ margin:9px; height:118px; }
  html[data-mood="futura"] .slab .serial{ padding:8px 10px; font-size:9px; }
  html[data-mood="futura"] .slab .body{ padding:2px 10px 12px; }
  html[data-mood="futura"] .slab h3{ font-size:12.5px; }
  html[data-mood="futura"] .slab .price{ font-size:15px; }
}

/* ============================================================
   7. HERO (beranda)
   Selektor .hero* didefinisikan inline di index.php ($extraHead),
   yang di-render SETELAH file ini — makanya semua aturan di bawah
   sengaja berspesifisitas lebih tinggi (html[data-mood] + kelas).
   ============================================================ */
html[data-mood="futura"] .hero{
  border-bottom:1px solid var(--line);
  background:transparent;
  padding:72px 0 40px;
}
html[data-mood="futura"] .hero::before{ background-image:none; }  /* garis diagonal tema default */
html[data-mood="futura"] .hero h1{ font-size:clamp(44px,6vw,86px); }
/* "Titik." tema default = merah miring dengan animasi stempel. Di futura
   dibuat tegak & solid; gradient iris dipindah ke kata "Original."
   (span .fut-iris yang ditambahkan index.php khusus tema ini). */
html[data-mood="futura"] .hero h1 .stamped{
  color:var(--stamp); transform:none; animation:none;
  text-shadow:0 0 24px rgba(255,92,46,.45);
}
html[data-mood="futura"] .hero p.lead{ color:var(--ink-soft); font-size:17px; max-width:460px; }
html[data-mood="futura"] .hero .holo-chip{
  border:none; padding:0; gap:12px; background:transparent;
  font-size:13px; letter-spacing:.22em;
}
html[data-mood="futura"] .hero .holo-chip .dot{
  width:32px; height:1px; border-radius:0; background:var(--glow-cyan); box-shadow:none;
}

/* Panggung kartu hero: bingkai crosshair + kartu kaca melayang. */
html[data-mood="futura"] .hero-slideshow{ position:relative; perspective:1200px; }
html[data-mood="futura"] .hero-slideshow::before{
  content:''; position:absolute; inset:-20px; pointer-events:none; z-index:2;
  border:1px solid rgba(0,229,255,.12); border-radius:12px;
}
html[data-mood="futura"] .hero-slide-viewport{
  background:rgba(16,18,26,.78);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(140,160,200,.25);
  border-radius:8px;
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 40px rgba(177,75,255,.12);
  transform-style:preserve-3d;
  /* M2 — tilt kursor: variabel di-set theme-futura.js dengan lerp .08/frame */
  transform:perspective(1200px)
            rotateX(calc(4deg + var(--fut-hero-rx, 0deg)))
            rotateY(calc(-7deg + var(--fut-hero-ry, 0deg)));
}
/* M1 — idle float 7s; berhenti otomatis saat hero keluar viewport
   (kelas .fut-paused ditempel IntersectionObserver di JS). */
@media (prefers-reduced-motion: no-preference){
  html[data-mood="futura"] .hero-slide-viewport{ animation:futFloat 7s ease-in-out infinite; }
  html[data-mood="futura"] .hero-slideshow.fut-paused .hero-slide-viewport{ animation-play-state:paused; }
}
@keyframes futFloat{
  0%,100%{ transform:perspective(1200px) translateY(0)
            rotateX(calc(4deg + var(--fut-hero-rx,0deg))) rotateY(calc(-7deg + var(--fut-hero-ry,0deg))); }
  50%    { transform:perspective(1200px) translateY(-14px)
            rotateX(calc(6deg + var(--fut-hero-rx,0deg))) rotateY(calc(-4deg + var(--fut-hero-ry,0deg))); }
}
/* M3 — sheen holo menyapu kartu hero terus-menerus. */
html[data-mood="futura"] .hero-slide-viewport::after{
  content:''; position:absolute; top:0; bottom:0; width:45%; z-index:3;
  pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(0,229,255,.10), rgba(255,77,157,.08), transparent);
  animation:futSheenLoop 4.5s ease-in-out infinite;
}
@keyframes futSheenLoop{
  0%  { transform:translateX(-140%) skewX(-18deg); }
  100%{ transform:translateX(340%)  skewX(-18deg); }
}
/* M4 — transisi slide berbasis KEDALAMAN, bukan geser horizontal. */
html[data-mood="futura"] .hero-slide{
  transform:translateZ(80px) scale(.96);
  transition:opacity .65s var(--ease-fut), transform .65s var(--ease-fut);
}
html[data-mood="futura"] .hero-slide.active{ transform:translateZ(0) scale(1); }
html[data-mood="futura"] .hero-slide .cert{
  font-family:var(--font-mono); letter-spacing:.14em; color:var(--glow-cyan);
}
html[data-mood="futura"] .hero-slide h3{ font-stretch:110%; font-weight:800; text-transform:uppercase; }
html[data-mood="futura"] .hero-slide .price{
  font-weight:900; font-stretch:115%; color:var(--ink);
  text-shadow:0 0 18px rgba(255,92,46,.45);
}
html[data-mood="futura"] .hero-dot{
  width:24px; height:2px; border-radius:0; border:none;
  background:rgba(140,160,200,.25);
}
html[data-mood="futura"] .hero-dot.active{ background:var(--glow-cyan); transform:none; }

/* Kanvas WebGL "kaca vault" — disisipkan theme-futura.js di belakang kartu.
   Kalau JS/WebGL gagal, elemen ini tidak pernah dibuat dan hero tampil
   sebagai slideshow CSS statis. Konten tidak pernah hilang. */
html[data-mood="futura"] .fut-hero-gl{
  position:absolute; inset:-10%; z-index:0; pointer-events:none;
  opacity:0; transition:opacity .8s ease; border-radius:12px;
}
html[data-mood="futura"] .fut-hero-gl.fut-on{ opacity:1; }
html[data-mood="futura"] .hero-slide-viewport,
html[data-mood="futura"] .hero-dots{ position:relative; z-index:1; }

/* ============================================================
   8. TICKER (M14)
   ============================================================ */
html[data-mood="futura"] .ticker{
  background:rgba(18,20,28,.5) !important;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  color:var(--muted);
}
html[data-mood="futura"] .ticker .track{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase;
  /* Durasi dibiarkan mewarisi 55s dari styles.css: isi ticker digandakan
     2x via JS agar loop mulus, jadi memangkas durasi bikin teks (nama &
     harga produk) mengalir terlalu cepat untuk dibaca. */
}
html[data-mood="futura"] .ticker .track span b{ color:var(--glow-cyan); font-weight:700; }
html[data-mood="futura"] .ticker.sales{ background:rgba(18,20,28,.5) !important; }
html[data-mood="futura"] .ticker.sales .track span b{ color:var(--ok); }

/* ============================================================
   9. TILE KATEGORI & KARTU TOKO
   ============================================================ */
html[data-mood="futura"] .kat-tile-lg{
  background:var(--glass); border:1px solid rgba(140,160,200,.18);
  border-radius:6px; box-shadow:none; align-items:flex-start; text-align:left;
  padding:22px 18px 18px;
  transition:transform .25s var(--ease-fut), border-color .25s var(--ease-fut), box-shadow .25s var(--ease-fut);
}
html[data-mood="futura"] .kat-tile-lg:hover{
  transform:translateY(-4px); border-color:rgba(0,229,255,.55);
  box-shadow:0 12px 32px rgba(0,0,0,.5), var(--glow-cyan-s);
}
html[data-mood="futura"] .kat-tile-lg.active{
  border-color:rgba(0,229,255,.55); box-shadow:var(--glow-cyan-s);
}
html[data-mood="futura"] .kat-tile-lg .ico{ font-size:26px; }
html[data-mood="futura"] .kat-tile-lg h3{
  font-weight:800; font-stretch:110%; text-transform:uppercase; font-size:14px;
}
html[data-mood="futura"] .kat-tile-lg .n{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
}
html[data-mood="futura"] .kat-tile-lg.active .n{ color:var(--glow-cyan); }

/* Kartu toko: tilt 3D mengikuti kursor DENGAN memakai fungsi tilt yang sama
   seperti kartu produk (JS menulis --fut-rx/--fut-ry). Karena kartu toko lebih
   besar, sudutnya diperhalus ke ~55% di sini — kartu produk tidak tersentuh. */
html[data-mood="futura"] .toko-bigcard{
  background:var(--glass); border:1px solid rgba(140,160,200,.18);
  border-radius:6px; box-shadow:none;
  transform:perspective(1000px) rotateX(calc(var(--fut-rx,0deg) * .55)) rotateY(calc(var(--fut-ry,0deg) * .55));
  transform-style:preserve-3d;
  transition:transform .25s var(--ease-fut), border-color .25s var(--ease-fut), box-shadow .25s var(--ease-fut);
}
/* ::before tema lama (cincin konsentris) di-repurpose jadi sheen sweep yang
   konsisten dengan .slab::before. Kartu toko sudah overflow:hidden. */
html[data-mood="futura"] .toko-bigcard::before{
  content:''; position:absolute; top:0; bottom:0; left:0; width:45%; z-index:4;
  pointer-events:none; opacity:0; transform:translateX(-140%) skewX(-18deg);
  background:linear-gradient(100deg, transparent, rgba(0,229,255,.10), rgba(255,77,157,.08), transparent);
}
html[data-mood="futura"] .toko-bigcard:hover::before{ opacity:1; animation:futSheen .6s ease-out; }
html[data-mood="futura"] .toko-bigcard:hover{
  transform:perspective(1000px) rotateX(calc(var(--fut-rx,0deg) * .55)) rotateY(calc(var(--fut-ry,0deg) * .55)) translateY(-4px);
  border-color:rgba(0,229,255,.5);
  box-shadow:0 12px 32px rgba(0,0,0,.5);
}
html[data-mood="futura"] .toko-bigcard h3{
  font-weight:800; font-stretch:110%; text-transform:uppercase; font-size:17px;
}
html[data-mood="futura"] .toko-bigcard .tag{ color:var(--ink-soft); }
html[data-mood="futura"] .toko-bigcard .pill{
  border-radius:4px; border:1px solid var(--line-strong); background:transparent;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
}
html[data-mood="futura"] .toko-bigcard .pill.hot{
  color:var(--stamp); border-color:rgba(255,92,46,.4); background:transparent;
}
html[data-mood="futura"] .toko-avatar{
  background:repeating-linear-gradient(45deg,#12141C 0 6px,#1A1D28 6px 12px);
  border:1px solid rgba(0,229,255,.35);
  box-shadow:0 0 0 1px rgba(10,11,15,.9), var(--glow-cyan-s) !important;
}
html[data-mood="futura"] .toko-badge{ background:var(--glow-cyan); color:#0A0B0F; border-color:#0A0B0F; }

/* ============================================================
   10. "BARU DIAMANKAN" (taken)
   ============================================================ */
html[data-mood="futura"] .taken-card{
  background:var(--glass); border:1px solid rgba(140,160,200,.18);
  border-radius:6px; box-shadow:none; filter:none;
  transition:transform .25s var(--ease-fut), border-color .25s var(--ease-fut), box-shadow .25s var(--ease-fut);
}
html[data-mood="futura"] .taken-card:hover{
  transform:translateY(-4px); border-color:rgba(255,92,46,.5);
  box-shadow:0 12px 32px rgba(0,0,0,.5);
}
html[data-mood="futura"] .taken-ph{
  margin:12px; border-radius:4px; overflow:hidden;
  background:repeating-linear-gradient(45deg,#12141C 0 10px,#161927 10px 20px);
}
/* Stempel TAKEN → kotak mono rotasi -8° dengan tanda centang. */
html[data-mood="futura"] .taken-stamp{
  top:34%; border-radius:3px; border:2px solid var(--stamp);
  background:rgba(10,11,15,.7); mix-blend-mode:normal;
  transform:translate(-50%,-50%) rotate(-8deg);
  font-size:13px; letter-spacing:.3em; text-shadow:none;
  padding:6px 16px; opacity:1;
}
html[data-mood="futura"] .taken-stamp::after{ content:' ✓'; }
html[data-mood="futura"] .taken-body .cat{ letter-spacing:.18em; color:var(--stamp); }
html[data-mood="futura"] .taken-body h3{
  font-weight:800; font-stretch:108%; text-transform:uppercase; font-size:14px;
}
html[data-mood="futura"] .taken-body .taken-by{ color:var(--muted); letter-spacing:.1em; }
html[data-mood="futura"] .taken-live{
  font-family:var(--font-mono); letter-spacing:.16em; color:var(--glow-cyan);
}
html[data-mood="futura"] .taken-live.demo{
  background:transparent; border:1px solid var(--line-strong); border-radius:3px; color:var(--muted);
}
html[data-mood="futura"] .taken-live:not(.demo)::before{ background:var(--glow-cyan) !important; }

/* ============================================================
   11. BAND LELANG (arena)
   ============================================================ */
html[data-mood="futura"] .auction-band{
  background:transparent !important; border:none; color:var(--ink);
  /* Tema lain memberi .auction-band background solid yang menempel ke footer.
     Di futura band jadi kartu mengambang (.inner), jadi butuh nafas eksplisit
     sebelum border-top footer — tanpa ini panel menempel langsung ke footer. */
  padding-bottom:64px;
}
html[data-mood="futura"] .auction-band .inner{
  border:1px solid var(--line-strong); border-radius:8px; padding:48px 40px;
  background:linear-gradient(120deg, rgba(177,75,255,.10), rgba(16,18,26,.85) 40%, rgba(0,229,255,.07));
  /* Background dibuat lebih tinggi dari panel supaya ada ruang untuk digeser.
     theme-futura.js menggerakkan --fut-auc-y saat scroll → layer background
     terasa lebih lambat dari konten (parallax). Default 50% = tengah, jadi
     tanpa JS pun tampilannya tetap benar. */
  background-size:100% 180%;
  background-position:50% var(--fut-auc-y, 50%);
}
html[data-mood="futura"] .auction-band h2{ font-size:clamp(28px,4vw,42px); line-height:1; }
html[data-mood="futura"] .auction-band p{ color:var(--ink-soft); }
html[data-mood="futura"] .auction-band .btn-ghost{
  border-color:var(--line-strong); color:var(--ink); background:transparent;
}
html[data-mood="futura"] .auction-band .btn-ghost:hover{
  background:transparent; border-color:var(--glow-cyan); color:var(--glow-cyan);
}

/* ============================================================
   12. BANNER IKLAN & PAGINASI
   ============================================================ */
html[data-mood="futura"] .ad-viewport{
  border:1px solid var(--line-strong); border-radius:6px; background:var(--raised);
}
html[data-mood="futura"] .ad-dot{ border:none; background:rgba(140,160,200,.25); }
html[data-mood="futura"] .ad-dot.active{ background:var(--glow-cyan); }
html[data-mood="futura"] .ad-tag{
  font-family:var(--font-mono); letter-spacing:.16em; background:rgba(10,11,15,.7);
  border:1px solid var(--line); border-radius:3px;
}
html[data-mood="futura"] :is(.kat-pagination a, .kat-pagination span){
  border-radius:4px; border:1px solid var(--line-strong); background:transparent; color:var(--ink-soft);
}
html[data-mood="futura"] .kat-pagination a:hover,
html[data-mood="futura"] .kat-pagination .active{
  background:var(--stamp-grad); border-color:transparent; color:#0A0B0F;
}

/* ============================================================
   13. FOOTER
   ============================================================ */
html[data-mood="futura"] .site-footer{
  background:rgba(7,8,11,.9) !important;
  border-top:1px solid rgba(0,229,255,.25);
  color:var(--ink-soft);
}
html[data-mood="futura"] .site-footer .fcol.brand .fl{
  color:var(--ink); font-stretch:120%; text-transform:uppercase; letter-spacing:-.02em;
}
html[data-mood="futura"] .site-footer nav.fcol h4{
  font-family:var(--font-mono); letter-spacing:.18em; color:var(--glow-cyan);
  opacity:1; font-size:11px;
}
html[data-mood="futura"] .site-footer nav.fcol a{ color:var(--ink-soft); opacity:1; }
html[data-mood="futura"] .site-footer nav.fcol a:hover{ color:var(--glow-cyan); text-decoration:none; }
html[data-mood="futura"] .site-footer .fine{
  border-top:1px solid var(--line); color:var(--muted); opacity:1;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.1em;
}

/* ============================================================
   14. REVEAL SAAT MASUK VIEWPORT (M5)
   Kelas .fut-js ditempel theme-futura.js SETELAH ia yakin bisa jalan.
   Tanpa JS (atau bila script gagal dimuat), tidak ada satu pun elemen
   yang pernah disembunyikan — progressive enhancement murni.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  html[data-mood="futura"].fut-js .fut-reveal{
    opacity:0; transform:translateY(24px);
    transition:opacity .6s var(--ease-fut), transform .6s var(--ease-fut);
  }
  html[data-mood="futura"].fut-js .fut-reveal.fut-in{ opacity:1; transform:none; }
  html[data-mood="futura"] .fut-pulse{ animation:futPulse 2.2s ease-in-out infinite; }
}
@keyframes futPulse{ 0%,100%{ opacity:.9; } 50%{ opacity:.4; } }

/* ============================================================
   15. REDUCED MOTION
   styles.css sudah mematikan SEMUA animation & transition global
   pada prefers-reduced-motion:reduce. Di sini kita pastikan hasil
   AKHIRNYA tetap benar: kartu hero tegak, tanpa transform sisa,
   konten selalu tampil penuh, 3D tidak pernah dimuat.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html[data-mood="futura"] .hero-slide-viewport{ transform:none; animation:none; }
  html[data-mood="futura"] .hero-slide-viewport::after{ display:none; }   /* sheen */
  html[data-mood="futura"] .hero-slide{ transform:none; }
  html[data-mood="futura"] body::after{ display:none; }                   /* scanline */
  html[data-mood="futura"] .slab{ transform:none; }
  html[data-mood="futura"] .slab::before{ display:none; }
  html[data-mood="futura"] .slab .ph::after{ opacity:1; }
  html[data-mood="futura"] .toko-bigcard{ transform:none; }
  html[data-mood="futura"] .toko-bigcard::before{ display:none; }
  html[data-mood="futura"] .section-head::after{ transform:scaleX(1); }
  html[data-mood="futura"].fut-js .fut-reveal{ opacity:1; transform:none; }
  html[data-mood="futura"] .fut-hero-gl{ display:none; }
}

/* Perangkat tanpa hover halus (touch): matikan tilt & sheen kartu supaya
   tidak ada state hover yang "nyangkut" setelah tap. */
@media (hover:none){
  html[data-mood="futura"] .slab:hover{ transform:none !important; }
  html[data-mood="futura"] .slab::before{ display:none; }
  html[data-mood="futura"] .slab .ph::after{ opacity:1; }   /* bracket tetap tampil */
  html[data-mood="futura"] .toko-bigcard:hover{ transform:none !important; }
  html[data-mood="futura"] .toko-bigcard::before{ display:none; }
}