/* ══════════════════════════════════════════════════════════════
   VEXIO ACADEMY — v3
   01 Font        02 Tokens      03 Reset/Base   04 Utilities
   05 Ambient     06 Navbar      07 Buttons      08 Hero
   09 Player      10 Sections    11 Categories   12 Courses
   13 Paths       14 Free        15 Instructors  16 Footer
   17 Checkout    18 Motion      19 Responsive
   ══════════════════════════════════════════════════════════════ */

/* ─── 01 · FONT ─── */
@font-face{
  font-family:"Shasenem Kurd";
  src:url("./ShasenemKurd.woff2") format("woff2"),
      url("./ShasenemKurd.ttf")  format("truetype");
  font-weight:100 900;
  font-display:swap;
}

/* ─── 02 · DESIGN TOKENS ─── */
:root{
  /* Graphite scale */
  --bg:#0b0d0f;
  --sf-1:#121518;
  --sf-2:#171b1f;
  --sf-3:#1e2328;
  --line:#232930;
  --line-2:#303740;

  /* Accent — champagne gold, used sparingly */
  --gold:#b8952f;
  --gold-2:#d6b368;
  --gold-ghost:rgba(184,149,47,.13);
  --steel:#8496a4;
  --steel-ghost:rgba(132,150,164,.12);

  /* Type */
  --tx:#f2f4f6;
  --tx-2:#a8b2ba;
  --tx-3:#6f7982;

  /* Geometry */
  --r-xs:7px;
  --r-sm:10px;
  --r:13px;
  --r-lg:18px;

  /* Motion */
  --ease:cubic-bezier(.22,.72,.28,1);
  --t-fast:.16s;
  --t:.24s;

  /* Elevation */

  /* ── چینەکانی شووشە و قووڵایی ── */
  /* ڕووکەشە کاڵەکان — شووشە تەنها لە سەرەوە و مۆداڵ */
  /* ڕووکەشی ڕەق بۆ کارتەکان — قووڵایی لە ڕوونایی، نەک لە کاڵی */
  --card-1:#15181c;
  --card-2:#191d22;
  --card-3:#1e2429;
  --inner:rgba(255,255,255,.024);
  --edge:rgba(255,255,255,.055);
  --edge-2:rgba(255,255,255,.09);
  --lift-in:inset 0 1px 0 rgba(255,255,255,.045);
  --lift-in-2:inset 0 1px 0 rgba(255,255,255,.07);
  --blur-lg:blur(24px) saturate(1.2);

  /* ظلال بنفسجية-محايدة داكنة، لا سوداء مصمتة */
  --d-1:var(--lift-in),
        0 1px 2px rgba(6,8,10,.5),
        0 4px 10px rgba(6,8,10,.28);
  --d-2:var(--lift-in-2),
        0 1px 2px rgba(6,8,10,.55),
        0 6px 16px rgba(6,8,10,.32),
        0 18px 40px rgba(6,8,10,.2);
  --d-3:var(--lift-in-2),
        0 1px 2px rgba(6,8,10,.6),
        0 10px 24px rgba(6,8,10,.38),
        0 30px 70px rgba(6,8,10,.28),
        0 50px 110px rgba(6,8,10,.16);
  --gold-glow:0 0 0 1px rgba(184,149,47,.18);

  /* Rhythm — سیستەمی بۆشایی */
  --gut:22px;
  --sec-y:88px;
  --sp-1:6px;
  --sp-2:10px;
  --sp-3:16px;
  --sp-4:24px;
  --sp-5:40px;
}

/* ─── 03 · RESET / BASE ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  background-image:radial-gradient(ellipse 120% 80% at 50% -10%,#12171c 0%,transparent 60%);
  background-attachment:fixed;
  color:var(--tx);
  font-family:"Shasenem Kurd","Vazirmatn",system-ui,sans-serif;
  font-weight:600;
  font-size:16px;
  line-height:1.9;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1;
}
body.is-locked{overflow:hidden}
h1,h2,h3,h4{font-weight:900;line-height:1.48;letter-spacing:-.25px}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select{font-family:inherit;font-size:inherit;color:inherit}
svg{display:block;flex:none}
ul,ol{list-style:none}
::selection{background:var(--gold);color:#0e0b03}
:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px;border-radius:6px}

/* ─── 04 · UTILITIES ─── */
.num{font-variant-numeric:tabular-nums;unicode-bidi:isolate}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:50%;top:-60px;transform:translateX(50%);z-index:300;
  padding:11px 20px;border-radius:0 0 var(--r-sm) var(--r-sm);
  background:var(--gold);color:#0e0b03;font-size:14px;font-weight:900;
  transition:top var(--t) var(--ease)}
.skip:focus{top:0}
.wrap{position:relative;z-index:3;width:100%;max-width:1160px;
  margin-inline:auto;padding-inline:var(--gut)}

/* ─── 05 · AMBIENT ─── */
.amb{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
.amb i{position:absolute;display:block;border-radius:50%;filter:blur(150px)}
.amb .a{width:660px;height:660px;background:#19212a;opacity:.5;top:-330px;right:-260px}
.amb .b{width:480px;height:480px;background:#231e11;opacity:.2;bottom:-320px;left:-260px}

/* تۆڕی تەکنیکی — بۆ قووڵایی، نەک ڕازاندنەوە */
.amb::before{content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.017) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.017) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);
  background-size:40px 40px,40px 40px,200px 200px,200px 200px;
  mask-image:radial-gradient(ellipse 96% 66% at 50% 4%,#000 10%,transparent 84%);
  -webkit-mask-image:radial-gradient(ellipse 96% 66% at 50% 4%,#000 10%,transparent 84%)}

/* هێڵی داتای ئەبستراکت — زۆر کاڵ */
.amb::after{content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(66deg,transparent 41.92%,rgba(184,149,47,.05) 42%,transparent 42.1%),
    linear-gradient(74deg,transparent 55.93%,rgba(184,149,47,.03) 56%,transparent 56.09%),
    linear-gradient(-58deg,transparent 33.92%,rgba(132,150,164,.045) 34%,transparent 34.1%),
    linear-gradient(-71deg,transparent 68.94%,rgba(132,150,164,.028) 69%,transparent 69.08%),
    radial-gradient(circle at 78% 16%,rgba(184,149,47,.055) 0 1.5px,transparent 2px),
    radial-gradient(circle at 24% 63%,rgba(132,150,164,.05) 0 1.5px,transparent 2px),
    radial-gradient(circle at 61% 78%,rgba(132,150,164,.04) 0 1.5px,transparent 2px);
  mask-image:radial-gradient(ellipse 84% 74% at 58% 20%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 84% 74% at 58% 20%,#000,transparent 78%)}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.026;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ─── 06 · NAVBAR ─── */
.hdr{position:sticky;top:0;z-index:80;
  background:rgba(11,13,15,.62);
  backdrop-filter:var(--blur-lg);
  -webkit-backdrop-filter:blur(24px) saturate(1.2);
  border-bottom:1px solid var(--edge);
  box-shadow:var(--lift-in), 0 8px 28px rgba(0,0,0,.34)}
.nav{display:flex;align-items:center;gap:14px;height:68px}
.logo{display:flex;align-items:center;gap:9px;white-space:nowrap;
  direction:ltr;unicode-bidi:isolate;
  font-family:"Vazirmatn",sans-serif;font-weight:900;font-size:22px;letter-spacing:-.55px}
.logo .mk{width:8px;height:8px;flex:none;border-radius:2px;background:var(--gold)}
.logo b{color:var(--tx-3);font-size:13.5px;font-weight:700}
.nav-links{display:flex;gap:2px;margin-inline-start:auto;font-size:14px;font-weight:800}
.nav-links a{display:block;padding:8px 14px;border-radius:var(--r-sm);color:var(--tx-2);
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.nav-links a:hover{color:var(--tx);background:var(--sf-2)}
.nav-links a[aria-current="true"]{color:var(--tx);background:transparent;
  box-shadow:inset 0 -1px 0 var(--gold)}
.nav-act{display:flex;align-items:center;gap:10px;margin-inline-start:14px}

.burger{display:none;width:42px;height:42px;flex:none;border-radius:var(--r-sm);
  border:1px solid var(--edge);background:rgba(255,255,255,.04);
  box-shadow:var(--lift-in), 0 1px 2px rgba(6,8,10,.4), 0 4px 10px rgba(6,8,10,.24);
  align-items:center;justify-content:center}
.burger:active{background:var(--sf-2)}
.burger i{display:block;width:16px;height:1.7px;position:relative;background:var(--tx);
  transition:background var(--t-fast) var(--ease)}
.burger i::before,.burger i::after{content:"";position:absolute;inset-inline-end:0;
  width:16px;height:1.7px;background:var(--tx);
  transition:transform var(--t) var(--ease),top var(--t) var(--ease)}
.burger i::before{top:-5.5px} .burger i::after{top:5.5px}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg)}

.scrim{position:fixed;inset:68px 0 0;z-index:78;background:rgba(6,8,9,.62);
  opacity:0;visibility:hidden;transition:opacity var(--t) var(--ease),visibility var(--t)}
.scrim.on{opacity:1;visibility:visible}
.drawer{position:fixed;inset-block-start:68px;inset-inline:0;z-index:79;
  padding-bottom:8px;
  background:rgba(13,16,19,.82);
  backdrop-filter:var(--blur-lg);-webkit-backdrop-filter:blur(24px) saturate(1.2);
  border-bottom:1px solid var(--edge);
  box-shadow:var(--lift-in), 0 18px 46px rgba(0,0,0,.5);
  transform:translateY(-12px);opacity:0;visibility:hidden;
  transition:transform var(--t) var(--ease),opacity var(--t) var(--ease),visibility var(--t)}
.drawer.open{transform:translateY(0);opacity:1;visibility:visible}
.drawer a{display:flex;align-items:center;gap:12px;min-height:54px;
  padding:14px var(--gut);font-size:16px;font-weight:800;
  border-bottom:1px solid var(--line)}
.drawer a svg{width:15px;height:15px;stroke:var(--tx-3);fill:none;stroke-width:2;
  margin-inline-start:auto;transform:scaleX(-1)}
.drawer a:active{background:var(--sf-1)}
.drawer .cta{margin:12px var(--gut) 4px;border-bottom:0;border-radius:var(--r-sm);
  justify-content:center;background:var(--gold);color:#0e0b03}
.drawer .cta svg{display:none}

/* ─── 07 · BUTTONS ─── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:12px 22px;border-radius:var(--r-sm);
  font-size:14px;font-weight:900;white-space:nowrap;text-align:center;
  transition:transform var(--t-fast) var(--ease),background var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
             opacity var(--t-fast) var(--ease)}
.btn--gold{background:var(--gold);color:#0e0b03;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),
             inset 0 -1px 0 rgba(0,0,0,.22),
             0 2px 6px rgba(0,0,0,.36),
             0 8px 22px rgba(184,149,47,.16)}
.btn--gold:hover{background:var(--gold-2);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.36),
             inset 0 -1px 0 rgba(0,0,0,.2),
             0 3px 9px rgba(0,0,0,.38),
             0 12px 30px rgba(184,149,47,.22)}
.btn--gold:active{transform:translateY(0);background:var(--gold)}
.btn--line{border:1px solid var(--edge-2);color:var(--tx);
  background:rgba(255,255,255,.035);
  box-shadow:var(--lift-in), 0 1px 2px rgba(6,8,10,.4), 0 4px 10px rgba(6,8,10,.24)}
.btn--line:hover{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.065);
  transform:translateY(-1px);box-shadow:var(--lift-in-2), 0 6px 18px rgba(0,0,0,.32)}
.btn--line:active{transform:translateY(0)}
.btn--lg{min-height:52px;padding:15px 30px;font-size:15px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* ─── 08 · HERO ─── */
.hero{padding:76px 0 84px;display:grid;
  grid-template-columns:1.03fr .97fr;
  grid-template-areas:"copy player" "stats player";
  grid-template-rows:auto auto;
  column-gap:56px;row-gap:0;align-content:center}
.hero-copy{grid-area:copy;align-self:end}
.hero .player{grid-area:player;align-self:center}
.hero .stats{grid-area:stats;align-self:start}
.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:99px;
  font-size:12px;font-weight:800;letter-spacing:.3px;color:var(--tx-2);
  border:1px solid var(--line);background:var(--sf-1)}
.eyebrow i{width:5px;height:5px;flex:none;border-radius:50%;background:var(--gold)}
.hero h1{font-size:clamp(35px,5.9vw,62px);font-weight:900;line-height:1.28;
  margin:22px 0 18px;letter-spacing:-1.4px;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--gold-2)}
.lg-br{display:inline}
.hero .lead{max-width:41ch;color:var(--tx-2);font-size:16px;font-weight:600;line-height:1.9}
.hero-cta{display:flex;gap:11px;margin-top:var(--sp-4);flex-wrap:wrap}
.hero-notes{display:flex;flex-wrap:wrap;gap:9px 24px;margin-top:26px}
.hero-notes li{display:flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;color:var(--tx-3)}
.hero-notes li::before{content:"";width:14px;height:14px;flex:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f7982' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat}

/* ─── 08b · HERO STATS ─── */
.stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;
  margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.stats div{padding-inline-end:34px;margin-inline-end:34px;
  border-inline-end:1px solid var(--edge)}
.stats div:last-child{padding-inline-end:0;margin-inline-end:0;border-inline-end:0}
.stats b{display:block;font-size:30px;font-weight:900;letter-spacing:-1.2px;
  line-height:1.2;color:var(--tx)}
.stats span{display:block;margin-top:4px;
  font-size:11.5px;font-weight:700;letter-spacing:.2px;color:var(--tx-3);line-height:1.5}

/* ─── 09 · PLAYER PANEL ─── */
.player{background:var(--card-2);border:1px solid var(--edge-2);border-radius:var(--r-lg);
  backdrop-filter:var(--blur-lg);-webkit-backdrop-filter:blur(24px) saturate(1.2);
  box-shadow:var(--d-3);overflow:hidden;position:relative}
/* انعکاسی ڕوونایی لەسەر لێواری سەرەوە */
.player::before{content:"";position:absolute;inset-block-start:0;inset-inline:14%;
  height:1px;z-index:4;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent)}
.player-hd{display:flex;align-items:center;gap:11px;padding:15px var(--sp-3);
  border-bottom:1px solid var(--edge);background:rgba(255,255,255,.042);
  box-shadow:var(--lift-in-2)}
.player-hd .mk{width:28px;height:28px;flex:none;border-radius:var(--r-xs);
  display:grid;place-items:center;background:var(--sf-3)}
.player-hd .mk svg{width:14px;height:14px;stroke:var(--gold-2);fill:none;stroke-width:1.9}
.player-hd .tt{min-width:0}
.player-hd .tt b{display:block;font-size:13.5px;font-weight:900;line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-hd .tt small{display:block;font-size:11px;font-weight:700;color:var(--tx-3);line-height:1.5}
.player-hd .chip{margin-inline-start:auto;flex:none;padding:3px 10px;border-radius:99px;
  font-size:11px;font-weight:800;color:var(--tx-3);border:1px solid var(--line)}

.stage{aspect-ratio:16/10;position:relative;display:grid;place-items:center;
  background:#0e1115;border-bottom:1px solid var(--edge);
  box-shadow:inset 0 14px 40px rgba(6,8,10,.62), inset 0 -6px 20px rgba(6,8,10,.4)}
.stage::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000,transparent 78%)}
.play{width:56px;height:56px;border-radius:50%;position:relative;z-index:2;
  display:grid;place-items:center;
  border:1px solid var(--edge-2);background:#232a30;
  box-shadow:var(--lift-in-2), 0 6px 18px rgba(0,0,0,.42);
  transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),
             background var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.play:hover{border-color:rgba(184,149,47,.5);background:#2a323a;
  box-shadow:var(--lift-in-2), var(--gold-glow), 0 8px 22px rgba(6,8,10,.5)}
.play:active{box-shadow:inset 0 2px 6px rgba(6,8,10,.6)}
.play .ico{width:0;height:0;margin-inline-end:3px;
  border-block:8px solid transparent;border-inline-end:13px solid var(--gold-2)}
.play[data-on="1"] .ico{width:12px;height:14px;margin:0;border:0;
  border-inline-start:4px solid var(--gold-2);border-inline-end:4px solid var(--gold-2);
  background:none}
.stage-time{position:absolute;inset-block-end:12px;inset-inline-start:12px;z-index:2;
  padding:3px 9px;border-radius:6px;background:rgba(11,13,15,.72);
  font-size:11px;font-weight:800;color:var(--tx-2)}
.scrub{position:absolute;inset-block-end:0;inset-inline:0;height:3px;z-index:2;
  background:rgba(255,255,255,.07)}
.scrub i{display:block;height:100%;width:38%;background:var(--gold);
  transition:width 1s linear}

.player-list{padding:var(--sp-1);background:var(--inner)}
.lrow{display:flex;align-items:center;gap:12px;width:100%;padding:11px var(--sp-2);
  border-radius:var(--r-sm);text-align:start;
  transition:background var(--t-fast) var(--ease)}
.lrow:hover{background:var(--sf-2)}
.lrow[data-st="now"]{background:rgba(255,255,255,.05);
  box-shadow:inset 2px 0 0 var(--gold), var(--lift-in)}
.lrow .ix{width:26px;height:26px;flex:none;border-radius:var(--r-xs);
  display:grid;place-items:center;
  font-size:11px;font-weight:900;background:var(--sf-3);color:var(--tx-3)}
.lrow[data-st="done"] .ix{color:var(--steel)}
.lrow[data-st="now"] .ix{background:var(--gold);color:#0e0b03}
.lrow .nm{font-size:13.5px;font-weight:700;color:var(--tx-2);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow[data-st="now"] .nm{color:var(--tx);font-weight:800}
.lrow .tm{margin-inline-start:auto;flex:none;
  font-size:11.5px;font-weight:700;color:var(--tx-3)}
.player-ft{display:flex;align-items:center;gap:12px;padding:14px var(--sp-3);
  border-top:1px solid var(--edge);background:rgba(255,255,255,.042)}
.player-ft .pct{font-size:12px;font-weight:900;color:var(--tx-2)}
.track{flex:1;height:3px;border-radius:99px;overflow:hidden;
  background:rgba(6,8,10,.55);box-shadow:inset 0 1px 2px rgba(6,8,10,.6)}
.track i{display:block;height:100%;width:0;background:var(--gold);
  transition:width 1.3s var(--ease)}

/* ─── 10 · SECTIONS ─── */
.sec{padding:var(--sec-y) 0;position:relative;z-index:3;scroll-margin-top:80px}
.sec-hd{max-width:610px;margin-bottom:var(--sp-5)}
.sec-hd .kick{display:block;margin-bottom:12px;
  font-size:11.5px;font-weight:900;letter-spacing:1.9px;color:var(--gold)}
.sec-hd h2{font-size:clamp(25px,3.3vw,34px);margin-bottom:11px;letter-spacing:-.5px}
.sec-hd p{color:var(--tx-2);font-size:15px;font-weight:600}

/* ─── 11 · CATEGORIES ─── */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cat{display:flex;align-items:center;gap:14px;min-height:74px;padding:16px 17px;
  border-radius:var(--r);background:var(--card-1);
  border:1px solid var(--edge);box-shadow:var(--d-1);
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease),
             box-shadow var(--t) var(--ease),transform var(--t) var(--ease)}
.cat:hover{border-color:var(--edge-2);background:var(--card-2);
  box-shadow:var(--d-2);transform:translateY(-2px)}
.cat .cnt{margin-inline-start:auto;flex:none;font-size:12px;font-weight:800;color:var(--tx-3)}
.cat .ic{width:36px;height:36px;flex:none;border-radius:var(--r-sm);
  display:grid;place-items:center;
  background:rgba(255,255,255,.055);box-shadow:var(--lift-in);
  transition:background var(--t) var(--ease)}
.cat .ic svg{width:16px;height:16px;stroke:var(--gold-2);fill:none;stroke-width:1.75;
  transition:stroke var(--t) var(--ease)}
.cat:hover .ic{background:rgba(255,255,255,.075)}
.cat:hover .ic svg{stroke:var(--gold)}
.cat .tx{min-width:0}
.cat .tx b{display:block;font-size:14.5px;font-weight:900;line-height:1.5}
.cat .tx small{display:block;font-size:12px;font-weight:700;color:var(--tx-3);line-height:1.6}
.cat .go{width:15px;height:15px;stroke:var(--tx-3);fill:none;stroke-width:2;
  opacity:.5;transition:stroke var(--t) var(--ease),opacity var(--t) var(--ease),
  transform var(--t) var(--ease)}
.cat:hover .go{stroke:var(--gold-2);opacity:1;transform:translateX(-2px)}

/* ─── 12 · COURSES ─── */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.course{display:flex;flex-direction:column;height:100%;
  border-radius:var(--r-lg);overflow:hidden;
  background:var(--card-2);border:1px solid var(--edge);
  box-shadow:var(--d-2);
  transition:border-color var(--t) var(--ease),transform var(--t) var(--ease),
             box-shadow var(--t) var(--ease),background var(--t) var(--ease)}
.course{position:relative}
.course::before{content:"";position:absolute;inset-block-start:0;inset-inline:18%;
  height:1px;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
  transition:opacity var(--t) var(--ease)}
.course:hover::before{opacity:1}
.course:hover{border-color:var(--edge-2);background:var(--card-3);
  transform:translateY(-2px);box-shadow:var(--d-3)}
.course:focus-within{border-color:var(--line-2)}
.course-hd{display:flex;align-items:flex-start;gap:12px;padding:18px 18px 0}
.course-mk{width:42px;height:42px;flex:none;border-radius:11px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.055);box-shadow:var(--lift-in)}
.course-mk svg{width:19px;height:19px;stroke:var(--gold-2);fill:none;stroke-width:1.75}
.course-tag{margin-inline-start:auto;flex:none;padding:4px 10px;border-radius:6px;
  font-size:10.5px;font-weight:900;letter-spacing:.2px;
  color:var(--tx-2);border:1px solid var(--line-2)}
.course-tag[data-t="gold"]{color:var(--gold-2);border-color:var(--gold-ghost);
  background:var(--gold-ghost)}
.course-tag[data-t="steel"]{color:var(--steel);border-color:var(--steel-ghost);
  background:var(--steel-ghost)}
.course-bd{display:flex;flex-direction:column;flex:1;padding:15px 18px 18px}
.course-bd h3{font-size:17.5px;line-height:1.46;margin-bottom:7px;letter-spacing:-.35px}
.course-by{display:flex;align-items:center;gap:8px;margin-bottom:15px;
  font-size:12.5px;font-weight:700;color:var(--tx-3)}
.course-by i{width:22px;height:22px;flex:none;border-radius:50%;
  display:grid;place-items:center;font-style:normal;
  font-size:10px;font-weight:900;background:var(--sf-3);color:var(--tx-2)}
.course-cat{display:block;margin-bottom:9px;
  font-size:10.5px;font-weight:800;letter-spacing:1.3px;color:var(--gold)}
.facts{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;
  margin-bottom:var(--sp-3);min-width:0}
.facts>div{display:flex;align-items:baseline;gap:5px;min-width:0}
.facts>div+div::before{content:"";width:3px;height:3px;border-radius:50%;
  background:var(--line-2);margin-inline-end:10px;flex:none;align-self:center}
.facts dt{font-size:11.5px;font-weight:700;color:var(--tx-3);line-height:1.7}
.facts dd{font-size:12.5px;font-weight:800;color:var(--tx-2);line-height:1.7;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.course-ft{display:flex;align-items:flex-end;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:var(--sp-3);
  border-top:1px solid var(--line)}
.price{display:flex;flex-direction:column;min-width:0}
.price .was{font-size:11px;font-weight:700;color:var(--tx-3);
  text-decoration:line-through;line-height:1.5}
.price .amt{font-size:19px;font-weight:900;letter-spacing:-.9px;line-height:1.15;
  white-space:nowrap;color:var(--tx-2)}
.price .cur{font-size:10.5px;font-weight:800;letter-spacing:.6px;color:var(--tx-3);
  line-height:1.6;margin-top:1px}
.price.is-free .amt{font-size:16px;letter-spacing:-.4px;color:var(--steel)}
.course-btn{flex:none;min-height:42px;padding:10px 18px;border-radius:var(--r-sm);
  font-size:13px;font-weight:900;
  background:rgba(255,255,255,.05);color:var(--tx);border:1px solid var(--edge-2);
  box-shadow:var(--lift-in), 0 2px 6px rgba(0,0,0,.26);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.course:hover .course-btn,
.course-btn:hover,
.course-btn:focus-visible{background:var(--gold);color:#0e0b03;border-color:var(--gold)}
.course-btn:active{background:var(--gold-2)}

#freeGrid .course{border-color:var(--steel-ghost)}
#freeGrid .course:hover{border-color:rgba(132,150,164,.34)}
#freeGrid .course-mk{background:var(--steel-ghost)}
#freeGrid .course-mk svg{stroke:var(--steel)}
#freeGrid .course-cat{color:var(--steel)}

/* ─── 13 · PATHS ─── */
.paths{display:grid;gap:14px}
.path{display:grid;grid-template-columns:256px 1fr;
  border:1px solid var(--edge);border-radius:var(--r-lg);background:var(--card-1);
  box-shadow:var(--d-2)}
.path-steps{background:var(--inner)}
.path-side{display:flex;flex-direction:column;padding:24px;
  border-inline-end:1px solid var(--edge)}
.path-side .no{display:block;margin-bottom:10px;
  font-size:30px;font-weight:900;letter-spacing:-1.5px;line-height:1;
  color:var(--gold-ghost);-webkit-text-stroke:0}
.path-side h3{font-size:19px;margin-bottom:6px;letter-spacing:-.5px}
.path-side .dur{margin-bottom:10px;font-size:11.5px;font-weight:800;
  letter-spacing:.4px;color:var(--tx-3)}
.path-side p{font-size:13px;font-weight:600;color:var(--tx-3);line-height:1.75}
.path-side .out{display:flex;align-items:flex-start;gap:8px;
  margin-top:auto;padding-top:16px;
  font-size:12.5px;font-weight:800;color:var(--steel);line-height:1.7}
.path-side .out::before{content:"";width:14px;height:14px;flex:none;margin-top:5px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238496a4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;transform:scaleX(-1)}
.path-steps{display:flex;flex-direction:column;justify-content:center;padding:22px 24px}
.pstep{display:flex;align-items:flex-start;gap:14px;padding:9px 0;position:relative}
.pstep .bullet{width:28px;flex:none;position:relative;z-index:2;padding-top:2px;
  font-size:11px;font-weight:900;letter-spacing:.4px;color:var(--tx-3)}
.pstep:first-child .bullet{color:var(--gold-2)}
.pstep:last-child .bullet{color:var(--steel)}
.pstep::after{content:"";position:absolute;top:30px;bottom:-9px;
  inset-inline-start:5px;width:1px;background:var(--line)}
.pstep:last-child::after{display:none}
.pstep .lb b{display:block;font-size:14px;font-weight:800;line-height:1.6}
.pstep .lb small{display:block;font-size:12px;font-weight:600;color:var(--tx-3);line-height:1.7}

/* ─── 14 · FREE ─── */
.free-lead{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
  margin-bottom:16px;padding:22px 24px;border-radius:var(--r-lg);
  background:var(--card-1);border:1px solid var(--edge);
  box-shadow:var(--d-1)}
.free-lead p{font-size:14.5px;font-weight:700;color:var(--tx-2);line-height:1.8}
.free-lead p b{color:var(--tx);font-weight:900}

/* ─── 15 · INSTRUCTORS ─── */
.tutors{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tutor{display:flex;align-items:flex-start;gap:14px;padding:18px;
  border-radius:var(--r);background:var(--card-1);border:1px solid var(--edge);
  box-shadow:var(--d-1);
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease),
             box-shadow var(--t) var(--ease)}
.tutor:hover{border-color:var(--edge-2);background:var(--card-2);box-shadow:var(--d-2)}
.avatar{width:44px;height:44px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  font-size:15px;font-weight:900;letter-spacing:-.5px;
  background:rgba(255,255,255,.055);color:var(--gold-2);border:1px solid var(--edge);
  box-shadow:var(--lift-in-2), 0 3px 10px rgba(0,0,0,.3)}
.avatar--lg{width:48px;height:48px;font-size:16px}
.tutor .tx{min-width:0}
.tutor .tx b{display:block;font-size:14.5px;font-weight:900;line-height:1.5}
.tutor .tx small{display:block;font-size:12px;font-weight:700;color:var(--tx-3);line-height:1.65}
.tutor .tx em{display:block;margin-top:7px;font-style:normal;
  font-size:11.5px;font-weight:700;color:var(--steel)}
.tutor{padding:17px}

/* ─── 16 · FOOTER ─── */
.ftr{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:38px 0;position:relative;z-index:3;border-top:1px solid var(--line);
  color:var(--tx-3);font-size:13px;font-weight:700}

/* ─── 17 · CHECKOUT ─── */
.flow{position:fixed;inset:0;z-index:200;overflow-y:auto;background:var(--bg);
  background-image:radial-gradient(ellipse 110% 60% at 50% -6%,#12171c 0%,transparent 62%);
  opacity:0;visibility:hidden;
  transition:opacity var(--t) var(--ease),visibility var(--t)}
.flow.on{opacity:1;visibility:visible}
.flow-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:13px;
  height:64px;padding-inline:var(--gut);border-bottom:1px solid var(--line);
  background:rgba(11,13,15,.78);
  backdrop-filter:var(--blur-lg);-webkit-backdrop-filter:blur(24px) saturate(1.2);
  box-shadow:var(--lift-in), 0 8px 26px rgba(0,0,0,.34)}
.flow-bar .ttl{min-width:0;font-size:14px;font-weight:900;color:var(--tx-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icon-btn{width:40px;height:40px;flex:none;border-radius:var(--r-sm);
  display:grid;place-items:center;
  border:1px solid var(--edge);background:rgba(255,255,255,.04);
  box-shadow:var(--lift-in), 0 1px 2px rgba(6,8,10,.4), 0 4px 10px rgba(6,8,10,.24);
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.icon-btn:hover{border-color:var(--edge-2);background:rgba(255,255,255,.075)}
.icon-btn svg{width:15px;height:15px;stroke:var(--tx);fill:none;stroke-width:2.2}
.flow-bar .icon-btn:last-child{margin-inline-start:auto}
.flow-in{max-width:880px;margin-inline:auto;padding:34px var(--gut) 80px}

.stepper{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;
  margin-bottom:34px}
.stp{display:flex;align-items:center;gap:9px;min-width:0;
  font-size:12px;font-weight:800;color:var(--tx-3)}
.stp b{width:24px;height:24px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  font-size:10.5px;font-weight:900;border:1px solid var(--line-2)}
.stp span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stp[data-s="done"]{color:var(--tx-2)}
.stp[data-s="done"] b{color:var(--steel);border-color:var(--steel-ghost);
  background:var(--steel-ghost)}
.stp[data-s="now"]{color:var(--tx)}
.stp[data-s="now"] b{background:var(--gold);border-color:var(--gold);color:#0e0b03}
.stepper .ln{width:36px;height:1px;flex:none;margin-inline:10px;background:var(--line)}

.pane{display:none}
.pane.on{display:block;animation:paneIn .32s var(--ease) both}
@keyframes paneIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.pane:focus{outline:none}
.pane-hd{margin-bottom:24px}
.pane-hd h2{font-size:clamp(22px,3.6vw,29px);margin-bottom:8px;letter-spacing:-.5px}
.pane-hd p{color:var(--tx-2);font-size:14.5px;font-weight:600}

.cols{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;align-items:start}
.card{padding:24px;border-radius:var(--r-lg);background:var(--card-2);
  border:1px solid var(--edge);box-shadow:var(--d-2)}
.card h4{margin-bottom:16px;font-size:11px;font-weight:900;letter-spacing:1.6px;color:var(--gold)}
.kv{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:11px 0;font-size:13.5px;border-top:1px solid var(--line)}
.kv:first-of-type{border-top:0;padding-top:0}
.kv span{flex:none;color:var(--tx-3);font-weight:700}
.kv b{font-weight:900;text-align:end;min-width:0}
.total{display:flex;justify-content:space-between;align-items:baseline;
  margin-top:15px;padding-top:16px;border-top:1px solid var(--line-2)}
.total span{font-size:12.5px;font-weight:700;color:var(--tx-3)}
.total b{font-size:20px;font-weight:900;color:var(--gold-2);letter-spacing:-.5px}
.who{display:flex;gap:13px;align-items:flex-start;margin-bottom:17px}
.who div{min-width:0}
.who b{display:block;font-size:15.5px;font-weight:900;line-height:1.5}
.who small{display:block;font-size:12px;font-weight:700;color:var(--tx-3);line-height:1.65}
.perks li{display:flex;gap:10px;padding:7px 0;font-size:13px;font-weight:700;color:var(--tx-2)}
.perks li::before{content:"";width:14px;height:14px;flex:none;margin-top:6px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238496a4' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat}
.actions{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.actions .btn{flex:1;min-width:152px}

.field{margin-bottom:15px}
.field label{display:block;margin-bottom:7px;font-size:12.5px;font-weight:800;color:var(--tx-2)}
.field input,.field select{width:100%;min-height:48px;padding:12px 14px;
  border-radius:var(--r-sm);font-size:14px;font-weight:700;
  background:rgba(255,255,255,.035);border:1px solid var(--edge);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.28);
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.field select{appearance:none;-webkit-appearance:none;padding-inline-start:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f7982' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:15px;background-position:left 14px center}
.field input::placeholder{color:var(--tx-3);font-weight:600}
.field input:focus,.field select:focus{outline:none;border-color:var(--line-2);background:var(--sf-3)}
.field .err{display:none;margin-top:6px;font-size:12px;font-weight:800;color:var(--gold-2)}
.field.invalid input{border-color:var(--gold-2)}
.field.invalid .err{display:block}
.note{padding:13px 15px;border-radius:var(--r-sm);line-height:1.75;
  background:var(--sf-2);border:1px solid var(--line);
  font-size:12.5px;font-weight:700;color:var(--tx-3)}
.note b{color:var(--tx-2);font-weight:900}

.paying{text-align:center;padding:52px 0}
.spinner{width:44px;height:44px;margin:0 auto 20px;border-radius:50%;
  border:2px solid var(--line-2);border-top-color:var(--gold);
  animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.paying p{color:var(--tx-2);font-size:14.5px;font-weight:800}
.paying small{display:block;margin-top:6px;font-size:12.5px;font-weight:700;color:var(--tx-3)}

.result{text-align:center;margin-bottom:32px}
.ring{width:142px;height:142px;margin:0 auto 22px;position:relative;
  display:grid;place-items:center}
.ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:6;stroke-linecap:round}
.ring .tr{stroke:rgba(255,255,255,.07)}
.ring .pr{stroke:var(--gold);stroke-dasharray:433;stroke-dashoffset:433;
  transition:stroke-dashoffset 1.3s var(--ease)}
.ring .val{position:relative;z-index:2;font-size:31px;font-weight:900;
  line-height:1;letter-spacing:-1.2px}
.ring .cap{position:relative;z-index:2;margin-top:6px;
  font-size:10.5px;font-weight:800;color:var(--tx-3)}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:99px;
  font-size:13px;font-weight:900;color:var(--steel);
  border:1px solid var(--steel-ghost);background:var(--steel-ghost)}
.result h2{font-size:clamp(23px,4vw,30px);margin:18px 0 9px;letter-spacing:-.5px}
.result p{color:var(--tx-2);font-size:14.5px;font-weight:600}

/* ─── 18 · MOTION ─── */
.rv{opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ─── 19 · RESPONSIVE ─── */
@media(max-width:1024px){
  :root{--sec-y:70px}
  .hero{grid-template-columns:1fr;
    grid-template-areas:"copy" "player" "stats";
    row-gap:40px;padding:48px 0 60px}
  .hero-copy,.hero .stats{align-self:auto}
  .cats,.grid,.tutors{grid-template-columns:repeat(2,1fr)}
  .path{grid-template-columns:216px 1fr}
}
@media(max-width:768px){
  .path{grid-template-columns:1fr}
  .path-side{border-inline-end:0;border-bottom:1px solid var(--line);padding-bottom:20px}
  .path-side .out{padding-top:14px}
  .path-steps{padding:18px 24px 22px}
  .free-lead{grid-template-columns:1fr}
  .free-lead .btn{width:100%}
}
@media(max-width:720px){
  :root{--gut:18px;--sec-y:56px}
  body{font-size:15.5px}
  .nav-links,.nav-act .btn{display:none}
  .burger{display:flex}
  .nav{gap:10px}
  .nav-act{margin-inline-start:auto}
  .hero{padding:32px 0 46px;gap:34px}
  .hero h1{font-size:29px;line-height:1.45;letter-spacing:-.5px}
  .hero .lead{font-size:15.5px}
  .hero-cta{flex-direction:column;gap:10px}
  .hero-cta .btn{width:100%}
  .hero-notes{gap:8px 18px;margin-top:22px}
  .hero-notes li{font-size:12px}
  .hero{row-gap:34px}
  .stats{margin-top:0;padding-top:24px;justify-content:stretch;
    grid-template-columns:repeat(3,1fr)}
  .stats div{padding-inline-end:12px;margin-inline-end:12px}
  .stats b{font-size:24px}
  .stats span{font-size:11px}
  .cats,.grid,.tutors{grid-template-columns:1fr}
  .sec-hd{margin-bottom:28px}
  .cols{grid-template-columns:1fr}
  .flow-in{padding:26px var(--gut) 60px}
  .stepper{margin-bottom:26px}
  .stepper .ln{width:12px;margin-inline:6px}
  .stp{font-size:11px;gap:7px}
  .stp b{width:22px;height:22px}
  .ring{width:124px;height:124px}
  .ring .val{font-size:27px}
  .actions{flex-direction:column-reverse}
  .actions .btn{width:100%}
  .ftr{flex-direction:column;align-items:flex-start;gap:8px}
}
@media(max-width:430px){
  .lg-br{display:none}
  .facts{gap:0 8px}
  .facts dt,.facts dd{font-size:11.5px}
  .facts>div+div::before{margin-inline-end:8px}
  .course-ft{align-items:center}
  .price .amt{font-size:19px}
  .player-hd .chip{display:none}
}
@media(max-width:400px){
  :root{--gut:15px}
  .hero h1{font-size:26px}
  .facts dd{font-size:11.5px}
  .stp span{display:none}
  .stp{gap:0}
  .stepper .ln{width:16px;margin-inline:5px}
  .course-ft{gap:10px}
  .course-btn{padding:10px 15px;font-size:12.5px}
  .stats b{font-size:21px;letter-spacing:-.9px}
  .stats div{padding-inline-end:9px;margin-inline-end:9px}
  .cat .cnt{display:none}
  .path-side .no{font-size:26px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}

/* ══════════ زیادکراوەکانی نسخەی زیندوو ══════════ */

/* ── دوگمەی هەژمار لە سەرەوە ── */
.acct{display:flex;align-items:center;gap:9px}
.acct .av{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:13px;font-weight:900;background:rgba(255,255,255,.055);color:var(--gold-2);
  border:1px solid var(--edge)}
.pop{position:absolute;inset-block-start:56px;inset-inline-end:0;z-index:90;min-width:220px;
  padding:8px;border-radius:var(--r);background:var(--card-2);
  border:1px solid var(--edge-2);box-shadow:var(--d-3);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t)}
.pop.on{opacity:1;visibility:visible;transform:none}
.pop .ph{padding:10px 12px;border-bottom:1px solid var(--edge);margin-bottom:6px}
.pop .ph b{display:block;font-size:14px;font-weight:900;line-height:1.5}
.pop .ph small{display:block;font-size:11.5px;font-weight:700;color:var(--tx-3);
  line-height:1.5;overflow:hidden;text-overflow:ellipsis}
.pop a,.pop button{display:block;width:100%;text-align:start;padding:10px 12px;
  border-radius:var(--r-sm);font-size:13.5px;font-weight:800;color:var(--tx-2);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.pop a:hover,.pop button:hover{background:rgba(255,255,255,.055);color:var(--tx)}
.nav{position:relative}

/* ── کارتی کۆرس: بەستەر ── */
.course-link{display:block;color:inherit}
.course-link:hover h3{color:var(--gold-2)}
.course-bd h3{transition:color var(--t) var(--ease)}

/* ── لاپەڕەی کۆرس ── */
.cpage{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start;
  padding:34px 0 76px}
.cmain{min-width:0}
.crumb{display:flex;align-items:center;gap:8px;margin-bottom:16px;
  font-size:12.5px;font-weight:700;color:var(--tx-3)}
.crumb a:hover{color:var(--tx-2)}
.crumb svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;
  transform:scaleX(-1)}
.cpage h1{font-size:clamp(25px,4vw,36px);letter-spacing:-.7px;margin-bottom:12px}
.cmeta{display:flex;flex-wrap:wrap;gap:8px 10px;margin-bottom:20px}
.cmeta span{font-size:12px;font-weight:800;padding:5px 11px;border-radius:7px;
  background:rgba(255,255,255,.045);border:1px solid var(--edge);color:var(--tx-2)}
.csum{color:var(--tx-2);font-size:15px;font-weight:600;line-height:1.95;margin-bottom:24px}

/* ── ژووری بینین ── */
.viewer{border-radius:var(--r-lg);overflow:hidden;background:var(--card-2);
  border:1px solid var(--edge-2);box-shadow:var(--d-3);margin-bottom:20px}
.frame{aspect-ratio:16/9;position:relative;background:#0b0d10;display:grid;place-items:center}
.frame iframe,.frame video{position:absolute;inset:0;width:100%;height:100%;border:0;
  background:#000;display:block}
.frame .lockmsg{text-align:center;padding:28px 22px;max-width:340px}
.frame .lockmsg svg{width:30px;height:30px;margin:0 auto 12px;stroke:var(--gold);
  fill:none;stroke-width:1.6}
.frame .lockmsg b{display:block;font-size:16px;font-weight:900;margin-bottom:6px}
.frame .lockmsg small{display:block;font-size:13px;font-weight:600;color:var(--tx-3);
  line-height:1.8;margin-bottom:16px}
.vbar{display:flex;align-items:center;gap:12px;padding:14px 16px;
  border-top:1px solid var(--edge);background:rgba(255,255,255,.03)}
.vbar b{font-size:14px;font-weight:900;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vbar .vd{margin-inline-start:auto;flex:none;font-size:12px;font-weight:800;color:var(--tx-3)}

/* ── ڕیزی وانەکان ── */
.clist{border-radius:var(--r-lg);overflow:hidden;background:var(--card-1);
  border:1px solid var(--edge);box-shadow:var(--d-2)}
.clist-hd{display:flex;align-items:center;gap:10px;padding:15px 17px;
  border-bottom:1px solid var(--edge);background:rgba(255,255,255,.035)}
.clist-hd b{font-size:14px;font-weight:900}
.clist-hd .n{margin-inline-start:auto;font-size:11.5px;font-weight:800;color:var(--tx-3)}
.clist-bd{padding:6px;max-height:420px;overflow-y:auto}
.li{display:flex;align-items:center;gap:11px;width:100%;padding:11px;
  border-radius:var(--r-sm);text-align:start;
  transition:background var(--t-fast) var(--ease)}
.li:hover{background:rgba(255,255,255,.04)}
.li[aria-current=true]{background:rgba(255,255,255,.055);
  box-shadow:inset 2px 0 0 var(--gold)}
.li .ix{width:26px;height:26px;flex:none;border-radius:7px;display:grid;place-items:center;
  font-size:11px;font-weight:900;background:rgba(255,255,255,.055);color:var(--tx-3)}
.li[aria-current=true] .ix{background:var(--gold);color:#0e0b03}
.li.done .ix{color:var(--steel)}
.li .lt{min-width:0;flex:1}
.li .lt b{display:block;font-size:13.5px;font-weight:700;color:var(--tx-2);line-height:1.55;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li[aria-current=true] .lt b{color:var(--tx);font-weight:800}
.li .lt small{display:block;font-size:11px;font-weight:700;color:var(--tx-3);line-height:1.5}
.li .lk{flex:none;width:14px;height:14px;stroke:var(--tx-3);fill:none;stroke-width:2}
.li .free{flex:none;font-size:10.5px;font-weight:800;color:var(--steel);
  padding:2px 8px;border-radius:99px;border:1px solid var(--steel-ghost)}

/* ── پانێڵی نرخ ── */
.buy{position:sticky;top:88px;padding:22px;border-radius:var(--r-lg);
  background:var(--card-2);border:1px solid var(--edge-2);box-shadow:var(--d-2)}
.buy .p{margin-bottom:4px;font-size:30px;font-weight:900;letter-spacing:-1.3px;line-height:1.2}
.buy .was{font-size:12.5px;font-weight:700;color:var(--tx-3);text-decoration:line-through}
.buy .cur{margin-bottom:18px;font-size:11.5px;font-weight:800;color:var(--tx-3)}
.buy .btn{width:100%;margin-bottom:9px}
.buy ul{margin-top:18px;padding-top:16px;border-top:1px solid var(--edge)}
.buy li{display:flex;gap:10px;padding:6px 0;font-size:13px;font-weight:700;color:var(--tx-2)}
.buy li::before{content:"";width:14px;height:14px;flex:none;margin-top:5px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238496a4' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat}
.buy .tut{display:flex;gap:12px;align-items:center;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--edge)}
.buy .tut b{display:block;font-size:14px;font-weight:900;line-height:1.5}
.buy .tut small{display:block;font-size:11.5px;font-weight:700;color:var(--tx-3);line-height:1.5}

/* ── بارودۆخ ── */
.state{padding:60px 20px;text-align:center}
.state b{display:block;font-size:17px;font-weight:900;margin-bottom:6px}
.state small{display:block;font-size:14px;color:var(--tx-3)}
.sk{border-radius:var(--r-lg);background:var(--card-1);border:1px solid var(--edge);
  height:260px;animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}

@media(max-width:900px){
  .cpage{grid-template-columns:1fr;gap:18px;padding-top:24px}
  .buy{position:static}
}
@media(max-width:720px){
  .pop{inset-inline:auto 0;min-width:200px}
  .clist-bd{max-height:none}
}

/* ══════════ پاراستنی ڤیدیۆ ══════════ */
.vwrap{position:relative;width:100%;height:100%}
.vwrap video{width:100%;height:100%;display:block;background:#000}

/* نیشانەی ئاوی — ناوی بەشدار، دەجوڵێت */
.wm{position:absolute;z-index:5;pointer-events:none;user-select:none;
  font-family:"Vazirmatn",sans-serif;font-size:12px;font-weight:800;
  letter-spacing:.3px;line-height:1.5;white-space:nowrap;
  color:rgba(255,255,255,.34);
  text-shadow:0 1px 3px rgba(0,0,0,.9), 0 0 12px rgba(0,0,0,.7);
  transition:opacity .6s ease;mix-blend-mode:screen}
.wm span{display:block;font-size:10px;font-weight:700;color:rgba(255,255,255,.26)}
/* نیشانەیەکی هەمیشەیی لە گۆشە */
.wm-fixed{position:absolute;inset-block-start:10px;inset-inline-end:12px;z-index:5;
  pointer-events:none;user-select:none;
  font-size:10.5px;font-weight:800;color:rgba(255,255,255,.3);
  text-shadow:0 1px 3px rgba(0,0,0,.9)}

/* ڕێگری لە کێشانی ڤیدیۆ */
.vwrap video{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* شاردنەوە لە کاتی پرینت — دژی screenshot لە هەندێک وێبگەڕ */
@media print{.viewer,.vwrap{display:none!important}}

/* ══════════ وێنەی کۆرس ══════════ */
.course-cover{position:relative;aspect-ratio:16/9;overflow:hidden;
  background:var(--card-3);border-bottom:1px solid var(--edge)}
.course-cover img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s var(--ease)}
.course:hover .course-cover img{transform:scale(1.03)}
.course-cover::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(12,14,16,.55),transparent 55%)}
.course-cover + .course-hd{padding-top:14px}

/* وێنە لە لاپەڕەی کۆرس */
.cpage-cover{border-radius:var(--r-lg);overflow:hidden;margin-bottom:20px;
  border:1px solid var(--edge);box-shadow:var(--d-2)}
.cpage-cover img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}

/* ══════════ دوگمەی جۆرێتی ══════════ */
.q-btn{position:absolute;inset-block-end:14px;inset-inline-start:14px;z-index:6;
  padding:7px 13px;border-radius:8px;font-family:inherit;
  font-size:11.5px;font-weight:800;color:var(--tx);
  background:rgba(11,13,15,.82);border:1px solid var(--edge-2);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  cursor:pointer;transition:background .18s var(--ease),border-color .18s var(--ease)}
.q-btn:hover{background:rgba(11,13,15,.95);border-color:var(--gold)}
@media(max-width:520px){.q-btn{inset-block-end:10px;inset-inline-start:10px;
  padding:6px 11px;font-size:11px}}