/* ==========================================================================
   KH Premium Academy — Design System
   کامران حاج حسین | SEO & Web Design Academy
   --------------------------------------------------------------------------
   این تنها فایل استایل هویت بصری سایت است.
   همه ویجت‌های kh-core از توکن‌های همین فایل استفاده می‌کنند؛
   داخل Elementor هیچ CSS پراکنده‌ای ایجاد نمی‌شود.

   ساختار:
     01. Tokens
     02. Reset & Base
     03. Typography
     04. Primitives (button, tag, eyebrow, card...)
     05. Layout (container, section, grids)
     06. Header
     07. Heroes
     08. Bento
     09. Cards (video / article / product)
     10. Podcast
     11. Players
     12. Article reading experience + TOC
     13. Forms
     14. Pre-footer CTA
     15. Mega Footer
     16. WooCommerce integration
     17. Accessibility & Motion
     18. Responsive
   ========================================================================== */

/* ==========================================================================
   01. TOKENS
   ========================================================================== */

:root {
  /* --- Brand colors (مطابق مشخصات پروژه) --- */
  --kh-navy:        #0B1729;
  --kh-navy-2:      #17304D;
  --kh-navy-deep:   #081523;
  --kh-gold:        #C8933F;
  --kh-gold-light:  #E5C78C;
  --kh-gold-soft:   #F7EFE1;
  --kh-bg:          #F6F6F2;
  --kh-paper:       #FFFFFF;
  --kh-ink:         #101828;
  --kh-muted:       #737B88;
  --kh-line:        #E8E8E2;
  --kh-success:     #2FB57E;

  /* اکسنت دوم — برای پوسته‌هایی که سیستم دو‌رنگی دارند.
     در پوسته پیش‌فرض عمداً همان اکسنت اول است تا چیزی تغییر نکند. */
  --kh-accent-2:      var(--kh-gold);
  --kh-accent-2-soft: var(--kh-gold-soft);

  /* --- Derived / UI colors ---
     متن بدنه از #5F6875 به #414A57 تیره‌تر شد. مقدار قبلی روی پس‌زمینه
     کرم نسبت کنتراست حدود ۵:۱ می‌داد — یعنی از حداقل استاندارد رد
     می‌شد ولی خاکستریِ کم‌رمق دیده می‌شد و کل صفحه «مه‌آلود» بود.
     مقدار جدید حدود ۸:۱ است. */
  --kh-ink-soft:    #2C3542;      /* متن لید */
  --kh-body-text:   #414A57;      /* پاراگراف بدنه */
  --kh-nav-link:    #3D4653;
  --kh-tag-bg:      #F2F2EE;
  --kh-tag-text:    #5C6572;
  --kh-field-bg:    #FBFBF9;

  /* Footer (روی Navy تیره) */
  --kh-footer-bg:     #081523;
  --kh-footer-text:   #A6B3C2;
  --kh-footer-title:  #FFFFFF;
  --kh-footer-line:   rgba(255, 255, 255, .09);
  --kh-footer-panel:  rgba(255, 255, 255, .04);

  /* --- Radius ---
     شعاع‌ها عمداً کوچک‌تر از قبل شده‌اند. گوشه‌های خیلی گرد (۲۶ تا ۴۰
     پیکسل) مشخصه قالب‌های آماده‌اند؛ سایت‌های مرجع این حوزه بین ۶ تا ۱۴
     پیکسل می‌مانند و اعتبار بصری‌شان از تایپوگرافی و فضای سفید می‌آید،
     نه از گردی گوشه‌ها. */
  --kh-r-sm:      8px;
  --kh-r-md:      10px;
  --kh-r-lg:      14px;
  --kh-r-btn:     10px;
  --kh-r-card:    14px;
  --kh-r-panel:   16px;
  --kh-r-section: 20px;
  --kh-r-pill:    999px;

  /* --- Shadows (بسیار نرم) --- */
  --kh-shadow-xs:   0 1px 2px rgba(12, 28, 48, .04);
  --kh-shadow-sm:   0 6px 18px rgba(12, 28, 48, .05);
  --kh-shadow-card: 0 22px 60px rgba(12, 28, 48, .08);
  --kh-shadow-nav:  0 16px 44px rgba(14, 30, 48, .07);
  --kh-shadow-deep: 0 34px 80px rgba(10, 25, 44, .12);

  /* --- Layout --- */
  --kh-container:  1240px;
  --kh-gutter:     20px;
  /* حداکثر عرض خوانا برای متن مقاله.
     عمداً بر حسب px است نه ch: واحد ch به عرض کاراکتر «۰» فونت وابسته
     است و در IRANSans باریک می‌افتد، در نتیجه ستون متن بی‌دلیل باریک
     و فضای خالی کنارش زیاد می‌شد. */
  --kh-measure:    760px;
  --kh-header-h:   76px;
  --kh-sticky-top: 104px;        /* برای sidebar / TOC چسبان */

  /* --- Spacing scale --- */
  --kh-s-1:  4px;
  --kh-s-2:  8px;
  --kh-s-3:  12px;
  --kh-s-4:  16px;
  --kh-s-5:  20px;
  --kh-s-6:  24px;
  --kh-s-7:  32px;
  --kh-s-8:  40px;
  --kh-s-9:  56px;
  --kh-s-10: 72px;
  --kh-s-11: 96px;

  /* فاصله عمودی بین بخش‌ها.
     ۷۲ پیکسل قبلی برای سایتی با این تعداد بخش کم بود: وقتی بخش‌ها به هم
     نزدیک باشند چشم مرز بین آن‌ها را نمی‌بیند و صفحه شلوغ حس می‌شود.
     فضای سفید ارزان‌ترین ابزاری است که یک صفحه را «گران» نشان می‌دهد. */
  --kh-section-y: clamp(64px, 7vw, 112px);

  /* --- Typography ---
     مقیاس ریزتایپ نسبت به فایل مرجع کمی بالا آمده است تا فارسی خوانا و
     منطبق بر WCAG باشد؛ نسبت‌های سلسله‌مراتب دقیقاً حفظ شده‌اند.
     برای بازگشت به اندازه‌های مرجع فقط همین بلاک را تغییر دهید. */
  --kh-font: "IRANSans", "IRANSansWeb", "IRANSansX", "Vazirmatn", system-ui,
             -apple-system, "Segoe UI", Tahoma, sans-serif;

  /*
   * مقیاس بازنویسی‌شده.
   *
   * ایراد مقیاس قبلی اندازه‌ها نبود، «نسبت» بود: H1 روی ۳۶ و H2 روی ۳۱
   * یعنی فقط ۵ پیکسل فاصله — دو مهم‌ترین سطح صفحه تقریباً هم‌اندازه
   * دیده می‌شدند و در نتیجه هیچ سطحی «مهم» به نظر نمی‌رسید. متن بدنه هم
   * روی ۱۵ پیکسل برای سایتی که کارش خواندن است کوچک بود.
   *
   * حالا H1 حدود ۳.۳ برابر بدنه است و هر سطح فاصله محسوسی با سطح بعدی
   * دارد. اندازه‌های بزرگ با clamp سیال‌اند تا در موبایل سرریز نکنند.
   */
  --kh-fs-nano:  12px;   /* chip / footer bottom */
  --kh-fs-micro: 13px;   /* meta, duration, label */
  --kh-fs-xs:    14px;   /* لینک فوتر، توضیح کوتاه */
  --kh-fs-sm:    15px;   /* دکمه، منو */
  --kh-fs-base:  17px;   /* متن بدنه */
  --kh-fs-md:    19px;   /* لید */
  --kh-fs-lg:    21px;
  --kh-fs-h4:    clamp(18px, 1.5vw,  20px);
  --kh-fs-h3:    clamp(21px, 2vw,    25px);
  --kh-fs-h2:    clamp(28px, 3.4vw,  40px);
  --kh-fs-h1:    clamp(34px, 4.8vw,  54px);
  --kh-fs-display: clamp(38px, 5.6vw, 64px);

  /*
   * فاصله خط: هرچه قلم بزرگ‌تر، نسبت باید کمتر باشد. مقدار قبلی ۱.۵۵
   * برای همه تیترها بود؛ روی یک H1 پنجاه‌وچند پیکسلی، خط‌ها آن‌قدر از هم
   * دور می‌افتادند که تیتر به یک بلوک واحد دیده نمی‌شد.
   */
  --kh-lh-tight:   1.18;   /* display / H1 */
  --kh-lh-heading: 1.34;   /* H2 و H3 */
  --kh-lh-snug:    1.5;    /* H4 و تیتر کارت */
  --kh-lh-body:    1.85;   /* پاراگراف */
  --kh-lh-relaxed: 2.05;   /* متن مقاله و نقل‌قول */

  --kh-fw-body:   400;
  --kh-fw-medium: 500;
  --kh-fw-semi:   600;
  --kh-fw-bold:   700;
  --kh-fw-black:  800;

  /* --- Motion (بسیار محدود) --- */
  --kh-t-fast: .18s cubic-bezier(.4, 0, .2, 1);
  --kh-t-base: .28s cubic-bezier(.4, 0, .2, 1);

  --kh-focus: 0 0 0 3px rgba(200, 147, 63, .38);
}

/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */

.kh-site,
.kh-site * {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* هدر شناور نباید روی هدف anchor بیفتد */
  scroll-padding-top: var(--kh-sticky-top);
}

body.kh-site {
  margin: 0;
  font-family: var(--kh-font);
  font-size: var(--kh-fs-base);
  font-weight: var(--kh-fw-body);
  line-height: var(--kh-lh-body);
  color: var(--kh-ink);
  background-color: var(--kh-bg);
  background-image:
    radial-gradient(circle at 4% 7%,  rgba(200, 147, 63, .09), transparent 24%),
    radial-gradient(circle at 94% 15%, rgba(75, 124, 255, .055), transparent 22%);
  background-attachment: fixed;
  /* جلوگیری قطعی از overflow افقی در تمام بریک‌پوینت‌ها */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Elementor گاهی روی html/body مقدار می‌گذارد؛ اینجا مهارش می‌کنیم */
html:has(body.kh-site) { overflow-x: clip; }

.kh-site img,
.kh-site svg,
.kh-site video {
  max-width: 100%;
  height: auto;
  display: block;
}

.kh-site a {
  color: inherit;
  text-decoration: none;
  transition: color var(--kh-t-fast);
}

.kh-site button,
.kh-site input,
.kh-site textarea,
.kh-site select {
  font: inherit;
  color: inherit;
}

/* ==========================================================================
   03. TYPOGRAPHY
   ========================================================================== */

/*
 * تیترها.
 *
 * دو تغییر مهم نسبت به قبل:
 *
 * ۱. letter-spacing کاملاً حذف شد. خط فارسی «متصل» است و فاصله‌گذاری
 *    حروف — چه مثبت چه منفی — اتصال حروف را خراب می‌کند. مقدار قبلی روی
 *    تیترهای بزرگ منفی ۲.۴ پیکسل بود که حروف را روی هم می‌انداخت. این
 *    عادتی است که از تایپوگرافی لاتین می‌آید و در فارسی جواب نمی‌دهد.
 *
 * ۲. فاصله خط دیگر برای همه سطوح یکسان نیست. یک مقدار ثابت یا تیتر
 *    بزرگ را از هم می‌پاشد یا تیتر کوچک را خفه می‌کند.
 */
.kh-site h1, .kh-site h2, .kh-site h3,
.kh-site h4, .kh-site h5, .kh-site h6 {
  margin: 0;
  font-weight: var(--kh-fw-black);
  color: var(--kh-navy);
  letter-spacing: normal;
  /* فارسی با شکستن بین کلمات بهتر از خط‌تیره‌گذاری خودکار است */
  overflow-wrap: break-word;
}

.kh-site h1 { font-size: var(--kh-fs-h1); line-height: var(--kh-lh-tight); }
.kh-site h2 { font-size: var(--kh-fs-h2); line-height: var(--kh-lh-heading); }
.kh-site h3 { font-size: var(--kh-fs-h3); line-height: var(--kh-lh-heading); }
.kh-site h4 { font-size: var(--kh-fs-h4); line-height: var(--kh-lh-snug); }
.kh-site h5,
.kh-site h6 { font-size: var(--kh-fs-base); line-height: var(--kh-lh-snug); }

.kh-site p { margin: 0; }

/* --- Eyebrow --- */
.kh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--kh-s-2);
  margin-bottom: var(--kh-s-3);
  font-size: var(--kh-fs-micro);
  font-weight: var(--kh-fw-black);
  line-height: 1.6;
  color: var(--kh-gold);
  /*
   * نه letter-spacing و نه uppercase.
   *
   * برچسب‌ها حالا فارسی‌اند: فاصله‌گذاری حروف اتصال خط فارسی را می‌شکند
   * و uppercase هم روی فارسی بی‌اثر است. هر دو از زمانی مانده بودند که
   * این برچسب‌ها انگلیسی بودند.
   *
   * :lang(en) برای مواردی است که هنوز عمداً لاتین‌اند (مثل نام برند).
   */
}
.kh-eyebrow:lang(en) {
  letter-spacing: .6px;
  text-transform: uppercase;
}
.kh-eyebrow::before {
  content: "";
  inline-size: 19px;
  block-size: 1px;
  background: currentColor;
  flex: none;
}
.kh-eyebrow--light { color: var(--kh-gold-light); }

/* --- Display headings ---
   ۷۸ پیکسل قبلی برای فارسی زیادی بود: در این اندازه، دنباله و نقطه‌های
   حروف فارسی نسبت به لاتین سنگین‌تر دیده می‌شوند و تیتر به‌جای قدرتمند،
   شلوغ می‌شود. ۶۴ پیکسل سقف بهتری است. */
.kh-display {
  font-size: var(--kh-fs-display);
  line-height: var(--kh-lh-tight);
  letter-spacing: normal;
  font-weight: var(--kh-fw-black);
  color: var(--kh-navy);
}
.kh-display .kh-hl-gold    { color: var(--kh-gold); }
.kh-display .kh-hl-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--kh-navy);
  paint-order: stroke fill;
}

.kh-title-xl {
  font-size: var(--kh-fs-h1);
  line-height: var(--kh-lh-tight);
  letter-spacing: normal;
}
.kh-title-xl .kh-accent { color: var(--kh-gold); }

/* لید عمداً دیگر «muted» نیست. جمله زیر تیتر، مهم‌ترین جمله صفحه بعد از
   خود تیتر است؛ خاکستری کم‌رنگ کردنش یعنی کاربر ردش می‌کند. */
.kh-lead {
  font-size: var(--kh-fs-md);
  line-height: var(--kh-lh-body);
  color: var(--kh-ink-soft);
  max-inline-size: var(--kh-measure);
}

.kh-text-muted { color: var(--kh-muted); }

/* ==========================================================================
   04. PRIMITIVES
   ========================================================================== */

/* --- Button --- */
.kh-btn {
  --_bg: transparent;
  --_fg: var(--kh-navy);
  --_bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kh-s-2);
  min-block-size: 48px;
  padding-inline: var(--kh-s-5);
  border: 1px solid var(--_bd);
  border-radius: var(--kh-r-btn);
  background: var(--_bg);
  color: var(--_fg);
  font-size: var(--kh-fs-sm);
  font-weight: var(--kh-fw-bold);
  line-height: 1;
  cursor: pointer;
  text-align: center;
  transition: transform var(--kh-t-base), box-shadow var(--kh-t-base),
              background-color var(--kh-t-base), border-color var(--kh-t-base);
}
.kh-btn--dark {
  --_bg: var(--kh-navy);
  --_fg: #fff;
  box-shadow: 0 12px 28px rgba(11, 23, 41, .14);
}
.kh-btn--soft {
  --_bg: var(--kh-paper);
  --_fg: var(--kh-navy);
  --_bd: var(--kh-line);
}
.kh-btn--gold {
  --_bg: linear-gradient(135deg, #BD842F, #DFB15D);
  --_fg: #fff;
  box-shadow: 0 12px 28px rgba(189, 132, 47, .22);
}
.kh-btn--ghost {
  --_fg: var(--kh-navy);
  --_bd: var(--kh-line);
}
.kh-btn--on-dark {
  --_bg: rgba(255, 255, 255, .08);
  --_fg: #fff;
  --_bd: rgba(255, 255, 255, .14);
}
/* اکسنت دوم — در پوسته‌های تک‌رنگی، همان دکمه اصلی است. */
.kh-btn--accent {
  --_bg: var(--kh-accent-2);
  --_fg: #fff;
  box-shadow: none;
}
.kh-btn--block { inline-size: 100%; }

.kh-btn:hover  { transform: translateY(-2px); }
.kh-btn:active { transform: translateY(0); }
.kh-btn--soft:hover  { border-color: var(--kh-gold); color: var(--kh-gold); }
.kh-btn--on-dark:hover { background: rgba(255, 255, 255, .14); }

/* پیکان جهت‌دار: در RTL باید به چپ اشاره کند */
.kh-btn__arrow { font-size: 1.05em; line-height: 0; }

/* --- Tag / chip --- */
.kh-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: var(--kh-r-pill);
  background: var(--kh-tag-bg);
  color: var(--kh-tag-text);
  font-size: var(--kh-fs-micro);
  font-weight: var(--kh-fw-semi);
  line-height: 1.6;
}
.kh-tag--gold { background: var(--kh-gold-soft); color: #8A6421; }
.kh-tag--dark { background: rgba(255, 255, 255, .08); color: #D9E0E9; }

.kh-chip {
  display: inline-flex;
  padding: 5px 10px;
  border: 1px solid var(--kh-footer-line);
  border-radius: var(--kh-r-pill);
  font-size: var(--kh-fs-nano);
  line-height: 1.6;
}

/* --- Meta line --- */
.kh-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kh-s-3);
  margin-block-start: var(--kh-s-3);
  color: #8B93A0;
  font-size: var(--kh-fs-micro);
  line-height: 1.6;
}
.kh-meta > * { display: inline-flex; align-items: center; gap: 5px; }

/* جداکننده نقطه‌ای بین آیتم‌های متا (به‌جای آیکن) */
.kh-meta--dotted > * + *::before {
  content: "";
  inline-size: 3px;
  block-size: 3px;
  margin-inline-end: var(--kh-s-3);
  border-radius: 50%;
  background: #C3C8CF;
  flex: none;
}
.kh-meta--dotted { gap: var(--kh-s-2); }

/* --- Card --- */
.kh-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--kh-paper);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-card);
  overflow: hidden;
  transition: transform var(--kh-t-base), box-shadow var(--kh-t-base),
              border-color var(--kh-t-base);
}
.kh-card:hover {
  transform: translateY(-6px);
  border-color: #DCDCD4;
  box-shadow: var(--kh-shadow-card);
}
.kh-card__body {
  padding: var(--kh-s-5);
  display: flex;
  flex-direction: column;
  gap: var(--kh-s-2);
  flex: 1;
}
.kh-card__title {
  font-size: var(--kh-fs-h3);
  line-height: 1.7;
  color: var(--kh-navy);
  /* حداکثر ۳ خط تا ارتفاع کارت‌ها در گرید یکنواخت بماند */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kh-card__title a::after {
  /* کل کارت کلیک‌پذیر، ولی فقط یک لینک قابل دسترس در tab order */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.kh-card:hover .kh-card__title { color: var(--kh-navy); }
.kh-card__foot { margin-block-start: auto; padding-block-start: var(--kh-s-3); }

/* --- Panel (سطح سفید بزرگ) --- */
.kh-panel {
  background: var(--kh-paper);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-panel);
  padding: var(--kh-s-8);
}

/* --- Section head --- */
.kh-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--kh-s-5);
  margin-block-end: var(--kh-s-7);
}
.kh-section-head h2 {
  font-size: var(--kh-fs-h2);
  line-height: 1.5;
}
.kh-section-head p {
  margin-block-start: 6px;
  font-size: var(--kh-fs-xs);
  color: var(--kh-muted);
}
.kh-link-all {
  flex: none;
  font-size: var(--kh-fs-sm);
  font-weight: var(--kh-fw-black);
  color: var(--kh-navy);
  white-space: nowrap;
}
.kh-link-all:hover { color: var(--kh-gold); }

/* ==========================================================================
   05. LAYOUT
   ========================================================================== */

.kh-container {
  inline-size: min(var(--kh-container), 100% - (var(--kh-gutter) * 2));
  margin-inline: auto;
}

.kh-section { padding-block: var(--kh-section-y); }
.kh-section--tight { padding-block: var(--kh-s-8); }

.kh-grid   { display: grid; gap: var(--kh-s-5); }
.kh-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kh-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kh-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* لایه محتوا + sidebar (مقاله / ویدیو / محصول) */
.kh-content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 305px;
  gap: var(--kh-s-7);
  align-items: start;
}
.kh-content-layout--wide { grid-template-columns: minmax(0, 1fr) 340px; }

/* --- Filters --- */
.kh-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kh-s-2);
  margin-block-end: var(--kh-s-6);
}
.kh-filter {
  padding: 9px 15px;
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-pill);
  background: var(--kh-paper);
  color: var(--kh-nav-link);
  font-size: var(--kh-fs-micro);
  font-weight: var(--kh-fw-medium);
  line-height: 1.5;
  cursor: pointer;
  transition: background-color var(--kh-t-fast), color var(--kh-t-fast),
              border-color var(--kh-t-fast);
}
.kh-filter:hover { border-color: var(--kh-gold); color: var(--kh-gold); }
.kh-filter.is-active,
.kh-filter[aria-current="true"] {
  background: var(--kh-navy);
  border-color: var(--kh-navy);
  color: #fff;
}

/* --- Pagination / Load more --- */
.kh-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--kh-s-2);
  margin-block-start: var(--kh-s-8);
}
.kh-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding-inline: var(--kh-s-3);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-sm);
  background: var(--kh-paper);
  font-size: var(--kh-fs-sm);
  font-weight: var(--kh-fw-semi);
  color: var(--kh-nav-link);
}
.kh-pagination .page-numbers.current,
.kh-pagination .page-numbers:hover {
  background: var(--kh-navy);
  border-color: var(--kh-navy);
  color: #fff;
}
.kh-pagination .page-numbers.dots { border-color: transparent; background: none; }

.kh-loadmore-wrap { display: flex; justify-content: center; margin-block-start: var(--kh-s-8); }

/* --- Empty state --- */
.kh-empty {
  padding: var(--kh-s-9) var(--kh-s-5);
  text-align: center;
  border: 1px dashed var(--kh-line);
  border-radius: var(--kh-r-panel);
  color: var(--kh-muted);
  background: rgba(255, 255, 255, .5);
}

/* ==========================================================================
   06. HEADER
   ========================================================================== */

.kh-topbar {
  padding-block: var(--kh-s-2);
  font-size: var(--kh-fs-micro);
  color: #78818C;
}
.kh-topbar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--kh-s-5);
}

.kh-header {
  position: sticky;
  inset-block-start: 10px;
  z-index: 100;
}
.kh-navbar {
  display: flex;
  align-items: center;
  gap: var(--kh-s-6);
  min-block-size: var(--kh-header-h);
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 22px;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: var(--kh-shadow-nav);
  transition: box-shadow var(--kh-t-base), background-color var(--kh-t-base);
}
/* حالت اسکرول‌شده (کلاس را JS اضافه می‌کند) */
.kh-header.is-stuck .kh-navbar {
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 20px 50px rgba(14, 30, 48, .12);
}
/* fallback برای مرورگرهای بدون backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kh-navbar { background: rgba(255, 255, 255, .97); }
}

/* --- Brand --- */
.kh-brand {
  display: flex;
  align-items: center;
  gap: var(--kh-s-3);
  flex: none;
}
.kh-brand__mark {
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  border-radius: var(--kh-r-md);
  background: linear-gradient(145deg, #172A43, #081322);
  color: var(--kh-gold-light);
  font-size: var(--kh-fs-md);
  font-weight: var(--kh-fw-black);
  letter-spacing: .5px;
  flex: none;
}
.kh-brand__mark img { inline-size: 100%; block-size: 100%; object-fit: contain; border-radius: inherit; }
.kh-brand__title {
  display: block;
  font-size: var(--kh-fs-sm);
  font-weight: var(--kh-fw-black);
  line-height: 1.5;
  color: var(--kh-navy);
}
.kh-brand__sub {
  display: block;
  font-size: var(--kh-fs-nano);
  line-height: 1.5;
  color: #8D95A0;
  letter-spacing: .2px;
}

/* --- Desktop menu --- */
.kh-nav { margin-inline-start: auto; }
.kh-nav__list {
  display: flex;
  align-items: center;
  gap: var(--kh-s-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.kh-nav__list a {
  position: relative;
  display: inline-block;
  padding-block: 6px;
  font-size: var(--kh-fs-sm);
  font-weight: var(--kh-fw-semi);
  color: var(--kh-nav-link);
}
.kh-nav__list a::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 2px;
  border-radius: 2px;
  background: var(--kh-gold);
  transform: scaleX(0);
  transition: transform var(--kh-t-base);
}
.kh-nav__list a:hover { color: var(--kh-gold); }
.kh-nav__list a:hover::after,
.kh-nav__list .current-menu-item > a::after,
.kh-nav__list .current_page_item > a::after { transform: scaleX(1); }
.kh-nav__list .current-menu-item > a,
.kh-nav__list .current_page_item > a { color: var(--kh-navy); }

.kh-nav-actions { display: flex; align-items: center; gap: var(--kh-s-2); flex: none; }

/* --- مگا منو --- */
.kh-nav__has-mega { position: static; }

.kh-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  border: 0;
  background: none;
  font-family: var(--kh-font);
  font-size: var(--kh-fs-sm);
  font-weight: var(--kh-fw-semi);
  color: var(--kh-nav-link);
  cursor: pointer;
  transition: color var(--kh-t-fast);
}
.kh-nav__trigger:hover,
.kh-nav__has-mega.is-open .kh-nav__trigger { color: var(--kh-gold); }

.kh-nav__chev {
  inline-size: 7px;
  block-size: 7px;
  border-inline-end: 1.6px solid currentColor;
  border-block-end: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--kh-t-base);
}
.kh-nav__has-mega.is-open .kh-nav__chev { transform: rotate(225deg) translateY(-2px); }

.kh-mega {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(100% + 10px);
  z-index: 120;
  padding-block: var(--kh-s-7);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-panel);
  background: var(--kh-paper);
  box-shadow: 0 30px 70px rgba(12, 28, 48, .14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--kh-t-base), transform var(--kh-t-base), visibility var(--kh-t-base);
}
.kh-nav__has-mega.is-open > .kh-mega {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.kh-mega__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--kh-s-8);
  align-items: start;
}
/* بدون ستون منتخب، تمام عرض به ستون‌ها می‌رسد */
.kh-mega__inner:not(:has(.kh-mega__featured)) { grid-template-columns: minmax(0, 1fr); }

.kh-mega__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: var(--kh-s-6) var(--kh-s-7);
  list-style: none;
  margin: 0;
  padding: 0;
}

.kh-mega__title {
  display: block;
  margin-block-end: var(--kh-s-3);
  padding-block-end: var(--kh-s-2);
  border-block-end: 1px solid var(--kh-line);
  font-size: var(--kh-fs-micro);
  font-weight: var(--kh-fw-black);
  letter-spacing: .3px;
  color: var(--kh-gold);
  text-transform: uppercase;
}
a.kh-mega__title:hover { color: var(--kh-navy); }

.kh-mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.kh-mega__list a {
  display: block;
  padding: 7px 0;
  font-size: var(--kh-fs-sm);
  font-weight: var(--kh-fw-medium);
  color: var(--kh-body-text);
  transition: color var(--kh-t-fast), transform var(--kh-t-fast);
}
.kh-mega__list a:hover {
  color: var(--kh-navy);
  transform: translateX(-3px);
}

/* --- ستون محتوای منتخب --- */
.kh-mega__featured {
  padding-inline-start: var(--kh-s-7);
  border-inline-start: 1px solid var(--kh-line);
}
.kh-mega__card { display: block; }
.kh-mega__thumb {
  position: relative;
  display: grid;
  place-items: center;
  block-size: 130px;
  margin-block-end: var(--kh-s-3);
  border-radius: var(--kh-r-md);
  background: linear-gradient(135deg, #0E1C2F, #21466E) center/cover;
  overflow: hidden;
}
.kh-mega__thumb .kh-play { inline-size: 42px; block-size: 42px; }
.kh-mega__card b {
  display: block;
  font-size: var(--kh-fs-sm);
  font-weight: var(--kh-fw-bold);
  line-height: 1.7;
  color: var(--kh-navy);
}
.kh-mega__card:hover b { color: var(--kh-gold); }
.kh-mega__card > span:last-child {
  display: block;
  margin-block-start: 4px;
  font-size: var(--kh-fs-micro);
  color: var(--kh-muted);
}

/* --- زیرمنوی آکاردئونی در منوی موبایل --- */
.kh-drawer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kh-s-3);
}
.kh-drawer__row a { flex: 1; }
.kh-drawer__row a::after { content: none; }

/* سرگروهی که مقصدی ندارد: هم‌شکل لینک ولی بدون رفتار لینک. */
.kh-drawer__label {
  flex: 1;
  font-size: var(--kh-fs-base);
  font-weight: var(--kh-fw-semi);
  color: var(--kh-muted);
}

.kh-drawer__expand {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-sm);
  background: var(--kh-paper);
  cursor: pointer;
  flex: none;
}
.kh-drawer__expand::before {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  border-inline-end: 2px solid var(--kh-navy);
  border-block-end: 2px solid var(--kh-navy);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--kh-t-base);
}
.kh-drawer__expand[aria-expanded="true"]::before { transform: rotate(225deg) translateY(-2px); }

.kh-drawer__sub {
  display: none;
  list-style: none;
  margin: 0 0 var(--kh-s-3);
  padding-inline-start: var(--kh-s-4);
  border-inline-start: 2px solid var(--kh-line);
}
.kh-drawer__sub.is-open { display: block; }
.kh-drawer__sub a {
  padding-block: 11px;
  font-size: var(--kh-fs-sm);
  font-weight: var(--kh-fw-medium);
  color: var(--kh-body-text);
}
.kh-drawer__sub .kh-drawer__title { color: var(--kh-gold); }

/* --- Hamburger --- */
.kh-burger {
  display: none;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-sm);
  background: var(--kh-paper);
  cursor: pointer;
  flex: none;
}
.kh-burger__bars,
.kh-burger__bars::before,
.kh-burger__bars::after {
  display: block;
  inline-size: 19px;
  block-size: 2px;
  border-radius: 2px;
  background: var(--kh-navy);
  transition: transform var(--kh-t-base), opacity var(--kh-t-fast);
}
.kh-burger__bars { position: relative; }
.kh-burger__bars::before,
.kh-burger__bars::after { content: ""; position: absolute; inset-inline-start: 0; }
.kh-burger__bars::before { inset-block-start: -6px; }
.kh-burger__bars::after  { inset-block-start: 6px; }
.kh-burger[aria-expanded="true"] .kh-burger__bars { background: transparent; }
.kh-burger[aria-expanded="true"] .kh-burger__bars::before { transform: translateY(6px) rotate(45deg); }
.kh-burger[aria-expanded="true"] .kh-burger__bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* --- Mobile drawer (طراحی اختصاصی، نه منوی پیش‌فرض) --- */
.kh-drawer {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  grid-template-columns: 1fr;
  visibility: hidden;
  pointer-events: none;
}
.kh-drawer.is-open { visibility: visible; pointer-events: auto; }

.kh-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 21, 35, .48);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--kh-t-base);
  border: 0;
  padding: 0;
  cursor: pointer;
}
.kh-drawer.is-open .kh-drawer__scrim { opacity: 1; }

.kh-drawer__panel {
  position: relative;
  justify-self: end;
  inline-size: min(400px, 92vw);
  block-size: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--kh-s-5);
  padding: var(--kh-s-6) var(--kh-s-5) var(--kh-s-8);
  background: var(--kh-paper);
  border-start-start-radius: 28px;
  border-end-start-radius: 28px;
  box-shadow: -30px 0 80px rgba(10, 25, 44, .18);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(-100%);         /* RTL: پنل از سمت راست وارد می‌شود */
  transition: transform var(--kh-t-base);
}
[dir="ltr"] .kh-drawer__panel { transform: translateX(100%); }
.kh-drawer.is-open .kh-drawer__panel { transform: translateX(0); }

.kh-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kh-s-4);
  padding-block-end: var(--kh-s-5);
  border-block-end: 1px solid var(--kh-line);
}
.kh-drawer__close {
  display: grid;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-sm);
  background: var(--kh-paper);
  color: var(--kh-navy);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  flex: none;
}
.kh-drawer__list { list-style: none; margin: 0; padding: 0; }
.kh-drawer__list > li + li { border-block-start: 1px solid var(--kh-line); }
.kh-drawer__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--kh-s-4);
  font-size: var(--kh-fs-md);
  font-weight: var(--kh-fw-semi);
  color: var(--kh-navy);
}
.kh-drawer__list a::after {
  content: "←";
  color: var(--kh-gold);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity var(--kh-t-fast), transform var(--kh-t-fast);
}
.kh-drawer__list a:hover::after,
.kh-drawer__list .current-menu-item > a::after { opacity: 1; transform: translateX(0); }
.kh-drawer__foot { margin-block-start: auto; display: grid; gap: var(--kh-s-2); }
.kh-drawer__contact {
  padding: var(--kh-s-4);
  border-radius: var(--kh-r-md);
  background: var(--kh-bg);
  font-size: var(--kh-fs-xs);
  color: var(--kh-muted);
}

body.kh-drawer-open { overflow: hidden; }

/* ==========================================================================
   07. HEROES
   ========================================================================== */

/* --- Home hero --- */
.kh-hero-home { padding-block: 84px var(--kh-s-8); }
.kh-hero-home__grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 62px;
  align-items: center;
}
.kh-hero-home__desc { margin-block-start: var(--kh-s-5); font-size: var(--kh-fs-md); }
.kh-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kh-s-3);
  margin-block-start: var(--kh-s-6);
}

/* --- تصویر در هیرو ---
   وقتی به‌جای گرافیک CSS از تصویر استفاده می‌شود. سه قاب دارد چون
   تصویر ورودی می‌تواند هر چیزی باشد: پرتره بریده، اسکرین‌شات، یا PNG با
   پس‌زمینه شفاف. */
.kh-stage--image {
  display: grid;
  place-items: center;
  min-block-size: auto;
  position: relative;
}
.kh-stage__img {
  inline-size: 100%;
  block-size: auto;
  max-block-size: 560px;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
}

/* قاب دایره نرم — پشت تصویر، برای پرتره یا PNG شفاف */
.kh-stage--blob::before {
  content: "";
  position: absolute;
  inset: 6% 4%;
  z-index: 0;
  border-radius: 47% 53% 58% 42% / 52% 46% 54% 48%;
  background: linear-gradient(150deg, var(--kh-gold-soft), var(--kh-accent-2-soft));
}
.kh-stage--blob .kh-stage__img { max-block-size: 520px; }

/* گوشه‌گرد — برای اسکرین‌شات یا عکس مستطیلی */
.kh-stage--round .kh-stage__img {
  border-radius: var(--kh-r-panel);
  box-shadow: var(--kh-shadow-card);
  object-fit: cover;
}

@media (max-width: 1024px) {
  .kh-stage__img { max-block-size: 420px; }
}
@media (max-width: 768px) {
  .kh-stage--image { min-block-size: 0; }
  .kh-stage__img { max-block-size: 320px; }
}

/* --- جستجوی داخل هیرو --- */
.kh-hero-search {
  max-inline-size: 560px;
  margin-block-start: var(--kh-s-6);
}

/* --- نکات اعتماد زیر هیرو ---
   شبکه دوستونی است نه ردیف flex: با ۴ مورد، دو ردیف مرتبِ ۲×۲ می‌دهد
   و طول متن‌های نامساوی ستون‌ها را به هم نمی‌ریزد. */
.kh-hero-trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kh-s-3) var(--kh-s-5);
  margin-block-start: var(--kh-s-6);
  list-style: none;
  padding: 0;
}
.kh-hero-trust li {
  display: flex;
  align-items: center;
  gap: var(--kh-s-2);
  font-size: var(--kh-fs-sm);
  font-weight: var(--kh-fw-medium);
  color: var(--kh-body-text);
}
.kh-hero-trust span {
  display: grid;
  place-items: center;
  inline-size: 26px;
  block-size: 26px;
  border-radius: 50%;
  background: var(--kh-gold-soft);
  color: var(--kh-gold);
  flex: none;
}
.kh-hero-trust svg { inline-size: 14px; block-size: 14px; }

@media (max-width: 768px) {
  .kh-hero-search { margin-block-start: var(--kh-s-5); }
  .kh-hero-trust { grid-template-columns: 1fr; gap: var(--kh-s-2); }
  .kh-hero-trust li { font-size: var(--kh-fs-micro); }
}

/* اثبات اجتماعی */
.kh-proof {
  display: flex;
  align-items: center;
  gap: var(--kh-s-4);
  margin-block-start: var(--kh-s-7);
}
.kh-proof__avatars { display: flex; padding-inline-end: 12px; }
.kh-proof__avatar {
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  border: 3px solid var(--kh-bg);
  margin-inline-end: -12px;
  background: linear-gradient(135deg, #162E4D, #D5AB67);
  background-size: cover;
  background-position: center;
  flex: none;
}
.kh-proof b { display: block; font-size: var(--kh-fs-sm); color: var(--kh-navy); }
.kh-proof span { font-size: var(--kh-fs-micro); color: var(--kh-muted); }

/* --- Dashboard visualization --- */
.kh-stage { position: relative; min-block-size: 560px; }
.kh-browser {
  position: absolute;
  inset: 25px 0 15px 20px;
  padding: var(--kh-s-4);
  border: 1px solid var(--kh-line);
  border-radius: 34px;
  background: var(--kh-paper);
  box-shadow: var(--kh-shadow-deep);
  transform: rotate(-1deg);
}
.kh-screen {
  position: relative;
  block-size: 100%;
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(145deg, #0E1C30, #1D3A5D);
  overflow: hidden;
}
.kh-screen__label {
  color: #fff;
  font-size: var(--kh-fs-micro);
  font-weight: var(--kh-fw-bold);
}
.kh-screen__ui {
  position: absolute;
  inset-inline: 18px;
  inset-block: 60px 18px;
  padding: var(--kh-s-4);
  border-radius: 20px;
  background: var(--kh-paper);
}
.kh-dash-row {
  display: grid;
  grid-template-columns: 1.4fr .7fr;
  gap: 10px;
  block-size: 100%;
}
.kh-dash-main {
  padding: 15px;
  border-radius: var(--kh-r-md);
  background: #F5F6F6;
}
.kh-dash-side { display: flex; flex-direction: column; gap: 10px; }
.kh-dash-mini {
  flex: 1;
  padding: 12px;
  border-radius: var(--kh-r-md);
  background: #F1EDE6;
}
.kh-dash-label { font-size: var(--kh-fs-nano); color: #89919C; }
.kh-dash-num {
  font-size: 22px;
  font-weight: var(--kh-fw-black);
  line-height: 1.4;
  color: var(--kh-navy);
}
.kh-chart {
  position: relative;
  block-size: 100px;
  margin-block-start: var(--kh-s-4);
  background: repeating-linear-gradient(0deg, transparent 0 24px, #E6E7E7 24px 25px);
}
.kh-chart svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }

.kh-float {
  position: absolute;
  padding: var(--kh-s-4);
  border: 1px solid #fff;
  border-radius: 19px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 18px 45px rgba(10, 25, 44, .13);
}
.kh-float--one { inset-inline-start: -28px; inset-block-start: 82px; }
.kh-float--two { inset-inline-end: -20px; inset-block-end: 60px; }
.kh-float span { font-size: var(--kh-fs-nano); color: var(--kh-muted); }
.kh-float b { display: block; font-size: 20px; line-height: 1.5; color: var(--kh-navy); }
.kh-float em { font-style: normal; font-size: var(--kh-fs-nano); color: var(--kh-success); }

/* --- Page hero (سایر صفحات) --- */
.kh-page-hero { padding-block: 76px var(--kh-s-8); }
.kh-hero-card {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  align-items: center;
  gap: 42px;
  min-block-size: 450px;
  padding: 54px;
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-section);
  background: linear-gradient(135deg, #FFF, #F4EFE6);
  overflow: hidden;
}
.kh-hero-card__desc { margin-block-start: var(--kh-s-4); }

.kh-hero-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kh-s-6);
  margin-block-start: var(--kh-s-7);
}
.kh-metric { padding-inline-start: var(--kh-s-6); border-inline-start: 1px solid var(--kh-line); }
.kh-metric:last-child { border-inline-start: 0; }
.kh-metric b {
  display: block;
  font-size: var(--kh-fs-lg);
  font-weight: var(--kh-fw-black);
  line-height: 1.5;
  color: var(--kh-navy);
}
.kh-metric span { font-size: var(--kh-fs-micro); color: var(--kh-muted); }

/* --- Hero art (mini dashboard) --- */
.kh-hero-art {
  position: relative;
  min-block-size: 340px;
  border-radius: 31px;
  background:
    radial-gradient(circle at 25% 20%, rgba(208, 160, 83, .3), transparent 22%),
    linear-gradient(145deg, #0A1729, #1D3858);
  box-shadow: 0 30px 70px rgba(10, 24, 43, .18);
  overflow: hidden;
}
.kh-hero-art::after {
  content: attr(data-watermark);
  position: absolute;
  inset-inline-start: 14px;
  inset-block-end: -52px;
  font-size: 160px;
  font-weight: var(--kh-fw-black);
  line-height: 1;
  color: rgba(255, 255, 255, .055);
  pointer-events: none;
}
.kh-hero-art--image { background-size: cover; background-position: center; }
.kh-hero-art--image::after { content: none; }

.kh-mini-dash { position: absolute; inset: 30px; padding: var(--kh-s-4); border-radius: 22px; background: var(--kh-paper); }
.kh-mini-dash__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  block-size: 40px;
  padding-inline: 12px;
  border-radius: 11px;
  background: var(--kh-navy);
  color: #fff;
  font-size: var(--kh-fs-nano);
}
.kh-mini-dash__grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 9px; margin-block-start: 10px; }
.kh-mini-dash__main { block-size: 190px; padding: 13px; border-radius: var(--kh-r-sm); background: #F5F6F6; }
.kh-mini-dash__side { display: flex; flex-direction: column; gap: 9px; }
.kh-mini-dash__card { flex: 1; padding: 12px; border-radius: var(--kh-r-sm); background: #F2EDE5; }

/* --- Breadcrumb --- */
.kh-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kh-s-2);
  margin-block-end: var(--kh-s-4);
  font-size: var(--kh-fs-micro);
  color: var(--kh-muted);
}
.kh-breadcrumb a { color: var(--kh-muted); }
.kh-breadcrumb a:hover { color: var(--kh-gold); }
.kh-breadcrumb li { display: inline-flex; align-items: center; gap: var(--kh-s-2); }
.kh-breadcrumb ol { display: contents; list-style: none; margin: 0; padding: 0; }
.kh-breadcrumb__sep { color: #C3C8CF; }
.kh-breadcrumb [aria-current="page"] { color: var(--kh-navy); font-weight: var(--kh-fw-semi); }

/* ==========================================================================
   08. BENTO
   ========================================================================== */

.kh-bento {
  display: grid;
  grid-template-columns: 1.25fr .75fr .9fr;
  grid-template-rows: 205px 205px;
  gap: 17px;
}
.kh-bento__item {
  position: relative;
  padding: var(--kh-s-6);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-panel);
  background: var(--kh-paper);
  overflow: hidden;
  transition: transform var(--kh-t-base), box-shadow var(--kh-t-base);
}
.kh-bento__item:hover { transform: translateY(-4px); box-shadow: var(--kh-shadow-card); }
.kh-bento__item h3 { font-size: var(--kh-fs-lg); }
.kh-bento__item p { margin-block-start: 6px; font-size: var(--kh-fs-xs); color: var(--kh-muted); }
.kh-bento__item a.kh-stretch::after { content: ""; position: absolute; inset: 0; z-index: 2; }

/* ویدیو: ستون بلند */
.kh-bento__item--video {
  grid-row: 1 / 3;
  background: linear-gradient(145deg, #0D192A, #173757);
  border-color: transparent;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.kh-bento__item--video h3 { color: #fff; font-size: 24px; }
.kh-bento__item--video p  { color: #AEB9C5; }
.kh-bento__item--video::after {
  content: "VIDEO";
  position: absolute;
  inset-inline-start: -8px;
  inset-block-start: 40px;
  font-size: 95px;
  font-weight: var(--kh-fw-black);
  line-height: 1;
  color: rgba(255, 255, 255, .05);
  pointer-events: none;
}

.kh-bento__item--podcast { background: linear-gradient(135deg, #F4EAD8, #FFF); }

.kh-bento__item--download .kh-filebox {
  position: absolute;
  inset-inline-start: 26px;
  inset-block-end: 20px;
  display: grid;
  place-items: center;
  inline-size: 62px;
  block-size: 78px;
  border-radius: var(--kh-r-sm);
  background: linear-gradient(145deg, #152A45, #2E527A);
  color: #fff;
  font-size: var(--kh-fs-nano);
  font-weight: var(--kh-fw-bold);
  transform: rotate(-7deg);
  box-shadow: 0 14px 25px rgba(13, 32, 55, .16);
}

.kh-bento__item--article {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: 1fr .8fr;
  gap: var(--kh-s-5);
  align-items: center;
}
.kh-bento__art {
  block-size: 150px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 25% 25%, rgba(210, 160, 80, .36), transparent 24%),
    linear-gradient(135deg, #0E1F34, #294B71);
  background-size: cover;
  background-position: center;
}

/* آیکن Play شناور داخل بنتو */
.kh-bento__play {
  position: absolute;
  inset-block-start: 24px;
  inset-inline-end: 24px;
}

/* ==========================================================================
   09. CARDS: VIDEO / ARTICLE / PRODUCT
   ========================================================================== */

/* --- Video thumbnail --- */
.kh-thumb {
  position: relative;
  block-size: 225px;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 28%, rgba(75, 124, 255, .4), transparent 30%),
    linear-gradient(135deg, #0E1C2F, #21466E);
}
.kh-thumb--gold {
  background:
    radial-gradient(circle at 30% 28%, rgba(225, 176, 93, .44), transparent 30%),
    linear-gradient(135deg, #241D16, #5D4931);
}
.kh-thumb--green {
  background:
    radial-gradient(circle at 70% 28%, rgba(45, 183, 125, .38), transparent 30%),
    linear-gradient(135deg, #10241F, #1B4537);
}
.kh-thumb__watermark {
  position: absolute;
  inset-inline-start: 15px;
  inset-block-end: -33px;
  font-size: 110px;
  font-weight: var(--kh-fw-black);
  line-height: 1;
  color: rgba(255, 255, 255, .06);
  pointer-events: none;
  user-select: none;
}
.kh-thumb img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--kh-t-base);
}
.kh-card:hover .kh-thumb img { transform: scale(1.04); }

.kh-play {
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  border-radius: 50%;
  border: 0;
  background: var(--kh-paper);
  color: var(--kh-navy);
  box-shadow: 0 10px 26px rgba(8, 20, 36, .26);
  transition: transform var(--kh-t-base), background-color var(--kh-t-base);
}
.kh-play--corner { position: absolute; inset-inline-end: 20px; inset-block-end: 20px; z-index: 2; }
.kh-play--lg { inline-size: 82px; block-size: 82px; }
.kh-play--gold { background: var(--kh-gold); color: #fff; }

/*
 * اندازه آیکن دیگر درصدی نیست.
 *
 * `inline-size: 40%` روی SVGی که خودش width/height دارد، وابسته به
 * بلوک دربرگیرنده حساب می‌شود و در دکمه‌های با اندازه‌های مختلف نتیجه
 * ناهمگون می‌داد — مثلث پخش در ردیف پادکست به یک لکه ریز تبدیل شده بود.
 * مقدار ثابت برای هر اندازه، قابل پیش‌بینی است.
 *
 * مثلث عمداً آینه نمی‌شود: نماد پخش در همه رابط‌ها — حتی راست‌به‌چپ —
 * به راست اشاره می‌کند. آینه کردنش آن را شبیه دکمه «برگشت» می‌کند.
 */
.kh-play svg { inline-size: 20px; block-size: 20px; }
.kh-play--sm svg { inline-size: 15px; block-size: 15px; }
.kh-play--lg svg { inline-size: 30px; block-size: 30px; }
.kh-card:hover .kh-play,
.kh-play:hover { transform: scale(1.06); }

.kh-duration {
  position: absolute;
  inset-inline-start: 14px;
  inset-block-start: 14px;
  z-index: 2;
  padding: 5px 9px;
  border-radius: var(--kh-r-sm);
  background: rgba(0, 0, 0, .66);
  color: #fff;
  font-size: var(--kh-fs-nano);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.kh-level {
  position: absolute;
  inset-inline-end: 14px;
  inset-block-start: 14px;
  z-index: 2;
  padding: 5px 9px;
  border-radius: var(--kh-r-pill);
  background: rgba(255, 255, 255, .92);
  color: var(--kh-navy);
  font-size: var(--kh-fs-nano);
  font-weight: var(--kh-fw-semi);
  line-height: 1.5;
}

/* --- Article thumbnail --- */
.kh-thumb--article {
  block-size: 210px;
  background:
    radial-gradient(circle at 25% 25%, rgba(205, 156, 76, .38), transparent 24%),
    linear-gradient(135deg, #0D1D31, #274B74);
}
.kh-thumb--article .kh-thumb__watermark { inset-block-end: -37px; font-size: 115px; }

/* --- Product cover --- */
/* ۲۸۵ پیکسل به‌علاوه حاشیه، کارت محصول را از کارت ویدیو و مقاله بلندتر
   می‌کرد و در هر شبکه‌ای که کنار هم می‌نشستند ردیف را به‌هم می‌ریخت. */
.kh-product-cover {
  display: grid;
  place-items: center;
  block-size: 225px;
  margin: var(--kh-s-3);
  border-radius: var(--kh-r-md);
  background: linear-gradient(145deg, #111E31, #1E436C);
  color: #fff;
  overflow: hidden;
  position: relative;
}
.kh-product-cover--gold   { background: linear-gradient(145deg, #876329, #D1A455); }
.kh-product-cover--purple { background: linear-gradient(145deg, #2B2945, #736A9B); }
.kh-product-cover--green  { background: linear-gradient(145deg, #123528, #2F7A5C); }
.kh-product-cover img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }

.kh-product-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--kh-s-2);
  inline-size: 145px;
  block-size: 195px;
  padding: var(--kh-s-3);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 15px;
  background: rgba(255, 255, 255, .08);
  text-align: center;
  transform: perspective(600px) rotateY(-10deg) rotateX(3deg);
  box-shadow: 18px 28px 45px rgba(0, 0, 0, .15);
  transition: transform var(--kh-t-base);
}
.kh-card:hover .kh-product-box { transform: perspective(600px) rotateY(-6deg) rotateX(2deg) translateY(-4px); }
.kh-product-box small { font-size: var(--kh-fs-nano); opacity: .75; letter-spacing: .4px; }
.kh-product-box b { font-size: 22px; font-weight: var(--kh-fw-black); line-height: 1.35; }

.kh-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--kh-s-3);
  margin-block-start: var(--kh-s-4);
  padding-block-start: var(--kh-s-4);
  /* خط جداکننده به‌جای دکمه: مرز را می‌سازد بدون اینکه وزن بصری اضافه کند */
  border-block-start: 1px solid var(--kh-line);
}
.kh-price {
  font-size: var(--kh-fs-lg);
  font-weight: var(--kh-fw-black);
  color: var(--kh-navy);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
/* واحد پول ریزتر از عدد — عدد چیزی است که چشم دنبالش می‌گردد */
.kh-price .woocommerce-Price-currencySymbol {
  font-size: var(--kh-fs-micro);
  font-weight: var(--kh-fw-medium);
  color: var(--kh-muted);
  margin-inline-start: 3px;
}
.kh-price-go {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  font-size: var(--kh-fs-micro);
  font-weight: var(--kh-fw-bold);
  color: var(--kh-muted);
  transition: color var(--kh-t-fast), gap var(--kh-t-fast);
}
.kh-price-go svg { inline-size: 14px; block-size: 14px; }
.kh-card:hover .kh-price-go { color: var(--kh-gold); gap: 9px; }
.kh-price del {
  margin-inline-end: var(--kh-s-2);
  font-size: var(--kh-fs-micro);
  font-weight: var(--kh-fw-body);
  color: var(--kh-muted);
  text-decoration-thickness: 1px;
}
.kh-price ins { text-decoration: none; }

.kh-badge-sale {
  position: absolute;
  inset-block-start: 26px;
  inset-inline-end: 26px;
  z-index: 3;
  padding: 5px 11px;
  border-radius: var(--kh-r-pill);
  background: var(--kh-success);
  color: #fff;
  font-size: var(--kh-fs-nano);
  font-weight: var(--kh-fw-bold);
}

/* ==========================================================================
   10. PODCAST
   ========================================================================== */

.kh-podcast-layout {
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  gap: var(--kh-s-6);
  align-items: start;
}

.kh-podcast-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  min-block-size: 390px;
  padding: 34px;
  border-radius: 34px;
  background: linear-gradient(145deg, #101E31, #07121F);
  color: #fff;
  overflow: hidden;
}
.kh-podcast-feature h3 { margin-block-start: var(--kh-s-3); font-size: 29px; line-height: 1.55; color: #fff; }
.kh-podcast-feature p  { margin-block-start: var(--kh-s-2); font-size: var(--kh-fs-xs); color: #9CA9B8; }
.kh-podcast-feature__cover {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .22;
}
.kh-podcast-feature > * { position: relative; z-index: 1; }

.kh-player-row {
  display: flex;
  align-items: center;
  gap: var(--kh-s-4);
  margin-block-start: auto;
  padding-block-start: var(--kh-s-8);
}
.kh-play--big { inline-size: 60px; block-size: 60px; flex: none; }

.kh-progress {
  position: relative;
  block-size: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .15);
  cursor: pointer;
  flex: 1;
}
.kh-progress__bar {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 0%;
  border-radius: 2px;
  background: var(--kh-gold);
  transition: inline-size .1s linear;
}
.kh-player-time {
  display: flex;
  justify-content: space-between;
  margin-block-start: var(--kh-s-2);
  font-size: var(--kh-fs-nano);
  color: #94A2B2;
  font-variant-numeric: tabular-nums;
}

.kh-podcast-list {
  padding: var(--kh-s-2) var(--kh-s-5);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-panel);
  background: var(--kh-paper);
}
.kh-podcast-item {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--kh-s-4);
  padding: var(--kh-s-3) var(--kh-s-3);
  border-block-end: 1px solid var(--kh-line);
  border-radius: var(--kh-r-md);
  transition: background-color var(--kh-t-fast);
}
.kh-podcast-item:last-child { border-block-end: 0; }
/* کل ردیف روشن می‌شود، نه فقط عنوان — سطح هدف بزرگ‌تر و بازخورد واضح‌تر */
.kh-podcast-item:hover { background: var(--kh-bg-soft); }
.kh-podcast-item b {
  display: block;
  font-size: var(--kh-fs-sm);
  font-weight: var(--kh-fw-bold);
  line-height: 1.7;
  color: var(--kh-navy);
}
/*
 * `:not([data-kh-icon])` حیاتی است.
 *
 * این قاعده برای متن متای اپیزود («قسمت ۳۵ — استراتژی محتوا») نوشته شده
 * بود، ولی `span` خالی انتخابگر، پوشش آیکن دکمه پخش را هم می‌گرفت. نتیجه
 * دو باگ هم‌زمان بود: `display: block` آیکن را از ۱۵×۱۵ به ۸×۱۵ له می‌کرد،
 * و `color: var(--kh-muted)` باعث می‌شد `fill="currentColor"` به‌جای رنگ
 * اکسنتِ دکمه، خاکستری شود.
 */
.kh-podcast-item span:not([data-kh-icon]) { display: block; font-size: var(--kh-fs-micro); color: var(--kh-muted); }
/* پوشش آیکن باید فقط یک ظرف مرکزچین باشد و رنگ را از دکمه بگیرد */
.kh-podcast-item [data-kh-icon] {
  display: grid;
  place-items: center;
  color: inherit;
  font-size: 0;
}
.kh-podcast-item__num {
  text-align: end;
  display: grid;
  gap: 2px;
}
.kh-podcast-item__num b {
  color: var(--kh-gold);
  font-size: var(--kh-fs-micro);
  font-variant-numeric: tabular-nums;
}
.kh-podcast-item:hover b { color: var(--kh-gold); }

.kh-play--sm {
  inline-size: 40px;
  block-size: 40px;
  background: var(--kh-gold-soft);
  color: var(--kh-gold);
  box-shadow: none;
  transition: background-color var(--kh-t-fast), color var(--kh-t-fast);
}
.kh-podcast-item:hover .kh-play--sm { background: var(--kh-gold); color: #fff; }

/* ==========================================================================
   11. PLAYERS
   ========================================================================== */

/* --- Video --- */
.kh-video-player {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  background: linear-gradient(145deg, #0D1828, #21456D);
  aspect-ratio: 16 / 9;
  box-shadow: var(--kh-shadow-deep);
}
.kh-video-player__poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  padding: 0;
  background-color: transparent;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}
.kh-video-player__poster::after {
  content: attr(data-watermark);
  position: absolute;
  inset-inline-start: 10px;
  inset-block-end: -50px;
  font-size: 150px;
  font-weight: var(--kh-fw-black);
  line-height: 1;
  color: rgba(255, 255, 255, .05);
  pointer-events: none;
}
.kh-video-player iframe,
.kh-video-player video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}
.kh-video-player.is-playing .kh-video-player__poster { display: none; }

/* --- Audio / Podcast --- */
.kh-audio-player {
  padding: 36px;
  border-radius: 32px;
  background: linear-gradient(145deg, #0C192A, #19395C);
  color: #fff;
  box-shadow: var(--kh-shadow-deep);
}
.kh-audio-player h2 { color: #fff; font-size: 26px; }
.kh-audio-player__sub { margin-block-start: 6px; font-size: var(--kh-fs-xs); color: #9EABBA; }

/* Waveform: نوارهای CSS، بدون کتابخانه جانبی */
.kh-wave {
  position: relative;
  block-size: 56px;
  margin-block-start: var(--kh-s-7);
  cursor: pointer;
  --kh-wave-progress: 0%;
}
.kh-wave__bars {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 3px, transparent 3px 9px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.kh-wave__played {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--kh-wave-progress);
  background: repeating-linear-gradient(90deg, var(--kh-gold) 0 3px, transparent 3px 9px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  transition: inline-size .1s linear;
}
.kh-audio-controls {
  display: flex;
  align-items: center;
  gap: var(--kh-s-4);
  margin-block-start: var(--kh-s-6);
}
.kh-audio-controls__btn {
  display: grid;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--kh-r-sm);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: var(--kh-fs-micro);
  font-weight: var(--kh-fw-semi);
  cursor: pointer;
  transition: background-color var(--kh-t-fast);
}
.kh-audio-controls__btn:hover { background: rgba(255, 255, 255, .14); }
.kh-audio-controls__time {
  margin-inline-start: auto;
  font-size: var(--kh-fs-micro);
  color: #9EABBA;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   12. ARTICLE READING EXPERIENCE + TOC
   ========================================================================== */

.kh-article {
  padding: 38px;
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-panel);
  background: var(--kh-paper);
}
.kh-article__header { margin-block-end: var(--kh-s-6); }
.kh-article h1 { font-size: var(--kh-fs-h1); line-height: 1.55; }

/* بدنه مقاله: کنترل عرض خوانا + تایپوگرافی.
   margin-inline: auto عمدی است — وقتی قاب مقاله از عرض خوانا پهن‌تر است
   (مثلاً صفحه‌ای که سایدبار ندارد)، متن وسط می‌نشیند و فضای خالی یک‌طرفه
   ایجاد نمی‌شود. */
.kh-prose { max-inline-size: var(--kh-measure); margin-inline: auto; }
.kh-prose > * + * { margin-block-start: var(--kh-s-4); }
.kh-prose p,
.kh-prose li { color: var(--kh-body-text); font-size: var(--kh-fs-base); line-height: var(--kh-lh-body); }
.kh-prose h2 {
  margin-block-start: var(--kh-s-8);
  margin-block-end: var(--kh-s-2);
  font-size: 24px;
  scroll-margin-top: var(--kh-sticky-top);
}
.kh-prose h3 {
  margin-block-start: var(--kh-s-7);
  margin-block-end: var(--kh-s-2);
  font-size: var(--kh-fs-h3);
  scroll-margin-top: var(--kh-sticky-top);
}
.kh-prose ul,
.kh-prose ol { padding-inline-start: var(--kh-s-5); margin-block: var(--kh-s-4); }
.kh-prose li + li { margin-block-start: var(--kh-s-2); }
.kh-prose ul { list-style: none; padding-inline-start: 0; }
.kh-prose ul > li { position: relative; padding-inline-start: var(--kh-s-6); }
.kh-prose ul > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 6px;
  inset-block-start: .78em;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--kh-gold);
}
.kh-prose a {
  color: var(--kh-navy);
  font-weight: var(--kh-fw-semi);
  text-decoration: underline;
  text-decoration-color: var(--kh-gold-light);
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
.kh-prose a:hover { color: var(--kh-gold); }
.kh-prose img,
.kh-prose figure { border-radius: var(--kh-r-card); overflow: hidden; }
.kh-prose figure { margin: var(--kh-s-7) 0; }
.kh-prose figcaption {
  margin-block-start: var(--kh-s-3);
  font-size: var(--kh-fs-micro);
  color: var(--kh-muted);
  text-align: center;
}
.kh-prose .kh-lead,
.kh-prose .kh-article-lead {
  font-size: var(--kh-fs-md);
  color: var(--kh-ink-soft);
  max-inline-size: none;
}
.kh-prose blockquote,
.kh-prose .kh-quote {
  margin-block: var(--kh-s-6);
  padding: var(--kh-s-5);
  border-radius: 18px;
  border-inline-start: 3px solid var(--kh-gold);
  background: var(--kh-gold-soft);
  color: #4A4332;
  font-size: var(--kh-fs-base);
}
.kh-prose blockquote p { color: inherit; }
.kh-prose code {
  padding: 2px 7px;
  border-radius: 7px;
  background: var(--kh-tag-bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  direction: ltr;
  display: inline-block;
}
.kh-prose pre {
  padding: var(--kh-s-5);
  border-radius: var(--kh-r-md);
  background: var(--kh-navy);
  color: #E5EAF0;
  overflow-x: auto;
  direction: ltr;
  text-align: left;
}
.kh-prose pre code { background: none; padding: 0; color: inherit; }

/* جدول: هرگز نباید باعث overflow صفحه شود */
.kh-prose .kh-table-scroll { overflow-x: auto; margin-block: var(--kh-s-6); border-radius: var(--kh-r-md); }
.kh-prose table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--kh-fs-sm);
  min-inline-size: 480px;
}
.kh-prose th,
.kh-prose td { padding: var(--kh-s-3) var(--kh-s-4); border: 1px solid var(--kh-line); text-align: start; }
.kh-prose th { background: var(--kh-bg); font-weight: var(--kh-fw-bold); color: var(--kh-navy); }

.kh-prose .wp-block-embed,
.kh-prose iframe { border-radius: var(--kh-r-card); overflow: hidden; max-inline-size: 100%; }
.kh-prose .wp-block-embed__wrapper iframe { aspect-ratio: 16 / 9; block-size: auto; inline-size: 100%; }

/* --- Sidebar / TOC --- */
.kh-sidebar {
  position: sticky;
  inset-block-start: var(--kh-sticky-top);
  padding: var(--kh-s-6);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-panel);
  background: var(--kh-paper);
  /* dvh بعد از vh می‌آید تا مرورگر قدیمی مقدار اول را نگه دارد و مرورگر
     جدید دومی را. در سافاری موبایل، 100vh شامل نوار آدرس است و پنل از
     صفحه بلندتر می‌شود. */
  max-block-size: calc(100vh - var(--kh-sticky-top) - 20px);
  max-block-size: calc(100dvh - var(--kh-sticky-top) - 20px);
  overflow-y: auto;
}
.kh-sidebar + .kh-sidebar { margin-block-start: var(--kh-s-5); }
.kh-sidebar h4 { margin-block-end: var(--kh-s-3); font-size: var(--kh-fs-md); }

.kh-toc__list { list-style: none; margin: 0; padding: 0; }
.kh-toc__list a {
  display: block;
  padding-block: 10px;
  padding-inline-start: var(--kh-s-3);
  border-block-end: 1px solid var(--kh-line);
  border-inline-start: 2px solid transparent;
  font-size: var(--kh-fs-xs);
  line-height: 1.7;
  color: #68717D;
  transition: color var(--kh-t-fast), border-color var(--kh-t-fast);
}
.kh-toc__list li:last-child a { border-block-end: 0; }
.kh-toc__list .kh-toc--h3 a { padding-inline-start: var(--kh-s-6); font-size: var(--kh-fs-micro); }
.kh-toc__list a:hover { color: var(--kh-navy); }
.kh-toc__list a.is-active {
  color: var(--kh-navy);
  font-weight: var(--kh-fw-semi);
  border-inline-start-color: var(--kh-gold);
}

/* لیست ساده در sidebar (سرفصل‌ها، مشخصات محصول) */
.kh-sidebar__links { display: flex; flex-direction: column; }
.kh-sidebar__links > * {
  padding-block: 10px;
  border-block-end: 1px solid var(--kh-line);
  font-size: var(--kh-fs-xs);
  color: #68717D;
}
.kh-sidebar__links > *:last-child { border-block-end: 0; }

/* --- Spec list (key/value) --- */
.kh-specs { display: grid; gap: 0; }
.kh-specs__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kh-s-3);
  padding-block: 11px;
  border-block-end: 1px solid var(--kh-line);
  font-size: var(--kh-fs-xs);
}
.kh-specs__row:last-child { border-block-end: 0; }
.kh-specs__key { color: var(--kh-muted); }
.kh-specs__val { color: var(--kh-navy); font-weight: var(--kh-fw-semi); }

/* --- Author box --- */
.kh-author {
  display: flex;
  align-items: center;
  gap: var(--kh-s-5);
  margin-block-start: var(--kh-s-8);
  padding: var(--kh-s-6);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-panel);
  background: linear-gradient(135deg, #FFF, #FAF7F1);
}
.kh-author__avatar {
  inline-size: 72px;
  block-size: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: linear-gradient(135deg, #162E4D, #D5AB67);
}
.kh-author__name { font-size: var(--kh-fs-md); }
.kh-author__bio { margin-block-start: 6px; font-size: var(--kh-fs-xs); color: var(--kh-muted); }

/* --- Share --- */
.kh-share { display: flex; align-items: center; gap: var(--kh-s-2); flex-wrap: wrap; }
.kh-share__label { font-size: var(--kh-fs-micro); color: var(--kh-muted); margin-inline-end: var(--kh-s-2); }
.kh-share a,
.kh-share button {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-sm);
  background: var(--kh-paper);
  color: var(--kh-nav-link);
  cursor: pointer;
  transition: color var(--kh-t-fast), border-color var(--kh-t-fast);
}
.kh-share a:hover,
.kh-share button:hover { color: var(--kh-gold); border-color: var(--kh-gold); }
/* لوگوهای شبکه‌ها توپرند و آیکن کپی خطی؛ اندازه کمی بزرگ‌تر تا کنار هم
   هم‌وزن دیده شوند. */
.kh-share svg { inline-size: 18px; block-size: 18px; }
.kh-share [data-kh-copy] svg { inline-size: 17px; block-size: 17px; }
.kh-share .is-copied { color: var(--kh-success); border-color: var(--kh-success); }

/* آیکن‌های ریز داخل ردیف متا باید هم‌تراز متن بنشینند */
.kh-meta svg { inline-size: 14px; block-size: 14px; flex: none; opacity: .85; }

/* --- Downloads / attachments --- */
.kh-files { display: grid; gap: var(--kh-s-3); }
.kh-file {
  display: flex;
  align-items: center;
  gap: var(--kh-s-4);
  padding: var(--kh-s-4);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-md);
  background: var(--kh-field-bg);
  transition: border-color var(--kh-t-fast), background-color var(--kh-t-fast);
}
.kh-file:hover { border-color: var(--kh-gold); background: var(--kh-paper); }
.kh-file__icon {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--kh-r-sm);
  background: var(--kh-navy);
  color: var(--kh-gold-light);
  font-size: var(--kh-fs-nano);
  font-weight: var(--kh-fw-black);
  flex: none;
  text-transform: uppercase;
}
.kh-file__name { font-size: var(--kh-fs-sm); font-weight: var(--kh-fw-semi); color: var(--kh-navy); }
.kh-file__size { font-size: var(--kh-fs-micro); color: var(--kh-muted); }

/* --- FAQ (accordion بدون JS سنگین) --- */
.kh-faq { display: grid; gap: var(--kh-s-3); }
.kh-faq__item {
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-md);
  background: var(--kh-paper);
  overflow: hidden;
}
.kh-faq__item[open] { border-color: #DCDCD4; box-shadow: var(--kh-shadow-sm); }
.kh-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kh-s-4);
  padding: var(--kh-s-5);
  font-size: var(--kh-fs-base);
  font-weight: var(--kh-fw-bold);
  color: var(--kh-navy);
  cursor: pointer;
  list-style: none;
}
.kh-faq__q::-webkit-details-marker { display: none; }
.kh-faq__q::after {
  content: "+";
  flex: none;
  font-size: 20px;
  line-height: 1;
  color: var(--kh-gold);
  transition: transform var(--kh-t-base);
}
.kh-faq__item[open] .kh-faq__q::after { transform: rotate(45deg); }
.kh-faq__a {
  padding: 0 var(--kh-s-5) var(--kh-s-5);
  font-size: var(--kh-fs-sm);
  color: var(--kh-body-text);
}

/* --- Timeline (صفحه درباره من) --- */
.kh-timeline { position: relative; padding-inline-start: var(--kh-s-6); }
.kh-timeline::before {
  content: "";
  position: absolute;
  inset-block: 6px;
  inset-inline-start: 4px;
  inline-size: 2px;
  background: linear-gradient(var(--kh-gold), var(--kh-line));
}
.kh-timeline__item { position: relative; padding-block-end: var(--kh-s-6); }
.kh-timeline__item::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--kh-s-6) * -1 + 1px);
  inset-block-start: 8px;
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background: var(--kh-gold);
  box-shadow: 0 0 0 4px var(--kh-gold-soft);
}
.kh-timeline__year { font-size: var(--kh-fs-micro); font-weight: var(--kh-fw-black); color: var(--kh-gold); }
.kh-timeline__title { margin-block-start: 2px; font-size: var(--kh-fs-md); }
.kh-timeline__desc { margin-block-start: 4px; font-size: var(--kh-fs-sm); color: var(--kh-muted); }

/* --- Skills --- */
.kh-skill + .kh-skill { margin-block-start: var(--kh-s-4); }
.kh-skill__head {
  display: flex;
  justify-content: space-between;
  font-size: var(--kh-fs-sm);
  font-weight: var(--kh-fw-semi);
  color: var(--kh-navy);
  margin-block-end: 7px;
}
.kh-skill__track { block-size: 6px; border-radius: 3px; background: var(--kh-line); overflow: hidden; }
.kh-skill__fill { block-size: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--kh-gold), var(--kh-gold-light)); }

/* --- Stats --- */
.kh-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kh-s-3); margin-block-start: var(--kh-s-6); }
.kh-stat { padding: var(--kh-s-5); border-radius: 17px; background: var(--kh-bg); }
.kh-stat b { display: block; font-size: 22px; font-weight: var(--kh-fw-black); line-height: 1.4; color: var(--kh-navy); }
.kh-stat span { font-size: var(--kh-fs-micro); color: var(--kh-muted); }

/* --- Portrait --- */
.kh-portrait {
  position: relative;
  min-block-size: 460px;
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% 25%, rgba(208, 160, 83, .4), transparent 25%),
    linear-gradient(145deg, #0D1828, #2A527B);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.kh-portrait::after {
  content: attr(data-watermark);
  position: absolute;
  inset-inline-start: 20px;
  inset-block-end: -35px;
  font-size: 145px;
  font-weight: var(--kh-fw-black);
  line-height: 1;
  color: rgba(255, 255, 255, .06);
}
.kh-portrait--image::after { content: none; }

/* ==========================================================================
   13. FORMS
   ========================================================================== */

.kh-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kh-s-4); }
.kh-field { display: flex; flex-direction: column; gap: 7px; }
.kh-field--full { grid-column: 1 / -1; }
.kh-field label { font-size: var(--kh-fs-micro); font-weight: var(--kh-fw-semi); color: var(--kh-muted); }
.kh-field label .kh-req { color: var(--kh-gold); }
.kh-field input,
.kh-field textarea,
.kh-field select {
  padding: 14px var(--kh-s-4);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-btn);
  background: var(--kh-field-bg);
  font-size: var(--kh-fs-sm);
  color: var(--kh-ink);
  outline: 0;
  transition: border-color var(--kh-t-fast), box-shadow var(--kh-t-fast), background-color var(--kh-t-fast);
}
.kh-field input:focus,
.kh-field textarea:focus,
.kh-field select:focus {
  border-color: var(--kh-gold);
  background: var(--kh-paper);
  box-shadow: var(--kh-focus);
}
.kh-field textarea { min-block-size: 150px; resize: vertical; }
.kh-field input::placeholder,
.kh-field textarea::placeholder { color: #A9B0B9; }
.kh-field__error { font-size: var(--kh-fs-micro); color: #C0392B; }
.kh-field.has-error input,
.kh-field.has-error textarea { border-color: #C0392B; }

/* هانی‌پات ضد اسپم — از دید کاربر و اسکرین‌ریدر پنهان */
.kh-hp { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }

.kh-form-notice {
  padding: var(--kh-s-4);
  border-radius: var(--kh-r-md);
  font-size: var(--kh-fs-sm);
  margin-block-end: var(--kh-s-4);
}
.kh-form-notice--ok  { background: #E7F7F0; color: #17654A; border: 1px solid #BCE6D6; }
.kh-form-notice--err { background: #FDECEA; color: #922B21; border: 1px solid #F5C6C2; }

/* ==========================================================================
   14. PRE-FOOTER CTA
   ========================================================================== */

.kh-prefooter { padding-block: var(--kh-s-6) var(--kh-section-y); }
.kh-cta {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 36px;
  padding: 52px;
  border-radius: var(--kh-r-section);
  background:
    radial-gradient(circle at 12% 50%, rgba(211, 162, 83, .18), transparent 22%),
    linear-gradient(135deg, #0D1B2E, #091421);
  color: #fff;
}
.kh-cta h2 { font-size: 33px; line-height: 1.55; color: #fff; }
.kh-cta h2 .kh-accent { color: var(--kh-gold-light); }
.kh-cta p { margin-block-start: var(--kh-s-3); font-size: var(--kh-fs-sm); color: #9EABBA; }

.kh-newsletter {
  display: flex;
  gap: 7px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--kh-r-md);
  background: rgba(255, 255, 255, .07);
}
.kh-newsletter input {
  flex: 1;
  min-inline-size: 0;
  padding-inline: var(--kh-s-3);
  border: 0;
  background: transparent;
  color: #fff;
  font-size: var(--kh-fs-sm);
  outline: 0;
}
.kh-newsletter input::placeholder { color: #8E9BAA; }
.kh-newsletter input:focus-visible { border-radius: var(--kh-r-sm); box-shadow: var(--kh-focus); }
.kh-newsletter__note { margin-block-start: var(--kh-s-3); font-size: var(--kh-fs-micro); color: #8492A2; }

/* ==========================================================================
   15. MEGA FOOTER
   ========================================================================== */

.kh-footer {
  position: relative;
  padding-block-end: var(--kh-s-6);
  background: var(--kh-footer-bg);
  color: var(--kh-footer-text);
  overflow: hidden;
}
.kh-footer__top {
  padding-block: 56px 38px;
  border-block-end: 1px solid var(--kh-footer-line);
}
.kh-footer__grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1fr 1fr 1.1fr;
  gap: 38px;
}
.kh-footer .kh-brand__title { color: var(--kh-footer-title); }
.kh-footer .kh-brand__sub   { color: #8494A6; }
.kh-footer__about {
  margin-block-start: var(--kh-s-4);
  max-inline-size: 320px;
  font-size: var(--kh-fs-xs);
  line-height: 1.95;
  color: var(--kh-footer-text);
}

.kh-socials { display: flex; gap: var(--kh-s-2); margin-block-start: var(--kh-s-5); }
.kh-social {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border: 1px solid var(--kh-footer-line);
  border-radius: var(--kh-r-sm);
  color: #C3CCD8;
  font-size: var(--kh-fs-micro);
  transition: color var(--kh-t-fast), border-color var(--kh-t-fast), background-color var(--kh-t-fast);
}
.kh-social:hover { color: var(--kh-gold-light); border-color: var(--kh-gold); background: rgba(200, 147, 63, .1); }
.kh-social svg { inline-size: 17px; block-size: 17px; }

.kh-footer__col h4 {
  margin-block-end: var(--kh-s-4);
  font-size: var(--kh-fs-sm);
  color: var(--kh-footer-title);
}
.kh-footer__links { display: flex; flex-direction: column; gap: 9px; list-style: none; margin: 0; padding: 0; }
.kh-footer__links a { font-size: var(--kh-fs-xs); color: var(--kh-footer-text); }
.kh-footer__links a:hover { color: var(--kh-gold-light); }

.kh-footer__contact {
  padding: var(--kh-s-5);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 18px;
  background: var(--kh-footer-panel);
}
.kh-footer__contact b { display: block; font-size: var(--kh-fs-sm); color: var(--kh-footer-title); }
.kh-footer__contact p { margin-block-start: var(--kh-s-2); font-size: var(--kh-fs-micro); color: var(--kh-footer-text); }
.kh-footer__contact p a:hover { color: var(--kh-gold-light); }
.kh-footer__contact .kh-btn { margin-block-start: var(--kh-s-4); }

/* --- نمادهای اعتماد ---
   پس‌زمینه سفید عمدی است: اکثر نمادها لوگوی رنگی روی سفید هستند و
   روی فوتر تیره درست دیده نمی‌شوند. */
.kh-footer__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kh-s-3);
  padding-block: var(--kh-s-5);
  border-block-start: 1px solid var(--kh-footer-line);
}
.kh-footer__badge {
  display: grid;
  place-items: center;
  padding: var(--kh-s-2);
  border-radius: var(--kh-r-sm);
  background: #fff;
  overflow: hidden;
}
.kh-footer__badge img {
  block-size: 68px;
  inline-size: auto;
  display: block;
}

@media (max-width: 768px) {
  .kh-footer__badges { justify-content: center; }
  .kh-footer__badge img { block-size: 58px; }
}

.kh-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--kh-s-4);
  padding-block-start: var(--kh-s-5);
  font-size: var(--kh-fs-nano);
  color: #8090A1;
}
.kh-footer__bottom a { color: var(--kh-gold-light); }
.kh-footer__bottom a:hover { text-decoration: underline; text-underline-offset: 3px; }
.kh-footer__chips { display: flex; flex-wrap: wrap; gap: 7px; }

/* ==========================================================================
   16. WOOCOMMERCE INTEGRATION
   ظاهر پیش‌فرض ووکامرس در Frontend استفاده نمی‌شود؛ فقط عناصری که
   ووکامرس ناگزیر خودش چاپ می‌کند (نوتیس، کارت، تسویه) هم‌هویت می‌شوند.
   ========================================================================== */

.kh-site .woocommerce-message,
.kh-site .woocommerce-info,
.kh-site .woocommerce-error {
  padding: var(--kh-s-4) var(--kh-s-5);
  border: 1px solid var(--kh-line);
  border-inline-start: 3px solid var(--kh-gold);
  border-radius: var(--kh-r-md);
  background: var(--kh-paper);
  color: var(--kh-ink);
  font-size: var(--kh-fs-sm);
  list-style: none;
  box-shadow: var(--kh-shadow-sm);
}
.kh-site .woocommerce-message { border-inline-start-color: var(--kh-success); }
.kh-site .woocommerce-error   { border-inline-start-color: #C0392B; }
.kh-site .woocommerce-message .button,
.kh-site .woocommerce-info .button { float: none; margin-inline-start: var(--kh-s-3); }

.kh-site .woocommerce .button,
.kh-site .woocommerce button.button,
.kh-site .woocommerce input.button,
.kh-site .woocommerce a.button,
.kh-site .woocommerce #respond input#submit,
.kh-site .wc-block-components-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 48px;
  padding-inline: var(--kh-s-5);
  border: 0;
  border-radius: var(--kh-r-btn);
  background: var(--kh-navy);
  color: #fff;
  font-family: var(--kh-font);
  font-size: var(--kh-fs-sm);
  font-weight: var(--kh-fw-bold);
  line-height: 1;
  transition: transform var(--kh-t-base);
}
.kh-site .woocommerce .button:hover { background: var(--kh-navy-2); transform: translateY(-2px); }
.kh-site .woocommerce .button.alt,
.kh-site .woocommerce button.button.alt {
  background: linear-gradient(135deg, #BD842F, #DFB15D);
}

.kh-site .woocommerce table.shop_table,
.kh-site .woocommerce-checkout .woocommerce-checkout-review-order-table {
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-panel);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--kh-paper);
  overflow: hidden;
}
.kh-site .woocommerce table.shop_table th,
.kh-site .woocommerce table.shop_table td {
  padding: var(--kh-s-4) var(--kh-s-5);
  border-block-start: 1px solid var(--kh-line);
  font-size: var(--kh-fs-sm);
}
.kh-site .woocommerce-cart .cart-collaterals .cart_totals,
.kh-site .woocommerce-checkout #order_review,
.kh-site .woocommerce-checkout .woocommerce-billing-fields {
  border-radius: var(--kh-r-panel);
}
.kh-site .woocommerce form .form-row input.input-text,
.kh-site .woocommerce form .form-row textarea,
.kh-site .woocommerce form .form-row select,
.kh-site .select2-container .select2-selection--single {
  min-block-size: 50px;
  padding: 13px var(--kh-s-4);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-btn);
  background: var(--kh-field-bg);
  font-size: var(--kh-fs-sm);
}
.kh-site .woocommerce form .form-row label { font-size: var(--kh-fs-micro); color: var(--kh-muted); }

/* ناوبری پیش‌فرض حساب کاربری — فقط وقتی قالب فرزند KH نصب نیست.
   اگر سایدبار اختصاصی (.kh-side-nav) رندر شده باشد، این قواعد اعمال نمی‌شوند،
   وگرنه display:block روی لینک‌ها می‌نشیند و آیکن و متن روی هم می‌افتند. */
.kh-site .woocommerce-MyAccount-navigation ul:not(.kh-side-nav) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.kh-site .woocommerce-MyAccount-navigation ul:not(.kh-side-nav) a {
  display: block;
  padding: var(--kh-s-3) var(--kh-s-4);
  border-radius: var(--kh-r-sm);
  font-size: var(--kh-fs-sm);
  color: var(--kh-nav-link);
}
.kh-site .woocommerce-MyAccount-navigation ul:not(.kh-side-nav) .is-active a {
  background: var(--kh-navy);
  color: #fff;
}

/* جدول دانلودها بعد از خرید */
.kh-site .woocommerce-order-downloads,
.kh-site .woocommerce-MyAccount-downloads { margin-block-start: var(--kh-s-6); }

/* حذف عناصر بی‌ربط برای محصول دانلودی */
.kh-site .woocommerce .shipping,
.kh-site .woocommerce-shipping-fields { display: none; }

/* ==========================================================================
   16.5. ویجت‌های عمومی
   جستجو، بنر فراخوان، کارت تماس، نقشه سایت
   ========================================================================== */

/* --- جستجو --- */
.kh-search {
  display: flex;
  align-items: center;
  gap: var(--kh-s-2);
  padding: 7px;
  padding-inline-start: var(--kh-s-4);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-btn);
  background: var(--kh-paper);
  box-shadow: var(--kh-shadow-xs);
  transition: border-color var(--kh-t-fast), box-shadow var(--kh-t-fast);
}
.kh-search:focus-within { border-color: var(--kh-gold); box-shadow: var(--kh-focus); }

.kh-search__icon { display: grid; place-items: center; color: var(--kh-muted); flex: none; }
.kh-search__icon svg { inline-size: 18px; block-size: 18px; }

.kh-search input[type="search"] {
  flex: 1;
  min-inline-size: 0;
  border: 0;
  background: transparent;
  outline: 0;
  font-size: var(--kh-fs-sm);
  color: var(--kh-ink);
  /* حذف آیکن ✕ پیش‌فرض مرورگر که با طراحی هماهنگ نیست */
  -webkit-appearance: none;
  appearance: none;
}
.kh-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.kh-search input::placeholder { color: #A9B0B9; }
.kh-search .kh-btn { flex: none; min-block-size: 42px; }

.kh-search--lg {
  padding: 9px;
  padding-inline-start: var(--kh-s-5);
  border-radius: var(--kh-r-md);
}
.kh-search--lg input[type="search"] { font-size: var(--kh-fs-md); }
.kh-search--lg .kh-btn { min-block-size: 50px; padding-inline: var(--kh-s-6); }

/* --- بنر فراخوان --- */
.kh-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--kh-s-6);
  padding: var(--kh-s-8);
  border-radius: var(--kh-r-panel);
}
.kh-banner h2 { font-size: 26px; line-height: 1.55; }
.kh-banner p  { margin-block-start: var(--kh-s-3); font-size: var(--kh-fs-sm); }
.kh-banner__actions { display: flex; flex-wrap: wrap; gap: var(--kh-s-3); }

.kh-banner--dark {
  background:
    radial-gradient(circle at 12% 50%, rgba(211, 162, 83, .18), transparent 24%),
    linear-gradient(135deg, #0D1B2E, #091421);
  color: #fff;
}
.kh-banner--dark h2 { color: #fff; }
.kh-banner--dark p  { color: #9EABBA; }

.kh-banner--light {
  border: 1px solid var(--kh-line);
  background: var(--kh-paper);
}
.kh-banner--light p { color: var(--kh-muted); }

.kh-banner--gold {
  border: 1px solid #F0E2C6;
  background: linear-gradient(135deg, var(--kh-gold-soft), #FFF);
}
.kh-banner--gold p { color: #6E6350; }

/* --- کارت‌های راه ارتباطی --- */
.kh-contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: var(--kh-s-4);
}
.kh-contact-card {
  display: flex;
  align-items: center;
  gap: var(--kh-s-4);
  padding: var(--kh-s-5);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-card);
  background: var(--kh-paper);
  transition: transform var(--kh-t-base), box-shadow var(--kh-t-base), border-color var(--kh-t-base);
}
a.kh-contact-card:hover {
  transform: translateY(-4px);
  border-color: var(--kh-gold);
  box-shadow: var(--kh-shadow-sm);
}
.kh-contact-card__icon {
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  border-radius: var(--kh-r-sm);
  background: var(--kh-gold-soft);
  color: var(--kh-gold);
  flex: none;
}
.kh-contact-card__icon svg { inline-size: 21px; block-size: 21px; }
.kh-contact-card b {
  display: block;
  font-size: var(--kh-fs-sm);
  color: var(--kh-navy);
  line-height: 1.7;
}
.kh-contact-card > span > span {
  display: block;
  font-size: var(--kh-fs-micro);
  color: var(--kh-muted);
  overflow-wrap: anywhere;
}

/* --- نقشه سایت --- */
.kh-sitemap { display: grid; gap: var(--kh-s-8); }
.kh-sitemap__group h2 {
  padding-block-end: var(--kh-s-3);
  margin-block-end: var(--kh-s-4);
  border-block-end: 1px solid var(--kh-line);
  font-size: var(--kh-fs-h3);
}
.kh-sitemap__group ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 10px var(--kh-s-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.kh-sitemap__group a {
  display: block;
  padding-block: 4px;
  font-size: var(--kh-fs-sm);
  color: var(--kh-body-text);
}
.kh-sitemap__group a:hover { color: var(--kh-gold); }

@media (max-width: 768px) {
  .kh-banner {
    grid-template-columns: 1fr;
    padding: var(--kh-s-6);
    border-radius: var(--kh-r-card);
  }
  .kh-banner h2 { font-size: 21px; }
  .kh-banner__actions { flex-direction: column; align-items: stretch; }
  .kh-banner__actions .kh-btn { inline-size: 100%; }

  .kh-search { flex-wrap: wrap; }
  .kh-search .kh-btn { inline-size: 100%; }
  .kh-search--lg input[type="search"] { font-size: 16px; }
}

/* ==========================================================================
   16.55. ناوبری پایین (فقط موبایل)
   --------------------------------------------------------------------------
   دسترسی یک‌ضربه‌ای به بخش‌های اصلی، در ناحیه‌ای که شست کاربر می‌رسد.
   در دسکتاپ کاملاً غیرفعال است.
   ========================================================================== */

.kh-bottomnav { display: none; }

@media (max-width: 768px) {
  .kh-bottomnav {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 95;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    border-block-start: 1px solid var(--kh-line);
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: 0 -8px 30px rgba(12, 28, 48, .07);
    /* فاصله امن برای گوشی‌های ناچ‌دار */
    padding-block-end: env(safe-area-inset-bottom, 0);
  }

  .kh-bottomnav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-block-size: 56px;
    padding-block: 8px;
    border: 0;
    background: none;
    font-family: var(--kh-font);
    font-size: 10px;
    font-weight: var(--kh-fw-semi);
    color: var(--kh-muted);
    cursor: pointer;
    transition: color var(--kh-t-fast);
  }
  .kh-bottomnav__item svg { inline-size: 21px; block-size: 21px; }
  .kh-bottomnav__item.is-active { color: var(--kh-gold); }
  .kh-bottomnav__item:active { color: var(--kh-navy); }

  /* محتوا نباید زیر نوار پنهان شود */
  body.kh-site { padding-block-end: calc(56px + env(safe-area-inset-bottom, 0px)); }

  /* دکمه «بازگشت به بالا» باید بالای نوار بنشیند */
  .kh-to-top { inset-block-end: calc(70px + env(safe-area-inset-bottom, 0px)); }

  /* وقتی منو یا جستجو باز است، نوار پایین مزاحم است */
  body.kh-drawer-open .kh-bottomnav { display: none; }
}

/* ==========================================================================
   16.6. جستجوی زنده تمام‌صفحه
   ========================================================================== */

.kh-search-toggle {
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-sm);
  background: var(--kh-paper);
  color: var(--kh-nav-link);
  cursor: pointer;
  flex: none;
  transition: color var(--kh-t-fast), border-color var(--kh-t-fast);
}
.kh-search-toggle:hover { color: var(--kh-gold); border-color: var(--kh-gold); }
.kh-search-toggle svg { inline-size: 19px; block-size: 19px; }

.kh-quicksearch {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  align-content: start;
  visibility: hidden;
  pointer-events: none;
}
.kh-quicksearch.is-open { visibility: visible; pointer-events: auto; }

.kh-quicksearch__scrim {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(8, 21, 35, .5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  cursor: pointer;
  transition: opacity var(--kh-t-base);
}
.kh-quicksearch.is-open .kh-quicksearch__scrim { opacity: 1; }

.kh-quicksearch__panel {
  position: relative;
  inline-size: min(680px, calc(100% - 32px));
  margin: 12vh auto 0;
  padding: var(--kh-s-5);
  border-radius: var(--kh-r-panel);
  background: var(--kh-paper);
  box-shadow: 0 40px 100px rgba(8, 21, 35, .32);
  transform: translateY(-14px) scale(.98);
  opacity: 0;
  transition: transform var(--kh-t-base), opacity var(--kh-t-base);
}
.kh-quicksearch.is-open .kh-quicksearch__panel { transform: none; opacity: 1; }

.kh-quicksearch__form {
  display: flex;
  align-items: center;
  gap: var(--kh-s-3);
  padding-block-end: var(--kh-s-4);
  border-block-end: 1px solid var(--kh-line);
}
.kh-quicksearch__icon { color: var(--kh-gold); flex: none; display: grid; place-items: center; }
.kh-quicksearch__icon svg { inline-size: 21px; block-size: 21px; }

.kh-quicksearch__form input {
  flex: 1;
  min-inline-size: 0;
  border: 0;
  background: transparent;
  outline: 0;
  font-size: var(--kh-fs-lg);
  font-weight: var(--kh-fw-medium);
  color: var(--kh-ink);
  -webkit-appearance: none;
  appearance: none;
}
.kh-quicksearch__form input::-webkit-search-cancel-button { -webkit-appearance: none; }
.kh-quicksearch__form input::placeholder { color: #A9B0B9; font-weight: var(--kh-fw-body); }

.kh-quicksearch__close {
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-sm);
  background: transparent;
  color: var(--kh-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  flex: none;
}
.kh-quicksearch__close:hover { color: var(--kh-navy); border-color: var(--kh-navy); }

.kh-quicksearch__results {
  max-block-size: min(52vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.kh-quicksearch__list { list-style: none; margin: 0; padding: 0; }

.kh-quicksearch__list a {
  display: flex;
  align-items: center;
  gap: var(--kh-s-4);
  padding: var(--kh-s-3);
  border-radius: var(--kh-r-md);
  transition: background-color var(--kh-t-fast);
}
.kh-quicksearch__list a:hover,
.kh-quicksearch__list a:focus-visible { background: var(--kh-bg); }

.kh-quicksearch__thumb {
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  border-radius: var(--kh-r-sm);
  background: var(--kh-bg) center/cover;
  color: var(--kh-muted);
  flex: none;
}
.kh-quicksearch__thumb svg { inline-size: 19px; block-size: 19px; }

.kh-quicksearch__body { min-inline-size: 0; }
.kh-quicksearch__body b {
  display: block;
  font-size: var(--kh-fs-sm);
  font-weight: var(--kh-fw-bold);
  line-height: 1.7;
  color: var(--kh-navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kh-quicksearch__body span { font-size: var(--kh-fs-micro); color: var(--kh-gold); }

.kh-quicksearch__empty {
  padding: var(--kh-s-6) var(--kh-s-3);
  font-size: var(--kh-fs-sm);
  color: var(--kh-muted);
  text-align: center;
}

.kh-quicksearch__all {
  display: block;
  margin-block-start: var(--kh-s-2);
  padding: var(--kh-s-4);
  border-radius: var(--kh-r-md);
  background: var(--kh-navy);
  color: #fff;
  font-size: var(--kh-fs-sm);
  font-weight: var(--kh-fw-bold);
  text-align: center;
}
.kh-quicksearch__all:hover { background: var(--kh-navy-2); color: #fff; }

.kh-quicksearch__hint {
  padding-block-start: var(--kh-s-4);
  font-size: var(--kh-fs-nano);
  color: var(--kh-muted);
  text-align: center;
}

@media (max-width: 768px) {
  .kh-quicksearch__panel {
    margin-block-start: 6vh;
    padding: var(--kh-s-4);
    border-radius: var(--kh-r-card);
  }
  .kh-quicksearch__form input { font-size: 16px; }
  /*
   * دکمه ذره‌بین هدر در موبایل حذف می‌شود.
   *
   * نوار پایین یک دکمه «جستجو» دارد که همین پنل را باز می‌کند
   * (`data-kh-search-open`)، پس داشتن هر دو یعنی یک کار با دو دکمه در یک
   * صفحه. حذفش ۴۴px از نوار تنگِ بالا هم آزاد می‌کند.
   */
  .kh-search-toggle { display: none; }
  .kh-quicksearch__hint { display: none; }
}

/* ==========================================================================
   16.7. نوار پیشرفت مطالعه · بازگشت به بالا · کپی کد
   ========================================================================== */

/* --- نوار پیشرفت مطالعه --- */
.kh-progress-top {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 200;
  block-size: 3px;
  background: transparent;
  pointer-events: none;
}
.kh-progress-top > i {
  display: block;
  block-size: 100%;
  inline-size: 0;
  background: linear-gradient(90deg, var(--kh-gold), var(--kh-gold-light));
  box-shadow: 0 0 12px rgba(200, 147, 63, .5);
}

/* --- بازگشت به بالا --- */
.kh-to-top {
  position: fixed;
  inset-block-end: 22px;
  inset-inline-start: 22px;
  z-index: 90;
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border: 1px solid var(--kh-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--kh-navy);
  font-size: 19px;
  cursor: pointer;
  box-shadow: var(--kh-shadow-card);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--kh-t-base), transform var(--kh-t-base),
              background-color var(--kh-t-fast), color var(--kh-t-fast);
}
.kh-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.kh-to-top:hover { background: var(--kh-navy); color: #fff; border-color: var(--kh-navy); }

@media (max-width: 768px) {
  .kh-to-top {
    inset-block-end: 16px;
    inset-inline-start: 16px;
    inline-size: 44px;
    block-size: 44px;
  }
}

/* --- کپی بلوک کد --- */
.kh-prose pre.kh-code { position: relative; }
.kh-code-copy {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 9px;
  background: rgba(255, 255, 255, .08);
  color: #C9D3DE;
  font-family: var(--kh-font);
  font-size: var(--kh-fs-nano);
  font-weight: var(--kh-fw-semi);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--kh-t-fast), background-color var(--kh-t-fast);
}
.kh-prose pre.kh-code:hover .kh-code-copy,
.kh-code-copy:focus-visible { opacity: 1; }
.kh-code-copy:hover { background: rgba(255, 255, 255, .16); }
.kh-code-copy.is-done { background: var(--kh-success); border-color: var(--kh-success); color: #fff; opacity: 1; }

/* در لمسی hover وجود ندارد — دکمه همیشه دیده شود */
@media (hover: none) {
  .kh-code-copy { opacity: 1; }
}

/* ==========================================================================
   17. ACCESSIBILITY & MOTION
   ========================================================================== */

.kh-visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link */
.kh-skip-link {
  position: fixed;
  inset-block-start: -100px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  z-index: 1000;
  padding: var(--kh-s-3) var(--kh-s-5);
  border-radius: 0 0 var(--kh-r-sm) var(--kh-r-sm);
  background: var(--kh-navy);
  color: #fff;
  font-size: var(--kh-fs-sm);
  transition: inset-block-start var(--kh-t-base);
}
.kh-skip-link:focus { inset-block-start: 0; }

/* Focus state یکنواخت در کل سایت */
.kh-site :is(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--kh-gold);
  outline-offset: 2px;
  border-radius: 6px;
  box-shadow: var(--kh-focus);
}
/* روی پس‌زمینه تیره، حلقه فوکوس روشن‌تر */
.kh-cta :is(a, button, input):focus-visible,
.kh-footer :is(a, button, input):focus-visible,
.kh-audio-player :is(a, button):focus-visible,
.kh-podcast-feature :is(a, button):focus-visible {
  outline-color: var(--kh-gold-light);
}

/* حداقل هدف لمسی ۴۴px */
.kh-site .kh-social,
.kh-site .kh-share a,
.kh-site .kh-share button { min-inline-size: 40px; min-block-size: 40px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kh-site *,
  .kh-site *::before,
  .kh-site *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .kh-card:hover,
  .kh-btn:hover,
  .kh-bento__item:hover { transform: none; }
}

@media (forced-colors: active) {
  .kh-card, .kh-panel, .kh-btn, .kh-navbar { border: 1px solid CanvasText; }
}

/* انیمیشن ورود بسیار ملایم (فقط fade + translate) */
.kh-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.kh-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .kh-reveal { opacity: 1; transform: none; transition: none; }
}

/* Print */
@media print {
  .kh-header, .kh-topbar, .kh-footer, .kh-prefooter,
  .kh-sidebar, .kh-share, .kh-drawer { display: none !important; }
  .kh-article { border: 0; padding: 0; }
  body.kh-site { background: #fff; }
}

/* ==========================================================================
   18. RESPONSIVE
   بریک‌پوینت‌ها: 1440 / 1024 / 768 / 430 / 390 / 375
   ========================================================================== */

/* --- ≤ 1200px: فشرده‌سازی ملایم --- */
@media (max-width: 1200px) {
  .kh-hero-card { padding: 42px; gap: 32px; }
  .kh-hero-home__grid { gap: 40px; }
  .kh-footer__grid { gap: 28px; }
}

/* --- ≤ 1024px (تبلت افقی) --- */
@media (max-width: 1024px) {
  :root { --kh-sticky-top: 96px; }

  .kh-nav { display: none; }
  .kh-burger { display: grid; }
  .kh-nav-actions { margin-inline-start: auto; }

  .kh-hero-home__grid,
  .kh-hero-card,
  .kh-podcast-layout,
  .kh-cta { grid-template-columns: 1fr; }

  .kh-hero-home__grid { gap: 32px; }
  .kh-stage { min-block-size: 460px; }

  .kh-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kh-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .kh-bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .kh-bento__item--video { grid-row: auto; min-block-size: 430px; }
  .kh-bento__item--article { grid-column: 1 / 3; }

  .kh-content-layout,
  .kh-content-layout--wide { grid-template-columns: 1fr; }
  .kh-sidebar { position: static; max-block-size: none; }
  /* در تبلت TOC بالای مقاله و جمع‌شونده است */
  .kh-toc-mobile { order: -1; }

  .kh-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .kh-footer__contact-col { grid-column: 1 / -1; }

  .kh-prose { max-inline-size: none; }
}

/* --- ≤ 768px (موبایل بزرگ / تبلت عمودی) --- */
@media (max-width: 768px) {
  /*
   * اینجا فقط چیزهایی بازنویسی می‌شوند که واقعاً به بریک‌پوینت وابسته‌اند.
   *
   * اندازه تیترها و فاصله بخش‌ها حذف شدند چون حالا با clamp تعریف
   * می‌شوند و خودشان با عرض صفحه کوچک می‌شوند. مقادیر ثابت اینجا با
   * clamp می‌جنگیدند و آن را بی‌اثر می‌کردند — نتیجه‌اش این بود که در
   * موبایل H1 روی ۲۸ و H2 روی ۲۵ می‌نشست، یعنی باز هم تقریباً هم‌اندازه.
   *
   * شعاع گوشه‌ها هم حذف شد: مقادیر قبلی (۲۲ تا ۲۸) از مقدار جدید دسکتاپ
   * بزرگ‌تر بودند، یعنی موبایل گردتر از دسکتاپ می‌شد.
   */
  :root {
    --kh-gutter: 14px;
    --kh-sticky-top: 88px;
  }

  .kh-topbar { display: none; }
  .kh-header { inset-block-start: 7px; }
  /* هدر موبایل: ۷px فاصله + ۶۶px ارتفاع + ۱۵px نفس = ۸۸px
     مقدار --kh-sticky-top بالاتر با همین حساب تنظیم شده تا لنگرها
     (#فهرست مطالب) زیر هدر شناور نیفتند. */
  .kh-navbar { min-block-size: 66px; border-radius: 18px; gap: var(--kh-s-3); }
  .kh-brand__mark { inline-size: 44px; block-size: 44px; font-size: var(--kh-fs-sm); }
  .kh-brand__sub { display: none; }
  .kh-nav-actions .kh-btn--soft { display: none; }
  .kh-nav-actions .kh-btn { min-block-size: 44px; padding-inline: var(--kh-s-4); font-size: var(--kh-fs-micro); }

  .kh-hero-home { padding-block: 44px var(--kh-s-6); }
  .kh-display .kh-hl-outline { -webkit-text-stroke-width: 1.2px; }
  .kh-hero-home__desc { font-size: var(--kh-fs-base); }
  .kh-stage { min-block-size: 400px; }
  .kh-browser { inset: 18px 0; border-radius: 26px; }
  .kh-float { display: none; }

  .kh-page-hero { padding-block: 40px var(--kh-s-6); }
  .kh-hero-card { padding: 26px; min-block-size: 0; }
  .kh-hero-art { min-block-size: 280px; }
  .kh-hero-art::after { font-size: 110px; }
  .kh-mini-dash { inset: 18px; }
  .kh-mini-dash__main { block-size: 150px; }
  .kh-hero-metrics { gap: var(--kh-s-4); margin-block-start: var(--kh-s-6); }
  .kh-metric { padding-inline-start: var(--kh-s-4); }

  /* CTAها در موبایل تمام‌عرض */
  .kh-hero-actions { flex-direction: column; align-items: stretch; }
  .kh-hero-actions .kh-btn { inline-size: 100%; }

  .kh-section-head { flex-direction: column; align-items: flex-start; gap: var(--kh-s-3); }

  /* کارت‌ها تک‌ستونه */
  .kh-grid-2, .kh-grid-3, .kh-grid-4 { grid-template-columns: 1fr; }
  .kh-bento { grid-template-columns: 1fr; }
  .kh-bento__item--video { min-block-size: 340px; }
  .kh-bento__item--article { grid-column: auto; grid-template-columns: 1fr; }
  .kh-bento__art { block-size: 130px; }

  .kh-thumb { block-size: 200px; }
  .kh-product-cover { block-size: 250px; }

  .kh-podcast-feature { padding: 26px; min-block-size: 0; }
  .kh-podcast-feature h3 { font-size: 23px; }
  .kh-player-row { padding-block-start: var(--kh-s-6); }
  .kh-podcast-list { padding-inline: var(--kh-s-4); border-radius: 24px; }
  .kh-podcast-item { grid-template-columns: 42px minmax(0, 1fr); row-gap: 6px; }
  .kh-podcast-item__num { grid-column: 2; text-align: start; }
  .kh-podcast-item__num b { display: inline; margin-inline-end: var(--kh-s-3); }
  .kh-podcast-item__num span { display: inline; }

  .kh-video-player { border-radius: 22px; }
  .kh-audio-player { padding: 24px; border-radius: 24px; }
  .kh-audio-player h2 { font-size: 21px; }
  .kh-wave { block-size: 44px; margin-block-start: var(--kh-s-5); }

  .kh-article { padding: 22px; }
  .kh-prose h2 { font-size: 21px; }
  .kh-author { flex-direction: column; text-align: center; }

  .kh-stats, .kh-form-grid { grid-template-columns: 1fr; }
  .kh-field--full { grid-column: auto; }
  .kh-portrait { min-block-size: 320px; }

  .kh-cta { padding: 28px 22px; }
  .kh-cta h2 { font-size: 26px; }
  /* فرم خبرنامه در موبایل عمودی و تمام‌عرض */
  .kh-newsletter { flex-direction: column; padding: 0; border: 0; background: transparent; }
  .kh-newsletter input {
    inline-size: 100%;
    min-block-size: 50px;
    padding: 0 var(--kh-s-4);
    border-radius: var(--kh-r-btn);
    background: rgba(255, 255, 255, .08);
  }
  .kh-newsletter .kh-btn { inline-size: 100%; }

  .kh-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--kh-s-6); }
  .kh-footer__brand-col,
  .kh-footer__contact-col { grid-column: 1 / -1; }
  .kh-footer__about { max-inline-size: none; }
  .kh-footer__bottom { flex-direction: column; text-align: center; }
}

/* --- ≤ 430px (iPhone Pro Max) --- */
@media (max-width: 430px) {
  .kh-hero-card { padding: 22px; }
  .kh-article { padding: 18px; }
  .kh-thumb { block-size: 185px; }
}

/* --- ≤ 390px --- */
@media (max-width: 390px) {
  :root { --kh-gutter: 12px; }
  .kh-proof { gap: var(--kh-s-3); }
  .kh-hero-metrics { gap: var(--kh-s-3); }
  .kh-metric { padding-inline-start: var(--kh-s-3); }
  .kh-metric b { font-size: var(--kh-fs-md); }
}

/* --- ≤ 375px (کوچک‌ترین هدف) --- */
@media (max-width: 375px) {
  .kh-brand__title { font-size: var(--kh-fs-xs); }
  .kh-footer__grid { grid-template-columns: 1fr; }
  .kh-footer__brand-col, .kh-footer__contact-col { grid-column: auto; }
  .kh-stage { min-block-size: 340px; }
}

/* --- ≥ 1441px: جلوگیری از کشیده شدن بیش از حد --- */
@media (min-width: 1441px) {
  .kh-stage { min-block-size: 600px; }
}

/* ==========================================================================
   19. INTEGRATION HARDENING
   --------------------------------------------------------------------------
   Elementor Global Kit استایل‌هایی مثل `.elementor-kit-NN a { color: … }`
   چاپ می‌کند. specificity آن (۰,۱,۱) از کلاس‌های تک ما (۰,۱,۰) بیشتر است،
   بنابراین رنگ لینک سراسری روی دکمه‌های ما می‌نشیند و مثلاً متن دکمه تیره
   هم‌رنگ پس‌زمینه‌اش می‌شود (دکمه ظاهراً خالی دیده می‌شود).

   اینجا فقط **رنگ و وزن فونت** با specificity بالاتر تثبیت می‌شود.
   عمداً هیچ property مربوط به اندازه یا چیدمان تکرار نشده تا بریک‌پوینت‌های
   بخش ۱۸ دست‌نخورده بمانند.
   ========================================================================== */

/* --- دکمه‌ها --- */
.kh-site .kh-btn { color: var(--_fg); background: var(--_bg); border-color: var(--_bd); }
.kh-site .kh-btn--dark    { color: #fff; }
.kh-site .kh-btn--gold    { color: #fff; }
.kh-site .kh-btn--soft    { color: var(--kh-navy); }
.kh-site .kh-btn--ghost   { color: var(--kh-navy); }
.kh-site .kh-btn--on-dark { color: #fff; }
.kh-site .kh-btn--soft:hover { color: var(--kh-gold); }

/* --- ناوبری --- */
.kh-site .kh-nav__list a       { color: var(--kh-nav-link); text-decoration: none; }
.kh-site .kh-nav__list a:hover { color: var(--kh-gold); }
.kh-site .kh-nav__list .current-menu-item > a,
.kh-site .kh-nav__list .current_page_item > a { color: var(--kh-navy); }
.kh-site .kh-drawer__list a    { color: var(--kh-navy); text-decoration: none; }

/* --- برند --- */
.kh-site .kh-brand__title { color: var(--kh-navy); }
.kh-site .kh-footer .kh-brand__title { color: var(--kh-footer-title); }

/* --- کارت‌ها و تیترها --- */
.kh-site .kh-card__title,
.kh-site .kh-card__title a { color: var(--kh-navy); text-decoration: none; }
.kh-site .kh-section-head h2 { color: var(--kh-navy); }
.kh-site .kh-display,
.kh-site .kh-title-xl { color: var(--kh-navy); }
.kh-site .kh-display .kh-hl-gold { color: var(--kh-gold); }
.kh-site .kh-title-xl .kh-accent { color: var(--kh-gold); }
.kh-site .kh-eyebrow { color: var(--kh-gold); }
.kh-site .kh-eyebrow--light { color: var(--kh-gold-light); }
.kh-site .kh-link-all { color: var(--kh-navy); text-decoration: none; }
.kh-site .kh-link-all:hover { color: var(--kh-gold); }

/* --- سطوح تیره: متن باید روشن بماند --- */
.kh-site .kh-cta h2,
.kh-site .kh-bento__item--video h3,
.kh-site .kh-podcast-feature h3,
.kh-site .kh-podcast-feature h3 a,
.kh-site .kh-audio-player h2 { color: #fff; }

.kh-site .kh-cta h2 .kh-accent { color: var(--kh-gold-light); }

.kh-site .kh-footer__links a { color: var(--kh-footer-text); text-decoration: none; }
.kh-site .kh-footer__links a:hover { color: var(--kh-gold-light); }
.kh-site .kh-footer__bottom a { color: var(--kh-gold-light); }
.kh-site .kh-social { color: #C3CCD8; }
.kh-site .kh-social:hover { color: var(--kh-gold-light); }

/* --- پادکست --- */
.kh-site .kh-podcast-item b,
.kh-site .kh-podcast-item b a { color: var(--kh-navy); text-decoration: none; }
.kh-site .kh-podcast-item:hover b a { color: var(--kh-gold); }

/* --- محتوای مقاله: لینک‌ها باید متمایز بمانند --- */
.kh-site .kh-prose a { color: var(--kh-navy); text-decoration: underline; }
.kh-site .kh-prose a:hover { color: var(--kh-gold); }
.kh-site .kh-prose h2,
.kh-site .kh-prose h3 { color: var(--kh-navy); }

/* --- Hello Elementor عرض محتوا را محدود می‌کند؛ ویجت‌های ما
       کانتینر خودشان را دارند. --- */
.kh-site .site-main,
.kh-site .page-content,
.kh-site .entry-content { max-inline-size: none; padding: 0; margin: 0; }

/* ==========================================================================
   20. CONTENT + SIDEBAR داخل کانتینرهای Elementor
   --------------------------------------------------------------------------
   قالب‌های تک‌مقاله/ویدیو/پادکست/محصول از کانتینر Elementor برای چیدمان
   دو ستونه استفاده می‌کنند. کانتینر Elementor یک flex container است و
   اگر ستون اصلی عرض ۱۰۰٪ بگیرد، سایدبار تا min-content فشرده می‌شود
   (فهرست مطالب یک حرف در هر خط).

   اینجا چیدمان را به Grid تبدیل می‌کنیم که رفتارش قطعی است.
   `.e-con` برای غلبه بر `display:flex` پایه Elementor آمده است.
   ========================================================================== */

/*
 * ---------------------------------------------------------------------------
 * چیدمان دو ستونه «متن + فهرست مطالب»
 *
 * این مارک‌آپ را خودِ ویجت «بدنه محتوا» تولید می‌کند، نه کانتینر Elementor.
 * دلیل این تصمیم: رفتار کانتینرهای Elementor (جهت flex، عرض، align-self)
 * بین نسخه‌ها و تنظیمات متفاوت است و چند بار باعث شد سایدبار یا له شود،
 * یا به پایین بیفتد، یا روی هیرو سوار شود. اینجا هیچ متغیر بیرونی
 * دخالت ندارد.
 * ---------------------------------------------------------------------------
 */

.kh-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 305px;
  gap: var(--kh-s-7);
  align-items: start;
}
/* حالت معکوس: فهرست سمت راست */
.kh-article-layout--start { grid-template-columns: 305px minmax(0, 1fr); }
.kh-article-layout--start .kh-article-layout__main  { order: 2; }
.kh-article-layout--start .kh-article-layout__aside { order: 1; }

.kh-article-layout__main { min-inline-size: 0; }

.kh-article-layout__aside {
  position: sticky;
  inset-block-start: var(--kh-sticky-top);
  min-inline-size: 0;
}
.kh-article-layout__aside .kh-sidebar {
  /* چسبندگی روی خودِ aside است، پس اینجا لازم نیست */
  position: static;
  max-block-size: calc(100vh - var(--kh-sticky-top) - 24px);
  max-block-size: calc(100dvh - var(--kh-sticky-top) - 24px);
  overflow-y: auto;
}

@media (max-width: 1024px) {
  .kh-article-layout,
  .kh-article-layout--start {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kh-s-5);
  }

  /* در موبایل فهرست بالای متن می‌آید — کاربردی‌تر از پایین صفحه */
  .kh-article-layout__aside {
    position: static;
    order: -1;
  }
  .kh-article-layout--start .kh-article-layout__main  { order: 0; }
  .kh-article-layout--start .kh-article-layout__aside { order: -1; }

  .kh-article-layout__aside .kh-sidebar {
    max-block-size: none;
    overflow: visible;
  }
}

/*
 * ---------------------------------------------------------------------------
 * سایدبار در قالب‌هایی که هنوز از دو کانتینر Elementor استفاده می‌کنند
 * (ویدیو، پادکست، محصول).
 *
 * اینجا عمداً فقط «عرض» تنظیم می‌شود و هیچ position یا align-self ای
 * ست نمی‌شود — همان‌ها بودند که باعث جابه‌جایی ناخواسته می‌شدند.
 * چسبندگی از خودِ `.kh-sidebar` و `.kh-panel` می‌آید که در جریان
 * طبیعی سند قرار دارند.
 * ---------------------------------------------------------------------------
 */

@supports selector(:has(*)) {
  .kh-site .e-con:has( > .elementor-widget-kh-product-buybox),
  .kh-site .e-con:has( > .elementor-widget-kh-save-button) {
    flex: 0 0 305px;
    max-inline-size: 305px;
  }

  .kh-site .e-con:has( > .elementor-widget-kh-content) {
    flex: 1 1 0%;
    min-inline-size: 0;
  }
}

/* باکس خرید همراه اسکرول می‌آید */
.kh-site .kh-buybox {
  position: sticky;
  inset-block-start: var(--kh-sticky-top);
}

/* شبکه ایمنی برای مرورگرهای بدون :has() */
.kh-site .elementor-widget-kh-product-buybox { min-inline-size: 265px; }

@media (max-width: 1024px) {
  .kh-site .elementor-widget-kh-product-buybox { min-inline-size: 0; }
  .kh-site .kh-buybox { position: static; }

  @supports selector(:has(*)) {
    .kh-site .e-con:has( > .elementor-widget-kh-product-buybox),
    .kh-site .e-con:has( > .elementor-widget-kh-save-button) {
      flex: 1 1 auto;
      max-inline-size: none;
    }
    /* باکس خرید در موبایل بالای توضیحات — یک مرحله کمتر تا خرید */
    .kh-site .e-con:has( > .elementor-widget-kh-product-buybox) { order: -1; }
  }
}

/* ==========================================================================
   21. RESPONSIVE — اصلاحات تکمیلی
   --------------------------------------------------------------------------
   مواردی که در بازبینی روی دستگاه واقعی مشکل‌ساز بودند.
   ========================================================================== */

/* --- اشتراک‌گذاری: در موبایل نباید از عرض بزند بیرون --- */
@media (max-width: 480px) {
  .kh-site .kh-share {
    justify-content: flex-start;
    gap: 6px;
  }
  .kh-site .kh-share__label {
    inline-size: 100%;
    margin-block-end: 4px;
    margin-inline-end: 0;
  }
  .kh-site .kh-share a,
  .kh-site .kh-share button {
    inline-size: 42px;
    block-size: 42px;
  }
}

/* --- باکس نویسنده: آواتار در موبایل کوچک‌تر --- */
@media (max-width: 768px) {
  .kh-site .kh-author__avatar { inline-size: 62px; block-size: 62px; }
}

/* --- کانتینرهای Elementor نباید در موبایل سرریز افقی بسازند --- */
@media (max-width: 1024px) {
  .kh-site .e-con,
  .kh-site .e-con-inner { max-inline-size: 100%; }
  .kh-site .elementor-widget-container { min-inline-size: 0; }
}

/* --- محتوای مقاله: عناصر عریض (تصویر، جدول، امبد) هرگز نباید صفحه را
       افقی اسکرول کنند --- */
.kh-site .kh-prose > * { max-inline-size: 100%; }
.kh-site .kh-prose img,
.kh-site .kh-prose iframe,
.kh-site .kh-prose video { max-inline-size: 100%; block-size: auto; }
.kh-site .kh-prose pre { max-inline-size: 100%; overflow-x: auto; }

/* --- کلمات طولانی انگلیسی (URL، نام کلاس) در فارسی خط را می‌شکنند --- */
.kh-site .kh-prose p,
.kh-site .kh-prose li,
.kh-site .kh-card__title,
.kh-site .kh-project__title,
.kh-site .kh-toc__list a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* --- فهرست مطالب: در موبایل جمع‌وجورتر --- */
@media (max-width: 768px) {
  .kh-site .kh-sidebar {
    max-block-size: none;
    overflow: visible;
  }
  .kh-site .kh-toc__list a { padding-block: 12px; }
}

/* --- هیروی صفحه اصلی: در موبایل گرافیک نباید ارتفاع بی‌دلیل بگیرد --- */
@media (max-width: 480px) {
  .kh-site .kh-stage { min-block-size: 300px; }
  .kh-site .kh-browser { inset: 12px 0; padding: 10px; border-radius: 20px; }
  .kh-site .kh-screen { padding: 12px; border-radius: 16px; }
  .kh-site .kh-screen__ui { inset-inline: 12px; inset-block: 48px 12px; padding: 10px; }
  .kh-site .kh-dash-num { font-size: 18px; }
}

/* --- جدول‌های ووکامرس در موبایل --- */
@media (max-width: 600px) {
  .kh-site .woocommerce table.shop_table { display: block; overflow-x: auto; }
}

/* --- دکمه‌ها هرگز نباید متنشان بیرون بزند --- */
.kh-site .kh-btn {
  max-inline-size: 100%;
  white-space: normal;
  text-align: center;
}

/* --- تضمین نهایی نبود اسکرول افقی --- */
.kh-site,
.kh-site .kh-container { max-inline-size: 100%; }

/* ==========================================================================
   23. چیدمان‌های ویترین
   --------------------------------------------------------------------------
   مشکلی که این سه الگو حل می‌کنند: صفحه اصلی قبلی فقط زنجیره‌ای از
   شبکه‌های هم‌شکل بود. وقتی هر بخش دقیقاً شبیه بخش قبل است، چشم نقطه‌ای
   برای مکث ندارد و صفحه از آنچه هست طولانی‌تر حس می‌شود.

   ترتیب پیشنهادی در صفحه اصلی:
     هیرو → ریل پیشنهاد → نوار خدمات → دوستونی → پادکست → دوستونی برعکس → نظرات
   ========================================================================== */

/* --- ۲۳.۱ بخش دوستونی --- */
.kh-split {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: var(--kh-s-8);
  align-items: start;
  position: relative;
}

/*
 * برعکس کردن با grid-column انجام می‌شود، نه با order.
 *
 * قبلاً از order استفاده می‌کردم و این یک باگ واقعی بود: order فقط
 * ترتیب «چیده شدن» را عوض می‌کند، نه اینکه هر آیتم در کدام ستون بنشیند.
 * ستون‌ها [۳۸۰px, 1fr] بودند، پس با order پنل به خانه دوم (عریض) و شبکه
 * به خانه اول (باریک) می‌افتاد — نتیجه: کارت‌ها در یک ستون ۳۸۰ پیکسلی
 * له می‌شدند و کنار پنل یک فضای سفید بزرگ خالی می‌ماند.
 *
 * با جای‌گذاری صریح، هر دو هم جای درست را می‌گیرند و هم عرض درست را.
 */
.kh-split--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
/*
 * ردیف صریح هم لازم است، نه فقط ستون.
 *
 * باگی که داشت: این قاعده فقط `.kh-split__grid` را جاگذاری می‌کرد، ولی
 * بخش «مقاله‌ها» به‌جای شبکه یک `.kh-rail` دارد. ریل با `grid-column: auto`
 * می‌ماند و الگوریتم جاگذاری خودکار، چون خانه اول ردیف ۱ را پنل گرفته
 * بود، ریل را به ردیف ۲ می‌انداخت. نتیجه: بخش دو ردیفی می‌شد
 * (۲۸۰ + ۴۵۵ = ۷۷۵px) با یک ناحیه خالی بزرگ کنار پنل.
 */
.kh-split--flip .kh-split__panel { grid-column: 2; grid-row: 1; }
.kh-split--flip .kh-split__grid,
.kh-split--flip .kh-rail        { grid-column: 1; grid-row: 1; }

/* لکه نرم پس‌زمینه. z-index منفی نمی‌دهیم چون از سکشن والد بیرون می‌زند؛
   به‌جایش خود لکه پشت محتوا با isolation جدا می‌شود. */
.kh-split--blob { isolation: isolate; }
.kh-split--blob::before {
  content: "";
  position: absolute;
  inset-block: -34%;
  inset-inline: -7%;
  z-index: -1;
  background: var(--kh-bg-soft);
  pointer-events: none;

  /*
   * قبلاً شکل با border-radius ارگانیک ساخته می‌شد و لبه‌اش قطعی بود؛
   * یک بیضی کج با مرز مشخص که وصله به نظر می‌رسید — مخصوصاً بعد از
   * فشرده شدن بخش، که نسبت‌هایش به هم خورد.
   *
   * حالا شکل با ماسک ساخته می‌شود نه با رنگ. مزیتش این است که هر پوسته
   * (`fresh` گرادیان دارد، `calm` و `editorial` رنگ تخت) و حالت تیره،
   * رنگِ خودش را نگه می‌دارد و فقط لبه‌اش محو می‌شود — بدون اینکه لازم
   * باشد در چهار جای مختلف تکرار شود.
   *
   * مرورگر بدون پشتیبانی از mask، همان مستطیل کم‌رنگ را می‌بیند که
   * قابل قبول است.
   */
  -webkit-mask-image: radial-gradient(closest-side, #000 38%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 38%, transparent 100%);
}

.kh-split__panel { padding-block: var(--kh-s-4); }

/* چسبیدن فقط وقتی صراحتاً خواسته شده — روی شبکه کوتاه، ستونِ چسبیده
   بدتر است: کاربر اسکرول می‌کند و هیچ‌چیز حرکت نمی‌کند. */
.kh-split--sticky .kh-split__panel {
  position: sticky;
  inset-block-start: var(--kh-sticky-top);
}

.kh-split__title {
  font-size: var(--kh-fs-h2);
  line-height: 1.3;
  margin-block: 0 var(--kh-s-4);
}
.kh-split__text {
  color: var(--kh-muted);
  line-height: var(--kh-lh-relaxed);
  margin-block-end: var(--kh-s-6);
}

.kh-split__grid { display: grid; gap: var(--kh-s-5); }
.kh-split__grid--1 { grid-template-columns: minmax(0, 1fr); }
.kh-split__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/*
 * کارت‌های داخل شبکه دوستونی فشرده‌تر از حالت عادی‌اند.
 *
 * دلیلش ریاضی ساده است: کارت در شبکه سه‌ستونی معمولی حدود ۳۹۰ پیکسل عرض
 * دارد، ولی اینجا فقط نیمِ ستونِ باقی‌مانده را می‌گیرد. با همان نسبت
 * تصویر، ارتفاع کارت‌ها بی‌دلیل بلند می‌شد و کل بخش غول‌پیکر می‌شد.
 */
/* ریل داخل بخش دوستونی فقط عرضِ ستونِ ۱fr را دارد، پس ۳ کارت در آن
   باریک می‌افتد. دو کارت اندازه درستی می‌دهد. */
.kh-split .kh-rail__track {
  grid-auto-columns: calc((100% - var(--kh-s-5)) / 2);
}
.kh-split .kh-rail__nav--prev { inset-inline-start: -14px; }
.kh-split .kh-rail__nav--next { inset-inline-end: -14px; }

/* ارتفاع بازنویسی می‌شود، نه aspect-ratio.
   کوشش قبلی من با aspect-ratio بی‌اثر بود: وقتی عرض و ارتفاع هر دو
   قطعی باشند (اینجا block-size ثابت است) مرورگر aspect-ratio را نادیده
   می‌گیرد. باگ ساکت — هیچ خطایی نمی‌دهد، فقط کار نمی‌کند. */
.kh-split__grid .kh-thumb { block-size: 170px; }
.kh-split__grid .kh-card__excerpt { display: none; }

/* --------------------------------------------------------------------------
   شبکه محصولات — نسخه فشرده

   نسخه قبل دوستونی بود و با سه محصول کارت سوم تنها می‌ماند و یک‌چهارم
   پایین بخش خالی. کارت‌ها هم ۴۴۲px بلند بودند، یعنی ۹۰۵px ارتفاع برای
   نمایش سه فایل. حالا سه ستونِ کوتاه: بدون یتیم، ۳۳۷px.

   انتخابگرها `.kh-site` دارند چون کلاس `--2` را ویجت تولید می‌کند و در
   دیتابیس ذخیره شده — از PHP نمی‌شود عوضش کرد. ضمناً `.kh-site h3`
   ویژگی (0,1,1) دارد و از `.kh-card__title` تنها جلو می‌زند.
   -------------------------------------------------------------------------- */

.kh-site .kh-split__grid,
.kh-site .kh-split__grid--2 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--kh-s-4);
}

.kh-site .kh-split__grid .kh-product-cover {
  block-size: 134px;
  margin: var(--kh-s-2);
  border-radius: var(--kh-r-md);
}
.kh-site .kh-split__grid .kh-product-box {
  inline-size: 106px;
  block-size: 108px;
  gap: 3px;
  padding: var(--kh-s-2);
  border-radius: 11px;
  /* چرخش شدید در ابعاد کوچک شبیه عمق نیست، شبیه کج بودن است */
  transform: perspective(600px) rotateY(-7deg) rotateX(2deg);
  box-shadow: 9px 14px 24px rgba(0, 0, 0, .15);
}
.kh-site .kh-split__grid .kh-card:hover .kh-product-box {
  transform: perspective(600px) rotateY(-4deg) rotateX(1deg) translateY(-3px);
}
.kh-site .kh-split__grid .kh-product-box b    { font-size: 13px; line-height: 1.25; }
.kh-site .kh-split__grid .kh-product-box small { font-size: 8px; letter-spacing: .2px; line-height: 1.3; }

.kh-site .kh-split__grid .kh-card__body {
  padding: 0 var(--kh-s-4) var(--kh-s-4);
  gap: 6px;
}
/* برچسب باید اندازه متنش باشد نه تمام عرض کارت */
.kh-site .kh-split__grid .kh-card__body .kh-tag { align-self: start; }
.kh-site .kh-split__grid .kh-card__title {
  font-size: var(--kh-fs-sm);
  line-height: var(--kh-lh-snug);
}
/* توضیح کوتاه دو خط می‌ماند تا ارتفاع هر سه کارت یکی بماند */
.kh-site .kh-split__grid .kh-card__body > p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.kh-site .kh-split__grid .kh-price-row {
  margin-block-start: var(--kh-s-2);
  padding-block-start: var(--kh-s-3);
  flex-wrap: wrap;
  row-gap: 4px;
}
.kh-site .kh-split__grid .kh-price { font-size: var(--kh-fs-base); }
/* «تومان» دو بار (روی قیمت خط‌خورده و قیمت جدید) ردیف را می‌شکست */
.kh-site .kh-split__grid .kh-price del .woocommerce-Price-currencySymbol { display: none; }
.kh-site .kh-split__grid .kh-price del { margin-inline-end: 6px; }
.kh-site .kh-split__grid .kh-badge-sale {
  inset-block-start: 14px;
  inset-inline-end: 14px;
  padding: 3px 9px;
}

/* زیر ۹۰۰px سه ستون باریک می‌شود */
@media (max-width: 900px) {
  .kh-site .kh-split__grid,
  .kh-site .kh-split__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* موبایل: ردیف افقی فشرده به‌جای کارت عمودی بلند */
@media (max-width: 768px) {
  .kh-site .kh-split__grid,
  .kh-site .kh-split__grid--2 {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kh-s-3);
  }

  .kh-site .kh-split__grid .kh-card--product {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: var(--kh-s-4);
    padding: var(--kh-s-3);
  }

  .kh-site .kh-split__grid .kh-product-cover {
    block-size: 76px;
    margin: 0;
    border-radius: var(--kh-r-sm);
  }
  /* در ۷۶px متن جعبه خوانا نیست؛ گرادیان نقش شناسه رنگی را دارد و
     عنوان بلافاصله کنارش است. */
  .kh-site .kh-split__grid .kh-product-box { display: none; }

  .kh-site .kh-split__grid .kh-card__body { padding: 0; gap: 3px; }
  /* توضیح دو خط از سه خط کل ردیف را می‌گرفت */
  .kh-site .kh-split__grid .kh-card__body > p { display: none; }

  .kh-site .kh-split__grid .kh-price-row {
    margin-block-start: var(--kh-s-2);
    padding-block-start: var(--kh-s-2);
  }
  /* نشان تخفیف روی جلد بنشیند نه شناور وسط متن.
     در RTL، inline-start سمت راست است و جلد همان‌جاست. */
  .kh-site .kh-split__grid .kh-badge-sale {
    inset-block-start: 8px;
    inset-inline-start: 8px;
    inset-inline-end: auto;
  }
}

@media (max-width: 1024px) {
  .kh-split,
  .kh-split--flip { grid-template-columns: minmax(0, 1fr); gap: var(--kh-s-6); }
  /* در یک ستون، متن همیشه اول است — برعکس کردن معنی‌اش را از دست می‌دهد. */
  .kh-split--flip .kh-split__panel,
  .kh-split--flip .kh-split__grid { grid-column: auto; }
  .kh-split--sticky .kh-split__panel { position: static; }
  .kh-split--blob::before { inset-inline: -4%; }
  .kh-split__grid .kh-card__excerpt { display: block; }
}

/*
 * روی موبایل پنل بالای شبکه می‌نشیند، پس کاربر باید کل تیتر و توضیح را
 * رد کند تا به اولین محصول برسد. با اندازه‌های دسکتاپ این بلوک ۳۳۶px
 * می‌شد — تقریباً ۴۰٪ ارتفاع صفحه فقط برای سرتیتر.
 *
 * انتخابگر عمداً `.kh-site` دارد: پایه‌ی `.kh-site h2` ویژگی (0,1,1)
 * دارد و از `.kh-split__title` تنها (0,1,0) جلو می‌زند. بدون پیشوند،
 * این قاعده بی‌صدا نادیده گرفته می‌شود.
 */
@media (max-width: 768px) {
  .kh-site .kh-split__panel { padding-block: var(--kh-s-2); }
  .kh-site .kh-split__title {
    font-size: var(--kh-fs-h3);
    margin-block-end: var(--kh-s-3);
  }
  .kh-site .kh-split__text {
    font-size: var(--kh-fs-sm);
    line-height: var(--kh-lh-snug);
    margin-block-end: var(--kh-s-5);
  }
}

@media (max-width: 600px) {
  .kh-split__grid--2 { grid-template-columns: minmax(0, 1fr); }
}

/* --- ۲۳.۲ ریل افقی + کارت پیشنهاد --- */
.kh-offer-row {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: var(--kh-s-5);
  align-items: stretch;

  /*
   * فضایی که زیر کارت‌های ریل می‌ماند و جزو کارت نیست:
   * ته‌پدینگ نوار اسکرول + ردیف نقطه‌ها (پدینگ بالا + خود نقطه‌ها).
   * کارت پیشنهاد باید دقیقاً همین مقدار کوتاه‌تر از ستون ریل باشد تا
   * لبه پایینش با کارت‌ها یکی شود. یک متغیر است تا اگر این سه مقدار
   * عوض شدند، هم‌زمان با هم عوض شود.
   */
  --kh-rail-tail: calc(12px + var(--kh-s-4) + 16px);
}
/* نقطه‌ها از جریان ارتفاع بیرون می‌آیند تا ستون ریل را بلندتر از ستون
   کنارش نکنند. */
.kh-offer-row .kh-rail { display: flex; flex-direction: column; }
.kh-offer-row .kh-rail__dots { margin-block-start: auto; padding-block-start: var(--kh-s-4); }
.kh-offer-row--bare { grid-template-columns: minmax(0, 1fr); }

/*
 * کارت پیشنهاد باید هم‌قدِ کارت‌های ریل باشد.
 *
 * ردیف grid به‌صورت پیش‌فرض کشیده می‌شود، ولی ستون ریل زیر کارت‌هایش
 * نقطه‌های صفحه‌بندی هم دارد؛ بدون تراز کردن، کارت پیشنهاد آن ارتفاع
 * اضافه را هم می‌گرفت و از کارت‌ها بلندتر می‌شد. با تراز به بالا و
 * ارتفاع خودکار، لبه بالا و پایینِ هر دو ستون روی هم می‌افتد.
 */
.kh-offer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--kh-s-3);
  padding: var(--kh-s-6);
  border-radius: var(--kh-r-lg);
  /* سطح تخت خاکستری در کنار کارت‌های رنگی، خالی به نظر می‌رسید */
  background: linear-gradient(160deg, var(--kh-gold-soft), var(--kh-bg-soft) 65%);
  border: 1px solid var(--kh-line);
  border-color: color-mix(in srgb, var(--kh-gold) 22%, var(--kh-line));
  text-align: center;

  /*
   * `block-size: 100%` تنها، دقیقاً همان چیزی را خراب می‌کرد که کامنت
   * بالا ادعا می‌کرد حل کرده: درصد نسبت به کل خانه grid حساب می‌شود —
   * یعنی ارتفاع ریل به‌علاوه نقطه‌ها — پس کارت پیشنهاد ۴۴px از کارت‌ها
   * بلندتر می‌شد. حالا همان ۴۴px صریح کم می‌شود.
   */
  align-self: start;
  block-size: calc(100% - var(--kh-rail-tail));
}
.kh-offer__icon {
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  margin-inline: auto;
  border-radius: var(--kh-r-md);
  background: var(--kh-gold-soft);
  color: var(--kh-gold);
}
.kh-offer__icon svg { inline-size: 24px; block-size: 24px; }
.kh-offer__title { font-size: var(--kh-fs-h4); margin: 0; }
.kh-offer__text  { color: var(--kh-muted); font-size: var(--kh-fs-sm); margin: 0; }
.kh-offer .kh-btn { align-self: center; margin-block-start: var(--kh-s-2); }

/* ریل: اسکرول بومی + snap.
   عمداً کتابخانه اسلایدر نیست — بدون JS هم کار می‌کند، روی موبایل با
   انگشت طبیعی است، و همه کارت‌ها در HTML می‌مانند پس گوگل می‌بیندشان. */
.kh-rail { position: relative; min-inline-size: 0; }

.kh-rail__track {
  display: grid;
  grid-auto-flow: column;
  /*
   * یک مقدار قطعی، نه minmax.
   *
   * قبلاً `minmax(0, calc(...))` بود و این باگِ «کارت‌ها رفتند توی هم» را
   * می‌ساخت: کف ۰ یعنی مرورگر اجازه دارد ستون‌ها را تا هر اندازه‌ای کوچک
   * کند تا همه در عرض موجود جا شوند. با ۸ کارت در ۹۵۰ پیکسل، هر کارت
   * حدود ۱۱۰ پیکسل می‌شد و عنوان‌ها وسط کلمه می‌شکستند — به‌جای اینکه
   * سرریز کند و اسکرول بخورد.
   *
   * مقدار تک، هم کف است هم سقف؛ پس ستون‌ها اندازه ثابت می‌گیرند، ریل
   * سرریز می‌کند و اسکرول افقی همان‌طور که باید کار می‌کند.
   */
  grid-auto-columns: calc((100% - var(--kh-s-5) * 2) / 3);
  gap: var(--kh-s-5);
  /* همه کارت‌ها هم‌قد — بلندترین کارت ارتفاع ردیف را تعیین می‌کند */
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  scroll-behavior: smooth;
  /* فضای پایین برای سایه کارت‌ها — بدون آن، سایه بریده می‌شود. */
  padding-block-end: var(--kh-s-3);
  overscroll-behavior-inline: contain;
  /*
   * اسکرول‌بار پنهان می‌شود ولی خود اسکرول باقی می‌ماند.
   * نوار خاکستری بومی زیر کارت‌ها، عنصر رابط سیستم‌عامل است و هیچ ربطی
   * به طراحی ندارد؛ در یک کروسل، جای آن را نقطه‌های صفحه‌بندی می‌گیرند.
   */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.kh-rail__track::-webkit-scrollbar { display: none; }

/* grid روی آیتم لازم است تا کارت داخلش کشیده شود؛ بدون آن، کارت‌ها به
   اندازه محتوای خودشان می‌مانند و قد نامساوی پیدا می‌کنند. */
.kh-rail__item {
  scroll-snap-align: start;
  min-inline-size: 0;
  display: grid;
}
.kh-rail__item > * { block-size: 100%; }

/* دکمه‌های حرکت. تا وقتی JS بارگذاری نشده مخفی‌اند تا دکمه بی‌اثر
   نمایش داده نشود. */
.kh-rail__nav {
  position: absolute;
  /* روی ناحیه تصویر کارت می‌نشیند، نه وسط کل ریل — چون ارتفاع کارت‌ها
     با طول عنوان فرق می‌کند و «وسط» جای ثابتی نیست. */
  inset-block-start: 96px;
  z-index: 3;
  display: none;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  border-radius: 50%;
  border: 1px solid var(--kh-line);
  background: var(--kh-paper);
  color: var(--kh-navy);
  box-shadow: var(--kh-shadow-sm);
  cursor: pointer;
  padding: 0;
  transition: background-color var(--kh-t-fast), color var(--kh-t-fast),
              border-color var(--kh-t-fast), opacity var(--kh-t-fast);
}
.kh-rail.is-ready .kh-rail__nav { display: grid; }
.kh-rail__nav svg { inline-size: 17px; block-size: 17px; }
.kh-rail__nav:hover:not(:disabled) {
  background: var(--kh-navy);
  border-color: var(--kh-navy);
  color: #fff;
}
.kh-rail__nav:disabled { opacity: .3; cursor: default; }
.kh-rail__nav--prev { inset-inline-start: -21px; }
.kh-rail__nav--next { inset-inline-end: -21px; }

/* نقطه‌های صفحه‌بندی — جایگزین اسکرول‌بار */
.kh-rail__dots {
  display: none;
  justify-content: center;
  gap: var(--kh-s-2);
  margin-block-start: var(--kh-s-5);
}
.kh-rail.is-ready .kh-rail__dots { display: flex; }
.kh-rail__dot {
  inline-size: 8px;
  block-size: 8px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: var(--kh-line);
  cursor: pointer;
  transition: inline-size var(--kh-t-base), background-color var(--kh-t-base);
}
.kh-rail__dot[aria-current="true"] {
  inline-size: 24px;
  background: var(--kh-gold);
}
/* هدف لمسی واقعی ۸ پیکسل نیست — با ناحیه شفاف بزرگش می‌کنیم */
.kh-rail__dots { padding-block: var(--kh-s-2); }
.kh-rail__dot::before {
  content: "";
  position: absolute;
  inset: -12px;
}
.kh-rail__dot { position: relative; }

@media (max-width: 1024px) {
  .kh-offer-row { grid-template-columns: minmax(0, 1fr); }
  .kh-offer { text-align: start; }
  .kh-offer__icon { margin-inline: 0; }
  .kh-offer .kh-btn { align-self: flex-start; }
  /* روی صفحه لمسی، انگشت کافی است و دکمه‌ها فقط جا می‌گیرند —
     ولی نقطه‌ها می‌مانند تا کاربر بداند ادامه دارد. */
  .kh-rail.is-ready .kh-rail__nav { display: none; }
  .kh-rail__track { grid-auto-columns: calc((100% - var(--kh-s-5)) / 2); }
}

@media (max-width: 600px) {
  /* ۸۵٪ عمدی است، نه ۱۰۰٪: لبه کارت بعدی که پیداست، به کاربر می‌گوید
     ادامه دارد — بدون آن، ریل شبیه یک کارت تکی دیده می‌شود. */
  .kh-rail__track { grid-auto-columns: 85%; }
}

/* --- ۲۳.۳ نوار خدمات فشرده --- */
.kh-services--strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--kh-s-4);
}
.kh-services--strip.kh-services--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kh-services--strip.kh-services--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.kh-service-strip {
  display: flex;
  align-items: center;
  gap: var(--kh-s-3);
  padding: var(--kh-s-4) var(--kh-s-5);
  border-radius: var(--kh-r-md);
  border: 1px solid var(--kh-line);
  background: var(--kh-bg);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--kh-t-fast), transform var(--kh-t-fast), box-shadow var(--kh-t-fast);
}
.kh-service-strip:hover {
  border-color: var(--kh-gold);
  transform: translateY(-2px);
  box-shadow: var(--kh-shadow-sm);
}
.kh-service-strip__icon {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  flex: none;
  border-radius: var(--kh-r-sm);
  background: var(--kh-gold-soft);
  color: var(--kh-gold);
}
.kh-service-strip__icon svg { inline-size: 21px; block-size: 21px; }
.kh-service-strip__body { display: grid; gap: 2px; min-inline-size: 0; }
.kh-service-strip__body b {
  font-size: var(--kh-fs-base);
  font-weight: var(--kh-fw-bold);
  color: var(--kh-navy);
}
.kh-service-strip__body span {
  font-size: var(--kh-fs-micro);
  color: var(--kh-muted);
  /* یک خط، بریده — این کارت جای توضیح کامل نیست. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .kh-services--strip,
  .kh-services--strip.kh-services--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .kh-services--strip,
  .kh-services--strip.kh-services--3,
  .kh-services--strip.kh-services--2 { grid-template-columns: minmax(0, 1fr); }
}

/* --- ۲۳.۴ نظرات دانشجویان --- */
.kh-voices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--kh-s-5);
}
.kh-voices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kh-voices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.kh-voice {
  display: flex;
  flex-direction: column;
  gap: var(--kh-s-4);
  margin: 0;
  padding: var(--kh-s-6);
  border-radius: var(--kh-r-lg);
  border: 1px solid var(--kh-line);
  background: var(--kh-bg);
}
.kh-voice__quote { color: var(--kh-gold); opacity: .5; }
.kh-voice__quote svg { inline-size: 26px; block-size: 26px; }

.kh-voice__text {
  margin: 0;
  border: 0;
  padding: 0;
  background: none;
  color: var(--kh-body-text);
  line-height: var(--kh-lh-relaxed);
}
.kh-voice__text p { margin: 0; }

.kh-voice__author {
  display: flex;
  align-items: center;
  gap: var(--kh-s-3);
  margin-block-start: auto;
  padding-block-start: var(--kh-s-4);
  border-block-start: 1px solid var(--kh-line);
}
.kh-voice__author img {
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.kh-voice__author div { display: grid; gap: 2px; min-inline-size: 0; }
.kh-voice__author b { font-size: var(--kh-fs-sm); color: var(--kh-navy); }
.kh-voice__author span { font-size: var(--kh-fs-micro); color: var(--kh-muted); }

.kh-voice__link {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--kh-fs-micro);
  font-weight: var(--kh-fw-bold);
  color: var(--kh-gold);
  text-decoration: none;
  flex: none;
}
.kh-voice__link svg { inline-size: 13px; block-size: 13px; }
.kh-voice__link:hover { text-decoration: underline; }

/* حالت پرتره — کارت عکس‌محور با نام روی تصویر */
.kh-voice--portrait { padding: 0; overflow: hidden; gap: 0; }
.kh-voice__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.kh-voice__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}
/* گرادیان خوانایی زیر تصویر — بدون آن، نام روی عکس روشن ناخواناست. */
.kh-voice__media::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 55%;
  background: linear-gradient(to top, rgb(0 0 0 / .78), transparent);
  pointer-events: none;
}
.kh-voice__cap {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 1;
  display: grid;
  gap: 2px;
  padding: var(--kh-s-4);
  text-align: center;
  color: #fff;
}
.kh-voice__cap b    { font-size: var(--kh-fs-sm); }
.kh-voice__cap span { font-size: var(--kh-fs-micro); opacity: .8; }

.kh-voice__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(50%, -50%);
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  border-radius: 50%;
  background: var(--kh-gold);
  color: #fff;
  transition: transform var(--kh-t-fast);
}
.kh-voice__play:hover { transform: translate(50%, -50%) scale(1.08); }
/* هم‌راستا با بقیه دکمه‌های پخش — بدون آینه */
.kh-voice__play svg { inline-size: 20px; block-size: 20px; }

.kh-voice--portrait .kh-voice__text {
  padding: var(--kh-s-5);
  font-size: var(--kh-fs-sm);
}

@media (max-width: 1024px) {
  .kh-voices,
  .kh-voices--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .kh-voices,
  .kh-voices--3,
  .kh-voices--2 { grid-template-columns: minmax(0, 1fr); }
  .kh-voice { padding: var(--kh-s-5); }
  .kh-voice--portrait { padding: 0; }
}

/* ==========================================================================
   22. MOBILE — بازبینی کامل
   --------------------------------------------------------------------------
   این بخش نتیجه یک بازبینی سیستماتیک است، نه اصلاحات پراکنده.
   منابع واقعی خرابی در موبایل که پیدا و رفع شدند:

     ۱. گریدهای auto-fit با minmax ثابت → در عرض کم سرریز می‌کردند
        (در فایل‌های kh-account.css و kh-projects.css اصلاح شد)
     ۲. چرخش قاب مرورگر در هیرو → گوشه‌ها از صفحه بیرون می‌زدند
     ۳. فونت زیر ۱۶px در فیلدها → سافاری iOS هنگام تپ زوم می‌کرد
        و کل صفحه به‌هم می‌ریخت
     ۴. هدر در ۳۷۵px → مجموع برند + دکمه + همبرگر بیشتر از عرض بود
     ۵. اهداف لمسی کوچک‌تر از ۴۴px
     ۶. نبود پشتیبانی از safe-area در گوشی‌های ناچ‌دار
   ========================================================================== */

/* --- جلوگیری از بزرگ‌نمایی خودکار متن در iOS هنگام چرخش گوشی --- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* --- منابع سرریز افقی --- */
@media (max-width: 1024px) {
  /* چرخش قاب مرورگر در عرض کم، افقی سرریز می‌سازد */
  .kh-site .kh-browser { transform: none; }
  .kh-site .kh-stage   { overflow: hidden; }

  /* هر عنصر چرخیده یا جابه‌جاشده داخل هیرو نباید از قاب بزند بیرون */
  .kh-site .kh-hero-card,
  .kh-site .kh-hero-home__grid { overflow: hidden; }
}

@media (max-width: 768px) {

  /* ---------- حاشیه کناری بخش‌ها ---------- */

  /*
   * کانتینرهای «boxed» المنتور در این صفحه فقط پدینگ عمودی دارند
   * (`42px 0`)، پس روی موبایل که عرض باکس برابر کل صفحه می‌شود، متن
   * چسبیده به دو لبه رندر می‌شد.
   *
   * فقط `e-con-boxed` هدف است، نه `e-con-full`: بخش‌های تمام‌عرض مثل هیرو
   * و پیش‌فوتر کانتینر خودشان را دارند و نباید دو بار تورفتگی بگیرند.
   */
  body.kh-site .e-con-boxed > .e-con-inner { padding-inline: var(--kh-gutter); }

  /* ---------- هدر ---------- */

  /* در عرض کم، دکمه اصلی کوتاه‌تر می‌شود تا با همبرگر جا شود */
  .kh-site .kh-navbar { gap: var(--kh-s-2); padding: 8px 10px; }
  /* برند باید بتواند کوچک شود؛ پیش‌فرضش `flex: none` است و بدون این خط،
     ellipsis پایین‌تر هرگز فعال نمی‌شود: نوار سرریز می‌کند و چون چیدمان
     RTL است، سرریز از سمت چپ بیرون می‌زند و دکمه همبرگر بریده می‌شود. */
  .kh-site .kh-brand  { min-inline-size: 0; flex: 0 1 auto; }
  /* اسپن میانی (بین brand و brand__title) هم min-inline-size: auto دارد و
     جلوی کوچک شدن را می‌گیرد. */
  .kh-site .kh-brand > span { min-inline-size: 0; }
  .kh-site .kh-brand__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .kh-site .kh-nav-actions { gap: 6px; }
  .kh-site .kh-nav-actions .kh-btn {
    padding-inline: var(--kh-s-3);
    font-size: var(--kh-fs-nano);
  }
  /* پیکان دکمه در موبایل حذف می‌شود — فضا می‌خورد و اطلاعاتی اضافه نمی‌کند */
  .kh-site .kh-nav-actions .kh-btn__arrow { display: none; }
  .kh-site .kh-burger { inline-size: 44px; block-size: 44px; }

  /* ---------- فرم‌ها ---------- */

  /* ۱۶px مرز زوم خودکار سافاری iOS است. کمتر از آن، هنگام تپ روی فیلد
     کل صفحه بزرگ‌نمایی می‌شود و چیدمان به‌هم می‌ریزد. */
  .kh-site input[type="text"],
  .kh-site input[type="email"],
  .kh-site input[type="tel"],
  .kh-site input[type="url"],
  .kh-site input[type="number"],
  .kh-site input[type="search"],
  .kh-site input[type="password"],
  .kh-site textarea,
  .kh-site select,
  .kh-site .kh-field input,
  .kh-site .kh-field textarea,
  .kh-site .kh-newsletter input,
  .kh-site .woocommerce form .form-row input.input-text,
  .kh-site .woocommerce form .form-row textarea {
    font-size: 16px;
  }

  /* ---------- اهداف لمسی ۴۴px ---------- */

  .kh-site .kh-filter {
    min-block-size: 40px;
    padding: 10px 15px;
    font-size: var(--kh-fs-xs);
  }
  .kh-site .kh-pagination .page-numbers { min-inline-size: 44px; min-block-size: 44px; }
  .kh-site .kh-social { inline-size: 44px; block-size: 44px; }
  .kh-site .kh-footer__links a { padding-block: 4px; display: inline-block; }
  .kh-site .kh-side-nav a { min-block-size: 44px; }

  /* ---------- پلیر صوتی ---------- */

  /* پنج کنترل کنار هم در ۳۷۵px جا نمی‌شوند */
  .kh-site .kh-audio-controls {
    flex-wrap: wrap;
    gap: var(--kh-s-2);
  }
  .kh-site .kh-audio-controls__time {
    margin-inline-start: 0;
    inline-size: 100%;
    order: 10;
    padding-block-start: var(--kh-s-2);
  }

  /* ---------- شاخص‌های هیرو ---------- */

  /* سه شاخص کنار هم با خط جداکننده در موبایل فشرده می‌شوند */
  .kh-site .kh-hero-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr));
    gap: var(--kh-s-4) var(--kh-s-3);
  }
  .kh-site .kh-metric {
    padding-inline-start: 0;
    border-inline-start: 0;
    padding-block-start: var(--kh-s-3);
    border-block-start: 1px solid var(--kh-line);
  }

  /* ---------- بنتو ---------- */
  .kh-site .kh-bento__item--video::after { font-size: 64px; }

  /* ---------- جدول‌ها و کدها ---------- */
  .kh-site .kh-prose pre { font-size: var(--kh-fs-micro); }
}

/* --- گوشی‌های خیلی باریک (۳۶۰px و کمتر) --- */
@media (max-width: 380px) {
  /* در این عرض، نام برند کنار دکمه‌ها جا نمی‌شود */
  .kh-site .kh-brand__title { font-size: var(--kh-fs-micro); }
  .kh-site .kh-brand__mark  { inline-size: 40px; block-size: 40px; }

  .kh-site .kh-nav-actions .kh-btn--dark {
    max-inline-size: 108px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    line-height: 44px;
    padding-inline: var(--kh-s-3);
  }
}

/* --- گوشی‌های ناچ‌دار: محتوا زیر بریدگی نرود --- */
@supports (padding: max(0px)) {
  @media (max-width: 768px) {
    .kh-site .kh-container {
      padding-inline-start: max(0px, env(safe-area-inset-right));
      padding-inline-end: max(0px, env(safe-area-inset-left));
    }
    .kh-site .kh-drawer__panel {
      padding-inline-end: max(var(--kh-s-5), env(safe-area-inset-right));
      padding-block-end: max(var(--kh-s-8), env(safe-area-inset-bottom));
    }
  }
}

/* --- منوی موبایل: ارتفاع واقعی صفحه در مرورگرهای موبایل ---
   100vh در سافاری موبایل شامل نوار آدرس است و پنل بلندتر از صفحه می‌شود. */
@supports (height: 100dvh) {
  .kh-drawer__panel { block-size: 100dvh; }
}

/* --- کانتینرهای Elementor: هرگز عرض بیشتر از صفحه نگیرند ---
   عمداً فقط max/min-width تنظیم می‌شود. دست زدن به margin کانتینرها
   وسط‌چین شدن حالت boxed را خراب می‌کند. */
@media (max-width: 1024px) {
  .kh-site .e-con,
  .kh-site .e-con-inner,
  .kh-site .elementor-widget,
  .kh-site .elementor-widget-container {
    max-inline-size: 100%;
    min-inline-size: 0;
  }
}

/*
 * توجه: اینجا عمداً از قانون سراسری `* { max-width: 100% }` استفاده
 * نشده است. آن الگو روی عناصر absolute، سلول جدول‌ها و SVGها اثر
 * ناخواسته می‌گذارد. جلوگیری از اسکرول افقی صفحه با
 * `overflow-x: clip` روی body (بخش ۰۲) انجام می‌شود که بی‌خطر است و
 * برخلاف overflow:hidden، چسبندگی (sticky) را هم از کار نمی‌اندازد.
 */