/* Imported from: ../../sub-components/MarlaProductCard/styles.css */
/*
 * Ölçü popup'ındaki özelleştirme (option set) alanlarının stilleri.
 * PDP ile AYNI bileşenler kullanılıyor; ikas build'i CSS'i sadece @import ile
 * taşıdığı için yalnızca SEÇİM tiplerinin stilleri alınır — kazıma/tarih/dosya
 * alanları popup'ta gösterilmediği için onların CSS'i buraya çekilmez.
 */
/* Imported from: ../../components/ProductDetailOptionSet/components/OptionChoice/components/ChoiceBox/styles.css */
/* Box grid */
.cc_0gxxbhqk_product_slider .kombos-option-choice__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cc_0gxxbhqk_product_slider .kombos-option-choice__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--kombos-gray-200);
  border-radius: var(--kombos-radius);
  background: var(--kombos-white);
  color: var(--kombos-gray-700);
  cursor: pointer;
  transition: border-color 0.15s;
}

.cc_0gxxbhqk_product_slider .kombos-option-choice__box:hover {
  border-color: var(--kombos-gray-400);
}

.cc_0gxxbhqk_product_slider .kombos-option-choice__box--selected {
  border-color: var(--kombos-gray-900);
  background: var(--kombos-gray-900);
  color: var(--kombos-white);
}

.cc_0gxxbhqk_product_slider .kombos-option-choice__box-price {
  color: var(--kombos-gray-500);
}

.cc_0gxxbhqk_product_slider .kombos-option-choice__box--selected .kombos-option-choice__box-price {
  color: var(--kombos-white);
}

/* End import: ../../components/ProductDetailOptionSet/components/OptionChoice/components/ChoiceBox/styles.css */
/* Imported from: ../../components/ProductDetailOptionSet/components/OptionChoice/components/ChoiceSelect/styles.css */
/* Checklist (multi-select) */
.cc_0gxxbhqk_product_slider .kombos-option-choice__checklist {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid var(--kombos-gray-200);
  border-radius: var(--kombos-radius);
  padding: 0.5rem;
  max-height: 15rem;
  overflow-y: auto;
}

.cc_0gxxbhqk_product_slider .kombos-option-choice__checklist--error {
  border-color: var(--kombos-error);
}

.cc_0gxxbhqk_product_slider .kombos-option-choice__checklist-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: var(--kombos-radius);
  cursor: pointer;
  transition: background-color 0.15s;
}

.cc_0gxxbhqk_product_slider .kombos-option-choice__checklist-row:hover {
  background-color: var(--kombos-gray-50);
}

.cc_0gxxbhqk_product_slider .kombos-option-choice__checklist-price {
  color: var(--kombos-gray-500);
  margin-left: auto;
}

/* ===== Özel açılır kutu (canlıdaki ölçüler, 1440'ta ölçüldü) =====
   tetikleyici 40px · 1px #E5E7EB · köşe 0 · iç boşluk 8/12 · sağda chevron */
.cc_0gxxbhqk_product_slider .kombos-choice-select {
  position: relative;
  width: 100%;
}

.cc_0gxxbhqk_product_slider .kombos-choice-select__trigger {
  align-items: center;
  background: var(--kombos-white);
  border: 1px solid var(--kombos-gray-200);
  color: var(--kombos-gray-900);
  cursor: pointer;
  display: flex;
  font-size: 0.875rem;
  gap: 0.5rem;
  justify-content: space-between;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  text-align: left;
  transition: border-color 0.15s ease;
  width: 100%;
}

.cc_0gxxbhqk_product_slider .kombos-choice-select__trigger:hover, .cc_0gxxbhqk_product_slider .kombos-choice-select[data-open="true"] .kombos-choice-select__trigger {
  border-color: var(--kombos-gray-500);
}

.cc_0gxxbhqk_product_slider .kombos-choice-select__trigger--error {
  border-color: var(--kombos-error);
}

.cc_0gxxbhqk_product_slider .kombos-choice-select__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc_0gxxbhqk_product_slider .kombos-choice-select__value--placeholder {
  color: var(--kombos-gray-400);
}

.cc_0gxxbhqk_product_slider .kombos-choice-select__caret {
  color: var(--kombos-gray-700);
  flex-shrink: 0;
  font-size: 1rem;
  transition: transform 0.2s ease;
}

.cc_0gxxbhqk_product_slider .kombos-choice-select[data-open="true"] .kombos-choice-select__caret {
  transform: rotate(180deg);
}

.cc_0gxxbhqk_product_slider .kombos-choice-select__panel {
  background: var(--kombos-white);
  border: 1px solid var(--kombos-gray-200);
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  left: 0;
  max-height: 15rem;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: var(--kombos-z-dropdown);
}

.cc_0gxxbhqk_product_slider .kombos-choice-select__item {
  background: none;
  border: 0;
  color: var(--kombos-gray-900);
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.25rem;
  padding: 0.625rem 0.75rem;
  text-align: left;
  transition: background-color 0.15s ease;
  width: 100%;
}

.cc_0gxxbhqk_product_slider .kombos-choice-select__item:hover {
  background-color: var(--kombos-gray-50);
}

/* Seçili satır — marka bordosu, köşe yok (proje kuralı). */
.cc_0gxxbhqk_product_slider .kombos-choice-select__item--selected {
  background-color: var(--kombos-gray-50);
  color: var(--marla-primary);
  font-weight: 600;
}

/* End import: ../../components/ProductDetailOptionSet/components/OptionChoice/components/ChoiceSelect/styles.css */
/* Imported from: ../../components/ProductDetailOptionSet/components/OptionChoice/components/ChoiceSwatch/styles.css */
/* Swatch grid */
.cc_0gxxbhqk_product_slider .kombos-option-choice__swatch-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

/* Individual swatch item (button + price) */
.cc_0gxxbhqk_product_slider .kombos-option-choice__swatch-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

/* Swatch button — square like Badge */
.cc_0gxxbhqk_product_slider .kombos-option-choice__swatch-btn {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--kombos-gray-200);
  border-radius: var(--kombos-radius);
  padding: 0.125rem;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kombos-white);
  position: relative;
  transition: border-color 0.15s;
}

.cc_0gxxbhqk_product_slider .kombos-option-choice__swatch-btn:hover:not(.kombos-option-choice__swatch-btn--selected) {
  border-color: var(--kombos-gray-400);
}

.cc_0gxxbhqk_product_slider .kombos-option-choice__swatch-btn--selected {
  border-color: var(--kombos-gray-900);
}

/* Color fill */
.cc_0gxxbhqk_product_slider .kombos-option-choice__swatch-color {
  width: 100%;
  height: 100%;
  border-radius: var(--kombos-radius);
}

/* Image inside swatch */
.cc_0gxxbhqk_product_slider .kombos-option-choice__swatch-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--kombos-radius);
}

/* Eye icon overlay on image swatches */
.cc_0gxxbhqk_product_slider .kombos-option-choice__swatch-eye {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  border-radius: var(--kombos-radius);
  opacity: 0;
  transition: opacity 0.15s;
  cursor: pointer;
  font-size: 1rem;
  color: var(--kombos-white);
}

.cc_0gxxbhqk_product_slider .kombos-option-choice__swatch-btn:hover .kombos-option-choice__swatch-eye {
  opacity: 1;
}

/* Footer row: checkbox + price for image swatches */
.cc_0gxxbhqk_product_slider .kombos-option-choice__swatch-footer {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Price below swatch */
.cc_0gxxbhqk_product_slider .kombos-option-choice__swatch-price {
  color: var(--kombos-gray-500);
  text-align: center;
}

/* End import: ../../components/ProductDetailOptionSet/components/OptionChoice/components/ChoiceSwatch/styles.css */
/* Imported from: ../Select/styles.css */
/* ===== Select ===== */
.cc_0gxxbhqk_product_slider .kombos-select-wrap {
  width: 100%;
  position: relative;
  display: inline-flex;
  align-items: center;
}

.cc_0gxxbhqk_product_slider .kombos-select {
  appearance: none;
  width: 100%;
  background: var(--kombos-white);
  border: 1px solid var(--kombos-gray-200);
  border-radius: var(--kombos-radius);
  color: var(--kombos-gray-900);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.cc_0gxxbhqk_product_slider .kombos-select:hover {
  border-color: var(--kombos-gray-300);
}

/* Sizes — match Button padding + extra right space for icon */
.cc_0gxxbhqk_product_slider .kombos-select--xs {
  padding: 0.4375rem 2rem 0.4375rem 0.9375rem;
  min-height: 2.25rem;
}

.cc_0gxxbhqk_product_slider .kombos-select--s {
  padding: 0.5625rem 2.25rem 0.5625rem 1.1875rem;
  min-height: 2.75rem;
}

.cc_0gxxbhqk_product_slider .kombos-select--m {
  padding: 0.6875rem 2.5rem 0.6875rem 1.4375rem;
  min-height: 3.375rem;
}

/* Caret icon */
.cc_0gxxbhqk_product_slider .kombos-select__icon {
  position: absolute;
  right: 0.75rem;
  pointer-events: none;
  color: var(--kombos-gray-900);
  font-size: 1rem;
  transition: opacity 0.15s ease;
}

/* Clear button */
.cc_0gxxbhqk_product_slider .kombos-select__clear {
  position: absolute;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  color: var(--kombos-gray-700);
  background-color: var(--kombos-white);
  font-size: 1rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* On hover: show clear button, hide caret */
.cc_0gxxbhqk_product_slider .kombos-select-wrap:hover .kombos-select__clear {
  opacity: 1;
}

.cc_0gxxbhqk_product_slider .kombos-select-wrap:hover .kombos-select--clearable ~ .kombos-select__icon {
  opacity: 0;
}

/* --- Status (standalone + inherited from FormItem) --- */
.cc_0gxxbhqk_product_slider [data-state="error"] .kombos-select {
  border-color: var(--kombos-error);
}

.cc_0gxxbhqk_product_slider [data-state="error"] .kombos-select:hover {
  border-color: var(--kombos-error);
}

.cc_0gxxbhqk_product_slider [data-state="success"] .kombos-select {
  border-color: var(--kombos-success);
}

.cc_0gxxbhqk_product_slider [data-state="success"] .kombos-select:hover {
  border-color: var(--kombos-success);
}

/* --- Disabled state --- */
.cc_0gxxbhqk_product_slider .kombos-select:disabled {
  background: var(--kombos-gray-50);
  border-color: var(--kombos-gray-200);
  color: var(--kombos-gray-300);
  cursor: not-allowed;
}

.cc_0gxxbhqk_product_slider .kombos-select:disabled:hover {
  border-color: var(--kombos-gray-200);
}

.cc_0gxxbhqk_product_slider .kombos-select:disabled ~ .kombos-select__icon {
  color: var(--kombos-gray-300);
}

/* End import: ../Select/styles.css */
/* Imported from: ../MarlaTagBadges/styles.css */
/*
 * Köşe rozetleri — ürün kartı ve ürün detay galerisi ortak stili.
 *
 * Rozet ölçüleri canlıdan (2026-08-12, /cocuk kartı): 10px/500 lh15, beyaz
 * metin, zemin #a84e47, iç boşluk 5px, harf aralığı -0.25px, köşe 0,
 * kenarlık YOK. PDP'de standart 12px ve 75×23 kutu (mockup). Buradaki
 * değerlerin hepsi yalnızca FALLBACK — gerçek değerler proptan gelir.
 */

.cc_0gxxbhqk_product_slider .marla-tag-badges {
  /*
   * Yığın genişliği = en geniş rozetin genişliği; `align-items: stretch` ile
   * aynı köşedeki TÜM rozetler o genişliğe uzar. Böylece "HIZLI KARGO" ile
   * "ÇOK SATAN" harf sayıları farklı olsa da aynı kutuda görünür ve kenarları
   * hizalanır.
   */
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: absolute;
  top: var(--tag-badge-offset, 0.75rem);
  width: min-content;
  z-index: 2;
}

/* Tek satır modu: metin kırılmaz, yığın en uzun metne göre genişler. */
.cc_0gxxbhqk_product_slider .marla-tag-badges--one-line {
  width: max-content;
}

.cc_0gxxbhqk_product_slider .marla-tag-badges--one-line .marla-tag-badges__item {
  white-space: nowrap;
}

.cc_0gxxbhqk_product_slider .marla-tag-badges--left {
  left: var(--tag-badge-offset, 0.75rem);
}

.cc_0gxxbhqk_product_slider .marla-tag-badges--right {
  right: var(--tag-badge-offset, 0.75rem);
}

.cc_0gxxbhqk_product_slider .marla-tag-badges__item {
  align-items: center;
  background: var(--tag-badge-bg, var(--marla-primary-soft));
  /* Kenarlık varsayılanda YOK (canlıda da yok); editörden renk verilince
     kalınlık değişkeni 1px'e çıkar ve çerçeve görünür. */
  border: var(--tag-badge-border-w, 0) solid
    var(--tag-badge-border, transparent);
  border-radius: var(--tag-badge-radius, var(--kombos-radius));
  /* En az genişlik/yükseklik DIŞ kutuyu bağlasın: mockup "75×23" derken
     kenarlık ve iç boşluk dahil kutuyu kastediyor. Tema global bir
     `box-sizing` reset'i tanımlamadığı için burada açıkça veriliyor. */
  box-sizing: border-box;
  color: var(--tag-badge-color, var(--kombos-white));
  display: flex;
  font-size: var(--tag-badge-fs, 0.625rem);
  font-weight: var(--tag-badge-fw, 500);
  justify-content: center;
  letter-spacing: var(--marla-tracking-tight);
  line-height: 1.5;
  min-height: var(--tag-badge-min-h, auto);
  min-width: var(--tag-badge-min-w, auto);
  padding: var(--tag-badge-py, 0.3125rem) var(--tag-badge-px, 0.3125rem);
  text-align: center;
  /*
   * Genişliği rozetin kendisi DEĞİL, yığın belirler (yukarı bak). Kutu yığına
   * uzar; canlıdaki gibi "Çok Satan" iki satıra kırılıp kare kutu olur, tek
   * satır seçilirse tek satırda kalır.
   *
   * `word-break: normal` ŞART: global.css'teki `* { word-break: break-word }`
   * Chrome'da min-content'i tek HARFE düşürüyor (18.9px genişlik, 131px
   * yükseklik ölçüldü). Normale çekilince kırılma kelime sınırında olur.
   */
  word-break: normal;
}

.cc_0gxxbhqk_product_slider .marla-tag-badges__item--alt {
  background: var(--tag-badge-alt-bg, var(--kombos-gray-900));
  border-color: var(--tag-badge-alt-border, transparent);
  border-width: var(--tag-badge-alt-border-w, 0);
  color: var(--tag-badge-alt-color, var(--kombos-white));
}

/* End import: ../MarlaTagBadges/styles.css */

/*
 * Marla ürün kartı.
 *
 * Mockup'ta "dinamik olsun" denen her değer bir CSS değişkeninden okunur;
 * değişkenler parent section'ın propları tarafından inline style ile set edilir.
 * Buradaki değerler yalnızca FALLBACK (mockup'taki standart ölçüler).
 */

.cc_0gxxbhqk_product_slider .marla-card {
  display: flex;
  flex-direction: column;
  position: relative;
}

/* --- Görsel ---
   Canlıdan ölçüldü: kare, zemin #dddddd %20 opaklıkta, görsel `cover`.
   (rgba overlay değeri olduğu için token'a bağlanmıyor.) */
.cc_0gxxbhqk_product_slider .marla-card__media {
  aspect-ratio: var(--card-media-ratio, 1 / 1);
  background: var(--card-media-bg, rgba(222, 222, 222, 0.2));
  overflow: hidden;
  position: relative;
}

.cc_0gxxbhqk_product_slider .marla-card__media-link {
  display: block;
  height: 100%;
  width: 100%;
}

.cc_0gxxbhqk_product_slider .marla-card__img {
  height: 100%;
  object-fit: var(--card-media-fit, cover);
  width: 100%;
}

/* Hover'da ikinci görsele geçiş */
.cc_0gxxbhqk_product_slider .marla-card__img--hover {
  inset: 0;
  opacity: 0;
  position: absolute;
  transition: opacity 0.3s ease;
}

.cc_0gxxbhqk_product_slider .marla-card__media:hover .marla-card__img--hover {
  opacity: 1;
}

.cc_0gxxbhqk_product_slider .marla-card__img--placeholder {
  align-items: center;
  color: var(--kombos-gray-300);
  display: flex;
  font-size: var(--card-placeholder-fs, 3rem);
  justify-content: center;
}

.cc_0gxxbhqk_product_slider .marla-card__out-of-stock {
  background: rgba(0, 0, 0, 0.55);
  color: var(--kombos-white);
  font-size: var(--card-out-of-stock-fs, 0.75rem);
  inset: auto 0 0 0;
  padding: 0.375rem;
  position: absolute;
  text-align: center;
}

/* Rozetler ortak bileşende: ../MarlaTagBadges (kart ve PDP aynı görünsün diye). */

/* --- Favori --- */
.cc_0gxxbhqk_product_slider .marla-card__favorite {
  background: none;
  border: 0;
  /* Canlıda boş kalp #1D1D1B (SVG'ye satır içi yazılmış). */
  color: var(--card-favorite-color, var(--kombos-gray-900));
  cursor: pointer;
  /* Canlıda kalp 23×20px ve görselin 12px içinden başlıyor. */
  font-size: var(--card-favorite-fs, 1.25rem);
  line-height: 0;
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  z-index: 2;
}

/*
 * Favorideyken dolu kalp KIRMIZI — 2026-08-14'te canlıdaki favori kartından
 * ölçüldü: boş kalp `#1D1D1B`, dolu kalp **`#C5143D`** (23×20px).
 */
.cc_0gxxbhqk_product_slider .marla-card__favorite--active {
  color: var(--card-favorite-active, #c5143d);
}

/* Sağ üstte rozet varsa çakışmasın diye sağ alta kayar (marka talebi). */
.cc_0gxxbhqk_product_slider .marla-card__favorite--bottom {
  bottom: 0.75rem;
  top: auto;
}

/* --- Gövde ---
   Canlıdan ölçüldü: ortalanmış kolon, iç boşluk 8px 16px, öğe aralığı 8px. */
.cc_0gxxbhqk_product_slider .marla-card__body {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  text-align: center;
}

/* Canlıda 16px/500, satır aralığı 24px, iki satırda kırpılıyor. */
.cc_0gxxbhqk_product_slider .marla-card__name {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--card-name-clamp, 2);
  color: var(--card-name-color, var(--kombos-gray-900));
  display: -webkit-box;
  font-size: var(--card-name-fs, 1rem);
  font-weight: var(--card-name-fw, 500);
  letter-spacing: var(--marla-tracking-tight);
  line-height: 1.5;
  overflow: hidden;
  text-decoration: none;
}

/*
 * İsim altı blok (etiketler + taksit). Gövdenin ALTINA yaslanır: kart, satırın
 * en uzun kartı kadar uzadığında artan boşluk adın altına düşer, bu blok fiyat
 * barına yapışık kalır. Böylece komşu kartın adı iki satır olsa bile etiket,
 * taksit ve sepete ekle satırları aynı hizada durur — ama satırdaki adların
 * hepsi tek satırsa kart zaten uzamadığı için hiç fazladan boşluk oluşmaz.
 * (Ada `min-height` ile 2 satır ayırmak da hizalıyordu ama tek satırlık
 * satırlarda boşuna yer harcıyordu; o yüzden kaldırıldı.)
 */
.cc_0gxxbhqk_product_slider .marla-card__meta {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
}

/* Mockup'ta açık zeminli, kenarlıklı, koyu yazılı etiket. */
.cc_0gxxbhqk_product_slider .marla-card__pill {
  background: var(--card-pill-bg, var(--kombos-gray-50));
  border: 1px solid var(--card-pill-border, var(--kombos-gray-200));
  color: var(--card-pill-color, var(--kombos-gray-900));
  font-size: var(--card-pill-fs, 0.8125rem);
  font-weight: var(--card-pill-fw, 500);
  letter-spacing: var(--marla-tracking-tight);
  padding: 0.25rem 0.625rem;
}

/*
 * İsim altındaki iki satırın görünümü editörden seçilir (ENUM):
 * "Kutulu" = zemin + çerçeve + iç boşluk, "Düz Yazı" = sade metin.
 * Varsayılan mockup'taki gibi: üstteki etiket kutulu, promo düz yazı.
 * Böylece marka ileride ikisini de kutulu ya da ikisini de düz yapabilir.
 */
.cc_0gxxbhqk_product_slider .marla-card__pill--plain {
  background: none;
  border: 0;
  padding: 0;
}

/* Mockup: 14px standart, dinamik. Renk canlıdan: bordo #450017. */
.cc_0gxxbhqk_product_slider .marla-card__promo {
  color: var(--card-promo-color, var(--marla-primary));
  font-size: var(--card-promo-fs, 0.875rem);
  font-weight: var(--card-promo-fw, 500);
  letter-spacing: var(--marla-tracking-tight);
  line-height: 1.5;
}

.cc_0gxxbhqk_product_slider .marla-card__promo--box {
  background: var(--card-promo-bg, var(--kombos-gray-50));
  border: var(--card-promo-border-w, 0) solid
    var(--card-promo-border, transparent);
  padding: 0.25rem 0.625rem;
}

/* 3. isim altı etiketi — 1 ve 2 ile aynı yetenekler, ayrı değişkenler. */
.cc_0gxxbhqk_product_slider .marla-card__label3 {
  color: var(--card-label3-color, var(--marla-primary));
  font-size: var(--card-label3-fs, 0.875rem);
  font-weight: var(--card-label3-fw, 500);
  letter-spacing: var(--marla-tracking-tight);
  line-height: 1.5;
}

.cc_0gxxbhqk_product_slider .marla-card__label3--box {
  background: var(--card-label3-bg, var(--kombos-gray-50));
  border: var(--card-label3-border-w, 0) solid
    var(--card-label3-border, transparent);
  padding: 0.25rem 0.625rem;
}

/* Taksit satırı — görselli talepte standart 13px.
   Ağırlık/renk/satır yüksekliği canlıdan: 500, #717171, lh 1. */
.cc_0gxxbhqk_product_slider .marla-card__installment {
  color: var(--card-installment-color, var(--kombos-gray-500));
  font-size: var(--card-installment-fs, 0.8125rem);
  font-weight: var(--card-installment-fw, 500);
  letter-spacing: var(--marla-tracking-tight);
  line-height: 1;
}

/* --- Fiyat barı --- */
/*
 * Fiyat barı — indirimli/indirimsiz kartlarda AYNI yükseklikte durmalı.
 * İndirimsizde içerik tek satır (45px FAB), indirimlide iki satırlık fiyat
 * yığını (~50px) olduğu için bar kendiliğinden 2–5px büyüyordu ve satır
 * hizası bozuluyordu. Taban yükseklik, olabilecek EN UZUN içerikten
 * hesaplanır; ölçüler proptan değişirse kendiliğinden güncellenir.
 */
.cc_0gxxbhqk_product_slider .marla-card__price-bar {
  align-items: center;
  background: var(--card-pricebar-bg, var(--kombos-gray-50));
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  margin-top: auto;
  min-height: calc(
    max(
      var(--card-fab-size, 2.8125rem),
      var(--card-discount-size, 2.8125rem),
      var(--card-price-old-fs, 1.125rem) * 1.2 + var(--card-price-fs, 1.5rem) *
        1.2
    ) + 1rem
  );
  padding: 0.5rem 0.75rem;
}

.cc_0gxxbhqk_product_slider .marla-card__prices {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  min-width: 0;
}

/* Mockup: kutucuk 45×45px, font-size 20px — ikisi de dinamik */
.cc_0gxxbhqk_product_slider .marla-card__discount-box {
  align-items: center;
  align-self: stretch;
  background: var(--card-discount-bg, var(--marla-primary-soft));
  color: var(--card-discount-color, var(--kombos-white));
  display: flex;
  flex-shrink: 0;
  font-size: var(--card-discount-fs, 1.25rem);
  font-weight: var(--card-discount-fw, 700);
  height: var(--card-discount-size, 2.8125rem);
  justify-content: center;
  letter-spacing: var(--marla-tracking-tight);
  width: var(--card-discount-size, 2.8125rem);
}

.cc_0gxxbhqk_product_slider .marla-card__price-stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Mockup: üstü çizili 18px */
.cc_0gxxbhqk_product_slider .marla-card__price-old {
  color: var(--card-price-old-color, var(--kombos-gray-400));
  font-size: var(--card-price-old-fs, 1.125rem);
  font-weight: var(--card-price-old-fw, 400);
  letter-spacing: var(--marla-tracking-tight);
  line-height: 1.2;
  text-decoration: line-through;
}

/* Mockup: indirimli fiyat 24px */
.cc_0gxxbhqk_product_slider .marla-card__price-final {
  color: var(--card-price-color, var(--marla-accent));
  font-size: var(--card-price-fs, 1.5rem);
  font-weight: var(--card-price-fw, 700);
  letter-spacing: var(--marla-tracking-tight);
  line-height: 1.2;
}

/* Mockup: indirim yoksa 25px siyah */
.cc_0gxxbhqk_product_slider .marla-card__price-plain {
  color: var(--card-price-plain-color, var(--kombos-gray-900));
  font-size: var(--card-price-plain-fs, 1.5625rem);
  font-weight: var(--card-price-fw, 700);
  letter-spacing: var(--marla-tracking-tight);
  line-height: 1.2;
}

/* --- Sepete ekle FAB ---
   Mockup: 45×45px yuvarlak, içi sepet + artı; sepetteyken tik.

   RENK: mockup'ta daire BEYAZ DEĞİL — fiyat barıyla aynı gri, çevresinde
   kenarlık da yok. Daireyi görünür kılan tek şey sağ-alta düşen yumuşak
   gölge. Bu yüzden dolgu varsayılanı bar rengine bağlanır; bar rengi
   editörden değişirse buton da onunla birlikte değişir.

   GÖLGE (2026-08-18'de mockup 4'ten ölçüldü): daire yarıçapı 24px, gölge
   0°–90° arasında (sağ + alt) görünüyor, sol/üstte yok; kenarda %10, 1px
   dışarıda tepe %18, ~6px sonra sıfır. Tarayıcıda üretilen adayların
   normalize koyuluk profilleri mockup'ınkiyle karşılaştırıldı; `4px 4px 4px
   rgba(0,0,0,0.2)` her açıda (0/45/90/135/180) birebir örtüştü — RMS 0.012,
   denenen 108 kombinasyonun en iyisi. Değerler prop'tan gelir. */
.cc_0gxxbhqk_product_slider .marla-card__fab {
  align-items: center;
  background: var(--card-fab-bg, var(--card-pricebar-bg, var(--kombos-gray-50)));
  border: 1px solid var(--card-fab-border, transparent);
  border-radius: 50%;
  box-shadow: var(--card-fab-shadow-x, 4px) var(--card-fab-shadow-y, 4px)
    var(--card-fab-shadow-blur, 4px)
    var(--card-fab-shadow-color, rgba(0, 0, 0, 0.2));
  color: var(--card-fab-color, var(--kombos-gray-900));
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  font-size: var(--card-fab-icon-fs, 1.375rem);
  height: var(--card-fab-size, 2.8125rem);
  justify-content: center;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
  width: var(--card-fab-size, 2.8125rem);
}

.cc_0gxxbhqk_product_slider .marla-card__fab:hover:not(:disabled) {
  background: var(--card-fab-hover-bg, var(--kombos-gray-100));
}

.cc_0gxxbhqk_product_slider .marla-card__fab:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/*
 * "Sepette" durumu. Mockup 4'te tikli daire artılı daireyle AYNI görünüyor —
 * dolgu da, gölge de değişmiyor, yalnızca ikon tike dönüyor. Bu yüzden
 * varsayılanlar normal butonun renklerine düşer; merchant dolgulu bir vurgu
 * isterse editörden "Eklendi Arka Plan"ı değiştirir.
 */
.cc_0gxxbhqk_product_slider .marla-card__fab--added {
  background: var(
    --card-fab-added-bg,
    var(--card-fab-bg, var(--card-pricebar-bg, var(--kombos-gray-50)))
  );
  /* Kenarlık dolgudan BAĞIMSIZ: "eklendi" dolgusu beyaz kaldığında daire
     çerçevesini kaybetmesin diye normal kenarlığa düşer. Dolgulu bir vurgu
     isteyen merchant "Eklendi Kenarlık" propunu da aynı renge çeker. */
  border-color: var(
    --card-fab-added-border,
    var(--card-fab-border, transparent)
  );
  color: var(
    --card-fab-added-color,
    var(--card-fab-color, var(--kombos-gray-900))
  );
}

/* Popup içindeki özelleştirme alanları — varyant rozetlerinin altında. */
.cc_0gxxbhqk_product_slider .marla-card__options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.cc_0gxxbhqk_product_slider .marla-card__options:first-child {
  margin-top: 0;
}

/*
 * Popup içinde açılır liste MUTLAK konumlanamaz: `.kombos-modal__body`
 * `overflow-y: auto` olduğu için paneli kırpıyordu (liste görünmüyordu).
 * Burada akışın içinde açılır, modal kendi içinde kayar.
 */
.cc_0gxxbhqk_product_slider .marla-card__options .kombos-choice-select__panel {
  box-shadow: none;
  margin-top: 0.25rem;
  max-height: 12rem;
  position: static;
}

/*
 * Dar sütunlarda fiyat satırı kırılmasın (1280px'te "₺" ile tutar alt alta
 * düşüyordu). Fiyat asla sarmaz; sütun daralınca satır kırmak yerine ÖLÇEKLENİR:
 * prop değeri üst sınırdır, gerçek boyut kart genişliğine göre hesaplanır.
 * (Canlıda slider fiyatı 20px ve hiç kırılmıyor; bizde mockup gereği 25px.)
 */
.cc_0gxxbhqk_product_slider .marla-card {
  container-type: inline-size;
}

.cc_0gxxbhqk_product_slider .marla-card__price-plain, .cc_0gxxbhqk_product_slider .marla-card__price-final, .cc_0gxxbhqk_product_slider .marla-card__price-old {
  white-space: nowrap;
}

.cc_0gxxbhqk_product_slider .marla-card__price-plain {
  font-size: min(var(--card-price-plain-fs, 1.5625rem), 11cqi);
}

.cc_0gxxbhqk_product_slider .marla-card__price-final {
  font-size: min(var(--card-price-fs, 1.5rem), 11cqi);
}

.cc_0gxxbhqk_product_slider .marla-card__price-old {
  font-size: min(var(--card-price-old-fs, 1.125rem), 8cqi);
}

/*
 * İndirimli düzende satırda ayrıca 45px'lik %-kutusu ve üstü çizili fiyat var.
 * 1440'ta (kart ~238px) mockup ölçüleri sığıyor, bu yüzden orada dokunulmaz;
 * kart 220px'in altına inince (1280 ve dar ekranlar) daha sert ölçeklenir.
 */
/* 9cqi: 238px'lik kartta 6 haneli indirimli fiyatın bile sığdığı en büyük
   değer (ölçüldü); 5 haneli fiyatlarda mockup boyutuna çok yakın kalır. */
.cc_0gxxbhqk_product_slider .marla-card__price-bar--discounted .marla-card__price-final {
  font-size: min(var(--card-price-fs, 1.5rem), 9cqi);
}

.cc_0gxxbhqk_product_slider .marla-card__price-bar--discounted .marla-card__price-old {
  font-size: min(var(--card-price-old-fs, 1.125rem), 7.5cqi);
}

@container (max-width: 220px) {
  .cc_0gxxbhqk_product_slider .marla-card__price-bar--discounted .marla-card__price-final {
    font-size: min(var(--card-price-fs, 1.5rem), 7cqi);
  }

  .cc_0gxxbhqk_product_slider .marla-card__price-bar--discounted .marla-card__price-old {
    font-size: min(var(--card-price-old-fs, 1.125rem), 5.4cqi);
  }

  .cc_0gxxbhqk_product_slider .marla-card__price-bar--discounted .marla-card__discount-box {
    font-size: min(var(--card-discount-fs, 1.25rem), 8cqi);
    height: min(var(--card-discount-size, 2.8125rem), 20cqi);
    width: min(var(--card-discount-size, 2.8125rem), 20cqi);
  }
}

/*
 * Kart, ızgara satırının tamamını kaplar; gövde `flex-grow: 1`, fiyat barı ve
 * `__meta` bloğu `margin-top: auto` olduğu için artan boşluk hep ADIN ALTINA
 * düşer. Satırdaki adların hepsi tek satırsa kart uzamaz, dolayısıyla hiç
 * boşluk oluşmaz; biri iki satıra inince komşusundaki etiket/taksit/fiyat
 * satırları kendiliğinden hizalanır. Hiçbir yerde sabit yükseklik YOK.
 */
.cc_0gxxbhqk_product_slider .marla-card {
  height: 100%;
}

@media (max-width: 1023px) {
  /*
   * Sepete ekle butonu mobilde küçülür. Mockup'taki 45px masaüstü ölçüsü;
   * iki sütunlu mobil ızgarada kart ~180px olduğu için bar'ın yarısını
   * FAB + indirim kutusu yiyor, fiyat okunmaz hale geliyordu. Brief'te mobil
   * için ölçü YOK, "boyutları dinamik olsun" deniyor — bu yüzden ayrı prop.
   */
  .cc_0gxxbhqk_product_slider .marla-card__fab {
    font-size: var(--card-fab-icon-fs-m, 1.125rem);
    height: var(--card-fab-size-m, 2.25rem);
    width: var(--card-fab-size-m, 2.25rem);
  }

  /* Bar yüksekliği FAB'ın masaüstü ölçüsünden değil, mobil ölçüsünden
     türesin — yoksa küçülen butonun altında boş yer kalır. */
  .cc_0gxxbhqk_product_slider .marla-card__price-bar {
    min-height: calc(
      max(
        var(--card-fab-size-m, 2.25rem),
        var(--card-discount-size, 2.8125rem),
        var(--card-price-old-fs, 1.125rem) * 1.2 + var(--card-price-fs, 1.5rem) *
          1.2
      ) + 1rem
    );
  }
}

/* End import: ../../sub-components/MarlaProductCard/styles.css */
/* Sub-component stilleri. ikas build'i bunlari SADECE @import ile
   dahil ediyor; import yoksa CSS hic yayinlanmiyor. */
/* Imported from: ../../sub-components/Button/styles.css */
/* ===== Button ===== */

/* --- Base --- */
.cc_0gxxbhqk_product_slider .kombos-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--kombos-radius);
  gap: 0.5rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.cc_0gxxbhqk_product_slider .kombos-btn:disabled {
  cursor: not-allowed;
}

/* --- Spinner --- */
.cc_0gxxbhqk_product_slider .kombos-btn__spinner {
  animation: cc_0gxxbhqk_product_slider_kombos-spin 1s linear infinite;
}

@keyframes cc_0gxxbhqk_product_slider_kombos-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* --- Icon --- */
.cc_0gxxbhqk_product_slider .kombos-btn__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.cc_0gxxbhqk_product_slider .kombos-btn--xs .kombos-btn__icon {
  font-size: 1rem;
}

.cc_0gxxbhqk_product_slider .kombos-btn--s .kombos-btn__icon {
  font-size: 1.25rem;
}

.cc_0gxxbhqk_product_slider .kombos-btn--m .kombos-btn__icon {
  font-size: 1.5rem;
}

/* --- Sizes --- */
.cc_0gxxbhqk_product_slider .kombos-btn--xs {
  padding: 0.4375rem 0.9375rem;
  min-height: 2.25rem;
}

.cc_0gxxbhqk_product_slider .kombos-btn--s {
  padding: 0.625rem 1.5rem;
  min-height: 2.5625rem;
}

.cc_0gxxbhqk_product_slider .kombos-btn--m {
  padding: 0.6875rem 1.4375rem;
  min-height: 3.375rem;
}

/*
 * --- Primary ---
 * marla.com'da birincil buton bordo (#450017), yazı 14px/500 beyaz,
 * iç boşluk 10px 24px, yükseklik ~41px, köşe keskin, 1px açık pembe kenarlık.
 * (404, sepet "Satın Al" ve ürün detay "Yorum Ekle" butonlarından ölçüldü.)
 */
.cc_0gxxbhqk_product_slider .kombos-btn--primary {
  background-color: var(--marla-primary);
  border-color: var(--marla-primary-border);
  color: var(--kombos-white);
}

.cc_0gxxbhqk_product_slider .kombos-btn--primary:hover:not(:disabled) {
  opacity: 0.85;
}

.cc_0gxxbhqk_product_slider .kombos-btn--primary:disabled {
  background-color: var(--kombos-gray-300);
  border-color: var(--kombos-gray-300);
  color: var(--kombos-gray-50);
}

/* --- Secondary --- */
.cc_0gxxbhqk_product_slider .kombos-btn--secondary {
  background-color: var(--kombos-white);
  border-color: var(--kombos-gray-200);
  color: var(--kombos-gray-900);
}

.cc_0gxxbhqk_product_slider .kombos-btn--secondary:hover:not(:disabled) {
  border-color: var(--kombos-gray-300);
}

.cc_0gxxbhqk_product_slider .kombos-btn--secondary:disabled {
  background-color: var(--kombos-gray-50);
  border-color: var(--kombos-gray-200);
  color: var(--kombos-gray-300);
}

/* --- Dangerous --- */
.cc_0gxxbhqk_product_slider .kombos-btn--dangerous {
  background-color: var(--kombos-error);
  border-color: var(--kombos-error);
  color: var(--kombos-white);
}

.cc_0gxxbhqk_product_slider .kombos-btn--dangerous:hover:not(:disabled) {
  background-color: var(--kombos-error-hover);
  border-color: var(--kombos-error-hover);
}

.cc_0gxxbhqk_product_slider .kombos-btn--dangerous:disabled {
  background-color: var(--kombos-gray-300);
  border-color: var(--kombos-gray-300);
  color: var(--kombos-gray-50);
}

/* End import: ../../sub-components/Button/styles.css */
/* Imported from: ../../sub-components/SliderArrow/styles.css */
/* ===== Slider Arrow =====
 * marla.com hero slider'ından ölçüldü: 40×40 tam daire, DOLU beyaz zemin,
 * kenarlık yok, ikon 24px, hafif gölge. (Yarıçap kuralının kasıtlı istisnası —
 * daire olması gereken elemanlardan biri.)
 */
.cc_0gxxbhqk_product_slider .kombos-slider-arrow {
  align-items: center;
  background: var(--kombos-white);
  border: none;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  color: var(--kombos-gray-900);
  cursor: pointer;
  display: flex;
  font-size: 1.5rem;
  height: 2.5rem;
  justify-content: center;
  padding: 0;
  transition: background 0.2s;
  width: 2.5rem;
}

.cc_0gxxbhqk_product_slider .kombos-slider-arrow:hover:not(:disabled) {
  background: var(--kombos-gray-50);
}

.cc_0gxxbhqk_product_slider .kombos-slider-arrow:disabled {
  cursor: default;
  color: var(--kombos-gray-400);
}

/* End import: ../../sub-components/SliderArrow/styles.css */
/* Imported from: ../../sub-components/SpinnerIcon/styles.css */
.cc_0gxxbhqk_product_slider .kombos-spinner {
  animation: cc_0gxxbhqk_product_slider_kombos-spin 1s linear infinite;
}

@keyframes cc_0gxxbhqk_product_slider_kombos-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* End import: ../../sub-components/SpinnerIcon/styles.css */
/* Imported from: ../../sub-components/Tag/styles.css */
/* ===== Tag ===== */
.cc_0gxxbhqk_product_slider .kombos-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.5rem;
  border-radius: var(--kombos-radius);
  white-space: nowrap;
}

/* Discounted */
.cc_0gxxbhqk_product_slider .kombos-tag--discounted {
  background: var(--kombos-discount-bg);
  color: var(--kombos-white);
}

/* New */
.cc_0gxxbhqk_product_slider .kombos-tag--new {
  background: var(--kombos-white);
  border: 1px solid var(--kombos-gray-200);
  color: var(--kombos-gray-900);
}

/* Dark */
.cc_0gxxbhqk_product_slider .kombos-tag--dark {
  padding: 0.125rem 0.5rem;
  border-radius: var(--kombos-radius);
  background: var(--kombos-gray-900);
  color: var(--kombos-white);
}

/* End import: ../../sub-components/Tag/styles.css */

/* ===== Product Slider Section ===== */
.cc_0gxxbhqk_product_slider .kombos-product-slider {
  margin-top: var(--ps-top-mobile, 0);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.cc_0gxxbhqk_product_slider .kombos-product-slider__wrapper {
  padding-top: 1rem;
  padding-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/*
 * Bölüm başlığı — canlıdan ölçüldü: 24px / **700** / lh 32px, ortalı,
 * masaüstü ve mobilde AYNI (kırılıma göre büyümüyor).
 * 700 tipografi ölçeğinde olmadığı için burada tanımlanıyor (CLAUDE.md istisnası).
 */
.cc_0gxxbhqk_product_slider .kombos-product-slider__title {
  color: var(--kombos-gray-900);
  font-size: var(--slider-title-fs, 1.5rem);
  font-weight: var(--slider-title-fw, 700);
  line-height: 1.3333;
  text-align: center;
}

/* Slider wrapper */
.cc_0gxxbhqk_product_slider .kombos-product-slider__slider {
  position: relative;
  overflow: hidden;
}

/*
 * Kaydırılabilir şerit.
 * Sütun aralığı canlıdan ölçüldü: mobilde 8px, masaüstünde 24px
 * (2026-08-18, PDP "Ürünlerimizi Keşfet!" slider'ı: 5 kart × 243px + 4 × 24px
 *  = 1312px). Editörden "Kartlar Arası Boşluk" ile değiştirilir.
 * (marla.com'da bu bölüm 4×2 ızgara olarak render ediliyor; yatay kaydırma
 *  yalnızca ürün sayısı bir sayfayı aştığında devreye girer.)
 */
.cc_0gxxbhqk_product_slider .kombos-product-slider__track {
  display: flex;
  gap: var(--slider-gap-mobile, 0.5rem);
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.cc_0gxxbhqk_product_slider .kombos-product-slider__track::-webkit-scrollbar {
  display: none;
}

/* Card sizing — mobile: 2 columns, desktop: driven by --columns */
.cc_0gxxbhqk_product_slider .kombos-product-slider__card {
  flex: 0 0 calc((100% - var(--slider-gap-mobile, 0.5rem)) / 2);
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cc_0gxxbhqk_product_slider .kombos-product-slider__card-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Navigation arrows */
/*
 * Ok butonu — canlıdan ölçüldü: MOBİLDE 36×36 / ikon 20px / kenardan 16px,
 * MASAÜSTÜNDE 40×40 / ikon 24px / kenardan 24px. (Hero slider'ın oku her
 * kırılımda 40×40 kalır, bu kural yalnızca ürün slider'ını kapsar.)
 */
.cc_0gxxbhqk_product_slider .kombos-product-slider__arrow {
  font-size: 1.25rem;
  height: 2.25rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.25rem;
  z-index: var(--kombos-z-dropdown);
}

.cc_0gxxbhqk_product_slider .kombos-product-slider__arrow--left {
  left: 1rem;
}

.cc_0gxxbhqk_product_slider .kombos-product-slider__arrow--right {
  right: 1rem;
}

/* ===== Tablet (>=768px) ===== */
@media (min-width: 768px) {
  .cc_0gxxbhqk_product_slider .kombos-product-slider__wrapper {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

/* ===== Desktop (>=1024px) ===== */
@media (min-width: 1024px) {
  .cc_0gxxbhqk_product_slider .kombos-product-slider__wrapper {
    padding-top: 2rem;
    padding-bottom: 2rem;
    gap: 2rem;
  }

  .cc_0gxxbhqk_product_slider .kombos-product-slider__track {
    gap: var(--slider-gap, 1.5rem);
  }

  .cc_0gxxbhqk_product_slider .kombos-product-slider__card {
    flex: 0 0
      calc(
        (100% - (var(--columns) - 1) * var(--slider-gap, 1.5rem)) /
          var(--columns)
      );
  }

  .cc_0gxxbhqk_product_slider .kombos-product-slider__arrow {
    font-size: 1.5rem;
    height: 2.5rem;
    width: 2.5rem;
  }

  .cc_0gxxbhqk_product_slider .kombos-product-slider__arrow--left {
    left: 1.5rem;
  }

  .cc_0gxxbhqk_product_slider .kombos-product-slider__arrow--right {
    right: 1.5rem;
  }
}

/* --- İki sıralı (4x2) düzen ---
 * Boşluk yedeği burada 120px: canlıda ana sayfadaki 4x2 blokların gap'i
 * bölüm bazında 120 / 60 px (2026-08-18 ölçümü). Tek sıralı slider'da ise
 * 24px. İkisi de "Kartlar Arası Boşluk" propuyla ezilir.
 * Marka talebi: slider hem tek sıra hem alt alta 2 sıra olarak kullanılabilsin.
 * Her "slide" kendi içinde satır-öncelikli bir grid; kaydırma slide bazında snap eder.
 */
.cc_0gxxbhqk_product_slider .kombos-product-slider__track--two-rows {
  scroll-snap-type: x mandatory;
}

.cc_0gxxbhqk_product_slider .kombos-product-slider__slide {
  display: grid;
  flex: 0 0 100%;
  gap: var(--slider-gap-mobile, 0.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  scroll-snap-align: start;
}

@media (min-width: 1024px) {
  .cc_0gxxbhqk_product_slider .kombos-product-slider__slide {
    gap: var(--slider-gap, 7.5rem);
    grid-template-columns: repeat(var(--columns, 4), minmax(0, 1fr));
  }
}

/* İki sıralı düzende kartların kendi flex genişliği devre dışı — grid yönetir */
.cc_0gxxbhqk_product_slider .kombos-product-slider__track--two-rows .kombos-product-slider__card {
  flex: initial;
}

/*
 * İki sırada kaydırma kapalı (varsayılan): tek sayfa basılır, yatay taşma ve
 * snap kapatılır. `touch-action` olmadan mobilde parmakla sürükleyince ray
 * hâlâ birkaç piksel oynuyordu.
 */
.cc_0gxxbhqk_product_slider .kombos-product-slider__track--static {
  overflow-x: hidden;
  scroll-snap-type: none;
  touch-action: pan-y;
}


/* Bölüm üst boşluğu — canlıda bölümden bölüme değişiyor, editörden ayarlanır. */
@media (min-width: 1024px) {
  .cc_0gxxbhqk_product_slider .kombos-product-slider {
    margin-top: var(--ps-top, 0);
  }
}

/*
 * "Tümünü Göster" — canlıdan ölçüldü (1440 / 390):
 *   ortalanmış, üstten 16px, altı çizili, #BE2B27
 *   masaüstü 14px/500 lh 20 · mobil 12px/500 lh 12
 * Boyut/renk editörden ayarlanabilsin diye CSS değişkeninden okunur.
 */
.cc_0gxxbhqk_product_slider .kombos-product-slider__view-all {
  align-self: center;
  color: var(--ps-viewall-color, #be2b27);
  font-size: var(--ps-viewall-fs, 0.75rem);
  font-weight: 500;
  line-height: 1;
  margin-top: 1rem;
  text-decoration: underline;
  transition: opacity 0.2s ease;
}

.cc_0gxxbhqk_product_slider .kombos-product-slider__view-all:hover {
  opacity: 0.7;
}

@media (min-width: 1024px) {
  .cc_0gxxbhqk_product_slider .kombos-product-slider__view-all {
    font-size: var(--ps-viewall-fs, 0.875rem);
    line-height: 1.25rem;
  }
}

/* ── Alt kaydırma çizgisi ──
 * Canlıdaki Swiper scrollbar'ından ölçüldü (2026-08-18): iz 2px yüksekliğinde,
 * rgba(0,0,0,.1), köşe 10px, genişlik %98 ortalı; tutamak #1D1D1B.
 * Kartların altıyla arası 14px, altında 4px pay var.
 */
.cc_0gxxbhqk_product_slider .kombos-product-slider__line {
  position: relative;
  width: 98%;
  height: var(--ps-line-h, 0.125rem);
  margin: 0.875rem auto 0.25rem;
  background: var(--ps-line-track, rgba(0, 0, 0, 0.1));
  border-radius: 10px;
  cursor: pointer;
  touch-action: none;
}

.cc_0gxxbhqk_product_slider .kombos-product-slider__line-drag {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--ps-line-color, #1d1d1b);
  border-radius: 10px;
}