/* ============================================================================
   GostCategoryDiscover — kategori keşif ızgarası (tasarim-sistemi.md § 6, bölüm 2)

   Yalnızca sınıf seçicisi kullanılır (eleman seçicileri scope'lanmaz).
   Bütün renk/ölçü değerleri global.css tokenlarından; ham değer yok, gölge yok,
   cam efekti yok, köşe her yerde var(--g-radius).

   Kartlar IkasComponentRenderer tarafından basılır. Renderer'ın sarmalayıcı
   div'i `display: contents` olduğu için kart kökleri doğrudan `.gcd__grid`'in
   ızgara öğesi olur — bu yüzden ızgara burada, kart ölçüleri ise kartın kendi
   styles.css'inde tanımlanır. Çocuklara `grid-column` verilmez (sayı bilinmiyor).

   Bölüm 3'ten (ürün ızgarası) ayrışsın diye başlık satırında ayırıcı çizgi yok.
   ========================================================================= */

.cc_n2k0mxzk_zFN2wSuTub .gcd {
  padding-top: var(--sec-pt);
  padding-bottom: var(--sec-pb);
}

/* ---------- Başlık satırı ---------- */

.cc_n2k0mxzk_zFN2wSuTub .gcd__head {
  display: flex;
  flex-direction: column;
  gap: var(--g-space-3);
  margin-bottom: var(--g-space-8);
}

.cc_n2k0mxzk_zFN2wSuTub .gcd__title {
  /* `margin: 0` ZORUNLU: titleFontStyle seçildiğinde .g-h2 sınıfı düşüyor ve
     onunla birlikte sıfırlanmış başlık boşluğu da giderdi. */
  margin: 0;
  /* Uzun Türkçe başlıkların satır sonlarında bölünmemesi için ölçülü genişlik. */
  max-width: 24ch;
}

.cc_n2k0mxzk_zFN2wSuTub .gcd__desc {
  max-width: 56ch;
}

.cc_n2k0mxzk_zFN2wSuTub .gcd__head--center {
  align-items: center;
  text-align: center;
}

.cc_n2k0mxzk_zFN2wSuTub .gcd__head--center .gcd__title, .cc_n2k0mxzk_zFN2wSuTub .gcd__head--center .gcd__desc {
  max-width: 62ch;
  margin-inline: auto;
}

/* ---------- Izgara ----------
   Kolon sayısı, boşluk ve kart oranı index.tsx'ten CSS değişkeni olarak gelir;
   buradaki değerler yalnızca güvenli varsayılan. `--gcd-ratio` kalıtım yoluyla
   kartlara iner (kartın oran prop'u yok). */

.cc_n2k0mxzk_zFN2wSuTub .gcd__grid {
  --gcd-cols: 3;
  --gcd-cols-narrow: 3;
  --gcd-gap: var(--g-gap);
  --gcd-ratio: var(--g-ratio-editorial);
  /* Mobil rayda hücre genişliği; gerçek değer index.tsx'ten inline gelir. */
  --gcd-rail: 72%;

  display: grid;
  grid-template-columns: repeat(var(--gcd-cols), minmax(0, 1fr));
  gap: var(--gcd-gap);
}

/* ---------- Kart yok durumu ----------
   Sahte iskelet kart basılmaz; nötr bir mesaj ve bölümün çökmemesi için alt sınır. */

.cc_n2k0mxzk_zFN2wSuTub .gcd__empty {
  display: grid;
  place-items: center;
  min-height: 200px;
  padding: var(--g-gap);
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius);
  text-align: center;
}

.cc_n2k0mxzk_zFN2wSuTub .gcd__emptyText {
  max-width: 48ch;
  color: var(--g-ink-3);
}

/* ============================================================================
   Responsive — mobil farkları prop'a değil media query'ye yazılır (build-spec § 7).
   ========================================================================= */

/* 1024–1279: masaüstü düzen, dar container, en fazla 3 kolon */
@media (max-width: 1279px) {
  .cc_n2k0mxzk_zFN2wSuTub .gcd__grid {
    grid-template-columns: repeat(var(--gcd-cols-narrow), minmax(0, 1fr));
  }

  .cc_n2k0mxzk_zFN2wSuTub .gcd__head {
    margin-bottom: var(--g-space-7);
  }
}

/* 768–1023: ızgara 2 kolon */
@media (max-width: 1023px) {
  .cc_n2k0mxzk_zFN2wSuTub .gcd__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* <768: ızgara yatay kaydırma rayına döner — bölüm 3 (ürün ızgarası) ile aynı
   tarif. Tek kolonluk yığın bu bölümü mobilde 1.089px fazladan uzatıyordu;
   ray dokümanı bir kart yüksekliğine indiriyor. */
@media (max-width: 767px) {
  .cc_n2k0mxzk_zFN2wSuTub .gcd {
    padding-top: var(--sec-pt-m);
    padding-bottom: var(--sec-pb-m);
  }

  .cc_n2k0mxzk_zFN2wSuTub .gcd__head {
    margin-bottom: var(--g-space-5);
  }

  .cc_n2k0mxzk_zFN2wSuTub .gcd__title {
    max-width: none;
  }

  /* Ray: kartlar IkasComponentRenderer'a ait olduğu için hücre genişliği
     ÇOCUĞA yazılamaz (sınıf adları bilinmiyor, çocuk seçicisi de kullanılmaz).
     Bu yüzden ray flex değil GRID kurulur: `grid-auto-flow: column` +
     `grid-auto-columns` ile her kart tek satırda bir kolon olur; genişlik
     `--gcd-rail` (%72 — bölüm 3'ün flex-basis ölçüsü; tek kartta %100).
     `touch-action`: pan-x olmadan tarayıcı yatay dokunma panini hiç
     başlatmıyor; pan-y kaldığı için sayfanın DİKEY kaydırması engellenmez.
     Kaydırma çubuğu gizli; ray ekran kenarına kadar uzar, ilk kart içerikle
     hizalı kalır. Snap noktası kartın kendi `scroll-snap-align`'ından gelir —
     yoksa proximity zaten hiçbir şeyi zorlamaz, ray serbest kayar. */
  .cc_n2k0mxzk_zFN2wSuTub .gcd__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: var(--gcd-rail);
    align-items: start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    touch-action: pan-x pan-y pinch-zoom;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-inline: calc(var(--g-gutter) * -1);
    padding-inline: var(--g-gutter);
  }

  .cc_n2k0mxzk_zFN2wSuTub .gcd__grid::-webkit-scrollbar {
    display: none;
  }

  .cc_n2k0mxzk_zFN2wSuTub .gcd__empty {
    min-height: 160px;
  }
}

/* Izgarayi kapsayicinin icinde daha dar bir bloga sikistirir: dikey video
   (9:16) iki kolonda 628px genislige, yani 1116px yukseklige cikiyordu.
   Ortali durur; varsayilan 1280px oldugu icin mevcut yerlesimler degismez. */
.cc_n2k0mxzk_zFN2wSuTub .gcd__inner {
  margin-inline: auto;
}