/* =========================================================
   آکادمی موسیقی بهادر آذریان — استایل اصلی سایت
   ساختار: متغیرها > ریست > عمومی > هدر > هیرو/اسلایدر >
            کارت‌ها > فرم > فوتر > کمکی‌ها > ریسپانسیو
   ========================================================= */

:root {
  /* رنگ‌بندی اصلی برند — به‌روزرسانی شده طبق کدهای دقیق ارسالی کارفرما:
     آبی سرمه‌ایِ تیره با ته‌رنگ خاکستری (#243B52) و سبز زیتونیِ تیره (#1D2B19).
     رنگ‌های روشن/تیره‌ترِ هرکدام با تغییر Lightness از همین دو رنگ پایه محاسبه شده‌اند
     (نه رنگ‌های اختیاری جدید) تا خانواده‌ی رنگی کاملاً یکدست بماند. */
  --color-navy: #243B52;        /* آبی سرمه‌ای تیره (ته‌رنگ خاکستری) — جایگزین آبی درباری قبلی */
  --color-navy-light: #385c80;
  --color-navy-dark: #0e1720;
  --color-emerald: #1D2B19;     /* سبز زیتونی تیره — جایگزین سبز زمردی قبلی */
  --color-emerald-light: #395531;
  --color-emerald-dark: #121b10; /* برای گرادینت‌های تک‌رنگِ سبز (بدون ترکیب با آبی) */
  --color-white: #edf1f6;  /* سفیدِ نزدیک به طوسی/آبی — فقط برای متن/آیکون روی بخش‌های تیره (هیرو/CTA/فوتر) */

  /* ===== بازگشت به تم روشن (درخواست کارفرما: «برگردیم به حالت روشن... پس‌زمینه کلی سایت سفید،
     ۷۰٪ آبی درباری/سبز کله‌غازی جدا جدا در بخش‌ها، ۲۰٪ طوسی») =====
     پایه‌ی سایت (canvas) اکنون سفید است؛ بخش‌های متناوب (.bg-alt) طوسیِ روشن‌اند (سهم ۲۰٪ طوسی)؛
     آبی درباری و سبز زمردی هرکدام به‌صورت جداگانه (نه ترکیب‌شده با هم در یک نقطه) روی بخش‌های
     بزرگ و مجزا (هیرو، نوار CTA، فوتر، هیروی پروفایل اساتید) به‌کار می‌روند. */
  /* اصلاح‌شده (بازخورد کارفرما: «سفید خیلی توی چشم میزنه»): به‌جای سفیدِ خالص، یک سفیدِ
     نرم و کمی طوسی‌رنگ برای پایه‌ی سایت استفاده شد که خیرگی کمتری دارد؛ .bg-alt هم طوسیِ
     محسوس‌تری گرفت تا واقعاً به‌چشم بیاید (نه فقط یک پله تیره‌تر از سفید). */
  --color-canvas: #f7f8fa;      /* پس‌زمینه پایه‌ی کل سایت — سفیدِ نرم (نه سفید خالص) */
  --color-canvas-alt: #808080;  /* پس‌زمینه بخش‌های متناوب (.bg-alt) — طوسیِ دقیقِ درخواستی کارفرما (#808080) */
  --color-surface: #ffffff;     /* پس‌زمینه کارت‌ها/فرم — سفید، با حاشیه/سایه برای تفکیک از canvas */
  --color-surface-2: #f2f4f7;   /* طوسیِ خیلی روشن (هاور/تاکید ظریف) */
  --color-border: rgba(36,59,82,0.12);
  --color-border-soft: rgba(36,59,82,0.06);

  /* متن روی زمینه روشن: heading آبی درباری، متن معمولی طوسیِ تیره */
  --color-heading: var(--color-navy);
  --color-text: #3c4658;
  --color-text-muted: #6c7386;

  --color-gray-50: #f6f7f9;
  --color-gray-100: #eceff3;
  --color-gray-300: #cfd4dc;
  --color-gray-500: #8a92a3;
  --color-gray-600: #656d7d;
  --color-gray-700: #4a5162;
  --color-gray-900: #1c2233;

  /* ===== توکن‌های «تأکید» (v28) =====
     رنگ‌های برند (#1D2B19 سبز زیتونیِ خیلی تیره) برای «پس‌زمینه» عالی‌اند ولی به‌عنوان رنگ «متن»
     روی زمینه‌ی تیره تقریباً دیده نمی‌شوند (کنتراست ~۲:۱). برای متن‌های تأکیدی (eyebrow، لینک‌ها،
     برچسب‌ها، حلقه‌ی فوکوس) یک توکن جدا تعریف شد که در هر تم، رنگ خوانای خودش را دارد. */
  --color-accent: #395531;      /* سبز برند — روی زمینه روشن */
  --color-accent-on-dark: #a3d392; /* همان سبز، روشن‌شده برای بخش‌های تیره (فوتر/هیرو/CTA) */
  --color-focus: #385c80;

  --font-main: 'Vazirmatn', Tahoma, sans-serif;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  --shadow-sm: 0 2px 10px rgba(36, 59, 82, 0.06);
  --shadow-md: 0 10px 30px rgba(36, 59, 82, 0.10);

  --container-width: 1160px;
  --transition: 0.3s ease;

  /* الگوی تکرارشونده نُت موسیقی برای پس‌زمینه — دو نسخه‌ی روشن/تیره
     (به درخواست کارفرما: «کل سایت بک‌گراندش همراه با المان‌های موسیقی باشه») */
  --pattern-notes-light: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNDAiIGhlaWdodD0iMjQwIiB2aWV3Qm94PSIwIDAgMjQwIDI0MCI+CiAgPGcgZmlsbD0iIzE0MjY0ZCIgZmlsbC1vcGFjaXR5PSIwLjA1Ij4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwLDQwKSByb3RhdGUoLTEwKSI+CiAgICAgIDxlbGxpcHNlIGN4PSIwIiBjeT0iMjQiIHJ4PSI3IiByeT0iNSIvPgogICAgICA8cmVjdCB4PSI2IiB5PSItMTAiIHdpZHRoPSIyLjQiIGhlaWdodD0iMzQiLz4KICAgIDwvZz4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE1MCw2Nikgcm90YXRlKDgpIj4KICAgICAgPGVsbGlwc2UgY3g9IjAiIGN5PSIyNCIgcng9IjciIHJ5PSI1Ii8+CiAgICAgIDxyZWN0IHg9IjYiIHk9Ii0xNCIgd2lkdGg9IjIuNCIgaGVpZ2h0PSIzOCIvPgogICAgICA8cGF0aCBkPSJNOC40IC0xNCBDIDIwIC0xMCwgMjIgMCwgMTIgNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMTQyNjRkIiBzdHJva2Utb3BhY2l0eT0iMC4wNSIgc3Ryb2tlLXdpZHRoPSIyLjQiLz4KICAgIDwvZz4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY0LDE1Mikgcm90YXRlKC02KSI+CiAgICAgIDxlbGxpcHNlIGN4PSIwIiBjeT0iMjAiIHJ4PSI3IiByeT0iNSIvPgogICAgICA8ZWxsaXBzZSBjeD0iMzQiIGN5PSIyNCIgcng9IjciIHJ5PSI1Ii8+CiAgICAgIDxyZWN0IHg9IjYiIHk9Ii04IiB3aWR0aD0iMi40IiBoZWlnaHQ9IjI4Ii8+CiAgICAgIDxyZWN0IHg9IjQwIiB5PSItNCIgd2lkdGg9IjIuNCIgaGVpZ2h0PSIyOCIvPgogICAgICA8cGF0aCBkPSJNOC40IC04IEwgNDIuNCAtNCIgc3Ryb2tlPSIjMTQyNjRkIiBzdHJva2Utb3BhY2l0eT0iMC4wNSIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSJub25lIi8+CiAgICA8L2c+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOTYsMTg4KSByb3RhdGUoMTQpIj4KICAgICAgPGVsbGlwc2UgY3g9IjAiIGN5PSIxNCIgcng9IjUuNSIgcnk9IjQiLz4KICAgICAgPHJlY3QgeD0iNC44IiB5PSItMTQiIHdpZHRoPSIyIiBoZWlnaHQ9IjI4Ii8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4=");
  --pattern-notes-dark: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNDAiIGhlaWdodD0iMjQwIiB2aWV3Qm94PSIwIDAgMjQwIDI0MCI+CiAgPGcgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjA3Ij4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwLDQwKSByb3RhdGUoLTEwKSI+CiAgICAgIDxlbGxpcHNlIGN4PSIwIiBjeT0iMjQiIHJ4PSI3IiByeT0iNSIvPgogICAgICA8cmVjdCB4PSI2IiB5PSItMTAiIHdpZHRoPSIyLjQiIGhlaWdodD0iMzQiLz4KICAgIDwvZz4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE1MCw2Nikgcm90YXRlKDgpIj4KICAgICAgPGVsbGlwc2UgY3g9IjAiIGN5PSIyNCIgcng9IjciIHJ5PSI1Ii8+CiAgICAgIDxyZWN0IHg9IjYiIHk9Ii0xNCIgd2lkdGg9IjIuNCIgaGVpZ2h0PSIzOCIvPgogICAgICA8cGF0aCBkPSJNOC40IC0xNCBDIDIwIC0xMCwgMjIgMCwgMTIgNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC4wNyIgc3Ryb2tlLXdpZHRoPSIyLjQiLz4KICAgIDwvZz4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY0LDE1Mikgcm90YXRlKC02KSI+CiAgICAgIDxlbGxpcHNlIGN4PSIwIiBjeT0iMjAiIHJ4PSI3IiByeT0iNSIvPgogICAgICA8ZWxsaXBzZSBjeD0iMzQiIGN5PSIyNCIgcng9IjciIHJ5PSI1Ii8+CiAgICAgIDxyZWN0IHg9IjYiIHk9Ii04IiB3aWR0aD0iMi40IiBoZWlnaHQ9IjI4Ii8+CiAgICAgIDxyZWN0IHg9IjQwIiB5PSItNCIgd2lkdGg9IjIuNCIgaGVpZ2h0PSIyOCIvPgogICAgICA8cGF0aCBkPSJNOC40IC04IEwgNDIuNCAtNCIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utb3BhY2l0eT0iMC4wNyIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSJub25lIi8+CiAgICA8L2c+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOTYsMTg4KSByb3RhdGUoMTQpIj4KICAgICAgPGVsbGlwc2UgY3g9IjAiIGN5PSIxNCIgcng9IjUuNSIgcnk9IjQiLz4KICAgICAgPHJlY3QgeD0iNC44IiB5PSItMTQiIHdpZHRoPSIyIiBoZWlnaHQ9IjI4Ii8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4=");

  /* اصلاح‌شده (درخواست بعدی کارفرما: «بک‌گراند با تم نت‌ها برای هر صفحه متفاوت باشه، فقط تم نت نباشه»):
     دو الگوی تزئینی دیگر اضافه شد — خطوط حامل نت (staff) و سازها (guitar/keys/drum) —
     تا هر صفحه بر اساس body.page-* از یک تم بصری متفاوت استفاده کند (پایین همین فایل، بخش «تم پس‌زمینه هر صفحه»). */
  --pattern-staff-light: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNjAiIGhlaWdodD0iMjYwIiB2aWV3Qm94PSIwIDAgMjYwIDI2MCI+CiAgPGcgc3Ryb2tlPSIjMTQyNjRkIiBzdHJva2Utb3BhY2l0eT0iMC4wNTUiIHN0cm9rZS13aWR0aD0iMS42IiBmaWxsPSJub25lIj4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwLDQwKSByb3RhdGUoLTYpIj4KICAgICAgPGxpbmUgeDE9IjAiIHkxPSIwIiB4Mj0iMTUwIiB5Mj0iMCIvPgogICAgICA8bGluZSB4MT0iMCIgeTE9IjgiIHgyPSIxNTAiIHkyPSI4Ii8+CiAgICAgIDxsaW5lIHgxPSIwIiB5MT0iMTYiIHgyPSIxNTAiIHkyPSIxNiIvPgogICAgICA8bGluZSB4MT0iMCIgeTE9IjI0IiB4Mj0iMTUwIiB5Mj0iMjQiLz4KICAgICAgPGxpbmUgeDE9IjAiIHkxPSIzMiIgeDI9IjE1MCIgeTI9IjMyIi8+CiAgICA8L2c+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2MCwxNjApIHJvdGF0ZSg0KSI+CiAgICAgIDxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjE3MCIgeTI9IjAiLz4KICAgICAgPGxpbmUgeDE9IjAiIHkxPSI4IiB4Mj0iMTcwIiB5Mj0iOCIvPgogICAgICA8bGluZSB4MT0iMCIgeTE9IjE2IiB4Mj0iMTcwIiB5Mj0iMTYiLz4KICAgICAgPGxpbmUgeDE9IjAiIHkxPSIyNCIgeDI9IjE3MCIgeTI9IjI0Ii8+CiAgICAgIDxsaW5lIHgxPSIwIiB5MT0iMzIiIHgyPSIxNzAiIHkyPSIzMiIvPgogICAgPC9nPgogIDwvZz4KICA8ZyBmaWxsPSIjMTQyNjRkIiBmaWxsLW9wYWNpdHk9IjAuMDUiPgogICAgPGNpcmNsZSBjeD0iNDAiIGN5PSI1MiIgcj0iNC41Ii8+CiAgICA8Y2lyY2xlIGN4PSIxMzAiIGN5PSIxNzYiIHI9IjQuNSIvPgogIDwvZz4KPC9zdmc+");
  --pattern-staff-dark: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNjAiIGhlaWdodD0iMjYwIiB2aWV3Qm94PSIwIDAgMjYwIDI2MCI+CiAgPGcgc3Ryb2tlPSIjZWRmMWY2IiBzdHJva2Utb3BhY2l0eT0iMC4wNyIgc3Ryb2tlLXdpZHRoPSIxLjYiIGZpbGw9Im5vbmUiPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsNDApIHJvdGF0ZSgtNikiPgogICAgICA8bGluZSB4MT0iMCIgeTE9IjAiIHgyPSIxNTAiIHkyPSIwIi8+CiAgICAgIDxsaW5lIHgxPSIwIiB5MT0iOCIgeDI9IjE1MCIgeTI9IjgiLz4KICAgICAgPGxpbmUgeDE9IjAiIHkxPSIxNiIgeDI9IjE1MCIgeTI9IjE2Ii8+CiAgICAgIDxsaW5lIHgxPSIwIiB5MT0iMjQiIHgyPSIxNTAiIHkyPSIyNCIvPgogICAgICA8bGluZSB4MT0iMCIgeTE9IjMyIiB4Mj0iMTUwIiB5Mj0iMzIiLz4KICAgIDwvZz4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYwLDE2MCkgcm90YXRlKDQpIj4KICAgICAgPGxpbmUgeDE9IjAiIHkxPSIwIiB4Mj0iMTcwIiB5Mj0iMCIvPgogICAgICA8bGluZSB4MT0iMCIgeTE9IjgiIHgyPSIxNzAiIHkyPSI4Ii8+CiAgICAgIDxsaW5lIHgxPSIwIiB5MT0iMTYiIHgyPSIxNzAiIHkyPSIxNiIvPgogICAgICA8bGluZSB4MT0iMCIgeTE9IjI0IiB4Mj0iMTcwIiB5Mj0iMjQiLz4KICAgICAgPGxpbmUgeDE9IjAiIHkxPSIzMiIgeDI9IjE3MCIgeTI9IjMyIi8+CiAgICA8L2c+CiAgPC9nPgogIDxnIGZpbGw9IiNlZGYxZjYiIGZpbGwtb3BhY2l0eT0iMC4wNjUiPgogICAgPGNpcmNsZSBjeD0iNDAiIGN5PSI1MiIgcj0iNC41Ii8+CiAgICA8Y2lyY2xlIGN4PSIxMzAiIGN5PSIxNzYiIHI9IjQuNSIvPgogIDwvZz4KPC9zdmc+");
  --pattern-instruments-light: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyODAiIGhlaWdodD0iMjgwIiB2aWV3Qm94PSIwIDAgMjgwIDI4MCI+CiAgPGcgc3Ryb2tlPSIjMTQyNjRkIiBzdHJva2Utb3BhY2l0eT0iMC4wNiIgc3Ryb2tlLXdpZHRoPSIyIiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogICAgPCEtLSDar9uM2KrYp9ixIC0tPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzAsMzApIHJvdGF0ZSgtOCkiPgogICAgICA8cGF0aCBkPSJNMjAgNTUgQzQgNTUgLTQgNDAgNCAyNiBDMTAgMTYgMjYgMTYgMzIgMjYgQzQwIDQwIDMyIDU1IDIwIDU1IFoiLz4KICAgICAgPHBhdGggZD0iTTIwIDMwIEMxMCAzMCA0IDIwIDEwIDEyIEMxNCA2IDI0IDYgMjggMTIgQzM0IDIwIDI4IDMwIDIwIDMwIFoiLz4KICAgICAgPGxpbmUgeDE9IjIwIiB5MT0iNiIgeDI9IjIwIiB5Mj0iLTI4Ii8+CiAgICAgIDxjaXJjbGUgY3g9IjIwIiBjeT0iNDAiIHI9IjYiLz4KICAgIDwvZz4KICAgIDwhLS0g2qnbjNio2YjYsdivINm+24zYp9mG2YggLS0+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNTAsNjApIHJvdGF0ZSg2KSI+CiAgICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSI4MCIgaGVpZ2h0PSIyNiIgcng9IjIiLz4KICAgICAgPGxpbmUgeDE9IjEwIiB5MT0iMCIgeDI9IjEwIiB5Mj0iMjYiLz4KICAgICAgPGxpbmUgeDE9IjIwIiB5MT0iMCIgeDI9IjIwIiB5Mj0iMjYiLz4KICAgICAgPGxpbmUgeDE9IjMwIiB5MT0iMCIgeDI9IjMwIiB5Mj0iMjYiLz4KICAgICAgPGxpbmUgeDE9IjQwIiB5MT0iMCIgeDI9IjQwIiB5Mj0iMjYiLz4KICAgICAgPGxpbmUgeDE9IjUwIiB5MT0iMCIgeDI9IjUwIiB5Mj0iMjYiLz4KICAgICAgPGxpbmUgeDE9IjYwIiB5MT0iMCIgeDI9IjYwIiB5Mj0iMjYiLz4KICAgICAgPGxpbmUgeDE9IjcwIiB5MT0iMCIgeDI9IjcwIiB5Mj0iMjYiLz4KICAgIDwvZz4KICAgIDwhLS0g2LfYqNmEIC0tPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjAsMTcwKSByb3RhdGUoLTQpIj4KICAgICAgPGVsbGlwc2UgY3g9IjMwIiBjeT0iMTQiIHJ4PSIzMCIgcnk9IjEwIi8+CiAgICAgIDxwYXRoIGQ9Ik0wIDE0IEw0IDQ2IEM0IDUyIDU2IDUyIDU2IDQ2IEw2MCAxNCIvPgogICAgICA8ZWxsaXBzZSBjeD0iMzAiIGN5PSI0NiIgcng9IjI2IiByeT0iOCIvPgogICAgPC9nPgogICAgPCEtLSDZiNuM2YjZhNmGICjYrti3INiz2KfYr9mHKSAtLT4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE5MCwxOTApIHJvdGF0ZSgxMCkiPgogICAgICA8cGF0aCBkPSJNMTQgMCBDNCA0IDQgMTYgMTQgMjAgQzQgMjQgNCAzNiAxNCA0MCBDMjQgMzYgMjQgMjQgMTQgMjAgQzI0IDE2IDI0IDQgMTQgMCBaIi8+CiAgICAgIDxsaW5lIHgxPSIxNCIgeTE9Ii0yMCIgeDI9IjE0IiB5Mj0iMCIvPgogICAgICA8bGluZSB4MT0iMTQiIHkxPSI0MCIgeDI9IjE0IiB5Mj0iNTgiLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPg==");
  --pattern-instruments-dark: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyODAiIGhlaWdodD0iMjgwIiB2aWV3Qm94PSIwIDAgMjgwIDI4MCI+CiAgPGcgc3Ryb2tlPSIjZWRmMWY2IiBzdHJva2Utb3BhY2l0eT0iMC4wNzUiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgIDwhLS0g2q/bjNiq2KfYsSAtLT4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwLDMwKSByb3RhdGUoLTgpIj4KICAgICAgPHBhdGggZD0iTTIwIDU1IEM0IDU1IC00IDQwIDQgMjYgQzEwIDE2IDI2IDE2IDMyIDI2IEM0MCA0MCAzMiA1NSAyMCA1NSBaIi8+CiAgICAgIDxwYXRoIGQ9Ik0yMCAzMCBDMTAgMzAgNCAyMCAxMCAxMiBDMTQgNiAyNCA2IDI4IDEyIEMzNCAyMCAyOCAzMCAyMCAzMCBaIi8+CiAgICAgIDxsaW5lIHgxPSIyMCIgeTE9IjYiIHgyPSIyMCIgeTI9Ii0yOCIvPgogICAgICA8Y2lyY2xlIGN4PSIyMCIgY3k9IjQwIiByPSI2Ii8+CiAgICA8L2c+CiAgICA8IS0tINqp24zYqNmI2LHYryDZvtuM2KfZhtmIIC0tPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTUwLDYwKSByb3RhdGUoNikiPgogICAgICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iMjYiIHJ4PSIyIi8+CiAgICAgIDxsaW5lIHgxPSIxMCIgeTE9IjAiIHgyPSIxMCIgeTI9IjI2Ii8+CiAgICAgIDxsaW5lIHgxPSIyMCIgeTE9IjAiIHgyPSIyMCIgeTI9IjI2Ii8+CiAgICAgIDxsaW5lIHgxPSIzMCIgeTE9IjAiIHgyPSIzMCIgeTI9IjI2Ii8+CiAgICAgIDxsaW5lIHgxPSI0MCIgeTE9IjAiIHgyPSI0MCIgeTI9IjI2Ii8+CiAgICAgIDxsaW5lIHgxPSI1MCIgeTE9IjAiIHgyPSI1MCIgeTI9IjI2Ii8+CiAgICAgIDxsaW5lIHgxPSI2MCIgeTE9IjAiIHgyPSI2MCIgeTI9IjI2Ii8+CiAgICAgIDxsaW5lIHgxPSI3MCIgeTE9IjAiIHgyPSI3MCIgeTI9IjI2Ii8+CiAgICA8L2c+CiAgICA8IS0tINi32KjZhCAtLT4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYwLDE3MCkgcm90YXRlKC00KSI+CiAgICAgIDxlbGxpcHNlIGN4PSIzMCIgY3k9IjE0IiByeD0iMzAiIHJ5PSIxMCIvPgogICAgICA8cGF0aCBkPSJNMCAxNCBMNCA0NiBDNCA1MiA1NiA1MiA1NiA0NiBMNjAgMTQiLz4KICAgICAgPGVsbGlwc2UgY3g9IjMwIiBjeT0iNDYiIHJ4PSIyNiIgcnk9IjgiLz4KICAgIDwvZz4KICAgIDwhLS0g2YjbjNmI2YTZhiAo2K7YtyDYs9in2K/ZhykgLS0+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOTAsMTkwKSByb3RhdGUoMTApIj4KICAgICAgPHBhdGggZD0iTTE0IDAgQzQgNCA0IDE2IDE0IDIwIEM0IDI0IDQgMzYgMTQgNDAgQzI0IDM2IDI0IDI0IDE0IDIwIEMyNCAxNiAyNCA0IDE0IDAgWiIvPgogICAgICA8bGluZSB4MT0iMTQiIHkxPSItMjAiIHgyPSIxNCIgeTI9IjAiLz4KICAgICAgPGxpbmUgeDE9IjE0IiB5MT0iNDAiIHgyPSIxNCIgeTI9IjU4Ii8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4=");

  /* پیش‌فرض: تم نُت (صفحات خانه و درباره ما).
     --pattern-light روی زمینه‌های روشن به‌کار می‌رود (بدنه سایت، هدر، .bg-alt) و از نسخه‌ی
     کم‌رنگِ آبی درباری استفاده می‌کند؛ --pattern-dark روی بخش‌های تک‌رنگِ تیره (هیرو/CTA/فوتر/
     هیروی پروفایل استاد) به‌کار می‌رود و از نسخه‌ی سفیدِ کم‌رنگ استفاده می‌کند. */
  --pattern-light: var(--pattern-notes-light);
  --pattern-dark: var(--pattern-notes-dark);
  --pattern-size: 240px 240px;
}

/* =========================================================
   تم پس‌زمینه هر صفحه — به درخواست کارفرما:
   «بک‌گراند با تم نت‌ها برای هر صفحه متفاوت باشه، فقط تم نت نباشه»
   کلاس‌های زیر روی <body> در partials/header.php بر اساس $active_page اضافه می‌شوند.
   چون --pattern-light/--pattern-dark به‌صورت متغیر CSS به همه‌ی قوانین (بدنه، بخش‌های
   bg-alt، هدر، هیرو، فوتر و ...) ارث می‌رسند، همین بازتعریف در body کافی است.
   ========================================================= */
body.page-teachers {
  --pattern-light: var(--pattern-instruments-light);
  --pattern-dark: var(--pattern-instruments-dark);
  --pattern-size: 280px 280px;
}
body.page-academy,
body.page-register {
  --pattern-light: var(--pattern-staff-light);
  --pattern-dark: var(--pattern-staff-dark);
  --pattern-size: 260px 260px;
}

/* ===== ریست ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-main);
  color: var(--color-text);
  /* الگوی نُت موسیقی روی کل سایت، به‌عنوان لایه‌ی پس‌زمینه پایه */
  background-color: var(--color-canvas);
  background-image: var(--pattern-light);
  background-repeat: repeat;
  background-size: var(--pattern-size);
  line-height: 1.8;
  direction: rtl;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; }

/* اصلاح‌شده در بازبینی طراحی: نشانگر فوکوس واضح برای ناوبری با کیبورد (دسترس‌پذیری) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
  /* position+z-index تضمین می‌کند محتوای اصلی همیشه بالاتر از تزئینات پس‌زمینه (.music-decor) بماند */
  position: relative;
  z-index: 1;
}

.section { padding: 90px 0; }
.section-sm { padding: 60px 0; }

.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 50px;
}

.eyebrow {
  display: inline-block;
  color: var(--color-accent);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

/* اصلاح‌شده در بازبینی طراحی: افزودن h1 به همین سلکتور تا صفحات داخلی (غیر از خانه)
   هم یک <h1> معنایی-درست برای عنوان اصلی خود داشته باشند، بدون تغییر ظاهری */
.section-head h1,
.section-head h2 {
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 14px;
}

.section-head p { color: var(--color-text); font-size: 16px; }

.bg-alt {
  background-color: var(--color-canvas-alt);
  background-image: var(--pattern-light);
  background-repeat: repeat;
  background-size: var(--pattern-size);
  /* چون #808080 یک طوسیِ نسبتاً میانه است، متن تیره‌ی معمولی روی آن کنتراست کافی ندارد؛
     به‌جای تغییر رنگ در تک‌تک عنصرها، خود متغیرهای heading/text را در همین محدوده
     بازتعریف می‌کنیم تا همه‌ی قوانین موجود (h1/h2/p/چک‌لیست و...) خودکار خواناتر شوند. */
  --color-heading: var(--color-navy-dark);
  --color-text: var(--color-navy-dark);
}
.bg-alt .eyebrow { color: var(--color-navy-dark); }

/* ===== بخش‌های تک‌رنگِ آبی درباری/سبز زمردی به‌عنوان پس‌زمینه‌ی واقعی بخش (نه فقط نوار CTA) =====
   به درخواست کارفرما: «آبی درباری و سبز کله‌غازی قرار بود بعضی جاها به پس‌زمینه هم تبدیل بشن،
   پس‌زمینه فقط سفید نمیخوام». کارت‌های داخل این بخش‌ها (feature-card/value-card) همچنان سطح
   سفید خودشان را دارند و شناور روی این پس‌زمینه‌ی رنگی دیده می‌شوند. */
.bg-navy, .bg-emerald {
  color: var(--color-white);
  background-image: var(--pattern-dark);
  background-repeat: repeat;
  background-size: var(--pattern-size);
}
.bg-navy { background-color: var(--color-navy-dark); }
.bg-emerald { background-color: var(--color-emerald-dark); }
.bg-navy .section-head h1, .bg-navy .section-head h2,
.bg-emerald .section-head h1, .bg-emerald .section-head h2 { color: var(--color-white); }
.bg-navy .section-head p, .bg-emerald .section-head p { color: rgba(237,240,246,0.82); }
.bg-navy .eyebrow, .bg-emerald .eyebrow { color: var(--color-white); opacity: 0.85; }

/* ===== دکمه‌ها ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 15px;
  transition: all var(--transition);
}

.btn-primary {
  /* گرادینت آبی درباری + سبز زمردی با هم — به درخواست کارفرما: «آبی درباری بیشتر همراه با سبز استفاده بشه» */
  background: linear-gradient(120deg, var(--color-navy), var(--color-emerald));
  color: var(--color-white);
}
.btn-primary:hover { background: linear-gradient(120deg, var(--color-navy-light), var(--color-emerald-light)); transform: translateY(-2px); }

.btn-outline {
  background: transparent;
  color: var(--color-white);
  border: 1.5px solid rgba(237,240,246, 0.6);
}
.btn-outline:hover { background: rgba(237,240,246, 0.12); }

/* دکمه‌ی کانتور برای زمینه‌های خیلی روشن (کاربرد فعلی: هیچ — رزرو برای آینده) */
.btn-outline-dark {
  background: transparent;
  color: var(--color-heading);
  border: 1.5px solid var(--color-navy-light);
}
.btn-outline-dark:hover { background: var(--color-navy-light); color: var(--color-white); }

/* ===== هدر =====
   بازگشت به تم روشن: هدر اکنون سفیدِ نیمه‌شفاف با بلور پس‌زمینه است (نه طوسی و نه آبی)،
   چون در حالت روشن، هدر همیشه یک نوار خنثی و سبک در بالای هر صفحه (چه هیروی آبی/سبز، چه
   بقیه‌ی صفحات سفید) به‌نظر می‌رسد و دیگر با بخش زیرینش تداخل رنگی ندارد. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background-color: rgba(255, 255, 255, 0.88);
  background-image: var(--pattern-light);
  background-repeat: repeat;
  background-size: var(--pattern-size);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 40px; width: 40px; object-fit: contain; border-radius: 8px; border: 1px solid var(--color-border); }
.brand-text { font-weight: 700; color: var(--color-heading); font-size: 15px; line-height: 1.3; }
.brand-text span { display: block; font-weight: 400; font-size: 12px; color: var(--color-text-muted); }

.main-nav ul { display: flex; align-items: center; gap: 6px; }

.main-nav a {
  display: block;
  /* اصلاح‌شده در بازبینی طراحی: افزایش جزئی پدینگ برای رعایت حداقل اندازه هدف لمسی (touch target) */
  padding: 12px 18px;
  border-radius: 30px;
  font-weight: 500;
  font-size: 14.5px;
  color: var(--color-text);
  transition: all var(--transition);
}

.main-nav a:hover,
.main-nav a.active {
  background: var(--color-navy-light);
  color: var(--color-white);
}

.main-nav .cta-link {
  background: var(--color-emerald);
  color: var(--color-white);
}
.main-nav .cta-link:hover { background: var(--color-emerald-light); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--color-heading); border-radius: 2px; }

/* ===== هیرو / اسلایدر ===== */
/* اصلاح‌شده (بازخورد صریح کارفرما: «مربعی باشه نه مستطیلی که نصفه صفحه رو گرفته باشه»):
   ارتفاع قبلی (88vh) روی نمایشگرهای معمولی تقریباً کل صفحه را می‌گرفت. مشکل دومی هم پنهان
   شده بود: عکس‌های واقعیِ آموزشگاه اکثراً «عمودی/پرتره» هستند (مثلاً ۱۰۵۰×۱۴۰۰ پیکسل)، درحالی‌که
   جعبه‌ی قبلی خیلی «افقیِ کشیده» بود (خیلی پهن و کوتاه). وقتی یک عکسِ عمودی با object-fit:cover
   داخل یک جعبه‌ی به‌شدت افقی جا می‌گیرد، فقط یک نوارِ نازکِ افقی از وسط عکس دیده می‌شود — که اگر
   آن نوار به‌طور اتفاقی قسمت ساده/تیره‌ی عکس باشد، دقیقاً همان حسِ «خالی/سیاه» را ایجاد می‌کند
   که چندبار گزارش شد. با کوتاه‌ترکردن قابل‌توجه ارتفاع (به‌جای ۸۸vh از یک بازه‌ی محدودِ
   ۴۲۰ تا ۶۲۰ پیکسل استفاده شده)، هم نسبت جعبه به حالت متعادل‌تر/مربعی‌تری نزدیک می‌شود، هم
   بخش بیشتر و معنادارتری از عکس عمودی در آن نمایش داده می‌شود. */
.hero-slider {
  position: relative;
  height: clamp(420px, 58vh, 620px);
  overflow: hidden;
  color: var(--color-white);
  background-color: var(--color-navy-dark);
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease;
  overflow: hidden;
}

.hero-slide.active { opacity: 1; visibility: visible; z-index: 2; }

/* رفع قطعیِ باگِ تکرارشونده‌ی «بالای اسلاید خالی/سیاه دیده می‌شود»:
   نسخه‌های قبلی عکسِ پس‌زمینه را با CSS (background-image: url(...)) روی خودِ .hero-slide
   می‌گذاشتند. این روش دو مشکل عملی داشت: (۱) اگر عکس با تأخیر یا اصلاً لود نشود (شبکه‌ی کند
   روی سرور واقعی، یا محدودیت مرورگر در بازکردن فایل به‌صورت file:// محلی)، هیچ نشانه‌ای از
   خطا دیده نمی‌شد و کل جعبه فقط رنگ ساده/تیره نشان می‌داد؛ (۲) دیباگ‌کردنش سخت بود چون
   background-image ناموفق، هیچ اثر قابل‌مشاهده یا قابل‌بررسی‌ای در Inspector نمی‌گذاشت.
   برای رفع قطعی، عکس هر اسلاید اکنون یک تگ واقعی <img class="hero-slide-img"> است (نه
   background-image)؛ این یعنی مرورگر آن را دقیقاً مثل بقیه‌ی عکس‌های سایت (لوگو، عکس
   اساتید و ...) که قبلاً درست کار می‌کردند، لود می‌کند. عکس با position:absolute و
   object-fit:cover کل جعبه را کامل و بدون فضای خالی پر می‌کند. */
.hero-slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  display: block;
}

/* لایه‌ی رنگی (تک‌رنگ آبی/سبز، بدون ترکیب) + الگوی نُت، روی خودِ عکس — برای خوانایی متن.
   این لایه یک ::before ساده و مستقل از لود عکس است، پس همیشه (چه عکس لود شود چه نشود)
   کامل و بدون شکاف روی کل جعبه نمایش داده می‌شود. */
.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--pattern-dark);
  background-repeat: repeat;
  background-size: var(--pattern-size);
}
.hero-slide.tint-navy::before { background-color: rgba(11, 23, 48, 0.66); }
.hero-slide.tint-emerald::before { background-color: rgba(6, 67, 47, 0.62); }
/* رنگ پایه‌ی ثابتِ همان تم، مستقیماً روی خودِ اسلاید — اگر <img> به هر دلیلی لود نشود
   (اینترنت قطع، فایل جابه‌جا شده و ...)، پشتِ لایه‌ی نیمه‌شفاف بالا همچنان رنگ کامل و
   یکدستِ برند دیده می‌شود، نه هیچ‌رنگ/سفیدِ خامِ مرورگر. */
.hero-slide.tint-navy { background-color: var(--color-navy-dark); }
.hero-slide.tint-emerald { background-color: var(--color-emerald-dark); }

.hero-slide .container { position: relative; z-index: 2; }

.hero-content { max-width: 640px; }

.hero-content .eyebrow { color: var(--color-white); opacity: 0.85; }

/* اصلاح‌شده در بازبینی طراحی: قبلاً هر ۳ اسلاید هیرو از تگ h1 استفاده می‌کردند
   (یعنی ۳ عدد h1 در یک صفحه — اشکال دسترس‌پذیری/سئو). حالا استایل بر اساس کلاس
   hero-title اعمال می‌شود؛ فقط اسلاید اول h1 است و بقیه h2. */
.hero-content h1,
.hero-content .hero-title {
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 18px;
}

.hero-content p {
  font-size: 17px;
  opacity: 0.9;
  margin-bottom: 32px;
  max-width: 520px;
}

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* نوار معرفی تصویری اساتید داخل اسلاید هیرو */
.hero-teachers { display: flex; margin-bottom: 26px; }
.hero-teacher-avatar {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  overflow: hidden;
  border: 2.5px solid var(--color-white);
  box-shadow: var(--shadow-md);
  margin-inline-start: -14px;
  transition: transform var(--transition);
  flex-shrink: 0;
}
.hero-teacher-avatar:first-child { margin-inline-start: 0; }
.hero-teacher-avatar:hover { transform: translateY(-6px); z-index: 2; }
.hero-teacher-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hero-teacher-icon {
  position: absolute;
  bottom: -2px;
  left: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-emerald);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  border: 1.5px solid var(--color-white);
}

.hero-dots {
  position: absolute;
  bottom: 30px;
  right: 50%;
  transform: translateX(50%);
  display: flex;
  gap: 10px;
  z-index: 3;
}

.hero-dots button {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(237,240,246,0.4);
  transition: all var(--transition);
}
.hero-dots button.active { background: var(--color-white); width: 26px; border-radius: 6px; }

.hero-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(237,240,246,0.15);
  color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  transition: background var(--transition);
}
.hero-arrow:hover { background: rgba(237,240,246,0.3); }
.hero-arrow.prev { right: 24px; }
.hero-arrow.next { left: 24px; }

/* ===== کارت‌های امکانات / ویژگی ===== */
.feature-grid, .instrument-grid, .value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.feature-card, .instrument-card, .value-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-navy-light);
  border-radius: var(--radius-md);
  padding: 30px 24px;
  text-align: center;
  transition: all var(--transition);
}
/* تناوب آبی درباری/سبز زمردی روی نوار بالای کارت‌ها — حضور هم‌زمان هر دو رنگ در کنار هم */
.feature-grid .feature-card:nth-child(even),
.instrument-grid .instrument-card:nth-child(even),
.value-grid .value-card:nth-child(even) {
  border-top-color: var(--color-emerald);
}

.feature-card:hover, .instrument-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.icon-badge {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-navy), var(--color-emerald));
  color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin: 0 auto 18px;
}

.feature-card h3, .instrument-card h3, .value-card h3 { font-size: 17px; color: var(--color-heading); margin-bottom: 8px; }
.feature-card p, .instrument-card p, .value-card p { font-size: 14px; color: var(--color-text); }

/* ===== معرفی کوتاه (خانه) ===== */
.intro-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.intro-media {
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  background-image: var(--pattern-dark), linear-gradient(135deg, var(--color-navy-light), var(--color-navy-dark));
  background-repeat: repeat, no-repeat;
  background-size: var(--pattern-size), cover;
  display: flex; align-items: center; justify-content: center;
  color: rgba(237,240,246,0.75);
  font-size: 15px;
  overflow: hidden;
  position: relative;
}
.intro-media img { width: 100%; height: 100%; object-fit: cover; }

.intro-text h2 { color: var(--color-heading); font-size: 30px; margin-bottom: 16px; }
.intro-text p { color: var(--color-text); margin-bottom: 16px; }

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--color-text);
  font-size: 15px;
}
.check-list li::before {
  content: "✓";
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-emerald);
  color: var(--color-white);
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}

/* ===== نوار فراخوان (CTA) =====
   به‌صورت پیش‌فرض تک‌رنگِ آبی درباری (بدون ترکیب با سبز). برای بخش‌هایی که باید تم سبز
   داشته باشند (مثلاً CTA پروفایل استادهای «سبز»)، کلاس .cta-band.emerald اضافه می‌شود که
   کاملاً تک‌رنگِ سبز است — یعنی آبی و سبز هر کجا لازم بود، جدا از هم به‌کار می‌روند. */
.cta-band {
  background-image: var(--pattern-dark), linear-gradient(120deg, var(--color-navy), var(--color-navy-dark));
  background-repeat: repeat, no-repeat;
  background-size: var(--pattern-size), cover;
  background-position: center, center;
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band.emerald {
  background-image: var(--pattern-dark), linear-gradient(120deg, var(--color-emerald), var(--color-emerald-dark));
}
.cta-band::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.10), transparent 60%);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { font-size: 28px; margin-bottom: 14px; }
.cta-band p { opacity: 0.85; margin-bottom: 26px; }

/* ===== آمار آموزشگاه (تعداد سازها/اتاق‌ها/اساتید/هنرجویان) ===== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 44px;
}
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-emerald);
  border-radius: var(--radius-md);
  padding: 22px 14px;
  text-align: center;
}
.stat-card:nth-child(even) { border-top-color: var(--color-navy-light); }
.stat-card strong {
  display: block;
  font-size: 30px;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 4px;
}
.stat-card span { font-size: 13.5px; color: var(--color-text-muted); }
@media (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== فهرست سازها و رشته‌های تدریس‌شده (روی پس‌زمینه تیره bg-navy) ===== */
.course-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
  margin-top: 12px;
}
.course-row {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 4px;
  border-top: 1px solid rgba(237,240,246,0.14);
  transition: padding-right var(--transition), background var(--transition);
}
.course-list > .course-row:last-child,
.course-list .course-row:nth-last-child(1) { border-bottom: 1px solid rgba(237,240,246,0.14); }
.course-row:hover { padding-right: 12px; background: rgba(237,240,246,0.05); }
.course-ico { font-size: 22px; width: 30px; text-align: center; flex-shrink: 0; }
.course-name { flex: 1; font-size: 16.5px; color: var(--color-white); }
.course-idx { font-size: 12.5px; color: rgba(237,240,246,0.55); font-variant-numeric: tabular-nums; }
@media (max-width: 768px) {
  .course-list { grid-template-columns: 1fr; column-gap: 0; }
}

/* ===== گالری placeholder ===== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.gallery-item {
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  font-size: 13px;
  text-align: center;
  padding: 10px;
  overflow: hidden;
  position: relative;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
/* کپشن روی گالری — از همان alt عکس (که از پنل مدیریت قابل‌ویرایش است) ساخته می‌شود */
.gallery-caption {
  position: absolute; inset: auto 0 0 0;
  padding: 10px 14px;
  font-size: 13px; font-weight: 500; color: #fff;
  text-align: right;
  background: linear-gradient(to top, rgba(7,13,20,0.78), rgba(7,13,20,0));
}

/* ===== شمارنده‌ی متحرک کارت آماری ===== */
.stat-counter { font-variant-numeric: tabular-nums; }

.video-frame {
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  background-color: var(--color-navy-dark);
  background-image: var(--pattern-dark);
  background-repeat: repeat;
  background-size: var(--pattern-size);
  color: rgba(237,240,246,0.7);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: 15px;
  padding: 20px;
  overflow: hidden;
}
.video-frame video, .video-frame iframe { width: 100%; height: 100%; border: 0; }

/* ===== اساتید ===== */
.teacher-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-navy-light);
  transition: all var(--transition);
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
/* نوار بالای کارت هم‌رنگ تمِ ساز همان استاد — تناوب طبیعی آبی درباری/سبز زمردی */
.teacher-card.theme-emerald {
  border-top-color: var(--color-emerald);
}
.teacher-card:hover { box-shadow: var(--shadow-md); transform: translateY(-6px); }
.teacher-card:hover .teacher-card-link { color: var(--color-heading); gap: 8px; }
.teacher-card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent);
  transition: all var(--transition);
}

.teacher-photo {
  aspect-ratio: 1/1;
  background: linear-gradient(135deg, var(--color-navy-light), var(--color-navy-dark));
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  font-size: 13px;
  text-align: center;
  position: relative;
}
.teacher-photo img { width: 100%; height: 100%; object-fit: cover; }

/* نشان دایره‌ای ساز هر استاد — «تم همان ساز» روی عکس پروفایل */
.instrument-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-navy), var(--color-emerald));
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  box-shadow: var(--shadow-md);
  border: 2.5px solid var(--color-white);
}

.teacher-info { padding: 20px; }
.teacher-info h3 { color: var(--color-heading); font-size: 17px; margin-bottom: 4px; }
.teacher-info .instrument-tag {
  display: inline-block;
  background: rgba(57, 85, 49, 0.18);
  color: var(--color-accent);
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 10px;
}
.teacher-info p { font-size: 14px; color: var(--color-text); }

.teacher-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ===== صفحه پروفایل اختصاصی استاد (teacher.php) — تم بصری بر اساس ساز =====
   دو حالت رنگی در چارچوب پالت رسمی سایت: theme-navy (آبی درباری غالب) و
   theme-emerald (سبز زمردی غالب). فقط جهت/ترکیب گرادینت فرق دارد، رنگ جدیدی
   اضافه نشده تا با تصمیم اولیه رنگ‌بندی پروژه هماهنگ بماند. */
.teacher-hero {
  padding: 56px 0 64px;
  position: relative;
  overflow: hidden;
  color: var(--color-white);
}
.teacher-hero.theme-navy {
  background-image: var(--pattern-dark), linear-gradient(135deg, var(--color-navy), var(--color-navy-dark));
  background-repeat: repeat, no-repeat;
  background-size: var(--pattern-size), cover;
}
.teacher-hero.theme-emerald {
  /* تک‌رنگِ سبز (روشن به تیره)، بدون ترکیب با آبی درباری */
  background-image: var(--pattern-dark), linear-gradient(135deg, var(--color-emerald-light), var(--color-emerald-dark));
  background-repeat: repeat, no-repeat;
  background-size: var(--pattern-size), cover;
}
.teacher-back {
  position: relative;
  z-index: 1;
  display: inline-block;
  color: rgba(237,240,246,0.8);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 28px;
  transition: color var(--transition);
}
.teacher-back:hover { color: var(--color-white); }
.teacher-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  align-items: center;
}
.teacher-hero-photo {
  position: relative;
  width: 220px;
  height: 275px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 5px solid rgba(237,240,246,0.85);
  box-shadow: 0 16px 40px rgba(14, 23, 32, 0.35);
  background: linear-gradient(135deg, var(--color-navy-light), var(--color-navy-dark));
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  font-size: 13px;
  text-align: center;
  flex-shrink: 0;
}
.teacher-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.instrument-icon-lg {
  width: 62px;
  height: 62px;
  font-size: 30px;
  top: auto;
  bottom: -10px;
  right: -10px;
}
.teacher-hero-text .eyebrow { color: rgba(237,240,246,0.85); }
.teacher-hero-text h1 { color: var(--color-white); font-size: 34px; margin-bottom: 14px; }
.instrument-tag-lg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(237,240,246,0.14);
  color: var(--color-white);
  font-size: 14.5px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 24px;
  border: 1px solid rgba(237,240,246,0.25);
}

.teacher-bio-wrap {
  max-width: 780px;
  margin: 0 auto;
}
.teacher-bio-wrap h2 { color: var(--color-heading); font-size: 26px; margin-bottom: 16px; }
.teacher-bio-wrap p { color: var(--color-text); font-size: 16px; line-height: 2; }

/* بخش‌های ساختاریافته معرفی استاد (بیوگرافی/مدارک/سوابق هنری/سوابق تدریس و ...) */
.teacher-bio-section { margin-bottom: 26px; }
.teacher-bio-section:last-child { margin-bottom: 0; }
.teacher-bio-section h3 {
  color: var(--color-accent);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
  padding-inline-start: 12px;
  border-inline-start: 3px solid var(--color-accent);
}
.teacher-bio-section p { color: var(--color-text); font-size: 16px; line-height: 2; }

@media (max-width: 768px) {
  .teacher-hero-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .teacher-hero-text h1 { font-size: 26px; }
}

/* گالری عکس‌های اضافی استاد (فقط اگر teacher['photos'] در teachers-data.php پر شده باشد) */
.teacher-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.teacher-gallery-item {
  aspect-ratio: 3/4; /* عکس‌های افراد عمودی‌اند؛ مربع، سر را می‌برید */
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.teacher-gallery-item img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
@media (max-width: 768px) {
  .teacher-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== چیپ سازها ===== */
.chip-list { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px;
  border-radius: 30px;
  background: var(--color-surface);
  border: 1px solid var(--color-navy-light);
  color: var(--color-heading);
  font-weight: 600;
  font-size: 14.5px;
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}
/* چیپ‌ها حالا لینک مستقیم به فرم ثبت‌نام با همان ساز پیش‌انتخاب‌شده‌اند */
a.chip:hover { transform: translateY(-2px); border-color: var(--color-accent); background: var(--color-surface-2); }

/* ===== فرم ثبت‌نام ===== */
.form-wrap {
  max-width: 620px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-navy-light);
  border-radius: var(--radius-lg);
  padding: 44px;
  box-shadow: var(--shadow-sm);
}

.form-row { margin-bottom: 20px; }
.form-row label {
  display: block;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--color-heading);
  margin-bottom: 8px;
}
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  color: var(--color-heading);
  background: var(--color-canvas);
  transition: border-color var(--transition);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 25%, transparent);
  background: var(--color-surface);
}
.form-row textarea { resize: vertical; min-height: 100px; }

.form-submit {
  width: 100%;
  justify-content: center;
  font-size: 16px;
  padding: 15px;
}

.form-note {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 14px;
  text-align: center;
}

.form-alert {
  display: none;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  font-size: 14.5px;
  font-weight: 500;
}
.form-alert.show { display: block; }
.form-alert.success { background: rgba(57,85,49,0.14); color: var(--color-emerald-dark); }
.form-alert.error { background: rgba(220,80,80,0.14); color: #a83232; }

/* ===== فوتر ===== */
.site-footer {
  background-color: var(--color-navy-dark);
  background-image: var(--pattern-dark);
  background-repeat: repeat;
  background-size: var(--pattern-size);
  color: rgba(237,240,246,0.8);
  padding: 70px 0 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.3fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(237,240,246,0.1);
}

.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-brand img { height: 40px; width: 40px; object-fit: contain; border-radius: 8px; background: var(--color-white); padding: 3px; }
.footer-brand span { font-weight: 700; color: var(--color-white); font-size: 15px; }

.footer-col h4 { color: var(--color-white); font-size: 15px; margin-bottom: 18px; }
.footer-col ul li { margin-bottom: 10px; font-size: 14px; }
.footer-col ul li a { transition: color var(--transition); }
.footer-col ul li a:hover { color: var(--color-accent-on-dark); } /* قبلاً سبز تیره بود: هاور، لینک را کم‌رنگ‌تر می‌کرد */

.footer-bottom {
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  /* اصلاح‌شده در بازبینی طراحی: opacity از 0.55 به 0.7 افزایش یافت تا کنتراست متن
     روی پس‌زمینه تیره فوتر برای خوانایی بهتر تضمین شود */
  color: rgba(237,240,246,0.7);
}

.social-icons { display: flex; gap: 10px; }
.social-icons a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(237,240,246,0.08);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
}
.social-icons a:hover { background: var(--color-emerald); }

/* ===== ریسپانسیو ===== */
@media (max-width: 992px) {
  .feature-grid, .instrument-grid { grid-template-columns: repeat(2, 1fr); }
  .teacher-grid { grid-template-columns: repeat(2, 1fr); }
  .intro-split { grid-template-columns: 1fr; gap: 34px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .main-nav { position: fixed; inset: 70px 0 0 0; background: var(--color-canvas); padding: 20px; transform: translateY(-120%); opacity: 0; transition: all var(--transition); z-index: 400; }
  .main-nav.open { transform: translateY(0); opacity: 1; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 4px; }
  .main-nav a { text-align: center; padding: 14px; }
  .nav-toggle { display: flex; }
  .feature-grid, .instrument-grid, .value-grid { grid-template-columns: 1fr 1fr; }
  .teacher-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 40px 24px; }
  .form-wrap { padding: 28px 20px; }
  .gallery-grid { grid-template-columns: 1fr; }
  .hero-arrow { display: none; }
}

/* =========================================================
   تزئینات موسیقی پس‌زمینه (نُت‌های شناور، اکولایزر)
   ========================================================= */

/* والد هر بخشی که تزئین پس‌زمینه دارد باید position:relative داشته باشد
   تا نت‌ها به‌درستی داخل همان بخش قرار بگیرند (خودِ این کلاس همین کار را می‌کند) */
.decor-host { position: relative; overflow: hidden; }

.music-decor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  line-height: 1;
  font-family: 'DejaVu Sans', Arial, sans-serif; /* گلیف‌های نت موسیقی یونیکد در این فونت‌ها پایدارند */
}

/* روی پس‌زمینه‌های تک‌رنگِ تیره (هیرو، CTA، فوتر، هیروی پروفایل استاد) نت‌ها سفید و کم‌رنگ‌اند */
.music-decor.on-dark { color: rgba(237,240,246, 0.16); }
/* داخل هیرو، لایه تیره‌ی ::before با z-index:1 روی همه چیز می‌افتد؛
   نت‌ها باید بالاتر از آن ولی پایین‌تر از متن (که z-index:2 دارد) باشند */
.hero-slide .music-decor { z-index: 1; }
/* روی پس‌زمینه‌های روشن (سفید/طوسیِ روشن) نت‌ها آبیِ درباریِ بسیار کم‌رنگ‌اند */
.music-decor.on-light { color: rgba(36, 59, 82, 0.07); }
.music-decor.on-light.accent { color: rgba(29, 43, 25, 0.16); }

@keyframes note-float-a {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-22px) rotate(6deg); }
}
@keyframes note-float-b {
  0%, 100% { transform: translateY(0) rotate(5deg); }
  50%      { transform: translateY(-14px) rotate(-6deg); }
}
@keyframes note-float-c {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  50%      { transform: translateY(-30px) rotate(3deg) scale(1.06); }
}

.music-decor.float-a,
.instrument-decor.float-a { animation: note-float-a 7s ease-in-out infinite; }
.music-decor.float-b,
.instrument-decor.float-b { animation: note-float-b 8.5s ease-in-out infinite; }
.music-decor.float-c,
.instrument-decor.float-c { animation: note-float-c 6.2s ease-in-out infinite; }
.music-decor.delay-1,
.instrument-decor.delay-1 { animation-delay: .8s; }
.music-decor.delay-2,
.instrument-decor.delay-2 { animation-delay: 1.6s; }
.music-decor.delay-3,
.instrument-decor.delay-3 { animation-delay: 2.4s; }
.music-decor.delay-4,
.instrument-decor.delay-4 { animation-delay: 3.2s; }

/* نماد خطی ساز، بزرگ و مینیمال، در پس‌زمینه صفحه پروفایل استاد —
   به درخواست کارفرما: «مینیمال و بدون رنگ، ولی در حدی بزرگ و قابل تشخیص» */
.instrument-decor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.instrument-decor svg { width: 100%; height: 100%; display: block; }
.instrument-decor.on-dark { color: rgba(237,240,246, 0.12); }
.instrument-decor.on-light { color: rgba(36, 59, 82, 0.07); }
.hero-slide .instrument-decor, .teacher-hero .instrument-decor { z-index: 1; }

/* نمادِ ماسک‌شده برای پیانو — جایگزین نسخه‌ی SVGِ دستی، با عکس ارسالی کارفرما.
   چون تصویر یک PNG رستری است (نه SVG با currentColor)، رنگ‌پذیری آن با تکنیک
   CSS mask-image شبیه‌سازی شده: خود عکس فقط به‌عنوان «ماسک» عمل می‌کند (کجا دیده شود)
   و رنگ واقعی از background-color: currentColor می‌آید — دقیقاً همان رفتار بصری
   نمادهای SVGِ دیگر (درام/ویولن/نُت) روی .on-light/.on-dark. */
.instrument-mask {
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* اکولایزر کوچک تزئینی (کنار لوگو در هدر و در فوتر) */
.eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
  margin-inline-start: 8px;
}
.eq span {
  width: 3px;
  border-radius: 2px;
  background: var(--color-accent);
  animation: eq-bounce 1.1s ease-in-out infinite;
}
.eq span:nth-child(1) { height: 40%; animation-delay: 0s; }
.eq span:nth-child(2) { height: 100%; animation-delay: .15s; }
.eq span:nth-child(3) { height: 65%; animation-delay: .3s; }
.eq span:nth-child(4) { height: 85%; animation-delay: .45s; }
.eq.eq-light span { background: rgba(237,240,246,0.75); }

@keyframes eq-bounce {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1); }
}

/* =========================================================
   انیمیشن‌های ورود عناصر هنگام اسکرول (Scroll Reveal)
   با JavaScript خالص در main.js کنترل می‌شود (IntersectionObserver)
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.21,.6,.35,1), transform .7s cubic-bezier(.21,.6,.35,1);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

.reveal-zoom { opacity: 0; transform: scale(.92); transition: opacity .6s ease, transform .6s ease; }
.reveal-zoom.in-view { opacity: 1; transform: scale(1); }

/* تاخیر پلکانی برای گریدها (کارت‌ها یکی‌یکی ظاهر شوند) */
.stagger > *:nth-child(1) { transition-delay: .05s; }
.stagger > *:nth-child(2) { transition-delay: .15s; }
.stagger > *:nth-child(3) { transition-delay: .25s; }
.stagger > *:nth-child(4) { transition-delay: .35s; }
.stagger > *:nth-child(5) { transition-delay: .45s; }
.stagger > *:nth-child(6) { transition-delay: .55s; }

/* ورود اولیه محتوای هیرو (بدون نیاز به اسکرول، همان لحظه بارگذاری) */
@keyframes hero-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-slide.active .eyebrow    { animation: hero-in .7s ease both; }
.hero-slide.active .hero-title,
.hero-slide.active h1          { animation: hero-in .7s ease .12s both; }
.hero-slide.active p            { animation: hero-in .7s ease .24s both; }
.hero-slide.active .hero-actions{ animation: hero-in .7s ease .36s both; }

/* لینک‌های منو: خط زیرین متحرک هنگام هاور */
.main-nav a:not(.cta-link) { position: relative; }
.main-nav a:not(.cta-link)::after {
  content: "";
  position: absolute;
  right: 18px; left: 18px; bottom: 6px;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition);
}
.main-nav a:not(.cta-link):hover::after,
.main-nav a:not(.cta-link).active::after { transform: scaleX(1); }

/* احترام به تنظیم کاربرانی که انیمیشن کمتر ترجیح می‌دهند */
@media (prefers-reduced-motion: reduce) {
  .music-decor,
  .instrument-decor,
  .eq span,
  .hero-slide.active .eyebrow,
  .hero-slide.active .hero-title,
  .hero-slide.active h1,
  .hero-slide.active p,
  .hero-slide.active .hero-actions {
    animation: none !important;
  }
  .reveal, .reveal-zoom {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (max-width: 768px) {
  .music-decor, .instrument-decor { display: none; } /* در موبایل، تزئینات پس‌زمینه برای تمرکز بیشتر روی محتوا مخفی می‌شوند */
}

/* =========================================================
   دکمه‌ی سوییچ تم روشن/تیره (Dark Mode Toggle)
   به درخواست کارفرما: «تم دارک مود اضافه شه... قابلیت سوییچ هم باشه»
   ========================================================= */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
  flex-shrink: 0;
}
.theme-toggle:hover { transform: rotate(12deg); }
.theme-toggle-icon { font-size: 18px; line-height: 1; }
.theme-toggle .icon-moon { display: none; color: var(--color-navy); }
.theme-toggle .icon-sun { display: block; color: var(--color-emerald); }
html[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: block; color: #f4d878; }

/* =========================================================
   تم تیره (Dark Mode) — با selector سطح <html> که تمام
   متغیرهای رنگی پایه را بازتعریف می‌کند؛ چون کل سایت روی
   متغیرهای CSS بنا شده، همین بازتعریف برای اکثر عناصر کافی است
   و ساختار HTML/کلاس‌های صفحات نیازی به تغییر ندارند.
   ========================================================= */
html[data-theme="dark"] {
  --color-canvas: #10151c;
  --color-canvas-alt: #1b222c;
  --color-surface: #1a212b;
  --color-surface-2: #222a35;
  --color-border: rgba(237, 241, 246, 0.12);
  --color-border-soft: rgba(237, 241, 246, 0.06);

  --color-heading: #edf1f6;
  --color-text: #c7ced9;
  --color-text-muted: #8b93a3;

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* پس‌زمینه‌ی تزئینیِ نُت/خط‌حامل/سازها روی سطوح روشنِ سابق (بدنه، هدر، bg-alt)
   در تم تیره باید از نسخه‌ی سفیدرنگِ الگو استفاده کند، نه نسخه‌ی آبی‌رنگِ روشن؛
   بنابراین به‌ازای هر تمِ صفحه (پیش‌فرض/اساتید/آموزشگاه) نسخه‌ی dark همان الگو جایگزین می‌شود. */
html[data-theme="dark"] body { --pattern-light: var(--pattern-notes-dark); }
html[data-theme="dark"] body.page-teachers { --pattern-light: var(--pattern-instruments-dark); }
html[data-theme="dark"] body.page-academy,
html[data-theme="dark"] body.page-register { --pattern-light: var(--pattern-staff-dark); }

html[data-theme="dark"] .site-header {
  background-color: rgba(16, 21, 28, 0.88);
  border-bottom: 1px solid var(--color-border);
}

/* .bg-alt در حالت روشن برای کنتراست روی طوسیِ #808080 مقادیر heading/text را به
   navy-dark بازتعریف کرده بود؛ در تم تیره باید همان مقادیر روشنِ پیش‌فرض تم تیره
   برگردانند وگرنه متن تیره روی زمینه‌ی تیره‌ی .bg-alt ناخوانا می‌شود. */
html[data-theme="dark"] .bg-alt {
  --color-heading: #edf1f6;
  --color-text: #c7ced9;
}
html[data-theme="dark"] .bg-alt .eyebrow { color: var(--color-accent); }

/* رنگ متن پیام‌های فرم روی زمینه‌ی تیره باید روشن‌تر شود تا کنتراست کافی حفظ شود */
html[data-theme="dark"] .form-alert.success { color: #8fd18a; }
html[data-theme="dark"] .form-alert.error { color: #f2a3a3; }

/* =========================================================
   v28 — تم تیره به‌عنوان تم اصلی سایت + اصلاحات دسترس‌پذیری
   ---------------------------------------------------------
   از این نسخه <html data-theme="dark"> به‌صورت پیش‌فرض سمت سرور رندر می‌شود.
   بلوک زیر فقط مقادیری را اصلاح می‌کند که در تم تیره کنتراست کافی نداشتند
   (رنگ‌های برند بسیار تیره‌اند و روی زمینه‌ی تیره گم می‌شدند).
   ========================================================= */
html { color-scheme: light; }
html[data-theme="dark"] {
  color-scheme: dark; /* اسکرول‌بار، کنترل‌های فرم و autofill مرورگر هم تیره می‌شوند */
  --color-accent: #a3d392;
  --color-focus: #a3d392;
}

/* بخش‌های رنگی در تم تیره: قبلاً navy-dark (#0e1720) و emerald-dark (#121b10) تقریباً هم‌رنگ
   بوم تیره (#10151c) بودند و مرز بخش‌ها از بین می‌رفت. کمی روشن‌تر و اشباع‌تر شدند. */
html[data-theme="dark"] .bg-navy { background-color: #16283c; }
html[data-theme="dark"] .bg-emerald { background-color: #182a17; }
html[data-theme="dark"] .site-footer { background-color: #0b1016; border-top: 1px solid var(--color-border); }

/* دکمه‌ها: گرادینت navy→emerald روی زمینه‌ی تیره «گل‌آلود» دیده می‌شد */
html[data-theme="dark"] .btn-primary {
  background: linear-gradient(120deg, #3d6a95, #4b7a3f);
  box-shadow: 0 8px 22px -10px rgba(120, 190, 110, 0.55);
}
html[data-theme="dark"] .btn-primary:hover { background: linear-gradient(120deg, #4a7aa8, #5a8d4c); }
html[data-theme="dark"] .main-nav .cta-link { background: #4b7a3f; }
html[data-theme="dark"] .main-nav .cta-link:hover { background: #5a8d4c; }
html[data-theme="dark"] .main-nav a:not(.cta-link):hover,
html[data-theme="dark"] .main-nav a:not(.cta-link).active { background: rgba(163, 211, 146, 0.12); color: var(--color-heading); }

/* نوار رنگی بالای کارت‌ها و نشان‌ها در تم تیره */
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .value-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .teacher-card { border-top-color: #3d6a95; }
html[data-theme="dark"] .feature-grid .feature-card:nth-child(even),
html[data-theme="dark"] .value-grid .value-card:nth-child(even),
html[data-theme="dark"] .stat-card:nth-child(odd),
html[data-theme="dark"] .teacher-card.theme-emerald { border-top-color: #4b7a3f; }
html[data-theme="dark"] .teacher-info .instrument-tag { background: rgba(163, 211, 146, 0.12); }
html[data-theme="dark"] .check-list li::before { background: #4b7a3f; }
html[data-theme="dark"] .chip { border-color: rgba(163, 211, 146, 0.35); }
html[data-theme="dark"] .teacher-card:hover,
html[data-theme="dark"] .feature-card:hover { box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(163, 211, 146, 0.18); }

/* روی بخش‌های همیشه‌تیره (هیرو/فوتر/CTA/bg-navy/bg-emerald/هیروی استاد) حلقه‌ی فوکوس روشن باشد */
.hero-slider, .site-footer, .cta-band, .bg-navy, .bg-emerald, .teacher-hero { --color-focus: #edf1f6; }

/* ===== دسترس‌پذیری (v28) ===== */
.skip-link {
  position: absolute; top: -60px; right: 16px; z-index: 1000;
  background: var(--color-surface); color: var(--color-heading);
  padding: 10px 16px; border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  transition: top var(--transition);
}
.skip-link:focus { top: 12px; }

/* فیلد ضداسپم فرم — از دید کاربر و صفحه‌خوان مخفی */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* منوی موبایل بسته نباید با Tab قابل‌فوکوس بماند (قبلاً فقط شفاف/جابه‌جا می‌شد) */
@media (max-width: 768px) {
  .main-nav { visibility: hidden; }
  .main-nav.open { visibility: visible; }
  body.nav-locked { overflow: hidden; }
  .nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.active span:nth-child(2) { opacity: 0; }
  .nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-toggle span { transition: transform var(--transition), opacity var(--transition); }
}

/* نقطه‌های اسلایدر: هدف لمسی ۱۰px بسیار کوچک بود — ناحیه‌ی کلیک ۲۴px، ظاهر همان نقطه‌ی کوچک */
.hero-dots button { position: relative; background: transparent !important; width: 24px !important; height: 24px !important; }
.hero-dots button::after {
  content: ""; position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(237,240,246,0.4); transition: all var(--transition);
}
.hero-dots button.active::after { background: var(--color-white); width: 26px; border-radius: 6px; }
.hero-dots { gap: 2px; }

/* کارت‌های اساتید هم‌ارتفاع: بیوگرافی خلاصه حداکثر ۴ خط */
.teacher-bio-excerpt {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.teacher-card { display: flex; flex-direction: column; }
.teacher-info { flex: 1; display: flex; flex-direction: column; }
.teacher-card-link { margin-top: auto; padding-top: 10px; }

/* نوار «درخواست کلاس با استاد X» در فرم ثبت‌نام */
.form-teacher-pick {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 20px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  color: var(--color-text); font-size: 14.5px;
}
.form-teacher-pick img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; }
.form-note a { color: var(--color-accent); font-weight: 600; }

/* ===== v29: صفحه‌های دلخواه (page.php) ===== */
.page-content { max-width: 760px; margin: 0 auto; color: var(--color-text); font-size: 16.5px; line-height: 2.05; }
.page-content h2 { color: var(--color-heading); font-size: 24px; margin: 34px 0 12px; }
.page-content h3 { color: var(--color-accent); font-size: 18px; margin: 26px 0 10px; }
.page-content p { margin-bottom: 16px; }
.page-content ul { list-style: none; margin: 0 0 18px; }
.page-content ul li { position: relative; padding-inline-start: 22px; margin-bottom: 8px; }
.page-content ul li::before { content: ""; position: absolute; right: 0; top: 0.8em; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }
.page-content strong { color: var(--color-heading); }
.page-content-image { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: 30px; }
.video-frame iframe, .video-frame video { width: 100%; height: 100%; border: 0; display: block; }
.video-frame:has(iframe), .video-frame:has(video) { padding: 0; }

/* =========================================================
   v30 — رفع ریشه‌ای باگ «اسلایدر خالی/پایین‌افتاده»
   ---------------------------------------------------------
   هر اسلاید هم کلاس .hero-slide دارد (position:absolute) و هم .decor-host (position:relative).
   چون قانون .decor-host پایین‌تر در همین فایل آمده و وزن برابر دارد، position:relative برنده
   می‌شد؛ در نتیجه اسلایدها به‌جای روی‌هم قرار گرفتن، زیر هم چیده می‌شدند. اسلاید اول درست دیده
   می‌شد، ولی از اسلاید دوم به بعد، جای اسلایدهای قبلی خالی/تیره می‌ماند و اسلاید فعال به پایین
   کادر رانده می‌شد. این همان «بالای اسلاید خالی است» بود که از نسخه‌های قبل گزارش می‌شد.
   این قانون با وزن بیشتر، موقعیت درست اسلایدها را قطعی می‌کند.
   ========================================================= */
.hero-slider > .hero-slide { position: absolute; inset: 0; }

/* =========================================================
   v31 — نام و نشان آکادمی پررنگ‌تر + اسلایدر مربعی‌تر + انیمیشن لوگو
   ========================================================= */

/* ----- نشان AB در هدر (به‌جای عکس JPG با کادر سفید) ----- */
.brand-mark { height: 46px; width: auto; flex-shrink: 0; color: var(--color-heading); }
.brand-mark path, .footer-mark path { fill: currentColor; }
.brand { gap: 14px; }
.brand-text { font-size: 17px; font-weight: 800; letter-spacing: 0.2px; }
.brand-text span { font-size: 11.5px; letter-spacing: 0.6px; margin-top: 2px; }
.brand:hover .brand-mark { color: var(--color-accent); transition: color var(--transition); }
.footer-mark { height: 38px; width: auto; color: var(--color-white); flex-shrink: 0; }
@media (max-width: 768px) {
  .brand-mark { height: 36px; }
  .brand-text { font-size: 14.5px; }
  .brand-text span { display: none; }
  .brand .eq { display: none; }
}

/* ----- اسلایدر: به‌جای نوار پهن تمام‌عرض (~۳:۱)، یک کارت با نسبت نزدیک‌تر به مربع ----- */
.hero-slider {
  width: calc(100% - 48px);
  max-width: calc(var(--container-width) - 48px);
  margin: 24px auto 0;
  height: auto;
  aspect-ratio: 16 / 9;
  min-height: 460px;
  max-height: calc(100vh - 130px);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.65);
  isolation: isolate;
}
.hero-slider .container { padding: 0 clamp(24px, 5vw, 64px); }
@media (max-width: 1100px) {
  .hero-slider { aspect-ratio: 4 / 3; }
}
@media (max-width: 768px) {
  .hero-slider { width: calc(100% - 24px); margin-top: 12px; aspect-ratio: 4 / 5; min-height: 540px; max-height: none; border-radius: 22px; }
  .hero-content h1, .hero-content .hero-title { font-size: 30px; }
  .hero-content p { font-size: 15px; margin-bottom: 22px; }
  .hero-dots { bottom: 16px; }
}

/* ----- انیمیشن لوگو هنگام ورود ----- */
.intro-splash {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 42%, #1a2839 0%, #0b1016 72%);
  color: #edf1f6;
  cursor: pointer;
  animation: intro-out 0.6s ease 2.6s forwards;
}
html:not([data-theme="dark"]) .intro-splash {
  background: radial-gradient(circle at 50% 42%, #ffffff 0%, #e8edf3 72%);
  color: var(--color-navy);
}
.no-intro .intro-splash { display: none; }
.intro-splash.skip { animation: intro-out 0.3s ease forwards; }
.intro-inner { text-align: center; padding: 24px; }
.intro-mark { width: min(280px, 62vw); height: auto; overflow: visible; display: block; margin: 0 auto; }
.intro-mark path {
  fill: currentColor; fill-opacity: 0;
  stroke: currentColor; stroke-width: 4; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: intro-draw 1.35s cubic-bezier(.6, .1, .3, 1) 0.15s forwards, intro-fill 0.55s ease 1.3s forwards;
}
.intro-name {
  margin-top: 26px; font-size: clamp(19px, 3.2vw, 28px); font-weight: 800; letter-spacing: 0.4px;
  opacity: 0; transform: translateY(12px);
  animation: intro-up 0.6s ease 1.45s forwards;
}
.intro-eq { display: flex; justify-content: center; align-items: flex-end; gap: 4px; height: 18px; margin-top: 16px; opacity: 0; animation: intro-up 0.5s ease 1.7s forwards; }
.intro-eq span { width: 4px; border-radius: 2px; background: #a3d392; animation: intro-eq-bounce 0.9s ease-in-out infinite; }
.intro-eq span:nth-child(1) { height: 40%; }
.intro-eq span:nth-child(2) { height: 90%; animation-delay: .12s; }
.intro-eq span:nth-child(3) { height: 60%; animation-delay: .24s; }
.intro-eq span:nth-child(4) { height: 100%; animation-delay: .36s; }
.intro-eq span:nth-child(5) { height: 50%; animation-delay: .48s; }
@keyframes intro-draw { to { stroke-dashoffset: 0; } }
@keyframes intro-fill { to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes intro-up { to { opacity: 1; transform: none; } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .intro-splash { display: none; } }
/* نام آکادمی و گزینه‌های منو هرگز دوخطی نشوند؛ در عرض‌های متوسط فاصله‌ها جمع‌تر می‌شود */
.brand-text { white-space: nowrap; }
.main-nav a { white-space: nowrap; }
@media (max-width: 1240px) and (min-width: 769px) {
  .main-nav a { padding: 10px 12px; font-size: 14px; }
  .brand .eq { display: none; }
  .brand-mark { height: 40px; }
  .brand-text { font-size: 15.5px; }
}
@media (max-width: 960px) and (min-width: 769px) {
  .brand-text span { display: none; }
  .main-nav a { padding: 9px 9px; font-size: 13.5px; }
}

@keyframes intro-eq-bounce { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }

/* =========================================================
   v33 — «صحنه»ی پشت اسلایدر (به‌جای حاشیه‌ی سفید دو طرف)
   ========================================================= */
.hero-stage {
  position: relative;
  overflow: hidden;
  padding: 26px 0 34px;
  background: radial-gradient(ellipse at 50% 0%, #1f3550 0%, #0e1720 75%);
  isolation: isolate;
}
.hero-stage::before {
  content: "";
  position: absolute; inset: -60px;
  z-index: -2;
  background-image: var(--stage-img, none);
  background-size: cover; background-position: center;
  filter: blur(46px) saturate(1.15) brightness(0.55);
  transform: scale(1.1);
  transition: background-image 0.8s ease;
}
.hero-stage::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(14,23,32,0.35), rgba(14,23,32,0.15) 40%, rgba(14,23,32,0.55)),
    var(--pattern-dark);
  background-size: auto, var(--pattern-size);
}
.hero-stage .hero-slider { margin-top: 0; box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255,255,255,0.06); }
@media (max-width: 768px) {
  .hero-stage { padding: 12px 0 20px; }
}

/* عکس بالای صفحه‌های دلخواه — قاب با نسبت ثابت تا تنظیم کادرِ پنل دقیقاً همان‌طور دیده شود */
.page-content-image { width: 100%; max-height: none; aspect-ratio: 21 / 9; overflow: hidden; border-radius: var(--radius-lg); margin-bottom: 30px; }
.page-content-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* زوم عکس نباید از قاب بیرون بزند */
.teacher-photo { overflow: hidden; }
.form-teacher-pick img { transform: none !important; }

/* =========================================================
   v34 — آیکون‌ها، کارت گرد اساتید، تنظیم عکس جدا برای هر دستگاه
   ========================================================= */

/* آیکون‌های خطی (جایگزین ایموجی) — رنگ از متن اطراف */
.ic { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.ic-text { font-style: normal; }
.chip .chip-ic { color: var(--color-accent); margin-inline-end: 2px; }
.course-ico { color: var(--color-accent); display: inline-flex; align-items: center; justify-content: center; }
.icon-badge .ic { color: inherit; }
.music-decor .ic { width: auto; height: 1em; }
.hero-teacher-icon .ic { color: #fff; }

/* تنظیم کادر عکس جدا برای کامپیوتر / تبلت / موبایل (اسلایدر صفحه اول) */
.pos-resp {
  object-position: var(--pdx, 50%) var(--pdy, 50%);
  transform: scale(var(--pdz, 1));
  transform-origin: var(--pdx, 50%) var(--pdy, 50%);
}
@media (max-width: 1100px) {
  .pos-resp {
    object-position: var(--ptx, var(--pdx, 50%)) var(--pty, var(--pdy, 50%));
    transform: scale(var(--ptz, var(--pdz, 1)));
    transform-origin: var(--ptx, var(--pdx, 50%)) var(--pty, var(--pdy, 50%));
  }
}
@media (max-width: 768px) {
  .pos-resp {
    object-position: var(--pmx, var(--ptx, var(--pdx, 50%))) var(--pmy, var(--pty, var(--pdy, 50%)));
    transform: scale(var(--pmz, var(--ptz, var(--pdz, 1))));
    transform-origin: var(--pmx, var(--ptx, var(--pdx, 50%))) var(--pmy, var(--pty, var(--pdy, 50%)));
  }
}

/* ----- کارت اساتید: عکس گرد، چهار استاد در هر ردیف ----- */
.teacher-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.teacher-card {
  text-align: center;
  align-items: center;
  padding: 30px 18px 22px;
  border-top: 1px solid var(--color-border);
  border-radius: 20px;
}
.teacher-photo {
  width: 148px; height: 148px; aspect-ratio: 1;
  margin: 0 auto 18px;
  border-radius: 50%;
  overflow: visible;
  background: none;
  position: relative;
  flex-shrink: 0;
}
.teacher-photo .tp-clip {
  position: absolute; inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-navy-light), var(--color-navy-dark));
  box-shadow: 0 0 0 4px var(--color-surface), 0 0 0 6px var(--color-navy-light);
  display: flex; align-items: center; justify-content: center;
  color: rgba(237,240,246,0.75);
  transition: box-shadow var(--transition);
}
.teacher-card.theme-emerald .teacher-photo .tp-clip { box-shadow: 0 0 0 4px var(--color-surface), 0 0 0 6px var(--color-emerald-light); }
.teacher-card:hover .teacher-photo .tp-clip { box-shadow: 0 0 0 4px var(--color-surface), 0 0 0 6px var(--color-accent); }
.teacher-photo .tp-clip img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.5s ease; }
.teacher-card:hover .teacher-photo .tp-clip img { scale: 1.06; }
.teacher-photo .instrument-icon {
  top: auto; right: auto;
  bottom: 2px; inset-inline-start: 2px;
  width: 42px; height: 42px;
  border: 3px solid var(--color-surface);
  z-index: 2;
}
.teacher-info { padding: 0; align-items: center; }
.teacher-info h3 { font-size: 17px; margin-bottom: 6px; }
.teacher-bio-excerpt { -webkit-line-clamp: 3; font-size: 13.5px; line-height: 1.85; color: var(--color-text-muted); }
html[data-theme="dark"] .teacher-card { border-top-color: var(--color-border); }
@media (max-width: 1100px) { .teacher-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .teacher-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .teacher-card { padding: 22px 10px 16px; }
  .teacher-photo { width: 112px; height: 112px; margin-bottom: 14px; }
  .teacher-photo .instrument-icon { width: 34px; height: 34px; }
  .teacher-bio-excerpt { display: none; }
}
@media (max-width: 380px) { .teacher-grid { grid-template-columns: 1fr; } }

/* ===== v35: اساتید دیگر در صفحه‌ی هر استاد ===== */
.related-teachers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.related-teacher{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:20px 12px;border-radius:16px;background:var(--color-surface,#fff);border:1px solid var(--color-border-soft,rgba(0,0,0,.08));color:inherit;text-decoration:none;transition:transform .2s ease,border-color .2s ease}
.related-teacher:hover,.related-teacher:focus-visible{transform:translateY(-3px);border-color:var(--color-emerald,#2f7d5b)}
.related-teacher small{color:var(--color-text-muted,#6b7280);font-size:13px;line-height:1.6}
.rt-photo{width:96px;height:96px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--color-surface-2);margin-bottom:6px;color:var(--color-heading)}
.rt-photo img{width:100%;height:100%;object-fit:cover}
@media (max-width:1100px){.related-teachers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.rt-photo{width:76px;height:76px}}