/*
 * ProductSlider — "Görünümü Tamamla" (Complete the Look) horizontal product
 * carousel. Stitch reference: urun-detay.html, "Complete the Look" section
 * (title + card style); ana-sayfa.html, "New Arrivals (Grid)" section used
 * as a secondary reference for name/price typography.
 */

/* ProductCard's own styles.css was never imported anywhere it's used, so it
 * compiled to zero CSS in every consumer (verified via `ikas-component
 * build` output) — image-wrapper, badges, favorite button and add-to-cart
 * button all rendered unstyled. Required for the button reorder below to
 * have any visible effect. */
/* Skipped (covered by shared chunk CSS): ../../sub-components/ProductCard/styles.css */

.cc_t2dowgyg_product_slider .kombos-product-slider {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.cc_t2dowgyg_product_slider .kombos-product-slider__wrapper {
  /* Dikey dolgu YARIM ritim: bu bolumun kendi zemin rengi yok, sayfa
   * zemininin uzerinde duruyor. Iki zeminsiz bolum alt alta geldiginde
   * yarim + yarim = tam bir --mh-section-py eder.
   *
   * Tarihce: once 5rem (Stitch "py-section-gap" = 80px) idi, sonra tam
   * --mh-section-py oldu. Tam deger komsusuyla toplaninca masaustunde
   * 8rem'lik bosluk uretiyordu — ana sayfada ProductSlider'lar
   * BannerProductRow ve PromoCategoryGrid ile ardisik oldugu icin en cok
   * orada goruluyordu. Bkz. global.css'te --mh-section-gap. */
  padding-top: var(--mh-section-gap);
  padding-bottom: var(--mh-section-gap);
  display: flex;
  flex-direction: column;
  gap: var(--mh-section-title-gap);
}

/* Baslik satiri — CategoryStrip (.mh-cat-strip__header) ile ayni desen:
 * baslik solda, oklar sagda, aralarindaki bosluk esnek. */
.cc_t2dowgyg_product_slider .kombos-product-slider__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.cc_t2dowgyg_product_slider .kombos-product-slider__title {
  /* Olculer CategoryStrip'ten birebir: 28/36 mobil, 32/40 masaustu.
   * Onceki `text-align: center` kaldirildi — kategori seridi sola dayali ve
   * ikisi ayni sayfada ust uste geldigi icin ortali baslik ayriksi duruyordu. */
  margin: 0;
  font-family: var(--mh-font-display);
  font-size: 28px;
  line-height: 36px;
  font-weight: 600;
  color: var(--mh-primary);
}

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

/* Scrollable track */
.cc_t2dowgyg_product_slider .kombos-product-slider__track {
  display: flex;
  gap: 1rem;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

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

/*
 * Card sizing — mobile: 2 columns, desktop: driven by --columns.
 * Visual treatment: musteri talebi uzerine kart zemini/cercevesi kaldirildi
 * ("urun alanlarinin arkasi farkli renk olmasin") — kart artik sayfa
 * zemininde, ayri bir kutu cizmiyor. The image (ProductCard, out of scope)
 * still sits flush at the top with no inset padding; only the text content
 * below is padded (see `__card-content`).
 */
.cc_t2dowgyg_product_slider .kombos-product-slider__card {
  flex: 0 0 calc((100% - 1rem) / 2);
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

/* Stitch: "p-4 flex flex-col space-y-2" */
.cc_t2dowgyg_product_slider .kombos-product-slider__card-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
}

/* Slot bos kaldiginda 2rem'lik (ust+alt dolgu) gorunmez bir kutu birakiyordu
 * ve her kartin boyuna bedavadan ekleniyordu. Slot doluysa bu kural hicbir
 * sey yapmaz — iki durumda da dogru. */
.cc_t2dowgyg_product_slider .kombos-product-slider__card-content:empty {
  display: none;
}

/* Yon oklari — CategoryStrip ile ayni: duz caret, zemin/cerceve yok.
 * MOBILDE DE GORUNUR (kullanici talebi 2026-08-31): onceden `display: none`
 * idi ve sadece >=1024px'te aciliyordu; gerekce "dokunmatikte parmakla
 * kaydirma zaten var" idi. Parmakla kaydirma calisiyor ama kaydirilabilir
 * oldugunu gosteren hicbir isaret yoktu (kaydirma cubugu da gizli).
 * Mobilde olculer bir tik kucuk — 28px dokunma alani / 24px caret — ki
 * 28px'lik baslikla ayni satirda yer icin yarismasin.
 * Stiller BURADA tanimli, SliderArrow alt bileseninden gelmiyor: o dosya
 * bu bilesene @import edilmedigi icin CSS'i hic yayinlanmiyordu. */
.cc_t2dowgyg_product_slider .kombos-product-slider__arrows {
  display: flex;
  gap: 0.5rem;
  color: var(--mh-primary);
  flex: 0 0 auto;
}

.cc_t2dowgyg_product_slider .kombos-product-slider__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.cc_t2dowgyg_product_slider .kombos-product-slider__arrow:hover:not(:disabled) {
  opacity: 0.7;
}

.cc_t2dowgyg_product_slider .kombos-product-slider__arrow:disabled {
  cursor: default;
  opacity: 0.3;
}

.cc_t2dowgyg_product_slider .kombos-product-slider__arrow svg {
  width: 1.5rem;
  height: 1.5rem;
}

/*
 * Dikey ritim ve baslik/track araligi artik --mh-section-py /
 * --mh-section-title-gap uzerinden geliyor (global.css). Breakpoint
 * gecisi token'in kendi icinde, burada ayrica tanimlanmiyor.
 */

/* ===== Desktop (>=1024px) ===== */
@media (min-width: 1024px) {
  .cc_t2dowgyg_product_slider .kombos-product-slider__track {
    gap: 1.5rem;
  }

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

  .cc_t2dowgyg_product_slider .kombos-product-slider__title {
    font-size: 32px;
    line-height: 40px;
  }

  /* Masaustunde oklar buyur: 32px alan / 28px caret (onceki tek olcu). */
  .cc_t2dowgyg_product_slider .kombos-product-slider__arrow {
    width: 2rem;
    height: 2rem;
  }

  .cc_t2dowgyg_product_slider .kombos-product-slider__arrow svg {
    width: 1.75rem;
    height: 1.75rem;
  }
}