/* =========================================================
   home.css — beranda
   Memakai variabel warna dari style.css, jadi kedua halaman
   tetap satu rasa.
   ========================================================= */

.home { background: var(--bg); }

/* ---------- bilah atas ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center;
  padding: 14px 28px;
  /* Gradien, bukan warna padat: di puncak halaman bilah ini
     menyatu dengan gambar sorotan di belakangnya. */
  background: linear-gradient(to bottom, rgba(11,13,18,.95), rgba(11,13,18,0));
  backdrop-filter: blur(6px);
}
.brand {
  font-weight: 900; font-size: 20px; letter-spacing: -0.02em;
  color: var(--text); text-decoration: none;
}
.brand span { color: var(--accent); }

/* ---------- sorotan ---------- */
.sorotan {
  position: relative;
  height: clamp(340px, 62vh, 560px);
  margin-top: -62px;            /* menyelip ke bawah bilah atas */
}

.slide {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease;
}
.slide.is-aktif { opacity: 1; visibility: visible; }

/* Latar slide. Sebuah <img> dan bukan background-image, supaya
   yang pertama bisa di-preload dan didahulukan browser — lihat
   catatan di home.ejs. object-fit meniru background-size: cover. */
.slide__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

/* Dua lapis gelap: dari bawah supaya teks terbaca, dan dari kiri
   supaya kolom teks tetap kontras di gambar yang terang. */
.slide::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top,   var(--bg) 2%, rgba(11,13,18,.35) 45%, transparent 75%),
    linear-gradient(to right, rgba(11,13,18,.85) 0%, transparent 60%);
}

.slide__isi {
  position: relative; z-index: 1;
  max-width: 620px; padding: 0 28px 52px;
}
.slide__logo  { max-width: 330px; max-height: 130px; object-fit: contain; }
.slide__judul { font-size: clamp(28px, 5vw, 46px); font-weight: 800; letter-spacing: -0.03em; }

.slide__meta {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 14px; font-size: 13.5px; color: var(--dim);
}
.nilai { color: #f5c518; font-weight: 700; }

.slide__tagline  { margin-top: 10px; font-style: italic; color: var(--dim); font-size: 14px; }
.slide__sinopsis {
  margin-top: 10px; font-size: 14.5px; color: #c6ccda; max-width: 56ch;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.tombol {
  display: inline-block; margin-top: 20px;
  padding: 11px 26px;
  background: var(--accent); color: #fff;
  border-radius: 8px; font-weight: 700; font-size: 14.5px; text-decoration: none;
  transition: transform .15s ease, filter .15s ease;
}
.tombol:hover { transform: translateY(-1px); filter: brightness(1.1); }

.titik { position: absolute; right: 28px; bottom: 24px; z-index: 2; display: flex; gap: 8px; }
.titik__btn {
  width: 8px; height: 8px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.32);
  transition: width .25s ease, background .25s ease;
}
.titik__btn.is-aktif { width: 26px; border-radius: 4px; background: var(--accent); }

/* ---------- baris kartu ---------- */
.daftar { padding: 12px 0 60px; }

.baris { margin-top: 34px; }
.baris__judul {
  margin: 0 28px 14px;
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
}

.baris__bungkus { position: relative; }

.rel {
  display: flex; gap: 12px;
  padding: 4px 28px 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  /* Bilah gulir disembunyikan; navigasinya lewat tombol panah. */
  scrollbar-width: none;
}
.rel::-webkit-scrollbar { display: none; }

.kartu {
  position: relative; flex: 0 0 auto;
  width: 158px;
  scroll-snap-align: start;
  text-decoration: none; color: inherit;
  transition: transform .18s ease;
}
.kartu:hover { transform: scale(1.05); z-index: 2; }

.kartu__poster {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
}
.kartu:hover .kartu__poster { border-color: rgba(255,45,75,.55); }

.kartu__nilai {
  position: absolute; top: 7px; right: 7px;
  padding: 2px 7px; border-radius: 6px;
  background: rgba(11,13,18,.82); color: #f5c518;
  font-size: 11.5px; font-weight: 700;
}

.kartu__kaki { padding: 8px 2px 0; }
.kartu__judul {
  display: block; font-size: 13px; font-weight: 600; line-height: 1.35;
  /* Judul panjang dipotong dua baris supaya tinggi kartu seragam
     dan barisnya tidak bergerigi. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kartu__meta { display: block; margin-top: 3px; font-size: 11.5px; color: var(--dim); }

/* ---------- tombol geser ---------- */
.geser {
  position: absolute; top: 0; bottom: 34px; z-index: 3;
  width: 46px; padding: 0;
  border: 0; cursor: pointer;
  color: #fff; font-size: 26px; line-height: 1;
  opacity: 0; transition: opacity .18s ease;
}
.geser--kiri  { left: 0;  background: linear-gradient(to right, var(--bg) 20%, transparent); }
.geser--kanan { right: 0; background: linear-gradient(to left,  var(--bg) 20%, transparent); }

/* Panah baru muncul saat kursor ada di barisnya — di layar sentuh
   tidak ada hover, dan di sana geser jari sudah cukup. */
.baris__bungkus:hover .geser { opacity: 1; }
.geser:disabled { opacity: 0 !important; cursor: default; }

.kaki {
  padding: 30px 28px 50px;
  border-top: 1px solid var(--border);
  color: var(--dim); font-size: 13px; max-width: 74ch;
}

@media (max-width: 640px) {
  .kartu       { width: 122px; }
  .slide__isi  { padding-bottom: 38px; }
  .slide__logo { max-width: 220px; max-height: 92px; }
  .geser       { display: none; }
  .rel         { padding-inline: 16px; }
  .baris__judul, .topbar, .kaki { padding-inline: 16px; margin-inline: 0; }
}

/* =========================================================
   KATALOG PER NETWORK (/network)
   Kartunya memakai kelas .kartu yang sama dengan beranda —
   yang berbeda cuma wadahnya: petak, bukan baris menggulir.
   ========================================================= */

.topbar--padat {
  gap: 26px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: none;
}

.tab { display: flex; gap: 4px; }
.tab__item {
  padding: 6px 14px; border-radius: 999px;
  color: var(--dim); text-decoration: none;
  font-size: 13.5px; font-weight: 600;
}
.tab__item:hover    { color: var(--text); background: var(--surface); }
.tab__item.is-aktif { color: #fff; background: var(--accent); }

.katalog { padding: 28px; }
.katalog__kepala { margin-bottom: 22px; }
.katalog__judul  { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.katalog__hitung { margin-top: 4px; color: var(--dim); font-size: 13.5px; }

/* auto-fill + minmax: jumlah kolom mengikuti lebar layar
   sendirinya, tanpa satu pun media query. */
.petak {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 22px 14px;
}
/* Di petak, kartu mengisi kolomnya — bukan lebar tetap seperti di baris. */
.petak .kartu { width: auto; }

/* ---------- paginasi ---------- */
.halaman {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px; margin-top: 40px;
}
.halaman__btn, .halaman__nomor {
  padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); text-decoration: none;
  font-size: 13.5px; font-weight: 600;
}
.halaman__btn:hover, .halaman__nomor:hover { border-color: var(--accent); }

.halaman__nomor.is-aktif {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
/* Tombol di ujung daftar tetap dirender supaya lebar barisnya
   tidak melompat saat berpindah halaman — hanya diredupkan. */
.halaman__btn.is-mati {
  opacity: .35; cursor: default;
}
.halaman__jeda { padding: 0 4px; color: var(--dim); }

@media (max-width: 640px) {
  .katalog { padding: 18px 16px; }
  .petak   { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 18px 10px; }
  .topbar--padat { flex-wrap: wrap; gap: 12px; }
}

/* Menu ditaruh di kiri, menempel logo — bukan didorong ke kanan.
   Mata membaca dari kiri, dan logo + menu jadi satu kelompok
   navigasi alih-alih terpisah di dua ujung bilah.

   Jaraknya diatur lewat gap pada .topbar, bukan margin pada .tab:
   .topbar--padat sudah punya gap sendiri, jadi margin tambahan
   akan membuat jaraknya dobel di halaman katalog. */
.topbar { gap: 26px; }

/* Layar sempit: menu turun ke baris kedua, penuh selebar bilah. */
@media (max-width: 860px) {
  .topbar { flex-wrap: wrap; gap: 12px 26px; }
  .topbar .tab { width: 100%; }
}

/* ---------- panel filter (/movies) ---------- */
.saring {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  margin-bottom: 26px; padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px;
}
.saring__grup { display: flex; flex-direction: column; gap: 5px; }
.saring__label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--dim);
}
.saring__pilih {
  min-width: 150px; padding: 8px 10px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 13.5px; font-family: inherit;
}
.saring__pilih:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.saring__btn {
  padding: 9px 20px;
  background: var(--accent); color: #fff;
  border: 0; border-radius: 8px; cursor: pointer;
  font-size: 13.5px; font-weight: 700; font-family: inherit;
}
.saring__btn:hover { filter: brightness(1.1); }

.saring__reset {
  padding: 9px 8px; color: var(--dim);
  text-decoration: none; font-size: 13.5px; font-weight: 600;
}
.saring__reset:hover { color: var(--text); }

@media (max-width: 640px) {
  .saring__grup  { flex: 1 1 140px; }
  .saring__pilih { min-width: 0; width: 100%; }
}

/* ---------- genre pada kartu ---------- */
.kartu__genre {
  display: block; margin-top: 2px;
  font-size: 11px; color: #6f7789;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* =========================================================
   HALAMAN JUDUL (/title)
   ========================================================= */

.sampul {
  position: relative;
  background-size: cover; background-position: center top;
  margin-top: -62px;              /* menyelip ke bawah bilah atas */
  padding: 96px 28px 40px;
}
/* Tanpa lapisan ini, teks putih di atas backdrop terang tidak terbaca. */
.sampul::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top,   var(--bg) 4%, rgba(11,13,18,.72) 55%, rgba(11,13,18,.55)),
    linear-gradient(to right, rgba(11,13,18,.9) 0%, rgba(11,13,18,.5) 70%);
}
.sampul__isi {
  position: relative; z-index: 1;
  display: flex; gap: 28px; align-items: flex-start;
  max-width: 1040px; margin: 0 auto;
}
.sampul__poster {
  flex: 0 0 190px; width: 190px; aspect-ratio: 2/3; object-fit: cover;
  border-radius: 12px; border: 1px solid var(--border);
  box-shadow: 0 16px 44px rgba(0,0,0,.6);
}
.sampul__teks  { flex: 1; min-width: 0; }
.sampul__judul { font-size: clamp(24px, 4vw, 38px); font-weight: 800; letter-spacing: -0.03em; }
.sampul__asli  { color: var(--dim); font-size: 14px; margin-top: 2px; }

.sampul__meta {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 12px; font-size: 13.5px; color: var(--dim);
}
.lencana {
  padding: 1px 8px; border-radius: 5px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); font-size: 12px; font-weight: 700;
}

.sampul__genre { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cip {
  padding: 3px 11px; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid var(--border);
  font-size: 12.5px;
}

.sampul__tagline  { margin-top: 14px; font-style: italic; color: var(--dim); font-size: 14px; }
.sampul__sinopsis { margin-top: 10px; font-size: 14.5px; color: #ccd2df; max-width: 68ch; }

.sampul__aksi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.tombol--samar {
  background: rgba(255,255,255,.1);
  border: 1px solid var(--border);
}
.tombol--samar:hover { background: rgba(255,255,255,.16); }

.sampul__kru { margin-top: 10px; font-size: 13.5px; color: #ccd2df; }
.sampul__kru span {
  display: inline-block; min-width: 82px;
  color: var(--dim); font-size: 11.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}

.isi { max-width: 1040px; margin: 0 auto; padding: 34px 28px 60px; }
.bagian { margin-top: 34px; }
.bagian__judul { font-size: 17px; font-weight: 700; margin-bottom: 14px; }

/* ---------- daftar episode ---------- */
.musim {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); margin-bottom: 10px;
}
.musim__kepala {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; cursor: pointer;
  font-weight: 700; font-size: 14.5px;
  list-style: none;
}
.musim__kepala::-webkit-details-marker { display: none; }
/* Segitiga sendiri: penanda bawaan <details> berbeda di tiap browser. */
.musim__kepala::before {
  content: "\25B8"; color: var(--dim);
  transition: transform .18s ease;
}
.musim[open] .musim__kepala::before { transform: rotate(90deg); }
.musim__jml { margin-left: auto; color: var(--dim); font-size: 12.5px; font-weight: 600; }

.episode { list-style: none; margin: 0; padding: 0 8px 8px; }
.episode__baris + .episode__baris { border-top: 1px solid var(--border); }

.episode__tautan {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 10px; border-radius: 8px;
  color: inherit; text-decoration: none;
}
.episode__tautan:hover { background: rgba(255,255,255,.05); }

.episode__nomor {
  flex: 0 0 30px; text-align: center;
  color: var(--dim); font-size: 15px; font-weight: 700;
}
.episode__teks { flex: 1; min-width: 0; }
.episode__judul { display: block; font-size: 14px; font-weight: 600; }
.episode__sinopsis {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 3px; font-size: 13px; color: var(--dim); line-height: 1.5;
}
.episode__meta {
  flex: 0 0 auto; text-align: right;
  font-size: 11.5px; color: var(--dim); line-height: 1.7;
}

/* ---------- pemeran ---------- */
.pemain {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 16px 12px;
}
.pemain__kartu { text-align: center; }
.pemain__foto {
  width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top;
  border-radius: 50%; border: 1px solid var(--border); background: var(--surface);
}
.pemain__foto--kosong { display: block; }
.pemain__nama  { display: block; margin-top: 8px; font-size: 12.5px; font-weight: 600; }
.pemain__peran { display: block; font-size: 11.5px; color: var(--dim); }

@media (max-width: 700px) {
  .sampul        { padding: 84px 16px 30px; }
  .sampul__isi   { flex-direction: column; gap: 18px; }
  .sampul__poster{ width: 132px; flex-basis: auto; }
  .isi           { padding: 26px 16px 50px; }
  .episode__meta { display: none; }
}

/* Baris meta kartu kini memuat jenis + tahun + jumlah episode.
   Kartunya sempit, jadi kelebihannya dipotong daripada
   membungkus ke baris kedua dan merusak tinggi kartu. */
.kartu__meta {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- tambahan halaman judul ---------- */

/* Judul tetap ada di DOM untuk pembaca layar walau yang terlihat
   logonya. display:none akan menyembunyikannya dari mereka juga,
   jadi dipakai teknik potong 1px ini. */
.khusus-pembaca {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sampul__logo {
  max-width: 320px; max-height: 116px;
  object-fit: contain; object-position: left bottom;
}

.galeri {
  display: flex; gap: 10px;
  overflow-x: auto; padding-bottom: 8px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.galeri__gambar {
  flex: 0 0 auto;
  width: 300px; aspect-ratio: 16/9; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface);
  scroll-snap-align: start;
}

.produksi { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.produksi__logo {
  max-height: 34px; max-width: 150px; object-fit: contain;
  /* Logo TMDB umumnya hitam di latar transparan — di tema gelap
     ia jadi tidak terlihat, jadi dibalik warnanya. */
  filter: invert(1) brightness(1.9);
  opacity: .8;
}
.produksi__logo:hover { opacity: 1; }

@media (max-width: 700px) {
  .sampul__logo    { max-width: 220px; max-height: 84px; }
  .galeri__gambar  { width: 240px; }
}

/* =========================================================
   MENU "LAINNYA"
   ========================================================= */
.lagi { position: relative; }

.lagi__tombol {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600;
  background: transparent;
}
.lagi__panah { font-size: 10px; transition: transform .18s ease; }
.lagi.is-buka .lagi__panah { transform: rotate(180deg); }

.lagi__menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40;
  min-width: 208px; padding: 8px;
  list-style: none; margin: 0;
  background: #1b202b;
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0,0,0,.6);
}
/* [hidden] kalah dari display:flex/block kalau tidak ditegaskan. */
.lagi__menu[hidden] { display: none; }

.lagi__tautan {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 8px;
  color: var(--text); text-decoration: none;
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
.lagi__tautan:hover, .lagi__tautan:focus-visible { background: rgba(255,255,255,.07); }
.lagi__tautan.is-aktif { color: var(--accent); }
.lagi__ikon { width: 18px; text-align: center; color: var(--dim); font-size: 14px; }
.lagi__tautan.is-aktif .lagi__ikon { color: var(--accent); }

/* Fokus keyboard harus terlihat — tanpa ini menu tidak bisa dipakai
   tanpa tetikus. */
.lagi__tautan:focus-visible,
.lagi__tombol:focus-visible,
.tab__item:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* =========================================================
   UBIN KATEGORI (/browse)
   ========================================================= */
.tab--baris { margin-bottom: 24px; flex-wrap: wrap; }

.ubin {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 10px;
}
.ubin__kotak {
  display: flex; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
  transition: border-color .16s ease, transform .16s ease;
}
.ubin__kotak:hover { border-color: rgba(255,45,75,.55); transform: translateY(-2px); }

.ubin__utama {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 13px 14px;
  color: inherit; text-decoration: none;
}
.ubin__nama {
  font-size: 14.5px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ubin__ket { font-size: 11.5px; color: var(--dim); }

/* Jalan pintas ke katalog serial dengan filter yang sama. */
.ubin__sisi {
  display: flex; align-items: center;
  padding: 0 13px;
  border-left: 1px solid var(--border);
  color: var(--dim); text-decoration: none;
  font-size: 11.5px; font-weight: 700;
}
.ubin__sisi:hover { background: rgba(255,255,255,.06); color: var(--text); }

@media (max-width: 640px) {
  .ubin { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  /* Menu tetap dibuka ke kanan dari tombolnya: sekarang tombol itu
     ada di kiri layar, jadi menempel tepi kanan justru salah arah. */
}

/* =========================================================
   FOOTER
   ========================================================= */

/* Catatan teknis khusus halaman, di atas footer utama. */
.kaki-catatan {
  max-width: 1180px; margin: 40px auto 0; padding: 0 28px;
  color: var(--dim); font-size: 13px; line-height: 1.6;
}
.kaki-catatan code {
  padding: 1px 5px; border-radius: 4px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 12px;
}

.kaki-besar {
  margin-top: 40px;
  background: #12161f;
  border-top: 1px solid var(--border);
}
.kaki-besar__isi {
  max-width: 1180px; margin: 0 auto; padding: 44px 28px 36px;
  display: grid; gap: 32px 26px;
  /* Kolom merek dapat porsi lebih besar karena isinya paragraf,
     bukan daftar tautan pendek. */
  grid-template-columns: 1.6fr repeat(4, 1fr);
}

.kaki-kolom--merek .brand { font-size: 19px; }
.kaki-teks {
  margin-top: 12px; max-width: 46ch;
  color: var(--dim); font-size: 13px; line-height: 1.65;
}
.kaki-teks a { color: var(--accent); text-decoration: none; }
.kaki-teks a:hover { text-decoration: underline; }

.kaki-judul {
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text);
}
.kaki-judul--jarak { margin-top: 22px; }

.kaki-daftar { list-style: none; margin: 12px 0 0; padding: 0; }
.kaki-daftar li { margin-bottom: 8px; }
.kaki-daftar a {
  color: var(--dim); text-decoration: none; font-size: 13px;
}
.kaki-daftar a:hover { color: var(--text); }

/* Genre dan negara jumlahnya banyak tapi namanya pendek —
   dua kolom membuat footer tidak terlalu jangkung. */
.kaki-daftar--dua {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
}

.kaki-bawah {
  border-top: 1px solid var(--border);
  padding: 20px 28px 34px;
  text-align: center;
  color: var(--dim); font-size: 13px;
}
.kaki-kecil { margin-top: 6px; font-size: 12px; opacity: .8; max-width: 74ch;
              margin-left: auto; margin-right: auto; line-height: 1.6; }

/* ---------- halaman Tentang ---------- */
.artikel { max-width: 70ch; margin-top: 18px; }
.artikel p  { margin-top: 12px; color: #ccd2df; font-size: 14.5px; line-height: 1.7; }
.artikel h2 {
  margin-top: 30px; font-size: 17px; font-weight: 700;
  letter-spacing: -0.01em;
}
.artikel ul { margin: 12px 0 0 20px; color: #ccd2df; font-size: 14.5px; line-height: 1.75; }
.artikel li { margin-bottom: 6px; }
.artikel a  { color: var(--accent); }

@media (max-width: 980px) {
  .kaki-besar__isi { grid-template-columns: repeat(2, 1fr); }
  .kaki-kolom--merek { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .kaki-besar__isi { grid-template-columns: 1fr; gap: 26px; padding: 34px 16px 28px; }
  .kaki-catatan    { padding: 0 16px; }
  .kaki-bawah      { padding: 18px 16px 30px; }
}

/* ---------- logo situs ---------- */
.brand {
  display: inline-flex; align-items: center;
  flex: 0 0 auto; line-height: 0;
}
.brand__logo {
  /* Tinggi yang dikunci, lebar mengikuti rasio. width/height pada
     tag <img> tetap ditulis supaya browser menyediakan ruangnya
     sebelum gambar selesai diunduh — tanpa itu isi halaman
     melompat saat logo muncul. */
  height: 30px; width: auto;
  display: block;
}
.brand--kaki .brand__logo { height: 34px; }

@media (max-width: 640px) {
  .brand__logo { height: 24px; }
}

/* ---------- sosial media di footer ---------- */
.sos { list-style: none; margin: 12px 0 0; padding: 0; }
.sos li { margin-bottom: 8px; }

.sos__tautan {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--dim); text-decoration: none; font-size: 13px;
}
.sos__tautan:hover { color: var(--text); }
.sos__tautan:hover .sos__svg { color: var(--accent); }

/* Ikon mewarisi warna teks lewat fill="currentColor", jadi
   cukup satu aturan untuk keadaan biasa dan saat disorot. */
.sos__svg { flex: 0 0 auto; transition: color .16s ease; }

.kaki-teks--kecil { font-size: 12.5px; margin-top: 12px; }

/* ---------- baris kontak di footer ---------- */
.kontak { list-style: none; margin: 12px 0 0; padding: 0; }
.kontak li + li { margin-top: 14px; }

.kontak__baris {
  display: flex; align-items: center; gap: 11px;
  color: var(--dim); text-decoration: none;
}
.kontak__baris:hover { color: var(--text); }
.kontak__baris:hover .sos__svg { color: var(--accent); }

.kontak__teks { display: flex; flex-direction: column; min-width: 0; }

/* Label kecil di atas nilainya: pembaca langsung tahu deretan
   angka itu WhatsApp, bukan nomor kantor atau kode apa pun. */
.kontak__label {
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #6f7789;
}
.kontak__nilai {
  font-size: 13px; word-break: break-all; line-height: 1.4;
}

/* Tautan telepon biasa — pilihan kedua, jadi dibuat lebih kecil
   dan menjorok sejajar dengan teks di atasnya. */
.kontak__lain {
  display: inline-block; margin: 3px 0 0 29px;
  color: #6f7789; text-decoration: none; font-size: 11.5px;
}
.kontak__lain:hover { color: var(--text); text-decoration: underline; }

.kaki-daftar--jarak { margin-top: 18px; }

/* =========================================================
   SOROTAN HALAMAN JUDUL (/title)
   Backdrop selebar layar, tombol putar di tengah, keterangan
   di kiri bawah — menggantikan sampul poster + teks lama.
   ========================================================= */

/* Bilah atas melayang di atas backdrop, tanpa garis pemisah. */
.topbar--tembus {
  background: linear-gradient(to bottom, rgba(11,13,18,.92), rgba(11,13,18,0));
  border-bottom: 0;
}

.hero {
  position: relative;
  min-height: clamp(460px, 76vh, 720px);
  margin-top: -62px;                 /* menyelip ke bawah bilah atas */
  background-size: cover;
  background-position: center 18%;
  display: flex; align-items: flex-end;
}

/* Dua lapis gelap: dari bawah agar teks terbaca, dari kiri agar
   kolom keterangan tetap kontras di gambar yang terang. */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top,   var(--bg) 3%, rgba(11,13,18,.55) 46%, rgba(11,13,18,.15) 80%),
    linear-gradient(to right, rgba(11,13,18,.88) 0%, rgba(11,13,18,.25) 62%, transparent);
}

/* ---------- tombol putar bulat ---------- */
.hero__putar {
  position: absolute; top: 46%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: grid; place-items: center;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--accent); color: #fff;
  box-shadow: 0 10px 34px rgba(255,45,75,.42);
  transition: transform .18s ease, box-shadow .18s ease;
}
.hero__putar:hover {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 14px 42px rgba(255,45,75,.6);
}
.hero__putar svg { margin-left: 4px; }   /* segitiga tampak di tengah */

/* ---------- keterangan ---------- */
.hero__isi {
  position: relative; z-index: 2;
  width: 100%; max-width: 1180px;
  margin: 0 auto; padding: 0 28px 52px;
}
.hero__logo  { max-width: 340px; max-height: 128px; object-fit: contain;
               object-position: left bottom; display: block; }
.hero__judul { font-size: clamp(30px, 5.4vw, 54px); font-weight: 800; letter-spacing: -0.03em; }

.hero__episode {
  margin-top: 12px;
  font-size: clamp(19px, 2.4vw, 27px); font-weight: 700; letter-spacing: -0.02em;
}
.hero__subjudul { margin-top: 3px; color: #c6ccda; font-size: 15px; }

.hero__meta {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 14px; font-size: 13.5px; color: var(--dim);
}
.hero__sinopsis {
  margin-top: 12px; max-width: 62ch;
  font-size: 14.5px; line-height: 1.65; color: #ccd2df;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hero__aksi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.hero__aksi .tombol { margin-top: 0; }

/* ---------- panel episode berikutnya ---------- */
.hero__lanjut {
  position: absolute; right: 0; bottom: 52px; z-index: 3;
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 22px 12px 18px;
  background: rgba(255,45,75,.92);
  border-radius: 10px 0 0 10px;
  color: #fff; text-decoration: none;
  max-width: 46vw;
  transition: padding-right .18s ease;
}
.hero__lanjut:hover { padding-right: 30px; }
.hero__lanjut-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; opacity: .85; text-align: right;
}
.hero__lanjut-judul {
  font-size: 13.5px; font-weight: 600; text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- musim yang belum ada episodenya ---------- */
.musim--kosong { opacity: .62; }
.musim--kosong .musim__kepala { cursor: default; }
.musim__kosong-teks {
  padding: 4px 16px 16px 40px;
  color: var(--dim); font-size: 13px;
}
.bagian__ket {
  margin-left: 10px;
  font-size: 12px; font-weight: 600; color: var(--dim);
}

@media (max-width: 700px) {
  .hero          { min-height: 78vh; background-position: center 12%; }
  .hero__isi     { padding: 0 16px 40px; }
  .hero__logo    { max-width: 220px; max-height: 88px; }
  .hero__putar   { width: 66px; height: 66px; top: 40%; }
  .hero__putar svg { width: 27px; height: 27px; }
  .hero__lanjut  { bottom: auto; top: 74px; max-width: 62vw; }
}

/* Genre di sorotan halaman judul. */
.hero__genre { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

/* Ringkasan musim yang belum disediakan penyedia — satu baris teks,
   bukan panel kosong yang bisa dibuka. */
.musim-kosong-ringkas {
  margin-top: 12px; padding: 11px 14px;
  border: 1px dashed var(--border); border-radius: 9px;
  color: var(--dim); font-size: 12.5px; line-height: 1.6;
}

/* =========================================================
   NAVIGASI DATAR (menggantikan dropdown "Lainnya")
   ========================================================= */
.tab { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }

.tab__item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px;
  color: var(--dim); text-decoration: none;
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
.tab__item:hover    { color: var(--text); background: rgba(255,255,255,.07); }
.tab__item.is-aktif { color: #fff; background: var(--accent); }

/* Ikon mewarisi warna teks lewat fill="currentColor", jadi tidak
   perlu versi terpisah untuk keadaan aktif dan biasa. */
.tab__item .sos__svg { width: 15px; height: 15px; opacity: .85; }
.tab__item.is-aktif .sos__svg { opacity: 1; }

@media (max-width: 1180px) {
  .tab__item        { padding: 7px 10px; gap: 6px; }
  .tab__item span   { font-size: 13px; }
}
/* Layar sempit: ikonnya saja, nama menu disembunyikan supaya
   kedelapan menu tetap muat dalam satu baris. */
@media (max-width: 900px) {
  .tab__item span      { display: none; }
  .tab__item           { padding: 9px; }
  .tab__item .sos__svg { width: 17px; height: 17px; }
}

/* Tombol cari di ujung bilah — hanya ikon, didorong ke kanan
   supaya terpisah dari deretan kategori. */
.tab__item--cari { margin-left: auto; padding: 9px; }
.tab__item--cari .sos__svg { width: 17px; height: 17px; }
@media (max-width: 900px) { .tab__item--cari { margin-left: 0; } }

/* ---------- kotak pencarian di halaman /cari ---------- */
.cari-form {
  display: flex; gap: 10px; margin-bottom: 26px;
  max-width: 620px;
}
.cari-form__input {
  flex: 1; min-width: 0;
  padding: 12px 16px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  font-size: 15px; font-family: inherit;
}
.cari-form__input::placeholder { color: #6f7789; }
.cari-form__input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,45,75,.18);
}
/* Silang bawaan input type=search di Chrome berwarna gelap dan
   nyaris tak terlihat di tema ini — dibalik warnanya. */
.cari-form__input::-webkit-search-cancel-button { filter: invert(.7); cursor: pointer; }

.cari-form__btn {
  padding: 12px 26px;
  background: var(--accent); color: #fff;
  border: 0; border-radius: 10px; cursor: pointer;
  font-size: 14.5px; font-weight: 700; font-family: inherit;
}
.cari-form__btn:hover { filter: brightness(1.1); }

@media (max-width: 560px) {
  .cari-form__btn { padding: 12px 18px; }
}