/* ==========================================================================
   أكاديمية الإنجاز
   برمجة وتصميم الأستاذ علاء تركمان 2026 – 2027
   ========================================================================== */

/* ---------- 1. الرموز ---------- */
:root{
  /* نصف العتمة: الصدارة */
  --ink-deep:      #140B22;
  --ink-violet:    #2A164A;
  --violet:        #6B3FA0;
  --violet-lift:   #8B5FC4;
  --gold:          #C9A227;
  --gold-lift:     #E8C765;
  --gold-whisper:  rgba(201,162,39,.18);

  /* نصف النور: الصفحة */
  --canvas:        #F7F3EC;
  --panel:         #FFFDF9;
  --panel-2:       #F1EADF;
  --text-primary:  #1E1430;
  --text-secondary:#5A4B6E;
  --line:          rgba(107,63,160,.14);
  --line-strong:   rgba(107,63,160,.34);

  /* الظل النصي فوق الفيديو */
  --tshadow: 0 1px 2px rgba(5,5,10,.95), 0 3px 12px rgba(5,5,10,.78), 0 10px 44px rgba(5,5,10,.8);

  /* المنحنيات */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.33,.02,.18,1);

  /* الخطوط */
  --f-display: "Reem Kufi", "Cormorant Garamond", serif;
  --f-script:  "Aref Ruqaa", "Cormorant Garamond", serif;
  --f-body:    "IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --wrap: min(1180px, 92vw);
  --nav-h: 68px;
}

html[lang="en"]{
  --f-display: "Cormorant Garamond", serif;
  --f-script:  "Cormorant Garamond", serif;
}

/* ---------- 2. الأساس ---------- */
*,*::before,*::after{box-sizing:border-box}

/* خاصية hidden يجب أن تعني الإخفاء دائماً، مهما أعطت CSS العنصرَ من display */
[hidden]{display:none!important}

html,body{
  overflow-x:hidden;      /* احتياط */
  overflow-x:clip;        /* الحقيقي */
}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--f-body);
  font-size:clamp(15px,.55vw + 13px,17px);
  line-height:1.85;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  opacity:0;
  transition:opacity .9s var(--ease);
}
body.ready{opacity:1}

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:700;
  line-height:1.28;
  margin:0;
  letter-spacing:0;
}

p{margin:0 0 1em}
a{color:var(--violet);text-decoration:none;transition:color .3s var(--ease)}
a:hover{color:var(--violet-lift)}
img,video{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,textarea,select{font:inherit;color:inherit}

:focus-visible{
  outline:2px solid var(--violet);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:absolute;inset-inline-start:-9999px;top:0;z-index:200;
  background:var(--violet);color:#fff;padding:.7rem 1.2rem;border-radius:0 0 10px 0;
}
.skip:focus{inset-inline-start:0}

.vh{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.wrap{width:var(--wrap);margin-inline:auto}

/* ---------- 3. الأرضية الواحدة ---------- */
.env{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 760px at 78% 8%,  rgba(107,63,160,.10), transparent 62%),
    radial-gradient(900px 700px at 12% 74%, rgba(201,162,39,.055), transparent 66%);
  animation:envDrift 78s var(--ease-soft) -14s infinite alternate;
}
@keyframes envDrift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(0,-2.2%,0) scale(1.05)}
}
.env-grain{
  position:fixed;inset:-50%;z-index:0;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  animation:grainShift 9s steps(6) -2s infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}       20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}   60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)}    100%{transform:translate(0,0)}
}

/* ---------- 4. شريط التنقل ---------- */
.nav{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:90;
  height:var(--nav-h);
  display:flex;align-items:center;gap:1.1rem;
  padding-inline:max(1.1rem,calc((100vw - var(--wrap))/2));
  background:rgba(20,11,34,0);
  border-block-end:1px solid transparent;
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s var(--ease);
}
.nav.solid{
  background:rgba(247,243,236,.86);
  backdrop-filter:blur(14px) saturate(1.2);
  border-block-end-color:var(--line);
}

.brand{display:flex;align-items:center;gap:.7rem;min-width:0}
.brand-mark{
  width:38px;height:38px;flex:none;
  display:grid;place-items:center;
  border:1px solid var(--gold-whisper);border-radius:11px;
  background:rgba(201,162,39,.07);
  overflow:hidden;
}
.brand-mark img{width:100%;height:100%;object-fit:contain}
.brand-mark svg{width:20px;height:20px}
.brand-name{
  font-family:var(--f-display);font-size:1.02rem;font-weight:700;
  color:#F3EEE4;white-space:nowrap;
  transition:color .5s var(--ease);
}
.nav.solid .brand-name{color:var(--text-primary)}

.nav-links{
  display:flex;align-items:center;gap:.15rem;
  margin-inline-start:auto;
}
.nav-links a{
  font-size:.86rem;font-weight:500;color:rgba(243,238,228,.82);
  padding:.5rem .68rem;border-radius:8px;
  transition:color .3s var(--ease), background .3s var(--ease);
  white-space:nowrap;
}
.nav.solid .nav-links a{color:var(--text-secondary)}
.nav-links a:hover{background:rgba(201,162,39,.13);color:var(--gold-lift)}
.nav.solid .nav-links a:hover{background:rgba(107,63,160,.09);color:var(--violet)}

.nav-act{display:flex;align-items:center;gap:.5rem;margin-inline-start:.6rem}

.lang{
  font-family:var(--f-mono);font-size:.74rem;font-weight:500;letter-spacing:.06em;
  padding:.42rem .68rem;border-radius:8px;
  border:1px solid rgba(201,162,39,.34);color:rgba(243,238,228,.9);
  transition:all .3s var(--ease);
}
.nav.solid .lang{border-color:var(--line-strong);color:var(--text-secondary)}
.lang:hover{background:var(--gold);color:var(--ink-deep);border-color:var(--gold)}

/* مدخل لوحة التحكم هادئ بقصد: الذهب محجوز لنداء الزائر وحده */
.nav-admin{
  display:inline-flex;align-items:center;gap:.42rem;
  font-size:.82rem;font-weight:500;padding:.44rem .72rem;border-radius:8px;
  color:rgba(243,238,228,.7);border:1px solid rgba(243,238,228,.18);
  transition:all .3s var(--ease);white-space:nowrap}
.nav-admin svg{width:15px;height:15px;flex:none}
.nav.solid .nav-admin{color:var(--text-secondary);border-color:var(--line)}
.nav-admin:hover{border-color:var(--gold);color:var(--gold-lift);background:rgba(201,162,39,.09)}
.nav.solid .nav-admin:hover{color:var(--violet);border-color:var(--line-strong);background:rgba(107,63,160,.06)}
@media (max-width:560px){.nav-admin span{display:none}}

.nav-burger{display:none;width:42px;height:42px;place-items:center;border-radius:9px}
.nav-burger span{display:block;width:19px;height:1.5px;background:currentColor;
  color:rgba(243,238,228,.9);position:relative;transition:all .3s var(--ease)}
.nav.solid .nav-burger span{color:var(--text-primary)}
.nav-burger span::before,.nav-burger span::after{
  content:"";position:absolute;inset-inline-start:0;width:100%;height:100%;background:currentColor;
  transition:transform .34s var(--ease)}
.nav-burger span::before{transform:translateY(-6px)}
.nav-burger span::after{transform:translateY(6px)}

/* ---------- 5. الصدارة السينمائية ---------- */
/* 850vh لرحلة 11.75 ثانية: كل نطاق ينال هضبة تفوق 100vh،
   والصمت بينها لحظة مقصودة لا فراغ */
.hero{position:relative;height:850vh;z-index:1}
.hero[hidden]{display:none}

.stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:var(--ink-deep);
}

.stage .poster{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:opacity 1.1s var(--ease);
}
.stage video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;
  transition:opacity 1.1s var(--ease);
  will-change:transform;transform:translateZ(0);
}
.stage.video-ready video{opacity:1}
.stage.video-ready .poster{opacity:0}
.stage.video-failed video{display:none}

/* الحجاب العام يعتم الأركان في نصف الرحلة المظلم، ثم ينسحب
   مع وصول النور حتى لا يُغبِّر الاستقرار العاجي */
.scrim{
  position:absolute;inset:0;pointer-events:none;
  opacity:var(--scrimO,1);
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 35%,rgba(10,10,18,.62) 100%);
}

/* حلقة التحميل */
/* الحلقة والسهم في وسط الأسفل، بعيداً عن كتلة النص اليسرى */
.ring{
  position:absolute;inset-block-end:2.2rem;inset-inline-start:50%;
  transform:translateX(-50%) rotate(-90deg);
  width:44px;height:44px;color:var(--gold);opacity:.85;
}
.ring circle{transition:stroke-dashoffset .18s linear}
.cue{
  position:absolute;inset-block-end:2.2rem;inset-inline-start:50%;
  margin-inline-start:-21px;
  width:42px;height:42px;color:var(--gold-lift);opacity:.72;
  animation:cueBob 2.6s var(--ease-soft) -.6s infinite;
}
@keyframes cueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* نطاقات النص */
.bands{position:absolute;inset:0;pointer-events:none}
.band{
  position:absolute;inset:0;opacity:0;
  display:grid;align-content:center;
  padding-inline:max(2rem,calc((100vw - var(--wrap))/2));
  text-shadow:var(--tshadow);
  color:#F6F2EA;
}
/* القطرة تنزل في العمود الأيمن من اللقطة، فالحجاب يعتم النصف الأيسر
   حيث يعيش النص، ويترك ممر الحركة مضيئاً. الاتجاهان سواء */
.band::before{
  content:"";position:absolute;inset:-4%;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 70% 62% at 28% 52%,
    rgba(5,5,10,.7) 0%, rgba(5,5,10,.46) 46%, rgba(5,5,10,0) 76%);
}
/* ============================================================
   الانقلاب عند عبور سطح الحبر.
   النصف الأول من الرحلة عتمة بنفسجية، فالكلمات فاتحة على حجاب داكن.
   وبعد العبور يفيض النور، فتنقلب الكلمات داكنة على حجاب عاجي،
   أي تصير كلمات الصفحة نفسها قبل أن تصل إليها.
   قياس: النص الفاتح على أسطع لقطة يعطي 1.28:1 وهو راسب،
   والنص الداكن على الحجاب العاجي يعطي أكثر من 9:1.
   ============================================================ */
.band-light{color:var(--text-primary);text-shadow:none}
/* الحجاب العاجي فوق لقطات صارت فاتحة أصلاً يكاد لا يُرى،
   فهو لا يرفع إلا البكسلات الداكنة الشاردة التي تكسر التباين */
.band-light::before{
  background:radial-gradient(ellipse 88% 74% at 28% 52%,
    rgba(250,247,241,.95) 0%, rgba(250,247,241,.88) 42%,
    rgba(250,247,241,.6) 64%, rgba(250,247,241,0) 86%);
}
.band-light.band-4::before{
  background:radial-gradient(ellipse 92% 76% at 50% 50%,
    rgba(250,247,241,.84) 0%, rgba(250,247,241,.62) 48%, rgba(250,247,241,0) 80%);
}
/* الأسبقية مرفوعة بقصد: قاعدتا .band .kicker و .band .sub مكتوبتان
   بعد هذه في الملف وبالقوة نفسها، فكانتا تغلبانها بصمت */
.band.band-light .kicker{color:var(--violet)}
.band.band-light .sub{color:#463758}
.band.band-light .soft{color:inherit}

.band-4::before{
  background:radial-gradient(ellipse 88% 72% at 50% 50%,
    rgba(5,5,10,.66) 0%, rgba(5,5,10,.42) 48%, rgba(5,5,10,0) 78%);
}

/* الكتلة النصية تُثبَّت يساراً في الاتجاهين، لأن ممر الحركة يمين */
.band-in{position:relative;width:min(46ch,52%)}
html[dir="rtl"] .band-in{margin-inline-start:auto}
.band-4 .band-in{width:min(48ch,64%);margin-inline-start:0}
html[dir="rtl"] .band-4 .band-in{margin-inline-start:auto;margin-inline-end:auto}
@media (max-width:1100px) and (orientation:landscape){
  .band-in,.band-4 .band-in{width:min(42ch,68%)}
}

/* ============================================================
   الوضع الطولي: الهاتف واللوحة الرأسية.
   السلسلة هنا تطابق نظيرتها في hero.js حرفاً بحرف.
   القطرة تنزل في عمود الوسط، فالكلمات تنزل إلى أسفل الشاشة
   بدل جانبها، والحجاب ينتقل معها إلى الأسفل.
   ============================================================ */
@media (orientation: portrait) and (max-width: 1024px){
  .hero{height:700vh}

  .band{
    align-content:end;
    padding-inline:clamp(1.2rem,5vw,2.4rem);
    padding-block-end:clamp(3.4rem,12vh,7rem);
  }
  .band-in,.band-4 .band-in{width:100%;margin:0}

  .band::before{
    inset:-4% -4% -10% -4%;
    background:radial-gradient(ellipse 130% 52% at 50% 88%,
      rgba(5,5,10,.82) 0%, rgba(5,5,10,.58) 44%, rgba(5,5,10,0) 82%);
  }
  .band-light::before,.band-light.band-4::before{
    background:radial-gradient(ellipse 132% 54% at 50% 88%,
      rgba(250,247,241,.96) 0%, rgba(250,247,241,.86) 46%, rgba(250,247,241,0) 84%);
  }

  .band h1,.band h2{font-size:clamp(2rem,8.6vw,3.1rem);max-width:none;line-height:1.2}
  .band .sub{font-size:clamp(.98rem,4vw,1.16rem);max-width:none}
  .band .cta-row{margin-block-start:1.5rem}

  /* الحلقة والسهم يرتفعان فوق كتلة النص السفلية */
  .ring,.cue{inset-block-end:auto;inset-block-start:1.6rem}
}

.kicker{
  font-family:var(--f-mono);font-size:.76rem;font-weight:500;
  letter-spacing:.22em;color:var(--gold-lift);
  margin-block-end:1.15rem;display:block;
}
html[dir="rtl"] .kicker{letter-spacing:0;font-family:var(--f-body);font-size:.86rem}

.band h1,.band h2{
  font-size:clamp(2.3rem,6.2vw,4.6rem);
  line-height:1.16;margin-block-end:.55rem;
  max-width:17ch;
}
.band .sub{
  font-size:clamp(1rem,1.5vw,1.28rem);
  color:rgba(240,235,226,.9);
  max-width:34ch;line-height:1.7;margin:0;
  font-weight:400;
}
.band .cta-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-block-start:2rem}
.band .btn{text-shadow:none}

/* تقطيع الكلمات والحروف */
.w{display:inline-block;white-space:pre}
.c{display:inline-block}

/* المداخل */
.e-drift .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * -26px));
}
.e-punch .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(0.62 + (0.38 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)));
}
.e-punch .w.em{--ov:.24;--sd:.16;--ss:2.6}
/* النسخة الضبابية تُوضع بالنسبة إلى العنوان نفسه.
   لو تُركت للنطاق لامتدت على الشاشة كلها ورُسمت في زاويتها */
.e-blur .stack{position:relative;display:block}
.e-blur .soft{
  position:absolute;inset:0;filter:blur(11px);
  opacity:calc(1 - var(--k,0));pointer-events:none;
}
.e-blur .sharp{opacity:var(--k,0);display:block}
.e-rise .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 30px));
}
.e-rise .sub{
  --ks:clamp(0,(var(--k,0) - .66)*4,1);
  opacity:var(--ks);
  transform:translateY(calc((1 - var(--ks)) * 16px));
}
.e-rise .cta-row{
  --kb:clamp(0,(var(--k,0) - .78)*5,1);
  opacity:var(--kb);
  transform:translateY(calc((1 - var(--kb)) * 14px));
}

/* ---------- 6. الأزرار ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.82rem 1.55rem;border-radius:11px;
  font-family:var(--f-body);font-size:.95rem;font-weight:600;
  transition:transform .34s var(--ease), background .34s var(--ease),
             box-shadow .34s var(--ease), color .34s var(--ease), border-color .34s var(--ease);
  border:1px solid transparent;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn-gold{background:var(--gold);color:var(--ink-deep);box-shadow:0 6px 26px rgba(201,162,39,.3)}
.btn-gold:hover{background:var(--gold-lift);box-shadow:0 10px 34px rgba(201,162,39,.42)}

.btn-violet{background:var(--violet);color:#fff;box-shadow:0 6px 26px rgba(107,63,160,.28)}
.btn-violet:hover{background:var(--violet-lift);color:#fff;box-shadow:0 10px 34px rgba(107,63,160,.4)}

.btn-ghost{border-color:rgba(201,162,39,.44);color:var(--gold-lift);background:rgba(201,162,39,.05)}
.btn-ghost:hover{background:rgba(201,162,39,.14);color:var(--gold-lift)}

.btn-line{border-color:var(--line-strong);color:var(--violet);background:transparent}
.btn-line:hover{background:rgba(107,63,160,.08);color:var(--violet)}

.btn-sm{padding:.5rem 1rem;font-size:.85rem;border-radius:9px}

@media (pointer:coarse){
  .btn{min-height:44px}
  .nav-links a{min-height:44px;display:inline-flex;align-items:center}
}

/* ---------- 7. اللوحة الأفقية ---------- */
.banner{position:relative;z-index:2;background:var(--ink-deep)}

/* العرض الكامل مضمون: الارتفاع محدود بالعرض نفسه لا بـ aspect-ratio،
   لأن aspect-ratio مع max-height يقلّص العرض بدل الارتفاع */
.banner-media{
  position:relative;width:100%;
  height:min(72vh, 56.25vw);
  overflow:hidden;background:var(--ink-violet)}
.banner-media img{width:100%;height:100%;object-fit:cover;object-position:50% 32%}
.banner-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(20,11,34,.34) 0%,rgba(20,11,34,0) 26%,
                             rgba(20,11,34,0) 74%,rgba(20,11,34,.42) 100%)}

/* شريط العنوان يعيش تحت الصورة على الأرضية العاجية.
   الصورة مزدحمة من حافة إلى حافة، فالنص فوقها يخسر الاثنين */
.banner-in{
  position:relative;z-index:2;background:var(--canvas);
  border-block-start:2px solid var(--gold);
  padding-block:clamp(1.4rem,3vw,2.3rem)}
.banner-row{
  display:flex;align-items:center;gap:clamp(1rem,2.4vw,1.9rem);
  flex-wrap:wrap}

.logo-slot{
  width:clamp(64px,7vw,86px);height:clamp(64px,7vw,86px);flex:none;
  border-radius:18px;display:grid;place-items:center;overflow:hidden;
  border:1px dashed var(--line-strong);
  background:linear-gradient(140deg,rgba(107,63,160,.06),rgba(201,162,39,.07));
  transition:border-color .4s var(--ease),background .4s var(--ease)}
.logo-slot:hover{border-color:var(--gold)}
.logo-slot.filled{border-style:solid;border-color:rgba(201,162,39,.3);background:var(--panel)}
.logo-slot img{width:100%;height:100%;object-fit:contain}
.logo-slot .ph{
  font-family:var(--f-body);font-size:.64rem;color:var(--text-secondary);
  text-align:center;line-height:1.45;padding:.35rem;opacity:.85}

.banner-txt{min-width:0}
.banner-in h1{
  font-family:var(--f-script);
  font-size:clamp(1.7rem,4.4vw,3rem);color:var(--text-primary);
  margin-block-end:.15rem;line-height:1.35}
.banner-in .tag{
  font-family:var(--f-display);font-size:clamp(.95rem,1.7vw,1.28rem);
  color:var(--violet);margin:0}
.banner-in .tag::before{
  content:"";display:inline-block;width:26px;height:2px;
  background:var(--gold);vertical-align:middle;
  margin-inline-end:.6rem;transform:translateY(-1px)}

/* ---------- 8. الأقسام ---------- */
.section{position:relative;z-index:2;padding-block:clamp(4rem,8vw,7.5rem)}
.section:nth-of-type(even){background:linear-gradient(to bottom,transparent,rgba(107,63,160,.035),transparent)}

.sec-head{margin-block-end:clamp(2rem,4vw,3.2rem);position:relative}
.sec-head .kick{
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.18em;
  color:var(--violet);display:block;margin-block-end:.7rem;opacity:.8}
html[dir="rtl"] .sec-head .kick{font-family:var(--f-body);letter-spacing:0;font-size:.85rem}
.sec-head h2{
  font-size:clamp(1.8rem,3.7vw,2.85rem);
  margin-block-end:.7rem;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.sec-head .lede{
  color:var(--text-secondary);max-width:56ch;font-size:1.03rem;margin:0}

/* رأس القلم الذهبي */
.nib{width:26px;height:26px;flex:none;color:var(--gold);
  transition:transform .7s var(--ease)}
.section.in .nib{transform:rotate(-8deg)}

/* خيط الحبر الذهبي */
.thread{
  position:absolute;z-index:1;pointer-events:none;
  inset-block:0;inset-inline-start:calc((100vw - var(--wrap))/2 - 26px);
  width:2px;
}
html[dir="rtl"] .thread{
  inset-inline-start:auto;
  inset-inline-end:calc((100vw - var(--wrap))/2 - 26px);
}
.thread svg{height:100%;width:100%;overflow:visible}
.thread path{
  fill:none;stroke:url(#threadGrad);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:var(--len,1);stroke-dashoffset:var(--off,1);
}
@media (max-width:1180px){.thread{display:none}}

/* ---------- 9. البطاقات والمنشورات ---------- */
.grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

.card{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.card:hover{
  transform:translateY(-4px);
  border-color:rgba(201,162,39,.34);
  box-shadow:0 16px 46px rgba(30,20,48,.11);
}
.card-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--panel-2)}
.card-media img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease)}
.card:hover .card-media img{transform:scale(1.045)}
.card-media .type-chip{
  position:absolute;inset-block-start:.7rem;inset-inline-start:.7rem;
  font-family:var(--f-body);font-size:.72rem;font-weight:600;
  padding:.28rem .6rem;border-radius:7px;
  background:rgba(20,11,34,.74);color:var(--gold-lift);
  backdrop-filter:blur(8px)}
.card-body{padding:1.25rem 1.35rem 1.1rem;flex:1;display:flex;flex-direction:column}
.card-body h3{font-size:1.16rem;line-height:1.42;margin-block-end:.5rem}
.card-body h3 a{color:inherit}
.card-body h3 a:hover{color:var(--violet)}
.card-meta{
  font-family:var(--f-mono);font-size:.74rem;color:var(--text-secondary);
  display:flex;gap:.7rem;flex-wrap:wrap;margin-block-end:.6rem;opacity:.85}
html[dir="rtl"] .card-meta{font-family:var(--f-body);font-size:.8rem}
.card-excerpt{color:var(--text-secondary);font-size:.94rem;line-height:1.75;margin:0 0 1rem;flex:1}

/* شريط التفاعل */
.react{
  display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;
  padding-block-start:.85rem;border-block-start:1px solid var(--line)}
.react button{
  display:inline-flex;align-items:center;gap:.38rem;
  padding:.42rem .7rem;border-radius:9px;
  font-size:.84rem;font-weight:500;color:var(--text-secondary);
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease)}
.react button:hover{background:rgba(107,63,160,.08);color:var(--violet)}
.react button svg{width:16px;height:16px;flex:none}
.react .liked{color:var(--gold);background:rgba(201,162,39,.12)}
.react .liked svg{fill:currentColor}
.react .count{font-family:var(--f-mono);font-size:.8rem;font-variant-numeric:tabular-nums}
.react .spacer{margin-inline-start:auto}

@keyframes pop{0%{transform:scale(1)}42%{transform:scale(1.24)}100%{transform:scale(1)}}
.react .pop{animation:pop .42s var(--ease)}

/* ---------- 10. حالة الفراغ ---------- */
.empty{
  grid-column:1/-1;text-align:center;padding:3.2rem 1.4rem;
  border:1px dashed var(--line-strong);border-radius:16px;
  background:rgba(255,253,249,.55);color:var(--text-secondary)}
.empty svg{width:38px;height:38px;color:var(--violet);opacity:.44;margin-block-end:.9rem}
.empty p{margin:0 0 1.1rem}

/* ---------- 11. اللحظة التفاعلية ---------- */
.trace{
  margin-block-start:clamp(2rem,4vw,3.4rem);
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:clamp(1.6rem,3.4vw,2.8rem);text-align:center;
  position:relative;overflow:hidden}
.trace-hint{
  font-family:var(--f-body);font-size:.88rem;color:var(--text-secondary);
  margin-block-end:1.2rem;transition:opacity .5s var(--ease)}
.trace.done .trace-hint{opacity:.35}
.trace-pad{
  width:min(520px,100%);margin-inline:auto;aspect-ratio:5/1.5;
  display:grid;place-items:center;cursor:pointer;
  border-radius:14px;background:var(--panel-2);
  touch-action:none;user-select:none;
  transition:background .4s var(--ease), box-shadow .4s var(--ease)}
.trace-pad:hover{background:#EDE4D6}
.trace.done .trace-pad{box-shadow:inset 0 0 0 1px rgba(201,162,39,.4)}
.trace-pad svg{width:86%;height:auto;overflow:visible}
.trace-pad path{
  fill:none;stroke:var(--gold);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len,1);
  stroke-dashoffset:calc(var(--len,1) * (1 - var(--p,0)));
  filter:drop-shadow(0 2px 8px rgba(201,162,39,.34))}
/* الأثر الباهت يُري الزائر ما ستكتبه يده قبل أن يضغط */
.trace-pad path.ghost{
  stroke:var(--line-strong);stroke-width:1.6;opacity:.5;
  stroke-dasharray:none;stroke-dashoffset:0;filter:none;
  transition:opacity .5s var(--ease)}
.trace.done .trace-pad path.ghost{opacity:0}

.aims{display:grid;gap:1.1rem;margin-block-start:2rem;text-align:start}
.aim{
  display:flex;gap:1.1rem;align-items:flex-start;
  padding:1.15rem 1.3rem;border-radius:14px;
  background:rgba(247,243,236,.7);border:1px solid var(--line);
  opacity:.32;transform:translateY(10px);
  transition:opacity .7s var(--ease), transform .7s var(--ease), border-color .7s var(--ease)}
.trace.done ~ .aims .aim,.aims.lit .aim{opacity:1;transform:translateY(0);border-color:rgba(201,162,39,.28)}
.aims.lit .aim:nth-child(2){transition-delay:.16s}
.aims.lit .aim:nth-child(3){transition-delay:.32s}
.aim-n{
  font-family:var(--f-mono);font-size:1.5rem;font-weight:500;
  color:var(--gold);line-height:1;flex:none;
  min-width:1.6ch;font-variant-numeric:tabular-nums}
.aim p{margin:0;color:var(--text-primary);line-height:1.8}

/* ---------- 12. الشريط الإخباري ---------- */
.ticker{
  position:relative;z-index:2;
  background:var(--ink-deep);color:#F3EEE4;
  padding-block:1.05rem;overflow:hidden;
  border-block:1px solid rgba(201,162,39,.2)}
.ticker::before,.ticker::after{
  content:"";position:absolute;inset-block:0;width:120px;z-index:3;pointer-events:none}
.ticker::before{inset-inline-start:0;background:linear-gradient(to right,var(--ink-deep),transparent)}
.ticker::after{inset-inline-end:0;background:linear-gradient(to left,var(--ink-deep),transparent)}
html[dir="rtl"] .ticker::before{background:linear-gradient(to left,var(--ink-deep),transparent)}
html[dir="rtl"] .ticker::after{background:linear-gradient(to right,var(--ink-deep),transparent)}

.ticker-label{
  position:absolute;inset-block:0;inset-inline-start:0;z-index:4;
  display:flex;align-items:center;gap:.5rem;
  padding-inline:1.1rem;background:var(--gold);color:var(--ink-deep);
  font-weight:600;font-size:.85rem;white-space:nowrap}
.ticker-label svg{width:15px;height:15px}
.ticker-view{overflow:hidden;margin-inline-start:9.5rem}
.ticker-track{display:flex;width:max-content;animation:tick 46s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-item{
  display:inline-flex;align-items:center;gap:.7rem;
  padding-inline:1.6rem;white-space:nowrap;font-size:.93rem}
.ticker-item a{color:#F3EEE4}
.ticker-item a:hover{color:var(--gold-lift)}
.ticker-item .dot{width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none;opacity:.8}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
html[dir="rtl"] .ticker-track{animation-name:tickRtl}
@keyframes tickRtl{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* ---------- 13. رفّ الفيديو ---------- */
.reel{position:relative;z-index:2;padding-block:clamp(3.4rem,6vw,5.6rem)}
.reel-rail{
  display:flex;gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-block-end:1rem;scrollbar-width:thin;
  scroll-padding-inline:calc((100vw - var(--wrap))/2)}
.reel-rail::-webkit-scrollbar{height:6px}
.reel-rail::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
.reel-card{
  flex:0 0 clamp(250px,27vw,330px);scroll-snap-align:start;
  border-radius:15px;overflow:hidden;background:var(--panel);
  border:1px solid var(--line);
  transition:transform .45s var(--ease), border-color .45s var(--ease)}
.reel-card:hover{transform:translateY(-4px);border-color:rgba(201,162,39,.34)}
.reel-thumb{position:relative;aspect-ratio:16/9;background:var(--ink-violet);overflow:hidden}
.reel-thumb img{width:100%;height:100%;object-fit:cover}
.reel-play{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(20,11,34,.34);transition:background .4s var(--ease)}
.reel-card:hover .reel-play{background:rgba(20,11,34,.16)}
.reel-play svg{width:48px;height:48px;color:var(--gold-lift);
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.5));
  transition:transform .45s var(--ease)}
.reel-card:hover .reel-play svg{transform:scale(1.1)}
.reel-body{padding:.95rem 1.1rem}
.reel-body h3{font-size:1rem;line-height:1.5;margin:0}

/* ---------- 14. التذييل ---------- */
.foot{
  position:relative;z-index:2;
  background:var(--ink-deep);color:#E6DFD3;
  padding-block:clamp(3.2rem,6vw,5rem) 0;
  border-block-start:1px solid rgba(201,162,39,.2)}
.foot-grid{
  display:grid;gap:2.6rem;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  padding-block-end:3rem}
.foot h3{
  font-size:1.1rem;color:var(--gold-lift);margin-block-end:1.1rem;
  display:flex;align-items:center;gap:.55rem}
.foot h3 svg{width:17px;height:17px;opacity:.9}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.72rem}
.foot li{line-height:1.6}
.foot a{color:#E6DFD3;display:inline-flex;align-items:baseline;gap:.5rem}
.foot a:hover{color:var(--gold-lift)}
.foot .sm{display:block;font-size:.82rem;color:rgba(230,223,211,.62);margin-block-start:.1rem}
.foot .ic{width:15px;height:15px;flex:none;opacity:.75;align-self:center}

.sign{
  border-block-start:1px solid rgba(201,162,39,.16);
  padding-block:1.6rem;text-align:center;
  font-size:.88rem;color:rgba(230,223,211,.62)}
.sign strong{color:var(--gold-lift);font-weight:600}

/* ---------- 15. المدخل المتدرج ---------- */
.rise{opacity:0;transform:translateY(24px);
  transition:opacity .85s var(--ease), transform .85s var(--ease)}
.in .rise,.rise.in{opacity:1;transform:translateY(0)}
.in .rise:nth-child(2){transition-delay:.08s}
.in .rise:nth-child(3){transition-delay:.16s}
.in .rise:nth-child(4){transition-delay:.24s}
.in .rise:nth-child(5){transition-delay:.32s}
.in .rise:nth-child(6){transition-delay:.4s}
/* تقاعد التأخير بعد انتهاء المدخل */
.in.settled .rise,
.in.settled .rise:nth-child(2),
.in.settled .rise:nth-child(3),
.in.settled .rise:nth-child(4),
.in.settled .rise:nth-child(5),
.in.settled .rise:nth-child(6){transition-delay:0s!important}

/* ---------- 16. الشاشات الصغيرة ---------- */
/* على الهاتف تصير اللوحة هي الصدارة، فتأخذ ارتفاعاً يليق
   وموضع قصٍّ يبقي الوجه في الإطار */
@media (max-width:720px){
  .banner-media{height:46vh;min-height:260px}
  .banner-media img{object-position:66% 30%}
  .banner-row{justify-content:center;text-align:center;gap:.9rem}
  .banner-in .tag::before{width:18px;margin-inline-end:.45rem}
}
@media (max-width:430px){
  .brand-name{display:none}
  .nav{gap:.6rem}
}

@media (max-width:900px){
  .nav-links{
    position:fixed;inset-block-start:var(--nav-h);inset-inline:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(247,243,236,.98);backdrop-filter:blur(16px);
    border-block-end:1px solid var(--line);
    padding:.6rem;margin:0;
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:opacity .34s var(--ease), transform .34s var(--ease)}
  .nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav-links a,.nav.solid .nav-links a{color:var(--text-primary);padding:.85rem 1rem}
  .nav-burger{display:grid}
  .ticker-view{margin-inline-start:0;margin-block-start:2.6rem}
  .ticker-label{inset-block-end:auto;height:2.2rem}
}

@media (max-height:560px){
  .cue,.ring{display:none}
}

/* ---------- 17. القارئ ---------- */
body.locked{overflow:hidden}

.modal{
  position:fixed;inset:0;z-index:120;
  display:grid;place-items:center;padding:clamp(.8rem,3vw,2.2rem);
  background:rgba(20,11,34,.72);backdrop-filter:blur(7px);
  opacity:0;pointer-events:none;
  transition:opacity .32s var(--ease)}
.modal.open{opacity:1;pointer-events:auto}

.modal-card{
  position:relative;width:min(860px,100%);max-height:92vh;
  background:var(--canvas);border-radius:20px;overflow:hidden;
  border:1px solid rgba(201,162,39,.24);
  box-shadow:0 30px 90px rgba(10,6,20,.5);
  transform:translateY(18px) scale(.985);
  transition:transform .38s var(--ease)}
.modal.open .modal-card{transform:none}

.modal-x{
  position:absolute;inset-block-start:.6rem;inset-inline-end:.7rem;z-index:3;
  width:38px;height:38px;border-radius:10px;font-size:1.5rem;line-height:1;
  background:rgba(247,243,236,.9);color:var(--text-primary);
  backdrop-filter:blur(8px);
  transition:background .3s var(--ease)}
.modal-x:hover{background:var(--gold);color:var(--ink-deep)}

.modal-scroll{
  overflow-y:auto;max-height:92vh;
  padding:clamp(1.4rem,3.4vw,2.6rem);
  overscroll-behavior:contain}

.kick-m{
  font-family:var(--f-body);font-size:.82rem;color:var(--violet);
  display:block;margin-block-end:.5rem}
.modal-scroll h2{font-size:clamp(1.45rem,3vw,2.15rem);margin-block-end:1.3rem;max-width:26ch}

.m-frame{
  position:relative;aspect-ratio:16/9;border-radius:13px;overflow:hidden;
  background:var(--ink-violet);margin-block-end:1.2rem}
.m-frame.m-pdf{aspect-ratio:3/4;max-height:76vh}
.m-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.m-hint{font-size:.85rem;color:var(--text-secondary);margin-block-end:1.2rem}

/* ---------- عارض PDF ---------- */
.pdfview{margin-block-end:1.4rem}
.pdf-bar{
  display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  padding:.6rem .9rem;border-radius:11px 11px 0 0;
  background:var(--ink-deep);color:#E6DFD3;font-size:.85rem}
.pdf-count{font-family:var(--f-body)}
.pdf-open{
  margin-inline-start:auto;color:var(--gold-lift);
  border:1px solid rgba(201,162,39,.4);border-radius:8px;
  padding:.3rem .7rem;font-size:.82rem;font-weight:500;
  transition:background .3s var(--ease)}
.pdf-open:hover{background:rgba(201,162,39,.15);color:var(--gold-lift)}

/* بلا صندوق تمرير داخلي: الصفحات تجري في تمرير القارئ نفسه.
   الصندوق المتداخل كان يحشر صفحة طولها 967 بكسل في نافذة 665،
   فلا يرى الزائر إلا ثلثيها ويمرّر داخل علبة ضيقة */
.pdf-pages{
  background:var(--panel-2);border:1px solid var(--line);border-block-start:0;
  border-radius:0 0 11px 11px;padding:.8rem;display:grid;gap:.8rem}
.pdf-page{
  position:relative;width:100%;background:#fff;border-radius:6px;overflow:hidden;
  box-shadow:0 3px 14px rgba(30,20,48,.12)}
.pdf-page canvas{display:block;width:100%;height:auto}
/* الصفحة مضغوطة في عرض الهاتف، فيُعلَم الزائر أنها تُفتح كبيرة بضغطة */
.pdf-page{cursor:zoom-in}
.pdf-tip{font-size:.78rem;opacity:.72;flex:1 1 100%}
@media (min-width:721px){ .pdf-tip{flex:1 1 auto} }

/* ---------- قارئ الصفحة الكبيرة ---------- */
.pdfz{
  position:fixed;inset:0;z-index:200;display:none;
  grid-template-rows:auto 1fr;background:rgba(14,8,26,.96)}
.pdfz.open{display:grid}
.pdfz-bar{
  display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;
  padding:.55rem .7rem;background:var(--ink-deep);color:#E6DFD3;
  border-block-end:1px solid rgba(201,162,39,.28)}
.pdfz-bar button,.pdfz-bar .pdfz-open{
  min-width:40px;height:38px;padding:0 .75rem;border-radius:9px;
  background:rgba(255,255,255,.09);color:#F3EEE4;border:0;
  font-family:var(--f-body);font-size:.88rem;font-weight:500;
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;cursor:pointer;
  transition:background .25s var(--ease)}
.pdfz-bar button:hover,.pdfz-bar .pdfz-open:hover{background:rgba(201,162,39,.28)}
.pdfz-x{font-size:1.4rem;line-height:1}
.pdfz-n{font-family:var(--f-mono);font-size:.85rem;opacity:.9;margin-inline:.3rem}
.pdfz-sp{flex:1 1 auto}

.pdfz-scroll{
  overflow:auto;padding:.6rem;
  -webkit-overflow-scrolling:touch;touch-action:pan-x pan-y pinch-zoom}
/* اللوحة قد تتجاوز عرض الإطار عند التكبير، فالحاوية تأخذ عرض المحتوى
   لا عرض الشاشة، وإلا قُصّ الطرف الخارج عند التمرير */
.pdfz-hold{display:block;width:max-content;min-width:100%;margin-inline:auto}
.pdfz-cv{
  display:block;height:auto;max-width:none;background:#fff;
  border-radius:4px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.pdfz .pdf-load{margin:auto}

.pdf-load{display:grid;place-items:center;padding:3rem 1rem}
.pdf-load span{
  width:30px;height:30px;border-radius:50%;
  border:2.5px solid var(--line-strong);border-top-color:var(--gold);
  animation:pdfSpin .9s linear infinite}
@keyframes pdfSpin{to{transform:rotate(360deg)}}

/* ثلاث صفحات ثم زر، في كل الأجهزة: كتابٌ من مئتي صفحة
   لا يصير جداراً بين الزائر وبين التعليق */
.pdf-more{
  display:block;width:100%;margin-block-start:.7rem;
  padding:.85rem 1rem;border-radius:11px;font-weight:600;font-size:.92rem;
  background:var(--panel);border:1px solid var(--line-strong);color:var(--violet);
  transition:background .3s var(--ease)}
.pdf-more:hover{background:rgba(107,63,160,.07)}
.pdfview:not(.expanded) .pdf-page:nth-child(n+4){display:none}
.pdfview.expanded .pdf-more{display:none}

@media (max-width:720px){
  .pdf-pages{padding:.55rem;gap:.55rem}
}
.m-cover{width:100%;border-radius:13px;margin-block-end:1.3rem}
.m-file{
  padding:2rem;text-align:center;border:1px dashed var(--line-strong);
  border-radius:13px;margin-block-end:1.3rem}
.m-file p{color:var(--text-secondary);margin-block-end:1rem}
.m-extlink .m-url{
  display:block;margin-block-start:1rem;font-size:.8rem;
  color:var(--text-secondary);word-break:break-all;opacity:.8}
.m-album{
  display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  margin-block-end:1.4rem}
.m-album img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:11px;
  transition:transform .5s var(--ease)}
.m-album img:hover{transform:scale(1.02)}
/* ---------- ورقة المقال ---------- */
/* المتن يجلس على ورقةٍ بيضاء مؤطّرة بالبنفسجي، ولها ترويسةٌ ملوّنة أعلاها،
   فيُقرأ المنشور كوثيقةٍ رسمية لا ككتلة نصٍّ سائبة في الصفحة */
.m-sheet{
  position:relative;background:#fff;
  border:1px solid var(--violet);border-radius:16px;
  padding:clamp(1.3rem,3vw,2.3rem);
  margin-block-end:1.7rem;overflow:hidden;
  box-shadow:0 12px 34px rgba(107,63,160,.10)}
.m-sheet::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:5px;
  background:linear-gradient(90deg,var(--violet),var(--violet-lift),var(--gold))}

.m-sheet-h{margin-block-end:1.3rem}
.m-sheet-h h2{
  font-family:var(--f-display);
  font-size:clamp(1.3rem,2.7vw,1.9rem);line-height:1.55;
  max-width:34ch;margin-block:.25rem .85rem;
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}

/* ملصق القسم: قرصٌ بلون القسم يلازم العنوان في البطاقة وفي رأس المقال */
.sec-emo{
  display:inline-grid;place-items:center;flex:0 0 auto;
  width:1.9em;height:1.9em;font-size:.8rem;line-height:1;
  border-radius:50%;background:rgba(107,63,160,.10);
  border:1px solid var(--line);
  vertical-align:middle;margin-inline-end:.45rem;
  transition:transform .3s var(--ease), background .3s var(--ease)}
.card:hover .sec-emo{transform:scale(1.1);background:var(--gold-whisper)}
.sec-emo.big{
  font-size:1.25rem;width:2em;height:2em;margin-inline-end:0;
  background:linear-gradient(140deg,rgba(107,63,160,.14),rgba(201,162,39,.16));
  border-color:var(--line-strong);
  box-shadow:0 4px 14px rgba(107,63,160,.14)}
.m-rule{
  display:block;height:2px;border-radius:2px;
  background:linear-gradient(to var(--rule-dir,left),
    var(--gold),rgba(107,63,160,.35),rgba(201,162,39,0))}
html[dir="ltr"] .m-rule{--rule-dir:right}

.m-body{
  line-height:2.05;font-size:1.02rem;color:var(--text-primary);
  text-align:justify;text-justify:inter-word;margin-block-end:0}
.m-body p{margin:0 0 1.05rem}
.m-body p:last-child{margin-block-end:0}
/* أول فقرةٍ مدخلٌ للنص، فتُقرأ قبل غيرها */
.m-body .m-lead{font-size:1.1rem;font-weight:500}
.m-body a{
  color:var(--violet);text-decoration:underline;text-underline-offset:3px;
  overflow-wrap:anywhere}
.m-body a:hover{color:var(--violet-lift)}
/* رابطٌ قائمٌ وحده: زرٌّ يكشف الرابط في إطارٍ تحته، لا حروفٌ طويلة سائبة */
.m-cta{text-align:center;margin-block:1.6rem .2rem}
/* لون الزر أقوى من لون روابط المتن، وإلا صار نصّه بنفسجياً على بنفسجي */
.m-body .m-cta .btn{text-decoration:none;color:#fff}
.m-body .m-link-acts .btn-line{color:var(--violet)}

.m-link{display:inline-grid;justify-items:center;max-width:100%}
.m-link-btn svg{width:19px;height:19px}
.m-link-btn::after{
  content:"";width:8px;height:8px;margin-inline-start:.1rem;
  border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .34s var(--ease)}
.m-link.open .m-link-btn::after{transform:translateY(1px) rotate(225deg)}

/* الإطار ينبثق من تحت الزر: يتمدّد ارتفاعاً ويصعد قليلاً، فيبدو خارجاً منه */
.m-link-box{
  display:grid;gap:.55rem;justify-items:center;
  width:min(430px,100%);margin-block-start:.75rem;
  padding:0 1.05rem;max-height:0;opacity:0;
  transform:translateY(-8px);
  background:var(--panel);border:1px solid var(--line-strong);
  border-radius:14px;box-shadow:0 14px 34px rgba(107,63,160,.14);
  overflow:hidden;visibility:hidden;
  transition:max-height .42s var(--ease), opacity .3s var(--ease),
             transform .42s var(--ease), padding .42s var(--ease),
             visibility 0s linear .42s}
.m-link.open .m-link-box{
  max-height:340px;opacity:1;transform:translateY(0);
  padding:1.05rem;visibility:visible;transition-delay:0s}

.m-link-kick{
  font-size:.76rem;letter-spacing:.04em;color:var(--violet);
  background:rgba(107,63,160,.09);border-radius:999px;padding:.2rem .7rem}
.m-link-url{
  font-family:var(--f-mono);font-size:.82rem;line-height:1.7;
  direction:ltr;text-align:center;word-break:break-all;
  color:var(--text-secondary);text-decoration:none;
  background:var(--panel-2);border-radius:10px;padding:.55rem .7rem;width:100%}
.m-link-url:hover{color:var(--violet);text-decoration:underline}
.m-link-acts{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.m-link-acts .btn.done{border-color:var(--gold);color:var(--gold)}

.m-body h2,.m-body h3{margin-block:1.6rem .7rem;font-size:1.25rem}
.m-body img{border-radius:11px;margin-block:1rem}
.m-body blockquote{
  margin:1.4rem 0;padding-inline-start:1.1rem;
  border-inline-start:3px solid var(--gold);
  color:var(--text-secondary);font-family:var(--f-script);font-size:1.15rem}
.m-body ul,.m-body ol{padding-inline-start:1.4rem}

.m-ch{font-size:1.15rem;margin-block:1.9rem .9rem;
  padding-block-start:1.4rem;border-block-start:1px solid var(--line)}
.m-comments{display:grid;gap:1rem;margin-block-end:1.4rem}
.m-none{color:var(--text-secondary);font-size:.94rem;margin:0}

/* كل تعليقٍ ورقةٌ بيضاء مؤطّرة بالبنفسجي، كورقة المقال نفسها */
.m-c{
  padding:1.05rem 1.2rem;background:#fff;
  border:1px solid var(--violet);border-radius:14px;
  box-shadow:0 6px 20px rgba(107,63,160,.07);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease)}
.m-c:hover{border-color:var(--violet);box-shadow:0 10px 26px rgba(107,63,160,.13)}

.m-c-top{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
/* أول حرفٍ من الاسم في قرص: علامةٌ تميّز صاحب الكلام */
.m-c-av{
  display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;
  border-radius:50%;font-family:var(--f-display);font-size:1rem;
  color:#fff;background:linear-gradient(140deg,var(--violet),var(--violet-lift))}
.m-c strong{font-weight:600;font-size:1rem}
.m-c-d{font-size:.76rem;color:var(--text-secondary);margin-inline-start:auto;
  font-family:var(--f-mono);letter-spacing:.02em}
.m-c p{
  margin:.65rem 0 0;color:var(--text-primary);line-height:1.9;font-size:.98rem;
  padding-inline-start:calc(34px + .6rem)}
.m-c.is-new{animation:cNew 1.8s var(--ease)}
@keyframes cNew{0%{border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-whisper)}
  100%{border-color:var(--violet)}}

/* ردّ الأكاديمية: لوحٌ بنفسجي خفيف داخل ورقة التعليق */
.m-r{
  margin-block-start:.9rem;margin-inline-start:calc(34px + .6rem);
  padding:.85rem 1rem;border-radius:12px;
  background:linear-gradient(140deg,rgba(107,63,160,.07),rgba(201,162,39,.07));
  border:1px solid var(--line);
  border-inline-start:3px solid var(--violet)}
.m-r-h{display:flex;align-items:center;gap:.4rem;color:var(--violet);font-size:.84rem}
.m-r-h svg{width:16px;height:16px}
.m-r p{margin:.45rem 0 0;padding:0;color:var(--text-primary);font-size:.95rem;line-height:1.85}
.m-r p.m-r-who{font-family:var(--f-display);color:var(--violet);margin-block-start:.6rem}

.m-r-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-block-start:.7rem}
.m-r-chip{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.45rem .85rem;border-radius:999px;font-size:.85rem;font-weight:500;
  border:1px solid var(--line-strong);background:var(--panel);
  color:var(--text-primary);text-decoration:none;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease)}
.m-r-chip svg{width:17px;height:17px}
.m-r-chip:hover{transform:translateY(-2px)}
.m-r-chip.wa{color:#0F7D53;border-color:rgba(15,125,83,.4)}
.m-r-chip.wa:hover{background:rgba(15,125,83,.1)}
.m-r-chip.mail{color:#B4231F;border-color:rgba(180,35,31,.35)}
.m-r-chip.mail:hover{background:rgba(180,35,31,.08)}

/* التعليق الذي لا يحمل إلا ملصقاً: الرمز هو الرسالة، فيُعرض بحجمه */
.m-c p.m-c-big{font-size:2.5rem;line-height:1.25;margin-block-start:.2rem}
.m-body .sticker{font-size:2.4rem;line-height:1.2;vertical-align:middle}

.m-form{display:grid;gap:.7rem}

/* صفّ الرموز تحت الصندوق: زر اللوحة أوّله، ثم فاصل، ثم أشهر الملصقات */
.m-quick{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem}
.m-quick-sep{width:1px;height:24px;background:var(--line-strong);margin-inline:.2rem}
.m-quick button{
  width:38px;height:38px;padding:0;border-radius:10px;
  border:1px solid var(--line);background:var(--panel);
  font-size:1.2rem;line-height:1;cursor:pointer;
  transition:transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease)}
.m-quick button:hover{transform:translateY(-2px) scale(1.06);border-color:var(--line-strong);
  background:var(--panel-2)}
.m-quick button.pop{animation:emoPop .34s var(--ease)}
@keyframes emoPop{0%{transform:scale(1)}45%{transform:scale(1.32)}100%{transform:scale(1)}}

.m-form input,.m-form textarea{
  padding:.8rem 1rem;border-radius:11px;
  border:1px solid var(--line-strong);background:var(--panel);
  font-family:var(--f-body);resize:vertical;
  transition:border-color .3s var(--ease)}
.m-form input:focus,.m-form textarea:focus{border-color:var(--violet);outline:none}
.m-form button{justify-self:start}

/* ---------- 18. ورقة المشاركة ---------- */
.share-sheet{
  position:fixed;inset-block-end:0;inset-inline:0;z-index:130;
  display:grid;place-items:center;padding:1.2rem;
  transform:translateY(100%);transition:transform .32s var(--ease)}
.share-sheet.open{transform:translateY(0)}
.share-in{
  display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;
  background:var(--panel);border:1px solid var(--line-strong);
  border-radius:16px;padding:.9rem 1.1rem;
  box-shadow:0 18px 54px rgba(30,20,48,.24)}

/* ---------- 19. الحركة المخففة ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0s!important;
    scroll-behavior:auto!important}
  .rise{opacity:1!important;transform:none!important}
  .aim{opacity:1!important;transform:none!important}
  .band{opacity:1}
  .ticker-track{animation:none}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}


/* ==========================================================================
   قسم «مُتاح للبيع»: البطاقات، صفحة المنتج، نموذج الطلب، بيانات التحويل
   ========================================================================== */

.store-card .card-media.no-img{
  aspect-ratio:16/10;background:linear-gradient(140deg,var(--ink-violet),var(--violet));
  display:grid;place-items:center}
.price-chip{
  position:absolute;inset-block-start:.7rem;inset-inline-start:.7rem;
  background:var(--gold);color:var(--ink-deep);
  padding:.32rem .8rem;border-radius:999px;
  font-family:var(--f-body);font-size:.86rem;font-weight:700;
  box-shadow:0 4px 16px rgba(201,162,39,.4)}

.p-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-block:.2rem .6rem}
.p-tag{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.05em;
  padding:.2rem .55rem;border-radius:6px;
  background:rgba(107,63,160,.1);color:var(--violet);border:1px solid var(--line)}
.p-price{font-weight:700;color:var(--violet);font-size:1rem}
.p-price.big{font-size:1.4rem;font-family:var(--f-display)}

/* ---------- صفحة المنتج ---------- */
.p-get{margin-block-start:1.5rem;padding-block-start:1.2rem;border-block-start:1px solid var(--line)}
.p-get h3{font-size:1.05rem;margin:0 0 .7rem;color:var(--violet)}
.p-files{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.p-files li{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.6rem .8rem;border-radius:10px;
  background:var(--panel-2);border:1px solid var(--line)}
.f-kind{
  font-family:var(--f-mono);font-size:.68rem;font-weight:600;
  padding:.18rem .45rem;border-radius:5px;background:var(--violet);color:#fff}
.f-name{flex:1 1 auto;font-size:.92rem}
.f-size{font-family:var(--f-mono);font-size:.76rem;color:var(--text-secondary)}

.p-link{margin-block-start:1rem}
.p-link a{display:inline-flex;align-items:center;gap:.45rem;color:var(--violet)}
.p-link svg{width:18px;height:18px}

.p-buybar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-block-start:1.6rem;padding-block-start:1.2rem;
  border-block-start:2px solid var(--gold-whisper)}

/* ---------- نموذج الطلب ---------- */
.order-form{
  margin-block-start:1.6rem;padding:clamp(1.1rem,3vw,1.8rem);
  background:#fff;border:1px solid var(--violet);border-radius:16px;
  box-shadow:0 12px 34px rgba(107,63,160,.1);position:relative;overflow:hidden}
.order-form::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:5px;
  background:linear-gradient(90deg,var(--gold),var(--violet-lift),var(--violet))}
.order-form .m-ch{margin-block-start:.3rem;border:0;padding:0}

.o-safe{
  display:flex;align-items:center;gap:.5rem;margin:0 0 1.1rem;
  padding:.6rem .85rem;border-radius:10px;font-size:.86rem;
  background:rgba(10,124,63,.08);color:#0A7C3F;border:1px solid rgba(10,124,63,.25)}
.o-safe svg{width:18px;height:18px;flex:0 0 auto}

.o-grid{display:grid;gap:.85rem;grid-template-columns:1fr 1fr}
@media (max-width:640px){ .o-grid{grid-template-columns:1fr} }
.o-f{display:grid;gap:.3rem}
.o-f > span{font-size:.84rem;color:var(--text-secondary)}
.o-f input,.o-f select,.o-f textarea{
  padding:.75rem .9rem;border-radius:10px;
  border:1px solid var(--line-strong);background:var(--panel);
  font-family:var(--f-body);font-size:.95rem;width:100%;
  transition:border-color .25s var(--ease)}
.o-f input:focus,.o-f select:focus,.o-f textarea:focus{border-color:var(--violet);outline:none}
.order-form > .o-f{margin-block-start:.85rem}

.o-chk{display:flex;align-items:flex-start;gap:.5rem;margin-block-start:.8rem;font-size:.9rem}
.o-chk input{margin-block-start:.2rem;width:18px;height:18px;accent-color:var(--violet)}

.o-terms{
  margin-block-start:1.1rem;padding:.9rem 1rem;border-radius:12px;
  background:var(--panel-2);border:1px solid var(--line)}
.o-terms h4{margin:0 0 .5rem;font-size:.92rem;color:var(--violet)}
.o-terms ul{margin:0;padding-inline-start:1.1rem;display:grid;gap:.3rem}
.o-terms li{font-size:.85rem;line-height:1.65;color:var(--text-secondary)}

.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;opacity:0}

.o-actions{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-block-start:1.3rem}
.order-form .err{color:#B4231F;font-size:.88rem;margin-block-start:.8rem}

/* ---------- تأكيد الطلب ---------- */
.o-done{
  margin-block-start:1.6rem;padding:clamp(1.1rem,3vw,1.9rem);
  background:#fff;border:1px solid var(--violet);border-radius:16px;
  box-shadow:0 12px 34px rgba(107,63,160,.12);position:relative;overflow:hidden}
.o-done::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:5px;
  background:linear-gradient(90deg,#0A7C3F,var(--gold))}
.o-done-h{display:flex;align-items:center;gap:.6rem;color:#0A7C3F;margin-block-end:1rem}
.o-done-h svg{width:26px;height:26px}
.o-done-h h3{margin:0;font-size:1.15rem}
.o-done h4{margin:1.2rem 0 .6rem;font-size:.98rem;color:var(--violet)}

.o-sum{display:flex;gap:.8rem;flex-wrap:wrap}
.o-sum > div{
  flex:1 1 180px;padding:.75rem .9rem;border-radius:11px;
  background:var(--panel-2);border:1px solid var(--line);display:grid;gap:.15rem}
.o-sum span{font-size:.78rem;color:var(--text-secondary)}
.o-sum strong{font-size:1.05rem;font-family:var(--f-mono)}

.b-card{display:grid;gap:.4rem}
.b-row{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.6rem .8rem;border-radius:10px;
  background:var(--panel-2);border:1px solid var(--line)}
.b-k{font-size:.8rem;color:var(--text-secondary);flex:0 0 auto;min-width:7.5rem}
.b-v{flex:1 1 auto;font-family:var(--f-mono);font-size:.86rem;word-break:break-all}
.b-c{
  flex:0 0 auto;padding:.3rem .7rem;border-radius:8px;font-size:.78rem;
  background:var(--violet);color:#fff;border:0;cursor:pointer;
  transition:background .25s var(--ease)}
.b-c:hover{background:var(--violet-lift)}
.b-c.done{background:var(--gold);color:var(--ink-deep)}

.o-note{
  margin-block-start:1rem;font-size:.88rem;line-height:1.8;color:var(--text-secondary)}
.o-note span{color:var(--violet);font-family:var(--f-mono)}

/* ==========================================================================
   ملصق الزائر ونثار التحية
   ========================================================================== */

/* الصورة الملصوقة داخل التعليق: ملصقٌ محكوم لا لوحة تُزيح ما تحتها */
.m-c-sticker{
  display:block;margin-block-start:.6rem;max-width:min(320px,100%);
  border-radius:14px;overflow:hidden;border:1px solid var(--line);
  background:var(--panel-2);line-height:0;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.m-c-sticker img{width:100%;height:auto;max-height:280px;object-fit:contain;display:block}
.m-c-sticker:hover{transform:translateY(-2px);border-color:var(--violet);
  box-shadow:0 12px 28px rgba(107,63,160,.18)}

/* معاينة ما لُصق، قبل الإرسال */
.m-paste[hidden]{display:none}
.m-paste-i{
  position:relative;margin:0;display:inline-block;max-width:min(220px,60%);
  border-radius:14px;overflow:hidden;border:1px solid var(--line-strong);
  background:var(--panel-2);line-height:0;
  animation:pasteIn .34s var(--ease);
}
.m-paste-i img{width:100%;height:auto;max-height:180px;object-fit:contain;display:block}
.m-paste-x{
  position:absolute;inset-block-start:6px;inset-inline-end:6px;
  width:26px;height:26px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(20,11,34,.72);color:#fff;font-size:1.1rem;line-height:1;
  display:grid;place-items:center;transition:background .2s var(--ease),transform .2s var(--ease);
}
.m-paste-x:hover{background:var(--violet);transform:scale(1.08)}
@keyframes pasteIn{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}

.m-paste-hint{
  display:flex;align-items:center;gap:.42rem;margin:0;
  font-size:.78rem;color:var(--text-secondary);opacity:.85;
}
.m-paste-hint svg{width:16px;height:16px;flex:none}

/* الصندوق حين تُسحب صورة فوقه */
.m-form{border-radius:16px;transition:box-shadow .2s var(--ease)}
.m-form.drop-on{box-shadow:0 0 0 2px var(--violet-lift),0 0 0 8px rgba(139,95,196,.14)}

.m-flash{
  margin:0;font-size:.84rem;color:var(--violet);font-weight:500;
  animation:pasteIn .3s var(--ease);
}

/* ---------- نثار القلوب والورود ---------- */
.cheer{
  position:fixed;inset:0;z-index:120;pointer-events:none;overflow:hidden;
}
.cheer-b{
  position:absolute;inset-block-start:var(--cy);inset-inline-start:var(--cx);
  font-size:1.5rem;line-height:1;will-change:transform,opacity;opacity:0;
  filter:drop-shadow(0 4px 10px rgba(107,63,160,.35));
  animation:cheerFly 1.9s var(--ease-soft) forwards;
}
@keyframes cheerFly{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0)}
  14% {opacity:1;transform:translate(calc(-50% + var(--dx)*.42),calc(-50% + var(--dy)*.52))
                 scale(calc(var(--sz)*1.12)) rotate(calc(var(--rot)*.35))}
  46% {opacity:1;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy)))
                 scale(var(--sz)) rotate(calc(var(--rot)*.7))}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)*1.16),calc(-50% + var(--dy) + var(--fall)))
                 scale(calc(var(--sz)*.86)) rotate(var(--rot))}
}
@media (prefers-reduced-motion:reduce){
  .cheer{display:none}
}

/* ==========================================================================
   حوار الزوار: ردٌّ على تعليق
   ========================================================================== */

/* زرّ الردّ: باهتٌ حتى تقترب منه، فلا يزاحم كلام صاحب التعليق */
.m-c-acts{display:flex;gap:.5rem;margin-block-start:.55rem}
.m-c-rep{
  display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;
  background:none;border:none;padding:.28rem .5rem;border-radius:9px;
  font:inherit;font-size:.8rem;color:var(--text-secondary);opacity:.78;
  transition:color .2s var(--ease),background .2s var(--ease),opacity .2s var(--ease);
}
.m-c-rep svg{width:15px;height:15px}
.m-c-rep:hover{color:var(--violet);background:rgba(107,63,160,.08);opacity:1}

/* الردود: عمودٌ بنفسجيّ يجمعها، وإزاحةٌ واحدة لا تتكرر مهما طال الحوار */
.m-c-kids{
  margin-block-start:.7rem;padding-inline-start:.9rem;
  border-inline-start:2px solid var(--line-strong);
  display:grid;gap:.55rem;
}
.m-c-kid{padding:.7rem .85rem;border-radius:14px;background:var(--panel-2)}
.m-c-kid .m-c-av{width:26px;height:26px;font-size:.74rem}
.m-c-kid strong{font-size:.92rem}
.m-c-kid p{font-size:.94rem}

/* صندوق الردّ المصغّر */
.m-form-rep{
  margin-block-start:.7rem;padding:.85rem;border-radius:16px;
  background:var(--panel-2);border:1px solid var(--line);
  animation:pasteIn .3s var(--ease);
}
.m-rep-h{margin:0 0 .55rem;font-size:.82rem;color:var(--text-secondary)}
.m-rep-h strong{color:var(--violet);font-weight:600}
.m-form-rep .m-quick button{font-size:1rem;width:30px;height:30px}
.m-rep-a{display:flex;gap:.5rem}
.m-form-rep input,.m-form-rep textarea{font-size:.94rem}

/* ملصق من حزم الموقع داخل التعليق: بلا إطار ولا خلفية، وأصغر من الصورة
   المرفوعة، فالملصق تحيةٌ سريعة لا لوحةٌ تُتأمَّل */
.m-c-sticker.is-pack{
  background:none;border:none;max-width:200px;
}
.m-c-sticker.is-pack:hover{box-shadow:none;transform:translateY(-2px) scale(1.03)}
.m-c-sticker.is-pack img{max-height:200px;object-fit:contain}

/* زرّ حزم الملصقات في صفّ الأدوات: وجهه ملصقٌ من الحزمة، فيُعرف بلا شرح */
.m-quick .js-packs{padding:2px;line-height:0;overflow:hidden}
.m-quick .js-packs img{width:100%;height:100%;object-fit:contain;display:block}