/*
Theme Name: ReelsDizi Dark
Theme URI: https://reelsdizi.net
Description: English short-drama catalog theme (dramabox-style, dark).
Version: 1.0.0
Author: hermes
*/

:root{
  --bg:#0b0d14; --bg2:#12151f; --card:#1a1e2b; --line:#262b3d;
  --txt:#e8eaf2; --muted:#9aa3b8; --accent:#ff4d5a; --accent2:#ffb03a;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--txt);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.55;font-size:16px}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.mono{font-family:var(--mono)}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:rgba(11,13,20,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-head .bar{display:flex;align-items:center;justify-content:space-between;height:56px}
.logo{font-weight:800;font-size:19px;letter-spacing:-.02em}
.logo b{color:var(--accent)}
.site-head nav{display:flex;gap:4px;overflow-x:auto}
.site-head nav a{color:var(--muted);padding:6px 10px;font-size:13.5px;white-space:nowrap;border-radius:6px}
.site-head nav a:hover{color:var(--txt);background:var(--card)}
.langs{display:flex;gap:4px;align-items:center;margin-left:8px}
.lang{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:4px 8px}
.lang:hover{color:var(--txt);border-color:var(--muted)}
.lang.on{color:#fff;background:var(--accent);border-color:var(--accent)}

/* hero */
.hero{padding:26px 0 8px}
.hero h1{font-size:clamp(22px,4vw,34px);line-height:1.2;letter-spacing:-.02em;font-weight:850}
.hero h1 em{color:var(--accent);font-style:normal}
.hero .sub{color:var(--muted);margin-top:8px;max-width:640px;font-size:15px}
.meta-row{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.chip{font-family:var(--mono);font-size:11.5px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 10px}

/* drama grid */
.section{padding:22px 0}
.section h2{font-size:20px;margin-bottom:4px;font-weight:800}
.section .lead{color:var(--muted);font-size:13.5px;margin-bottom:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
.dcard{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:transform .15s,border-color .15s}
.dcard:hover{transform:translateY(-3px);border-color:var(--accent)}
.dcard .poster{aspect-ratio:3/4.5;width:100%;object-fit:cover;background:#000;display:block}
.dcard .ph{aspect-ratio:3/4.5;width:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1e2b,#262b3d);color:var(--accent);font-weight:800;font-size:26px}
.dcard .body{padding:10px 12px}
.dcard .t{font-size:14px;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
.dcard .m{font-size:11.5px;color:var(--muted);margin-top:6px;display:flex;justify-content:space-between}
.dcard .tag{color:var(--accent2)}

/* drama detail */
.dhead{display:grid;grid-template-columns:200px 1fr;gap:22px;padding:22px 0}
.dhead .poster{border-radius:14px;aspect-ratio:3/4.5;object-fit:cover;width:100%;background:#000}
.dhead h1{font-size:clamp(22px,4vw,30px);line-height:1.2;font-weight:850;margin:10px 0}
.dhead .stats{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0;font-size:13px;color:var(--muted)}
.dhead .stats b{color:var(--txt)}
.dhead .desc{color:var(--muted);font-size:14.5px;max-width:680px}
.dhead .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tag{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:12.5px;color:var(--accent2)}

/* episodes */
.eps{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.ep{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px;text-align:center;transition:border-color .15s}
.ep:hover{border-color:var(--accent)}
.ep .n{font-weight:800;font-size:14px}
.ep .d{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:4px}
.ep .p{color:var(--accent);font-size:12px;margin-top:6px;display:inline-block}

/* watch */
.player{background:#000;border-radius:14px;overflow:hidden;margin:18px 0;border:1px solid var(--line)}
.player video{width:100%;display:block;aspect-ratio:16/9;background:#000}
.epnav{display:flex;gap:8px;margin:14px 0}
.epnav a{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 14px;font-size:13px}
.epnav a:hover{border-color:var(--accent)}

/* footer */
.site-foot{background:var(--bg2);border-top:1px solid var(--line);margin-top:40px;padding:28px 0}
.site-foot p{color:var(--muted);font-size:13px;line-height:1.7}

/* buttons */
.btn{display:inline-block;background:var(--accent);color:#fff;font-weight:700;padding:10px 18px;border-radius:8px;font-size:14px}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--txt)}
.btn:hover{filter:brightness(1.1)}

@media(max-width:640px){
  .dhead{grid-template-columns:1fr}
  .dhead .poster{max-width:200px}
  .grid{grid-template-columns:repeat(3,1fr)}
}