/* =============================================
   SHAAHIN — DESIGN SYSTEM
   توکن‌ها، شیشه مایع (Liquid Glass)، هدر، ناوبری،
   تم روشن/تیره و فوتر مشترک همه صفحات.
   ============================================= */

/* TTF created by: Borna Rayane B Nazanin (Free of charges)
 * Dowloaded from: http://bornaray.com/downloads/fonts/BNAZANIN.rar
 * Hints corrected by: Werner Lambergs TTF Auto Hint 1.5
 * WOFF generated by: High-Logic FontCreator 9.1
 * All done by: Arash Laylazi (arash@laylazi.ir)
 */
@font-face {
    font-family: 'B Nazanin';
    src: local('B Nazanin'), local('BNazanin'),
        url('BNazanin.woff2') format('woff2'),
        url('BNazanin.woff') format('woff'),
        url('BNazanin.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'B Nazanin';
    src: local('B Nazanin Bold'), local('BNazanin-Bold'),
        url('BNaznnBd.woff2') format('woff2'),
        url('BNaznnBd.woff') format('woff'),
        url('BNaznnBd.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}


/* =============================================
   1) توکن‌های تم — روشن
   ============================================= */

:root {
  color-scheme: light;

  /* رنگ متن و تاکید */
  --text:      #0d1b2a;
  --text-2:    #46586c;
  --text-3:    #6b7c90;
  --accent:    #0f5a94;
  --accent-2:  #0b3f6b;
  --on-accent: #ffffff;

  /* پس‌زمینه صفحه و لکه‌های نور پشت شیشه */
  --page-bg:   linear-gradient(160deg, #e9eff8 0%, #f5f8fc 52%, #e6eef7 100%);
  --aurora-1:  rgba(56, 128, 255, 0.20);
  --aurora-2:  rgba(16, 185, 199, 0.17);
  --aurora-3:  rgba(99, 102, 241, 0.15);
  --aurora-4:  rgba(148, 163, 184, 0.18);

  /* ---- شیشه مایع ----
     tint  : لایه رنگی بسیار کم‌رنگ روی بک‌دراپ
     rim-*: لبه‌ها. نور از لبه بالا/راست وارد و از
            لبه پایین/چپ خارج می‌شود (specular). */
  --glass-tint-a:  rgba(255, 255, 255, 0.62);
  --glass-tint-b:  rgba(255, 255, 255, 0.28);
  --glass-blur:    28px;
  --glass-sat:     180%;
  --glass-bright:  1.06;

  --rim-hi:        rgba(255, 255, 255, 0.95);   /* نور ورودی */
  --rim-hi-soft:   rgba(255, 255, 255, 0.55);
  --rim-lo:        rgba(13, 27, 42, 0.10);      /* سایه خروجی */
  --rim-edge:      rgba(255, 255, 255, 0.60);   /* border */

  --shadow-1: 0 1px 2px rgba(13, 27, 42, 0.05),
              0 6px 18px rgba(13, 27, 42, 0.07),
              0 18px 48px rgba(13, 27, 42, 0.08);
  --shadow-2: 0 2px 4px rgba(13, 27, 42, 0.06),
              0 10px 28px rgba(13, 27, 42, 0.10),
              0 28px 70px rgba(13, 27, 42, 0.12);

  /* شیشه تیره (هدر تیره، فوتر، نوارهای عنوان) */
  --glass-dark-a: rgba(10, 22, 36, 0.62);
  --glass-dark-b: rgba(10, 22, 36, 0.42);
  --dark-text:    #eaf1f9;

  /* کارت سربرگ روی عکس قرار می‌گیرد و باید کنتراست
     خودش را داشته باشد، نه کنتراست پس‌زمینه صفحه. */
  --hero-tint-a: rgba(255, 255, 255, 0.72);
  --hero-tint-b: rgba(255, 255, 255, 0.42);
  --hero-rim:    rgba(255, 255, 255, 0.7);
  --hero-text:   #0d1b2a;
  --hero-text-2: #3c4f63;
  --hero-accent: #0b4f86;

  /* منوها باید روی هر پس‌زمینه‌ای خوانا باشند، پس
     شیشه‌شان به‌مراتب متراکم‌تر از کارت‌هاست. */
  --panel-a: rgba(255, 255, 255, 0.88);
  --panel-b: rgba(255, 255, 255, 0.80);

  /* شعاع‌های هم‌مرکز (concentric) */
  --r-xl: 28px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;
  --r-pill: 999px;

  /* ارتفاع هدر خودکار است؛ این عدد فقط برای فاصله‌گذاری
     محتوا و scroll-padding استفاده می‌شود. */
  --header-h: 62px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}


/* =============================================
   2) توکن‌های تم — تیره
   ============================================= */

:root[data-theme="dark"] {
  color-scheme: dark;

  --text:      #e9f0f8;
  --text-2:    #a9bacd;
  --text-3:    #7f92a8;
  --accent:    #6cb8f0;
  --accent-2:  #9ed2ff;
  --on-accent: #06182a;

  --page-bg:   linear-gradient(160deg, #070d17 0%, #0c1524 52%, #070f1b 100%);
  --aurora-1:  rgba(56, 128, 255, 0.20);
  --aurora-2:  rgba(16, 185, 199, 0.15);
  --aurora-3:  rgba(129, 92, 240, 0.20);
  --aurora-4:  rgba(30, 41, 59, 0.45);

  /* در تم تیره شیشه باید تیره‌تر و کم‌رنگ‌تر باشد،
     وگرنه به جای شیشه شبیه پلاستیک سفید می‌شود. */
  --glass-tint-a:  rgba(148, 178, 214, 0.16);
  --glass-tint-b:  rgba(148, 178, 214, 0.06);
  --glass-blur:    30px;
  --glass-sat:     170%;
  --glass-bright:  1.0;

  --rim-hi:        rgba(255, 255, 255, 0.42);
  --rim-hi-soft:   rgba(255, 255, 255, 0.16);
  --rim-lo:        rgba(0, 0, 0, 0.42);
  --rim-edge:      rgba(255, 255, 255, 0.16);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30),
              0 6px 18px rgba(0, 0, 0, 0.38),
              0 18px 48px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.35),
              0 10px 28px rgba(0, 0, 0, 0.45),
              0 28px 70px rgba(0, 0, 0, 0.55);

  --glass-dark-a: rgba(6, 14, 25, 0.70);
  --glass-dark-b: rgba(6, 14, 25, 0.50);
  --dark-text:    #e9f0f8;

  --hero-tint-a: rgba(6, 14, 25, 0.76);
  --hero-tint-b: rgba(6, 14, 25, 0.58);
  --hero-rim:    rgba(255, 255, 255, 0.18);
  --hero-text:   #f2f7fd;
  --hero-text-2: #c5d5e6;
  --hero-accent: #9ed2ff;

  --panel-a: rgba(13, 24, 39, 0.94);
  --panel-b: rgba(13, 24, 39, 0.88);
}

/* اگر کاربر هنوز انتخابی نکرده، تم سیستم ملاک است */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --text:      #e9f0f8;
    --text-2:    #a9bacd;
    --text-3:    #7f92a8;
    --accent:    #6cb8f0;
    --accent-2:  #9ed2ff;
    --on-accent: #06182a;

    --page-bg:   linear-gradient(160deg, #070d17 0%, #0c1524 52%, #070f1b 100%);
    --aurora-3:  rgba(129, 92, 240, 0.20);
    --aurora-4:  rgba(30, 41, 59, 0.45);

    --glass-tint-a:  rgba(148, 178, 214, 0.16);
    --glass-tint-b:  rgba(148, 178, 214, 0.06);
    --glass-bright:  1.0;

    --rim-hi:        rgba(255, 255, 255, 0.42);
    --rim-hi-soft:   rgba(255, 255, 255, 0.16);
    --rim-lo:        rgba(0, 0, 0, 0.42);
    --rim-edge:      rgba(255, 255, 255, 0.16);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30),
                0 6px 18px rgba(0, 0, 0, 0.38),
                0 18px 48px rgba(0, 0, 0, 0.45);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.35),
                0 10px 28px rgba(0, 0, 0, 0.45),
                0 28px 70px rgba(0, 0, 0, 0.55);

    --glass-dark-a: rgba(6, 14, 25, 0.70);
    --glass-dark-b: rgba(6, 14, 25, 0.50);

    --hero-tint-a: rgba(6, 14, 25, 0.76);
    --hero-tint-b: rgba(6, 14, 25, 0.58);
    --hero-rim:    rgba(255, 255, 255, 0.18);
    --hero-text:   #f2f7fd;
    --hero-text-2: #c5d5e6;
    --hero-accent: #9ed2ff;

    --panel-a: rgba(13, 24, 39, 0.94);
    --panel-b: rgba(13, 24, 39, 0.88);
  }
}


/* =============================================
   3) پایه
   ============================================= */

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  font-family: 'B Nazanin', 'Segoe UI', Tahoma, sans-serif;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
}

body {
  color: var(--text);
  background: var(--page-bg);
  background-attachment: fixed;
  overflow-x: clip;
  line-height: 1.8;
  transition: background 0.4s ease, color 0.3s ease;
}

img {
  max-width: 100%;
}

a {
  color: var(--accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}


/* =============================================
   4) LIQUID GLASS
   ساختار لایه‌ای بر پایه رفتار نور در شیشه واقعی:

     ۱. بک‌دراپ   → blur + saturate (رنگ پشت را می‌کِشد)
     ۲. تینت      → گرادیان بسیار کم‌رنگ روی بک‌دراپ
     ۳. لنز لبه   → ::before، حلقه‌ای که نور را در لبه می‌شکند
     ۴. اسپکیولار → ::after، براقی نور روی لبه بالا
     ۵. سایه بیرونی → جدا کردن شیشه از پس‌زمینه
   ============================================= */

.lg-card,
.lg-btn {
  position: relative;
  isolation: isolate;
  background-image: linear-gradient(
    150deg,
    var(--glass-tint-a) 0%,
    var(--glass-tint-b) 46%,
    var(--glass-tint-a) 100%
  );
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  border: 1px solid var(--rim-edge);
  box-shadow:
    var(--shadow-1),
    /* نور وارد شونده از لبه بالا */
    inset 0 1px 0 0 var(--rim-hi),
    inset 0 8px 16px -12px var(--rim-hi-soft),
    /* نور خارج شونده از لبه پایین */
    inset 0 -1px 0 0 var(--rim-lo),
    inset 0 -10px 18px -14px var(--rim-lo);
  color: var(--text);
  transition:
    box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease),
    background-color 0.4s ease;
}

/* لایه لنز: یک حلقه نازک در لبه که مثل ضخامت شیشه
   عمل می‌کند. با mask فقط در حاشیه دیده می‌شود. */
.lg-card::before,
.lg-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(
    145deg,
    var(--rim-hi) 0%,
    transparent 32%,
    transparent 64%,
    var(--rim-hi-soft) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* براقی نور روی لبه بالا */
.lg-card::after,
.lg-btn::after {
  content: '';
  position: absolute;
  top: 0;
  right: 12%;
  left: 12%;
  height: 1px;
  z-index: -1;
  background: linear-gradient(90deg, transparent, var(--rim-hi), transparent);
  pointer-events: none;
}

.lg-card > *,
.lg-btn > * {
  position: relative;
}

.lg-card {
  border-radius: var(--r-lg);
}

.lg-card:hover {
  box-shadow:
    var(--shadow-2),
    inset 0 1px 0 0 var(--rim-hi),
    inset 0 8px 16px -12px var(--rim-hi-soft),
    inset 0 -1px 0 0 var(--rim-lo),
    inset 0 -10px 18px -14px var(--rim-lo);
}

.lg-card-sm   { border-radius: var(--r-md); }
.lg-card-lg   { border-radius: var(--r-xl); }
.lg-card-pill { border-radius: var(--r-pill); }

.lg-btn {
  border-radius: var(--r-md);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lg-btn:hover {
  border-color: var(--rim-hi-soft);
  box-shadow:
    var(--shadow-2),
    inset 0 1px 0 0 var(--rim-hi),
    inset 0 8px 16px -12px var(--rim-hi-soft),
    inset 0 -1px 0 0 var(--rim-lo),
    inset 0 -10px 18px -14px var(--rim-lo);
}

.lg-btn:active {
  box-shadow:
    0 1px 2px rgba(13, 27, 42, 0.10),
    inset 0 1px 0 0 var(--rim-hi-soft),
    inset 0 3px 8px 0 var(--rim-lo);
}

.lg-btn-pill   { border-radius: var(--r-pill); }
.lg-btn-sm     { border-radius: var(--r-sm); }
.lg-btn-circle { border-radius: 50%; }

/* --- گونه تیره: برای نوار عنوان، فوتر و دکمه‌های شناور --- */
.lg-card.dark,
.lg-btn.dark {
  background-image: linear-gradient(
    150deg,
    var(--glass-dark-a) 0%,
    var(--glass-dark-b) 50%,
    var(--glass-dark-a) 100%
  );
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--dark-text);
  box-shadow:
    var(--shadow-1),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.22),
    inset 0 10px 20px -14px rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.35);
}

.lg-card.dark::before,
.lg-btn.dark::before {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.40) 0%,
    transparent 34%,
    transparent 66%,
    rgba(255, 255, 255, 0.14) 100%
  );
}

.lg-card.dark::after,
.lg-btn.dark::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
}

/* روی سطوح شیشه‌ای متنِ ریز باید کنتراست کافی داشته باشد */
.lg-card.dark,
.lg-card.dark h1, .lg-card.dark h2, .lg-card.dark h3,
.lg-card.dark h4, .lg-card.dark p,  .lg-card.dark li {
  color: var(--dark-text);
}

/* ارتقای تدریجی: شکست نور واقعی در مرورگرهای پشتیبان.
   اگر پشتیبانی نباشد، همان شیشه CSS بالا باقی می‌ماند. */
@supports (backdrop-filter: url(#x)) {
  .lg-refract {
    backdrop-filter: url(#lg-refraction) blur(var(--glass-blur)) saturate(var(--glass-sat));
  }
}


/* =============================================
   5) هدر و ناوبری
   ============================================= */

/* هدر به اندازه محتوایش است، نه تمام‌عرض:
   width:max-content + margin-inline:auto آن را وسط نگه می‌دارد
   و ارتفاعش را خود محتوا تعیین می‌کند. */
.site-header {
  position: fixed;
  top: 14px;
  right: 0;
  left: 0;
  width: max-content;
  max-width: calc(100% - 24px);
  margin-inline: auto;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--r-pill);
  transition: top 0.35s var(--ease), padding 0.35s var(--ease),
              box-shadow 0.35s var(--ease), border-color 0.35s ease;
}

.site-header.is-condensed {
  top: 8px;
  padding: 5px 8px;
}

.header-logo-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: var(--r-sm);
}

.header-logo {
  height: 44px;
  width: auto;
  display: block;
  border-radius: 10px;
  transition: height 0.35s var(--ease), transform 0.3s var(--ease);
}

.site-header.is-condensed .header-logo {
  height: 36px;
}

.header-logo-link:hover .header-logo {
  transform: scale(1.04);
}

/* --- ناوبری اصلی ---
   روی دسکتاپ شیشه ندارد؛ شیشه‌ی تودرتو (کارت داخل کارت)
   لبه‌ها را دوبار می‌شکند و کثیف دیده می‌شود. */
.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.site-nav a,
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.site-nav a:hover,
.nav-trigger:hover {
  background: var(--glass-tint-a);
  color: var(--accent);
}

.site-nav a.is-current {
  color: var(--accent);
  background: var(--glass-tint-b);
}

/* --- زیرمنوی حوزه‌های کاری --- */
.nav-group {
  position: relative;
}

.nav-caret {
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.3s var(--ease);
}

.nav-group.is-open .nav-caret {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.nav-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 260px;
  padding: 8px;
  border-radius: var(--r-lg);
  /* شیشه متراکم: منو روی هر پس‌زمینه‌ای باید خوانا بماند */
  background-image: linear-gradient(150deg, var(--panel-a), var(--panel-b));
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
}

.nav-group.is-open .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-menu a {
  width: 100%;
  justify-content: flex-start;
  border-radius: var(--r-sm);
  font-weight: 400;
}

/* --- کلید تم و دکمه منوی موبایل --- */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.theme-toggle,
.nav-toggle {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  flex-shrink: 0;
}

.theme-toggle svg,
.nav-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--text);
}

/* خورشید در تم روشن، ماه در تم تیره */
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun  { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}

.nav-toggle { display: none; }

/* فاصله محتوا از هدر ثابت */
.page-body {
  padding-top: calc(var(--header-h) + 30px);
}

.page-body.flush {
  padding-top: 0;
}


/* =============================================
   6) عنوان بخش‌ها
   ============================================= */

.section-title {
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(1200px, 92%);
  min-height: 54px;
  margin: 2.5rem auto 1.5rem;
  padding: 10px 22px;
  border-radius: var(--r-pill);
  font-size: 17pt;
  font-weight: 700;
  text-align: center;
}


/* =============================================
   6a) مسیر صفحه (breadcrumbs)
   ============================================= */

.breadcrumbs {
  width: min(1100px, 92%);
  margin: 0 auto 1.2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 11pt;
  color: var(--text-3);
}

.breadcrumbs a {
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.25s ease;
}

.breadcrumbs a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
  color: var(--text);
  font-weight: 700;
}


/* =============================================
   6b) پیوند بازگشت (مشترک همه صفحات داخلی)
   ============================================= */

.back-link {
  display: block;
  width: max-content;
  max-width: 92%;
  margin: 0 auto 3rem;
  padding: 11px 28px;
  border-radius: var(--r-pill);
  color: var(--text);
  text-decoration: none;
  font-size: 12pt;
  font-weight: 700;
  text-align: center;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.back-link:hover {
  transform: translateY(-2px);
}


/* =============================================
   7) فوتر مشترک
   ============================================= */

.site-footer {
  width: 100%;
  margin-top: auto;
  padding: 34px 5% 26px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  color: var(--dark-text);
}

.footer-grid {
  width: min(1200px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 28px;
}

.site-footer h4 {
  margin: 0 0 14px;
  font-size: 14pt;
  color: var(--dark-text);
}

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer li {
  margin: 7px 0;
  font-size: 12pt;
  line-height: 1.9;
  color: var(--dark-text);
  opacity: 0.9;
}

.site-footer a {
  color: var(--dark-text);
  text-decoration: none;
  opacity: 0.9;
  transition: opacity 0.25s ease, padding-inline-start 0.25s ease;
}

.site-footer a:hover {
  opacity: 1;
  text-decoration: underline;
}

.footer-bottom {
  width: min(1200px, 100%);
  margin: 24px auto 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  text-align: center;
  font-size: 11pt;
  opacity: 0.75;
}


/* =============================================
   8) واکنش‌گرایی هدر و فوتر
   ============================================= */

@media (max-width: 1100px) {
  .site-nav a,
  .nav-trigger {
    padding: 8px 11px;
    font-size: 13.5px;
  }
}

@media (max-width: 940px) {
  .nav-toggle { display: inline-flex; }

  /* منوی کشویی زیر هدر.
     هدر backdrop-filter دارد و همین باعث می‌شود containing block
     فرزندهای fixed هم خودش باشد؛ پس با fixed نمی‌شود از عرض
     باریکش فرار کرد. به‌جایش منو را نسبت به مرکز هدر
     (که خودش وسط صفحه است) وسط‌چین می‌کنیم. */
  .site-nav {
    position: absolute;
    top: calc(100% + 12px);
    right: 50%;
    left: auto;
    width: min(86vw, 380px);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 10px;
    border-radius: var(--r-lg);
    background-image: linear-gradient(150deg, var(--panel-a), var(--panel-b));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    border: 1px solid var(--rim-edge);
    box-shadow: var(--shadow-2), inset 0 1px 0 0 var(--rim-hi);
    opacity: 0;
    visibility: hidden;
    /* translateX(50%) وسط‌چینی است، translateY انیمیشن باز شدن */
    transform: translateX(50%) translateY(-10px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
    max-height: min(70vh, 520px);
    overflow-y: auto;
  }

  .site-header.nav-open .site-nav {
    opacity: 1;
    visibility: visible;
    transform: translateX(50%) translateY(0);
  }

  .site-nav a,
  .nav-trigger {
    width: 100%;
    justify-content: space-between;
    border-radius: var(--r-md);
    padding: 12px 16px;
    font-size: 15px;
  }

  /* زیرمنو در موبایل به‌صورت آکاردئون باز می‌شود */
  .nav-group { position: static; }

  .nav-menu {
    position: static;
    min-width: 0;
    padding: 4px 0 4px 0;
    margin: 0;
    background: none;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav-menu::before,
  .nav-menu::after { display: none; }

  .nav-group.is-open .nav-menu { display: flex; }

  .nav-menu a {
    padding-inline-start: 32px;
    font-size: 14px;
  }
}

@media (max-width: 720px) {
  :root { --header-h: 56px; }

  .site-header {
    padding: 6px;
    gap: 8px;
  }

  .header-logo { height: 38px; }

  .theme-toggle,
  .nav-toggle {
    width: 38px;
    height: 38px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .section-title {
    font-size: 14.5pt;
    min-height: 48px;
  }
}


/* =============================================
   9) کاهش حرکت
   ============================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}