/*
 * Koleksiyonlar / Kategoriler — issue #10. Ölçüler Figma'nın 1440px masaüstü
 * çerçevelerinden birebir (node 3:2748 ve 3:5415).
 *
 * Üst bar: 64px üst, 40px alt boşluk, altında 1px ayraç. Sekmeler ve oklar
 * barın iki ucunda.
 * Şerit paneli: 64px dikey boşluk, kartlar 12px arayla.
 * Izgara paneli: 128px dikey boşluk, 1024px genişliğinde ortalanmış 6 kolon.
 *
 * Yatay padding tasarımda barda 50px, panelde 48px görünüyor — 2px'lik bu fark
 * Figma gürültüsü. İkisi de tek değişkene (`--collections-px`) bağlandı ki
 * sekme etiketiyle ilk kart aynı hizada başlasın.
 *
 * Kart ve ızgara hücresinin kendi stilleri `CollectionCard` / `CategoryCard`
 * bileşenlerinde; ikisi de ikas.config.json'a kayıtlı, CSS'lerini build kendi
 * scope'larında topluyor.
 */

.cc_g2xfyo6p_w7iAeTPp0j .collections {
  /* Mobilde 20px'e sapıyor (aşağıdaki override) — bu yüzden yerel değişken korunuyor. */
  --collections-px: var(--container-px);
  width: 100%;
  color: var(--color-ink);
}

/* ==========================================================================
   Üst bar — sekmeler + ok butonları
   ========================================================================== */

.cc_g2xfyo6p_w7iAeTPp0j .collections-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 64px var(--collections-px) 40px;
  border-bottom: 1px solid var(--color-border);
}

/*
 * Yükseklik sekme sırasında sabitleniyor, barda değil: Kategoriler sekmesinde
 * ok butonları çizilmediği için barın içeriği 24px'ten 20px'e düşüyor ve
 * sekme değiştirirken bölüm 4px zıplıyordu. Tasarımda iki durumda da bu satır
 * 24px (Figma "Container" h=24).
 *
 * Barın kendisine `min-height` vermek işe yaramaz — build'in reset'i
 * `box-sizing: border-box` uyguladığı için 104px'lik dikey padding min-height'ı
 * zaten aşar ve kural ölü kalır.
 */
.cc_g2xfyo6p_w7iAeTPp0j .collections-tabs {
  display: flex;
  align-items: center;
  min-height: 24px;
  gap: 24px;
}

.cc_g2xfyo6p_w7iAeTPp0j .collections-tab {
  padding: 0;
  border: 0;
  background: none;
  /* Pasif sekme grisi — PLP ile aynı global alias. */
  color: var(--color-text-muted);
  white-space: nowrap;
  cursor: pointer;
}

.cc_g2xfyo6p_w7iAeTPp0j .collections-tab[aria-selected="true"] {
  /* Tasarımda aktif sekme yalnızca renk ve ağırlıkla ayrılıyor — altı çizili değil. */
  color: var(--color-black);
  font-weight: 500;
}

/*
 * Sekme genişliği her zaman KALIN halin genişliği kadar. Aktif sekme 500,
 * pasif 400 ağırlıkta olduğu için geçişte metin genişliği değişiyor ve
 * sekmeler yatayda kayıyordu. Görünmez bir kopya kalın ağırlıkta ölçülüp
 * yeri baştan ayrılıyor; yükseklik 0 olduğu için satıra bir şey eklemiyor.
 */
.cc_g2xfyo6p_w7iAeTPp0j .collections-tab::after {
  content: attr(data-label);
  display: block;
  height: 0;
  overflow: hidden;
  font-weight: 500;
  visibility: hidden;
  pointer-events: none;
}

.cc_g2xfyo6p_w7iAeTPp0j .collections-tab:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.cc_g2xfyo6p_w7iAeTPp0j .collections-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.cc_g2xfyo6p_w7iAeTPp0j .collections-arrow {
  display: flex;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  cursor: pointer;
}

.cc_g2xfyo6p_w7iAeTPp0j .collections-arrow:disabled {
  /* Tasarımda uçtaki ok soluyor, kaybolmuyor (Figma: opacity %30). */
  opacity: 0.3;
  cursor: default;
}

.cc_g2xfyo6p_w7iAeTPp0j .collections-arrow:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* ==========================================================================
   Koleksiyonlar sekmesi — yatay şerit
   ========================================================================== */

.cc_g2xfyo6p_w7iAeTPp0j .collections-panel:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: -2px;
}

.cc_g2xfyo6p_w7iAeTPp0j .collections-panel-slider {
  padding: 64px 0;
}

/*
 * Şerit, panelin yatay padding'ini kendi üstüne alır: kartlar sekme hizasında
 * başlar ama kaydırma alanı ekranın kenarına kadar uzanır — sağdaki kart
 * tasarımdaki gibi kırpılarak görünür ve kaydırılabilirliği kendi anlatır.
 */
.cc_g2xfyo6p_w7iAeTPp0j .collections-track {
  display: flex;
  gap: 12px;
  padding-inline: var(--collections-px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--collections-px);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cc_g2xfyo6p_w7iAeTPp0j .collections-track::-webkit-scrollbar {
  display: none;
}

/*
 * Kart genişliği şeridin görünür alanına oranlı: %28 + 12px boşluk, yani
 * ekranda hep ~3.5 kart durur. Sabit px verilseydi geniş ekranda kart sayısı
 * artar, tasarımın kırpılmış-dördüncü-kart ritmi bozulurdu. 1440px'te
 * (1440 − 2×50) × %28 = 375px — Figma'daki ölçünün ta kendisi.
 *
 * Seçici neden iki kademeli: `IkasComponentRenderer` kartları önce
 * `display: contents` bir div'e, sonra her kartı kendi scope wrapper'ına
 * (`div.cc_<childId>`) sarıyor. Yani şeridin flex öğesi kartın kendisi değil,
 * o scope wrapper. `> *` yalnızca kutusu olmayan contents div'ine değdiği
 * için tek başına hiçbir şey yapmaz; asıl ölçü `> * > *` ile veriliyor.
 * İki kademe birden yazılıyor ki renderer bir gün sarmalayıcıyı kaldırsa da
 * kural doğru elemana düşsün.
 *
 * Ölçü kartın kendi CSS'inde değil burada, çünkü yüzde bir flex-basis olarak
 * şeridin içerik kutusuna göre çözülür; kartın üstündeki scope wrapper'ın
 * genişliği `auto` olduğu için orada verilen yüzde çözümsüz kalırdı.
 */
.cc_g2xfyo6p_w7iAeTPp0j .collections-track > *, .cc_g2xfyo6p_w7iAeTPp0j .collections-track > * > * {
  flex: 0 0 28%;
  scroll-snap-align: start;
}

/* ==========================================================================
   Kategoriler sekmesi — ızgara
   ========================================================================== */

.cc_g2xfyo6p_w7iAeTPp0j .collections-panel-grid {
  padding: 128px var(--collections-px);
}

/*
 * Kolon sayısı global.css'teki `--grid-cols-category` merdiveninden gelir
 * (6 / 4 / 3) — tasarımın masaüstü ve mobil sayılarıyla birebir örtüşüyor.
 * Fallback'ler aynı merdiveni tekrarlar: değişken çözülmezse `repeat()`
 * geçersiz olup ızgara tek kolona düşerdi.
 */
.cc_g2xfyo6p_w7iAeTPp0j .collections-grid {
  display: grid;
  /* Tasarımda 6 × 164px + 5 × 8px = 1024px, ortalanmış. */
  grid-template-columns: repeat(var(--grid-cols-category, 6), 1fr);
  gap: 8px;
  max-width: 1024px;
  margin-inline: auto;
}

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 1023px) {
  .cc_g2xfyo6p_w7iAeTPp0j .collections-bar {
    padding-top: 48px;
    padding-bottom: 32px;
  }

  .cc_g2xfyo6p_w7iAeTPp0j .collections-panel-slider {
    padding-block: 48px;
  }

  /* Tabletde %28 kartı 200px'e kadar düşürürdü — başlık ve çipler okunmaz
     olurdu. Ritim ~2.5 karta açılıyor. */
  .cc_g2xfyo6p_w7iAeTPp0j .collections-track > *, .cc_g2xfyo6p_w7iAeTPp0j .collections-track > * > * {
    flex-basis: 40%;
  }

  .cc_g2xfyo6p_w7iAeTPp0j .collections-panel-grid {
    padding-block: 64px;
  }

  .cc_g2xfyo6p_w7iAeTPp0j .collections-grid {
    grid-template-columns: repeat(var(--grid-cols-category, 4), 1fr);
  }
}

/* ==========================================================================
   Mobil
   ========================================================================== */

@media (max-width: 767px) {
  .cc_g2xfyo6p_w7iAeTPp0j .collections {
    --collections-px: 20px;
  }

  .cc_g2xfyo6p_w7iAeTPp0j .collections-bar {
    padding-top: 32px;
    padding-bottom: 21px;
  }

  .cc_g2xfyo6p_w7iAeTPp0j .collections-panel-slider {
    padding-block: 24px;
  }

  /* Mobilde tek kart ekranı doldurur, sonraki kart yalnızca kırpılarak
     görünür — tasarımda 390px'lik alanda 371px kart. */
  .cc_g2xfyo6p_w7iAeTPp0j .collections-track > *, .cc_g2xfyo6p_w7iAeTPp0j .collections-track > * > * {
    flex-basis: 95%;
  }

  .cc_g2xfyo6p_w7iAeTPp0j .collections-panel-grid {
    /*
     * Tasarımda mobil ızgara ekran kenarına dayanır: hücrenin kendi iç boşluğu
     * (21px) görselin nefesini zaten veriyor, dışarıdan padding eklenmiyor.
     */
    padding: 20px 0;
  }

  .cc_g2xfyo6p_w7iAeTPp0j .collections-grid {
    grid-template-columns: repeat(var(--grid-cols-category, 3), 1fr);
  }
}