/* nd-watch-chrome.css — menyelaraskan CHROME halaman watch dengan tema baru.

   BATAS KERAS: file ini HANYA menyentuh chrome di LUAR video player, sesuai
   garis batas audit 05 §1.2:
     - aside.desktop-sidebar-left / -right  (info film, daftar episode, rail)
     - section.player-seo-block             (blok SEO yang wajib tetap terlihat)
     - section.player-random-section        (rail "Drama Lainnya")
   TIDAK ADA satu pun selector milik stage/HUD/kontrol pemutar di sini —
   scripts/nd-css-guard.sh memverifikasi itu secara otomatis.

   Dimuat di `@push('styles')` halaman player, SESUDAH blok <style> player,
   supaya override-nya menang tanpa perlu membedah file 14.671 baris itu. */

/* ---------- Panel sisi ---------- */

body.nd-ui .desktop-sidebar-left,
body.nd-ui .desktop-sidebar-right,
body.nd-ui .side-card {
  background: var(--nd-s1);
  border: 0;
  border-radius: var(--nd-r-4);
  box-shadow: var(--nd-e1);
  color: var(--nd-t2);
}

body.nd-ui .desktop-title {
  color: var(--nd-t1);
  font-family: var(--nd-font-display);
  letter-spacing: var(--nd-ls-display, -.02em);
}

body.nd-ui .desktop-intro { color: var(--nd-t3); }

body.nd-ui .desktop-cover,
body.nd-ui .desktop-cover-fallback {
  border-radius: var(--nd-r-3);
  border: 0;
}

body.nd-ui .desktop-tag {
  background: var(--nd-s2);
  color: var(--nd-t2);
  border: 0;
  border-radius: var(--nd-r-1);
}
body.nd-ui .desktop-tag:hover { background: var(--nd-s3); color: var(--nd-t1); }

/* ---------- Daftar episode di sidebar ---------- */

body.nd-ui .left-episode-item {
  background: var(--nd-s2);
  color: var(--nd-t2);
  border: 0;
  border-radius: var(--nd-r-2);
  transition: background-color var(--nd-dur-1) var(--nd-ease-out),
              color var(--nd-dur-1) var(--nd-ease-out);
}
body.nd-ui .left-episode-item:hover { background: var(--nd-s3); color: var(--nd-t1); }
/* Episode yang SEDANG diputar. Dua kekeliruan sekaligus dulu di sini:
   (a) kelasnya salah — markup menulis `active` (blade:2872, di-toggle JS
       baris 11731); `is-active` dan `[aria-current]` NOL kali muncul di Blade,
       jadi aturan ini tidak pernah mengenai apa pun;
   (b) akibatnya `body.nd-ui .left-episode-item` di atas — (0,2,1), menang atas
       `.left-episode-item.active` milik blade:1900 yang (0,2,0) — ikut
       MENGHAPUS isian merahnya, jadi penanda episode aktif hilang di KEDUA
       tema, bukan cuma di terang. Yang tersisa hanya sisa box-shadow merah muda
       yang tidak lagi punya kotak merah di bawahnya.
   Sengaja TANPA penjaga tema: ini bug yang sudah terlanjur tayang di gelap
   juga, jadi diperbaiki di dua-duanya. `.active:hover` ditulis eksplisit
   ((0,4,1)) supaya tidak bergantung urutan terhadap aturan :hover di atasnya
   yang kebetulan ber-specificity kembar (0,3,1). */
body.nd-ui .left-episode-item.active,
body.nd-ui .left-episode-item.active:hover {
  background: var(--nd-accent);
  color: var(--nd-t-on-accent);
}

/* ---------- Blok SEO (wajib tetap terlihat) ---------- */

body.nd-ui .player-seo-block {
  border: 0;
  border-radius: var(--nd-r-4);
  background: var(--nd-s1);
  box-shadow: var(--nd-e1);
  color: var(--nd-t2);
  padding: var(--nd-sp-5);
  line-height: var(--nd-lh-base, 1.6);
}
body.nd-ui .player-seo-block h2 {
  color: var(--nd-t1);
  font-family: var(--nd-font-display);
  font-size: clamp(1.0625rem, 2.2vw, 1.375rem);
  line-height: var(--nd-lh-snug, 1.3);
  margin: 0 0 var(--nd-sp-3);
}
body.nd-ui .player-seo-block p { font-size: var(--nd-fs-sm); margin: 0 0 var(--nd-sp-2); }
body.nd-ui .player-seo-block strong { color: var(--nd-t1); }
body.nd-ui .player-seo-block a {
  color: var(--nd-accent-ink, var(--nd-accent-400));
  text-decoration: none;
}
body.nd-ui .player-seo-block a:hover { text-decoration: underline; }

/* ---------- Rail "Drama Lainnya" ---------- */

body.nd-ui .player-random-section {
  background: var(--nd-s1);
  border: 0;
  border-radius: var(--nd-r-4);
  box-shadow: var(--nd-e1);
  color: var(--nd-t2);
}
body.nd-ui .player-random-section h2,
body.nd-ui .player-random-title {
  color: var(--nd-t1);
  font-family: var(--nd-font-display);
}

/* ---------- Kartu di rail sidebar kanan ---------- */

/* `grid-template-columns: 1fr 1fr` berarti `minmax(AUTO, 1fr)`: lantai min-content
   kartu ikut dihitung, dan judul kartu tanpa poster (dirender besar oleh penangan
   gambar-gagal global) mendorong lantai itu melewati jatah kolomnya — di sidebar
   320px terukur kolom kiri 162px vs kolom kanan 128px, jadi kartu tidak pernah
   sama besar. `minmax(0, 1fr)` mematikan lantai itu, persis pola .player-random-grid. */
body.nd-ui .related-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nd-sp-3);
  padding: var(--nd-sp-3);
}

/* Kartu = BINGKAI POSTER 3:4 persis, judul MENGAMBANG di atasnya (pola yang sama
   dengan .card dan .watch-history-card). Sebelumnya judul duduk di pita sendiri
   ber-`min-height` dua baris, jadi judul satu baris menyisakan pita kosong dan
   tinggi kartu ikut berubah-ubah mengikuti panjang judul. */
body.nd-ui .related-card-core {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 0;
  border-radius: var(--nd-r-3);
  background: var(--nd-s2);
  box-shadow: var(--nd-e1);
  isolation: isolate;
}

body.nd-ui .related-card-core .related-poster,
body.nd-ui .related-card-core .related-fallback {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: auto;
  border-radius: inherit;
  object-fit: cover;
}

/* Alas gelap judul dipasang di pseudo-element KARTU, bukan sebagai background
   .related-title: judul dipotong dua baris dengan -webkit-line-clamp, dan
   `overflow:hidden` memotong di tepi PADDING — kalau .related-title punya padding
   bawah, baris ketiga menyembul sebagai potongan teks di dasar kartu. */
body.nd-ui .related-card-core::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 62%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
              rgba(0, 0, 0, .94) 0%,
              rgba(0, 0, 0, .72) 36%,
              rgba(0, 0, 0, 0) 100%);
}

body.nd-ui .related-card-core .related-title {
  position: absolute;
  inset-inline: var(--nd-sp-2);
  inset-block-end: var(--nd-sp-2);
  z-index: 2;
  padding: 0;
  min-height: 0;
  color: #fff;
  font: 700 var(--nd-fs-2xs) / 1.3 var(--nd-font-text);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .85);
}

/* Poster gagal muat → penangan global menukar <img> dengan div nd-img-fallback
   yang SUDAH memuat judul penuh, sementara .related-title di bawahnya memuat judul
   yang sama: satu kartu memuat judul dua kali dan sisanya ruang kosong. Yang
   dibungkam salinan DEKORATIF di dalam div aria-hidden itu; teks .related-title
   tetap di DOM dan tetap terlihat (nama tautan tetap dari aria-label <a>). */
body.nd-ui .related-card-core .nd-fb-title { display: none; }

/* Inisial satu huruf (varian fallback server) ikut dibungkam, lalu bidangnya diisi
   tanda putar samar supaya kartu tanpa poster terbaca sebagai poster yang memang
   tak bergambar — bukan kartu yang gagal dimuat. */
body.nd-ui .related-card-core .related-fallback,
body.nd-ui .related-card-core .nd-img-fallback { /* nd-allow-ns: elemen DIBUAT penangan gambar-gagal global, bukan komponen baru */
  font-size: 0;
}

body.nd-ui .related-card-core .related-fallback::before,
body.nd-ui .related-card-core .nd-img-fallback::before { /* nd-allow-ns */
  content: "";
  inline-size: 38%;
  max-inline-size: 60px;
  aspect-ratio: 1;
  margin-block-end: 18%;
  opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='21' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M20 16.4 33.2 24 20 31.6Z' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Kartu kini setinggi bingkai poster saja, jadi pratinjau melayang ikut lebih
   pendek: sinopsisnya dipotong dua baris agar tidak menelan seluruh bingkai. */
body.nd-ui .related-floating-info-overlay {
  padding: var(--nd-sp-5) var(--nd-sp-2) var(--nd-sp-2);
  gap: 2px;
}
body.nd-ui .related-floating-desc { -webkit-line-clamp: 2; }

/* ============================================================
   HP/TABLET: HALAMAN WATCH MENTOK KE TEPI LAYAR
   ============================================================ */

/* nd-fullbleed.css §1 membagikan `padding-inline: var(--nd-gutter-x)` ke daftar
   shell halaman, dan `.player-page` ikut terdaftar di situ — ditambah
   `body.nd-ui main` satu baris di bawahnya yang mengenai elemen YANG SAMA
   (<main class="player-page">). Di HP nilainya 16px kiri+kanan, padahal desain
   asal halaman watch justru menegaskan `.player-page{margin:0;padding:0;
   max-width:none}` di dalam @media (max-width:1179px) supaya panggung video
   mentok ke tepi layar. Aturan asal itu ber-specificity (0,1,0) — kalah telak
   dari (0,2,1) milik nd-fullbleed, jadi gutter-nya tetap menempel dan panggung
   masuk ke dalam: terukur di 390px x=16 w=358, seharusnya x=0 w=390.

   Yang dinetralkan HANYA padding-inline. `max-inline-size:none` dan
   `margin-inline:0` dari nd-fullbleed kebetulan SAMA PERSIS dengan desain asal
   di lebar ini, jadi sengaja dibiarkan apa adanya.

   Batas 1179px bukan angka karangan: itu persis breakpoint milik halaman watch
   sendiri. Mulai 1180px .desktop-sidebar-left/-right baru muncul dan tata letak
   3 kolom memang SENGAJA memakai gutter full-bleed, jadi di atas 1179px blok ini
   tidak ikut campur sama sekali. */
@media (max-width: 1179px) {
  body.nd-ui main.player-page { padding-inline: 0; }
}

/* Bottom nav tidak boleh ikut tampil di halaman watch. Ia `position:fixed`
   setinggi 62px di dasar layar, sementara panggung video setinggi 100dvh menaruh
   baris kontrolnya (rumah, Episode, bisu, CC, layar-penuh) persis di dasar yang
   sama — navnya menimpa baris itu dan tombolnya jadi mustahil ditekan. Markup
   <nav> ini juga MARKUP BARU hasil redesign; halaman watch versi asal tidak
   pernah punya nav bawah.

   nd-tokens.css:254 SUDAH meniatkan hal ini, tapi specificity-nya kembar (0,2,1)
   dengan `body.nd-ui .nd-bottomnav{display:grid}` di nd-nav.css — dan nd-nav.css
   dimuat BELAKANGAN, jadi `grid` yang menang. Catatan urutan di nd-tokens.css
   hanya memperhitungkan tetangga satu file, bukan tabrakan lintas file ini.
   Di sini specificity dinaikkan ke (0,3,1) DAN file ini dimuat paling akhir
   (@push('styles') halaman watch), jadi menang murni lewat cascade.

   Elemen <nav> beserta 5 tautannya TETAP utuh di DOM (hanya tidak digambar),
   sama seperti .topbar yang memang sudah disembunyikan di halaman ini sejak
   desain asalnya. */
body.nd-ui.player-page-body .nd-bottomnav { display: none; }

/* ============================================================
   TEMA TERANG — CHROME HALAMAN WATCH
   ============================================================
   KENAPA BLOK INI ADA. Berkas ini sudah menokenkan TINTA kolom kiri, tapi
   PERMUKAAN di bawahnya baru sebagian: `.side-card, .desktop-movie-detail`
   di my-movie-player.blade.php:1845 itu aturan DUA selector, dan di atas hanya
   `.side-card` yang ditimpa. Begitu tema terang menyala, `--nd-t1` (#15161B)
   mendarat di atas pelat #0B0F18 yang tak pernah ikut dikonversi: judul film
   jadi 1.06:1 — terukur dari piksel, bukan dari CSS yang kita kira berlaku.
   Pola yang sama kena ke `.desktop-cover*` (#253049), `.player-random-item*`
   (#121A2A), dan scrollbar (#111827). `.side-head` lebih parah: TIDAK ADA
   satu pun aturan untuknya di berkas ini, jadi `color:#fff` bertahan utuh di
   atas kartu yang sudah jadi putih = 1.00:1, teks benar-benar hilang.

   SATU SISTEM, BUKAN TAMBALAN PER-ELEMEN. Tiga nada saja:
     KANVAS  --nd-s3  (#E6E8EC)  bidang halaman; panggung video & bayangannya
                                 mendarat di sini, bukan di atas putih
     LEMBAR  --nd-s1  (#FFFFFF)  kartu/panel yang MENGAMBANG di atas kanvas
     SUMUR   --nd-s2  (#F1F2F5)  ubin/chip/kartu YANG DITANAM di dalam lembar
   Hover selalu satu langkah lebih gelap (--nd-s3/--nd-s4), aktif = --nd-accent.

   KENAPA KANVAS HARUS --nd-s3, BUKAN --nd-s0. Terukur: dengan --nd-s0
   (#F9F9FA) lembar-vs-kanvas cuma 1.05:1 — kartu berhenti jadi objek, dan
   ubin episode --nd-s2 cuma 1.06:1 dari kanvas sehingga kartunya ikut lenyap.
   --nd-s-sunken (#ECEDF0) tidak menolong: ubin-vs-kanvas malah 1.05:1.
   --nd-s3 memberi lembar-vs-kanvas 1.23:1 DAN ubin-vs-kanvas 1.10:1 — dua-duanya
   terbaca. Bonusnya: bayangan panggung video (0 22px 60px; selector-nya HARAM
   disentuh, jadi tidak pernah disebut di berkas ini) yang dulu menoreh lumpur
   abu-abu di atas kartu putih kini jatuh ke bidang yang memang segelap itu,
   jadi terbaca sebagai kedalaman, bukan kotoran.

   SEMUA DIKUNCI DI BAWAH PENJAGA [data-theme="light"] — tema gelap tidak
   tersentuh sama sekali (dibuktikan piksel: 0 beda di luar ubin episode aktif,
   yang justru memang harus diperbaiki di KEDUA tema; lihat blok di atas).
   Dua penjaga ditulis (`:root[...]` + `html[...]`) mengikuti konvensi
   nd-card.css: keduanya mengenai elemen yang sama, kembar ini disengaja.
   ============================================================ */

/* ---------- 1. KANVAS HALAMAN ----------
   nd-layout.css:19 `body{background:var(--base-bg)}` ber-specificity (0,0,1);
   aturan ini (0,4,1)/(0,3,2) jadi menang murni lewat cascade. Dikunci ke
   `.player-page-body` supaya HANYA halaman watch yang dapat bidang lebih dalam —
   halaman lain tidak punya kotak hitam pekat 549x976 di tengahnya. */
:root[data-theme="light"] body.nd-ui.player-page-body,
html[data-theme="light"] body.nd-ui.player-page-body {
  background: var(--nd-s3);
}

/* ---------- 2. LEMBAR PUTIH ----------
   `.desktop-movie-detail` IKUT di sini — itulah pelat hitam yang bikin judul
   film tak terbaca. Aturan asalnya my-movie-player.blade.php:1845 ber-(0,1,0),
   aturan ini (0,4,1): menang telak, dan tanpa menyentuh Blade sama sekali.
   `border:0` juga dicabut di sini: di terang bingkai #1D2434 jadi garis hitam
   14.9:1 di atas putih (di gelap ia 1.18:1 alias tak terlihat, makanya aman
   ditinggalkan apa adanya di sana). */
:root[data-theme="light"] body.nd-ui .desktop-sidebar-left,
:root[data-theme="light"] body.nd-ui .desktop-sidebar-right,
:root[data-theme="light"] body.nd-ui .side-card,
:root[data-theme="light"] body.nd-ui .player-seo-block,
:root[data-theme="light"] body.nd-ui .player-random-section,
html[data-theme="light"] body.nd-ui .desktop-sidebar-left,
html[data-theme="light"] body.nd-ui .desktop-sidebar-right,
html[data-theme="light"] body.nd-ui .side-card,
html[data-theme="light"] body.nd-ui .player-seo-block,
html[data-theme="light"] body.nd-ui .player-random-section {
  background: var(--nd-s1);
  border: 0;
  box-shadow: var(--nd-e2);
}

/* Panel info DIRATAKAN dengan kartunya (bukan lembar terpisah di dalam lembar),
   jadi tanpa bayangan sendiri: satu kartu = satu bidang. Begitu pelatnya putih,
   `--nd-t1` pada .desktop-title melonjak 1.06 → 18.06:1 dan `--nd-t3` pada
   .desktop-intro 3.20 → 5.99:1 TANPA satu pun aturan warna teks baru —
   memang tintanya tidak pernah salah, alasnya yang salah. */
:root[data-theme="light"] body.nd-ui .desktop-movie-detail,
html[data-theme="light"] body.nd-ui .desktop-movie-detail {
  background: var(--nd-s1);
  border: 0;
  color: var(--nd-t2);
}

/* ---------- 3. KEPALA SEKSI ("Episode" & "Drama Lainnya") ----------
   Satu-satunya elemen kolom kiri yang TERLEWAT total dari berkas ini, jadi
   `color:#fff` + `border-bottom:1px solid #1f2738` (blade:1853, specificity
   (0,1,0)) selamat utuh ke atas kartu putih: teksnya 1.00:1 (hilang) dan yang
   tersisa justru garisnya — 14.9:1, satu-satunya hal yang tergambar di pita itu.
   Garisnya dicabut juga karena redesign ini memang tanpa garis tepi; pemisah
   dikerjakan jarak + beda permukaan. Di gelap garis itu 1.22:1 (tak terlihat),
   jadi sengaja TIDAK diutak-atik di sana supaya nol regresi piksel. */
:root[data-theme="light"] body.nd-ui .side-head,
html[data-theme="light"] body.nd-ui .side-head {
  color: var(--nd-t1);
  border-bottom: 0;
}

/* ---------- 4. SLOT POSTER ----------
   blade:2125/1942/391 mematok #253049 untuk bidang poster dan #fff untuk
   inisialnya — buta tema, jadi di terang ia jadi pulau gelap di dalam kartu
   putih (13.1:1 lompatan permukaan). Dipindah ke token placeholder yang memang
   ada untuk ini (--nd-ph-bg).

   JEBAKAN YANG HAMPIR MELOLOS — PENJAGA `:not()` DI BAWAH ITU WAJIB, BUKAN
   HIASAN.
   Tiga selector pertama di bawah menamai elemen <img>. Begitu gambarnya GAGAL
   muat, penangan global di exoplayer-footer-scripts.blade.php:27 menukar <img>
   itu dengan `<div class="nd-img-fallback {kelas-asli}">` — jadi div penggantinya
   IKUT membawa kelas .desktop-cover / .player-random-poster / .related-poster.
   Div itu sudah punya perawatan sadar-tema sendiri di nd-card.css:451-474
   (gradien hue dari judul) DAN judul putih di dalamnya (.nd-fb-title,
   nd-card.css:494 `color:#fff`, (0,2,1) — di SPAN, jadi tak bisa diperbaiki
   lewat warisan dari induk). Tanpa `:not()`, aturan di bawah ini (0,4,1)
   mengalahkan aturan terang nd-card (0,3,1), gradiennya dibuang jadi #EDEEF1
   rata, dan judul putih itu mendarat di atasnya: TERUKUR DARI PIKSEL 731 piksel
   putih di bidang #EDEEF1 = 1.18:1 — persis jenis cacat yang blok ini dibuat
   untuk MEMBUNUH, cuma pindah tempat. `:not()` membuat aturan ini hanya berlaku
   saat slotnya masih <img> (belum/sedang muat), dan menyerahkan kasus gagal-muat
   ke pemiliknya yang memang sudah benar.

   `.related-poster` IKUT di sini. Di proposal awal ia satu-satunya dari tiga
   saudara yang terlewat, padahal `.related-grid` ber-`overflow:auto` dengan
   `loading="lazy"`: tiap kartu yang digulir masuk memamerkan #253049 dulu —
   enam pelat biru-tua di dalam rail putih, cacat yang sama dengan keluhan
   pemilik, hanya lebih kecil. */
:root[data-theme="light"] body.nd-ui .desktop-cover:not(.nd-img-fallback), /* nd-allow-ns: MENGECUALIKAN div penangan gambar-gagal global, bukan memakai namanya sebagai komponen baru */
:root[data-theme="light"] body.nd-ui .player-random-poster:not(.nd-img-fallback), /* nd-allow-ns */
:root[data-theme="light"] body.nd-ui .related-card-core .related-poster:not(.nd-img-fallback), /* nd-allow-ns */
:root[data-theme="light"] body.nd-ui .desktop-cover-fallback,
:root[data-theme="light"] body.nd-ui .player-random-fallback,
:root[data-theme="light"] body.nd-ui .related-card-core .related-fallback,
html[data-theme="light"] body.nd-ui .desktop-cover:not(.nd-img-fallback), /* nd-allow-ns */
html[data-theme="light"] body.nd-ui .player-random-poster:not(.nd-img-fallback), /* nd-allow-ns */
html[data-theme="light"] body.nd-ui .related-card-core .related-poster:not(.nd-img-fallback), /* nd-allow-ns */
html[data-theme="light"] body.nd-ui .desktop-cover-fallback,
html[data-theme="light"] body.nd-ui .player-random-fallback,
html[data-theme="light"] body.nd-ui .related-card-core .related-fallback {
  background: var(--nd-ph-bg);
}

/* Inisial di fallback SERVER (div, bukan <img>, jadi tidak pernah jadi
   nd-img-fallback) dipatok #fff oleh blade:2138/402 — di atas --nd-ph-bg itu
   1.07:1. Dipindah ke --nd-t3 supaya hurufnya TETAP terbaca (5.16:1, terukur),
   bukan jadi hantu. */
:root[data-theme="light"] body.nd-ui .desktop-cover-fallback,
:root[data-theme="light"] body.nd-ui .player-random-fallback,
html[data-theme="light"] body.nd-ui .desktop-cover-fallback,
html[data-theme="light"] body.nd-ui .player-random-fallback {
  color: var(--nd-t3);
}

/* JEBAKAN KOPLING: tanda putar di baris 197 adalah data-URI SVG dengan
   `stroke='%23fff'`. Begitu bidangnya jadi terang, glif putih itu lenyap.
   Dibalik pakai filter (bukan SVG kedua) supaya berkas ini tidak menambah satu
   pun angka warna baru — nd-tokens.css:7 melarang itu. HANYA untuk
   `.related-fallback` (fallback server): pasangan varian nd-img-fallback di
   baris 190 sengaja TIDAK dibalik, karena alasnya tetap gradien nd-card
   yang gelap-sedang — glif putih di atasnya memang sudah benar. Kalau WebView
   lawas tidak mengenal filter, yang hilang cuma ornamen; judul kartu tetap
   terbaca di atas scrim-nya. */
:root[data-theme="light"] body.nd-ui .related-card-core .related-fallback::before,
html[data-theme="light"] body.nd-ui .related-card-core .related-fallback::before {
  -webkit-filter: invert(1);
  filter: invert(1);
  opacity: .3;
}

/* ---------- 5. HOVER ----------
   Di gelap hover naik satu langkah (--nd-s2 → --nd-s3 = 1.15:1). Di terang
   langkah yang sama cuma 1.10:1 karena jarak antar-nada terang memang lebih
   rapat, jadi hover-nya turun satu langkah lebih jauh ke --nd-s4: 1.23:1,
   sebanding dengan yang gelap. */
:root[data-theme="light"] body.nd-ui .left-episode-item:hover,
:root[data-theme="light"] body.nd-ui .desktop-tag:hover,
html[data-theme="light"] body.nd-ui .left-episode-item:hover,
html[data-theme="light"] body.nd-ui .desktop-tag:hover {
  background: var(--nd-s4);
  color: var(--nd-t1);
}

/* ⚠ WAJIB SESUDAH aturan hover di atas, DAN wajib lebih spesifik darinya.
   Aturan hover terang itu ber-(0,5,1) — :root + [data-theme] + .nd-ui +
   .left-episode-item + :hover. Itu MENGALAHKAN `.left-episode-item.active:hover`
   tanpa penjaga tema di blok atas yang cuma (0,4,1). Akibatnya, tanpa aturan
   ini, di tema terang isian merah episode yang sedang diputar HILANG begitu
   kursor melewatinya: terukur dengan mouse sungguhan (:hover=true) jadi
   #DBDCE2 dengan tinta #15161B — tak bisa dibedakan dari ubin biasa, padahal
   grid episode justru elemen yang paling sering dilewati kursor. Di gelap tidak
   kejadian karena aturan hover terang tidak pernah cocok di sana — jadi ini
   cacat yang HANYA muncul di tema baru, gampang lolos kalau cuma dihitung di
   atas kertas terhadap aturan yang LAMA.
   (0,6,1) / (0,5,2) di sini menang atas (0,5,1) / (0,4,2) di atas tanpa
   bergantung urutan berkas. */
:root[data-theme="light"] body.nd-ui .left-episode-item.active,
:root[data-theme="light"] body.nd-ui .left-episode-item.active:hover,
html[data-theme="light"] body.nd-ui .left-episode-item.active,
html[data-theme="light"] body.nd-ui .left-episode-item.active:hover {
  background: var(--nd-accent);
  color: var(--nd-t-on-accent);
}

/* ---------- 6. SCROLLBAR ----------
   blade:2177-2215 mematok rel #111827 / #101626 — di dalam kartu putih itu
   selokan hitam 17.7:1, dan pada serial 500 episode bar-nya memang tergambar.
   HANYA tiga wadah milik chrome yang disebut di sini; grup selector asal juga
   memuat `.info-intro` dan `.ep-list` yang hidup DI DALAM panggung pemutar —
   itu wilayah haram, sengaja tidak ikut. */
:root[data-theme="light"] body.nd-ui .left-episodes,
:root[data-theme="light"] body.nd-ui .related-grid,
:root[data-theme="light"] body.nd-ui .desktop-intro,
html[data-theme="light"] body.nd-ui .left-episodes,
html[data-theme="light"] body.nd-ui .related-grid,
html[data-theme="light"] body.nd-ui .desktop-intro {
  scrollbar-color: var(--nd-t4) var(--nd-s1);
}
:root[data-theme="light"] body.nd-ui .left-episodes::-webkit-scrollbar-track,
:root[data-theme="light"] body.nd-ui .related-grid::-webkit-scrollbar-track,
:root[data-theme="light"] body.nd-ui .desktop-intro::-webkit-scrollbar-track,
html[data-theme="light"] body.nd-ui .left-episodes::-webkit-scrollbar-track,
html[data-theme="light"] body.nd-ui .related-grid::-webkit-scrollbar-track,
html[data-theme="light"] body.nd-ui .desktop-intro::-webkit-scrollbar-track {
  background: var(--nd-s1);
}
:root[data-theme="light"] body.nd-ui .left-episodes::-webkit-scrollbar-thumb,
:root[data-theme="light"] body.nd-ui .related-grid::-webkit-scrollbar-thumb,
:root[data-theme="light"] body.nd-ui .desktop-intro::-webkit-scrollbar-thumb,
html[data-theme="light"] body.nd-ui .left-episodes::-webkit-scrollbar-thumb,
html[data-theme="light"] body.nd-ui .related-grid::-webkit-scrollbar-thumb,
html[data-theme="light"] body.nd-ui .desktop-intro::-webkit-scrollbar-thumb {
  background: var(--nd-t4);
  border: 2px solid var(--nd-s1);
}

/* ---------- 7. KARTU RAIL KANAN ----------
   `.related-item:hover .related-card-core` (blade:1935) ber-(0,3,0) dan
   MENGALAHKAN `body.nd-ui .related-card-core` (0,2,1) di baris 123: begitu
   kursor datang, elevasi token diganti `0 10px 20px rgba(0,0,0,.28)` — noda
   hitam di atas rail putih. Aturan ini (0,5,1) merebutnya balik. Warna bingkai
   #ff4d6d-nya sendiri sudah mati sejak `border:0`, terukur border-width 0px. */
:root[data-theme="light"] body.nd-ui .related-item:hover .related-card-core,
:root[data-theme="light"] body.nd-ui .related-item.is-preview-open .related-card-core,
:root[data-theme="light"] body.nd-ui .related-item:focus-visible .related-card-core,
html[data-theme="light"] body.nd-ui .related-item:hover .related-card-core,
html[data-theme="light"] body.nd-ui .related-item.is-preview-open .related-card-core,
html[data-theme="light"] body.nd-ui .related-item:focus-visible .related-card-core {
  box-shadow: var(--nd-e2);
}

/* ---------- 8. SEKSI "DRAMA LAINNYA" DI BAWAH ----------
   Keluhan pemilik nomor dua: 20 batang hitam melintang di halaman putih.
   Kartunya #121A2A dengan bingkai #2A3347 (blade:377, (0,1,0)) dan TIDAK
   pernah disentuh berkas nd-* mana pun. Di terang jadi --nd-s2: sumur di
   dalam lembar putih, senada dengan ubin episode dan `.related-card-core`.

   BINGKAINYA SENGAJA HANYA DICABUT DI TERANG. Di gelap kartu-vs-panel cuma
   1.05:1 — garis 1px itulah SATU-SATUNYA yang memisahkan kartu dari panel.
   Mencabutnya tanpa penjaga = tema gelap kehilangan seluruh tepi kartunya,
   dan itu melanggar syarat "gelap tidak boleh berubah". */
:root[data-theme="light"] body.nd-ui .player-random-item,
html[data-theme="light"] body.nd-ui .player-random-item {
  background: var(--nd-s2);
  color: var(--nd-t2);
  border: 0;
}
:root[data-theme="light"] body.nd-ui .player-random-item:hover,
html[data-theme="light"] body.nd-ui .player-random-item:hover {
  background: var(--nd-s3);
  box-shadow: var(--nd-e2);
}
:root[data-theme="light"] body.nd-ui .player-random-name,
html[data-theme="light"] body.nd-ui .player-random-name {
  color: var(--nd-t1);
}

/* ---------- 9. PLACEHOLDER "Memuat..." / "tidak ada drama lain" ----------
   Ini teks PERTAMA yang dilihat setiap pengunjung: kedua grid dirender server
   hanya berisi baris ini, isinya baru datang lewat AJAX. Warnanya #9ca7c2
   ditulis di ATRIBUT style inline (blade:3191 & :3226 + dua partial yang
   disuntik lewat innerHTML), jadi selector apa pun kalah — 2.41:1 di terang.

   Dipakai `-webkit-text-fill-color`, BUKAN penanda prioritas-paksa: properti
   inilah yang benar-benar mengecat isi glif di WebKit/Blink, dan ia mendahului
   `color` karena BEDA PROPERTI — bukan karena specificity. Terukur dari piksel
   2.41 → 5.99:1. Kalau mesin tidak mengenalnya, yang berlaku `color` inline
   lama: pucat, tapi tidak pernah hilang. */
:root[data-theme="light"] body.nd-ui .related-grid > div[style],
:root[data-theme="light"] body.nd-ui .player-random-grid > div[style],
html[data-theme="light"] body.nd-ui .related-grid > div[style],
html[data-theme="light"] body.nd-ui .player-random-grid > div[style] {
  -webkit-text-fill-color: var(--nd-t3);
}