/* ==========================================================================
   لاستیک‌سازی جم — استایل اصلی (css/style.css)
   تم: آبی نفتی + نارنجی صنعتی | حالت روشن و تاریک
   ==========================================================================
   [ANCHOR: style-css-overview]
   این فایل تنها فایل CSS سایت است (بدون فریم‌ورک/کامپایلر). هر بخش زیر
   یک تگ [ANCHOR: نام-بخش] بالای خودش دارد؛ با جستجوی متن دقیق تگ‌ها
   (Ctrl+F) — نه شماره خط، چون خطوط با هر ویرایش جابه‌جا می‌شوند — مستقیم
   به بخش موردنظر بروید. فهرست کامل انکرهای این فایل:

     [ANCHOR: css-design-tokens]            متغیرهای رنگ/فاصله/تایپوگرافی (:root)
     [ANCHOR: css-base-reset]               ریست پایه مرورگر
     [ANCHOR: css-topbar]                   نوار تماس بالای صفحه (فقط موبایل)
     [ANCHOR: css-header]                   هدر اصلی (شامل حالت فشرده هنگام اسکرول)
     [ANCHOR: css-main-nav]                 منوی اصلی + دراپ‌داون ۲ستونه محصولات
     [ANCHOR: css-hero]                     بخش هرو صفحه اصلی
     [ANCHOR: css-section-titles]           استایل مشترک عنوان بخش‌ها
     [ANCHOR: css-products-grid]            گرید محصولات (صفحه products.html)
     [ANCHOR: css-products-marquee]         کاروسل محصولات صفحه اصلی (اسکرول پیوسته)
     [ANCHOR: css-custom-order-section]     بخش «ساخت قطعه سفارشی» صفحه اصلی
     [ANCHOR: css-news-grid]                گرید پیش‌نمایش مقالات صفحه اصلی
     [ANCHOR: css-footer]                   فوتر + دکمه شناور تماس
     [ANCHOR: css-responsive-breakpoints]   نقاط شکست ریسپانسیو کلی (۳۷۵/۷۶۸/۱۰۲۴/۱۴۴۰)
     [ANCHOR: css-scroll-reveal]            انیمیشن ظاهرشدن هنگام اسکرول
     [ANCHOR: css-inner-pages]              صفحات داخلی (درباره، سفارش، مقالات، تماس)
     [ANCHOR: css-product-article-detail]   الگوی صفحه تک‌محصول/تک‌مقاله
     [ANCHOR: css-faq-section]              بخش سوالات متداول صفحه اصلی
     [ANCHOR: css-search-overlay]           دکمه و پنجره جستجوی داخل‌سایت
     [ANCHOR: css-product-gallery]          گالری تصاویر داخل صفحه محصول
     [ANCHOR: css-product-placeholder]      بلوک جایگزین برای محصول بدون عکس
     [ANCHOR: css-clients-page]             صفحه مشتریان و همکاران
   ========================================================================== */

/* ---------- 1. توکن‌های طراحی (Design Tokens) ---------- [ANCHOR: css-design-tokens] */
:root{
  /* رنگ برند - ثابت در هر دو حالت */
  --color-orange: #F97316;
  --color-orange-dark: #EA580C;
  --color-gold: #C9A24B;
  --color-on-orange: #081A33; /* متن روی پس‌زمینه نارنجی؛ برای رعایت کنتراست WCAG AA (سفید روی نارنجی کافی نبود) */
  --color-orange-text: #B8460A; /* نارنجی به‌عنوان رنگ متن روی پس‌زمینه‌های روشن؛ نارنجی اصلی روی سفید کنتراست کافی نداشت */

  /* حالت روشن (پیش‌فرض) */
  --color-bg: #F5F7FA;
  --color-bg-alt: #ECEFF3;
  --color-surface: #FFFFFF;
  --color-text: #0B1B2B;
  --color-text-muted: #4A5A6C;
  --color-navy: #0B2545;
  --color-navy-deep: #081A33;
  --color-border: #DCE2E9;
  --color-overlay: rgba(8, 26, 51, 0.72);
  --header-bg: rgba(255, 255, 255, 0.92);
  --shadow-sm: 0 1px 3px rgba(11, 37, 69, 0.08);
  --shadow-md: 0 8px 24px rgba(11, 37, 69, 0.12);

  /* تایپوگرافی */
  --font-main: 'Vazirmatn', Tahoma, sans-serif;

  /* فاصله‌گذاری بر پایه شبکه ۸ پیکسل */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;

  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --container-w: 1280px;
  --transition-fast: 200ms ease;
  --transition-med: 300ms ease;

  /* رنگ‌های وضعیت فرم (خطا/موفقیت) - مقادیر جداگانه برای هر تم تا کنتراست WCAG AA رعایت شود */
  --color-error: #B91C1C;
  --color-success: #15803D;
}

/* حالت تاریک */
[data-theme="dark"]{
  --color-bg: #0A1220;
  --color-bg-alt: #0F1B2E;
  --color-surface: #101E33;
  --color-text: #EAF0F7;
  --color-text-muted: #A9B7C7;
  --color-navy: #0B2545;
  --color-navy-deep: #050D1A;
  --color-border: #1E2E45;
  --color-overlay: rgba(5, 13, 26, 0.80);
  --header-bg: rgba(10, 18, 32, 0.92);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.45);
  --color-orange-text: #F97316; /* در تاریک، نارنجی اصلی روی پس‌زمینه‌های تیره کنتراست کافی دارد؛ نیازی به تیره‌تر کردن نیست */
  --color-error: #F87171; /* قرمز روشن‌تر برای کنتراست کافی روی پس‌زمینه‌های تیره */
  --color-success: #4ADE80; /* سبز روشن‌تر برای کنتراست کافی روی پس‌زمینه‌های تیره */
}

/* ---------- 2. ریست پایه ---------- [ANCHOR: css-base-reset] */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html, body{
  max-width: 100%;
  overflow-x: hidden; /* شبکه ایمنی: هیچ عنصری (مثل تصویر هرو) نباید باعث اسکرول افقی کل صفحه شود */
}
body{
  margin: 0;
  font-family: var(--font-main);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.8;
  transition: background var(--transition-med), color var(--transition-med);
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
h1,h2,h3{ margin: 0; font-weight: 800; }
p{ margin: 0; }
button{ font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

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

/* احترام به کاربرانی که انیمیشن کمتر می‌خواهند */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.container{
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

/* همه‌ی عناصر کلیک‌پذیر */
a, button, .product-card, .news-card{ cursor: pointer; }

/* ---------- 3. نوار بالای صفحه (Topbar) ثابت ---------- [ANCHOR: css-topbar] */
/* تاپ‌بار قدیمی: از ۱۰۲۴px به بالا کاملاً حذف می‌شود (دکمه تماس داخل هدر
   اصلی ادغام شده)، و فقط زیر ۱۰۲۴px (تبلت/موبایل) که سه‌ناحیه‌ای شدن هدر
   جا نمی‌شود، به‌عنوان یک نوار جدا نمایش داده می‌شود. */
.topbar{
  background: var(--color-navy-deep);
  color: #DCE6F2;
  font-size: 0.8125rem;
  position: sticky;
  top: 0;
  z-index: 60;
}
.topbar__inner{
  display: flex;
  justify-content: flex-end;
  padding-block: 0.6rem;
}
.topbar__contact{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-orange);
  color: var(--color-on-orange);
  padding: 0.3rem 0.85rem;
  border-radius: 0.4rem;
  font-weight: 600;
  transition: background var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
}
.topbar__contact:hover{ background: var(--color-orange-dark); color: var(--color-on-orange); transform: translateY(-1px); }

/* از ۱۰۲۴px به بالا: دکمه تماس به داخل هدر اصلی منتقل شده، پس نوار
   جداگانه بالای صفحه دیگر لازم نیست و مخفی می‌شود. */
@media (min-width: 1024px){
  .topbar{ display: none; }
}

/* ---------- 4. هدر ---------- [ANCHOR: css-header] */
/* در دسکتاپ چون تاپ‌بار مخفی است، هدر همیشه از top:0 شروع می‌شود.
   در موبایل/تبلت هدر زیر تاپ‌بار (به ارتفاع آن) می‌چسبد. */
.site-header{
  position: sticky;
  top: 1.75rem;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-med), box-shadow var(--transition-med);
}
.site-header.is-scrolled{ box-shadow: var(--shadow-md); }
@media (min-width: 1024px){
  .site-header{ top: 0; }
}

.site-header__row{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-2);
  transition: padding-block var(--transition-med);
}
/* حالت جمع‌شده هنگام اسکرول: هدر یک‌مقدار جمع‌تر و فشرده‌تر می‌شود.
   چون transition روی همین پراپرتی‌هاست، برگشت به بالای صفحه (حذف کلاس)
   دقیقاً با همان انیمیشن معکوس انجام می‌شود؛ نیازی به کد جداگانه نیست. */
.site-header.is-compact .site-header__row{ padding-block: 0.55rem; }

.logo{
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: var(--space-3); /* در RTL یعنی سمت چپ لوگو فاصله دارد از عناصر بعدی */
}
.logo__icon{
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
  transition: width var(--transition-med), height var(--transition-med);
}
/* [ANCHOR: css-header-logo-size]
   سایز لوگو در هدر: بر اساس اصل طراحی استاندارد (ارتفاع آیکون ~۶۰-۷۵٪
   ارتفاع نوار هدر) محاسبه شده - نسبت قبلی (2.5rem) حدود ۵۶٪ بود که کمی
   کوچک‌تر از بازهٔ استاندارد به‌نظر می‌رسید؛ با این افزایش ۱۰٪ به ~۶۱٪
   می‌رسد، دقیقاً وسط بازهٔ استاندارد. border-radius قبلی حذف شد چون آن
   برای گرد کردن گوشه‌های پس‌زمینهٔ مربعی لوگوی قدیمی بود؛ نسخهٔ فعلی
   لوگو کاملاً شفاف (بدون پس‌زمینه) است، پس دیگر گوشه‌ای برای گرد کردن
   وجود ندارد. */
.site-header.is-compact .logo__icon{ width: 2.3rem; height: 2.3rem; }

.logo__text{
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--color-navy);
  transition: font-size var(--transition-med);
}
[data-theme="dark"] .logo__text{ color: #EAF0F7; }
.site-header.is-compact .logo__text{ font-size: 1rem; }

.theme-toggle{
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--color-navy);
  transition: background var(--transition-fast), transform var(--transition-fast), color var(--transition-fast), width var(--transition-med), height var(--transition-med);
  flex-shrink: 0;
}
[data-theme="dark"] .theme-toggle{ color: var(--color-gold); }
.theme-toggle:hover{ background: var(--color-bg-alt); transform: rotate(15deg); }
.theme-toggle .icon-moon{ display: none; }
[data-theme="dark"] .theme-toggle .icon-sun{ display: none; }
[data-theme="dark"] .theme-toggle .icon-moon{ display: block; }
.site-header.is-compact .theme-toggle{ width: 2.15rem; height: 2.15rem; }

/* دکمه تماس داخل هدر (فقط دسکتاپ، سمت چپ‌ترین ناحیه هدر) */
.header-contact{
  display: none; /* پیش‌فرض مخفی؛ فقط از ۱۰۲۴px به بالا نمایش داده می‌شود */
  align-items: center;
  gap: 0.4rem;
  background: var(--color-orange);
  color: var(--color-on-orange);
  padding: 0.55rem 1.1rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--transition-fast), transform var(--transition-fast), padding var(--transition-med), font-size var(--transition-med);
}
.header-contact:hover{ background: var(--color-orange-dark); color: var(--color-on-orange); transform: translateY(-1px); }
.site-header.is-compact .header-contact{ padding: 0.45rem 0.9rem; font-size: 0.8125rem; }
@media (min-width: 1024px){
  .header-contact{ display: inline-flex; }
}

/* دکمه همبرگر - فقط موبایل */
.nav-toggle{
  display: none;
  width: 2.5rem;
  height: 2.5rem;
  margin-right: auto; /* در RTL هدایت به سمت راست‌ترین نقطه */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.nav-toggle span{
  width: 22px;
  height: 2px;
  background: var(--color-navy);
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
[data-theme="dark"] .nav-toggle span{ background: #EAF0F7; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* گروه سمت چپ هدر در دسکتاپ: دکمه تم + دکمه تماس، همیشه با هم و بدون
   جابه‌جایی نسبت به هم در حالت جمع‌شده (is-compact). */
.header-actions{
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ---------- 5. منوی اصلی ---------- [ANCHOR: css-main-nav] */
/* موبایل/تبلت (زیر ۱۰۲۴px): منو سمت چپ باقی می‌ماند (رفتار قبلی، چون در
   آن سایزها منو به‌صورت پنل کشویی جدا نمایش داده می‌شود، نه در ردیف هدر).
   دسکتاپ (۱۰۲۴px به بالا): منو دقیقاً وسط هدر قرار می‌گیرد؛ لوگو راست و
   گروه (تم+تماس) چپ، با margin:auto در دو طرف نو به مرکز هدایت می‌شود. */
.main-nav{ margin-right: auto; }
@media (min-width: 1024px){
  .main-nav{ margin: 0 auto; }
}
.main-nav ul{
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.main-nav a{
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-muted);
  padding-block: var(--space-2);
  position: relative;
  transition: color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.main-nav a::after{
  content: "";
  position: absolute;
  bottom: 0.35rem;
  right: 0;
  width: 0;
  height: 2px;
  background: var(--color-orange);
  transition: width var(--transition-fast);
}
.main-nav a:hover,
.main-nav a.active{ color: var(--color-navy); }
[data-theme="dark"] .main-nav a:hover,
[data-theme="dark"] .main-nav a.active{ color: #EAF0F7; }
.main-nav a:hover::after,
.main-nav a.active::after{ width: 100%; }

.chevron{ transition: transform var(--transition-fast); }
.dropdown-trigger[aria-expanded="true"] .chevron{ transform: rotate(180deg); }

/* دراپ‌داون دسکتاپ: با هاور و کلیک */
.has-dropdown{ position: relative; }
.dropdown-menu{
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 220px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}
.has-dropdown.is-open .dropdown-menu,
.has-dropdown:hover .dropdown-menu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-menu li a{ display: block; padding: 0.6rem 0.8rem; border-radius: 0.5rem; font-size: 0.875rem; }
.dropdown-menu li a:hover{ background: var(--color-bg-alt); color: var(--color-orange-text); }
.dropdown-menu li a::after{ display: none; }

/* دراپ‌داون ۲ستونه محصولات (۱۴ دسته اصلی) — جایگزین دراپ‌داون تک‌ستونه
   قدیمی فقط برای منوی «محصولات ما» (کلاس has-dropdown--wide). دو ستون
   کنار هم قرار می‌گیرند تا با ۱۴ آیتم، ارتفاع منو خیلی زیاد نشود. */
.has-dropdown--wide .dropdown-menu--columns{
  display: flex;
  gap: var(--space-1);
  min-width: 560px;
  padding: var(--space-2);
}
.dropdown-col{
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}
/* آیتمی که زیرمجموعه (flyout) دارد: فلش کوچک سمت چپ لینک + موقعیت نسبی
   برای اینکه زیرمنو بتواند نسبت به همین آیتم موقعیت‌دهی شود. */
.dropdown-col li.has-submenu{ position: relative; }
.dropdown-col li.has-submenu > a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}
.submenu-arrow{ flex-shrink: 0; opacity: 0.6; transition: transform var(--transition-fast); }
.dropdown-col li.has-submenu:hover > a .submenu-arrow,
.dropdown-col li.has-submenu:focus-within > a .submenu-arrow{ transform: translateX(-3px); opacity: 1; }

/* زیرمنوی flyout: به‌صورت پیش‌فرض مخفی، با هاور/فوکوس روی آیتم والد از
   سمت چپ آن باز می‌شود (در RTL یعنی inset-inline-end: 100%). */
.dropdown-flyout{
  position: absolute;
  top: -0.4rem;
  inset-inline-end: 100%;
  min-width: 220px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-1);
  margin-inline-end: 0.4rem;
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 1;
}
.dropdown-col li.has-submenu:hover .dropdown-flyout,
.dropdown-col li.has-submenu:focus-within .dropdown-flyout{
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.dropdown-flyout li a{ display: block; padding: 0.6rem 0.8rem; border-radius: 0.5rem; font-size: 0.875rem; }
.dropdown-flyout li a:hover{ background: var(--color-bg-alt); color: var(--color-orange-text); }

/* ---------- 6. بخش هرو ---------- [ANCHOR: css-hero] */
.hero{
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
}
.hero__bg{ position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: hidden; }
.hero__bg img{ width: 100%; height: 100%; max-width: 100%; object-fit: cover; object-position: center; }
.hero__overlay{
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--color-navy-deep) 15%, rgba(8,26,51,0.55) 60%, rgba(8,26,51,0.25) 100%);
  z-index: 1;
}
.hero__content{ position: relative; z-index: 2; max-width: 640px; }
.hero__eyebrow{
  display: inline-block;
  color: var(--color-orange);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-2);
}
.hero__title{
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: var(--space-2);
}
.hero__text{
  color: #DCE6F2;
  font-size: 1rem;
  margin-bottom: var(--space-3);
  max-width: 55ch;
}
.hero__link{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: #fff;
  border-bottom: 2px solid var(--color-orange);
  padding-bottom: 0.2rem;
  transition: gap var(--transition-fast), color var(--transition-fast);
}
.hero__link:hover{ gap: 0.8rem; color: var(--color-orange); }
.hero__link svg{ transform: scaleX(-1); } /* جهت پیکان برای RTL */

/* ---------- 7. عنوان بخش‌ها ---------- [ANCHOR: css-section-titles] */
.section-title{
  text-align: center;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  margin-bottom: var(--space-5);
  position: relative;
}
.section-title::after{
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: var(--color-orange);
  margin: var(--space-2) auto 0;
  border-radius: 2px;
}

.products-section, .news-section{ padding-block: var(--space-7); }
.news-section{ background: var(--color-bg-alt); }

/* ---------- 8. گرید محصولات ---------- [ANCHOR: css-products-grid] */
.products-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
}
.product-card{
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-med), box-shadow var(--transition-med);
}
.product-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.product-card img{ width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.product-card__caption{
  padding: var(--space-2);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  color: var(--color-text);
}

/* اسکلتون بارگذاری برای محصولات قبل از رندر جاوااسکریپت */
.skeleton{
  background: linear-gradient(90deg, var(--color-bg-alt) 25%, var(--color-border) 50%, var(--color-bg-alt) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.4s ease-in-out infinite;
  border-radius: var(--radius-lg);
  aspect-ratio: 4/3;
}
@keyframes skeleton-loading{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

/* کاروسل محصولات صفحه اصلی (Infinite Marquee)
   [ANCHOR: css-products-marquee]
   جایگزین گرید ثابت قدیمی صفحه اصلی. با ۲۲ محصول، گرید ثابت خیلی طولانی
   می‌شد؛ اسکرول افقی پیوسته و آرام (بدون توقف خودکار بین محصولات) طبق
   تصمیم گفتگو با مشتری (تغییر #۷) انتخاب شد. تکنیک: HTML شامل دو کپی
   پشت‌سرهم از همان کارت‌هاست (marqueeItems تکرار در build.py) تا وقتی
   نیمه اول به‌طور کامل از دید خارج شد، نیمه دوم دقیقاً از همان‌جا که
   نیمه اول شروع کرده بود از راست وارد شود - توهم بصری حرکت بی‌پایان
   بدون هیچ پرش یا وقفه قابل مشاهده.
   توقف با هاور/فوکوس (js/main.js بخش 5) روی حرکت انجام می‌شود، نه CSS
   :hover مستقیم روی .products-marquee__track، چون هاور روی فرزند به‌طور
   قابل‌اعتماد در همه مرورگرها parent animation را متوقف نمی‌کند. */
.products-marquee{
  overflow: hidden;
  position: relative;
  /* محو تدریجی لبه‌های چپ/راست تا کارت‌ها به‌طور ناگهانی قطع نشوند */
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(to left, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.products-marquee__track{
  display: flex;
  gap: var(--space-3);
  width: max-content;
  animation: products-marquee-scroll 70s linear infinite;
}
@keyframes products-marquee-scroll{
  from{ transform: translateX(0); }
  /* در RTL محور X طبیعی از راست به چپ کوچک می‌شود؛ برای اینکه حس حرکت
     "رو به جلو" (سازگار با جهت خواندن) داشته باشد، به‌جای منفی، به‌سمت
     translateX(50%) مثبت حرکت می‌کنیم چون کل مسیر دو-برابر (کپی تکراری)
     عرض واقعی محتواست. */
  to{ transform: translateX(50%); }
}
.products-marquee .product-card{
  flex: 0 0 220px;
  width: 220px;
}
@media (prefers-reduced-motion: reduce){
  .products-marquee__track{ animation: none; overflow-x: auto; }
}
@media (max-width: 767px){
  .products-marquee .product-card{ flex-basis: 160px; width: 160px; }
  .products-marquee__track{ animation-duration: 45s; }
}

/* ---------- 9. بخش ساخت قطعه سفارشی ---------- [ANCHOR: css-custom-order-section] */
.custom-section{
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
}
.custom-section__bg{ position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: hidden; }
.custom-section__bg img{ width: 100%; height: 100%; max-width: 100%; object-fit: cover; }
.custom-section__overlay{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,26,51,0.55) 0%, var(--color-navy-deep) 90%);
  z-index: 1;
}
.custom-section__content{ position: relative; z-index: 2; }
.custom-section__title{
  font-size: clamp(1.375rem, 3vw, 2rem);
  text-align: center;
  margin-bottom: var(--space-5);
}
.custom-section__box{ max-width: 420px; }
.custom-section__text{
  color: #DCE6F2;
  margin-bottom: var(--space-3);
}

.btn{
  display: inline-block;
  padding: 0.85rem 1.75rem;
  font-weight: 700;
  font-size: 0.9375rem;
  border-radius: 0.5rem;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.btn--orange{
  background: var(--color-orange);
  color: var(--color-on-orange);
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
}
.btn--orange:hover{
  background: var(--color-orange-dark);
  color: var(--color-on-orange);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.45);
}

/* ---------- 10. گرید اخبار ---------- [ANCHOR: css-news-grid] */
.news-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
}
.news-card{
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 8/5;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-med);
}
.news-card:hover{ box-shadow: var(--shadow-md); }
.news-card img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--transition-med);
}
.news-card:hover img{ transform: scale(1.06); }
.news-card__overlay{
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(8,26,51,0.88) 0%, rgba(8,26,51,0.15) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-2);
  color: #fff;
}
.news-card__overlay p{ font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.4rem; line-height: 1.6; }
.news-card__overlay a{ font-size: 0.75rem; color: var(--color-orange); font-weight: 600; }
.news-card__overlay a:hover{ text-decoration: underline; }

/* ---------- 11. فوتر ---------- [ANCHOR: css-footer] */
.site-footer{
  background: var(--color-navy-deep);
  color: #C4D2E3;
  padding-top: var(--space-6);
}
.footer-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5) var(--space-4);
}
.footer-col h3{
  color: #fff;
  font-size: 1rem;
  margin-bottom: var(--space-2);
}
.footer-col p, .footer-col address{ font-style: normal; font-size: 0.875rem; line-height: 1.9; color: #A9BAD0; }
.footer-list li{ margin-bottom: 0.5rem; }
.footer-list a{ font-size: 0.875rem; color: #A9BAD0; transition: color var(--transition-fast); }
.footer-list a:hover{ color: var(--color-orange); }

.footer-bottom{
  margin-top: var(--space-6);
  padding-block: var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  font-size: 0.8125rem;
  color: #7C8FA8;
}

/* ==========================================================================
   ریسپانسیو — Breakpoint ها: 375 موبایل | 768 تبلت | 1024 دسکتاپ | 1440 وایـد
   [ANCHOR: css-responsive-breakpoints]
   ========================================================================== */

/* دسکتاپ بزرگ: کمی فضای بیشتر */
@media (min-width: 1440px){
  .container{ padding-inline: var(--space-4); }
}

/* زیر ۱۰۲۴ (تبلت به پایین): منو همبرگری می‌شود */
@media (max-width: 1023px){
  .nav-toggle{ display: flex; }

  .main-nav{
    position: fixed;
    inset-inline-end: 0;
    top: 0;
    height: 100dvh;
    width: min(320px, 85vw);
    background: var(--color-surface);
    box-shadow: -8px 0 24px rgba(0,0,0,0.15);
    /* در RTL لبه‌ی inline-end سمت چپ صفحه است، پس برای خروج کامل از دید باید به چپ (منفی) جابه‌جا شود */
    transform: translateX(-100%);
    transition: transform var(--transition-med), visibility var(--transition-med);
    visibility: hidden;
    z-index: 55;
    overflow-y: auto;
    padding: var(--space-6) var(--space-3) var(--space-3);
  }
  .main-nav.is-open{
    transform: translateX(0);
    visibility: visible;
  }

  /* پرده‌ی تیره پشت منو: با کلیک روی آن، منو بسته می‌شود */
  .nav-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(5, 13, 26, 0.55);
    z-index: 54;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-med), visibility var(--transition-med);
  }
  .nav-backdrop.is-open{
    opacity: 1;
    visibility: visible;
  }

  .main-nav ul{ flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav a{ padding-block: var(--space-2); border-bottom: 1px solid var(--color-border); width: 100%; }
  .main-nav a::after{ display: none; }

  .has-dropdown{ position: static; }
  .dropdown-menu{
    position: static;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    transition: max-height var(--transition-med);
  }
  .has-dropdown.is-open .dropdown-menu{ max-height: 2000px; padding: 0.4rem 0 0.4rem var(--space-3); }
  .has-dropdown:hover .dropdown-menu{ max-height: 0; } /* هاور را در موبایل غیرفعال می‌کنیم */
  .has-dropdown.is-open:hover .dropdown-menu{ max-height: 2000px; }

  /* دراپ‌داون ۲ستونه محصولات در موبایل: به یک ستون عمودی ساده تبدیل
     می‌شود (فضای موبایل برای ۲ ستون کافی نیست). چون max-height این منو
     در حالت باز از مقدار ثابت 300px به 2000px تغییر کرد (بالاتر)، حتی
     با ۲۲ آیتم روی هم چیده‌شده، منو کامل نمایش داده می‌شود. */
  .has-dropdown--wide .dropdown-menu--columns{
    flex-direction: column;
    min-width: 0;
    padding: 0;
    gap: 0;
  }
  .dropdown-col{ gap: 0; }

  /* زیرمنوی flyout در موبایل: چون هاور معنی ندارد، به‌جای پاپ‌آپ کنار
     آیتم، به‌صورت آکاردئون زیر همان آیتم با تپ باز/بسته می‌شود. کلاس
     is-open روی li.has-submenu توسط js/main.js (هندلر لمسی) اضافه/حذف
     می‌شود. */
  .dropdown-flyout{
    position: static;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0 0 0 var(--space-3);
    transition: max-height var(--transition-med);
  }
  .dropdown-col li.has-submenu.is-open .dropdown-flyout{ max-height: 500px; padding: 0.3rem 0 0.3rem var(--space-3); }
  .dropdown-col li.has-submenu:hover .dropdown-flyout{ max-height: 0; } /* هاور غیرفعال در موبایل */
  .dropdown-col li.has-submenu.is-open:hover .dropdown-flyout{ max-height: 500px; }
  .submenu-arrow{ transform: rotate(90deg); }
  .dropdown-col li.has-submenu.is-open > a .submenu-arrow{ transform: rotate(-90deg); }

  .products-grid, .news-grid{ grid-template-columns: repeat(3, 1fr); }
  .footer-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* تبلت: ۷۶۸ تا ۱۰۲۳ */
@media (min-width: 768px) and (max-width: 1023px){
  .products-grid, .news-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* موبایل: زیر ۷۶۸ */
@media (max-width: 767px){
  /* [ANCHOR: css-header-mobile-order-fix]
     چرا این قانون اینجا (۷۶۷px) است و نه در بلوک ۱۰۲۳px بالاتر:
     مرورگر Chrome اندروید در حالت «نمایش دسکتاپ» عرض صفحه را معمولاً
     حدود ۹۸۰px شبیه‌سازی می‌کند - که هنوز از ۱۰۲۴px کمتر است، پس منوی
     همبرگری/کشویی طبق طراحی درست است که در آن حالت هم فعال بماند (این
     رفتار مورد تأیید مشتری قرار گرفت). اما اگر «order:-1» (که دکمه تم
     را کنار لوگو می‌برد) هم در همان بازهٔ ۱۰۲۳px می‌ماند، در همان حالت
     شبیه‌سازی‌شدهٔ دسکتاپ (~۹۸۰px) هم فعال می‌شد و باعث می‌شد دکمه تم
     در حالت «دسکتاپ» اندروید هم کنار لوگو بیفتد - که دقیقاً همان باگی
     بود که مشتری گزارش داد (چیدمان درست فقط روی لپ‌تاپ واقعی دیده
     می‌شد، نه روی اندروید در حالت دسکتاپ). با محدود کردن این قانون به
     زیر ۷۶۷px (موبایل واقعی و باریک)، بازهٔ ۷۶۸ تا ۱۰۲۳px (که شامل
     شبیه‌سازی دسکتاپ اندروید هم می‌شود) از این قانون مستثنی می‌ماند و
     دکمه تم آنجا رفتار «چیدمان عریض» (سمت چپ، بعد از منو) را می‌گیرد -
     دقیقاً مطابق خواستهٔ مشتری. */
  .header-actions{ order: -1; }

  .hero{ min-height: 440px; text-align: center; }
  .hero__content{ max-width: 100%; }
  .hero__text{ margin-inline: auto; }

  .products-grid{ grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .news-grid{ grid-template-columns: 1fr; }
  .news-card{ aspect-ratio: 16/10; }

  .custom-section__box{ max-width: 100%; text-align: center; margin-inline: auto; }

  .footer-grid{ grid-template-columns: 1fr; gap: var(--space-4); text-align: center; }

  .products-section, .news-section{ padding-block: var(--space-5); }

  /* در موبایل انیمیشن‌های سنگین (هاور بزرگنمایی، پارالاکس) خاموش می‌شود */
  .news-card:hover img{ transform: none; }
  .product-card:hover{ transform: none; }
}

/* موبایل کوچک: ۳۷۵ و کمتر */
@media (max-width: 400px){
  .products-grid{ grid-template-columns: 1fr 1fr; }
  .container{ padding-inline: var(--space-2); }
}

/* ---------- 12. انیمیشن ورود بخش‌ها هنگام اسکرول (فقط دسکتاپ/تبلت برای پرفورمنس) ---------- [ANCHOR: css-scroll-reveal] */
@media (min-width: 768px){
  .reveal{
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal.is-visible{ opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   ۱۳. دکمه شناور تماس با ما (Floating Call Button)
   با اسکرول صفحه ثابت روی صفحه‌نمایش باقی می‌ماند و حرکت می‌کند.
   ========================================================================== */
.float-call{
  position: fixed;
  /* عمداً از right: فیزیکی استفاده شده، نه inset-inline-end. در RTL این
     خصیصهٔ منطقی به سمت چپ resolve می‌شود که باعث می‌شد دکمه در گوشهٔ
     بالا/چپ صفحه ظاهر شود. مشتری صراحتاً خواسته این دکمه همیشه سمت راست
     پایین بماند؛ این تصمیم را برنگردانید. */
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 70;
}

.float-call__trigger{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-orange);
  color: var(--color-on-orange);
  padding: 0.8rem 1.25rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9375rem;
  box-shadow: 0 8px 24px rgba(249, 115, 22, 0.45);
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  animation: float-call-pulse 2.6s ease-in-out infinite;
}
.float-call__trigger:hover{
  background: var(--color-orange-dark);
  color: var(--color-on-orange);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(249, 115, 22, 0.55);
}
.float-call__trigger svg{ flex-shrink: 0; }

@keyframes float-call-pulse{
  0%, 100%{ box-shadow: 0 8px 24px rgba(249, 115, 22, 0.45), 0 0 0 0 rgba(249, 115, 22, 0.35); }
  50%{ box-shadow: 0 8px 24px rgba(249, 115, 22, 0.45), 0 0 0 10px rgba(249, 115, 22, 0); }
}
@media (prefers-reduced-motion: reduce){
  .float-call__trigger{ animation: none; }
}

.float-call__panel{
  position: absolute;
  bottom: calc(100% + 0.75rem);
  /* عمداً right: فیزیکی (نه inset-inline-end) تا پنل هم مثل دکمه اصلی
     همیشه هم‌راستا با سمت راست دکمه باز شود، نه سمت چپ. */
  right: 0;
  min-width: 240px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-2);
}
.float-call__panel[hidden]{ display: none; }

.float-call__label{
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: 0.6rem;
}
.float-call__number{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.5rem;
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-text);
  direction: ltr;
  justify-content: flex-end;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.float-call__number:hover{ background: var(--color-bg-alt); color: var(--color-orange-text); }
.float-call__number + .float-call__number{ margin-top: 0.2rem; }

.float-call__hint{
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: center;
}

/* در موبایل کمی جمع‌وجورتر و بالاتر از لبه پایین صفحه */
@media (max-width: 767px){
  .float-call{ bottom: var(--space-2); right: var(--space-2); }
  .float-call__trigger{ padding: 0.7rem 1rem; font-size: 0.875rem; }
  .float-call__panel{ min-width: 210px; }
}

/* ==========================================================================
   ۱۴. صفحات داخلی (درباره ما، ساخت سفارشی، مقالات، تماس)
   [ANCHOR: css-inner-pages]
   هدر ثابت این صفحات با هدر صفحه اصلی مشترک است؛ استایل‌های زیر مخصوص
   محتوای این صفحات است و از همان توکن‌های طراحی سراسری استفاده می‌کند.
   ========================================================================== */

.page-hero{
  background: var(--color-navy-deep);
  color: #fff;
  padding-block: var(--space-6) var(--space-5);
  text-align: center;
}
.page-hero__eyebrow{
  display: inline-block;
  color: var(--color-orange);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-2);
}
.page-hero__title{
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: var(--space-2);
}
.page-hero__subtitle{
  color: #DCE6F2;
  font-size: 1rem;
  max-width: 60ch;
  margin-inline: auto;
}

.content-section{
  padding-block: var(--space-7);
}
.content-narrow{
  max-width: 860px;
}
.content-lead{
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-4);
  line-height: 2;
}
.content-section p{
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  line-height: 2;
}
.content-heading{
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-text);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  position: relative;
  padding-inline-start: var(--space-2);
  border-inline-start: 3px solid var(--color-orange);
}
.content-list{
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.content-list li{
  position: relative;
  padding-inline-start: var(--space-3);
  color: var(--color-text-muted);
  line-height: 1.9;
}
.content-list li::before{
  content: "";
  position: absolute;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--color-orange);
  inset-inline-start: 0;
  top: 0.65em;
}
.content-cta{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.btn--outline{
  background: transparent;
  color: var(--color-navy);
  border: 2px solid var(--color-navy);
}
[data-theme="dark"] .btn--outline{
  color: #EAF0F7;
  border-color: #EAF0F7;
}
.btn--outline:hover{
  background: var(--color-navy);
  color: #fff;
  transform: translateY(-2px);
}
[data-theme="dark"] .btn--outline:hover{
  background: #EAF0F7;
  color: var(--color-navy-deep);
}

/* فرم‌های داخلی (ساخت سفارشی، تماس با ما) */
.form-section{
  padding-block: var(--space-7);
  background: var(--color-bg-alt);
}
.form-grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-6);
  align-items: start;
}
.form-card{
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.form-field{
  margin-bottom: var(--space-3);
}
.form-field label{
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}
.form-field input,
.form-field textarea,
.form-field select{
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.9375rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus{
  outline: none;
  border-color: var(--color-orange);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}
.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"],
.form-field select[aria-invalid="true"]{
  border-color: var(--color-error);
}
.form-error{
  color: var(--color-error);
  font-size: 0.8125rem;
  margin-top: 0.35rem;
}
.form-hint.is-error{ color: var(--color-error); }
.form-hint.is-success{ color: var(--color-success); }
.form-field textarea{ resize: vertical; min-height: 120px; }
.form-hint{
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-top: 0.35rem;
}
.form-note{
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.9;
}
.form-note strong{ color: var(--color-text); }

.info-card{
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.info-card + .info-card{ margin-top: var(--space-3); }
.info-card h3{
  font-size: 1rem;
  margin-bottom: var(--space-2);
  color: var(--color-text);
}
.info-card p, .info-card address{
  font-style: normal;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.9;
}
.info-card a{ color: var(--color-orange-text); font-weight: 600; }
.info-card a:hover{ text-decoration: underline; }

/* گرید مقالات */
.articles-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.article-card{
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-med), box-shadow var(--transition-med);
}
.article-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.article-card__body{ padding: var(--space-3); }
.article-card__title{
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-1);
  line-height: 1.7;
}
.article-card__excerpt{
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: var(--space-2);
}
.article-card__link{
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-orange-text);
}
.article-card__link:hover{ text-decoration: underline; }
.article-card__thumb{
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  background: var(--color-bg-alt);
}

/* ریسپانسیو صفحات داخلی */
@media (max-width: 1023px){
  .form-grid{ grid-template-columns: 1fr; }
  .articles-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px){
  .page-hero{ padding-block: var(--space-5) var(--space-4); }
  .content-section{ padding-block: var(--space-5); }
  .form-section{ padding-block: var(--space-5); }
  .form-card{ padding: var(--space-3); }
  .content-cta{ flex-direction: column; }
  .content-cta .btn{ text-align: center; }
  .articles-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   ۱۵. الگوی صفحه محصول/مقاله
   [ANCHOR: css-product-article-detail]
   این استایل‌ها برای صفحات تک‌محصول/تک‌مقاله هستند که با tools/build.py
   به‌صورت استاتیک و از پیش رندر می‌شوند (نه با fetch در مرورگر).
   ========================================================================== */

/* فقط برای صفحه‌خوان: عنصر از نظر بصری مخفی است ولی برای screen reader باقی می‌ماند */
.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* مسیر صفحه (بردکرامب) */
.breadcrumb{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: #A9B7C7;
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.breadcrumb a{ color: #A9B7C7; transition: color var(--transition-fast); }
.breadcrumb a:hover{ color: var(--color-orange); text-decoration: underline; }
.breadcrumb span[aria-hidden]{ opacity: 0.6; }
.breadcrumb #breadcrumbCurrent,
.breadcrumb #breadcrumbCurrent{ color: #fff; font-weight: 600; }

/* اسکلتون بارگذاری صفحه محصول/مقاله (تا پایان fetch نمایش داده می‌شود) */
.skeleton--img{ aspect-ratio: 16/10; margin-bottom: var(--space-4); }
.skeleton--line{
  aspect-ratio: auto;
  height: 1rem;
  margin-bottom: var(--space-2);
}
.skeleton--short{ width: 60%; }

/* چیدمان دوستونه صفحه محصول: تصویر + محتوا */
.product-detail{
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: var(--space-6);
  align-items: start;
}
.product-detail__media img{
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  background: var(--color-bg-alt);
}
.product-detail__body h1,
.product-detail__body h2{ color: var(--color-text); }

/* تصویر شاخص صفحه مقاله */
.article-detail__thumb{
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  background: var(--color-bg-alt);
  margin-bottom: var(--space-4);
}

@media (max-width: 1023px){
  .product-detail{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   ۱۶. بخش سوالات متداول (FAQ) — صفحه اصلی
   [ANCHOR: css-faq-section]
   از تگ بومی <details>/<summary> استفاده شده: بدون نیاز به جاوااسکریپت،
   با صفحه‌خوان کاملاً سازگار است، و روی صفحه‌کلید هم به‌طور طبیعی کار می‌کند.
   ========================================================================== */
.faq-section{ padding-block: var(--space-7); }
.faq-list{
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.faq-item{
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.faq-item summary{
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{
  content: "+";
  font-size: 1.25rem;
  color: var(--color-orange-text);
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item summary:focus-visible{
  outline: 2px solid var(--color-orange);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}
.faq-item p{
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  line-height: 1.9;
}
.faq-item p a{ color: var(--color-orange-text); font-weight: 600; }
.faq-item p a:hover{ text-decoration: underline; }

@media (max-width: 767px){
  .faq-section{ padding-block: var(--space-5); }
}

/* ==========================================================================
   ۱۷. دکمه و پنجره جستجوی داخل‌سایت
   [ANCHOR: css-search-overlay]
   دکمه ذره‌بین کنار دکمه تم در هدر است (در .header-actions). کلیک روی آن
   یک پنجره تمام‌صفحه (search-overlay) با فید نرم باز می‌کند که روی همه
   محتوای صفحه قرار می‌گیرد. جستجو زنده (live) است: با هر حرف تایپ‌شده
   در ورودی، نتایج بلافاصله فیلتر می‌شوند (منطق در js/main.js).
   ========================================================================== */
.search-toggle{
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--color-navy);
  flex-shrink: 0;
  transition: background var(--transition-fast), transform var(--transition-fast), color var(--transition-fast), width var(--transition-med), height var(--transition-med);
}
[data-theme="dark"] .search-toggle{ color: #EAF0F7; }
.search-toggle:hover{ background: var(--color-bg-alt); transform: scale(1.08); }
.site-header.is-compact .search-toggle{ width: 2.15rem; height: 2.15rem; }

.search-overlay{
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(5, 13, 26, 0.75);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh var(--space-3) var(--space-3);
  animation: search-fade-in 200ms ease;
}
.search-overlay[hidden]{ display: none; }
@keyframes search-fade-in{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

.search-overlay__panel{
  width: 100%;
  max-width: 620px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  animation: search-slide-in 220ms ease;
}
@keyframes search-slide-in{
  from{ opacity: 0; transform: translateY(-12px); }
  to{ opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .search-overlay, .search-overlay__panel{ animation: none; }
}

.search-overlay__field{
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.search-overlay__field input{
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 1.0625rem;
  color: var(--color-text);
}
.search-overlay__field input::placeholder{ color: var(--color-text-muted); }
.search-overlay__field button{
  color: var(--color-text-muted);
  display: grid;
  place-items: center;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.search-overlay__field button:hover{ background: var(--color-bg-alt); color: var(--color-text); }

.search-overlay__results{
  max-height: 55vh;
  overflow-y: auto;
  padding: var(--space-2);
}
.search-hint{
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}
.search-result{
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.75rem var(--space-2);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}
.search-result:hover{ background: var(--color-bg-alt); }
.search-result__type{
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-orange-text);
  background: rgba(249, 115, 22, 0.12);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}
.search-result__title{
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
}
.search-result__category{
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

@media (max-width: 767px){
  .search-overlay{ padding-top: 6vh; }
  .search-overlay__field input{ font-size: 1rem; }
}

/* ==========================================================================
   ۱۸. گالری تصاویر محصول
   [ANCHOR: css-product-gallery]
   نوار بندانگشتی زیر تصویر اصلی محصول. فقط وقتی محصول فیلد gallery
   غیرخالی در products.json داشته باشد رندر می‌شود (نگاه کنید به
   [ANCHOR: render-product-page] در tools/build.py).
   ========================================================================== */
.product-gallery{
  display: flex;
  gap: 0.6rem;
  margin-top: var(--space-2);
  flex-wrap: wrap;
}
.gallery-thumb{
  width: 80px;
  height: 60px;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 2px solid transparent;
  opacity: 0.65;
  transition: opacity var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  flex-shrink: 0;
}
.gallery-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb__fallback{
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--color-navy-deep), var(--color-navy));
  color: var(--color-orange);
}
.gallery-thumb__fallback svg{ width: 20px; height: 20px; }
.gallery-thumb:hover{ opacity: 0.9; transform: translateY(-2px); }
.gallery-thumb.is-active{
  opacity: 1;
  border-color: var(--color-orange);
}

/* ==========================================================================
   ۱۹. بلوک جایگزین برای محصول بدون تصویر (Placeholder)
   [ANCHOR: css-product-placeholder]
   وقتی isPlaceholder=true در products.json باشد (مثل «روکش غلطک» که
   هنوز عکس واقعی ندارد)، این بلوک به‌جای <img> نمایش داده می‌شود.
   طراحی آن با رنگ‌های برند سایت هماهنگ است تا حس حرفه‌ای بدهد، نه آیکون
   شکسته یا جعبه خاکستری بی‌هویت.
   ========================================================================== */
.product-detail__placeholder{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-deep) 100%);
  color: var(--color-orange);
  box-shadow: var(--shadow-md);
  text-align: center;
  padding: var(--space-4);
}
.product-detail__placeholder p{
  color: #DCE6F2;
  font-size: 0.9375rem;
  font-weight: 500;
  max-width: 22ch;
}

.product-card__placeholder{
  aspect-ratio: 4/3;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-deep) 100%);
  color: var(--color-orange);
}

/* کارت‌های زیرمجموعه در صفحه محصولات (مثل «اورینگ» که زیر «آب‌بندها» است)
   کمی کوچک‌تر و با یک نشانه ظریف مشخص می‌شوند تا رابطه سلسله‌مراتبی با
   دسته والدشان از نظر بصری هم قابل تشخیص باشد. */
.product-card--sub{
  position: relative;
}
.product-card--sub::before{
  content: "زیرمجموعه";
  position: absolute;
  top: 0.5rem;
  inset-inline-start: 0.5rem;
  z-index: 1;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #fff;
  background: rgba(11, 37, 69, 0.75);
  backdrop-filter: blur(4px);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

/* ==========================================================================
   ۲۰. صفحه «مشتریان و همکاران»
   [ANCHOR: css-clients-page]
   فقط وقتی data/settings.json → clientsPage.enabled=true باشد این صفحه
   اصلاً ساخته و لینک آن در منو/فوتر نمایش داده می‌شود.
   ========================================================================== */
.clients-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.client-card{
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-med), box-shadow var(--transition-med);
}
.client-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.client-card img{ width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.client-card__placeholder{
  aspect-ratio: 4/3;
  display: grid;
  place-items: center;
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
}
.client-card__body{ padding: var(--space-3); }
.client-card__body h3{ font-size: 1rem; color: var(--color-text); margin-bottom: 0.4rem; }
.client-card__body p{ font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.8; margin: 0; }

@media (max-width: 1023px){
  .clients-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px){
  .clients-grid{ grid-template-columns: 1fr; }
}