/* ============ Design tokens — «التصميم 1 الذهبي» المعتمد ============ */
:root{
  /* palette — gold primary / olive secondary */
  --color-primary:#B79851; --color-primary-dark:#A48745; --color-primary-darker:#92763C;
  --color-primary-light:#C8AA63; --color-primary-active:#8C6F3A;
  --color-primary-soft:#F1EADC; --color-primary-border:#E4D3AE;
  --color-secondary:#627536; --color-secondary-dark:#495826;
  --color-secondary-soft:#E0E3D7; --color-secondary-border:#C9D2B4;
  --color-heading:#241F17; --color-heading-2:#33291B; --accent:#E4D3AE;
  --color-on-dark:#F5F1E8; /* نصّ على الأسطح الداكنة */
  --color-gold-100:#F1EADC; --color-gold-300:#D4C197; --color-gold-700:#826C3C; --color-gold-900:#4C4128;
  --color-tertiary:#8C6F3A; --color-tertiary-dark:#6E5730;
  --color-tertiary-soft:#F1EADC; --color-tertiary-border:#E4D3AE;
  /* حبر داكن على الأسطح الذهبية: أبيض على #B79851 = 75.2:1 ويفشل AA حتى
     لمعيار النص الكبير (3:1). الحبر الداكن على الذهب نفسه = 95.5:1.
     أي أن الإصلاح لا يمسّ لون الهوية إطلاقاً — يغيّر النصّ فوقه فقط. */
  --color-text-on-primary:#241F17;
  /* لون روابط النصّ: primary على الصفحة = 49.2:1، وgold-700 = 53.4:1 */
  --color-link:#826C3C;
  /* warm neutrals */
  --color-bg-page:#F7F3ED; --color-bg-header:#F5F2E9;
  --color-bg-surface:#FAF8F4; --color-bg-surface-soft:#F2EFE4;
  --color-border:#E2D8C8; --color-border-strong:#D4C4A8; --color-divider:#ECE3D3;
  --color-text-primary:#000000; --color-text-secondary:#3C3C43;
  --color-text-muted:#6F6A5F; --color-text-faint:#726C60; /* 9C9585 كان 70.2:1 */
  /* type */
  --font-arabic:'Noto Sans Arabic','Cairo','Tajawal',sans-serif; --font-arabic-alt:'Noto Sans Arabic','Tajawal','Cairo',sans-serif;
  --font-latin:'Work Sans',sans-serif; --font-quran:'Amiri Quran',serif;
  --text-hero:clamp(40px,6vw,72px); --text-h1:clamp(32px,4.5vw,52px);
  --text-h2:clamp(26px,3.4vw,36px); --text-h3:20px; --text-body:17px;
  --text-small:14px; --text-label:11px;
  /* radius */
  --radius-sm:3px; --radius-md:16px; --radius-button:14px; --radius-input:12px;
  --radius-card:22px; --radius-panel:28px; --radius-full:9999px;
  /* shadows */
  --shadow-xs:0 1px 2px rgba(31,28,22,.04); --shadow-sm:0 12px 28px rgba(31,28,22,.08);
  --shadow-md:0 14px 34px rgba(31,28,22,.09); --shadow-lg:0 12px 30px rgba(31,28,22,.14);
  --shadow-xl:0 20px 48px rgba(31,28,22,.18);
  --shadow-gold:0 10px 26px rgba(183,152,81,.28);
  --float-shadow:inset 0 1.5px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(226,216,200,.35),var(--shadow-md);
  /* glass */
  --glass-heavy:rgba(247,243,237,.72); --glass-specular:rgba(255,255,255,.75);
  /* motion */
  --dur-fast:120ms; --dur-med:260ms; --dur-slow:480ms; --ease-standard:cubic-bezier(.4,0,.2,1);
  /* 1280 كما في المرجع المعتمد «التصميم 1 - الذهبي» — قِيس في المتصفح:
     12 عنصراً بعرض 1280 مقابل صفر بعرض 1320. */
  --maxw:1280px; --pad-x:40px;
}
@media (max-width:900px){ :root{ --pad-x:20px; } }

/* ============ base ============ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-bg-page);font-family:var(--font-arabic);
  color:var(--color-text-primary);-webkit-font-smoothing:antialiased;font-size:var(--text-body)}
a{color:var(--color-link);text-decoration:none;
  transition:color var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--color-primary-darker)}
/* لا تضع border-radius هنا: تعيينه يغيّر استدارة العنصر نفسه لا حدّ التركيز فقط،
   فتتحول الحبوب (9999px) والبطاقات (22px) إلى مستطيلات 4px لحظة التركيز بالكيبورد. */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
a:active{opacity:.85}
img{max-width:100%}
::selection{background:var(--color-primary-soft)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad-x)}
/* الإخفاء بـtranslate لا بـtop سالب: ارتفاع الرابط الفعلي 56px والإزاحة كانت 48px
   فكان يبرز 8px ذهبية أعلى كل صفحة. النسبة المئوية تخفيه كاملاً أيّاً كان ارتفاعه. */
.skip-link{position:absolute;top:0;inset-inline-start:16px;background:var(--color-primary);
  color:var(--color-text-on-primary);padding:10px 20px;border-radius:0 0 12px 12px;z-index:200;font-weight:700;
  transform:translateY(-110%)}
.skip-link:focus{transform:translateY(0);color:var(--color-text-on-primary)}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important;transition-delay:0ms!important;animation-delay:0ms!important;animation-iteration-count:1!important}html{scroll-behavior:auto}}


.verse{font-family:var(--font-quran)}

/* ============ topbar & header ============ */

.topbar .wrap{padding-block:8px;display:flex;justify-content:space-between;align-items:center;font-size:13px}
.site-header{position:sticky;top:0;z-index:100;background:var(--glass-heavy);
  backdrop-filter:blur(24px) saturate(1.8);-webkit-backdrop-filter:blur(24px) saturate(1.8);
  border-bottom:1px solid var(--color-border);box-shadow:inset 0 1.5px 0 var(--glass-specular)}
.site-header .wrap{height:74px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.site-header .logo img{height:40px;width:auto;display:block}
.main-nav{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:600}
/* nowrap ضرورية: بنود القائمة عناصر flex تتقلّص، فبدونها ينكسر نصّها إلى سطرين
   ويصير ارتفاع الترويسة 80px بدل 48px في كل النطاق 901–1280px. */
.main-nav a{color:var(--color-text-secondary);padding:8px 16px;border-radius:var(--radius-full);white-space:nowrap}
.main-nav a:hover{background:var(--color-bg-surface-soft);color:var(--color-heading)}
.main-nav a{transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.main-nav a:active{background:var(--color-primary-border)}
.main-nav a.active{color:var(--color-heading);background:var(--color-primary-soft)}
/* العنصر النشط كان بلا أي رجع عند المرور لأن قيمه تساوي قيم :hover */
.main-nav a.active:hover{color:var(--color-primary-darker);background:var(--color-primary-border)}
.main-nav a.active:active{background:var(--color-primary);color:var(--color-text-on-primary)}
.search-btn{display:flex;align-items:center;gap:12px;background:var(--color-bg-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-full);padding:11px 20px;
  font-family:var(--font-arabic);font-size:14px;color:var(--color-text-muted);cursor:pointer;
  min-width:250px;justify-content:flex-start;
  transition:border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.search-btn:hover{border-color:var(--color-primary-active);color:var(--color-gold-900);box-shadow:var(--shadow-xs)}
.search-btn:active{transform:scale(.985)}
.search-btn .kbd{font-family:var(--font-latin);font-size:10.5px;color:var(--color-text-faint);
  border:1px solid var(--color-border);border-radius:6px;padding:2px 7px}
.nav-toggle{display:none;background:none;border:1px solid var(--color-border);border-radius:12px;
  width:44px;height:44px;cursor:pointer;color:var(--color-heading);align-items:center;justify-content:center;
  transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.nav-toggle:hover{background:var(--color-primary-soft);border-color:var(--color-primary-border)}
.nav-toggle:active{transform:scale(.94)}
/* البنود الستة تحتاج ~625px بعد التضييق. حقل البحث بعرضه الكامل (250px) يستهلك
   المتاح في نطاق 1101–1300 فيمنعها من الاتساع، لذا نقصره على الأيقونة حتى 1300. */
@media (max-width:1300px){
  .search-btn{min-width:0}
  .search-btn .label,.search-btn .kbd{display:none}
  .site-header .wrap{gap:20px}
  .main-nav{gap:3px;font-size:14px}
  .main-nav a{padding:8px 11px}
}
/* دون 1000px لا تتسع ستة بنود بأي تضييق معقول (المتاح ~550px) فتُسلَّم للقائمة المنسدلة */
@media (max-width:1000px){
  .main-nav{position:absolute;inset-inline:0;top:100%;background:var(--color-bg-surface);
    flex-direction:column;align-items:stretch;padding:16px;gap:4px;border-bottom:1px solid var(--color-border);
    box-shadow:var(--shadow-lg);display:none;z-index:99}
  .main-nav.open{display:flex;animation:fadeUp var(--dur-med) var(--ease-standard) both}
  .main-nav a{font-size:15px;padding:11px 16px}
  .nav-toggle{display:flex}
}
@media (max-width:600px){
  .topbar .wrap{justify-content:center;text-align:center}
  .topbar .wrap span:last-child{display:none}
}

/* ============ search overlay ============ */
.search-overlay{position:fixed;inset:0;z-index:1000;background:rgba(19,41,48,.5);
  backdrop-filter:blur(10px);display:none;align-items:flex-start;justify-content:center;padding-top:12vh}
.search-overlay.open{display:flex}
.search-panel{width:640px;max-width:90vw;background:var(--color-bg-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-panel);box-shadow:var(--shadow-xl);overflow:hidden}
.search-panel .row{display:flex;align-items:center;gap:14px;padding:20px 24px;border-bottom:1px solid var(--color-divider)}
.search-panel input{flex:1;border:none;outline:none;background:transparent;
  font-family:var(--font-arabic);font-size:17px;color:var(--color-text-primary)}
.search-panel .esc{font-family:var(--font-latin);font-size:11px;color:var(--color-text-faint);
  border:1px solid var(--color-border);border-radius:6px;padding:2px 8px}

/* ============ hero — «الذهبي»: فاتح بصورة جانبية ============ */
/* overflow:hidden يقصّ توهج الصورة (inset:-40px = 420px عرضاً) الذي كان يسبب
   تمريراً أفقياً بمقدار 15px على 390px. */

.hero1 .wrap{padding-block:72px 64px;display:grid;grid-template-columns:1fr 380px;gap:72px;align-items:center}
.hero1 .intro{animation:fadeUp .8s var(--ease-standard) both}
.hero1 .label{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--color-primary-active);margin-bottom:20px}

.hero1 .bio{font-size:18px;line-height:1.8;color:var(--color-text-secondary);margin:0 0 34px;max-width:52ch}
.hero1 .cta{display:flex;gap:14px;align-items:center;margin-bottom:44px;flex-wrap:wrap}


.hero1 .btn-primary{font-size:16px;padding:13px 28px;
  transition:transform var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard)}
.hero1 .btn-primary:hover{transform:translateY(-1px)}
.hero1 .stats-row{display:flex;gap:40px;border-top:1px solid var(--color-divider);padding-top:24px;flex-wrap:wrap}
.hero1 .stats-row b{display:block;font-weight:700;font-size:22px;color:var(--color-heading)}
.hero1 .stats-row span{font-size:13px;color:var(--color-text-muted)}
.hero1 .photo{position:relative;animation:fadeUp .8s var(--ease-standard) .15s both}
.hero1 .photo .glow{position:absolute;inset:-40px;background:radial-gradient(circle at 50% 40%,var(--color-primary-soft),transparent 70%);z-index:0}
.hero1 .photo .frame1{position:relative;border-radius:var(--radius-panel);overflow:hidden;
  border:1px solid var(--color-border);box-shadow:var(--float-shadow);background:var(--color-bg-surface)}
.hero1 .photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
@media (max-width:1000px){
  .hero1 .wrap{grid-template-columns:1fr;gap:44px}
  .hero1 .photo{max-width:340px;margin-inline:auto}
}

/* ---- المحتوى المميز ---- */
.featured-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:24px}
@media (max-width:1000px){ .featured-grid{grid-template-columns:1fr} }
.feat-main{background:var(--color-bg-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-card);padding:40px;display:flex;flex-direction:column;box-shadow:var(--shadow-xs);
  transition:box-shadow var(--dur-fast) var(--ease-standard)}
.feat-main:hover{box-shadow:var(--shadow-sm)}
.feat-main .meta{display:flex;align-items:center;gap:10px;margin-bottom:18px}
/* آخر زوج كان يفشل AA: primary-darker على primary-soft = 3.60:1 عند 12px/700.
   وgold-700 لا يكفي هنا (4.19) لأن أرضية الشريحة أفتح من أرضية الصفحة. */
.feat-main .chip{font-size:12px;font-weight:700;letter-spacing:.05em;color:var(--color-gold-900);
  background:var(--color-primary-soft);border-radius:var(--radius-full);padding:5px 14px}
.feat-main .date{font-size:13px;color:var(--color-text-faint)}
.feat-main h3{font-weight:700;font-size:32px;margin:0 0 16px}
.feat-main h3 a{color:var(--color-heading)}
.feat-main h3 a:hover{color:var(--color-primary-darker)}
.feat-main p{font-size:16px;line-height:1.85;color:var(--color-text-secondary);margin:0 0 26px;flex:1;
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.feat-main .more{font-weight:700;font-size:15px;display:inline-flex;align-items:center;gap:8px}
.feat-side{display:flex;flex-direction:column;gap:24px}
.feat-card{background:var(--color-bg-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-card);padding:26px 30px;transition:box-shadow var(--dur-fast) var(--ease-standard)}
.feat-card:hover{box-shadow:var(--shadow-sm)}
.feat-card .chip{font-size:12px;font-weight:700;border-radius:var(--radius-full);padding:4px 12px}
.feat-card .chip.gold{color:var(--color-primary-darker);background:var(--color-primary-soft)}
.feat-card .chip.olive{color:var(--color-secondary-dark);background:var(--color-secondary-soft)}
.feat-card .chip.plain{color:var(--color-text-muted);background:var(--color-bg-surface-soft)}
.feat-card h3{font-size:19px;font-weight:700;margin:14px 0 6px}
.feat-card h3 a{color:var(--color-heading)}
.feat-card h3 a:hover{color:var(--color-primary-darker)}
.feat-card p{font-size:14px;line-height:1.7;color:var(--color-text-muted);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ============ بطاقات المحتوى المميز ============
   الحياة تأتي من خلفية القسم الزخرفية ومن أيقونة دائرية محدَّدة وشريحة
   مفرَّغة الحدّ — لا من طبقات داخل البطاقة. النسخة السابقة (خيط علوي +
   زخرفة زاوية + لهجة لون لكل بطاقة) كانت تزاحم النص وتشوّش الثلاثية. */
.feat-card,.feat-main{position:relative;
  box-shadow:0 1px 2px rgba(36,31,23,.03), 0 10px 24px -18px rgba(76,65,40,.18)}
.feat-card{display:flex;flex-direction:column;
  transition:box-shadow var(--dur-med) var(--ease-standard),
             transform var(--dur-med) var(--ease-standard),
             border-color var(--dur-med) var(--ease-standard)}
.feat-card:hover,.feat-card:focus-within{transform:translateY(-3px);
  border-color:var(--color-border-strong);
  box-shadow:0 2px 4px rgba(36,31,23,.04), 0 18px 34px -20px rgba(76,65,40,.28)}
.feat-main:hover{box-shadow:0 2px 4px rgba(36,31,23,.04), 0 18px 38px -22px rgba(76,65,40,.26)}

/* السطر الأعلى: الشريحة عند حافة القراءة (يمين) والأيقونة في الطرف
   المقابل — توازنٌ يملأ عرض البطاقة بدل تكدّسهما في ركن واحد. */
.feat-card .card-top{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:18px;flex-direction:row-reverse}
.feat-card .ico{flex:none;width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;
  border:1px solid var(--color-border-strong);color:var(--color-primary-active);
  background:transparent;
  transition:border-color var(--dur-med) var(--ease-standard),
             color var(--dur-med) var(--ease-standard),
             background var(--dur-med) var(--ease-standard)}
.feat-card:hover .ico{border-color:var(--color-primary);
  background:var(--color-primary-soft);color:var(--color-gold-900)}
.feat-card .ico svg{width:17px;height:17px}

/* شريحة ممتلئة كما في التصميم المعتمد */
.feat-card .chip{border:none;padding:6px 16px;font-size:12px;font-weight:700;
  background:var(--color-primary-soft);color:var(--color-gold-900)}
.feat-card .chip.olive{background:var(--color-secondary-soft);color:var(--color-secondary-dark)}
.feat-card .chip.plain{background:var(--color-bg-surface-soft);color:var(--color-text-secondary)}

/* خيط ذهبي على الحافة العليا يوحّد البطاقات الفاتحة */
.feat-card:not(.dark){border-top:2px solid var(--color-primary)}

.feat-card h3{margin:0 0 8px;font-size:20px;line-height:1.5}
.feat-card p{margin:0}

/* ============ البطاقة الداكنة ============
   مرساة بصرية لعمود البطاقات: ثلاث بطاقات فاتحة متتالية تتساوى فتُقرأ
   قائمةً، وواحدة داكنة تُرسّخ العمود وتُبرز أرفع المواد (الكتب والأبحاث). */
.feat-card.dark{background:linear-gradient(150deg,var(--color-heading) 0%,#2E2619 60%,var(--color-gold-900) 100%);
  border-color:var(--color-gold-900);position:relative;overflow:clip}
.feat-card.dark::after{content:"";position:absolute;inset-inline-end:-40px;top:-40px;
  width:180px;height:180px;pointer-events:none;
  background:radial-gradient(circle,rgba(200,170,99,.16),transparent 68%)}
.feat-card.dark > *{position:relative;z-index:1}
.feat-card.dark h3 a{color:var(--color-on-dark)}
.feat-card.dark h3 a:hover{color:var(--color-primary-light)}
.feat-card.dark p{color:rgba(245,241,232,.72)}
.feat-card.dark .ico{border-color:rgba(228,211,174,.34);color:var(--color-primary-light)}
.feat-card.dark:hover .ico{border-color:var(--color-primary-light);
  background:rgba(228,211,174,.12);color:var(--color-primary-light)}
.feat-card.dark .chip{background:var(--color-primary);color:var(--color-text-on-primary)}

/* ---- نوافذ علمية: بطاقات ترويجية ---- */
.promo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:1000px){ .promo-grid{grid-template-columns:1fr} }
.promo-card{display:block;background:var(--color-bg-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-card);padding:36px 32px;color:inherit;
  transition:box-shadow var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
.promo-card:hover{box-shadow:var(--shadow-sm);border-color:var(--color-border-strong);color:inherit}
.promo-card .icon{width:48px;height:48px;border-radius:14px;background:var(--color-primary-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--color-primary-darker)}
.promo-card h3{font-size:21px;font-weight:700;color:var(--color-heading);margin:0 0 10px}
.promo-card p{font-size:14.5px;line-height:1.75;color:var(--color-text-muted);margin:0}
.promo-card .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px}
.promo-card .tags span{font-size:12px;color:var(--color-text-faint);border:1px solid var(--color-divider);
  border-radius:var(--radius-full);padding:3px 10px}
.promo-card.gold{background:var(--color-primary-soft);border-color:var(--color-primary-border)}
.promo-card.gold .icon{background:var(--color-bg-surface)}
.promo-card.gold p{color:var(--color-gold-700)}
.promo-card.dark{background:var(--color-heading);border-color:var(--color-heading)}
.promo-card.dark:hover{box-shadow:var(--shadow-lg)}
.promo-card.dark .icon{background:rgba(200,170,99,.18);color:var(--color-primary-light)}
.promo-card.dark h3{color:var(--color-on-dark)}
.promo-card.dark p{color:rgba(245,241,232,.72)}

/* ---- نبذة عن الشيخ ---- */
.about-band .card{background:var(--color-heading);border-radius:var(--radius-panel);padding:56px 64px;
  display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
.about-band h2{font-weight:700;font-size:26px;color:var(--color-on-dark);margin:0 0 14px}
.about-band p{font-size:16px;line-height:1.85;color:rgba(245,241,232,.75);margin:0;max-width:64ch}
@media (max-width:900px){ .about-band .card{grid-template-columns:1fr;padding:40px 32px} }

.hero{background:linear-gradient(170deg,var(--color-primary) 0%,var(--color-primary-dark) 60%,var(--color-primary-darker) 100%);
  position:relative;overflow:hidden}
.hero .mark{position:absolute;inset-inline-end:-60px;bottom:-30px;width:640px;opacity:.08;
  filter:invert(1);pointer-events:none;transform:rotate(-4deg)}
.hero .glow{position:absolute;inset-inline-start:-120px;top:-120px;width:480px;height:480px;
  border-radius:var(--radius-full);background:radial-gradient(circle,rgba(255,255,255,.1),transparent 70%);pointer-events:none}
.hero .wrap{padding-block:64px 72px;display:grid;grid-template-columns:1fr 340px;gap:72px;align-items:center;position:relative}
.hero .intro{animation:fadeUp .8s var(--ease-standard) both}
.hero .badge{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;
  letter-spacing:.04em;color:var(--accent);background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);border-radius:var(--radius-full);padding:7px 16px;margin-bottom:24px}
.hero h1{font-weight:700;font-size:clamp(38px,4.2vw,54px);line-height:1.22;color:#fff;margin:0 0 18px}
.hero .bio{font-size:17.5px;line-height:1.85;color:rgba(255,255,255,.78);margin:0 0 28px;max-width:56ch}
.hero .chips{display:flex;gap:8px;flex-wrap:wrap}
.hero .chips a{font-size:13.5px;font-weight:600;color:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.28);border-radius:var(--radius-full);padding:7px 16px}
.hero .chips a:hover{background:rgba(255,255,255,.12);color:#fff}
.hero .chips a:active{background:rgba(255,255,255,.2)}
.hero .portrait-box{position:relative;justify-self:end;animation:fadeUp .8s var(--ease-standard) .15s both}
.hero .portrait{position:relative;border-radius:170px 170px 26px 26px;overflow:hidden;
  border:1px solid rgba(255,255,255,.25);box-shadow:0 24px 60px rgba(0,0,0,.4);background:var(--color-bg-surface)}
.hero .portrait img{display:block;width:340px;aspect-ratio:4/5.2;object-fit:cover}
.hero .stats{position:absolute;bottom:-18px;inset-inline-start:50%;transform:translateX(50%);
  display:flex;gap:10px;background:rgba(255,255,255,.96);border-radius:var(--radius-full);
  padding:10px 22px;box-shadow:var(--shadow-lg);white-space:nowrap;font-size:13px;font-weight:700;color:var(--color-heading)}
.hero .stats .dot{color:var(--color-border-strong)}
@media (max-width:1000px){
  .hero .wrap{grid-template-columns:1fr;gap:48px}
  .hero .portrait-box{justify-self:center}
}
@media (max-width:480px){
  .hero .wrap{padding-block:48px 56px}
  .hero .portrait img{width:min(340px,82vw)}
  .hero .stats{font-size:12px;gap:8px;padding:9px 16px}
}

/* ============ sections ============ */
.section{padding-top:88px}

:root{
  /* نسخة ذهبية من زخرفة الهيرو: أصل --girih بخطّ var(--accent) مُعدّ لأرضية
     داكنة، وعلى بطاقة فاتحة يختفي تماماً. */
  /* نجمة ثمانية متشابكة (khatam) قابلة للتبليط — تستعملها ترويسة السيرة */
  --girih-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='208' height='208' fill='none' stroke='%23B79851' stroke-width='1.15'%3E%3Cg%3E%3Cpath d='M104 8 L128 32 L160 32 L160 64 L184 88 L160 112 L160 144 L128 144 L104 168 L80 144 L48 144 L48 112 L24 88 L48 64 L48 32 L80 32 Z'/%3E%3Cpath d='M104 40 L136 72 L136 104 L104 136 L72 104 L72 72 Z' opacity='.6'/%3E%3Cpath d='M0 8 L24 32 L24 64 L0 88' /%3E%3Cpath d='M208 8 L184 32 L184 64 L208 88'/%3E%3Cpath d='M0 128 L24 152 L24 184 L48 208'/%3E%3Cpath d='M208 128 L184 152 L184 184 L160 208'/%3E%3Cpath d='M104 168 L104 208'/%3E%3Cpath d='M104 8 L104 -32'/%3E%3C/g%3E%3C/svg%3E");
  --girih-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='194' fill='none' stroke='%23B79851' stroke-width='1.6'%3E%3Cpath d='M56 0 L112 32 L112 97 L56 129 L0 97 L0 32 Z'/%3E%3Cpath d='M56 65 L112 97 L112 162 L56 194 L0 162 L0 97 Z'/%3E%3Cpath d='M56 32 L84 48 L84 81 L56 97 L28 81 L28 48 Z' opacity='.55'/%3E%3C/svg%3E");
}

/* مع وجود سطر تعريفي يصبح الجانب الأيمن كتلة من سطرين، وmحاذاة baseline
   تلتقط خطّ أساس السطر التعريفي فيرتفع رابط «عرض الجميع» فوق العنوان.
   flex-end يحاذيه أسفل الكتلة حيث ينتمي. */
.head-row:has(.eyebrow){align-items:flex-end}
.head-row:has(.eyebrow) .all-link,.head-row:has(.eyebrow) .all-btn{margin-bottom:4px}

/* رأس القسم المرصوف — يستبدل صفّ العنوان/الوصف المتباعد */
.head-row.stacked{display:block;margin-bottom:36px}
.head-row.stacked h2{margin:0}
.head-row.stacked .sub{display:block;margin:16px 0 0;font-size:15.5px;
  line-height:1.85;max-width:56ch;color:var(--color-text-secondary)}

/* ============ السطر التعريفي فوق العنوان ============
   شرطة ذهبية قصيرة ثم نصّ صغير مُتباعد الحروف — يمنح القسم عنواناً
   من سطرين بلا إثقال. */
.eyebrow{display:inline-flex;align-items:center;gap:12px;
  font-size:13px;font-weight:700;letter-spacing:.06em;
  color:var(--color-gold-700);margin-bottom:14px}
.eyebrow::before{content:"";width:30px;height:1px;background:var(--color-primary);flex:none}
/* حشوة علوية لقسم النبذة كبقية الأقسام — بطاقته الداكنة تبدأ من حدّه */
.home .about-band{padding-top:74px}

.about-band,.benefit-band,.books-band{position:relative}
.about-band > .wrap,.books-band > .wrap{position:relative;z-index:1}
.section .wrap>.head,.head-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:30px;gap:16px;flex-wrap:wrap}
.section h2,.head-row h2{font-weight:700;font-size:29px;color:var(--color-heading);margin:0}
.section .sub{font-size:14px;color:var(--color-text-muted)}
.all-link{font-size:15px;font-weight:700}
/* الإخفاء الأولي مشروط بعمل JS — لو فشل تحميله يبقى المحتوى ظاهراً */
html.js [data-reveal]{opacity:0}
[data-reveal].in,[data-reveal].no-io{opacity:1;animation:fadeUp .7s var(--ease-standard) both}
/* stagger خفيف لبطاقات الشبكات داخل الأقسام المكشوفة بالتمرير */
html.js [data-reveal] :is(.windows-grid,.articles-grid,.milestones-grid,.books-grid)>*{opacity:0}
[data-reveal].in :is(.windows-grid,.articles-grid,.milestones-grid,.books-grid)>*{animation:fadeUp .6s var(--ease-standard) both}
[data-reveal].in :is(.windows-grid,.articles-grid,.milestones-grid,.books-grid)>*:nth-child(2){animation-delay:90ms}
[data-reveal].in :is(.windows-grid,.articles-grid,.milestones-grid,.books-grid)>*:nth-child(3){animation-delay:180ms}
[data-reveal].in :is(.windows-grid,.articles-grid,.milestones-grid,.books-grid)>*:nth-child(4){animation-delay:270ms}
[data-reveal].in :is(.windows-grid,.articles-grid,.milestones-grid,.books-grid)>*:nth-child(n+5){animation-delay:340ms}
[data-reveal].no-io :is(.windows-grid,.articles-grid,.milestones-grid,.books-grid)>*{opacity:1;animation:none}

/* ---- windows (نوافذ علمية) ---- */


.window-card.sec .card-head{border-bottom-color:var(--color-secondary)}
.window-card .card-head .t{display:flex;align-items:center;gap:12px}
.window-card .card-head .icon{width:38px;height:38px;border-radius:12px;background:var(--color-primary-soft);
  display:flex;align-items:center;justify-content:center;color:var(--color-primary)}
.window-card.sec .card-head .icon{background:var(--color-secondary-soft);color:var(--color-secondary)}

.window-card .card-head .all{font-size:13px;font-weight:700}
.window-card .item{display:block;padding:16px 24px;border-bottom:1px solid var(--color-divider);color:inherit}
.window-card .item:last-child{border-bottom:none}
.window-card .item:hover{background:var(--color-primary-soft)}
.window-card .item:active{background:var(--color-primary-border)}
.window-card.sec .item:hover{background:var(--color-secondary-soft)}
.window-card.sec .item:active{background:var(--color-secondary-border)}
.window-card .item .it{font-size:15.5px;font-weight:700;line-height:1.55;color:var(--color-heading);margin-bottom:6px}
.window-card .item .ix{font-size:13px;line-height:1.7;color:var(--color-text-muted);margin-bottom:8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.window-card .item .cat{font-size:11.5px;font-weight:700;color:var(--color-link);
  background:var(--color-primary-soft);border-radius:var(--radius-full);padding:3px 10px}

.monthly-card .mark{position:absolute;inset-inline-end:-40px;top:-10px;width:320px;opacity:.07;
  filter:invert(1);pointer-events:none}

.monthly-card .meta{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.monthly-card .chip{font-size:12px;font-weight:700;letter-spacing:.05em;color:var(--color-heading);
  background:var(--accent);border-radius:var(--radius-full);padding:5px 14px}
.monthly-card .date{font-size:12.5px;color:rgba(255,255,255,.55)}


.btn-primary{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--color-text-on-primary);
  background:var(--color-primary);border-radius:var(--radius-button);padding:11px 22px;box-shadow:var(--shadow-gold);border:none;cursor:pointer}
.btn-primary{transition:background var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.btn-primary:hover{background:var(--color-primary-light);color:var(--color-text-on-primary)}
.btn-primary:active{background:var(--color-primary-active);transform:translateY(1px)}

/* ---- verse ---- */
.verse-band{max-width:900px;margin:0 auto;padding:88px var(--pad-x) 0;text-align:center}
.verse-band p{margin:0;font-size:clamp(24px,3vw,34px);line-height:2;color:var(--color-heading)}
.verse-band .ref{font-size:14px;color:var(--color-text-muted);margin-top:0}
.verse-band .ref::before{content:'';display:block;width:56px;height:2px;border-radius:var(--radius-full);
  background:var(--color-tertiary);margin:20px auto 14px}

/* ---- media section ---- */

.series-card{flex:0 0 calc(25% - 15px);scroll-snap-align:start;background:var(--color-bg-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-card);overflow:hidden;
  transition:transform var(--dur-med) var(--ease-standard),box-shadow var(--dur-med) var(--ease-standard)}
.series-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.series-card .thumb img.cover{transition:transform var(--dur-slow) var(--ease-standard)}
.series-card:hover .thumb img.cover,.series-card:focus-within .thumb img.cover{transform:scale(1.04)}
@media (max-width:1100px){ .series-card{flex-basis:calc(33.34% - 14px)} }
@media (max-width:800px){ .series-card{flex-basis:calc(50% - 10px)} }
@media (max-width:520px){ .series-card{flex-basis:82%} }
.series-card .thumb{aspect-ratio:16/10;position:relative;overflow:hidden;background:var(--color-primary-dark);
  display:flex;align-items:center;justify-content:center}
.series-card .thumb img.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.series-card .thumb .play{width:52px;height:52px;border-radius:var(--radius-full);background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);position:relative;color:var(--color-primary)}
.series-card .thumb .type{position:absolute;bottom:12px;inset-inline-start:12px;font-size:11.5px;font-weight:700;
  background:rgba(255,255,255,.92);border-radius:var(--radius-full);padding:4px 11px;color:var(--color-heading)}
.series-card .body{padding:18px 20px 20px}
.series-card .body h3{font-size:17px;font-weight:700;margin:0 0 6px}
.series-card .body h3 a{color:var(--color-heading)}
.series-card .body h3 a:hover{color:var(--color-link)}
.series-card .body .count{font-size:13px;color:var(--color-text-muted)}


.panel{background:var(--color-bg-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-card);overflow:hidden}
.ep-row{display:flex;align-items:center;gap:18px;padding:16px 24px;border-bottom:1px solid var(--color-divider)}
.ep-row:hover{background:var(--color-bg-surface-soft)}
@media (max-width:560px){ .ep-row{gap:12px;padding:14px 16px}  }
.ep-row .play-btn{width:42px;height:42px;flex-shrink:0;border-radius:var(--radius-full);
  border:1px solid var(--color-primary-border);background:var(--color-bg-surface);display:flex;
  align-items:center;justify-content:center;cursor:pointer;color:var(--color-primary-active);
  transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.ep-row .play-btn:hover,.ep-row .play-btn.playing{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-on-primary)}
.ep-row .play-btn:active{transform:scale(.92)}
/* نبضة حلقية حول زر التشغيل أثناء العمل — transform/opacity فقط */
@keyframes pulseRing{0%{transform:scale(1);opacity:.5}75%,100%{transform:scale(1.45);opacity:0}}
.play-btn{position:relative}
.play-btn.playing::after{content:'';position:absolute;inset:-2px;border-radius:var(--radius-full);
  border:2px solid var(--color-primary);pointer-events:none;
  animation:pulseRing 1.8s var(--ease-standard) infinite}
.ep-row .tt{flex:1;min-width:0}
.ep-row .tt .t{font-size:16px;font-weight:700;color:var(--color-heading)}
.ep-row .tt .t a{color:inherit}
.ep-row .tt .t a:hover{color:var(--color-link)}
.ep-row .tt .s{font-size:13px;color:var(--color-text-muted)}
.ep-row .kind{font-size:12px;font-weight:700;color:var(--color-text-muted);
  border:1px solid var(--color-border);border-radius:var(--radius-full);padding:4px 12px;flex-shrink:0}


.khutab-row .icon{width:38px;height:38px;flex-shrink:0;border-radius:12px;background:var(--color-primary-soft);
  display:flex;align-items:center;justify-content:center;color:var(--color-primary)}
.khutab-row .t{font-size:15.5px;font-weight:700;color:var(--color-heading);margin-bottom:3px}
.khutab-row .m{font-size:12.5px;color:var(--color-text-muted)}
.panel .footer-link{display:block;text-align:center;padding:16px;font-size:14px;font-weight:700}

/* ---- player bar ---- */
@keyframes slideUpBar{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
.player-bar{position:fixed;bottom:0;inset-inline:0;z-index:150;background:var(--color-heading);
  display:none;align-items:center;gap:20px;padding:14px var(--pad-x);box-shadow:0 -10px 30px rgba(0,0,0,.25)}
.player-bar.on{display:flex;animation:slideUpBar var(--dur-slow) var(--ease-standard) both}
.player-bar .pp{width:44px;height:44px;border-radius:var(--radius-full);border:none;background:var(--color-primary);
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;color:var(--color-text-on-primary);position:relative;
  transition:background var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.player-bar .pp:hover{background:var(--color-primary-dark)}
.player-bar .pp:active{transform:scale(.92)}
.player-bar .pp.playing::after{content:'';position:absolute;inset:-2px;border-radius:var(--radius-full);
  border:2px solid rgba(255,255,255,.4);pointer-events:none;animation:pulseRing 1.8s var(--ease-standard) infinite}
@media (max-width:560px){ .player-bar{gap:12px} .player-bar .time{min-width:36px} }
.player-bar .info{flex:1;min-width:0}
.player-bar .info .t{font-size:14.5px;font-weight:700;color:#fff;margin-bottom:8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-bar .prog{display:flex;align-items:center;gap:12px}
.player-bar .time{font-family:var(--font-latin);font-size:11px;color:rgba(255,255,255,.6);min-width:44px}
.player-bar .track{flex:1;height:4px;border-radius:var(--radius-full);background:rgba(255,255,255,.18);
  position:relative;cursor:pointer}
/* الشريط صار منزلقة قابلة للتركيز: يحتاج حلقة تركيز مرئية وهدف لمس يبلغ
   24px التي يلزمها WCAG 2.2 (2.5.8). الحشوة الرأسية توسّع الهدف من 4px
   إلى 24px دون تغيير سماكة الشريط المرئية. */
/* الحشوة وحدها هي الارتفاع: كل أبناء الشريط مُطلقو الموضع فصندوق المحتوى
   صفر. 12px×2 = 24px بالضبط. */
.player-bar .track{padding-block:12px;height:auto;background:none}
.player-bar .track::before{content:"";position:absolute;inset-inline:0;top:50%;
  height:4px;margin-top:-2px;border-radius:var(--radius-full);background:rgba(255,255,255,.18)}
.player-bar .track:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.player-bar .track .fill{position:absolute;inset-inline-start:0;top:50%;height:4px;margin-top:-2px;width:0;
  border-radius:var(--radius-full);background:var(--color-primary-light)}
.player-bar .speed{font-family:var(--font-latin);font-size:12px;font-weight:600;color:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.25);border-radius:var(--radius-full);padding:4px 12px;
  flex-shrink:0;background:none;cursor:pointer}
.player-bar .speed:hover{background:rgba(255,255,255,.1)}
.player-bar .speed:active{background:rgba(255,255,255,.18)}
.player-bar .close{background:none;border:none;color:rgba(255,255,255,.6);cursor:pointer;font-size:20px;padding:4px}
.player-bar .close:hover{color:#fff}
.player-bar .close:active{color:rgba(255,255,255,.85);transform:scale(.9)}

/* ---- books band — شريط فاتح «الذهبي» ---- */
.books-band{margin-top:88px;background:var(--color-bg-surface-soft);
  border-top:1px solid var(--color-divider);border-bottom:1px solid var(--color-divider);
  position:relative;overflow:hidden}
.books-band .mark{position:absolute;inset-inline-start:-80px;top:-40px;width:560px;opacity:.04;
  pointer-events:none;transform:rotate(3deg)}
.books-band .wrap{padding-block:72px;position:relative}
.books-band h2{color:var(--color-heading)}
.books-band .sub{color:var(--color-text-muted);font-size:15px;margin-top:8px}
.books-band .all-btn{background:var(--color-bg-surface);border:1px solid var(--color-border-strong);
  border-radius:var(--radius-button);padding:11px 22px;font-weight:700;font-size:15px;color:var(--color-heading)}
.books-band .all-btn:hover{border-color:var(--color-primary-active);color:var(--color-gold-900)}
.books-band .all-btn:active{background:var(--color-primary-soft);color:var(--color-primary-darker)}
.books-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
@media (max-width:1100px){ .books-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px){ .books-grid{grid-template-columns:repeat(2,1fr)} }
.book-item{display:block;color:inherit}
.book-item .cover{aspect-ratio:3/4.2;border-radius:8px 16px 16px 8px;border:1px solid var(--color-border);
  box-shadow:var(--shadow-xs);position:relative;overflow:hidden;
  transition:transform var(--dur-med) var(--ease-standard),box-shadow var(--dur-med) var(--ease-standard)}
.book-item .cover img{width:100%;height:100%;object-fit:cover;display:block}
.book-item:hover .cover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.book-item:active .cover{transform:translateY(-2px)}
.book-item .pdf{display:flex;align-items:center;gap:6px;justify-content:center;margin-top:12px;
  font-size:12.5px;color:var(--color-text-muted)}

/* ---- benefit quote ---- */
.benefit-band{max-width:900px;margin:0 auto;padding:104px var(--pad-x);text-align:center}
.benefit-band::before{content:'';display:block;width:56px;height:3px;border-radius:var(--radius-full);
  background:var(--color-tertiary);margin:0 auto 26px}
.benefit-band .label{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--color-tertiary-dark);margin-bottom:26px}
.benefit-band blockquote{margin:0;font-weight:600;font-size:clamp(26px,3.2vw,38px);line-height:1.65;color:var(--color-heading)}
.benefit-band .line{width:36px;height:2px;background:var(--color-tertiary);margin:30px auto 0}
.benefit-band .more{display:inline-block;margin-top:22px;font-size:15px;font-weight:700}

/* ---- articles grid ---- */
.articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:1000px){ .articles-grid{grid-template-columns:1fr} }
.article-card{background:var(--color-bg-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-card);padding:30px;display:flex;flex-direction:column;
  transition:transform var(--dur-med) var(--ease-standard),box-shadow var(--dur-med) var(--ease-standard)}
.article-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.article-card .cat{font-size:12px;font-weight:700;color:var(--color-secondary);margin-bottom:14px}
.article-card .card-thumb{display:block;margin:-30px -30px 20px;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--radius-card) var(--radius-card) 0 0;background:var(--color-bg-surface-soft)}
.article-card .card-thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--dur-med) var(--ease-standard)}
.article-card:hover .card-thumb img{transform:scale(1.03)}
.filter-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.filter-chips a{font-size:13.5px;font-weight:700;color:var(--color-text-secondary);
  border:1px solid var(--color-border-strong);border-radius:var(--radius-full);padding:7px 18px;
  background:var(--color-bg-surface);
  transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.filter-chips a:hover{border-color:var(--color-primary-active);color:var(--color-gold-900);
  background:var(--color-primary-soft)}
.filter-chips a:active{transform:scale(.96);background:var(--color-primary-border);
  border-color:var(--color-primary-dark);color:var(--color-primary-active)}
/* الشريحة النشطة: تعبئة ذهبية + حدّ داخلي يزيد تمييزها عن المجاورات */
.filter-chips a.on{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-on-primary);
  box-shadow:var(--shadow-gold)}
/* بدون هذه القواعد ترث الشريحة النشطة لونها من .on فلا تعطي أي رجع بصري للتأشير */
.filter-chips a.on:hover{background:var(--color-primary-dark);border-color:var(--color-primary-dark);color:var(--color-text-on-primary)}
.filter-chips a.on:active{background:var(--color-primary-active);border-color:var(--color-primary-active);
  color:var(--color-text-on-primary);transform:scale(.96)}
.filter-chips a:focus-visible{outline-offset:3px}
.prose .article-figure{margin:0 0 1.6em;border-radius:var(--radius-md);overflow:hidden;
  border:1px solid var(--color-border)}
.prose .article-figure img{display:block;width:100%}
.prose img{max-width:100%;border-radius:var(--radius-md)}
.article-card h3{font-size:20px;font-weight:700;line-height:1.45;margin:0 0 12px}
.article-card h3 a{color:var(--color-heading)}
.article-card h3 a:hover{color:var(--color-link)}
.article-card p{font-size:14.5px;line-height:1.8;color:var(--color-text-muted);margin:0 0 20px;flex:1;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.article-card .meta{font-size:12.5px;color:var(--color-text-faint);
  border-top:1px solid var(--color-divider);padding-top:14px}

/* ---- المسيرة في سطور: خط زمني ذهبي متعرج على شريط داكن ---- */


.journey-band .wrap{padding-block:76px;position:relative}

.journey-band .all-link{color:var(--color-tertiary-border)}
.journey-band .all-link:hover{color:#fff}


/* ---- milestones ---- */

.milestones-band .wrap{padding-block:72px}
.milestones-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1000px){ .milestones-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .milestones-grid{grid-template-columns:1fr} }
.milestone{background:var(--color-bg-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-card);padding:28px;position:relative}
.milestone .year{font-weight:700;font-size:24px;color:var(--color-tertiary-dark);margin-bottom:10px}
.milestone .year::after{content:'';display:block;width:28px;height:2px;border-radius:var(--radius-full);
  background:var(--color-tertiary-border);margin-top:8px}
.milestones-grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:560px){ .milestones-grid.cols-2{grid-template-columns:1fr} }
.milestone h3{font-size:17px;font-weight:700;color:var(--color-heading);margin:0 0 8px}
.milestone p{font-size:13.5px;line-height:1.7;color:var(--color-text-muted);margin:0}


/* ============ footer — فاتح «الذهبي» ============ */
.site-footer{background:var(--color-bg-header);border-top:1px solid var(--color-border);
  position:relative;overflow:hidden;margin-top:88px}
.site-footer.flush{margin-top:0}
.site-footer .mark{position:absolute;inset-inline-end:-40px;bottom:-20px;width:420px;opacity:.04;
  pointer-events:none}
.site-footer .cols{padding-block:56px 40px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;position:relative}
@media (max-width:900px){ .site-footer .cols{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .site-footer .cols{grid-template-columns:1fr} }
.site-footer .about img{height:38px;width:auto;display:block;margin-bottom:18px}
.site-footer .about p{font-size:14px;line-height:1.8;color:var(--color-text-muted);margin:0 0 20px;max-width:36ch}
.site-footer .sponsor{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--color-text-faint)}
.site-footer .sponsor a{font-weight:700}
.site-footer nav{display:flex;flex-direction:column;gap:12px}
.site-footer nav .h{font-size:13px;font-weight:700;letter-spacing:.05em;color:var(--color-text-faint);margin-bottom:4px}
.site-footer nav a{font-size:14.5px;color:var(--color-text-secondary)}
.site-footer nav a:hover{color:var(--color-primary-darker)}
.site-footer nav a:active{color:var(--color-primary-active)}
.site-footer .bottom{border-top:1px solid var(--color-divider);position:relative}
.site-footer .bottom .wrap{padding-block:20px;display:flex;justify-content:space-between;gap:12px;
  flex-wrap:wrap;font-size:13px;color:var(--color-text-faint)}
.site-footer .bottom a{color:var(--color-text-faint)}
.site-footer .bottom a:hover{color:var(--color-primary-darker)}

/* ============ inner pages ============ */
.page-hero{background:var(--color-bg-header);position:relative;overflow:hidden;
  border-bottom:1px solid var(--color-border)}
.page-hero .mark{position:absolute;inset-inline-end:-60px;bottom:-60px;width:480px;opacity:.05;
  pointer-events:none;transform:rotate(-4deg)}
.page-hero .wrap{padding-block:52px;position:relative}
.page-hero .crumb,.bio-hero .crumb{font-size:13.5px;color:var(--color-text-muted);margin-bottom:14px;display:flex;gap:8px;flex-wrap:wrap}
.page-hero .crumb a,.bio-hero .crumb a{color:var(--color-text-muted)}
.page-hero .crumb a:hover,.bio-hero .crumb a:hover{color:var(--color-gold-900)}
.page-hero h1{font-weight:700;font-size:clamp(28px,3.6vw,44px);line-height:1.35;color:var(--color-heading);margin:0;max-width:26ch}
.page-hero .meta{display:flex;align-items:center;gap:14px;margin-top:18px;font-size:13.5px;
  color:var(--color-text-muted);flex-wrap:wrap}
.page-hero .meta .chip{background:var(--color-primary-soft);border:1px solid var(--color-primary-border);
  border-radius:var(--radius-full);padding:4px 14px;font-weight:700;color:var(--color-primary-darker)}
.page-hero .meta a.chip:hover{border-color:var(--color-primary-active);color:var(--color-gold-900)}

.content-page{padding-block:56px 88px}
.content-cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:start}
@media (max-width:1000px){ .content-cols{grid-template-columns:minmax(0,1fr)} }

/* العمود الجانبي يلاصق أثناء القراءة.
   على المقالات الطويلة كان المتن 15,893px والجانبي 576px، فيبقى بجانبه
   فراغٌ ميت بطول الصفحة كلها. اللصق يجعله يصحب القارئ بدل أن يختفي.
   ‏max-height مع تمرير داخلي يحمي من جانبٍ أطول من النافذة، والترويسة 92px. */
@media (min-width:1001px) and (min-height:620px){
  .content-cols > aside{position:sticky;top:104px;align-self:start;
    max-height:calc(100vh - 128px);overflow-y:auto;scrollbar-width:thin}
}

/* شبكة الكتب داخل عمود المحتوى أضيق من شريط الرئيسية: ستة أعمدة هناك
   تصير ~140px هنا فلا يُقرأ الغلاف. أربعة تكفي. */
.content-cols .books-grid{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){ .content-cols .books-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .content-cols .books-grid{grid-template-columns:repeat(2,1fr)} }

/* الحلقة المعروضة الآن داخل قائمة حلقات السلسلة */
.ep-row{position:relative}
.ep-row.current{background:var(--color-primary-soft)}
.ep-row.current .tt .t a{color:var(--color-gold-900)}
.ep-row.current::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;
  width:3px;background:var(--color-primary)}

/* رأس صفحة الكتاب: غلاف كبير وتفاصيل بجانبه */
.book-detail{display:grid;grid-template-columns:300px minmax(0,1fr);gap:44px;align-items:start;
  margin-bottom:12px}
@media (max-width:760px){ .book-detail{grid-template-columns:1fr;gap:28px} }
.book-detail .cv{border:1px solid var(--color-border);border-radius:8px 18px 18px 8px;
  overflow:hidden;background:var(--color-bg-surface);
  box-shadow:0 1px 2px rgba(36,31,23,.04),0 14px 30px -20px rgba(76,65,40,.28)}
.book-detail .cv img{display:block;width:100%;height:auto}
.book-detail .rows{border:1px solid var(--color-border);border-radius:var(--radius-card);
  background:var(--color-bg-surface);padding:6px 22px;margin-bottom:24px}
.book-detail .rows .row{display:flex;justify-content:space-between;align-items:center;
  gap:16px;padding:13px 0;border-bottom:1px solid var(--color-divider);font-size:15px}
.book-detail .rows .row:last-child{border-bottom:none}
.book-detail .rows .row span{color:var(--color-text-muted)}
.book-detail .rows .row b{color:var(--color-heading)}
/* صورة الوصف الموروث نسخة أخرى من الغلاف المعروض أعلاه — تُخفى عرضاً لا حذفاً */
.legacy-desc img{display:none}
.legacy-desc{margin-top:22px}
.legacy-desc p:first-child:empty{display:none}

/* ============ أصناف تستبدل سمات style المضمَّنة ============
   السمة المضمَّنة تكسر ثلاثة أشياء: لا تُعاد استعمالاً، ولا تُغطّى بـmedia
   query، وتحتاج 'unsafe-inline' في style-src لو شُدِّدت الـCSP. #}} */
.side-card .row.start{justify-content:flex-start}
.side-card .row.start a{font-weight:600}
.side-card .row.start.strong a{font-weight:700}
.side-card .row.center{justify-content:center}
.side-card .row.center a{font-weight:700}
.side-card.flush{padding:0;overflow:hidden}
.side-card.flush img{display:block;width:100%;height:auto}
.src-note{color:var(--color-text-muted);font-size:14.5px}
.head-center{text-align:center;margin-bottom:40px}
.head-center h2{margin-bottom:10px}
.head-center .sub{font-size:16px;margin:0}
/* صنفان لا واحد: طيّ ثلاث قيم هوامش مختلفة في صنف واحد نقل الرئيسية 7px
   وصفحة المادة 8px. tight لرأس شريط الرئيسية، وinset لرؤوس الأقسام داخل
   المتن (الكتب والمواد) — وهما موحَّدان بقصد على إيقاع واحد. */
.head-row.tight{margin-bottom:36px}
.head-row.inset{margin:40px 0 20px}
.head-row.inset h2,.panel-title{font-size:21px}
.panel-title{font-size:20px;font-weight:700;color:var(--color-heading);margin:0 0 18px}
.btn-primary.lg{font-size:16px;padding:14px 30px}
.search-hint{display:flex;gap:8px;padding:16px 24px 22px;flex-wrap:wrap;
  font-size:13px;color:var(--color-text-muted)}
.search-btn .label{flex:1;text-align:start}
.player-bar .info .now{display:flex;align-items:center;gap:8px}
.coming-soon{color:var(--color-text-muted);margin-top:20px}
.benefit-band.compact{padding-block:64px}

/* عمود واحد لصفحات لا تحتاج جانباً (الكتب): المتن كامل العرض بحدّ قراءة */
.content-single{display:block}
.content-single > .prose{max-width:none}
.content-single > .prose > p,.content-single > .prose > h2,
.content-single > .prose > h3,.content-single > .prose > ul,
.content-single > .prose > ol,.content-single > .prose > blockquote{max-width:74ch}

.prose{font-size:17.5px;line-height:1.95;color:var(--color-text-secondary);max-width:74ch}
.prose p{margin:0 0 1.2em}
.prose h2,.prose h3{font-weight:700;color:var(--color-heading);line-height:1.4;margin:1.8em 0 .7em}
.prose h2{font-size:26px}
.prose h3{font-size:21px}
.prose blockquote{margin:1.5em 0;padding:18px 24px;border-inline-start:3px solid var(--color-primary);
  background:var(--color-primary-soft);border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--color-heading)}
.prose ul,.prose ol{padding-inline-start:1.4em;margin:0 0 1.2em}
.prose li{margin-bottom:.4em}
.prose a{font-weight:600;border-bottom:1px solid var(--color-primary-border)}
.prose .table-wrap,.prose table{max-width:100%}
.prose .table-wrap{overflow-x:auto;margin:1.5em 0}
.prose table{border-collapse:collapse;width:100%;font-size:15px}
.prose td,.prose th{border:1px solid var(--color-border);padding:10px 14px;text-align:start}
.prose th{background:var(--color-bg-surface-soft);color:var(--color-heading);font-weight:700}
.side-card{background:var(--color-bg-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-card);padding:26px;margin-bottom:24px}
.side-card .h{font-size:16px;font-weight:700;color:var(--color-heading);margin:0 0 16px}
.side-card .row{display:flex;justify-content:space-between;font-size:14px;padding-block:8px;
  border-bottom:1px solid var(--color-divider);color:var(--color-text-muted)}
.side-card .row:last-child{border-bottom:none}
.side-card .row b{color:var(--color-heading);font-weight:700}

/* listing pages */
.listing{padding-block:56px 40px}
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:1000px){ .cards-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .cards-grid{grid-template-columns:1fr} }
.media-card{background:var(--color-bg-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-card);overflow:hidden;
  transition:transform var(--dur-med) var(--ease-standard),box-shadow var(--dur-med) var(--ease-standard)}
.media-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.media-card .thumb{overflow:hidden}
.media-card .thumb img{transition:transform var(--dur-slow) var(--ease-standard)}
.media-card:hover .thumb img{transform:scale(1.04)}
.media-card .thumb{aspect-ratio:16/10;position:relative;background:var(--color-primary-dark)}
.media-card .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media-card .thumb .type{position:absolute;bottom:12px;inset-inline-start:12px;font-size:11.5px;
  font-weight:700;background:rgba(255,255,255,.92);border-radius:var(--radius-full);padding:4px 11px;color:var(--color-heading)}
.media-card .body{padding:18px 20px}
.media-card .body h3{font-size:16.5px;font-weight:700;line-height:1.5;margin:0 0 6px}
.media-card .body h3 a{color:var(--color-heading)}
.media-card .body h3 a:hover{color:var(--color-link)}
.media-card .body .m{font-size:13px;color:var(--color-text-muted)}
/* بطاقات المكتبة: غلاف طولي كامل */
.media-card .thumb.book-thumb{aspect-ratio:3/4.2;background:var(--color-bg-surface-soft)}
.media-card .thumb.book-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-med) var(--ease-standard)}
.book-card:hover .thumb.book-thumb img{transform:scale(1.02)}
/* الأغلفة طولية (3/4.2): عمود واحد على الجوال يجعل كل كتاب شاشةً كاملة
   (~490px للغلاف وحده). عمودان يحفظان قراءة «الرفّ» ويقلّصان التمرير للنصف. */
@media (max-width:640px){
  .cards-grid.books-cards{grid-template-columns:repeat(2,1fr);gap:16px}
  .cards-grid.books-cards .body{padding:14px 14px 16px}
  .cards-grid.books-cards .body h3{font-size:14.5px;line-height:1.45}
  .cards-grid.books-cards .body .m{font-size:12px}
}

.pagination{display:flex;justify-content:center;align-items:center;gap:8px;padding-block:40px;flex-wrap:wrap}
.pagination a,.pagination span{min-width:40px;height:40px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:var(--radius-full);border:1px solid var(--color-border);
  font-size:14px;font-weight:700;color:var(--color-text-secondary);padding-inline:12px;
  transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
/* أسهم السابق/التالي: نص + أيقونة */
.pagination .pg-arrow{gap:6px;padding-inline:16px}
.pagination .pg-arrow.is-off{opacity:.4;border-style:dashed;color:var(--color-text-faint)}
.pagination .pg-gap{border:none;min-width:20px;padding-inline:0;color:var(--color-text-faint)}
.pagination .pg-nums{display:inline-flex;align-items:center;gap:8px;border:none;min-width:0;padding:0;height:auto}
/* حالة مختصرة «11 / 22» تحل محل الأرقام على الجوال.
   direction:ltr لازمة: داخل سياق RTL تعيد خوارزمية bidi ترتيب «رقم / رقم»
   حول الشرطة المحايدة فتُقرأ «22 / 11» — أي العكس تماماً. */
.pagination .pg-status{display:none;border:none;min-width:0;padding-inline:14px;
  font-family:var(--font-latin);font-variant-numeric:tabular-nums;color:var(--color-text-secondary);
  direction:ltr;unicode-bidi:isolate}
@media (max-width:560px){
  .pagination{gap:8px}
  .pagination .pg-arrow span{display:none}
  .pagination .pg-arrow{padding-inline:12px}
  .pagination .pg-nums{display:none}
  .pagination .pg-status{display:inline-flex}
}
.pagination a:hover{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-on-primary)}
.pagination a:active{background:var(--color-primary-active);border-color:var(--color-primary-active);color:#fff}
.pagination .current{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-on-primary);
  box-shadow:var(--shadow-gold)}
/* رقم الصفحة الحالية رابط أيضاً، وقيَمه تساوي قيَم :hover فلا يظهر أي رجع بصري */
.pagination a.current:hover{background:var(--color-primary-dark);border-color:var(--color-primary-dark);color:var(--color-text-on-primary)}
.pagination a.current:active{background:var(--color-primary-active);border-color:var(--color-primary-active);color:#fff}

/* media show page */
.player-hero{background:var(--color-heading);border-radius:var(--radius-card);padding:34px;color:#fff;margin-bottom:32px}
.player-hero .yt{position:relative;aspect-ratio:16/9;border-radius:var(--radius-md);overflow:hidden;background:#000}
.player-hero .yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.audio-player{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.audio-player .pp{width:56px;height:56px;border-radius:var(--radius-full);border:none;background:var(--color-secondary);
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;color:#fff;
  transition:background var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.audio-player .pp:hover{background:var(--color-secondary-dark)}
.audio-player .pp:active{transform:scale(.94)}
.audio-player .pp:focus-visible{outline-color:var(--accent)}
.audio-player .pp.playing::after{border-color:rgba(255,255,255,.4)}
.audio-player .ap-info{flex:1 1 200px;min-width:0}
.audio-player .ap-title{font-size:16px;font-weight:700;margin-bottom:4px;line-height:1.5}
.audio-player .ap-sub{font-size:13px;color:rgba(255,255,255,.62)}
.audio-player .dl{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;
  color:var(--accent);flex-shrink:0;border:1px solid rgba(255,255,255,.25);
  border-radius:var(--radius-full);padding:7px 18px;
  transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.audio-player .dl:hover{background:rgba(255,255,255,.1);color:#fff}
.audio-player .dl:active{background:rgba(255,255,255,.16);transform:scale(.97)}
.audio-player .dl:focus-visible{outline-color:var(--accent)}
/* ≤640: الصف الواحد لا يتسع (56+نص+زر تحميل) فينهار العنوان إلى 6 أسطر —
   نُنزل زر التحميل إلى سطر كامل ونقلّص حشو البطاقة. */
@media (max-width:640px){
  .player-hero{padding:20px}
  .audio-player{gap:14px}
  .audio-player .pp{width:48px;height:48px}
  .audio-player .ap-info{flex:1 1 calc(100% - 62px)}
  .audio-player .ap-title{font-size:15px}
  .audio-player .dl{flex:1 0 100%;justify-content:center}
}
/* التنقل بين حلقات السلسلة */
.ep-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:32px}
.ep-nav .prev{grid-column:1}
.ep-nav .next{grid-column:2}
.ep-nav-btn{display:flex;flex-direction:column;gap:6px;background:var(--color-bg-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-md);padding:14px 18px;
  transition:border-color var(--dur-fast) var(--ease-standard),transform var(--dur-med) var(--ease-standard),box-shadow var(--dur-med) var(--ease-standard)}
.ep-nav-btn:hover{border-color:var(--color-primary-active);transform:translateY(-2px);box-shadow:var(--shadow-xs)}
.ep-nav-btn:active{transform:translateY(0)}
.ep-nav-btn .dir{font-size:12px;font-weight:700;color:var(--color-text-muted)}
.ep-nav-btn .t{font-size:14.5px;font-weight:700;color:var(--color-heading);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.ep-nav .next{text-align:end;align-items:flex-end}
@media (max-width:560px){
  .ep-nav{grid-template-columns:1fr}
  .ep-nav .prev,.ep-nav .next{grid-column:auto}
  .ep-nav .next{text-align:start;align-items:flex-start}
}

/* مادة مرئية بلا مصدر بعد — بديل صريح عن صفحة خرساء */
.pending-media{display:flex;align-items:center;gap:16px;
  background:var(--color-bg-surface);border:1px dashed var(--color-border-strong);
  border-radius:var(--radius-card);padding:22px 26px;margin-bottom:26px}
.pending-media .ico{flex:none;width:40px;height:40px;border-radius:50%;display:grid;
  place-items:center;color:var(--color-primary-active);
  border:1px solid var(--color-border-strong)}
.pending-media .ico svg{width:20px;height:20px}
.pending-media p{margin:0;font-size:15.5px;line-height:1.8;color:var(--color-text-secondary)}

/* ============ السيرة الذاتية — أُعيد بناؤها 2026-09-10 ============ */

/* ترويسة السيرة: أرقى من page-hero العامة، وتُقدّم الاسم لا عنوان القسم.
   زخرفة girih نفسها المستعملة في هيرو الرئيسية لوحدة اللغة البصرية. */
.bio-hero{position:relative;overflow:clip;padding:44px 0 56px;
  background:linear-gradient(170deg,var(--color-bg-header) 0%,var(--color-bg-page) 62%);
  border-bottom:1px solid var(--color-border)}
.bio-hero .girih{position:absolute;inset:0;pointer-events:none;
  background-image:var(--girih-star);background-size:208px 208px;opacity:.42;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 72%);
          mask-image:linear-gradient(to bottom,#000,transparent 72%)}
.bio-hero .glow{position:absolute;inset-inline-end:-160px;top:-180px;width:620px;height:620px;
  pointer-events:none;background:radial-gradient(circle,rgba(183,152,81,.14),transparent 68%)}
.bio-hero > .wrap{position:relative;z-index:1}
.bio-hero .crumb{margin-bottom:26px}

/* الهوية أولاً ثم الصورة: في RTL يضع هذا النصّ يميناً والصورة يساراً —
   نمط الهيرو في المرجع المعتمد وفي الرئيسية (قِيس: العنوان يمين،
   الصورة x=81 يساراً). كانت السيرة معكوسة عنهما. */
.bio-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 284px;gap:52px;align-items:center}
@media (max-width:900px){
  .bio-hero-grid{grid-template-columns:minmax(0,1fr);gap:30px;justify-items:center;text-align:center}
  .bio-hero-grid .portrait{max-width:240px}
  /* على الجوال تنهار الشبكة لعمود واحد فيسبق النصُّ الصورةَ بترتيب الوسم.
     وهيرو الرئيسية يقدّم الصورة على الجوال — فتُوحَّد الصفحتان: الصورة
     أولاً على الضيّق، والنصُّ يميناً والصورة يساراً على العريض. */
  .bio-hero-grid .portrait{order:-1}
}

/* الصورة بإطار وحلقة ذهبية — نفس معالجة صورة هيرو الرئيسية */
.bio-hero .portrait{position:relative;width:100%}
.bio-hero .portrait .ring{position:absolute;inset:-12px;border-radius:26px;
  border:1px solid var(--color-primary-border);pointer-events:none}
.bio-hero .portrait .frame{border-radius:20px;overflow:hidden;
  border:1px solid var(--color-border-strong);background:var(--color-bg-surface);
  box-shadow:0 2px 4px rgba(36,31,23,.05),0 26px 54px -28px rgba(76,65,40,.4)}
.bio-hero .portrait img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  object-position:50% 18%}

.bio-hero .ident h1{font-weight:800;font-size:clamp(30px,4vw,46px);line-height:1.25;
  letter-spacing:-.01em;color:var(--color-heading);margin:0 0 14px}
.bio-hero .ident .role{font-size:16.5px;line-height:1.9;color:var(--color-text-secondary);
  margin:0;max-width:56ch}
@media (max-width:900px){ .bio-hero .ident .role{margin-inline:auto} }

/* شرائح المسار: العام بخط لاتيني مُجدوَل ليتراصف رأسياً */
.bio-hero .facts{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:24px 0 0}
@media (max-width:900px){ .bio-hero .facts{justify-content:center} }
.bio-hero .facts li{display:inline-flex;align-items:baseline;gap:8px;
  background:var(--color-bg-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-full);padding:7px 16px;font-size:13.5px}
.bio-hero .facts b{font-family:var(--font-latin);font-variant-numeric:tabular-nums;
  font-weight:700;color:var(--color-gold-700)}
.bio-hero .facts span{color:var(--color-text-secondary)}
.bio-hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
@media (max-width:900px){ .bio-hero .cta{justify-content:center} }
.bio-hero .cta .btn-quiet{cursor:pointer;font-family:inherit}

/* ============ تخطيط السيرة: قائمة لاصقة + متن ============ */
.bio-page{padding:56px 0 20px}
.bio-layout{display:grid;grid-template-columns:236px minmax(0,1fr);gap:56px;align-items:start}
@media (max-width:1000px){ .bio-layout{grid-template-columns:minmax(0,1fr);gap:28px} }

.bio-nav{display:flex;flex-direction:column;gap:2px}
@media (min-width:1001px){ .bio-nav{position:sticky;top:104px} }
@media (max-width:1000px){
  .bio-nav{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:6px;
    scrollbar-width:none}
  .bio-nav::-webkit-scrollbar{display:none}
  .bio-nav a{white-space:nowrap;border-radius:var(--radius-full);
    border:1px solid var(--color-border);padding:8px 16px}
}
.bio-nav a{display:block;font-size:14.5px;font-weight:600;color:var(--color-text-muted);
  padding:10px 16px;border-radius:10px;
  transition:color var(--dur-fast) var(--ease-standard),
             background var(--dur-fast) var(--ease-standard)}
.bio-nav a:hover{color:var(--color-gold-900);background:var(--color-primary-soft)}
/* الحدّ الذهبي يُعلن القسم المقروء الآن (يُدار بالسكربت) */
@media (min-width:1001px){
  .bio-nav a{border-inline-start:2px solid var(--color-divider);border-radius:0 10px 10px 0}
  .bio-nav a.on{border-inline-start-color:var(--color-primary);
    color:var(--color-gold-900);background:var(--color-primary-soft)}
}
@media (max-width:1000px){
  .bio-nav a.on{border-color:var(--color-primary-active);color:var(--color-gold-900);
    background:var(--color-primary-soft)}
}

.bio-section{margin-bottom:54px;scroll-margin-top:112px}
.bio-section:last-child{margin-bottom:24px}
.bio-section h2{position:relative;font-size:24px;font-weight:700;color:var(--color-heading);
  margin:0 0 20px;padding-bottom:14px}
.bio-section h2::after{content:'';position:absolute;bottom:0;inset-inline-start:0;
  width:46px;height:3px;border-radius:2px;
  background:linear-gradient(to left,var(--color-primary),var(--color-primary-light))}

/* ============ المسار الزمني ============
   بديل شبكة البطاقات الأربع المتجاورة: السيرة العلمية تتابعٌ في جوهرها،
   والشبكة لا تُظهر التتابع. الخطّ الرأسي عند حافة القراءة (يمين في RTL). */
.bio-timeline{list-style:none;margin:0;padding:0;position:relative}
.bio-timeline::before{content:'';position:absolute;inset-block:10px 10px;
  inset-inline-start:7px;width:2px;border-radius:1px;
  background:linear-gradient(to bottom,var(--color-primary-border),var(--color-divider))}
.bio-timeline li{position:relative;padding-inline-start:38px;padding-bottom:30px}
.bio-timeline li:last-child{padding-bottom:0}
.bio-timeline .node{position:absolute;inset-inline-start:0;top:6px;width:16px;height:16px;
  border-radius:50%;background:var(--color-bg-page);
  border:2px solid var(--color-primary);
  box-shadow:0 0 0 4px var(--color-primary-soft)}
.bio-timeline .yr{font-family:var(--font-latin);font-variant-numeric:tabular-nums;
  font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--color-gold-700);
  margin-bottom:6px}
.bio-timeline h3{font-size:18.5px;font-weight:700;color:var(--color-heading);margin:0 0 6px}
.bio-timeline p{font-size:15px;line-height:1.85;color:var(--color-text-secondary);margin:0}

/* ============ قوائم نصوص السيرة ============
   المحتوى الموروث صار <ol> صحيحة بعد `php artisan bio:normalize`،
   فتُنسَّق كقائمة مرقّمة بأرقام ذهبية بدل نقاط المتصفح الافتراضية. */
.bio-list ol{list-style:none;counter-reset:bio;margin:0;padding:0}
.bio-list ol li{counter-increment:bio;position:relative;
  padding-inline-start:44px;padding-block:12px;
  border-bottom:1px solid var(--color-divider);font-size:16.5px;line-height:1.9}
.bio-list ol li:last-child{border-bottom:none}
.bio-list ol li::before{content:counter(bio);position:absolute;inset-inline-start:0;top:12px;
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-latin);font-size:12.5px;font-weight:700;
  color:var(--color-gold-900);background:var(--color-primary-soft);
  border:1px solid var(--color-primary-border)}
.bio-list > p:first-child{font-weight:700;color:var(--color-heading);margin-bottom:10px}

/* الإجازات: بطاقة مميّزة — هي أرفع ما في السيرة العلمية */
.ijaza-card{background:var(--color-bg-surface);border:1px solid var(--color-primary-border);
  border-radius:var(--radius-card);padding:26px 30px;
  box-shadow:0 1px 2px rgba(36,31,23,.03),0 10px 24px -18px rgba(76,65,40,.18)}
.ijaza-card p{margin:0 0 10px}
.ijaza-card p:last-child{margin-bottom:0}

/* ============ النتاج العلمي ============ */
.output-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
@media (max-width:640px){ .output-grid{grid-template-columns:1fr} }
.out-card{display:block;text-align:center;color:inherit;
  background:var(--color-bg-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-card);padding:26px 20px;
  box-shadow:0 1px 2px rgba(36,31,23,.03),0 10px 24px -18px rgba(76,65,40,.18);
  transition:transform var(--dur-med) var(--ease-standard),
             box-shadow var(--dur-med) var(--ease-standard),
             border-color var(--dur-med) var(--ease-standard)}
.out-card:hover,.out-card:focus-visible{transform:translateY(-3px);
  border-color:var(--color-border-strong);
  box-shadow:0 2px 4px rgba(36,31,23,.04),0 18px 34px -20px rgba(76,65,40,.28)}
.out-card .ico{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  margin:0 auto 14px;border:1px solid var(--color-border-strong);
  color:var(--color-primary-active);
  transition:border-color var(--dur-med) var(--ease-standard),
             background var(--dur-med) var(--ease-standard)}
.out-card:hover .ico{border-color:var(--color-primary-active);background:var(--color-primary-soft)}
.out-card .ico svg{width:19px;height:19px}
.out-card b{display:block;font-family:var(--font-latin);font-variant-numeric:tabular-nums;
  font-size:34px;font-weight:800;line-height:1;color:var(--color-heading)}
.out-card .lbl{display:block;font-size:14px;color:var(--color-text-muted);margin-top:8px}

/* ============ الطباعة ============
   السيرة أول ما يُطبع من موقع عالم — فلها ورقة نظيفة: بلا ترويسة ولا
   تذييل ولا قائمة تنقّل ولا زخرفة، والصورة والنصّ فقط. */
@media print{
  .site-header,.site-footer,.bio-nav,.bio-hero .girih,.bio-hero .glow,
  .bio-hero .cta,.scroll-progress,.to-top,.player-bar,.search-overlay,.skip-link{display:none!important}
  .bio-hero{padding:0 0 18px;background:none;border-bottom:1px solid #ccc}
  .bio-hero-grid{grid-template-columns:150px 1fr;gap:22px}
  .bio-layout{grid-template-columns:1fr;gap:0}
  .bio-page{padding:14px 0 0}
  .bio-section{margin-bottom:22px;page-break-inside:avoid}
  .out-card{box-shadow:none}
  a[href]::after{content:''}
  body{background:#fff}
}


/* السلاسل بالرئيسية «الذهبي»: شبكة 4 أعمدة */
.series-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:40px}
@media (max-width:1100px){ .series-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .series-grid{grid-template-columns:1fr} }

/* ============ حِزمة الحيوية — حركات وتمييزات «الذهبي» ============ */

/* مدخل الهيرو المتدرج */
.hero1 .intro > *{opacity:0;animation:fadeUp .7s var(--ease-standard) both}
.hero1 .intro > :nth-child(1){animation-delay:.05s}
.hero1 .intro > :nth-child(2){animation-delay:.14s}
.hero1 .intro > :nth-child(3){animation-delay:.23s}
.hero1 .intro > :nth-child(4){animation-delay:.32s}
.hero1 .intro > :nth-child(5){animation-delay:.41s}

/* تنفس التوهج خلف الصورة + Ken Burns هادئ */
@keyframes glowPulse{0%,100%{opacity:.65;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
.hero1 .photo .glow{animation:glowPulse 7s var(--ease-standard) infinite}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.045)}}
.hero1 .photo img{animation:kenburns 16s ease-in-out infinite alternate}

/* خط تمييز ذهبي يُرسم تحت عناوين الأقسام عند ظهورها */
.section .head-row h2,.books-band .head-row h2,.section .wrap > div > h2{position:relative;padding-bottom:14px}
.section .head-row h2::after,.books-band .head-row h2::after,.section .wrap > div > h2::after{
  content:'';position:absolute;bottom:0;inset-inline-start:0;width:46px;height:3px;border-radius:2px;
  background:linear-gradient(to left,var(--color-primary),var(--color-primary-light));
  transform:scaleX(0);transform-origin:100% 50%;
  transition:transform var(--dur-slow) var(--ease-standard) .15s}
[dir="rtl"] .section .head-row h2::after{transform-origin:100% 50%}
.section .wrap > div > h2::after{inset-inline-start:50%;margin-inline-start:-23px;transform-origin:50% 50%}
[data-reveal].in .head-row h2::after,[data-reveal].in .wrap > div > h2::after,
[data-reveal].in h2::after{transform:scaleX(1)}
[data-reveal].no-io h2::after{transform:scaleX(1);transition:none}

/* شريط تقدم القراءة أعلى الصفحة */
.scroll-progress{position:fixed;top:0;inset-inline:0;height:3px;z-index:300;pointer-events:none;
  background:linear-gradient(to left,var(--color-primary),var(--color-primary-light));
  transform:scaleX(0);transform-origin:100% 50%}

/* ظل الهيدر عند التمرير */
.site-header{transition:box-shadow var(--dur-med) var(--ease-standard)}
.site-header.scrolled{box-shadow:inset 0 1.5px 0 var(--glass-specular),0 8px 24px rgba(31,28,22,.08)}

/* زر العودة لأعلى */
.to-top{position:fixed;bottom:24px;inset-inline-start:20px;z-index:140;width:46px;height:46px;
  border-radius:var(--radius-full);border:none;cursor:pointer;background:var(--color-primary);color:var(--color-text-on-primary);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-gold);
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity var(--dur-med) var(--ease-standard),transform var(--dur-med) var(--ease-standard),background var(--dur-fast) var(--ease-standard)}
.to-top.show{opacity:1;transform:translateY(0);pointer-events:auto}
.to-top:hover{background:var(--color-primary-dark)}
.to-top:active{transform:scale(.94)}
body.player-on .to-top{bottom:96px}

/* موجات «قيد التشغيل» في شريط المشغل */
.player-bar .eq{display:none;align-items:flex-end;gap:3px;height:18px;margin-inline-start:4px;flex-shrink:0}
.player-bar .eq i{width:3px;border-radius:2px;background:var(--color-primary-light);height:6px}
@keyframes eqBar{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.player-bar.playing .eq{display:flex}
.player-bar.playing .eq i{transform-origin:bottom;animation:eqBar .8s var(--ease-standard) infinite alternate}
.player-bar.playing .eq i:nth-child(1){animation-delay:0s;height:14px}
.player-bar.playing .eq i:nth-child(2){animation-delay:.25s;height:18px}
.player-bar.playing .eq i:nth-child(3){animation-delay:.5s;height:10px}

/* روابط «الكل/عرض جميع…»: خط ذهبي ينزلق */
.all-link{position:relative}
.all-link::after{content:'';position:absolute;bottom:-4px;inset-inline-start:0;width:100%;height:2px;
  border-radius:2px;background:var(--color-primary);transform:scaleX(0);transform-origin:100% 50%;
  transition:transform var(--dur-med) var(--ease-standard)}
.all-link:hover::after{transform:scaleX(1)}

/* دخول نافذة البحث */
@keyframes panelIn{from{opacity:0;transform:translateY(-14px) scale(.985)}to{opacity:1;transform:none}}
.search-overlay.open .search-panel{animation:panelIn var(--dur-med) var(--ease-standard) both}

/* أيقونات البطاقات الترويجية */
.promo-card .icon{transition:transform var(--dur-med) var(--ease-standard)}
.promo-card:hover .icon{transform:rotate(-6deg) scale(1.08)}
.feat-card .chip,.feat-main .chip{transition:transform var(--dur-fast) var(--ease-standard)}
.feat-card:hover .chip,.feat-main:hover .chip{transform:translateY(-1px)}

/* صفحة 404 */
.err-band{max-width:760px;margin:0 auto;padding:96px var(--pad-x) 64px;text-align:center}
.err-band .code{font-weight:800;font-size:clamp(80px,14vw,140px);line-height:1;color:var(--color-link);
  letter-spacing:.02em}
.err-band h1{font-weight:700;font-size:clamp(24px,3vw,34px);color:var(--color-heading);margin:18px 0 12px}
.err-band p{font-size:16px;line-height:1.85;color:var(--color-text-muted);margin:0 0 32px}
.err-band .links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* صفحة التواصل */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* البطاقات ثلاث وبسيطة (أيقونة + سطران): الانتقال إلى عمود واحد عند 900px كان
   يخلّف ثلاث بطاقات عملاقة وفراغاً أفقياً واسعاً على 768px. */
@media (max-width:900px){ .contact-grid{gap:16px} }
@media (max-width:700px){ .contact-grid{grid-template-columns:1fr} }
.contact-card{display:block;background:var(--color-bg-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-card);padding:34px 30px;text-align:center;color:inherit;
  transition:transform var(--dur-med) var(--ease-standard),box-shadow var(--dur-med) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
.contact-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);color:inherit;border-color:var(--color-primary-border)}
.contact-card:active{transform:translateY(-1px);box-shadow:var(--shadow-xs);border-color:var(--color-primary-active)}
@media (max-width:900px){ .contact-card{padding:26px 22px} }
.contact-card .icon{width:54px;height:54px;border-radius:16px;background:var(--color-primary-soft);
  color:var(--color-primary-darker);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
  transition:transform var(--dur-med) var(--ease-standard)}
.contact-card:hover .icon{transform:rotate(-6deg) scale(1.08)}
.contact-card h3{font-size:19px;font-weight:700;color:var(--color-heading);margin:0 0 8px}
.contact-card p{font-size:14px;color:var(--color-text-muted);margin:0;direction:ltr}

/* ═══════════ (١) صف الإحصاءات — ترتيب منظّم بفواصل ═══════════ */
.hero1 .stats-row{display:flex;align-items:stretch;gap:0;margin:0;padding-top:26px;
  border-top:1px solid var(--color-divider);flex-wrap:wrap}
.hero1 .stats-row .stat{display:flex;flex-direction:column;align-items:center;gap:4px;
  padding-inline:34px;position:relative;min-width:118px}
.hero1 .stats-row .stat + .stat::before{content:'';position:absolute;inset-inline-end:0;top:6px;bottom:6px;
  width:1px;background:var(--color-divider)}
.hero1 .stats-row dt{margin:0}
.hero1 .stats-row dt b{font-family:var(--font-arabic);font-weight:800;font-size:30px;line-height:1.1;
  color:var(--color-heading);font-variant-numeric:tabular-nums;letter-spacing:-.01em;display:block}
.hero1 .stats-row dd{margin:0;font-size:12.5px;font-weight:600;color:var(--color-text-muted);
  text-align:center;white-space:nowrap}
.hero1 .stats-row .stat:first-child{padding-inline-start:0}
.hero1 .stats-row .stat:last-child{padding-inline-end:0}
@media (max-width:560px){
  .hero1 .stats-row .stat{padding-inline:18px;min-width:96px}
  .hero1 .stats-row dt b{font-size:25px}
  .hero1 .stats-row dd{font-size:11.5px;white-space:normal}
}

/* ═══════════ (٢) بطاقة كلمة الشهر — النص يملأ المساحة ═══════════ */
.feat-main .teaser{font-size:16px;line-height:1.95;color:var(--color-text-secondary);
  margin:0 0 26px;flex:1;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:11;-webkit-box-orient:vertical;
  /* تلاشٍ لطيف في آخر النص بدل قطعٍ حاد */
  mask-image:linear-gradient(to bottom,#000 78%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 100%)}
@media (max-width:1000px){ .feat-main .teaser{-webkit-line-clamp:7} }
@media (max-width:560px){ .feat-main .teaser{-webkit-line-clamp:6;font-size:15px} }

/* ═══════════ (٣) الشعار كعلامة مائية خفيفة في الأقسام ═══════════ */
/* كل العلامات المائية موضوعة بإزاحات سالبة (‎-40px‎ … ‎-90px‎) وبعرض يصل 520px،
   فبلا قصٍّ تُنتج تمريراً أفقياً: قِيس 431px على شاشة 390 و810px على 768.
   overflow:clip يقصّ دون إنشاء حاوية تمرير ودون التأثير على العناصر المثبّتة. */
.section,.benefit-band,.feat-main,.about-band .card,.hero1{position:relative;overflow:clip}
.section > .wrap,.benefit-band > *,.feat-main > *:not(.mark-soft){position:relative;z-index:1}
.mark-soft{position:absolute;pointer-events:none;user-select:none;
  width:340px;opacity:.035;z-index:0;
  inset-inline-end:-40px;top:24px;transform:rotate(-4deg)}
.section:nth-of-type(even) .mark-soft{inset-inline-end:auto;inset-inline-start:-50px;
  top:auto;bottom:10px;transform:rotate(3deg)}
.feat-main .mark-soft{width:230px;inset-inline-start:-30px;inset-inline-end:auto;
  bottom:-20px;top:auto;opacity:.05;transform:rotate(-3deg)}
.benefit-band .mark-soft{width:280px;inset-inline:0;margin-inline:auto;top:50%;
  transform:translateY(-50%);opacity:.04}

.hero1 .wrap{position:relative;z-index:1}
.mark-inv{position:absolute;inset-inline-end:-30px;bottom:-24px;width:260px;
  opacity:.06;filter:invert(1);pointer-events:none;transform:rotate(-4deg);z-index:0}
.about-band .card > *:not(.mark-inv){position:relative;z-index:1}
@media (max-width:700px){
  .mark-soft,.mark-hero{width:220px;opacity:.03}
  .benefit-band .mark-soft{width:190px}
}

/* ═══════════ (٤) انميشن الأقسام — دخول متدرّج للبطاقات ═══════════ */
/* المحتوى المميز */
html.js [data-reveal] .featured-grid > *{opacity:0}
[data-reveal].in .featured-grid > *{animation:fadeUp .65s var(--ease-standard) both}
[data-reveal].in .featured-grid > :nth-child(2){animation-delay:.12s}
[data-reveal].in .feat-side > *{animation:fadeUp .6s var(--ease-standard) both}
[data-reveal].in .feat-side > :nth-child(2){animation-delay:.1s}
[data-reveal].in .feat-side > :nth-child(3){animation-delay:.2s}
[data-reveal].no-io .featured-grid > *,[data-reveal].no-io .feat-side > *{opacity:1;animation:none}

/* بطاقات نوافذ علمية */
html.js [data-reveal] .promo-grid > *{opacity:0}
[data-reveal].in .promo-grid > *{animation:riseIn .6s var(--ease-standard) both}
[data-reveal].in .promo-grid > :nth-child(2){animation-delay:.1s}
[data-reveal].in .promo-grid > :nth-child(3){animation-delay:.2s}
[data-reveal].no-io .promo-grid > *{opacity:1;animation:none}

/* شبكة السلاسل + صفوف المواد */
html.js [data-reveal] .series-grid > *,html.js [data-reveal] .panel .ep-row{opacity:0}
[data-reveal].in .series-grid > *{animation:riseIn .6s var(--ease-standard) both}
[data-reveal].in .series-grid > :nth-child(2){animation-delay:.09s}
[data-reveal].in .series-grid > :nth-child(3){animation-delay:.18s}
[data-reveal].in .series-grid > :nth-child(4){animation-delay:.27s}
[data-reveal].in .panel .ep-row{animation:slideInEnd .5s var(--ease-standard) both}
[data-reveal].in .panel .ep-row:nth-child(2){animation-delay:.07s}
[data-reveal].in .panel .ep-row:nth-child(3){animation-delay:.14s}
[data-reveal].in .panel .ep-row:nth-child(4){animation-delay:.21s}
[data-reveal].no-io .series-grid > *,[data-reveal].no-io .panel .ep-row{opacity:1;animation:none}

/* الآية/الفائدة: ظهور هادئ مع تكبير طفيف */
html.js [data-reveal] .benefit-band blockquote{opacity:0}
[data-reveal].in blockquote{animation:quoteIn .8s var(--ease-standard) both}
[data-reveal].no-io blockquote{opacity:1;animation:none}

/* بطاقة نبذة عن الشيخ */
html.js [data-reveal] .about-band .card{opacity:0}
[data-reveal].in .about-band .card{animation:fadeUp .7s var(--ease-standard) both}
[data-reveal].no-io .about-band .card{opacity:1;animation:none}

@keyframes riseIn{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
@keyframes slideInEnd{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes quoteIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}

/* ============ عدّاد النتائج والحالات الفارغة ============ */
.result-count{font-size:13.5px;color:var(--color-text-muted);margin-bottom:22px}
.result-count b{font-family:var(--font-latin);font-variant-numeric:tabular-nums;
  font-weight:700;color:var(--color-heading)}
.empty-state{text-align:center;padding:64px 24px;background:var(--color-bg-surface);
  border:1px dashed var(--color-border-strong);border-radius:var(--radius-card)}
.empty-state svg{color:var(--color-primary);opacity:.55;margin-bottom:16px}
.empty-state p{font-size:16px;line-height:1.85;color:var(--color-text-muted);margin:0 0 26px;
  max-width:46ch;margin-inline:auto}
.empty-links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn-quiet{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;
  color:var(--color-heading);background:var(--color-bg-surface);border-radius:var(--radius-button);
  padding:11px 22px;border:1px solid var(--color-border-strong);
  transition:border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard)}
.btn-quiet:hover{border-color:var(--color-primary-active);color:var(--color-gold-900);background:var(--color-primary-soft)}
.btn-quiet:active{background:var(--color-primary-border);color:var(--color-primary-active)}

/* ============ نموذج البحث في صفحة النتائج ============ */
.search-form{display:flex;gap:12px;max-width:640px;margin-bottom:32px}
.search-form input{flex:1;min-width:0;font-family:var(--font-arabic);font-size:16px;padding:13px 20px;
  border:1px solid var(--color-border);border-radius:var(--radius-input);
  background:var(--color-bg-surface);color:var(--color-text-primary);
  transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
.search-form input:hover{border-color:var(--color-border-strong)}
.search-form input:focus{outline:none;border-color:var(--color-primary-active);box-shadow:0 0 0 3px var(--color-primary-soft)}
.search-form input:focus-visible{outline:none}
.search-form .btn-primary{flex-shrink:0}
@media (max-width:520px){
  .search-form{flex-direction:column}
  .search-form .btn-primary{justify-content:center}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============ استكمال الحالات التفاعلية الناقصة ============ */
/* غلاف الكتاب: :active كان يحرّك الغلاف فقط بلا أي تغيير على العنصر نفسه */
.book-item:active .cover{transform:translateY(-1px);box-shadow:var(--shadow-xs)}
.book-item:focus-visible .cover{border-color:var(--color-primary-active)}
.book-item:hover .pdf,.book-item:focus-visible .pdf{color:var(--color-primary-darker)}
.promo-card:active{box-shadow:var(--shadow-xs);border-color:var(--color-primary-active);transform:translateY(1px)}
.promo-card.dark:active{border-color:var(--color-primary-light)}
.media-card:focus-within{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.media-card:active{transform:translateY(-1px);box-shadow:var(--shadow-xs)}
.ep-nav-btn:focus-visible{border-color:var(--color-primary-active);transform:translateY(-2px)}
.ep-row .play-btn:focus-visible{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-on-primary)}
.article-card:focus-within{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.series-card:active{transform:translateY(-1px)}
.feat-main .more:active,.benefit-band .more:active,.all-link:active{color:var(--color-primary-active)}
.all-link:focus-visible::after{transform:scaleX(1)}
.panel .footer-link:hover{background:var(--color-primary-soft);color:var(--color-primary-darker)}
.panel .footer-link:active{background:var(--color-primary-border)}


.side-card .row a:hover{color:var(--color-primary-darker)}
.side-card .row a:active{color:var(--color-primary-active)}
.crumb a:active{color:var(--color-primary-active)}
.skip-link:focus-visible{outline-offset:-4px}

/* ============ صفوف الحلقات: إفساح المجال للعنوان على الجوال ============ */
/* شارة النوع مكرَّرة مع حبة نوع السلسلة في ترويسة الصفحة، وتأكل ~60px من
   عرض العنوان فترفعه إلى ثلاثة أسطر. نخفيها داخل صفحة السلسلة فقط. */
@media (max-width:560px){
  .content-cols .panel .ep-row .kind{display:none}
  .ep-row .tt .t{font-size:15px;line-height:1.55}
}

/* ============ شريط المشغل: إفساح المساحة عبر CSS لا عبر style السطري ============ */
body.player-on{padding-bottom:90px}
@media (max-width:560px){ body.player-on{padding-bottom:104px} }

/* ════════════════ الهيرو الداكن الفاخر — زخرفة تشابك سداسي (girih) ════════════════ */
:root{
  --girih:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='194' fill='none' stroke='%23E4D3AE' stroke-width='1.3'%3E%3Cpath d='M56 0 L112 32 L112 97 L56 129 L0 97 L0 32 Z'/%3E%3Cpath d='M56 65 L112 97 L112 162 L56 194 L0 162 L0 97 Z'/%3E%3Cpath d='M56 32 L84 48 L84 81 L56 97 L28 81 L28 48 Z' opacity='.55'/%3E%3C/svg%3E");
}
.hero-dark{position:relative;overflow:hidden;
  background:linear-gradient(158deg,var(--color-heading) 0%,var(--color-heading-2) 52%,var(--color-gold-900) 100%)}
.hero-dark .girih{position:absolute;inset:0;pointer-events:none;
  background-image:var(--girih);background-size:112px 194px;opacity:.075}
.hero-dark .glow{position:absolute;inset-inline-start:-160px;top:-180px;width:560px;height:560px;
  border-radius:var(--radius-full);pointer-events:none;
  background:radial-gradient(circle,rgba(200,170,99,.16),transparent 68%)}
.hero-dark .wrap{position:relative;z-index:1;padding-block:70px;
  display:grid;grid-template-columns:1fr 372px;gap:70px;align-items:center}

.hero-dark .intro > *{opacity:0;animation:fadeUp .7s var(--ease-standard) both}
.hero-dark .intro > :nth-child(1){animation-delay:.05s}
.hero-dark .intro > :nth-child(2){animation-delay:.14s}
.hero-dark .intro > :nth-child(3){animation-delay:.23s}
.hero-dark .intro > :nth-child(4){animation-delay:.32s}
.hero-dark .intro > :nth-child(5){animation-delay:.41s}

.hero-dark .label{font-size:13px;font-weight:700;letter-spacing:.07em;color:var(--accent)}
.hero-dark h1{font-weight:800;font-size:clamp(34px,4.1vw,51px);line-height:1.16;
  color:var(--color-bg-page);letter-spacing:-.015em;margin:15px 0 19px}
.hero-dark .bio{font-size:17px;line-height:1.85;color:rgba(245,241,232,.74);max-width:52ch;margin:0}
.hero-dark .cta{display:flex;gap:13px;margin:27px 0 38px;flex-wrap:wrap}
.hero-dark .btn-primary{font-size:15.5px;padding:13px 28px;
  transition:transform var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard)}
.hero-dark .btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{display:inline-flex;align-items:center;font-weight:700;font-size:15.5px;padding:13px 28px;
  border-radius:var(--radius-button);background:rgba(255,255,255,.08);color:var(--color-bg-page);
  border:1px solid rgba(255,255,255,.3);
  transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
.btn-ghost:hover{background:rgba(255,255,255,.15);border-color:rgba(228,211,174,.55);color:#fff}
.btn-ghost:active{transform:scale(.985)}

/* الإحصاءات على الداكن */
.hero-dark .stats-row{display:flex;align-items:stretch;gap:0;margin:0;padding-top:23px;
  border-top:1px solid rgba(228,211,174,.22);flex-wrap:wrap}
.hero-dark .stats-row .stat{display:flex;flex-direction:column;align-items:center;gap:3px;
  padding-inline:32px;position:relative;min-width:110px}
.hero-dark .stats-row .stat + .stat::before{content:'';position:absolute;inset-inline-end:0;top:5px;bottom:5px;
  width:1px;background:rgba(228,211,174,.22)}
.hero-dark .stats-row .stat:first-child{padding-inline-start:0}
.hero-dark .stats-row .stat:last-child{padding-inline-end:0}
.hero-dark .stats-row dt{margin:0}
.hero-dark .stats-row dt b{font-family:var(--font-arabic);font-weight:800;font-size:28px;line-height:1.1;
  color:var(--color-on-dark);font-variant-numeric:tabular-nums;letter-spacing:-.01em;display:block}
.hero-dark .stats-row dd{margin:0;font-size:12.5px;font-weight:600;color:rgba(245,241,232,.6);
  text-align:center;white-space:nowrap}

/* صورة الشيخ بإطار ذهبي وحلقة خارجية */
.hero-dark .photo{position:relative;justify-self:end;
  animation:fadeUp .8s var(--ease-standard) .15s both}
.hero-dark .photo .frame{width:372px;aspect-ratio:4/4.85;border-radius:var(--radius-panel);overflow:hidden;
  border:1px solid rgba(228,211,174,.4);box-shadow:0 26px 60px rgba(0,0,0,.45);position:relative;z-index:1}
.hero-dark .photo .frame img{width:100%;height:100%;object-fit:cover;display:block;
  animation:kenburns 18s ease-in-out infinite alternate}
.hero-dark .photo .ring{position:absolute;inset:-13px;border:1px solid rgba(228,211,174,.22);
  border-radius:38px;pointer-events:none}

/* الترويسة فوق هيرو داكن: زجاج داكن في أعلى الصفحة، ويعود فاتحاً عند التمرير */
body.home-dark-hero .site-header:not(.scrolled){background:rgba(36,31,23,.55);
  border-bottom-color:rgba(228,211,174,.18);box-shadow:none}
body.home-dark-hero .site-header:not(.scrolled) .main-nav a{color:rgba(245,241,232,.82)}
body.home-dark-hero .site-header:not(.scrolled) .main-nav a:hover{background:rgba(255,255,255,.12);color:#fff}
body.home-dark-hero .site-header:not(.scrolled) .main-nav a.active{background:var(--color-primary);color:var(--color-text-on-primary)}
body.home-dark-hero .site-header:not(.scrolled) .logo img{filter:invert(1) brightness(1.6)}
body.home-dark-hero .site-header:not(.scrolled) .search-btn{background:rgba(255,255,255,.08);
  border-color:rgba(228,211,174,.28);color:rgba(245,241,232,.7)}
body.home-dark-hero .site-header:not(.scrolled) .search-btn:hover{border-color:var(--accent);color:#fff}
body.home-dark-hero .site-header:not(.scrolled) .nav-toggle{color:var(--color-on-dark);border-color:rgba(228,211,174,.3)}

@media (max-width:1000px){
  .hero-dark .wrap{grid-template-columns:1fr;gap:46px}
  .hero-dark .photo{justify-self:center;max-width:330px;width:100%}
  .hero-dark .photo .frame{width:100%}
}
@media (max-width:560px){
  .hero-dark .wrap{padding-block:52px}
  .hero-dark .girih{background-size:88px 152px;opacity:.06}
  .hero-dark .stats-row .stat{padding-inline:18px;min-width:96px}
  .hero-dark .stats-row dt b{font-size:24px}
  .hero-dark .stats-row dd{font-size:11.5px;white-space:normal}
  .hero-dark .cta{gap:10px}
  .hero-dark .btn-primary,.btn-ghost{padding:12px 22px;font-size:14.5px}
}

/* ── صقل الهيرو الداكن: ترويسة شفافة نظيفة أعلى الصفحة + أزرار الجوال ── */
/* الترويسة أعلى الرئيسية: تُترك شبه شفافة ليتصل الهيرو بها بصرياً بدل الطبقة الرمادية */
body.home-dark-hero .site-header:not(.scrolled){
  background:linear-gradient(to bottom,rgba(23,19,13,.55),rgba(23,19,13,.18));
  backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1);
  border-bottom-color:transparent}
body.home-dark-hero .site-header:not(.scrolled) .logo img{filter:brightness(0) invert(1);opacity:.95}
@media (max-width:560px){
  /* زرّا الواجهة بعرض متساوٍ على الجوال بدل عرضين مختلفين */
  .hero-dark .cta{flex-direction:column;align-items:stretch;gap:10px}
  .hero-dark .cta .btn-primary,.hero-dark .cta .btn-ghost{justify-content:center;width:100%}
}