/* ══════════════════════════════════════════════════════════════════════════
   edu.css — بخش آکادمی.  بعد از site.css بار می‌شود، پس روی تصادم برنده است.

   منبع محتوا: edu.tweakfa.com (وردپرس، قالب Studiare).  متن، عدد، تصویر و
   ویدیوی هر صفحه عیناً از همان‌جا آمده؛ فقط چیدمان و ظاهر با پوستهٔ سایت یکی شده.

   🔴 رنگ خودِ آکادمی هم بنفش است: در `wp-custom-css` سایت زنده هدرش
   `linear-gradient(90deg,#0a0a0a,#6633ff)` است و #6633FF با --gc-violet
   (#6734ff) یکی است. پس این بخش توکن تازه‌ای نمی‌خواهد.

   🔴 همهٔ کلاس‌ها با `ed-` شروع می‌شوند. پوسته فضای نامِ بی‌پیشوند بزرگی دارد
   (card، chip، row، item، grid…) و یک نامِ عام، هدر و فوتر را روی همین صفحه‌ها
   بی‌صدا عوض می‌کند.
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══ ۱. هیرو ═══
   🔴 در این سکشن عمداً نه جرقه هست نه گلو: ویدیو ۱۰.۵۷ ثانیه حلقه می‌زند و با
   گلوی ۲۳.۴۱ ثانیه‌ای هر ۱۹.۳ ثانیه هم‌فاز می‌شود، خیلی زیر کفِ ۱۴۱ ثانیهٔ ما.
   قاعدهٔ «یک چیز زنده در هر نما» خودش همین را می‌گفت؛ ویدیو آن یک چیز است. */
/* 🔴 هیرو بلند است تا از ویدیوی زمینه بیشتر دیده شود (خواستهٔ مالک). سایت زنده
   هم همین است: سکشنش `elementor-section-height-full` یعنی یک صفحهٔ کامل.
   · `svh` نه `vh`: روی گوشی نوارِ آدرس با اسکرول جمع می‌شود و با `vh` ارتفاع
     همان لحظه می‌پرد. خطِ اولِ `min-height` عقب‌گردِ مرورگرِ بی‌`svh` است.
   · سقفِ ۸۸۰ پیکسل: روی نمایشگرِ بلند، هیروی تمام‌قد یعنی کاربر برای دیدنِ
     اولین دوره باید اسکرول کند.
   · محتوا وسط می‌نشیند، پس ویدیو از بالا و پایینش دیده می‌شود. */
.ed-hero{position:relative;isolation:isolate;overflow:clip;
  display:flex;align-items:center;
  padding-block:clamp(56px,7vw,104px) clamp(48px,6vw,88px);
  min-height:660px;
  min-height:min(90svh,880px)}
.ed-hero > .wrap{flex:1;min-width:0}
/* 🔴 ویدیو با شفافیتِ کامل، مثلِ خودِ سایت زنده.
   قبلا `opacity:.3` بود به‌علاوهٔ یک روکشِ سنگین، و نتیجه‌اش این شد که ویدیو
   اصلا دیده نمی‌شد. سایت زنده **هیچ لایهٔ روکشی ندارد** (سکشنِ المنتور
   `background_background:video` است و هیچ `background-overlay` ای رویش نیست)
   و متنِ سفید مستقیم روی ویدیو می‌نشیند. */
/* 🔴 محوشدنِ پایینِ ویدیو با **ماسکِ خودِ ویدیو**، نه با پردهٔ رویش.
   مالک: «لب مرز انتهای هیرو با پایینش، دقیقا همونجایی که سایه مشکی هست».
   علت: `<video>` همیشه لایهٔ گرافیکیِ جداست. تا وقتی محوشدگی در پردهٔ جدا
   (.ed-veil) بود، لبهٔ برشِ ویدیو (`overflow:clip` این سکشن) و لبهٔ پرده در
   دو لایه جدا گِرد می‌شدند و یکی-دو پیکسلِ آخر ویدیوی خام و روشن می‌ماند —
   یک خطِ افقی روی مرزِ هیرو. همان بیماریِ باکسِ مطالبِ منتخب، این بار قطعی‌تر،
   چون ویدیو *همیشه* لایهٔ جداست.
   با ماسک، محوشدگی و برش یک عملیاتِ واحدند و ذاتا نمی‌توانند از هم جدا شوند.
   ⚠ پلهٔ ۶۸٪ باید با پلهٔ ۶۸٪ِ پردهٔ قبلی یکی بماند، وگرنه ظاهر عوض می‌شود.
   ⚠ رمپِ پایینِ .ed-veil برداشته شد: اگر هر دو بمانند محو **دو بار** اعمال
   می‌شود و پایینِ هیرو محسوسا تیره‌تر می‌شود. */
.ed-hero .ed-vid{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;
  -webkit-mask-image:linear-gradient(180deg,#fff 0,#fff 68%,transparent 100%);
  mask-image:linear-gradient(180deg,#fff 0,#fff 68%,transparent 100%)}
/* پس‌زمینهٔ خودِ سکشن، تا جایی که ماسک ویدیو را برداشته دقیقا رنگِ بدنهٔ صفحه
   باشد و به حدس دربارهٔ «پشتِ سکشن چیست» تکیه نکنیم. */
.ed-hero{background:var(--gc-base)}
/* تنها کاری که این لایه می‌کند: سمتِ متن کمی تیره‌تر تا سفید خوانا بماند، و
   بالای سکشن کمی تیره تا هدر خوانا بماند. محوشدنِ پایین دیگر کارِ ماسکِ
   ویدیوست، نه این پرده. */
.ed-hero .ed-veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to left,rgba(8,8,10,.8),rgba(8,8,10,.44) 30%,rgba(8,8,10,0) 60%),
    linear-gradient(180deg,rgba(8,8,10,.4),rgba(8,8,10,0) 16%)}

/* ستون متن پهن‌تر است چون تصویرِ منبع فقط ۵۰۰ پیکسل عرض دارد (بزرگ‌ترین
   نسخه‌ای که روی سایت زنده هست) و بزرگ‌تر از آن نرم می‌شود. */
.ed-hgrid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:clamp(28px,4vw,60px);align-items:center}
.ed-hkick{display:block;font-size:14px;font-weight:700;color:var(--gc-violet-ink);letter-spacing:.02em}
.ed-htop{margin:6px 0 0;font-size:clamp(17px,2vw,22px);font-weight:700;line-height:1.7;color:var(--gc-text)}
.ed-h1{margin:14px 0 0;font-size:clamp(27px,3.6vw,46px);font-weight:800;line-height:1.4;
  text-wrap:balance}
.ed-hbtn{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(22px,2.6vw,30px)}

/* شمارنده‌ها. رقم لاتین در Poppins چون داده است، برچسب فارسی زیرش. */
.ed-count{display:flex;gap:clamp(26px,4vw,52px);margin-top:clamp(26px,3vw,36px)}
.ed-cnum{display:block;font-family:var(--font-latin);direction:ltr;unicode-bidi:isolate;
  font-size:clamp(32px,4.4vw,50px);font-weight:700;line-height:1.05;color:var(--gc-text);
  font-variant-numeric:tabular-nums}
.ed-clab{display:block;margin-top:7px;font-size:13.5px;color:var(--gc-text-low2)}

/* 🔴 بدونِ هیچ قابی — دستور مالک، و دلیلش هم در خودِ فایل است: تصویر PNGِ
   آلفادار و بلابی‌شکل است (چهار گوشه‌اش `alpha=0`). کادر و سایه دورِ یک شکلِ
   شفاف، یک مستطیل می‌کشید که در طرحِ اصلی وجود ندارد.
   سقفِ ۴۶۰ پیکسل می‌ماند چون بزرگ‌ترین نسخهٔ موجودِ فایل ۵۰۰ پیکسل است. */
.ed-shot{position:relative;max-width:460px;margin-inline-start:auto}
.ed-shot img{display:block;width:100%;height:auto}

@media (max-width:900px){
  .ed-hgrid{grid-template-columns:1fr;gap:30px}
  /* روی گوشی محتوا خودش از یک صفحه بلندتر می‌شود، پس کفِ ارتفاع برداشته
     می‌شود تا فضای خالیِ بی‌دلیل ساخته نشود. */
  .ed-hero{padding-block:clamp(40px,7vw,64px) clamp(36px,6vw,56px);min-height:0}
}

/* 🔴 لکهٔ نورِ سرصفحه‌های کوتاه.
   `section{overflow:clip}` است و لکهٔ ۴۲۰ در ۴۲۰ در سرصفحه‌ای که فقط ۲۱۸ پیکسل
   ارتفاع دارد از بالا و پایین بریده می‌شود و یک **مستطیلِ لبه‌تیز** روی صفحه
   می‌گذارد (اندازه‌گیری‌شده: top=−۸۷، برشِ پایین ۱۱۵ پیکسل).
   این لکه پهن و کوتاه است تا کاملا داخلِ سرصفحه بنشیند، پس چیزی بریده نمی‌شود. */
.ed-hglow{width:min(720px,80%);height:170px;top:14px;inset-inline-start:24%}

/* 🔴 و همین اشتباه یک بار دیگر، در سکشنِ دوره‌ها: لکه `top:-14%` و
   `inset-inline-end:-8%` داشت، یعنی هم از بالا هم از کنار بیرونِ سکشن می‌زد و
   `overflow:clip` دو لبهٔ تیز از آن می‌ساخت — مالک همان را دید.
   قاعدهٔ ساده‌ای که از این به بعد رعایت می‌شود: **هیچ لکه‌ای نباید مقدارِ
   منفی داشته باشد و ارتفاعش باید از سکشن کمتر باشد.** */
.ed-sglow{width:min(520px,58%);height:420px;top:56px;inset-inline-end:5%}

/* ═══ ۲. سرتیتر بخش ═══ */
.ed-sec{padding-block:clamp(44px,5.5vw,76px)}
.ed-sh{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin-bottom:clamp(22px,2.6vw,32px);flex-wrap:wrap}
.ed-sh h2{margin:8px 0 0;font-size:clamp(21px,2.6vw,34px);font-weight:800;line-height:1.5}
.ed-sh p{margin:8px 0 0;font-size:14.5px;color:var(--gc-text-mid);line-height:1.9}

/* ═══ ۳. چیپ دسته ═══
   نوار افقی که روی گوشی اسکرول می‌شود؛ نُه دسته در یک خطِ شکسته بدتر بود. */
.ed-filters{display:flex;gap:9px;overflow-x:auto;padding-bottom:6px;margin-bottom:20px;
  scrollbar-width:none}
.ed-filters::-webkit-scrollbar{display:none}
.ed-fchip{flex:none;border:0;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;
  padding:9px 16px;border-radius:999px;white-space:nowrap;
  background:var(--gc-tint-0);color:var(--gc-text-low2);
  box-shadow:inset 0 0 0 1px var(--gc-hairline);
  transition:background .2s var(--ease-ui),color .2s var(--ease-ui),box-shadow .2s var(--ease-ui)}
.ed-fchip:hover{background:var(--gc-tint-1);color:var(--gc-text)}
.ed-fchip[aria-pressed="true"]{background:rgba(var(--gc-violet-rgb),.18);color:var(--gc-violet-ink);
  box-shadow:inset 0 0 0 1.5px rgba(var(--gc-violet-rgb),.5)}
.ed-fchip:focus-visible{outline:2px solid var(--gc-violet-ink);outline-offset:2px}

/* ═══ ۴. کارت دوره ═══ */
.ed-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
  gap:clamp(16px,1.8vw,22px)}
.ed-card{position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--gc-surface);border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1px var(--gc-hairline);
  transition:box-shadow .25s var(--ease-ui),transform .25s var(--ease-ui)}
.ed-card:hover{transform:translateY(-3px);
  box-shadow:inset 0 0 0 2px rgba(var(--gc-violet-rgb),.42),0 18px 40px rgba(0,0,0,.45)}
.ed-card[hidden]{display:none}
.ed-cover{position:relative;display:block;aspect-ratio:500/286;overflow:hidden;background:var(--gc-tint-0)}
.ed-cover img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease-ui)}
.ed-card:hover .ed-cover img{transform:scale(1.045)}
.ed-cbody{display:flex;flex-direction:column;flex:1;padding:15px 16px 16px}
.ed-ttl{margin:0;font-size:15.5px;font-weight:700;line-height:1.75}
/* 🔴 کل کارت کلیک‌پذیر است ولی فقط یک لینک دارد: با دو لینکِ هم‌مقصد، کاربر تب
   دو بار روی یک مقصد می‌ایستد. پوششِ ::after این را حل می‌کند. */
.ed-ttl a::after{content:'';position:absolute;inset:0;z-index:2}
.ed-teach{display:flex;align-items:center;gap:8px;margin-top:10px;
  font-size:13px;color:var(--gc-text-low2)}
.ed-teach img{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:none}
.ed-cfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:14px}
.ed-stud{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--gc-text-low)}
.ed-stud svg{width:15px;height:15px;flex:none}
.ed-price{font-size:14.5px;font-weight:700;color:var(--gc-text);white-space:nowrap}
.ed-price .money{font-size:15.5px}
.ed-price .cur{font-size:12px;font-weight:500;color:var(--gc-text-low2);margin-inline-start:3px}
/* دوره‌ای که ثبت‌نامش بسته است باید روی خودِ کارت دیده شود، نه فقط داخل صفحه‌اش */
.ed-shut{position:absolute;top:10px;inset-inline-end:10px;z-index:3;
  font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;
  background:rgba(8,8,10,.82);backdrop-filter:blur(6px);color:var(--gc-text-mid);
  box-shadow:inset 0 0 0 1px var(--gc-hairline-strong)}

.ed-none{grid-column:1/-1;text-align:center;padding:48px 20px;color:var(--gc-text-low)}

/* ═══ ۵. نظرات ═══ */
.ed-quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));
  gap:clamp(16px,1.8vw,22px);align-items:start}
.ed-quote{position:relative;background:var(--gc-surface);border-radius:var(--r-md);
  padding:24px 22px 20px;box-shadow:inset 0 0 0 1px var(--gc-hairline)}
.ed-quote::before{content:'”';position:absolute;top:2px;inset-inline-start:18px;
  font-family:var(--font-latin);font-size:64px;line-height:1;
  color:rgba(var(--gc-violet-rgb),.3);pointer-events:none}
.ed-qtext{margin:0;font-size:14px;line-height:2.1;color:var(--gc-text-mid);position:relative}
.ed-qwho{display:flex;align-items:center;gap:11px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--gc-hairline)}
.ed-qwho img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;
  background:var(--gc-tint-1)}
/* نظرِ سوم روی سایت زنده عکس ندارد. حرفِ اولِ نام، همان الگوی آواتارِ خودِ سایت. */
.ed-qav{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:17px;font-weight:700;background:rgba(var(--gc-violet-rgb),.2);
  color:var(--gc-violet-ink);box-shadow:inset 0 0 0 1px rgba(var(--gc-violet-rgb),.34)}
/* 🔴 نام و نقش باید دو خط باشند. با inline بودنِ span، «علی رحیمی» و «خریدار دوره
   جامع» به هم می‌چسبیدند و یک کلمهٔ بی‌معنی می‌ساختند. */
.ed-qwho > span{display:flex;flex-direction:column;min-width:0}
.ed-qwho .n{font-size:14px;font-weight:700;line-height:1.6}
.ed-qwho .r{font-size:12.5px;color:var(--gc-text-low);line-height:1.6}

/* ═══ ۶. دربارهٔ آکادمی ═══ */
.ed-about{display:grid;grid-template-columns:210px minmax(0,1fr);gap:clamp(24px,4vw,52px);
  align-items:center;background:var(--gc-surface);border-radius:var(--r-md);
  padding:clamp(26px,3.4vw,42px);box-shadow:inset 0 0 0 1px var(--gc-hairline)}
.ed-about img{width:100%;max-width:190px;display:block;margin-inline:auto}
.ed-about h2{margin:0 0 12px;font-size:clamp(18px,2.2vw,24px);font-weight:800;line-height:1.6}
.ed-about p{margin:0;font-size:14.5px;line-height:2.15;color:var(--gc-text-mid);text-align:justify}
@media (max-width:760px){.ed-about{grid-template-columns:1fr;gap:22px;text-align:center}
  .ed-about p{text-align:justify}}

/* ═══ ۷. نوار مرتب‌سازی و فیلتر قیمت (صفحهٔ همهٔ دوره‌ها) ═══
   🔴 هر سه کنترل در **یک** نوارند. اول دو نوار روی هم بودند (شمار و مرتب‌سازی،
   بعد یک کارتِ جداگانه برای قیمت) و بالای هشت کارت، دو ردیفِ کاملِ کنترل
   می‌نشست. نصفِ کارتِ قیمت هم خالی می‌ماند.
   🔴 «فیلتر بر اساس قیمت» برچسبِ همان گروه است، نه برچسبِ خانهٔ اول — روی سایت
   زنده چسبیده به خانه بود و مثل برچسبِ آن خوانده می‌شد. */
.ed-bar{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;margin-bottom:22px}
.ed-bar .ed-sortwrap{min-width:224px;margin-inline-start:auto}
.ed-count-lb{font-size:13.5px;color:var(--gc-text-low2);white-space:nowrap}
.ed-pf{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:8px 12px;border-radius:var(--r-md);
  background:var(--gc-tint-0);box-shadow:inset 0 0 0 1px var(--gc-hairline)}
.ed-pf .cap{font-size:12.5px;color:var(--gc-text-low2);white-space:nowrap}
.ed-pf .lb{font-size:12.5px;color:var(--gc-text-low);white-space:nowrap}
.ed-pf .inp{height:38px;width:118px;font-size:13.5px}
.ed-pf .btn{height:38px;padding-inline:16px;font-size:13px}

/* ═══ ۸. صفحهٔ دوره — سرصفحه حذف شد ═══
   🔴 دستور مالک (۲۳ مرداد): نوارِ بالای صفحهٔ دوره (مسیرِ راهنما + تیترِ بزرگ +
   چیپِ دسته) از نمایش رفت، چون «باعث شده کادر پایین بیاد». تیتر به‌شکلِ `h1.sr`
   در سند ماند تا سئو و صفحه‌خوان از دستش ندهند.
   کلاس‌های `.ed-chero .ed-crumb .ed-ch1 .ed-cchips .ed-cat` با همان تغییر حذف
   شدند و جایی دیگر استفاده نمی‌شدند (چک شد). */

/* ═══ ۹. صفحهٔ دوره — دو ستون ═══
   ستون کناری می‌چسبد چون فهرست فصل‌ها بلند است و قیمت نباید از دید برود. */
/* ⚠ پدینگِ بالا از ۳۸ به ۴۸ رفت و عمدی است: گلوی محیطیِ کاور به بالا هم نور
   می‌دهد و `section{overflow:clip}` دُمِ آن را می‌بُرد. ده پیکسل در برابرِ ۲۵۰
   پیکسلی که با حذفِ سرصفحه آزاد شد. */
.ed-clay{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:clamp(22px,3vw,42px);
  align-items:start;padding-block:clamp(28px,3.4vw,48px) clamp(48px,6vw,80px)}
.ed-side{position:sticky;top:calc(var(--hdr-h,61px) + 18px);display:grid;gap:16px}
@media (max-width:980px){
  .ed-clay{grid-template-columns:1fr}
  /* 🔴 روی گوشی ستون کناری زیرِ محتوا می‌افتاد، یعنی دکمهٔ «ثبت نام دوره» بعد از
     دوازده فصل. با display:contents سه کارتش خودشان خانهٔ گرید می‌شوند و فقط
     کارتِ قیمت می‌رود بالای محتوا؛ مشخصات و مدرس همان پایین می‌مانند.
     🔴 نچسبیدن هم لازم است: کارتِ چسبانِ تمام‌عرض نصفِ صفحهٔ گوشی را می‌خورد. */
  .ed-side{display:contents}
  .ed-buy{order:1}
  .ed-clay > div:first-child{order:2}
  .ed-spec{order:3}
  .ed-tcard{order:4}
  .ed-clay{gap:16px}
}

/* کاورِ بزرگ، بالای ستونِ محتوا — همان جایی که سایت زنده گذاشته است */
.ed-cwrap{position:relative;margin-bottom:clamp(24px,3vw,36px)}
.ed-cshot{position:relative;z-index:1;
  display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--r-md)}

/* 🔴 گلوی محیطیِ کاور، الگوی «حالتِ محیطیِ» یوتیوب: کپیِ خودِ تصویر، بزرگ‌تر و
   مات‌شده، پشتِ تصویرِ اصلی. رنگ از خودِ عکس درمی‌آید.
   🔴 مهارِ اندازه عمدی است: `site.css:73` روی **هر** section می‌نویسد
   `overflow:clip`، پس هرچه از سکشن بیرون بزند بریده می‌شود — همان تلهٔ ثبت‌شده که
   یک بار لبهٔ تیز ساخت. برای همین:
   - پخشِ هندسی با `scale` است نه با inset منفی، تا قابِ عنصر همان‌جا بماند.
   - `translateY` مثبت، پس نور به **پایین** می‌ریزد نه به بالا. بالا فقط دُمِ محو
     می‌ماند که در پدینگِ بالای `ed-clay` جا می‌شود، و پایین فضای باز دارد.
   - شعاعِ مات با vw بالا و پایین می‌رود؛ روی گوشی که پدینگ کم است، مات هم کم است.
   ⚠ `saturate` لازم است: مات‌کردن رنگ‌ها را به‌سمتِ خاکستری می‌برد و بدونِ آن
     «گلوی رنگِ عکس» به یک لکهٔ بی‌رنگ تبدیل می‌شود. */
.ed-cglow{position:absolute;inset:0;z-index:0;
  display:block;width:100%;height:100%;object-fit:cover;
  transform:scale(1.03) translateY(1.6%);
  filter:blur(clamp(22px,3vw,44px)) saturate(1.8);
  opacity:.46;pointer-events:none;user-select:none}

/* کارت خرید */
.ed-buy{background:var(--gc-surface);border-radius:var(--r-md);padding:18px;
  box-shadow:inset 0 0 0 1px var(--gc-hairline)}
/* 🔴 ردیفِ «قیمت :» دو خانهٔ کنارِ هم است، عیناً مثلِ سایت زنده. قبلا فقط یک
   عددِ درشتِ برهنه بود و برچسبش را نداشت. */
.ed-prow{display:flex;align-items:stretch;border-radius:var(--r-sm);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--gc-hairline);margin-bottom:16px}
.ed-prow .k{display:flex;align-items:center;padding:12px 15px;font-size:13.5px;font-weight:700;
  color:var(--gc-text-low2);background:var(--gc-tint-0);white-space:nowrap;
  border-inline-end:1px solid var(--gc-hairline)}
.ed-prow .v{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:12px 15px;font-size:20px;font-weight:800;line-height:1.2}
.ed-prow .cur{font-size:13px;font-weight:600;color:var(--gc-text-low2)}
.ed-bshut{padding:13px 15px;border-radius:var(--r-sm);text-align:center;font-size:13.5px;
  font-weight:700;color:var(--gc-text-mid);background:var(--gc-tint-0);
  box-shadow:inset 0 0 0 1px var(--gc-hairline-strong)}

/* کارت مشخصات */
.ed-spec{background:var(--gc-surface);border-radius:var(--r-md);padding:18px;
  box-shadow:inset 0 0 0 1px var(--gc-hairline)}
/* ظرفیت/دانشجو کادرِ خودش را دارد و بالای فهرست می‌نشیند، مثلِ سایت زنده */
.ed-cap{display:flex;align-items:center;gap:10px;padding:12px 14px;margin-bottom:14px;
  border-radius:var(--r-sm);background:var(--gc-tint-0);
  box-shadow:inset 0 0 0 1px var(--gc-hairline);
  font-size:13.5px;font-weight:700;line-height:1.7}
.ed-cap .ic{flex:none;color:var(--gc-violet-ink)}

/* ردیف‌های مشخصات */
.ed-rail{list-style:none;margin:0;padding:0}
.ed-rail li{display:flex;align-items:flex-start;gap:11px;padding-block:11px;
  border-top:1px solid var(--gc-hairline);font-size:13.5px;line-height:1.8}
.ed-rail li:first-child{border-top:0;padding-top:0}
.ed-rail .ic{flex:none;width:18px;height:18px;margin-top:3px;color:var(--gc-violet-ink)}
.ed-rail .k{color:var(--gc-text-low2)}
.ed-rail .v{color:var(--gc-text);font-weight:700}

/* نوار درصد پیشرفت */
.ed-prog{padding-top:16px;margin-top:14px;border-top:1px solid var(--gc-hairline)}
.ed-prog .t{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:13px;font-weight:700;color:var(--gc-text-mid);margin-bottom:9px}
.ed-meter{height:7px;border-radius:999px;background:var(--gc-tint-1);overflow:hidden}
.ed-meter i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--gc-violet),var(--gc-success))}

/* کارت مدرس */
.ed-tcard{display:flex;align-items:center;gap:13px;padding:16px 18px;
  background:var(--gc-surface);border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1px var(--gc-hairline)}
.ed-tcard img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
.ed-tcard > span{display:flex;flex-direction:column;min-width:0}
.ed-tcard .n{font-size:14.5px;font-weight:700;line-height:1.6}
.ed-tcard .j{font-size:12.5px;color:var(--gc-text-low2);line-height:1.6}
.ed-tcard .g{font-family:var(--font-latin);font-size:11.5px;color:var(--gc-text-low);
  direction:ltr;unicode-bidi:isolate;text-align:start}
a.ed-tcard:hover{box-shadow:inset 0 0 0 1.5px rgba(var(--gc-violet-rgb),.42)}

/* ═══ ۱۰. صفحهٔ دوره — بدنه ═══ */
.ed-block{margin-bottom:clamp(28px,3.4vw,42px)}

/* 🔴 باکسِ ناحیه — دستور مالک: «باکس‌هایی تعریف کن با همان بک‌گراند گلوی بنفشی که
   همیشه می‌دهیم تا محدوده‌ها مشخص باشد.»
   گرادیانِ بنفش همان خانوادهٔ `.glow.v` در site.css است (radial با
   `--gc-violet-rgb`)، فقط چون اینجا پُرکنندهٔ خودِ کادر است نه لکهٔ محو، آلفایش
   پایین‌تر است تا متن روی آن خوانا بماند.
   ⚠ به‌جای یک `<div class="glow">` جدا، گرادیان روی خودِ باکس نشست: عنصرِ absolute
   داخلِ کادر با `overflow` بریده می‌شود و همان تلهٔ ثبت‌شدهٔ «لکه بریده شد» را
   دوباره می‌ساخت.
   ⚠ خطِ مو عمداً ۱px است نه ۲: کارت‌های همسایه (`ed-buy`, `ed-spec`, `ed-ch`) هم
   ۱px‌اند و کلفت‌ترکردنِ فقط این یکی، خانواده را به هم می‌زد. */
.ed-box{padding:clamp(18px,2.2vw,26px);border-radius:var(--r-md);
  background:radial-gradient(120% 90% at 100% 0,
             rgba(var(--gc-violet-rgb),.13),transparent 62%),var(--gc-surface);
  box-shadow:inset 0 0 0 1px var(--gc-hairline)}
.ed-block > h2{margin:0 0 14px;font-size:clamp(18px,2.1vw,23px);font-weight:800;line-height:1.6}
.ed-block > h3{margin:24px 0 10px;font-size:16px;font-weight:700}
.ed-lead{margin:0;font-size:15px;line-height:2.15;color:var(--gc-text-mid);text-align:justify}
.ed-lead a{color:var(--gc-violet-ink);text-decoration:underline;text-underline-offset:3px}

/* 🔴 سرفصل‌ها یک فهرستِ ساده در دو ستون‌اند، **بدونِ کادر** — عیناً سایت زنده.
   قبلا هر قلم یک باکسِ خط‌دار بود و ده باکسِ پشت‌سرهم، سنگین‌ترین چیزِ صفحه
   می‌شد. `columns` نه `grid`: فهرست را ستون‌به‌ستون پر می‌کند، پس ترتیبِ
   خواندن در RTL همان ترتیبِ منبع می‌ماند. */
.ed-bul{margin:16px 0 0;padding:0;list-style:none;
  columns:2;column-gap:clamp(20px,3vw,44px)}
.ed-bul li{position:relative;break-inside:avoid;
  padding-inline-start:16px;padding-block:5px;
  font-size:14px;line-height:1.95;color:var(--gc-text-mid)}
.ed-bul li::before{content:'';position:absolute;inset-inline-start:0;top:.86em;
  width:6px;height:6px;border-radius:50%;background:var(--gc-violet-ink)}
@media (max-width:560px){.ed-bul{columns:1}}

/* پیش‌نیاز — حالا خودش یک ناحیهٔ مستقل است، نه یک کادرِ کوچک داخلِ بلوکِ بالا.
   (داخل ماندنش بعد از باکس‌شدنِ آن بلوک، کادر-در-کادر می‌شد.) */
.ed-pre{padding:clamp(16px,2vw,20px) clamp(17px,2.2vw,24px);border-radius:var(--r-md);
  background:rgba(var(--gc-violet-rgb),.08);
  box-shadow:inset 0 0 0 1px rgba(var(--gc-violet-rgb),.2)}
.ed-pre h3{margin:0 0 6px;font-size:15px;font-weight:700}
.ed-pre p{margin:0;font-size:13.5px;line-height:1.95;color:var(--gc-text-mid)}
.ed-pre a{color:var(--gc-violet-ink);text-decoration:underline;text-underline-offset:3px}

/* ═══ ۱۱. کارت فصل ═══
   🔴 ساختار عیناً از سایت زنده: آیکنِ درس کنارِ تیتر و توضیح، یک خطِ جداکنندهٔ
   تمام‌عرض، و زیرش ردیفی که «مدت زمان / شامل n قسمت» را در یک سو و
   «خصوصی 🔒» را در سوی دیگر می‌گذارد. قبلا همه‌شان در یک ردیفِ فشرده کنارِ هم
   بودند و کارت نه جداکننده داشت نه آیکن. */
.ed-chs{display:grid;gap:12px}
.ed-ch{background:var(--gc-surface);border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1px var(--gc-hairline);overflow:hidden;
  transition:box-shadow .22s var(--ease-ui)}
.ed-ch:hover{box-shadow:inset 0 0 0 1px var(--gc-hairline-strong)}
.ed-ch.on{box-shadow:inset 0 0 0 1.5px rgba(var(--gc-violet-rgb),.42)}

.ed-chh{display:flex;align-items:flex-start;gap:14px;width:100%;text-align:start;
  border:0;background:0;cursor:pointer;font-family:inherit;color:inherit;padding:17px 18px 15px}
.ed-chh:focus-visible{outline:2px solid var(--gc-violet-ink);outline-offset:-3px}
.ed-chi{flex:none;width:46px;height:46px;display:grid;place-items:center;border-radius:12px;
  background:rgba(var(--gc-violet-rgb),.12)}
.ed-chi img{width:34px;height:34px;display:block}
.ed-chb{flex:1;min-width:0}
.ed-cht{display:block;font-size:15.5px;font-weight:700;line-height:1.7}
.ed-chd{margin:6px 0 0;font-size:13.5px;line-height:1.95;color:var(--gc-text-low2)}
/* شورون: تنها نشانهٔ «این باز می‌شود» */
.ed-chv{flex:none;margin-top:6px;color:var(--gc-text-low);
  transition:transform .28s var(--ease-ui),color .2s}
.ed-ch.on .ed-chv{transform:rotate(180deg);color:var(--gc-violet-ink)}

/* ردیفِ پایین، پشتِ یک خطِ جداکننده */
.ed-chfoot{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;padding:11px 18px;border-top:1px solid var(--gc-hairline)}
.ed-chm{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:var(--gc-text-low)}
.ed-chm .ic{flex:none;width:15px;height:15px;color:var(--gc-text-low)}
.ed-chm .t{display:inline-flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ed-chm .d{color:var(--gc-text-mid)}
.ed-lock{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;
  color:var(--gc-violet-ink)}
.ed-lock .ic{flex:none;width:14px;height:14px}

.ed-chp{overflow:hidden;height:0;transition:height .3s var(--ease-unfold)}
.ed-chp > div{padding:0 18px 16px;font-size:13px;line-height:1.95;color:var(--gc-text-mid)}

/* ═══ ۱۲. صفحهٔ مدرس ═══ */
.ed-thead{display:grid;grid-template-columns:132px minmax(0,1fr);gap:clamp(20px,3vw,34px);
  align-items:center}
.ed-tpic{width:132px;height:132px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 2px rgba(var(--gc-violet-rgb),.45)}
.ed-tname{margin:0;font-size:clamp(22px,2.8vw,32px);font-weight:800;line-height:1.4}
.ed-tjob{margin:6px 0 0;font-size:14.5px;color:var(--gc-violet-ink);font-weight:700}
/* بیو در ستون راست، راه‌های تماس در ستون چپ — کنار هم، نه زیر هم */
.ed-tbody{display:grid;grid-template-columns:minmax(0,1fr) 340px;
  gap:clamp(24px,3.5vw,54px);align-items:start}
.ed-th2{margin:0 0 12px;font-size:clamp(19px,2.2vw,26px);font-weight:800;line-height:1.5}
.ed-tcon{display:grid;gap:12px}
@media (max-width:900px){.ed-tbody{grid-template-columns:1fr;gap:26px}
  .ed-tcon{grid-template-columns:repeat(auto-fit,minmax(216px,1fr))}}
.ed-tc{display:flex;align-items:center;gap:12px;padding:14px 15px;border-radius:var(--r-md);
  background:var(--gc-surface);box-shadow:inset 0 0 0 1px var(--gc-hairline);
  transition:box-shadow .22s var(--ease-ui)}
a.ed-tc:hover{box-shadow:inset 0 0 0 1.5px rgba(var(--gc-violet-rgb),.42)}
.ed-tc .ic{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:rgba(var(--gc-violet-rgb),.14);color:var(--gc-violet-ink)}
.ed-tc .ic svg{width:19px;height:19px}
.ed-tc > span{display:flex;flex-direction:column;min-width:0}
.ed-tc .k{font-size:12.5px;color:var(--gc-text-low2);line-height:1.6}
.ed-tc .v{font-family:var(--font-latin);direction:ltr;unicode-bidi:isolate;text-align:start;
  font-size:13.5px;font-weight:600;line-height:1.6;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:640px){
  .ed-thead{grid-template-columns:1fr;justify-items:center;text-align:center}
}

/* ═══ ۱۳. حرکتِ کمتر ═══
   site.css ترنزیشن و انیمیشن را می‌کشد، ولی این دو حالتِ **ایستا**ی خودشان را
   دارند و بدون این بلوک، ویدیو همچنان پخش می‌شود و پنل باز نمی‌ماند. */
@media (prefers-reduced-motion:reduce){
  /* 🔴 ویدیو **مخفی نمی‌شود، متوقف می‌شود** (در JS صفحه). قبلا اینجا
     `display:none` بود و بعد از بلندشدنِ هیرو نتیجه‌اش ۸۸۰ پیکسل سیاهیِ خالی
     می‌شد. فریمِ اولِ همین فایل یک تصویرِ واقعی است (میانگین RGB ۳۵،۳۱،۴۶)
     پس هیرو تصویرش را نگه می‌دارد و هیچ حرکتی هم ندارد. */
  .ed-chp{transition:none}
}