/* ═══════════════════════════════════════════════════════════════
   CollectionShowcase — üstte İKİ BAĞIMSIZ kardeş kart:
     1) .cs-jersey-card  → stadyum arka planı + dönen forma vitrini
     2) .cs-promo-card   → Nike × Amedspor kampanya kartı
   Kartların sırası, genişliği, aralığı, örtüşmesi, dikey hizası ve ince
   konum kaydırmaları YALNIZCA panelden gelen CSS custom property'lerle ve
   modifier sınıflarıyla değişir — JSX kopyalanmaz, değer hard-code edilmez.

   Bölüm arka planı: ESKİ kanıtlı sistem — görsel section'ın KENDİSİNDE,
   background-size: cover (oran bozulmaz, ekranı doldurur), masaüstünde
   background-attachment: fixed → KAYAN yapı (içerik, yerinde duran
   görselin üzerinden akar). Mobilde her koşulda scroll (Safari sınırı).
   Karartma/bulanıklık katmanı YOKTUR. "Arka Plan Yakınlığı" 100 dışına
   çıkarsa boyut yükseklik-temelli (oran korunarak) büyür/küçülür.
   Yaklaşım mobile-first: temel stiller telefon, sonra 768 / 1200 ile büyür.
   ═══════════════════════════════════════════════════════════════ */

.cc_nugnohn9_5OTV4s9lpc .collection-showcase {
  /* Onaylı palet — yalnız bu bileşende kullanılır */
  --cs-green: #073B26;
  --cs-red: #B72B2E;
  --cs-gold: #C49A34;
  --cs-ink: #101512;

  position: relative;
  isolation: isolate;
  width: 100%;
  /* Kart kaydırmaları (offset) hiçbir ekranda yatay taşma yaratmasın */
  overflow: clip;
  color: var(--cs-ink);

  /* Görsel yoksa (veya Yakınlık < 100 iken kenarlarda) görünen zemin */
  background-color: #061f15;

  /* Tek arka plan görseli — mobil temel. Oran DAİMA korunur (ezilme yok):
     cover ekranı doldurur; Yakınlık 100 dışıysa TSX --cs-bg-size yazar. */
  background-image: var(--cs-bg-image-mobile, none);
  background-size: var(--cs-bg-size, cover);
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: scroll;
}

/* Tablet ve masaüstü: masaüstü görseli + KAYAN yapı (fixed) — içerik,
   yerinde duran görselin üzerinden akar. */
@media (min-width: 768px) {
  .cc_nugnohn9_5OTV4s9lpc .collection-showcase {
    background-image: var(--cs-bg-image-desktop, none);
    background-attachment: fixed;
  }
}

/* ─── İçerik katmanı ──────────────────────────────────────
   Dikey boşluklar panelden GİRİLDİYSE piksel olarak, girilmediyse ekrana
   duyarlı varsayılanla uygulanır (fallback değerleri aşağıda). */

.cc_nugnohn9_5OTV4s9lpc .cs-section-content {
  position: relative;
  z-index: 1;

  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  padding-top: var(--cs-campaign-padding-top, 3.25rem);
  padding-bottom: var(--cs-campaign-padding-bottom, 3.25rem);
  padding-inline: 0.875rem;
}

@media (min-width: 768px) {
  .cc_nugnohn9_5OTV4s9lpc .cs-section-content {
    padding-top: var(--cs-campaign-padding-top, 5rem);
    padding-bottom: var(--cs-campaign-padding-bottom, 5rem);
    padding-inline: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .cc_nugnohn9_5OTV4s9lpc .cs-section-content {
    padding-top: var(--cs-campaign-padding-top, clamp(4rem, 7vw, 7rem));
    padding-bottom: var(--cs-campaign-padding-bottom, clamp(5rem, 9vw, 9rem));
    padding-inline: clamp(1.5rem, 3vw, 3rem);
  }
}

/* ═══ OTOMATİK YERLEŞİM: ana container ═══════════════════════
   Panelden ölçü beklemez. Section doğal içerik yüksekliğindedir;
   sabit yükseklik / yapay boşluk / transform-scale YOKTUR. */
.cc_nugnohn9_5OTV4s9lpc .cs-section-content.cs-section-content--auto {
  width: min(100%, 1600px);
  margin-inline: auto;
  padding:
    clamp(2.5rem, 6vw, 6rem)
    clamp(1rem, 3vw, 3rem)
    clamp(3rem, 8vw, 7rem);
}

/* KOMPAKT KAMPANYA ŞERİDİ (≥768): bölüm iç boşlukları inceltildi — 1440'ta
   86/112px → ~56/72px; sahne scroll'da daha hafif. Mobil değer yukarıda aynen. */
@media (min-width: 768px) {
  .cc_nugnohn9_5OTV4s9lpc .cs-section-content.cs-section-content--auto {
    padding-top: clamp(2rem, 4vw, 3.5rem);
    padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  }
}

/* Küçük altın rozet — YALNIZ üründe gerçek "Yeni" etiketi varsa render edilir */
.cc_nugnohn9_5OTV4s9lpc .cs-rail-card-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1;
  padding: 0.3125rem 0.75rem;
  border-radius: 999px;
  /* KANONİK "YENİ" rozeti — Amed yeşili. Altın, mağazanın diğer etiket
     rozetlerinden (PopularProducts, LifestyleCollection) ayrışıyordu;
     altın rengi kimliğin geri kalanında premium vurgu olarak kalır. */
  background: var(--badge-new-bg, #0A6845);
  color: var(--badge-new-fg, #FFFFFF);
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════
   ÜST KAMPANYA ALANI — iki tamamen bağımsız kart

   Yerleşim iki katmanlı:
     .cs-jersey-card      → flex öğesi VE kartın kendisi
     .cs-promo-card-wrap  → flex öğesi (genişlik payı, örtüşme, kaydırma)
     .cs-promo-card       → kartın kendisi (kendi yüksekliği ve iç boşluğu)

   TASARIM SINIRI YOKTUR. Panelden gelen her değer olduğu gibi uygulanır;
   burada clamp / min / max / normalize / preset ezme YOKTUR. Masaüstü
   değerlerini ezen ara breakpoint'ler kaldırılmıştır — 768px üstünde
   kullanıcının seçtiği değer her genişlikte aynen geçerlidir.
   Telefon (<768px) yalnızca "Mobil Yerleşim: Otomatik" seçiliyken kendi
   doğal davranışını uygular; "Özel Ayarlar"da orada da kullanıcı değeri
   geçerlidir.
   ═══════════════════════════════════════════════════════════════ */

.cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout {
  position: relative;
  z-index: 1;
  width: min(var(--cs-campaign-max-width, 1460px), 100%);
  margin-inline: auto;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--cs-card-gap, 0px);
  align-items: stretch;
}

.cc_nugnohn9_5OTV4s9lpc .cs-jersey-card, .cc_nugnohn9_5OTV4s9lpc .cs-promo-card-wrap {
  position: relative;
  min-width: 0;
}

/* Her kartın kendi köşesi var; iki kart birleşik tek bir kart gibi DAVRANMAZ. */
.cc_nugnohn9_5OTV4s9lpc .cs-jersey-card {
  z-index: 1;
  width: 100%;
  background: var(--cs-green);
  border-radius: var(--cs-jersey-radius, 32px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

/* Sarmalayıcı yalnız yerleşim taşır — görsel stili YOKTUR.
   CTA artık bu sarmalayıcının içinde: editorial kart ve buton TEK sağ kolon
   olarak normal flow'da, aynı genişlikte, aralarında kontrollü boşlukla durur
   (önceden CTA ayrı bir satırda sağa yaslanmış, karttan kopuk görünüyordu). */
.cc_nugnohn9_5OTV4s9lpc .cs-promo-card-wrap {
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 1rem;
  width: 100%;
}

.cc_nugnohn9_5OTV4s9lpc .cs-promo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;

  /* Yazıların otomatik ölçeklenmesi bu satıra dayanır: kart, kendi
     genişliğini ölçen bir boyut kaynağı olur. */
  container-type: inline-size;

  width: 100%;
  padding: var(--cs-promo-padding-y, 36px) var(--cs-promo-padding-x, 56px);
  overflow: hidden;

  /* ORTAK EDITORIAL KART SİSTEMİ (global.css) — FanJerseyShowcase ve
     LifestyleCollection kartlarıyla aynı yüzey/çizgi/gölge/radius.
     Eski camsı beyaz + backdrop-blur yüzey kaldırıldı: üç kart yan yana
     gri/sarı/beyaz olarak ayrışıyordu. Zemin katmanı (::before) da aynı
     sıcak krem yüzeye çekildi. */
  color: var(--editorial-title-color, #073b26);
  background: var(--editorial-card-bg);
  border: var(--editorial-card-border);
  border-radius: var(--cs-promo-radius, var(--editorial-card-radius-lg));
  box-shadow: var(--editorial-card-shadow-lg);
}

/* Kart zemini: MERKEZ parlak beyaz → kenarlara doğru camlaşır (radyal) —
   yazının olduğu orta alan aydınlık kalır, kenarlar arkadaki motifi blur
   ile hafifçe gösterir. Saydamlık YALNIZ bu katmana uygulanır — yazılar
   hiçbir zaman opacity nedeniyle solmaz. */
/* Zemin katmanı ortak editorial yüzeyle aynı; panelden gelen opaklık
   knob'u (--cs-promo-opacity) korunur ama artık saydam cam üretmez. */
.cc_nugnohn9_5OTV4s9lpc .cs-promo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--editorial-card-bg);
  opacity: var(--cs-promo-opacity, 1);
}

/* ── MOBİLDE forma sahnesi gizli (varsayılan): stadyum kartı, formalar,
   oklar ve noktalar mobilde hiç GÖRÜNMEZ; Nike × Amedspor kartı bölümün
   üst içeriği olur, ürün rayı hemen altında sürer. Boş alan kalmaz.
   Masaüstü/tablet sahnesi aynen korunur. ── */
@media (max-width: 767px) {
  .cc_nugnohn9_5OTV4s9lpc .cs--no-mobile-scene .cs-jersey-card {
    display: none;
  }
  .cc_nugnohn9_5OTV4s9lpc .cs--no-mobile-scene .cs-section-content {
    padding-top: var(--cs-campaign-padding-top, 2.25rem);
  }
}

/* ── Dikey sıra (telefon + "Alt alta" düzeni) ── */
.cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--order-jersey-first .cs-jersey-card { order: 1; }
.cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--order-jersey-first .cs-promo-card-wrap { order: 2; }
.cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--order-promo-first .cs-promo-card-wrap { order: 1; }
.cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--order-promo-first .cs-jersey-card { order: 2; }

/* ═══ Telefon: Otomatik yerleşim ═══════════════════════════
   Kartlar alt alta, tam genişlikte, içerik kadar yükseklikte. */
@media (max-width: 767px) {
  /* NOT: mobil sahne yüksekliğinin GERÇEK kaynağı aşağıdaki
     `.collection-showcase .cs-jersey-card` kuralıdır (dosyanın sonunda,
     aynı özgüllük + daha sonra geldiği için kazanır). Buradaki oran yalnız
     eski kurulumlar için fallback'tir. */
  .cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--mobile-auto .cs-jersey-card {
    height: auto;
    aspect-ratio: 4 / 3;
    transform: none;
  }

  .cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--mobile-auto .cs-promo-card-wrap {
    width: 100%;
    margin: 0;
    transform: none;
  }

  .cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--mobile-auto .cs-promo-card {
    height: auto;
    padding: 1.5rem; /* ortak mobil editorial temel (~24px) */
  }
}

/* Mobil: kampanya metin kartı ortak editorial ailede — OPAK sıcak krem,
   blur YOK (masaüstündeki radyal cam görünümü aynen korunur). */
@media (max-width: 767px) {
  .cc_nugnohn9_5OTV4s9lpc .cs-promo-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .cc_nugnohn9_5OTV4s9lpc .cs-promo-card::before {
    background: linear-gradient(
      145deg,
      rgba(255, 254, 248, 0.99),
      rgba(244, 242, 233, 0.98)
    );
  }
  /* Kampanya kartı ile ürün rayı arası: 28px → 32px (dört rayda ortak
     editorial→ray nefesi; bölüm gereksiz uzamadan ayrım netleşir). */
  .cc_nugnohn9_5OTV4s9lpc .cs-section-content--auto .cs-products {
    margin-top: var(--m-editorial-rail-gap, clamp(100px, 28vw, 130px));
  }
}

/* ═══ Telefon: Özel ayarlar ════════════════════════════════
   Panelden gelen mobil değerler doğrudan uygulanır. */
@media (max-width: 767px) {
  .cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--mobile-custom .cs-jersey-card {
    height: var(--cs-m-jersey-height, 300px);
    aspect-ratio: auto;
  }

  .cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--mobile-custom .cs-promo-card-wrap {
    width: var(--cs-m-promo-width, 94%);
    margin-inline: auto;
    transform: translate(
      var(--cs-m-promo-offset-x, 0px),
      var(--cs-m-promo-offset-y, 0px)
    );
  }

  /* min-height: kampanya kartı telefonda içerik yüksekliğine göre büyür */
  .cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--mobile-custom .cs-promo-card {
    min-height: var(--cs-m-promo-height, 160px);
    padding: var(--cs-m-promo-padding, 28px);
  }

  /* Örtüşme: sıradaki ikinci kart yukarı çekilir. */
  .cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--mobile-custom.cs-campaign-layout--order-jersey-first
    .cs-promo-card-wrap {
    margin-top: calc(var(--cs-m-card-overlap, 0px) * -1);
  }

  .cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--mobile-custom.cs-campaign-layout--order-promo-first
    .cs-jersey-card {
    margin-top: calc(var(--cs-m-card-overlap, 0px) * -1);
  }
}

/* ═══ MANUEL MOD — 768px ve üstü: kullanıcı değerleri aynen uygulanır ═══
   Bu blok tek masaüstü breakpoint'idir ve YALNIZ .cs-campaign-layout--manual
   altında çalışır. Auto mod bu değerlerin hiçbirini okumaz. */
@media (min-width: 768px) {
  .cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--manual .cs-jersey-card {
    height: var(--cs-jersey-height, 520px);
    aspect-ratio: auto;
    transform: translate(
      var(--cs-jersey-offset-x, 0px),
      var(--cs-jersey-offset-y, 0px)
    );
  }

  .cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--manual .cs-promo-card-wrap {
    transform: translate(
      var(--cs-promo-offset-x, 0px),
      var(--cs-promo-offset-y, 0px)
    );
  }

  /* min-height: kullanıcının seçtiği yükseklik korunur, ama içerik büyürse
     kart metni kırpmak yerine içerik kadar uzar (taşma güvencesi). */
  .cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--manual .cs-promo-card {
    min-height: var(--cs-promo-height, 220px);
  }

  /* ── Yan yana düzen ── */
  .cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--side-by-side {
    flex-direction: row;
    align-items: var(--cs-cards-align, center);
  }

  /* flex-shrink KAPALI: kartlar seçilen genişliğin altına indirilmez.
     Toplam %100'ü aşarsa taşma kullanıcının bilinçli tercihidir. */
  .cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--side-by-side .cs-jersey-card {
    order: 1;
    flex: 0 0 var(--cs-jersey-width, 62%);
    width: var(--cs-jersey-width, 62%);
  }

  .cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--side-by-side .cs-promo-card-wrap {
    order: 2;
    flex: 0 0 var(--cs-promo-width, 46%);
    width: var(--cs-promo-width, 46%);
    margin-left: calc(var(--cs-card-overlap, 0%) * -1);
    margin-right: 0;
  }

  /* Forma kartı sağda: sıra CSS order ile döner, JSX aynı kalır. */
  .cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--side-by-side.cs-campaign-layout--jersey-right .cs-jersey-card {
    order: 2;
  }

  .cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--side-by-side.cs-campaign-layout--jersey-right .cs-promo-card-wrap {
    order: 1;
    margin-left: 0;
    margin-right: calc(var(--cs-card-overlap, 0%) * -1);
  }
}


/* ═══════════════════════════════════════════════════════════════
   OTOMATİK YERLEŞİM — kart düzeni

   Hiçbir panel geometri değişkeni okunmaz; tüm ölçüler ekrana göre
   kendiliğinden hesaplanır:
     • ≥900px  → grid: forma kartı ~%65 (16/9), kampanya kartı ince
                 yatay panel olarak sağdan biner, dikey ortalı.
     • ≤899px  → alt alta: forma kartı tam genişlik (16/10), kampanya
                 kartı alttan kontrollü biner, içerik yüksekliğinde.
     • ≤640px  → forma kartı 4/3'e yaklaşır, ray kayar.
   ═══════════════════════════════════════════════════════════════ */

.cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--auto {
  width: 100%;
}

/* Mobil temel (tablet dahil ≤899): kartlar alt alta */
.cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--auto .cs-jersey-card {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  min-width: 0;
  overflow: hidden;
  border-radius: clamp(1.5rem, 2.2vw, 2.25rem);
}

.cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--auto .cs-promo-card-wrap {
  position: relative;
  z-index: 2;
  width: calc(100% - 2rem);
  margin: -2rem auto 0;
}

.cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--auto .cs-promo-card {
  width: 100%;
  min-height: auto;
  padding: clamp(1.5rem, 5vw, 2.5rem);
  border-radius: clamp(1.5rem, 2.2vw, 2.25rem);
  box-shadow: 0 22px 55px rgba(0, 32, 20, 0.15);
}

/* Alttan binen kart carousel kontrollerini kapatmasın */
.cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--auto .cs-card-visual .cs-jersey-controls {
  bottom: 3rem;
}

@media (max-width: 640px) {
  .cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--auto .cs-jersey-card {
    aspect-ratio: 4 / 3;
    border-radius: 1.5rem;
  }

  .cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--auto .cs-promo-card-wrap {
    width: calc(100% - 1rem);
    margin-top: -1.25rem;
  }

  .cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--auto .cs-promo-card {
    border-radius: 1.5rem;
  }

  .cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--auto .cs-card-visual .cs-jersey-controls {
    bottom: 2.25rem;
  }
}

/* Masaüstü: iki kart otomatik grid'de; kampanya kartı sağdan %12 biner */
@media (min-width: 900px) {
  .cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--auto {
    display: grid;
    grid-template-columns:
      minmax(0, 1.55fr)
      minmax(340px, 0.85fr);
    align-items: center;
    margin-inline: auto;
  }

  /* YATAY EDITORIAL SAHNE: 16/9 → 2/1 (1440'ta ~470px → ~420px; sahne
     kompozisyonu cover arka plan + kartın yüzdelik forma katmanı olduğu için
     oran serbest, formalar kartla ölçeklenir, kesilmez). Taban yükseklik dar
     masaüstünde formaların nefesini korur. */
  .cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--auto .cs-jersey-card {
    aspect-ratio: 2 / 1;
    min-height: 420px;
  }

  .cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--auto .cs-promo-card-wrap {
    width: calc(100% + 12%);
    margin: 0 0 0 -12%;
  }

  /* İnce yatay premium panel: yükseklik İÇERİKTEN (kompakt varyant, min-height
     yok); dolgu kanonik kompakt token; radius ortak. Genişlik bandı korunur. */
  .cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--auto .cs-promo-card {
    min-height: 0;
    padding: var(--promo-card-padding-compact);
    border-radius: var(--editorial-card-radius-lg);
  }

  .cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--auto .cs-card-visual .cs-jersey-controls {
    bottom: 1.625rem;
  }
}


/* ═══════════════════════════════════════════════════════════════
   FORMA KARTI İÇİ — stadyum görseli + forma vitrini
   (.cs-card-visual kartın tamamını kaplar; forma konumları buna göredir)
   ═══════════════════════════════════════════════════════════════ */

.cc_nugnohn9_5OTV4s9lpc .cs-card-visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--cs-green);
}

.cc_nugnohn9_5OTV4s9lpc .cs-card-visual-picture {
  position: absolute;
  inset: 0;
  display: block;
}

.cc_nugnohn9_5OTV4s9lpc .cs-card-visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Görselin hangi kısmının kartta kalacağı panelden ayarlanır */
  object-position: var(--cs-jersey-bg-pos-x, 50%) var(--cs-jersey-bg-pos-y, 50%);
  display: block;
  /* FINAL PASS 5A/5B: saturate(0.95) kaldırıldı — ürün renkleri DOĞAL kalır
     (kırmızı forma solmaz); tek görselde stadyum+forma olan kurulumda da
     forma pikselleri desatüre edilmez. Hafif parlaklık desteği korunur. */
  filter: brightness(1.06);
}

/* Alt kenarda ÇOK LOKAL derinlik gradyanı — yalnız zemin/çim bandını
   toprak tonuna oturtur; FORMA GÖVDELERİNE TAŞMAZ (FINAL PASS 5A:
   0.35/45% global karartma ürünü söndürüyordu). */
.cc_nugnohn9_5OTV4s9lpc .cs-card-visual-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(4, 14, 9, 0.22) 0%,
    rgba(4, 14, 9, 0) 22%
  );
}

/* Atmosfer: yalnız alt-orta SICAK ışık (aydınlatır, karartmaz).
   FINAL PASS 5A: kenar vignette kaldırıldı — tek-görsel kurulumda forma
   kollarını karartıyordu; ürün katmanı üzerine koyu katman istenmiyor. */
.cc_nugnohn9_5OTV4s9lpc .cs-card-visual-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 78%,
    rgba(255, 247, 210, 0.13) 0%,
    rgba(255, 247, 210, 0.05) 35%,
    transparent 67%
  );
}

/* ─── Formalar: aktif olan ortada en büyük ve önde ────────── */

.cc_nugnohn9_5OTV4s9lpc .cs-card-jerseys {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* FINAL PASS 5A: çim ön plan gradyanı (::after) KALDIRILDI — forma
   piksellerinin ÜSTÜNE yeşil/koyu ton bindiriyordu; ürün katmanına overlay
   yasak. Formaları zemine oturtma işi temas gölgelerinde kalır. */

/* Pozisyon wrapper'ı: temas gölgesi + forma görselini taşır. Tüm konumlar
   left + translateX ile tanımlıdır (right property animlenemezdi). */
.cc_nugnohn9_5OTV4s9lpc .cs-jersey-pos {
  position: absolute;
  display: block;
  text-decoration: none;
  transition:
    left 460ms cubic-bezier(0.22, 1, 0.36, 1),
    bottom 460ms cubic-bezier(0.22, 1, 0.36, 1),
    width 460ms cubic-bezier(0.22, 1, 0.36, 1),
    height 460ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 460ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 460ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Ürün linki olan formalar tıklanabilir — carousel'i etkilemez */
.cc_nugnohn9_5OTV4s9lpc .cs-jersey-pos--linked {
  pointer-events: auto;
  cursor: pointer;
}

.cc_nugnohn9_5OTV4s9lpc .cs-jersey-pos--linked:focus-visible {
  outline: 2px solid var(--cs-gold);
  outline-offset: 4px;
}

/* Hover: yalnız çok hafif yükselme/scale — GÖRSELDE, pozisyon transformuna
   dokunmadan (wrapper transform'u konum için ayrılmıştır) */
.cc_nugnohn9_5OTV4s9lpc .cs-jersey-pos--linked:hover .cs-jersey-image {
  transform: translateY(var(--lift-hover)) scale(1.02);
}

.cc_nugnohn9_5OTV4s9lpc .cs-jersey-image {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center bottom;
  transform-origin: center bottom;
  filter:
    drop-shadow(0 20px 17px rgba(0, 0, 0, 0.22))
    drop-shadow(0 6px 6px rgba(0, 0, 0, 0.11));
  transition: transform 200ms ease;
}

/* Zemin temas gölgesi — formayı çime oturtur; şiddeti role göre değişir */
.cc_nugnohn9_5OTV4s9lpc .cs-jersey-contact-shadow {
  position: absolute;
  left: 50%;
  bottom: 1.5%;
  transform: translateX(-50%);
  width: 66%;
  height: 6%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  filter: blur(13px);
  opacity: 0.62;
  pointer-events: none;
  z-index: 0;
}

.cc_nugnohn9_5OTV4s9lpc .cs-jersey-pos--center .cs-jersey-contact-shadow {
  width: 72%;
  opacity: 0.68;
}

.cc_nugnohn9_5OTV4s9lpc .cs-jersey-pos--left .cs-jersey-contact-shadow, .cc_nugnohn9_5OTV4s9lpc .cs-jersey-pos--right .cs-jersey-contact-shadow {
  width: 61%;
  opacity: 0.52;
}

/* Gizli formanın gölgesi de görünmez */
.cc_nugnohn9_5OTV4s9lpc .cs-jersey-pos--hidden .cs-jersey-contact-shadow {
  opacity: 0;
}

/* ── Sahne rolleri (mobil temel): büyük merkez + iki küçük/derin yan ── */

/* MOBİL HERO KALİBRASYONU: ana forma sahnenin baskın ürünü olsun.
   ÖLÇÜLDÜ (375/390/430): forma görselleri ~0.845 oranında, kutu oranı ise
   ~0.56 → `object-fit: contain` altında GENİŞLİK sınırlayıcıdır; görünür
   ölçek doğrudan `width`ten gelir (yükseklik payı görseli büyütmez).
   Bu yüzden: genişlik %52 → %58 (≈ +%11.5 görünür büyüme) ve taban
   %6 → %12 (≈ +25px yukarı). Yükseklik %74 → %80 yalnız dikey pay bırakır
   (daha dikey bir görsel gelirse kırpılmaz). `object-position: center bottom`
   sayesinde görsel kutunun altına yaslanır → kırpma matematiksel olarak
   imkânsız. Oranlar yüzde olduğu için üç viewport'ta da aynı kompozisyon —
   tek viewport pixel hack YOK. Yan formalar ve masaüstü değişmedi. */
.cc_nugnohn9_5OTV4s9lpc .cs-jersey-pos--center {
  left: 50%;
  bottom: 12%;
  /* Sahne 3/4'e uzatıldıktan sonra formalar oransal küçük kalıyordu:
     merkez %58 → %68 (≈ +%17 görünür ölçek). Genişlik sınırlayıcı olduğu
     için ölçek doğrudan buradan gelir; `object-position: center bottom` +
     yükseklik payı sayesinde kırpma olmaz. */
  width: 68%;
  height: 80%;
  transform: translateX(-50%) translateY(-0.375rem) scale(1.02);
  transform-origin: center bottom;
  z-index: 5;
}

.cc_nugnohn9_5OTV4s9lpc .cs-jersey-pos--left {
  /* Yan formalar da orantılı büyür (%27 → %31); merkez genişlediği için
     birer tık dışa alınır, kompozisyon kapanmaz. */
  left: -4%;
  bottom: 14%;
  width: 31%;
  height: 48%;
  transform: translateX(0) translateY(-0.5rem) scale(0.86);
  transform-origin: center bottom;
  opacity: 0.95;
  z-index: 3;
}

.cc_nugnohn9_5OTV4s9lpc .cs-jersey-pos--right {
  left: 104%;
  bottom: 14%;
  width: 31%;
  height: 48%;
  transform: translateX(-100%) translateY(-0.5rem) scale(0.86);
  transform-origin: center bottom;
  opacity: 0.95;
  z-index: 3;
}

/* Dördüncü ürün: tamamen gizli — hayalet/yaka görüntüsü YOK. */
.cc_nugnohn9_5OTV4s9lpc .cs-jersey-pos--hidden {
  left: 50%;
  bottom: 10%;
  width: 30%;
  height: 56%;
  transform: translateX(-50%) scale(0.72);
  transform-origin: center bottom;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  pointer-events: none;
  transition:
    left 460ms cubic-bezier(0.22, 1, 0.36, 1),
    bottom 460ms cubic-bezier(0.22, 1, 0.36, 1),
    width 460ms cubic-bezier(0.22, 1, 0.36, 1),
    height 460ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 460ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms ease,
    visibility 0s linear 180ms;
}

/* ── Masaüstü/tablet rol ölçüleri ── */
@media (min-width: 768px) {
  .cc_nugnohn9_5OTV4s9lpc .cs-jersey-pos--center {
    bottom: 8%;
    width: 42%;
    height: 78%;
    transform: translateX(-50%) translateY(-0.625rem) scale(1.04);
  }

  .cc_nugnohn9_5OTV4s9lpc .cs-jersey-pos--left {
    left: 7%;
    bottom: 16%;
    width: 26%;
    height: 54%;
    transform: translateX(0) translateY(-1rem) scale(0.84);
    opacity: 1;
  }

  .cc_nugnohn9_5OTV4s9lpc .cs-jersey-pos--right {
    /* right: 7% eşleniği — sağ kenar %93'te */
    left: 93%;
    bottom: 16%;
    width: 26%;
    height: 54%;
    transform: translateX(-100%) translateY(-1rem) scale(0.84);
    opacity: 1;
  }

  .cc_nugnohn9_5OTV4s9lpc .cs-jersey-pos--hidden {
    bottom: 12%;
    width: 30%;
    height: 60%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc_nugnohn9_5OTV4s9lpc .cs-jersey-pos, .cc_nugnohn9_5OTV4s9lpc .cs-jersey-image {
    transition: none;
  }
}

/* ─── Forma kontrolleri: [sol ok] [● ● ●] [sağ ok] ─────────
   Kontrollerin üzeri HİÇBİR düzende kampanya kartıyla kapanmaz:
   • Yan yana düzen → kampanya kartı yandan biner, kontroller alt köşede kalır.
     Forma kartı sağdayken kontroller sağ alta geçer.
   • Alt alta / telefon → kampanya kartı ALTTAN biner, kontroller örtüşme
     kadar yukarı kalkar. */

.cc_nugnohn9_5OTV4s9lpc .cs-jersey-controls {
  position: absolute;
  left: 1rem;
  right: auto;
  bottom: 1rem;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--order-jersey-first .cs-jersey-controls {
  bottom: calc(1rem + var(--cs-card-overlap-stack, 0px));
}

@media (min-width: 768px) {
  .cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout .cs-jersey-controls {
    left: 1.75rem;
    bottom: 1.625rem;
  }

  .cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--stacked.cs-campaign-layout--order-jersey-first
    .cs-jersey-controls {
    bottom: calc(1.625rem + var(--cs-card-overlap-stack, 0px));
  }

  .cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--side-by-side.cs-campaign-layout--jersey-right
    .cs-jersey-controls {
    left: auto;
    right: 1.75rem;
  }
}

/* ORTAK CAROUSEL KONTROL STANDARDI: 44/46px krem daire, koyu Amed yeşili
   ikon, blur yok. Görsel içindeki konum korunur. */
.cc_nugnohn9_5OTV4s9lpc .cs-jersey-arrow {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid rgba(10, 72, 48, 0.16);
  color: #0A4A32;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(48, 42, 30, 0.12);
  transition: transform 200ms ease, background-color 200ms ease,
    border-color 200ms ease, box-shadow 200ms ease;
}

@media (min-width: 768px) {
  .cc_nugnohn9_5OTV4s9lpc .cs-jersey-arrow {
    width: 46px;
    height: 46px;
  }
}

.cc_nugnohn9_5OTV4s9lpc .cs-jersey-arrow:hover {
  transform: translateY(-1px);
  background: #ffffff;
  border-color: rgba(10, 72, 48, 0.32);
  box-shadow: 0 8px 20px rgba(48, 42, 30, 0.16);
}

.cc_nugnohn9_5OTV4s9lpc .cs-jersey-arrow:active {
  transform: scale(0.97);
}

.cc_nugnohn9_5OTV4s9lpc .cs-jersey-arrow:focus-visible {
  outline: 2px solid #0A6845;
  outline-offset: 3px;
}

/* ORTAK PAGINATION STANDARDI: pasif 6px sıcak nokta, aktif 18×6 koyu
   yeşil pill (foto üstünde ayrışması için ince krem ring). */
.cc_nugnohn9_5OTV4s9lpc .cs-jersey-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Hero forma geçiş göstergesi — FanJerseyShowcase sahne göstergesiyle AYNI
   dil. FARK ARKA PLANDAN geliyordu: Fan'ın zemini koyu, buradaki zemin ise
   açık yeşil çim/stadyum → krem %70 pasif noktalar zeminde kayboluyor,
   aktif pill'in ince beyaz halkası ise yeşilin üstünde çember gibi öne
   fırlıyordu. Pasif noktalar opaklaştırıldı ve her iki duruma zeminden
   ayıran yumuşak bir gölge verildi; halka kaldırıldı. Ölçü/geometri
   (6px nokta, aktif 18×6 pill) DEĞİŞMEDİ. */
.cc_nugnohn9_5OTV4s9lpc .cs-jersey-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(248, 246, 240, 0.92);
  box-shadow: 0 1px 3px rgba(6, 24, 15, 0.35);
  cursor: pointer;
  transition: background-color 200ms ease, width 200ms ease;
}

.cc_nugnohn9_5OTV4s9lpc .cs-jersey-dot:hover {
  background: #FFFFFF;
}

.cc_nugnohn9_5OTV4s9lpc .cs-jersey-dot.is-active {
  background: #0A6845;
  width: 18px;
  box-shadow: 0 1px 4px rgba(6, 24, 15, 0.4);
}

/* Klavye halkası zeminden bağımsız okunur (yeşil üstüne yeşil halka
   çember etkisi yaratıyordu) — açık kontur + ince dış hat. */
.cc_nugnohn9_5OTV4s9lpc .cs-jersey-dot:focus-visible {
  outline: 2px solid #F8F6F0;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cc_nugnohn9_5OTV4s9lpc .cs-jersey-arrow, .cc_nugnohn9_5OTV4s9lpc .cs-jersey-dot {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   KAMPANYA KARTI İÇİ — yazılar

   İki mod vardır ve ikisi de panelden seçilir:
     .cs-promo-card--type-auto    → yazılar kartın genişliğine göre
                                    kendiliğinden ölçeklenir (cqw)
     .cs-promo-card--type-manual  → her boyut panelden gelen değerdir;
                                    kod bu değerleri DEĞİŞTİRMEZ

   Blok aralıkları (marka/etiket/başlık/açıklama/buton) her iki modda da
   panelden ayrı ayrı ayarlanır.
   ═══════════════════════════════════════════════════════════════ */

/* ≥768: yerleşim global .amed-promo-content ızgarası (tek sözleşme); mobil
   mevcut flex sütunu korunur. Panel hizası (--cs-promo-items) ızgarada
   justify-items ile aynen uygulanır. */
.cc_nugnohn9_5OTV4s9lpc .cs-promo-card-inner {
  position: relative;
  z-index: 1;
  text-align: var(--cs-promo-align, left);
  width: 100%;
  min-width: 0;
}

@media (max-width: 767px) {
  .cc_nugnohn9_5OTV4s9lpc .cs-promo-card-inner {
    display: flex;
    flex-direction: column;
    align-items: var(--cs-promo-items, flex-start);
  }
}

@media (min-width: 768px) {
  .cc_nugnohn9_5OTV4s9lpc .cs-promo-card-inner.amed-promo-content {
    justify-items: var(--cs-promo-items, start);
  }
  /* CTA slotu satır 5: sarmalayıcı genişliği içerik kadar, sol hiza */
  .cc_nugnohn9_5OTV4s9lpc .cs-collection-cta.amed-promo-cta-slot {
    width: auto;
    margin-top: 0;
  }
}

/* ─── İçerik sırası: eyebrow → kısa çizgiler → iki satırlı büyük başlık ── */

/* Koleksiyon etiketi: küçük punto, geniş harf aralığı, yeşil (referans B) */
/* Eyebrow tipografisi: global .amed-promo-eyebrow (tek kaynak) */
.cc_nugnohn9_5OTV4s9lpc .cs-promo-eyebrow {
  margin: 0 0 var(--cs-eyebrow-margin-bottom, 0px);
}

/* Dekoratif detay: eşit boyda kısa YEŞİL + KIRMIZI çizgi ("Şehirde Amed"
   ailesi — kulüp renkleri). FINAL POLISH: gap/margin/radius artık ortak
   editorial accent tokenlarından — FanJerseyShowcase ve LifestyleCollection
   ile birebir aynı ritim (önceden yerel clamp + 999px pill ayrışıyordu). */
/* Vurgu çizgileri: PromoAccentLines + global .amed-promo-lines (tek kaynak) */

/* Marka başlığı: TEK SATIR yan yana — "Şehirde Amed" başlık karakteri.
   NIKE koyu, × altın, AMEDSPOR Amed yeşili. cqw ölçüsü kartla birlikte
   otomatik büyür/küçülür; tek satır asla bölünmez. */
/* Aile/ağırlık: global .amed-promo-title; marka satırına özgü ölçü/aralık burada */
.cc_nugnohn9_5OTV4s9lpc .cs-promo-brand {
  display: flex;
  align-items: baseline;
  margin: 0;
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  white-space: nowrap;
  /* NEGATİF TAKİP TELAFİSİ: `letter-spacing` SON harften sonra da uygulanır,
     yani satırın advance genişliği çizilen mürekkepten 0.045em DAR ölçülür ve
     "AMEDSPOR"un son R'si kutunun dışına taşarak kırpılmış görünür. Bu payı
     geri verir — glif ölçüsü/konumu değişmez, yalnız kutu doğru genişler. */
  padding-inline-end: 0.045em;
}

/* NIKE: çok koyu, siyaha yakın yeşil (referanstaki ŞEHİRDE karşılığı) */
.cc_nugnohn9_5OTV4s9lpc .cs-promo-brand-nike {
  color: #14251E;
}

/* AMEDSPOR: Amed koyu yeşili — panel Yazı Rengi ile yönetilir */
.cc_nugnohn9_5OTV4s9lpc .cs-promo-brand-amed {
  color: var(--cs-promo-text, #073B26);
}

/* × işareti: altın, markalardan biraz küçük, iki yanda eşit boşluk,
   büyük harflerin dikey merkezine TAM oturur */
/* "×" OPTİK HİZASI — kutu merkezleri zaten hizalıydı (fark 0.6–0.7px), sorun
   MÜREKKEP hizasıydı: caps mürekkebi taban çizgisi–cap yüksekliği arasında,
   "×" ise matematik ekseni çevresinde oturur. Canvas mürekkep ölçümü (390px,
   font 27.456px): NIKE mürekkep merkezi 426.12, × merkezi 428.51 → × 2.39px
   AŞAĞIDA = 0.087em. Mevcut kural bunu +0.04em ile daha da aşağı itiyordu. */
.cc_nugnohn9_5OTV4s9lpc .cs-promo-brand-x {
  display: inline-block;
  align-self: center;
  /* ASİMETRİK — kasıtlı. Satırın `letter-spacing: -0.045em`'i NIKE'ın SON
     harfinden sonra da uygulanıyor, "×" ise `letter-spacing: normal`; ayrıca
     "E"nin sağ ve "A"nın sol yan boşlukları farklı. Ölçüm (390px): mürekkep
     boşluğu solda 6.81px, sağda 9.83px → × NIKE'a 3.02px yakın. Toplam boşluk
     korunarak 0.095em sola kaydırılır; masaüstünde de aynı fark vardı. */
  margin-left: 0.335em;
  margin-right: 0.145em;
  font-family: var(--font-label);
  font-size: 0.62em;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  /* -0.085em geometrik mürekkep merkezini eşitliyor ama gerçek önizlemede ×
     hâlâ yüksek okunuyordu (× glifi kendi em kutusunda matematik ekseninde
     oturur). Kullanıcı geri bildirimine göre kontrollü ~1px aşağı alındı. */
  transform: translateY(-0.05em);
}

/* ─── Otomatik boyutlandırma ──────────────────────────────
   Ölçü birimi kartın İÇERİK genişliğidir (cqw, padding hariç): tek satır
   başlık her kart boyutunda içeriğin ~%90'ını dolduracak şekilde ölçeklenir.
   Ek breakpoint gerekmez — oran her genişlikte kendini korur. */

.cc_nugnohn9_5OTV4s9lpc .cs-promo-card--type-auto .cs-promo-brand {
  /* Kartın ana görsel odağı; tavanı kanonik başlık bandı (global --promo-title-max) */
  font-size: min(clamp(1.7rem, 10.4cqw, 5rem), var(--promo-title-max, 3.5rem));
}

.cc_nugnohn9_5OTV4s9lpc .cs-promo-card--type-auto .cs-promo-eyebrow {
  margin: 0;
}

/* Çok dar ekran: etiket gerekirse iki kontrollü satıra sarar */
@media (max-width: 640px) {
  .cc_nugnohn9_5OTV4s9lpc .cs-promo-card--type-auto .cs-promo-eyebrow {
    white-space: normal;
  }
}

/* ─── Manuel boyutlandırma ────────────────────────────────
   Panelden gelen değer doğrudan uygulanır; kod ne küçültür ne büyütür. */

.cc_nugnohn9_5OTV4s9lpc .cs-promo-card--type-manual .cs-promo-brand {
  /* FINAL PASS 5D: panel px değeri KONTEYNER tavanıyla sınırlanır — dar
     kartta "NIKE × AMEDSPOR" tek satırda kalır, taşmaz/kırpılmaz.
     8.6cqw tavanı, manuel modun geniş harf aralığı (vars. 0.18em) hesaba
     katılarak auto modun 10.4cqw kalibrasyonundan türetildi. Masaüstünde
     (geniş kart) min() her zaman panel değerini seçer — davranış değişmez. */
  font-size: min(var(--cs-promo-brand-size, 17px), 8.6cqw);
  letter-spacing: var(--cs-promo-brand-letter-spacing, 0.18em);
}

.cc_nugnohn9_5OTV4s9lpc .cs-promo-card--type-manual .cs-promo-eyebrow {
  font-size: var(--cs-promo-eyebrow-size, 15px);
  letter-spacing: var(--cs-promo-eyebrow-letter-spacing, 0.16em);
}


/* ═══════════════════════════════════════════════════════════════
   ÜRÜN VİTRİNİ — kartların hemen altında, aynı motifli arka plan
   üzerinde yatay ürün rayı. Krem kartlar, contain görsel, altta fiyat.
   ═══════════════════════════════════════════════════════════════ */

/* Ray konum göstergesi: TEK paylaşımlı MobileCarouselPagination (stil global.css; dark ton, tablete kadar görünür). */

.cc_nugnohn9_5OTV4s9lpc .cs-products {
  width: min(var(--cs-campaign-max-width, 1460px), 100%);
  margin-inline: auto;
  /* ORTAK NEFES tokeni — FanJerseyShowcase ile aynı ritim */
  margin-top: var(--section-rail-gap, clamp(2rem, 6vw, 6.5rem));
}

/* ── Koleksiyon CTA'sı: editorial kartın ALTI, ürün rayının ÜSTÜ ──
   Kampanya bloğuyla AYNI genişlik kutusunda durur; böylece buton
   editorial kartın sağ ekseniyle hizalanır. Kart ile arası 24–36px,
   ray ile arası 48–72px (ray kendi margin-top'unu koruduğu için burada
   yalnız üst boşluk verilir ve ray boşluğu ezilmez). */
/* CTA editorial kartın İÇİNDE, en altta, küçük ve SOLA hizalı.
   Kart genişliğini kaplamaz. */
.cc_nugnohn9_5OTV4s9lpc .cs-collection-cta {
  width: 100%;
  margin-inline: 0;
  margin-top: clamp(1rem, 1.6vw, 1.5rem);
  display: flex;
  justify-content: flex-start;
}

.cc_nugnohn9_5OTV4s9lpc .cs-collection-cta .cs-products-viewall {
  width: auto;
}

@media (max-width: 767px) {
  .cc_nugnohn9_5OTV4s9lpc .cs-collection-cta {
    justify-content: stretch;
    margin-top: clamp(1.25rem, 5vw, 1.75rem);
  }
  .cc_nugnohn9_5OTV4s9lpc .cs-collection-cta .cs-products-viewall {
    width: 100%;
  }
}

/* Auto modda ürün alanı iki kartla AYNI container genişliğini kullanır.
   Üst boşluk: dev boşluk yok, kartlara yapışma yok — doğal premium ritim. */
.cc_nugnohn9_5OTV4s9lpc .cs-section-content--auto .cs-products {
  width: 100%;
  margin-top: var(--section-rail-gap, clamp(2rem, 6vw, 6.5rem));
}

.cc_nugnohn9_5OTV4s9lpc .cs-products-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.cc_nugnohn9_5OTV4s9lpc .cs-products-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.3vw, 1.875rem);
  letter-spacing: -0.01em;
  color: #F7F3EA;
}

/* "KOLEKSİYONU KEŞFET" — KOMPAKT premium pill: koyu Amed yeşili zemin +
   beyaz yazı. Eski altın zemin kaldırıldı (buton editorial başlıktan daha
   baskın duruyordu). Renkler panelden railCta* alanlarıyla ezilebilir;
   burada yalnız tasarım varsayılanı durur. Dokunma hedefi 44px korunur. */
/* CTA: MASAÜSTÜ görünümü global .amed-promo-cta (tek kanonik pill — panel
   renk/punto knob'ları artık uygulanmaz; renk tek kaynaktan). MOBİL görünümü
   ≤767 bloğu (--m-cta-* sistemi). Burada yalnız yerleşim. */
.cc_nugnohn9_5OTV4s9lpc .cs-products-viewall {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-align: center;
  max-width: 100%;
}

/* ── Ray: native yatay scroll + kenar durumlu küçük oklar ── */

.cc_nugnohn9_5OTV4s9lpc .cs-products-viewport {
  position: relative;
}

/* Sütun sayısı ekrana göre otomatiktir:
     ≥1200 → tam 4 kart (sağdaki kesilmez)
     900–1199 → 3 kart
     640–899 → ~2 kart + kaydırma
     ≤639 → TEK TAM KART (peek yok — 2026-08-30 mobil tutarlılık paketi) */
.cc_nugnohn9_5OTV4s9lpc .cs-rail-track {
  --cs-rail-gap: var(--card-rail-gap, clamp(1.125rem, 1.6vw, 1.5rem)); /* kanonik ray boşluğu */
  display: grid;
  grid-auto-flow: column;
  gap: var(--cs-rail-gap);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Hover lift gölgesi dikeyde kırpılmasın; yatay padding YOK ki
     yüzde tabanlı sütun hesabı birebir doğru kalsın. */
  padding: 0.375rem 0 1rem;
  margin: -0.375rem 0 -0.625rem;
}

.cc_nugnohn9_5OTV4s9lpc .cs-rail-track::-webkit-scrollbar {
  display: none;
}

.cc_nugnohn9_5OTV4s9lpc .cs-rail-track > .cs-rail-card {
  scroll-snap-align: start;
}

@media (max-width: 639px) {
  .cc_nugnohn9_5OTV4s9lpc .cs-rail-track {
    /* KANONİK MOBİL: HER ZAMAN TEK TAM KART — genişlik TEK kaynaktan
       (global --m-card-width); dosya sonundaki FINAL PASS bloğu da aynı
       tokenı tüketir. */
    grid-auto-columns: 100%;
    gap: 20px; /* literal — bayat tema-global token riski */
  }
}

@media (min-width: 640px) and (max-width: 899px) {
  .cc_nugnohn9_5OTV4s9lpc .cs-rail-track {
    grid-auto-columns: minmax(17rem, 46%);
  }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .cc_nugnohn9_5OTV4s9lpc .cs-rail-track {
    grid-auto-columns: calc((100% - 2 * var(--cs-rail-gap)) / 3);
  }
}

@media (min-width: 1200px) {
  .cc_nugnohn9_5OTV4s9lpc .cs-rail-track {
    grid-auto-columns: calc((100% - 3 * var(--cs-rail-gap)) / 4);
  }
}

/* ── Ürün kartı: sıcak krem yüzey, dengeli radius, hafif gölge ── */

.cc_nugnohn9_5OTV4s9lpc .cs-rail-card {
  display: flex;
  flex-direction: column;
  background: var(--card-surface, #FFFFFF);
  border: 1px solid var(--card-border, rgba(10, 72, 48, 0.1));
  border-radius: var(--card-radius, 24px);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--card-shadow, 0 12px 30px rgba(48, 42, 30, 0.1));
  transition: transform 240ms ease, box-shadow 240ms ease;
}

.cc_nugnohn9_5OTV4s9lpc .cs-rail-card:focus-visible {
  outline: 2px solid var(--cs-gold);
  outline-offset: 3px;
}

.cc_nugnohn9_5OTV4s9lpc .cs-rail-card-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5; /* ortak kart sözleşmesi */
  background: var(--card-media-bg, linear-gradient(180deg, #FFFFFF 0%, #F5F6F5 100%));
}

.cc_nugnohn9_5OTV4s9lpc .cs-rail-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  padding: 1rem;
  box-sizing: border-box;
  transition: transform 240ms ease;
}

/* ── Motion: ürün kartı hover sözleşmesi (Fix Pack C) — yalnız hover
   destekleyen cihazlarda; reduced-motion'da kapalı ── */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cc_nugnohn9_5OTV4s9lpc .cs-rail-card:hover {
    transform: translateY(var(--product-card-hover-lift, -4px));
    box-shadow: var(--card-shadow-hover, 0 18px 40px rgba(48, 42, 30, 0.14));
  }

  .cc_nugnohn9_5OTV4s9lpc .cs-rail-card:hover .cs-rail-card-img {
    transform: scale(var(--product-card-hover-scale, 1.025));
  }
}

.cc_nugnohn9_5OTV4s9lpc .cs-rail-card-img--empty {
  background: repeating-linear-gradient(135deg, #f4f0e8 0 14px, #eeece5 14px 28px);
}

.cc_nugnohn9_5OTV4s9lpc .cs-rail-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  padding: 0.25rem 1rem 1rem;
}

.cc_nugnohn9_5OTV4s9lpc .cs-rail-card-name {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: #14231B;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}

.cc_nugnohn9_5OTV4s9lpc .cs-rail-card-prices {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cc_nugnohn9_5OTV4s9lpc .cs-rail-card-price {
  font-family: var(--font-label);
  font-size: 1rem;
  font-weight: 700;
  color: var(--cs-green);
}

.cc_nugnohn9_5OTV4s9lpc .cs-rail-card-price--old {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--card-old-ink, #8B8377);
  text-decoration: line-through;
}

/* ── Oklar: sade, küçük, bölüm kenarlarında; kenardayken gizli ── */

/* ORTAK CAROUSEL KONTROL STANDARDI (rail okları — yalnız masaüstü) */
.cc_nugnohn9_5OTV4s9lpc .cs-rail-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  padding: 0;
  display: none;
  place-items: center;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid rgba(10, 72, 48, 0.16);
  color: #0A4A32;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(48, 42, 30, 0.12);
  transition: opacity 200ms ease, transform 200ms ease,
    background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

/* MOBİL RAY NAVİGASYONU: oklar artık mobilde de var (dört rayda ortak
   interaction dili). Ortak kart sözleşmesi gereği medya oranı 4/5 olduğu
   için ok, kart METİN alanına binmeyecek şekilde medya bandının ortasına
   yakın konumlanır; kenardan içeride durur ki 375'te sayfa taşmasın. */
.cc_nugnohn9_5OTV4s9lpc .cs-rail-arrow {
  display: grid;
  width: 44px;
  height: 44px;
  top: 38%;
}

@media (min-width: 768px) {
  .cc_nugnohn9_5OTV4s9lpc .cs-rail-arrow {
    width: 46px;
    height: 46px;
    top: 50%;
  }
}

/* Mobilde ray kenarının İÇİNDE (negatif offset sayfa taşması yapardı);
   masaüstünde onaylı dışarı taşan konum korunur. */
.cc_nugnohn9_5OTV4s9lpc .cs-rail-arrow--prev {
  left: 2px;
}

.cc_nugnohn9_5OTV4s9lpc .cs-rail-arrow--next {
  right: 2px;
}

@media (min-width: 768px) {
  .cc_nugnohn9_5OTV4s9lpc .cs-rail-arrow--prev {
    left: -0.5rem;
  }
  .cc_nugnohn9_5OTV4s9lpc .cs-rail-arrow--next {
    right: -0.5rem;
  }
}

.cc_nugnohn9_5OTV4s9lpc .cs-rail-arrow:hover, .cc_nugnohn9_5OTV4s9lpc .cs-rail-arrow:focus-visible {
  background: #0A6845; /* ORTAK: hover'da yeşil dolgu, beyaz ok */
  border-color: #0A6845;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(6, 61, 40, 0.28);
  transform: translateY(calc(-50% - 1px));
}

.cc_nugnohn9_5OTV4s9lpc .cs-rail-arrow:active {
  transform: translateY(-50%) scale(0.97);
}

.cc_nugnohn9_5OTV4s9lpc .cs-rail-arrow:focus-visible {
  outline: 2px solid #0A6845;
  outline-offset: 3px;
}

/* Kenarda tamamen kaybolmak yerine soluk kal (ortak disabled dili) */
.cc_nugnohn9_5OTV4s9lpc .cs-rail-arrow.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .cc_nugnohn9_5OTV4s9lpc .cs-rail-track {
    scroll-behavior: auto;
  }

  .cc_nugnohn9_5OTV4s9lpc .cs-rail-card, .cc_nugnohn9_5OTV4s9lpc .cs-rail-card-img, .cc_nugnohn9_5OTV4s9lpc .cs-rail-arrow {
    transition: none;
  }

  .cc_nugnohn9_5OTV4s9lpc .cs-rail-card:hover {
    transform: none;
  }
}

/* ORTAK KART SÖZLEŞMESİ: bilgi alanı esner, fiyat kartın altına hizalanır */
.cc_nugnohn9_5OTV4s9lpc .cs-rail-card-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.cc_nugnohn9_5OTV4s9lpc .cs-rail-card-prices, .cc_nugnohn9_5OTV4s9lpc .cs-rail-card-price-row { margin-top: auto; }

/* ── Beden/stok şeridi (FAZ 5.3) — bilgi amaçlı, etkileşimsiz; ProductCard
   ile aynı görsel dil. Sabit min-height slot → kart yükseklikleri eşit,
   hover'da layout shift yok. Mobil: her zaman görünür; masaüstü (hover
   destekli): kart hover/focus-within'de belirir. */
.cc_nugnohn9_5OTV4s9lpc .cs-rail-card-sizes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  min-height: 1.625rem;
  padding: 0.25rem 1rem 0;
  box-sizing: border-box;
}

.cc_nugnohn9_5OTV4s9lpc .cs-rail-card-size {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 0.3125rem 0.5rem;
  border: 1px solid rgba(7, 23, 13, 0.18);
  border-radius: 6px;
  color: var(--card-ink, #1D2721);
  background: var(--card-surface, #FFFFFF);
  white-space: nowrap;
}

.cc_nugnohn9_5OTV4s9lpc .cs-rail-card-size.is-oos {
  opacity: 0.4;
  text-decoration: line-through;
}

.cc_nugnohn9_5OTV4s9lpc .cs-rail-card-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (hover: hover) and (min-width: 768px) {
  .cc_nugnohn9_5OTV4s9lpc .cs-rail-card-sizes {
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .cc_nugnohn9_5OTV4s9lpc .cs-rail-card:hover .cs-rail-card-sizes, .cc_nugnohn9_5OTV4s9lpc .cs-rail-card:focus-visible .cs-rail-card-sizes, .cc_nugnohn9_5OTV4s9lpc .cs-rail-card:focus-within .cs-rail-card-sizes {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc_nugnohn9_5OTV4s9lpc .cs-rail-card-sizes {
    transition: none;
    transform: none;
  }
}


/* ── Editorial kart giriş animasyonu (§8.2) ──
   Bölüm ilk kez görünürken: yeşil çizgi → kırmızı çizgi → başlık.
   Yalnız .cs-reveal-shown sınıfı eklendiğinde oynar (tek sefer);
   scroll boyunca tekrarlamaz, yanıp sönmez. Altın × için parıltı YOK. */
@media (prefers-reduced-motion: no-preference) {
  .cc_nugnohn9_5OTV4s9lpc .cs-reveal-waiting .cs-promo-brand {
    opacity: 0;
    transform: translateY(10px);
  }

  .cc_nugnohn9_5OTV4s9lpc .cs-reveal-shown .cs-promo-brand {
    animation: cc_nugnohn9_5OTV4s9lpc_cs-brand-in 520ms cubic-bezier(0.22, 1, 0.36, 1) 300ms both;
  }
}

@keyframes cc_nugnohn9_5OTV4s9lpc_cs-brand-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   ORTAK BEDEN ŞERİDİ (ProductSizeStrip) — ana sayfadaki TÜM ürün
   kartlarında aynı görünüm ve davranış. KANONİK KOPYA:
   src/sub-components/ProductSizeStrip/styles.css
   Build sub-component CSS paketlemediği için kullanan her section
   styles.css dosyasına kopyalanır; değişiklikte hepsini senkron tut.

   FAZ 13: bedenler BAŞLANGIÇTA GİZLİ.
   - Yer .product-size-reveal ile rezerve edilir → kart yüksekliği ve
     ad/fiyat konumu hover'da DEĞİŞMEZ (sıçrama yok).
   - Hover'lı cihaz: kart :hover / :focus-within olduğunda açılır.
     `*:hover > .product-size-reveal` — doğrudan EBEVEYN kart seçicisi;
     kart sınıfı componentten componente değiştiği için tek kural
     dört kart tipinde de çalışır.
   - Dokunmatik cihaz: "Beden Seç" kontrolü ile açılır.
   ══════════════════════════════════════════════════════════════ */

.cc_nugnohn9_5OTV4s9lpc .product-size-reveal {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  padding: 0.25rem 1rem 0.875rem;
  box-sizing: border-box;
}

.cc_nugnohn9_5OTV4s9lpc .product-size-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  /* Gizli fakat DOM'da: display:none değil → :focus-within açıldığında
     klavye kullanıcısı Tab ile beden butonlarına ulaşabilir. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 180ms ease, transform 180ms ease,
    visibility 0s linear 180ms;
}

/* Hover'lı cihazlar: kartın üzerine gelince / kart içinde odak varken aç */
@media (hover: hover) and (pointer: fine) {
  .cc_nugnohn9_5OTV4s9lpc *:hover > .product-size-reveal > .product-size-strip, .cc_nugnohn9_5OTV4s9lpc *:focus-within > .product-size-reveal > .product-size-strip, .cc_nugnohn9_5OTV4s9lpc .product-size-reveal:focus-within > .product-size-strip {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 180ms ease, transform 180ms ease,
      visibility 0s linear 0s;
  }
}

/* "Beden Seç" kontrolü — YALNIZ hover'sız (dokunmatik) cihazlarda */
.cc_nugnohn9_5OTV4s9lpc .product-size-toggle {
  display: none;
  align-items: center;
  gap: 0.375rem;
  min-height: 44px;
  padding: 0.3125rem 0.625rem;
  border: 1px solid rgba(7, 23, 13, 0.18);
  border-radius: 6px;
  background: var(--card-surface, #ffffff);
  color: var(--card-ink, #1d2721);
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  cursor: pointer;
}

.cc_nugnohn9_5OTV4s9lpc .product-size-toggle:focus-visible {
  outline: 2px solid var(--color-amed-green, #0a6845);
  outline-offset: 2px;
}

@media (hover: none) {
  .cc_nugnohn9_5OTV4s9lpc .product-size-toggle {
    display: inline-flex;
  }

  /* Açıkken şerit kontrolün ÜZERİNİ kaplar → kart yüksekliği değişmez */
  .cc_nugnohn9_5OTV4s9lpc .product-size-reveal.is-open > .product-size-strip {
    position: absolute;
    inset: 0.25rem 1rem 0.875rem;
    align-content: center;
    background: var(--card-surface, #ffffff);
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 180ms ease, visibility 0s linear 0s;
  }
}

.cc_nugnohn9_5OTV4s9lpc .product-size {
  position: relative;
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 0.3125rem 0.5rem;
  border: 1px solid rgba(7, 23, 13, 0.18);
  border-radius: 6px;
  color: var(--card-ink, #1D2721);
  background: var(--card-surface, #FFFFFF);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}

/* Görünmez dokunma alanı — minimum 44px hedef */
.cc_nugnohn9_5OTV4s9lpc .product-size::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
}

.cc_nugnohn9_5OTV4s9lpc .product-size:hover:not(:disabled), .cc_nugnohn9_5OTV4s9lpc .product-size:focus-visible {
  border-color: var(--color-amed-green, #0A6845);
  color: var(--color-amed-green, #0A6845);
}

.cc_nugnohn9_5OTV4s9lpc .product-size:focus-visible {
  outline: 2px solid var(--color-amed-green, #0A6845);
  outline-offset: 2px;
}

/* Stokta olmayan beden: gerçek disabled + üstü çizili + tıklanamaz */
.cc_nugnohn9_5OTV4s9lpc .product-size:disabled, .cc_nugnohn9_5OTV4s9lpc .product-size.is-oos {
  opacity: 0.4;
  text-decoration: line-through;
  cursor: default;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .cc_nugnohn9_5OTV4s9lpc .product-size-strip {
    transition: none;
  }
}

/* Ray kartı: sarmalayıcı + ana link + kardeş beden şeridi */
.cc_nugnohn9_5OTV4s9lpc .cs-rail-card-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  text-decoration: none;
  color: inherit;
}

.cc_nugnohn9_5OTV4s9lpc .cs-rail-card-main:focus-visible {
  outline: 2px solid var(--color-amed-green, #0A6845);
  outline-offset: 3px;
  border-radius: 14px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   MOBİL KANONİK SİSTEM (≤767px) — global.css --m-* tokenları
   Editorial kart, CTA ve ürün kartı üç ana sayfa bölümünde BİREBİR aynı.
   Değerler burada tanımlanmaz; tek kaynak global.css'tir.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* FINAL POLISH: buradaki eski `.cs-promo-card` / `::before` / eyebrow /
     brand / desc kuralları SİLİNDİ — hepsi aşağıdaki "MOBİL KOMPOZİSYON"
     bloğunda aynı ya da daha geç kurallarla tamamen eziliyordu (ölü katman).
     Mobil editorial kartın tek kaynağı artık o bloktur; beyaz yüzey yalnız
     `.cs-promo-card-wrap` üzerindedir. */
  .cc_nugnohn9_5OTV4s9lpc .cs-promo-brand > * {
    min-width: 0;
  }

  /* Kanonik mobil CTA (--m-cta-* sistemi) */
  .cc_nugnohn9_5OTV4s9lpc .cs-products-viewall {
    gap: var(--m-cta-gap);
    height: var(--m-cta-height);
    min-height: var(--m-cta-height);
    width: 100%;
    padding: 0 var(--m-cta-padding-inline);
    border-radius: var(--m-cta-radius);
    background: var(--m-cta-bg);
    color: var(--m-cta-text);
    border: none;
    box-shadow: none;
    font-family: var(--font-label);
    font-size: var(--m-cta-font-size);
    font-weight: var(--m-cta-font-weight);
    letter-spacing: var(--m-cta-letter-spacing);
    text-transform: uppercase;
    white-space: normal;
  }
  .cc_nugnohn9_5OTV4s9lpc .cs-collection-cta { padding-inline: var(--m-gutter); }

  /* ══ MOBİL KOMPOZİSYON: uzun sahne + altına bindirilmiş küçük kart ══
     Referans mantığı: uzun-dikey görsel → alt gradient → görselin altına
     bindirilmiş MERKEZLİ küçük beyaz kart → kartın içinde CTA → ürün rayı.
     Tamamı NORMAL AKIŞTA: absolute yerleşim yok, sticky/fixed yok, 100vh yok;
     bindirme tek bir kontrollü negatif margin ile yapılır, bu yüzden section
     yüksekliği kendiliğinden doğru hesaplanır.
     Sahne verisi, forma rolleri ve carousel timer'ı AYNEN korunur. */
  .cc_nugnohn9_5OTV4s9lpc .cs-campaign {
    display: flex;
    flex-direction: column;
  }

  /* Uzun-dikey sahne (önceki 16/9 kısa yatay görünüm kaldırıldı) */
  .cc_nugnohn9_5OTV4s9lpc .collection-showcase .cs-jersey-card {
    position: relative;
    /* flex column + `margin-inline: auto` ile `width: auto` içeriğe çöküyordu */
    width: calc(100% - 2 * var(--m-gutter));
    max-width: 390px;
    margin-inline: auto;
    height: auto;
    /* MOBİL SAHNE UZATILDI: oran 4/5 → 3/4 ve taban yükseklik 400 → 470px.
       Stadyum arka planı ve dönen forma vitrini mobilde fazla basıktı;
       artık zemin ve formalar nefes alıyor. Oran + min/max bandı olduğu
       için 375/390/430'da kompozisyon korunur. Masaüstü etkilenmez. */
    aspect-ratio: 3 / 4;
    min-height: 470px;
    max-height: 560px;
    border-radius: 24px;
    overflow: hidden;
    transform: none;
  }
  .cc_nugnohn9_5OTV4s9lpc .collection-showcase .cs-card-visual {
    border-radius: 24px;
    background-size: cover;
    background-position: center 38%;
  }
  /* Alt geçiş gradyanı: yalnız alt bölümü koyulaştırır, formaları karartmaz */
  .cc_nugnohn9_5OTV4s9lpc .collection-showcase .cs-jersey-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(
      to bottom,
      rgba(3, 24, 17, 0) 48%,
      rgba(3, 24, 17, 0.35) 68%,
      rgba(3, 24, 17, 0.82) 100%
    );
  }

  /* Formalar: masaüstü transform/scale/offset mirası sıfırlanır, mobil
     geometri ayrıca tanımlanır. Üçü de sahne içinde, üst üste binmeden. */
  .cc_nugnohn9_5OTV4s9lpc .collection-showcase .cs-card-jerseys {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
  }

  /* ── Bindirilmiş küçük editorial kart ── */
  /* Beyaz kart YÜZEYİ sarmalayıcıda: içinde başlık bloğu + CTA normal akışta.
     (Dikey bindirme payı her düzen modunun kendi wrap kuralından gelir —
     auto modda -1.25rem/-2rem; buradaki eski -74px hiçbir modda kazanmıyordu
     ve kaldırıldı.) */
  .cc_nugnohn9_5OTV4s9lpc .cs-promo-card-wrap {
    position: relative;
    z-index: 2;
    width: calc(100% - 36px);
    max-width: 320px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 11px 13px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(6, 61, 40, 0.1);
    box-shadow: 0 16px 34px rgba(3, 24, 17, 0.2);
    box-sizing: border-box;
  }
  /* KART İÇİNDE KART DÜZELTMESİ (kök neden): `.cs-campaign-layout--auto
     .cs-promo-card` ve `--mobile-auto .cs-promo-card` kuralları (özgüllük
     0,2,0) masaüstü gölge/padding/radius değerlerini media guard olmadan
     taşıyor ve buradaki düz `.cs-promo-card` sıfırlamasını (0,1,0) eziyordu —
     beyaz sarmalayıcının İÇİNDE ikinci bir kart halesi görünüyordu. Seçici
     grubu aynı özgüllüğe çıkarıldı; blok daha geç geldiği için kazanır.
     `--mobile-custom` bilinçli olarak dışarıda: panel değerleri korunur. */
  .cc_nugnohn9_5OTV4s9lpc .cs-promo-card, .cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--auto .cs-promo-card, .cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout--mobile-auto .cs-promo-card {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    box-sizing: border-box;
    left: auto;
    right: auto;
    inset-inline: auto;
    transform: none;
    rotate: 0deg;
    min-height: auto;
    height: auto;
  }
  .cc_nugnohn9_5OTV4s9lpc .cs-promo-card::before {
    background: transparent;
  }
  .cc_nugnohn9_5OTV4s9lpc .cs-promo-card-inner {
    padding: 0;
    text-align: center;
  }
  /* Üretimdeki etiket uzun ("26/27 RESMÎ FORMA KOLEKSİYONU") ve iki satıra
     sarıyor; tracking ve satır yüksekliği buna göre sıkılaştırıldı. */
  .cc_nugnohn9_5OTV4s9lpc .cs-promo-eyebrow {
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: 0.13em;
    font-weight: 700;
    margin: 0 0 6px;
  }
  /* Mobilde yalnız MERKEZLEME değişir; dikey ritim (üst 8px / alt 10px)
     ortak accent tokenından gelir — çizgiler artık eyebrow'a yapışmaz. */
  .cc_nugnohn9_5OTV4s9lpc .cs-promo-deco {
    justify-content: center;
    margin-inline: auto;
  }
  /* NIKE × AMEDSPOR: TEK SATIR — sığmazsa satıra bölünmez, küçülür.
     ÖZGÜLLÜK DÜZELTMESİ (kök neden): bu kural (0,1,0) idi ve masaüstündeki
     `.cs-promo-card--type-auto .cs-promo-brand` (0,2,0) font-size'ı media
     query'ye rağmen EZİYORDU — media query özgüllüğü artırmaz. Ölçüm (375):
     efektif 30.37px (mobil tavan 27px yerine), satır ortalanmıyordu ve son
     "R" sağ kenara yapışıyordu. Seçici grubu aynı özgüllüğe çıkarıldı; blok
     daha geç geldiği için artık mobil değerler kazanır.
     (Aynı düzeltme kalıbı kart yüzeyi için bu dosyada zaten kullanılıyor.) */
  .cc_nugnohn9_5OTV4s9lpc .cs-promo-brand, .cc_nugnohn9_5OTV4s9lpc .cs-promo-card--type-auto .cs-promo-brand, .cc_nugnohn9_5OTV4s9lpc .cs-promo-card--type-manual .cs-promo-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    column-gap: 0.22em;
    /* Kart `container-type: inline-size` taşıyor → başlık kartın İÇ
       genişliğine göre ölçeklenir ve her viewportta TEK SATIRDA kalır. */
    font-size: clamp(21px, min(6.7vw, 9.1cqi), 27px);
    line-height: 0.98;
    max-width: 100%;
    /* Satır kutusu içeriği kadar geniştir; inner `align-items: flex-start`
       olduğu için sola yaslı kalıyordu (ölçüm: sol 14px / sağ 88px). Eyebrow
       ve accent çizgileri zaten ortalı — marka satırı da onlarla hizalanır. */
    align-self: center;
    margin: 0 0 10px;
  }
  /* Manuel modun geniş takibi (vars. 0.18em) mobilde satırı gereksiz
     genişletmesin — mobil kanon auto modun ölçüsüdür. */
  .cc_nugnohn9_5OTV4s9lpc .cs-promo-card--type-manual .cs-promo-brand {
    letter-spacing: -0.045em;
  }
  .cc_nugnohn9_5OTV4s9lpc .cs-promo-desc {
    display: none;
  }

  /* ── CTA kartın İÇİNDE, NORMAL FLOW'da ──
     Negatif margin / absolute / z-index bindirme YOK. Beyaz kart yüzeyi
     sarmalayıcıya taşındığı için CTA gerçekten kartın içinde kalır. */
  .cc_nugnohn9_5OTV4s9lpc .cs-collection-cta {
    position: static;
    z-index: auto;
    margin: 0;
    padding-inline: 0;
    width: 100%;
    display: flex;
    justify-content: stretch;
  }
  /* Ölçüler ortak sistemden (--m-cta-*) gelir; burada yalnız panelin masaüstü
     inline değişkenlerinin mobilde kazanmaması için renk/ölçü yeniden bağlanır. */
  .cc_nugnohn9_5OTV4s9lpc .cs-collection-cta .cs-products-viewall {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: var(--m-cta-height);
    min-height: var(--m-cta-height);
    max-height: var(--m-cta-height);
    background: var(--m-cta-bg);
    border-color: var(--m-cta-bg);
    color: var(--m-cta-text);
    font-size: var(--m-cta-font-size);
    letter-spacing: var(--m-cta-letter-spacing);
    padding: 0 var(--m-cta-padding-inline);
    gap: var(--m-cta-gap);
    box-shadow: var(--m-cta-shadow);
  }
  /* MOBILE EDITORIAL → RAIL NEFESİ: editorial kart ile alışveriş rayı
     arasında belirgin dikey ayrım (referans: premium kulüp mağazaları).
     Boşluk SECTION ARKA PLANININ İÇİNDE kalır — yeni blok/kesinti yok.

     SEÇİCİ DÜZELTMESİ (ölçüldü): önceki hâli `.cs-campaign + .cs-products`
     idi ama DOM'da `.cs-campaign` diye bir sınıf YOK (yalnız
     `.cs-campaign-layout`) → kural hiç eşleşmiyordu. Ayrıca kanonik
     `.cs-section-content--auto .cs-products` kuralı (dosyada ~1156. satır,
     `--section-rail-gap` = mobilde 32px) AYNI özgüllükte ve DAHA SONRA
     geldiği için media query içindeki erken kuralı da eziyordu. Bu blok
     dosyanın sonunda olduğundan artık mobil değer kazanır. */
  .cc_nugnohn9_5OTV4s9lpc .cs-section-content .cs-products, .cc_nugnohn9_5OTV4s9lpc .cs-section-content--auto .cs-products, .cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout + .cs-products, .cc_nugnohn9_5OTV4s9lpc .cs-campaign-layout + .cs-rail {
    margin-top: var(--m-editorial-rail-gap, clamp(100px, 28vw, 130px));
  }

  /* ── ÜRÜN RAYI: OVERLAP DÜZELTMESİ ──
     Ray masaüstünde `display: grid; grid-auto-flow: column` kullanıyor ve
     mobilde `grid-auto-columns` tanımsız kalıyordu: kartlardaki `flex`/`width`
     grid track genişliğini belirlemediği için track'ler içeriğe göre boyutlanıp
     kartlar üst üste biniyordu. Mobilde deterministik flex yapısına geçilir. */
  .cc_nugnohn9_5OTV4s9lpc .cs-rail-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px; /* literal (bkz. yukarıdaki bayat-global notu) */
    overflow-x: auto;
    overflow-y: hidden;
    /* AKSESUAR (WHS) KART SÖZLEŞMESİ (2026-09-03, gerçek iPhone referansı):
       onaylı kart viewport'tan 18px içeride (konteyner 16 + 2). 20px ray
       padding'i kartı 36px'e daraltıp WHS'den farklı bir ölçek üretiyordu. */
    padding-inline: 2px;
    scroll-padding-inline: 2px;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  .cc_nugnohn9_5OTV4s9lpc .cs-rail-card {
    /* LİTERAL 100% — global --m-card-width token'ına BAĞIMLI DEĞİL:
       tema global.css'i bileşen importlarıyla güncellenmeyebiliyor (2026-08-30
       Preview kanıtı: bayat global clamp'i 280px kart + peek üretti). Component
       CSS'i her import'ta kesin taşınır → tek-kart sözleşmesi buradan garanti. */
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
    left: auto;
    right: auto;
    transform: none;
    margin-left: 0;
    margin-right: 0;
    /* MOBİL SNAP HİZASI = CENTER (2026-09-03 gerçek iPhone düzeltmesi):
       `start` + `scroll-padding-inline` sözleşmesi, scroll-padding'i yok sayan
       tarayıcıda (iOS Safari) ilk kartı scrollport kenarına çekip track'i 20px
       sola kaydırıyordu (boşluk 16/56, sağdan komşu kart sızması). Tek tam
       kartta `center` aynı konumları üretir (i × (kart+gap)) ama scroll-padding
       desteğine BAĞIMLI DEĞİLDİR; ok/dot adım matematiği değişmez. */
    scroll-snap-align: center;
    overflow: hidden;
    border-radius: var(--m-card-radius);
    background: var(--card-surface, #FFFFFF);
  }
  /* Kart yüksekliği de kontrollü küçülür.
     WEBKIT KÖK NEDENİ (2026-09-03, canlı iPhone 13 ölçümü): `width: auto` +
     `aspect-ratio` + `max-height` birlikteyken WebKit max-height'ı orana göre
     max-width'e AKTARIR (css-sizing-4 transferred size) → medya kutusu
     320×(4/4.7)=272px'e daralıp kartın SOLUNA yaslanıyor, ürün görseli kart
     merkezinden 22px sola kayıyor, sağda boş beyaz kanvas kalıyordu. Chromium
     bloğu doldurmaya devam ettiği için Studio/Chrome'da görünmüyordu. Açık
     `width: 100%` aktarımı kapatır: iki motorda da WHS ile aynı 100%×320. */
  .cc_nugnohn9_5OTV4s9lpc .cs-rail-card-media {
    width: 100%;
    aspect-ratio: var(--m-card-media-ratio);
    max-height: var(--m-card-media-max);
  }
  .cc_nugnohn9_5OTV4s9lpc .cs-rail-card-body {
    width: 100%;
    box-sizing: border-box;
    position: static;
    padding: var(--m-card-padding);
  }
  .cc_nugnohn9_5OTV4s9lpc .cs-rail-card-name {
    font-size: var(--m-card-name-size);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
  }
  .cc_nugnohn9_5OTV4s9lpc .cs-rail-card-price {
    font-size: var(--m-card-price-size);
    font-weight: 700;
  }

  /* ── TEK KANONİK CTA (global.css --m-cta-*) ──
     Beş ana buton (Sepete Ekle · Koleksiyonu Keşfet · Tüm Formaları Gör ·
     Giyimi Keşfet · Tüm Koleksiyonu Gör) birebir aynı computed style üretir.
     Bileşenin kendi CTA selectorüyle AYNI specificity'de ama cascade'de SONRA
     geldiği için kazanır; değerler burada değil global.css'te tanımlıdır. */
  .cc_nugnohn9_5OTV4s9lpc .amed-mobile-primary-cta {
    box-sizing: border-box;
    height: var(--m-cta-height);
    min-height: var(--m-cta-height);
    max-height: var(--m-cta-height);
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--m-cta-gap);
    padding: 0 var(--m-cta-padding-inline);
    background: var(--m-cta-bg);
    color: var(--m-cta-text);
    border: 1px solid var(--m-cta-bg);
    border-radius: var(--m-cta-radius);
    font-family: var(--font-label, inherit);
    font-size: var(--m-cta-font-size);
    font-weight: var(--m-cta-font-weight);
    line-height: 1;
    letter-spacing: var(--m-cta-letter-spacing);
    text-decoration: none;
    text-transform: none;
    box-shadow: var(--m-cta-shadow);
    transition: background-color 180ms ease, border-color 180ms ease,
      transform 160ms ease, box-shadow 180ms ease;
  }
  .cc_nugnohn9_5OTV4s9lpc .amed-mobile-primary-cta .amed-cta-arrow {
    width: var(--m-cta-arrow-size);
    height: var(--m-cta-arrow-size);
    flex-shrink: 0;
    transition: transform 160ms ease;
  }
  .cc_nugnohn9_5OTV4s9lpc .amed-mobile-primary-cta:active {
    background: var(--m-cta-hover);
    border-color: var(--m-cta-hover);
    transform: scale(0.985);
    box-shadow: var(--m-cta-shadow-active);
  }
  .cc_nugnohn9_5OTV4s9lpc .amed-mobile-primary-cta:active .amed-cta-arrow {
    transform: translateX(1px);
  }
  .cc_nugnohn9_5OTV4s9lpc .amed-mobile-primary-cta:focus-visible {
    outline: 3px solid rgba(10, 104, 69, 0.28);
    outline-offset: 3px;
  }
  .cc_nugnohn9_5OTV4s9lpc .amed-mobile-primary-cta:disabled, .cc_nugnohn9_5OTV4s9lpc .amed-mobile-primary-cta[aria-disabled="true"] {
    background: var(--m-cta-disabled-bg);
    border-color: var(--m-cta-disabled-bg);
    color: var(--m-cta-disabled-text);
    box-shadow: none;
    cursor: not-allowed;
  }
}

@media (max-width: 767px) and (hover: hover) {
  .cc_nugnohn9_5OTV4s9lpc .amed-mobile-primary-cta:hover {
    background: var(--m-cta-hover);
    border-color: var(--m-cta-hover);
    box-shadow: var(--m-cta-shadow-hover);
  }
  .cc_nugnohn9_5OTV4s9lpc .amed-mobile-primary-cta:hover .amed-cta-arrow {
    transform: translateX(3px);
  }
}

@media (max-width: 767px) and (hover: hover) {
  .cc_nugnohn9_5OTV4s9lpc .cs-collection-cta .cs-products-viewall:hover .amed-cta-arrow {
    transform: translateX(2px);
  }
}

/* ═══ KANONİK MOBİL PAGINATION RENGİ — SENKRON KOPYA ═══
   Tek mantıksal kaynak: global.css `.amed-rail-pagination--dark` (aktif
   Amed yeşili 24×6 pill · pasif beyaz 0.42 · 6×6 · gap 12). Tema
   global.css'i bileşen importlarıyla güncellenmeyebildiği için (2026-08-30
   Preview kanıtı) RENK sözleşmesi her import'ta kesin taşınan component
   CSS kanalından da garanti edilir; geometri global'den gelir. Dört hedef
   rayda (CS · FJS · LC · WHS) birebir aynı blok — değişiklikte senkron tut. */
.cc_nugnohn9_5OTV4s9lpc .amed-rail-pagination--dark .amed-rail-pagination-dot {
  background: rgba(255, 255, 255, 0.42);
}
.cc_nugnohn9_5OTV4s9lpc .amed-rail-pagination--dark .amed-rail-pagination-dot.is-active, .cc_nugnohn9_5OTV4s9lpc .amed-rail-pagination--dark .amed-rail-pagination-dot:hover {
  background: var(--color-amed-green, #0A6845);
}