/* ============================================================================
   GostCategorySpotlight — kategori bloğu: ortalı başlık + büyük görsel + 6 ürün

   Kurallar: yalnızca sınıf seçicisi (eleman seçicisi scope'lanmaz), ham
   renk/ölçü yok (hepsi var(--g-*)), gri çizgi/çerçeve YOK (kullanıcı: "asla").
   Kök stilde gelen değişkenler (index.tsx):
     --gcs-gap      kartlar arası VE görsel ile ızgara arası (gridGap)
     --gcs-ratio-m  mobilde görsel oranı (mediaRatioMobile)
     --gcs-rows / --gcs-media-rows  ürün ızgarasının satır sayısı ve görselin
                    kaç satır boyunda olduğu (en fazla 2 = 4 kart)
     --gcs-btn-bg / --gcs-btn-ink  görsel butonu renkleri (boşsa token)
   ========================================================================= */

.cc_n2k0mxzk_aBrpjIwWls .gcs {
  padding-top: var(--sec-pt);
  padding-bottom: var(--sec-pb);
}

/* ---------- Başlık: ortalı, alt başlık altında ----------
   Başlık kendi ürünlerine yakın dursun (kategori raflarıyla aynı 12px). */

.cc_n2k0mxzk_aBrpjIwWls .gcs__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--g-space-2);
  margin-bottom: var(--g-space-3);
  text-align: center;
}

.cc_n2k0mxzk_aBrpjIwWls .gcs__title {
  /* `margin: 0` ZORUNLU: titleFontStyle seçildiğinde .g-h2 düşüyor ve onunla
     gelen sıfır boşluk da giderdi. Renk BURADA yazılmaz — kökten miras gelir,
     seçilen yazı stilinin rengi ezilmez. Yazı stilinin geniş satır aralığı
     başlığın altına boşluk eklemesin diye satır aralığı sıkı. */
  margin: 0;
  line-height: 1.2;
}

.cc_n2k0mxzk_aBrpjIwWls .gcs__desc {
  max-width: 62ch;
  margin-inline: auto;
  font-size: var(--g-fs-body-sm);
  line-height: 1.5;
}

/* ---------- Izgara: görsel ve ürünler YARI YARIYA (referans görseldeki oran;
   ilk sürüm 5fr/7fr idi — görsel kutusu 1:3 kadar dar-uzun kalıyordu) ----------
   `stretch`: görsel KOLONU (.gcs__mediaCol) ürün ızgarasıyla aynı boyda.
   Görsel kutusu o kolonun içinde 2 kart satırı boyunda ve yapışkan (aşağıda).
   minmax(0, …) uzun Türkçe adların kolonu taşırmasını önler. */

.cc_n2k0mxzk_aBrpjIwWls .gcs__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: var(--gcs-gap);
}

/* Görsel sağda: kolon oranı da yer değiştirir, DOM sırası değişmez
   (okuma ve sekme sırası hep "görsel, sonra ürünler"). */
.cc_n2k0mxzk_aBrpjIwWls .gcs__grid--mediaRight {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.cc_n2k0mxzk_aBrpjIwWls .gcs__grid--mediaRight .gcs__mediaCol {
  order: 2;
}

.cc_n2k0mxzk_aBrpjIwWls .gcs__grid--mediaRight .gcs__products {
  order: 1;
}

/* Tek kolon kaldıysa (yalnızca görsel ya da yalnızca ürünler) tam genişlik. */
.cc_n2k0mxzk_aBrpjIwWls .gcs__grid--mediaOnly, .cc_n2k0mxzk_aBrpjIwWls .gcs__grid--productsOnly {
  grid-template-columns: minmax(0, 1fr);
}

/* ---------- Büyük görsel ----------
   Ürün kartlarının görseliyle aynı köşe ve aynı derinlik (ProductCard
   `.gost-media`): iki katmanlı yumuşak gölge, üzerine gelince derinleşir.
   Çizgi/çerçeve yok. */

/* Görsel kolonu: ızgara satırına gerilir (ürün ızgarası boyu). Gerilen ızgara
   öğesinin yüksekliği belirli sayılır; içteki kutunun % yüksekliği buna
   çözülür. Yapışkan kutunun yol alanı da bu kolon. */
.cc_n2k0mxzk_aBrpjIwWls .gcs__mediaCol {
  min-width: 0;
}

/* GÖRSEL = 4 ÜRÜN KARTI (kullanıcı, 2026-09-25: "görsel çerçevesi kadar
   olmayacak, aşağı ürün kartları ile kayacak; 4 ürün kartı boyutunda").
   Genişlik kolonun tamamı (2 kart + aralık). Yükseklik: aşağıdaki calc
   yalnızca ilk çizim için yaklaşık değer (2 satır + aralık); tarayıcıda
   index.tsx 3. ve 4. kartın görünen alt kenarını ölçüp kutuya px yükseklik
   yazar. Yapışkan: ilk satırla aynı hizada başlar, sayfa kaydıkça header'ın
   altında ürünlerle birlikte iner, son satırın alt kenarında durur. */
.cc_n2k0mxzk_aBrpjIwWls .gcs__media {
  position: sticky;
  /* Kutu ekrandan uzunsa (4 kart ≈ 870px; 1366×768 dizüstünde görünen alan
     ≈ 660px) üstten yapışınca alt kısmı ve "Koleksiyonu Keşfet" butonu
     kayma boyunca ekranın altında kalıyordu (inceleme bulgusu). min():
     sığıyorsa header'ın altından, sığmıyorsa ALT kenarından yapışır —
     buton ve görselin altı hep görünür, kutu yine 4 kart boyunda. Ölçü
     (--gcs-media-h) index.tsx'ten; gelmeden önce eski davranış. */
  top: min(calc(var(--g-chrome-h) + var(--g-gap)), calc(100vh - var(--gcs-media-h, 0px) - var(--g-gap)));
  height: calc(
    (100% - (var(--gcs-rows, 1) - 1) * var(--gcs-gap)) / var(--gcs-rows, 1) * var(--gcs-media-rows, 1) +
      (var(--gcs-media-rows, 1) - 1) * var(--gcs-gap)
  );
  min-width: 0;
  /* Güvenlik payı: ürün ızgarası çok kısa kalırsa görsel sıfıra inmesin. */
  min-height: 280px;
  overflow: hidden;
  border-radius: var(--g-radius-media);
  background: var(--g-surface);
  box-shadow:
    0 1px 3px rgb(var(--g-overlay-rgb) / 0.08),
    0 10px 24px rgb(var(--g-overlay-rgb) / 0.16);
  transition: box-shadow var(--g-dur) var(--g-ease);
}

@media (hover: hover) and (pointer: fine) {
  .cc_n2k0mxzk_aBrpjIwWls .gcs__media:hover {
    box-shadow:
      0 2px 6px rgb(var(--g-overlay-rgb) / 0.1),
      0 16px 34px rgb(var(--g-overlay-rgb) / 0.22);
  }
}

/* Görsel yok (yalnızca editörde basılır): düz nötr panel, gölgesiz —
   mağaza sahibi görselin yerini görsün, sahte bir kart gibi durmasın. */
.cc_n2k0mxzk_aBrpjIwWls .gcs__media--empty {
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .cc_n2k0mxzk_aBrpjIwWls .gcs__media--empty:hover {
    box-shadow: none;
  }
}

.cc_n2k0mxzk_aBrpjIwWls .gcs__picture {
  position: absolute;
  inset: 0;
  display: block;
}

.cc_n2k0mxzk_aBrpjIwWls .gcs__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* SIĞDIR kipi (varsayılan): masaüstünde kutunun oranı index.tsx'te görselin
   kendi oranına eşitlenir (görsel sütununun genişliği hesaplanır), bu yüzden
   "cover" hiçbir şey kırpmaz ve kenarda boşluk/çerçeve kalmaz. Mobildeki
   kural aşağıda (<768). */

/* Ürün yoksa kutunun boyunu verecek ızgara da yok: geniş bant oranı,
   yapışma yok. */
.cc_n2k0mxzk_aBrpjIwWls .gcs__grid--mediaOnly .gcs__media {
  position: relative;
  top: auto;
  height: auto;
  aspect-ratio: var(--g-ratio-band);
}

/* ---------- Görsel butonu: alt ortada hap ----------
   Global .g-btn ölçüsü (48px yükseklik, yuvarlak köşe, odak halkası);
   renkler prop'tan, boşsa turkuaz zemin + mürekkep yazı. Hover'da hafif
   yukarı kalkar ve koyulaşır. */

.cc_n2k0mxzk_aBrpjIwWls .gcs__cta {
  position: absolute;
  inset-inline: 0;
  bottom: var(--g-space-6);
  z-index: 1;
  display: flex;
  justify-content: center;
  padding-inline: var(--g-space-4);
}

.cc_n2k0mxzk_aBrpjIwWls .gcs__btn {
  min-height: 48px;
  padding-inline: var(--g-space-8);
  max-width: 100%;
  background: var(--gcs-btn-bg, var(--g-cool));
  color: var(--gcs-btn-ink, var(--g-ink));
  border-color: transparent;
  text-align: center;
  box-shadow: 0 4px 14px rgb(var(--g-overlay-rgb) / 0.14);
  transition: background-color var(--g-dur) var(--g-ease),
    color var(--g-dur) var(--g-ease), transform var(--g-dur) var(--g-ease),
    box-shadow var(--g-dur) var(--g-ease);
}

@media (hover: hover) and (pointer: fine) {
  .cc_n2k0mxzk_aBrpjIwWls .gcs__btn:hover {
    background: color-mix(in srgb, var(--gcs-btn-bg, var(--g-cool)) 88%, var(--g-ink));
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgb(var(--g-overlay-rgb) / 0.2);
  }
}

/* Klavye odağı: global halka; hover gölgesinden sonra gelir ki ezilmesin. */
.cc_n2k0mxzk_aBrpjIwWls .gcs__btn:focus-visible {
  outline: none;
  box-shadow: var(--g-focus-ring);
}

/* ---------- Ürün ızgarası: 2 kolon (görselin yanında) ---------- */

/* Satırlar doğal boyda (eşitleme YOK): görsel yüksekliği index.tsx'te 3. ve
   4. kartın görünen alt kenarından ölçülüyor; satırları en uzun karta
   germek 2. sıranın altına boşluk ekleyip görseli uzatıyordu. */
.cc_n2k0mxzk_aBrpjIwWls .gcs__products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: var(--gcs-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.cc_n2k0mxzk_aBrpjIwWls .gcs__cell {
  min-width: 0;
}

/* Canlı sitede görsel yoksa ürünler tam genişlikte 3 kolon (6 = 3 × 2). */
.cc_n2k0mxzk_aBrpjIwWls .gcs__grid--productsOnly .gcs__products {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Hareket azaltma: gölge, renk ve kalkma geçişleri anlık; kalkma da yok. */
@media (prefers-reduced-motion: reduce) {
  .cc_n2k0mxzk_aBrpjIwWls .gcs__media, .cc_n2k0mxzk_aBrpjIwWls .gcs__btn {
    transition: none;
  }

  .cc_n2k0mxzk_aBrpjIwWls .gcs__btn:hover {
    transform: none;
  }
}

/* ============================================================================
   Responsive — 768–1023 yan yana kalır (yukarıdaki kurallar); <768 yığılır.
   ========================================================================= */

/* <768: görsel önce (mobil oranıyla), altında 2 kolon ürün. `order`
   sıfırlanır, böylece görsel sağda seçilmiş olsa da üstte durur. */
@media (max-width: 767px) {
  .cc_n2k0mxzk_aBrpjIwWls .gcs {
    padding-top: var(--sec-pt-m);
    padding-bottom: var(--sec-pb-m);
  }

  .cc_n2k0mxzk_aBrpjIwWls .gcs__grid, .cc_n2k0mxzk_aBrpjIwWls .gcs__grid--mediaRight {
    grid-template-columns: minmax(0, 1fr);
  }

  .cc_n2k0mxzk_aBrpjIwWls .gcs__grid--mediaRight .gcs__mediaCol, .cc_n2k0mxzk_aBrpjIwWls .gcs__grid--mediaRight .gcs__products {
    order: 0;
  }

  /* Mobilde görsel üstte, kendi oranında; yapışma yok. */
  .cc_n2k0mxzk_aBrpjIwWls .gcs__media, .cc_n2k0mxzk_aBrpjIwWls .gcs__grid--mediaOnly .gcs__media {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    aspect-ratio: var(--gcs-ratio-m, 4 / 5);
  }

  .cc_n2k0mxzk_aBrpjIwWls .gcs__grid--productsOnly .gcs__products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cc_n2k0mxzk_aBrpjIwWls .gcs__cta {
    bottom: var(--g-space-4);
  }

  /* SIĞDIR kipinde mobilde kutu sabit orana zorlanmaz: görsel akışta, kendi
     oranında (kırpma ve çerçeve yok); buton yine görselin alt ortasında. */
  .cc_n2k0mxzk_aBrpjIwWls .gcs__media.gcs__media--contain {
    aspect-ratio: auto;
  }

  .cc_n2k0mxzk_aBrpjIwWls .gcs__media--contain .gcs__picture {
    position: static;
  }

  .cc_n2k0mxzk_aBrpjIwWls .gcs__media--contain .gcs__img {
    height: auto;
  }

  .cc_n2k0mxzk_aBrpjIwWls .gcs__btn {
    padding-inline: var(--g-space-6);
  }
}