/*
 * Koleksiyon kartı — issue #10. Ölçüler Figma'nın 1440px çerçevesinden
 * (node 3:2775): 375×469 görsel, 8px köşe yarıçapı, başlık 16px altında,
 * çipler 8px altında.
 *
 * Kartın GENİŞLİĞİ burada tanımlanmaz — o şeridin işi (Collections/styles.css
 * → .collections-track > *, görünür alanın %28'i). Kart kendisine ayrılan yeri
 * doldurur; ölçü tek yerde durduğu için iki bileşenin kuralları çakışmaz.
 */

/*
 * Genişlik doğrudan KARTIN kendisinde. `IkasComponentRenderer` kartı iki
 * `display: contents` sarmalayıcının (kendi div'i + scope div'i) altına
 * koyuyor; kutusu olmayan bu katmanlar layout'a katılmadığı için şeridin
 * gerçek flex öğesi bu <a> elemanı. Ölçüyü üst bileşenden `> *` gibi
 * seçicilerle vermek sarmalayıcı sayısına bağımlı ve kırılgan.
 *
 * İki değer birlikte yazılıyor ki hangi katmanın flex öğesi olduğundan
 * bağımsız çalışsın:
 *   - `flex: 0 0 28%` — kart flex öğesiyse ölçü şeridin içerik kutusuna göre
 *     kesin çözülür ve `shrink: 0` sayesinde sıkışmaz (asıl hata buydu:
 *     shrink varsayılan 1 kaldığı için 4 kart büzülüp ekrana sığıyordu).
 *   - `width: calc(...)` — kart bir gün flex öğesi olmazsa da aynı ölçü.
 *     %28 × (ekran − 2×50px şerit padding'i) = 28vw − 28px.
 */
.cc_g2xfyo6p_eq0NFPnvr4 .collection-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 28%;
  width: calc(28vw - 28px);
  /* Snap hizası da burada olmalı — aynı sebeple: durak, şeridin gerçek
     flex öğesi olan bu eleman. */
  scroll-snap-align: start;
  color: var(--color-black);
  text-decoration: none;
}

.cc_g2xfyo6p_eq0NFPnvr4 .collection-card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.cc_g2xfyo6p_eq0NFPnvr4 .cc-media {
  display: block;
  overflow: hidden;
  /* Oran sabit — görsel yüklenmeden de yer kaplar, satır kaymaz. */
  aspect-ratio: 375 / 469;
  border-radius: 8px;
  background: var(--color-surface-muted);
}

.cc_g2xfyo6p_eq0NFPnvr4 .cc-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tasarımda 18/28/-0.45 ve Medium; `heading-m` token'ının ölçüleri burada
   eziliyor — Hero ve FAQ ile aynı kalıp. Token kaydı: docs/design-tokens.md */
.cc_g2xfyo6p_eq0NFPnvr4 .cc-title {
  display: block;
  margin-top: 16px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -0.45px;
}

.cc_g2xfyo6p_eq0NFPnvr4 .cc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

/* Çip yazısı tasarımda 10/10; `label` token'ı 12px olduğu için ölçü eziliyor,
   ailesi ve uppercase dönüşümü token'dan geliyor. */
.cc_g2xfyo6p_eq0NFPnvr4 .cc-tag {
  padding: 3px 6px 2px;
  border: 1px solid var(--color-black);
  border-radius: 4px;
  font-size: 10px;
  line-height: 10px;
  white-space: nowrap;
}

/* Tabletde %28 kartı ~200px'e düşürürdü; ritim ~2.5 karta açılıyor.
   %40 × (ekran − 2×32px) = 40vw − 26px. */
@media (max-width: 1023px) {
  .cc_g2xfyo6p_eq0NFPnvr4 .collection-card {
    flex-basis: 40%;
    width: calc(40vw - 26px);
  }
}

@media (max-width: 767px) {
  /* Mobilde kart ekranı doldurur, sonraki kart kırpılarak görünür.
     %95 × (ekran − 2×20px) = 95vw − 38px. */
  .cc_g2xfyo6p_eq0NFPnvr4 .collection-card {
    flex-basis: 95%;
    width: calc(95vw - 38px);
  }

  /* Tasarımda mobil başlık 16/24 — `body-l-medium` ölçüsü. */
  .cc_g2xfyo6p_eq0NFPnvr4 .cc-title {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: normal;
  }
}