/*
 * StoreShowcase — Anasayfa "Magazalarimiz" vitrini.
 * Spec: specs/anasayfa-magazalarimiz.md.
 *
 * `sub-components/CategoryStrip` KULLANILMAZ (spec #1): baslik satirinda
 * "Tumunu Gor" icin yer yok ve renkleri --mh-primary'ye sabit, koyu bantta
 * okunmaz. Etkileşim semantigi (scrollBy, gizli kaydirma cubugu, masaustunde
 * ok) ProductSlider'dan birebir kopyalandi — kod degil davranis paylasiliyor.
 *
 * @import YOK: sub-components/icons yalnizca TSX dondurur, CSS'i yok.
 * Baska paylasilan CSS kullanilmiyor.
 */

.cc_t2dowgyg_bcKoOfP4mW .mh-store-showcase {
  width: 100%;

  /* Acik (varsayilan) tema degiskenleri. #121f3e hex'i SADECE
   * StoreShowcase/types.ts'teki backgroundColor prop varsayilanidir,
   * buraya YAZILMAZ — renk gecisi tamamen bu degiskenler + --dark
   * sinifiyla, KALITIM uzerinden yapilir (specificity savasi yok, spec #7.2). */
  --store-fg: var(--mh-primary);
  --store-fg-muted: var(--mh-on-surface-variant);
  --store-hairline: color-mix(in srgb, var(--mh-outline-variant) 30%, transparent);
  --store-media-bg: var(--mh-surface-variant);
  /* Oran TEK yerden buradan yonetilir, kart CSS'i bunu okur.
   *
   * 2026-08-31: 1/1 KAREDEN 3/2 YATAYA donuldu. Kare bir ara musteri
   * talebiyle gelmisti; olcum gosterdi ki bolumu sisiren ana etken oydu —
   * 1440x900 laptopta bolum 799px, yani ekranin %89'u (foto 426x426).
   * 3/2 ayni kart genisliginde foto yuksekligini 426 -> 211px'e indiriyor,
   * bolum ~584px'e (ekranin %65'i). 3/2 ayrica spec'in ILK karariydi
   * (specs/anasayfa-magazalarimiz.md #0) ve Shopify tema dokumanlarinda
   * yatay magaza karti gorselinin standardi (2400x1600). Karar kullanicinin.
   *
   * Fotograflar object-fit: cover ile ortadan kirpilir — musterinin
   * fotograflari 3:2 YATAY cekilmeli, kare kompozisyonda ust/alt gider. */
  --store-card-ar: 3 / 2;
}

.cc_t2dowgyg_bcKoOfP4mW .mh-store-showcase--dark {
  --store-fg: var(--mh-on-primary);
  --store-fg-muted: color-mix(in srgb, var(--mh-on-primary) 72%, transparent);
  --store-hairline: color-mix(in srgb, var(--mh-on-primary) 24%, transparent);
  --store-media-bg: color-mix(in srgb, var(--mh-on-primary) 12%, transparent);
}

/* ===== Kabuk =====
 * Tam kanama: .kombos-container KULLANILMAZ (spec #10), yatay dolgu elle
 * BannerProductRow / PromoCategoryGrid ile birebir ayni: 1rem / 1.5rem.
 *
 * Dikey dolgu KOSULLU — TASARIM-DILI "YARIM RITIM KURALI":
 *   taban (zemin rengi YOK)      -> --mh-section-gap : yarim tasir, komsu
 *                                   bolum de yarim tasir, arada tam bir
 *                                   --mh-section-py aralik olusur
 *   .mh-store-showcase--band     -> --mh-section-py  : bosluk bandin
 *                                   ICINDE kalir, yarim deger icerigi
 *                                   bant kenarina yapistirirdi
 * Modifier'i index.tsx `backgroundColor` prop'una bakarak veriyor, yani
 * editorde zemin rengi acilip kapandiginda ritim kendiliginden duzeliyor.
 */
.cc_t2dowgyg_bcKoOfP4mW .mh-store-showcase__container {
  display: flex;
  flex-direction: column;
  gap: var(--mh-section-title-gap);
  padding-top: var(--mh-section-gap);
  padding-bottom: var(--mh-section-gap);
  padding-left: 1rem;
  padding-right: 1rem;
}

.cc_t2dowgyg_bcKoOfP4mW .mh-store-showcase--band .mh-store-showcase__container {
  padding-top: var(--mh-section-py);
  padding-bottom: var(--mh-section-py);
}

@media (min-width: 768px) {
  .cc_t2dowgyg_bcKoOfP4mW .mh-store-showcase__container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* 1024px'te AYRI bir yatay dolgu YOK.
 *
 * Onceki hali 2rem idi (TASARIM-DILI.md "masaustu 4rem 2rem" satiri).
 * Ama sayfadaki bolumlerin cogu .kombos-container kullaniyor ve o
 * 1024px'te 1.5rem'de kaliyor. Iki deger yan yana gelince ardisik
 * bolumlerin sol/sag kenarlari 8px kayiyordu (orn. ana sayfada
 * CategoryImages -> BannerProductRow -> ProductSlider). Yatay dolgu
 * 1.5rem'e sabitlendi: 1440px'e kadar tum bolumlerin kenarlari ayni
 * dikeyde, 1440 ustunde bu bolum tam kanamaya devam ediyor
 * (.kombos-container 1440'ta duruyor) — istenen buydu. */

/* ===== Baslik satiri — ProductSlider / CategoryStrip / BannerProductRow
 * ile ayni desen: baslik solda, aksiyonlar sagda, ayni satirda. ===== */
.cc_t2dowgyg_bcKoOfP4mW .mh-store-showcase__header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cc_t2dowgyg_bcKoOfP4mW .mh-store-showcase__heading {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

/* margin-left:auto (justify-content:flex-end DEGIL): baslik bos oldugunda
 * da aksiyonlar sagda kalir. */
.cc_t2dowgyg_bcKoOfP4mW .mh-store-showcase__actions {
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.cc_t2dowgyg_bcKoOfP4mW .mh-store-showcase__title {
  margin: 0;
  font-family: var(--mh-font-display);
  font-size: 28px;
  line-height: 36px;
  font-weight: 600;
  color: var(--store-fg);
}

.cc_t2dowgyg_bcKoOfP4mW .mh-store-showcase__subtitle {
  margin: 0;
  font-family: var(--mh-font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--store-fg-muted);
}

.cc_t2dowgyg_bcKoOfP4mW .mh-store-showcase__view-all {
  font-family: var(--mh-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--store-fg);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  cursor: default;
}

.cc_t2dowgyg_bcKoOfP4mW a.mh-store-showcase__view-all {
  cursor: pointer;
}

.cc_t2dowgyg_bcKoOfP4mW a.mh-store-showcase__view-all:hover {
  opacity: 0.75;
}

/* Oklar yalnizca >=1024 gorunur (ProductSlider / CategoryStrip ile ayni;
 * dokunmatikte parmak zaten var). Cerçevesiz, zeminsiz. */
.cc_t2dowgyg_bcKoOfP4mW .mh-store-showcase__arrows {
  display: none;
  gap: 0.5rem;
  color: var(--store-fg);
}

.cc_t2dowgyg_bcKoOfP4mW .mh-store-showcase__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.cc_t2dowgyg_bcKoOfP4mW .mh-store-showcase__arrow:hover:not(:disabled) {
  opacity: 0.7;
}

.cc_t2dowgyg_bcKoOfP4mW .mh-store-showcase__arrow:disabled {
  cursor: default;
  opacity: 0.3;
}

.cc_t2dowgyg_bcKoOfP4mW .mh-store-showcase__arrow svg {
  width: 1.75rem;
  height: 1.75rem;
}

@media (min-width: 1024px) {
  .cc_t2dowgyg_bcKoOfP4mW .mh-store-showcase__title {
    font-size: 32px;
    line-height: 40px;
  }

  .cc_t2dowgyg_bcKoOfP4mW .mh-store-showcase__arrows {
    display: flex;
  }
}

/* ===== Serit (rail) =====
 * --visible kesirli: "1 kart + sonrakinin kenari gorunur" (peek), kaydirilabilirligi
 * anlatir. Kaydirma cubugu gizli (tema geneli desen). */
.cc_t2dowgyg_bcKoOfP4mW .mh-store-showcase__track {
  --rail-gap: 1rem;
  --visible: 1.15;
  display: flex;
  gap: var(--rail-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cc_t2dowgyg_bcKoOfP4mW .mh-store-showcase__track::-webkit-scrollbar {
  display: none;
}

/* Serit klavyeyle odaklanabilir (tabindex={0} index.tsx'te) — WCAG 2.1.1. */
.cc_t2dowgyg_bcKoOfP4mW .mh-store-showcase__track:focus-visible {
  outline: 2px solid var(--store-fg);
  outline-offset: 3px;
}

/* Bu sinif StoreShowcaseItem'in KENDI kok elemaninin ustunde de durur
 * (bkz. StoreShowcaseItem/index.tsx) — CategoryScroll'un kendi track'inde
 * CategoryScrollItem'in kok sinifini dogrudan hedeflemesiyle ayni desen. */
.cc_t2dowgyg_bcKoOfP4mW .mh-store-showcase__card {
  flex: 0 0 calc((100% - (var(--visible) - 1) * var(--rail-gap)) / var(--visible));
  min-width: 0;
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .cc_t2dowgyg_bcKoOfP4mW .mh-store-showcase__track {
    --visible: 2.15;
  }
}

/* >=1024: 3.15 -> 4.15 kart.
 *
 * Baymard'in "responsive upscaling" bulgusu: ekran genisledikce SUTUN
 * EKLENIR, ogenin kendisi buyutulmez — yoksa detay artarken genel gorunum
 * kaybolur. Onceki hal tam tersini yapiyordu: kart sayisi 3.15'te sabitti
 * ve kart 32rem'e (512px) kadar sisiyordu.
 *
 * min/max-width kelepcesi, YENI BIR BREAKPOINT ACMADAN kart sayisini
 * ekranla birlikte artirir (TASARIM-DILI: "768/1024 disinda breakpoint
 * ACMA"). flex-grow/shrink 0 oldugu icin kullanilan genislik
 * clamp(min-width, basis, max-width) olur:
 *   1024px -> basis 217px, min-width kazanir: 272px, ~3.4 kart
 *   1440px -> basis 317px  (araliğin icinde),   4.15 kart
 *   1920px -> basis 433px, max-width kazanir: 416px, ~4.3 kart
 * Kart hicbir zaman 272px'ten dar, 416px'ten genis olmaz. */
@media (min-width: 1024px) {
  .cc_t2dowgyg_bcKoOfP4mW .mh-store-showcase__track {
    --rail-gap: 1.5rem;
    --visible: 4.15;
  }

  .cc_t2dowgyg_bcKoOfP4mW .mh-store-showcase__card {
    min-width: 17rem;
    max-width: 26rem;
  }
}