/* ==========================================================================
Reelree v2 — ورقة التنسيق الوحيدة، تُضمَّن في .
الاتجاه: **دار عرض** لا لوحة تحكّم تقنية. أرضية نبيذية داكنة (لا رمادي
محايد ولا أسود خالص) ولون أساسي ذهبيّ كمصابيح واجهة السينما، وورديّ محجوز
لحالة «يعمل الآن / مدبلج» وحدها. النصّ رمليّ دافئ لا أبيض خالص.
⚠️ **الألوان كلّها رموز (`--rr-*`) لا قيَماً حرفية داخل الكتل الشرطية.**
لون يُعرَّف داخل `@media` أو `[data-theme]` وحده لا ينطبق في الحالة الثالثة
(نظام بلا اختيار صريح)، فتخرج الصفحة بنصّ سمةٍ على أرضية الأخرى.
========================================================================== */
/* --------------------------------------------------------------------------
1) الرموز — الفاتح هو التعريف الكامل، والداكن يعيد تعريف الرموز وحدها
-------------------------------------------------------------------------- */
:root {
color-scheme: light dark;
/* أرضيات ونصوص — فاتح */
--rr-bg: #FBF6F0; /* ورق دافئ */
--rr-bg-2: #F3E9E1;
--rr-surface: #FFFFFF;
--rr-surface-2: #F7EFE9;
--rr-raised: #FFFFFF;
--rr-line: rgba(28, 14, 21, .12);
--rr-line-soft: rgba(28, 14, 21, .07);
--rr-text: #1C0E15;
--rr-text-2: #4A3540;
--rr-muted: #6B5560;
--rr-inverse: #FFF7EE;
/* اللهجة — ⚠️ **قِيست لا قُدِّرت.**
الذهبيّ السابق `#A96A12` كان يعبر التباين على الورق **بالكاد** (4.11) ويسقط
فوق `gold-soft` (3.47): سبعة عناصر راسبة في السمة الفاتحة — رابط «عرض
الكل»، وشارة «مترجم»، وتبويب التنقّل النشط، ونصّ الزرّ الأساسي.
فأُظلم الذهبيّ وأُفتحت أرضيته الناعمة حتى يعبر الزوج نفسه في الحالتين. */
--rr-gold: #8A5410;
--rr-gold-soft: #FCEFD8;
--rr-rose: #A81834;
--rr-rose-soft: #FDE6EA;
/* دلالات — منفصلة عن اللهجة عمداً */
--rr-ok: #1F7A4D;
--rr-warn: #A2670A;
--rr-live: #C4243E;
/* الظلال في الفاتح ناعمة وباردة قليلاً */
--rr-shadow-1: 0 1px 2px rgba(28,14,21,.06), 0 2px 8px rgba(28,14,21,.05);
--rr-shadow-2: 0 4px 12px rgba(28,14,21,.08), 0 16px 40px rgba(28,14,21,.10);
--rr-poster-bg: #EDE1D8;
/* الطبقة الزجاجية للترويسة */
--rr-glass: rgba(251, 246, 240, .82);
--rr-glass-2: rgba(251, 246, 240, .96);
/* الخطوط — بلا خطوط خارجية (قاعدة المشروع): لا طلب شبكة ولا تبديل مفاجئ.
العربية أوّلاً في كل مكدّس حتى لا يُصيَّر النصّ العربي بخطّ لاتينيّ بديل. */
--rr-font-display: 'SF Arabic Rounded', 'SF Arabic', 'Segoe UI Variable Display',
'Segoe UI', 'Noto Kufi Arabic', 'Noto Sans Arabic',
'Dubai', 'Tajawal', system-ui, -apple-system, sans-serif;
--rr-font-body: 'SF Arabic', 'Segoe UI Variable Text', 'Segoe UI',
'Noto Sans Arabic', 'Dubai', 'Tajawal',
system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
--rr-font-num: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono',
Consolas, 'Liberation Mono', monospace;
/* سلّم الحجم — نسبة 1.2 على الجوّال، تتّسع على الشاشة الكبيرة */
--rr-fs-xs: .6875rem;
--rr-fs-sm: .8125rem;
--rr-fs-md: .9375rem;
--rr-fs-lg: 1.0625rem;
--rr-fs-xl: 1.375rem;
--rr-fs-2xl: 1.75rem;
--rr-fs-3xl: clamp(1.9rem, 1.35rem + 2.6vw, 3.1rem);
/* المسافات والزوايا */
--rr-sp-1: .25rem; --rr-sp-2: .5rem; --rr-sp-3: .75rem; --rr-sp-4: 1rem;
--rr-sp-5: 1.5rem; --rr-sp-6: 2rem; --rr-sp-7: 3rem; --rr-sp-8: 4rem;
--rr-r-sm: 6px; --rr-r-md: 10px; --rr-r-lg: 16px; --rr-r-xl: 22px; --rr-r-pill: 999px;
--rr-shell: 1240px;
--rr-header-h: 58px;
--rr-nav-h: 62px;
--rr-ease: cubic-bezier(.4, .14, .3, 1);
--rr-fast: .16s;
--rr-slow: .34s;
}
/* الداكن عبر تفضيل النظام — محروس حتى يفوز الاختيار الصريح للفاتح */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--rr-bg: #14090F;
--rr-bg-2: #1A0C13;
--rr-surface: #1F0F19;
--rr-surface-2: #2C1626;
--rr-raised: #33192B;
--rr-line: rgba(246, 237, 228, .11);
--rr-line-soft: rgba(246, 237, 228, .06);
--rr-text: #F6EDE4;
--rr-text-2: #DCC9CE;
--rr-muted: #A98F98;
--rr-inverse: #14090F;
--rr-gold: #F2B23E;
--rr-gold-soft: #4A3416;
--rr-rose: #E8455F;
--rr-rose-soft: #4B1420;
--rr-ok: #4ED18B;
--rr-warn: #F2B23E;
--rr-live: #E8455F;
--rr-shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.35);
--rr-shadow-2: 0 6px 16px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.55);
--rr-poster-bg: #2C1626;
--rr-glass: rgba(20, 9, 15, .74);
--rr-glass-2: rgba(20, 9, 15, .95);
}
}
/* الاختيار الصريح للداكن — يفوز على نظامٍ فاتح */
:root[data-theme="dark"] {
--rr-bg: #14090F;
--rr-bg-2: #1A0C13;
--rr-surface: #1F0F19;
--rr-surface-2: #2C1626;
--rr-raised: #33192B;
--rr-line: rgba(246, 237, 228, .11);
--rr-line-soft: rgba(246, 237, 228, .06);
--rr-text: #F6EDE4;
--rr-text-2: #DCC9CE;
--rr-muted: #A98F98;
--rr-inverse: #14090F;
--rr-gold: #F2B23E;
--rr-gold-soft: #4A3416;
--rr-rose: #E8455F;
--rr-rose-soft: #4B1420;
--rr-ok: #4ED18B;
--rr-warn: #F2B23E;
--rr-live: #E8455F;
--rr-shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.35);
--rr-shadow-2: 0 6px 16px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.55);
--rr-poster-bg: #2C1626;
--rr-glass: rgba(20, 9, 15, .74);
--rr-glass-2: rgba(20, 9, 15, .95);
}
/* --------------------------------------------------------------------------
2) الأساس
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
/* الترويسة لاصقة، فالمرساة تحتها بلا هذا */
scroll-padding-top: calc(var(--rr-header-h) + 12px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0;
/* أرضية صريحة من رمز: المضيف يرسم أرضيته خلف الصفحة، وجسمٌ شفّاف يستعير سمته */
background: var(--rr-bg);
color: var(--rr-text);
font-family: var(--rr-font-body);
font-size: var(--rr-fs-md);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
/*
* ⚠️ **الحشو على `body.rr-body` لا على `body` وحدها.**
*
* ووردبريس يطبع `global-styles` من `theme.json` **بعد** تنسيقنا المضمَّن، وفيه
* `body{padding-bottom:0}`. وبتساوي الخصوصية يفوز الأخير، فكان الحشو يُلغى
* وتغطّي شريطُ التنقّل الثابت (62px) آخر كل صفحة على الجوّال — مقيس:
* `padding-bottom: 0px` رغم وجود القاعدة.
*
* والصنف يرفع الخصوصية إلى (0,1,1) فيفوز بلا `!important`. والإلغاء في
* `inc/setup.php` يبقى — دفاعٌ بطبقتين لأن إحداهما وحدها سقطت فعلاً.
*/
body.rr-body { padding-bottom: calc(var(--rr-nav-h) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) { body.rr-body { padding-bottom: 0; } }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; background: var(--rr-poster-bg); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--rr-gold); }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 {
font-family: var(--rr-font-display);
font-weight: 800;
line-height: 1.18;
letter-spacing: -.015em;
text-wrap: balance;
margin: 0;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
:where(a, button, input, select, summary, [tabindex]):focus-visible {
outline: 2px solid var(--rr-gold);
outline-offset: 2px;
border-radius: var(--rr-r-sm);
}
::selection { background: var(--rr-gold); color: var(--rr-inverse); }
/* الأرقام والتوقيتات تصطفّ عمودياً */
.rr-num, time, .rr-time { font-family: var(--rr-font-num); font-variant-numeric: tabular-nums; }
.rr-shell {
width: 100%;
max-width: var(--rr-shell);
margin-inline: auto;
padding-inline: var(--rr-sp-4);
}
@media (min-width: 900px) { .rr-shell { padding-inline: var(--rr-sp-6); } }
.rr-sr {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rr-skip {
position: absolute; inset-inline-start: 50%; top: 0;
transform: translate(-50%, -120%);
z-index: 200; background: var(--rr-gold); color: var(--rr-inverse);
padding: .55rem 1rem; border-radius: 0 0 var(--rr-r-md) var(--rr-r-md);
font-weight: 700;
}
.rr-skip:focus { transform: translate(-50%, 0); }
/* --------------------------------------------------------------------------
3) الترويسة
-------------------------------------------------------------------------- */
.rr-header {
position: sticky; top: 0; z-index: 80;
height: var(--rr-header-h);
display: flex; align-items: center;
background: var(--rr-glass);
-webkit-backdrop-filter: saturate(1.6) blur(14px);
backdrop-filter: saturate(1.6) blur(14px);
border-bottom: 1px solid var(--rr-line-soft);
transition: background var(--rr-fast) var(--rr-ease), border-color var(--rr-fast) var(--rr-ease);
}
.rr-header[data-scrolled] { background: var(--rr-glass-2); border-bottom-color: var(--rr-line); }
.rr-header-inner { display: flex; align-items: center; gap: var(--rr-sp-4); }
.rr-brand { display: inline-flex; align-items: center; gap: .45rem; flex: 0 0 auto; }
.rr-brand img { width: 30px; height: 30px; border-radius: 9px; background: none; }
@media (min-width: 900px) { .rr-brand img { width: 34px; height: 34px; } }
/* الاسم نصّ بخطّ العرض نفسه — و`i` هي المقطع الملوّن لا حرفٌ مائل، فيُلغى الميل. */
.rr-brand-name {
font-family: var(--rr-font-display); font-weight: 800;
font-size: 1.16rem; letter-spacing: -.035em; line-height: 1;
color: var(--rr-text);
}
.rr-brand-name i { font-style: normal; color: var(--rr-gold); }
.rr-brand--footer img { width: 38px; height: 38px; }
.rr-brand--footer .rr-brand-name { font-size: 1.3rem; }
.rr-nav { display: none; align-items: center; gap: var(--rr-sp-1); margin-inline-end: auto; }
@media (min-width: 900px) { .rr-nav { display: flex; } }
/* تصنيفات الترويسة زيادةٌ مفيدة لا ضرورة: تظهر حين يتّسع المكان وحده، فلا
تزاحم «المنصات» و«اللغات» على الشاشات المتوسطة. */
.rr-nav-genre { display: none; }
@media (min-width: 1180px) { .rr-nav-genre { display: inline-flex; } }
.rr-nav > a, .rr-nav button.rr-navlink {
padding: .42rem .7rem; border-radius: var(--rr-r-pill);
font-size: var(--rr-fs-sm); font-weight: 600; color: var(--rr-text-2);
display: inline-flex; align-items: center; gap: .3rem;
transition: color var(--rr-fast) var(--rr-ease), background var(--rr-fast) var(--rr-ease);
}
.rr-nav > a:hover, .rr-nav button.rr-navlink:hover { color: var(--rr-text); background: var(--rr-surface-2); }
.rr-nav > a[aria-current="page"] { color: var(--rr-gold); background: var(--rr-gold-soft); }
.rr-header-actions { display: flex; align-items: center; gap: var(--rr-sp-1); margin-inline-start: auto; }
@media (min-width: 900px) { .rr-header-actions { margin-inline-start: 0; } }
.rr-iconbtn {
width: 38px; height: 38px; display: grid; place-items: center;
border-radius: var(--rr-r-pill); color: var(--rr-text-2);
transition: color var(--rr-fast) var(--rr-ease), background var(--rr-fast) var(--rr-ease);
}
.rr-iconbtn:hover { color: var(--rr-text); background: var(--rr-surface-2); }
.rr-iconbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rr-iconbtn--label { width: auto; padding-inline: .6rem; gap: .35rem; font-size: var(--rr-fs-xs); font-weight: 800; letter-spacing: .04em; }
/* قائمة المنصات المنسدلة */
.rr-drop { position: relative; }
.rr-drop-panel {
position: absolute; inset-inline-start: 0; top: calc(100% + 10px);
min-width: 236px; padding: var(--rr-sp-2);
background: var(--rr-raised); border: 1px solid var(--rr-line);
border-radius: var(--rr-r-lg); box-shadow: var(--rr-shadow-2);
display: grid; gap: 2px; z-index: 90;
}
.rr-drop-panel[hidden] { display: none; }
.rr-drop-panel a {
display: flex; align-items: center; gap: .6rem;
padding: .5rem .6rem; border-radius: var(--rr-r-md);
font-size: var(--rr-fs-sm); font-weight: 600;
}
.rr-drop-panel a:hover { background: var(--rr-surface-2); color: var(--rr-text); }
/* --------------------------------------------------------------------------
4) شارات المنصّة والحالة
-------------------------------------------------------------------------- */
.rr-src {
display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; overflow: hidden;
padding: .18rem .42rem; border-radius: var(--rr-r-pill);
background: color-mix(in srgb, var(--rr-source) 16%, transparent);
border: 1px solid color-mix(in srgb, var(--rr-source) 40%, transparent);
font-size: var(--rr-fs-xs); font-weight: 700; line-height: 1;
color: var(--rr-text);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.rr-src img { width: 16px; height: 16px; border-radius: 4px; background: none; flex: 0 0 auto; object-fit: contain; }
/* حزامٌ ثانٍ: أي `![]()
` داخل طبقات الملصق مقاسه من عنصره لا من الملصق. */
.rr-card-art .rr-src img { width: 16px; height: 16px; }
.rr-card-top { pointer-events: none; }
.rr-src--lg { padding: .3rem .6rem; font-size: var(--rr-fs-sm); }
.rr-src--lg img { width: 20px; height: 20px; }
.rr-src-letter {
width: 16px; height: 16px; border-radius: 4px; display: grid; place-items: center;
background: var(--rr-source); color: #fff; font-size: 10px; font-weight: 800;
}
.rr-pill {
display: inline-flex; align-items: center; gap: .25rem;
padding: .16rem .45rem; border-radius: var(--rr-r-sm);
font-size: var(--rr-fs-xs); font-weight: 700; line-height: 1.5;
background: var(--rr-surface-2); color: var(--rr-text-2);
border: 1px solid var(--rr-line-soft);
}
.rr-pill--dub { background: var(--rr-rose-soft); color: var(--rr-rose); border-color: transparent; }
.rr-pill--sub { background: var(--rr-gold-soft); color: var(--rr-gold); border-color: transparent; }
.rr-pill--fmt { font-family: var(--rr-font-num); letter-spacing: -.02em; }
/* --------------------------------------------------------------------------
5) السبوتلايت — أوّل ما يُرى، وهو صورة LCP
-------------------------------------------------------------------------- */
.rr-hero { position: relative; isolation: isolate; }
.rr-hero-track { display: flex; overflow: hidden; }
.rr-hero-slide {
position: relative; flex: 0 0 100%;
min-height: min(88vh, 640px);
display: grid; align-items: end;
}
@media (min-width: 900px) { .rr-hero-slide { min-height: 560px; } }
/* ⚠️ الشرائح غير النشطة بلا `src` من الخادم: عناصر داخل الفيوبورت يتجاهل كروم
`lazy` عليها ويحمّلها بأولوية عالية فتزاحم صورة الـLCP. الجافاسكربت يملؤها. */
.rr-hero-slide:not(.is-active) { display: none; }
.rr-hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.rr-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
/* على الحاسوب تصير الخلفية **محيطة**: مموّهة ومعتمة تملأ العرض بلون المشهد،
والصورة الحادّة تنتقل إلى بطاقة الملصق بنسبتها. */
@media (min-width: 900px) {
.rr-hero-media img { filter: blur(26px) saturate(1.35) brightness(.5); transform: scale(1.14); }
}
.rr-hero-art { display: none; }
@media (min-width: 900px) {
.rr-hero-art {
display: block; flex: 0 0 auto; width: 300px;
border-radius: var(--rr-r-xl); overflow: hidden;
box-shadow: var(--rr-shadow-2);
border: 1px solid rgba(246, 237, 228, .12);
}
.rr-hero-art img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
}
@media (min-width: 1180px) { .rr-hero-art { width: 340px; } }
/*
* ⚠️ **`linear-gradient(to inline-end, …)` غير صالح** — الاتجاهات المنطقية لا
* تُقبل في `linear-gradient()`، والقيمة غير الصالحة تُسقط **إعلان `background`
* كلَّه** بما فيه التدرّج الرأسي السليم بجانبها. النتيجة المقيسة:
* `background-image: none` على الغطاء ⇒ **لا حجاب إطلاقاً** ⇒ نصّ فاتح على
* ملصقٍ فاتح، غير مقروء تماماً.
*
* والحلّ بالاتجاهات الفيزيائية مع قلبها بـ`[dir]`. والحجاب أقوى كثيراً مما كان:
* الأغلفة هنا لا يُتحكَّم في سطوعها (تأتي من أربع منصّات)، فالحجاب يجب أن
* يفترض **أسوأ حالة**: ملصق أبيض ساطع.
*/
.rr-hero-wash {
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(to top,
var(--rr-bg) 0%,
color-mix(in srgb, var(--rr-bg) 92%, transparent) 22%,
color-mix(in srgb, var(--rr-bg) 62%, transparent) 48%,
color-mix(in srgb, var(--rr-bg) 22%, transparent) 78%,
transparent 100%),
linear-gradient(to left,
color-mix(in srgb, var(--rr-bg) 86%, transparent) 0%,
color-mix(in srgb, var(--rr-bg) 55%, transparent) 42%,
transparent 82%);
}
[dir="ltr"] .rr-hero-wash {
background:
linear-gradient(to top,
var(--rr-bg) 0%,
color-mix(in srgb, var(--rr-bg) 92%, transparent) 22%,
color-mix(in srgb, var(--rr-bg) 62%, transparent) 48%,
color-mix(in srgb, var(--rr-bg) 22%, transparent) 78%,
transparent 100%),
linear-gradient(to right,
color-mix(in srgb, var(--rr-bg) 86%, transparent) 0%,
color-mix(in srgb, var(--rr-bg) 55%, transparent) 42%,
transparent 82%);
}
.rr-hero-inner { padding-block: var(--rr-sp-6) var(--rr-sp-5); }
@media (min-width: 900px) {
.rr-hero-inner { display: flex; align-items: center; gap: var(--rr-sp-7); }
.rr-hero-copy { flex: 1 1 auto; }
}
.rr-hero-copy { max-width: 46ch; display: grid; gap: var(--rr-sp-3); }
.rr-hero-copy h1 { font-size: var(--rr-fs-3xl); }
.rr-hero-copy h2 { font-size: var(--rr-fs-2xl); unicode-bidi: plaintext; }
.rr-hero-lead { color: var(--rr-text-2); font-size: var(--rr-fs-md); max-width: 52ch; }
.rr-hero-kicker { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.rr-hero-meta { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; color: var(--rr-muted); font-size: var(--rr-fs-sm); }
.rr-hero-desc { color: var(--rr-text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rr-hero-actions { display: flex; gap: var(--rr-sp-2); flex-wrap: wrap; margin-top: var(--rr-sp-1); }
/*
* ⚠️ أزرار السبوتلايت **فوق صورة لا فوق سمة**، فلا تُشتقّ ألوانها من الرموز:
* الزرّ الشبحي في السمة الفاتحة كان نصّاً داكناً على أرضية صورةٍ داكنة (قِيس
* تباين 2.13). فهي هنا فاتحة على حاجبٍ داكن في السمتين معاً.
*/
.rr-hero-actions .rr-btn--ghost {
background: rgba(10, 4, 8, .58); color: #F6EDE4;
border-color: rgba(246, 237, 228, .34);
}
.rr-hero-actions .rr-btn--ghost:hover { background: rgba(10, 4, 8, .74); color: #fff; border-color: var(--rr-gold); }
.rr-hero-dots { display: flex; gap: .4rem; padding-block: 0 var(--rr-sp-4); }
.rr-hero-dots button {
width: 26px; height: 4px; border-radius: var(--rr-r-pill);
background: var(--rr-line); transition: background var(--rr-fast) var(--rr-ease), width var(--rr-fast) var(--rr-ease);
}
.rr-hero-dots button.is-active { background: var(--rr-gold); width: 40px; }
.rr-empty-hero {
display: grid; justify-items: center; gap: var(--rr-sp-3);
text-align: center; padding-block: var(--rr-sp-8);
}
.rr-empty-hero img { width: 68px; height: 68px; background: none; }
.rr-empty-hero p { color: var(--rr-muted); }
/* --------------------------------------------------------------------------
6) الأزرار
-------------------------------------------------------------------------- */
.rr-btn {
display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
padding: .62rem 1.05rem; border-radius: var(--rr-r-pill);
font-weight: 700; font-size: var(--rr-fs-sm); line-height: 1;
border: 1px solid transparent; white-space: nowrap;
transition: transform var(--rr-fast) var(--rr-ease), background var(--rr-fast) var(--rr-ease),
border-color var(--rr-fast) var(--rr-ease), color var(--rr-fast) var(--rr-ease);
}
.rr-btn:active { transform: translateY(1px); }
.rr-btn svg { width: 17px; height: 17px; }
.rr-btn--primary { background: var(--rr-gold); color: var(--rr-inverse); }
.rr-btn--primary:hover { background: color-mix(in srgb, var(--rr-gold) 86%, var(--rr-text)); color: var(--rr-inverse); }
.rr-btn--primary svg { fill: currentColor; }
.rr-btn--ghost { background: color-mix(in srgb, var(--rr-surface) 70%, transparent); border-color: var(--rr-line); color: var(--rr-text); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.rr-btn--ghost:hover { background: var(--rr-surface-2); color: var(--rr-text); border-color: var(--rr-gold); }
.rr-btn--quiet { color: var(--rr-text-2); }
.rr-btn--quiet:hover { color: var(--rr-gold); }
.rr-btn[aria-pressed="true"] { background: var(--rr-gold-soft); color: var(--rr-gold); border-color: transparent; }
/* --------------------------------------------------------------------------
7) الأقسام والصفوف والشبكات
-------------------------------------------------------------------------- */
.rr-section { margin-block: var(--rr-sp-6); }
.rr-section--tight { margin-block: var(--rr-sp-5); }
.rr-section-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: var(--rr-sp-3); margin-bottom: var(--rr-sp-3);
}
/* الفاصل الصغير قبل العنوان ليس زينة: يفصل الأقسام بصريّاً حيث لا خطّ يفصلها،
ويكرّر لهجة اللون مرّة واحدة في كل قسم بدل أن تتناثر في كل عنصر. */
.rr-eyebrow {
display: inline-flex; align-items: center; gap: .4rem;
font-size: var(--rr-fs-xs); font-weight: 800; letter-spacing: .1em;
text-transform: uppercase; color: var(--rr-muted);
}
.rr-eyebrow::before {
content: ""; width: 14px; height: 3px; border-radius: var(--rr-r-pill);
background: var(--rr-gold);
}
.rr-section-head h2 { font-size: var(--rr-fs-xl); margin-top: .2rem; }
@media (min-width: 900px) { .rr-section-head h2 { font-size: var(--rr-fs-2xl); } }
.rr-viewall {
display: inline-flex; align-items: center; gap: .3rem; flex: 0 0 auto;
font-size: var(--rr-fs-sm); font-weight: 700; color: var(--rr-gold);
}
.rr-viewall:hover { text-decoration: underline; text-underline-offset: 4px; }
/* الصفّ الأفقي — يمتدّ إلى حافة الشاشة على الجوّال ثم ينضبط داخل الغلاف */
.rr-rail {
display: grid; grid-auto-flow: column;
grid-auto-columns: 43vw;
gap: var(--rr-sp-3);
overflow-x: auto; overscroll-behavior-inline: contain;
scroll-snap-type: x proximity;
padding-inline: var(--rr-sp-4);
margin-inline: calc(var(--rr-sp-4) * -1);
padding-bottom: var(--rr-sp-2);
scrollbar-width: none;
}
.rr-rail::-webkit-scrollbar { display: none; }
.rr-rail > * { scroll-snap-align: start; }
@media (min-width: 640px) { .rr-rail { grid-auto-columns: 26vw; } }
@media (min-width: 900px) {
.rr-rail { grid-auto-columns: 194px; padding-inline: var(--rr-sp-6); margin-inline: calc(var(--rr-sp-6) * -1); }
}
.rr-rail--wide { grid-auto-columns: 74vw; }
@media (min-width: 640px) { .rr-rail--wide { grid-auto-columns: 44vw; } }
@media (min-width: 900px) { .rr-rail--wide { grid-auto-columns: 340px; } }
.rr-grid {
display: grid; gap: var(--rr-sp-3) var(--rr-sp-3);
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
@media (min-width: 640px) { .rr-grid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: var(--rr-sp-4); } }
@media (min-width: 900px) { .rr-grid { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); } }
.rr-grid--wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
/* --------------------------------------------------------------------------
8) البطاقة
-------------------------------------------------------------------------- */
.rr-card { position: relative; display: block; }
.rr-card-link { display: grid; gap: .5rem; }
.rr-card-art {
position: relative; overflow: hidden;
border-radius: var(--rr-r-lg);
aspect-ratio: 3 / 4; /* الملصق العموديّ هو شكل هذا النوع من المحتوى */
background: var(--rr-poster-bg);
box-shadow: var(--rr-shadow-1);
transition: transform var(--rr-slow) var(--rr-ease), box-shadow var(--rr-slow) var(--rr-ease);
}
.rr-card--landscape .rr-card-art { aspect-ratio: 16 / 9; }
/*
* ⚠️ **`> img` لا `img`** — والفرق كان عطباً فادحاً ومرئياً على كل بطاقة.
*
* شارة المنصّة تعيش **داخل** `.rr-card-art` (فوق الملصق)، وفيها `![]()
` شعارٍ
* مقاسه 16 بكسل من `.rr-src img`. والانتقاء بالسليل `.rr-card-art img` له نفس
* الخصوصية (0,1,1) لكنه **متأخّر في الملفّ**، فيفوز بالترتيب ويجعل الشعار
* `100% × 100%` من الملصق: أيقونة تطبيقٍ عملاقة تغطّي وجه كل بطاقة.
*
* والانتقاء بالابن المباشر يستثني كل ما بداخل الشارات والطبقات فوق الملصق،
* فيبقى الملصق وحده هو ما يُمدّ.
*/
.rr-card-art > img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--rr-slow) var(--rr-ease); }
@media (hover: hover) {
.rr-card:hover .rr-card-art { transform: translateY(-3px); box-shadow: var(--rr-shadow-2); }
.rr-card:hover .rr-card-art > img { transform: scale(1.045); }
}
@media (prefers-reduced-motion: reduce) {
.rr-card-art, .rr-card-art > img { transition: none; }
.rr-card:hover .rr-card-art { transform: none; }
.rr-card:hover .rr-card-art > img { transform: none; }
}
.rr-card-top {
position: absolute; inset-block-start: .4rem; inset-inline-start: .4rem;
display: flex; gap: .3rem; flex-wrap: wrap; max-width: calc(100% - .8rem);
}
.rr-card-eps {
position: absolute; inset-block-end: .4rem; inset-inline-end: .4rem;
padding: .12rem .38rem; border-radius: var(--rr-r-sm);
background: rgba(10, 4, 8, .66); color: #F6EDE4;
font-family: var(--rr-font-num); font-size: var(--rr-fs-xs); font-weight: 700;
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.rr-card-play {
position: absolute; inset: 0; display: grid; place-items: center;
opacity: 0; transition: opacity var(--rr-fast) var(--rr-ease);
background: linear-gradient(to top, rgba(10,4,8,.55), transparent 55%);
}
.rr-card-play span {
width: 42px; height: 42px; border-radius: var(--rr-r-pill);
display: grid; place-items: center;
background: var(--rr-gold); color: var(--rr-inverse);
}
.rr-card-play svg { width: 18px; height: 18px; fill: currentColor; }
@media (hover: hover) { .rr-card:hover .rr-card-play { opacity: 1; } }
.rr-card-copy { display: grid; gap: .1rem; }
/*
* ⚠️ `unicode-bidi: plaintext` — الكتالوج مختلط: عناوين عربية وإنجليزية في
* الشبكة نفسها داخل صفحة `dir="rtl"`. بدونها يُحاذى العنوان الإنجليزي يميناً
* وتظهر نقاط الاقتطاع **في أوّله** (`…rt · English subtitles`) — يبدو كنصٍّ
* مبتور. مع `plaintext` تأخذ كل فقرة اتجاهها من أوّل حرف قويّ فيها.
*/
.rr-card-copy h3 {
font-size: var(--rr-fs-sm); font-weight: 700; line-height: 1.35;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
unicode-bidi: plaintext;
}
.rr-card-sub {
font-size: var(--rr-fs-xs); color: var(--rr-muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
unicode-bidi: plaintext;
}
.rr-card-progress { height: 3px; border-radius: var(--rr-r-pill); background: var(--rr-line); overflow: hidden; }
.rr-card-progress i { display: block; height: 100%; background: var(--rr-rose); }
/* القائمة المضغوطة — العمود الجانبي في صفحة المشاهدة. */
.rr-list { display: grid; gap: .5rem; }
.rr-list-item {
display: flex; align-items: center; gap: .65rem;
padding: .4rem; border-radius: var(--rr-r-md);
transition: background var(--rr-fast) var(--rr-ease);
}
.rr-list-item:hover { background: var(--rr-surface-2); color: var(--rr-text); }
.rr-list-art {
flex: 0 0 auto; width: 52px; aspect-ratio: 3 / 4; overflow: hidden;
border-radius: var(--rr-r-sm); background: var(--rr-poster-bg);
}
.rr-list-art img { width: 100%; height: 100%; object-fit: cover; }
.rr-list-copy { display: grid; gap: .1rem; min-width: 0; }
.rr-list-copy b {
font-size: var(--rr-fs-sm); font-weight: 700; line-height: 1.3;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
unicode-bidi: plaintext;
}
.rr-list-copy span { font-size: var(--rr-fs-xs); color: var(--rr-muted); }
/* --------------------------------------------------------------------------
9) الإعلانات — محجوزة المقاس، فلا قفزة تخطيط، ولا تغطّي محتوى أبداً
-------------------------------------------------------------------------- */
.rr-ad {
display: grid; gap: .25rem; justify-items: center;
margin-block: var(--rr-sp-5);
/* الارتفاع محجوز من المتغيّر: مساحة الإعلان مقطوعة قبل وصول الشبكة، فلا يقفز
ما تحتها حين يُحقن — وقفزة التخطيط هي أكثر ما يزعج القارئ في الإعلانات. */
min-height: var(--rr-ad-h, 100px);
content-visibility: auto;
contain-intrinsic-size: auto var(--rr-ad-h, 100px);
}
.rr-ad-label {
font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
color: var(--rr-muted); opacity: .62; align-self: start;
}
.rr-ad-box {
width: 100%; max-width: var(--rr-ad-w, 336px);
min-height: var(--rr-ad-h, 100px);
display: grid; place-items: center; overflow: hidden;
border-radius: var(--rr-r-md);
}
.rr-ad-placeholder {
width: 100%; height: 100%; min-height: inherit;
display: grid; place-items: center;
border: 1px dashed var(--rr-line); border-radius: var(--rr-r-md);
color: var(--rr-muted); font-size: var(--rr-fs-xs); letter-spacing: .1em;
background: var(--rr-surface-2);
}
/* الأصيل داخل الشبكة: يأخذ خانة بطاقة بالضبط فلا يكسر الصفّ ولا يُقحم نفسه */
.rr-ad--infeed { margin: 0; align-content: start; }
.rr-ad--infeed .rr-ad-box { max-width: none; aspect-ratio: 3 / 4; min-height: 0; background: var(--rr-surface-2); border: 1px solid var(--rr-line-soft); }
.rr-ad--infeed .rr-ad-placeholder { border: 0; }
/* الشريط السفلي: فوق التنقّل لا فوقه بالمعنى الحرفيّ — لا يغطّي زرّاً ولا نصّاً */
.rr-ad--anchor {
position: fixed; inset-inline: 0; z-index: 70; margin: 0;
bottom: calc(var(--rr-nav-h) + env(safe-area-inset-bottom, 0px));
background: var(--rr-glass-2);
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border-top: 1px solid var(--rr-line-soft);
padding: .25rem 0 .3rem;
transform: translateY(105%);
transition: transform var(--rr-slow) var(--rr-ease);
}
.rr-ad--anchor.is-in { transform: translateY(0); }
@media (min-width: 900px) { .rr-ad--anchor { bottom: 0; } }
.rr-ad-close {
position: absolute; inset-block-start: -13px; inset-inline-end: 8px;
width: 26px; height: 26px; border-radius: var(--rr-r-pill);
background: var(--rr-raised); border: 1px solid var(--rr-line);
color: var(--rr-muted); display: grid; place-items: center; font-size: 15px; line-height: 1;
}
.rr-ad--sidebar { display: none; }
@media (min-width: 1100px) { .rr-ad--sidebar { display: grid; position: sticky; top: calc(var(--rr-header-h) + 16px); } }
/* --------------------------------------------------------------------------
10) صفحة المشاهدة
-------------------------------------------------------------------------- */
.rr-watch { display: grid; }
/* المسرح: خلفية محيطة من الملصق نفسه — تملأ جانبَي الفيديو العموديّ بلا
شريطين أسودين ميّتين، وهي نفس الصورة المحمَّلة أصلاً فلا بايت إضافي. */
.rr-stage {
position: relative; isolation: isolate;
background: var(--rr-bg-2);
border-bottom: 1px solid var(--rr-line-soft);
}
.rr-stage-ambient {
position: absolute; inset: 0; z-index: -1; overflow: hidden;
}
.rr-stage-ambient img {
width: 100%; height: 100%; object-fit: cover;
filter: blur(38px) saturate(1.5) brightness(.55);
transform: scale(1.18);
}
.rr-stage-ambient::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(to bottom, color-mix(in srgb, var(--rr-bg) 40%, transparent), color-mix(in srgb, var(--rr-bg) 92%, transparent));
}
.rr-player {
position: relative; margin-inline: auto;
width: 100%;
background: #000;
overflow: hidden;
aspect-ratio: 9 / 16;
max-height: min(78vh, 760px);
max-width: calc(min(78vh, 760px) * 9 / 16);
}
.rr-watch--horizontal .rr-player {
aspect-ratio: 16 / 9; max-width: 100%; max-height: min(74vh, 620px);
}
@media (min-width: 900px) {
.rr-player { border-radius: var(--rr-r-xl); box-shadow: var(--rr-shadow-2); }
}
.rr-player video { width: 100%; height: 100%; object-fit: contain; background: #000; }
/* ------- طبقات المشغّل ------- */
.rr-p-tap { position: absolute; inset: 0; z-index: 1; } /* نقر/نقرتان */
.rr-p-center {
position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
pointer-events: none;
}
.rr-p-bigplay {
width: 66px; height: 66px; border-radius: var(--rr-r-pill);
background: color-mix(in srgb, var(--rr-gold) 94%, transparent); color: #14090F;
display: grid; place-items: center; pointer-events: auto;
box-shadow: 0 8px 30px rgba(0,0,0,.45);
transition: transform var(--rr-fast) var(--rr-ease), opacity var(--rr-fast) var(--rr-ease);
}
.rr-p-bigplay svg { width: 26px; height: 26px; fill: currentColor; }
.rr-p-bigplay:hover { transform: scale(1.06); }
.rr-player.is-playing .rr-p-bigplay { opacity: 0; pointer-events: none; transform: scale(.8); }
.rr-p-spinner {
width: 44px; height: 44px; border-radius: 50%;
border: 3px solid rgba(246,237,228,.24); border-top-color: var(--rr-gold);
animation: rr-spin .9s linear infinite;
}
@keyframes rr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rr-p-spinner { animation-duration: 2.4s; } }
.rr-p-seekhint {
position: absolute; top: 50%; translate: 0 -50%;
display: grid; place-items: center; gap: .1rem;
width: 92px; height: 92px; border-radius: var(--rr-r-pill);
background: rgba(10,4,8,.5); color: #F6EDE4;
font-family: var(--rr-font-num); font-size: var(--rr-fs-sm); font-weight: 700;
opacity: 0; transition: opacity .22s var(--rr-ease);
}
.rr-p-seekhint.is-on { opacity: 1; }
.rr-p-seekhint--back { inset-inline-start: 6%; }
.rr-p-seekhint--fwd { inset-inline-end: 6%; }
.rr-p-toast {
position: absolute; inset-block-start: 12px; inset-inline-start: 50%; translate: -50% 0;
z-index: 6; padding: .3rem .7rem; border-radius: var(--rr-r-pill);
background: rgba(10,4,8,.72); color: #F6EDE4; font-size: var(--rr-fs-xs); font-weight: 700;
opacity: 0; transition: opacity .2s var(--rr-ease); pointer-events: none;
}
.rr-p-toast.is-on { opacity: 1; }
.rr-p-top {
position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 4;
display: flex; align-items: center; gap: .5rem; padding: .6rem .7rem;
background: linear-gradient(to bottom, rgba(10,4,8,.72), transparent);
color: #F6EDE4;
transition: opacity var(--rr-fast) var(--rr-ease);
}
.rr-p-eplabel { font-family: var(--rr-font-num); font-size: var(--rr-fs-sm); font-weight: 700; }
.rr-p-title { font-size: var(--rr-fs-sm); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-p-ctrl {
position: absolute; inset-block-end: 0; inset-inline: 0; z-index: 5;
padding: 1.6rem .6rem .55rem;
background: linear-gradient(to top, rgba(10,4,8,.86), rgba(10,4,8,.35) 55%, transparent);
color: #F6EDE4;
display: grid; gap: .3rem;
transition: opacity var(--rr-fast) var(--rr-ease), transform var(--rr-fast) var(--rr-ease);
}
.rr-player.is-idle .rr-p-ctrl,
.rr-player.is-idle .rr-p-top { opacity: 0; pointer-events: none; }
.rr-player.is-idle { cursor: none; }
/* شريط التقدّم: منطقة اللمس 18px بينما الخطّ 4px — إصابة الشريط على الهاتف
بأصبعٍ لا مؤشّر هي أكثر ما يفشل في المشغّلات المصنوعة يدوياً. */
.rr-p-bar { position: relative; height: 18px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.rr-p-bar-track { position: relative; width: 100%; height: 4px; border-radius: var(--rr-r-pill); background: rgba(246,237,228,.26); overflow: hidden; }
.rr-p-bar-buffer { position: absolute; inset-block: 0; inset-inline-start: 0; background: rgba(246,237,228,.36); width: 0; }
.rr-p-bar-fill { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--rr-rose); width: 0; }
.rr-p-bar-head {
position: absolute; top: 50%; translate: 50% -50%;
width: 12px; height: 12px; border-radius: 50%; background: var(--rr-rose);
inset-inline-start: 0; box-shadow: 0 0 0 4px color-mix(in srgb, var(--rr-rose) 28%, transparent);
opacity: 0; transition: opacity var(--rr-fast) var(--rr-ease);
}
.rr-p-bar:hover .rr-p-bar-head, .rr-p-bar.is-drag .rr-p-bar-head { opacity: 1; }
.rr-p-bar-tip {
position: absolute; bottom: 22px; translate: 50% 0;
padding: .1rem .35rem; border-radius: var(--rr-r-sm);
background: rgba(10,4,8,.86); font-family: var(--rr-font-num); font-size: 11px;
opacity: 0; pointer-events: none; transition: opacity var(--rr-fast) var(--rr-ease);
}
.rr-p-bar:hover .rr-p-bar-tip, .rr-p-bar.is-drag .rr-p-bar-tip { opacity: 1; }
.rr-p-row { display: flex; align-items: center; gap: .12rem; }
.rr-p-btn {
width: 36px; height: 36px; display: grid; place-items: center;
border-radius: var(--rr-r-md); color: #F6EDE4;
transition: background var(--rr-fast) var(--rr-ease), color var(--rr-fast) var(--rr-ease);
}
.rr-p-btn:hover { background: rgba(246,237,228,.14); }
.rr-p-btn[disabled] { opacity: .35; pointer-events: none; }
.rr-p-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rr-p-btn svg.rr-fill { fill: currentColor; stroke: none; }
.rr-p-time { font-family: var(--rr-font-num); font-size: var(--rr-fs-xs); letter-spacing: -.02em; padding-inline: .35rem; white-space: nowrap; }
.rr-p-time b { font-weight: 700; }
.rr-p-time span { opacity: .62; }
.rr-p-spacer { flex: 1 1 auto; }
/* الصوت: الشريط يتمدّد عند المرور — يوفّر عرضاً على الهاتف ولا يخفي الوظيفة */
.rr-p-vol { display: flex; align-items: center; }
.rr-p-vol-slider {
width: 0; opacity: 0; overflow: hidden;
transition: width var(--rr-fast) var(--rr-ease), opacity var(--rr-fast) var(--rr-ease);
}
.rr-p-vol:hover .rr-p-vol-slider, .rr-p-vol:focus-within .rr-p-vol-slider { width: 74px; opacity: 1; }
.rr-p-vol input[type="range"] {
-webkit-appearance: none; appearance: none; width: 68px; height: 18px; background: none; margin: 0 4px;
}
.rr-p-vol input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: var(--rr-r-pill); background: rgba(246,237,228,.3); }
.rr-p-vol input[type="range"]::-moz-range-track { height: 4px; border-radius: var(--rr-r-pill); background: rgba(246,237,228,.3); }
.rr-p-vol input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; background: #F6EDE4; }
.rr-p-vol input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #F6EDE4; }
/* لوحة الإعدادات */
.rr-p-menu { position: relative; }
.rr-p-menu-panel {
position: absolute; inset-block-end: calc(100% + 8px); inset-inline-end: 0;
min-width: 172px; max-height: 240px; overflow-y: auto;
padding: .3rem; border-radius: var(--rr-r-md);
background: rgba(20, 9, 15, .96); border: 1px solid rgba(246,237,228,.14);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
display: grid; gap: 1px; z-index: 7;
}
.rr-p-menu-panel[hidden] { display: none; }
.rr-p-menu-panel > b {
font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
color: rgba(246,237,228,.5); padding: .35rem .5rem .15rem;
}
.rr-p-menu-panel button {
display: flex; align-items: center; justify-content: space-between; gap: .5rem;
padding: .4rem .5rem; border-radius: var(--rr-r-sm);
font-size: var(--rr-fs-sm); color: #F6EDE4; text-align: start;
}
.rr-p-menu-panel button:hover { background: rgba(246,237,228,.12); }
.rr-p-menu-panel button[aria-checked="true"] { color: var(--rr-gold); font-weight: 700; }
.rr-p-menu-panel button[aria-checked="true"]::after { content: "✓"; }
/* التشغيل التلقائي للتالية */
.rr-p-next {
position: absolute; inset: 0; z-index: 8;
display: grid; place-items: center; gap: var(--rr-sp-3);
background: rgba(10, 4, 8, .82);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
color: #F6EDE4; text-align: center; padding: var(--rr-sp-4);
}
.rr-p-next[hidden] { display: none; }
.rr-p-next-ring { position: relative; width: 76px; height: 76px; }
.rr-p-next-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rr-p-next-ring circle { fill: none; stroke-width: 4; }
.rr-p-next-ring .bg { stroke: rgba(246,237,228,.2); }
.rr-p-next-ring .fg { stroke: var(--rr-gold); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.rr-p-next-ring b {
position: absolute; inset: 0; display: grid; place-items: center;
font-family: var(--rr-font-num); font-size: var(--rr-fs-lg); font-weight: 700;
}
.rr-p-next-actions { display: flex; gap: var(--rr-sp-2); }
/* المشغّل المصغّر اللاصق */
.rr-player.is-mini {
position: fixed; z-index: 75;
inset-block-end: calc(var(--rr-nav-h) + 10px + env(safe-area-inset-bottom, 0px));
inset-inline-end: 10px;
width: 132px; height: auto; max-width: none; max-height: none;
border-radius: var(--rr-r-md); box-shadow: var(--rr-shadow-2);
border: 1px solid var(--rr-line);
}
@media (min-width: 900px) { .rr-player.is-mini { width: 260px; inset-block-end: 16px; inset-inline-end: 16px; } }
.rr-player.is-mini .rr-p-ctrl { padding: .8rem .35rem .3rem; }
.rr-player.is-mini .rr-p-row > *:not(.rr-p-btn--play):not(.rr-p-btn--mini-close):not(.rr-p-spacer) { display: none; }
.rr-mini-anchor { display: none; }
.rr-mini-anchor.is-on { display: block; }
/* ------- شريط الحلقات (فيلمستريب) ------- */
.rr-eps { display: grid; gap: var(--rr-sp-3); }
.rr-eps-ranges { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.rr-eps-ranges::-webkit-scrollbar { display: none; }
.rr-eps-ranges button {
flex: 0 0 auto; padding: .3rem .6rem; border-radius: var(--rr-r-pill);
background: var(--rr-surface-2); border: 1px solid var(--rr-line-soft);
font-family: var(--rr-font-num); font-size: var(--rr-fs-xs); font-weight: 700; color: var(--rr-text-2);
}
.rr-eps-ranges button.is-active { background: var(--rr-gold); border-color: transparent; color: var(--rr-inverse); }
.rr-eps-list {
display: grid; gap: .4rem;
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
max-height: 268px; overflow-y: auto; padding: 2px;
}
.rr-ep {
position: relative; display: grid; place-items: center; gap: 0;
padding: .42rem .2rem; border-radius: var(--rr-r-md);
background: var(--rr-surface-2); border: 1px solid var(--rr-line-soft);
font-family: var(--rr-font-num); font-weight: 700; font-size: var(--rr-fs-sm);
color: var(--rr-text-2);
transition: background var(--rr-fast) var(--rr-ease), color var(--rr-fast) var(--rr-ease), border-color var(--rr-fast) var(--rr-ease);
}
.rr-ep small { font-size: 9px; letter-spacing: .1em; opacity: .55; font-family: var(--rr-font-body); }
.rr-ep:hover { border-color: var(--rr-gold); color: var(--rr-text); }
.rr-ep.is-active { background: var(--rr-gold); color: var(--rr-inverse); border-color: transparent; }
.rr-ep.is-watched::after {
content: ""; position: absolute; inset-block-start: 4px; inset-inline-end: 4px;
width: 5px; height: 5px; border-radius: 50%; background: var(--rr-ok);
}
.rr-ep.is-active.is-watched::after { background: var(--rr-inverse); }
/* ------- جسم صفحة المشاهدة ------- */
.rr-watch-body { display: grid; gap: var(--rr-sp-5); padding-block: var(--rr-sp-5); }
@media (min-width: 1100px) {
.rr-watch-body { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; column-gap: var(--rr-sp-6); }
.rr-watch-main { grid-column: 1; display: grid; gap: var(--rr-sp-5); }
.rr-watch-side { grid-column: 2; display: grid; gap: var(--rr-sp-4); }
.rr-watch-full { grid-column: 1 / -1; }
}
.rr-watch-main { display: grid; gap: var(--rr-sp-5); }
.rr-watch-side { display: grid; gap: var(--rr-sp-4); }
.rr-watch-head { display: grid; gap: var(--rr-sp-2); }
.rr-watch-head h1 { font-size: var(--rr-fs-2xl); unicode-bidi: plaintext; }
@media (min-width: 900px) { .rr-watch-head h1 { font-size: var(--rr-fs-3xl); } }
.rr-watch-kicker { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.rr-watch-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; color: var(--rr-muted); font-size: var(--rr-fs-sm); }
.rr-watch-meta > span { display: inline-flex; align-items: center; gap: .25rem; }
.rr-watch-actions { display: flex; gap: var(--rr-sp-2); flex-wrap: wrap; }
.rr-panel {
background: var(--rr-surface); border: 1px solid var(--rr-line-soft);
border-radius: var(--rr-r-lg); padding: var(--rr-sp-4);
display: grid; gap: var(--rr-sp-3);
}
.rr-panel > h2 { font-size: var(--rr-fs-lg); }
.rr-story p { color: var(--rr-text-2); max-width: 68ch; }
.rr-facts { display: grid; gap: .55rem; margin: 0; }
.rr-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rr-sp-3); border-bottom: 1px dashed var(--rr-line-soft); padding-bottom: .45rem; }
.rr-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.rr-facts dt { color: var(--rr-muted); font-size: var(--rr-fs-sm); margin: 0; }
.rr-facts dd { margin: 0; font-weight: 700; font-size: var(--rr-fs-sm); text-align: end; }
.rr-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.rr-tag {
padding: .28rem .62rem; border-radius: var(--rr-r-pill);
background: var(--rr-surface-2); border: 1px solid var(--rr-line-soft);
font-size: var(--rr-fs-xs); font-weight: 600; color: var(--rr-text-2);
}
.rr-tag:hover { border-color: var(--rr-gold); color: var(--rr-gold); }
/* --------------------------------------------------------------------------
11) فتات التنقّل والترقيم — روابط حقيقية يتبعها الزاحف
-------------------------------------------------------------------------- */
.rr-crumbs { font-size: var(--rr-fs-xs); color: var(--rr-muted); padding-block: var(--rr-sp-3) 0; }
.rr-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; list-style: none; }
.rr-crumbs li { display: inline-flex; align-items: center; gap: .35rem; }
.rr-crumbs li + li::before { content: "›"; opacity: .5; }
.rr-crumbs a:hover { color: var(--rr-gold); }
.rr-crumbs [aria-current] { color: var(--rr-text-2); font-weight: 600; }
.rr-pagination { display: flex; justify-content: center; margin-block: var(--rr-sp-6); }
.rr-pagination ul { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; }
.rr-pagination a, .rr-pagination span {
min-width: 38px; height: 38px; padding-inline: .6rem;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--rr-r-md); border: 1px solid var(--rr-line-soft);
background: var(--rr-surface); font-family: var(--rr-font-num);
font-size: var(--rr-fs-sm); font-weight: 700; color: var(--rr-text-2);
}
.rr-pagination a:hover { border-color: var(--rr-gold); color: var(--rr-gold); }
.rr-pagination .current { background: var(--rr-gold); color: var(--rr-inverse); border-color: transparent; }
.rr-pagination .dots { border: 0; background: none; }
/* --------------------------------------------------------------------------
12) الأرشيف والاستكشاف
-------------------------------------------------------------------------- */
.rr-page-head { display: grid; gap: var(--rr-sp-2); padding-block: var(--rr-sp-5) var(--rr-sp-4); }
.rr-page-head h1 { font-size: var(--rr-fs-2xl); }
@media (min-width: 900px) { .rr-page-head h1 { font-size: var(--rr-fs-3xl); } }
.rr-page-head p { color: var(--rr-text-2); max-width: 62ch; }
.rr-count { color: var(--rr-muted); font-size: var(--rr-fs-sm); font-family: var(--rr-font-num); }
/* ------- لوح الترشيح -------
* ⚠️ **التفاف لا تمرير أفقي، والعنوان فوق الخيارات لا في صدرها.**
* الصيغة السابقة كانت صفوفاً تُمرَّر أفقياً: العنوان يختفي عند أول تمرير،
* والخيار خارج الشاشة خيارٌ لا يعرف الزائر بوجوده — ولا مؤشّر على الجوّال
* يقول إن هناك المزيد. */
.rr-facets {
display: grid; gap: var(--rr-sp-3);
margin-bottom: var(--rr-sp-5);
padding: var(--rr-sp-4);
background: var(--rr-surface); border: 1px solid var(--rr-line-soft);
border-radius: var(--rr-r-lg);
}
.rr-facet { display: grid; gap: .45rem; }
@media (min-width: 760px) {
.rr-facet { grid-template-columns: 92px 1fr; align-items: start; gap: var(--rr-sp-3); }
}
.rr-facet + .rr-facet { border-top: 1px solid var(--rr-line-soft); padding-top: var(--rr-sp-3); }
.rr-facet-label {
font-size: var(--rr-fs-xs); font-weight: 800; letter-spacing: .08em;
text-transform: uppercase; color: var(--rr-muted); padding-top: .3rem;
}
.rr-facet-opts { display: flex; flex-wrap: wrap; gap: .4rem; }
.rr-facet--reset { border-top: 1px solid var(--rr-line-soft); padding-top: var(--rr-sp-3); }
@media (min-width: 760px) { .rr-facet--reset { grid-template-columns: 92px 1fr; } .rr-facet--reset > * { grid-column: 2; } }
.rr-chip--num { font-family: var(--rr-font-num); letter-spacing: -.02em; }
.rr-chip--reset { color: var(--rr-rose); border-color: color-mix(in srgb, var(--rr-rose) 45%, transparent); }
.rr-chip--reset:hover { background: var(--rr-rose-soft); color: var(--rr-rose); border-color: transparent; }
.rr-chip--reset svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.rr-filter-row { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.rr-filter-row > b { flex: 0 0 auto; font-size: var(--rr-fs-xs); color: var(--rr-muted); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.rr-chip {
flex: 0 0 auto; padding: .34rem .72rem; border-radius: var(--rr-r-pill);
background: var(--rr-surface); border: 1px solid var(--rr-line);
font-size: var(--rr-fs-sm); font-weight: 600; color: var(--rr-text-2);
transition: background var(--rr-fast) var(--rr-ease), color var(--rr-fast) var(--rr-ease), border-color var(--rr-fast) var(--rr-ease);
}
.rr-chip:hover { border-color: var(--rr-gold); color: var(--rr-gold); }
.rr-chip[aria-current="true"], .rr-chip.is-on { background: var(--rr-gold); border-color: transparent; color: var(--rr-inverse); }
/* ⚠️ العدّاد كان يلتصق بالاسم فيُقرأ «ReelShort10». شارة مستقلّة بأرضية
* خاصّة تفصله بلا الاعتماد على مسافةٍ يبتلعها الالتفاف. */
.rr-chip b {
font-family: var(--rr-font-num); font-size: var(--rr-fs-xs); font-weight: 700;
margin-inline-start: .45rem; padding: .05rem .3rem; border-radius: var(--rr-r-sm);
background: var(--rr-surface-2); color: var(--rr-muted); line-height: 1.45;
}
.rr-chip[aria-current="true"] b { background: color-mix(in srgb, var(--rr-inverse) 26%, transparent); color: var(--rr-inverse); }
.rr-chip { display: inline-flex; align-items: center; gap: .1rem; }
.rr-empty {
display: grid; justify-items: center; gap: var(--rr-sp-3);
text-align: center; padding-block: var(--rr-sp-8);
color: var(--rr-muted);
}
.rr-empty img { width: 56px; height: 56px; opacity: .5; background: none; }
/* شبكة المنصّات */
.rr-platform-cards { display: grid; gap: var(--rr-sp-3); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.rr-platform-card {
display: flex; align-items: center; gap: .7rem;
padding: .85rem 1rem; border-radius: var(--rr-r-lg);
background: var(--rr-surface); border: 1px solid var(--rr-line-soft);
transition: border-color var(--rr-fast) var(--rr-ease), transform var(--rr-fast) var(--rr-ease);
}
.rr-platform-card:hover { border-color: var(--rr-source); transform: translateY(-2px); color: var(--rr-text); }
.rr-platform-card img { width: 34px; height: 34px; border-radius: 9px; background: none; }
.rr-platform-card div { display: grid; }
.rr-platform-card b { font-size: var(--rr-fs-md); }
.rr-platform-card span { font-size: var(--rr-fs-xs); color: var(--rr-muted); }
.rr-platform-card i { margin-inline-start: auto; color: var(--rr-source); font-style: normal; }
/* --------------------------------------------------------------------------
13) التذييل والتنقّل السفلي
-------------------------------------------------------------------------- */
.rr-footer { background: var(--rr-bg-2); border-top: 1px solid var(--rr-line-soft); margin-top: var(--rr-sp-7); }
/* ⚠️ **عمودان على الجوّال لا عمود واحد.** أربعة أعمدة متراصّة عمودياً تعني
* تذييلاً أطول من المحتوى — وهو ما كان. والأعمدة **ثابتة المحتوى** (أربع منصّات
* · لغتان · أربعة روابط تصفّح · خمس صفحات) فلا ينمو التذييل مع الكتالوج. */
.rr-footer-grid {
display: grid; gap: var(--rr-sp-4) var(--rr-sp-5);
padding-block: var(--rr-sp-5) var(--rr-sp-4);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rr-footer-brand { grid-column: 1 / -1; }
@media (min-width: 760px) {
.rr-footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; padding-block: var(--rr-sp-6) var(--rr-sp-4); }
.rr-footer-brand { grid-column: auto; }
}
.rr-footer-brand { display: grid; gap: var(--rr-sp-3); align-content: start; }
.rr-footer-brand img { height: 32px; width: auto; background: none; }
.rr-footer-brand p { color: var(--rr-muted); font-size: var(--rr-fs-sm); max-width: 40ch; }
.rr-footer-col { display: grid; gap: .5rem; align-content: start; }
.rr-footer-col > b { font-size: var(--rr-fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--rr-muted); }
.rr-footer-col nav { display: grid; gap: .3rem; }
.rr-footer-col a { font-size: var(--rr-fs-sm); color: var(--rr-text-2); }
.rr-footer-col a:hover { color: var(--rr-gold); }
.rr-footer-tags {
display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
padding-block: var(--rr-sp-3); border-top: 1px solid var(--rr-line-soft);
}
.rr-footer-tags > b { font-size: var(--rr-fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--rr-muted); }
.rr-footer-tags nav { display: flex; flex-wrap: wrap; gap: .35rem; }
.rr-tag--more { color: var(--rr-gold); border-color: color-mix(in srgb, var(--rr-gold) 40%, transparent); }
.rr-footer-bottom {
display: flex; flex-wrap: wrap; gap: var(--rr-sp-2); justify-content: space-between;
padding-block: var(--rr-sp-4); border-top: 1px solid var(--rr-line-soft);
color: var(--rr-muted); font-size: var(--rr-fs-xs);
}
.rr-bottom-nav {
position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 78;
height: calc(var(--rr-nav-h) + env(safe-area-inset-bottom, 0px));
padding-bottom: env(safe-area-inset-bottom, 0px);
display: grid; grid-template-columns: repeat(5, 1fr);
background: var(--rr-glass-2);
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
border-top: 1px solid var(--rr-line-soft);
}
@media (min-width: 900px) { .rr-bottom-nav { display: none; } }
.rr-bottom-nav > * {
display: grid; place-items: center; gap: 1px;
font-size: 10px; font-weight: 700; color: var(--rr-muted);
}
.rr-bottom-nav svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rr-bottom-nav [aria-current="page"] { color: var(--rr-gold); }
.rr-bottom-nav .rr-nav-orb { color: var(--rr-inverse); }
.rr-nav-orb span {
width: 36px; height: 36px; border-radius: var(--rr-r-pill);
background: var(--rr-gold); display: grid; place-items: center; margin-top: -12px;
box-shadow: 0 6px 16px color-mix(in srgb, var(--rr-gold) 45%, transparent);
}
.rr-nav-orb b { color: var(--rr-muted); font-size: 10px; font-weight: 700; }
/* --------------------------------------------------------------------------
14) الألواح المنزلقة (بحث · لغة · منصّات)
-------------------------------------------------------------------------- */
.rr-sheet { position: fixed; inset: 0; z-index: 120; display: grid; align-items: end; }
.rr-sheet[hidden] { display: none; }
@media (min-width: 700px) { .rr-sheet { align-items: center; justify-items: center; } }
.rr-sheet-backdrop { position: absolute; inset: 0; background: rgba(10, 4, 8, .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.rr-sheet-panel {
position: relative; width: 100%; max-width: 560px;
background: var(--rr-raised); border: 1px solid var(--rr-line);
border-radius: var(--rr-r-xl) var(--rr-r-xl) 0 0;
padding: var(--rr-sp-4); display: grid; gap: var(--rr-sp-3);
max-height: 86vh; overflow-y: auto;
animation: rr-sheet-in .26s var(--rr-ease);
}
@media (min-width: 700px) { .rr-sheet-panel { border-radius: var(--rr-r-xl); } }
@keyframes rr-sheet-in { from { transform: translateY(14px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rr-sheet-panel { animation: none; } }
.rr-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--rr-sp-3); }
.rr-sheet-head h2 { font-size: var(--rr-fs-lg); }
.rr-sheet-x { width: 34px; height: 34px; border-radius: var(--rr-r-pill); background: var(--rr-surface-2); display: grid; place-items: center; font-size: 19px; line-height: 1; color: var(--rr-muted); }
.rr-search-form { display: flex; gap: .4rem; }
.rr-search-form input {
flex: 1 1 auto; padding: .68rem .9rem; border-radius: var(--rr-r-md);
background: var(--rr-surface-2); border: 1px solid var(--rr-line);
}
.rr-search-form input:focus { outline: 2px solid var(--rr-gold); outline-offset: 1px; }
.rr-quick { display: flex; flex-wrap: wrap; gap: .4rem; }
.rr-sheet-grid { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.rr-sheet-grid a {
display: flex; align-items: center; gap: .55rem;
padding: .6rem .7rem; border-radius: var(--rr-r-md);
background: var(--rr-surface-2); border: 1px solid var(--rr-line-soft);
font-size: var(--rr-fs-sm); font-weight: 600;
}
.rr-sheet-grid a:hover { border-color: var(--rr-gold); color: var(--rr-text); }
.rr-sheet-grid span { margin-inline-start: auto; color: var(--rr-muted); font-family: var(--rr-font-num); font-size: var(--rr-fs-xs); }
/* --------------------------------------------------------------------------
15) محتوى الصفحات الثابتة
-------------------------------------------------------------------------- */
.rr-prose { max-width: 68ch; display: grid; gap: var(--rr-sp-4); padding-block: var(--rr-sp-4) var(--rr-sp-7); }
.rr-prose h2 { font-size: var(--rr-fs-xl); margin-top: var(--rr-sp-3); }
.rr-prose h3 { font-size: var(--rr-fs-lg); }
.rr-prose p, .rr-prose li { color: var(--rr-text-2); }
.rr-prose ul, .rr-prose ol { padding-inline-start: 1.2rem; display: grid; gap: .4rem; }
.rr-prose li { list-style: disc; }
.rr-prose ol li { list-style: decimal; }
.rr-prose a { color: var(--rr-gold); text-decoration: underline; text-underline-offset: 3px; }
.rr-prose table { width: 100%; border-collapse: collapse; font-size: var(--rr-fs-sm); }
.rr-prose thead th { text-align: start; color: var(--rr-muted); font-size: var(--rr-fs-xs); text-transform: uppercase; letter-spacing: .07em; }
.rr-prose th, .rr-prose td { padding: .5rem .4rem; border-bottom: 1px solid var(--rr-line-soft); vertical-align: top; }
.rr-prose code { font-family: var(--rr-font-num); font-size: .9em; background: var(--rr-surface-2); padding: .1rem .3rem; border-radius: var(--rr-r-sm); }
.rr-table-wrap { overflow-x: auto; }
/* --------------------------------------------------------------------------
16) خدمات
-------------------------------------------------------------------------- */
[hidden] { display: none !important; }
.rr-only-desktop { display: none; }
@media (min-width: 900px) { .rr-only-desktop { display: initial; } .rr-only-mobile { display: none; } }
@media print {
.rr-header, .rr-bottom-nav, .rr-ad, .rr-sheet, .rr-stage { display: none !important; }
body { background: #fff; color: #000; }
}