/* ==================================================================
   آکادمی موسیقی کودک اسماعیل نیا — دیزاین سیستم
   RTL • Glassmorphism • 3D • Kids-friendly palette
   ================================================================== */

/* ---------------------------------------------- فونت ایران سنس (خود-میزبان)
   ترتیب woff2 → woff برای پشتیبانی کامل از سافاری iOS و مرورگرهای قدیمی تر */
@font-face {
  font-family: 'IRANSans';
  src: url('../fonts/IRANSansWeb_Light.woff2') format('woff2'),
       url('../fonts/IRANSansWeb_Light.woff')  format('woff');
  font-weight: 300; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'IRANSans';
  src: url('../fonts/IRANSansWeb.woff2') format('woff2'),
       url('../fonts/IRANSansWeb.woff')  format('woff');
  font-weight: 400; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'IRANSans';
  src: url('../fonts/IRANSansWeb_Medium.woff2') format('woff2'),
       url('../fonts/IRANSansWeb_Medium.woff')  format('woff');
  font-weight: 500; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'IRANSans';
  src: url('../fonts/IRANSansWeb_Bold.woff2') format('woff2'),
       url('../fonts/IRANSansWeb_Bold.woff')  format('woff');
  font-weight: 700; font-display: swap; font-style: normal;
}
/* ایران سنس وزن ۸۰۰ ندارد؛ به Bold نگاشت می شود تا سافاری فونت مصنوعی نسازد */
@font-face {
  font-family: 'IRANSans';
  src: url('../fonts/IRANSansWeb_Bold.woff2') format('woff2'),
       url('../fonts/IRANSansWeb_Bold.woff')  format('woff');
  font-weight: 800; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'IRANSans';
  src: url('../fonts/IRANSansWeb_Black.woff2') format('woff2'),
       url('../fonts/IRANSansWeb_Black.woff')  format('woff');
  font-weight: 900; font-display: swap; font-style: normal;
}

/* ================================================ توکن های طراحی */
:root {
  /* پالت اصلی — شاد، کودکانه اما حرفه ای */
  --violet-50:#f5f2ff; --violet-100:#ebe4ff; --violet-200:#d9ccff;
  --violet-300:#bda6ff; --violet-400:#9d7bff; --violet-500:#7c4dff;
  --violet-600:#6b32e8; --violet-700:#5722c4; --violet-800:#44189c;
  --violet-900:#2e1070;

  --pink-300:#ffa8d5; --pink-400:#ff7bc0; --pink-500:#f857a6; --pink-600:#e0348b;
  --amber-300:#ffd166; --amber-400:#ffc233; --amber-500:#ffae00;
  --teal-300:#6ee7d4; --teal-400:#2dd4bf; --teal-500:#14b8a6;
  --sky-300:#7dd3fc;  --sky-400:#38bdf8;  --sky-500:#0ea5e9;
  --coral-400:#ff8a6b; --coral-500:#ff6b45;
  --lime-400:#a3e635;

  /* معنایی */
  --brand:            var(--violet-500);
  --brand-strong:     var(--violet-700);
  --brand-soft:       var(--violet-100);
  --accent:           var(--pink-500);
  --accent-2:         var(--amber-400);
  --success:#16a34a; --success-bg:#dcfce7;
  --warning:#d97706; --warning-bg:#fef3c7;
  --danger:#dc2626;  --danger-bg:#fee2e2;
  --info:#0284c7;    --info-bg:#e0f2fe;

  /* سطوح */
  --bg:            #f7f5ff;
  --bg-2:          #ffffff;
  --surface:       rgba(255,255,255,.72);
  --surface-solid: #ffffff;
  --surface-2:     rgba(255,255,255,.55);
  --border:        rgba(124,77,255,.14);
  --border-strong: rgba(124,77,255,.28);

  /* متن */
  --text:      #241a3d;
  --text-2:    #574a75;
  --text-3:    #8b7fa8;
  --text-on:   #ffffff;

  /* سایه ها (احساس سه بعدی) */
  --sh-xs: 0 1px 2px rgba(45,20,110,.06);
  --sh-sm: 0 2px 8px rgba(45,20,110,.08);
  --sh:    0 8px 24px rgba(45,20,110,.10);
  --sh-lg: 0 18px 46px rgba(45,20,110,.16);
  --sh-xl: 0 30px 70px rgba(45,20,110,.22);
  --sh-brand: 0 12px 32px rgba(124,77,255,.32);
  --sh-inner: inset 0 1px 0 rgba(255,255,255,.7);

  /* گرادیان ها */
  --grad-brand: linear-gradient(135deg,#7c4dff 0%,#a855f7 45%,#f857a6 100%);
  --grad-warm:  linear-gradient(135deg,#ffae00 0%,#ff6b45 100%);
  --grad-cool:  linear-gradient(135deg,#0ea5e9 0%,#2dd4bf 100%);
  --grad-soft:  linear-gradient(160deg,#f5f2ff 0%,#fff0f8 100%);
  --grad-mesh:
      radial-gradient(at 12% 8%,  rgba(124,77,255,.24) 0px, transparent 55%),
      radial-gradient(at 88% 4%,  rgba(248,87,166,.20) 0px, transparent 50%),
      radial-gradient(at 78% 82%, rgba(255,174,0,.18)  0px, transparent 50%),
      radial-gradient(at 10% 92%, rgba(45,212,191,.18) 0px, transparent 50%);

  /* شعاع */
  --r-xs:8px; --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:34px; --r-full:999px;

  /* فاصله */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px;
  --sp-6:30px; --sp-7:40px; --sp-8:56px; --sp-9:76px; --sp-10:100px;

  --container: 1240px;
  --header-h: 76px;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
}

/* حالت تیره خودکار برای پنل ها (کلاس .dark) */
.dark {
  --bg:#14102a; --bg-2:#1b1638;
  --surface: rgba(38,30,72,.72);
  --surface-solid:#221c46;
  --surface-2: rgba(38,30,72,.5);
  --border: rgba(160,130,255,.18);
  --border-strong: rgba(160,130,255,.34);
  --text:#f2eeff; --text-2:#c3b8e8; --text-3:#8f83b8;
  --brand-soft: rgba(124,77,255,.18);
}

/* ================================================ ریست */
*,*::before,*::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--bg);
}
body {
  margin:0; direction:rtl; text-align:right;
  font-family:'IRANSans', 'Segoe UI', Tahoma, Arial, sans-serif;
  font-size:15px; line-height:2; color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  /* حاشیهٔ امن دستگاه های دارای ناچ (آیفون) */
  padding-inline:env(safe-area-inset-right) env(safe-area-inset-left);
}

/* لایهٔ پس زمینهٔ مِش — به جای background-attachment:fixed
   (سافاری iOS از fixed پشتیبانی نمی کند و در دسکتاپ باعث رنگ آمیزی مجدد
   کل صفحه در هر فریم اسکرول و لگ می شد) */
body::before {
  content:''; position:fixed; inset:0; z-index:-1;
  background-color:var(--bg);
  background-image:var(--grad-mesh);
  pointer-events:none;
}
img,svg,video { max-width:100%; height:auto; display:block; }
a { color:var(--brand-strong); text-decoration:none; transition:color .2s var(--ease); }
a:hover { color:var(--accent); }
h1,h2,h3,h4,h5 { margin:0 0 .6em; line-height:1.55; font-weight:800; color:var(--text); }
h1 { font-size:clamp(1.85rem,4.4vw,3.1rem); font-weight:900; letter-spacing:-.5px; }
h2 { font-size:clamp(1.45rem,3vw,2.15rem); }
h3 { font-size:clamp(1.15rem,2.2vw,1.5rem); }
p  { margin:0 0 1.1em; color:var(--text-2); }
ul,ol { padding-right:1.4em; margin:0 0 1.1em; }
button,input,select,textarea { font-family:inherit; font-size:inherit; color:inherit; }
button { cursor:pointer; border:none; background:none; }
table { border-collapse:collapse; width:100%; }
hr { border:none; border-top:1px solid var(--border); margin:var(--sp-6) 0; }
::selection { background:var(--violet-300); color:#fff; }
:focus-visible { outline:3px solid var(--violet-400); outline-offset:2px; border-radius:6px; }

/* اسکرول بار */
::-webkit-scrollbar { width:11px; height:11px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:linear-gradient(var(--violet-400),var(--pink-400)); border-radius:99px; border:3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background:linear-gradient(var(--violet-500),var(--pink-500)); }

/* ================================================ چیدمان */
.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:20px; }
.container-sm { max-width:860px; }
.section { padding:var(--sp-9) 0; position:relative; }
.section-sm { padding:var(--sp-7) 0; }
.grid { display:grid; gap:var(--sp-5); }
.g-2 { grid-template-columns:repeat(2,1fr); }
.g-3 { grid-template-columns:repeat(3,1fr); }
.g-4 { grid-template-columns:repeat(4,1fr); }
.g-auto { grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); }
.flex { display:flex; gap:var(--sp-3); }
.flex-center { display:flex; align-items:center; justify-content:center; }
.flex-between { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); }
.flex-wrap { flex-wrap:wrap; }
.items-center { align-items:center; }
.gap-2{gap:var(--sp-2)} .gap-3{gap:var(--sp-3)} .gap-4{gap:var(--sp-4)} .gap-5{gap:var(--sp-5)}
.text-center { text-align:center; }
.mt-0{margin-top:0} .mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)} .mt-5{margin-top:var(--sp-5)} .mt-6{margin-top:var(--sp-6)}
.mb-0{margin-bottom:0} .mb-2{margin-bottom:var(--sp-2)} .mb-3{margin-bottom:var(--sp-3)}
.mb-4{margin-bottom:var(--sp-4)} .mb-5{margin-bottom:var(--sp-5)} .mb-6{margin-bottom:var(--sp-6)}
.w-full{width:100%} .hidden{display:none!important}

/* ================================================ شیشه (Glass) */
.glass {
  background:var(--surface);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--sh), var(--sh-inner);
}
.glass-sm { background:var(--surface-2); backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%); border:1px solid var(--border); border-radius:var(--r); }
.glass-strong { background:rgba(255,255,255,.88); backdrop-filter:blur(30px) saturate(190%);
  -webkit-backdrop-filter:blur(30px) saturate(190%); border:1px solid var(--border-strong); }
.dark .glass-strong { background:rgba(34,28,70,.9); }

/* ================================================ کارت */
/* توجه: کارت ها در هر صفحه ده ها بار تکرار می شوند؛ backdrop-filter روی آن ها
   باعث لگ شدید اسکرول (به ویژه دسکتاپ) می شد. با پس زمینهٔ مات تر جایگزین شد. */
.card {
  background:rgba(255,255,255,.88);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:var(--sp-5);
  box-shadow:var(--sh), var(--sh-inner);
  transition:transform .38s var(--ease), box-shadow .38s var(--ease), border-color .3s;
  position:relative; overflow:hidden;
}
.dark .card { background:rgba(34,28,70,.9); }
.card::before {
  content:''; position:absolute; inset:0 0 auto; height:3px;
  background:var(--grad-brand); opacity:0; transition:opacity .35s;
}
.card:hover { transform:translateY(-7px); box-shadow:var(--sh-lg); border-color:var(--border-strong); }
.card:hover::before { opacity:1; }
.card-flat { box-shadow:var(--sh-sm); }
.card-flat:hover { transform:none; box-shadow:var(--sh); }
.card-solid { background:var(--surface-solid); }

/* ================================================ دکمه */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 26px; border-radius:var(--r-full);
  font-weight:700; font-size:.95rem; line-height:1;
  cursor:pointer; border:1px solid transparent; position:relative;
  transition:transform .25s var(--ease-bounce), box-shadow .3s var(--ease), background .25s, color .25s;
  white-space:nowrap; user-select:none;
}
.btn:active { transform:scale(.96); }
.btn-primary {
  background:var(--grad-brand); color:#fff;
  box-shadow:var(--sh-brand), var(--sh-inner);
}
.btn-primary:hover { color:#fff; transform:translateY(-3px); box-shadow:0 18px 40px rgba(124,77,255,.42); }
.btn-accent { background:var(--grad-warm); color:#fff; box-shadow:0 12px 30px rgba(255,107,69,.34); }
.btn-accent:hover { color:#fff; transform:translateY(-3px); }
.btn-cool { background:var(--grad-cool); color:#fff; box-shadow:0 12px 30px rgba(14,165,233,.3); }
.btn-cool:hover { color:#fff; transform:translateY(-3px); }
.btn-ghost {
  background:rgba(255,255,255,.86); color:var(--brand-strong);
  border-color:var(--border-strong);
}
.dark .btn-ghost { background:rgba(38,30,72,.7); }
.btn-ghost:hover { background:var(--brand-soft); transform:translateY(-3px); color:var(--brand-strong); }
.btn-white { background:#fff; color:var(--violet-700); box-shadow:var(--sh); }
.btn-white:hover { transform:translateY(-3px); color:var(--violet-800); }
.btn-danger { background:var(--danger); color:#fff; }
.btn-success { background:var(--success); color:#fff; }
.btn-sm { padding:8px 16px; font-size:.82rem; }
.btn-lg { padding:17px 38px; font-size:1.05rem; }
.btn-block { width:100%; }
.btn-icon { width:42px; height:42px; padding:0; border-radius:var(--r-sm); }
.btn:disabled,.btn.is-loading { opacity:.6; pointer-events:none; }
.btn.is-loading::after {
  content:''; width:15px; height:15px; border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ================================================ نشان ها */
.badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 13px; border-radius:var(--r-full);
  font-size:.76rem; font-weight:700; line-height:1.9;
  background:var(--brand-soft); color:var(--brand-strong);
}
.badge-accent  { background:#ffe4f3; color:var(--pink-600); }
.badge-success { background:var(--success-bg); color:var(--success); }
.badge-warning { background:var(--warning-bg); color:var(--warning); }
.badge-danger  { background:var(--danger-bg);  color:var(--danger); }
.badge-info    { background:var(--info-bg);    color:var(--info); }
.badge-glass   { background:rgba(255,255,255,.2); color:#fff; border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }

.chip {
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 16px; border-radius:var(--r-full);
  background:var(--surface); border:1px solid var(--border);
  font-size:.85rem; font-weight:600; color:var(--text-2);
  transition:all .25s var(--ease);
}
.chip:hover, .chip.active { background:var(--grad-brand); color:#fff; border-color:transparent;
  transform:translateY(-2px); box-shadow:var(--sh-brand); }

/* ================================================ هدر */
.site-header {
  position:sticky; top:0; z-index:900;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(24px) saturate(190%);
  -webkit-backdrop-filter:blur(24px) saturate(190%);
  border-bottom:1px solid var(--border);
  transition:box-shadow .3s, background .3s;
}
.site-header.scrolled { box-shadow:var(--sh); background:rgba(255,255,255,.9); }
.header-inner { display:flex; align-items:center; gap:var(--sp-4); height:var(--header-h); }
.logo { display:flex; align-items:center; gap:11px; font-weight:900; font-size:1.06rem; color:var(--violet-800); flex-shrink:0; }
.logo img,.logo svg { width:46px; height:46px; filter:drop-shadow(0 4px 10px rgba(124,77,255,.32)); }
.logo small { display:block; font-size:.66rem; font-weight:500; color:var(--text-3); letter-spacing:.2px; }
.nav { display:flex; align-items:center; gap:2px; margin-inline-start:auto; }
.nav a {
  padding:9px 15px; border-radius:var(--r-full);
  font-size:.9rem; font-weight:600; color:var(--text-2);
  transition:all .25s var(--ease); position:relative;
}
.nav a:hover { color:var(--brand-strong); background:var(--brand-soft); }
.nav a.active { color:#fff; background:var(--grad-brand); box-shadow:var(--sh-brand); }
.header-actions { display:flex; align-items:center; gap:9px; flex-shrink:0; }
.nav-toggle { display:none; width:44px; height:44px; border-radius:var(--r-sm);
  background:var(--brand-soft); color:var(--brand-strong); font-size:1.3rem; align-items:center; justify-content:center; }

/* منوی موبایل */
.mobile-nav {
  position:fixed; inset:var(--header-h) 0 auto; z-index:899;
  background:rgba(255,255,255,.97); backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
  padding:var(--sp-4) 20px var(--sp-6);
  transform:translateY(-120%); transition:transform .42s var(--ease);
  max-height:calc(100vh - var(--header-h)); overflow-y:auto;
  box-shadow:var(--sh-lg);
}
.mobile-nav.open { transform:translateY(0); }
.mobile-nav a { display:block; padding:14px 16px; border-radius:var(--r-sm);
  font-weight:600; color:var(--text); border-bottom:1px solid var(--border); }
.mobile-nav a:last-of-type { border-bottom:none; }
.mobile-nav a:hover,.mobile-nav a.active { background:var(--brand-soft); color:var(--brand-strong); }

/* ================================================ قهرمان (Hero) */
.hero { position:relative; padding:var(--sp-9) 0 var(--sp-10); overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:var(--sp-7); align-items:center; }
.hero h1 { margin-bottom:var(--sp-4); }
.hero h1 .grad { background:var(--grad-brand); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; }
.hero-lead { font-size:1.09rem; color:var(--text-2); max-width:56ch; margin-bottom:var(--sp-5); line-height:2.1; }
.hero-cta { display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-bottom:var(--sp-6); }
.hero-visual { position:relative; }

/* شکل های شناور سه بعدی */
/* will-change لایهٔ ترکیب بندی جدا می سازد تا محو (blur) در هر فریم دوباره محاسبه نشود */
.blob { position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; pointer-events:none; z-index:-1;
  will-change:transform; transform:translateZ(0); }
.blob-1 { width:420px; height:420px; background:var(--violet-400); top:-120px; right:-90px; animation:float1 18s ease-in-out infinite; }
.blob-2 { width:340px; height:340px; background:var(--pink-400); bottom:-110px; left:-70px; animation:float2 22s ease-in-out infinite; }
.blob-3 { width:260px; height:260px; background:var(--amber-400); top:44%; left:38%; opacity:.32; animation:float1 26s ease-in-out infinite reverse; }
@keyframes float1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-32px,34px) scale(1.12)} }
@keyframes float2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(38px,-28px) scale(1.08)} }

/* نت های موسیقی شناور */
.notes { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.note {
  position:absolute; font-size:26px; opacity:.16; color:var(--violet-500);
  animation:noteFloat 15s linear infinite;
}
@keyframes noteFloat {
  0%   { transform:translateY(105%) rotate(0deg); opacity:0; }
  12%  { opacity:.22; }
  88%  { opacity:.22; }
  100% { transform:translateY(-120%) rotate(340deg); opacity:0; }
}

/* کارت سه بعدی شناور */
.card-3d {
  transform-style:preserve-3d; perspective:1000px;
  transition:transform .5s var(--ease);
}
.card-3d-inner {
  transition:transform .5s var(--ease);
  transform:rotateY(-7deg) rotateX(4deg);
  box-shadow:var(--sh-xl);
  border-radius:var(--r-xl);
}
.card-3d:hover .card-3d-inner { transform:rotateY(0) rotateX(0) translateY(-8px); }

.float-anim { animation:floatY 5.5s ease-in-out infinite; }
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }
.float-anim-2 { animation:floatY 6.8s ease-in-out infinite .6s; }

/* ================================================ آمار */
.stats-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--sp-4); }
.stat {
  text-align:center; padding:var(--sp-5) var(--sp-3);
  background:rgba(255,255,255,.86);
  border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--sh-sm), var(--sh-inner);
  transition:transform .35s var(--ease-bounce), box-shadow .35s;
}
.dark .stat { background:rgba(34,28,70,.88); }
.stat:hover { transform:translateY(-8px) scale(1.03); box-shadow:var(--sh-lg); }
.stat-icon { font-size:2rem; margin-bottom:6px; display:block; filter:drop-shadow(0 4px 8px rgba(124,77,255,.25)); }
.stat-num { font-size:2.15rem; font-weight:900; line-height:1.2;
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat-label { font-size:.83rem; color:var(--text-3); font-weight:600; }

/* ================================================ عنوان بخش */
.sec-head { text-align:center; max-width:680px; margin:0 auto var(--sp-7); }
.sec-head .eyebrow {
  display:inline-block; padding:6px 18px; border-radius:var(--r-full);
  background:var(--brand-soft); color:var(--brand-strong);
  font-size:.8rem; font-weight:800; margin-bottom:var(--sp-3);
}
.sec-head h2 { margin-bottom:var(--sp-3); }
.sec-head p { color:var(--text-2); font-size:1.02rem; }
.sec-head.right { text-align:right; margin-inline:0; }

/* ================================================ کارت دوره */
.course-card { display:flex; flex-direction:column; padding:0; overflow:hidden; }
.course-media { position:relative; aspect-ratio:16/10; background:var(--grad-brand); overflow:hidden; }
.course-media img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.course-card:hover .course-media img { transform:scale(1.07); }
.course-emoji { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:4.2rem; filter:drop-shadow(0 8px 16px rgba(0,0,0,.2)); }
.course-tag { position:absolute; top:12px; inset-inline-start:12px; }
.course-body { padding:var(--sp-4) var(--sp-5) var(--sp-5); flex:1; display:flex; flex-direction:column; }
.course-body h3 { font-size:1.12rem; margin-bottom:8px; }
.course-body p { font-size:.89rem; flex:1; }
.course-meta { display:flex; flex-wrap:wrap; gap:10px; font-size:.78rem; color:var(--text-3);
  padding-top:var(--sp-3); border-top:1px dashed var(--border); margin-top:auto; }
.course-meta span { display:inline-flex; align-items:center; gap:4px; }
.course-price { font-weight:900; color:var(--violet-700); font-size:1.02rem; }

/* ================================================ ویژگی ها */
.feature { text-align:center; padding:var(--sp-5); }
.feature-icon {
  width:76px; height:76px; margin:0 auto var(--sp-3);
  border-radius:24px; display:flex; align-items:center; justify-content:center;
  font-size:2.1rem; background:var(--grad-brand); color:#fff;
  box-shadow:var(--sh-brand);
  transition:transform .45s var(--ease-bounce);
}
.feature:hover .feature-icon { transform:rotate(-8deg) scale(1.1); }
.feature-icon.warm { background:var(--grad-warm); box-shadow:0 12px 30px rgba(255,107,69,.32); }
.feature-icon.cool { background:var(--grad-cool); box-shadow:0 12px 30px rgba(14,165,233,.3); }
.feature h3 { font-size:1.05rem; margin-bottom:8px; }
.feature p { font-size:.89rem; margin:0; }

/* ================================================ متد (مسیر ۵ گام) */
.method-track { position:relative; display:grid; gap:var(--sp-4); }
.method-step {
  display:grid; grid-template-columns:auto 1fr; gap:var(--sp-4); align-items:start;
  padding:var(--sp-5); border-radius:var(--r-lg);
  background:rgba(255,255,255,.86); border:1px solid var(--border);
  box-shadow:var(--sh-sm); position:relative;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.dark .method-step { background:rgba(34,28,70,.88); }
.method-step:hover { transform:translateX(-8px); box-shadow:var(--sh-lg); border-color:var(--border-strong); }
.method-num {
  width:56px; height:56px; border-radius:18px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; font-weight:900; color:#fff;
  background:var(--grad-brand); box-shadow:var(--sh-brand);
}
.method-step:nth-child(2) .method-num { background:var(--grad-warm); box-shadow:0 10px 26px rgba(255,107,69,.3); }
.method-step:nth-child(3) .method-num { background:var(--grad-cool); box-shadow:0 10px 26px rgba(14,165,233,.28); }
.method-step:nth-child(4) .method-num { background:linear-gradient(135deg,#a3e635,#14b8a6); }
.method-step:nth-child(5) .method-num { background:linear-gradient(135deg,#f857a6,#ffae00); }
.method-step h3 { font-size:1.05rem; margin-bottom:5px; }
.method-step p { font-size:.9rem; margin:0; }

/* ================================================ نظرات */
.testimonial { padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3); }
.testimonial-body { font-size:.94rem; color:var(--text-2); line-height:2.1; position:relative; padding-top:var(--sp-3); }
.testimonial-body::before { content:'”'; position:absolute; top:-18px; inset-inline-start:0;
  font-size:3.4rem; color:var(--violet-200); font-family:Georgia,serif; line-height:1; }
.testimonial-foot { display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:var(--sp-3);
  border-top:1px dashed var(--border); }
.avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; flex-shrink:0;
  background:var(--grad-brand); color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.05rem; box-shadow:var(--sh-sm); }
.avatar-sm { width:36px; height:36px; font-size:.85rem; }
.avatar-lg { width:88px; height:88px; font-size:2rem; }
.rate { color:var(--amber-500); font-size:.9rem; letter-spacing:1px; }

/* ================================================ فرم */
.field { margin-bottom:var(--sp-4); }
.field label { display:block; font-weight:700; font-size:.88rem; margin-bottom:8px; color:var(--text); }
.field .hint { font-size:.78rem; color:var(--text-3); margin-top:6px; }
.field .err { font-size:.78rem; color:var(--danger); margin-top:6px; font-weight:600; }
.input, .select, .textarea {
  width:100%; padding:13px 17px; border-radius:var(--r-sm);
  border:1.5px solid var(--border-strong);
  background:rgba(255,255,255,.86);
  font-size:.94rem; color:var(--text);
  transition:border-color .25s, box-shadow .25s, background .25s;
  /* سافاری iOS بدون این خط ظاهر بومی خودش را تحمیل می کند */
  -webkit-appearance:none; appearance:none;
  -webkit-border-radius:var(--r-sm);
  max-width:100%;
}
/* سافاری iOS هنگام فوکوس روی ورودی با فونت کوچک تر از ۱۶ پیکسل
   صفحه را زوم می کند و چیدمان به هم می ریزد */
@media (max-width: 880px) {
  .input, .select, .textarea, .auth-input { font-size:16px; }
}
input[type="date"].input, input[type="time"].input, input[type="datetime-local"].input {
  min-height:48px; /* iOS ارتفاع ورودی های تاریخ/زمان را جمع می کند */
}
.dark .input,.dark .select,.dark .textarea { background:rgba(38,30,72,.6); }
.input:focus,.select:focus,.textarea:focus {
  outline:none; border-color:var(--violet-500);
  box-shadow:0 0 0 4px rgba(124,77,255,.14); background:#fff;
}
.dark .input:focus,.dark .select:focus,.dark .textarea:focus { background:rgba(38,30,72,.9); }
.input::placeholder,.textarea::placeholder { color:var(--text-3); }
.textarea { min-height:130px; resize:vertical; line-height:2; }
.select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238b7fa8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left 16px center;
  padding-left:42px;
  height:48px; /* سافاری iOS ارتفاع select را یکسان نگه نمی دارد */
}
.textarea.select, select.textarea { height:auto; }
.input.is-error,.select.is-error,.textarea.is-error { border-color:var(--danger); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
.check { display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:.9rem; }
.check input { width:19px; height:19px; accent-color:var(--brand); margin-top:5px; flex-shrink:0; cursor:pointer; }
.input-group { position:relative; }
.input-group .icon { position:absolute; inset-inline-start:15px; top:50%; transform:translateY(-50%);
  color:var(--text-3); pointer-events:none; font-size:1.05rem; }
.input-group .input { padding-inline-start:46px; }
.input-group .toggle-pass { position:absolute; inset-inline-end:14px; top:50%; transform:translateY(-50%);
  color:var(--text-3); font-size:1.05rem; cursor:pointer; background:none; }

/* رادیو کارتی — همهٔ کارت ها هم ارتفاع و هم تراز می شوند
   (پیش تر کارتی با متن کوتاه تر، کوتاه تر از بقیه می شد) */
.radio-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px; align-items:stretch; }
.radio-card { position:relative; display:flex; }
.radio-card input { position:absolute; opacity:0; width:1px; height:1px; }
.radio-card > span {
  flex:1; min-height:100%;
  display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center;
  padding:16px 12px; border-radius:var(--r); cursor:pointer;
  border:2px solid var(--border); background:rgba(255,255,255,.7);
  font-size:.86rem; font-weight:600;
  /* فقط ویژگی های ارزان انیمیت می شوند تا هنگام حرکت موس لگ نداشته باشد */
  transition:border-color .22s var(--ease), background-color .22s var(--ease),
             color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.dark .radio-card > span { background:rgba(38,30,72,.6); }
.radio-card > span .emo { font-size:1.7rem; line-height:1; }
/* توضیح کوتاه هر گزینه به کف کارت می چسبد تا عنوان ها هم تراز بمانند */
.radio-card > span small { margin-top:auto; }
.radio-card input:checked + span {
  border-color:var(--violet-500); background:var(--brand-soft);
  color:var(--brand-strong); transform:translateY(-4px); box-shadow:var(--sh);
}
.radio-card input:focus-visible + span { outline:3px solid var(--violet-400); outline-offset:2px; }
.radio-card > span:hover { border-color:var(--violet-300); }
@media (hover: none) { .radio-card > span:hover { border-color:var(--border); } }

/* ================================================ انتخابگر تاریخ شمسی */
.input.jdate { cursor:pointer; letter-spacing:.5px; }
.jdp {
  position:absolute; z-index:9500; display:none;
  width:272px; padding:12px;
  border-radius:var(--r); background:var(--surface-solid);
  border:1px solid var(--border); box-shadow:var(--sh-lg);
  font-size:.86rem; direction:rtl;
}
.jdp.open { display:block; animation:fadeUp .18s var(--ease); }
.jdp-head { display:flex; align-items:center; gap:6px; margin-bottom:10px; }
.jdp-nav {
  width:32px; height:32px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; color:var(--brand-strong); background:var(--brand-soft);
  transition:background .2s, color .2s;
}
.jdp-nav:hover { background:var(--grad-brand); color:#fff; }
.jdp-title { flex:1; font-weight:800; color:var(--text); padding:6px; border-radius:10px; }
.jdp-title:hover { background:var(--brand-soft); }
.jdp-week, .jdp-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.jdp-week span { text-align:center; font-size:.72rem; font-weight:700; color:var(--text-3); padding:4px 0; }
.jdp-day {
  height:32px; border-radius:9px; font-size:.82rem; font-weight:600; color:var(--text-2);
  display:flex; align-items:center; justify-content:center;
  transition:background .18s, color .18s;
}
.jdp-day:hover:not(.off) { background:var(--brand-soft); color:var(--brand-strong); }
.jdp-day.off { pointer-events:none; }
.jdp-day.today { box-shadow:inset 0 0 0 1.5px var(--violet-400); }
.jdp-day.sel { background:var(--grad-brand); color:#fff; box-shadow:var(--sh-brand); }
.jdp-foot { display:flex; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
.jdp-btn {
  flex:1; padding:7px; border-radius:10px; font-size:.78rem; font-weight:700;
  background:var(--brand-soft); color:var(--brand-strong); transition:background .2s;
}
.jdp-btn:hover { background:var(--violet-200); }

/* ================================================ هشدارها */
.alert {
  display:flex; align-items:flex-start; gap:12px;
  padding:15px 19px; border-radius:var(--r); margin-bottom:var(--sp-4);
  font-size:.9rem; font-weight:600; border:1px solid transparent;
  animation:slideDown .45s var(--ease);
}
@keyframes slideDown { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }
.alert-success { background:var(--success-bg); color:#14532d; border-color:#86efac; }
.alert-danger,.alert-error { background:var(--danger-bg); color:#7f1d1d; border-color:#fca5a5; }
.alert-warning { background:var(--warning-bg); color:#78350f; border-color:#fcd34d; }
.alert-info { background:var(--info-bg); color:#075985; border-color:#7dd3fc; }
.alert .ico { font-size:1.2rem; flex-shrink:0; }

/* توست شناور */
.toast-wrap { position:fixed; top:20px; inset-inline-start:20px; z-index:9999; display:flex; flex-direction:column; gap:10px; }
.toast { min-width:260px; max-width:380px; padding:14px 18px; border-radius:var(--r);
  background:var(--surface-solid); box-shadow:var(--sh-lg); border:1px solid var(--border);
  font-size:.88rem; font-weight:600; animation:slideIn .4s var(--ease); }
@keyframes slideIn { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} }

/* ================================================ جدول */
.table-wrap { overflow-x:auto; border-radius:var(--r); border:1px solid var(--border);
  background:rgba(255,255,255,.9); -webkit-overflow-scrolling:touch; }
.dark .table-wrap { background:rgba(34,28,70,.9); }
.table { min-width:640px; font-size:.88rem; }
.table th, .table td { padding:13px 15px; text-align:right; border-bottom:1px solid var(--border); }
.table th { font-weight:800; color:var(--text-2); background:#f3efff; font-size:.82rem;
  position:sticky; top:0; z-index:1; }
.dark .table th { background:#2b2356; }
.table tbody tr { transition:background .2s; }
.table tbody tr:hover { background:rgba(124,77,255,.045); }
.table tbody tr:last-child td { border-bottom:none; }
.table .actions { display:flex; gap:6px; }

/* ================================================ نوار پیشرفت */
.progress { height:11px; border-radius:99px; background:var(--brand-soft); overflow:hidden; }
.progress-bar { height:100%; border-radius:99px; background:var(--grad-brand);
  transition:width 1.1s var(--ease); box-shadow:0 0 12px rgba(124,77,255,.5); }
.progress-lg { height:16px; }
.skill-row { display:grid; grid-template-columns:110px 1fr 46px; gap:12px; align-items:center;
  font-size:.86rem; margin-bottom:12px; }

/* ================================================ صفحه بندی */
/* در چیدمان راست به چپ، flex-start یعنی سمت راست */
.pagination { display:flex; justify-content:flex-start; gap:7px; flex-wrap:wrap; margin-top:var(--sp-7); }
.pagination.center { justify-content:center; }
.pagination a, .pagination span {
  min-width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--border);
  font-weight:700; font-size:.88rem; color:var(--text-2); transition:all .25s;
}
.pagination a:hover { background:var(--brand-soft); color:var(--brand-strong); transform:translateY(-2px); }
.pagination .current { background:var(--grad-brand); color:#fff; border-color:transparent; box-shadow:var(--sh-brand); }

/* ================================================ خرده نان */
.breadcrumb { display:flex; flex-wrap:wrap; gap:7px; font-size:.82rem; color:var(--text-3); margin-bottom:var(--sp-4); }
.breadcrumb a { color:var(--text-2); }
.breadcrumb a:hover { color:var(--brand); }
.breadcrumb span.sep { opacity:.5; }

/* ================================================ محتوای مقاله */
.prose { font-size:1rem; line-height:2.3; color:var(--text-2); }
.prose h2 { font-size:1.42rem; margin:2em 0 .7em; color:var(--text); position:relative; padding-inline-start:16px; }
.prose h2::before { content:''; position:absolute; inset-inline-start:0; top:.28em; width:5px; height:1.1em;
  border-radius:99px; background:var(--grad-brand); }
.prose h3 { font-size:1.18rem; margin:1.6em 0 .6em; color:var(--text); }
.prose p { margin-bottom:1.3em; }
.prose ul, .prose ol { margin-bottom:1.4em; }
.prose li { margin-bottom:.55em; }
.prose img { border-radius:var(--r); margin:1.6em 0; box-shadow:var(--sh); }
.prose blockquote {
  margin:1.7em 0; padding:var(--sp-4) var(--sp-5);
  border-inline-start:4px solid var(--violet-400); border-radius:var(--r-sm);
  background:var(--brand-soft); color:var(--text); font-weight:600;
}
.prose table { margin:1.6em 0; font-size:.9rem; }
.prose th,.prose td { padding:11px 14px; border:1px solid var(--border); }
.prose th { background:var(--brand-soft); font-weight:800; }
.prose a { font-weight:600; border-bottom:1.5px solid var(--violet-200); }
.prose a:hover { border-color:var(--accent); }
.prose code { background:var(--brand-soft); padding:2px 7px; border-radius:6px; font-size:.88em; direction:ltr; display:inline-block; }

/* جعبهٔ پاسخ سریع (AEO) */
.answer-box {
  padding:var(--sp-5); border-radius:var(--r-lg); margin-bottom:var(--sp-5);
  background:linear-gradient(135deg,rgba(124,77,255,.09),rgba(248,87,166,.07));
  border:1.5px solid var(--border-strong); position:relative;
}
.answer-box::before { content:'💡 پاسخ کوتاه'; display:inline-block; font-size:.76rem; font-weight:800;
  color:var(--brand-strong); background:#fff; padding:4px 13px; border-radius:99px; margin-bottom:10px; }
.answer-box p { margin:0; color:var(--text); font-weight:600; font-size:.97rem; }

/* ================================================ آکاردئون */
.accordion { border-radius:var(--r); overflow:hidden; border:1px solid var(--border);
  background:rgba(255,255,255,.88); }
.dark .accordion { background:rgba(34,28,70,.9); }
.acc-item { border-bottom:1px solid var(--border); }
.acc-item:last-child { border-bottom:none; }
.acc-head { width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px 22px; text-align:right; font-weight:700; font-size:.96rem; color:var(--text);
  transition:background .25s; }
.acc-head:hover { background:var(--brand-soft); }
.acc-head .ind { width:28px; height:28px; border-radius:50%; background:var(--brand-soft);
  color:var(--brand-strong); display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:.95rem; transition:transform .35s var(--ease); }
.acc-item.open .acc-head .ind { transform:rotate(45deg); background:var(--grad-brand); color:#fff; }
.acc-body { max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
.acc-body-inner { padding:0 22px 20px; color:var(--text-2); font-size:.92rem; line-height:2.1; }
.acc-item.open .acc-body { max-height:900px; }

/* ================================================ گالری */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:var(--sp-4); }
.gallery-item { position:relative; aspect-ratio:1; border-radius:var(--r); overflow:hidden;
  cursor:pointer; box-shadow:var(--sh-sm); transition:transform .4s var(--ease), box-shadow .4s; }
.gallery-item:hover { transform:translateY(-6px) scale(1.02); box-shadow:var(--sh-lg); }
.gallery-item img { width:100%; height:100%; object-fit:cover; }
.gallery-item .cap { position:absolute; inset:auto 0 0; padding:26px 14px 12px;
  background:linear-gradient(transparent,rgba(30,10,70,.86)); color:#fff; font-size:.83rem; font-weight:600; }

/* لایت باکس */
.lightbox { position:fixed; inset:0; z-index:9998; background:rgba(20,8,50,.93);
  display:none; align-items:center; justify-content:center; padding:24px; backdrop-filter:blur(10px); }
.lightbox.open { display:flex; animation:fadeIn .3s; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.lightbox img { max-width:92vw; max-height:88vh; border-radius:var(--r); box-shadow:var(--sh-xl); }
.lightbox .close { position:absolute; top:22px; inset-inline-start:22px; width:46px; height:46px;
  border-radius:50%; background:rgba(255,255,255,.18); color:#fff; font-size:1.5rem;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(10px); }

/* ================================================ CTA */
.cta-band {
  position:relative; border-radius:var(--r-xl); padding:var(--sp-8) var(--sp-6);
  background:var(--grad-brand); color:#fff; overflow:hidden; text-align:center;
  box-shadow:var(--sh-xl);
}
.cta-band::before { content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 22% 18%,rgba(255,255,255,.28),transparent 42%),
             radial-gradient(circle at 82% 82%,rgba(255,255,255,.2),transparent 40%); }
.cta-band > * { position:relative; z-index:1; }
.cta-band h2 { color:#fff; }
.cta-band p { color:rgba(255,255,255,.92); max-width:60ch; margin-inline:auto; }

/* ================================================ فوتر */
.site-footer { margin-top:var(--sp-9); padding:var(--sp-8) 0 0;
  background:linear-gradient(180deg,transparent,rgba(124,77,255,.06)); position:relative; }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:var(--sp-6); margin-bottom:var(--sp-7); }
.footer-col h4 { font-size:.98rem; margin-bottom:var(--sp-4); color:var(--text); position:relative; padding-bottom:10px; }
.footer-col h4::after { content:''; position:absolute; bottom:0; inset-inline-start:0;
  width:34px; height:3px; border-radius:99px; background:var(--grad-brand); }
.footer-col ul { list-style:none; padding:0; }
.footer-col li { margin-bottom:11px; }
/* :not(.btn) لازم است؛ وگرنه این قانون رنگ سفید دکمهٔ رزرو جلسه را بازنویسی می کرد */
.footer-col a:not(.btn):not(.logo) {
  font-size:.89rem; color:var(--text-2);
  display:inline-block;
  /* به جای تغییر padding (که باعث پرش می شد) از transform استفاده می شود */
  transition:color .28s var(--ease), transform .28s var(--ease);
  will-change:transform;
}
.footer-col a:not(.btn):not(.logo):hover { color:var(--brand); transform:translateX(-5px); }
/* دکمهٔ فراخوان فوتر — همیشه متن سفید */
.footer-col .btn.btn-primary,
.footer-col .btn.btn-primary:hover,
.footer-col .btn.btn-primary:focus,
.footer-col .btn.btn-primary:visited { color:#fff; }
.footer-col .btn { font-size:.86rem; }
.footer-bottom { padding:var(--sp-4) 0; border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center;
  font-size:.82rem; color:var(--text-3); }
.social { display:flex; gap:9px; }
.social a { width:42px; height:42px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border); font-size:1.15rem;
  transition:all .3s var(--ease-bounce); }
.social a:hover { background:var(--grad-brand); color:#fff; transform:translateY(-4px) rotate(-6deg); box-shadow:var(--sh-brand); }
.credit-link { color:var(--brand-strong); font-weight:800; }
.credit-link:hover { color:var(--accent); }

/* ================================================ دکمه های شناور */
.fab-stack { position:fixed; bottom:22px; inset-inline-end:22px; z-index:800;
  display:flex; flex-direction:column; gap:11px; }
.fab { width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; color:#fff; background:var(--grad-brand); box-shadow:var(--sh-brand);
  transition:transform .3s var(--ease-bounce); }
.fab:hover { transform:scale(1.12) translateY(-3px); color:#fff; }
.fab-wa { background:linear-gradient(135deg,#25d366,#128c7e); box-shadow:0 10px 26px rgba(37,211,102,.4); }
.fab-tel { background:linear-gradient(135deg,#2aabee,#229ed9); box-shadow:0 10px 26px rgba(42,171,238,.4); }
.fab-up { background:var(--surface-solid); color:var(--brand-strong); border:1px solid var(--border);
  box-shadow:var(--sh); opacity:0; pointer-events:none; }
.fab-up.show { opacity:1; pointer-events:auto; }

/* ================================================ دستیار هوشمند */
.assistant-panel { position:fixed; bottom:92px; inset-inline-end:22px; z-index:850;
  width:min(380px,calc(100vw - 44px)); border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface-solid); box-shadow:var(--sh-xl); border:1px solid var(--border);
  transform:translateY(24px) scale(.94); opacity:0; pointer-events:none;
  transition:all .38s var(--ease); }
.assistant-panel.open { transform:none; opacity:1; pointer-events:auto; }
.assistant-head { padding:15px 18px; background:var(--grad-brand); color:#fff;
  display:flex; align-items:center; gap:11px; font-weight:800; font-size:.95rem; }
.assistant-body { height:330px; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:11px;
  background:var(--bg); }
.msg { max-width:86%; padding:11px 15px; border-radius:16px; font-size:.86rem; line-height:1.95; white-space:pre-wrap; }
.msg-bot { align-self:flex-start; background:var(--surface-solid); border:1px solid var(--border);
  border-bottom-right-radius:5px; box-shadow:var(--sh-xs); }
.msg-user { align-self:flex-end; background:var(--grad-brand); color:#fff; border-bottom-left-radius:5px; }
.assistant-foot { padding:11px; display:flex; gap:8px; border-top:1px solid var(--border); background:var(--surface-solid); }
.assistant-foot .input { padding:10px 14px; font-size:.86rem; }
.typing { display:flex; gap:4px; padding:12px 15px; }
.typing i { width:7px; height:7px; border-radius:50%; background:var(--violet-400); animation:bounceDot 1.3s infinite; }
.typing i:nth-child(2){animation-delay:.18s} .typing i:nth-child(3){animation-delay:.36s}
@keyframes bounceDot { 0%,60%,100%{transform:translateY(0);opacity:.45} 30%{transform:translateY(-7px);opacity:1} }

/* ================================================ نوار پیشرفت آزمون */
.quiz-progress { position:sticky; top:var(--header-h); z-index:100;
  background:#fbf9ff;
  border-radius:var(--r); padding:14px 18px; margin-bottom:var(--sp-5);
  border:1px solid var(--border); box-shadow:var(--sh-sm); }
.dark .quiz-progress { background:#221c46; }
.quiz-step { display:none; animation:fadeUp .45s var(--ease); }
.quiz-step.active { display:block; }
@keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }

/* حلقهٔ امتیاز */
.score-ring { position:relative; width:170px; height:170px; margin:0 auto var(--sp-4); }
.score-ring svg { transform:rotate(-90deg); }
.score-ring .val { position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; }
.score-ring .num { font-size:2.5rem; font-weight:900;
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ================================================ گیمیفیکیشن */
.badge-tile { text-align:center; padding:var(--sp-4) var(--sp-2); border-radius:var(--r);
  background:var(--surface); border:1px solid var(--border); transition:all .35s var(--ease-bounce); }
.badge-tile:hover { transform:translateY(-6px) rotate(-3deg); box-shadow:var(--sh); }
.badge-tile .ico { font-size:2.4rem; display:block; margin-bottom:6px;
  filter:drop-shadow(0 4px 10px rgba(255,174,0,.4)); }
.badge-tile .nm { font-size:.79rem; font-weight:700; color:var(--text-2); }
.badge-tile.locked { opacity:.4; filter:grayscale(1); }

.level-ring { display:inline-flex; align-items:center; gap:12px; padding:10px 20px;
  border-radius:var(--r-full); background:var(--grad-brand); color:#fff;
  font-weight:800; box-shadow:var(--sh-brand); }

/* ================================================ کمکی */
.divider-wave { height:60px; background:no-repeat center/cover; }
.tag-list { display:flex; flex-wrap:wrap; gap:8px; }
.empty-state { text-align:center; padding:var(--sp-8) var(--sp-4); color:var(--text-3); }
.empty-state .ico { font-size:3.4rem; display:block; margin-bottom:var(--sp-3); opacity:.55; }
.skeleton { background:linear-gradient(90deg,var(--brand-soft) 25%,rgba(255,255,255,.6) 50%,var(--brand-soft) 75%);
  background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:var(--r-sm); }
@keyframes shimmer { to { background-position:-200% 0; } }

.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }

/* ================================================ ریسپانسیو */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns:1fr; }
  .hero-visual { order:-1; max-width:460px; margin-inline:auto; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .g-4 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 880px) {
  .nav { display:none; }
  .nav-toggle { display:flex; margin-inline-start:auto; }
  .header-actions .btn span.lbl { display:none; }
  .g-3 { grid-template-columns:repeat(2,1fr); }
  .section { padding:var(--sp-7) 0; }
}
@media (max-width: 620px) {
  body { font-size:14.5px; }
  .g-2,.g-3,.g-4,.g-auto { grid-template-columns:1fr; }
  .field-row { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:var(--sp-5); }
  .container { padding-inline:16px; }
  .btn { padding:12px 22px; }
  .btn-lg { padding:14px 28px; font-size:.98rem; }
  .cta-band { padding:var(--sp-6) var(--sp-4); }
  .method-step { grid-template-columns:1fr; }
  .method-num { width:48px; height:48px; font-size:1.2rem; }
  .fab { width:50px; height:50px; font-size:1.25rem; }
  .stat-num { font-size:1.75rem; }
  .assistant-panel { inset-inline:12px; width:auto; bottom:84px; }
}

/* ================================================ چاپ */
@media print {
  .site-header,.site-footer,.fab-stack,.assistant-panel,.no-print { display:none !important; }
  body { background:#fff; color:#000; }
  .card,.glass { box-shadow:none; border:1px solid #ddd; background:#fff; }
}

/* ================================================ کاهش حرکت */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ==================================================================
   سازگاری با سافاری (به ویژه iOS)
   ================================================================== */

/* ۱) واحد ارتفاع دینامیک — نوار آدرس سافاری موبایل 100vh را اشتباه محاسبه می کند */
.mobile-nav { max-height:calc(100vh - var(--header-h)); -webkit-overflow-scrolling:touch; }
@supports (height: 100svh) {
  .mobile-nav { max-height:calc(100svh - var(--header-h)); }
}

/* ۲) جایگزین aspect-ratio برای سافاری زیر ۱۵ */
@supports not (aspect-ratio: 1 / 1) {
  .course-media { height:0; padding-bottom:62.5%; position:relative; }
  .course-media > * { position:absolute; inset:0; }
  .gallery-item { height:0; padding-bottom:100%; position:relative; }
  .gallery-item > * { position:absolute; inset:0; }
}

/* ۳) حاشیهٔ امن ناچ و نوار خانهٔ آیفون */
.fab-stack {
  bottom:calc(22px + env(safe-area-inset-bottom));
  inset-inline-end:calc(22px + env(safe-area-inset-right));
}
.assistant-panel { bottom:calc(92px + env(safe-area-inset-bottom)); }
.site-footer { padding-bottom:env(safe-area-inset-bottom); }

/* ۴) سافاری روی عناصر دارای border-radius و overflow:hidden
      گاهی گوشه ها را نمی بُرد؛ لایهٔ ترکیب بندی این را اصلاح می کند */
.course-media, .gallery-item, .card, .auth-card { -webkit-transform:translateZ(0); transform:translateZ(0); }

/* ۵) دکمه ها و لینک ها — حذف هایلایت آبی/خاکستری لمس در iOS */
a, button, .btn, .card, .gate, input, select, textarea {
  -webkit-tap-highlight-color:rgba(124,77,255,.12);
}

/* ۶) سافاری برای input هایی که type=search/number ظاهر بومی می سازد */
input[type="search"] { -webkit-appearance:none; appearance:none; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance:none; }
input[type="number"] { -moz-appearance:textfield; appearance:textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* ۷) iOS ورودی های غیرفعال را کم رنگ و ناخوانا می کند */
input:disabled, select:disabled, textarea:disabled { opacity:1; -webkit-text-fill-color:var(--text-3); }

/* ۸) اسکرول نرم داخل نواحی اسکرول دار */
.table-wrap, .assistant-body, .mobile-nav, .panel-main { -webkit-overflow-scrolling:touch; }

/* ۹) در دستگاه های لمسی افکت hover اجرا نشود (باعث «چسبیدن» حالت hover در iOS می شد) */
@media (hover: none) {
  .card:hover, .stat:hover, .method-step:hover, .gallery-item:hover,
  .btn:hover, .social a:hover, .badge-tile:hover { transform:none; }
  .card:hover::before { opacity:0; }
}