/* ============================================================
   LK21 - gaya khas situs film.

   Ditulis sendiri, bukan turunan stylesheet situs anime. Bedanya bukan cuma
   warna: kerapatan grid, bentuk kartu, kepala bagian, dan sudut lengkungnya
   memang disusun untuk katalog film - poster tegak berjajar rapat, lencana
   mutu dan nilai di atas poster, sudut yang lebih tegas.
   ============================================================ */

/* Palet Rebahin: cyan ke teal di atas dasar biru-hijau gelap.
   Sengaja dijauhkan dari situs induk yang merah sinema, supaya keduanya tidak
   terlihat kembar walau kodenya sama. */
:root{
  /* Palet merah-magenta dengan aksen emas.
     Sengaja dibedakan dari situs film lain yang memakai kode sama supaya
     ketiganya tidak terlihat seperti satu situs yang diganti namanya. */
  --bg:#10050b; --bg2:#1b0813; --card:#240d1a; --card2:#321322;
  --line:#46192d; --line2:#61223c;
  --tx:#fdeef3; --tx2:#d5a6b6; --tx3:#a67c8c;
  --acc:#e11d62; --acc2:#f5b301; --gold:#f5c518;
  /* teks di atas --acc (merah, gelap) putih; di atas --acc2 (emas, terang) gelap */
  --atas-acc:#ffffff; --atas-acc2:#2a1206;
  --ok:#22c55e; --hot:#ff6b6b;
  --r:6px; --r2:10px; --wrap:1280px;
  --sh:0 8px 26px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);
  font:15px/1.6 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.25;font-weight:700;letter-spacing:-.2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--acc);color:#fff;padding:9px 14px;border-radius:var(--r)}

/* ---------- kepala ---------- */
.hdr{position:sticky;top:0;z-index:50;
  background:linear-gradient(95deg,#9d0f3f 0%,var(--acc) 55%,#f0366f 100%);
  border-bottom:0;box-shadow:0 2px 14px rgba(0,0,0,.45)}
.hdr .logo-t,.hdr .nav > a,.hdr .drop > button{color:#fff}
.hdr .nav > a:hover,.hdr .drop > button:hover{background:rgba(255,255,255,.16);color:#fff}
.hdr .nav > a.on,.hdr .drop.on > button{background:rgba(255,255,255,.22);color:#fff}
.hdr .srch{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28)}
.hdr .srch input{color:#fff}
.hdr .srch input::placeholder{color:rgba(255,255,255,.72)}
.hdr .srch button{background:rgba(0,0,0,.22)}
.hdr .srch button:hover{background:rgba(0,0,0,.38)}

/* Strip kategori: pintasan genre, tahun, dan peringkat.
   Menggulir mendatar di layar sempit supaya tidak membungkus jadi dua baris. */
.strip{background:linear-gradient(95deg,var(--acc2) 0%,#ffd233 60%,var(--acc2) 100%);
  border-bottom:1px solid rgba(0,0,0,.18)}
.strip-in{display:flex;gap:2px;align-items:center;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.strip-in::-webkit-scrollbar{display:none}
.strip a{flex:0 0 auto;padding:9px 12px;font-size:12.5px;font-weight:700;
  letter-spacing:.4px;text-transform:uppercase;color:var(--atas-acc2);white-space:nowrap}
.strip a:hover{background:rgba(0,0,0,.14);color:#000}
@media(max-width:640px){
  .strip a{padding:8px 10px;font-size:11.5px}
}
.hdr-in{display:flex;align-items:center;gap:14px;height:60px}
.logo{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.logo-t{font-size:21px;font-weight:900;letter-spacing:.5px}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:4px}
.burger span{display:block;width:20px;height:2px;background:var(--tx)}
.nav{display:flex;align-items:center;gap:2px;flex:1 1 auto;min-width:0}
.nav > a,.drop > button{display:block;padding:8px 12px;font-size:14px;font-weight:600;
  color:var(--tx2);background:none;border:0;cursor:pointer;font-family:inherit;border-radius:var(--r);white-space:nowrap}
.nav > a:hover,.drop > button:hover{color:var(--tx);background:var(--card)}
.nav > a.on{color:#fff;background:var(--acc)}
.drop{position:relative}
.drop-m{display:none;position:absolute;left:0;top:100%;margin-top:6px;min-width:430px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  padding:10px;grid-template-columns:repeat(3,1fr);gap:2px;box-shadow:var(--sh)}
.drop:hover .drop-m,.drop:focus-within .drop-m{display:grid}
.drop-m a{padding:7px 10px;font-size:13px;color:var(--tx2);border-radius:var(--r)}
.drop-m a:hover{background:var(--card2);color:var(--tx)}
.srch{display:flex;align-items:center;flex:0 1 260px;background:var(--bg2);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.srch input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--tx);padding:9px 12px;font:inherit;font-size:13.5px}
.srch input::placeholder{color:var(--tx3)}
.srch button{background:var(--acc);border:0;color:#fff;padding:0 14px;height:36px;cursor:pointer;display:grid;place-items:center}

/* ---------- remah roti ---------- */
.bread{padding:14px 0 2px}
.bread ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;font-size:12.5px;color:var(--tx3)}
.bread li+li:before{content:"›";margin-right:6px;color:var(--line2)}
.bread a{color:var(--tx2)}

/* ---------- sorotan atas ---------- */
.hero{position:relative;padding:18px 16px 6px}
.hero-bg{position:absolute;left:0;right:0;top:0;bottom:-40px;z-index:0;overflow:hidden;pointer-events:none}
.hero-bg i{position:absolute;inset:-60px;display:block;background-size:cover;background-position:center 20%;
  filter:blur(30px) saturate(1.15);opacity:.34;transform:scale(1.12)}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,8,10,.3) 0%,rgba(8,8,10,.86) 62%,var(--bg) 100%)}
/* Jangan pakai `.hero > *`: .hero-bg juga anak langsung, jadi aturan itu
   menimpa position:absolute miliknya dan latar kabur berubah jadi kotak biasa
   setinggi 400px yang mendorong seluruh isi halaman ke bawah. */
.hero > .sec-h,.hero > .hero-row{position:relative;z-index:1}
.hero-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(168px,1fr);
  gap:12px;overflow-x:auto;padding:4px 0 14px;scroll-snap-type:x mandatory}
.hero-row::-webkit-scrollbar{height:6px}
.hero-row::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px}
.hero-c{position:relative;scroll-snap-align:start;border-radius:var(--r2);overflow:hidden;
  border:1px solid var(--line);background:var(--card)}
/* Kartu sorotan memakai poster tegak 2:3, bentuk yang sama dengan kartu di
   daftar bawah. Sebelumnya kartunya melebar 16:9 dan diisi backdrop; posternya
   ikut terpakai sebagai cadangan, dan poster tegak yang dipaksa masuk kotak
   melebar itulah yang terlihat gepeng. */
.hero-c img{width:100%;aspect-ratio:2/3;height:auto;object-fit:cover;display:block}
.hero-c .hc{position:absolute;left:0;right:0;bottom:0;padding:26px 11px 10px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.9))}
.hero-c h3{font-size:12.5px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hero-c .hc > span{display:block;font-size:11.5px;color:var(--tx2);margin-top:2px}

/* ---------- kepala bagian: tab merah, bukan garis kiri ---------- */
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:26px 0 13px}
.sec-h h1,.sec-h h2{font-size:18px;position:relative;padding-bottom:9px}
.sec-h h1:after,.sec-h h2:after{content:"";position:absolute;left:0;bottom:0;width:38px;height:3px;
  background:var(--acc);border-radius:2px}
.more{font-size:12.5px;font-weight:600;color:var(--acc2);white-space:nowrap}
.more:hover{color:var(--tx)}
section{padding-top:2px}

/* ---------- tata letak dua kolom ---------- */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;align-items:start;padding-bottom:40px}
.side{display:grid;gap:16px;position:sticky;top:76px}

/* ---------- grid poster: rapat, khas katalog film ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px 12px}
.card{background:none}
.card .thumb{position:relative;border-radius:var(--r2);overflow:hidden;background:var(--card);
  border:1px solid var(--line);transition:border-color .15s,transform .15s}
.card a:hover .thumb{border-color:var(--acc);transform:translateY(-3px)}
.card .thumb img{width:100%;aspect-ratio:2/3;object-fit:cover}
.card .thumb:after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;z-index:1;
  pointer-events:none;background:linear-gradient(180deg,transparent,rgba(0,0,0,.72))}
.card .b{position:absolute;font-size:10.5px;font-weight:800;padding:3px 7px;border-radius:4px;letter-spacing:.3px}
.card .b-t{left:6px;top:6px;background:var(--acc);color:#fff;text-transform:uppercase}
.card .b-s{right:6px;top:6px;background:rgba(8,8,10,.85);color:var(--gold)}
.card .b-e{left:6px;bottom:6px;background:rgba(8,8,10,.85);color:#fff}
.card .pk{display:block;position:relative}
/* Dua tombol di atas poster. Selalu terlihat - di layar sentuh tidak ada
   keadaan "sedang disentuh" sebelum diketuk, jadi menyembunyikannya di balik
   :hover membuat tombolnya mustahil ditemukan di ponsel. */
.card .act{position:absolute;left:8px;right:8px;bottom:8px;z-index:2;
  display:grid;gap:5px;pointer-events:none}
.card .act a{pointer-events:auto;display:block;text-align:center;font-size:11px;font-weight:800;
  letter-spacing:.4px;text-transform:uppercase;padding:6px 8px;border-radius:5px;
  box-shadow:0 3px 10px rgba(0,0,0,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .act .tr{background:#0f9d63;color:#fff}
.card .act .tr:hover{background:#12b874}
.card .act .nt{background:var(--acc);color:#fff}
.card .act .nt:hover{background:var(--acc2);color:var(--atas-acc2)}
.card .meta{padding:8px 2px 0}
.card .meta h3{font-size:13px;font-weight:600;line-height:1.35;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.card .meta h3 a:hover{color:var(--acc2)}
.card .meta p{margin:3px 0 0;font-size:11.5px;color:var(--tx3)}

/* ---------- daftar mendatar ringkas ---------- */
.rel{display:grid;gap:2px}
.rel > a{display:flex;gap:12px;padding:10px 8px;border-radius:var(--r2);border:1px solid transparent}
.rel > a:hover{background:var(--card);border-color:var(--line)}
.rel img{width:52px;height:74px;object-fit:cover;border-radius:var(--r);flex:0 0 auto}
.rel .i{min-width:0}
.rel .i h3{font-size:13.5px;font-weight:600}
.rel .i p{margin:3px 0 0;font-size:11.5px;color:var(--tx3)}

/* ---------- kotak samping ---------- */
.box{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:15px}
.box > h3{font-size:14px;margin-bottom:12px;padding-bottom:9px;border-bottom:1px solid var(--line);position:relative}
.box > h3:after{content:"";position:absolute;left:0;bottom:-1px;width:30px;height:2px;background:var(--acc)}
.rank{display:grid;gap:1px}
.rank a{display:flex;align-items:center;gap:10px;padding:7px 4px;border-radius:var(--r)}
.rank a:hover{background:var(--card2)}
.rank .n{font-size:15px;font-weight:900;color:var(--line2);min-width:20px;text-align:center}
.rank a:hover .n{color:var(--acc)}
.rank img{width:38px;height:54px;object-fit:cover;border-radius:4px;flex:0 0 auto}
.rank h4{font-size:12.5px;font-weight:600;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rank a > span:last-child > span{display:block;font-size:11px;color:var(--tx3);margin-top:2px}

/* ---------- label ---------- */
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-block;background:var(--card2);border:1px solid var(--line);color:var(--tx2);
  font-size:12px;padding:5px 10px;border-radius:var(--r)}
a.tag:hover{border-color:var(--acc);color:var(--tx)}

/* ---------- halaman detail film ---------- */
.dtl{display:grid;grid-template-columns:230px minmax(0,1fr);gap:26px;padding:20px 0 6px}
.dtl > div:first-child .poster img{width:100%;border-radius:var(--r2);border:1px solid var(--line)}
.dtl h1{font-size:clamp(21px,3.2vw,30px)}
.alt{color:var(--tx3);font-size:13px;margin:5px 0 12px}
.scorebig{display:flex;align-items:center;gap:12px;margin:16px 0;padding:13px 15px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r2)}
.scorebig .v{font-size:27px;font-weight:900;color:var(--gold);line-height:1}
.scorebig b{font-size:13px}
.scorebig small{color:var(--tx3);font-size:11.5px}
.info{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;margin-top:14px}
.info > div{background:var(--card);padding:10px 13px}
.info b{display:block;font-size:11px;font-weight:600;color:var(--tx3);text-transform:uppercase;letter-spacing:.5px}
.info span{display:block;font-size:13.5px;margin-top:3px}
.syn{padding:20px 0 4px}
.syn h2{font-size:17px;margin-bottom:10px}
.syn p{color:var(--tx2);font-size:14.5px}

/* ---------- pemutar ---------- */
.player{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--r2);
  overflow:hidden;border:1px solid var(--line);margin:14px 0}
.player iframe,.player video{width:100%;height:100%;border:0;display:block}
.ph{height:100%;display:grid;place-content:center;justify-items:center;gap:8px;text-align:center;padding:24px;color:var(--tx3)}
.ph p{margin:0;font-size:13.5px}
.srv{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.srv button{background:var(--card);border:1px solid var(--line);color:var(--tx2);
  font:inherit;font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:var(--r);cursor:pointer}
.srv button:hover{border-color:var(--acc2);color:var(--tx)}
.srv button.on{background:var(--acc);border-color:var(--acc);color:#fff}
.epnav{display:flex;flex-wrap:wrap;gap:9px;margin:4px 0 8px}

/* ---------- unduhan ---------- */
.dl{display:grid;gap:9px}
.dl .row{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding:11px 13px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r2)}
.dl .q{background:var(--acc);color:#fff;font-size:11px;font-weight:800;padding:3px 9px;border-radius:4px}
.dl .row a{font-size:13px;color:var(--tx2);border-bottom:1px dashed var(--line2)}
.dl .row a:hover{color:var(--acc2)}

/* ---------- indeks abjad ---------- */
.az{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:18px}
.az a{min-width:34px;text-align:center;padding:7px 9px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);font-size:13px;font-weight:600;color:var(--tx2)}
.az a:hover{border-color:var(--acc)}
.az a.on{background:var(--acc);border-color:var(--acc);color:#fff}

/* ---------- tombol ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:var(--r);
  background:var(--card);border:1px solid var(--line);color:var(--tx);font-size:13.5px;font-weight:600}
.btn:hover{border-color:var(--acc)}
.btn-p{background:var(--acc);border-color:var(--acc);color:#fff}
.btn-p:hover{background:var(--acc2);border-color:var(--acc2);color:var(--atas-acc2)}

/* ---------- paginasi ---------- */
.pg{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:26px 0 6px}
.pg a,.pg span{padding:8px 13px;border-radius:var(--r);font-size:13px;font-weight:600;
  background:var(--card);border:1px solid var(--line);color:var(--tx2)}
.pg a:hover{border-color:var(--acc);color:var(--tx)}
.pg .on{background:var(--acc);border-color:var(--acc);color:#fff}

/* ---------- prosa & FAQ ---------- */
.prose{padding:22px 0;color:var(--tx2);font-size:14.5px}
.prose h2{font-size:18px;color:var(--tx);margin:20px 0 9px}
.prose h3{font-size:15.5px;color:var(--tx);margin:18px 0 7px}
.prose p{margin:0 0 11px}
.prose a{color:var(--acc2);border-bottom:1px dashed var(--line2)}
.prose ol,.prose ul{margin:0 0 11px;padding-left:20px;line-height:1.8}
.faq details{border:1px solid var(--line);border-radius:var(--r2);padding:11px 14px;margin-bottom:8px;background:var(--bg2)}
.faq summary{cursor:pointer;font-size:13.5px;font-weight:600}
.faq p{margin:9px 0 0;font-size:13.5px;color:var(--tx2)}

/* ---------- keadaan kosong ---------- */
.empty{text-align:center;padding:44px 20px;background:var(--card);
  border:1px dashed var(--line2);border-radius:var(--r2);color:var(--tx3)}
.empty h2{color:var(--tx)}
.note{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--acc);
  border-radius:var(--r);padding:12px 15px;font-size:13.5px;color:var(--tx2);margin:14px 0}

/* ---------- kaki ---------- */
.ftr{background:var(--bg2);border-top:1px solid var(--line);margin-top:34px;padding:34px 0 0}
.ftr-in{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:26px;padding-bottom:26px}
.ftr h4{font-size:13px;margin-bottom:11px;color:var(--tx)}
.ftr a{display:block;font-size:13px;color:var(--tx3);padding:3px 0}
.ftr a:hover{color:var(--acc2)}
.ftr > .wrap > div > p,.ftr-in > div > p{color:var(--tx3);font-size:13px;margin:9px 0 0}
.copy{border-top:1px solid var(--line);padding:15px 16px;text-align:center;color:var(--tx3);font-size:12px}
.copy p{margin:3px 0}
.totop{position:fixed;right:16px;bottom:16px;width:42px;height:42px;border-radius:var(--r2);
  background:var(--acc);color:#fff;border:0;cursor:pointer;font-size:19px;display:none;z-index:40}
.totop.on{display:block}

/* ---------- layar kecil ---------- */
@media(max-width:1180px){
  .cols{grid-template-columns:minmax(0,1fr) 280px;gap:20px}
}
@media(max-width:980px){
  .cols{grid-template-columns:1fr;gap:8px}
  .side{position:static;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
  .ftr-in{grid-template-columns:1fr 1fr}
  .drop-m{min-width:320px;grid-template-columns:repeat(2,1fr)}
}
/* Dulu 760px. Menu mendatarnya butuh lebih dari itu, sehingga antara 761px
   dan ~980px bilahnya meluap ke samping dan menyeret halaman ikut melebar.
   Titik alih dinaikkan dari 760px ke 980px. */
@media(max-width:980px){
  .hdr-in{height:auto;padding:10px 0;flex-wrap:wrap;row-gap:10px}
  .logo{order:1}
  .burger{order:0}
  .srch{order:2;flex:1 1 100%}
  .sec-h{margin:20px 0 11px}
  .sec-h h1,.sec-h h2{font-size:16px}
  .hero{padding:12px 14px 4px}
  .hero-bg{bottom:-20px}
  .scorebig{padding:11px 13px}
  .scorebig .v{font-size:23px}
  .info{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .dtl h1{font-size:19px}
  .burger{display:flex}
  .nav{display:none;position:absolute;left:0;right:0;top:60px;flex-direction:column;align-items:stretch;
    background:var(--card);border-bottom:1px solid var(--line);padding:8px;gap:1px;max-height:70vh;overflow:auto}
  .nav.on{display:flex}
  .drop-m{position:static;min-width:0;grid-template-columns:repeat(2,1fr);box-shadow:none;background:var(--bg2);margin-top:4px}
  .drop:hover .drop-m{display:none}
  .drop.on .drop-m{display:grid}
  .srch{flex:1 1 auto}
  .dtl{grid-template-columns:130px minmax(0,1fr);gap:16px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px 9px}
  .ftr-in{grid-template-columns:1fr}
  .hero-row{grid-auto-columns:minmax(140px,1fr)}
}

@media(max-width:430px){
  .card .act{left:5px;right:5px;bottom:5px;gap:4px}
  .card .act a{font-size:9.5px;padding:5px 4px;letter-spacing:.2px}
  .grid{grid-template-columns:repeat(2,1fr);gap:11px 8px}
  .hero-row{grid-auto-columns:minmax(118px,1fr)}
  .dtl{grid-template-columns:100px minmax(0,1fr);gap:12px}
  .info{grid-template-columns:1fr}
  .az a{min-width:30px;padding:6px 7px;font-size:12px}
  .pg a,.pg span{padding:7px 10px}
}

/* ---------- baris negara di kaki halaman ---------- */
.ftr-neg{padding:6px 16px 22px;border-bottom:1px solid var(--line);margin-bottom:26px}
.ftr-neg h4{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--tx);
  margin:0 0 12px;padding-bottom:8px;position:relative}
.ftr-neg h4:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--acc) 0 44px,var(--line) 44px)}
.ftr-neg .tag{background:var(--card2);font-weight:600;font-size:11.5px;padding:6px 12px}
.ftr-neg .tag:hover{background:var(--acc);border-color:var(--acc);color:#fff}

/* ---------- blok tentang yang lebih berisi ---------- */
.tentang{padding:26px 0 6px}
.tentang h2{font-size:13px;text-transform:uppercase;letter-spacing:1px;margin:0 0 14px;
  padding-bottom:8px;position:relative}
.tentang h2:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--acc) 0 56px,var(--line) 56px)}
.tentang p{margin:0 0 12px;color:var(--tx2);font-size:14px;line-height:1.75}
.tentang a{color:var(--acc2);font-weight:600}
.tentang a:hover{color:var(--tx);text-decoration:underline}
.tentang b{color:var(--tx)}

/* ===================================================================
   Sorotan beranda (rebahin.id)

   Berbeda dari situs anime: katalog film menyimpan gambar lanskap asli
   dari TMDB, jadi latarnya memakai backdrop sungguhan, bukan poster yang
   diburamkan. Tingginya dipatok, bukan aspect-ratio, supaya tidak
   menyisakan ruang kosong pada layar lebar.
   =================================================================== */
/* =====================================================================
   Panel sorotan sinematik.

   Selebar layar penuh, bukan kotak di dalam kolom - gambar lanskap TMDB
   dipakai sebagai latar dan teksnya duduk di atasnya. Lebarnya memakai
   width:100%, SENGAJA bukan 100vw: 100vw menghitung batang gulir sebagai
   bagian dari lebar, sehingga memunculkan gulir mendatar di layar yang
   batang gulirnya memakan tempat.
   ===================================================================== */
.sorot{position:relative;width:100%;margin:0 0 20px}
.sorot-bingkai{position:relative;width:100%;overflow:hidden;background:var(--bg2);
  height:clamp(330px,42vw,520px)}
.sorot-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s ease}
.sorot-slide.aktif{opacity:1;visibility:visible}

.sorot-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 18%;display:block}
/* Tirai bertingkat: gelap pekat di kiri-bawah tempat teks duduk, memudar ke
   kanan-atas supaya gambarnya tetap terlihat. */
.sorot-tirai{position:absolute;inset:0;
  background:
    linear-gradient(to top, rgba(6,9,12,.96) 0%, rgba(6,9,12,.72) 28%, rgba(6,9,12,.12) 62%, transparent 100%),
    linear-gradient(to right, rgba(6,9,12,.92) 0%, rgba(6,9,12,.55) 38%, transparent 72%)}

.sorot-isi{position:relative;z-index:2;height:100%;max-width:var(--wrap);
  margin:0 auto;padding:0 clamp(16px,3vw,34px) clamp(46px,5vw,58px);
  display:flex;align-items:flex-end}
.sorot-teks{max-width:640px;min-width:0}

.sorot-jenis{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:1px;
  text-transform:uppercase;background:var(--acc);color:var(--atas-acc);
  padding:4px 10px;border-radius:4px;margin-bottom:12px}
.sorot-teks h2{font-size:clamp(26px,4.4vw,52px);line-height:1.06;margin:0 0 12px;
  letter-spacing:-1px;font-weight:800;
  text-shadow:0 3px 18px rgba(0,0,0,.65)}
.sorot-teks h2 a{color:#fff}
.sorot-teks h2 a:hover{color:var(--acc)}

.sorot-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  margin:0 0 12px;font-size:13px;color:rgba(255,255,255,.82)}
.sorot-meta b{color:var(--warn);font-weight:700}
.sorot-meta > span{position:relative;padding-left:14px}
.sorot-meta > span:before{content:"";position:absolute;left:4px;top:50%;
  width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.45);transform:translateY(-50%)}
.sorot-tanda{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.6px;
  border:1px solid var(--ok);color:var(--ok);padding:2px 8px;border-radius:4px}

.sorot-ket{color:rgba(255,255,255,.76);font-size:14px;line-height:1.6;
  margin:0 0 18px;max-width:58ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.sorot-tonton{display:inline-flex;align-items:center;gap:9px;
  background:var(--acc);color:var(--atas-acc);border:0;
  padding:12px 26px;border-radius:999px;font-size:14.5px;font-weight:700;
  box-shadow:0 8px 24px rgba(0,0,0,.45);transition:.16s}
.sorot-tonton:hover{filter:brightness(1.1);color:var(--atas-acc);transform:translateY(-1px)}
.sorot-tonton .ply{font-size:12px;line-height:1}

/* titik dan panah duduk di dalam lebar isi, bukan menempel tepi layar */
.sorot-titik{position:absolute;z-index:4;display:flex;gap:7px;flex-wrap:wrap;
  left:50%;transform:translateX(-50%);bottom:20px;
  width:min(var(--wrap),100%);padding:0 clamp(16px,3vw,34px);justify-content:flex-start}
.sorot-titik button{width:8px;height:8px;padding:0;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.34);transition:.2s}
.sorot-titik button.aktif{width:26px;border-radius:5px;background:var(--acc)}
.sorot-kendali{position:absolute;z-index:4;right:clamp(16px,3vw,34px);bottom:16px;
  display:flex;gap:8px}
.sorot-panah{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.22);
  background:rgba(8,12,16,.6);color:#fff;cursor:pointer;display:grid;place-items:center;
  font-size:14px;line-height:1;backdrop-filter:blur(6px);transition:.15s}
.sorot-panah:hover{background:var(--acc);color:var(--atas-acc);border-color:transparent}

@media(max-width:900px){
  .sorot-bingkai{height:clamp(320px,58vw,420px)}
  .sorot-teks h2{font-size:clamp(22px,5.2vw,34px)}
  .sorot-ket{font-size:13px;max-width:none}
}
@media(max-width:560px){
  .sorot-bingkai{height:auto;min-height:340px}
  .sorot-slide{position:relative;display:none;min-height:340px}
  .sorot-slide.aktif{display:block}
  .sorot-isi{padding:0 16px 54px;align-items:flex-end}
  .sorot-teks h2{font-size:24px;letter-spacing:-.5px}
  .sorot-meta{font-size:12px;gap:6px 10px}
  .sorot-ket{font-size:12.5px;-webkit-line-clamp:3;margin-bottom:14px}
  .sorot-tonton{padding:10px 20px;font-size:13.5px}
  .sorot-titik{bottom:16px;padding:0 16px}
  .sorot-kendali{display:none}   /* di layar sentuh, titik sudah cukup */
}
@media(max-width:400px){
  .sorot-bingkai,.sorot-slide{min-height:310px}
  .sorot-teks h2{font-size:21px}
  .sorot-meta > span:nth-child(n+4){display:none}
}

/* tautan "Semua" di kepala rel sisi kanan */
.box > h3 .rank-semua{margin-left:auto;font-size:11.5px;font-weight:600;white-space:nowrap}


/* Bagian "Tentang" - ringkas berkolom.
   Dulu berupa lima paragraf panjang yang memakan layar tanpa banyak menolong
   pembaca. Sekarang cukup satu paragraf pengantar, lalu tautan yang memang
   dicari orang: jelajah utama, genre, dan tahun rilis. */
.tentang-kolom{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:22px 26px;margin:18px 0 16px}
.tentang-kolom h3{font-size:12px;text-transform:uppercase;letter-spacing:.9px;
  margin:0 0 10px;color:var(--tx)}
.tentang-kolom ul{list-style:none;margin:0;padding:0}
.tentang-kolom li{margin:0 0 7px}
.tentang-kolom a{font-size:13.5px;font-weight:500;color:var(--tx2)}
.tentang-kolom a:hover{color:var(--acc)}
.tentang-kaki{font-size:12.5px;color:var(--tx3);margin:0;line-height:1.7}
.tentang-kaki a{font-weight:500}
@media(max-width:560px){
  .tentang-kolom{gap:18px;margin:16px 0 14px}
  .tentang-kolom a{font-size:13px}
}


/* ---------- popup trailer ---------- */
.tr-latar{position:fixed;inset:0;z-index:200;background:rgba(3,8,10,.86);
  backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:18px}
.tr-latar[hidden]{display:none}
.tr-kotak{width:100%;max-width:900px;background:var(--bg2);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.tr-atas{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line)}
.tr-atas b{font-size:14px;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-tutup{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  background:transparent;color:var(--tx2);font-size:20px;line-height:1;cursor:pointer;transition:.15s}
.tr-tutup:hover{background:var(--acc);border-color:transparent;color:var(--atas-acc)}
.tr-layar{aspect-ratio:16/9;background:#000;display:grid;place-items:center}
.tr-layar iframe{width:100%;height:100%;border:0;display:block}
.tr-layar p{color:var(--tx3);font-size:13.5px;margin:0;padding:18px;text-align:center}
.tr-layar p a{color:var(--acc);font-weight:600}
@media(max-width:560px){
  .tr-latar{padding:12px}
  .tr-kotak{border-radius:10px}
  .tr-atas b{font-size:13px}
}


/* ---------- halaman film di layar sempit ----------
   Dulu poster dipaksa jadi kolom selebar 100px dan seluruh tabel info
   dijejalkan ke kolom kanan yang tersisa, jadi halamannya memanjang ke bawah
   dengan tulisan sempit. Di sini tata letaknya disusun ulang, bukan diperas:
   poster berdampingan dengan tombol tonton, lalu judul, nilai, dan tabel info
   memakai lebar halaman penuh. */
.dtl-tonton{width:100%;justify-content:center;margin-top:12px}

@media(max-width:560px){
  /* Dua pembungkus di dalam .dtl dibongkar dengan display:contents supaya
     isinya jadi sel kisi langsung. Dengan begitu poster bisa duduk di kiri
     sementara judul, genre, dan nilai menumpuk di kanannya - tanpa mengubah
     susunan HTML, dan tanpa menyisakan ruang kosong di samping poster. */
  /* Poster membentang empat baris dan biasanya lebih tinggi daripada isi
     kolom kanan. Tanpa patokan, sisa tingginya dibagi rata ke keempat baris
     sehingga muncul jarak menganga antara judul dan genre. Baris 1-3 dipatok
     setinggi isinya dan baris terakhir menyerap sisanya, jadi ruang kosongnya
     jatuh di bawah - sejajar dengan ujung poster. */
  .dtl{grid-template-columns:118px minmax(0,1fr);grid-template-rows:auto auto auto 1fr;
       gap:9px 13px;align-items:start;padding:14px 0 4px}
  .dtl > div{display:contents}
  /* Barisnya dipatok satu per satu, tidak diserahkan ke penempatan otomatis.
     Begitu ada elemen selebar penuh (tombol tonton), penempatan otomatis tidak
     bisa mundur ke baris di atasnya - akibatnya judul terlempar ke bawah tombol
     pada film yang sudah punya video. Baris eksplisit membuat susunannya sama
     saja, ada tombol maupun tidak. Baris yang isinya kosong menyusut sendiri. */
  .dtl .poster{grid-column:1;grid-row:1 / span 4;align-self:start}
  .dtl h1{grid-column:2;grid-row:1}
  .dtl .alt{grid-column:2;grid-row:2}
  .dtl .tags{grid-column:2;grid-row:3}
  .dtl .scorebig{grid-column:2;grid-row:4}
  .dtl h1{font-size:17px;line-height:1.3;margin:0}
  .dtl .alt{margin:0}
  .dtl .tags{gap:5px}
  .dtl .tag{font-size:11px;padding:4px 8px}
  .dtl .scorebig{padding:9px 11px;align-self:start}
  .dtl .scorebig .v{font-size:20px}
  /* tombol dan tabel info memakai lebar penuh, di bawah blok poster */
  .dtl-tonton{grid-column:1 / -1;grid-row:5;width:100%;margin-top:4px}
  .dtl .info{grid-column:1 / -1;grid-row:6;grid-template-columns:repeat(2,minmax(0,1fr))}
  .info > div{padding:9px 11px}
  .info span{font-size:13px}
}
@media(max-width:360px){
  .dtl{grid-template-columns:104px minmax(0,1fr);gap:8px 11px}
  .dtl .info{grid-template-columns:minmax(0,1fr)}
}

/* Keping keterangan yang sengaja TIDAK ditautkan - lihat views/film.php.
   Bentuknya sama dengan .tag supaya sebaris rapi, tapi tanpa perilaku tautan. */
.tag.mati{cursor:default;opacity:.85}
.tag.mati:hover{background:inherit;border-color:inherit;color:inherit}

/* Tag merek - teks biasa, sengaja BUKAN tautan. Lihat tag_merek_film(). */
.tagmerek{display:flex;flex-wrap:wrap;gap:6px}
/* white-space:nowrap SENGAJA TIDAK dipakai: judul film bisa sangat panjang,
   dan satu pil yang tidak boleh patah memaksa seluruh halaman melebar di
   ponsel. Tag dibiarkan patah baris, dengan lebar dibatasi lebar induknya. */
.tagmerek .tm{display:inline-block;font-size:11.5px;line-height:1.45;
  padding:4px 9px;border-radius:99px;background:var(--card2);
  color:var(--tx2);border:1px solid var(--line);
  max-width:100%;overflow-wrap:anywhere}
.tagsec{margin-top:22px}