/* ============================================================
   استایلِ مادرِ صفحاتِ نوشتاری — iraqbus.ir
   ------------------------------------------------------------
   خواستهٔ مالک ۲۰۲۶-۰۸-۱۲: «همهٔ صفحاتِ نوشتاری باید یک استایلِ
   مادر داشته باشند — چه تازه، چه قدیمی. پدینگ و مارجینِ استاندارد،
   اصولِ راست‌نویسی، و جدول‌هایی که خشک نباشند.»

   اندازه‌گیریِ پیش از نوشتن: از ۱۰۰ صفحهٔ فارسی، ۲۳ تا هیچ استایلِ
   مادری نداشتند — و بدشانسی اینکه همان‌ها مهم‌ترین صفحاتِ کسب‌وکار
   بودند (قیمت اتوبوس، اتوبوس دربستی، حمل‌ونقل، ویزا، کاپوتاژ).
   جدول‌ها هم استایلِ درون‌خطیِ خشک داشتند: border-collapse بدونِ
   هیچ کادر، فاصله یا تفکیکِ سطر.

   ── سه قاعدهٔ این فایل ──
   ۱) فقط **می‌افزاید**. هیچ رنگ یا فونتی از تمِ سایت را عوض نمی‌کند؛
      از همان متغیرهای موجود استفاده می‌کند تا تغییرِ تم این‌جا هم
      اثر کند.
   ۲) ساختارِ صفحه‌ها کلاس ندارد (main > section خالی)، پس انتخابگرها
      ساختاری‌اند نه کلاسی — وگرنه صفحاتِ قدیمی جا می‌ماندند.
   ۳) هیچ‌جا عرضِ ثابتِ پیکسلی نیست؛ همه‌چیز با clamp و درصد، تا در
      هر رزولیشنی بشکند بدونِ اینکه بپاشد.
   ============================================================ */

/* ── ۱) ریتمِ عمودی و عرضِ ستونِ خوانا ───────────────────────────
   عرضِ ستون بر حسبِ نویسه بسته می‌شود نه پیکسل: چشم در هر سطر
   بیش از ~۷۵ نویسه را راحت دنبال نمی‌کند و فارسی هم فشرده‌تر است. */
/* ⚠ اصلاحِ ۲۰۲۶-۰۸-۱۲ — «انیمیشنِ صفحهٔ اصلی کوچک شد».
   نسخهٔ اولِ این قاعده به **همهٔ** فرزندانِ هر بخش عرضِ خوانا می‌داد؛
   یعنی صحنهٔ متحرکِ هدر و اسلایدر هم مثلِ یک پاراگراف جمع می‌شدند.
   حالا فقط عناصرِ **متنی** محدود می‌شوند؛ هر چیزِ دیگری (صحنه،
   اسلایدر، شبکهٔ کارت، جدول، تصویر) آزاد است. */
main > section:not(.hero):not(.page-hero):not([class*="slider"]) {
  padding-block: clamp(28px, 5vw, 56px);
  padding-inline: clamp(16px, 4vw, 28px);
}
main > section > :is(p, h1, h2, h3, h4, h5, ul, ol, dl, blockquote),
main > section > .container > :is(p, h1, h2, h3, h4, h5, ul, ol, dl, blockquote) {
  max-width: 74ch;
  margin-inline: auto;
}
/* بخش‌های تمام‌عرض هرگز محدود نمی‌شوند */
main > section.hero, main > section.page-hero,
main .hero-slides, main .kg-hero-scene, main .hero-slide {
  max-width: none !important;
}

/* ── ۲) مقیاسِ تیتر ─────────────────────────────────────────────
   نسبت‌ها ثابت‌اند تا سلسله‌مراتب در هر عرضی حفظ شود. */
main h1:not(nav *):not(header *):not(footer *):not(.kg-tb *):not(.kg-bar *) {
  font-size: clamp(25px, 4.4vw, 38px);
  line-height: 1.35;
  font-weight: 800;
  margin-block: 0 clamp(10px, 1.6vw, 16px);
  letter-spacing: 0;            /* فارسی هرگز فاصلهٔ حرفی نمی‌گیرد */
}
main h2:not(nav *):not(header *):not(footer *):not(.kg-tb *):not(.kg-bar *) {
  font-size: clamp(19px, 2.7vw, 26px);
  line-height: 1.45;
  font-weight: 800;
  margin-block: clamp(26px, 3.4vw, 40px) clamp(8px, 1.2vw, 14px);
}
main h3:not(nav *):not(header *):not(footer *):not(.kg-tb *):not(.kg-bar *) {
  font-size: clamp(16.5px, 2vw, 19px);
  line-height: 1.5;
  font-weight: 700;
  margin-block: clamp(18px, 2.4vw, 26px) 8px;
}
/* تیترِ پشتِ سرِ هم نباید فاصلهٔ دوبرابر بگیرد */
main h2 + h3, main h1 + h2 { margin-top: clamp(10px, 1.4vw, 16px); }

/* ── ۳) متنِ بدنه و قواعدِ راست‌نویسی ───────────────────────────
   • هرگز justify: در فارسی «رودخانهٔ سفید» می‌سازد و خواندن را کند
     می‌کند. text-align:start یعنی راست در فارسی و چپ در انگلیسی.
   • ارتفاعِ سطر برای فارسی باید بلندتر از لاتین باشد (کشیدگیِ حروف).
   • عدد و نشانی و تلفن با bdi/bdo جهتشان حفظ می‌شود. */
/* ⚠ سدِ چرمِ سایت (۲۰۲۶-۰۸-۱۲).
   شکایتِ مالک: «واردِ صفحهٔ ثبت‌نام اربعین می‌شوم، بالای هر منو یک
   آیکون می‌آید و زیرش لینک — کلاً دفرمه می‌شود.»
   علت ساختاری بود: در آن صفحه <header><meta charset="utf-8"> **داخلِ <main>** قرار گرفته،
   پس قواعدِ متنیِ این فایل روی خودِ منو نشستند و <li>های ناوبری
   نقطه‌گذاریِ فهرست و پدینگ گرفتند.
   حالا هر قاعدهٔ متنی صریحاً از منو، هدر، پاورقی، نوارِ برند و نوارِ
   اقدام مستثناست — چه ساختارِ صفحه درست باشد چه نباشد. */
main p:not(nav *):not(header *):not(footer *):not(.kg-tb *):not(.kg-bar *), main li:not(nav *):not(header *):not(footer *):not(.kg-tb *):not(.kg-bar *) {
  font-size: clamp(15px, 1.15vw, 16.5px);
  line-height: 1.95;
  text-align: start;
  overflow-wrap: break-word;
}
main p:not(nav *):not(header *):not(footer *):not(.kg-tb *):not(.kg-bar *) { margin-block: 0 1em; }
main p.lead {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.85;
  opacity: .92;
}
main :is(ul, ol):not(nav *):not(header *):not(footer *):not(.kg-tb *):not(.kg-bar *) {
  margin-block: 0 1em;
  padding-inline-start: 1.35em;
}
main li:not(nav *):not(header *):not(footer *):not(.kg-tb *):not(.kg-bar *) { margin-block: .35em; }
/* ناوبری هرگز نقطه‌گذاریِ فهرست نمی‌گیرد — حتی اگر داخلِ main باشد.
   ⚠ چرا !important: مقصرِ واقعی یک قاعدهٔ قدیمی در redesign.css است —
   «main ul:not(...):not(...)…» با چندین :not که ویژگیِ بالایی می‌سازد
   و به هر فهرستِ داخلِ main پدینگ می‌دهد. در صفحهٔ ثبت‌نامِ اربعین که
   <header> داخلِ <main> است، همان قاعده منو را جابه‌جا می‌کرد.
   این سد فقط چرمِ سایت را هدف می‌گیرد، پس هیچ محتوایی را نمی‌شکند. */
main :is(header, nav, footer) :is(ul, ol) {
  list-style: none !important;
  padding-inline-start: 0 !important;
  padding-inline-end: 0 !important;
  margin: 0 !important;
}
main :is(header, nav, footer) li {
  list-style: none !important;
  margin: 0 !important;
  padding-inline-start: 0 !important;
}
main li > b:first-child { margin-inline-end: .25em; }
main strong, main b { font-weight: 700; }

/* عدد و لاتینِ داخلِ متنِ فارسی نباید جهت را بشکند */
main :is(bdi, code, .num, [data-rt], [data-zp], [data-dep]) {
  unicode-bidi: isolate;
}

/* ── ۴) جدولِ مدرن ─────────────────────────────────────────────
   استایلِ درون‌خطیِ صفحه‌ها فقط width/border-collapse/margin/font-size
   را می‌گیرد؛ بقیه آزاد است. پس این‌جا با ظرافت کامل می‌کنیم بدونِ
   جنگِ !important. */
main table {
  border-collapse: separate !important;
  border-spacing: 0;
  width: 100%;
  font-size: clamp(13.5px, 1.05vw, 15px);
  line-height: 1.7;
  border: 1px solid var(--line, #e3ddcd);
  border-radius: 14px;
  overflow: hidden;                    /* تا گوشه‌ها واقعاً گرد شوند */
  background: var(--white, #fff);
  box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 8px 24px -18px rgba(0,0,0,.25);
}
main table :is(th, td) {
  padding: 11px 14px;
  text-align: start;
  vertical-align: middle;
  border-block-start: 1px solid var(--line, #e3ddcd);
}
/* ردیفِ اول کادرِ بالا نمی‌خواهد — کادرِ خودِ جدول کافی است */
main table tr:first-child :is(th, td) { border-block-start: 0; }
main table th {
  /* ⚠ رنگ صریح، نه ارثی (۲۰۲۶-۰۸-۱۲): اندازه‌گیری با مرورگر نشان داد
     سرستون «سفید روی روشن» بود — نسبتِ خوانایی ۱٫۱ در برابرِ حدِ ۴٫۵.
     رنگش را از یک قاعدهٔ قدیمیِ هدرِ تیره به ارث می‌برد. */
  background: var(--paper-2, #f7f4ec) !important;
  color: var(--ink, #16211c) !important;
  font-weight: 800;
  white-space: nowrap;
  position: sticky; top: 0; z-index: 1;   /* در جدولِ بلند سرستون می‌مانَد */
}
/* سلولِ داده هم رنگش صریح باشد تا هیچ قاعدهٔ تیره‌ای رویش ننشیند */
main table td { color: var(--ink, #16211c); }
/* راه‌راهِ ملایم — خواندنِ سطر را آسان می‌کند بدونِ شلوغی */
main table tr:nth-child(even) td { background: color-mix(in srgb, var(--paper-2, #f7f4ec) 45%, transparent); }
main table tr:hover td { background: color-mix(in srgb, var(--gold, #c9a227) 7%, transparent); }
/* ⚠ هم‌ترازیِ ستون‌ها (اصلاحِ ۲۰۲۶-۰۸-۱۲).
   شکایتِ مالک: «در جدول‌ها تایتل سمت راست است و اعداد در مرکز — قیمت‌ها
   و تایتل زیرِ هم نیستند.» درست بود و ایرادش مالِ همین فایل بود: من
   دادهٔ ستون‌ها را وسط‌چین کردم ولی سرستون‌ها راست‌چین ماندند، پس هیچ
   ستونی زیرِ سرستونش ننشست. حالا **سرستون و دادهٔ همان ستون یک تراز
   دارند**: ستونِ اول (عنوانِ سطر، متنِ بلند) راست، بقیه وسط. */
main table td:first-child { font-weight: 600; text-align: start; }
main table th:first-child { text-align: start !important; }
main table :is(th, td):not(:first-child) { text-align: center !important; }

/* ظرفِ اسکرول: در موبایل جدول نباید صفحه را پهن کند */
main div[style*="overflow-x"], main .kg-tblwrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block: clamp(12px, 2vw, 20px);
  border-radius: 14px;
}
/* اشارهٔ دیداری که جدول قابلِ کشیدن است */
@media (max-width: 640px) {
  main div[style*="overflow-x"]::after, main .kg-tblwrap::after {
    content: "◂ برای دیدنِ ستون‌های بیشتر بکشید";
    display: block; padding: 6px 12px 2px;
    font-size: 11.5px; color: var(--muted, #6b7873);
  }
}

/* ── ۵) عناصرِ دیگرِ متن ────────────────────────────────────── */
main blockquote {
  margin: clamp(16px, 2.2vw, 24px) 0;
  padding: 14px 18px;
  border-inline-start: 3px solid var(--gold, #c9a227);
  background: var(--paper-2, #f7f4ec);
  border-radius: 0 12px 12px 0;
}
main hr {
  border: 0; height: 1px; margin-block: clamp(24px, 3vw, 36px);
  background: linear-gradient(90deg, transparent, var(--line, #e3ddcd), transparent);
}
main a:not([class]) {
  color: var(--g-800, #8a6d16);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
main a:not([class]):hover { text-decoration-thickness: 2px; }
main img { max-width: 100%; height: auto; border-radius: 12px; }

/* ── ۶) هدرِ واکنش‌گرا در هر رزولیشن ────────────────────────────
   خواستهٔ مالک: «هدر باید با هر رزولیشنی واکنش‌گرا باشد.»
   اندازه‌گیریِ قبلی نشان داد ردیفِ نوارِ برند در ۱۱۸۰ پیکسل دقیقاً
   پر می‌شد — یعنی صفر لقی — و هر تغییرِ کوچکی می‌شکاندش. این پله‌ها
   به‌جای شکستن، مرتب جمع می‌کنند. */
@media (max-width: 1180px) {
  header nav > ul { gap: 2px; }
  header nav > ul > li > a { padding-inline: 9px; font-size: 13.5px; }
}
@media (max-width: 1024px) {
  header nav > ul > li > a { padding-inline: 7px; font-size: 13px; }
}
/* زیرمنو هرگز نباید از لبهٔ صفحه بیرون بزند */
main, body { overflow-x: clip; }
header .submenu {
  max-width: min(92vw, 320px);
  max-height: min(70vh, 480px);
  overflow-y: auto;
}

/* ── ۷) چاپ — صفحهٔ قیمت زیاد چاپ می‌شود ─────────────────────── */
@media print {
  header, footer, .kg-tb, .kg-cta-box, .kg-related { display: none !important; }
  main > section { padding-block: 10px; }
  main table { box-shadow: none; }
  main a:not([class])::after { content: " (" attr(href) ")"; font-size: 11px; }
}

/* ── ۸) کادرِ «ثبت‌نام اربعین هنوز باز نشده» ─────────────────────
   خواستهٔ مالک: محتوا بماند، اقدام بسته شود — با حفظِ سئو و گرفتنِ
   سرنخِ فروش. طراحی عمداً آرام است: خبر می‌دهد، داد نمی‌زند. */
.kg-arb {
  margin: clamp(18px, 3vw, 30px) auto;
  padding: clamp(18px, 3vw, 26px);
  max-width: 74ch;
  border: 1px solid color-mix(in srgb, var(--gold, #c9a227) 40%, var(--line, #e3ddcd));
  border-radius: 16px;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--gold, #c9a227) 7%, var(--white, #fff)),
              var(--white, #fff));
}
.kg-arb-t { font-size: clamp(17px, 2.2vw, 21px); font-weight: 800; margin: 0 0 8px; }
.kg-arb-n { margin: 0 0 10px; line-height: 1.9; }
.kg-arb-when { margin: 0 0 12px; font-size: 14px; color: var(--muted, #6b7873); }
.kg-arb-f { display: flex; flex-wrap: wrap; gap: 8px; }
.kg-arb-f input {
  flex: 1 1 180px; min-width: 0; padding: 11px 13px;
  border: 1px solid var(--line, #e3ddcd); border-radius: 11px;
  font: inherit; font-size: 15px; background: var(--white, #fff);
}
.kg-arb-f input:focus { outline: 2px solid var(--gold, #c9a227); outline-offset: 1px; }
.kg-arb-f button {
  flex: 0 0 auto; padding: 11px 22px; border: 0; border-radius: 11px;
  background: var(--gold, #c9a227); color: #1b1508;
  font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
}
.kg-arb-f button:disabled { opacity: .6; cursor: default; }
.kg-arb-msg:empty { display: none; }
.kg-arb-msg { margin: 10px 0 0; font-size: 14px; font-weight: 600; }
.kg-arb-ch {
  display: inline-block; margin-top: 10px; font-size: 14px;
  color: var(--g-800, #8a6d16); text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 520px) { .kg-arb-f button { flex: 1 1 100%; } }

/* ── ۹) ارتفاعِ صحنهٔ صفحهٔ اصلی ─────────────────────────────────
   شکایتِ مالک ۲۰۲۶-۰۸-۱۲: «کاربر به مطالب دسترسی ندارد و فقط دارد
   انیمیشن می‌بیند.» اندازه‌گیری تأییدش کرد: در لپ‌تاپِ ۷۶۸ پیکسلی،
   نوارِ برند + هدر + صحنه با هم ~۷۴٪ از صفحهٔ اول را می‌گرفتند، پس
   اولین جملهٔ محتوا زیرِ خطِ دید می‌ماند.
   ارتفاع بر حسبِ **ارتفاعِ خودِ نمایشگر** بسته می‌شود نه عددِ ثابت،
   تا در هر صفحه‌ای نسبتِ درست بماند و همیشه جای محتوا باز شود. */
/* ⚠ ویژگیِ بالا لازم است: قاعده‌های موجود روی «.hero» با همان وزن
   می‌نشستند و ارتفاع عوض نمی‌شد. با «section.hero.has-scene» وزن بالا
   می‌رود و این یکی برنده می‌شود. */
/* ⚠ اصلاحِ ۲۰۲۶-۰۸-۱۲ب (شکایتِ مالک: «اتوبوس و جمعیت دیده نمی‌شوند،
   فقط پرچم»). ارتفاع فقط به vh بسته بود، ولی خودِ صحنه با **عرضِ**
   صفحه بزرگ می‌شود (svg با slice تا پوششِ کامل کِش می‌آید). پس هرچه
   نمایشگر عریض‌تر، تصویر بزرگ‌تر و نوار همان‌قدر کوتاه — و پایینِ
   تصویر، یعنی همان‌جا که اتوبوس و آدم‌ها هستند، بیرون می‌افتاد.
   اندازه‌گیری: در ۱۳۶۶ نخل‌ها تا ۴۶۹ می‌آمدند و نوار هم ۴۶۹ تمام
   می‌شد (لبِ‌مرز)؛ در ۱۹۲۰ نخل‌ها تا ۵۳۷ و در ۲۵۶۰ تا ۶۱۳ — یعنی
   کاملاً زیرِ نوار. حالا ارتفاع با عرض هم‌مقیاس می‌شود (۲۵vw) و
   سقفِ ۴۰vh نمی‌گذارد روی نمایشگرِ کوتاه دوباره جای محتوا را بگیرد. */
section.hero, section.hero.has-scene, .hero.has-scene {
  aspect-ratio: auto !important;
  height: var(--kg-hero-h, clamp(240px, min(25vw, 40vh), 560px)) !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-block: 0 !important;
}
@media (max-width: 640px) {
  section.hero, section.hero.has-scene, .hero.has-scene {
    height: var(--kg-hero-h-m, clamp(180px, 30vh, 250px)) !important;
  }
}
/* عنوانِ روی صحنه با ارتفاعِ کمتر هم باید جا شود */
.hero .hero-caption, .hero-inner { padding-block: clamp(8px, 1.6vh, 18px); }

@media (max-width: 1024px) {
  header nav > ul > li > a { padding-inline: 7px; font-size: 13px; }
}
/* زیرمنو هرگز نباید از لبهٔ صفحه بیرون بزند */
main, body { overflow-x: clip; }
header .submenu {
  max-width: min(92vw, 320px);
  max-height: min(70vh, 480px);
  overflow-y: auto;
}

/* ── ۷) چاپ — صفحهٔ قیمت زیاد چاپ می‌شود ─────────────────────── */
@media print {
  header, footer, .kg-tb, .kg-cta-box, .kg-related { display: none !important; }
  main > section { padding-block: 10px; }
  main table { box-shadow: none; }
  main a:not([class])::after { content: " (" attr(href) ")"; font-size: 11px; }
}

/* ── ۸) کادرِ «ثبت‌نام اربعین هنوز باز نشده» ─────────────────────
   خواستهٔ مالک: محتوا بماند، اقدام بسته شود — با حفظِ سئو و گرفتنِ
   سرنخِ فروش. طراحی عمداً آرام است: خبر می‌دهد، داد نمی‌زند. */
.kg-arb {
  margin: clamp(18px, 3vw, 30px) auto;
  padding: clamp(18px, 3vw, 26px);
  max-width: 74ch;
  border: 1px solid color-mix(in srgb, var(--gold, #c9a227) 40%, var(--line, #e3ddcd));
  border-radius: 16px;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--gold, #c9a227) 7%, var(--white, #fff)),
              var(--white, #fff));
}
.kg-arb-t { font-size: clamp(17px, 2.2vw, 21px); font-weight: 800; margin: 0 0 8px; }
.kg-arb-n { margin: 0 0 10px; line-height: 1.9; }
.kg-arb-when { margin: 0 0 12px; font-size: 14px; color: var(--muted, #6b7873); }
.kg-arb-f { display: flex; flex-wrap: wrap; gap: 8px; }
.kg-arb-f input {
  flex: 1 1 180px; min-width: 0; padding: 11px 13px;
  border: 1px solid var(--line, #e3ddcd); border-radius: 11px;
  font: inherit; font-size: 15px; background: var(--white, #fff);
}
.kg-arb-f input:focus { outline: 2px solid var(--gold, #c9a227); outline-offset: 1px; }
.kg-arb-f button {
  flex: 0 0 auto; padding: 11px 22px; border: 0; border-radius: 11px;
  background: var(--gold, #c9a227); color: #1b1508;
  font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
}
.kg-arb-f button:disabled { opacity: .6; cursor: default; }
.kg-arb-msg:empty { display: none; }
.kg-arb-msg { margin: 10px 0 0; font-size: 14px; font-weight: 600; }
.kg-arb-ch {
  display: inline-block; margin-top: 10px; font-size: 14px;
  color: var(--g-800, #8a6d16); text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 520px) { .kg-arb-f button { flex: 1 1 100%; } }

/* ── ۹) ارتفاعِ صحنهٔ صفحهٔ اصلی ─────────────────────────────────
   شکایتِ مالک ۲۰۲۶-۰۸-۱۲: «کاربر به مطالب دسترسی ندارد و فقط دارد
   انیمیشن می‌بیند.» اندازه‌گیری تأییدش کرد: در لپ‌تاپِ ۷۶۸ پیکسلی،
   نوارِ برند + هدر + صحنه با هم ~۷۴٪ از صفحهٔ اول را می‌گرفتند، پس
   اولین جملهٔ محتوا زیرِ خطِ دید می‌ماند.
   ارتفاع بر حسبِ **ارتفاعِ خودِ نمایشگر** بسته می‌شود نه عددِ ثابت،
   تا در هر صفحه‌ای نسبتِ درست بماند و همیشه جای محتوا باز شود. */
/* ⚠ ویژگیِ بالا لازم است: قاعده‌های موجود روی «.hero» با همان وزن
   می‌نشستند و ارتفاع عوض نمی‌شد. با «section.hero.has-scene» وزن بالا
   می‌رود و این یکی برنده می‌شود. */
/* ⚠ اصلاحِ ۲۰۲۶-۰۸-۱۲ب (شکایتِ مالک: «اتوبوس و جمعیت دیده نمی‌شوند،
   فقط پرچم»). ارتفاع فقط به vh بسته بود، ولی خودِ صحنه با **عرضِ**
   صفحه بزرگ می‌شود (svg با slice تا پوششِ کامل کِش می‌آید). پس هرچه
   نمایشگر عریض‌تر، تصویر بزرگ‌تر و نوار همان‌قدر کوتاه — و پایینِ
   تصویر، یعنی همان‌جا که اتوبوس و آدم‌ها هستند، بیرون می‌افتاد.
   اندازه‌گیری: در ۱۳۶۶ نخل‌ها تا ۴۶۹ می‌آمدند و نوار هم ۴۶۹ تمام
   می‌شد (لبِ‌مرز)؛ در ۱۹۲۰ نخل‌ها تا ۵۳۷ و در ۲۵۶۰ تا ۶۱۳ — یعنی
   کاملاً زیرِ نوار. حالا ارتفاع با عرض هم‌مقیاس می‌شود (۲۵vw) و
   سقفِ ۴۰vh نمی‌گذارد روی نمایشگرِ کوتاه دوباره جای محتوا را بگیرد. */
section.hero, section.hero.has-scene, .hero.has-scene {
  aspect-ratio: auto !important;
  height: var(--kg-hero-h, clamp(240px, min(25vw, 40vh), 560px)) !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-block: 0 !important;
}
@media (max-width: 640px) {
  /* ⚠ ۲۰۲۶-۰۸-۱۳ (شکایتِ مالک: «در موبایل ماشین دید ندارد و آسمان دیدِ
     زیادی دارد»). در موبایل صحنه با **ارتفاع** پُر می‌شد نه با عرض، پس
     کلِ ۶۰۰ واحدِ قابِ نقاشی دیده می‌شد — و بالای نقاشی آسمانِ خالی است.
     دو کار با هم: نوار بلندتر می‌شود، و خودِ نقاشی از ته لنگر می‌اندازد
     تا آسمانِ اضافه بیرون بیفتد و اتوبوس و آدم‌ها بزرگ‌تر دیده شوند. */
  section.hero, section.hero.has-scene, .hero.has-scene {
    height: var(--kg-hero-h, clamp(250px, 38vh, 340px)) !important;
  }
  /* برشِ آسمان دیگر با ترفندِ ارتفاع انجام نمی‌شود — نتیجه‌اش برعکس شد
     و اتوبوس بیرون افتاد. حالا خودِ js/hero-search.js قابِ نقاشی را در
     موبایل جمع می‌کند که دقیق و پیش‌بینی‌پذیر است. */
  .kg-hero-scene { overflow: hidden; }
}
/* عنوانِ روی صحنه با ارتفاعِ کمتر هم باید جا شود */
.hero .hero-caption, .hero-inner { padding-block: clamp(8px, 1.6vh, 18px); }

/* ═══ کارتِ ارجاعِ خدماتِ هم‌گروه (رزرو هتل) ═══
   خواستهٔ مالک ۲۰۲۶-۰۸-۱۳. دو حالت دارد و هر دو باید محترمانه دیده شوند:
   فعال ⇒ دکمهٔ طلاییِ واقعی؛ خاموش ⇒ نشانِ خاکستریِ «به‌زودی» که اصلاً
   قابلِ کلیک نیست. رنگ‌ها از همان پالتِ سفید/طلاییِ سایت می‌آید. */
.kg-partner{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin:26px 0; padding:18px 20px;
  background:linear-gradient(135deg,#fdfbf4,#f7f2e3);
  border:1.5px solid #e4dcc4; border-radius:16px;
}
.kg-partner-ico{ font-size:30px; line-height:1; flex:none; }
.kg-partner-txt{ display:flex; flex-direction:column; gap:3px; flex:1 1 260px; min-width:0; }
.kg-partner-h{ font-size:16.5px; font-weight:700; color:#1b1b1b; }
.kg-partner-p{ font-size:14.5px; line-height:1.8; color:#5a554a; }
.kg-partner-btn{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 22px; border-radius:11px;
  font-size:15px; font-weight:700; text-decoration:none; white-space:nowrap;
  background:linear-gradient(145deg,var(--gold, #c9a227),var(--green-deep, #8a6d16)); color:#fff;
  transition:.22s transform, .22s box-shadow;
}
.kg-partner-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 24px -12px rgba(138,109,22,.6); }
/* حالتِ خاموش — عمداً هیچ نشانهٔ کلیک‌پذیری ندارد */
.kg-partner-btn.is-soon{
  background:#eae4d3; color:#7a7466; cursor:default;
  border:1.5px dashed #cfc6ad; box-shadow:none; transform:none;
}
@media(max-width:560px){
  .kg-partner{ padding:16px; }
  .kg-partner-btn{ width:100%; }
}

/* ═══ ماژول‌های ویرایشگر ═══
   خواستهٔ مالک ۲۰۲۶-۰۸-۱۴: بلوک‌های تزئینی رفتند و به‌جایشان ماژول‌هایی
   نشستند که کارِ واقعیِ سایت را می‌کنند. ظاهرشان عمداً از متغیرهای تم
   می‌آید تا با هر تغییرِ رنگ در پنل هماهنگ بمانند — نه رنگِ سفت‌کد. */
.kg-m{ margin:26px 0; }
.kg-m-h{ font-size:19px; font-weight:800; color:var(--ink,#1b1b1b); margin:0 0 10px; }
.kg-m-p{ font-size:14.5px; line-height:2; color:var(--ink-2,#5a554a); margin:0 0 12px; }
.kg-m-note{ font-size:13px; line-height:1.95; color:var(--muted,#7a7466); margin:8px 0 0; }
.kg-m-cta{ display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  padding:0 22px; border-radius:11px; font-size:15px; font-weight:700; text-decoration:none;
  background:linear-gradient(145deg,var(--gold, #c9a227),var(--gold-700, #8a6d16)); color:#fff; }
.kg-m-cta:hover{ filter:brightness(1.08); }
.kg-m-cta.is-ghost{ background:transparent; color:var(--gold-700, #8a6d16);
  border:1.5px solid var(--gold, #c9a227); }

/* کارتِ مسیر */
.kg-m-route{ border:1.5px solid var(--line,#e4dcc4); border-radius:16px; padding:20px; background:var(--paper,#fff); }
.kg-m-route-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.kg-m-badge{ font-size:11.5px; font-weight:800; padding:3px 10px; border-radius:20px;
  background:var(--gold-100,#f7f2e3); color:var(--gold-700, #8a6d16); }
.kg-m-specs{ list-style:none; margin:14px 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 26px; }
.kg-m-specs li{ display:flex; flex-direction:column; gap:2px; }
.kg-m-specs b{ font-size:11.5px; font-weight:700; color:var(--muted,#7a7466); }
.kg-m-specs span{ font-size:15px; font-weight:800; }

/* عوارض و هشدار */
.kg-m-fees, .kg-m-alert, .kg-m-hl{ border-radius:14px; padding:18px 20px;
  border:1.5px solid var(--line,#e4dcc4); background:var(--paper-2,#fdfbf4); }
.kg-m-alert{ border-color:#e0c08a; background:#fdf6e6; }
.kg-m-hl{ border-inline-start:4px solid var(--gold, #c9a227); }
.kg-m-hl b{ display:block; font-size:15px; margin-bottom:5px; }
.kg-m-list{ margin:0; padding-inline-start:20px; font-size:14px; line-height:2.1; color:var(--ink-2,#5a554a); }
.kg-m-list b{ color:var(--ink,#1b1b1b); }

/* مقایسهٔ وسیله و کارت‌ها */
.kg-m-grid3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; }
.kg-m-card{ border:1.5px solid var(--line,#e4dcc4); border-radius:14px; padding:18px;
  background:var(--paper,#fff); display:flex; flex-direction:column; gap:5px; }
.kg-m-ico{ font-size:28px; line-height:1; }
.kg-m-card b{ font-size:16px; }
.kg-m-sub{ font-size:12.5px; color:var(--muted,#7a7466); font-weight:700; }
.kg-m-card p{ font-size:13.5px; line-height:1.95; color:var(--ink-2,#5a554a); margin:6px 0 0; }

/* گام‌ها و زمان‌بندی */
.kg-m-ol, .kg-m-tl{ margin:0; padding:0; list-style:none; counter-reset:kgm; display:flex;
  flex-direction:column; gap:12px; }
.kg-m-ol li, .kg-m-tl li{ counter-increment:kgm; position:relative; padding-inline-start:44px;
  display:flex; flex-direction:column; gap:2px; }
.kg-m-ol li::before, .kg-m-tl li::before{ content:counter(kgm); position:absolute;
  inset-inline-start:0; inset-block-start:0; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; font:800 13px/1 inherit;
  background:var(--gold-100,#f7f2e3); color:var(--gold-700, #8a6d16);
  border:1.5px solid var(--line-2,#d9cfae); }
.kg-m-ol b, .kg-m-tl b{ font-size:15px; }
.kg-m-ol span, .kg-m-tl span{ font-size:13.5px; line-height:1.9; color:var(--ink-2,#5a554a); }

/* اعتماد و تماس */
.kg-m-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px;
  padding:20px; border-radius:14px; background:var(--paper-2,#fdfbf4); border:1.5px solid var(--line,#e4dcc4); }
.kg-m-stats div{ display:flex; flex-direction:column; gap:3px; text-align:center; }
.kg-m-stats b{ font-size:20px; font-weight:800; color:var(--gold-700, #8a6d16); }
.kg-m-stats span{ font-size:12.5px; color:var(--muted,#7a7466); }
.kg-m-contact{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; padding:18px 20px; border-radius:14px;
  background:var(--paper-2,#fdfbf4); border:1.5px solid var(--line,#e4dcc4); }
.kg-m-contact-t{ display:flex; flex-direction:column; gap:3px; }
.kg-m-contact-t b{ font-size:16px; }
.kg-m-contact-t span{ font-size:13.5px; color:var(--ink-2,#5a554a); }
.kg-m-contact-a{ display:flex; gap:10px; flex-wrap:wrap; }

/* چک‌لیست و نقلِ قول */
.kg-m-check-l{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:9px; }
.kg-m-check-l li{ position:relative; padding-inline-start:26px; font-size:14px; line-height:1.95; }
.kg-m-check-l li::before{ content:'✓'; position:absolute; inset-inline-start:0;
  color:var(--gold-700, #8a6d16); font-weight:800; }
.kg-m-quote{ margin:26px 0; padding:20px 22px; border-radius:14px;
  border-inline-start:4px solid var(--gold, #c9a227); background:var(--paper-2,#fdfbf4); }
.kg-m-quote p{ font-size:17px; line-height:1.95; margin:0 0 8px; }
.kg-m-quote cite{ font-size:12.5px; color:var(--muted,#7a7466); font-style:normal; }

/* چیدمان و دعوت */
.kg-m-2col{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
.kg-m-cta-box{ text-align:center; padding:28px 22px; border-radius:16px;
  background:var(--paper-2,#fdfbf4); border:1.5px solid var(--line,#e4dcc4); }

@media(max-width:640px){
  .kg-m-2col{ grid-template-columns:1fr; }
  .kg-m-contact{ flex-direction:column; align-items:stretch; }
  .kg-m-contact-a .kg-m-cta{ flex:1; }
}

/* جدولِ قیمتِ زنده — عرضِ زیاد باید داخلِ خودش اسکرول شود، نه اینکه
   کلِ صفحه را افقی کند. */
.kg-m-tw{ overflow-x:auto; border:1.5px solid var(--line,#e4dcc4); border-radius:14px; }
.kg-m-t{ width:100%; border-collapse:collapse; font-size:14px; min-width:460px; }
.kg-m-t th, .kg-m-t td{ padding:11px 14px; text-align:right;
  border-bottom:1px solid var(--line,#e4dcc4); }
.kg-m-t thead th{ background:var(--paper-2,#fdfbf4); font-size:12.5px; font-weight:800;
  color:var(--muted,#7a7466); white-space:nowrap; }
.kg-m-t tbody tr:last-child td{ border-bottom:none; }
.kg-m-t .kg-m-num{ font-weight:800; white-space:nowrap; }

/* ═══ صفحهٔ اصلی: فقط رزرو ═══
   خواستهٔ مالک ۲۰۲۶-۰۸-۱۴: «صفحهٔ اصلی فقط مختصِ رزرو باشد و همهٔ بخشِ
   رزرو در ورود دیده شود — بدونِ اینکه بنویسی باید این‌جا رزرو کنی.»

   پس هیچ متنِ راهنمایی اضافه نشد. کار را **چیدمان** می‌گوید:
   فرمِ رزرو کلِ نمای اول را می‌گیرد، وسط می‌نشیند، و چیزِ دیگری کنارش
   نیست که حواس را ببرد. وقتی تنها چیزِ روی صفحه یک فرم باشد، کاربر
   می‌داند باید پُرش کند.

   ⚠ ارتفاع با dvh نوشته شده نه vh: در گوشی، نوارِ نشانیِ مرورگر هنگامِ
   اسکرول جمع و باز می‌شود و vh با آن نمی‌جنبد — نتیجه‌اش پرشِ چیدمان و
   یک نوارِ خالی زیرِ فرم بود. */
body.kg-focus-book .hero{
  min-height:calc(100dvh - var(--kg-hdr-h, 118px));
  display:flex; align-items:center;
  border-radius:0;
}
body.kg-focus-book .hero > .container,
body.kg-focus-book .hero .hs-host{ width:100%; }

/* فاصله‌های سخاوتمندانه‌تر — فرم باید «موضوعِ صفحه» به‌نظر برسد،
   نه یک جعبهٔ کوچک در گوشه. */
body.kg-focus-book .hs-card{
  box-shadow:0 26px 60px -28px rgba(0,0,0,.28);
}

/* چیزی که در نمای اول نباید باشد */
body.kg-focus-book .hero-dots,
body.kg-focus-book .hero-caption{ display:none; }

@media(max-width:760px){
  body.kg-focus-book .hero{
    min-height:calc(100dvh - var(--kg-hdr-h, 96px));
    align-items:flex-start;
    padding-block-start:10px;
  }
}

/* ⚠ نه صحنهٔ متحرک، نه اسلایدرِ عکس — خواستهٔ مالک ۲۰۲۶-۰۸-۱۴.
   نکتهٔ گمراه‌کننده: تنظیمِ «scene» فقط بینِ این دو سوییچ می‌کند —
   خاموش‌کردنش صحنه را برمی‌دارد و اسلایدر را می‌گذارد. برای اینکه
   هیچ‌کدام نباشند، این‌جا هر دو کنار می‌روند.
   دلیل: صفحهٔ اصلی ابزارِ رزرو است؛ هر چیزی که بالای فرم حرکت کند
   همان سه ثانیهٔ اولِ تصمیم را می‌گیرد. */
/* ⚠ ۲۰۲۶-۰۸-۱۵ — صحنهٔ متحرک برگشت (خواستهٔ مالک).
   فقط اسلایدر پنهان می‌مانَد؛ آن بازنشسته شده و ۱٫۰۷ مگابایت عکس
   بی‌فایده می‌آورد. صحنه هزینهٔ شبکه‌اش کم است و مالک آن را می‌خواهد. */
body.kg-focus-book .hero-slides,
body.kg-focus-book .hero-slide,
body.kg-focus-book .hero-dots{ display:none !important; }

/* بدونِ تصویرِ پس‌زمینه، هدر باید پس‌زمینهٔ خودش را داشته باشد وگرنه
   یک مستطیلِ خالی می‌مانَد. */
body.kg-focus-book .hero{
  background:linear-gradient(180deg, var(--paper-2,#fdfbf4), var(--paper,#fff));
}




/* ═══ فوکوسِ صفحهٔ اصلی روی رزرو — ۲۰۲۶-۰۸-۱۴ب ═══ */
/* خواستهٔ مالک: «منوها ابسولوت باشند، و سایت که باز می‌شود فوکوس روی
   رزرو باشد نه اینکه بخواهد اسکرول شود.»

   ریشهٔ مشکل: هدر یک بلوکِ معمولی بود و در دسکتاپ حدودِ ۱۱۸ پیکسل و در
   موبایل بیشتر، از بالای صفحه را می‌خورد — پیش از آنکه بنر و فرم شروع
   شوند. با شناور شدنِ هدر آن ارتفاع آزاد می‌شود و ناحیهٔ رزرو از خطِ
   صفرِ صفحه شروع می‌کند. */
/* ⚠ ۲۰۲۶-۰۸-۱۵ — از kg-focus-book به kg-banner منتقل شد.
   شناور بودنِ هدر فقط وقتی معنا دارد که بنری پشتش باشد. روی صفحهٔ
   اصلی که صحنهٔ متحرک برگشت، هدرِ شناور نزدیک نصفِ صحنهٔ ۲۵۰پیکسلی
   را می‌پوشاند و مالک می‌دید «فقط فضایش آمده، انیمیشن نیست». */
body.kg-banner header{
  position:absolute; inset-inline:0; top:0; z-index:60;
  background:linear-gradient(180deg, rgba(26,26,26,.92) 0%, rgba(26,26,26,.72) 62%, rgba(26,26,26,0) 100%);
  border-bottom:none;
}
body.kg-banner{ padding-top:0; }



/* ─── منوها شناور، نه هُل‌دهنده ───
   زیرمنو در موبایل position:static بود؛ باز که می‌شد صفحه را پایین
   می‌راند و فرمِ رزرو از دیدِ کاربر بیرون می‌رفت. حالا داخلِ پنلِ منو
   شناور می‌شود و چیدمانِ پشتِ سرش تکان نمی‌خورد. */
@media (max-width:1024px){
  html:not([data-kg-editor]) header nav ul li.has-sub{ position:relative; }
  html:not([data-kg-editor]) header nav ul li.has-sub.open > ul.submenu{
    position:absolute; inset-inline:0; top:100%; z-index:5;
    background:var(--bg-deep, #2a2a2a);
    border:1px solid rgba(230,200,102,.22); border-radius:12px;
    box-shadow:0 24px 48px -18px rgba(0,0,0,.55);
    padding:8px 12px; margin-top:2px;
    max-height:min(60vh, 420px); overflow-y:auto; overscroll-behavior:contain;
  }
}





/* ═══ عمق و سایهٔ کارتِ رزرو — ۲۰۲۶-۰۸-۱۵ ═══
   خواستهٔ مالک: «به فرم رزرو کمی عمق بده و سایه، و گوشهٔ بالا سمتِ چپ
   هم گرد کن… کاربر باید بفهمه با یک فرمِ واقعیِ رزرواسیونِ اتوبوس
   طرف است.»

   دو تصمیمِ عمدی:
   ۱) سایه دولایه است. یک لایهٔ نزدیک و تیره لبه را تعریف می‌کند و یک
      لایهٔ دور و نرم کارت را از بنر جدا می‌کند. سایهٔ تک‌لایه روی عکس
      گِل‌آلود دیده می‌شود، نه برجسته.
   ۲) گوشهٔ بالا-راست (شروعِ خط در فارسی) عمداً تیزتر است تا کارت
      «لنگر» داشته باشد؛ بقیهٔ گوشه‌ها گرد. این همان زبانِ بصریِ فرمِ
      واقعیِ بلیط است، نه یک جعبهٔ تزئینی. */
body.kg-focus-book .hs-card{
  position:relative; z-index:2;
  background:#fff;
  border:1px solid rgba(201,162,39,.30);
  /* ⚠ عمداً ویژگیِ **فیزیکی** و نه منطقی.
     باگِ واقعی: با border-start-start-radius نوشته بودم، ولی در
     راست‌به‌چپ «start» یعنی راست — پس ۲۲ پیکسل روی گوشهٔ بالا-راست
     نشست و بالا-چپ همان لبهٔ تیز ماند. مالک درست دید.
     ریشهٔ لبه هم در redesign.css است: «border-radius:0 16px 16px 16px»
     که گوشهٔ بالا-چپ را عمداً صفر می‌کرد. */
  border-radius:22px;
  box-shadow:
    0 1px 2px rgba(40,32,10,.10),
    0 10px 22px -8px rgba(40,32,10,.24),
    0 34px 60px -26px rgba(40,32,10,.34);
}

/* ⚠ خطِ طلایی حالا بوردرِ واقعی است، نه شبه‌المانِ شناور.
   باگ: شبه‌المان یک مستطیلِ جدا بود با گردیِ خودش، و گردیِ آن با
   گردیِ کارت جور نمی‌شد — سرِ دو گوشه می‌شکست و «دفرمه» دیده می‌شد.
   بوردرِ واقعی دقیقاً منحنیِ border-radius را دنبال می‌کند، پس در
   هر دو گوشه تمیز می‌نشیند و مثلِ خطِ پایهٔ نوارِ تب‌ها می‌شود. */
body.kg-focus-book .hs-card{
  border-top:3px solid #c9a227;
}

/* دکمهٔ اقدام برجسته‌تر: چشم باید بی‌مکث بداند کجا را بزند */
body.kg-focus-book .hs-card .hs-go{
  box-shadow:0 6px 18px -6px rgba(138,109,22,.55);
}

@media (max-width:720px){
  body.kg-focus-book .hs-card{
    border-radius:18px;
    box-shadow:0 1px 2px rgba(40,32,10,.10), 0 14px 30px -14px rgba(40,32,10,.30);
  }
}


/* در حالتِ «کلِ عکس دیده شود» دو طرفِ عکس خالی می‌مانَد — پس‌زمینهٔ
   ملایم بگذار تا آن خلأ عمدی به نظر برسد، نه خرابی. */



/* ═══ بنرِ صفحهٔ اصلی — بازنویسی ۲۰۲۶-۰۸-۱۵ ═══

   ⚠ ریشهٔ سه باگِ پشتِ‌سرِهم: فرضِ غلط دربارهٔ ساختارِ صفحه.
   فرمِ رزرو (.hs-host) **داخلِ .hero نیست** — خواهرِ آن است و مستقیم
   داخلِ main می‌نشیند. نتیجه:
     • قاعده‌های سایه و گوشه که با «.hero .hs-card» نوشته شده بودند
       هرگز اجرا نشدند، پس گوشهٔ بالا-چپ تیز ماند.
     • وقتی .hero ارتفاعِ «یک صفحهٔ کامل» گرفت، یک صفحهٔ خالی شد و
       فرم را یک صفحه هُل داد پایین — از بیرون یعنی «فرم رفت».
     • overflow:hidden روی .hero عکسِ بنر را که بلندتر از خودش بود
       می‌بُرید — یعنی «عکس می‌گذارم چیزی نمایش داده نمی‌شود».

   حالا بنر به main بسته می‌شود، همان ظرفی که فرم هم در آن است. .hero
   در این حالت چیزی جز اسلایدرِ بازنشسته ندارد، پس کاملاً کنار می‌رود. */
body.kg-banner main{
  position:relative;
  /* ⚠ فرم عمداً *داخلِ* بنر شروع می‌شود، نه زیرِ آن.
     پیش از این فقط ۱۴ پیکسل زیرِ منو می‌نشست و مالک درست گفت «خیلی
     بالا رفته». حالا درصدِ فرورفتگی از پنل می‌آید. */
  /* تهِ نوارِ تب دقیقاً روی لبهٔ پایینِ بنر می‌نشیند:
     بالای بنر + ارتفاعِ بنر − (بالای ویجت تا تهِ تب‌ها) + جابه‌جاییِ دستی */
  /* ⚠ کفِ ایمنی با max(): اگر نوارِ تب‌ها از خودِ بنر بلندتر شود —
     که در موبایل با شکستنِ خطِ تب‌ها کاملاً ممکن است — این محاسبه
     منفی می‌شد و فرم می‌رفت **زیرِ منو**. کف تضمین می‌کند فرم هرگز
     بالاتر از لبهٔ پایینِ هدر نرود. */
  padding-top:max(
    calc(var(--kg-hdr-h, 118px) + 10px),
    calc(var(--kg-hdr-h, 118px) + var(--kg-hero-h, 260px)
         - var(--kg-hero-lift, 104px) + var(--kg-hero-drop-px, 0px))
  );
}
/* ⚠ ۲۰۲۶-۰۸-۱۵ — این‌جا «display:none» روی .hero بود و باگِ واقعیِ
   «انیمیشن دیده نمی‌شود» همین بود. اندازه‌گیریِ مرورگر نشان داد صحنه و
   خودِ SVG ساخته می‌شوند، ولی چون صفحهٔ اصلی هنوز بنر داشت کلاسِ
   kg-banner روی body می‌نشست و این قاعده کلِ هدر را می‌بُرد.
   پنهان‌کردنِ هدر هرگز نباید عارضهٔ جانبیِ «بنر دارم» باشد: بنر و صحنه
   دو چیزِ مستقل‌اند و مالک خودش انتخاب می‌کند کدام صفحه کدام را دارد. */

body.kg-banner .kg-hero-pic{
  /* ⚠ بنر یک <img> است، پس قاعده‌های عمومیِ عکسِ متن هم رویش می‌افتاد:
     «main img{ max-width:100%; border-radius:12px }». نتیجه‌اش گوشه‌های
     گرد و ظاهرِ تورفته بود — از بیرون یعنی «تمامِ عرض نیست».
     این‌ها صریح خنثی می‌شوند. */
  position:absolute; top:0; inset-inline:0;
  width:100%; max-width:none; min-width:100%;
  margin:0; padding:0; border-radius:0; box-shadow:none;
  height:calc(var(--kg-hdr-h, 118px) + var(--kg-hero-h, 260px));
  object-fit:var(--kg-hero-fit, cover);
  object-position:var(--kg-hero-pos, 50% 50%);
  z-index:0;
}

/* پردهٔ روشن فقط روی نوار — بدونِ آن متنِ فرم روی عکسِ شلوغ خوانده نمی‌شود */
body.kg-banner main::before{
  content:''; position:absolute; top:0; inset-inline:0; z-index:1;
  height:calc(var(--kg-hdr-h, 118px) + var(--kg-hero-h, 260px));
  /* ⚠ شدتِ پرده با opacity تنظیم می‌شود نه با دستکاریِ alpha داخلِ
     gradient — چون آن‌جا calc در همهٔ مرورگرها یکسان رفتار نمی‌کند.
     پیش از این ثابت و پُررنگ بود و عکس را محو می‌کرد. */
  /* ⚠ به سفیدِ کامل نرسد: وقتی ته‌رنگِ پرده ۱۰۰٪ سفید بود، لبهٔ
     پایینِ عکس در سفیدیِ صفحه گم می‌شد و بنر و فرم «مچ» به نظر
     نمی‌رسیدند. حالا لبه دیده می‌شود. */
  background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.82));
  opacity:var(--kg-hero-scrim, .45);
  pointer-events:none;
}

/* هرچه در main است باید روی بنر بنشیند، نه زیرش */
body.kg-banner main > *{ position:relative; z-index:2; }

@media (max-width:720px){
  body.kg-banner .kg-hero-pic,
  body.kg-banner main::before{
    height:calc(var(--kg-hdr-h, 96px) + var(--kg-hero-h-m, 190px));
  }
  body.kg-banner main{
    padding-top:max(
      calc(var(--kg-hdr-h, 96px) + 8px),
      calc(var(--kg-hdr-h, 96px) + var(--kg-hero-h-m, 190px)
           - var(--kg-hero-lift, 96px) + var(--kg-hero-drop-px, 0px))
    );
  }
}


/* ═══ موبایل — اصلِ کار همین‌جاست ═══
   خواستهٔ مالک ۲۰۲۶-۰۸-۱۵: «در موبایل هم باید نمایش درست بشه، اصلِ
   کار موبایله.» */
@media (max-width:720px){
  /* هدرِ شناور نباید روی بنر سنگینی کند؛ گرادیان کوتاه‌تر و ملایم‌تر */
  body.kg-banner header{
    background:linear-gradient(180deg, rgba(26,26,26,.94) 0%, rgba(26,26,26,.66) 66%, rgba(26,26,26,0) 100%);
  }
  /* کارت تمامِ عرض را بگیرد، نه اینکه دو طرفش هدر برود */
  body.kg-banner .hs-host{ padding-inline:12px; box-sizing:border-box; }
  body.kg-focus-book .hs-card{ padding:12px; }
  /* ⚠ عمداً overflow-x:hidden نگذاشتم: روی body یک ظرفِ اسکرولِ تازه
     می‌سازد و چسبندگیِ (sticky) هرچه داخلش باشد را می‌شکند. جلوگیری
     از سرریز باید از خودِ المان بیاید، نه با بریدنِ کلِ صفحه. */
  body.kg-banner .kg-hero-pic{ max-width:100%; }
}





/* ═══ تقویم باید کامل دیده شود ═══
   ⚠ جعبهٔ تقویم داخلِ برچسبِ فیلد باز می‌شود. اگر جدِ آن بریدنِ سرریز
   داشته باشد یا لایه‌اش پایین بیفتد، نیمه‌بریده دیده می‌شود — همان
   «صفحهٔ تاریخ کامل نمایش داده نمی‌شود». */
.hs-card .kgd-pop{ z-index:40; }
.hs-card .hs-fld.hs-date{ position:relative; overflow:visible; }
.hs-card, .hs-host{ overflow:visible; }


/* تاریخِ گذشته که تایپ شد و به امروز چسبانده شد — یک تذکرِ کوتاه.
   بدونِ آن، عددِ کاربر بی‌توضیح عوض می‌شود و او فکر می‌کند فرم خراب است. */
.kgd-clamped{
  background:#fdf8e8 !important;
  box-shadow:inset 0 0 0 2px rgba(201,162,39,.8) !important;
  transition:background .25s, box-shadow .25s;
}


/* سه قیمتِ کلاسِ خودرو داخلِ کارتِ مسیرِ صفحهٔ اصلی */
.hm-rt .hm-rt-p{ line-height:2; font-size:14px; }
.hm-rt .hm-rt-p b{ color:var(--muted,#6b6459); font-weight:700; font-size:12.5px;
  display:inline-block; min-width:4.2em; }


/* ═══ آخرین حرفِ ارتفاعِ هدر در موبایل ═══
   ⚠ اندازه‌گیریِ ۲۰۲۶-۰۸-۱۷: در عرضِ ۳۹۰ پیکسل، ارتفاعِ صحنه به
   --kg-hero-h-m گوش نمی‌داد و روی مقدارِ دسکتاپ می‌مانْد.
   علت: دو قاعدهٔ بی‌مدیای ارتفاع **بعد از** بلوکِ @media موبایل در
   همین فایل می‌آیند. هم‌وزن‌اند و هر دو !important، پس آخرین‌شان
   برنده می‌شود — حتی روی گوشی.
   این بلوک عمداً تهِ فایل است تا آخرین حرف را بزند. */
@media (max-width:720px){
  section.hero,
  section.hero.has-scene,
  .hero.has-scene{
    height: var(--kg-hero-h-m, clamp(180px, 30vh, 250px)) !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}


/* ═══ هالهٔ نورِ صحنه در موبایل — ۲۰۲۶-۰۸-۱۸ ═══
   اندازه‌گیریِ مرورگر: گروهِ kg-p-sun در مختصاتِ نقاشی بلندیِ ۶۰۸ واحد
   دارد، در حالی که کلِ بوم ۶۰۰ واحد است. یعنی یک هالهٔ تمام‌بوم است نه
   یک خورشیدِ کوچک.

   در دسکتاپ که قاب ۲۴۰ پیکسل است اشکالی ندارد، ولی در موبایل قاب فقط
   ۱۶۰ پیکسل می‌شود و همان هاله از بالا و پایین بیرون می‌زند و روی
   ساختمان‌ها و اتوبوس می‌افتد. شکایتِ مالک: «پشتِ پرچم زده بیرون، بزرگ
   است — هرچه کوچکش می‌کنم فرقی نمی‌کند.»
   کوچک‌کردن از پنل هم جواب نمی‌داد، چون آن‌جا شفافیت عوض می‌شود نه
   اندازه، و اندازه‌اش ذاتاً به بزرگیِ کلِ بوم است.

   ⚠ حذفش نمی‌کنیم: آسمانِ بی‌نور صحنه را مرده می‌کند. فقط آن‌قدر
   کم‌رنگ می‌شود که پشتِ ساختمان‌ها بماند و جلوی چشم نیاید. */
/* ⚠ ۲۰۲۶-۰۸-۱۹ — کم‌رنگ‌کردن کافی نبود. مالک: «انیمیشنِ نورِ پشتِ پرچم
   حذف شود.» در موبایل کلِ گروه برداشته می‌شود، نه کم‌رنگ. آسمان خالی
   نمی‌مانَد چون گرادیانِ خودِ بوم زیرش هست.
   در دسکتاپ دست‌نخورده است — آن‌جا قاب بلند است و هاله سرِ جایش خوب
   می‌نشیند. */
@media (max-width:760px){
  .kg-hero-scene #kg-p-sun{ display:none !important; }
}


/* ═══ سربرگِ شناور روی صحنه در موبایل — ۲۰۲۶-۰۸-۱۹ ═══
   خواستهٔ مالک: «آیکونِ همبرگر بیاید روی انیمیشن و فضایش به انیمیشن
   داده شود تا فرم واضح‌تر شود.»

   اندازه‌گیریِ پیش از تغییر (۳۹۰×۸۴۴): سربرگ ۶۹ پیکسل از بالای صفحه را
   می‌گرفت، صحنه از ۶۹ شروع می‌شد و فرم از ۲۰۱. یعنی ۶۹ پیکسلِ کاملِ
   بالای گوشی فقط نوارِ سفیدِ منو بود.

   ⚠ چرا absolute و نه fixed: با fixed سربرگ موقعِ اسکرول روی محتوا
   می‌مانْد و در گوشیِ کوتاه، فرم را می‌پوشاند. absolute یعنی فقط روی
   صحنه شناور است و با اسکرول کنار می‌رود.

   ⚠ چرا فقط صفحه‌ای که صحنه دارد: در صفحه‌های داخلی سربرگ باید
   پس‌زمینه و جای خودش را داشته باشد، وگرنه روی متن می‌افتد. */
@media (max-width:760px){
  /* ⚠ ۲۰۲۶-۰۸-۲۳ — بازنویسی. مالک: «یک قسمتِ هدرِ باریک بزن، منو و لوگو
     آن‌جا برود.»
     پیش از این سربرگ با absolute از جریان بیرون می‌رفت و شفاف روی صحنه
     می‌نشست؛ یعنی هدرِ مستقلی وجود نداشت، فقط دو آیکون روی نقاشی — و با
     اسکرول هم می‌رفت و برنمی‌گشت.
     نگرانیِ آن روز («سربرگ فرم را می‌پوشاند») با sticky و ارتفاعِ ۵۲
     برطرف است: نوار فقط ۵۲ پیکسل از دید می‌گیرد و ارتفاعِ صحنه هم همان‌قدر
     کم شده تا مجموع عوض نشود. */
  body.kg-focus-book header,
  body:has(.kg-hero-scene) header{
    position:sticky !important;
    inset-inline:0; top:0;
    z-index:920;
    background:color-mix(in srgb, var(--paper, #f7f2e7) 94%, transparent) !important;
    -webkit-backdrop-filter:saturate(1.5) blur(12px);
    backdrop-filter:saturate(1.5) blur(12px);
    border-block-end:1px solid rgba(0,0,0,.07) !important;
    box-shadow:0 1px 0 rgba(0,0,0,.02) !important;
  }
  /* روی پس‌زمینهٔ روشنِ نوار، نام و همبرگر باید تیره باشند */
  body.kg-focus-book header .nav-brand,
  body:has(.kg-hero-scene) header .nav-brand{ color:#1b1b1b !important; }
  /* صحنه همان لحظه ۶۹ پیکسل بالا می‌آید چون سربرگ از جریان بیرون رفت،
     و همان اندازه هم بلندتر می‌شود تا تصویر کوچک‌تر نشود. */
  body.kg-focus-book section.hero,
  body.kg-focus-book section.hero.has-scene,
  body.kg-focus-book .hero.has-scene,
  body:has(.kg-hero-scene) section.hero,
  body:has(.kg-hero-scene) section.hero.has-scene,
  body:has(.kg-hero-scene) .hero.has-scene{
    /* ⚠ ۴۲ پیکسلِ جبرانی برای زمانی بود که سربرگ از جریان بیرون می‌رفت
       و صحنه بالا می‌آمد. حالا سربرگ جای خودش را دارد، پس این جبران
       باید برداشته شود وگرنه مجموعِ بالای صفحه بلندتر از قبل می‌شود. */
    height: var(--kg-hero-h-m, clamp(180px, 30vh, 250px)) !important;
  }
  /* خوانایی روی آسمانِ روشن: همبرگر و لوگو باید تیره و پررنگ بمانند */
  body.kg-focus-book .nav-toggle,
  body:has(.kg-hero-scene) .nav-toggle{
    color:#2a2a2a !important;
    background:rgba(255,255,255,.72) !important;
    border-color:rgba(0,0,0,.10) !important;
    backdrop-filter:saturate(1.4) blur(4px);
  }
}


/* ═══ جدولِ مسیرهای صفحهٔ اصلی — ۲۰۲۶-۰۸-۱۸ ═══
   خواستهٔ مالک: ستون‌بندیِ روشن — مسیر، زمان، نوع وسیله، قیمت، واحدِ پول.
   کارتِ قبلی هر سه قیمت را در یک سلول می‌ریخت و خواندنش سخت بود. */
.hm-rt-wrap{
  /* ⚠ اسکرولِ افقی روی خودِ ظرف، نه روی صفحه: در موبایل جدولِ پنج‌ستونی
     جا نمی‌شود و بدونِ این، کلِ صفحه به چپ و راست می‌لغزید. */
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1.5px solid var(--line,#e3ddcd); border-radius:14px;
  background:var(--white,#fff);
}
.hm-rt-tbl{ width:100%; border-collapse:collapse; font-size:14.5px; }
.hm-rt-tbl th, .hm-rt-tbl td{
  padding:11px 14px; text-align:start; white-space:nowrap;
  border-block-start:1px solid var(--line,#e3ddcd);
}
.hm-rt-tbl thead th{
  background:linear-gradient(135deg,#c9a227,#8a6d16); color:#fff;
  font-size:13px; font-weight:800; border:none;
}
.hm-rt-tbl tbody th{
  font-weight:800; color:var(--ink,#2b2721);
  background:var(--paper-2,#faf7ef); vertical-align:middle;
}
.hm-rt-tbl td{ color:#463f34; }
.hm-rt-num{ font-weight:800; color:#8a6d16; font-variant-numeric:tabular-nums; }
.hm-rt-tbl tbody tr:hover td{ background:rgba(201,162,39,.06); }
.hm-rt-cta{ margin-block-start:14px; text-align:center; }
.hm-rt-cta a{
  display:inline-block; background:linear-gradient(135deg,#c9a227,#8a6d16);
  color:#fff; text-decoration:none; font-weight:800; font-size:14px;
  padding:11px 26px; border-radius:12px;
}
/* نشانِ ارز کنارِ عدد — ریز و کم‌رنگ، چون در همهٔ سطرها تکرار می‌شود */
.hm-rt-cur{ font-size:.82em; font-weight:700; color:#9a8f78; margin-inline-start:2px; }

@media (max-width:520px){
  .hm-rt-tbl{ font-size:13.5px; }
  .hm-rt-tbl th, .hm-rt-tbl td{ padding:9px 11px; }
}

/* ═══ جدول در گوشی — ۲۰۲۶-۰۸-۱۹ ═══
   مالک: «در موبایل نمایش خوبی ندارد.» ستونِ واحدِ پول حذف شد (نشانش
   کنارِ عدد رفت) و بقیه فشرده می‌شود تا بدونِ اسکرولِ افقی جا شود. */
@media (max-width:430px){
  .hm-rt-tbl{ font-size:12.5px; }
  .hm-rt-tbl th, .hm-rt-tbl td{ padding:7px 8px; }
  .hm-rt-tbl thead th{ font-size:11.5px; }
  /* نامِ مسیر تنها چیزی است که اجازهٔ دو خط شدن دارد؛ بقیه باید یک‌خطی
     بمانند وگرنه ستون‌ها ناهم‌تراز می‌شوند. */
  .hm-rt-tbl tbody th{ white-space:normal; line-height:1.6; }
}


/* ═══ بزرگ‌نماییِ صحنه در موبایل — ۲۰۲۶-۰۸-۱۸ب ═══
   شکایتِ مالک: «انیمیشن درست است ولی در سایت پرچم‌ها دیده نمی‌شوند.»

   اندازه‌گیری: پرچمِ روی اتوبوس در دسکتاپ ۲۷×۳۶ پیکسل است و در موبایل
   ۸×۱۰ — یعنی عملاً نامرئی. علت خطا نبود: نقاشی ۱۴۴۰ واحد پهناست و در
   قابِ ۳۹۰ پیکسلی با مقیاسِ ۰٫۲۷ رندر می‌شود، پس هر جزئیاتی یک‌چهارم
   می‌شود.

   چاره: در موبایل نقاشی را پهن‌تر از قاب می‌کنیم و طرفینش را می‌بُریم.
   «xMidYMax» یعنی وسط و ته لنگر می‌ماند، پس اتوبوس و آدم‌ها و پرچمشان
   — که همه پایینِ وسط‌اند — سرِ جایشان می‌مانند و فقط بیابانِ دو طرف
   بریده می‌شود.

   ⚠ عرضِ ۱۸۰٪ عمدی است: با ۲۰۰٪ اتوبوس از لبه بیرون می‌زد. */
@media (max-width:720px){
  .kg-hero-scene svg{
    /* ⚠ «max-width:none» لازم است: قاعدهٔ عمومیِ «main svg{max-width:100%}»
       عرضِ ۱۸۰٪ را به ۱۰۰٪ برمی‌گرداند و بزرگ‌نمایی بی‌اثر می‌شود.
       اندازه‌گیری نشان داد transform اعمال می‌شد ولی عرض نه. */
    width:180% !important;
    max-width:none !important;
    inset-inline:auto !important;
    left:50% !important;
    transform:translateX(-50%);
  }
}
@media (max-width:430px){
  .kg-hero-scene svg{ width:215% !important; max-width:none !important; }
}


/* ═══ پرشِ خودکار به گامِ بعد — ۲۰۲۶-۰۸-۱۹ ═══
   وقتی صفحه خودش تکان می‌خورد، کاربر باید بفهمد «کجا» را نگاه کند؛
   وگرنه فکر می‌کند چیزی پرید. یک درخششِ کوتاه کافی است. */
.hs-jump{
  animation:kgJump 1.3s ease-out 1;
  border-radius:14px;
}
@keyframes kgJump{
  0%   { box-shadow:0 0 0 0 rgba(201,162,39,.55); }
  60%  { box-shadow:0 0 0 7px rgba(201,162,39,0); }
  100% { box-shadow:0 0 0 0 rgba(201,162,39,0); }
}
@media (prefers-reduced-motion: reduce){
  .hs-jump{ animation:none; }
}

/* «ویرایش» بالای خلاصهٔ درخواست (پیش از این ته پنجره بود) */
.hs-m-sumhd{ display:flex; justify-content:flex-start; margin-block-end:8px; }
.hs-m-editb{ font-size:13px; font-weight:800; }


/* ═══ اسکلتِ فوریِ فرمِ رزرو — ۲۰۲۶-۰۸-۲۰ ═══
   تا رسیدنِ ویجتِ واقعی، جای فرم خالی نماند («سایت سنگین است»).
   ویجت که آمد کلِ .hs-skel با innerHTML میزبان می‌رود. */
.hs-skel{ direction:rtl; }
.hs-skel-tabs{ display:flex; gap:8px; justify-content:flex-start; margin:0 0 -1px; }
.hs-skel-tabs span{
  background:#fff; border:1.5px solid #e3ddcd; border-bottom:none;
  border-radius:14px 14px 0 0; padding:11px 20px; font-size:14px; font-weight:800;
  color:#6b6459;
}
.hs-skel-tabs span.on{ background:linear-gradient(135deg,#e6c866,#c9a227); color:#fff; border-color:#c9a227; }
.hs-skel-card{
  background:#fff; border:1.5px solid #e3ddcd; border-radius:0 18px 18px 18px;
  padding:22px 20px; display:flex; flex-direction:column; gap:12px; min-height:470px;
}
.hs-skel-line,.hs-skel-box{
  display:block; border-radius:10px;
  background:linear-gradient(90deg,#f1ece0 25%,#faf7ef 50%,#f1ece0 75%);
  background-size:200% 100%; animation:kgSkel 1.1s linear infinite;
}
.hs-skel-line{ height:14px; }
.hs-skel-line.w40{ width:40%; } .hs-skel-line.w70{ width:70%; }
.hs-skel-box{ height:88px; }
.hs-skel-box.short{ height:52px; }
@keyframes kgSkel{ to{ background-position:-200% 0; } }
@media (prefers-reduced-motion:reduce){ .hs-skel-line,.hs-skel-box{ animation:none; } }

/* ⚠ ۲۰۲۶-۰۸-۲۳ — پس از انتخابِ وسیله، صحنهٔ هدر نصف می‌شود.
   در گامِ اول بزرگ می‌مانَد چون همان‌جا کارش را می‌کند؛ از گامِ دوم به
   بعد فقط جا می‌گیرد و فیلدها را زیرِ تا می‌بَرد. */
@media (max-width:760px){
  html.kg-vehpicked body.kg-focus-book section.hero,
  html.kg-vehpicked body.kg-focus-book section.hero.has-scene,
  html.kg-vehpicked body.kg-focus-book .hero.has-scene,
  html.kg-vehpicked body:has(.kg-hero-scene) section.hero,
  html.kg-vehpicked body:has(.kg-hero-scene) section.hero.has-scene,
  html.kg-vehpicked body:has(.kg-hero-scene) .hero.has-scene{
    /* ⚠ ۲۰۲۶-۰۸-۲۳ — از ۸۲ به ۱۷۰: با ۸۲ پیکسل از صحنه فقط جاده و
       چرخ‌ها دیده می‌شد و مالک گفت «انیمیشن در گوشی نشان داده
       نمی‌شود». جایش از فضای مردهٔ کارت‌های وسیله آمد، نه از
       فیلدها. */
    height: clamp(150px, 21vh, 180px) !important;
    min-height: 0 !important;
  }
}