/* ==========================================================================
   IKM — بخش‌های صفحه اصلی (فاز ۲)
   مرجع: demo-iran-komatsu-v5.html
   هیچ رنگی هارد‌کد نشده — همه از tokens.css
   ========================================================================== */


/* ==========================================================================
   ۱) اسلایدر هیرو
   ========================================================================== */

.ikm-slider {
  position: relative;
  height: 430px;
  overflow: hidden;
  background: var(--ikm-bg-2);
  border-bottom: 1px solid var(--ikm-line-c);
}

.ikm-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s ease, visibility .7s;
}
.ikm-slide.is-on { opacity: 1; visibility: visible; }

.ikm-slide__art { position: absolute; inset: 0; overflow: hidden; }
/* گرافیک به ستون محتوا چسبیده، نه به لبه صفحه — وگرنه روی نمایشگر
   عریض نصفه بیرون می‌زد. */
.ikm-slide__art svg {
  position: absolute;
  bottom: 4%;
  height: 88%;
  opacity: .5;
  left: max(0px, calc((100% - var(--ikm-wrap)) / 2));
}

.ikm-slide--1 .ikm-slide__art { background: radial-gradient(ellipse 80% 90% at 78% 55%, rgba(20,10,154,.14), transparent 65%); }
.ikm-slide--2 .ikm-slide__art { background: radial-gradient(ellipse 80% 90% at 78% 55%, rgba(76,123,146,.22), transparent 65%); }
.ikm-slide--3 .ikm-slide__art { background: radial-gradient(ellipse 80% 90% at 78% 55%, rgba(95,168,118,.16), transparent 65%); }

/* z-index نهایی این عنصر پایین فایل (نسخه ۳.۴) تعیین می‌شود. */
.ikm-slide__inner { position: relative; max-width: 600px; }

.ikm-tag-strip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--ikm-mono);
  font-size: .7rem;
  color: var(--ikm-accent);
  padding: 5px 12px 5px 5px;
  border: 1px solid var(--ikm-accent-dim);
  border-radius: 2px;
  background: var(--ikm-bg-2);
  margin-bottom: 18px;
}
.ikm-tag-strip b {
  background: var(--ikm-accent);
  color: var(--ikm-accent-ink);
  padding: 2px 8px;
  border-radius: 2px;
  font-weight: 700;
}

.ikm-slide__title {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.36;
  letter-spacing: -.6px;
  margin: 0 0 15px;
  color: var(--ikm-tx);
}
.ikm-slide__title em { color: var(--ikm-accent); font-style: normal; }

.ikm-slide p {
  color: var(--ikm-tx-mute);
  font-size: 1rem;
  max-width: 470px;
  margin: 0 0 26px;
}

.ikm-slide__btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* دکمه‌ها و نقطه‌ها باید با ستون محتوا هم‌راستا باشند، نه چسبیده به
   لبه صفحه. این محاسبه در هر عرضی همان پدینگ .ikm-wrap را می‌دهد. */
/* عمداً right/left فیزیکی نوشته شده نه inline-start/end: در چیدمان
   راست‌به‌راست، inline-end یعنی چپ — و همین باعث شد نقطه‌ها و دکمه‌ها
   جای هم عوض شوند. */
/*
 * نقطه‌ها چپ‌به‌راست می‌چینند (نسخه ۳.۴.۳): اسلاید اول سمت چپ،
 * و با هر «بعدی» نشانگر به راست می‌رود — هم‌جهت با فلش ← و →
 * که حالا در هر دو اسلایدر و کروسل یک معنی دارند.
 */
.ikm-slider__dots {
  direction: ltr;
  position: absolute;
  bottom: 22px;
  right: max(var(--ikm-pad), calc((100% - var(--ikm-wrap)) / 2 + var(--ikm-pad)));
  display: flex;
  gap: 8px;
  z-index: 5;
}
.ikm-slider .ikm-slider__dots button {
  padding: 0;
  width: 30px;
  height: 4px;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: var(--ikm-line-c);
  cursor: pointer;
  transition: .2s;
}
.ikm-slider .ikm-slider__dots button.is-on { background: var(--ikm-accent); width: 44px; }

.ikm-slider__arrows {
  position: absolute;
  bottom: 18px;
  left: max(var(--ikm-pad), calc((100% - var(--ikm-wrap)) / 2 + var(--ikm-pad)));
  display: flex;
  gap: 8px;
  z-index: 5;
}
.ikm-slider .ikm-slider__arrows button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--ikm-line-c);
  background: var(--ikm-bg-2);
  color: var(--ikm-tx-mute);
  border-radius: var(--ikm-r-btn);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ikm-slider__arrows button:hover { border-color: var(--ikm-accent); color: var(--ikm-accent); }


/* ==========================================================================
   ۲) نوار مزایا
   ========================================================================== */

.ikm-quick {
  background: var(--ikm-bg-3);
  border-bottom: 1px solid var(--ikm-line-c);
}
.ikm-quick__row { display: grid; grid-template-columns: repeat(4, 1fr); }

.ikm-quick__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-left: 1px solid var(--ikm-line-c);
}
.ikm-quick__item:last-child { border-left: none; }

.ikm-quick__item .ikm-ico { width: 24px; height: 24px; color: var(--ikm-accent); flex-shrink: 0; }
.ikm-quick__item h3 { font-size: .85rem; font-weight: 700; margin: 0; color: var(--ikm-tx); }
.ikm-quick__item p  { font-size: .74rem; color: var(--ikm-tx-faint); margin: 0; }


/* ==========================================================================
   ۳) گرید دسته‌بندی
   ========================================================================== */

/* چهار دسته داریم؛ با سه ستون، کارت چهارم تنها در ردیف دوم می‌افتاد.
   دو در دو متعادل‌تر است و کارت‌ها هم جای کافی برای متن دارند. */
.ikm-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

.ikm-cat-card {
  position: relative;
  background: var(--ikm-bg-2);
  border: 1px solid var(--ikm-line-c);
  border-radius: var(--ikm-r-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  text-decoration: none;
  transition: .18s;
}
.ikm-cat-card:hover {
  border-color: var(--ikm-accent);
  transform: translateY(-2px);
  box-shadow: var(--ikm-shadow);
}

.ikm-cat-card__ic { width: 33px; height: 33px; color: var(--ikm-accent); }
.ikm-cat-card h3 { font-size: .95rem; font-weight: 700; margin: 0; color: var(--ikm-tx); }

.ikm-cat-card__count { font-family: var(--ikm-mono); font-size: .7rem; color: var(--ikm-tx-faint); }
.ikm-cat-card__count b { color: var(--ikm-tx-mute); }

.ikm-cat-card__arrow {
  position: absolute;
  left: 16px;
  top: 20px;
  width: 20px;
  height: 20px;
  color: var(--ikm-accent);
  opacity: 0;
  transition: .18s;
}
.ikm-cat-card:hover .ikm-cat-card__arrow { opacity: 1; }


/* ==========================================================================
   ۴) کروسل محصولات
   ========================================================================== */

/* گرید محصولات — جایگزین کروسل وقتی محصولات کم‌اند */
.ikm-prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.ikm-carou { position: relative; }

.ikm-carou__track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ikm-carou__track::-webkit-scrollbar { display: none; }

.ikm-carou__track .ikm-prod {
  flex: 0 0 calc((100% - 42px) / 4);
  scroll-snap-align: start;
}

.ikm-carou__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
}
.ikm-carou .ikm-carou__nav button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--ikm-line-c);
  background: var(--ikm-bg-2);
  color: var(--ikm-tx-mute);
  border-radius: var(--ikm-r-btn);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
}
.ikm-carou .ikm-carou__nav button:hover { border-color: var(--ikm-accent); color: var(--ikm-accent); }

.ikm-carou__prog {
  flex: 1;
  height: 3px;
  background: var(--ikm-line-c);
  border-radius: 2px;
  overflow: hidden;
  margin-left: 12px;
}
.ikm-carou__prog i {
  display: block;
  height: 100%;
  background: var(--ikm-accent);
  width: 25%;
  transition: .35s;
}


/* ==========================================================================
   ۵) سوالات پرتکرار
   ========================================================================== */

.ikm-faq__item {
  background: var(--ikm-bg-2);
  border: 1px solid var(--ikm-line-c);
  border-radius: var(--ikm-r-card);
  margin-bottom: 9px;
  overflow: hidden;
}

.ikm-faq .ikm-faq__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 15px 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: start;
  font-family: var(--ikm-font);
  font-size: .92rem;
  font-weight: 600;
  color: var(--ikm-tx);
}
.ikm-faq .ikm-faq__q span {
  color: var(--ikm-accent);
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
  transition: transform .2s;
}
.ikm-faq__item.is-open .ikm-faq .ikm-faq__q span { transform: rotate(45deg); }

.ikm-faq__a {
  display: none;
  padding: 0 18px 16px;
  border-top: 1px dashed var(--ikm-line-c);
}
.ikm-faq__item.is-open .ikm-faq__a { display: block; }
.ikm-faq__a p {
  margin: 14px 0 0;
  color: var(--ikm-tx-mute);
  font-size: .88rem;
  line-height: var(--ikm-line);
}


/* ==========================================================================
   واکنش‌گرایی — نقاط شکست طبق 02-SPEC بند ۱۲
   ========================================================================== */

@media (max-width: 1000px) {
  .ikm-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .ikm-carou__track .ikm-prod { flex: 0 0 calc((100% - 28px) / 3); }
}

@media (max-width: 760px) {
  .ikm-sec { padding: 40px 0; }

  /* روی موبایل ارتفاع خودکار می‌شود تا متن بریده نشود */
  .ikm-slider { height: auto; }
  .ikm-slide {
    position: relative;
    inset: auto;
    display: none;
    padding: 34px 0 64px;
  }
  .ikm-slide.is-on { display: flex; }
  /* نسخه ۳.۴: فقط گرافیک SVG روی موبایل حذف می‌شود، نه عکس/ویدیو.
     قاعده دقیق‌ترش پایین همین فایل است. */
  .ikm-slide__art:not(.is-media) { display: none; }
  .ikm-slide__title { font-size: 1.7rem; }
  .ikm-slide p { font-size: .92rem; }
  .ikm-slide__btns .ikm-btn { flex: 1 1 auto; }

  .ikm-quick__row { grid-template-columns: repeat(2, 1fr); }
  .ikm-quick__item:nth-child(2n) { border-left: none; }
  .ikm-quick__item:nth-child(-n+2) { border-bottom: 1px solid var(--ikm-line-c); }

  .ikm-carou__track .ikm-prod { flex: 0 0 calc((100% - 14px) / 2); }

  .ikm-sec-head h2 { font-size: 1.3rem; }
}

@media (max-width: 480px) {
  .ikm-cat-grid { grid-template-columns: 1fr; }
  .ikm-quick__row { grid-template-columns: 1fr; }
  .ikm-quick__item { border-left: none; border-bottom: 1px solid var(--ikm-line-c); }
  .ikm-quick__item:last-child { border-bottom: none; }
  .ikm-carou__track .ikm-prod { flex: 0 0 82%; }
}

/* احترام به تنظیم «کاهش حرکت» سیستم‌عامل */
@media (prefers-reduced-motion: reduce) {
  .ikm-slide { transition: none; }
  .ikm-carou__track { scroll-behavior: auto; }
}


/* ==========================================================================
   قاب رسانه هیرو — بازنویسی نسخه ۳.۴

   ⚠️ قاعده‌های ویدیوی نسخه ۳.۳ کلاً حذف شدند، نه اصلاح.

   آنجا پرده محوکننده یک شبه‌عنصر ::after بود و اینکه بالای <video>
   بنشیند یا زیرش، به ترتیب DOM و z-index خودکار مرورگر واگذار شده
   بود. نتیجه‌اش این شد که ویدیو زیر متن می‌افتاد و متن خوانده نمی‌شد.

   حالا سه لایه واقعی با z-index صریح وجود دارد:
     ۱ رسانه (.ikm-slide__layer)
     ۲ پرده  (.ikm-slide__scrim)
     ۳ متن   (.ikm-slide__inner)

   هیچ لایه‌ای به ترتیب پیش‌فرض تکیه نمی‌کند.
   ========================================================================== */

.ikm-slide__art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.ikm-slide__layer {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 1;
}

.ikm-slide__scrim {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 2;
  pointer-events: none;
}

.ikm-slide__inner { position: relative; z-index: 3; max-width: 600px; }


/* ---------- حالت الف: گرافیک SVG ----------
   گرافیک کنار ستون محتوا می‌نشیند، نه پشت متن. پرده در این حالت
   لازم نیست چون متن روی پس‌زمینه ساده است.                          */

/*
 * ⚠️ اندازه — باگ نسخه ۳.۴.۱
 *
 * طرح‌های قبلی نسبت ۴۰۰×۲۶۰ داشتند، طرح‌های جدید ۶۸۰×۳۴۰. با همان
 * `height: 88%` گرافیک تازه خیلی پهن‌تر درمی‌آمد، از نصف چپ بیرون
 * می‌زد و روی تیتر می‌افتاد.
 *
 * حالا عرض مهار می‌شود نه ارتفاع: گرافیک هرگز از ۴۴٪ عرض بیشتر
 * نمی‌شود، پس هر نسبتی هم داشته باشد وارد ناحیه متن (۶۰۰ پیکسل
 * سمت راست) نمی‌شود.
 */
.ikm-slide__art:not(.is-media) .ikm-slide__layer svg {
  position: absolute;
  bottom: 7%;
  left: max(20px, calc((100% - var(--ikm-wrap)) / 2));
  width: min(44%, 520px);
  height: auto;
  max-height: 80%;
  opacity: .42;
}
.ikm-slide__art:not(.is-media) .ikm-slide__scrim { display: none; }


/* ---------- حالت ب: عکس یا ویدیو ----------
   رسانه تمام قاب را می‌گیرد و پرده تضمین می‌کند تیتر خوانا بماند. */

.ikm-slide__img,
.ikm-slide__vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ویدیو تا وقتی واقعاً آماده نشده نمایش داده نمی‌شود؛
   تا آن لحظه عکس یا گرافیک سر جایش می‌ماند. */
.ikm-slide__vid { opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.ikm-slide__art.has-video .ikm-slide__vid { opacity: 1; }

/*
 * ⚠️ پرش تصویر — اصلاح نسخه ۳.۴.۲
 *
 * قبلاً گرافیک SVG تا آماده شدن ویدیو نمایش داده می‌شد و بعد محو
 * می‌شد. نتیجه‌اش یک ثانیه پرش بود: اول بیل مکانیکی، بعد ویدیو.
 *
 * حالا روی دسکتاپ، هر قابی که ویدیو دارد اصلاً SVG نشان نمی‌دهد؛
 * به‌جایش یک زمینه یکدست تیره می‌ماند تا ویدیو بیاید. چشم پرش
 * نمی‌بیند چون چیزی عوض نمی‌شود، فقط تصویر ظاهر می‌شود.
 *
 * اگر ویدیو خطا داد، JS کلاس `video-failed` می‌گذارد و SVG
 * برمی‌گردد — پس هیچ حالتی بدون تصویر نمی‌ماند.
 */
@media (min-width: 900px) {
  /*
   * ⚠️ نسخه ۳.۴.۱۴ — گرافیک فقط وقتی پنهان می‌شود که ویدیو واقعاً
   * ساخته شده باشد.
   *
   * قبلاً هر قابی که آدرس ویدیو داشت، گرافیکش پنهان می‌شد — حتی اگر
   * ویدیو هرگز ساخته نمی‌شد. اگر ساخت ویدیو به هر دلیلی انجام نمی‌شد
   * (اینترنت، کاهش حرکت، سهم موبایل)، قاب برای همیشه خالی می‌ماند.
   *
   * حالا ملاک `data-ikm-mounted` است که جاوااسکریپت موقع ساخت ویدیو
   * می‌گذارد. تا آن لحظه گرافیک سر جایش است، پس هیچ حالتی بدون
   * تصویر نمی‌ماند.
   */
  .ikm-slide__art[data-ikm-mounted] .ikm-slide__layer > svg { display: none; }
  .ikm-slide__art[data-ikm-mounted].video-failed .ikm-slide__layer > svg { display: block; }

  .ikm-slide__art[data-ikm-mounted] .ikm-slide__layer {
    background: linear-gradient(135deg, var(--ikm-bg-3), var(--ikm-bg-2));
  }
}

/*
 * پرده: از سمت متن (راست، چون قالب راست‌به‌چپ است) پررنگ شروع
 * می‌شود و به سمت چپ باز می‌شود تا تصویر دیده شود. با `to left`
 * فیزیکی نوشته شده، نه منطقی — جهت اینجا باید ثابت بماند حتی اگر
 * جایی از سایت به چپ‌به‌راست تغییر کند.
 */
/*
 * ⚠️ نسخه ۳.۴.۱۷ — پرده سبک‌تر شد.
 *
 * قبلاً سمت راست کاملاً مات بود (۱۰۰٪ رنگ پس‌زمینه) و تا سمت چپ
 * هم ۲۵٪ باقی می‌ماند. نتیجه‌اش این بود که ویدیو زیر یک لایه
 * خاکستری گم می‌شد — مخصوصاً نیمه راست که اصلاً دیده نمی‌شد.
 *
 * حالا حتی پررنگ‌ترین نقطه هم ۸۰٪ است نه ۱۰۰٪، و سمت چپ تقریباً
 * شفاف. تیتر همچنان خواناست چون پشت متن هنوز پرده هست، ولی ویدیو
 * در تمام عرض دیده می‌شود.
 *
 * پایین‌تر از این نرو: با پرده کمتر، تیتر تیره روی نقطه روشن ویدیو
 * ناخوانا می‌شود و همان مشکلی برمی‌گردد که از نسخه ۳.۳ داشتیم.
 */
.ikm-slide__art.is-media .ikm-slide__scrim {
  background:
    linear-gradient(
      to left,
      color-mix(in srgb, var(--ikm-bg) 80%, transparent) 0%,
      color-mix(in srgb, var(--ikm-bg) 62%, transparent) 40%,
      color-mix(in srgb, var(--ikm-bg) 22%, transparent) 75%,
      color-mix(in srgb, var(--ikm-bg) 6%, transparent) 100%
    );
}

/*
 * پشت خودِ متن یک لایه نرم اضافه تا خوانایی تیتر مستقل از روشنی
 * ویدیو تضمین شود. این کار اجازه می‌دهد پرده کلی سبک بماند.
 */
.ikm-slide__art.is-media ~ .ikm-wrap .ikm-slide__inner,
.ikm-slide__inner { text-shadow: 0 1px 14px color-mix(in srgb, var(--ikm-bg) 70%, transparent); }

/* مرورگرهای بدون color-mix: پرده ساده‌تر ولی همچنان خوانا */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .ikm-slide__art.is-media .ikm-slide__scrim {
    background: linear-gradient(to left,
      rgba(242,244,245,.8) 0%, rgba(242,244,245,.55) 45%, rgba(242,244,245,0) 100%);
  }
  .ikm-slide__inner { text-shadow: 0 1px 14px rgba(242,244,245,.7); }
}

/*
 * روی موبایل رسانه تمام‌عرض زیر متن می‌ماند، پس پرده باید عمودی
 * باشد نه افقی — وگرنه متن روی نقطه روشن تصویر می‌افتد.
 */
@media (max-width: 899px) {
  /*
   * نسخه ۳.۴.۷ — ویدیو روی موبایل دیگر پنهان نمی‌شود.
   * ساخته شدنش در home.js کنترل می‌شود (با تأخیر و بررسی سرعت
   * اینترنت)، نه با پنهان کردن در CSS — چون عنصر مخفی هم دانلود
   * می‌شود و همان هزینه را دارد بدون هیچ فایده‌ای.
   */

  .ikm-slide__art.is-media {
    display: block;
    opacity: 1;
  }
  /* موبایل: پرده عمودی، به همان نسبت سبک‌تر */
  .ikm-slide__art.is-media .ikm-slide__scrim {
    background: linear-gradient(
      to top,
      color-mix(in srgb, var(--ikm-bg) 88%, transparent) 15%,
      color-mix(in srgb, var(--ikm-bg) 58%, transparent) 58%,
      color-mix(in srgb, var(--ikm-bg) 28%, transparent) 100%
    );
  }
  /*
   * ⚠️ نسخه ۳.۴.۶ — هر سه اسلاید ویدیو دارند، ولی ویدیو فقط روی
   * دسکتاپ ساخته می‌شود (برای سرعت موبایل). پس روی موبایل هر سه
   * گرافیک SVG نشان می‌دهند و باید جای درستی بنشینند — قبلاً برای
   * این ترکیب قاعده‌ای نوشته نشده بود و گرافیک بی‌اندازه می‌ماند.
   */

  /*
   * ⚠️ نسخه ۳.۴.۲۱ — گرافیک موبایل پررنگ‌تر و بزرگ‌تر شد.
   *
   * گرافیک با شفافیت ۳۰٪ آن‌قدر کم‌رنگ بود که کاربر فکر می‌کرد قاب
   * خالی است. حالا ۶۵٪ — دیده می‌شود ولی هنوز پس‌زمینه است نه رقیب
   * متن.
   */
  .ikm-slide__art.is-media .ikm-slide__layer > svg {
    position: absolute;
    left: 50%;
    bottom: 4%;
    transform: translateX(-50%);
    width: 94%;
    height: auto;
    max-height: 70%;
    opacity: .65;
  }

  /*
   * ⚠️ نسخه ۳.۴.۲۲ — این قاعده روی موبایل جا افتاده بود.
   *
   * تا اینجا فقط دسکتاپ گرافیک را وقتی ویدیو ساخته می‌شد پنهان
   * می‌کرد. روی موبایل چنین قاعده‌ای نبود، پس اگر ویدیو می‌آمد،
   * گرافیک هم زیرش می‌ماند و دو تصویر روی هم می‌افتاد.
   *
   * تا وقتی ویدیو ساخته نشده گرافیک هست؛ به محض ساخته شدن می‌رود؛
   * اگر ویدیو شکست بخورد دوباره برمی‌گردد.
   */
  .ikm-slide__art[data-ikm-mounted] .ikm-slide__layer > svg { display: none; }
  .ikm-slide__art[data-ikm-mounted].video-failed .ikm-slide__layer > svg { display: block; }

  /* گرافیک SVG روی موبایل جا ندارد و حذف می‌شود (02-SPEC بند ۱۳) */
  .ikm-slide__art:not(.is-media) { display: none; }
}


/* ==========================================================================
   باکس‌های میان‌بر اسلاید — نسخه ۳.۴.۵

   زیر دکمه‌ها می‌نشینند و نقش راه میان‌بر به دسته یا مدل را دارند.
   عمداً کم‌رنگ‌تر از دکمه‌های اصلی‌اند تا با آن‌ها رقابت نکنند —
   دکمه اصلی همچنان باید واضح‌ترین چیز اسلاید باشد.
   ========================================================================== */

.ikm-slide__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.ikm-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ikm-tx-mute);
  background: color-mix(in srgb, var(--ikm-bg-2) 85%, transparent);
  border: 1px solid var(--ikm-line-c);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease, border-color .2s ease;
}
.ikm-chip:hover {
  color: var(--ikm-accent);
  border-color: var(--ikm-accent);
}

/* نام مدل‌ها لاتین‌اند و باید یکدست چاپ شوند */
.ikm-slide--2 .ikm-chip { font-family: var(--ikm-mono); letter-spacing: .03em; }

/* مرورگرهای بدون color-mix */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .ikm-chip { background: var(--ikm-bg-2); }
}

@media (max-width: 640px) {
  .ikm-slide__chips { margin-top: 14px; gap: 6px; }
  .ikm-chip { padding: 6px 11px; font-size: .74rem; }
}