/* ============================================================================
   GostCategoryTile — 3:4 editoryal kategori kartı (tasarim-sistemi.md § 5).

   Yalnızca sınıf seçicisi kullanılır (eleman seçicileri scope'lanmaz).
   Ham renk yok, gölge yok, cam efekti yok; kart bir görsel çerçevesi olduğu
   için köşe var(--g-radius-media) (20px).

   Kart, ebeveyn ızgarasının doğrudan öğesidir (renderer'ın sarmalayıcısı
   `display: contents`). Oran ebeveynden `--gcd-ratio` ile iner; gelmezse
   var(--g-ratio-editorial) devreye girer.

   Hover: görselde hafif opacity + CTA pill'inin vermilion dolgusu.
   SCALE/ZOOM ve gölge yok — ayrımı yüzey tonu, çizgi ve dolgu kurar.
   ========================================================================= */

.cc_n2k0mxzk_DDzRyQ5NeU .gct {
  /* Vurgu rengi prop'tan inline gelebilir; gelmezse marka vermilion'u. */
  --gct-accent: var(--g-accent);

  position: relative;
  display: flex;
  /* İçerik görselin ÜSTÜNDE, kartın alt kısmında durur. */
  align-items: flex-end;
  width: 100%;
  /* Oran ebeveyn ızgarasından; yoksa kartın kendi 3:4 editoryal oranı. */
  aspect-ratio: var(--gcd-ratio, var(--g-ratio-editorial));
  overflow: hidden;
  /* Görsel yoksa kalan nötr zemin. */
  background: var(--g-surface);
  /* Kartın tamamı bir görsel çerçevesi — medya köşesi geçerli (20px). */
  border-radius: var(--g-radius-media);
  color: var(--g-ink);
  text-decoration: none;
}

/* ---------- Görsel / video ---------- */

.cc_n2k0mxzk_DDzRyQ5NeU .gct__media {
  position: absolute;
  inset: 0;
  display: block;
}

.cc_n2k0mxzk_DDzRyQ5NeU .gct__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--g-dur) var(--g-ease);
}

/* Dekoratif video ve hareket-azaltma posteri <picture> sarmalayıcısı olmadan
   doğrudan kartı kaplar; kadraj object-position ile prop'tan gelir. */
.cc_n2k0mxzk_DDzRyQ5NeU .gct__backdrop {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--g-dur) var(--g-ease);
}

/* Nötr karartma — alfa değeri overlay prop'undan inline gelir. */
.cc_n2k0mxzk_DDzRyQ5NeU .gct__scrim {
  position: absolute;
  inset: 0;
  display: block;
}

/* ALTTAN SİYAH GÖLGE (kullanıcı, 2026-09-24): kartın alt %60'ında, alttan
   yukarı sönen koyu geçiş. Renk nötr is siyahı kanalı (--g-overlay-rgb) —
   marka renginden tint üretilmez. Yazı gövdesi (z-index 1) bunun ÜSTÜNDE;
   yalnızca yazısı olan medyalı kartta basılır (index.tsx). */
.cc_n2k0mxzk_DDzRyQ5NeU .gct__shade {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 60%;
  display: block;
  background-image: linear-gradient(
    to top,
    rgb(var(--g-overlay-rgb) / 0.72) 0%,
    rgb(var(--g-overlay-rgb) / 0.38) 45%,
    rgb(var(--g-overlay-rgb) / 0) 100%
  );
  pointer-events: none;
}

/* ---------- İçerik ---------- */

/* Yazılar TAM ORTALI (kullanıcı, 2026-09-24: "koleksiyon kartlarındaki
   yazılar tam ortalanacak ve hepsi büyük harf olacak"): başlık, alt başlık,
   buton ve ürün etiketi yatayda ortada; kart altında, gölgenin üstünde. */
.cc_n2k0mxzk_DDzRyQ5NeU .gct__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--g-space-2);
  width: 100%;
  padding: var(--g-gutter);
  box-sizing: border-box;
}

/* HEPSİ BÜYÜK HARF (kullanıcı, 2026-09-24). Belge dili tr: "Kadın" → "KADIN",
   "i" → "İ" doğru çevrilir. Harf aralığı büyük harf token'ından. */
.cc_n2k0mxzk_DDzRyQ5NeU .gct__title {
  color: inherit;
  max-width: 20ch;
  text-transform: uppercase;
  letter-spacing: var(--g-track-caps);
}

.cc_n2k0mxzk_DDzRyQ5NeU .gct__sub {
  text-transform: uppercase;
  letter-spacing: var(--g-track-caps);
  margin: 0;
  max-width: 32ch;
  font-size: var(--g-fs-meta);
  line-height: 1.5;
  font-weight: var(--g-w-medium);
}

/* ---------- Metin tonu ---------- */

.cc_n2k0mxzk_DDzRyQ5NeU .gct--dark {
  color: var(--g-ink);
}

.cc_n2k0mxzk_DDzRyQ5NeU .gct--dark .gct__sub {
  color: var(--g-ink-2);
}

.cc_n2k0mxzk_DDzRyQ5NeU .gct--light {
  color: var(--g-bg);
}

.cc_n2k0mxzk_DDzRyQ5NeU .gct--light .gct__sub {
  color: var(--g-bg);
}

/* ---------- Bağlantı yazısı ----------
   Kartın tamamı bağlantı olduğu için bu bir <span>; iç içe tıklanabilir eleman
   yok. Yükseklik yine 44px (metnin nefesi ve dokunma hedefi ölçüsü). */

/* CTA artık ALT ÇİZGİLİ METİN DEĞİL, bir pill buton (kullanıcı isteği:
   "çizgi olmayacak, daha belirgin ve daha güzel").
   Kart fotoğrafının üstünde duran ince bir çizgi hem zayıf hem de fotoğrafın
   dokusunda kayboluyordu; kenarlıklı pill her zeminde okunuyor.
   Hover'da pill vermilion'la DOLAR — markanın "aksiyon = vermilion" kuralı
   böylece rengi küçük alanda ve gerçek bir aksiyonda kullanır. */
.cc_n2k0mxzk_DDzRyQ5NeU .gct__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--g-space-2);
  box-sizing: border-box;
  /* 44px dokunma hedefi ölçüsü — mikro boşluk değil, bilinçli sabit. */
  min-height: 44px;
  padding-inline: var(--g-space-5);
  /* Kenarlık kartın metin tonundan gelir: açık tonlu kartta beyaz, koyu
     tonluda mürekkep — iki modda da ayrı kural yazmaya gerek kalmaz. */
  border: 1px solid currentColor;
  border-radius: var(--g-radius-media);
  color: inherit;
  font-size: var(--g-fs-meta);
  font-weight: var(--g-w-semibold);
  letter-spacing: var(--g-track-caps);
  text-transform: uppercase;
  line-height: 1;
  transition: background-color var(--g-dur) var(--g-ease),
    border-color var(--g-dur) var(--g-ease), color var(--g-dur) var(--g-ease);
}

.cc_n2k0mxzk_DDzRyQ5NeU .gct__ctaLabel {
  text-decoration: none;
}

.cc_n2k0mxzk_DDzRyQ5NeU .gct__ctaIcon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: inherit;
  transition: transform var(--g-dur) var(--g-ease);
}

/* ---------- Ürün etiketi ----------
   Bağlantı bir ürüne işaret edince çıkar: mini foto + ad + fiyat. Beyaz zemin,
   video hangi renk olursa olsun okunur (ham renk değil, tema token'ı). Kart
   zaten yayılmış bağlantıyla ürüne gidiyor; bu etiket görsel bir özet, ayrı
   buton değil. */
.cc_n2k0mxzk_DDzRyQ5NeU .gct__ptag {
  /* Kart gövdesi sola yaslı (align-items: flex-start); etiket ise KARTA
     ORTALANIR — kullanıcı isteği. `align-self: center` çipi yatayda ortalar. */
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--g-space-2);
  max-width: 100%;
  padding: var(--g-space-1);
  padding-inline-end: var(--g-space-3);
  border-radius: var(--g-radius-media);
  background: rgb(255 255 255 / 0.92);
  color: var(--g-ink);
  box-sizing: border-box;
}

.cc_n2k0mxzk_DDzRyQ5NeU .gct__ptag-img {
  flex: 0 0 auto;
  width: 40px;
  height: 50px;
  object-fit: cover;
  /* Köşe çiple İÇ İÇE (concentric): dış köşe 20px, çip iç boşluğu 4px →
     görsel köşesi 16px. Böylece yuvarlaklık çipin köşesiyle hizalı durur. */
  border-radius: calc(var(--g-radius-media) - var(--g-space-1));
  background: var(--g-surface);
}

.cc_n2k0mxzk_DDzRyQ5NeU .gct__ptag-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cc_n2k0mxzk_DDzRyQ5NeU .gct__ptag-name {
  color: var(--g-ink);
  font-size: var(--g-fs-meta);
  font-weight: var(--g-w-medium);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* İMLEÇLİ AYGIT: etiket varsayılan gizli, kartın üzerine gelince belirir.
   Dokunmatikte (hover yok) hep görünür. */
@media (hover: hover) and (pointer: fine) {
  .cc_n2k0mxzk_DDzRyQ5NeU .gct__ptag {
    opacity: 0;
    transform: translateY(4px);
    transition:
      opacity var(--g-dur) var(--g-ease),
      transform var(--g-dur) var(--g-ease);
  }

  .cc_n2k0mxzk_DDzRyQ5NeU .gct--link:hover .gct__ptag, .cc_n2k0mxzk_DDzRyQ5NeU .gct--link:focus-within .gct__ptag {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc_n2k0mxzk_DDzRyQ5NeU .gct__ptag {
    transition: none;
    transform: none;
  }
}

/* ---------- Yayılmış bağlantı ----------
   Kök artık <a> değil <div>; bağlantı kartı kaplayan görünmez bir katman.
   Ses düğmesi bunun ÜSTÜNDE kalıyor (z-index), kartın geri kalanı bağlantı. */

.cc_n2k0mxzk_DDzRyQ5NeU .gct__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Görünür metni yok — adı aria-label'dan gelir. */
  font-size: 0;
}

/* ---------- Ses düğmesi ----------
   Sağ ALT köşe (kullanıcı isteği). Metin bloğu sol altta olduğu için
   çakışmıyor. Bağlantının üstünde: z-index 2. */

.cc_n2k0mxzk_DDzRyQ5NeU .gct__sound {
  position: absolute;
  z-index: 2;
  inset-block-end: var(--g-space-2);
  inset-inline-end: var(--g-space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 32px (kullanıcı: "minik bir buton"). WCAG 2.5.8 AA'nın 24px hedef
     tabanının üstünde kalıyor; 40px kartın köşesinde iri duruyordu. */
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: var(--g-radius-circle);
  /* Videonun üstünde duruyor: hem açık hem koyu karede okunması için
     nötr koyu dolgu (marka renginden tint üretilmez). */
  background: rgb(var(--g-overlay-rgb) / 0.55);
  color: var(--g-bg);
  cursor: pointer;
  transition: background-color var(--g-dur) var(--g-ease);
}

.cc_n2k0mxzk_DDzRyQ5NeU .gct__sound:hover {
  background: rgb(var(--g-overlay-rgb) / 0.78);
}

.cc_n2k0mxzk_DDzRyQ5NeU .gct__sound svg {
  width: 15px;
  height: 15px;
}

/* ---------- Hover / odak — yalnızca bağlantılı kartta ----------
   `:focus-visible` artık kökte değil İÇERİDEKİ bağlantıda oluşuyor,
   bu yüzden `:has()` ile köke taşınıyor. Desteklemeyen tarayıcıda
   yalnızca hover geri bildirimi kalır — işlev kaybı yok. */

.cc_n2k0mxzk_DDzRyQ5NeU .gct--link:hover .gct__img, .cc_n2k0mxzk_DDzRyQ5NeU .gct--link:has(.gct__link:focus-visible) .gct__img, .cc_n2k0mxzk_DDzRyQ5NeU .gct--link:hover .gct__backdrop, .cc_n2k0mxzk_DDzRyQ5NeU .gct--link:has(.gct__link:focus-visible) .gct__backdrop {
  opacity: 0.88;
}

.cc_n2k0mxzk_DDzRyQ5NeU .gct--link:hover .gct__cta, .cc_n2k0mxzk_DDzRyQ5NeU .gct--link:has(.gct__link:focus-visible) .gct__cta {
  background: var(--gct-accent);
  border-color: var(--gct-accent);
  color: var(--g-accent-ink);
}

.cc_n2k0mxzk_DDzRyQ5NeU .gct--link:hover .gct__ctaIcon, .cc_n2k0mxzk_DDzRyQ5NeU .gct--link:focus-visible .gct__ctaIcon {
  transform: translateX(3px);
}

/* ---------- Mobil ---------- */

@media (max-width: 767px) {
  .cc_n2k0mxzk_DDzRyQ5NeU .gct__title, .cc_n2k0mxzk_DDzRyQ5NeU .gct__sub {
    max-width: none;
  }
}