/* pages/courses.css — بخشی از سیستم سبک سایت عمومی پلاس */
.ctags{position:absolute;inset:0;z-index:4;pointer-events:none}
.ctag{position:absolute;top:0;left:0;right:auto;pointer-events:auto;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-family:var(--font-display);font-size:12.5px;font-weight:800;color:#DCE7F5;
  padding:9px 15px;border-radius:var(--chip-radius);border:1px solid var(--line-strong);
  background:rgba(8,14,32,.72);backdrop-filter:blur(8px);
  transition:border-color var(--dur-fast),color var(--dur-fast),box-shadow var(--dur-fast)}
.ctag span{font-size:11px;color:var(--accent-soft);opacity:.85}
.ctag:hover,.ctag.on{border-color:var(--accent);color:#fff;
  box-shadow:0 0 0 1px color-mix(in oklab,var(--accent) 45%,transparent),
             0 10px 30px -16px var(--accent)}

/* برچسب هسته: کل کاتالوگ — کمی درشت‌تر از برچسب حوزه‌ها */
.ctag--core{font-weight:900}
.ctag--core span{color:var(--gold-400);opacity:1}

/* نوار میانی: دوره‌های جامع */
.camp-stat{list-style:none;display:grid;gap:12px}
.camp-stat li{display:flex;align-items:baseline;gap:12px;padding:14px 18px;
  border:1px solid rgba(255,255,255,.14);border-radius:16px;
  background:rgba(255,255,255,.04)}
.camp-stat b{font-family:var(--font-display);font-size:26px;font-weight:900;color:#fff;
  min-inline-size:3ch}
.camp-stat span{font-size:13px;color:var(--accent-soft)}

/* فرم شلوغ‌تر: برچسب‌ها ریزتر و جمع‌وجورتر تا در همان فضا جا شوند */
.ctags--dense .ctag{padding:6px 10px;font-size:11.5px}
.ctags--dense .ctag span{font-size:10px}

/* ── نزدیک‌ترین شروع‌ها: ریل افقی با اسنپ ───────────────────────────── */
.soon-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin-block-end:clamp(18px,2.2vw,26px)}
.soon-head h2{font-family:var(--font-display);font-size:clamp(20px,2.4vw,27px);
  font-weight:900;color:var(--fg);margin-block-start:6px}
.soon-nav{display:flex;gap:8px}
.soon-b{inline-size:38px;block-size:38px;border-radius:12px;display:grid;place-items:center;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--fg-muted);cursor:pointer;
  transition:color var(--dur-fast),border-color var(--dur-fast)}
.soon-b:hover{color:var(--teal-600);border-color:var(--teal-600)}
.soon-b svg{inline-size:17px;block-size:17px}
.soon-rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-block-end:8px;scrollbar-width:thin}
.soon-c{flex:0 0 clamp(240px,26vw,300px);scroll-snap-align:start;display:flex;gap:14px;
  padding:16px;border:1px solid var(--line);border-radius:var(--card-radius);
  background:var(--surface);transition:border-color var(--dur-fast),transform var(--dur-fast)}
.soon-c,.soon-c *{text-decoration:none}
.soon-c:hover{border-color:var(--teal-600);transform:translateY(-2px)}
.soon-c:hover .soon-t{color:var(--teal-600)}
.soon-c.is-camp{border-color:color-mix(in oklab,var(--gold-600) 34%,var(--line));
  background:linear-gradient(180deg,color-mix(in oklab,var(--gold-600) 4%,var(--surface)),var(--surface))}
.soon-d{flex:none;inline-size:62px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;border-radius:14px;padding:10px 6px;
  background:var(--paper-200);border:1px solid var(--line)}
.soon-d b{font-family:var(--font-display);font-size:13px;font-weight:900;color:var(--fg);
  text-align:center;line-height:1.5}
.soon-d span{font-size:10px;color:var(--fg-muted)}
.soon-b2{display:flex;flex-direction:column;gap:5px;min-inline-size:0}
.soon-k{font-size:11px;color:var(--teal-600);font-weight:700}
.soon-t{font-family:var(--font-display);font-size:14px;font-weight:800;color:var(--fg);
  line-height:1.75;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.soon-m{font-size:11.5px;color:var(--fg-muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.soon-m i{inline-size:3px;block-size:3px;border-radius:50%;background:var(--line-strong)}
@media (max-width:640px){
.soon-head{flex-direction:column;align-items:flex-start}
}

/* ═══════════ صفحه دوم سرمه‌ای: پنج دوره برتر ═══════════ */
.top-head{max-inline-size:52ch}
.top-head h2{font-family:var(--font-display);font-size:clamp(22px,3vw,34px);
  font-weight:900;color:#fff;margin-block-start:8px}
.top-stage{margin-block-start:clamp(26px,3.4vw,44px)}

.top-rail{position:relative;min-block-size:clamp(300px,34vw,360px)}
.top-s{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(18px,2.6vw,38px);align-items:center;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .55s var(--ease,ease),transform .55s var(--ease,ease),visibility .55s}
.top-s.on{opacity:1;visibility:visible;transform:none}
@media (prefers-reduced-motion:reduce){.top-s{transition:none}}

.top-img{display:block;border-radius:var(--card-radius);overflow:hidden;
  aspect-ratio:16/10;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.top-img img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.top-img svg{inline-size:52px;block-size:52px;margin:auto;color:rgba(255,255,255,.4)}

.top-b{position:relative;display:flex;flex-direction:column;gap:9px;align-items:flex-start}
/* شماره رتبه پشت متن می‌نشیند، سمت شروع خط (در راست‌به‌چپ یعنی راست)،
   تا از بلوک متن جدا نیفتد. */
.top-rank{position:absolute;inset-block-start:-14px;inset-inline-start:-6px;
  font-family:var(--font-display);font-size:clamp(52px,7vw,86px);font-weight:900;
  color:rgba(255,255,255,.07);line-height:1;pointer-events:none}
.top-k{font-size:12px;color:var(--accent-soft)}
.top-b h3{font-family:var(--font-display);font-size:clamp(19px,2.4vw,27px);font-weight:900;
  line-height:1.75}
.top-b h3 a{color:#fff;text-decoration:none}
.top-img{text-decoration:none}
.top-b h3 a:hover{color:var(--gold-400)}
.top-s2{font-size:13.5px;line-height:2;color:var(--accent-soft);max-inline-size:46ch}
.top-meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12px;color:var(--accent-soft)}
.top-rate{display:inline-flex;align-items:center;gap:5px;color:var(--gold-400);font-weight:800}
.top-rate svg{inline-size:14px;block-size:14px}
.top-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-block-start:6px}
.top-price b{font-family:var(--font-num);font-size:20px;font-weight:900;color:#fff}
.top-price span{font-size:11.5px;color:var(--accent-soft);margin-inline-start:5px}

.top-nav{display:flex;align-items:center;justify-content:center;gap:14px;
  margin-block-start:clamp(20px,2.6vw,32px)}
.top-b[data-top]{inline-size:40px;block-size:40px;border-radius:13px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;
  transition:background var(--dur-fast),border-color var(--dur-fast)}
.top-b[data-top]:hover{background:rgba(255,255,255,.12);border-color:var(--gold-400)}
.top-b[data-top] svg{inline-size:17px;block-size:17px}
.top-dots{display:flex;gap:8px}
.top-dot{inline-size:9px;block-size:9px;border-radius:50%;border:0;cursor:pointer;padding:0;
  background:rgba(255,255,255,.24);transition:background var(--dur-fast),inline-size var(--dur-fast)}
.top-dot.on{background:var(--gold-400);inline-size:24px;border-radius:999px}

/* امتیاز «تازه» روی دوره‌های بدون رای */
.rate--new b{color:var(--fg-muted)}
.rate--new svg{color:var(--line-strong)}

@media (max-width:860px){
.top-s{grid-template-columns:1fr;gap:16px;align-content:start}
.top-rail{min-block-size:clamp(430px,72vw,520px)}
.top-rank{font-size:56px}
}

/* ═══════════ سرصفحه دوصفحه‌ای: یک بوم چسبان، دو لایه متن ═══════════
   ارتفاع سکشن دو برابر پنجره است و بوم داخلش چسبان می‌ماند؛ با اسکرول
   همان ذره‌ها از فرم خوشه‌ای به قاب اسلایدر تبدیل می‌شوند. */
.pagehead.ph-two{min-block-size:200vh;padding:0;overflow:clip}
.ph-sticky{position:sticky;inset-block-start:0;block-size:100vh;overflow:hidden;
  display:grid;place-items:center}
.ph-sticky > canvas{position:absolute;inset:0;inline-size:100%;block-size:100%}
.ph-screen{grid-area:1/1;inline-size:100%;position:relative;z-index:3;
  will-change:opacity,transform}
.ph-screen--2{pointer-events:none}
.ph-two .ctags{z-index:4}

/* لایه دوم: سر و ته اسلایدر */
.ph-screen--2 .top-head{max-inline-size:52ch;margin-block-end:clamp(16px,2vw,26px)}
.ph-screen--2 .top-head h2{font-family:var(--font-display);
  font-size:clamp(21px,2.8vw,32px);font-weight:900;color:#fff;margin-block-start:6px}
.top-stage{position:relative}