:root{
  --bg: #0c0b09;
  --bg-elevated: #161310;
  --bg-card: #1c1812;
  --text: #f4ecdc;
  --text-muted: #a89a80;
  --gold: #c8963f;
  --gold-bright: #e3ac52;
  --teal: #3f5c56;
  --line: #2c261c;
  --shadow: 0 20px 50px rgba(0,0,0,.5);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Cairo',sans-serif;
  overflow-x:hidden;
}
h1,h2,h3,.brand{font-family:'Tajawal',sans-serif;}
a{color:inherit;}

/* ---------- sprocket signature strip ---------- */
.sprocket-strip{
  height:14px;
  width:100%;
  background-image: radial-gradient(circle, var(--bg) 3px, transparent 3.5px);
  background-size: 28px 14px;
  background-position: 14px center;
  background-color: var(--gold);
  opacity:.9;
}

/* ---------- header ---------- */
header{
  position:fixed;
  top:0; right:0; left:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 48px;
  background:linear-gradient(to bottom, rgba(12,11,9,.95), transparent);
}
.brand{
  font-size:26px; font-weight:900; letter-spacing:1px; color:var(--text);
  display:flex; align-items:center; gap:8px; text-decoration:none;
}
.brand span{color:var(--gold);}
.brand-mark{
  width:26px;height:26px; border:2.5px solid var(--gold); border-radius:3px; position:relative;
}
.brand-mark::before{
  content:""; position:absolute; inset:5px; background:var(--gold);
  clip-path: polygon(30% 20%, 30% 80%, 80% 50%);
}
nav{display:flex;gap:32px;}
nav a{color:var(--text-muted); text-decoration:none; font-size:15px; font-weight:500; transition:color .2s;}
nav a:hover, nav a.active{color:var(--text);}
.header-icons{display:flex;gap:20px;align-items:center;}
.header-icons svg{width:19px;height:19px;stroke:var(--text-muted);cursor:pointer;transition:stroke .2s;}
.header-icons svg:hover{stroke:var(--text);}

/* ---------- hero ---------- */
.hero{
  position:relative; height:92vh; display:flex; align-items:flex-end; padding:0 48px 60px;
  background:
    linear-gradient(to top, var(--bg) 2%, rgba(12,11,9,.15) 45%, rgba(12,11,9,.65) 100%),
    linear-gradient(115deg, #241d12 0%, #171310 55%, #0c0b09 100%);
}
.hero.has-backdrop{background-size:cover; background-position:center;}
.hero::after{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(200,150,63,.05) 1px, transparent 1px);
  background-size:4px 4px; pointer-events:none;
}
.hero-content{position:relative; max-width:620px;}
.eyebrow{display:inline-flex; align-items:center; gap:8px; color:var(--gold-bright); font-size:13px; font-weight:600; letter-spacing:.5px; margin-bottom:16px;}
.eyebrow::before{content:""; width:22px;height:2px; background:var(--gold-bright);}
.hero h1{font-size:58px; font-weight:900; line-height:1.15; margin-bottom:18px;}
.hero p{color:var(--text-muted); font-size:16px; line-height:1.9; margin-bottom:26px; max-width:520px;}
.hero-meta{display:flex; align-items:center; gap:14px; margin-bottom:30px; font-size:14px; color:var(--text-muted); flex-wrap:wrap;}
.tag-rating{border:1px solid var(--text-muted); padding:2px 9px; border-radius:3px; font-size:12px;}
.hero-actions{display:flex;gap:14px;}
.btn{
  display:flex; align-items:center; gap:10px; padding:14px 30px; border-radius:6px;
  font-family:'Tajawal',sans-serif; font-weight:700; font-size:16px; cursor:pointer; border:none;
  transition:transform .15s, background .2s;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--gold); color:#1a1408;}
.btn-primary:hover{background:var(--gold-bright);}
.btn-secondary{background:rgba(244,236,220,.1); color:var(--text); backdrop-filter:blur(6px);}
.btn-secondary:hover{background:rgba(244,236,220,.18);}
.btn svg{width:18px;height:18px;}

/* ---------- sections / rows ---------- */
.section{padding:56px 48px 10px;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px;}
.section-head h2{font-size:22px; font-weight:800;}
.section-head a{color:var(--gold); font-size:13px; text-decoration:none; font-weight:600;}

.row{display:flex; gap:14px; overflow-x:auto; padding-bottom:14px; scrollbar-width:none;}
.row::-webkit-scrollbar{display:none;}

.card{flex:0 0 auto; width:230px; border-radius:8px; overflow:hidden; cursor:pointer; transition:transform .25s; position:relative; text-decoration:none; color:inherit; display:block;}
.card:hover{transform:translateY(-6px);}
.card-art{height:130px; border-radius:8px; position:relative; display:flex; align-items:flex-end; padding:10px; background-size:cover; background-position:center;}
.card-art::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.55), transparent 60%); border-radius:8px;}
.card-badge{position:relative; z-index:1; font-size:11px; font-weight:700; background:var(--gold); color:#1a1408; padding:2px 8px; border-radius:3px;}
.card h3{font-size:14.5px; font-weight:700; margin-top:9px;}
.card p{font-size:12px; color:var(--text-muted); margin-top:3px;}

.art-1{background:linear-gradient(140deg,#3a2c19,#171310);}
.art-2{background:linear-gradient(140deg,#2b3a38,#141715);}
.art-3{background:linear-gradient(140deg,#402a20,#181210);}
.art-4{background:linear-gradient(140deg,#26332f,#121615);}
.art-5{background:linear-gradient(140deg,#3d3320,#171410);}
.art-6{background:linear-gradient(140deg,#332222,#151111);}

/* ---------- row scroll arrows ---------- */
.row-wrap{position:relative;}
.row-arrow{
  position:absolute; top:0; bottom:14px; width:44px; z-index:5;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(to var(--fade-dir,left), rgba(12,11,9,.9), transparent);
  border:none; color:var(--text); cursor:pointer; opacity:0; transition:opacity .2s;
}
.row-wrap:hover .row-arrow{opacity:1;}
.row-arrow.right{right:0; --fade-dir:right;}
.row-arrow.left{left:0; --fade-dir:left;}
.row-arrow svg{width:22px;height:22px;}

/* ---------- details page ---------- */
.detail-hero{
  min-height:60vh; display:flex; align-items:flex-end; padding:140px 48px 40px;
  background-size:cover; background-position:center;
  background:linear-gradient(to top, var(--bg), rgba(12,11,9,.55)), linear-gradient(115deg,#241d12,#0c0b09);
}
.detail-body{padding:30px 48px 60px; max-width:900px;}
.detail-body h2{font-size:20px; margin:26px 0 14px; font-weight:800;}
.cast-row{display:flex; gap:10px; flex-wrap:wrap;}
.cast-chip{background:var(--bg-card); border:1px solid var(--line); padding:6px 14px; border-radius:20px; font-size:13px; color:var(--text-muted);}

.season-block{margin-bottom:26px;}
.season-block h3{font-size:16px; font-weight:700; margin-bottom:10px; color:var(--gold-bright);}
.episode{
  display:flex; align-items:center; gap:16px; padding:14px; border-radius:8px;
  background:var(--bg-card); margin-bottom:8px; border:1px solid var(--line);
}
.episode-num{font-family:'Tajawal',sans-serif; font-weight:800; font-size:20px; color:var(--text-muted); width:28px; text-align:center;}
.episode-info h4{font-size:14.5px; font-weight:700;}
.episode-info p{font-size:12.5px; color:var(--text-muted); margin-top:3px;}
.episode-play{margin-right:auto; background:none; border:1px solid var(--gold); color:var(--gold); border-radius:6px; padding:8px 16px; font-size:13px; cursor:pointer; font-family:'Tajawal',sans-serif; font-weight:700;}
.episode-play:hover{background:var(--gold); color:#1a1408;}

/* ---------- footer ---------- */
footer{
  margin-top:60px; padding:40px 48px 50px; border-top:1px solid var(--line);
  color:var(--text-muted); font-size:13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px;
}
footer .brand{font-size:18px;}
footer nav{gap:20px;}
footer nav a{font-size:13px; color:var(--text-muted); text-decoration:none;}

.empty-state{padding:60px 48px; text-align:center; color:var(--text-muted);}

@media (max-width:720px){
  header, .section, .hero, .detail-hero, .detail-body{padding-left:20px; padding-right:20px;}
  nav{display:none;}
  .hero h1{font-size:38px;}
  .hero{height:78vh;}
}