/* Imported from: ../../styles/section.css */
/* ===== Ortak bölüm iskeleti =====
 * Anasayfadaki her bölüm aynı başlık alanını, aynı sekme çubuğunu ve aynı
 * ızgara aralığını kullanır. Tek yerde tanımlı olması "tüm bölümler birbiriyle
 * uyumlu" şartının teknik karşılığı: bir değeri değiştirmek hepsini değiştirir.
 *
 * Her değer editörden ezilebilir; var() ikinci argümanı tasarım varsayılanıdır.
 * Bu dosyayı kullanan bölüm CSS'i, kendi başına bu dosyayı import etmek
 * ZORUNDA — import edilmeyen stil derlemede sessizce düşer.
 * (Örnek yolu buraya yazmıyoruz: derleyicinin import tarayıcısı yorum
 *  satırlarını ayıklamıyor, yorumdaki yolu da çözmeye çalışıyor.)
 */

/* Bölüm dikey boşluğu. İki bölümün dikişi bunun iki katı okunuyor
   (üsttekinin alt boşluğu + alttakinin üst boşluğu): mobilde 64px,
   masaüstünde 80px. Bölüm başına "Bölüm Boşlukları" propları ezer. */
.cc_c1wmfzom_KpWvpeA5tx .mays-section {
  width: 100%;
  padding-top: var(--sec-pt, 2rem);
  padding-bottom: var(--sec-pb, 2rem);
}

.cc_c1wmfzom_KpWvpeA5tx .mays-section__container {
  display: flex;
  flex-direction: column;
  gap: var(--sec-gap, 1.25rem);
  max-width: var(--sec-max-w, none);
  margin-inline: auto;
  width: 100%;
}

/* ----- Başlık alanı ----- */

.cc_c1wmfzom_KpWvpeA5tx .mays-section__head {
  display: flex;
  flex-direction: column;
  align-items: var(--head-align, center);
  gap: var(--head-gap, 0.5rem);
  text-align: var(--head-text-align, center);
}

/* Varsayılan: label-sm-medium (12px / 18px / 500 / .017em / uppercase).
   Satır yüksekliği varsayılanı BİRİMSİZ oran: editörden yalnızca puntoyu
   büyüten kişi rem cinsinden donmuş bir satır kutusuna sıkışıyordu — başlık
   büyüyüp altındaki giriş metninin üstüne biniyordu. 1.5 × 12px = 18px, yani
   varsayılan görünüm bit birebir aynı kalıyor, punto büyüyünce boşluk da
   onunla büyüyor. Satır yüksekliği propu yazıldığında yine o kazanır. */
.cc_c1wmfzom_KpWvpeA5tx .mays-section__title {
  margin: 0;
  font-size: var(--sec-title-fs, 0.75rem);
  line-height: var(--sec-title-lh, 1.5);
  font-weight: var(--sec-title-fw, 500);
  letter-spacing: var(--sec-title-ls, 0.017em);
  text-transform: var(--sec-title-tt, uppercase);
  color: var(--sec-title-color, var(--kombos-gray-900));
}

/* Varsayılan: text-sm-regular (14px / 20px / 400).
   Satır yüksekliği yine birimsiz oran — 20/14 = 1.4286, 14px'te 20px eder. */
.cc_c1wmfzom_KpWvpeA5tx .mays-section__desc {
  margin: 0;
  max-width: var(--sec-desc-max-w, 34rem);
  font-size: var(--sec-desc-fs, 0.875rem);
  line-height: var(--sec-desc-lh, 1.4286);
  font-weight: var(--sec-desc-fw, 400);
  letter-spacing: var(--sec-desc-ls, normal);
  text-transform: var(--sec-desc-tt, none);
  color: var(--sec-desc-color, var(--kombos-muted));
}

/* ----- Sekmeler (Kadın / Erkek) ----- */

.cc_c1wmfzom_KpWvpeA5tx .mays-section__tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sec-tab-gap, 1.5rem);
}

/* Varsayılan: label-sm-regular. Aktif sekme dolgu değil, ince çizgi alır. */
.cc_c1wmfzom_KpWvpeA5tx .mays-section__tab {
  position: relative;
  padding: 0.5rem 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--sec-tab-fs, 0.75rem);
  line-height: 1.125rem;
  font-weight: var(--sec-tab-fw, 400);
  letter-spacing: var(--sec-tab-ls, 0.017em);
  text-transform: var(--sec-tab-tt, uppercase);
  color: var(--sec-tab-color, var(--kombos-muted));
  transition: color var(--kombos-duration-fast) var(--kombos-ease-standard);
}

.cc_c1wmfzom_KpWvpeA5tx .mays-section__tab:hover, .cc_c1wmfzom_KpWvpeA5tx .mays-section__tab--active {
  color: var(--sec-tab-active-color, var(--kombos-gray-900));
}

.cc_c1wmfzom_KpWvpeA5tx .mays-section__tab--active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.25rem;
  height: 1px;
  background: var(--sec-tab-underline, var(--kombos-gray-900));
}

/* ----- Izgara ----- */

.cc_c1wmfzom_KpWvpeA5tx .mays-section__grid {
  display: grid;
  grid-template-columns: repeat(var(--mobile-cols, 2), 1fr);
  gap: var(--sec-grid-gap-m, var(--sec-grid-gap, var(--kombos-grid-gap)));
}

@media (min-width: 768px) {
  .cc_c1wmfzom_KpWvpeA5tx .mays-section {
    padding-top: var(--sec-pt, 2.5rem);
    padding-bottom: var(--sec-pb, 2.5rem);
  }

  .cc_c1wmfzom_KpWvpeA5tx .mays-section__container {
    gap: var(--sec-gap, 1.5rem);
  }

  .cc_c1wmfzom_KpWvpeA5tx .mays-section__grid {
    gap: var(--sec-grid-gap, var(--kombos-grid-gap));
  }
}

@media (min-width: 1024px) {
  .cc_c1wmfzom_KpWvpeA5tx .mays-section__grid {
    grid-template-columns: repeat(var(--desktop-cols, 4), 1fr);
  }
}

@media (max-width: 767px) {
  .cc_c1wmfzom_KpWvpeA5tx .mays-section__title {
    font-size: var(--sec-title-fs-m, var(--sec-title-fs, 0.75rem));
  }

  .cc_c1wmfzom_KpWvpeA5tx .mays-section__desc {
    font-size: var(--sec-desc-fs-m, var(--sec-desc-fs, 0.875rem));
  }
}

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

/* ===== Store Showcase =====
   Başlık alanı, boşluklar ve ızgara ortak `mays-section` iskeletinden geliyor. */

.cc_c1wmfzom_KpWvpeA5tx .mays-stores {
  width: 100%;
}

/* ----- Tek mağaza: editoryal split -----
   Tek öge tam genişlikte basılınca 4/3 görsel ~1000px yüksekliğe çıkıyor,
   adres/telefon satırları da onun altında kaybolan bir kuyruğa dönüşüyordu.
   Masaüstünde ögeyi iki sütuna açıyoruz: görsel solda, bilgiler sağda dikey
   ortalı. Kurallar ögede değil bölümde duruyor — StoreShowcaseItem çok
   mağazalı ızgarada da kullanılıyor, oradaki tek sütunlu akışı bozulmamalı.
   58/42: görsel baskın kalsın ama metin sütunu dar bir şeride düşmesin. */

@media (min-width: 1024px) {
  .cc_c1wmfzom_KpWvpeA5tx .mays-stores--single .mays-store {
    display: grid;
    /* Görselin payı editörden geliyor, metin kalanı alıyor. */
    grid-template-columns:
      minmax(0, var(--store-single-media-w, 70%))
      minmax(0, 1fr);
    align-items: center;
    /* Izgara aralığı varsayılanı 4px — ürün ızgarası için doğru, split'te
       görselle metni ayırmaya yetmiyor; tasarım varsayılanı 48px. */
    column-gap: var(--sec-grid-gap, var(--kombos-space-48));
  }

  /* Yan sütunda "görselden sonraki boşluk" anlamını yitiriyor; dikey
     ortalamayı aşağı kaydırmaması için sıfırlanıyor. Satır arası da açılıyor:
     ızgarada alt alta sıkışık duran künye, burada okunacak bir blok. */
  .cc_c1wmfzom_KpWvpeA5tx .mays-stores--single .mays-store__body {
    padding-top: 0;
    gap: var(--store-body-gap, 0.75rem);
  }

  /* Izgarada 12px'lik ad ve 14px'lik satırlar kart altyazısı olarak doğru;
     tek mağazada aynı ölçek görselin yanında dipnot gibi kalıyordu. Hiyerarşi
     puntoyu şişirerek değil, harf aralığını açarak kuruluyor (tema dili). */
  .cc_c1wmfzom_KpWvpeA5tx .mays-stores--single .mays-store__name {
    font-size: var(--store-name-fs, 1.125rem);
    line-height: var(--store-name-lh, 1.4);
    font-weight: var(--store-name-fw, 500);
    letter-spacing: var(--store-name-ls, 0.12em);
    margin-bottom: var(--kombos-space-8);
  }

  .cc_c1wmfzom_KpWvpeA5tx .mays-stores--single .mays-store__line span {
    font-size: var(--store-info-fs, 1rem);
    line-height: var(--store-info-lh, 1.6);
    letter-spacing: var(--store-info-ls, 0.01em);
  }

  /* 1.6'lık satır kutusunda 1em'lik ikon tepeye yapışıyor; yarı farkı kadar
     indirilince metnin x-yüksekliğine oturuyor. */
  .cc_c1wmfzom_KpWvpeA5tx .mays-stores--single .mays-store__line > svg {
    margin-top: 0.3em;
  }

  /* Künyeden ayrılsın: bağlantı bir sonraki adım, bir bilgi satırı değil. */
  .cc_c1wmfzom_KpWvpeA5tx .mays-stores--single .mays-store__cta {
    margin-top: var(--kombos-space-24);
    letter-spacing: var(--store-cta-ls, 0.14em);
  }

}

/* Yazılar ortalı: masaüstünde görselden artan alanda, mobilde görselin altında.
   Bu yüzden kural bölme dışında — tek mağaza her genişlikte ortalı okunuyor.
   Dikeyde masaüstündeki ızgaranın `align-items`'ı hizalıyor. Hizalama propu
   yazılırsa (Sola/Sağa) o kazanır: ortalama dayatma değil, varsayılan. */
.cc_c1wmfzom_KpWvpeA5tx .mays-stores--single .mays-store__body {
  text-align: var(--store-text-align, center);
}

.cc_c1wmfzom_KpWvpeA5tx .mays-stores--single .mays-store__line {
  justify-content: var(--store-flex-align, center);
}

/* Görsel her genişlikte kendi oranıyla basılıyor — masaüstünde de mobilde de.
   Oran, ögenin KÖKÜNDE satır içi stil olarak duruyor (öge çok mağazalı
   ızgarada kırpılmak ZORUNDA, orada doğru) ve satır içi bildirimi ezmenin tek
   yolu !important. Bedeli: tek mağaza düzeninde "Görsel Oranı" propu etkisiz.
   Bu kurallar bir süre yalnızca masaüstündeydi; mobilde öge varsayılan 4/3
   kutusuna düşüp dikey fotoğrafı kareye kırpıyordu. */
.cc_c1wmfzom_KpWvpeA5tx .mays-stores--single .mays-store__media {
  aspect-ratio: auto !important;
}

/* Genişliği kap veriyor (masaüstünde sütun, mobilde tam genişlik),
   yüksekliği görselin kendi oranı. Yükseklik sınırı VARSAYILAN OLARAK YOK:
   buraya bir tavan koymuştum ve dikey fotoğrafı kırpıyordu, asıl hata oydu.
   Editörden değer yazılırsa sınır devreye girer ve fazlası kırpılır. */
.cc_c1wmfzom_KpWvpeA5tx .mays-stores--single .mays-store__img {
  width: 100%;
  height: auto;
  max-height: var(--store-single-media-h, none);
}