/* ===== Samehadaku.ca theme - merah delima di atas dasar anggur tua =====
   Sengaja berbeda dari samehadaku.de yang biru langit. Dua domain dengan kode
   yang sama harus bisa dibedakan sekali lihat, bukan cuma dari tulisan di
   kepala halaman. Palet lain yang sudah terpakai: ungu (oploverz), jingga
   (animeid), hijau (9anime). */
:root{
  /* TEMA TERANG. Tata letak masih dari iq.com/anime lewat bstation.id, tapi
     dasarnya dibalik jadi putih dengan aksen merah.
     PENTING buat yang menyunting nanti: berkas ini aslinya dirancang gelap,
     jadi tema terang menuntut lebih dari sekadar menukar --bg dan --tx.
     Yang ikut dibalik: seluruh lapisan rgba(255,255,255,...) yang dulu dipakai
     menerangkan latar gelap (sekarang rgba(0,0,0,...) supaya terlihat di atas
     putih), bayangan kotak, dan warna bilah kepala waktu digulir.
     Yang sengaja DIBIARKAN gelap: banner beranda beserta gradasinya, sebab
     tulisan di atasnya putih dan berdiri di atas gambar poster. */
  --bg:#ffffff; --bg2:#f7f4f1; --card:#ffffff; --card2:#f2ece7;
  --line:#e4ddd6; --tx:#171412; --tx2:#5d564f; --tx3:#8b837b;
  --acc:#e02a1b; --acc2:#ff7a5c; --warn:#b3801d; --ok:#1a9e4b; --hot:#e02a1b;
  --r:12px; --wrap:1240px;
  --shadow:0 6px 18px rgba(23,20,18,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);
  font:15px/1.65 "Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--acc)}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.25;font-weight:700}
h1{font-size:clamp(20px,3.4vw,29px)}
h2{font-size:clamp(17px,2.4vw,21px)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--acc);color:#03121c;padding:8px 14px;border-radius:8px}

/* ---- header ---- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.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-weight:800;font-size:19px;letter-spacing:-.4px}
.logo-t i{font-style:normal;color:var(--acc);font-weight:600}
.nav{display:flex;align-items:center;gap:2px;margin-left:6px;flex:1 1 auto}
.nav>a,.drop>button{display:block;padding:8px 11px;border-radius:8px;font-size:14px;
  font-weight:600;color:var(--tx2);background:none;border:0;cursor:pointer;font-family:inherit}
.nav>a:hover,.drop>button:hover,.nav>a.on{color:var(--tx);background:var(--card2)}
.drop{position:relative}
.drop-m{position:absolute;top:calc(100% + 8px);left:0;display:none;
  grid-template-columns:repeat(4,minmax(120px,1fr));gap:2px;padding:10px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);width:560px;max-height:60vh;overflow:auto}
.drop:hover .drop-m,.drop.open .drop-m{display:grid}
.drop-m a{font-size:13px;padding:6px 9px;border-radius:6px;color:var(--tx2)}
.drop-m a:hover{background:var(--card2);color:var(--acc)}
.srch{display:flex;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:3px 3px 3px 14px;flex:0 1 260px}
.srch input{background:none;border:0;color:var(--tx);outline:none;width:100%;font-size:14px;padding:6px 0}
.srch input::placeholder{color:var(--tx3)}
.srch button{background:linear-gradient(135deg,var(--acc),var(--acc2));border:0;color:#ffffff;
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.burger{display:none;background:none;border:0;cursor:pointer;padding:6px;flex-direction:column;gap:4px}
.burger span{width:20px;height:2px;background:var(--tx);display:block;border-radius:2px}

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

/* ---- section ---- */
section{padding:26px 0}
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.sec-h h2{margin:0;display:flex;align-items:center;gap:9px}
.sec-h h2:before{content:"";width:4px;height:19px;border-radius:3px;
  background:linear-gradient(180deg,var(--acc),var(--acc2))}
.more{font-size:13px;color:var(--acc);font-weight:600;white-space:nowrap}

/* ---- grid kartu ---- */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:.18s;position:relative}
.card:hover{transform:translateY(-4px);border-color:var(--acc);box-shadow:var(--shadow)}
.card .thumb{position:relative;aspect-ratio:2/3;overflow:hidden;background:var(--bg2)}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:.3s}
.card:hover .thumb img{transform:scale(1.05)}
.card .b{position:absolute;top:7px;font-size:10.5px;font-weight:700;padding:3px 7px;
  border-radius:6px;letter-spacing:.3px}
.card .b-t{left:7px;background:rgba(99,102,241,.92);color:#fff}
.card .b-s{right:7px;background:rgba(0,0,0,.72);color:var(--warn);display:flex;align-items:center;gap:3px}
.card .b-e{left:7px;bottom:7px;top:auto;background:rgba(244,63,94,.94);color:#fff}
.card .meta{padding:9px 10px 11px}
.card .meta h3{font-size:13.5px;margin:0 0 4px;font-weight:600;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.card .meta p{margin:0;font-size:11.5px;color:var(--tx3)}
.card .ov{position:absolute;inset:0;background:linear-gradient(0deg,rgba(23,20,18,.94),rgba(23,20,18,.25) 55%,transparent);
  opacity:0;transition:.2s;display:flex;align-items:flex-end;padding:11px;font-size:11.5px;color:var(--tx2)}
.card:hover .ov{opacity:1}

/* ---- hero slider ---- */
.hero{padding:22px 0 4px}
.hero-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.hero-row::-webkit-scrollbar{height:6px}
.hero-row::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
.hero-c{flex:0 0 178px;scroll-snap-align:start;position:relative;border-radius:var(--r);
  overflow:hidden;border:1px solid var(--line);background:var(--bg2)}
/* Kartu hero ikut bentuk poster tegak 2:3 seperti kartu daftar episode.
   Sumber gambar dari MAL memang portrait, jadi tidak ada yang dipotong
   maupun diregangkan. */
.hero-c img{width:100%;aspect-ratio:2/3;height:auto;object-fit:cover;display:block}
.hero-c .hc{position:absolute;inset:auto 0 0 0;padding:12px;
  background:linear-gradient(0deg,rgba(23,20,18,.96),transparent)}
.hero-c h3{font-size:13px;margin:0 0 3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero-c span{font-size:11px;color:var(--tx2)}

/* ---- layout 2 kolom ---- */
.cols{display:grid;grid-template-columns:1fr 312px;gap:26px;align-items:start}
.side{position:sticky;top:74px;display:grid;gap:20px}
.box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px}
.box>h3{font-size:15px;margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:8px}
.box>h3:before{content:"";width:3px;height:15px;border-radius:3px;background:var(--acc)}

/* ---- daftar peringkat ---- */
.rank{display:grid;gap:11px}
.rank a{display:flex;gap:11px;align-items:center}
.rank .n{flex:0 0 24px;font-weight:800;font-size:16px;color:var(--acc);text-align:center}
.rank img{width:44px;height:60px;object-fit:cover;border-radius:7px;flex:0 0 auto}
.rank h4{font-size:13px;margin:0 0 2px;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rank span{font-size:11px;color:var(--tx3)}

/* ---- rilis terbaru (list) ---- */
.rel{display:grid;gap:10px}
.rel a{display:flex;gap:12px;padding:9px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;transition:.15s}
.rel a:hover{border-color:var(--acc);background:var(--card2)}
.rel img{width:56px;height:78px;object-fit:cover;border-radius:8px;flex:0 0 auto}
.rel .i{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px}
.rel h3{font-size:14px;margin:0;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.rel p{margin:0;font-size:11.5px;color:var(--tx3)}
.tags{display:flex;flex-wrap:wrap;gap:5px}
.tag{font-size:10.5px;padding:2px 7px;border-radius:5px;background:var(--card2);
  color:var(--tx2);border:1px solid var(--line)}

/* ---- detail anime ---- */
.dtl{display:grid;grid-template-columns:230px 1fr;gap:24px;margin-top:18px}
.dtl .poster{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);position:relative}
.dtl .poster img{width:100%;aspect-ratio:2/3;object-fit:cover}
.dtl h1{margin-bottom:6px}
.alt{color:var(--tx3);font-size:13px;margin:0 0 14px}
.info{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:9px;margin:16px 0}
.info div{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:8px 11px}
.info b{display:block;font-size:11px;color:var(--tx3);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.info span{font-size:13.5px}
.scorebig{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:12px 16px;margin:14px 0}
.scorebig .v{font-size:30px;font-weight:800;color:var(--warn);line-height:1}
.scorebig small{color:var(--tx3);font-size:12px}
.syn{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:18px 0}
.syn p{margin:0;color:var(--tx2)}

/* ---- daftar episode ---- */
.eps{display:grid;gap:7px;max-height:620px;overflow:auto;padding-right:4px}
.eps a{display:flex;justify-content:space-between;gap:10px;align-items:center;
  padding:10px 13px;background:var(--card);border:1px solid var(--line);border-radius:9px;font-size:13.5px}
.eps a:hover{border-color:var(--acc);background:var(--card2)}
.eps .en{font-weight:700;color:var(--acc);flex:0 0 auto}
.eps .et{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx2)}
.eps .ed{font-size:11px;color:var(--tx3);flex:0 0 auto}

/* ---- player ---- */
.player{background:#000;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  aspect-ratio:16/9;position:relative}
.player iframe,.player video{width:100%;height:100%;border:0;display:block}
.ph{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:9px;
  background:radial-gradient(circle at 50% 40%,#16243a,#080d14);padding:20px}
.ph svg{margin:0 auto;opacity:.5}
.ph p{margin:0;color:var(--tx2);font-size:13.5px;max-width:440px}
.ph .k{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--card2);
  padding:2px 7px;border-radius:5px;color:var(--acc);font-size:12.5px}
.srv{display:flex;flex-wrap:wrap;gap:7px;margin:13px 0}
.srv button{background:var(--card);border:1px solid var(--line);color:var(--tx2);padding:7px 14px;
  border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;font-family:inherit;transition:.15s}
.srv button:hover{border-color:var(--acc);color:var(--tx)}
.srv button.on{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#ffffff;border-color:transparent}
.epnav{display:flex;gap:9px;flex-wrap:wrap;margin:15px 0}
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:9px;font-size:13.5px;
  font-weight:600;background:var(--card);border:1px solid var(--line);color:var(--tx2)}
.btn:hover{border-color:var(--acc);color:var(--tx)}
.btn-p{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#ffffff;border-color:transparent}
.btn-p:hover{color:#ffffff;filter:brightness(1.08)}
.dl{display:grid;gap:9px}
.dl .row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 13px;
  background:var(--card);border:1px solid var(--line);border-radius:9px}
.dl .q{font-weight:700;font-size:12.5px;color:var(--acc);min-width:62px}
.dl a{font-size:12.5px;padding:3px 10px;background:var(--card2);border:1px solid var(--line);border-radius:6px}

/* ---- jadwal ---- */
.days{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:20px}
.days a{padding:8px 15px;border-radius:9px;background:var(--card);border:1px solid var(--line);
  font-size:13.5px;font-weight:600;color:var(--tx2)}
.days a.on{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#ffffff;border-color:transparent}

/* ---- A-Z ---- */
.az{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:18px}
.az a{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;background:var(--card);
  border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--tx2)}
.az a.on,.az a:hover{background:var(--acc);color:#ffffff;border-color:transparent}
.azlist{columns:4 180px;column-gap:18px}
.azlist a{display:block;padding:5px 0;font-size:13.5px;color:var(--tx2);break-inside:avoid}

/* ---- pagination ---- */
.pg{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:28px 0 6px}
.pg a,.pg span{min-width:38px;height:38px;display:grid;place-items:center;padding:0 12px;
  border-radius:9px;background:var(--card);border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--tx2)}
.pg .on{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#ffffff;border-color:transparent}
.pg a:hover{border-color:var(--acc);color:var(--tx)}

/* ---- artikel / faq ---- */
.prose{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin:22px 0}
.prose h2,.prose h3{margin-top:1.1em}
.prose p,.prose li{color:var(--tx2);font-size:14px}
.faq details{border-bottom:1px solid var(--line);padding:11px 0}
.faq details:last-child{border:0}
.faq summary{cursor:pointer;font-weight:600;font-size:14px;list-style:none;display:flex;justify-content:space-between;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--acc);font-weight:800}
.faq details[open] summary:after{content:"−"}
.faq p{margin:9px 0 0;color:var(--tx2);font-size:13.5px}
.note{background:rgba(224,42,27,.07);border:1px solid rgba(224,42,27,.28);border-radius:var(--r);
  padding:13px 16px;font-size:13.5px;color:var(--tx2);margin:16px 0}
.empty{text-align:center;padding:56px 18px;color:var(--tx3)}

/* ---- footer ---- */
.ftr{background:var(--bg2);border-top:1px solid var(--line);margin-top:40px;padding:34px 0 0}
.ftr-neg{padding:0 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}
.ftr-in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:26px}
.ftr-in h4{font-size:14px;margin:0 0 11px}
.ftr-in a{display:block;font-size:13px;color:var(--tx3);padding:3px 0}
.ftr-in p{font-size:13px;color:var(--tx3);margin:8px 0 0;max-width:340px}
.copy{border-top:1px solid var(--line);margin-top:26px;padding:16px;text-align:center}
.copy p{margin:2px 0;font-size:12px;color:var(--tx3)}
.totop{position:fixed;right:16px;bottom:16px;width:42px;height:42px;border-radius:50%;border:0;
  background:linear-gradient(135deg,var(--acc),var(--acc2));color:#ffffff;font-size:18px;cursor:pointer;
  display:none;place-items:center;z-index:40;box-shadow:var(--shadow)}
.totop.show{display:grid}

@media(max-width:1000px){
  .cols{grid-template-columns:1fr}
  .side{position:static}
  .nav{position:fixed;inset:60px 0 auto 0;flex-direction:column;align-items:stretch;background:var(--bg2);
    border-bottom:1px solid var(--line);padding:10px;display:none;max-height:calc(100vh - 60px);overflow:auto}
  .nav.open{display:flex}
  .burger{display:flex}
  .drop-m{position:static;width:auto;grid-template-columns:repeat(3,1fr);box-shadow:none;margin-top:6px}
  .drop:hover .drop-m{display:none}
  .drop.open .drop-m{display:grid}
  .ftr-in{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:640px){
  .dtl{grid-template-columns:1fr}
  .dtl .poster{max-width:190px;margin:0 auto}
  .grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px}
  .srch{flex-basis:auto;width:100%;order:3}
  .hdr-in{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:10px;gap:10px}
  .ftr-in{grid-template-columns:1fr}
  .azlist{columns:2 140px}
}


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

/* Logo kepala halaman dibaca dari /assets/img/logo.png. Tingginya dipatok dan
   lebarnya ikut, jadi berkas pengganti dengan rasio apa pun tetap utuh.
   object-fit:cover sengaja TIDAK dipakai - logo memanjang akan terpangkas. */
.logo-i{height:44px;width:auto;max-width:240px;object-fit:contain;flex:0 0 auto;display:block}
@media(max-width:520px){ .logo-i{height:34px;max-width:170px} }

/* ===================================================================
   Sorotan beranda (dipakai bersama otakudesu.today)

   Katalog hanya menyimpan poster tegak 2:3, tidak ada gambar lanskap.
   Supaya panelnya tetap terasa lebar, poster yang sama dipakai dua kali:
   satu diperbesar dan diburamkan sebagai latar, satu lagi tampil tajam
   sebagai kartu di depan.

   Tingginya dipatok, bukan memakai aspect-ratio. Rasio 21:9 pada lebar
   1240px menghasilkan panel setinggi ~530px yang isinya cuma sebaris teks,
   jadi sebagian besar panel jadi ruang kosong.
   =================================================================== */
.sorot{position:relative;margin:16px auto 8px;max-width:var(--wrap);padding:0 16px}
.sorot-bingkai{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  background:var(--bg2);height:clamp(250px,26vw,310px)}
.sorot-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s ease}
.sorot-slide.aktif{opacity:1;visibility:visible}

/* latar: poster yang sama, diperbesar dan diburamkan */
.sorot-latar{position:absolute;inset:0;overflow:hidden}
.sorot-latar img{width:100%;height:100%;object-fit:cover;transform:scale(1.3);
  filter:blur(30px) saturate(1.3) brightness(.5)}
.sorot-latar:after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(23,20,18,.97) 0%,rgba(23,20,18,.9) 34%,rgba(23,20,18,.5) 62%,rgba(23,20,18,.66) 100%)}

/* Isi ditata sebagai satu blok yang tidak melebar mengikuti panel.
   Poster dirapatkan ke teks supaya tidak ada jurang kosong di tengah. */
.sorot-isi{position:relative;height:100%;display:flex;align-items:center;gap:26px;
  padding:24px 30px;z-index:2}
.sorot-teks{flex:1 1 auto;min-width:0;max-width:540px}
.sorot-lencana{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;
  padding:4px 12px;border-radius:999px;background:rgba(var(--acc-rgb,244,63,94),.16);
  color:var(--acc);border:1px solid rgba(var(--acc-rgb,244,63,94),.4);margin-bottom:10px}
.sorot-lencana:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc);
  animation:sorot-denyut 2s infinite}
@keyframes sorot-denyut{
  0%{box-shadow:0 0 0 0 rgba(var(--acc-rgb,244,63,94),.6)}
  70%{box-shadow:0 0 0 8px rgba(var(--acc-rgb,244,63,94),0)}
  100%{box-shadow:0 0 0 0 rgba(var(--acc-rgb,244,63,94),0)}
}
.sorot-teks h2{font-size:clamp(20px,2.6vw,30px);line-height:1.18;margin:0 0 6px;letter-spacing:-.4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sorot-teks h2 a{color:#fff}
.sorot-ket{color:var(--tx2);font-size:13px;margin:0 0 10px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.sorot-data{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;font-size:11.5px;color:var(--tx3)}
.sorot-data span{background:rgba(23,20,18,.05);border:1px solid var(--line);
  padding:3px 9px;border-radius:7px;white-space:nowrap}
.sorot-tombol{display:flex;gap:9px;flex-wrap:wrap}
.sorot-tombol a{display:inline-flex;align-items:center;gap:7px;padding:9px 20px;border-radius:999px;
  font-size:13.5px;font-weight:600;transition:.15s}
.sorot-tonton{background:var(--acc);color:#f7f4f1;border:1px solid var(--acc)}
.sorot-tonton:hover{filter:brightness(1.12);color:#f7f4f1}
.sorot-detail{background:rgba(23,20,18,.06);color:var(--tx);border:1px solid var(--line)}
.sorot-detail:hover{background:rgba(23,20,18,.12);color:#fff}

/* Poster tajam, didorong ke tepi kanan panel.
   Tanpa margin-left:auto poster menempel tepat di belakang blok teks dan
   menyisakan ruang kosong selebar ratusan piksel di sisi kanan. */
.sorot-poster{flex:0 0 auto;margin-left:auto;height:84%;aspect-ratio:2/3;
  border-radius:12px;overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12)}
.sorot-poster img{width:100%;height:100%;object-fit:cover;display:block}

/* Kendali dikumpulkan di pojok kanan bawah.
   Sebelumnya panah menempel di tepi kiri-kanan dan menimpa teks subjudul. */
.sorot-kendali{position:absolute;right:18px;bottom:14px;z-index:4;display:flex;align-items:center;gap:8px}
.sorot-panah{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);
  background:rgba(23,20,18,.72);color:#fff;cursor:pointer;display:grid;place-items:center;
  font-size:14px;line-height:1;transition:.15s}
.sorot-panah:hover{background:var(--acc);color:#f7f4f1;border-color:transparent}
.sorot-titik{position:absolute;left:30px;bottom:20px;z-index:4;display:flex;gap:6px;flex-wrap:wrap}
.sorot-titik button{width:7px;height:7px;padding:0;border-radius:50%;border:0;cursor:pointer;
  background:rgba(23,20,18,.24);transition:.2s}
.sorot-titik button.aktif{width:22px;border-radius:5px;background:var(--acc)}

/* ---------- layar sedang ---------- */
@media(max-width:900px){
  .sorot-bingkai{height:auto;min-height:0}
  .sorot-slide{position:relative;display:none}
  .sorot-slide.aktif{display:block}
  .sorot-isi{gap:18px;padding:20px 20px 52px}
  .sorot-poster{height:auto;width:104px;margin-left:auto}
  .sorot-teks{max-width:none}
  .sorot-titik{left:20px;bottom:18px}
  .sorot-kendali{right:16px;bottom:14px}
}

/* ---------- ponsel ---------- */
@media(max-width:560px){
  .sorot{padding:0 12px;margin-top:12px}
  .sorot-bingkai{border-radius:13px}
  /* poster pindah ke atas teks supaya judul tidak terhimpit */
  .sorot-isi{flex-direction:row;align-items:flex-start;gap:14px;padding:16px 16px 48px}
  .sorot-poster{width:84px;border-radius:9px;margin-left:auto}
  /* cukup tiga keterangan supaya tidak menambah tinggi panel */
  .sorot-data span:nth-child(n+4){display:none}
  .sorot-teks h2{font-size:17px;-webkit-line-clamp:2}
  .sorot-ket{font-size:12px;-webkit-line-clamp:2;margin-bottom:8px}
  .sorot-data{gap:5px;margin-bottom:12px;font-size:11px}
  /* di layar sempit cukup tampilkan skor dan status */
  .sorot-data span:nth-child(n+4){display:none}
  .sorot-tombol a{padding:8px 16px;font-size:13px}
  .sorot-titik{left:16px;bottom:16px}
  .sorot-titik button.aktif{width:18px}
  .sorot-kendali{right:12px;bottom:12px;gap:6px}
  .sorot-panah{width:29px;height:29px;font-size:13px}
}


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

/* judul bagian di atas panel bergilir */
.sorot-judul{margin:0 0 12px;padding:0}


/* ======================= gaya iq.com (2026-09-23) =======================
   Beranda: header transparan di atas banner, banner besar bergilir, lalu
   baris poster yang digeser ke samping. Palet di :root sudah ikut iq.com,
   jadi halaman lain ikut bernuansa sama walau tata letaknya tidak diubah. */

/* header transparan khusus beranda; jadi padat setelah digulir (app.js) */
body.beranda .hdr{position:fixed;left:0;right:0;background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,0));
  border-bottom:0;backdrop-filter:none;transition:background .25s}
body.beranda .hdr.padat{background:rgba(255,255,255,.97);backdrop-filter:blur(8px)}
body.beranda .nav>a,body.beranda .drop>button{color:rgba(255,255,255,.82)}
.nav>a:hover,.drop>button:hover,.nav>a.on{color:#fff;background:transparent}
.nav>a:hover{color:var(--acc)}
.srch input{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.14)}

/* ---- banner ---- */
.iq-hero{position:relative;background:#000;overflow:hidden}
.iq-hero-in{position:relative;height:clamp(460px,48vw,640px)}
.iq-hero .sorot-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s}
.iq-hero .sorot-slide.aktif{opacity:1;visibility:visible}
.iq-hero-bg{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);max-width:none;
  object-fit:cover;filter:blur(28px) saturate(1.25) brightness(.55);transform:scale(1.05)}
.iq-hero-pos{position:absolute;right:max(6vw,calc((100vw - var(--wrap))/2 + 60px));bottom:64px;
  height:calc(100% - 150px);width:auto;max-width:none;aspect-ratio:225/320;object-fit:cover;border-radius:10px;
  box-shadow:0 24px 60px rgba(0,0,0,.6)}
.iq-hero .sorot-slide::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(18,10,8,.92) 0%,rgba(18,10,8,.66) 38%,rgba(18,10,8,0) 70%),
             linear-gradient(0deg,#120a08 0%,rgba(18,10,8,0) 30%)}
.iq-hero-txt{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:78px}
.iq-hero-txt>*{max-width:540px}
.iq-hero-j{font-size:clamp(26px,3.6vw,44px);font-weight:800;line-height:1.12;margin:0 0 14px;
  text-shadow:0 2px 12px rgba(0,0,0,.5);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.iq-hero-j a:hover{color:#fff}
.iq-lencana{display:flex;gap:6px;margin-bottom:10px}
.iq-lencana span{background:var(--acc);color:#fff;font-size:12px;font-weight:600;padding:1px 6px;border-radius:2px}
.iq-lencana span+span{background:transparent;color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
.iq-hero-m{display:flex;flex-wrap:wrap;align-items:center;font-size:13.5px;color:#fff;margin-bottom:10px}
.iq-hero-m>*+*::before{content:"";display:inline-block;width:1px;height:11px;background:rgba(23,20,18,.28);margin:0 9px}
.iq-hero-m b{color:var(--acc);font-weight:600}
.iq-hero-g{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.iq-hero-g a{background:rgba(255,255,255,.12);color:#2a2522;font-size:12.5px;padding:2px 9px;border-radius:3px}
.iq-hero-g a:hover{background:rgba(255,255,255,.2);color:#fff}
.iq-hero-s{font-size:13.5px;line-height:1.55;color:#2a2522;margin:0 0 20px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.iq-hero-b{display:flex;gap:14px}
.iq-putar,.iq-info{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;transition:transform .15s}
.iq-putar{background:var(--acc);color:#111}
.iq-info{background:rgba(255,255,255,.9);color:#111}
.iq-putar:hover,.iq-info:hover{transform:scale(1.07);color:#111}
.iq-hero-panah{position:absolute;top:50%;transform:translateY(-50%);z-index:3;background:none;border:0;color:#fff;
  font-size:30px;cursor:pointer;padding:14px;opacity:.75}
.iq-hero-panah:hover{opacity:1;color:var(--acc)}
.iq-hero-kiri{left:6px} .iq-hero-kanan{right:6px}
.iq-hero-titik{position:absolute;z-index:3;right:max(16px,calc((100vw - var(--wrap))/2 + 16px));bottom:34px;display:flex;gap:6px}
.iq-hero-titik button{width:8px;height:4px;border:0;border-radius:2px;background:rgba(23,20,18,.28);padding:0;cursor:pointer;transition:width .25s}
.iq-hero-titik button.aktif{width:22px;background:#fff}

/* ---- baris poster ---- */
.iq-isi{padding-top:6px}
body:not(.beranda) .iq-isi{padding-top:20px}
.iq-row{margin:30px 0 8px}
.iq-rh h1,.iq-rh h2{font-size:21px;font-weight:700;margin:0 0 14px}
.iq-rh a:hover{color:var(--acc)}
.iq-rel{position:relative}
.iq-trek{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 5*16px)/6);gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.iq-trek::-webkit-scrollbar{display:none}
.iq-k{display:block;scroll-snap-align:start;min-width:0}
.iq-p{position:relative;display:block;border-radius:4px;overflow:hidden;background:var(--card);aspect-ratio:225/320}
.iq-p img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.iq-k:hover .iq-p img{transform:scale(1.05)}
.iq-p::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;
  background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,0));pointer-events:none}
.iq-lb{position:absolute;top:0;right:0;z-index:1;background:var(--acc);color:#fff;font-size:11.5px;font-weight:600;
  padding:1px 6px;border-radius:0 0 0 4px}
.iq-ks{position:absolute;left:8px;right:8px;bottom:7px;z-index:1;font-size:12px;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iq-j{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:14px;line-height:1.35;color:#2a2522;margin-top:8px}
.iq-k:hover .iq-j{color:var(--acc)}
.iq-geser{position:absolute;top:0;bottom:0;z-index:4;width:44px;border:0;cursor:pointer;color:#fff;font-size:24px;
  opacity:0;transition:opacity .2s}
.iq-kiri{left:-44px;background:linear-gradient(90deg,var(--bg),rgba(255,255,255,0))}
.iq-kanan{right:-44px;background:linear-gradient(270deg,var(--bg),rgba(255,255,255,0))}
.iq-rel:hover .iq-geser{opacity:.9}
.iq-geser[hidden]{display:none}

/* kartu TOP: panel gelap memanjang di bawah poster seperti "Trending" iQ */
.iq-top{background:linear-gradient(180deg,#1e2129,#16181e);border-radius:4px;overflow:hidden}
.iq-top .iq-p{border-radius:0}
.iq-no{position:absolute;left:10px;bottom:6px;z-index:1;font-size:22px;font-weight:800;font-style:italic;color:#fff;
  letter-spacing:.5px;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.iq-tb{display:block;padding:0 10px 12px}
.iq-top .iq-j{margin-top:8px;font-size:13.5px}
.iq-m{display:block;font-size:12px;color:var(--tx3);margin-top:8px}

/* ---- deret chip genre ---- */
.iq-chip{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:34px 0 4px;padding-bottom:2px}
.iq-chip::-webkit-scrollbar{display:none}
.iq-chip a{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;background:#f2ece7;color:#d7d7d9;
  font-size:13.5px;padding:7px 16px;border-radius:3px;white-space:nowrap}
.iq-chip a:hover{background:#2e323b;color:#fff}

.iq-tag{margin:36px 0 10px}
.iq-bawah{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;margin:30px 0 20px;align-items:start}
.iq-bawah .prose{margin:0}

@media(max-width:1100px){ .iq-trek{grid-auto-columns:calc((100% - 4*14px)/5);gap:14px} }
@media(max-width:860px){
  .iq-trek{grid-auto-columns:calc((100% - 3*12px)/4);gap:12px}
  .iq-hero-pos{display:none}
  .iq-hero .sorot-slide::after{background:linear-gradient(0deg,#120a08 5%,rgba(18,10,8,.45) 60%,rgba(18,10,8,.62) 100%)}
  .iq-hero-bg{filter:blur(0) brightness(.75);inset:0;width:100%;height:100%;transform:none;object-position:center 22%}
  .iq-bawah{grid-template-columns:1fr}
  .iq-geser{display:none}
}
@media(max-width:560px){
  .iq-trek{grid-auto-columns:calc((100% - 2*10px)/3);gap:10px}
  .iq-hero-in{height:480px}
  .iq-hero-txt{padding-bottom:56px}
  .iq-hero-panah{display:none}
  .iq-rh h1,.iq-rh h2{font-size:18px}
  .iq-j{font-size:13px}
  .iq-no{font-size:18px}
}
/* perbaikan setelah uji tangkapan layar */
.iq-hero-in,.iq-hero .sorot-slide{overflow:hidden}
.nav>a,.drop>button{white-space:nowrap}
@media(max-width:1320px){ .nav>a[href="/artikel/"],.nav>a[href="/daftar-anime/"]{display:none} }
section.iq-hero,section.iq-row,section.iq-tag{padding:0}
.iq-row{margin:34px 0 6px}
.iq-row:first-child{margin-top:28px}
/* logo.png berlatar gelap pekat (#0f0f13); di atas banner kotak itu terlihat.
   lighten membuat latar gelapnya lebur ke banner, tulisan birunya tetap. */
/* logo.png sudah dibuat transparan, tidak perlu blend */
.srch{flex:0 0 220px}
@media(max-width:1500px){ .nav>a[href="/artikel/"],.nav>a[href="/daftar-anime/"]{display:none} }
@media(max-width:1200px){ .nav>a[href="/tamat/"]{display:none} }

/* ---- kartu melayang saat kursor di atas poster (ala iQ "Trending Now") ----
   Satu panel saja (#iq-pop), dipindah dan diisi ulang oleh app.js tiap kali
   kursor berhenti di sebuah kartu. Hanya untuk perangkat berkursor. */
.iq-pop{position:absolute;z-index:60;width:370px;background:#ffffff;border-radius:6px;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.65);opacity:0;transform:scale(.92);transform-origin:center top;
  transition:opacity .18s,transform .18s;pointer-events:none}
.iq-pop.buka{opacity:1;transform:scale(1);pointer-events:auto}
.iq-pop-g{position:relative;display:block;aspect-ratio:16/9;background:#000;overflow:hidden}
.iq-pop-g .bg{position:absolute;inset:-20px;width:calc(100% + 40px);height:calc(100% + 40px);max-width:none;
  object-fit:cover;filter:blur(18px) brightness(.6)}
.iq-pop-g .ps{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%}
.iq-pop-g::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(242,236,231,.55),rgba(242,236,231,0) 45%)}
.iq-pop-b{position:absolute;right:12px;bottom:12px;z-index:2;display:flex;gap:10px}
.iq-pop-b a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;transition:transform .15s}
.iq-pop-b a:hover{transform:scale(1.08)}
.iq-pop-b .pl{background:var(--acc);color:#111}
.iq-pop-b .in{background:rgba(255,255,255,.88);color:#111}
.iq-pop-x{padding:12px 14px 14px}
.iq-pop-j{display:block;font-size:17px;font-weight:700;color:#fff;margin:0 0 8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iq-pop-m{display:flex;align-items:center;font-size:13.5px;color:#fff;margin-bottom:10px}
.iq-pop-m>*+*::before{content:"";display:inline-block;width:1px;height:11px;background:rgba(23,20,18,.28);margin:0 8px}
.iq-pop-m b{color:var(--acc);font-weight:600}
.iq-pop-t{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.iq-pop-t span{background:#2c2f37;color:#2a2522;font-size:12px;padding:2px 7px;border-radius:3px}
.iq-pop-d{font-size:13.5px;line-height:1.6;color:#d6d6d8;margin:0;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.iq-pop-l{display:block;text-align:right;color:var(--acc);font-size:13.5px;margin-top:12px}
.iq-pop-l:hover{color:#4ade80}
@media(max-width:860px){ .iq-pop{display:none} }

/* ---- kotak cari: satu kapsul utuh, tanpa kotak persegi di dalamnya ---- */
.srch{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14)}
.srch input,.srch input:focus{background:transparent !important;border:0 !important;border-radius:0;box-shadow:none;
  -webkit-appearance:none;appearance:none;outline:none}
.srch input::-webkit-search-decoration,.srch input::-webkit-search-cancel-button{-webkit-appearance:none}
.srch:focus-within{border-color:var(--acc)}
.iq-pop-c{position:absolute;inset:0;display:block}
.iq-pop-g::after{pointer-events:none;z-index:1}

/* ponsel: kotak cari satu baris dengan logo, di sebelah kanannya (permintaan
   pemilik 2026-09-23) - bukan turun ke baris kedua di bawah logo. */
@media(max-width:640px){
  .hdr-in{flex-wrap:nowrap;height:58px;padding-top:0;padding-bottom:0;gap:10px}
  .srch{order:0;width:auto;flex:1 1 auto;min-width:0;margin-left:auto;padding:2px 2px 2px 12px}
  .srch input{min-width:0;font-size:13.5px}
  .srch button{flex:0 0 auto;width:32px;height:32px}
  .logo{flex:0 0 auto}
  .logo-i{height:30px;max-width:118px}
  .nav{inset:58px 0 auto 0}
}
@media(max-width:360px){
  .logo-i{height:26px;max-width:96px}
  .hdr-in{gap:8px}
}

/* ponsel: pencarian cukup ikon di kanan; diketuk -> kolom cari terbuka
   menutupi baris header (kelas .buka dipasang app.js). */
.srch .srch-x{display:none}
@media(max-width:640px){
  .hdr-in{position:relative}
  .srch{flex:0 0 auto;margin-left:auto;padding:0;background:transparent;border:0}
  .srch input{display:none}
  .srch button[type=submit]{width:38px;height:38px;background:rgba(255,255,255,.12);color:#fff}
  .srch button[type=submit] svg{width:19px;height:19px}
  .srch.buka{position:absolute;left:12px;right:12px;top:50%;transform:translateY(-50%);z-index:5;
    display:flex;gap:6px;padding:3px 4px 3px 14px;background:#1f2229;border:1px solid var(--acc);border-radius:999px}
  .srch.buka input{display:block;flex:1 1 auto;font-size:14.5px}
  .srch.buka button[type=submit]{width:34px;height:34px;background:var(--acc);color:#111}
  .srch.buka .srch-x{display:grid;place-items:center;flex:0 0 auto;width:30px;height:30px;border:0;border-radius:50%;
    background:transparent;color:var(--tx2);font-size:24px;line-height:1;cursor:pointer;padding:0}
  .logo-i{height:32px;max-width:140px}
}

/* ---------- tema terang: banner beranda tetap gelap ----------
   Seluruh halaman berlatar putih, tapi banner beranda dibiarkan gelap karena
   tulisannya berdiri di atas gambar poster. Akibatnya --tx yang sekarang gelap
   tidak boleh dipakai di dalam .iq-hero, jadi warna teksnya dipaksa terang di
   sini. Blok ini khusus tema terang; tampilan gelap asalnya tidak perlu ini. */
.iq-hero{color:#fff}
.iq-hero .iq-hero-j,
.iq-hero .iq-hero-j a{color:#fff}
.iq-hero .iq-hero-m,
.iq-hero .iq-hero-s{color:rgba(255,255,255,.84)}
.iq-hero .iq-hero-g{color:rgba(255,255,255,.78)}
.iq-hero .iq-hero-g span,
.iq-hero .iq-hero-g a{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.26);color:#fff}
.iq-hero .iq-info{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff}
.iq-hero .iq-hero-panah{background:rgba(255,255,255,.14);color:#fff}
.iq-hero .iq-hero-panah:hover{background:rgba(255,255,255,.26)}
.iq-hero .iq-hero-titik span{background:rgba(255,255,255,.4)}
.iq-hero .iq-hero-titik span.aktif{background:#fff}

/* Tautan menu yang aktif/tersorot aslinya dipaksa putih. Di bilah kepala yang
   sekarang putih itu berarti hilang, jadi dibalik jadi warna aksen. Khusus
   beranda bilahnya tembus pandang di atas banner gelap, jadi di sana tetap
   putih. */
.nav>a:hover,.drop>button:hover,.nav>a.on{color:var(--acc)}
body.beranda .nav>a:hover,
body.beranda .drop>button:hover,
body.beranda .nav>a.on{color:#fff}

/* 2026-09-27: banner iklan di beranda - header beranda melayang (fixed), jadi
   banner diberi jarak setinggi header supaya tidak tertutup. */
body.beranda .iklan-atas{margin-top:72px !important;margin-bottom:10px !important}
@media(max-width:640px){ body.beranda .iklan-atas{margin-top:64px !important} }
/* ======================= tombol & mode gelap (2026-09-28) =======================
   Tema bawaan situs ini TERANG. Tombol bulan/matahari di header memasang
   html[data-tema="gelap"|"terang"] dan menyimpannya di localStorage('tema').
   Mode gelap = palet variabel diganti + beberapa aturan yang warna terangnya
   ditulis langsung (header putih, kartu melayang putih, chip krem, dst.). */
.tema-btn{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;margin-left:auto;margin-right:8px;
  border-radius:50%;border:1px solid var(--line);background:var(--card2);color:var(--tx);cursor:pointer;padding:0;
  transition:background .2s,color .2s}
.tema-btn:hover{color:var(--acc)}
.tema-btn .ik-matahari{display:none}
html[data-tema="gelap"] .tema-btn .ik-bulan{display:none}
html[data-tema="gelap"] .tema-btn .ik-matahari{display:block}
.hdr-in .srch{margin-left:0}
@media(max-width:640px){ .tema-btn{width:34px;height:34px;margin-right:4px} }

html[data-tema="gelap"]{
  color-scheme:dark;
  --bg:#111319; --bg2:#15171d; --card:#1a1c22; --card2:#23262e;
  --line:#2a2d35; --tx:#f1f1f2; --tx2:#a9a9ac; --tx3:#828387;
  --shadow:0 6px 22px rgba(0,0,0,.45);
  --acc:#e8402f; --acc2:#ff7a5c; --hot:#e8402f;
}
html[data-tema="gelap"] body{background:var(--bg);color:var(--tx)}
html[data-tema="gelap"] .hdr{background:rgba(17,19,25,.96);border-bottom-color:var(--line)}
html[data-tema="gelap"] body.beranda .hdr.padat{background:rgba(17,19,25,.97)}
html[data-tema="gelap"] .srch{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
html[data-tema="gelap"] .iq-j,
html[data-tema="gelap"] .iq-pop-t span{color:var(--tx)}
html[data-tema="gelap"] .iq-chip a{background:#23262e;color:#d7d7d9}
html[data-tema="gelap"] .iq-chip a:hover{background:#2e323b;color:#fff}
html[data-tema="gelap"] .iq-pop{background:#1a1c22}
html[data-tema="gelap"] .iq-pop-g::after{background:linear-gradient(0deg,rgba(26,28,34,.55),rgba(26,28,34,0) 45%)}
html[data-tema="gelap"] .iq-pop-t span{background:#2c2f37}
html[data-tema="gelap"] .sorot-data span,
html[data-tema="gelap"] .sorot-detail{background:rgba(255,255,255,.07)}
html[data-tema="gelap"] .sorot-detail:hover{background:rgba(255,255,255,.14)}
html[data-tema="gelap"] .sorot-titik button,
html[data-tema="gelap"] .iq-hero-titik button{background:rgba(255,255,255,.3)}
html[data-tema="gelap"] .iq-hero-m>*+*::before,
html[data-tema="gelap"] .iq-pop-m>*+*::before{background:rgba(255,255,255,.3)}
html[data-tema="gelap"] img{color-scheme:normal}

/* logo: tulisan gelap di header putih, tulisan putih di mode gelap & di atas banner beranda */
.logo-teks-putih{display:none !important}
html[data-tema="gelap"] .logo-teks-gelap{display:none !important}
html[data-tema="gelap"] .logo-teks-putih{display:block !important}

/* 2026-09-28: sejak banner iklan dipasang di bawah header, header beranda tidak
   lagi melayang di atas sampul gelap - ia di atas area polos. Tulisan menu putih
   jadi tak terbaca di tema terang, jadi header beranda dibuat padat seperti di
   halaman lain (putih di mode terang, gelap di mode gelap). */
body.beranda .hdr,body.beranda .hdr.padat{background:rgba(255,255,255,.97) !important;border-bottom:1px solid var(--line) !important;backdrop-filter:blur(8px)}
html[data-tema="gelap"] body.beranda .hdr,html[data-tema="gelap"] body.beranda .hdr.padat{background:rgba(17,19,25,.97) !important}
body.beranda .nav>a,body.beranda .drop>button{color:var(--tx2) !important}
body.beranda .nav>a:hover,body.beranda .drop>button:hover,body.beranda .nav>a.on{color:var(--acc) !important}
body.beranda .srch{background:var(--card2);border-color:var(--line)}
html[data-tema="gelap"] body.beranda .srch{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
/* HP: ikon cari dulu putih di atas header putih (tak terlihat) - ikut warna tema */
@media(max-width:640px){
  .srch:not(.buka) button[type=submit]{background:var(--card2);color:var(--tx);border:1px solid var(--line)}
  html[data-tema="gelap"] .srch:not(.buka) button[type=submit]{background:rgba(255,255,255,.1);color:#fff}
  .srch.buka{background:var(--card)}
  .tema-btn{margin-left:auto;margin-right:0}
}