/* نظام الفيديو — حول العالم */
:root{
  --ink:#081613; --deep:#0F2E27; --panel:#0F2E27; --panel-2:#133830;
  --gold:#D4AF37; --gold-soft:#F3E2A9; --line:rgba(212,175,55,.25);
  --text:#F0EEE2; --muted:#A8BDB5; --emerald:#3FBF78;
  --r-lg:18px; --r-sm:10px;
  --ui:"Tajawal",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --display:"Cairo","Tajawal",Tahoma,sans-serif;
  --verse:"Amiri","Traditional Arabic","Times New Roman",serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--text);font:400 16px/1.8 var(--ui);
  background-image:radial-gradient(1200px 500px at 85% -10%,rgba(15,46,39,.9),transparent 60%);}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* الترويسة */
.top{border-bottom:1px solid var(--line);background:rgba(8,22,19,.88);position:sticky;top:0;z-index:20;backdrop-filter:blur(8px)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font:800 17px/1.1 var(--display);color:var(--text)}
.brand:hover{text-decoration:none}
.brand svg{width:32px;height:32px;flex:none}
.brand small{display:block;font:500 10px/1.4 var(--ui);color:var(--gold);margin-top:3px;letter-spacing:.05em}
.top nav a{color:var(--muted);font-size:14px;margin-inline-start:18px}
.top nav a:hover{color:var(--gold)}

/* رأس الصفحة */
.head{padding:44px 0 22px}
.head h1{font:700 clamp(30px,5vw,46px)/1.25 var(--display);margin:0 0 8px;color:var(--text)}
.head p{margin:0;color:var(--muted);max-width:62ch}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:14px}
.crumbs a{color:var(--muted)}

/* الفلاتر */
.filters{display:flex;gap:8px;flex-wrap:wrap;padding:6px 0 26px}
.filters a{padding:7px 16px;border:1px solid var(--line);border-radius:999px;color:var(--text);font-size:14px;background:var(--panel)}
.filters a:hover{text-decoration:none;border-color:var(--gold)}
.filters a[aria-current="page"]{background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:600}
.filters .n{opacity:.6;font-size:12px;margin-inline-start:4px}

/* شريط مقاطع القناة (عمودي) */
.reel{margin:0 0 40px;padding:22px 0 26px;border-block:1px solid var(--line)}
.reel h2,.sec-h{font:600 22px/1.3 var(--display);margin:0 0 4px}
.reel .sub{color:var(--muted);font-size:14px;margin:0 0 16px}
.reel-row{display:flex;align-items:flex-start;gap:14px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}
.reel-row>*{scroll-snap-align:start;flex:0 0 200px}
.reel-row>.card:has(.is-wide){flex-basis:340px}

/* الشبكة */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px 20px}
.card h3{font:600 17px/1.55 var(--ui);margin:12px 0 4px}
.card h3 a{color:var(--text)}
.card h3 a:hover{color:var(--gold);text-decoration:none}
.meta{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 12px}
.tag{color:var(--gold)}

/* المشغّل الخفيف */
.lite{position:relative;background:var(--panel-2);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);cursor:pointer}
.lite.is-wide{aspect-ratio:16/9}
.lite.is-vertical{aspect-ratio:9/16}
.lite.is-post{aspect-ratio:4/5}
.lite img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.lite:hover img{transform:scale(1.03)}
.lite-noimg{position:absolute;inset:0;display:grid;place-items:end center;padding-bottom:18%;font:600 18px var(--display);color:var(--gold);
  background:linear-gradient(160deg,var(--deep),var(--ink))}
.lite-play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(8,22,19,.72);display:grid;place-items:center;box-shadow:0 0 0 1px var(--gold)}
.lite-play svg{width:28px;height:28px;fill:var(--gold);margin-left:4px}
.lite:hover .lite-play{background:var(--gold)}
.lite:hover .lite-play svg{fill:var(--ink)}
.lite-src{position:absolute;top:10px;inset-inline-end:10px;font-size:11px;padding:2px 9px;border-radius:999px;background:rgba(8,22,19,.75);color:var(--text)}
.lite iframe,.lite video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.lite.on{cursor:default}

/* صفحة الفيديو */
.watch{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:36px;padding-bottom:50px}
.watch.v{grid-template-columns:minmax(0,420px) minmax(0,1fr)}
.watch .player{max-width:100%}
.watch h1{font:700 clamp(24px,3.6vw,34px)/1.4 var(--display);margin:18px 0 10px}
.desc{max-width:68ch;color:var(--text)}
.desc p{margin:0 0 1em}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:14px;margin:18px 0;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel)}
.facts dt{color:var(--muted)} .facts dd{margin:0}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel);color:var(--text);font:500 14px var(--ui);cursor:pointer}
.btn:hover{border-color:var(--gold);text-decoration:none}
.btn.gold{background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:600}

/* الآيات — العنصر المميز */
.verses{margin:30px 0}
.verse{padding:24px 26px 18px;margin:0 0 14px;border-radius:var(--r-lg);background:linear-gradient(180deg,var(--panel-2),var(--ink));border:1px solid var(--line)}
.verse q{display:block;quotes:none;font:400 clamp(22px,3vw,28px)/2.1 var(--verse);color:var(--gold);text-align:center}
.verse .ref{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:12px;font-size:13px;color:var(--muted)}
.verse .num{font-family:var(--verse);color:var(--gold);white-space:nowrap}

.side h2{font:600 18px/1.3 var(--display);margin:0 0 14px}
.mini{display:grid;grid-template-columns:130px 1fr;gap:12px;margin-bottom:16px;align-items:start}
.mini .lite{border-radius:var(--r-sm);aspect-ratio:16/9}
.mini .lite-play{width:36px;height:36px}.mini .lite-play svg{width:16px;height:16px}
.mini .lite-src{display:none}
.mini a{color:var(--text);font-size:14px;line-height:1.6}

.pager{display:flex;justify-content:center;gap:8px;margin:40px 0}
.empty{padding:40px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r-lg)}
.about{margin:56px 0 10px;padding-top:26px;border-top:1px solid var(--line);color:var(--muted);font-size:15px;max-width:75ch}
.about h2{font:600 18px var(--display);color:var(--text);margin:0 0 8px}
footer{border-top:1px solid var(--line);padding:22px 0;text-align:center;color:var(--muted);font-size:13px;margin-top:30px}

@media (max-width:900px){
  .watch,.watch.v{grid-template-columns:1fr}
  .watch.v .player{max-width:420px;margin:0 auto}
}
@media (max-width:560px){
  .wrap{padding:0 14px}
  .grid{grid-template-columns:1fr}
  .head{padding:30px 0 14px}
  .top nav a:not(:first-child){display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}