/* ============================================================
   WPM — Pojok Lelaki front-end theme
   Dark (default) / premium / glassmorphism, with a light theme
   variant toggled via <html data-theme="light|dark">. Self-contained
   (no dependency on cms-admin/assets/css/admin.css).
   ============================================================ */

:root {
  /* Base background (30 Sep 2026, gold luxury rebrand) — dulu near-black
     TAPI di-tint hijau/teal (sisa era black+green), sekarang neutral
     warm-black beneran biar gak ada nuansa hijau nempel di semua
     card/panel/sidebar di seluruh situs (operator sempet komplain
     background masih "keliatan hijau" walau aksen udah gold semua). */
  --bg-void: #0a0a09;
  --bg-deep: #121110;
  --bg-deep-2: #17140f;
  --surface-glass: rgba(255, 255, 255, 0.04);
  --surface-glass-strong: rgba(255, 255, 255, 0.07);
  --surface-glass-2: rgba(255, 255, 255, 0.05);
  --surface-nav: rgba(10, 10, 9, 0.7);
  --border-glass: rgba(201, 162, 39, 0.10);

  /* Brand accent — gold luxury (Pojok Lelaki rebrand, 30 Sep 2026),
     replacing the black+green stripe era to match the new gold logo.
     --accent-rgb feeds every rgba(var(--accent-rgb), X) tint/glow below,
     so the whole accent family (badges, active states, glows) re-tints
     in one place per theme. --red (below) stays a separate rose/crimson
     shade used for semantic alerts/badges — kept distinct on purpose so
     it doesn't visually collide with the brand-gold accent. */
  --accent-rgb: 201, 162, 39;
  --accent: rgb(var(--accent-rgb));
  --accent-2: #e8c76a;
  --accent-hover: #a8841e;
  --accent-light: rgba(var(--accent-rgb), 0.14);
  --border-glow: rgba(var(--accent-rgb), 0.4);

  --cyan: #22d3ee;
  --gold: #d4a017;
  --green: #10b981;
  --red: #f43f5e;
  /* Navbar/genre-bar secondary — copper, dipakai buat elemen CTA/premium
     yang kontras di atas deep teal (30 Sep 2026, Pojok Lelaki rebrand,
     revisi ke Deep Teal + Copper). Nama variabel --pink peninggalan lama,
     cuma dipake 4 tempat, sengaja gak di-rename biar diff minimal. */
  --pink: #b5651d;
  --pink-2: #c98a4d;

  --text: #eafbf7;
  --text-muted: rgba(234, 251, 247, 0.64);
  --text-faint: rgba(234, 251, 247, 0.42);

  --grad-brand: linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 100%);
  --grad-gold: linear-gradient(135deg, var(--gold) 0%, #f59e0b 100%);
  --grad-logo-text: linear-gradient(135deg, #ffffff 20%, var(--accent-2) 60%, var(--accent) 100%);

  --radius-lg: 12px;
  --radius-md: 8px;
  --radius-sm: 4px;

  --shadow-glow-accent: 0 8px 40px rgba(var(--accent-rgb), 0.3);
  --shadow-glow-cyan: 0 8px 40px rgba(34, 211, 238, 0.18);

  --font-display: 'Oswald', 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif;

  /* Footer orange-accent intensities — dark mode stays subtle since the
     background already reads warm at low alpha; light mode is tuned a
     touch stronger so the tint doesn't wash out on a near-white surface. */
  --footer-glow-1: 0.10;
  --footer-glow-2: 0.05;
  --footer-border-glow: 0.4;
  --footer-heading-tint: 0.8;
}

/* "Black mode" (4 Okt 2026, permintaan operator: icon tema navbar yang
   dulu dekoratif/gak ada fungsi sekarang jadi toggle beneran) — BUKAN
   tema terang, operator minta varian dark yang LEBIH pekat/pure black
   (gaya OLED) dari default-nya, bukan white/light theme teal yang udah
   lama ada di CSS (:root[data-theme="light"] di bawah, SENGAJA gak
   disentuh/gak dipakai toggle ini). Aksen gold brand TETAP sama persis
   (--accent-rgb gak diubah) — cuma background & surface glass yang
   digelapin lagi + tint hangat/coklatnya dikurangin biar keliatan
   "hitam pekat", bukan sekadar variasi gelap kedua yang mirip-mirip. */
:root[data-theme="black"] {
  --bg-void: #000000;
  --bg-deep: #050505;
  --bg-deep-2: #0a0a0a;
  --surface-glass: rgba(255, 255, 255, 0.025);
  --surface-glass-strong: rgba(255, 255, 255, 0.05);
  --surface-glass-2: rgba(255, 255, 255, 0.03);
  --surface-nav: rgba(0, 0, 0, 0.85);
  --border-glass: rgba(201, 162, 39, 0.08);
}

/* Light theme — same brand hues, re-tuned for contrast on a light surface. */
:root[data-theme="light"] {
  --bg-void: #f5f9f8;
  --bg-deep: #ffffff;
  --bg-deep-2: #e8f2f0;
  --surface-glass: rgba(10, 40, 35, 0.035);
  --surface-glass-strong: rgba(10, 40, 35, 0.06);
  --surface-glass-2: rgba(10, 40, 35, 0.045);
  --surface-nav: rgba(255, 255, 255, 0.85);
  --border-glass: rgba(10, 40, 35, 0.10);

  --accent-rgb: 15, 118, 110;
  --accent-2: #0d9488;
  --accent-hover: #0b5f58;
  --accent-light: rgba(var(--accent-rgb), 0.10);
  --border-glow: rgba(var(--accent-rgb), 0.4);

  --cyan: #0e7490;
  --gold: #a16207;
  --green: #059669;
  --red: #e11d48;

  --text: #10201d;
  --text-muted: rgba(16, 32, 29, 0.66);
  --text-faint: rgba(16, 32, 29, 0.46);

  --shadow-glow-accent: 0 8px 30px rgba(var(--accent-rgb), 0.2);
  --shadow-glow-cyan: 0 8px 30px rgba(14, 116, 144, 0.12);
  --grad-logo-text: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent) 55%, var(--accent-2) 100%);

  --footer-glow-1: 0.14;
  --footer-glow-2: 0.07;
  --footer-border-glow: 0.5;
  --footer-heading-tint: 0.9;
}

/* Smooth theme switch — no flash/snap on the elements that actually change. */
body.crypto-theme,
.crypto-nav,
.glass-card,
.news-hero__media,
.news-row__media,
.trending-item__media,
.trending-panel,
.crypto-table-wrap,
.crypto-btn,
.crypto-btn--ghost,
.theme-toggle__track {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

* , *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.crypto-theme {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg-void);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.crypto-theme img { max-width: 100%; display: block; }

.crypto-theme a { color: inherit; text-decoration: none; }

.crypto-theme ::selection { background: rgba(var(--accent-rgb), 0.35); color: #fff; }

/* Background ambient glow layer, fixed behind everything */
.crypto-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 45% at 15% 0%, rgba(var(--accent-rgb), 0.20) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 90% 15%, rgba(var(--accent-rgb), 0.13) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(var(--accent-rgb), 0.12) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-void) 0%, var(--bg-deep) 40%, var(--bg-deep-2) 100%);
}

.crypto-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

/* Wider variant (31 Agu 2026) — homepage genre grid rows (.movie-grid)
   read cramped at the regular 1180px container width once they're 8
   columns wide instead of a horizontal carousel; this gives them more
   room edge-to-edge, closer to the movie-box.io reference. */
.crypto-container--wide { max-width: 1600px; }

/* ============================================================
   NAVBAR
   ============================================================ */
.crypto-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Header tipis + gradient gelap (30 Sep 2026, permintaan operator) —
     bukan lagi warna flat var(--surface-nav), sekarang gradient hitam ke
     deep teal dengan sentuhan copper di ujung, tetap semi-transparan biar
     backdrop-filter blur di bawahnya kelihatan efeknya. */
  background: linear-gradient(120deg, rgba(4, 8, 8, 0.92) 0%, rgba(6, 15, 14, 0.85) 45%, rgba(13, 148, 136, 0.28) 78%, rgba(181, 101, 29, 0.32) 100%);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--border-glass);
}

.crypto-nav__inner {
  /* 30 Sep 2026 (permintaan operator): disamain sama .crypto-container--wide
     (1600px) yang dipakai row/section film di homepage, biar logo di
     header rata kiri sejajar sama konten di bawahnya, bukan ngikutin
     container sempit (1180px) yang cuma dipakai hero/section lain. */
  max-width: 1600px;
  margin: 0 auto;
  padding: 6px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.crypto-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
}

.crypto-logo__mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--grad-brand);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: #fff;
  box-shadow: var(--shadow-glow-accent);
  flex-shrink: 0;
}

/* Logo permanen/hardcode (24 Agu 2026, keputusan final operator) — logo
   ZonaSinema selalu wordmark lebar (1672x471px asli), REPLACES total
   kotak 40x40 di atas (bukan cuma resize di dalamnya, itu sumber bug
   "logo kepenyet" yang berulang). Ukurannya beda header vs footer, lihat
   override `.footer-brand__logo-mark.crypto-logo__mark--wide` di bagian
   footer logo. */
.crypto-logo__mark--wide {
  width: auto;
  height: 108px;
  max-width: 400px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 0;
  object-fit: contain;
  flex-shrink: 0;
}
/* 4 Okt 2026 ("black mode") — header-nya sekarang ikut gelap pas mode
   black aktif (lihat :root[data-theme="black"] .zc-nav di atas), jadi
   siluet hitam di logo beresiko nyatu/ilang sama background. Glow tipis
   gold di sekeliling logo cuma di mode ini, biar tetap kebaca walau
   background-nya item pekat. Subtle (blur dikit, opacity rendah) biar
   gak jadi obvious "kotak" kayak percobaan drop-shadow sebelumnya yang
   ditolak operator. */
:root[data-theme="black"] .crypto-logo__mark--wide {
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.5));
}

@media (max-width: 640px) {
  /* 2 Okt 2026 (permintaan operator: "logo tampilan mobile bikin agak
     gede lagi") — dinaikin dari 56px ke 74px (footer tetap 92px, gak
     disentuh, cuma header-mobile ini). */
  .crypto-logo__mark--wide {
    height: 74px;
    max-width: 260px;
  }
}


.crypto-logo__text {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: var(--grad-logo-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Tagline berdiri sendiri di sebelah logo image asli (24 Agu 2026),
   bukan lagi ditumpuk di bawah nama situs — kasih garis pembatas kiri
   biar jelas dua elemen beda, bukan sambungan kalimat. */
.crypto-logo__tag--standalone {
  padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.crypto-logo__tag {
  display: block;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: -2px;
}

.crypto-nav__menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.crypto-nav__menu a {
  display: inline-block;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  position: relative;
}

.crypto-nav__menu a:hover,
.crypto-nav__menu a.is-active {
  color: var(--text);
  background: rgba(var(--accent-rgb), 0.14);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.30), 0 0 18px rgba(var(--accent-rgb), 0.25);
}

.crypto-nav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.crypto-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
  white-space: nowrap;
}

.crypto-btn--primary {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: var(--shadow-glow-accent);
}

.crypto-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(var(--accent-rgb), 0.4); }

.crypto-btn--ghost {
  background: var(--surface-glass-2);
  border-color: var(--border-glass);
  color: var(--text);
}

.crypto-btn--ghost:hover { border-color: var(--border-glow); background: rgba(var(--accent-rgb), 0.10); }

/* App Promotion section — Google Play / App Store "coming soon" badges */
.app-store-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.app-store-badge__icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.app-store-badge__icon svg { width: 100%; height: 100%; }

.crypto-nav__toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--surface-glass-2);
  border: 1px solid var(--border-glass);
  color: var(--text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.crypto-nav__toggle span,
.crypto-nav__toggle span::before,
.crypto-nav__toggle span::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  position: relative;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.crypto-nav__toggle span::before { position: absolute; top: -6px; }
.crypto-nav__toggle span::after { position: absolute; top: 6px; }

/* ============================================================
   DARK MODE TOGGLE
   ============================================================ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--surface-glass-2);
  border: 1px solid var(--border-glass);
  cursor: pointer;
}

.theme-toggle__icon { display: flex; color: var(--text-muted); }
.theme-toggle__icon svg { width: 15px; height: 15px; }

.theme-toggle__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.theme-toggle__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.theme-toggle__switch { position: relative; display: inline-flex; }

.theme-toggle__track {
  display: block;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid var(--border-glass);
  position: relative;
}

:root[data-theme="light"] .theme-toggle__track { background: rgba(20, 10, 45, 0.12); }

.theme-toggle__thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease;
}

.theme-toggle__input:checked ~ .theme-toggle__track { background: var(--green); border-color: transparent; }
.theme-toggle__input:checked ~ .theme-toggle__track .theme-toggle__thumb { transform: translateX(16px); }
.theme-toggle__input:focus-visible ~ .theme-toggle__track { box-shadow: 0 0 0 2px var(--border-glow); }

@media (max-width: 640px) {
  .theme-toggle { padding: 7px 9px; }
}

/* ============================================================
   ZONASINEMA — cinematic nav, genre bar, poster slider
   (redesign 21 Agu 2026, replaces the dark-glass/orange sport theme
   for this header/genre-bar/homepage-poster area only — other
   .crypto-nav__* rules above stay so other markup keeps working)
   ============================================================ */
.zc-nav {
  position: sticky; top: 0; z-index: 100;
  /* Header gradient (30 Sep 2026, gold luxury rebrand) — burgundy/maroon
     gelap, BUKAN var(--accent) (yang sekarang gold) supaya siluet hitam
     di logo baru tetap kontras/kebaca (background solid gold/hitam bikin
     bagian hitam logo blend & ilang — sudah dites & dikonfirmasi operator
     lewat mockup artifact). Aksen gold tetap dipakai di border bawah +
     elemen lain (badge, pill, hover) via var(--accent) seperti biasa. */
  background: linear-gradient(120deg, #561121 0%, #77142d 50%, #490a15 100%);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 1px 0 rgba(var(--accent-rgb), 0.2);
}
/* 4 Okt 2026 ("black mode" toggle, revisi) — operator TETAP minta header
   ikut gelap pas mode black (bukan dibiarin maroon kayak rekomendasi
   awal), dengan syarat logo dikasih glow/outline biar siluet hitamnya
   gak nyatu sama background. Lihat juga override
   .crypto-logo__mark--wide di bawah buat glow-nya. */
:root[data-theme="black"] .zc-nav {
  background: linear-gradient(120deg, #050505 0%, #0a0a0a 50%, #000000 100%);
}

.zc-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

.zc-nav__left { display: flex; align-items: center; gap: 20px; min-width: 0; flex: 1 1 auto; }

.zc-nav .crypto-logo__text {
  background: none; -webkit-text-fill-color: unset; color: #fff;
}
.zc-nav .crypto-logo__tag { color: rgba(255, 255, 255, 0.7); }

/* Search bar (30 Sep 2026, revisi operator, hasil diskusi mockup redesign)
   — SELALU kelihatan di desktop, ngisi ruang tengah header (dulu icon
   toggle doang, klik baru expand). Toggle button (.zc-search-toggle)
   sekarang cuma dipakai di mobile (<=980px, lihat breakpoint di bawah)
   buat buka overlay pencarian full-screen — bukan expand .zc-search ini. */
.zc-search-toggle {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.16); border: none; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  color: #fff; transition: background 0.16s ease;
}
.zc-search-toggle svg { width: 16px; height: 16px; stroke: currentColor; opacity: 1; }
.zc-search-toggle:hover { background: rgba(255, 255, 255, 0.28); }

.zc-search-wrap {
  position: relative;
  flex: 0 1 320px; width: 320px; max-width: 320px; margin-left: auto;
}
.zc-search {
  display: flex; align-items: center; gap: 8px;
  background: rgba(6, 15, 14, 0.35); border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px; padding: 4px 4px 4px 12px;
  width: 100%; max-width: none; margin-left: 0;
  color: rgba(255, 255, 255, 0.75);
}
.zc-search svg { color: rgba(255, 255, 255, 0.6); }
.zc-search.is-open { width: 100%; max-width: 420px; opacity: 1; }
.zc-search svg { width: 15px; height: 15px; opacity: 0.55; flex-shrink: 0; }
.zc-search__input {
  border: none; outline: none; background: transparent; flex: 1; min-width: 0;
  font-family: var(--font-body); font-size: 14px; color: #fff;
}
.zc-search__input::placeholder { color: rgba(255, 255, 255, 0.5); }
.zc-search__btn {
  flex-shrink: 0; width: 32px; height: 32px; margin: 2px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.14); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.zc-search__btn svg { width: 15px; height: 15px; stroke: #fff; }
.zc-search__btn:hover { background: var(--accent-hover); }

.zc-nav__right { display: flex; align-items: center; gap: 16px; flex: 1 1 auto; min-width: 0; overflow: visible; }

/* Autocomplete judul film (15 Okt 2026) — dropdown di bawah search
   header desktop + search mobile halaman nonton. */
.wpm-suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 120;
  background: #121110; border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  min-width: 260px;
}
.wpm-suggest[hidden] { display: none !important; }
.wpm-suggest__item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; color: #fff; text-decoration: none;
}
.wpm-suggest__item:hover,
.wpm-suggest__item.is-active { background: rgba(var(--accent-rgb), 0.18); }
.wpm-suggest__thumb {
  width: 36px; height: 50px; border-radius: 6px; object-fit: cover;
  background: #000; flex-shrink: 0;
}
.wpm-suggest__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wpm-suggest__title {
  font-size: 13px; font-weight: 700; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wpm-suggest__year { font-size: 11px; color: rgba(255, 255, 255, 0.5); }
.wpm-suggest__empty { padding: 12px 14px; font-size: 13px; color: rgba(255, 255, 255, 0.55); }

/* Icon tema (30 Sep 2026, permintaan operator, hasil diskusi mockup
   redesign) — dekoratif buat sekarang (situs sengaja dikunci dark theme
   terus, lihat komentar 'data-theme dark' di <head> site-header.php),
   posisinya doang yang niru mockup (bulat, pojok kanan header). Kalau
   nanti mau beneran dijadiin toggle light/dark, tinggal wire klik-nya ke
   data-theme di <html> + localStorage. */
.zc-theme-icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.14); border: none;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.zc-theme-icon svg { width: 16px; height: 16px; }

.zc-nav-links { display: flex; align-items: center; gap: 16px; font-size: 14px; font-weight: 700; flex-wrap: nowrap; }
.zc-nav-links a {
  color: rgba(255, 255, 255, 0.92); display: flex; align-items: center; gap: 5px;
}
.zc-nav-links a svg { width: 11px; height: 11px; }
.zc-nav-links a:hover { color: #fff; }

/* Dropdown Genre & Tahun Rilis (24 Agu 2026) — <details>/<summary> native,
   dipakai di desktop nav (.zc-nav-links) DAN mobile drawer
   (.crypto-nav__mobile-panel). Base rules di sini netral buat kedua
   konteks; posisi absolute cuma di-scope ke desktop (.zc-nav-links), lihat
   di bawah — di mobile drawer panelnya ngalir normal (block) di dalam
   flex column drawer, gak perlu override apa-apa. */
.nav-dropdown { position: relative; }
.nav-dropdown summary {
  display: flex; align-items: center; gap: 5px; cursor: pointer;
  list-style: none; color: rgba(255, 255, 255, 0.92); font-weight: 700; font-size: 14px;
}
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown summary:hover { color: #fff; }
.nav-dropdown summary svg { width: 11px; height: 11px; transition: transform 0.15s ease; }
.nav-dropdown[open] summary svg { transform: rotate(180deg); }
.nav-dropdown summary.is-active {
  color: #fff; background: rgba(0, 0, 0, 0.35); padding: 4px 10px; border-radius: 999px; margin: -4px -10px;
}

.nav-dropdown__panel {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--bg-deep-2); border: 1px solid var(--border-glass); border-radius: var(--radius-md);
  padding: 8px; margin-top: 8px;
}
.nav-dropdown__panel a {
  padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--text-muted, rgba(255,255,255,0.75)); white-space: nowrap;
}
.nav-dropdown__panel a:hover { background: var(--surface-glass-2); color: #fff; }
.nav-dropdown__panel a.is-active { color: #fff; background: rgba(0, 0, 0, 0.45); }
.nav-dropdown__empty { padding: 8px 12px; font-size: 13px; color: var(--text-faint); }

/* Panel "Tahun Rilis" (26 Agu 2026, fix operator: dropdown-nya kepanjangan
   ke bawah pas tahun film udah banyak, 2007-2026 = 20 baris 1 kolom).
   Layout 2 kolom (kayak referensi screenshot operator) + cap tinggi +
   scroll internal buat jaga-jaga kalau tahunnya makin nambah ke depan —
   dropdown tetap pendek/compact, gak makan sepanjang layar lagi. Genre
   dibiarkan 1 kolom seperti semula (cuma 8 item, gak butuh ini). */
.nav-dropdown__panel--years {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px;
  max-height: 260px; overflow-y: auto;
}
.nav-dropdown__panel--years .nav-dropdown__empty { grid-column: 1 / -1; }

/* Desktop only: panel jadi popover melayang di bawah trigger. Di mobile
   drawer (.crypto-nav__mobile-panel .nav-dropdown), biarin default block
   (ngalir normal di antara link lain di drawer). */
.zc-nav-links .nav-dropdown__panel {
  position: absolute; top: 100%; left: 0; z-index: 50; min-width: 180px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
.zc-nav-links .nav-dropdown summary.zc-nav-link {
  /* 15 Okt 2026: <summary> UA stylesheet + .nav-dropdown summary { font-size:14px }
     nge-override .zc-nav-link, jadi "Kategori" keliatan lebih kecil / beda font
     dari Home dkk. Paksa typography yang SAMA persis. */
  appearance: none;
  -webkit-appearance: none;
  font-family: 'Playfair Display', 'Fraunces', var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.zc-nav-links .nav-dropdown summary.zc-nav-link:hover { color: #fff; }
.zc-nav-links .nav-dropdown summary.zc-nav-link.is-active {
  background: none;
  padding: 0 0 4px;
  margin: 0;
  border-radius: 0;
  color: #fff;
  border-bottom: 2px solid var(--accent);
}

.nav-link--request {
  background: var(--accent); color: #fff !important; padding: 7px 14px; border-radius: 999px; font-weight: 800;
}
.nav-link--request svg { width: 18px; height: 18px; }
.nav-link--request:hover { background: var(--accent-hover); color: #fff !important; }
.nav-link--request.is-active { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: 1px; }

/* Menu "Kabar Film" (19 Sep 2026, revisi operator: disamain persis sama
   .nav-link--request — pill accent + icon). */
.nav-link--kabar {
  background: var(--accent); color: #fff !important; padding: 7px 14px; border-radius: 999px; font-weight: 800;
}
.nav-link--kabar svg { width: 18px; height: 18px; }
.nav-link--kabar:hover { background: var(--accent-hover); color: #fff !important; }
.nav-link--kabar.is-active { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: 1px; }

.zc-genre-bar {
  /* z-index dinaikin dari 1 -> 5 (30 Sep 2026, bug report operator: dropdown
     "Tahun Rilis"/"Genre"/"Negara" ke-hide) — genre-bar ini duluan di DOM
     dibanding .page-hero yang juga punya z-index:1 di beberapa halaman
     (pencarian.php dkk), jadi walau z-index sama, .page-hero yang belakangan
     di DOM nutupin dropdown panel absolute punya genre-bar. */
  position: relative; z-index: 5;
  /* Pojok Lelaki gold luxury rebrand (30 Sep 2026) — dulu gradient
     hitam-hijau (sisa era black+green), sekarang neutral warm-black polos
     biar gak ada nuansa hijau, beda gelap dari header burgundy di
     atasnya (kontras/hierarki visual kejaga). Juga dipakai standalone di
     homepage sekarang (bar ini dipindah ke bawah hero slider, bukan lagi
     nempel langsung di bawah header — lihat includes/site-genre-bar.php). */
  background: linear-gradient(90deg, #17140f 0%, #0a0a09 100%);
}
.zc-genre-bar__inner {
  /* 30 Sep 2026 (permintaan operator): disamain sama .crypto-nav__inner/
     .crypto-container--wide (1600px) biar rata kiri sejajar sama logo
     header & row film di bawahnya, bukan ngikutin container sempit 1180px.
     overflow-x:auto DICABUT dari sini (30 Sep 2026, bug report operator:
     "filter ky ke hide dibelakang") — overflow-x:auto otomatis bikin
     overflow-y ikut ke-clip (spec CSS), jadi dropdown panel Genre/Tahun
     Rilis/Negara yang absolute-positioned di dalamnya kepotong/ilang.
     Scroll horizontal cuma dipasang lagi di mobile (lihat @media di bawah)
     karena di situ dropdown-nya udah full-width modal, bukan panel absolute. */
  max-width: 1600px; margin: 0 auto;
  display: flex; align-items: center; gap: 22px; padding: 12px 24px;
  flex-wrap: wrap;
}
@media (max-width: 900px) {
  .zc-genre-bar__inner { flex-wrap: nowrap; overflow-x: auto; }
}
.zc-genre-bar a {
  flex-shrink: 0; font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.82); text-transform: uppercase; white-space: nowrap;
}
.zc-genre-bar a:hover, .zc-genre-bar a.is-active { color: #fff; }

/* Chip/pill (30 Sep 2026, revisi operator, hasil diskusi mockup redesign)
   — "Semua / Genre ▾ / Tahun Rilis ▾ / Negara ▾ / Terpopuler / Banyak
   Ditonton" gaya pill bulat, gantiin tombol "Filter" + 2 link polos lama.
   Genre/Tahun Rilis/Negara reuse .nav-dropdown (<details>/<summary>) yang
   sebelumnya nganggur gak kepake — cuma di-restyle jadi pill di sini. */
.zc-genre-bar__inner { gap: 10px; }
.zc-genre-pill {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 15px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.01em; text-transform: none; font-family: var(--font-body);
  background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.82);
  white-space: nowrap; border: none; cursor: pointer;
}
.zc-genre-pill:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.zc-genre-pill.is-active { background: var(--accent); color: #06110f; }
.zc-genre-pill svg { width: 11px; height: 11px; transition: transform 0.15s ease; }
.zc-genre-bar .nav-dropdown[open] .zc-genre-pill svg { transform: rotate(180deg); }
.zc-genre-bar .nav-dropdown { position: relative; }
.zc-genre-bar .nav-dropdown summary { list-style: none; }
.zc-genre-bar .nav-dropdown summary::-webkit-details-marker { display: none; }
.zc-genre-bar .nav-dropdown .nav-dropdown__panel {
  position: absolute; top: 100%; left: 0; z-index: 50; min-width: 180px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); margin-top: 6px;
}
.zc-genre-bar__count { margin-left: auto; flex-shrink: 0; font-size: 12px; color: rgba(255, 255, 255, 0.5); white-space: nowrap; }

/* Filter popup (9 Sep 2026) — tombol di genre bar + overlay/panel modal. */
.zc-filter-btn {
  flex-shrink: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
  white-space: nowrap; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  background: #241414; color: #fff; border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px; padding: 8px 16px 8px 14px;
}
.zc-filter-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.zc-filter-btn:hover { background: #2e1919; border-color: rgba(255, 255, 255, 0.24); }
.zc-filter-btn__badge {
  background: var(--gold, #f5c542); color: #2a0a0a; font-size: 11px; font-weight: 900;
  border-radius: 999px; min-width: 18px; height: 18px; display: inline-flex; align-items: center;
  justify-content: center; padding: 0 5px;
}
.zc-filter-overlay {
  position: fixed; inset: 0; z-index: 1200; display: none;
  background: rgba(10, 4, 4, 0.72); align-items: center; justify-content: center; padding: 20px;
}
.zc-filter-overlay.is-open { display: flex; }
.zc-filter-panel {
  width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto;
  background: #1c1010; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px;
  padding: 22px 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.zc-filter-panel__head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;
}
.zc-filter-panel__head h3 { margin: 0; font-size: 17px; color: #fff; }
.zc-filter-panel__close {
  background: none; border: none; color: rgba(255, 255, 255, 0.7); font-size: 24px; line-height: 1;
  cursor: pointer; padding: 0 4px;
}
.zc-filter-panel__close:hover { color: #fff; }
.zc-filter-form { display: flex; flex-direction: column; gap: 14px; }
.zc-filter-field { display: flex; flex-direction: column; gap: 6px; }
.zc-filter-field span { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.75); text-transform: uppercase; letter-spacing: 0.03em; }
.zc-filter-field select, .zc-filter-field input[type="text"] {
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 10px;
  padding: 10px 12px; color: #fff; font-size: 14px;
}
.zc-filter-field select:focus, .zc-filter-field input[type="text"]:focus { outline: 1px solid var(--accent, #e8283b); }
.zc-filter-field--active span { color: var(--accent, #e8283b); font-weight: 800; }
.zc-filter-field--active span::after {
  content: "\2022 AKTIF";
  margin-left: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--accent, #e8283b);
  border-radius: 999px;
  padding: 1px 7px;
  vertical-align: middle;
}
.zc-filter-field--active select,
.zc-filter-field--active input[type="text"] {
  background: rgba(232, 40, 59, 0.28);
  border: 2px solid var(--accent, #e8283b);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(232, 40, 59, 0.28), 0 0 16px rgba(232, 40, 59, 0.35);
}
.zc-filter-field__search-trigger {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 10px;
  padding: 10px 12px; color: rgba(255, 255, 255, 0.85); font-size: 14px;
  cursor: pointer; width: 100%; text-align: left;
}
.zc-filter-field__search-trigger svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent-2, #e8283b); }
.zc-filter-field__search-trigger:hover {
  background: rgba(232, 40, 59, 0.14);
  border-color: var(--accent, #e8283b);
  color: #fff;
}
.zc-filter-form__actions { display: flex; gap: 10px; margin-top: 6px; }
.zc-filter-form__actions .zc-filter-btn { flex: 1; justify-content: center; padding: 11px 14px; border-radius: 10px; }
.zc-filter-btn--ghost { background: transparent; color: rgba(255, 255, 255, 0.75); text-decoration: none; }
.zc-filter-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }
.zc-filter-btn--primary { background: var(--accent, #e8283b); border: none; color: #fff; }
.zc-filter-btn--primary:hover { background: var(--accent-hover, #ff3b4e); }

@media (max-width: 980px) {
  .zc-nav-links { display: none; }
}
@media (max-width: 640px) {
  .zc-nav__left { gap: 14px; }
}

/* Poster slider (homepage "Film Terbaru" strip, reuses article cards as posters) */
.poster-slider__head { display: flex; align-items: baseline; justify-content: space-between; margin: 32px 0 16px; }
.poster-slider__head h2 { font-family: var(--font-display); font-size: 24px; letter-spacing: 0.02em; margin: 0; }

/* "Semua Film" per row genre (26 Agu 2026, fix operator: spec asli devs
   prompt minta tombol kuning tapi implementasinya kepasang cuma jadi
   link teks polos, class-nya nggak pernah ada style-nya). Samain pola
   sama .nav-link--request (accent bg, teks gelap, pill-rounded). */
.poster-slider__more {
  background: var(--accent); color: #fff !important; font-weight: 800; font-size: 13px;
  padding: 7px 16px; border-radius: 999px; white-space: nowrap; flex-shrink: 0;
}
.poster-slider__more:hover { background: var(--accent-hover); color: #fff !important; }
/* Tombol "Semua Film" tiap row genre (24 Agu 2026) — kuning/gold,
   konsisten sama tombol "Request Movie" & aksen situs lainnya. */
.poster-slider__more {
  flex-shrink: 0; font-size: 13px; font-weight: 800; color: var(--accent);
  padding: 6px 4px;
}
.poster-slider__more:hover { color: var(--accent-hover, var(--accent)); text-decoration: underline; }

/* 2 Okt 2026, permintaan operator: scrollbar horizontal bawaan browser di
   carousel ini keliatan ganggu/kurang rapi (muncul track abu-abu panjang di
   bawah row) — disembunyikan scrollbar-nya doang, scroll (drag/swipe/tombol
   panah) tetap jalan normal kayak biasa, cuma visual track/thumb-nya yang
   dicabut. padding-bottom dikurangin juga krn tadinya itu buat ngasih jarak
   row sama track scrollbar yang sekarang udah gak ada. */
.poster-slider {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 2px; scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge/IE */
}
.poster-slider::-webkit-scrollbar { display: none; /* Chrome/Safari/Edge Chromium */ }

.poster-slider-wrap { position: relative; }

.poster-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  background: rgba(10, 14, 26, 0.85);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, opacity 0.16s ease, transform 0.16s ease;
  backdrop-filter: blur(4px);
}
.poster-slider__arrow svg { width: 20px; height: 20px; }
.poster-slider__arrow:hover { background: rgba(var(--accent-rgb), 0.85); border-color: var(--accent); color: #fff; }
.poster-slider__arrow:disabled { opacity: 0; pointer-events: none; }
.poster-slider__arrow--prev { left: -8px; }
.poster-slider__arrow--next { right: -8px; }

@media (max-width: 640px) {
  .poster-slider__arrow { display: none; }
}

.poster-card { flex-shrink: 0; width: 240px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; position: relative; }

/* Card lebih besar KHUSUS di carousel homepage (30 Sep 2026, permintaan
   operator: kartu di row "Film Terbaru" dkk kegedean jumlahnya/kekecilan
   ukurannya sejak sidebar kiri masuk, minta dikurangin biar lebih lega).
   ~5-6 kartu kelihatan sekaligus di layar desktop lebar, bukan 7-8 kayak
   sebelumnya. .poster-grid (halaman /film, related films, dst) TETAP
   168px, gak ikut berubah — ini cuma buat .poster-slider (carousel). */
/* 2 Okt 2026 (v2, permintaan operator: "frame yg tampil pake 4 aja ...
   scroll kanan kiri") — card width-nya diganti dari angka fix (280px) jadi
   pecahan dari lebar track (calc), biar PERSIS 4 kartu utuh yang kelihatan
   di layar (gak ada yang kepotong setengah di ujung kanan kayak sebelumnya).
   scroll-snap-type di atas juga dinaikin dari "proximity" ke "mandatory",
   dan tombol panah (lihat scrollByPage() di index.php/movie.php) sekarang
   geser PERSIS 1 halaman penuh (clientWidth) sekali klik, bukan 0.9x —
   jadi klik kanan/kiri = geser 4 card sekaligus, bukan geser dikit-dikit. */
/* 6 Okt 2026 (permintaan operator: "kecilin aja biar muat banyak di
   desktop", bagian dari fitur toggle sidebar — "kan sekarang 4, bikin
   jadi 6") — naik dari 4 jadi 6 kartu utuh per layar di desktop. Formula
   calc-nya tetap sama persis (persis N kartu utuh, gak ada yang
   kepotong), cuma N-nya yang naik + gap dikonversi ke 5 celah (N-1). */
.poster-slider .poster-card { width: calc((100% - 4 * 16px) / 5); }

@media (max-width: 1100px) {
  /* 4 kartu per halaman di tablet besar/laptop kecil */
  .poster-slider .poster-card { width: calc((100% - 3 * 16px) / 4); }
}

@media (max-width: 900px) {
  /* 3 kartu per halaman di tablet */
  .poster-slider .poster-card { width: calc((100% - 2 * 16px) / 3); }
}

@media (max-width: 640px) {
  /* 2 Okt 2026 (v3, permintaan operator: "home mobile masih berantakan,
     row film dibawah ga otomatis responsive") — di mobile DICABUT dari
     pas-2-kartu-penuh (calc /2 persis), balik ke kartu width TETAP
     dengan sedikit "peek" kartu ke-3 di ujung kanan. Alasannya: tombol
     panah kiri/kanan disembunyikan total di mobile (lihat
     .poster-slider__arrow di atas, cuma kelihatan >640px — mobile
     ngandelin swipe jari doang), jadi kalau kartu pas penuh 2.0 tanpa
     ada "bocoran" kartu berikutnya, user ga ada petunjuk visual kalau
     row itu bisa di-swipe ke samping — kelihatan kayak cuma ada 2 film
     doang / row "mentok". Peek dikit (~2.15 kartu kelihatan) bikin jelas
     masih ada lanjutannya, berasa otomatis nge-scroll, bukan grid statis.
     UPDATE 2 Okt 2026 (request operator: tampilin PAS 2 frame aja di
     section row film mobile, kartu digedein dikit) — balik ke exact 2
     kartu per halaman (bukan peek 2.15 lagi), gap & lebar kartu dinaikin
     sedikit biar kartu kelihatan lebih besar. */
  .poster-slider { gap: 14px; }
  .poster-slider .poster-card { width: calc((100% - 14px) / 2); }
}

/* Wrapping variant of .poster-slider for a full listing page (kategori.php
   genre/tahun/terpopuler filters, 23 Agu 2026) — same card, no horizontal
   scroll, wraps to as many rows as needed. */
.poster-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.poster-grid .poster-card { width: 240px; }

@media (max-width: 640px) {
  .poster-grid .poster-card { width: calc(50% - 10px); }
}

/* "Paling Banyak Ditonton" homepage row (9 Sep 2026, permintaan operator)
   — panel border/bg sendiri biar beda kliatan dari row lain (dulu
   sempat pake badge ranking angka di tiap poster, dicabut lagi hari yang
   sama, diganti jadi treatment di level row ini aja). Reuse warna accent
   brand (merah) + --gold buat aksen judul, konsisten sama tema situs. */
.home-row--highlight {
  padding: 24px clamp(16px, 4vw, 32px) 28px;
  margin-top: 40px; margin-bottom: 40px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0.02) 60%);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.06) inset, 0 12px 30px rgba(0, 0, 0, 0.25);
}
.home-row--highlight .poster-slider__head { margin-top: 0; }
.home-row--highlight .poster-slider__head h2 {
  color: var(--gold);
  text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.35);
}

/* Warna section per-row homepage (30 Sep 2026, gold luxury rebrand) —
   sebelumnya tiap row (Film Terbaru, Romance, Action, Horror, dst) dikasih
   warna beda-beda (biru/pink/oranye/ungu/merah) biar gampang dibedain
   sekilas. Operator minta disamain jadi gold semua biar konsisten sama
   mockup gold luxury yang disepakati — SEMUA row--<accent> sekarang
   reuse var(--accent-rgb) persis kayak .home-row--highlight di atas,
   class-nya sendiri tetap dipasang otomatis lewat key 'accent' di
   $wpmHomeRows (index.php), cuma warnanya udah gak beda-beda lagi. */
.home-row--series,
.home-row--latest,
.home-row--korea,
.home-row--philipines,
.home-row--usa,
.home-row--romance,
.home-row--action,
.home-row--horror {
  padding: 24px clamp(16px, 4vw, 32px) 28px;
  margin-top: 40px; margin-bottom: 40px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0.02) 60%);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.06) inset, 0 12px 30px rgba(0, 0, 0, 0.25);
}
.home-row--series .poster-slider__head,
.home-row--latest .poster-slider__head,
.home-row--korea .poster-slider__head,
.home-row--philipines .poster-slider__head,
.home-row--usa .poster-slider__head,
.home-row--romance .poster-slider__head,
.home-row--action .poster-slider__head,
.home-row--horror .poster-slider__head { margin-top: 0; }
.home-row--series .poster-slider__head h2,
.home-row--latest .poster-slider__head h2,
.home-row--korea .poster-slider__head h2,
.home-row--philipines .poster-slider__head h2,
.home-row--usa .poster-slider__head h2,
.home-row--romance .poster-slider__head h2,
.home-row--action .poster-slider__head h2,
.home-row--horror .poster-slider__head h2 {
  color: var(--gold);
  text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.35);
}

/* Homepage row per Sub Kategori Film (4 Okt 2026, permintaan operator) —
   class "home-row--subcategory" ini udah lama dipasang otomatis dari
   index.php (key 'accent' => 'subcategory' di $wpmHomeRows) tapi belum
   pernah dikasih CSS-nya sama sekali, makanya row-nya (misal "JAV",
   "INDONESIA") polos tanpa border/background kayak row lain (Film
   Terbaru, Action, dst pakai .home-row--highlight/--series/dst di atas).
   Dibikin beda dikit dari border row lain (lebih tebal 2px + opacity gold
   lebih tinggi + radius lebih besar) biar row Sub Kategori keliatan lebih
   "tegas"/menonjol, sesuai permintaan operator — tetap gold, bukan warna
   lain. */
.home-row--subcategory {
  padding: 24px clamp(16px, 4vw, 32px) 28px;
  margin-top: 40px; margin-bottom: 40px;
  border: 2px solid rgba(var(--accent-rgb), 0.6);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.03) 60%);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.12) inset, 0 12px 30px rgba(0, 0, 0, 0.3);
}
.home-row--subcategory .poster-slider__head { margin-top: 0; }
.home-row--subcategory .poster-slider__head h2 {
  color: var(--gold);
  text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.45);
}

/* Homepage genre rows (31 Agu 2026, movie-box.io reference) — real CSS
   grid instead of .poster-slider's horizontal-scroll carousel, wraps to
   as many rows as needed, ~8 columns on desktop. Same wpm_poster_card()
   markup as everywhere else, just a different parent/sizing. */
.movie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.movie-grid .poster-card { width: auto; }

@media (max-width: 640px) {
  .movie-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
}

/* 2 Okt 2026 (redesign landscape, permintaan operator: "kaya thumbnail
   YouTube, muat 4 box per baris") — ganti dari potrait 2:3 (poster film)
   jadi landscape 16:9. Gambar yang dipake sekarang prioritas
   films.backdrop_path (landscape asli), lihat wpm_poster_card() di
   site-bootstrap.php. */
.poster-card__media {
  position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
  background: var(--surface-glass); border: 1px solid var(--border-glass);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.poster-card__media img { width: 100%; height: 100%; object-fit: cover; }
.poster-card__media svg { width: 30px; height: 30px; color: var(--text-faint); }

/* Bagian F (24 Agu 2026) — hover polish: scale + shadow + border gold
   di poster, plus gradient overlay tipis di bawah poster (kedalaman
   visual doang, BUKAN buat nampung tombol nonton/play apapun — judul
   tetap di luar poster, di bawahnya, sesuai markup wpm_poster_card()). */
.poster-card__media::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 45%; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(5, 3, 16, 0.55) 100%);
}
.poster-card:hover .poster-card__media {
  transform: scale(1.035); border-color: var(--accent);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

/* Overlay hover "preview" (30 Sep 2026, permintaan operator, hasil diskusi
   mockup redesign) — muncul pas poster di-hover: play icon + gradient
   gelap di atas poster, ngasih kesan "siap diputer" sebelum diklik.
   Cuma efek visual doang buat sekarang (belum ada video cuplikan beneran
   di-autoplay); markup-nya di wpm_poster_card() (site-bootstrap.php). */
.poster-card__hover-overlay {
  /* 2 Okt 2026, fix bug operator: "pointer-events: none" DICABUT dari sini
     — overlay ini sebelumnya nggak bisa nerima pointer event sama sekali,
     jadi listener pointerenter/pointerleave di site.js ("poster-card hover
     preview") nggak PERNAH ke-trigger, buat card manapun, bahkan yang udah
     punya source Bunny Stream aktif (kayak Mutiny). Aman dihapus karena
     overlay ini ANAK dari <a class="poster-card__media"> (bukan sibling
     yang numpuk elemen lain), jadi klik di area overlay tetap kehitung
     klik di dalam <a> itu sendiri — link tetap jalan normal. */
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(5, 3, 16, 0.12) 0%, rgba(5, 3, 16, 0.78) 100%);
  opacity: 0; transition: opacity 0.2s ease;
}
.poster-card:hover .poster-card__hover-overlay { opacity: 1; }
/* 3 Okt 2026 (permintaan operator, fix preview ga keluar di mobile) — di HP
   ga ada ":hover", jadi overlay ini ga pernah opacity:1 lewat rule di atas.
   site.js nambahin class "is-tap-active" pas tap pertama di poster (device
   touch), overlay ini yang bikin keliatan — sama kayak pas lagi beneran
   muter preview (is-playing, misal video telat ke-load dikit). */
.poster-card__hover-overlay.is-tap-active,
.poster-card__hover-overlay.is-playing { opacity: 1; }
.poster-card__hover-play {
  width: 46px; height: 46px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb), 0.92); box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.18);
  transform: scale(0.8); transition: transform 0.2s ease;
}
.poster-card:hover .poster-card__hover-play { transform: scale(1); }
.poster-card__hover-play svg { width: 18px; height: 18px; color: #06110f; margin-left: 2px; }

/* Video preview beneran pas hover (30 Sep 2026, permintaan operator: ambil
   dari Bunny Stream) — JS (site.js, "poster-card hover preview") nge-insert
   <iframe> Bunny Stream ini ke dalam .poster-card__hover-overlay pas
   pointerenter (delay dikit biar hover sekilas gak nge-trigger load), dan
   ngapus-nya lagi pas pointerleave (stop playback, hemat bandwidth). Card
   yang film-nya belum punya source Bunny Stream tetep fallback ke overlay
   icon play polos di atas (gak ada .poster-card__preview-frame sama sekali). */
.poster-card__preview-frame {
  /* 2 Okt 2026 (v3) — popout landscape preview (Opsi A, disetujui operator,
     gantiin trik crop 266.7% v2 yang bikin video keliatan "kepotong jelek"
     krn zoom horizontal ekstrim). Sekarang pas preview aktif, SELURUH
     .poster-card__media berubah jadi kotak 16:9 beneran (lihat aturan
     .poster-card.is-previewing di bawah) — jadi iframe di sini gak perlu
     di-zoom/di-crop lagi, tinggal ngisi penuh 100% x 100% kotak yang
     emang udah pas rasionya sama video Bunny. */
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.2s ease;
}
.poster-card__hover-overlay.is-playing { background: rgba(5, 3, 16, 0.15); }
.poster-card__hover-overlay.is-playing .poster-card__preview-frame { opacity: 1; }
.poster-card__hover-overlay.is-playing .poster-card__hover-play { opacity: 0; }

/* Popout landscape card (Opsi A) — pas preview Bunny lagi aktif, kotak
   .poster-card__media (asalnya portrait 2:3 kayak poster biasa) di-expand
   jadi kotak landscape 16:9, posisinya absolute "mengambang" di atas card
   aslinya (yang tetap diem di tempat sebagai placeholder, biar layout grid
   di sekitarnya gak ikut geser/reflow), trus dikasih scale dikit + shadow
   gede biar keliatan "elevated" kayak hover-preview card Netflix. Card
   induk (.poster-card) butuh position:relative (udah ada dari awal) +
   z-index tinggi pas is-previewing biar nutupin card tetangga di kanan-
   kirinya, bukan malah ketutupan mereka. JS (site.js) yang nambah/nyabut
   class "is-previewing" ini ke <article class="poster-card">, bareng pas
   nambah/nyabut "is-playing" ke overlay-nya. */
.poster-card__rating {
  position: absolute; top: 8px; left: 8px; z-index: 1; display: flex; align-items: center; gap: 3px;
  background: rgba(10, 6, 20, 0.72); backdrop-filter: blur(4px); border-radius: 6px; padding: 4px 7px;
}
.poster-card__rating svg { width: 11px; height: 11px; color: var(--accent); }
.poster-card__rating span { color: #fff; font-size: 11px; font-weight: 800; }

.poster-card__tag {
  position: absolute; left: 8px; bottom: 8px; z-index: 1; font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.9);
  background: rgba(10, 6, 20, 0.6); padding: 2px 7px; border-radius: 5px;
}

/* Badge jumlah episode (27 Sep 2026) — pojok kanan-atas poster, dipakai
   Film Series biar keliatan sekilas ada berapa episode tanpa buka detail. */
.poster-card__episodes {
  position: absolute; top: 8px; right: 8px; z-index: 1; font-size: 10.5px; font-weight: 700; color: #fff;
  background: rgba(37, 99, 235, 0.85); backdrop-filter: blur(4px); padding: 4px 7px; border-radius: 6px;
  white-space: nowrap;
}

.poster-card__title {
  font-size: 14px; font-weight: 700; line-height: 1.35; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-align: center;
}
.poster-card__title a:hover { color: var(--accent); }
/* 10 Sep 2026 (rev — dipindah dari badge pojok gambar ke sini, permintaan
   operator): total views sebaris sama label kategori di bawah judul. */
/* 6 Okt 2026 (permintaan operator): judul & meta thumbnail rata tengah. */
.poster-card__meta { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.poster-card__meta-views { display: inline-flex; align-items: center; gap: 3px; }
.poster-card__meta-views svg { width: 11px; height: 11px; flex-shrink: 0; }

@media (max-width: 640px) {
  .poster-card { width: 170px; }
}

/* ============================================================
   GLASS / CARD PRIMITIVES
   ============================================================ */
.glass-card {
  background: var(--surface-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.glass-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-glow);
  background: var(--surface-glass-strong);
  box-shadow: var(--shadow-glow-accent);
}

.crypto-card {
  padding: 28px;
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}

.crypto-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.5), rgba(var(--accent-rgb), 0.12), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.7;
}

.crypto-card__icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.10));
  border: 1px solid var(--border-glow);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  color: var(--accent);
}

.crypto-card__icon svg { width: 22px; height: 22px; }

.crypto-card__icon--img {
  padding: 0;
  overflow: hidden;
  background: var(--surface-glass-strong);
}

.crypto-card__icon--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.crypto-card h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text);
}

.crypto-card p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
}

/* "Aplikasi Sagagoal — Segera Hadir" promo card (wpm_app_promo_section()) —
   layers a soft accent-tinted gradient over .glass-card/.crypto-card so it
   reads as peach/cream in light mode and a warm dark tint in dark mode,
   using the same --accent-rgb re-tint trick as .crypto-card__icon instead
   of hardcoding per-theme colors. */
.app-promo-card {
  padding: 40px 28px;
  text-align: center;
  background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.02) 60%), var(--surface-glass);
}

/* 7 Okt 2026 (permintaan operator) -- border kartu ini sebelumnya nongol
   lebih ke dalam dibanding row di atasnya (.home-row--highlight), karena
   border row itu nempel di TEPI .crypto-container (dia sendiri yang jadi
   kotaknya), sedangkan kartu promo ini cuma ANAK di dalam
   .crypto-container yang masih punya padding 24px sendiri -- jadi border
   kartu ini keikut mundur 24px ekstra di kiri-kanan. Negative margin di
   sini nge-null-in padding parent itu biar border-nya rata nempel ke
   tepi container juga, sejajar sama row film di atasnya; padding
   dalemnya ditambah 24px biar jarak teks ke tepi kartu nggak ikut
   berubah (keliatan sama kayak sebelumnya, cuma border-nya yang maju).
   @media 640px di bawah: padding container di situ juga tetap 24px
   (dicek, nggak ada override), jadi angka ini aman dipakai apa adanya. */
.app-promo-card {
  margin-left: -24px;
  margin-right: -24px;
  padding-left: calc(28px + 24px);
  padding-right: calc(28px + 24px);
}

.app-promo-card__icon { margin: 0 auto 16px; }
.app-promo-card__logo {
  /* Diganti ke logo gold (src-nya, lihat wpm_app_promo_section() di
     site-bootstrap.php) + dibesarin (30 Sep 2026, permintaan operator:
     "kasih logo pojok lelaki gold, bikin agak gede") — sebelumnya masih
     pointing ke file wordmark lama yang udah gak ada, jadi cuma nongol
     alt text polos "Pojok Lelaki". */
  display: block;
  margin: 0 auto 20px;
  height: 108px;
  width: auto;
  max-width: 440px;
  object-fit: contain;
}
@media (max-width: 640px) {
  .app-promo-card__logo { height: 72px; max-width: 280px; }
}
.app-promo-card__title { font-size: 22px; }

/* Selector qualified with .app-promo-card (not just .app-promo-card__subtitle)
   so its specificity beats .crypto-card p's `margin: 0` above — otherwise
   that rule wins (equal-ish specificity, but element+class > single class)
   and silently zeroes out the auto left/right margins here, leaving the
   480px-wide box flush against the card's left edge instead of centered
   (text-align: center then only centers each line WITHIN that off-center
   box, producing the "first line further left, second line more centered"
   asymmetry seen in the two wrapped lines). */
.app-promo-card .app-promo-card__subtitle { max-width: 480px; margin: 0 auto 20px; text-align: center; }

.app-promo-card__badges {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Ad slot under the app promo card (11 Agu 2026 — "Halaman Apps" scope
   wiring, see wpm_app_promo_section()). Only rendered when an ad is
   actually active for this slot, so this margin never shows as empty
   space by itself. */
.app-promo-card__ad-wrap { margin-top: 20px; display: flex; justify-content: center; }

.app-store-badge--disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; }

.market-card {
  padding: 22px 20px;
  border-radius: var(--radius-md);
}

.market-card__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.market-card__value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  margin-top: 10px;
  color: var(--text);
}

.market-card__delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  margin-top: 8px;
}

.market-card__delta--up { color: var(--green); }
.market-card__delta--down { color: var(--red); }

/* ============================================================
   SECTION LAYOUT HELPERS
   ============================================================ */
.crypto-section {
  padding: 96px 0;
  position: relative;
  z-index: 1;
}

.crypto-section--tight { padding: 72px 0; }

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.30);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.section-kicker svg { width: 14px; height: 14px; flex-shrink: 0; }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 14px;
  color: var(--text);
}

.section-title span {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-subtitle {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 0 40px;
}

.section-header--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.section-header--center .section-subtitle { margin-left: auto; margin-right: auto; }

.crypto-grid {
  display: grid;
  gap: 22px;
}

.crypto-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.crypto-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.crypto-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.crypto-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ============================================================
   ARTICLES
   ============================================================ */
.article-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.article-card__media {
  height: 130px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.35), rgba(var(--accent-rgb), 0.15));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.article-card__media svg { width: 34px; height: 34px; }

.article-card__body { padding: 22px; flex: 1; display: flex; flex-direction: column; }

.article-card__tag {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(34, 211, 238, 0.10);
  border: 1px solid rgba(34, 211, 238, 0.25);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.article-card h3 { font-family: var(--font-display); font-size: 16.5px; margin: 0 0 8px; }
.article-card p { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; margin: 0 0 16px; flex: 1; }

.article-card__cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-2);
  margin-top: auto;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 32px;
  align-items: start;
}

.contact-info-card {
  padding: 30px;
  border-radius: var(--radius-lg);
}

.contact-info-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-glass);
}

.contact-info-row:last-child { border-bottom: none; }

.contact-info-row__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.14);
  border: 1px solid var(--border-glow);
  display: grid;
  place-items: center;
  color: var(--accent);
  flex-shrink: 0;
}

.contact-info-row__icon svg { width: 17px; height: 17px; }

.contact-info-row__label { font-size: 12px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.contact-info-row__value { font-size: 14.5px; color: var(--text); font-weight: 500; margin-top: 2px; }
a.contact-info-row__value { display: inline-block; text-decoration: none; transition: color 0.16s ease; }
a.contact-info-row__value:hover { color: var(--cyan); }

.contact-form-card { padding: 32px; border-radius: var(--radius-lg); }

.form-row { display: grid; gap: 8px; margin-bottom: 18px; }
.form-row--2col { grid-template-columns: 1fr 1fr; gap: 18px; display: grid; margin-bottom: 0; }

.form-label { font-size: 13px; font-weight: 600; color: var(--text-muted); }

.form-input,
.form-textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-glass-2);
  border: 1px solid var(--border-glass);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.form-input:focus,
.form-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.20);
}

.form-textarea { resize: vertical; min-height: 120px; }

.form-alert {
  padding: 13px 16px;
  border-radius: 12px;
  font-size: 13.5px;
  margin-bottom: 22px;
}

.form-alert--success { background: rgba(16, 185, 129, 0.10); border: 1px solid rgba(16, 185, 129, 0.30); color: #6ee7b7; }
.form-alert--error { background: rgba(244, 63, 94, 0.10); border: 1px solid rgba(244, 63, 94, 0.30); color: #fda4af; }

.hp-field { position: absolute; left: -9999px; top: -9999px; }

/* ============================================================
   FOOTER
   ============================================================ */
.crypto-footer {
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), var(--footer-border-glow)), transparent) 1;
  padding: 56px 0 28px;
  position: relative;
  z-index: 1;
  /* Base gelap ditambah 24 Agu 2026 (permintaan operator: footer lebih
     gelap) — sebelumnya cuma gradient tipis di atas --bg-void, sekarang
     ada lapisan solid gelap dulu baru gradient aksennya di atas itu. */
  background-color: rgba(0, 0, 0, 0.35);
  background-image:
    radial-gradient(ellipse 55% 60% at 100% 0%, rgba(var(--accent-rgb), var(--footer-glow-1)), transparent 65%),
    linear-gradient(180deg, rgba(var(--accent-rgb), var(--footer-glow-2)) 0%, transparent 45%);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

/* Footer logo (25 Jul 2026) — same .crypto-logo/.crypto-logo__mark markup
   as the header, just a slightly smaller mark so it doesn't overpower the
   footer's own 24px wordmark (bigger than the header's 20px one, so this
   isn't a straight scale-down — sized by eye against the footer text). */
.footer-brand__logo { margin-bottom: 0; }
.footer-brand__logo-mark { width: 34px; height: 34px; border-radius: 10px; }
/* Logo permanen/hardcode (24 Agu 2026) — override ukuran wide buat konteks
   footer (dikit lebih kecil dari header, sama kayak sebelumnya). */
.footer-brand__logo-mark.crypto-logo__mark--wide { width: auto; height: 92px; max-width: 400px; border-radius: 0; }

.footer-brand p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 14px 0 0;
  max-width: 320px;
}

.footer-heading {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(var(--accent-rgb), var(--footer-heading-tint));
  margin: 0 0 16px;
}

.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-links a { font-size: 14px; color: var(--text-muted); transition: color 0.16s ease; }
.footer-links a:hover { color: var(--accent); }

/* Bar bawah footer — gelap/hitam senada background footer di atasnya
   (31 Agu 2026, revisi operator: sempat dicoba merah samain header,
   ternyata kurang cocok, balikin ke gelap). */
.footer-bottom-bar {
  background: var(--bg-void);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-top: 8px;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}

.footer-disclaimer {
  font-size: 12px;
  color: var(--text-faint);
  max-width: 720px;
  margin: 0 0 16px;
  line-height: 1.6;
}

/* Atribusi TMDb (24 Agu 2026) — dikecilin & ditaruh paling bawah footer
   (setelah .footer-bottom, bukan di atasnya kayak sebelumnya) biar gak
   dominan, tapi tetap ada & tetap ke-link, sesuai syarat pakai API TMDb. */
.footer-disclaimer--tmdb {
  font-size: 10.5px;
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  max-width: none;
  color: rgba(255, 255, 255, 0.65);
}
.footer-disclaimer--tmdb a { color: var(--gold); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .crypto-nav__menu { display: none; }
  .crypto-nav__toggle { display: inline-flex; }
  .crypto-hero__inner { grid-template-columns: 1fr; }
  /* 2 Okt 2026 (v2, permintaan operator: "hamburger dipindah keatas,
     ada di header kanan") — DIBALIKIN lagi, kebalikan dari perubahan
     27 Sep 2026 (komentar lama di atas sempat bilang hamburger dicabut
     dari header mobile, dipindah ke .mobile-tabbar doang). Sekarang
     .crypto-nav__toggle TAMPIL lagi di pojok kanan header mobile (nambah
     margin-left:auto biar nempel ke kanan walau .zc-nav__left/.zc-search
     udah disembunyikan duluan), trigger drawer megamenu yang sama persis
     (#crypto-nav-mobile, lihat site-footer.php + .js-open-mobile-nav di
     site.js) — cuma sekarang bisa dibuka dari ATAS juga, bukan cuma dari
     tombol "Menu" di bottom tab bar (tombol itu juga masih ada, lihat
     .mobile-tabbar di site-footer.php, 2 trigger buka drawer yang sama).
     Konten lain di .zc-nav__right (search form inline desktop) tetap
     disembunyikan di mobile — gak relevan/numpuk kalau ditampilin di
     layar sempit. .zc-theme-icon DIKECUALIKAN (4 Okt 2026, permintaan
     operator) — dulu ikon ini masih dekoratif doang jadi wajar disembunyiin
     di mobile juga, tapi sekarang udah jadi toggle tema beneran (lihat
     #zc-theme-toggle di site.js), jadi ditampilin lagi di mobile, nempel
     persis di sebelah kiri tombol hamburger. */
  .zc-nav__right { display: flex !important; align-items: center; gap: 8px; }
  .zc-search, .zc-search-toggle, .zc-search-wrap { display: none !important; }
  /* margin-left:auto dipindah ke .zc-theme-icon (bukan di tombol hamburger
     kayak sebelumnya) — biar ikon tema & hamburger NEMPEL BARENGAN di
     pojok kanan (cuma gap 8px di antaranya), bukan kepisah jauh
     (theme-icon kepentok ke kiri sendirian, hamburger ke kanan sendirian). */
  .zc-theme-icon { display: flex !important; margin-left: auto; }
  .crypto-nav__toggle { display: inline-flex !important; }
  .crypto-hero__visual { height: 300px; margin-top: 20px; }
  .crypto-grid--3, .crypto-grid--4, .crypto-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .crypto-hero { padding: 60px 0 24px; }
  .crypto-grid--3, .crypto-grid--4, .crypto-grid--5, .crypto-grid--2 { grid-template-columns: 1fr; }
  .form-row--2col { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .crypto-section { padding: 64px 0; }
  .crypto-hero__visual { display: none; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   NAV SEARCH BUTTON
   ============================================================ */
.crypto-nav__search-btn {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--surface-glass-2);
  border: 1px solid var(--border-glass);
  display: grid;
  place-items: center;
  color: var(--text-muted);
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.crypto-nav__search-btn svg { width: 17px; height: 17px; }
.crypto-nav__search-btn:hover { color: var(--accent); border-color: var(--border-glow); background: rgba(var(--accent-rgb), 0.10); }

/* ============================================================
   SITE TICKER ROW — single merged bar holding the Live Ticker
   (left, fixed width) and Breaking News ticker (right, flexible),
   side by side instead of two stacked full-width bars.
   ============================================================ */
.site-ticker-row {
  position: relative;
  z-index: 1;
  background: rgba(var(--accent-rgb), 0.07);
  border-bottom: 1px solid var(--border-glass);
  overflow: hidden;
}
.site-ticker-row__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}
.site-ticker-row__divider {
  width: 1px;
  align-self: stretch;
  margin: 10px 18px;
  background: var(--border-glass);
  flex-shrink: 0;
}

/* ============================================================
   BREAKING NEWS TICKER (right-hand segment of .site-ticker-row)
   ============================================================ */
.breaking-ticker {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}
.breaking-ticker__label {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
}
.breaking-ticker__label .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 8px var(--red);
  animation: tickerPulse 1.6s ease-in-out infinite;
}
@keyframes tickerPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.breaking-ticker__track {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.breaking-ticker__scroll {
  display: inline-flex;
  gap: 40px;
  padding: 10px 0;
  animation: tickerScroll 32s linear infinite;
}
.breaking-ticker__scroll a { font-size: 13.5px; color: var(--text-muted); transition: color 0.16s ease; }
.breaking-ticker__scroll a:hover { color: var(--text); }
@keyframes tickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) { .breaking-ticker__scroll { animation: none; } }

/* ============================================================
   LIVE TICKER (Binance WebSocket — assets/js/live-ticker.js)
   Left-hand segment of .site-ticker-row.
   ============================================================ */
.live-ticker {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  max-width: 52%;
  overflow: hidden;
}

.live-ticker__label {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.live-ticker__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.live-ticker.is-connected .live-ticker__dot,
#wpm-live-ticker.is-connected .live-ticker__dot {
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: tickerPulse 1.6s ease-in-out infinite;
}

.live-ticker__track {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.live-ticker__scroll {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  animation: tickerScroll 20s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .live-ticker__scroll { animation: none; } }

.live-ticker__chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface-glass);
  border: 1px solid var(--border-glass);
  font-size: 12.5px;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.live-ticker__chip.is-loading { opacity: 0.55; }

.live-ticker__symbol { font-weight: 700; color: var(--text); }
.live-ticker__price { font-family: var(--font-display); color: var(--text-muted); }
.live-ticker__change { font-weight: 600; }
.live-ticker__change.up { color: var(--green); }
.live-ticker__change.down { color: var(--red); }

.live-ticker__chip.is-flash-up { background: rgba(16, 185, 129, 0.18); border-color: rgba(16, 185, 129, 0.4); }
.live-ticker__chip.is-flash-down { background: rgba(244, 63, 94, 0.18); border-color: rgba(244, 63, 94, 0.4); }

/* ============================================================
   AD SLOTS
   ============================================================ */
.ad-slot-wrap { position: relative; z-index: 1; padding: 18px 0; }
.ad-slot-wrap .crypto-container { display: flex; justify-content: center; }

.ad-slot {
  position: relative;
  display: block;
  max-width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-glass);
  background: var(--surface-glass);
}
.ad-slot img, .ad-slot video { display: block; max-width: 100%; height: auto; }
.ad-slot__label {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(5, 3, 16, 0.65); color: var(--text-faint);
}
.ad-slot__cta-badge {
  position: absolute; bottom: 10px; right: 10px; z-index: 2;
  font-size: 12px; font-weight: 700; padding: 7px 14px; border-radius: 999px;
  background: var(--grad-brand); color: #fff;
}
.ad-slot--html { padding: 12px; text-align: center; }
.ad-slot--video { text-align: center; }
.ad-slot--video video { width: 100%; }
.ad-slot--external { padding: 12px; text-align: center; }
.ad-slot__cta {
  display: inline-block; margin-top: 10px; padding: 9px 18px; border-radius: 999px;
  background: var(--grad-brand); color: #fff; font-size: 13px; font-weight: 600;
}

/* ------------------------------------------------------------
   Text Ad (ad_type='text') — styled like a standard search-result
   text ad ("Ad · domain / Headline / Description / CTA"), but kept
   visually close to the site's dark glass theme rather than an exact
   Google-ads clone. Whole block is a single <a> (see wpm_text_ad_markup())
   so it needs its own layout, distinct from the image/video .ad-slot
   rules above.
   ------------------------------------------------------------ */
.ad-slot--text {
  padding: 14px 16px;
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.ad-slot--text:hover {
  border-color: var(--border-glow);
  background: var(--surface-glass-strong);
  transform: translateY(-1px);
}
.ad-slot--text:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.text-ad { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.text-ad__meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text-faint);
}
.text-ad__badge {
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--cyan);
  border: 1px solid rgba(34, 211, 238, 0.35);
  border-radius: 4px;
  padding: 1px 6px;
}
.text-ad__dot { opacity: 0.5; }
.text-ad__domain { color: var(--text-faint); overflow-wrap: anywhere; }
.text-ad__headline {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.35;
  overflow-wrap: anywhere;
}
.text-ad__desc {
  font-size: 13.5px; color: var(--text-muted); line-height: 1.5;
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.text-ad__cta {
  margin-top: 2px; align-self: flex-start;
  font-size: 12.5px; font-weight: 700; color: var(--accent-2);
}

/* Position-aware layout variants (section 4 of the brief) — same markup,
   different arrangement/emphasis depending on where the slot is placed. */
.ad-slot--pos-header, .ad-slot--pos-below-main-menu, .ad-slot--pos-footer {
  max-width: 100%;
}
.ad-slot--pos-header .text-ad, .ad-slot--pos-below-main-menu .text-ad, .ad-slot--pos-footer .text-ad {
  flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap;
}
.ad-slot--pos-header .text-ad__desc, .ad-slot--pos-below-main-menu .text-ad__desc, .ad-slot--pos-footer .text-ad__desc {
  -webkit-line-clamp: 1;
}

.ad-slot--pos-sidebar-left, .ad-slot--pos-sidebar-right {
  width: 100%;
}
.ad-slot--pos-sidebar-left .text-ad__desc, .ad-slot--pos-sidebar-right .text-ad__desc {
  -webkit-line-clamp: 3;
}

/* Image banners in the sidebar (11 Agu 2026 fix) — the `width: 100%`
   rule above is meant for the text-ad layout (which needs the full
   column to flex its headline/desc/CTA). Image banners are usually a
   fixed skyscraper size (e.g. 160x600) narrower than the 340px sidebar
   column — forcing width:100% on those stretched the anchor box to the
   full column while the image itself stayed at its native width,
   leaving a blank border/background rectangle to the right of the
   actual banner (see operator screenshot, 11 Agu 2026). Image banners
   should hug their own content and sit flush left instead, same as how
   detik.com and most publishers place skyscraper units. */
.ad-slot--image.ad-slot--pos-sidebar-left,
.ad-slot--image.ad-slot--pos-sidebar-right {
  width: auto;
  max-width: 100%;
  display: inline-block;
  margin-right: auto;
}

.ad-slot--pos-article-before-title, .ad-slot--pos-article-after-title {
  margin: 14px 0;
}

.ad-slot--pos-popup .text-ad__headline { font-size: 18px; }

.ad-slot--pos-sticky-bottom-mobile .text-ad {
  flex-direction: row; align-items: center; gap: 10px;
}
.ad-slot--pos-sticky-bottom-mobile .text-ad__desc { display: none; }

/* ============================================================
   POPUP AD OVERLAY (9 Sep 2026, ads.php type="popup") — muncul
   sebagai overlay di tengah layar setelah delay tertentu, bukan
   nempel di posisi normal seperti slot lainnya. Markup & JS-nya
   di-generate oleh wpm_popup_ad_markup() (includes/site-bootstrap.php).
   ============================================================ */
.ad-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ad-popup-overlay[hidden] { display: none; }

.ad-popup-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 6, 6, 0.72);
  backdrop-filter: blur(2px);
}

.ad-popup-overlay__box {
  position: relative;
  z-index: 1;
  max-width: min(90vw, 480px);
  max-height: 85vh;
  background: #1a1010;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: var(--radius-lg, 14px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ad-popup-overlay__close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.ad-popup-overlay__close:hover { background: rgba(0, 0, 0, 0.8); }

.ad-popup-overlay__link { display: block; }
.ad-popup-overlay__link img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
}

.ad-popup__label {
  padding: 6px 12px 0;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.ad-popup__cta {
  margin: 10px 14px 14px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--gold, #d4af37);
  color: #241414;
  font-weight: 700;
  text-align: center;
}

body.ad-popup-open { overflow: hidden; }

/* ============================================================
   PROMO BANNERS (cms-admin/pages/banners.php, placement="home")
   ============================================================ */
.banner-strip__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.banner-card {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-glass);
  background: var(--surface-glass);
  aspect-ratio: 1920 / 900;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.banner-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-glow);
  box-shadow: var(--shadow-glow-accent);
}
.banner-card picture,
.banner-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner-card__overlay {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 20px;
  background: linear-gradient(0deg, rgba(5, 3, 16, 0.88) 0%, rgba(5, 3, 16, 0.35) 60%, transparent 100%);
}
.banner-card__title {
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
}
.banner-card__subtitle {
  font-size: 13.5px;
  color: var(--text-muted);
  max-width: 46ch;
}
.banner-card__cta {
  display: inline-block;
  margin-top: 4px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--grad-brand);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}

@media (max-width: 640px) {
  .banner-card { aspect-ratio: 900 / 1200; }
}

/* Livestream row (29 Sep 2026, permintaan operator) — kartu klik-untuk-
   muter-video, ditaruh di bawah ad banner homepage, di atas row "Paling
   Banyak Ditonton". Lihat wpm_livestream_row() di site-bootstrap.php. */
.livestream-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 12px;
}
@media (max-width: 900px) {
  .livestream-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .livestream-grid { grid-template-columns: 1fr; }
}
.livestream-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: none;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: transform 0.15s ease;
}
.livestream-card:hover { transform: translateY(-2px); }
.livestream-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #14101f;
  overflow: hidden;
}
.livestream-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.livestream-card__fallback {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; color: var(--muted, #888);
}
.livestream-card__fallback svg { width: 40px; height: 40px; }
.livestream-card__play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 3, 16, 0.35);
}
.livestream-card__play svg {
  width: 46px; height: 46px; color: #fff;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}
.livestream-card__badge {
  position: absolute; top: 8px; left: 8px;
  background: var(--accent, #e8283b);
  color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
  padding: 3px 9px; border-radius: 999px;
}
.livestream-card__title {
  padding: 10px 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
}

.livestream-modal[hidden] { display: none; }
.livestream-modal {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.livestream-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(5, 3, 16, 0.85); backdrop-filter: blur(6px);
}
.livestream-modal__box {
  position: relative;
  width: 100%; max-width: 960px;
  background: #0c0a16;
  border-radius: 14px;
  overflow: hidden;
  z-index: 1;
}
.livestream-modal__player {
  position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000;
}
.livestream-modal__player iframe,
.livestream-modal__player video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.livestream-modal__close {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  background: rgba(0, 0, 0, 0.5); color: #fff; border: none;
  width: 34px; height: 34px; border-radius: 50%;
  font-size: 20px; line-height: 1; cursor: pointer;
}
body.livestream-modal-open { overflow: hidden; }

.wpm-popup-ad {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(5, 3, 16, 0.75); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.wpm-popup-ad.is-hidden { display: none; }
.wpm-popup-ad__panel { position: relative; max-width: 420px; width: 100%; }
.wpm-popup-ad__close {
  position: absolute; top: -14px; right: -14px; z-index: 3;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-deep); border: 1px solid var(--border-glass); color: var(--text);
  cursor: pointer; font-size: 17px;
}

.wpm-sticky-ad {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
  background: var(--bg-deep); border-top: 1px solid var(--border-glass);
  padding: 8px 40px 8px 12px; display: none;
}
.wpm-sticky-ad.is-hidden { display: none !important; }
.wpm-sticky-ad__close {
  position: absolute; top: 6px; right: 8px; z-index: 3;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface-glass-strong); border: 1px solid var(--border-glass); color: var(--text);
  cursor: pointer; font-size: 14px;
}
@media (max-width: 640px) { .wpm-sticky-ad { display: block; } }
/* 27 Sep 2026: diangkat ke atas .mobile-tabbar baru (pill sticky di
   bawah) biar nggak numpuk/nutupin bar navigasi itu — sebelumnya nempel
   bottom:0 pas nggak ada tabbar di bawahnya sama sekali. */
@media (max-width: 980px) {
  .wpm-sticky-ad { bottom: calc(82px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   FLOATING CONTACT BUTTONS (WhatsApp/Telegram — Site Settings) —
   bottom-right on every public page, see wpm_floating_contact_buttons()
   in site-bootstrap.php. Sits at the same z-index tier as the sticky
   mobile ad bar; bumped up on mobile so it clears that bar instead of
   overlapping it (.wpm-sticky-ad is full-width along the bottom edge).
   ============================================================ */
.floating-contact {
  position: fixed;
  right: 28px; /* 2 Okt 2026: dinaikin dari 20px, permintaan operator ("mepet
                  ke kanan") biar ada jarak napas dari tepi layar */
  bottom: 20px;
  z-index: 240;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.floating-contact__btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.floating-contact__btn svg { width: 30px; height: 30px; }

.floating-contact__btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  color: #fff;
}

.floating-contact__btn--whatsapp { background: #25d366; }
.floating-contact__btn--telegram { background: #29a9eb; }

/* ---- Telegram "Click Me!" attention effect (2 Okt 2026, permintaan
   operator, referensi gambar tombol pulsing) — pure CSS, nggak ada JS
   timer, jadi nggak bisa drift/putus kalau tab di-background. Satu
   siklus = 60 detik: burst (tooltip bounce + ring mekar + jarum radial
   mancar + tombol pulse) terjadi di ~2.5 detik pertama, terus idle
   diem sampai siklus 60 detik berikutnya. Radius jarum (58px) dan skala
   ring max (2.8x) didefinisikan LANGSUNG di keyframe masing-masing
   (bukan dua tempat terpisah kayak CSS+JS), jadi nggak ada risiko
   "konstanta ke-out-of-sync" — ubah angkanya di satu keyframe aja. ---- */
.floating-contact__item { position: relative; display: flex; align-items: center; justify-content: center; }

/* 2 Okt 2026 (v2, permintaan operator: "efeknya di perbanyak lg" +
   "text click me jg kluar pas 1 menit sekali ga setiap saat") — 2
   perubahan besar dari versi v1 di atas:
   1) Tooltip "Click Me!" SEKARANG ikut opacity 0 di luar jendela burst
      (sebelumnya cuma posisinya yang bounce, tapi teksnya permanen
      kelihatan terus menerus — bug yang dilaporin operator). Fade in
      bareng ring/spoke di awal siklus, fade out lagi begitu burst-nya
      kelar, baru muncul lagi pas siklus 60 detik berikutnya.
   2) Ring ditambah jadi 3 lapis (ring--3, markup di site-bootstrap.php)
      dan jarum radial dari 8 jadi 12 (tiap 30°, markup juga di
      site-bootstrap.php) — burst-nya keliatan lebih rame/niat. */
.floating-contact__tooltip {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  background: #29a9eb;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2px;
  padding: 7px 16px;
  border-radius: 18px;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  animation: wpm-tg-tooltip-bounce 60s ease-in-out infinite;
}
.floating-contact__tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #29a9eb;
}
@keyframes wpm-tg-tooltip-bounce {
  0%        { opacity: 0; transform: translateX(-50%) translateY(6px); }
  0.3%      { opacity: 1; }
  1.5%      { transform: translateX(-50%) translateY(-7px); }
  3%        { transform: translateX(-50%) translateY(0); }
  4.5%      { transform: translateX(-50%) translateY(-4px); }
  6%        { opacity: 1; transform: translateX(-50%) translateY(0); }
  7%, 100%  { opacity: 0; transform: translateX(-50%) translateY(6px); }
}

.floating-contact__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(41, 169, 235, 0.55);
  pointer-events: none;
  opacity: 0;
  animation: wpm-tg-ring 60s ease-out infinite;
}
@keyframes wpm-tg-ring {
  0%        { transform: scale(1);   opacity: 0.65; }
  4%        { transform: scale(2.8); opacity: 0; }
  100%      { transform: scale(2.8); opacity: 0; }
}
.floating-contact__ring--2 {
  animation-name: wpm-tg-ring-2;
}
@keyframes wpm-tg-ring-2 {
  0%, 1.3%  { transform: scale(1);   opacity: 0; }
  1.4%      { opacity: 0.6; }
  5%        { transform: scale(2.8); opacity: 0; }
  100%      { transform: scale(2.8); opacity: 0; }
}
.floating-contact__ring--3 {
  animation-name: wpm-tg-ring-3;
}
@keyframes wpm-tg-ring-3 {
  0%, 2.6%  { transform: scale(1);   opacity: 0; }
  2.7%      { opacity: 0.5; }
  6%        { transform: scale(2.8); opacity: 0; }
  100%      { transform: scale(2.8); opacity: 0; }
}

.floating-contact__spokes { position: absolute; inset: 0; pointer-events: none; }
.floating-contact__spoke {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 12px;
  margin-top: -6px;
  margin-left: -1.5px;
  background: #5ec8f5;
  border-radius: 2px;
  opacity: 0;
  transform-origin: 50% 50%;
  animation: wpm-tg-spoke 60s ease-out infinite;
}
.floating-contact__spoke:nth-child(1)  { --tg-rot: 0deg; }
.floating-contact__spoke:nth-child(2)  { --tg-rot: 30deg; }
.floating-contact__spoke:nth-child(3)  { --tg-rot: 60deg; }
.floating-contact__spoke:nth-child(4)  { --tg-rot: 90deg; }
.floating-contact__spoke:nth-child(5)  { --tg-rot: 120deg; }
.floating-contact__spoke:nth-child(6)  { --tg-rot: 150deg; }
.floating-contact__spoke:nth-child(7)  { --tg-rot: 180deg; }
.floating-contact__spoke:nth-child(8)  { --tg-rot: 210deg; }
.floating-contact__spoke:nth-child(9)  { --tg-rot: 240deg; }
.floating-contact__spoke:nth-child(10) { --tg-rot: 270deg; }
.floating-contact__spoke:nth-child(11) { --tg-rot: 300deg; }
.floating-contact__spoke:nth-child(12) { --tg-rot: 330deg; }
@keyframes wpm-tg-spoke {
  0%     { transform: rotate(var(--tg-rot)) translateY(-28px); opacity: 0.9; }
  3.3%   { opacity: 0.2; }
  4%     { transform: rotate(var(--tg-rot)) translateY(-58px); opacity: 0; }
  100%   { transform: rotate(var(--tg-rot)) translateY(-58px); opacity: 0; }
}

.floating-contact__btn--telegram {
  position: relative;
  z-index: 1;
  animation: wpm-tg-btn-pulse 60s ease-in-out infinite;
}
@keyframes wpm-tg-btn-pulse {
  0%, 100%  { transform: scale(1); }
  2%        { transform: scale(1.1); }
  4%        { transform: scale(1); }
}

@media (max-width: 640px) {
  .floating-contact { right: 20px; bottom: 84px; gap: 10px; } /* 2 Okt 2026: 14px -> 20px, sama alasan di atas */
  .floating-contact__btn { width: 48px; height: 48px; }
  .floating-contact__btn svg { width: 26px; height: 26px; }
}

/* 27 Sep 2026: dibumping lagi biar clear dari .mobile-tabbar baru
   (pill sticky di bawah, lihat blok BOTTOM TAB BAR di atas) — dulu
   cuma perlu clear .wpm-sticky-ad, sekarang ada 1 layer sticky lagi
   di bawahnya. */
@media (max-width: 980px) {
  .floating-contact { bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   ARTICLE CARD (grid tile used across homepage / category / related)
   ============================================================ */
.news-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.news-card__media {
  height: 170px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.35), rgba(var(--accent-rgb), 0.15));
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.news-card__media img { width: 100%; height: 100%; object-fit: cover; }
.news-card__media svg { width: 34px; height: 34px; color: var(--text-muted); }
.news-card__body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.news-card h3 {
  font-family: var(--font-display); font-size: 16px; line-height: 1.35; margin: 0 0 10px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-card h3 a { transition: color 0.16s ease; }
.news-card h3 a:hover { color: var(--cyan); }
.news-card p {
  font-size: 13.5px; color: var(--text-muted); line-height: 1.6; margin: 0 0 14px; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.news-card__meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-faint); margin-top: auto; }
.news-card__meta svg { width: 13px; height: 13px; }
.news-card__meta span { display: inline-flex; align-items: center; gap: 4px; }

.news-card--row { flex-direction: row; }
.news-card--row .news-card__media { height: auto; width: 130px; flex-shrink: 0; }
.news-card--row .news-card__body { padding: 14px 18px; }
.news-card--row h3 { font-size: 14.5px; margin-bottom: 6px; }

/* ============================================================
   PAGE HEADER (used by kategori/crypto/pencarian)
   ============================================================ */
.page-hero {
  padding: 56px 0 36px;
  position: relative;
  z-index: 1;
}
@media (max-width: 640px) {
  /* 16 Okt 2026 (laporan operator, screenshot mobile /film: ruang kosong
     antara header navbar & judul halaman -- mis. "Semua Film" -- kelihatan
     kegedean). kategori.php/pencarian.php sendiri udah override lewat
     inline style (padding:22px 0 18px), jadi di sini perlu !important
     biar beneran menang di mobile buat semua halaman yang pakai
     .page-hero (termasuk yang masih pakai default 56px/36px). */
  .page-hero { padding: 14px 0 12px !important; }
}
.page-hero .section-kicker { margin-bottom: 14px; }
.page-hero h1 { font-family: var(--font-display); font-size: clamp(26px, 4vw, 38px); font-weight: 700; margin: 0 0 10px; }
.page-hero p { font-size: 15.5px; color: var(--text-muted); max-width: 620px; margin: 0; }
/* Rich-text intro (Special Pages content field — About/Kontak, page.php) —
   sits directly under h1 like .page-hero p above, but wraps admin-authored
   HTML that may contain its own <p> tags, so those need their own margin
   reset instead of relying on the plain-text p rule. */
.page-hero-lead { font-size: 15.5px; color: var(--text-muted); max-width: 620px; }
.page-hero-lead p { margin: 0 0 8px; }
.page-hero-lead p:last-child { margin-bottom: 0; }

.breadcrumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-faint); margin-bottom: 18px;
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--cyan); }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 44px; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 40px; height: 40px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--border-glass); color: var(--text-muted);
}
.pagination a:hover { border-color: var(--border-glow); color: var(--text); }
.pagination .is-current { background: var(--grad-brand); color: #fff; border-color: transparent; }
.pagination .is-disabled { opacity: 0.35; pointer-events: none; }

/* 16 Okt 2026 (permintaan operator, pagination bernomor mode Film Terbaru
   & Banyak Ditonton di kategori.php, gantiin "Muat Lebih Banyak") --
   variasi dari .pagination dasar di atas: tombol Sebelumnya/Selanjutnya
   pakai LABEL TEKS (bukan cuma panah polos kayak .pagination di
   pencarian.php), dan "…" buat gap nomor halaman yang disembunyikan
   tampil polos tanpa border/background kayak tombol lain. */
.pagination__text-link { font-weight: 700; }
.pagination__ellipsis {
  border: none; background: none; min-width: auto; padding: 0 2px;
  color: var(--text-faint);
}
@media (max-width: 640px) {
  /* 16 Okt 2026 (laporan operator, screenshot mobile /film/banyak-ditonton
     & sejenisnya: pagination kepotong di tepi layar, gak center/proporsional)
     -- tombol & gap diperkecil biar muat lebih banyak per baris sebelum
     ke-wrap, dan row-nya sendiri dipastiin gak overflow/clip ngelewatin
     lebar layar. */
  .pagination { gap: 6px; margin-top: 28px; row-gap: 10px; max-width: 100%; }
  .pagination a, .pagination span {
    min-width: 34px; height: 34px; padding: 0 8px; font-size: 12.5px;
  }
  .pagination__text-link { padding: 0 10px; }
}

/* ============================================================
   ARTICLE DETAIL PAGE
   ============================================================ */
/* Column count/widths depend on which ad sidebars are actually active for
   this article (see movie.php's $hasLeftAd/$hasRightAd) — an empty slot
   means its <aside> isn't rendered at all, not just hidden, so these
   variant classes must match the DOM exactly or the remaining column(s)
   won't get the leftover space. */
.article-layout {
  display: grid;
  gap: 28px;
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
.article-layout--right-only { grid-template-columns: minmax(0, 1fr) 260px; }
.article-layout--left-only { grid-template-columns: 260px minmax(0, 1fr); }
.article-layout--both { grid-template-columns: 220px minmax(0, 1fr) 220px; }

/* No ads anywhere — content stays left-aligned (the grid column already
   starts at the container's left edge) but capped so it doesn't stretch
   into an uncomfortably wide reading line on large screens. */
.article-layout--no-ads .article-layout__main { max-width: 760px; }

.article-layout__sidebar { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 16px; }
/* Sidebar "Film Terkait" di halaman /watch digeser turun (30 Sep 2026,
   permintaan operator) — biar heading "Film Terkait" sejajar sama judul
   film (h1) di kolom kiri, bukan nempel rata atas container (yang bikin
   dia keliatan lebih tinggi dari judul, karena h1 punya margin-top dari
   .film-watch__header sedangkan sidebar-block ga punya offset apa-apa). */
.film-watch .article-layout__sidebar { margin-top: 34px; }
.article-layout__main { min-width: 0; }

/* ============================================================
   NEWS LISTING LAYOUT (kategori.php) — same "skip the <aside> entirely
   when the slot is empty" pattern as .article-layout above.
   ============================================================ */
.news-grid-layout {
  display: grid;
  gap: 28px;
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
.news-grid-layout--right-only { grid-template-columns: minmax(0, 1fr) 260px; }
.news-grid-layout__sidebar { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 16px; }
.news-grid-layout__main { min-width: 0; }

/* Sidebar KIRI di halaman "Semua Film"/kategori (30 Sep 2026, permintaan
   operator, hasil diskusi mockup redesign) — quick-nav (Terbaru/Terpopuler/
   Banyak Ditonton/Rating) + daftar genre, biar navigasi film gak cuma
   ngandelin dropdown filter di atas. Beda dari .news-grid-layout__sidebar
   (yang khusus ad kanan) — ini kolom pertama grid, ad kanan (kalau ada)
   tetep jadi kolom terakhir lewat --right-only di atas. */
.news-grid-layout--left { grid-template-columns: 208px minmax(0, 1fr); }
.news-grid-layout--left.news-grid-layout--right-only { grid-template-columns: 208px minmax(0, 1fr) 260px; }
.film-sidebar {
  position: sticky; top: 90px; display: flex; flex-direction: column; align-items: stretch;
  gap: 3px; padding: 0 0 24px; text-align: left;
}
.film-sidebar__label {
  /* 4 Okt 2026 (permintaan operator): header section ("Jelajahi"/"Kategori"/
     "Genre") dibikin lebih keliatan — font digedein, warna gold/kekuningan
     (var(--accent-2), sama kayak warna aktif item .film-sidebar a.is-active
     di bawah), plus border tipis ngelilingin teksnya doang (inline-block,
     bukan full-width) biar kebaca kayak "badge" section, nyontoh box merah
     yang operator tandain di screenshot. */
  display: inline-block;
  font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-2);
  border: 1px solid rgba(var(--accent-rgb), 0.55);
  border-radius: 6px;
  margin: 14px 10px 8px;
  padding: 4px 10px;
}
.film-sidebar__label:first-child { margin-top: 4px; }
.film-sidebar a {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; color: var(--text-muted);
}
.film-sidebar a svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-faint); }
.film-sidebar a:hover { background: var(--surface-glass); color: #fff; }
.film-sidebar a.is-active { background: rgba(var(--accent-rgb), 0.14); color: var(--accent-2); }
.film-sidebar a.is-active svg { color: var(--accent-2); }

@media (max-width: 900px) {
  .news-grid-layout--left,
  .news-grid-layout--left.news-grid-layout--right-only { grid-template-columns: minmax(0, 1fr); }
  .film-sidebar { display: none; }
}

/* Grid poster halaman "Semua Film" — 4 kolom tetap di desktop lebar
   (30 Sep 2026, permintaan operator: "bikin jadi 4 aja"), turun bertahap
   di layar lebih sempit. Menggantikan .poster-grid (flex-wrap lebar
   tetap 168px) KHUSUS di grid utama kategori.php; .poster-grid lama
   masih dipakai di tempat lain (related films, dst) jadi gak diubah. */
/* 6 Okt 2026 (permintaan operator, bagian fitur toggle sidebar: "usahakan
   tampilin banyak video dalam 1 page") — diganti dari FIXED repeat(4) jadi
   auto-fill minmax, biar beneran NAMBAH jumlah kolom pas sidebar
   disembunyiin (ruang lebih lebar = lebih banyak kolom muat), bukan cuma
   bikin card-nya lebih lebar doang kayak sebelumnya. Angka minmax per
   breakpoint dipilih biar jumlah kolom pas sidebar KEBUKA kurang lebih
   sama kayak sebelumnya (4 / 3 / 2), tapi otomatis nambah pas sidebar
   collapsed. */
.film-catalog-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1080px) {
  .film-catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .film-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
.film-catalog-grid .poster-card { width: auto; }

/* Sidebar kiri di HOMEPAGE (30 Sep 2026, permintaan operator) — sama pola
   .news-grid-layout--left di kategori.php, versi sendiri karena struktur
   markup homepage beda (banyak .crypto-container--wide bertumpuk, bukan
   satu grid utama). .home-layout__main cukup jadi kolom flex biasa, tiap
   .crypto-container di dalamnya tetap full-width relatif ke kolom itu
   (max-width-nya lebih lebar dari kolom, jadi otomatis ke-clamp). */
/* Toggle show/hide sidebar kiri (6 Okt 2026, permintaan operator: biar
   grid film dapet ruang lebih lega/lebih banyak kolom per baris). Tab
   kecil position:fixed nempel di tepi kiri viewport, SELALU di posisi
   yang sama, independen dari struktur layout flex (.home-layout,
   homepage) atau grid (.news-grid-layout--left, kategori.php). Desktop
   doang (>1100px) — di breakpoint itu sidebar emang udah disembunyiin
   total lewat mekanisme lain (lihat media query di bawah). */
.wpm-sidebar-toggle {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  width: 32px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-glass-strong);
  border: 1px solid var(--border-glass);
  border-left: none;
  border-radius: 0 10px 10px 0;
  color: var(--accent);
  cursor: pointer;
  transition: background 0.2s ease;
}
.wpm-sidebar-toggle:hover { background: rgba(var(--accent-rgb), 0.22); }
/* FIX 12 Okt 2026 (laporan operator: tombol ini nongol juga di halaman
   yang gak punya sidebar sama sekali, misal /pencarian) -- attribute
   'hidden' bawaan HTML seharusnya bikin element display:none, TAPI rule
   '.wpm-sidebar-toggle { display: flex }' di atas (author CSS) nimpa
   default UA stylesheet buat [hidden], jadi tombolnya tetap keliatan
   walau atribut hidden-nya ada di markup + JS belum nge-unhide (site.js,
   cari "Sidebar toggle" -- cuma unhide kalau halaman punya .film-sidebar).
   Fix: declare ulang display:none spesifik buat state [hidden]. */
.wpm-sidebar-toggle[hidden] { display: none; }
.wpm-sidebar-toggle svg { width: 20px; height: 20px; stroke-width: 3; transition: transform 0.2s ease; }
/* Default (sidebar lagi kebuka) — panah nunjuk kiri (buat nutup). Pas
   html.wpm-sidebar-hidden (lagi collapsed) — panah dibalik nunjuk kanan
   (buat buka). Icon aslinya 'arrow-right', jadi logic-nya kebalik dari
   kelihatannya: default di-flip 180deg, baru di-reset pas collapsed. */
.wpm-sidebar-toggle svg { transform: rotate(180deg); }
html.wpm-sidebar-hidden .wpm-sidebar-toggle svg { transform: rotate(0deg); }

@media (max-width: 1100px) {
  .wpm-sidebar-toggle { display: none !important; }
}

/* Collapse logic — .film-sidebar disembunyiin di KEDUA jenis halaman
   (homepage .home-layout pakai flex, kategori.php pakai
   .news-grid-layout--left pakai CSS grid). Flex otomatis nutup gap-nya
   sendiri pas child disembunyiin, tapi grid-template-columns yang
   eksplisit (208px ...) TIDAK otomatis collapse, makanya di-override
   manual kolom sidebar-nya di sini. */
html.wpm-sidebar-hidden .film-sidebar { display: none !important; }
@media (min-width: 1101px) {
  html.wpm-sidebar-hidden .news-grid-layout--left { grid-template-columns: minmax(0, 1fr) !important; }
  html.wpm-sidebar-hidden .news-grid-layout--left.news-grid-layout--right-only { grid-template-columns: minmax(0, 1fr) 260px !important; }
}

.home-layout { display: flex; align-items: flex-start; gap: 40px; max-width: 1600px; margin: 0 auto; padding: 0 24px; }
.home-layout__main { min-width: 0; flex-grow: 1; }
.home-layout .film-sidebar { flex-shrink: 0; width: 208px; padding-top: 24px; }
/* 20 Okt 2026 v2 (laporan operator, masih belum rata di percobaan
   pertama) -- fix sebelumnya pakai CSS :first-child doang ternyata gak
   kena, soalnya anak PERTAMA beneran di .home-layout__main itu div
   .crypto-container (pembungkus banner/hero, tetap ada walau kosong),
   bukan row-nya. Sekarang di-target via class ".home-row--first" yang
   ditempel manual di index.php cuma buat row pertama ($wpmHomeRowIndex
   === 0). Angka 28px = padding-top sidebar (24px) + margin-top badge
   "JELAJAHI" pertama (4px, lihat .film-sidebar__label:first-child) --
   biar border box row sejajar PERSIS sama border box badge sidebar. */
.home-layout .home-layout__main > .crypto-container--wide.home-row--first {
  margin-top: 28px !important;
}
/* FIX 30 Sep 2026 (laporan operator: row "Paling Banyak Ditonton" dkk
   jadi dempet/gak ada spasi) — sebelumnya rule ini reset `padding: 0`,
   yang KEBABLASAN nimpa padding bawaan .home-row--highlight/.home-row--*
   (24px atas, clamp(16-32px) kiri-kanan, 28px bawah — itu yang bikin
   panel row berwarna kelihatan lega) karena kombo dua class
   (.home-layout .crypto-container--wide) lebih spesifik daripada satu
   class (.home-row--highlight) punya row itu sendiri. Sekarang cuma
   `max-width`/`margin` yang di-reset (biar row ngisi penuh kolom sebelah
   sidebar, bukan ke-center di 1600px), padding row masing-masing
   dibiarin apa adanya.
   FIX #2 (30 Sep 2026, laporan operator lagi: row-row masih dempet atas-
   bawahnya walau margin-top/bottom row udah dinaikin ke 40px) — BUG YANG
   SAMA PERSIS kejadian lagi: `margin: 0` shorthand di sini juga nimpa
   margin-top/bottom row (bukan cuma margin kiri-kanan yang dimaksud),
   karena kombo dua class ini tetap lebih spesifik. Sekarang cuma
   margin-left/right yang di-reset, margin-top/bottom row gak kesentuh. */
.home-layout .crypto-container,
.home-layout .crypto-container--wide { max-width: none; margin-left: 0; margin-right: 0; }

@media (max-width: 1100px) {
  .home-layout { flex-direction: column; align-items: stretch; padding: 0; }
  .home-layout .film-sidebar { display: none; }
  /* FIX 2 Okt 2026 (laporan operator: hero slider, row film, app-promo
     card semua "kepotong" di kanan pas mobile) — root cause: align-items:
     flex-start di .home-layout (dipakai biar sidebar desktop gak ke-stretch
     tingginya) bikin .home-layout__main, pas flex-direction udah column di
     breakpoint ini, ikut gak stretch secara width juga (column → cross-axis
     = width). Jadi lebar kolom main ngikutin max-content dari anak
     terlebarnya (genre-filter bar / slider track yang emang sengaja overflow
     horizontal), bukan lebar viewport. align-items: stretch di atas
     benerin itu buat row flex-nya; width:100% di bawah jaga-jaga redundant
     safety biar .home-layout__main tetap full width walau ada flex item lain
     yang masih punya width intrinsik gede. */
  .home-layout__main { width: 100%; }
  /* Sama fix-nya kayak rule non-media di atas — cuma horizontal padding
     yang di-set (buat gutter kiri-kanan pas sidebar disembunyiin di layar
     sempit), gak nimpa padding atas-bawah row berwarna. */
  .home-layout .crypto-container,
  .home-layout .crypto-container--wide { padding-left: 24px; padding-right: 24px; }
}

/* Sidebar active narrows the main column, so 3-up cards get cramped —
   drop to 2 columns while the sidebar is present (desktop only; the
   responsive rules below already collapse to 1/2 columns regardless). */
.news-grid-layout--right-only .crypto-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Ad rendered as a normal grid item that always spans the full row width,
   so it can never leave a hole no matter how many columns the grid has
   at the current breakpoint (see .crypto-grid--3 responsive overrides). */
.news-grid__ad { grid-column: 1 / -1; }

.article-head { margin-bottom: 24px; }
.article-head__category {
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cyan); background: rgba(34, 211, 238, 0.10); border: 1px solid rgba(34, 211, 238, 0.25);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 16px;
}
.article-head h1 { font-family: var(--font-display); font-size: clamp(26px, 4vw, 40px); line-height: 1.2; font-weight: 700; margin: 0 0 18px; }
.article-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 13px; color: var(--text-faint); }
.article-head__meta span { display: inline-flex; align-items: center; gap: 6px; }
.article-head__meta svg { width: 14px; height: 14px; }

.article-cover { border-radius: var(--radius-md); overflow: hidden; margin-bottom: 28px; border: 1px solid var(--border-glass); }
.article-cover img { width: 100%; display: block; }

.article-prose { font-size: 16px; line-height: 1.85; color: var(--text); }
.article-prose p { margin: 0 0 20px; }
.article-prose h2, .article-prose h3 { font-family: var(--font-display); color: var(--text); margin: 32px 0 14px; }
.article-prose img { border-radius: var(--radius-md); margin: 20px 0; }
.article-prose a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.article-prose ul, .article-prose ol { margin: 0 0 20px; padding-left: 22px; }
.article-prose blockquote {
  margin: 24px 0; padding: 16px 22px; border-left: 3px solid var(--accent);
  background: var(--surface-glass); border-radius: 0 12px 12px 0; color: var(--text-muted);
}

.article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0; }
.article-tags a {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600;
  padding: 7px 13px; border-radius: 999px; background: var(--surface-glass); border: 1px solid var(--border-glass); color: var(--text-muted);
}
.article-tags a:hover { color: var(--accent); border-color: var(--border-glow); }
.article-tags svg { width: 12px; height: 12px; }

.article-share { display: flex; align-items: center; gap: 10px; margin: 32px 0; padding: 18px 0; border-top: 1px solid var(--border-glass); border-bottom: 1px solid var(--border-glass); }
.article-share__label { font-size: 13px; font-weight: 600; color: var(--text-faint); margin-right: 4px; }
.article-share a, .article-share button {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-glass); border: 1px solid var(--border-glass); color: var(--text-muted); cursor: pointer;
}
.article-share a:hover, .article-share button:hover { color: var(--accent); border-color: var(--border-glow); }
.article-share svg { width: 16px; height: 16px; }
.article-share__copy.is-copied { color: #22c55e; border-color: #22c55e; }

.article-faq { margin: 32px 0; }
.article-faq h2 { font-family: var(--font-display); font-size: 22px; margin: 0 0 20px; }
.article-faq__item {
  border: 1px solid var(--border-glass); border-radius: var(--radius-md); margin-bottom: 10px;
  overflow: hidden; background: var(--surface-glass);
}
.article-faq__item summary {
  cursor: pointer; padding: 16px 18px; font-weight: 600; color: var(--text); list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.article-faq__item summary::-webkit-details-marker { display: none; }
.article-faq__item summary::after { content: '+'; color: var(--cyan); font-size: 20px; line-height: 1; flex-shrink: 0; }
.article-faq__item[open] summary::after { content: '\2212'; }
.article-faq__answer { padding: 0 18px 16px; color: var(--text-muted); line-height: 1.7; font-size: 14.5px; }

.related-articles { margin-top: 48px; }
.related-articles h2 { font-family: var(--font-display); font-size: 22px; margin: 0 0 20px; }

/* ============================================================
   FILM DETAIL PAGE (movie.php — ZonaSinema redesign, 21 Agu 2026)
   Hero backdrop + poster, sinopsis/cast sections, sidebar cards. Reuses
   .article-prose / .article-layout / .poster-slider / .poster-card from
   elsewhere in this file — see CLAUDE.md/task brief for which DB fields
   are real vs. placeholder dummy data.
   ============================================================ */
.film-hero { position: relative; overflow: hidden; padding: 56px 0 40px; margin-bottom: 8px; }
.film-hero__backdrop {
  /* Digelapin lagi dikit (30 Sep 2026, revisi ke-3 operator: "keterangan
     bro, gelapin lg" — teks Info Film/judul kurang kebaca pas backdrop
     terlalu terang). Tetep TAJAM/gak diblur (sesuai referensi KlikFilm),
     cuma brightness turun dikit + scrim dikuatin di area tengah-bawah
     tempat teks berada. */
  position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: brightness(0.62) saturate(1.05);
}
.film-hero__scrim {
  background: linear-gradient(180deg, rgba(8, 6, 14, 0.25) 0%, rgba(8, 6, 14, 0.55) 55%, var(--bg-void) 96%);
  position: absolute; inset: 0;
}
/* 27 Sep 2026 (permintaan operator): hero dipecah jadi 2 kolom rasio 7:4 —
   .film-hero__primary (poster+judul+meta, col ~7) dan .film-hero__sidebar
   (card Info Film + Jadwal Tayang Bioskop, col ~4, DIPINDAH dari sidebar
   bawah biar kebaca tanpa scroll). align-items diganti flex-start (dari
   flex-end) biar poster nempel rata atas ke judul, gak "turun" ngikutin
   tinggi kolom kanan. */
.film-hero__inner { position: relative; display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; }
.film-hero__primary { flex: 10 1 480px; min-width: 0; display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; }
.film-hero__sidebar { flex: 2 1 240px; min-width: 240px; display: flex; flex-direction: column; gap: 16px; }
.film-hero__poster {
  position: relative;
  width: 220px; height: 330px; flex-shrink: 0; border-radius: var(--radius-md); overflow: hidden;
  background: var(--surface-glass); border: 1px solid var(--border-glass);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
  display: flex; align-items: center; justify-content: center;
}
.film-hero__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.film-hero__poster svg { width: 48px; height: 48px; color: var(--text-faint); }
/* Artikel non-film (kategori "Artikel"/Kabar Film, 15 Sep 2026) — gambar
   featured-nya landscape/lebar, bukan poster potret, jadi box 220x330
   object-fit:cover di atas malah motong gambar jadi keliatan kepencet
   kaya thumbnail. Modifier ini bikin gambar tampil full-width, tinggi
   ngikutin rasio asli gambarnya (gak di-crop). Cuma dipasang movie.php
   pas $film === null (bukan film beneran). */
.film-hero__poster--article {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  flex-basis: 100%;
  box-shadow: none;
  background: transparent;
  border: none;
}
.film-hero__poster--article img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
  border-radius: var(--radius-md);
}
.film-hero__meta { flex: 1; min-width: 280px; padding-bottom: 4px; }
.film-hero__badges { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.film-hero__age {
  border: 1px solid var(--border-glass); color: var(--text-faint); font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 4px;
}
.film-hero__note { color: var(--text-faint); font-size: 13px; }
.film-hero__meta h1 { font-family: var(--font-display); font-size: clamp(32px, 5vw, 52px); line-height: 0.98; margin: 0 0 18px; }
.film-hero__facts { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 18px; }
.film-hero__rating { display: flex; align-items: center; gap: 10px; }
.film-hero__rating-circle {
  width: 54px; height: 54px; border-radius: 999px; border: 3px solid var(--accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.film-hero__rating-circle span { font-family: var(--font-display); font-size: 20px; color: var(--accent); }
.film-hero__rating-label { font-size: 12px; font-weight: 700; color: var(--text); }
.film-hero__rating-count { font-size: 11px; color: var(--text-faint); }
.film-hero__fact-divider { width: 1px; height: 32px; background: var(--border-glass); }
.film-hero__fact span { display: block; font-size: 12px; font-weight: 700; color: var(--text); }
.film-hero__fact strong { display: block; font-size: 13px; font-weight: 500; color: var(--text-muted); margin-top: 2px; }
/* 10 Sep 2026: total views di film-hero facts — beda layout dari
   .film-hero__fact biasa (span di atas, strong di bawah), di sini icon mata +
   angka + "views" sebaris, konsisten sama .news-card__meta eye icon. */
.film-hero__fact--views {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--text-muted);
}
.film-hero__fact--views svg { width: 15px; height: 15px; flex-shrink: 0; }
.film-hero__fact--views strong { display: inline; font-size: 13px; font-weight: 700; color: var(--text); margin-top: 0; }
.film-hero__summary { font-size: 14.5px; line-height: 1.7; color: var(--text-muted); max-width: 62ch; margin: 0 0 18px; }
.genre-pill {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; color: var(--text-muted);
  background: var(--surface-glass); border: 1px solid var(--border-glass); border-radius: 999px; padding: 5px 12px;
}
.film-hero__actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 6px;
}

/* Film Series (27 Sep 2026) — Season dropdown + grid nomor episode, tampil
   di halaman detail film (movie.php) kalau film ini adalah series (punya
   episode). Ditaruh sebelum .film-hero__actions (tombol Trailer/Nonton). */
.film-hero__series {
  margin: 4px 0 6px;
  padding: 14px 16px;
  border: 1px solid var(--border-glass);
  border-radius: 14px;
  background: var(--surface-glass);
}
.film-hero__series-season {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  font-size: 14px; font-weight: 700; color: var(--text);
}
.film-hero__season-select,
.film-watch__season-select {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-glass);
  border-radius: 999px; padding: 6px 14px; cursor: pointer;
}
.film-hero__episode-grid,
.film-watch__episode-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.film-hero__episode-btn,
.film-watch__episode-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 8px;
  border: 1px solid var(--border-glass); border-radius: 10px;
  background: var(--surface); color: var(--text-muted);
  font-weight: 700; font-size: 13.5px; text-decoration: none;
}
.film-hero__episode-btn:hover,
.film-watch__episode-btn:hover { border-color: var(--accent); color: var(--text); }
.film-hero__episode-btn.is-active,
.film-watch__episode-btn.is-active {
  background: #2563eb; border-color: #2563eb; color: #fff;
}
/* Sama pola, versi halaman Nonton (watch.php) — di atas "Pilih Server". */
.film-watch__episodes {
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px solid var(--border-glass);
  border-radius: 14px;
  background: var(--surface-glass);
}
.film-watch__episodes-season {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  font-size: 14px; font-weight: 700; color: var(--text);
}
.btn-trailer,
.btn-watch {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 12px 22px;
  border-radius: 999px; background: var(--grad-brand, var(--accent)); color: #fff; font-weight: 700;
  font-size: 14px; text-decoration: none; border: none;
  font-family: inherit; cursor: pointer;
}
.film-hero__actions .btn-trailer,
.film-hero__actions .btn-watch { margin-top: 0; }
.btn-watch {
  /* Solid biru (31 Agu 2026, permintaan operator) — sebelumnya outline
     transparan pakai warna accent merah situs, dibedain dari tombol
     trailer. Biru dipilih spesifik biar dua CTA gampang dibedain sekilas
     ("Tonton Trailer" tetap merah gradient brand, "Nonton Sekarang" biru). */
  background: #2563eb;
  border: none;
}
.btn-watch:hover { background: #1d4ed8; opacity: 1; }
.btn-trailer:hover,
.btn-watch:hover { opacity: 0.9; }
.btn-trailer svg,
.btn-watch svg { flex-shrink: 0; }

/* Dedicated, noindex Bunny Stream watch page. */
.film-watch {
  min-height: 70vh;
  padding: 48px 0 72px;
}
/* Search di atas player — KHUSUS mobile (15 Okt 2026, permintaan operator).
   Desktop sudah punya search di header, jadi form ini disembunyiin >980px.
   Referensi: bar hitam + tombol aksen solid di kanan, warna lebih dominant
   dari search header yang semi-transparan. */
.film-watch__search-wrap {
  display: none;
  position: relative;
  margin: 0 0 16px;
}
.film-watch__search {
  display: flex;
  align-items: stretch;
  width: 100%;
  background: #000;
  border: 2px solid var(--accent);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.28), 0 10px 28px rgba(var(--accent-rgb), 0.4);
}
.film-watch__search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: #000;
  color: #fff;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  padding: 12px 14px;
}
.film-watch__search-input::placeholder { color: rgba(255, 255, 255, 0.45); }
.film-watch__search-btn {
  flex-shrink: 0;
  width: 40px;
  border: none;
  cursor: pointer;
  background: var(--accent-2);
  color: #1a1200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.film-watch__search-btn svg { width: 15px; height: 15px; stroke: #1a1200; }
.film-watch__search-btn:hover { background: var(--accent); }
@media (max-width: 980px) {
  .film-watch__search-wrap { display: block; }
}
.film-watch__header {
  display: flex; align-items: end; justify-content: space-between; gap: 24px;
  margin: 26px 0 20px;
}
.film-watch__eyebrow {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.film-watch__header h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 48px);
}
.film-watch__back {
  color: var(--text-muted);
  font-size: 14px;
  text-decoration: none;
}
.film-watch__back:hover { color: var(--accent); }
/* Wrapper picker "Pilih Server" (19 Sep 2026) — sekarang di BAWAH player,
   bukan di atas lagi, jadi butuh margin-top sendiri buat jarak dari player.
   12 Okt 2026 (permintaan operator): block "Pilih Server" hardcode
   ("Server Utama") DICABUT TOTAL, diganti chip "Kategori Populer"
   (.film-watch__category, <a> ke halaman sub-kategori, bukan <button> lagi
   -- lihat includes/watch-body.php). Class wrapper .film-watch__server-picker
   & .film-watch__servers dipertahankan apa adanya (cuma isinya yang ganti)
   biar diff minimal. Gaya chip-nya senada sama .zc-qm-chip (genre chip di
   popup pencarian, contoh "Dewasa/Komedi/Midnight/Filipina") -- outline
   tipis, bukan blok warna solid gede kayak tombol "Server Utama" lama. */
.film-watch__server-picker { margin-top: 20px; }
.film-watch__servers {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
}
.film-watch__category {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.film-watch__category:hover {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.6);
  color: var(--text);
}
.film-watch__player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  background: #000;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.film-watch__player iframe {
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
  border: 0;
}
/* 10 Sep 2026: layer klik-iklan pre-roll di atas player — transparan, nutupin
   seluruh area player (z-index di atas iframe) sampai user klik pertama kali,
   abis itu di-remove dari DOM lewat JS di includes/watch-body.php. */
.film-watch__pregate {
  position: absolute; inset: 0; z-index: 3;
  cursor: pointer;
  background: transparent;
}
/* Video overlay ad (26 Sep 2026) — iklan di atas frame video, di atas
   layer pregate (z-index lebih tinggi) supaya keliatan duluan pas halaman
   Nonton dibuka, sampai user klik "Tutup Iklan". Cuma render kalau ada
   iklan aktif di posisi "Watch - Video Overlay" (Ad Positions admin panel,
   slug watch-video-overlay) — lihat wpm_render_watch_video_overlay_ad(). */
.film-watch__video-ad {
  position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55);
}
.film-watch__video-ad__link {
  position: relative;
  display: block;
  max-width: 90%; max-height: 85%;
}
.film-watch__video-ad__link img {
  display: block;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.film-watch__video-ad__label {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
}
.film-watch__video-ad__cta {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 13px; font-weight: 700;
  padding: 8px 18px;
  border-radius: 999px;
  white-space: nowrap;
}
.film-watch__video-ad__close {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font: inherit; font-size: 12px; font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
}
.film-watch__video-ad__close:hover { background: rgba(0, 0, 0, 0.9); }

/* Ad slot di atas/bawah player (9 Sep 2026) — reuse .article-layout grid
   yang sama kayak movie.php buat sidebar kiri/kanan, jadi ga perlu CSS
   grid baru. Slot ini cuma nge-render kalau ada iklan aktif di posisi
   watch-above-player/watch-below-player (Ad Positions di admin panel). */
.film-watch__ad-slot {
  margin: 18px 0; display: flex; flex-direction: column; align-items: stretch; gap: 14px;
}
.film-watch__ad-slot:empty { display: none; }
/* Kalau 1 posisi (watch-above-player/watch-below-player) ke-isi lebih dari
   1 iklan aktif (lihat WPM_AD_STACK_POSITIONS di site-bootstrap.php),
   semuanya ditumpuk vertikal di sini, bukan cuma nampilin 1 lewat rotasi.
   9 Sep 2026 (permintaan operator, "jgn sgini ukurannya .. fullin aja
   samain ky panjang player medianya"): dulu dibatasin max-width:728px
   (ukuran umum banner ad-network) jadi keliatan lebih kecil/nge-center
   dibanding lebar player video di atasnya — sekarang full lebar penuh
   (align-items berubah dari center ke stretch juga, biar width:100% di
   bawah ini beneran kepake, bukan cuma shrink-to-fit ke gambar). */
.film-watch__ad-slot .ad-slot { width: 100%; max-width: none; }
.film-watch__ad-slot .ad-slot img { width: 100%; }
.watch-most-viewed {
  margin-top: 28px;
  margin-bottom: 0;
}
.watch-most-viewed .poster-slider__head h2 {
  font-size: clamp(19px, 2.4vw, 24px);
}

/* Member livestream portal (member.php). */
.member-live {
  --member-blue: #13a8ff;
  --member-panel: rgba(10, 24, 39, 0.92);
  padding: 24px 0 72px;
  background:
    radial-gradient(circle at 75% 25%, rgba(19, 168, 255, 0.1), transparent 35%),
    linear-gradient(180deg, #06101c 0%, #030912 100%);
}
.member-live__banner {
  min-height: 150px;
  padding: clamp(24px, 4vw, 46px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  border: 1px solid rgba(73, 180, 255, 0.24);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(3, 17, 30, 0.98), rgba(6, 48, 75, 0.7)),
    radial-gradient(circle at 75% 50%, rgba(19, 168, 255, 0.45), transparent 35%);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.32);
}
.member-live__banner-kicker,
.member-live__eyebrow {
  color: var(--member-blue);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
}
.member-live__banner h1 {
  margin: 6px 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1;
}
.member-live__banner p { margin: 0; color: #9fb0c3; }
.member-live__banner-mark {
  color: rgba(255, 255, 255, 0.08);
  font-family: var(--font-display);
  font-size: clamp(72px, 13vw, 160px);
  line-height: 0.7;
  transform: skew(-8deg);
}
.member-live__tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 14px 0;
  padding: 10px;
  border: 1px solid rgba(73, 180, 255, 0.18);
  border-radius: 14px;
  background: rgba(8, 20, 33, 0.94);
}
.member-live__tabs a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  border-radius: 9px;
  color: #9db0c4;
  font-weight: 800;
  text-decoration: none;
}
.member-live__tabs a:hover,
.member-live__tabs a.is-active {
  color: #fff;
  background: linear-gradient(135deg, #078ee3, #14b7ff);
  box-shadow: 0 8px 24px rgba(19, 168, 255, 0.24);
}
.member-live__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 16px;
}
.member-live__intro,
.member-live__featured,
.member-live__channels {
  border: 1px solid rgba(73, 180, 255, 0.2);
  border-radius: 16px;
  background: var(--member-panel);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.25);
}
.member-live__intro {
  min-height: 470px;
  padding: clamp(28px, 5vw, 62px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    linear-gradient(90deg, rgba(7, 20, 34, 0.98), rgba(7, 25, 42, 0.8)),
    radial-gradient(circle at 85% 50%, rgba(19, 168, 255, 0.28), transparent 38%);
}
.member-live__intro h2 {
  max-width: 680px;
  margin: 10px 0 16px;
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
}
.member-live__intro > p:not(.member-live__eyebrow) {
  max-width: 650px;
  color: #9fb0c3;
  line-height: 1.75;
}
.member-live__benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 28px 0;
  border-block: 1px solid rgba(73, 180, 255, 0.14);
}
.member-live__benefits div { padding: 18px 12px 18px 0; }
.member-live__benefits strong { display: block; color: var(--member-blue); font-size: 22px; }
.member-live__benefits span { color: #bdc9d5; font-size: 13px; }
.member-live__cta {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding: 14px 22px;
  border-radius: 8px;
  background: linear-gradient(135deg, #078ee3, #14b7ff);
  color: #fff;
  font-weight: 900;
  text-decoration: none;
}
.member-live__featured { padding: 24px; }
.member-live__section-head,
.member-live__channels-head,
.member-live__featured-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.member-live__section-head > div > span:not(.member-live__live-dot) {
  color: #ff5269;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
}
.member-live__live-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border-radius: 50%;
  background: #ff3552;
  box-shadow: 0 0 12px #ff3552;
}
.member-live__section-head h2 { margin: 4px 0 0; font-family: var(--font-display); font-size: 34px; }
.member-live__status,
.member-live__viewer {
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255, 53, 82, 0.12);
  color: #ff7185;
  font-size: 12px;
  font-weight: 800;
}
.member-live__player-placeholder {
  aspect-ratio: 16 / 9;
  margin: 22px 0 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 45%, rgba(19, 168, 255, 0.25), transparent 28%),
    linear-gradient(135deg, #06101a, #0a2237);
  color: #fff;
}
.member-live__player-placeholder span { color: #8196a9; font-size: 13px; }
.member-live__play {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  padding-left: 4px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: var(--member-blue);
  box-shadow: 0 0 30px rgba(19, 168, 255, 0.35);
}
.member-live__featured-meta strong,
.member-live__featured-meta span { display: block; }
.member-live__featured-meta > div > span { margin-top: 3px; color: #7f93a8; font-size: 12px; }
.member-live__channels { margin-top: 16px; padding: 28px; }
.member-live__channels-head { margin-bottom: 18px; }
.member-live__channels-head h2 { margin: 4px 0 0; font-family: var(--font-display); font-size: 32px; }
.member-live__channels-head > span { color: #7f93a8; font-size: 13px; }
.member-live__channel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.member-live__channel {
  padding: 10px;
  border: 1px solid rgba(73, 180, 255, 0.14);
  border-radius: 12px;
  background: rgba(5, 15, 26, 0.82);
}
.member-live__channel-preview {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(135deg, #083356, #071521);
}
.member-live__channel--purple .member-live__channel-preview { background: linear-gradient(135deg, #34205a, #10152c); }
.member-live__channel--cyan .member-live__channel-preview { background: linear-gradient(135deg, #07505a, #081923); }
.member-live__channel-preview > span {
  position: absolute;
  top: 9px;
  left: 9px;
  padding: 4px 7px;
  border-radius: 5px;
  background: rgba(3, 9, 18, 0.78);
  color: #dbe8f4;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
.member-live__channel-preview > div { color: rgba(255, 255, 255, 0.72); font-size: 28px; }
.member-live__channel h3 { margin: 12px 4px 3px; font-size: 15px; }
.member-live__channel p { margin: 0 4px 5px; color: #7f93a8; font-size: 12px; }

/* CHEAT mockup variant — visual-only access form until member auth exists. */
.cheat-portal { color: #eaf5ff; }
.cheat-hero,
.cheat-nav,
.cheat-access,
.cheat-stream,
.cheat-promo {
  border: 1px solid rgba(69, 171, 232, 0.25);
  border-radius: 12px;
  background: rgba(7, 22, 35, 0.96);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.018), 0 16px 45px rgba(0,0,0,.2);
}
.cheat-hero {
  min-height: 130px;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(280px, .85fr) auto;
  align-items: center;
  gap: 28px;
  padding: 24px 34px;
  background:
    linear-gradient(90deg, rgba(5,20,34,.76), rgba(5,20,34,.12) 52%, rgba(5,20,34,.66)),
    url('../img/member-cheat-header.jpg') center top / cover no-repeat;
}
.cheat-hero__brand { display: flex; align-items: center; gap: 14px; }
.cheat-hero__emblem { color: #22b8ff; font-size: 38px; text-shadow: 0 0 24px rgba(34,184,255,.7); }
.cheat-hero__brand h1 { margin: 0; font-family: 'Oxanium', sans-serif; font-size: clamp(34px,5vw,58px); font-weight: 800; font-style: italic; line-height: .9; letter-spacing: .05em; }
.cheat-hero__brand p { margin: 8px 0 0; color: #48c4ff; font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.cheat-hero__search {
  height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 18px;
  border: 1px solid rgba(71,163,220,.16); border-radius: 999px;
  background: rgba(7,19,31,.6); color: #7891a7;
}
.cheat-hero__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font: inherit; }
.cheat-hero__tagline { margin: 0; color: #9eb1c0; font-size: 11px; font-weight: 900; line-height: 1.65; }
.cheat-nav { display: grid; grid-template-columns: repeat(6,1fr); gap: 6px; margin: 12px 0; padding: 8px; }
.cheat-nav a {
  min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 8px; color: #9eb1c0; font-weight: 800; text-decoration: none;
}
.cheat-nav a span { color: #b8cbdb; font-size: 20px; }
.cheat-nav a:hover,
.cheat-nav a.is-active { color: #fff; background: linear-gradient(135deg,#078bd8,#16b7ff); box-shadow: 0 8px 24px rgba(9,166,241,.25); }
.cheat-main { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); gap: 14px; }
.cheat-access {
  min-height: 530px; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(28px,4vw,52px);
  background:
    linear-gradient(90deg, rgba(7,23,37,.98) 0%, rgba(7,23,37,.93) 48%, rgba(7,23,37,.36) 100%),
    url('../img/member-cheat-bg.jpg') center right / cover no-repeat;
}
.cheat-access > p { margin: 0; color: #52c7ff; font-size: 12px; font-weight: 900; letter-spacing: .15em; }
.cheat-access > h2 { margin: 14px 0 4px; font-family: 'Oxanium', sans-serif; font-size: clamp(48px,7vw,84px); font-weight: 800; font-style: italic; line-height: .9; letter-spacing: .04em; }
.cheat-access > span { color: #46bce9; font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.cheat-login { width: min(100%,560px); margin-top: 34px; }
.cheat-login > label {
  min-height: 58px; display: flex; align-items: center; gap: 14px; margin-bottom: 12px; padding: 0 17px;
  border: 1px solid rgba(74,165,220,.17); border-radius: 7px; background: rgba(9,30,47,.86); color: #7792a6;
}
.cheat-login > label input { flex:1; border:0; outline:0; background:transparent; color:#fff; font:inherit; }
.cheat-login__icon {
  width: 18px;
  flex: 0 0 18px;
  color: #7995aa;
  text-align: center;
}
.cheat-login > button {
  width:100%; min-height:58px; display:flex; align-items:center; justify-content:center; gap:14px;
  border:0; border-radius:7px; background:linear-gradient(135deg,#078bd8,#16b7ff);
  color:#fff; font:inherit; font-weight:900; cursor:default;
}
.cheat-login__options { display:flex; justify-content:space-between; gap:14px; margin-top:14px; color:#7890a4; font-size:12px; }
.cheat-login__options label { display:flex; align-items:center; gap:6px; }
.cheat-login__options > span { color:#28b8fa; }
.cheat-features { display:grid; grid-template-columns:repeat(3,1fr); margin-top:34px; padding-top:24px; border-top:1px solid rgba(70,160,215,.12); }
.cheat-features div { display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; }
.cheat-features div + div { border-left:1px solid rgba(70,160,215,.12); }
.cheat-features b { color:#19b9ff; font-size:28px; }
.cheat-features strong { font-size:13px; }
.cheat-features span { color:#7e93a5; font-size:11px; }
.cheat-stream { min-width:0; padding:24px; border-color:rgba(255,66,93,.25); background:linear-gradient(180deg,rgba(34,16,29,.92),rgba(7,22,35,.98)); }
.cheat-stream__head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.cheat-stream__head small { color:#ff536b; font-size:10px; font-weight:900; letter-spacing:.12em; }
.cheat-stream__head h2 { margin:6px 0 2px; font-family:var(--font-display); font-size:38px; }
.cheat-stream__head p { margin:0; color:#8ca0b2; }
.cheat-stream__head > a { padding:11px 16px; border:1px solid rgba(255,255,255,.15); border-radius:7px; color:#d9e5ee; text-decoration:none; font-size:12px; font-weight:800; }
.cheat-featured-stream {
  position:relative; aspect-ratio:16/8.4; margin-top:20px; overflow:hidden; border-radius:8px;
  background:
    linear-gradient(180deg, rgba(4,13,22,.06), rgba(4,13,22,.2)),
    url('../img/member-cheat-stream.jpg') center / cover no-repeat;
}
.cheat-featured-stream::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.12)); }
.cheat-live-badge,.cheat-view-count { position:absolute; top:12px; z-index:1; padding:5px 8px; border-radius:5px; font-size:10px; font-weight:900; }
.cheat-live-badge { left:12px; color:#fff; background:#ff3855; }
.cheat-view-count { right:12px; color:#fff; background:rgba(2,9,15,.75); }
.cheat-featured-stream__play { position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:32px; }
.cheat-streamer { display:flex; gap:11px; padding:13px 0 18px; }
.cheat-streamer__avatar { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(135deg,#168fc8,#ff7257); font-weight:900; }
.cheat-streamer strong,.cheat-streamer span { display:block; }
.cheat-streamer span { color:#2fbffb; font-size:10px; font-weight:900; }
.cheat-streamer p { margin:3px 0 0; color:#91a4b5; font-size:12px; }
.cheat-channel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.cheat-channel { min-width:0; padding:7px; border-radius:8px; background:#07121d; }
.cheat-channel__preview { position:relative; aspect-ratio:16/10; display:grid; place-items:center; border-radius:6px; background:linear-gradient(135deg,#0a567b,#13223b); }
.cheat-channel--purple .cheat-channel__preview { background:linear-gradient(135deg,#55297d,#181f3a); }
.cheat-channel--cyan .cheat-channel__preview { background:linear-gradient(135deg,#08717b,#102b37); }
.cheat-channel__preview img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cheat-channel__preview::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.2)); }
.cheat-channel__preview span { position:absolute; top:5px; left:5px; z-index:2; padding:3px 5px; border-radius:3px; color:#fff; background:#ff3855; font-size:8px; font-weight:900; }
.cheat-channel__preview b { position:relative; z-index:2; color:rgba(255,255,255,.9); text-shadow:0 2px 8px rgba(0,0,0,.75); }
.cheat-channel h3 { margin:8px 0 1px; font-size:12px; }
.cheat-channel p,.cheat-channel > span { margin:0; color:#8497a8; font-size:9px; }
.cheat-promo {
  min-height:200px; display:flex; align-items:center; justify-content:space-between; gap:28px;
  margin-top:14px; padding:34px 50px;
  background:
    linear-gradient(90deg, rgba(4,12,25,.08), rgba(4,18,31,.28) 45%, rgba(4,16,28,.72)),
    url('../img/member-cheat-promo.jpg') left bottom / cover no-repeat;
}
.cheat-promo__device { min-width:190px; color:transparent; font-size:64px; }
.cheat-promo div:nth-child(2) { display:flex; flex-direction:column; gap:9px; }
.cheat-promo strong { font-size:clamp(25px,4vw,46px); font-style:italic; letter-spacing:.1em; }
.cheat-promo span { color:#d4e2ec; font-size:11px; font-weight:800; letter-spacing:.16em; }
.cheat-promo a { padding:12px 18px; border:1px solid rgba(255,255,255,.5); border-radius:5px; color:#fff; font-size:11px; font-weight:900; text-decoration:none; white-space:nowrap; }
.cheat-mini-footer { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 8px 18px; color:#657b8f; font-size:11px; }
.cheat-mini-footer nav { display:flex; flex-wrap:wrap; gap:20px; }
.cheat-mini-footer a { color:#7e93a5; text-decoration:none; }
@media (max-width: 980px) {
  .cheat-hero { grid-template-columns:1fr auto; }
  .cheat-hero__search { grid-column:1/-1; grid-row:2; }
  .cheat-main { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
  .cheat-hero { grid-template-columns:1fr; padding:22px; }
  .cheat-hero__tagline { display:none; }
  .cheat-nav { grid-template-columns:repeat(3,1fr); }
  .cheat-nav a { min-height:44px; font-size:11px; }
  .cheat-nav a span { font-size:15px; }
  .cheat-access,.cheat-stream { padding:22px; }
  .cheat-features { grid-template-columns:1fr; gap:16px; }
  .cheat-features div + div { padding-top:16px; border-top:1px solid rgba(70,160,215,.12); border-left:0; }
  .cheat-channel-grid { grid-template-columns:1fr; }
  .cheat-promo { align-items:flex-start; flex-direction:column; padding:26px; }
  .cheat-mini-footer { flex-direction:column; }
}
@media (max-width: 900px) {
  .member-live__grid { grid-template-columns: 1fr; }
  .member-live__intro { min-height: 380px; }
}
@media (max-width: 640px) {
  .member-live { padding-top: 12px; }
  .member-live__banner-mark { display: none; }
  .member-live__tabs { grid-template-columns: repeat(2, 1fr); }
  .member-live__benefits,
  .member-live__channel-grid { grid-template-columns: 1fr; }
  .member-live__channels-head { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 640px) {
  .film-watch { padding: 12px 0 48px; }
  .film-watch__header { align-items: flex-start; flex-direction: column; gap: 10px; margin: 8px 0 14px; }
  .watch-most-viewed { margin-top: 20px; }
}

/* Ad slot homepage "Homepage Before Popular" (9 Sep 2026, di atas row
   "Paling Banyak Ditonton", lihat index.php) — sama polanya kayak
   .film-watch__ad-slot di atas: full-width (ngikutin .crypto-container,
   max-width 1180px) dan kalau di-assign lebih dari 1 iklan aktif
   (WPM_AD_STACK_POSITIONS di site-bootstrap.php), semuanya ditumpuk
   vertikal di sini, bukan cuma nampilin 1 lewat rotasi. */
.home-ad-slot {
  /* 9 Sep 2026 (rev): sempat dibikin full-bleed 100vw, tapi malah nyisain
     celah karena row "Paling Banyak Ditonton" di bawahnya cuma selebar
     .crypto-container--wide (1600px), bukan selebar layar. Sekarang
     wrapper-nya di index.php sudah dipindah ke .crypto-container--wide
     yang sama, jadi di sini tinggal full-width ngikutin container itu. */
  margin-top: 20px; display: flex; flex-direction: column; align-items: stretch; gap: 14px;
}

/* 19 Sep 2026 (revisi operator: banner keliatan lebih "sempit" dari row
   "Paling Banyak Ditonton" di bawahnya, padahal .crypto-container--wide
   dua-duanya SAMA PERSIS 1600px — sudah dicek langsung lewat
   getBoundingClientRect(), kontainernya identik). Penyebab aslinya:
   .home-row--highlight punya background glow yang nutupin SELURUH lebar
   container (termasuk area paddingnya), sedangkan banner cuma ngisi area
   SETELAH padding — jadi background si row "keliatan" lebih lebar walau
   kontainernya sama. Dulu (9 Sep 2026) padding kiri-kanan di sini sengaja
   disamain sama .home-row--highlight biar SEJAJAR ke row di bawahnya;
   sekarang di-nol-in total (bleed penuh ke .crypto-container--wide,
   1600px) biar banner-nya sendiri keliatan "selebar" background glow row
   itu — konsekuensinya banner jadi mulai sedikit lebih ke kiri/kanan
   dibanding judul "Paling Banyak Ditonton" (yang tetep ada padding-nya),
   tapi itu situasi yang diminta operator. */
.home-ad-container {
  padding-left: 0;
  padding-right: 0;
}
.home-ad-slot:empty { display: none; }
/* 19 Sep 2026 (revisi operator): balik ke full-width ngikutin lebar
   .crypto-container--wide (max 1600px, dikurangi padding kiri-kanan
   .home-ad-container) — operator upload banner dengan rasio panjang-tipis
   yang PAS buat lebar ini (rekomendasi 1600x240px / rasio ~6.7:1), jadi
   nggak perlu di-cap lagi di sini. Auto-height ngikutin rasio gambar yang
   diupload, otomatis ngecil juga di layar sempit lewat width:100%. */
.home-ad-slot .ad-slot { width: 100%; max-width: none; }
.home-ad-slot .ad-slot img { width: 100%; height: auto; display: block; }

/* 19 Sep 2026 (fix lanjutan operator: masih nyisa celah tipis di 4 sisi
   walau img/iframe udah width:100% di atas — ternyata bukan lagi soal
   ukuran gambar, tapi .ad-slot--external { padding: 12px } global
   (line ~1571) yang masih kepake di sini. img 100% itu 100% dari AREA
   SETELAH padding, jadi celah 12px keliling situ tetep ada. Nol-in
   padding-nya KHUSUS di konteks .home-ad-slot ini (bukan global —
   external ad placement lain, misal sidebar/popup, bisa aja masih
   text/HTML biasa yang butuh padding itu). */
.home-ad-slot .ad-slot--external { padding: 0; }

/* 19 Sep 2026 (fix operator: banner "External Ad Code" — ad_type=external,
   lihat wpm_ad_markup() — nyisain celah kosong di kiri-kanan padahal
   .ad-slot img di atas udah width:100%). Sebabnya: ad_type=external nge-
   render $ad['external_code'] MENTAH (raw HTML dari operator, biasanya
   snippet copy-paste dari jaringan iklan) — <img>/<iframe> di dalamnya
   HAMPIR SELALU punya width/height hardcode (attribute ATAU inline
   style="width:...px"), yang keduanya MENANG lawan CSS eksternal kita
   (attribute kalah spesifisitas tapi tetep constraint aspect-ratio-nya;
   inline style menang mutlak). Override paksa di sini pakai !important
   supaya SELALU full-width ngikutin container 1600px, apa pun ukuran
   asli yang di-hardcode snippet-nya — img DAN iframe sekalian (banyak
   jaringan iklan render lewat iframe, bukan <img> polos). */
.home-ad-slot .ad-slot--external img,
.home-ad-slot .ad-slot--external iframe {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* Ad slot homepage "Homepage Before Footer" (16 Okt 2026, persis di atas
   footer, lihat index.php) -- BEDA dari .home-ad-slot di atas (numpuk 1
   kolom vertikal): di sini operator minta tampilan GRID, 2 kolom
   berdampingan di desktop. Tiap iklan aktif di posisi ini (bisa lebih
   dari 1, lihat WPM_AD_STACK_POSITIONS di site-bootstrap.php) ke-render
   sebagai .ad-slot sendiri-sendiri, grid-nya otomatis nyusun jadi 2
   kolom x N baris. 1 kolom aja di layar sempit (<=768px) biar gak kecil-
   kecil banget. Pola override img/iframe full-width-nya SAMA PERSIS
   kayak .home-ad-slot di atas (iframe/img embed sering hardcode width/
   height sendiri, perlu dipaksa). */
.home-ad-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 768px) {
  .home-ad-grid { grid-template-columns: 1fr; }
}
.home-ad-grid:empty { display: none; }
/* 16 Okt 2026 (watch-above-title): margin-top .home-ad-grid default (20px)
   diasumsikan grid ini NEMPEL di bawah elemen lain di atasnya -- di watch.php
   dia justru elemen PERTAMA di dalam .crypto-container, jadi margin-top-nya
   malah bikin jarak aneh ke .crypto-container. Reset ke 0 + kasih margin-
   bottom sendiri biar jaraknya ke judul film pas. */
.watch-above-title-grid { margin-top: 0; margin-bottom: 20px; }
.home-ad-grid .ad-slot { width: 100%; max-width: none; margin: 0; }
.home-ad-grid .ad-slot img { width: 100%; height: auto; display: block; }
.home-ad-grid .ad-slot--external { padding: 0; }
.home-ad-grid .ad-slot--external img,
.home-ad-grid .ad-slot--external iframe {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* Modal trailer YouTube (24 Agu 2026, revisi operator) — overlay dark +
   backdrop-blur senada .crypto-nav__mobile, panel navy+gold. */
.trailer-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.trailer-modal[hidden] { display: none; }
.trailer-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(5, 3, 16, 0.85);
  backdrop-filter: blur(6px);
}
.trailer-modal__panel {
  position: relative;
  width: 100%;
  max-width: 960px;
  background: var(--bg-deep-2);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.trailer-modal__close {
  position: absolute; top: -14px; right: -14px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: #fff; border: none;
  font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.trailer-modal__frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--radius-md); overflow: hidden; background: #000;
}
.trailer-modal__frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
/* Fallback link (24 Agu 2026) — sebagian trailer resmi punya embedding
   di-disable sama channel-nya (bukan bug situs kita, video-nya sah cuma
   gak bisa di-embed dimanapun); link ini jadi jalan keluar biar user
   tetap bisa nonton lewat YouTube langsung. */
.trailer-modal__fallback {
  display: block;
  text-align: center;
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-muted, var(--text-faint));
}
.trailer-modal__fallback:hover { color: var(--accent); }
@media (max-width: 640px) {
  .trailer-modal { padding: 12px; }
  .trailer-modal__close { top: -12px; right: 0; }
}

.film-body__byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 13px; color: var(--text-faint);
  margin-bottom: 28px;
}
.film-body__byline span { display: inline-flex; align-items: center; gap: 6px; }
.film-body__byline svg { width: 14px; height: 14px; }

.film-section { margin-bottom: 44px; }
.film-section h2 { font-family: var(--font-display); font-size: 24px; margin: 0 0 16px; }
.film-synopsis .article-prose { margin: 0; }
/* 27 Okt 2026 (permintaan operator) -- Sinopsis di bawah player /watch,
   dibatesin tinggi (collapse) + tombol "Baca Selengkapnya", biar sinopsis
   panjang gak dorong "Film Terkait" (sidebar kanan) kejauhan ke bawah.
   JS-nya di includes/watch-body.php (cari "Sinopsis di bawah player"). */
.film-watch__synopsis { margin-top: 28px; margin-bottom: 0; }
.film-watch__synopsis h2 { font-size: 20px; }
.film-watch__synopsis-body {
  max-height: 7.5em;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 2.2em), transparent 100%);
          mask-image: linear-gradient(180deg, #000 calc(100% - 2.2em), transparent 100%);
}
.film-watch__synopsis-body.is-expanded {
  max-height: none;
  -webkit-mask-image: none;
          mask-image: none;
}
.film-watch__synopsis-toggle {
  margin-top: 10px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.film-watch__synopsis-toggle:hover { background: rgba(var(--accent-rgb), 0.18); }

.cast-grid { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 8px; }
.cast-item { flex-shrink: 0; width: 108px; text-align: center; }
.cast-item__avatar {
  width: 84px; height: 84px; border-radius: 999px; margin: 0 auto 10px;
  background: linear-gradient(160deg, var(--pink), var(--surface-glass-strong));
  border: 1px solid var(--border-glass);
  display: flex; align-items: center; justify-content: center;
}
.cast-item__avatar span { font-family: var(--font-display); font-size: 20px; color: #fff; opacity: 0.9; }
.cast-item__name { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3; }
.cast-item__role { font-size: 11px; color: var(--text-faint); margin-top: 2px; }

.sidebar-block {
  background: var(--surface-glass); border: 1px solid var(--border-glass); border-radius: var(--radius-md);
  padding: 22px;
}
.sidebar-block h3 {
  font-family: var(--font-display); font-size: 19px; margin: 0 0 16px; display: flex; align-items: center; gap: 8px;
}
.sidebar-block h3 svg { width: 16px; height: 16px; color: var(--accent); }
.sidebar-block__note { font-size: 11px; color: var(--text-faint); margin: -10px 0 16px; }
.sidebar-block__rows { display: flex; flex-direction: column; gap: 13px; }
.sidebar-block__row {
  display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border-glass);
  padding-bottom: 12px; font-size: 12px;
}
.sidebar-block__row--last { border-bottom: none; padding-bottom: 0; }
.sidebar-block__row span { color: var(--text-faint); }
.sidebar-block__row strong { font-weight: 700; color: var(--text); text-align: right; }

/* "Film Terpopuler" di sidebar bawah (27 Sep 2026, permintaan operator) —
   list vertikal thumbnail kecil + judul + tahun, model kayak widget
   "Terpopuler" di situs kompetitor (referensi screenshot operator). */
/* 27 Sep 2026 (permintaan operator): jumlah item dinaikin ke 9 (dari 6), jadi
   dikasih max-height + scroll internal biar sidebar-nya gak jadi kepanjangan
   ngalahin tinggi player/konten utama. Scrollbar-nya di-tipisin (bukan
   default browser yg tebal) biar tetep rapi nyatu sama card. */
.sidebar-most-viewed {
  display: flex; flex-direction: column; gap: 14px;
  max-height: 640px; overflow-y: auto; padding-right: 4px;
  scrollbar-width: thin; scrollbar-color: var(--border-glass) transparent;
}
.sidebar-most-viewed::-webkit-scrollbar { width: 6px; }
.sidebar-most-viewed::-webkit-scrollbar-track { background: transparent; }
.sidebar-most-viewed::-webkit-scrollbar-thumb { background: var(--border-glass); border-radius: 999px; }
.sidebar-most-viewed__item {
  display: flex; gap: 12px; align-items: flex-start; text-decoration: none;
  padding-bottom: 14px; border-bottom: 1px solid var(--border-glass);
}
.sidebar-most-viewed__item:last-child { border-bottom: none; padding-bottom: 0; }
.sidebar-most-viewed__thumb {
  width: 56px; height: 80px; flex-shrink: 0; border-radius: 8px; overflow: hidden;
  background: var(--surface-glass-2, rgba(255, 255, 255, 0.05));
}
.sidebar-most-viewed__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sidebar-most-viewed__info { min-width: 0; padding-top: 2px; }
.sidebar-most-viewed__title {
  font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sidebar-most-viewed__year { font-size: 11px; color: var(--text-faint); margin-top: 4px; }

.sidebar-block__cinemas { display: flex; flex-direction: column; gap: 14px; }
.cinema-item { border-bottom: 1px solid var(--border-glass); padding-bottom: 12px; }
.cinema-item:last-child { border-bottom: none; padding-bottom: 0; }
.cinema-item__name { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text); }
.cinema-item__name svg { width: 12px; height: 12px; color: var(--text-faint); flex-shrink: 0; }
.cinema-item__city { font-size: 11px; color: var(--text-faint); margin: 4px 0 8px 18px; }
.cinema-item__times { display: flex; gap: 6px; flex-wrap: wrap; margin-left: 18px; }
.time-pill {
  font-size: 11px; font-weight: 700; color: var(--accent); background: rgba(var(--accent-rgb), 0.14);
  padding: 4px 9px; border-radius: 6px;
}

@media (max-width: 720px) {
  .film-hero { padding: 32px 0 28px; }
  .film-hero__inner { flex-direction: column; align-items: flex-start; }
  .film-hero__primary { flex-direction: column; width: 100%; }
  .film-hero__sidebar { width: 100%; }
  .film-hero__poster { width: 150px; height: 220px; }
  .film-hero__poster--article { width: 100%; height: auto; }
  .film-hero__facts { gap: 16px; }
}

/* ============================================================
   CRYPTO PAGE
   ============================================================ */
.crypto-table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border-glass); }
.crypto-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.crypto-table th {
  text-align: left; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-faint); padding: 14px 18px; border-bottom: 1px solid var(--border-glass); background: var(--surface-glass);
}
.crypto-table td { padding: 14px 18px; border-bottom: 1px solid var(--border-glass); font-size: 14px; }
.crypto-table tr:last-child td { border-bottom: none; }
.crypto-table__coin { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.crypto-table__coin img { width: 26px; height: 26px; border-radius: 50%; }
.crypto-table__coin svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--text-faint); }
.crypto-table__symbol { color: var(--text-faint); font-size: 12px; text-transform: uppercase; }
.crypto-table__change--up { color: var(--green); font-weight: 600; }
.crypto-table__change--down { color: var(--red); font-weight: 600; }

.status-banner {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 12px;
  font-size: 13.5px; margin-bottom: 24px; border: 1px solid var(--border-glass); background: var(--surface-glass);
}
/* Was missing an explicit size — the inline wpm_icon() SVG has only a
   viewBox (no width/height attrs), so without this rule the browser fell
   back to its default intrinsic SVG size (~300x150px), rendering what's
   meant to be a small status icon as a giant box filling the banner. */
.status-banner svg { width: 18px; height: 18px; flex-shrink: 0; }
.status-banner--ok { border-color: rgba(16, 185, 129, 0.3); color: #6ee7b7; }
.status-banner--warn { border-color: rgba(251, 191, 36, 0.3); color: var(--gold); }
.status-banner--off { color: var(--text-faint); }

/* ============================================================
   CRYPTO PAGE — Top 10 Market Cap bar chart (crypto.php)
   Data-driven (real market_cap values from the live/cached API result),
   plain CSS bars — no charting library dependency, consistent with the
   rest of this project.
   ============================================================ */
.market-chart {
  border: 1px solid var(--border-glass);
  background: var(--surface-glass);
  border-radius: 16px;
  padding: 24px 22px 18px;
  margin-bottom: 24px;
}
.market-chart__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 20px;
}
.market-chart__head h2 { font-size: 16px; font-weight: 700; margin: 0; color: var(--text); }
.market-chart__hint { font-size: 12px; color: var(--text-faint); }

.market-chart__bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.market-chart__col {
  flex: 1 1 0;
  min-width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.market-chart__value {
  font-size: 10.5px;
  font-family: var(--font-display);
  color: var(--text-muted);
  white-space: nowrap;
}
.market-chart__track {
  width: 100%;
  height: 150px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.market-chart__bar {
  width: 60%;
  min-width: 18px;
  border-radius: 6px 6px 2px 2px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.market-chart__col:hover .market-chart__bar { opacity: 0.85; transform: scaleX(1.12); }
.market-chart__bar.is-up { background: linear-gradient(180deg, var(--green), rgba(16, 185, 129, 0.35)); }
.market-chart__bar.is-down { background: linear-gradient(180deg, var(--red), rgba(244, 63, 94, 0.35)); }
.market-chart__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
  letter-spacing: 0.02em;
}
@media (max-width: 640px) {
  .market-chart__col { min-width: 44px; }
  .market-chart__track { height: 110px; }
}

/* ============================================================
   SEARCH PAGE
   ============================================================ */
.search-form { display: flex; gap: 10px; max-width: 560px; margin: 0 0 40px; }
/* FIX 12 Okt 2026 (laporan operator: row hasil "X hasil untuk ..." + grid
   poster-nya kejauhan dari search box, banyak ruang kosong) -- dua sumber
   jarak: (1) .search-form di atas punya margin-bottom 40px (dipakai juga
   di komponen search lain, jadi gak diubah globalnya), (2) section hasil
   pakai .crypto-section--tight yang punya padding-top 72px (dipakai juga
   di kategori.php/movie.php/berita.php/dll dengan jarak itu emang pas,
   jadi juga gak diubah globalnya). Scope fix ke 2 class baru yang CUMA
   dipasang di pencarian.php (.search-form--pencarian, .pencarian-results),
   gak numpuk ke halaman lain. */
.search-form--pencarian { margin-bottom: 16px; }
.pencarian-results { padding-top: 12px; }
/* 16 Okt 2026 (permintaan operator, redesign /pencarian biar "model baru"
   -- pill besar, border gold tebal + glow, tombol bulat gold solid) --
   di-scope ke .search-form--pencarian doang, gak numpuk ke .search-form
   generic yang dipake komponen search lain. Wrapper-nya butuh position:
   relative buat nampung dropdown autocomplete (.wpm-suggest--pencarian)
   yang posisinya absolute. */
.search-form-wrap--pencarian { position: relative; max-width: 680px; }
/* 16 Okt 2026 v3 (permintaan operator, kasih referensi baru) -- BUKAN dua
   pill terpisah lagi, tapi SATU bar menyatu: satu border gold ngelilingin
   seluruh bar, kiri hitam (input) nyambung langsung tanpa celah ke kanan
   gold solid (tombol), dipisah cuma lewat warna, bukan dua elemen beda. */
.search-form--pencarian {
  gap: 0;
  border: 3px solid var(--accent-2);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.25), 0 0 26px rgba(var(--accent-rgb), 0.4);
}
.search-form--pencarian input {
  background: #0a0a0a;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 19px 26px;
  font-size: 16px;
}
.search-form--pencarian input::placeholder { color: rgba(255, 255, 255, 0.4); }
.search-form--pencarian input:focus { box-shadow: none; }
.search-form--pencarian button {
  background: var(--accent-2);
  color: #1a1200;
  border-radius: 0;
  padding: 0 32px;
  box-shadow: none;
}
.search-form--pencarian button svg { width: 22px; height: 22px; stroke: #1a1200; }
/* 16 Okt 2026 (laporan operator: dropdown autocomplete "nabrak"/numpuk
   sama konten di bawahnya -- footer & empty-state keliatan nembus/ketabrak
   kalau hasil suggest banyak jadi tinggi banget) -- dikasih batas tinggi +
   scroll biar gak bisa tumbuh tinggi tanpa batas, background dipastiin
   SOLID (bukan transparan), dan shadow lebih tegas biar jelas ini
   "ngambang" di atas konten, bukan nyatu/transparan sama halaman. */
.wpm-suggest--pencarian {
  min-width: 0;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  background: #0d0c0b;
  z-index: 400;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(var(--accent-rgb), 0.3);
}
/* 16 Okt 2026 (ROOT CAUSE ketemu, laporan operator "nabrak"/transparan) --
   .crypto-footer punya z-index:1 SAMA kayak .page-hero, dan karena footer
   belakangan di DOM, dia yang menang nutupin dropdown autocomplete
   (background footer sendiri semi-transparan rgba(0,0,0,0.35) + gradient
   glow, makanya keliatan "tembus"/ketabrak). Pola bug yang SAMA PERSIS
   kayak kasus .zc-genre-bar vs .page-hero yang udah pernah difix (lihat
   komentar di .zc-genre-bar). Fix di-scope ke class baru khusus halaman
   pencarian (.page-hero--search) biar z-index .page-hero global di
   halaman LAIN gak kebawa berubah (itu masih harus kalah dari
   .zc-genre-bar yang z-index:5). */
.page-hero.page-hero--search { z-index: 2; }
/* FIX 16 Okt 2026 (laporan operator, screenshot mobile /film/banyak-
   ditonton: judul "Paling Banyak Ditonton" kejauhan dari grid poster di
   bawahnya, ruang kosong gede) -- sumbernya sama kayak fix pencarian.php
   di atas: .crypto-section--tight punya padding-top 72px yang kepake luas
   (kategori.php/movie.php/berita.php/dll, di situ emang pas), jadi gak
   diubah globalnya. Scope ke class baru yang CUMA dipasang di section
   grid film kategori.php (.kategori-film-grid-section) -- MOBILE doang,
   desktop tetep 72px seperti biasa. */
@media (max-width: 980px) {
  .kategori-film-grid-section { padding-top: 16px; }
}
.search-form input {
  flex: 1; padding: 14px 18px; border-radius: 999px; background: var(--surface-glass-2);
  border: 1px solid var(--border-glass); color: var(--text); font-size: 14.5px; outline: none;
}
.search-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.2); }
.search-form button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 26px; border-radius: 999px; border: none; background: var(--grad-brand); color: #fff;
  font-weight: 600; cursor: pointer;
}
/* 26 Agu 2026, fix operator: icon svg dari wpm_icon('search') gak punya
   width/height di sini (beda dari tombol ikon lain di situs yang semua
   udah punya rule size), jadi jatuh ke ukuran default browser yang
   kegedean lalu ke-clip sama overflow pill-nya — hasilnya tombol keliatan
   bulet kuning polos tanpa ikon sama sekali. */
.search-form button svg { width: 18px; height: 18px; flex-shrink: 0; }

.empty-state { text-align: center; padding: 60px 20px; color: var(--text-faint); }
.empty-state svg { width: 40px; height: 40px; margin-bottom: 14px; opacity: 0.5; }
.empty-state__hint { font-size: 13px; max-width: 380px; margin: 8px auto 0; line-height: 1.5; }

/* ============================================================
   RESPONSIVE — Fase 9 additions
   ============================================================ */
@media (max-width: 980px) {
  .article-layout { grid-template-columns: 1fr; }
  /* 16 Okt 2026 (laporan operator, screenshot halaman /watch mobile):
     SEBELUMNYA flex-direction:row + overflow-x:auto -- niatnya biar
     beberapa box kecil (ad + "Film Terkait") bisa digeser ke samping,
     TAPI kalau isinya cuma 1 box (kasus umum di /watch), box itu nyusut
     sesuai lebar konten doang & nyisain ruang kosong gede di kanan.
     Ganti ke stack vertikal full-width -- box "Film Terkait" (dan ad,
     kalau ada) jadi rapi kebawah & ngisi penuh lebar layar, konsisten
     sama section lain di halaman. */
  .article-layout__sidebar { position: static; flex-direction: column; width: 100%; }
  /* 16 Okt 2026 (lanjutan fix di atas, laporan operator: thumbnail+teks
     "Film Terkait" masih kecil/kompak padahal box-nya sekarang udah full
     width -- nyisain banyak ruang kosong di kanan). Gedein thumbnail &
     teks KHUSUS mobile biar proporsional ngisi lebar box yang sekarang
     full-width. Class .sidebar-most-viewed dipake di watch.php & movie.php
     (keduanya sama-sama full-width di mobile sekarang), jadi fix ini
     otomatis konsisten di dua tempat itu. */
  .sidebar-most-viewed__item { gap: 16px; }
  .sidebar-most-viewed__thumb { width: 92px; height: 130px; border-radius: 10px; }
  .sidebar-most-viewed__title { font-size: 16px; -webkit-line-clamp: 3; }
  .sidebar-most-viewed__year { font-size: 13px; margin-top: 6px; }
  .news-grid-layout { grid-template-columns: 1fr; }
  .news-grid-layout__sidebar { position: static; flex-direction: row; overflow-x: auto; }
  .news-card--row { flex-direction: column; }
  .news-card--row .news-card__media { width: 100%; height: 150px; }
}

@media (max-width: 640px) {
  .article-share { flex-wrap: wrap; }
  .crypto-nav__search-btn { display: none; }
  /* Same specificity (0,2,0) as the desktop-only 2-col override above, but
     declared later in the cascade so it wins the tie at this breakpoint —
     without it the compound selector's specificity would beat the plain
     .crypto-grid--3 mobile rule below the fold at line ~847, since media
     queries don't add specificity of their own. */
  .news-grid-layout--right-only .crypto-grid--3 { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  .site-ticker-row__inner { flex-wrap: wrap; padding-top: 4px; padding-bottom: 4px; }
  .live-ticker { max-width: 100%; width: 100%; }
  .breaking-ticker { flex-basis: 100%; }
  .site-ticker-row__divider { display: none; }
}

/* ============================================================
   DEVICE VISIBILITY UTILITIES (Featured/Pamungkas per-section toggle)
   ============================================================ */
@media (min-width: 981px) { .u-hide-desktop { display: none !important; } }
@media (max-width: 980px) { .u-hide-mobile { display: none !important; } }

/* ============================================================
   BOTTOM TAB BAR — mobile only (27 Sep 2026, request operator).
   Sticky pill nempel di bawah layar, dicontohin dari referensi
   bottom-nav situs lain (pill rounded, item aktif dikasih pill
   putih/terang). Warna dasarnya tetep brand red/dark situs ini,
   bukan oranye kayak referensinya. 3 tab: Beranda, Terpopuler,
   Menu (markup di includes/site-footer.php). Cuma
   dirender di <=980px lewat .u-hide-desktop di markup-nya sendiri,
   ditambah kill-switch max-width di sini biar aman kalau suatu saat
   markup-nya kepasang tanpa class itu. Body dikasih padding-bottom
   di media query yang sama biar konten paling bawah nggak ketutup
   bar ini. */
/* 16 Okt 2026: dirampingkan (permintaan operator, "terlalu tinggi") --
   padding, icon, dan font dikecilin biar pill-nya lebih slim. */
.mobile-tabbar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 190;
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--bg-deep-2), var(--bg-void));
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.2) inset;
}
@media (min-width: 981px) { .mobile-tabbar { display: none !important; } }

.mobile-tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px 5px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.mobile-tabbar__item svg { width: 18px; height: 18px; }
.mobile-tabbar__item:active { transform: scale(0.94); }
.mobile-tabbar__item.is-active {
  background: var(--accent, #dc2626);
  color: #fff;
  box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.45);
}

@media (max-width: 980px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* Mobile nav drawer — "megamenu" slide-in dari kanan (2 Okt 2026,
   permintaan operator: trigger-nya sekarang di header kanan, bukan cuma
   bottom tab bar lagi, jadi ditambahin animasi slide biar berasa kaya
   megamenu beneran muncul dari tombol hamburger, bukan cuma nongol
   instan). Dulu cuma toggle display:none/block polos (gak ada animasi
   sama sekali) — sekarang overlay di-fade (opacity+visibility, delay
   di visibility biar gak "ke-klik" pas lagi invisible) dan panel-nya
   sendiri di-translateX dari luar layar (100%) ke posisi normal (0). */
.crypto-nav__mobile {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(5, 3, 16, 0.75);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  overflow: hidden; /* 2 Okt 2026, FIX BUG BESAR (laporan operator: "home mobile
    berantakan, row film ga responsive") — root cause-nya BUKAN di
    .movie-grid, tapi di sini: panel drawer (.crypto-nav__mobile-panel)
    posisinya translateX(100%) pas ketutup, yang berarti dia "parkir" di
    luar kanan kotak ini (lebar panel ~320px nambah ke kanan dari tepi
    viewport). Tanpa overflow:hidden di wrapper ini, browser ngitung
    posisi parkir itu sebagai bagian dari scrollable area HALAMAN,
    bikin document.body punya scrollWidth ekstra ratusan px (keukur
    1329px padahal viewport cuma 390px) — efeknya SELURUH halaman jadi
    bisa discroll horizontal dikit, yang bikin semua section di bawahnya
    (row film, grid, dst) keliatan "kepotong"/ga center/berantakan di
    HP, padahal CSS grid/flex row-row itu sendiri sebenernya udah bener.
    Bug ini baru muncul pas drawer dikasih animasi slide-in (sebelumnya
    pure display:none/block, gak ada elemen "diparkir" di luar layar). */
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.crypto-nav__mobile.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease;
}

.crypto-nav__mobile-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(320px, 84vw);
  height: 100%;
  background: linear-gradient(180deg, var(--bg-deep-2), var(--bg-deep) 60%);
  border-left: 1px solid var(--border-glass);
  padding: 20px 16px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: -20px 0 50px rgba(0, 0, 0, 0.45);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.22, 0.9, 0.32, 1);
}

.crypto-nav__mobile.is-open .crypto-nav__mobile-panel { transform: translateX(0); }

.crypto-nav__mobile-close {
  align-self: flex-end;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--surface-glass-strong);
  border: 1px solid var(--border-glass);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  margin-bottom: 8px;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.crypto-nav__mobile-close:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: rotate(90deg);
}

/* 27 Sep 2026, redesign drawer mobile (request operator: "bar footer
   dibawah" biar keren) — tiap item sekarang jadi "card" glass dengan
   icon dalam badge bulat berwarna, bukan cuma teks+icon polos. Warna
   badge beda-beda per menu (biar gampang dibedain sekilas), tapi
   selera warnanya tetep dalam keluarga --accent/cyan/gold/green biar
   nyatu sama tema situs. */
/* 2 Okt 2026 (permintaan operator: "menu nya bikin pake border gold")
   — semua item drawer sekarang dikasih border gold permanen (bukan cuma
   pas hover/active doang kaya sebelumnya), reuse var(--accent-rgb) yang
   di tema situs ini emang warna gold (201,162,39, lihat :root), biar
   match sama contoh referensi megamenu operator (tiap row ada outline
   gold tipis). */
.crypto-nav__mobile-panel a,
.crypto-nav__mobile-panel button.nav-link--search-mobile,
.crypto-nav__mobile-panel .zc-filter-btn--mobile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border-radius: 16px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--accent);
  background: var(--surface-glass);
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.crypto-nav__mobile-panel a:hover,
.crypto-nav__mobile-panel a.is-active,
.crypto-nav__mobile-panel button.nav-link--search-mobile:hover,
.crypto-nav__mobile-panel .zc-filter-btn--mobile:hover {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--text);
  transform: translateX(2px);
}

/* Dropdown Genre/Tahun Rilis di drawer mobile — summary disamain sama
   styling link drawer lainnya (24 Agu 2026), bukan style navy desktop. */
.crypto-nav__mobile-panel .nav-dropdown { width: 100%; }
.crypto-nav__mobile-panel .nav-dropdown summary {
  display: flex; align-items: center; gap: 14px; width: 100%; box-sizing: border-box;
  padding: 13px 14px; border-radius: 16px; font-size: 15.5px; font-weight: 600;
  color: var(--accent); background: var(--surface-glass); border: 1px solid rgba(var(--accent-rgb), 0.45);
}
.crypto-nav__mobile-panel .nav-dropdown summary > svg:last-of-type {
  margin-left: auto; width: 14px; height: 14px; flex-shrink: 0;
}
.crypto-nav__mobile-panel .nav-dropdown summary:hover,
.crypto-nav__mobile-panel .nav-dropdown summary.is-active {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--text);
}
.crypto-nav__mobile-panel .nav-dropdown__panel { margin-top: 4px; margin-bottom: 4px; }

/* Icon badge bulat — wrapper .mnav-icon ditaruh di includes/site-footer.php
   ngebungkus wpm_icon()/svg tiap item, biar bisa dikasih background bulat
   berwarna per menu tanpa perlu ubah wpm_icon() itu sendiri. */
.mnav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mnav-icon svg { width: 18px; height: 18px; }
/* 2 Okt 2026 (permintaan operator: "icon menu mobile bikin aja semua
   1 warna GOLD, border dan font colornya, iconnya juga") — tadinya
   tiap menu dikasih warna badge beda-beda (ungu/cyan/gold/hijau) biar
   gampang dibedain sekilas; sekarang DISAMAIN semua jadi gold (reuse
   var(--accent-rgb)/var(--accent), sama kayak border drawer-nya),
   konsisten 1 warna buat semua icon. */
.mnav-icon--midnight,
.mnav-icon--request,
.mnav-icon--kabar,
.mnav-icon--filter,
.mnav-icon--search,
.mnav-icon--kategori,
.mnav-icon--ditonton,
.mnav-icon--terbaru {
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent);
}

/* Divider tipis sebelum tombol Pencarian, misahin grup "navigasi film"
   dari aksi pencarian biar drawer keliatan lebih terstruktur. */
.crypto-nav__mobile-divider {
  height: 1px;
  background: var(--border-glass);
  margin: 8px 4px;
}

/* Tombol Filter di drawer mobile (9 Sep 2026) — reuse .zc-filter-btn tapi
   dilebarin full-width supaya nyatu sama gaya link drawer lainnya, bukan
   pill kecil kayak versi desktop di .zc-genre-bar. */
.crypto-nav__mobile-panel .zc-filter-btn--mobile {
  justify-content: flex-start;
}
.crypto-nav__mobile-panel .zc-filter-btn__badge {
  margin-left: auto;
}

/* ============================================================
   News homepage — tabs, league/live filter row, hero card,
   article list rows, trending sidebar. Reuses existing tokens
   (--purple/--cyan/--green/--red, --surface-glass, --radius-*,
   --font-display) and .glass-card/.crypto-container conventions.
   ============================================================ */

/* Single-column full-width (31 Agu 2026, Pojok Lelaki rebrand) — sidebar
   "Banyak Dicari" dan feed "Rekomendasi Untukmu" dihapus dari homepage,
   jadi .news-layout gak perlu lagi grid 2 kolom; cuma dipertahankan
   sebagai wrapper (banner strip, dst) biar markup index.php gak perlu
   restrukturisasi total. */
.news-layout { padding-bottom: 20px; }
.news-layout__main { min-width: 0; }

.news-byline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-faint);
}

.news-byline--sm { font-size: 11.5px; }
.news-byline__dot { opacity: 0.6; }

/* ============================================================
   HERO SLIDER — homepage banner (30 Agu 2026, Pojok Lelaki rebrand).
   Replaces the old single-film .news-hero card: up to 5 full-width
   backdrop slides, title + year/genre badges bottom-left, prev/next
   arrows bottom-right, dot indicators bottom-left. Auto-advance +
   pause-on-hover handled by the inline <script> next to
   wpm_hero_slider() usage in index.php. Fade transition (opacity),
   lightest-weight option that still reads as a real slider.
   ============================================================ */
/* Wrapper (6 Okt 2026, permintaan operator: hero slider kegedean/full-
   bleed, gak sejajar sama kolom sidebar+konten di bawahnya) — ngikutin
   max-width/padding yang sama persis kayak .home-layout, biar tepi kiri-
   kanan hero pas sejajar sama section sidebar "Jelajahi" + konten film
   di bawahnya, bukan nempel ke ujung layar lagi. */
.home-hero-wrap {
  max-width: 1600px;
  margin: 24px auto;
  padding: 0 24px;
}
.home-hero-wrap .hero-slider { border-radius: 16px; }

.hero-slider {
  position: relative;
  width: 100%;
  /* Ukuran banner (6 Okt 2026, permintaan operator) — 3 tingkat, dipilih
     dari field "Ukuran banner (desktop)" di menu admin Banners (placement
     home_hero, lihat $heroSizeMode di wpm_hero_slider()). Rasio ngikutin
     PERSIS angka px yang ditampilin di dropdown admin (1920 wide jadi
     acuan), bukan pecahan dibulatin, biar WYSIWYG sama label-nya:
     - .hero-slider--large    → 1920 x 650 (besar)
     - .hero-slider (default) → 1920 x 500 (sedang) — sebelumnya 21/6
     - .hero-slider--compact  → 1920 x 350 (pendek/gepeng)
     min-height beda-beda per tingkat biar proporsinya kebawa juga di
     layar sempit sebelum breakpoint mobile di bawah ngambil alih. */
  aspect-ratio: 1920 / 500;
  min-height: 220px;
  overflow: hidden;
  background: var(--bg-deep-2);
}
.hero-slider.hero-slider--large { aspect-ratio: 1920 / 650; min-height: 260px; }
.hero-slider.hero-slider--compact { aspect-ratio: 1920 / 350; min-height: 150px; }
@media (max-width: 640px) {
  .hero-slider.hero-slider--large { aspect-ratio: 4 / 3; min-height: 220px; }
  .hero-slider.hero-slider--compact { aspect-ratio: 16 / 9; min-height: 130px; }
}

/* Grid promo banner homepage 2x2 (9 Okt 2026, permintaan operator: "bikin
   banner ini jadi 4 bagian") -- dipakai wpm_hero_banner_grid(), dirender
   DI TEMPAT hero-slider kalau ada banner 'home_hero' aktif (lihat
   index.php). Ukuran keseluruhan grid ngikut pola size_mode yang sama
   kayak .hero-slider (large/compact/normal), biar setting admin yang
   sudah ada tetap nyambung walau sekarang bentuknya grid, bukan 1 slide. */
.hero-banner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 8px;
  width: 100%;
  aspect-ratio: 1920 / 500;
  min-height: 220px;
  border-radius: 16px;
  overflow: hidden;
}
.hero-banner-grid--large { aspect-ratio: 1920 / 650; min-height: 260px; }
.hero-banner-grid--compact { aspect-ratio: 1920 / 350; min-height: 150px; }

/* 12 Okt 2026 (permintaan operator: ruang kosong di sekitar banner yang
   rasionya beda dari kotak grid) -- assets/js/site.js ngukur rasio ASLI
   tiap gambar banner yang lagi aktif terus set tinggi tiap baris grid
   manual (grid-template-rows, inline style) biar ngepas sama gambarnya,
   bukan dipaksa 1 rasio tetap kayak di atas. Class ini nambahin pas JS-nya
   kelar ngitung, matiin aspect-ratio/min-height default supaya inline
   style dari JS yang menang. Gambar TETAP object-fit:contain (nggak ada
   yang di-crop) -- lihat includes/site-bootstrap.php wpm_hero_banner_grid()
   buat sumber datanya, cuma jalan kalau pas 4 banner aktif (count-4). */
.hero-banner-grid.js-fit-ready {
  aspect-ratio: auto;
  min-height: 0;
}

/* 1-3 banner aktif -- isi kotak yang ada aja, sisa kolom/baris nggak
   dipaksain kosong keliatan bolong (item melar natural ngikut grid auto). */
.hero-banner-grid--count-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.hero-banner-grid--count-2 { grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; }
.hero-banner-grid--count-3 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.hero-banner-grid--count-3 .hero-banner-grid__item:first-child { grid-row: span 2; }

.hero-banner-grid__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: var(--bg-deep-2);
}
.hero-banner-grid__item img {
  width: 100%;
  height: 100%;
  /* 12 Okt 2026 (di-revert lagi) -- sempat dicoba object-fit:cover biar
     rapat kayak referensi (lihat histori 10 & 12 Okt di bawah), tapi
     ketauan motong teks/logo yang nempel di pinggir banner ("METRO4D"
     jadi "METR", "WELCOME" jadi "WELCO") karena rasio tiap banner beda
     jauh (dicek: ada yang 1280x320, ada yang 1600x180, ada yang
     1280x465) -- gak ada 1 rasio kotak yang pas buat semuanya tanpa
     motong sebagian. Balik ke contain: gambar utuh, konsekuensinya ada
     ruang kosong/frame di gambar yang rasionya jauh dari kotak. Solusi
     permanen yang sebenarnya: upload banner baru dengan rasio SERAGAM
     (disarankan ke operator) biar frame-nya ilang sendiri tanpa perlu
     crop. Histori lama: 10 Okt 2026 awalnya contain -> 12 Okt sempat ke
     cover -> sekarang balik contain lagi. */
  object-fit: contain;
  display: block;
  transition: transform 0.3s ease;
}
.hero-banner-grid__item:hover img { transform: scale(1.04); }
.hero-banner-grid__overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 14px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.65), transparent);
  pointer-events: none;
}
.hero-banner-grid__title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 640px) {
  /* 10 Okt 2026 (permintaan operator): di HP, 4 banner ditumpuk memanjang
     ke bawah (1 kolom) -- bukan grid 2x2 kayak di desktop. Tiap item pakai
     aspect-ratio sendiri (bukan container) biar tingginya natural ngikut
     jumlah banner, nggak dipepet jadi kotak kecil. */
  .hero-banner-grid {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    min-height: 0;
    gap: 10px;
  }
  .hero-banner-grid--large,
  .hero-banner-grid--compact {
    aspect-ratio: auto;
    min-height: 0;
  }
  .hero-banner-grid__item {
    width: 100%;
    aspect-ratio: auto;
    height: auto;
  }
  .hero-banner-grid--large .hero-banner-grid__item,
  .hero-banner-grid--compact .hero-banner-grid__item {
    aspect-ratio: auto;
    height: auto;
  }
  .hero-banner-grid--count-3 .hero-banner-grid__item:first-child { grid-row: auto; }
  /* Gambar asli ditampilin utuh (nggak dipotong) -- item ikutin tinggi
     natural gambarnya sendiri. */
  .hero-banner-grid__item img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  .hero-banner-grid__title { font-size: 11.5px; }
}

.hero-slider__track { position: relative; width: 100%; height: 100%; }

.hero-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease;
}

.hero-slider__slide.is-active { opacity: 1; visibility: visible; z-index: 1; }

.hero-slider__media { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.hero-slider__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-slider__media svg { width: 42px; height: 42px; margin: auto; color: var(--text-faint); display: block; }
.hero-slider__video-slot { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; }
.hero-slider__video-slot.is-ready { opacity: 1; }
.hero-slider__video-slot iframe {
  position: absolute; top: 50%; left: 50%; width: 100%; height: 100%;
  min-width: 177.78vh; min-height: 56.25vw;
  transform: translate(-50%, -50%);
  border: 0; pointer-events: none;
}

.hero-slider__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 64px 24px 56px;
  background: linear-gradient(180deg, rgba(6, 12, 24, 0) 0%, rgba(6, 12, 24, 0.5) 40%, rgba(6, 12, 24, 0.92) 100%);
  pointer-events: none;
}

.hero-slider__overlay > * { pointer-events: auto; }

.hero-slider__title-link { display: inline-block; }

.hero-slider__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 42px);
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 10px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  max-width: 720px;
}

.hero-slider__title-link:hover .hero-slider__title { color: var(--accent-2); }

.hero-slider__badges { display: flex; flex-wrap: wrap; gap: 8px; }

.hero-slider__badge {
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(4px);
}

.hero-slider__badge--genre { background: rgba(var(--accent-rgb), 0.28); border-color: rgba(var(--accent-rgb), 0.4); }

.hero-slider__dots {
  position: absolute;
  left: 24px;
  bottom: 20px;
  z-index: 2;
  display: flex;
  gap: 8px;
}

.hero-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, width 0.2s ease;
}

.hero-slider__dot.is-active { background: var(--accent); width: 22px; }

.hero-slider__arrows {
  position: absolute;
  right: 24px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  gap: 10px;
}

.hero-slider__arrow {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(6, 4, 16, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.hero-slider__arrow:hover { background: var(--accent); border-color: var(--accent); }
.hero-slider__arrow svg { width: 18px; height: 18px; }

@media (max-width: 640px) {
  .hero-slider { aspect-ratio: 4 / 3; min-height: 220px; }
  /* 3 Okt 2026: object-fit:cover pada kotak 4/3 bikin gambar banner/promo
     (biasanya landscape lebar) kepotong parah di mobile. Ganti ke "contain"
     khusus mobile supaya seluruh gambar kelihatan utuh (letterbox pakai
     background gelap .hero-slider), tanpa mengubah tampilan desktop. */
  .hero-slider__media img { object-fit: contain; background: var(--bg-deep-2); }
  .hero-slider__overlay { padding: 40px 16px 44px; }
  .hero-slider__arrows { right: 16px; }
  .hero-slider__dots { left: 16px; }
}

.news-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-glass);
}

.news-row__media {
  flex-shrink: 0;
  width: 108px;
  height: 76px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-glass);
  border: 1px solid var(--border-glass);
  display: flex;
}

.news-row__media img { width: 100%; height: 100%; object-fit: cover; }
.news-row__media svg { width: 24px; height: 24px; margin: auto; color: var(--text-faint); }

.news-row__body { flex: 1; min-width: 0; }

.news-row__title {
  font-family: var(--font-display);
  font-size: 15.5px;
  line-height: 1.4;
  font-weight: 600;
  margin: 0 0 8px;
}

.news-row__title a:hover { color: var(--cyan); }

/* Trending sidebar */
.trending-panel {
  background: var(--surface-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.trending-panel__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 16px;
}

.trending-panel__title svg { width: 16px; height: 16px; color: var(--gold); }

.trending-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--border-glass);
}

.trending-item:first-of-type { border-top: none; padding-top: 0; }

.trending-item__rank {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.trending-item__body { flex: 1; min-width: 0; }

.trending-item__title {
  font-size: 13.5px;
  line-height: 1.4;
  font-weight: 600;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.trending-item__title a:hover { color: var(--cyan); }

.trending-item__rating {
  display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--text-faint);
}
.trending-item__rating svg { width: 12px; height: 12px; color: var(--accent); }
.trending-item__rating span { color: var(--text); }

.trending-item__media {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-deep-2);
  border: 1px solid var(--border-glass);
  display: flex;
}

.trending-item__media img { width: 100%; height: 100%; object-fit: cover; }
.trending-item__media svg { width: 18px; height: 18px; margin: auto; color: var(--text-faint); }

@media (max-width: 640px) {
  .news-row__media { width: 84px; height: 60px; }
}

/* ============================================================
   SEARCH OVERLAY MOBILE (site-header.php, <=640px, 31 Agu 2026)
   Klik icon search di layar sempit buka overlay full-screen ini,
   BUKAN expand inline .zc-search (numpuk sama logo+menu di HP).
   Desktop/tablet (>640px) nggak kepakai — tetap expand inline lama.
   ============================================================ */

.zc-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(10, 6, 24, 0.92);
  backdrop-filter: blur(4px);
  display: flex;
  /* 20 Sep 2026 fix: kurang flex-direction: column bikin
     .zc-search-overlay__inner (search bar) dan .zc-search-quickmenu
     (riwayat/trending/genre) disusun BERDAMPINGAN (row, default flex),
     bukan bertumpuk ke bawah — makanya quick menu keliatan numpuk ke
     kanan search bar dan judul film kepotong sempit. */
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 10vh 20px 24px;
  overflow-y: auto;
}
.zc-search-overlay[hidden] { display: none; }
@media (max-width: 640px) {
  .zc-search-overlay { padding-top: 4vh; }
}
.zc-search-overlay__inner {
  width: 100%;
  max-width: 480px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.zc-search-overlay__form {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 999px;
  padding: 12px 18px;
  color: rgba(30, 10, 30, 0.6);
}
.zc-search-overlay__form svg { width: 17px; height: 17px; opacity: 0.55; flex-shrink: 0; }
.zc-search-overlay__input {
  border: none; outline: none; background: transparent; flex: 1; min-width: 0;
  font-family: var(--font-body); font-size: 16px; color: #1a1a1a;
}
.zc-search-overlay__input::placeholder { color: rgba(30, 10, 30, 0.45); }
.zc-search-overlay__close {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.zc-search-overlay__close:hover { background: rgba(255, 255, 255, 0.24); }

/* Quick menu overlay search — Riwayat Pencarian + Everyone's Searching +
   Jelajahi Genre (20 Sep 2026, permintaan operator). Ditaruh di bawah
   .zc-search-overlay__inner, scrollable kalau kepanjangan di layar
   pendek. Pill/chip pakai warna senada sama overlay-nya sendiri (bg gelap
   dari .zc-search-overlay), bukan bikin panel gelap baru sendiri. */
.zc-search-quickmenu {
  width: 100%;
  max-width: 480px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  /* Scroll-nya sekarang di .zc-search-overlay (parent), bukan di sini —
     satu scroll container aja biar gak dobel-scroll/kepotong. */
  padding-bottom: 24px;
}
.zc-qm-section__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 10px 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.zc-qm-clear {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  /* 20 Sep 2026 (permintaan operator): ganti dari teal/ungu ke tema
     merah brand Pojok Lelaki, reuse var(--accent) yang sama dipakai
     tombol/nav lain di site.css. */
  color: var(--accent-2);
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}
.zc-qm-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.zc-qm-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 12px;
  padding: 12px 14px;
  color: #f5eeee;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.zc-qm-pill:hover { background: rgba(var(--accent-rgb), 0.16); border-color: rgba(var(--accent-rgb), 0.6); }
.zc-qm-pill svg { flex-shrink: 0; color: var(--accent-2); opacity: 0.9; }
.zc-qm-pill span { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zc-qm-pill__remove {
  flex-shrink: 0;
  display: flex;
  border: none;
  background: transparent;
  padding: 4px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.4);
}
.zc-qm-pill__remove:hover { color: rgba(255, 255, 255, 0.75); }
.zc-qm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.zc-qm-chip {
  display: inline-flex;
  align-items: center;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 999px;
  padding: 8px 14px;
  color: #f5eeee;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.zc-qm-chip:hover { background: rgba(var(--accent-rgb), 0.18); border-color: rgba(var(--accent-rgb), 0.6); }

/* 20 Sep 2026 (permintaan operator): overlay search + quick menu
   (Riwayat/Trending/Genre) sekarang tampil di SEMUA lebar layar, jadi
   aturan yang nyembunyiin .zc-search-quickmenu di >=641px (dulu ada di
   sini) DICABUT. Cuma dikasih max-width biar di layar lebar dia gak
   melebar penuh kayak di HP — tetap rapi kebentuk kolom di tengah. */
.zc-search-quickmenu { max-width: 480px; }

@media (max-width: 640px) {
  /* Di layar sempit, tombol toggle langsung buka overlay lewat JS
     (lihat site.js) — form inline .zc-search dipaksa tetap collapsed
     di sini biar nggak ke-trigger dobel kalau breakpoint pas di tengah
     transisi resize. */
  .zc-search.is-open { width: 0; max-width: 0; opacity: 0; padding: 0; }
}


/* ============================================================
   Pojok Lelaki UI nuance (30 Sep 2026) — additive only, gak ngubah
   rule yang udah ada. Dua elemen baru buat bedain dari tema lama:
   1) garis aksen animasi tipis di bawah navbar
   2) garis aksen pendek di bawah tiap section-title
   ============================================================ */
.crypto-nav { position: relative; }
.crypto-nav::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--pink-2), transparent);
  background-size: 200% 100%;
  animation: pjklNavGlow 6s linear infinite;
  pointer-events: none;
}
@keyframes pjklNavGlow {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

.section-title { position: relative; display: inline-block; }
.section-title::after {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  margin-top: 10px;
  background: var(--grad-brand);
  border-radius: 2px;
}

/* Menu utama disederhanain (30 Sep 2026, gaya KlikFilm) — Home/Trending/
   Kabar Film polos, gantiin pill Midnight/Request Movie/Kabar Film lama.
   Base warna/hover udah ke-cover sama rule .zc-nav-links a di atas,
   ini nambahin state aktif + sedikit lebih tebal biar kebaca sebagai menu.
   30 Sep 2026 (revisi tampilan, permintaan operator): font menu diganti ke
   'Fraunces' (serif modern/editorial — dicontohin operator lewat screenshot
   font "Study tour & komunitas"), lebih bold biar kebaca lebih "kece". */
.zc-nav-link {
  /* 30 Sep 2026 (revisi tampilan, gold luxury rebrand): font menu diganti
     dari Fraunces ke Playfair Display — serif kontras-tinggi yang identik
     sama brand luxury/fashion, dites & dikonfirmasi operator lewat mockup
     artifact. Menu aktif dikasih garis bawah gold tipis (bukan pill/
     border penuh — operator sendiri yang milih opsi ini biar nav tetap
     keliatan minim/elegan, bukan kayak 3 tombol). */
  font-family: 'Playfair Display', 'Fraunces', var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.01em;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.zc-nav-link.is-active {
  color: #fff;
  border-bottom-color: var(--accent);
}