/* ============================================================================
   GostProductRail — "Diğer Ürünlerimiz" sürüklenebilir ürün rayı

   Kurallar: yalnızca sınıf seçicisi (eleman seçicisi scope'lanmaz), ham
   renk/ölçü yok (hepsi var(--g-*)), gölge/cam efekti yok, köşe var(--g-radius).
   Kart genişlikleri kök stilde CSS değişkeni olarak geliyor (index.tsx):
   --rail-card-w (masaüstü) / --rail-card-w-m (mobil).
   ========================================================================= */

.cc_n2k0mxzk_1CgEUeyjLq .gpr {
  padding-top: var(--sec-pt);
  padding-bottom: var(--sec-pb);
}

/* ---------- Başlık satırı ----------
   Ayrım gölgeyle değil --g-line çizgisiyle kurulur (tasarım sistemi § 4). */

.cc_n2k0mxzk_1CgEUeyjLq .gpr__head {
  /* Alt çizgi YOK (kullanıcı: başlıkla kutuları ayıran ince gri çizgi sitede olmayacak). */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--g-gap);
  margin-bottom: var(--g-gap);
}

.cc_n2k0mxzk_1CgEUeyjLq .gpr__intro {
  min-width: 0;
}

/* Ortalı başlık: sütun düzeni, metin ve bağlantı ortada; açıklama okuma
   ölçüsünü korur (62ch) ve kendisi de ortalanır. */
.cc_n2k0mxzk_1CgEUeyjLq .gpr__head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cc_n2k0mxzk_1CgEUeyjLq .gpr__head--center .gpr__desc {
  margin-inline: auto;
}

.cc_n2k0mxzk_1CgEUeyjLq .gpr__title {
  /* Renk bölümün textColor prop'undan miras alınır — burada renk yazılmaz. */
  margin: 0;
}

.cc_n2k0mxzk_1CgEUeyjLq .gpr__desc {
  margin-top: var(--g-gap-tight);
  max-width: 62ch;
  font-size: var(--g-fs-body-sm);
}

.cc_n2k0mxzk_1CgEUeyjLq .gpr__link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  /* WCAG 2.1 AA dokunma hedefi */
  min-height: 44px;
  color: var(--g-ink);
  font-size: var(--g-fs-body-sm);
  font-weight: var(--g-w-semibold);
  line-height: 1;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: var(--g-space-1);
  border-radius: var(--g-radius);
  transition: color var(--g-dur) var(--g-ease);
}

.cc_n2k0mxzk_1CgEUeyjLq .gpr__link:hover {
  color: var(--g-accent);
}

/* ---------- Ray ----------
   Sürükleme, ok ve tıklama-eşiği davranışı DragRail içinde. Burada yalnızca
   rayın genişliği ve kart ölçüsü tanımlanır.

   Teyit edildi: DragRail, children'ı fazladan bir sarmalayıcıya ALMADAN doğrudan
   `.g-rail` (flex) izine basıyor. Dolayısıyla `.gpr__item` rayın doğrudan flex
   çocuğudur ve aşağıdaki genişlik kartın gerçek ölçüsüdür. DragRail bir gün
   children'ı sararsa bu genişlik etkisiz kalır — o durumda ölçü, rayın doğrudan
   çocuğu olan elemana taşınmalıdır. */

.cc_n2k0mxzk_1CgEUeyjLq .gpr__rail {
  width: 100%;
}

.cc_n2k0mxzk_1CgEUeyjLq .gpr__item {
  flex: 0 0 auto;
  width: var(--rail-card-w);
  max-width: 100%;
  box-sizing: border-box;
}

/* ---------- Kategori sayfası görünümü (catalogStyle) ----------
   "Tüm Ürünler" sayfasındaki kategori rafları kategori ızgarasıyla aynı
   görünür: başlık büyük harf (belge dili tr → "Slip" → "SLİP"), kart
   genişliği ızgara kolonlarından (masaüstü 4 / dizüstü 3 / mobil 2 + yandaki
   kartın kenarı görünür ki rafın kaydığı anlaşılsın). Yüzde, rayın içerik
   kutusuna göre — ray kenar boşluğunu padding ile açıp negatif margin ile
   geri aldığı için içerik kutusu bölüm kabıyla aynı genişlikte. */

.cc_n2k0mxzk_1CgEUeyjLq .gpr--catalog .gpr__title {
  text-transform: uppercase;
  /* Başlık kendi ürünlerine yakın dursun (kullanıcı, 2026-09-25): yazı
     stilinin geniş satır aralığı başlığın altına boşluk ekliyordu. */
  line-height: 1.2;
}

.cc_n2k0mxzk_1CgEUeyjLq .gpr--catalog .gpr__head {
  margin-bottom: var(--g-space-3);
}

/* Rayın üst "hale payı" (global .g-rail: 24px padding + -24px margin) düz
   kartlarda gereksiz; başlık yaklaşınca payın -24px'i başlığın altına
   biniyor, odak halkası harflerin üstüne çiziliyordu (inceleme bulgusu).
   Yalnızca odak halkası için 4px bırakılır: başlık–görsel arası 12px kalır. */
.cc_n2k0mxzk_1CgEUeyjLq .gpr--catalog .g-rail {
  padding-top: var(--g-space-1);
  margin-top: calc(var(--g-space-1) * -1);
}

/* Yazı stili seçilmemişse kategori sayfasının temel başlığı gibi ince. */
.cc_n2k0mxzk_1CgEUeyjLq .gpr--catalog .gpr__title.g-h2 {
  font-weight: var(--g-w-regular);
  letter-spacing: 0;
}

.cc_n2k0mxzk_1CgEUeyjLq .gpr--catalog .gpr__item {
  width: calc((100% - 3 * var(--rail-gap)) / 4);
}

/* İndirim rozeti — kategori ızgarasındaki rozetin (.gcat__badge) aynısı:
   görselin sol üst köşesi, vurgu zemini, karta tıklamayı engellemez. */
.cc_n2k0mxzk_1CgEUeyjLq .gpr--catalog .gpr__item {
  position: relative;
}

.cc_n2k0mxzk_1CgEUeyjLq .gpr__badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: var(--g-space-2) var(--g-space-3);
  border-radius: var(--g-radius);
  background: var(--g-accent);
  color: var(--g-accent-ink);
  font-size: var(--g-fs-meta);
  font-weight: var(--g-w-semibold);
  line-height: 1.2;
  pointer-events: none;
}

@media (max-width: 1279px) {
  .cc_n2k0mxzk_1CgEUeyjLq .gpr--catalog .gpr__item {
    width: calc((100% - 2 * var(--rail-gap)) / 3);
  }
}

@media (max-width: 1023px) {
  .cc_n2k0mxzk_1CgEUeyjLq .gpr--catalog .gpr__item {
    width: calc((100% - var(--rail-gap)) / 2.2);
  }
}

/* ---------- Ürün yok ---------- */

.cc_n2k0mxzk_1CgEUeyjLq .gpr__empty {
  margin: 0;
  padding: var(--g-gap) 0;
  font-size: var(--g-fs-body-sm);
}

/* ---------- Mobil (< 768px) — build-spec § 7 ---------- */

@media (max-width: 767px) {
  .cc_n2k0mxzk_1CgEUeyjLq .gpr {
    padding-top: var(--sec-pt-m);
    padding-bottom: var(--sec-pb-m);
  }

  .cc_n2k0mxzk_1CgEUeyjLq .gpr__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--g-gap-tight);
  }

  /* "Başlığı Ortala" mobilde de ortada kalsın: üstteki sola yaslama aynı
     özgüllükte ve sonra geldiği için ortalamayı eziyordu. */
  .cc_n2k0mxzk_1CgEUeyjLq .gpr__head--center {
    align-items: center;
  }

  .cc_n2k0mxzk_1CgEUeyjLq .gpr__item {
    width: var(--rail-card-w-m);
  }
}