/* main.css */
/* =========================================================
   MOHAMED ELESAWY — Marketing Consultant
   نظام التصميم v2  |  مستمد من ألوان الشعار (أزرق تدرّجي على كحلي)
   ========================================================= */

:root{
  /* ---- ألوان الهوية (من الشعار) ---- */
  --blue:#0F62F5;          /* الأزرق الأساسي */
  --blue-600:#0A4FD6;
  --blue-700:#0044CD;      /* أغمق تدرّج في الشعار */
  --blue-400:#3C86FF;
  --blue-300:#7FB0FF;      /* تمييز الكلمات على الخلفية الداكنة */
  --blue-50:#EAF1FF;

  --navy-950:#040B22;
  --navy-900:#071231;
  --navy-800:#0B1B44;
  --navy-700:#122A63;

  --ink:#0C1424;
  --ink-2:#46536B;
  /**
   * ‏#78859C سابقاً — وكان يعطي ٣٫٧٣:١ على الأبيض.
   *
   * المعيار للنصّ العادي ٤٫٥:١، وهذا المتغيّر يحمل النصّ الثانوي في نحو
   * ستّين قاعدة: عناوين أعمدة الجداول، ووصف مؤشرات اللوحة، وعناوين خطوات
   * المعالج، وأغلبها بحجم ١٢–١٣ بكسل. أي أن أكثر النصّ الصغير في الموقع
   * كان تحت الحدّ المقروء.
   *
   * ‏#646F87 يعطي ٥٫٠٤:١ على الأبيض و٤٫٧٠:١ على `--tint`، ويبقى أفتح من
   * `--ink-2` بوضوح فلا يضيع التدرّج بين مستويَي النصّ.
   *
   * (نظير الوضع الليلي فُحص وهو سليم أصلاً عند ٤٫٩٣:١ — لا يحتاج تغييراً.)
   */
  --ink-3:#646F87;

  --paper:#FFFFFF;
  --tint:#F3F7FF;
  --tint-2:#E9F0FF;

  --line:rgba(12,20,36,.10);
  --line-soft:rgba(12,20,36,.06);
  --line-dark:rgba(255,255,255,.12);

  --ok:#12B76A;
  --warn:#F79009;
  --err:#E04343;

  --shadow-s:0 2px 8px rgba(9,20,50,.06);
  --shadow-m:0 14px 40px -18px rgba(9,20,50,.30);
  --shadow-blue:0 14px 34px -12px rgba(15,98,245,.55);

  --f-display:"Almarai","Poppins",system-ui,sans-serif;
  --f-body:"Tajawal","Poppins",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --f-num:"Poppins","Inter",system-ui,sans-serif;

  --wrap:1240px;
  --gutter:clamp(16px,4vw,48px);
  --sec-y:clamp(60px,7vw,110px);
  --r-s:12px;
  --r:18px;
  --r-l:26px;
  --r-pill:999px;
}

html[lang="en"]{ --f-display:"Poppins",system-ui,sans-serif; --f-body:"Poppins","Inter",system-ui,sans-serif; }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:16px;line-height:1.8;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--blue);color:#fff}

h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;line-height:1.35;margin:0}
h1{font-size:clamp(2.1rem,4.6vw,4rem);line-height:1.28;letter-spacing:-.01em}
h2{font-size:clamp(1.7rem,3.4vw,2.9rem);line-height:1.32}
h3{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.5}
p{margin:0 0 1em}
.lead{font-size:clamp(.98rem,1.25vw,1.12rem);color:var(--ink-2);line-height:1.9}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);position:relative;z-index:2}
.sec{padding-block:var(--sec-y);position:relative}
.sec--tint{background:var(--tint)}
.sec--dark{background:var(--navy-900);color:#fff}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark .lead{color:rgba(255,255,255,.72)}

/* ---------------- عناصر مشتركة ---------------- */
.chip{
  display:inline-flex;align-items:center;gap:.55em;
  background:var(--blue-50);color:var(--blue-600);
  border-radius:var(--r-pill);padding:.5em 1.1em;
  font-size:.85rem;font-weight:700;
}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);flex:none}
.sec--dark .chip,.hero .chip,.cta-band .chip,.chip--dark{background:rgba(255,255,255,.08);color:#fff;border:1px solid var(--line-dark)}
.sec--dark .chip::before,.hero .chip::before{background:var(--blue-300)}

.sec-head{text-align:center;max-width:760px;margin:0 auto clamp(34px,4.5vw,60px)}
.sec-head h2{margin:.55em 0 .35em}
.sec-head .lead{margin:0 auto;max-width:60ch}
.hl{color:var(--blue)}
.sec--dark .hl{color:var(--blue-300)}

.btn{
  --bg:var(--blue);--fg:#fff;--bd:var(--blue);
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.92em 1.7em;border-radius:var(--r-pill);border:1.5px solid var(--bd);
  background:var(--bg);color:var(--fg);cursor:pointer;
  font-family:var(--f-body);font-size:.95rem;font-weight:700;
  transition:transform .18s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{box-shadow:var(--shadow-blue)}
.btn--primary:hover{--bg:var(--blue-600);--bd:var(--blue-600)}
.btn--outline{--bg:transparent;--fg:var(--ink);--bd:var(--line)}
.btn--outline:hover{--bd:var(--blue);--fg:var(--blue)}
.btn--onDark{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.28)}
.btn--onDark:hover{--bd:#fff;background:rgba(255,255,255,.06)}
.btn--white{--bg:#fff;--fg:var(--blue);--bd:#fff}
.btn--sm{padding:.62em 1.15em;font-size:.86rem}
.btn--block{width:100%}
.btn svg{width:17px;height:17px;flex:none}
.btn[disabled]{opacity:.45;pointer-events:none}

.link-more{display:inline-flex;align-items:center;gap:.45em;color:var(--blue);font-weight:700;font-size:.92rem}
.link-more:hover{gap:.75em}

/* ---------------- كرات التوهج في الخلفية ---------------- */
.orbs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.orb{position:absolute;border-radius:50%;filter:blur(6px);opacity:.85}
.orb--a{width:min(38vw,420px);aspect-ratio:1;inset-block-start:-8%;inset-inline-start:-6%;
  background:radial-gradient(circle at 35% 35%,#2C7BFF,#0B49C8 60%,rgba(11,73,200,0) 72%)}
.orb--b{width:min(16vw,190px);aspect-ratio:1;inset-block-start:18%;inset-inline-end:6%;
  background:radial-gradient(circle at 35% 35%,#3F8BFF,#0C4FD8 62%,rgba(12,79,216,0) 74%)}
.orb--c{width:min(9vw,110px);aspect-ratio:1;inset-block-end:12%;inset-inline-start:26%;
  background:radial-gradient(circle at 35% 35%,#4E96FF,#0F5AE0 62%,rgba(15,90,224,0) 74%)}

/* ---------------- الترويسة ---------------- */
.site-head{
  position:sticky;top:0;z-index:80;
  background:rgba(4,11,34,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-dark);
}
.site-head.is-light{background:rgba(255,255,255,.92);border-bottom-color:var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:clamp(10px,2vw,26px);min-height:76px}
.brand{flex:none;display:flex;align-items:center}
.brand img{height:42px;width:auto}
.nav{display:flex;align-items:center;gap:clamp(8px,1.6vw,26px);margin-inline-start:auto}
.nav a{
  color:rgba(255,255,255,.82);font-size:.95rem;font-weight:500;padding:.55em .2em;
  position:relative;transition:color .2s ease;white-space:nowrap;
}
.nav a::after{content:"";position:absolute;inset-inline:0;bottom:.15em;height:2px;border-radius:2px;
  background:var(--blue-400);transform:scaleX(0);transition:transform .22s ease}
.nav a:hover,.nav a[aria-current]{color:#fff}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.site-head.is-light .nav a{color:var(--ink-2)}
.site-head.is-light .nav a:hover,.site-head.is-light .nav a[aria-current]{color:var(--ink)}

/* عنصر «أطلق حملتك» داخل القائمة — مميّز بلا أن يخرج عن نسق القائمة */
.nav a.nav-cta{
  display:inline-flex;align-items:center;gap:.5em;color:#fff;font-weight:700;
  background:linear-gradient(135deg,var(--blue),var(--blue-700));
  border-radius:var(--r-pill);padding:.55em 1.15em;white-space:nowrap;
  box-shadow:0 10px 22px -12px rgba(15,98,245,.9);
}
.nav a.nav-cta svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.7;fill:none;flex:none}
.nav a.nav-cta::after{display:none}
.nav a.nav-cta:hover{filter:brightness(1.1);color:#fff}
.site-head.is-light .nav a.nav-cta{color:#fff}

.head-actions{display:flex;align-items:center;gap:10px;flex:none}
.lang-switch{display:inline-flex;align-items:center;gap:2px;background:rgba(255,255,255,.10);
  border:1px solid var(--line-dark);border-radius:var(--r-pill);padding:4px}
.site-head.is-light .lang-switch{background:var(--tint);border-color:var(--line)}
/* الخيارات روابط <a> حقيقية (لا <button> داخل <a>) لتعمل بالكيبورد ومن دون جافاسكربت */
.lang-switch a,.lang-switch button{
  display:inline-block;border:0;background:none;cursor:pointer;border-radius:var(--r-pill);
  padding:.32em .8em;font-size:.8rem;font-weight:700;color:rgba(255,255,255,.7);line-height:1.7;
  transition:background .18s ease,color .18s ease;
}
.site-head.is-light .lang-switch a,.site-head.is-light .lang-switch button{color:var(--ink-3)}
.lang-switch a:hover,.lang-switch button:hover{color:#fff}
.site-head.is-light .lang-switch a:hover{color:var(--ink)}
.lang-switch a[aria-current],
.lang-switch button[aria-pressed="true"]{background:var(--blue);color:#fff}
.site-head.is-light .lang-switch a[aria-current]{color:#fff}
.lang-switch a:focus-visible,.lang-switch button:focus-visible{outline:2px solid var(--blue-400);outline-offset:2px}
.burger{display:none;background:rgba(255,255,255,.08);border:1px solid var(--line-dark);
  border-radius:12px;padding:.5em;cursor:pointer;color:#fff}
.site-head.is-light .burger{background:var(--tint);border-color:var(--line);color:var(--ink)}
.burger svg{width:20px;height:20px}

/* ---------------- الواجهة ---------------- */
.hero{
  position:relative;background:
    radial-gradient(1100px 620px at 70% -10%,rgba(23,86,220,.42),transparent 62%),
    radial-gradient(760px 520px at 8% 12%,rgba(18,66,190,.34),transparent 66%),
    linear-gradient(180deg,var(--navy-950),var(--navy-900) 55%,var(--navy-950));
  color:#fff;padding-block:clamp(52px,7vw,104px) clamp(56px,7vw,110px);overflow:hidden;
}
.hero .wrap{text-align:center;max-width:1000px}
.hero h1{margin:.6em 0 .5em;font-size:clamp(2rem,5vw,4.1rem)}
.hero h1 .hl{color:var(--blue-300)}
.hero .lead{color:rgba(255,255,255,.76);max-width:62ch;margin:0 auto}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:2.2em}
.ticks{display:flex;gap:clamp(14px,3vw,38px);justify-content:center;flex-wrap:wrap;
  margin-top:2.6em;color:rgba(255,255,255,.78);font-size:.92rem}
.ticks span{display:inline-flex;align-items:center;gap:.5em}
.ticks svg{width:17px;height:17px;color:var(--blue-300);flex:none}

/* شريط الأرقام أسفل الواجهة */
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(34px,4vw,54px)}
.hero-stats div{background:rgba(255,255,255,.06);border:1px solid var(--line-dark);
  border-radius:var(--r);padding:18px 14px;text-align:center}
.hero-stats b{display:block;font-family:var(--f-num);font-size:clamp(1.4rem,2.4vw,2rem);font-weight:700;color:#fff}
.hero-stats span{font-size:.82rem;color:rgba(255,255,255,.62)}

/* ---------------- شريط الأسواق ---------------- */
.marquee{background:var(--navy-950);border-block:1px solid var(--line-dark);padding-block:16px;color:rgba(255,255,255,.72)}
.marquee .wrap{display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,40px);flex-wrap:wrap;font-size:.9rem}
.marquee b{color:#fff;font-weight:700}
.marquee i{width:6px;height:6px;border-radius:50%;background:var(--blue-400);display:inline-block}

/* ---------------- شرائح وجداول مشتركة ---------------- */
/* هنا لا في app.css: تستخدمها صفحة النتائج التسويقية ولوحة العميل معاً. */
.table-wrap{overflow-x:auto}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chips--wrap{max-height:none}
.chip-btn{border:1.5px solid var(--line);background:#fff;border-radius:var(--r-pill);padding:.5em 1em;
  font:inherit;font-size:.84rem;cursor:pointer;color:var(--ink-2);transition:.15s}
.chip-btn:hover{border-color:var(--blue-400);color:var(--blue)}
.chip-btn.is-on{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.tag--live{background:#E7F8F0;color:#0A7A47;border-color:transparent}

/* ---------------- صفحة النتائج ---------------- */
.results-hero{padding-block:clamp(48px,6vw,92px) clamp(40px,5vw,72px)}
.results-hero .wrap{text-align:center;max-width:920px}
.results-h1{font-size:clamp(1.8rem,4.4vw,3.2rem);margin:.5em 0 .45em}
.results-h1 .hl{color:var(--blue-300)}
.results-hero .lead{color:rgba(255,255,255,.78);margin-inline:auto}
.results-kpis{margin-top:clamp(28px,3.6vw,46px)}
.results-note{margin-top:1.4em;font-size:.84rem;color:rgba(255,255,255,.58)}

.results-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.results-bar .chips{margin-top:0}
.results-sort{display:inline-flex;align-items:center;gap:10px;font-size:.86rem;color:var(--ink-3)}
.results-sort .input{width:auto;min-width:190px;padding:.55em 2.4em .55em 1em;font-size:.86rem}
html[dir="ltr"] .results-sort .input{padding:.55em 1em .55em 2.4em}

/* بطاقات النتائج — استبدلت جدولاً بستة أعمدة كان ينهار عند إضافة عمود اللقطة */
.rescards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:clamp(14px,1.8vw,22px)}
.rescard{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:20px 22px;
  display:flex;flex-direction:column;gap:14px;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.rescard:hover{border-color:var(--blue-400);box-shadow:var(--shadow-m);transform:translateY(-3px)}
.rescard[hidden]{display:none}
.rescard-head{display:flex;flex-direction:column;gap:9px}
.res-name{font-family:var(--f-num);font-size:.9rem;font-weight:600;line-height:1.5;color:var(--ink)}
.res-tags{display:flex;gap:6px;flex-wrap:wrap}
.rescard-project{margin:0;font-size:.92rem;color:var(--ink-2);font-weight:600}

.rescard-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--line-soft)}
.rescard-stats > div{background:var(--tint);padding:12px 10px;text-align:center;min-width:0}
.rescard-stats small{display:block;font-size:.72rem;color:var(--ink-3);margin-bottom:.35em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rescard-stats b{display:block;font-family:var(--f-num);font-size:1.05rem;font-weight:700;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis}
.rescard-stats span{font-size:.7rem;color:var(--ink-3)}
.rescard-stats .is-primary{background:var(--blue-50)}
.rescard-stats .is-primary b{color:var(--blue-600);font-size:1.3rem}

.results-empty{text-align:center;color:var(--ink-3);padding:34px 0}
.results-count{font-size:.84rem;color:var(--ink-3);font-family:var(--f-num)}

/* زر اللقطة داخل البطاقة */
.res-shot{margin-top:auto;display:flex;align-items:center;gap:10px;width:100%;
  border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:7px 12px 7px 7px;
  cursor:pointer;font:inherit;font-size:.82rem;color:var(--ink-2);transition:.16s;text-align:start}
html[dir="rtl"] .res-shot{padding:7px 7px 7px 12px}
/* الأبعاد مكرّرة في وسمَي width/height أيضاً: لو تأخّر ملف الأنماط أو خُزِّن
   قديماً تظل الصورة صغيرة بدل أن تُعرض بحجمها الطبيعي وتكسر التخطيط. */
.res-shot img{width:72px;height:34px;object-fit:cover;object-position:top center;border-radius:8px;
  border:1px solid var(--line-soft);flex:none}
.res-shot span{flex:1;min-width:0}
.res-shot:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-50)}

/* عارض اللقطة */
.shotbox{position:fixed;inset:0;z-index:120;background:rgba(4,11,34,.82);backdrop-filter:blur(3px);
  display:grid;place-items:center;padding:clamp(12px,3vw,34px)}
.shotbox[hidden]{display:none}
/* ٧٦٠ لا أكثر: اللقطات مخزَّنة بعرض ٧٤٠ بكسل، فأي لوح أعرض يمدّدها فتتشوّش. */
.shotbox-inner{background:#fff;border-radius:var(--r-l);max-width:760px;width:100%;
  max-height:92vh;overflow:auto;box-shadow:0 34px 80px -28px rgba(4,11,34,.7)}
.shotbox-head{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:#fff;z-index:1}
.shotbox-head b{font-family:var(--f-num);font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.shotbox-nav,.shotbox-close{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);
  background:#fff;cursor:pointer;font-size:1.2rem;line-height:1;color:var(--ink-2);flex:none}
.shotbox-close{font-size:1.35rem}
.shotbox-nav:hover,.shotbox-close:hover{border-color:var(--blue);color:var(--blue)}
.shotbox img{display:block;width:100%;height:auto}
.shotbox-note{margin:0;padding:12px 18px 16px;font-size:.82rem;color:var(--ink-3);text-align:center}

@media (max-width:760px){
  .rescards{grid-template-columns:1fr}
  .results-sort{width:100%}
  .results-sort .input{flex:1}
}

/* ---------------- الأكاديمية ---------------- */
.course-card{display:flex;flex-direction:column}
.course-card h3 a{color:inherit}
.course-card h3 a:hover{color:var(--blue)}
.course-meta{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.course-progress{margin-top:16px}
.course-progress .bar{height:7px;border-radius:99px;background:var(--tint-2);overflow:hidden}
.course-progress .bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--blue-400))}
.course-progress small{display:block;margin-top:.45em;font-size:.78rem;color:var(--ink-3)}

.lessons-h2{margin:2em 0 .8em;font-size:1.25rem}
.lesson-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:none}
.lesson-item{display:flex;align-items:center;gap:14px;padding:14px 18px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r)}
.lesson-item:hover{border-color:var(--blue-400)}
.lesson-item .n{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--tint);font-family:var(--f-num);font-weight:700;font-size:.85rem;color:var(--ink-3)}
.lesson-item.is-done .n{background:var(--blue);color:#fff}
.lesson-body{flex:1;min-width:0}
.lesson-body a{display:block;font-weight:700;font-size:.98rem;color:inherit}
.lesson-body a:hover{color:var(--blue)}
.lesson-body small{display:block;color:var(--ink-3);font-size:.83rem;margin-top:.25em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lesson-state{flex:none}

.lesson-crumb{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:.9rem;margin-bottom:1em}
.lesson-title{font-size:clamp(1.6rem,3.4vw,2.4rem);margin-bottom:.7em}
.lesson-entry{margin-bottom:2.4em}
.lesson-nav{display:flex;align-items:center;gap:12px;margin-top:2.4em;padding-top:1.6em;border-top:1px solid var(--line)}

/* الاختبار */
.quiz{background:var(--tint);border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(18px,2.6vw,30px);margin:2em 0}
.quiz-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.quiz-head h2{font-size:1.2rem}
.quiz-q{border:1.5px solid var(--line);border-radius:var(--r);background:#fff;padding:16px 18px;margin:16px 0 0}
.quiz-q legend{font-weight:700;font-size:.98rem;display:flex;gap:.6em;align-items:baseline;padding:0 .3em}
.quiz-q .qn{width:26px;height:26px;flex:none;border-radius:50%;background:var(--blue-50);color:var(--blue-600);
  display:inline-grid;place-items:center;font-family:var(--f-num);font-size:.78rem;font-weight:700}
.quiz-opt{display:flex;align-items:center;gap:10px;padding:.6em .7em;border-radius:12px;cursor:pointer;
  border:1.5px solid transparent;transition:.15s}
.quiz-opt:hover{background:var(--tint)}
.quiz-opt input{accent-color:var(--blue);width:17px;height:17px;flex:none}
.quiz-q.is-right{border-color:var(--ok)}
.quiz-q.is-wrong{border-color:var(--err)}
.quiz-q.is-wrong .quiz-opt.is-correct{background:#E7F8F0;border-color:var(--ok)}
.quiz-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px}
.quiz-count{font-size:.84rem;color:var(--ink-3);font-family:var(--f-num)}
#quiz-result{margin-top:16px}

.cert-ready{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#E7F8F0;
  border:1px solid rgba(18,183,106,.35);border-radius:var(--r);padding:16px 20px;margin-bottom:24px}
.cert-ready b{display:block}
.cert-ready span{font-size:.9rem;color:var(--ink-2)}
.cert-ready svg{color:var(--ok)}
.cert-verified{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--blue-50);
  border-radius:var(--r);padding:16px 20px;margin-bottom:24px}
.cert-verified b{display:block}
.cert-verified span{font-size:.9rem;color:var(--ink-2)}
.cert-verify-form{background:var(--tint);border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(18px,2.4vw,28px);max-width:560px;margin-inline:auto}
.cert-verify-form h2{font-size:1.15rem;margin-bottom:.5em}

/* الشهادة — A4 أفقي */
.cert{max-width:1000px;margin-inline:auto}
.cert-frame{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(28px,5vw,58px);text-align:center;box-shadow:var(--shadow-m);
  background-image:radial-gradient(circle at 12% 12%,rgba(15,98,245,.05),transparent 42%),
                   radial-gradient(circle at 88% 88%,rgba(15,98,245,.05),transparent 42%)}
.cert-frame::before{content:"";position:absolute;inset:14px;border:2px solid var(--blue);
  border-radius:calc(var(--r-l) - 6px);opacity:.16;pointer-events:none}
.cert-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:clamp(18px,3vw,34px)}
.cert-head img{height:52px;width:auto}
.cert-code{text-align:end}
.cert-code small{display:block;font-size:.72rem;color:var(--ink-3)}
.cert-code b{font-family:var(--f-num);font-size:.95rem;letter-spacing:.05em}
.cert-kicker{font-size:.86rem;letter-spacing:.22em;color:var(--blue);font-weight:700;margin:0 0 1.2em}
.cert-intro{color:var(--ink-3);font-size:.95rem;margin:0}
.cert-name{font-size:clamp(1.9rem,4.6vw,3rem);margin:.35em 0;color:var(--navy-900)}
.cert-course{font-size:clamp(1.15rem,2.4vw,1.6rem);margin:.35em 0 0;color:var(--blue-600)}
.cert-facts{display:flex;justify-content:center;gap:clamp(20px,5vw,64px);flex-wrap:wrap;
  margin:clamp(22px,3.4vw,40px) 0}
.cert-facts small{display:block;font-size:.78rem;color:var(--ink-3)}
.cert-facts b{font-family:var(--f-num);font-size:1.25rem}
.cert-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:clamp(16px,2.4vw,30px);text-align:start}
.cert-sign{color:var(--navy-900)}
.cert-sign-name{display:block;font-family:var(--f-display);font-size:1.35rem;font-weight:700}
.cert-sign-line{display:block;width:200px;height:16px;color:var(--blue);opacity:.7;margin:.1em 0 .3em}
.cert-sign small{color:var(--ink-3);font-size:.82rem}
.cert-verify{text-align:end;font-size:.78rem;color:var(--ink-3);max-width:280px}
.cert-verify span{display:block;word-break:break-all;color:var(--ink-2)}

@media print{
  @page{size:A4 landscape;margin:8mm}
  body > *:not(main),.site-head,.site-foot,.zaki,.zaki-btn,.wa-float,
  .cert-verified,.cert-verify-form,.sec-head{display:none!important}
  .sec{padding:0!important}
  .cert{max-width:none}
  .cert-frame{border:0;box-shadow:none;border-radius:0;padding:10mm 12mm}
  .cert-frame::before{inset:0}
}

/* ---------------- الليدز الأورجانيك ---------------- */
.org-card{display:flex;flex-direction:column}
.org-price{margin-top:auto;padding-top:16px}
.org-price b{display:block;font-family:var(--f-num);font-size:1.3rem;color:var(--blue-600)}
.org-price small{display:block;color:var(--ink-3);font-size:.8rem;margin-top:.25em}

/* ---------------- تتبّع الحملات ---------------- */
.adlib-form{background:var(--tint);border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(18px,2.4vw,28px);margin-bottom:clamp(22px,3vw,34px)}
.adlib-form .field{margin-bottom:0}
.adlib-form .grid + .grid{margin-top:14px}
.adlib-form .form-note{margin-top:14px}
.adlib-card{display:flex;flex-direction:column}
.adlib-card p{flex:1}
.adlib-card .btn{margin-top:16px;align-self:flex-start}
/* رابط بلا href = بحث فارغ أو منصّة لا تدعم هذا الوضع */
.adlib-card .btn:not([href]){opacity:.45;pointer-events:none}
.adlib-card.is-off{opacity:.6}
.adlib-h2{font-size:1.1rem;margin-bottom:.6em}
.panelish{margin-top:clamp(24px,3vw,38px)}
.adlib-x{display:inline-block;margin-inline-start:.5em;font-weight:700;opacity:.55}
.adlib-x:hover{opacity:1;color:var(--err)}

/* ---------------- شركاء النجاح ---------------- */
.sec--logos{background:#fff;padding-block:clamp(44px,5vw,78px)}
.logos{margin-top:clamp(22px,3vw,38px)}
.logos--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:clamp(14px,2vw,30px);align-items:center}
/* الشريط المتحرك: مساران متطابقان يتحركان معاً فيبدو الدوران متصلاً بلا قفزة */
.logos--marquee{display:flex;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.logos-track{display:flex;align-items:center;flex:none;gap:clamp(26px,4vw,62px);
  padding-inline-end:clamp(26px,4vw,62px);animation:els-marquee 64s linear infinite}
@keyframes els-marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}
html[dir="rtl"] .logos-track{animation-name:els-marquee-rtl}
@keyframes els-marquee-rtl{from{transform:translateX(0)}to{transform:translateX(100%)}}
.logos--marquee:hover .logos-track,.logos--marquee:focus-within .logos-track{animation-play-state:paused}
.logo{display:grid;place-items:center;flex:none}
.logos--grid .logo{min-height:74px}
/* رمادي هادئ يوحّد ٥٠ شعاراً بألوان متضاربة، ويعود لونه عند المرور */
.logo img{height:clamp(32px,4.2vw,50px);width:auto;max-width:170px;object-fit:contain;
  filter:grayscale(1);opacity:.58;transition:filter .25s ease,opacity .25s ease}
.logo:hover img{filter:none;opacity:1}
@media (prefers-reduced-motion:reduce){
  .logos-track{animation:none}
  .logos--marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .logos--marquee .logos-track[aria-hidden]{display:none}
}

/* ---------------- بطاقات ---------------- */
.grid{display:grid;gap:clamp(14px,1.6vw,20px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}

.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(20px,2.2vw,30px);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
  position:relative;overflow:hidden;
}
.sec--tint .card{background:#fff}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:transparent}
.card h3{margin:.9em 0 .45em}
.card p{color:var(--ink-2);font-size:.94rem;margin:0}
.card .ico-box{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--blue),var(--blue-700));color:#fff;box-shadow:var(--shadow-blue);
}
.card .ico-box svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.7;fill:none}
.card ul{margin:1em 0 0;padding:0;list-style:none;font-size:.92rem;color:var(--ink-2)}
.card ul li{display:flex;gap:.6em;padding:.35em 0}
.card ul li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);margin-top:.72em;flex:none}
.card .more{margin-top:1.2em;display:inline-flex}

/* بطاقة داكنة مميّزة (التخصص الأول) */
.card--dark{background:linear-gradient(150deg,var(--navy-800),var(--navy-950));border-color:transparent;color:#fff}
.card--dark h3{color:#fff}
.card--dark p{color:rgba(255,255,255,.7)}
.card--dark .ico-box{background:linear-gradient(140deg,var(--blue-400),var(--blue));box-shadow:none}
.card--dark .badge{display:inline-flex;align-items:center;gap:.4em;margin-top:1.2em;
  background:rgba(255,255,255,.10);border:1px solid var(--line-dark);border-radius:var(--r-pill);
  padding:.45em 1em;font-size:.82rem;font-weight:700}
.card--wide{grid-column:span 2}

/* ---------------- الخط الزمني (كيف نعمل) ---------------- */
.timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px);
  padding-top:44px}
.timeline::before{content:"";position:absolute;inset-block-start:11px;inset-inline:6%;height:2px;
  background:linear-gradient(90deg,transparent,var(--blue-400),var(--blue-400),transparent)}
.tl-item{position:relative;text-align:center}
.tl-item::before{content:"";position:absolute;inset-block-start:-44px;inset-inline-start:50%;
  transform:translateX(50%);width:22px;height:22px;border-radius:50%;
  background:var(--blue);box-shadow:0 0 0 6px rgba(15,98,245,.15)}
html[dir="ltr"] .tl-item::before{transform:translateX(-50%)}
.tl-item .n{font-family:var(--f-num);font-style:italic;font-weight:700;color:var(--blue);font-size:.95rem}
.tl-item h3{margin:.15em 0 .4em;font-size:1.05rem}
.tl-item p{font-size:.9rem;color:var(--ink-2);margin:0}
.sec--dark .tl-item p{color:rgba(255,255,255,.68)}
.sec--dark .timeline::before{background:linear-gradient(90deg,transparent,rgba(124,166,255,.6),rgba(124,166,255,.6),transparent)}

/* ---------------- الأرقام ---------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,18px)}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,2vw,28px);text-align:center}
.sec--dark .stat{background:rgba(255,255,255,.05);border-color:var(--line-dark)}
.stat b{display:block;font-family:var(--f-num);font-weight:700;font-size:clamp(1.7rem,3vw,2.6rem);color:var(--blue)}
.sec--dark .stat b{color:var(--blue-300)}
.stat span{font-size:.86rem;color:var(--ink-3)}
.sec--dark .stat span{color:rgba(255,255,255,.62)}

/* ---------------- تقارير السوق ---------------- */
.report{
  display:grid;grid-template-columns:104px 1fr auto;gap:clamp(14px,2vw,26px);align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:14px;
  transition:box-shadow .2s ease,transform .2s ease;
}
.report:hover{box-shadow:var(--shadow-m);transform:translateY(-2px)}
.report .cover{aspect-ratio:3/4;border-radius:var(--r-s);background:linear-gradient(150deg,var(--navy-800),var(--navy-950));
  display:grid;place-items:center;color:var(--blue-300);font-family:var(--f-num);font-size:.72rem;letter-spacing:.08em}
.report h3{margin-bottom:.3em}
.report p{font-size:.9rem;color:var(--ink-2);margin:0 0 .7em}
.report .meta{display:flex;gap:8px;flex-wrap:wrap}
.tag{display:inline-block;font-size:.76rem;font-weight:600;padding:.3em .8em;border-radius:var(--r-pill);
  background:var(--tint);color:var(--ink-2);border:1px solid var(--line)}
.tag--blue{background:var(--blue-50);color:var(--blue-600);border-color:transparent}
.tag--lock{background:#FFF3E8;color:#B25A08;border-color:transparent}

/* ---------------- آراء ---------------- */
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(22px,2.4vw,32px)}
.quote .qm{font-family:var(--f-num);font-size:2.4rem;line-height:1;color:var(--blue-300)}
.quote p{font-size:1rem;color:var(--ink);line-height:1.9;margin:.4em 0 1.2em}
.quote footer{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:14px;font-size:.87rem;color:var(--ink-3)}
.quote footer b{display:block;color:var(--ink);font-weight:700}
.avatar{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--blue),var(--blue-700));color:#fff;font-weight:700}

/* ---------------- الأسئلة ---------------- */
.faq{max-width:900px;margin-inline:auto;display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.faq details[open]{border-color:var(--blue-400);box-shadow:var(--shadow-s)}
.faq summary{cursor:pointer;list-style:none;padding:1.05em 1.3em;font-weight:700;font-size:1rem;
  display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--blue);font-size:1.3rem;font-weight:400;flex:none}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0;padding:0 1.3em 1.3em;color:var(--ink-2);font-size:.94rem}

/* ---------------- نماذج ---------------- */
.field{display:block;margin-bottom:14px}
.field > span{display:block;font-size:.85rem;font-weight:600;color:var(--ink-2);margin-bottom:.45em}
.field i{color:var(--err);font-style:normal}
.input{
  width:100%;padding:.85em 1.05em;background:#fff;border:1.5px solid var(--line);border-radius:14px;
  font-size:.94rem;transition:border-color .18s ease,box-shadow .18s ease;
}
.input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(15,98,245,.12)}
textarea.input{min-height:120px;resize:vertical}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(0% + 18px) 50%,calc(0% + 23px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
html[dir="ltr"] select.input{background-position:calc(100% - 23px) 50%,calc(100% - 18px) 50%}
.hp{position:absolute!important;inset-inline-start:-9999px;opacity:0;height:0;overflow:hidden}
.form-note{font-size:.82rem;color:var(--ink-3)}
.notice{padding:.85em 1.1em;border-radius:14px;font-size:.92rem;background:var(--blue-50);color:var(--blue-600);border:1px solid transparent}
.notice--ok{background:#E7F8F0;color:#0A7A47}
.notice--err{background:#FDECEC;color:#B42318}

/* بطاقة نموذج التواصل */
.form-card{background:#fff;border-radius:var(--r-l);padding:clamp(22px,2.6vw,34px);box-shadow:var(--shadow-m);border:1px solid var(--line)}

/* ---------------- CTA شريط ---------------- */
.cta-band{
  background:linear-gradient(130deg,var(--blue-700),var(--blue) 55%,#2E7BFF);
  border-radius:var(--r-l);padding:clamp(26px,3.4vw,52px);color:#fff;text-align:center;position:relative;overflow:hidden;
}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.86);max-width:60ch;margin-inline:auto}
.cta-band .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:1.6em}

/* ---------------- التذييل ---------------- */
.site-foot{background:var(--navy-950);color:rgba(255,255,255,.66);padding-block:clamp(44px,5vw,72px) 24px}
.site-foot h4{font-family:var(--f-body);font-size:.95rem;font-weight:700;color:#fff;margin:0 0 1.1em}
.site-foot a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:clamp(20px,3vw,48px)}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.7em;font-size:.92rem}
/* width:auto ضروري: بدونه يبقى العرض على قيمة وسم width فيُمدّ الشعار أفقياً. */
.foot-brand .foot-logo{display:inline-block;max-width:100%}
.foot-brand img{height:46px;width:auto;max-width:min(260px,100%);object-fit:contain;display:block}
.foot-brand p{margin-top:16px;max-width:42ch}
.social:empty{display:none}
.foot-bottom{margin-top:clamp(28px,3.4vw,48px);padding-top:20px;border-top:1px solid var(--line-dark);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.85rem;color:rgba(255,255,255,.5)}
.social{display:flex;gap:10px;margin-top:18px}
.social a{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid var(--line-dark)}
.social a:hover{background:var(--blue);border-color:var(--blue)}
.social svg{width:16px;height:16px;fill:currentColor}

/* ---------------- أزرار عائمة ---------------- */
.wa-float{position:fixed;inset-block-end:22px;inset-inline-start:22px;z-index:70;width:54px;height:54px;border-radius:50%;
  background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 12px 26px -10px rgba(37,211,102,.8)}
.wa-float svg{width:26px;height:26px;fill:currentColor}

/* ---------------- المساعد زكي ---------------- */
.zaki-btn{position:fixed;inset-block-end:22px;inset-inline-end:22px;z-index:71;display:inline-flex;align-items:center;gap:.55em;
  background:linear-gradient(135deg,var(--blue),var(--blue-700));color:#fff;border:0;border-radius:var(--r-pill);
  padding:.8em 1.3em;cursor:pointer;box-shadow:var(--shadow-blue);font-weight:700;font-size:.92rem}
.zaki-btn i{width:8px;height:8px;border-radius:50%;background:#5CF08E;display:block;box-shadow:0 0 0 3px rgba(92,240,142,.25)}
.zaki-btn:hover{transform:translateY(-2px)}
.zaki{position:fixed;inset-block-end:92px;inset-inline-end:22px;z-index:72;width:min(390px,calc(100vw - 28px));
  height:min(580px,calc(100vh - 140px));background:#fff;border-radius:22px;overflow:hidden;
  box-shadow:0 30px 70px -26px rgba(4,11,34,.55);display:none;flex-direction:column;border:1px solid var(--line)}
.zaki.is-open{display:flex}
.zaki-head{background:linear-gradient(135deg,var(--navy-900),var(--navy-800));color:#fff;padding:14px 16px;display:flex;align-items:center;gap:12px}
.zaki-head .av{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--blue-400),var(--blue));font-weight:800}
.zaki-head b{display:block;font-size:.96rem}
.zaki-head small{color:rgba(255,255,255,.6);font-size:.76rem}
.zaki-head button{margin-inline-start:auto;background:rgba(255,255,255,.1);border:0;color:#fff;cursor:pointer;
  width:30px;height:30px;border-radius:50%;font-size:1.1rem;line-height:1}
.zaki-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--tint)}
.msg{max-width:88%;padding:.75em 1em;border-radius:16px;font-size:.92rem;line-height:1.75}
.msg--bot{background:#fff;border:1px solid var(--line);align-self:flex-start;border-start-start-radius:4px}
.msg--me{background:var(--blue);color:#fff;align-self:flex-end;border-start-end-radius:4px}
.msg a{color:var(--blue);font-weight:700;text-decoration:underline}
.msg--me a{color:#fff}
.zaki-chips{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 12px;background:var(--tint)}
.zaki-chips .chip{background:#fff;border:1px solid var(--line);color:var(--ink-2);font-weight:600;font-size:.8rem;
  padding:.42em .9em;cursor:pointer}
.zaki-chips .chip::before{display:none}
.zaki-chips .chip:hover{border-color:var(--blue);color:var(--blue)}
.zaki-foot{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:#fff}
.zaki-foot input{flex:1;border:1.5px solid var(--line);border-radius:var(--r-pill);padding:.62em 1.1em;font-size:.92rem}
.zaki-foot input:focus{outline:0;border-color:var(--blue)}
.zaki-foot button{width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;flex:none;display:grid;place-items:center;
  background:var(--blue);color:#fff}
.typing{display:inline-flex;gap:4px;align-items:center}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:bl 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes bl{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* ---------------- المكاتب ---------------- */
.office{text-align:start}
.office h3{margin:.9em 0 .2em}
.office .office-country{color:var(--blue);font-weight:700;font-size:.9rem;margin:0 0 .4em}
.offices .card{display:flex;flex-direction:column}

/* ---------------- صندوق تنبيه/دعوة داخل الصفحات ---------------- */
/* في main.css لا app.css: تستخدمه صفحات تسويقية (الخدمات مثلاً) لا تُحمّل app.css */
.callout{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--r);
  background:var(--blue-50);font-size:.92rem;flex-wrap:wrap;border:1px solid transparent}
.callout svg{width:22px;height:22px;color:var(--blue);flex:none}
.spacer{flex:1}

/* ---------------- المكتبة ---------------- */
.books{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(16px,2vw,26px)}
.book{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.book:hover{border-color:var(--blue-400);box-shadow:var(--shadow-m);transform:translateY(-3px)}
.book[hidden]{display:none}
/* نسبة الغلاف ٣:٤ ثابتة حتى لا تتفاوت ارتفاعات البطاقات مع اختلاف مقاسات الصور */
.book-cover{position:relative;display:block;aspect-ratio:3/4;background:var(--tint-2);overflow:hidden}
.book-cover img{width:100%;height:100%;object-fit:cover;display:block}
.book-cover-fallback{position:absolute;inset:0;display:grid;place-items:center;padding:18px;text-align:center;
  font-weight:700;font-size:1rem;line-height:1.6;color:var(--blue-600);
  background:linear-gradient(150deg,var(--blue-50),var(--tint-2))}
.book-badge{position:absolute;inset-block-start:12px;inset-inline-start:12px;font-size:.72rem;font-weight:700;
  padding:.35em .8em;border-radius:var(--r-pill);background:#fff;box-shadow:var(--shadow-s)}
.book-badge--own{color:#0A7A47}
.book-badge--free{color:var(--blue-600)}
.book-badge--top{background:var(--blue);color:#fff}

/* بحث المتجر */
.libsearch{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line);
  border-radius:var(--r-pill);padding:.35em .6em .35em 1.1em;margin-bottom:22px;max-width:460px}
html[dir="ltr"] .libsearch{padding:.35em 1.1em .35em .6em}
.libsearch:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(15,98,245,.1)}
.libsearch .ico{width:19px;height:19px;color:var(--ink-3);flex:none}
.libsearch .input{border:0;background:none;padding:.5em 0;box-shadow:none;flex:1;min-width:0}
.libsearch .input:focus{outline:0;box-shadow:none}
.book-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:9px;flex:1}
.book-body h3{margin:0;font-size:1.02rem;line-height:1.55}
.book-body h3 a{color:inherit}
.book-body h3 a:hover{color:var(--blue)}
.book-body > p{margin:0;font-size:.88rem;color:var(--ink-3);line-height:1.75}
.book-foot{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.book-price b{font-family:var(--f-num);font-size:1.14rem;color:var(--ink)}
.book-price small{font-family:var(--f-num);font-size:.8rem;color:var(--ink-3);margin-inline-start:.45em}
.book-foot .muted{font-size:.78rem;margin-inline-start:auto;font-family:var(--f-num)}

/* صفحة الكتاب */
.bookpage{display:grid;grid-template-columns:260px 1fr 330px;gap:clamp(20px,2.6vw,38px);align-items:start}
.bookpage-cover{border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:3/4;position:relative;background:var(--tint-2);box-shadow:var(--shadow-m)}
.bookpage-cover img{width:100%;height:100%;object-fit:cover;display:block}
.bookpage-title{font-size:clamp(1.6rem,3vw,2.2rem);margin:.35em 0 .5em;line-height:1.4}
.bookpage-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:1.4em}
.bookpage-meta span{font-size:.8rem;color:var(--ink-3);background:var(--tint);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:.35em .9em}

/* صندوق الشراء لاصق: القرار يبقى مرئياً مهما طال وصف الكتاب */
.buybox{position:sticky;top:96px;background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  padding:22px;box-shadow:var(--shadow-m);display:flex;flex-direction:column;gap:14px}
.buybox-price b{display:block;font-family:var(--f-num);font-size:1.9rem;font-weight:800;color:var(--ink);line-height:1.3}
.buybox-price b s{color:var(--ink-3);font-size:1.1rem;font-weight:600;margin-inline-end:.4em}
.buybox-price span{display:block;font-size:.84rem;color:var(--ink-3);font-family:var(--f-num);margin-top:.3em}
.buybox-step{display:flex;flex-direction:column;gap:8px}
.buybox-step .field{margin-bottom:0}
.buybox-label{font-size:.85rem;font-weight:600;color:var(--ink-2)}
.buybox-owned{display:flex;flex-direction:column;gap:10px;text-align:center;align-items:center}
.buybox-owned .ico{color:#0A7A47}
.buybox-owned b{font-size:1.05rem}
.buybox-owned span{font-size:.86rem;color:var(--ink-3);line-height:1.7}
.buybox .form-note{font-size:.79rem;color:var(--ink-3);line-height:1.7;margin:0}
.coupon-row{display:flex;gap:8px}
.coupon-row .input{flex:1;min-width:0}
.coupon-row .btn{flex:none}

/* وسائل الدفع */
.paylist{display:flex;flex-direction:column;gap:8px}
.payopt{display:flex;align-items:flex-start;gap:10px;border:1.5px solid var(--line);border-radius:14px;
  padding:11px 13px;cursor:pointer;transition:border-color .16s ease,background .16s ease}
.payopt:hover{border-color:var(--blue-400)}
.payopt.is-on{border-color:var(--blue);background:var(--blue-50)}
.payopt input{margin-top:.25em;accent-color:var(--blue);flex:none}
.payopt b{display:block;font-size:.92rem}
.payopt small{display:block;font-size:.76rem;color:var(--ink-3);margin-top:.15em}

/* لوح التحويل بعد إنشاء الطلب */
.paypanel{border:1.5px solid var(--blue-400);border-radius:var(--r);padding:16px;background:var(--blue-50);
  display:flex;flex-direction:column;gap:12px}
.paypanel-head{display:flex;flex-direction:column;gap:6px}
.paypanel-head b{font-size:1rem;font-family:var(--f-num)}
.paypanel-ref{align-self:flex-start;font-size:.74rem;font-weight:700;font-family:var(--f-num);
  padding:.3em .8em;border-radius:var(--r-pill);background:#fff;color:var(--blue-600)}
.paypanel-hint{margin:0;font-size:.84rem;color:var(--ink-2);line-height:1.75}
.paypanel .field{margin-bottom:0}
.paytarget{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:10px 12px}
.paytarget-label{font-size:.78rem;color:var(--ink-3);width:100%}
/* العنوان يأخذ سطراً كاملاً وزر النسخ تحته: صندوق الشراء ٣٣٠ بكسل فقط، ومشاركة
   السطر مع الزر كانت تعصر عنوان محفظة USDT في عمود ١٢٦ بكسل. */
.paytarget-val{flex:1 1 100%;min-width:0;font-family:var(--f-num);font-size:.95rem;font-weight:700;
  overflow-wrap:anywhere;color:var(--ink)}
a.paytarget-val{color:var(--blue);text-decoration:underline}

/* بلوك التوضيح القانوني — تستخدمه صفحات النتائج والتتبع والمكتبة */
.results-legal{border-inline-start:3px solid var(--blue-300);background:var(--tint);border-radius:var(--r);
  padding:16px 20px;font-size:.85rem;color:var(--ink-3);line-height:1.9}
.results-legal p{margin:0 0 .7em}
.results-legal p:last-child{margin-bottom:0}
.results-legal strong{color:var(--ink-2)}

/* أزرار داخل خلية جدول: تلتفّ بدل أن تمدّ العمود */
.row-acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.row-acts .link-more{font-size:.84rem}

/* مشترياتي داخل لوحة العميل */
.purchase{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid var(--line)}
.purchase:last-child{border-bottom:0}
.purchase-main{flex:1;min-width:190px}
.purchase-main b{display:block;font-size:.96rem}
.purchase-main small{font-size:.78rem;color:var(--ink-3);font-family:var(--f-num)}

/* ---------------- البحث ---------------- */
/* زر البحث في الترويسة */
.head-search{position:relative;display:flex;align-items:center}
.icon-btn{width:38px;height:38px;border-radius:12px;border:1px solid transparent;background:none;
  color:inherit;cursor:pointer;display:grid;place-items:center;flex:none}
.icon-btn svg{width:19px;height:19px}
.icon-btn:hover{border-color:var(--line-dark);color:var(--blue-300)}
.site-head.is-light .icon-btn:hover{border-color:var(--line);color:var(--blue)}
/* اللوح ينسدل من الزر ولا يزحزح بقية الترويسة */
.head-search-form{position:absolute;inset-block-start:calc(100% + 10px);inset-inline-end:0;z-index:30;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px;
  box-shadow:0 20px 44px -22px rgba(4,11,34,.5);width:min(320px,78vw)}
.head-search-form[hidden]{display:none}
.head-search-form .input{width:100%}
/* على الشاشات الضيقة يُثبَّت اللوح على عرض الترويسة لا على الزر: الزر قرب حافة
   الشاشة، ولوح بعرض ٣٢٠ معلّق به كان يخرج عن الشاشة ويُقتصّ نصفه. */
@media (max-width:620px){
  .head-search{position:static}
  /* الحشوة الجانبية للترويسة داخل .wrap لا خارجها، فنزيحه بها يدوياً حتى لا
     يلتصق اللوح بحافتي الشاشة. */
  .head-search-form{inset-inline:var(--gutter);width:auto}
}

/* شريط البحث في صفحة النتائج */
.searchbar{display:flex;gap:10px;max-width:620px;margin:clamp(20px,2.6vw,32px) auto 0}
.searchbar .input{flex:1;min-width:0}
.searchbar .btn{flex:none}

.searchgroup{margin-bottom:clamp(30px,4vw,50px)}
.searchgroup:last-of-type{margin-bottom:0}
.searchgroup-title{display:flex;align-items:center;gap:12px;font-size:1.15rem;margin:0 0 20px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.searchgroup-title .results-count{background:var(--tint);border-radius:var(--r-pill);padding:.15em .7em}
.searchsug{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:22px}

@media (max-width:520px){
  .searchbar{flex-direction:column}
  .searchbar .btn{width:100%}
}

/* ---------------- مساعدات ---------------- */
/* أيقونة خطية صغيرة داخل القوائم والبطاقات */
.ico{width:22px;height:22px;flex:none;stroke:currentColor;stroke-width:1.6;fill:none;color:var(--blue)}
/* تسمية صغيرة فوق العناوين داخل البطاقات */
.num{font-family:var(--f-num);font-size:.74rem;font-weight:600;letter-spacing:.1em;color:var(--blue);text-transform:uppercase}
.entry{line-height:1.95}
.entry h2,.entry h3{margin:1.4em 0 .5em}
.entry ul,.entry ol{padding-inline-start:1.4em}
.entry img{border-radius:var(--r)}
.entry a{color:var(--blue);text-decoration:underline}
.center{text-align:center}
.mt-l{margin-top:clamp(28px,3.4vw,46px)}
.muted{color:var(--ink-3)}
.only-en{display:none}
html[lang="en"] .only-ar{display:none}
html[lang="en"] .only-en{display:revert}
/* الظهور التدريجي انتقل بالكامل إلى motion.css: تعريفه في ملفين بمنحنيين
   مختلفين كان يجعل بعض البطاقات تدخل بإيقاع وبعضها بإيقاع آخر. */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1!important;transform:none!important}}

/* ---------------- الاستجابة ---------------- */
/* بين ١٠٨٠ و١٢٨٠ تبقى القائمة أفقية لكن بمسافات أضيق: مع ٨ روابط + «أطلق
   حملتك» كان مجموع العرض يتجاوز الترويسة فيخرج زر الحساب خارج الشاشة. */
@media (max-width:1280px){
  .site-head .wrap{gap:10px}
  .brand img{height:36px}
  .nav{gap:clamp(5px,1vw,15px)}
  .nav a{font-size:.89rem}
  .nav a.nav-cta{padding:.5em .9em}
  .head-actions{gap:8px}
}
@media (max-width:1080px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}

  /* القائمة تنطوي في زر البرجر من ١٠٨٠ لا من ٨٦٠: بإضافة عنصر «أطلق حملتك»
     صار مجموع عرض الروابط يتجاوز الترويسة عند العرض المتوسط فيخرج العنصر
     خارج الشاشة ويُحدث تمريراً أفقياً. */
  .nav{
    position:fixed;inset-block-start:76px;inset-inline:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--navy-900);border-bottom:1px solid var(--line-dark);padding:6px var(--gutter) 18px;display:none;
    max-height:calc(100vh - 76px);overflow-y:auto;
  }
  .site-head.is-light .nav{background:#fff}
  .nav.is-open{display:flex}
  .nav a{padding:.9em 0;border-bottom:1px solid var(--line-dark)}
  .site-head.is-light .nav a{border-bottom-color:var(--line)}
  /* داخل قائمة الجوال يصير «أطلق حملتك» زراً كامل العرض في آخر القائمة */
  .nav a.nav-cta{justify-content:center;margin-top:14px;padding:.9em 1.2em;border-bottom:0}
  .burger{display:grid;margin-inline-start:auto}
}
@media (max-width:1080px){
  /* صندوق الشراء ينزل تحت النص ويفقد اللصق: العمود الثالث لا يتسع هنا */
  .bookpage{grid-template-columns:210px 1fr}
  .buybox{grid-column:1/-1;position:static}
}
@media (max-width:960px){
  .timeline{grid-template-columns:1fr 1fr;padding-top:0;gap:26px}
  .timeline::before{display:none}
  .tl-item{text-align:start;padding-inline-start:16px;border-inline-start:2px solid var(--blue-400)}
  .tl-item::before{display:none}
  .card--wide{grid-column:span 1}
}
@media (max-width:860px){
  .head-actions .btn{display:none}
  .g-2,.g-3{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .report{grid-template-columns:76px 1fr}
  .report .btn{grid-column:2;justify-self:start}
}
@media (max-width:620px){
  .bookpage{grid-template-columns:1fr}
  .bookpage-cover{max-width:220px}
  .books{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
}
@media (max-width:520px){
  .timeline{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:1fr 1fr}
  .ticks{gap:12px;font-size:.86rem}
}

/* ---------------- البورتفوليو ---------------- */
.chip-n{display:inline-block;margin-inline-start:.45em;font-size:.72rem;opacity:.65;font-family:var(--f-num)}
.chip-btn.is-on .chip-n{opacity:.85}

.works{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:clamp(16px,2vw,26px)}
.work{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .3s var(--ease,ease),box-shadow .3s var(--ease,ease),transform .3s var(--ease,ease)}
.work:hover{border-color:var(--blue-400);box-shadow:var(--shadow-m);transform:translateY(-3px)}
.work[hidden]{display:none}

/* نسبة ٤:٣ ثابتة: الأعمال تأتي بمقاسات شتّى، وبلا نسبة موحّدة تصير الشبكة مسنّنة */
.work-shot{position:relative;aspect-ratio:4/3;background:var(--tint-2);overflow:hidden}
.work-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease,ease)}
.work:hover .work-shot img{transform:scale(1.05)}
.work-fallback{position:absolute;inset:0;display:grid;place-items:center;padding:18px;text-align:center;
  font-weight:700;color:var(--blue-600);background:linear-gradient(150deg,var(--blue-50),var(--tint-2))}
.work-play{position:absolute;inset-block-end:12px;inset-inline-start:12px;width:34px;height:34px;
  border-radius:50%;background:rgba(4,11,34,.72);color:#fff;display:grid;place-items:center;font-size:.8rem}
.work-count{position:absolute;inset-block-start:12px;inset-inline-start:12px;font-size:.72rem;font-weight:700;
  background:rgba(4,11,34,.72);color:#fff;border-radius:var(--r-pill);padding:.25em .7em}

.work-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:9px;flex:1}
.work-body h3{margin:0;font-size:1.02rem;line-height:1.55}
.work-body > p{margin:0;font-size:.88rem;color:var(--ink-3);line-height:1.75}
/* النتيجة بلون العلامة: هي سبب وجود البطاقة لا وصفها */
.work-result{color:var(--blue-600)!important;font-weight:600}
.work-foot{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:8px;
  border-top:1px solid var(--line-soft)}
.work-client{font-size:.86rem;font-weight:700;color:var(--ink-2)}
.work-foot small{margin-inline-start:auto;font-family:var(--f-num)}
.work-links{display:flex;gap:16px;flex-wrap:wrap}
.work-links .link-more{font-size:.85rem}

@media (max-width:560px){
  .works{grid-template-columns:1fr}
}

/* صفحة العمل الواحد */
.workpage{max-width:1000px}
.workpage-result{font-size:clamp(1.05rem,2.2vw,1.3rem);color:var(--blue-600);font-weight:700;
  margin:.2em 0 1em;line-height:1.6}
.workpage-entry{margin-bottom:1.6em}
.workpage-video{margin:clamp(20px,3vw,34px) 0;border-radius:var(--r-l);overflow:hidden;background:var(--tint-2)}
.workpage-video iframe,.workpage-video video{width:100%;aspect-ratio:16/9;height:auto;display:block;border:0}
.workgal{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:clamp(12px,1.6vw,20px);
  margin-top:clamp(18px,2.4vw,28px)}
.workgal-item{display:block;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--tint-2)}
.workgal-item img{width:100%;height:auto;display:block;transition:transform .5s var(--ease,ease)}
.workgal-item:hover img{transform:scale(1.04)}

/* ---------------- الترويسة والتذييل: صقل ---------------- */
/* زجاج خفيف عند التمرير: يفصل الشريط عمّا يمرّ تحته بلا حاجز صلب */
@supports (backdrop-filter:blur(1px)){
  .site-head.is-scrolled{backdrop-filter:saturate(160%) blur(14px)}
  .site-head.is-scrolled:not(.is-light){background:color-mix(in srgb,var(--navy-950) 82%,transparent)}
  .site-head.is-light.is-scrolled{background:color-mix(in srgb,#fff 86%,transparent)}
}
/* خيط متدرّج أسفل الترويسة بدل حدّ رمادي مسطّح */
.site-head::after{content:"";position:absolute;inset-block-end:0;inset-inline:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--blue-400),transparent);opacity:0;
  transition:opacity var(--t-base,.3s) ease}
.site-head.is-scrolled::after{opacity:.5}
.site-head{position:sticky;inset-block-start:0;z-index:50}

/* الرابط النشط يحمل نقطة تحته لا لوناً فقط — يُقرأ حتى لمن لا يميّز الألوان */
.nav a[aria-current]{color:var(--blue-300)}
.site-head.is-light .nav a[aria-current]{color:var(--blue)}
.nav a[aria-current]::before{content:"";position:absolute;inset-block-end:-6px;inset-inline-start:50%;
  width:5px;height:5px;border-radius:50%;background:currentColor;transform:translateX(50%)}
html[dir="ltr"] .nav a[aria-current]::before{transform:translateX(-50%)}

/* التذييل: توهّج علوي خافت يفصله عن المحتوى */
.site-foot{position:relative;overflow:hidden}
.site-foot::before{content:"";position:absolute;top:-140px;left:50%;
  width:min(760px,90vw);height:300px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(15,98,245,.16),transparent);filter:blur(30px)}
.site-foot > .wrap{position:relative}
.foot-grid h4{position:relative;padding-bottom:.7em;margin-bottom:.5em}
.foot-grid h4::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:0;
  width:26px;height:2px;background:var(--blue-400);border-radius:2px}
.foot-grid ul a{transition:color .15s ease,padding-inline-start .15s ease}
.foot-grid ul a:hover{color:#fff;padding-inline-start:5px}
.foot-bottom{position:relative;padding-top:22px;margin-top:8px}
.foot-bottom::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent)}


/* chrome.css */
/* =========================================================
   الترويسة والتذييل — التصميم.

   ملف مستقلّ عن main.css عن قصد: هيكل الموقع (ما يظهر في كل صفحة) يتغيّر
   بمعدّل مختلف تماماً عن مكوّنات الصفحات، وخلطهما في ملف واحد جعل كل
   تعديل في الترويسة يمرّ فوق ستّين قاعدة لا علاقة لها بها.

   يُحمَّل بعد main.css فيغلب عليه عند التعارض بلا حاجة إلى !important.
   ========================================================= */

/* =========================================================
   ١) الترويسة
   ========================================================= */
.site-head{
  position:sticky;inset-block-start:0;z-index:80;
  background:none;
  border-bottom:1px solid var(--line-dark);
  transition:box-shadow var(--t-base,.3s) var(--ease,ease);
}
.site-head.is-light{border-bottom-color:var(--line)}
.site-head.is-scrolled{box-shadow:0 10px 30px -22px rgba(4,11,34,.85)}

/**
 * إبطال صريح لما في main.css.
 *
 * هناك قاعدتان قديمتان تضعان `backdrop-filter` على `.site-head` نفسها
 * (واحدة عامة وواحدة عند التمرير). تركهما يعيد المشكلة كاملة: أي منهما
 * تكفي وحدها لتحبس درج القائمة داخل الترويسة. تحييدهما هنا لا حذفهما من
 * main.css حتى يبقى ذلك الملف صالحاً وحده للثيم الفرعي.
 */
.site-head{backdrop-filter:none}
.site-head.is-scrolled{backdrop-filter:none}
.site-head.is-scrolled:not(.is-light),
.site-head.is-light.is-scrolled{background:none}
/* الانكماش عند التمرير يتمّ بـ min-height في الشريط الرئيسي لا بحشو على
   كل .wrap داخل الترويسة — الحشو كان يُطبَّق على الشريط العلوي أيضاً
   فيقفز ارتفاعه بينما هو في طريقه إلى الاختفاء. */
.site-head.is-scrolled .wrap{padding-block:0}
.site-head.is-scrolled .head-top .wrap{padding-block:9px}

/**
 * الترويسة المخفيّة تنزلق بـ`transform` — وهو ما يجعلها كتلة احتواء
 * لدرج القائمة تماماً كـ`backdrop-filter`. فنمنع الإخفاء ما دام الدرج
 * مفتوحاً: القاعدة هنا لا في جافاسكربت لأنها ضمانة أخيرة تعمل حتى لو
 * تأخّر السكربت أو تعطّل.
 */
html.nav-open .site-head.is-hidden{transform:none}

/**
 * الأرضية والضبابية على عنصر زائف لا على الترويسة نفسها — وهذا ليس ذوقاً.
 *
 * ‏`backdrop-filter` على عنصر يجعله «كتلة احتواء» لكل ما بداخله من عناصر
 * ‏`position:fixed`. ووضعه على `.site-head` كان يحبس درج القائمة داخل
 * الترويسة: يفتح الدرج فيظهر بارتفاع ٧٤ بكسل — ارتفاع الشريط — بدل ملء
 * الشاشة، فتختفي كل الروابط تحت أول رابطين.
 *
 * العنصر الزائف يحمل الضبابية بلا أن يحبس أشقّاءه.
 */
.site-head::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:color-mix(in srgb,var(--navy-950) 90%,transparent);
  transition:background var(--t-base,.3s) var(--ease,ease);
}
.site-head.is-light::before{background:color-mix(in srgb,var(--paper) 90%,transparent)}
/**
 * الضبابية عند التمرير فقط، وبنصف الشدّة.
 *
 * ‏`backdrop-filter` يُجبر المتصفح على إعادة رسم كل ما تحت الترويسة في
 * **كل إطار تمرير**. وهي أثقل خاصية في هذا الملف بفارق كبير، وأثرها
 * البصري صفر في أعلى الصفحة حيث لا شيء يمرّ تحتها أصلاً.
 */
@supports (backdrop-filter:blur(1px)){
  .site-head.is-scrolled::before{backdrop-filter:saturate(140%) blur(9px)}
}

/* ---------- الشريط العلوي ---------- */
/**
 * يختفي بالانكماش لا بـ display:none — الانكماش قابل للحركة فيبدو الشريط
 * منزلقاً تحت الرئيسي، وdisplay:none كان يقفز بالصفحة ٣٤ بكسل فجأة.
 */
.head-top{
  overflow:hidden;max-height:44px;
  border-bottom:1px solid var(--line-dark);
  background:rgba(255,255,255,.03);
  transition:max-height var(--t-base,.3s) var(--ease,ease),opacity var(--t-base,.3s) var(--ease,ease);
}
.site-head.is-light .head-top{background:var(--tint);border-bottom-color:var(--line-soft)}
.site-head.is-scrolled .head-top{max-height:0;opacity:0;border-bottom-color:transparent}

.site-head .head-top .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:0;padding-block:9px;
}
.head-note{
  margin:0;display:flex;align-items:center;gap:9px;
  font-size:.79rem;font-weight:600;color:rgba(255,255,255,.62);
}
.site-head.is-light .head-note{color:var(--ink-2)}
/* نقطة نابضة: تقول «هذا مكتب يعمل الآن» بلا أن تكتبها */
.head-note i{
  width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 70%,transparent);
  animation:head-pulse 2.6s var(--ease,ease) infinite;
}
@keyframes head-pulse{
  0%,70%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}
  35%{box-shadow:0 0 0 6px transparent}
}

.head-top-links{display:flex;align-items:center;gap:20px;font-size:.79rem}
.head-top-links a,.head-top-links span{
  display:inline-flex;align-items:center;gap:6px;
  color:rgba(255,255,255,.58);font-weight:600;
  transition:color var(--t-fast,.15s) var(--ease,ease);
}
.site-head.is-light .head-top-links a,
.site-head.is-light .head-top-links span{color:var(--ink-3)}
.head-top-links a:hover{color:var(--blue-300)}
.site-head.is-light .head-top-links a:hover{color:var(--blue)}
.head-top-links svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.7;fill:none;flex:none}
@media (max-width:900px){.head-top{display:none}}

/* ---------- الشريط الرئيسي ---------- */
/**
 * الترويسة أعرض من عمود القراءة عمداً (١٤٤٠ مقابل ١٢٤٠).
 *
 * السبب: عرض المحتوى محكوم براحة القراءة — نحو ٧٥ حرفاً في السطر — وهو
 * قيد لا علاقة له بالترويسة. حصر الترويسة في العرض نفسه كان يهدر ٢٠٠
 * بكسل على الشاشات الواسعة، فتنتقل روابط إلى «المزيد» بلا سبب حقيقي.
 */
.site-head .wrap{max-width:1440px}

.site-head .head-main .wrap{
  display:flex;align-items:center;gap:clamp(10px,2vw,24px);
  min-height:74px;transition:min-height var(--t-base,.3s) var(--ease,ease);
}
.site-head.is-scrolled .head-main .wrap{min-height:62px}

/* ---------- الشعار ---------- */
/**
 * محصورة في الترويسة عمداً.
 *
 * الصنف `.brand` يستعمله أيضاً الشريط الجانبي للوحة العميل
 * (templates/parts/app-side.php) بتنسيق مختلف تماماً في app.css. قاعدة
 * غير محصورة هنا كانت تتسرّب إليه فتغيّر تخطيطه بلا أن يقصد أحد.
 */
.site-head .brand{flex:none;display:flex;align-items:center;gap:12px}
/**
 * الشعار خلفية على عنصر واحد لا وسم <img>.
 *
 * السبب أداء لا ذوق: أرضية الترويسة لها ثلاث حالات (رئيسية داكنة،
 * داخلية فاتحة، وضع ليلي)، وطباعة صورتين وإخفاء إحداهما تجعل المتصفح
 * ينزّل الاثنتين — ٨٢ كيلوبايت لعرض ٤١. الخلفية لا تُنزَّل إلا إذا
 * انطبقت قاعدتها. وصور الشعار نفسها تُحقن مضمّنة من els_logo_css().
 */
.site-head .brand-logo{
  flex:none;
  transition:height var(--t-base,.3s) var(--ease,ease),width var(--t-base,.3s) var(--ease,ease);
}
.site-head.is-scrolled .brand-logo{height:34px!important;width:111px!important}
@media (max-width:520px){.brand-logo{height:32px!important;width:104px!important}}

/**
 * السطر تحت الشعار يفصله خطّ رأسي رفيع — يقول ما هذا الموقع قبل أن يقرأ
 * الزائر كلمة من الصفحة. ويختفي مبكراً (١١٦٠px) لأنه أول ما يُستغنى عنه.
 */
.site-head .brand-kicker{
  position:relative;padding-inline-start:13px;
  font-size:.74rem;font-weight:700;letter-spacing:.02em;line-height:1.4;
  color:rgba(255,255,255,.5);max-width:11ch;
}
.site-head.is-light .brand-kicker{color:var(--ink-3)}
.brand-kicker::before{
  content:"";position:absolute;inset-inline-start:0;inset-block:2px;
  width:1px;background:var(--line-dark);
}
.site-head.is-light .brand-kicker::before{background:var(--line)}
@media (max-width:1300px){.brand-kicker{display:none}}

/* ---------- القائمة ---------- */
/**
 * ‏`flex:1` و`min-width:0` شرطان لعمل التكيّف في main.js: بدونهما يتمدّد
 * الشريط بمقدار محتواه فيدفع بقية الترويسة خارج الشاشة، ولا يصلح
 * `clientWidth` مقياساً للمساحة المتاحة لأنه يساوي المحتوى دائماً.
 */
.nav{display:flex;align-items:center;justify-content:flex-end;gap:2px;
  flex:1 1 auto;min-width:0;overflow:visible}
/* `flex:none` شرط للقياس: لو انكمشت العناصر عند الضيق لصار عرضها
   المقيس أصغر من عرضها الحقيقي، فيظنّ القياس أنها تتّسع وهي لا تتّسع. */
.nav-item{position:relative;flex:none}
.nav-item > a{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  padding:.55em .78em;border-radius:var(--r-pill);
  font-size:.92rem;font-weight:600;color:rgba(255,255,255,.78);
  transition:color var(--t-fast,.15s) var(--ease,ease),background var(--t-fast,.15s) var(--ease,ease);
}
.site-head.is-light .nav-item > a{color:var(--ink-2)}
.nav-item > a:hover{color:#fff;background:rgba(255,255,255,.08)}
.site-head.is-light .nav-item > a:hover{color:var(--ink);background:var(--tint-2)}

/**
 * الصفحة الحالية تُميَّز بخطّ تحتها لا بلون فقط — يُقرأ لمن لا يميّز
 * الألوان، وهو ١٢٪ من الرجال تقريباً.
 */
.nav-item > a[aria-current]{color:#fff}
.site-head.is-light .nav-item > a[aria-current]{color:var(--blue)}
.nav-item > a[aria-current]::after{
  content:"";position:absolute;inset-block-end:2px;inset-inline:.78em;height:2px;border-radius:2px;
  background:var(--blue-400);
}
.site-head.is-light .nav-item > a[aria-current]::after{background:var(--blue)}

.nav-chev{width:14px;height:14px;flex:none;opacity:.6;
  transition:transform var(--t-base,.3s) var(--ease,ease)}
.nav-item.has-drop:hover .nav-chev,
.nav-item.has-drop:focus-within .nav-chev{transform:rotate(180deg)}

/* ---------- القائمة المنسدلة ---------- */
.nav-drop{
  position:absolute;inset-block-start:calc(100% + 10px);inset-inline-start:50%;
  transform:translateX(-50%) translateY(-8px);
  min-width:250px;padding:7px;z-index:5;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 26px 60px -26px rgba(4,11,34,.55);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s var(--ease,ease),transform .2s var(--ease-out,ease),visibility .2s;
}
[dir="rtl"] .nav-drop{transform:translateX(50%) translateY(-8px)}
.nav-item.has-drop:hover .nav-drop,
.nav-item.has-drop:focus-within .nav-drop{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
[dir="rtl"] .nav-item.has-drop:hover .nav-drop,
[dir="rtl"] .nav-item.has-drop:focus-within .nav-drop{transform:translateX(50%) translateY(0)}
/**
 * جسر شفاف يملأ الفجوة بين الرابط واللوح.
 * بدونه كان اللوح يُغلق في منتصف الطريق إليه لأن المؤشر يمرّ على فراغ.
 */
.nav-item.has-drop::after{content:"";position:absolute;inset-block-start:100%;inset-inline:0;height:12px}
.nav-drop-in{display:grid;gap:2px}
.nav-drop a{
  display:block;padding:9px 13px;border-radius:10px;
  font-size:.9rem;font-weight:600;color:var(--ink-2);
  transition:color var(--t-fast,.15s) var(--ease,ease),background var(--t-fast,.15s) var(--ease,ease);
}
.nav-drop a:hover,.nav-drop a[aria-current]{color:var(--blue);background:var(--tint)}

/* ---------- «المزيد» ---------- */
/**
 * تظهر فقط حين لا يتّسع الشريط لكل الروابط (يقرّرها القياس في main.js).
 * ولوحها يُحاذى بنهاية الشريط لا بمنتصف الزرّ: الزرّ قرب الحافة، ولوح
 * متمركز عليه كان نصفه خارج الشاشة.
 */
.nav-more{flex:none}
.nav-more > a{color:var(--blue-300)}
.site-head.is-light .nav-more > a{color:var(--blue)}
.nav-more .nav-drop{
  inset-inline-start:auto;inset-inline-end:0;transform:translateY(-8px);min-width:220px;
}
[dir="rtl"] .nav-more .nav-drop{transform:translateY(-8px)}
.nav-more:hover .nav-drop,.nav-more:focus-within .nav-drop,
[dir="rtl"] .nav-more:hover .nav-drop,[dir="rtl"] .nav-more:focus-within .nav-drop{transform:translateY(0)}
.nav-more .nav-drop .nav-item{border:0}
.nav-more .nav-drop .nav-item > a{
  display:block;width:100%;padding:9px 13px;border-radius:10px;
  font-size:.9rem;color:var(--ink-2);
}
.nav-more .nav-drop .nav-item > a:hover{color:var(--blue);background:var(--tint)}
.nav-more .nav-drop .nav-item > a[aria-current]::after{display:none}
@media (max-width:1080px){.nav-more{display:none}}

/* ---------- «أطلق حملتك» ---------- */
.nav a.nav-cta{
  display:inline-flex;align-items:center;gap:.5em;color:#fff;font-weight:700;
  background:linear-gradient(135deg,var(--blue),var(--blue-700));
  border-radius:var(--r-pill);padding:.55em 1.1em;white-space:nowrap;
  box-shadow:0 10px 22px -12px rgba(15,98,245,.9);
  margin-inline-start:8px;
}
.nav a.nav-cta svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.7;fill:none;flex:none}
.nav a.nav-cta::after{display:none}
.nav a.nav-cta:hover{color:#fff;background:linear-gradient(135deg,var(--blue-400),var(--blue-600))}

/* ---------- أدوات الزائر ---------- */
.head-actions{display:flex;align-items:center;gap:8px;flex:none}

/**
 * زرّ البحث يُظهر اختصاره مكتوباً.
 * الاختصار المخفيّ لا يستعمله أحد؛ وإظهاره هنا يعلّم الزائر مرّة واحدة
 * ثم لا يحتاج الزرّ بعدها.
 */
.head-k{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  padding:.48em .85em;border-radius:var(--r-pill);
  border:1px solid var(--line-dark);background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.66);font-size:.83rem;font-weight:600;
  transition:color var(--t-fast,.15s) var(--ease,ease),border-color var(--t-fast,.15s) var(--ease,ease),
    background var(--t-fast,.15s) var(--ease,ease);
}
.site-head.is-light .head-k{background:var(--tint);border-color:var(--line);color:var(--ink-3)}
.head-k:hover{color:#fff;border-color:var(--blue-400)}
.site-head.is-light .head-k:hover{color:var(--blue);border-color:var(--blue)}
.head-k svg{width:16px;height:16px;flex:none}
.head-k-txt{white-space:nowrap}
.head-k-keys{display:inline-flex;gap:3px}
.head-k-keys kbd{height:19px;min-width:19px;font-size:.63rem;background:transparent;
  border-color:var(--line-dark);color:inherit}
.site-head.is-light .head-k-keys kbd{border-color:var(--line)}
/**
 * الزرّ يبدأ أيقونة وحدها ويكسب نصّه واختصاره كلما اتّسعت الشاشة — لا
 * العكس. الترتيب مهم: النصّ الكامل يكلّف ١٩٠ بكسل من عرض القائمة، وهي
 * بكسلات تخصم من روابط يحتاجها الزائر أكثر مما يحتاج كلمة «ابحث».
 */
.head-k{padding:.5em}
.head-k-txt,.head-k-keys{display:none}
@media (min-width:1360px){.head-k-keys{display:inline-flex}.head-k{padding:.48em .85em}}
@media (min-width:1560px){.head-k-txt{display:inline}}

.icon-btn{
  display:grid;place-items:center;width:38px;height:38px;cursor:pointer;
  border:1px solid var(--line-dark);border-radius:var(--r-pill);
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.7);
  transition:color var(--t-fast,.15s) var(--ease,ease),border-color var(--t-fast,.15s) var(--ease,ease);
}
.site-head.is-light .icon-btn{background:var(--tint);border-color:var(--line);color:var(--ink-3)}
.icon-btn:hover{color:#fff;border-color:var(--blue-400)}
.site-head.is-light .icon-btn:hover{color:var(--blue);border-color:var(--blue)}

.lang-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;
  background:rgba(255,255,255,.08);border:1px solid var(--line-dark);border-radius:var(--r-pill)}
.site-head.is-light .lang-switch{background:var(--tint);border-color:var(--line)}

/* ---------- زر القائمة ---------- */
/**
 * ثلاثة خطوط تتحوّل إلى ✕ لا أيقونتان تتبادلان: التحوّل يقول «هذا الزرّ
 * نفسه يُغلق ما فتحه»، وتبديل الأيقونة يبدو زرّاً آخر ظهر مكانه.
 */
.burger{
  display:none;position:relative;width:40px;height:40px;padding:0;cursor:pointer;
  border:1px solid var(--line-dark);border-radius:12px;background:rgba(255,255,255,.06);
}
.site-head.is-light .burger{background:var(--tint);border-color:var(--line)}
.burger i{
  position:absolute;inset-inline:11px;height:2px;border-radius:2px;background:#fff;
  transition:transform .28s var(--ease-out,ease),opacity .18s var(--ease,ease),top .28s var(--ease,ease);
}
.site-head.is-light .burger i{background:var(--ink)}
.burger i:nth-child(1){top:13px}
.burger i:nth-child(2){top:19px}
.burger i:nth-child(3){top:25px}
.burger.is-open i:nth-child(1){top:19px;transform:rotate(45deg)}
.burger.is-open i:nth-child(2){opacity:0}
.burger.is-open i:nth-child(3){top:19px;transform:rotate(-45deg)}

/* ---------- الدرج على الجوال ---------- */
.nav-foot{display:none}
/* أعلى من الترويسة (٨٠) لأنها تُغطّيها هي أيضاً حين ينفتح الدرج */
.nav-scrim{
  position:fixed;inset:0;z-index:90;background:rgba(4,11,34,.55);
  animation:cmdk-fade .2s var(--ease,ease);
}
.nav-scrim[hidden]{display:none}
html.nav-open{overflow:hidden}

@media (max-width:1080px){
  /**
   * ‏`inset-inline-start:auto` و`max-height:none` ليستا زينة: القاعدة
   * القديمة في main.css تضبط `inset-inline:0` و`max-height:calc(100vh-76px)`.
   * تركهما يجعل الدرج مقيَّداً من الجهتين — فتُهمل جهة النهاية ويلتصق
   * بالجهة المقابلة للزرّ الذي فتحه — ومقصوصاً من أسفل بمقدار ٧٦ بكسل.
   */
  .nav{
    position:fixed;inset-block:0;inset-inline-start:auto;inset-inline-end:0;z-index:95;
    width:min(360px,86vw);max-height:none;margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:22px var(--gutter) 30px;
    background:var(--navy-900);border-bottom:0;
    border-inline-start:1px solid var(--line-dark);
    overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(100%);visibility:hidden;
    transition:transform .34s var(--ease-out,ease),visibility .34s;
  }
  [dir="ltr"] .nav{transform:translateX(100%)}
  [dir="rtl"] .nav{inset-inline-end:0;transform:translateX(-100%)}
  .site-head.is-light .nav{background:var(--paper)}
  .nav.is-open{transform:none;visibility:visible}

  .nav-item{border-bottom:1px solid var(--line-dark)}
  .site-head.is-light .nav-item{border-bottom-color:var(--line-soft)}
  .nav-item > a{
    display:flex;justify-content:space-between;width:100%;
    padding:.95em .2em;border-radius:0;font-size:1.02rem;color:#fff;
  }
  .site-head.is-light .nav-item > a{color:var(--ink)}
  .nav-item > a:hover{background:none}
  .nav-item > a[aria-current]::after{inset-inline:.2em auto;width:22px}

  /* المنسدلة تنطوي داخل التدفّق لا فوقه */
  .nav-drop{
    position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    min-width:0;padding:0 0 10px;border:0;box-shadow:none;background:none;
    display:none;
  }
  [dir="rtl"] .nav-drop{transform:none}
  .nav-item.is-open .nav-drop{display:block}
  .nav-item.has-drop::after{display:none}
  .nav-drop a{padding-inline-start:16px;font-size:.94rem;color:rgba(255,255,255,.7)}
  .site-head.is-light .nav-drop a{color:var(--ink-2)}
  .nav-item.is-open > a .nav-chev{transform:rotate(180deg)}

  .nav-item--cta{border-bottom:0}
  .nav a.nav-cta{justify-content:center;margin:18px 0 0;padding:.95em 1.2em;width:100%}

  .nav-foot{display:grid;gap:12px;margin-top:auto;padding-top:22px}
  .nav-foot-tel{
    display:block;text-align:center;font-family:var(--f-num);font-size:1.05rem;font-weight:700;
    color:var(--blue-300);
  }
  .site-head.is-light .nav-foot-tel{color:var(--blue)}

  .burger{display:block}
  .head-k-txt,.head-k-keys{display:none}
}
@media (max-width:860px){
  .head-actions .btn{display:none}
  .lang-switch{display:none}
}

/* =========================================================
   ٢) التذييل
   ========================================================= */
.site-foot{
  position:relative;overflow:hidden;
  background:var(--navy-950);color:rgba(255,255,255,.66);
  padding-block:clamp(40px,5vw,64px) 0;
}
.site-foot::before{
  content:"";position:absolute;top:-160px;left:50%;
  width:min(820px,92vw);height:320px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(15,98,245,.18),transparent);filter:blur(34px);
}
.site-foot > .wrap{position:relative;z-index:2}
.site-foot a{transition:color var(--t-fast,.15s) var(--ease,ease)}
.site-foot a:hover{color:#fff}

/* ---------- شريط الدعوة ---------- */
.foot-cta{
  display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,3vw,42px);
  flex-wrap:wrap;
  padding:clamp(26px,3.2vw,40px) clamp(24px,3.4vw,46px);
  margin-block-end:clamp(34px,4vw,56px);
  border:1px solid var(--line-dark);border-radius:var(--r-l);
  background:
    radial-gradient(680px 240px at 85% 0%,rgba(15,98,245,.24),transparent 70%),
    rgba(255,255,255,.04);
}
.foot-cta-txt{flex:1 1 380px;min-width:0}
.foot-cta h2{
  margin:0;color:#fff;font-size:clamp(1.25rem,2.3vw,1.9rem);line-height:1.45;max-width:26ch;
}
.foot-cta p{margin:.7em 0 0;font-size:.88rem;color:rgba(255,255,255,.55)}
.foot-cta-act{display:flex;gap:12px;flex-wrap:wrap;flex:none}

/* ---------- الشبكة ---------- */
.foot-grid{
  display:grid;grid-template-columns:1.9fr 1fr 1.15fr 1.05fr 1.25fr;
  gap:clamp(20px,2.6vw,44px);
}
.site-foot h4{
  position:relative;font-family:var(--f-body);font-size:.82rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:#fff;
  margin:0 0 1.4em;padding-bottom:.75em;
}
.site-foot h4::after{
  content:"";position:absolute;inset-block-end:0;inset-inline-start:0;
  width:24px;height:2px;border-radius:2px;background:var(--blue-400);
}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.78em;font-size:.9rem}
.foot-col ul a{display:inline-block;transition:color var(--t-fast,.15s) var(--ease,ease),
  transform var(--t-fast,.15s) var(--ease,ease)}
.foot-col ul a:hover{color:#fff;transform:translateX(-3px)}
[dir="ltr"] .foot-col ul a:hover{transform:translateX(3px)}

.foot-brand .foot-logo{display:inline-block;max-width:100%}
.foot-brand img{height:46px;width:auto;max-width:min(260px,100%);object-fit:contain;display:block}
.foot-brand > p{margin:18px 0 0;max-width:44ch;font-size:.92rem;line-height:1.9}

.foot-markets{
  list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;
}
.foot-markets li{
  padding:.4em 1em;border:1px solid var(--line-dark);border-radius:var(--r-pill);
  font-size:.78rem;font-weight:700;color:rgba(255,255,255,.72);
}

/* ---------- عمود التواصل ---------- */
.foot-contact ul{gap:1em}
.foot-contact li{display:flex;align-items:flex-start;gap:10px;line-height:1.7}
.foot-contact svg{width:16px;height:16px;margin-block-start:3px;flex:none;
  stroke:var(--blue-300);stroke-width:1.6;fill:none}

/* ---------- سطر المصداقية ---------- */
/**
 * ليس زخرفة: «كل رقم مأخوذ من حساب حقيقي» هو الجملة التي تفصل موقع
 * استشاري عن صفحة هبوط، ومكانها الطبيعي حيث يبحث الشكّاك — أسفل الصفحة.
 */
.foot-note{
  display:flex;align-items:flex-start;gap:10px;
  margin:clamp(30px,3.4vw,46px) 0 0;padding:16px 20px;
  border:1px solid var(--line-dark);border-radius:var(--r);
  background:rgba(255,255,255,.03);
  font-size:.85rem;line-height:1.85;color:rgba(255,255,255,.6);max-width:92ch;
}
.foot-note svg{width:17px;height:17px;margin-block-start:4px;flex:none;
  stroke:var(--blue-300);stroke-width:1.6;fill:none}

.foot-bottom{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
  margin-top:clamp(24px,3vw,38px);padding-block:20px;
  font-size:.83rem;color:rgba(255,255,255,.48);
}
/* الأسواق في طرف السطر: تُقرأ كتوقيع لا كجملة ثانية */
.foot-bottom-end{color:rgba(255,255,255,.62);font-weight:600;letter-spacing:.01em}
.foot-bottom::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
}

/* ---------- الاسم المطبوع ---------- */
/**
 * نصفه مقصوص أسفل الشاشة عمداً: الاسم كاملاً يبدو عنواناً منسيّاً، ونصفه
 * يبدو ختماً مطبوعاً على ورق. ‏`clamp` يجعله يملأ العرض على كل مقاس.
 */
.foot-mark{
  position:relative;z-index:1;margin-block-start:-6px;pointer-events:none;
  line-height:.8;text-align:center;overflow:hidden;height:clamp(46px,7vw,104px);
}
.foot-mark span{
  display:block;font-family:var(--f-display);font-weight:800;white-space:nowrap;
  font-size:clamp(3.4rem,11vw,9.5rem);letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.10);
  transform:translateY(-8%);
}
/* المتصفحات بلا -webkit-text-stroke تُظهر نصاً شفافاً غير مرئي — نعطيها لوناً */
@supports not (-webkit-text-stroke:1px red){
  .foot-mark span{color:rgba(255,255,255,.055)}
}

@media (max-width:1080px){
  .foot-grid{grid-template-columns:1.6fr 1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:700px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  .foot-cta{flex-direction:column;align-items:flex-start}
  .foot-cta-act{width:100%}
  .foot-cta-act .btn{flex:1}
  .foot-bottom{justify-content:center;text-align:center}
}
@media (max-width:420px){
  .foot-grid{grid-template-columns:1fr}
}

@media print{
  .site-head,.site-foot,.wa-float,.zaki,.zaki-btn,.nav-scrim{display:none!important}
}

/**
 * نموذج البحث داخل <noscript>.
 *
 * أنماط `.head-search-form` في main.css تجعله لوحاً منسدلاً مطلق الموضع —
 * وهو منطق يعتمد على جافاسكربت يفتحه ويغلقه. ومن عطّل جافاسكربت كان يرى
 * لوحاً معلّقاً بلا سبب ظاهر. هنا يعود حقلاً عادياً في مكانه.
 */
.head-search noscript .head-search-form{
  position:static;width:auto;padding:0;border:0;background:none;box-shadow:none;
}
.head-search noscript .input{min-width:min(240px,40vw)}


/* motion.css */
/* =========================================================
   طبقة الحركة — أنماط.

   مقابل assets/js/motion.js. الإيقاع كله من ثلاثة متغيّرات ومنحنى واحد:
   تغييرها هنا يغيّر إحساس الموقع كله بلا لمس أي ملف آخر.
   ========================================================= */

:root{
  --t-fast:.15s;                          /* الاستجابة تحت المؤشر */
  --t-base:.3s;                           /* تغيّر الحالة */
  --t-slow:.6s;                           /* الظهور عند التمرير */
  --ease:cubic-bezier(.4,0,.2,1);         /* منحنى واحد لكل شيء */
  --ease-out:cubic-bezier(.16,1,.3,1);    /* خروج طويل للظهور فقط */
  --spot:rgba(15,98,245,.07);             /* البقعة الضوئية — خافتة لأن الأرضية بيضاء */
  --spot-r:260px;
}

/* =========================================================
   ١) الظهور عند التمرير
   ========================================================= */
/**
 * كل قاعدة إخفاء هنا مشروطة بـ `html.els-motion` — وهو صنف يضعه motion.js.
 *
 * السبب: إخفاء المحتوى بـCSS ثم انتظار جافاسكربت ليُظهره يجعل أي فشل في
 * السكربت يُخفي محتوى الموقع للأبد. حدث هذا فعلاً — اختفت كروت صفحة النتائج
 * وبقيت مساحة بيضاء. الآن لا سكربت = لا صنف = لا إخفاء: المحتوى ظاهر بلا حركة.
 */
html.els-motion [data-reveal],
html.els-motion .reveal{
  opacity:0;
  transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out),
    clip-path var(--t-slow) var(--ease-out);
  will-change:opacity,transform;
}
html.els-motion .reveal{transform:translateY(22px)}
html.els-motion [data-reveal="up"]    {transform:translateY(22px)}
html.els-motion [data-reveal="fade"]  {transform:none}
html.els-motion [data-reveal="scale"] {transform:scale(.965)}
/* start/end منطقيان لا يمين/يسار: ينعكسان تلقائياً مع dir="rtl" */
html.els-motion [data-reveal="start"] {transform:translateX(-26px)}
html.els-motion [data-reveal="end"]   {transform:translateX(26px)}
html.els-motion[dir="rtl"] [data-reveal="start"]{transform:translateX(26px)}
html.els-motion[dir="rtl"] [data-reveal="end"]  {transform:translateX(-26px)}
html.els-motion [data-reveal="clip"]  {clip-path:inset(0 0 100% 0);opacity:1}

html.els-motion [data-reveal].is-in,
html.els-motion .reveal.is-in,
html.els-motion .reveal.in{opacity:1;transform:none;clip-path:inset(0 0 0 0);will-change:auto}

/* =========================================================
   ٢) البقعة الضوئية تحت المؤشر
   ========================================================= */
/* الطبقة أسفل المحتوى وفوق الخلفية: تضيء الأرضية ولا تغسل النص */
.has-spot{position:relative;isolation:isolate}
.has-spot::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(var(--spot-r) circle at var(--mx,-999px) var(--my,-999px),var(--spot),transparent 70%);
  opacity:0;transition:opacity var(--t-base) var(--ease);
}
.has-spot:hover::before{opacity:1}

/* الحدّ يضيء مع البطاقة: يشدّ حافتها فتُقرأ كوحدة مرتفعة عن الصفحة */
.card.has-spot,.rescard.has-spot,.book.has-spot{
  transition:border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),
    transform var(--t-base) var(--ease);
}

/* =========================================================
   ٣) الأزرار
   ========================================================= */
.btn{transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),
  background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
/* البريق يمرّ مرة واحدة عند المرور — لمعة معدن لا وميض متكرر */
.btn--primary{position:relative;overflow:hidden}
.btn--primary::after{
  content:"";position:absolute;inset-block:0;inset-inline-start:-140%;width:60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);transition:inset-inline-start .55s var(--ease);pointer-events:none;
}
.btn--primary:hover::after{inset-inline-start:140%}

/* =========================================================
   ٤) الترويسة
   ========================================================= */
.site-head{transition:transform var(--t-base) var(--ease),background var(--t-base) var(--ease),
  box-shadow var(--t-base) var(--ease),padding var(--t-base) var(--ease)}
.site-head.is-scrolled{box-shadow:0 10px 30px -22px rgba(4,11,34,.55)}
.site-head.is-scrolled .wrap{padding-block:8px}
/* الاختفاء عند النزول: الشريط الدائم يسرق ٧٧ بكسل من كل شاشة */
.site-head.is-hidden{transform:translateY(-105%)}

/* =========================================================
   ٥) شريط تقدّم القراءة
   ========================================================= */
.read-progress{position:fixed;inset-block-start:0;inset-inline:0;height:3px;z-index:60;pointer-events:none}
.read-progress i{
  display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--blue-400));
  transform:scaleX(0);transform-origin:inline-start;
}
html[dir="rtl"] .read-progress i{transform-origin:right}
html[dir="ltr"] .read-progress i{transform-origin:left}

/* =========================================================
   ٦) العنوان كلمةً كلمة
   ========================================================= */
/* نفس المبدأ: بلا سكربت لا يوجد .split-ready أصلاً، فالعنوان يظهر كما هو */
html.els-motion .split-ready .w{
  display:inline-block;opacity:0;transform:translateY(.5em);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
}
html.els-motion .split-ready.is-in .w{opacity:1;transform:none}

/* =========================================================
   ٧) الوهج المحيط
   ========================================================= */
/* الحركة بطيئة جداً (٢٢ ثانية) — أسرع منها تتحول من عمق إلى شاشة توقف */
.orbs.is-live .orb{animation:els-drift 22s var(--ease) infinite alternate}
.orbs.is-live .orb--b{animation-duration:29s;animation-delay:-6s}
@keyframes els-drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(4%,-6%,0) scale(1.12)}
}

/* =========================================================
   ٨) لمسات دقيقة
   ========================================================= */
/* الرابط يرسم خطه من جهة البداية لا من الوسط — يقرأ كخط تحته لا كشريط */
.link-more{position:relative}
.link-more::after{
  content:"";position:absolute;inset-block-end:-3px;inset-inline:0;height:1.5px;background:currentColor;
  transform:scaleX(0);transform-origin:inline-start;transition:transform var(--t-base) var(--ease);
}
.link-more:hover::after{transform:scaleX(1)}

/* صور البطاقات تكبر داخل إطارها بلا أن تدفع ما حولها */
.card > a[style*="overflow"] img,.book-cover img{transition:transform .5s var(--ease)}
.card:hover > a[style*="overflow"] img,.book:hover .book-cover img{transform:scale(1.05)}

/* شعارات الشركاء تستعيد ألوانها عند المرور على الشريط كله لا على الشعار وحده */
.marquee:hover .marquee-track{animation-play-state:paused}

/* حقول النموذج ترتفع قليلاً عند التركيز — يؤكّد أين يكتب المستخدم */
.input:focus{transform:translateY(-1px)}
.field > .input{transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),
  transform var(--t-fast) var(--ease)}

/* =========================================================
   ٩) احترام تفضيل تقليل الحركة
   ========================================================= */
/* أقوى من التصريحات أعلاه كلها: من عطّل الحركة في نظامه لا يرى شيئاً منها */
@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal].is-in,.reveal,.split-ready .w{
    opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important;
  }
  .has-spot::before,.btn--primary::after{display:none}
  .orbs.is-live .orb{animation:none}
  .site-head.is-hidden{transform:none}
  .read-progress{display:none}
}

/* =========================================================
   ١٠) الكلمات التي تتفاعل مع لمس المؤشر
   ========================================================= */
/**
 * مساران لا واحد — راجع التعليق الطويل في motion.js:
 *
 *   .fx-joined  نصّ متّصل (عربي): الكلمة عقدة نصّية واحدة، ويتحرّك عليها
 *               تدرّج لوني مقصوص على شكل الحروف. لا تقسيم، فلا كسر
 *               للاتصال.
 *   .fx-split   نصّ لاتيني: حروف مستقلّة، كلٌّ يحمل `--p` (قرب المؤشر).
 */
.fx-ready{
  --fx-to:var(--blue);
  /* المدة قصيرة عمداً: التفاعل يجب أن يبدو ملتصقاً بالمؤشر لا لاحقاً به */
  --fx-t:.18s;
  position:relative;display:inline-block;
}
.sec--dark .fx-ready,.hero .fx-ready,.site-foot .fx-ready,.cta-band .fx-ready{--fx-to:var(--blue-300)}

/* =========================================================
   المسار الأول: نصّ متّصل — ضوء يتبع المؤشر
   ========================================================= */
/**
 * داخل @supports إلزاماً.
 *
 * ‏`-webkit-text-fill-color:transparent` بلا `background-clip:text` يعني
 * نصّاً شفّافاً على خلفية شفّافة — أي **كلمة مختفية**. فلا تُكتب هذه
 * الخاصية إلا حيث يُعرف أن القصّ مدعوم.
 *
 * ‏`--fx-from` يكتبه السكربت من اللون المحسوب قبل التعديل: لا يصحّ
 * `currentColor` هنا لأن تعبئة العنصر نفسه صارت شفّافة.
 */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .fx-joined{
    background-image:radial-gradient(circle at var(--mx,-999px) 55%,
      var(--fx-to) 0,
      var(--fx-to) 14px,
      var(--fx-from,currentColor) 62px);
    background-repeat:no-repeat;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    /* الانتقال على `background-position` لا على الصورة: تحريك التدرّج
       نفسه غير قابل للتحريك، والنتيجة قفزة لا انسياب. */
    transition:transform var(--fx-t) var(--ease-out);
  }
}
/* ارتفاع خفيف للكلمة كاملة — لا يمسّ الحروف فلا يمسّ الاتصال */
.fx-joined:hover{transform:translateY(-.10em)}

/* =========================================================
   المسار الثاني: نصّ لاتيني — حروف مستقلّة
   ========================================================= */
.fx-split .ch{
  display:inline-block;
  will-change:transform;
  transition:transform var(--fx-t) var(--ease-out),color var(--fx-t) var(--ease);
}
.fx-split.fx-wave .ch{
  transform:translateY(calc(var(--p,0) * -.30em)) scale(calc(1 + var(--p,0) * .07));
}
.fx-split.fx-scatter .ch{
  transform:translate(var(--dx,0),calc(var(--p,0) * -.14em));
}
@supports (color:color-mix(in oklab,red,blue)){
  .fx-split.fx-wave .ch,.fx-split.fx-scatter .ch{
    color:color-mix(in oklab,var(--fx-from,currentColor),var(--fx-to) calc(var(--p,0) * 100%));
  }
}

/* ---- rise: ارتفاع متتابع بسيط ---- */
.fx-split.fx-rise .ch{transition-delay:calc(var(--i,0) * 26ms)}
.fx-split.fx-rise:hover .ch{transform:translateY(-.16em);color:var(--fx-to)}
/* نظيره في النصّ المتّصل: الكلمة كلها ترتفع وتتلوّن */
.fx-lift{transition:transform .3s var(--ease-out),color .3s var(--ease)}
.fx-lift:hover{transform:translateY(-.12em);color:var(--fx-to)}

/* ---- decode: النصّ يتبدّل، اللون وحده يتحرّك ---- */
.fx-decode{transition:color var(--fx-t) var(--ease)}
.fx-decode:hover{color:var(--fx-to)}
/* الكلمة تحجز عرضها فلا يرتجف السطر أثناء تبدّل الرموز */
.fx-decode{min-width:var(--fx-w,auto)}

/**
 * خطّ يُرسم تحت الكلمة مع اقتراب المؤشر — يؤكّد أنها كلمة مقصودة لا
 * حرفاً تحرّك بالصدفة.
 */
.fx-ready::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:-.08em;height:2px;border-radius:2px;
  background:var(--fx-to);transform:scaleX(0);transform-origin:var(--fx-origin,0) 50%;
  transition:transform .34s var(--ease-out);opacity:.55;
}
[dir="rtl"] .fx-ready::after{--fx-origin:100%}
.fx-ready:hover::after{transform:scaleX(1)}
.fx-decode::after{display:none}

@media (prefers-reduced-motion:reduce){
  .fx-split .ch,.fx-joined,.fx-lift{transform:none!important;transition:none!important}
  .fx-joined{-webkit-text-fill-color:currentColor;background-image:none}
  .fx-ready::after{display:none}
}


/* ui.css */
/* =========================================================
   طبقة التجربة — أنماط.
   مقابل assets/js/ui.js: لوحة الأوامر، زر الأعلى، الفهرس، المشاركة،
   ورسالة التأكيد. كلها تستعمل متغيّرات main.css فتتبع الهوية والوضع
   الليلي بلا تعريف لون واحد خاص بها.
   ========================================================= */

/* =========================================================
   ١) لوحة الأوامر
   ========================================================= */
.cmdk{position:fixed;inset:0;z-index:9000;display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(16px,10vh,120px) 16px 16px}
.cmdk[hidden]{display:none}
html.cmdk-on{overflow:hidden}

.cmdk-veil{position:absolute;inset:0;background:rgba(4,11,34,.55);backdrop-filter:blur(6px);
  animation:cmdk-fade .22s var(--ease)}

.cmdk-box{
  position:relative;width:min(680px,100%);max-height:min(70vh,620px);display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(4,11,34,.65);
  animation:cmdk-in .26s var(--ease-out);
}
@keyframes cmdk-fade{from{opacity:0}to{opacity:1}}
@keyframes cmdk-in{from{opacity:0;transform:translateY(-14px) scale(.98)}to{opacity:1;transform:none}}

.cmdk-top{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line-soft)}
.cmdk-top svg{width:20px;height:20px;color:var(--ink-3);flex:none}
.cmdk-top input{
  flex:1;min-width:0;border:0;background:none;outline:none;
  font-family:var(--f-display);font-size:1.05rem;font-weight:700;color:var(--ink);
}
.cmdk-top input::placeholder{color:var(--ink-3);font-weight:400}

kbd{
  display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;
  border:1px solid var(--line);border-block-end-width:2px;border-radius:6px;background:var(--tint);
  font-family:var(--f-num);font-size:.7rem;font-weight:600;color:var(--ink-3);
}

.cmdk-list{overflow-y:auto;padding:8px;overscroll-behavior:contain}
.cmdk-group{
  padding:12px 14px 6px;font-size:.72rem;font-weight:800;letter-spacing:.1em;
  color:var(--ink-3);text-transform:uppercase;
}
.cmdk-row{
  display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:var(--r-s);cursor:pointer;
  transition:background var(--t-fast,.15s) var(--ease);
}
/* التمييز بالخلفية لا بالإطار: الإطار يزحزح النص بمقدار عرضه فيرتجف الصفّ */
.cmdk-row.is-on{background:var(--tint-2)}
.cmdk-ico{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:9px;
  background:var(--tint);color:var(--blue)}
.cmdk-row.is-on .cmdk-ico{background:var(--blue);color:#fff}
.cmdk-ico svg{width:17px;height:17px}
.cmdk-txt{min-width:0;flex:1}
.cmdk-txt b{display:block;font-size:.95rem;font-weight:700;line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-txt small{display:block;font-size:.8rem;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-ext{color:var(--ink-3);font-size:.9rem}
.cmdk-empty{padding:34px 14px;text-align:center;color:var(--ink-3);font-size:.92rem}

.cmdk-foot{
  display:flex;gap:18px;flex-wrap:wrap;padding:11px 20px;border-top:1px solid var(--line-soft);
  background:var(--tint);font-size:.76rem;color:var(--ink-3);
}
.cmdk-foot span{display:inline-flex;align-items:center;gap:5px}
@media (max-width:640px){.cmdk-foot{display:none}}

/* =========================================================
   ٢) رسالة التأكيد
   ========================================================= */
/**
 * ‏`left:50%` فيزيائية لا `inset-inline-start`.
 *
 * التوسيط هنا يتمّ بـ`translate(-50%)`، وهي إزاحة فيزيائية دائماً. ومع
 * `inset-inline-start:50%` في الصفحة العربية يصير الأصل الحافة اليمنى،
 * فتُطرح نصف العرض من الجهة الخطأ ويخرج التنبيه عن المركز.
 */
.els-toast{
  position:fixed;bottom:26px;left:50%;z-index:9500;
  transform:translate(-50%,18px);opacity:0;pointer-events:none;
  padding:12px 22px;border-radius:var(--r-pill);
  background:var(--navy-900);color:#fff;font-size:.9rem;font-weight:600;
  box-shadow:var(--shadow-m);
  transition:opacity .24s var(--ease),transform .24s var(--ease-out);
}
.els-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* =========================================================
   ٣) زر العودة لأعلى
   ========================================================= */
/**
 * الموضع: نفس جهة زرّ واتساب و**فوقه**، لا في «الجهة المقابلة».
 *
 * كانت النيّة وضعه مقابلاً لواتساب، لكن `.wa-float` تستعمل
 * `inset-inline-start` هي الأخرى — أي أن الاثنين انتهيا في الجهة نفسها
 * وتراكبا تماماً على الشاشة العربية (قيس: واتساب عند x=1349 وعرضه ٥٤،
 * وزرّ الأعلى عند x=1355 وعرضه ٤١ — داخله بالكامل).
 *
 * والحلّ ليس نقله إلى الجهة الأخرى: هناك زرّ «اسأل زكي». الجهتان
 * مشغولتان، فالمكان الوحيد الباقي هو أعلى واتساب — وهو الترتيب المتعارف
 * عليه أصلاً في المواقع.
 *
 * والإزاحة الأفقية (٢٦) محسوبة لا اعتباطية: تجعل مركز الزرّين على خطّ
 * رأسي واحد (٢٢ + ٥٤/٢ = ٤٩ = ٢٦ + ٤٦/٢).
 */
.els-top{
  position:fixed;inset-block-end:22px;inset-inline-start:26px;z-index:60;
  width:46px;height:46px;border:0;padding:0;border-radius:50%;cursor:pointer;
  background:var(--paper);color:var(--blue);box-shadow:var(--shadow-m);
  display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
  transition:opacity .28s var(--ease),transform .28s var(--ease-out),visibility .28s;
}
.els-top.is-on{opacity:1;visibility:visible;transform:none}
.els-top:hover{color:#fff;background:var(--blue)}
.els-top-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.els-top-ring circle{fill:none;stroke:var(--line);stroke-width:2.5}
/* الحلقة الممتلئة تقيس ما قُرئ من الصفحة — لا زينة دائرية حول سهم */
.els-top-ring .els-top-fill{stroke:var(--blue);stroke-linecap:round;
  transition:stroke-dashoffset .18s linear}
.els-top:hover .els-top-ring circle{stroke:rgba(255,255,255,.28)}
.els-top:hover .els-top-ring .els-top-fill{stroke:#fff}
.els-top-arrow{position:relative;width:18px;height:18px}

/* مع وجود زرّ واتساب يرتفع فوقه؛ وبدونه يأخذ مكانه */
body.has-wa .els-top{inset-block-end:88px}

@media (max-width:600px){
  .els-top{inset-block-end:20px;inset-inline-start:28px;width:42px;height:42px}
  body.has-wa .els-top{inset-block-end:86px}
}
@media print{.els-top,.els-toast,.cmdk{display:none!important}}

/* =========================================================
   ٤) فهرس المقال
   ========================================================= */
.els-toc{
  margin:0 0 30px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--tint);overflow:hidden;max-width:78ch;
}
.els-toc-head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 20px;border:0;background:none;cursor:pointer;
  font-family:var(--f-display);font-size:.95rem;font-weight:800;color:var(--ink);
}
.els-toc-head svg{width:18px;height:18px;color:var(--ink-3);transition:transform var(--t-base,.3s) var(--ease)}
.els-toc.is-closed .els-toc-head svg{transform:rotate(-90deg)}
.els-toc-list{
  list-style:none;margin:0;padding:0 20px 18px;display:grid;gap:2px;
  counter-reset:toc;
}
.els-toc.is-closed .els-toc-list{display:none}
.els-toc-list li{position:relative}
.els-toc-list li.is-sub{padding-inline-start:18px}
.els-toc-list a{
  display:block;padding:7px 12px;border-radius:8px;font-size:.92rem;color:var(--ink-2);
  border-inline-start:2px solid transparent;
  transition:color var(--t-fast,.15s) var(--ease),background var(--t-fast,.15s) var(--ease),
    border-color var(--t-fast,.15s) var(--ease);
}
.els-toc-list a:hover{color:var(--ink);background:var(--paper)}
/* القسم الذي يقرأه الزائر الآن — يجيب «أين أنا» بطرف العين */
.els-toc-list a[aria-current]{color:var(--blue);background:var(--paper);border-inline-start-color:var(--blue);font-weight:700}

/* على الشاشات الواسعة يلتصق الفهرس بجانب المقال بدل أن يعترض قراءته */
@media (min-width:1180px){
  .entry{--toc-w:250px}
  .els-toc{
    position:sticky;inset-block-start:96px;float:inline-end;width:var(--toc-w);
    margin-inline-start:34px;margin-block-end:20px;max-width:none;
  }
}
@media print{.els-toc{display:none}}

/* =========================================================
   ٥) شريط المشاركة
   ========================================================= */
.els-share{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.els-share-lbl{font-size:.85rem;font-weight:700;color:var(--ink-3);margin-inline-end:4px}
.els-share-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--paper);color:var(--ink-2);font-size:.85rem;font-weight:600;cursor:pointer;
  transition:color var(--t-fast,.15s) var(--ease),border-color var(--t-fast,.15s) var(--ease),
    background var(--t-fast,.15s) var(--ease),transform var(--t-fast,.15s) var(--ease);
}
.els-share-btn svg{width:15px;height:15px}
.els-share-btn:hover{color:var(--blue);border-color:var(--blue);background:var(--tint);transform:translateY(-1px)}
@media print{.els-share{display:none}}

/* =========================================================
   ٦) مفتاح الوضع الليلي
   ========================================================= */
/**
 * ثلاث حالات في زرّ واحد. الأيقونة تتبدّل بالسمة `data-mode` لا بصنف
 * يضيفه السكربت — فحالة الزر لا تفترق أبداً عن حالة الصفحة.
 */
[data-theme-toggle]{position:relative}
[data-theme-toggle] svg{width:18px;height:18px}
[data-theme-toggle] .ic{display:none}
[data-theme-toggle][data-mode="auto"]  .ic-auto {display:block}
[data-theme-toggle][data-mode="light"] .ic-light{display:block}
[data-theme-toggle][data-mode="dark"]  .ic-dark {display:block}

/* =========================================================
   ٧) المقال: الغلاف والمشاركة والتذييل
   ========================================================= */
/**
 * كانت هذه الثلاثة مكتوبة في `style=` داخل single.php — أي غير قابلة
 * للتجاوز في الوضع الليلي ولا في الطباعة، ومكرّرة في كل قالب يحتاجها.
 */
.entry-cover{
  margin:0 0 34px;padding:10px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-s);
}
.entry-cover img{width:100%;border-radius:calc(var(--r-s) - 4px)}

.entry-share{margin:30px 0 0}
.entry-share:empty{display:none}

.entry-foot{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-block-start:26px;padding-block-start:24px;border-block-start:1px solid var(--line);
}

/* =========================================================
   ٨) صفحة ٤٠٤
   ========================================================= */
/**
 * البحث أولاً لا الاعتذار: من وصل إلى ٤٠٤ يعرف ما يريد ولا يعرف أين هو،
 * وحقل بحث مملوء مسبقاً بما فهمناه من الرابط أقرب إلى إجابته من أي نصّ.
 */
.err-search{
  display:flex;align-items:center;gap:10px;max-width:520px;margin:0 auto 26px;
  padding-block:7px;padding-inline:18px 7px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill);
  box-shadow:var(--shadow-s);
}
.err-search svg{width:19px;height:19px;color:var(--ink-3);flex:none}
.err-search input{
  flex:1;min-width:0;border:0;background:none;outline:none;
  font-size:1rem;color:var(--ink);padding-block:10px;
}
.err-search input::placeholder{color:var(--ink-3)}

.err-links{
  list-style:none;margin:0 auto 30px;padding:0;max-width:640px;
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
}
.err-links a{
  display:inline-block;padding:.5em 1.1em;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--tint);
  font-size:.88rem;font-weight:600;color:var(--ink-2);
  transition:color var(--t-fast,.15s) var(--ease),border-color var(--t-fast,.15s) var(--ease);
}
.err-links a:hover{color:var(--blue);border-color:var(--blue)}

.err-act{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* =========================================================
   ٩) فتات الخبز
   ========================================================= */
/**
 * عنصر تنقّل كان مفقوداً من الموقع كلّه: الزائر الذي يصل إلى كتاب أو
 * تقرير من نتائج البحث لا يعرف أين هو ولا كيف يصعد مستوى.
 *
 * والفاصل `/` من `::after` لا من نصّ في HTML: نصّ الفاصل يُقرأ بصوت
 * عالٍ في قارئ الشاشة بين كل عنصرين — «الرئيسية شرطة مائلة المكتبة».
 */
.crumbs{margin:0 0 clamp(14px,2vw,22px);font-size:.83rem;line-height:1.7}
.crumbs ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;
}
.crumbs li{display:inline-flex;align-items:center;min-width:0}
.crumbs li+li::before{
  content:"/";
  margin-inline:.55em;
  color:var(--ink-3);opacity:.6;
  /* الفاصل لا ينقلب مع الاتجاه: الشرطة المائلة رمز محايد */
  unicode-bidi:isolate;
}
/**
 * ‏`--ink-2` لا `--ink-3` للروابط.
 *
 * حُسب التباين: `--ink-3` (#78859C) على الأبيض = ٣٫٩:١، ونصّ فتات الخبز
 * صغير (١٣px) فالمعيار المطلوب ٤٫٥:١. و`--ink-2` (#46536B) يعطي ٧٫٥:١.
 * ولا يضيع التدرّج البصري: الصفحة الحالية أغمق منها وبوزن أثقل.
 */
.crumbs a{
  color:var(--ink-2);
  border-block-end:1px solid transparent;
  transition:color var(--t-fast,.15s) var(--ease),border-color var(--t-fast,.15s) var(--ease);
}
.crumbs a:hover{color:var(--blue);border-block-end-color:currentColor}
.crumbs [aria-current]{
  color:var(--ink);font-weight:600;
  /* اسم الصفحة الحالية قد يطول — يُقصّ ولا يكسر السطر */
  max-width:min(46ch,60vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* على الأقسام الداكنة (صفحة البحث مثلاً) */
.sec--dark .crumbs a,.results-hero .crumbs a{color:rgba(255,255,255,.72)}
.sec--dark .crumbs a:hover,.results-hero .crumbs a:hover{color:var(--blue-300)}
.sec--dark .crumbs [aria-current],.results-hero .crumbs [aria-current]{color:#fff}
.sec--dark .crumbs li+li::before,.results-hero .crumbs li+li::before{color:rgba(255,255,255,.45)}

@media print{.crumbs{display:none}}

/* =========================================================
   خزنة إعلانات المنافسين
   ========================================================= */
.vault{margin-block-start:clamp(30px,4vw,52px)}
.vault .panel-head{display:flex;align-items:center;gap:12px;margin-block-end:16px}
.vault .panel-head h2{font-size:clamp(1.15rem,2vw,1.5rem);margin:0}
.vault .spacer{flex:1}

/* ---------------- شريط المراتب ---------------- */
/**
 * المرتبة تُميَّز باللون **وبالنصّ** معاً.
 *
 * اللون وحده لا يصل لمن لا يميّزه، ولا يظهر في الطباعة. والاسم مكتوب على كل
 * زرّ وعلى كل بطاقة، فاللون تسريع للقراءة لا بديل عنها.
 */
.vault-tiers{display:flex;gap:8px;flex-wrap:wrap;margin-block-end:14px}
.vtier{
  /*
   * الأزرق لا `--ink-3` للزرّ المحايد («الكل»).
   *
   * حُسب: `--ink-3` في الوضع الليلي يعطي ٤٫٥٦:١ على أرضية الحالة النشطة —
   * فوق الحدّ بشعرة. والأهمّ أن الزرّ النشط يجب أن يبرز لا أن يخفت: هو ما
   * يقول للباحث أي مرتبة يرى الآن.
   */
  --vt:var(--blue);
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--line);background:var(--paper);color:var(--ink-2);
  font:inherit;font-size:.85rem;font-weight:700;
  transition:border-color var(--t-fast,.15s) var(--ease,ease),color var(--t-fast,.15s) var(--ease,ease);
}
.vtier b{
  display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;
  border-radius:999px;background:var(--vt);color:#fff;font-size:.72rem;font-weight:800;
}
.vtier:hover{border-color:var(--vt);color:var(--vt)}
.vtier.is-on{border-color:var(--vt);color:var(--vt);background:color-mix(in srgb,var(--vt) 8%,var(--paper))}
@supports not (background:color-mix(in srgb,red 8%,blue)){
  .vtier.is-on{background:var(--tint)}
}

/* ---------------- شريط الإجراءات ---------------- */
.vault-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 14px;margin-block-end:14px;
  border:1px solid var(--line);border-radius:var(--r-m,14px);background:var(--tint)}
.vault-all{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:.86rem;font-weight:600}
.vault-acts{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.vault-bar .spacer{flex:1}

/* ---------------- الشبكة ---------------- */
.vault-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.vcard{
  --vt:var(--ink-3);
  position:relative;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--r-m,14px);overflow:hidden;
  background:var(--paper);
  /* الحدّ الملوّن على الحافة العلوية: يُقرأ من طرف الشاشة بلا قراءة نصّ */
  border-block-start:3px solid var(--vt);
}
.vcard[hidden]{display:none}

.vpick{position:absolute;inset-block-start:8px;inset-inline-start:8px;z-index:2}
.vpick input{width:18px;height:18px;cursor:pointer}

.vmedia{position:relative;aspect-ratio:4/5;background:var(--tint);display:grid;place-items:center;overflow:hidden}
.vmedia img{width:100%;height:100%;object-fit:cover;display:block}
.vnomedia{font-size:.78rem;color:var(--ink-3);text-align:center;padding:14px}
.vtag{
  position:absolute;inset-block-end:8px;inset-inline-end:8px;
  padding:3px 10px;border-radius:999px;background:var(--vt);color:#fff;
  font-size:.7rem;font-weight:800;
}

.vbody{padding:12px 12px 8px;flex:1;min-width:0}
.vbody b{display:block;font-size:.9rem;margin-block-end:4px}
.vbody p{margin:0 0 8px;font-size:.8rem;line-height:1.7;color:var(--ink-2)}
.vmeta{display:flex;gap:8px;flex-wrap:wrap;font-size:.72rem;color:var(--ink-3);font-weight:600}
.vmeta span{padding:2px 7px;border-radius:6px;background:var(--tint)}

.vfoot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px 12px}
.vfoot .spacer{flex:1}
.vfoot form{margin:0}
.vdl,.vlink{font-size:.76rem;font-weight:700;color:var(--blue);text-decoration:none}
.vdl:hover,.vlink:hover{text-decoration:underline}
.vlink{color:var(--ink-3)}
.vdel{
  width:24px;height:24px;border:0;border-radius:6px;cursor:pointer;
  background:none;color:var(--ink-3);font-size:1.1rem;line-height:1;
}
.vdel:hover{background:var(--err-50,#FDECEA);color:var(--err,#B3261E)}

.vault-empty{margin-block-start:16px;color:var(--ink-3);font-size:.9rem}

/* ---------------- نموذج الإضافة ---------------- */
.vault-add{margin-block-start:18px}
.vault-add summary{
  cursor:pointer;list-style:none;display:inline-block;
  padding:9px 16px;border:1.5px solid var(--line);border-radius:999px;
  font-weight:700;font-size:.86rem;color:var(--blue);
}
.vault-add summary::-webkit-details-marker{display:none}
.vault-add summary::marker{content:''}
.vault-add summary:hover{border-color:var(--blue)}
.vform{margin-block-start:16px;padding:18px;border:1px solid var(--line);border-radius:var(--r-m,14px);background:var(--paper)}
.vform--import{margin-block-start:12px;background:var(--tint)}

@media print{
  .vault-bar,.vault-add,.vpick,.vdel{display:none!important}
}

/* ---------------- اللصق الذكي ---------------- */
/**
 * أوّل ما يراه الباحث في الخزنة.
 *
 * أرضية مميّزة وحدّ أزرق: هذا هو الطريق الذي يملأ الخزنة، وكل ما تحته
 * (التصنيف والتنزيل والتصدير) لا يعمل قبله. جعله يبدو كحقل عادي بين حقول
 * كان يجعله يُتخطّى.
 */
.vpaste{
  margin-block-end:16px;padding:16px;
  border:1.5px solid var(--blue);border-radius:var(--r-m,14px);
  background:var(--blue-50);
}
.vpaste-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-block-end:10px}
.vpaste-head b{font-size:.95rem}
.vpaste-head .muted{font-size:.8rem}
.vpaste textarea{width:100%;font-family:var(--f-body);line-height:1.7;resize:vertical}
.vpaste-foot{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-block-start:12px}
.vpaste-foot .field{margin:0;min-width:150px}
.vpaste-foot .spacer{flex:1}

/* ---------------- المُلحق ---------------- */
.vbm{margin-block-end:18px;font-size:.88rem}
.vbm summary{cursor:pointer;list-style:none;color:var(--blue);font-weight:700;padding:6px 0}
.vbm summary::-webkit-details-marker{display:none}
.vbm summary::marker{content:''}
.vbm summary::before{content:'+ ';font-weight:800}
.vbm[open] summary::before{content:'\2212 '}
.vbm ol{margin:8px 0 0;padding-inline-start:20px;line-height:2.4;color:var(--ink-2)}
.vbm kbd{
  display:inline-block;padding:1px 6px;border-radius:5px;
  border:1px solid var(--line);background:var(--tint);
  font-family:var(--f-body);font-size:.78rem;font-weight:700;
}
/* الزرّ يُسحب لا يُضغط — المؤشّر يقول ذلك قبل المحاولة */
.vbm-drag{cursor:grab}
.vbm-drag:active{cursor:grabbing}
.vbm p{margin-block-start:10px;font-size:.82rem}

/* تنبيه «بلا كريتيف» — إرشاد لا خطأ، فلونه كهرماني لا أحمر */
.vault-hint{
  margin:0 0 14px;padding:11px 14px;
  border:1px solid var(--line);border-inline-start:3px solid #B25A08;
  border-radius:var(--r-m,14px);background:var(--tint);
  font-size:.86rem;line-height:1.8;color:var(--ink-2);
}


/* cursor.css */
/* =========================================================
   مؤشر الهوية — أنماط.

   مقابل assets/js/cursor.js. الشكل مأخوذ من إطار الشعار: مربّع مستدير
   الأركان بركن واحد حادّ. في السكون تلتقي الأركان الأربعة فتكوّن الإطار
   كاملاً؛ وفوق ما يُنقر تتباعد فتصير عدسة تصويب تؤطّر العنصر.

   لا شيء هنا يعمل بلا `html.has-mecur` — وهو صنف لا يضعه إلا السكربت بعد
   أول حركة فأرة حقيقية. فلو تعطّل السكربت أو مُنع، بقي مؤشر النظام كما هو
   ولم يفقد المستخدم شيئاً.
   ========================================================= */

/* =========================================================
   قاعدة تحكم هذا الملف كله: الإحداثيات هنا **فيزيائية** لا منطقية.

   ‏`clientX/clientY` تُقاس دائماً من الحافة اليسرى العليا للنافذة مهما
   كان اتجاه الصفحة. وأي `inset-inline-start` هنا ينقلب إلى `right` في
   الصفحة العربية، فيصير أصل الإحداثيات الركن الأيمن — و`translate3d`
   بمقدار ‎400px‎ يدفع المؤشر ‎400‎ بكسل **خارج** الشاشة يميناً.

   وهذا ما حدث فعلاً: اختفى مؤشر الهوية تماماً، ومعه مؤشر النظام (لأن
   `cursor:none` موروثة من `html`) — فبقي المستخدم بلا أي مؤشر.

   فلا تُستعمل `inset-inline-*` إلا داخل صندوق الإطار نفسه (أركانه)،
   حيث لا تختلط بإحداثيات النافذة.
   ========================================================= */

.mecur{
  position:fixed;top:0;left:0;width:100%;height:100%;
  z-index:99999;pointer-events:none;
  opacity:0;transition:opacity .28s var(--ease,cubic-bezier(.4,0,.2,1));
  contain:layout style;
}
/**
 * ثلاثة شروط لظهور المؤشر — وأهمها الثالث.
 *
 * ‏`mecur-live` لا يضعه السكربت إلا **بعد أن يرسم إطاراً فعلياً**. بلا
 * هذا الشرط، أي فشل في حلقة الرسم (متصفح يمنع rAF، خطأ في سكربت آخر،
 * إضافة كاش تدمج الملفات وتكسر الترتيب) كان يترك `cursor:none` سارية
 * بلا بديل يظهر — أي مستخدم بلا مؤشر إطلاقاً.
 *
 * الآن: لا رسم = لا صنف = مؤشر النظام كما هو. الفشل يُفقد الزينة لا
 * القدرة على استعمال الموقع.
 */
html.has-mecur.mecur-live .mecur{opacity:1}
html.mecur-native .mecur{opacity:0}

/* المتغيّرات في مكان واحد: تغييرها يغيّر المؤشر كله */
.mecur{
  --cur:var(--blue,#0F62F5);
  --cur-dot:10px;
  --cur-box:30px;      /* مقاس الإطار في السكون */
  --cur-arm:15px;      /* طول ذراع الركن — نصف المقاس = أركان متلاصقة */
  --cur-r:9px;
  --cur-w:1.7px;
}
.mecur.is-dark{--cur:var(--blue-300,#7FB0FF)}

/* ---------------- النقطة ---------------- */
/**
 * مربّع لا دائرة، وبنصف قطر صغير — الشعار مبنيّ على المربّع المستدير،
 * ونقطة دائرية هنا تكسر النسب البصرية للهوية بلا سبب.
 */
.mecur-dot{
  position:absolute;top:0;left:0;
  width:var(--cur-dot);height:var(--cur-dot);margin:calc(var(--cur-dot) / -2) 0 0 calc(var(--cur-dot) / -2);
  border-radius:3px;background:var(--cur);
  will-change:transform;
  transition:width .2s var(--ease,cubic-bezier(.4,0,.2,1)),height .2s var(--ease,cubic-bezier(.4,0,.2,1)),
    margin .2s var(--ease,cubic-bezier(.4,0,.2,1)),border-radius .2s var(--ease,cubic-bezier(.4,0,.2,1)),
    background .2s var(--ease,cubic-bezier(.4,0,.2,1));
}
/* فوق ما يُنقر تصغر النقطة: الأركان صارت هي التي تحمل الرسالة */
.mecur.is-hot{--cur-dot:6px}

/* ---------------- الإطار ---------------- */
.mecur-frame{
  position:absolute;top:0;left:0;display:block;
  width:var(--cur-box);height:var(--cur-box);
  will-change:transform,width,height;
  transition:width .26s var(--ease-out,cubic-bezier(.16,1,.3,1)),height .26s var(--ease-out,cubic-bezier(.16,1,.3,1));
}
.mecur-frame .c{
  position:absolute;display:block;
  width:var(--cur-arm);height:var(--cur-arm);
  border:0 solid var(--cur);
  transition:width .26s var(--ease-out,cubic-bezier(.16,1,.3,1)),height .26s var(--ease-out,cubic-bezier(.16,1,.3,1)),
    border-color .2s var(--ease,cubic-bezier(.4,0,.2,1)),opacity .2s var(--ease,cubic-bezier(.4,0,.2,1));
}
.mecur-frame .c1{inset-block-start:0;inset-inline-start:0;
  border-block-start-width:var(--cur-w);border-inline-start-width:var(--cur-w);
  border-start-start-radius:var(--cur-r)}
.mecur-frame .c2{inset-block-start:0;inset-inline-end:0;
  border-block-start-width:var(--cur-w);border-inline-end-width:var(--cur-w);
  border-start-end-radius:var(--cur-r)}
.mecur-frame .c3{inset-block-end:0;inset-inline-end:0;
  border-block-end-width:var(--cur-w);border-inline-end-width:var(--cur-w);
  border-end-end-radius:var(--cur-r)}
/**
 * الركن الرابع حادّ — هو تفصيلة الشعار نفسها التي تجعل الإطار «علامة» لا
 * مجرّد مربّع. حذفها يجعل المؤشر عاماً يصلح لأي موقع.
 */
.mecur-frame .c4{inset-block-end:0;inset-inline-start:0;
  border-block-end-width:var(--cur-w);border-inline-start-width:var(--cur-w);
  border-end-start-radius:2px}

/* فوق ما يُنقر: الأركان تنكمش والإطار يتّسع — عدسة تصويب */
.mecur.is-hot{--cur-box:46px;--cur-arm:11px;--cur-w:2px}
/* عند الالتصاق بزرّ: الإطار يأخذ مقاس الزر (يُضبط من السكربت) بأذرع أقصر */
.mecur.is-hot .mecur-frame[style*="width"]{--cur-arm:13px}

/* ---------------- الوسم ---------------- */
/**
 * الوسم يقول ما لا يقوله الشكل: «رابط خارجي»، «تنزيل»، «واتساب». يظهر
 * أسفل المؤشر بإزاحة ثابتة لأن وضعه فوقه يحجب ما يقرأه المستخدم.
 */
.mecur-label{
  position:absolute;top:0;left:0;
  will-change:transform;
  font-family:var(--f-body,system-ui,sans-serif);font-size:11px;font-weight:700;line-height:1;
  white-space:nowrap;padding:7px 11px;border-radius:999px;
  background:var(--cur);color:#fff;
  margin-top:26px;
  opacity:0;
  transition:opacity .2s var(--ease,cubic-bezier(.4,0,.2,1));
  box-shadow:0 6px 18px -8px rgba(15,98,245,.9);
}
/* الوسم يمتدّ في اتجاه القراءة: يميناً في اللاتينية ويساراً في العربية */
[dir="ltr"] .mecur-label{margin-left:14px}
[dir="rtl"] .mecur-label{margin-left:-14px;translate:-100% 0}
.mecur.has-label .mecur-label{opacity:1}
.mecur.is-dark .mecur-label{color:var(--navy-950,#040B22)}

/* ---------------- إخفاء مؤشر النظام ---------------- */
/**
 * يُخفى فوق كل شيء إلا حقول الكتابة: علامة الإدراج (I-beam) تقول أين
 * ستقع الحروف، وإخفاؤها ضرر حقيقي مقابل زينة. `mecur-native` يضعه
 * السكربت فور دخول المؤشر أي حقل.
 */
@media (hover:hover) and (pointer:fine){
  html.has-mecur.mecur-live:not(.mecur-native),
  html.has-mecur.mecur-live:not(.mecur-native) a,
  html.has-mecur.mecur-live:not(.mecur-native) button,
  html.has-mecur.mecur-live:not(.mecur-native) [role="button"],
  html.has-mecur.mecur-live:not(.mecur-native) summary,
  html.has-mecur.mecur-live:not(.mecur-native) label{cursor:none}
}

/* من عطّل الحركة في نظامه لا يرى المؤشر إطلاقاً — ولا يفقد شيئاً */
@media (prefers-reduced-motion:reduce){
  .mecur{display:none}
  html.has-mecur,html.has-mecur *{cursor:auto!important}
}


/* style.css */
/*
Theme Name: Elesawy Consulting
Theme URI: https://elesawy.consulting
Author: Mohamed Elesawy
Author URI: https://elesawy.consulting
Description: ثيم ووردبريس ثنائي اللغة (عربي/إنجليزي) لمحمد العيسوي — استشاري تسويق ونمو مبيعات. يشمل: هوية مستمدة من الشعار الرسمي، خدمات وقطاعات وتقارير سوق ودراسات حالة، حسابات عملاء ولوحة تحكم ومعالج حملات إعلانية، مساعد ذكي (زكي)، طبقة حماية، وتحكّم كامل من المُخصِّص. A bilingual WordPress theme for a marketing and sales-growth consultant.
Version: 5.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: elesawy
Tags: rtl-language-support, translation-ready, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, block-styles
*/

/* أنماط الثيم الفعلية في: assets/css/main.css و assets/css/app.css */


/* dark.css */
/* =========================================================
   الوضع الليلي.

   السمة `data-theme="dark"` يضعها السكربت على <html> — وقبله سطر صغير
   داخل <head> يضعها قبل أول رسم، وإلا ومضت الصفحة بيضاء ثم اسودّت.

   المنهج: الأصل إعادة تعريف المتغيّرات وحدها، فكل ما في الثيم مبنيّ
   عليها. القسم الثاني استثناءات لعناصر كُتب لونها بالرقم لا بالمتغيّر —
   وهي قليلة ومحصورة، وأي عنصر جديد يجب أن يستعمل المتغيّرات فلا يحتاج
   سطراً هنا إطلاقاً.
   ========================================================= */

html[data-theme="dark"]{
  /* الأزرق يُرفع درجة: #0F62F5 على أرضية سوداء يفقد تباينه ويصير باهتاً */
  --blue:#3C86FF;
  --blue-600:#2E7BFF;
  --blue-700:#1E63E8;
  --blue-400:#67A3FF;
  --blue-300:#9CC2FF;
  --blue-50:#16223F;

  /* أرضيات مرتفعة تدريجياً: الورقة أعمق ما في الصفحة، والألواح فوقها */
  --paper:#0A1024;
  --tint:#0F1830;
  --tint-2:#16223F;

  /* الأقسام الداكنة تبقى متميّزة عن الأرضية: أفتح قليلاً لا أغمق */
  --navy-950:#0C162F;
  --navy-900:#101D3D;
  --navy-800:#16274F;
  --navy-700:#1D3163;

  --ink:#E9EEF9;
  --ink-2:#A5B3CC;
  --ink-3:#74839F;

  --line:rgba(255,255,255,.12);
  --line-soft:rgba(255,255,255,.07);
  --line-dark:rgba(255,255,255,.14);

  --ok:#3DD68C;
  --warn:#FDB022;
  --err:#F97066;

  --shadow-s:0 2px 10px rgba(0,0,0,.45);
  --shadow-m:0 18px 46px -20px rgba(0,0,0,.85);
  --shadow-blue:0 14px 34px -12px rgba(60,134,255,.45);

  color-scheme:dark;
}

/* الصور واللقطات تُخفَّف قليلاً: البياض الكامل على أرضية سوداء يبهر العين */
html[data-theme="dark"] img:not([src$=".svg"]):not(.no-dim){filter:brightness(.94) contrast(1.02)}
html[data-theme="dark"] .res-shot img,
html[data-theme="dark"] .shotbox img{filter:brightness(.9)}

/* =========================================================
   الأسطح المكتوبة بالأبيض صراحةً
   ========================================================= */
html[data-theme="dark"] .chip-btn,
html[data-theme="dark"] .rescard,
html[data-theme="dark"] .res-shot,
html[data-theme="dark"] .shotbox-inner,
html[data-theme="dark"] .shotbox-head,
html[data-theme="dark"] .shotbox-nav,
html[data-theme="dark"] .shotbox-close,
html[data-theme="dark"] .lesson-item,
html[data-theme="dark"] .quiz-q,
html[data-theme="dark"] .cert-frame,
html[data-theme="dark"] .sec--tint .card,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .report,
html[data-theme="dark"] .quote,
html[data-theme="dark"] .faq details,
html[data-theme="dark"] .input,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .book,
html[data-theme="dark"] .libsearch,
html[data-theme="dark"] .buybox,
html[data-theme="dark"] .paypanel-ref,
html[data-theme="dark"] .paytarget,
html[data-theme="dark"] .work,
html[data-theme="dark"] .head-search-form,
html[data-theme="dark"] .zaki,
html[data-theme="dark"] .zaki-foot,
html[data-theme="dark"] .msg--bot,
html[data-theme="dark"] .zaki-chips .chip,
html[data-theme="dark"] .app-head,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .wsteps,
html[data-theme="dark"] .wpane,
html[data-theme="dark"] .opt,
html[data-theme="dark"] .adprev,
html[data-theme="dark"] .creative,
html[data-theme="dark"] .finkpi,
html[data-theme="dark"] .cmdk-box{
  background:var(--tint);
  border-color:var(--line);
  color:var(--ink);
}

html[data-theme="dark"] .app,
html[data-theme="dark"] .sec--logos{background:var(--paper)}
html[data-theme="dark"] .book-badge{background:var(--tint-2);color:var(--ink)}
html[data-theme="dark"] .finfinal{background:var(--tint-2)}

/* الترويسة الفاتحة تصير داكنة شفافة بدل بيضاء صريحة */
html[data-theme="dark"] .site-head.is-light,
html[data-theme="dark"] .site-head.is-light.is-scrolled{
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  border-bottom-color:var(--line);
}
html[data-theme="dark"] .site-head.is-light .nav{background:var(--tint)}
html[data-theme="dark"] .site-head.is-light .lang-switch,
html[data-theme="dark"] .site-head.is-light .burger,
html[data-theme="dark"] .site-head.is-light .icon-btn{background:var(--tint);border-color:var(--line);color:var(--ink-2)}

/**
 * شعار الترويسة لا يحتاج قاعدة هنا.
 *
 * صار صورة خلفية على عنصر واحد، وقاعدة الوضع الليلي تُحقن مضمّنة من
 * `els_logo_css()` لأن رابط الصورة قد يتغيّر من المُخصِّص. القاعدتان
 * القديمتان (`.logo--dark` و`.logo--light`) كانتا تشيران إلى صنفين لم
 * يعودا يُطبعان إطلاقاً.
 */

/* الحدود والفواصل المكتوبة برقم داخل القوالب (style=) لا يمكن تجاوزها
   إلا بقاعدة صريحة — وهذه أكثرها ظهوراً */
html[data-theme="dark"] .entry img,
html[data-theme="dark"] figure[style*="background:#fff"]{background:var(--tint)!important;
  border-color:var(--line)!important}

/* التمييز في الجداول والصفوف المتناوبة */
html[data-theme="dark"] .tbl tbody tr:nth-child(2n){background:rgba(255,255,255,.025)}
html[data-theme="dark"] ::selection{background:var(--blue);color:#04101f}

/* حقول الإدخال: المتصفح يرسمها بأسلوب النظام ما لم نصرّح */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{background:var(--tint);color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{color:var(--ink-3)}

/* الطباعة تبقى بيضاء دائماً — الحبر الأسود على ورق أسود لا يُقرأ */
@media print{
  html[data-theme="dark"]{
    --paper:#fff;--tint:#F3F7FF;--tint-2:#E9F0FF;
    --ink:#0C1424;--ink-2:#46536B;--ink-3:#78859C;
    --line:rgba(12,20,36,.10);--line-soft:rgba(12,20,36,.06);
  }
  html[data-theme="dark"] img{filter:none}
}