/* BASKI FONTU (FACE A) runtime FontFace API ile yüklenir —
   src/sub-components/JerseyPrintFont. CSS @import/@font-face BİLEREK yok:
   ikas deployment hattı @import'u söküyor ve @font-face aile adını
   scope'luyor (cc_nugnohn9_*); CSS değişken değerleri yeniden yazılmadığı
   için CSS'te tanımlı yüz deployed çıktıda hiçbir kuralla eşleşemiyor. */

/* ═══════════════════════════════════════════════════════════════════════════
   JerseyCustomizer — "Formanı Kişiselleştir".
   Amed Store premium section. SOL: başlık + açıklama + altın çizgi + canlı
   önizleme kartı. SAĞ: ürün → isim → numara → beden → özet → CTA.
   Beden seçici SECTION-ÖZEL erişilebilir renderer (native selectVariantValue
   kullanır); global ProductVariants kaynağına dokunulmaz. Overlay salt CSS
   (canvas/görsel üretimi YOK). Renkler prop → --jc-*'ten gelir.
   MOBİL: panel kutusu yok — alanlar display:contents ile doğal akışa açılır,
   sıra CSS order ile kurulur (başlık → ürün seçici → önizleme → form → CTA).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Section kabuğu — soft ivory zemin, üstte ince altın ayırıcı ── */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-customizer {
  position: relative;
  isolation: isolate;
  width: 100%;
  padding-block: clamp(1.75rem, 3.6vw, 3.25rem);
  background: var(--jc-bg, #ffffff);
  color: var(--jc-title-color, #0a3b26);
  overflow-x: clip;
  /* BASKI FONTU — tek token. FACE A runtime'da yüklenir (JerseyPrintFont);
     fallback BİLEREK monospace: yükleme başarısızlığı Georgia gibi "makul"
     görünmesin, bariz yakalansın. Overlay zaten font hazır olmadan çizmez. */
  --jersey-print-font-family: "J-LOG Razor Edge Small Caps", monospace;
  /* Ön/arka flip açısı: masaüstü ≤9deg, mobil <768px'te 4.5deg'e düşer. */
  --jc-flip-deg: 9deg;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-customizer.has-divider {
  border-top: 1px solid color-mix(in srgb, var(--jc-gold, #d4af37) 50%, transparent);
}

/* ── Section reveal — yalnız ilk görünümde, transform/opacity ile (CLS yok) ── */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-customizer.jc-reveal-waiting .jersey-customizer-container {
  opacity: 0;
  transform: translateY(6px);
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-customizer.jc-reveal-shown .jersey-customizer-container {
  animation: cc_nugnohn9_Hiu7dFbbGQ_jc-reveal 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes cc_nugnohn9_Hiu7dFbbGQ_jc-reveal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-customizer.jc-reveal-waiting .jersey-customizer-container {
    opacity: 1;
    transform: none;
  }
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-customizer.jc-reveal-shown .jersey-customizer-container {
    animation: none;
  }
}

.cc_nugnohn9_Hiu7dFbbGQ .jersey-customizer-container {
  max-width: 90rem; /* 1440px */
  margin: 0 auto;
  padding-inline: clamp(1.125rem, 4vw, 4.5rem);
}

/* ── Yerleşim: mobil tek kolon (order ile); masaüstü iki kolon ── */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-customizer-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}
@media (min-width: 1024px) {
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-customizer-layout {
    grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
    gap: clamp(1.5rem, 3vw, 3rem);
  }
}

/* ═══ SOL kolon ═══ */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-left {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.5vw, 1.125rem);
  min-width: 0;
}

/* ── Başlık alanı — sağ panelin tepesinde: eyebrow → başlık → açıklama ── */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-customizer-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* Küçük altın eyebrow etiketi — başlığın üstünde marka vurgusu */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-eyebrow {
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--jc-gold, #d4af37) 72%, #6b5a1e);
}
/* Premium serif başlık — koyu Amed yeşili; panel genişliğine dengeli punto */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-customizer-title {
  margin: 0;
  color: var(--jc-title-color, #0a3b26);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.6vw, 2.375rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-customizer-subtitle {
  margin: 0;
  max-width: 38ch;
  color: #5c6b60;
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  line-height: 1.55;
}
/* Dekoratif altın çizgi + solda küçük elmas (marka detayı, salt CSS) */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-title-rule {
  position: relative;
  width: 2.75rem;
  height: 2px;
  margin-top: 0.125rem;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--jc-gold, #d4af37),
    color-mix(in srgb, var(--jc-gold, #d4af37) 30%, transparent)
  );
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-title-rule::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-1px, -50%) rotate(45deg);
  background: var(--jc-gold, #d4af37);
  border-radius: 1px;
}

/* ── Canlı önizleme ── */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
/* Temiz önizleme kartı: sade krem yüzey, ince border, yumuşak tek gölge */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-preview-card {
  position: relative;
  width: 100%;
  padding: clamp(0.875rem, 2vw, 1.25rem);
  background: #ffffff;
  border: 1px solid var(--card-border, rgba(10,72,48,0.1));
  border-radius: 24px;
  box-shadow: 0 20px 44px -28px rgba(7, 23, 13, 0.16);
}
/* Küçük "Canlı Önizleme" etiketi */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-preview-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: clamp(0.375rem, 1vw, 0.625rem);
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6560;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-preview-tag-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--jc-green, #0b5d2a);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jc-green, #0b5d2a) 18%, transparent);
}

/* ÖN/ARKA segmented switch — kartın sağ üstü; ~42px kontrol yüksekliği,
   44px dokunma alanı butonların kendisiyle sağlanır */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-preview-side-switch {
  position: absolute;
  top: clamp(0.75rem, 1.8vw, 1.125rem);
  right: clamp(0.75rem, 1.8vw, 1.125rem);
  z-index: 3;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: #ffffff;
  border: 1px solid var(--card-border, rgba(10,72,48,0.1));
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(5, 20, 11, 0.06);
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-preview-side-switch button {
  border: 1px solid transparent;
  background: transparent;
  color: #2e2e33;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  min-height: 2.25rem; /* 36px + 3px kabuk dolgusu ≈ 42px kontrol */
  padding: 0.5rem 0.875rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-preview-side-switch button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jc-green, #0b5d2a) 26%, transparent);
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-preview-side-switch button.is-active {
  background: var(--jc-green, #0b5d2a);
  border-color: transparent;
  color: #ffffff;
}

/* Önizleme sahnesi: yükseklik tabanlı ölçü (aspect-ratio korunur) —
   masaüstünde 640–720px bandında dengeli; forma hiçbir genişlikte kırpılmaz.
   Mobil taban kompakt: kart ekranı boğmaz, forma optik olarak büyük kalır. */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-preview-media {
  position: relative;
  width: auto;
  max-width: 100%;
  height: clamp(390px, 102vw, 500px);
  aspect-ratio: 3 / 4;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 16px;
  /* Çok hafif sıcak radial stüdyo zemini — düz beyaz değil */
  background: radial-gradient(120% 90% at 50% 12%, #ffffff 0%, #f5f6f5 62%, #eef0ee 100%);
  /* cqw birimleriyle metni konteynıra göre ölçekleyebilmek için */
  container-type: inline-size;
}
@media (min-width: 768px) {
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-preview-media {
    height: clamp(540px, 62vh, 660px);
  }
}
@media (min-width: 1024px) {
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-preview-media {
    height: clamp(600px, 68vh, 700px);
  }
}
/* Klavye ile gezinilebilir (ArrowLeft/Right → ön/arka) */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-preview-media:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jc-green, #0b5d2a) 30%, transparent);
}

/* Hover destekleyen masaüstünde çok hafif perspektif — JS yok, salt CSS */
@media (hover: hover) and (min-width: 1024px) {
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-preview-media {
    transition: transform 260ms ease;
  }
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-preview-card:hover .jersey-preview-media {
    transform: perspective(60rem) rotateY(-1.2deg) rotateX(0.5deg);
  }
}

/* Sahne: forma görseli + SVG baskı katmanı — geçiş animasyonları BURADA
   oynar, böylece forma ve baskı her zaman beraber hareket eder. */
/* FAZ 20: Önizleme Ölçeği tek wrapper'ı — sabit viewport (.jersey-preview-media,
   overflow:hidden) korunur, layout kaymaz; içerideki tüm katmanlar birlikte
   ölçeklenir. transform-origin merkez. Geçiş kasıtlı olarak KISA: panel
   slider'ının tepkisi doğrudan hissedilmeli (ağır animasyon yok). */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-preview-scale {
  position: absolute;
  inset: 0;
  transform: scale(var(--jc-scale, 1));
  transform-origin: center center;
  transition: transform var(--motion-fast, 150ms) var(--ease-standard, ease);
}

.cc_nugnohn9_Hiu7dFbbGQ .jersey-preview-stage {
  position: absolute;
  /* Eski `.jersey-preview-img { padding: 0.75rem }` buraya taşındı: iç boşluk
     görsel + SVG baskı katmanına BİRLİKTE uygulanır — ikisi aynı çerçeveyi
     paylaşır, baskı görselden bağımsız kaymaz. */
  inset: 0.75rem;
  will-change: transform, opacity;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-preview-img, .cc_nugnohn9_Hiu7dFbbGQ .jersey-preview-empty {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-preview-img {
  z-index: 1;
  object-fit: contain;
  object-position: center;
}
/* Ürün değişimi: yumuşak fade + scale (280–360ms bandı) */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-anim-fade {
  animation: cc_nugnohn9_Hiu7dFbbGQ_jersey-preview-fade 320ms ease;
}
@keyframes cc_nugnohn9_Hiu7dFbbGQ_jersey-preview-fade {
  from {
    opacity: 0.7;
    transform: scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* Ön/arka değişimi: kısa yatay flip HİSSİ (masaüstü ≤9deg, mobil ≤4.5deg —
   --jc-flip-deg; görsel kaybolmaz) */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-anim-flip {
  animation: cc_nugnohn9_Hiu7dFbbGQ_jersey-preview-flip 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes cc_nugnohn9_Hiu7dFbbGQ_jersey-preview-flip {
  from {
    opacity: 0.65;
    transform: perspective(56rem) rotateY(var(--jc-flip-deg, 9deg));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes cc_nugnohn9_Hiu7dFbbGQ_jersey-preview-reduced {
  from {
    opacity: 0.7;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* Flip/parallax yok — yalnız kısa opacity geçişi */
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-anim-fade, .cc_nugnohn9_Hiu7dFbbGQ .jersey-anim-flip {
    animation: cc_nugnohn9_Hiu7dFbbGQ_jersey-preview-reduced 160ms ease;
  }
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-preview-media {
    transition: none;
  }
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-preview-card:hover .jersey-preview-media {
    transform: none;
  }
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-preview-empty {
  background: repeating-linear-gradient(
    135deg,
    #f4f2ec 0 14px,
    #eeece5 14px 28px
  );
}

/* Formanın altında çok hafif gerçekçi stüdyo temas gölgesi */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-studio-shadow {
  position: absolute;
  left: 50%;
  bottom: 6%;
  z-index: 0;
  width: 54%;
  height: 4.5%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(58, 45, 27, 0.2) 0%,
    rgba(58, 45, 27, 0) 72%
  );
  filter: blur(6px);
  pointer-events: none;
}

/* İsim + numara SVG baskı katmanı — canvas/PNG üretimi YOK; sabit viewBox
   (300×400) konteynırın 3/4 oranıyla birebir eşleşir → baskı formayla ORANLI
   büyüyüp küçülür. Dolgu/kontur/konum değerleri TSX'ten (print-profiles.ts
   profilleri) gelir; burada yalnız yerleşim + font token'ı var. */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-print-svg {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  /* FAZ 20: --jc-scale ARTIK BURADA DEĞİL. Ölçek yalnız bu SVG'ye (isim +
     numara katmanı) uygulanıyordu; forma görseli sabit kalıyor, baskı onun
     üstünde kayıyordu. Ölçek tek wrapper'a (.jersey-preview-media) taşındı,
     böylece görsel + isim + numara + gölge BİRLİKTE ölçekleniyor. */
  /* Filter/drop-shadow YOK — baskıda halo/gölge istenmiyor (kumaş entegrasyonu
     yalnız profil bazlı opacity ile, TSX'te). */
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-print-text {
  font-family: var(--jersey-print-font-family);
  font-weight: 700;
  text-transform: uppercase;
  /* miter: J-LOG Razor Edge'in keskin köşeleri konturda da korunur. */
  stroke-linejoin: miter;
  text-rendering: geometricPrecision;
}
/* Fallback font ile gerçek baskının aynı olduğu iddia edilmez — temsili not */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-preview-disclaimer {
  margin: 0.5rem 0 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  color: #8b8578;
}

/* Önizleme config'i eksik ürün için sade state (teknik hata değil) */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-preview-missing {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
  background: repeating-linear-gradient(
    135deg,
    #f4f2ec 0 14px,
    #eeece5 14px 28px
  );
  color: #727276;
  font-family: var(--font-label);
  font-size: 0.875rem;
  font-weight: 500;
}

/* ═══ SAĞ: kontrol paneli — sakin tek yüzey, iç içe kutu minimum ═══ */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-customizer-controls {
  display: flex;
  flex-direction: column;
  gap: clamp(0.875rem, 1.5vw, 1.125rem);
  padding: clamp(1.375rem, 2.4vw, 2rem);
  background: #ffffff;
  border: 1px solid #ece5db;
  border-radius: 24px;
  box-shadow: 0 24px 52px -34px rgba(7, 23, 13, 0.18);
}

/* ── Ortak: bölüm başlığı (dot + label) ── */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-label);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2e2e33;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-label-dot {
  flex: 0 0 auto;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: var(--jc-green, #0b5d2a);
}

/* ── Kişiselleştirme modu pill'leri (Yok / Futbolcu / Kişiselleştir) ── */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-mode {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-mode legend {
  padding: 0;
  margin-bottom: 0.625rem;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-mode-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-mode-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 2.75rem; /* 44px dokunma hedefi */
  padding: 0.4375rem 1.125rem;
  border: 1px solid var(--card-border, rgba(10,72,48,0.1));
  border-radius: 999px;
  background: #ffffff;
  color: #2e2e33;
  font-family: var(--font-label);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease,
    color 180ms ease, box-shadow 180ms ease;
}
/* Simge + metin tek satırda; ek fiyat rozeti (varsa) altta kalır. */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-mode-pill-main {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; /* 8px — spec bandı 8-10px */
}

/* Simge boyutu METİNDEN bağımsız sabit; rengi currentColor ile pill'in
   default/selected/disabled durumunu otomatik izler. */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-mode-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
  display: block;
}

.cc_nugnohn9_Hiu7dFbbGQ .jersey-mode-pill:hover:not(.is-active) {
  border-color: var(--jc-green, #0b5d2a);
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-mode-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jc-green, #0b5d2a) 26%, transparent);
}
/* Seçili mod: beden butonlarıyla aynı dil — yeşil zemin + ince altın çerçeve */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-mode-pill.is-active {
  background: var(--jc-green, #0b5d2a);
  border-color: var(--jc-green, #0b5d2a);
  color: #ffffff;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-mode-pill-extra {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--jc-green, #0b5d2a);
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-mode-pill.is-active .jersey-mode-pill-extra {
  color: color-mix(in srgb, #ffffff 82%, transparent);
}

/* Futbolcu SELECT'i VAR ama kadro boş: pill gizlenmez — görünür fakat
   gerçek disabled. Ne tıklanır ne sepete boş option yazılır; nedeni
   altındaki .jersey-mode-note ile aria-describedby üzerinden açıklanır. */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-mode-pill.is-unavailable, .cc_nugnohn9_Hiu7dFbbGQ .jersey-mode-pill:disabled {
  /* Pasif Futbolcu — diğer seçeneklerle AYNI ölçüde, yalnız daha düşük
     kontrastlı ve nötr. Renk dışında da anlaşılır olsun diye native
     `disabled` semantiği kullanılır (ekran okuyucu "devre dışı" der).
     Görünür teknik uyarı metni YOK. */
  background: #ffffff;
  border-color: var(--card-border, rgba(10, 72, 48, 0.1));
  color: #767069;
  opacity: 0.62;
  cursor: not-allowed;
}

.cc_nugnohn9_Hiu7dFbbGQ .jersey-mode-note {
  margin: 8px 0 0;
  font-family: var(--font-label);
  font-size: 12px;
  line-height: 1.35;
  color: #6b6b70;
}

/* ── Futbolcu seçici — 2 kolonlu kart listesi, kontrollü scroll ── */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-players-field {
  gap: 0.5rem;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-player-search {
  height: 2.75rem;
  padding-right: 1rem;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-player-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  max-height: 16.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 0.25rem 2px 2px; /* focus halkası kırpılmasın */
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 2.75rem; /* 44px */
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--card-border, rgba(10,72,48,0.1));
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
  text-align: left;
  min-width: 0;
  transition: border-color 180ms ease, background-color 180ms ease,
    color 180ms ease, box-shadow 180ms ease;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-player:hover:not(.is-selected) {
  border-color: var(--jc-green, #0b5d2a);
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-player:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jc-green, #0b5d2a) 26%, transparent);
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-player.is-selected {
  background: var(--jc-green, #0b5d2a);
  border-color: var(--jc-green, #0b5d2a);
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-player-name {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #2e2e33;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-player-number {
  flex: 0 0 auto;
  font-family: var(--font-label);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--jc-green, #0b5d2a);
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-player.is-selected .jersey-player-name, .cc_nugnohn9_Hiu7dFbbGQ .jersey-player.is-selected .jersey-player-number {
  color: #ffffff;
}

/* ── Kişiselleştirme onayı ── */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-consent {
  gap: 0.375rem;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  cursor: pointer;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-consent-box {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 1px;
  accent-color: var(--jc-green, #0b5d2a);
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-consent-box:focus-visible {
  outline: 2px solid var(--jc-green, #0b5d2a);
  outline-offset: 2px;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-consent-text {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #4a4a4f;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-consent-link {
  color: var(--jc-green, #0b5d2a);
  font-weight: 600;
}

/* ── Beden ── */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-sizes {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-sizes-group {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-sizes-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
/* Beden butonları: eşit ölçülü kutular, ≥44px dokunma alanı */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-size {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.25rem;
  min-height: 2.75rem; /* 44px */
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--card-border, rgba(10,72,48,0.1));
  border-radius: 10px;
  background: #ffffff;
  color: #2e2e33;
  font-family: var(--font-label);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease,
    box-shadow 180ms ease;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-size:hover:not(.is-selected):not(.is-disabled) {
  border-color: var(--jc-green, #0b5d2a);
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-size:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jc-green, #0b5d2a) 26%, transparent);
}
/* Seçili beden: koyu yeşil zemin, beyaz yazı, İNCE altın border */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-size.is-selected {
  background: var(--jc-green, #0b5d2a);
  border-color: var(--jc-green, #0b5d2a);
  color: #ffffff;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-size.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* fieldset olarak render edilir — native görünüm sıfırlanır, legend üstte
   normal label gibi durur (flex gap legend'a işlemez → margin ile boşluk). */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-size-section {
  gap: 0.75rem;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-size-section legend {
  padding: 0;
  margin-bottom: 0.75rem;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-size-subhead {
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #727276;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-size-empty {
  margin: 0;
  font-family: var(--font-label);
  font-size: 0.875rem;
  font-weight: 500;
  color: #9c9c9f;
}

/* ── Ürün seçici — yatay thumbnail sırası (scroll-snap) ── */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-products {
  gap: 0.75rem;
  min-width: 0;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-products-row {
  display: flex;
  gap: 0.625rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-product-thumb {
  flex: 0 0 auto;
  width: 6.75rem; /* 108px — isim 2 satırda rahat okunur */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem;
  border: 1px solid var(--card-border, rgba(10,72,48,0.1));
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-product-thumb:hover:not(.is-selected) {
  border-color: var(--jc-green, #0b5d2a);
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-product-thumb:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jc-green, #0b5d2a) 26%, transparent);
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-product-thumb.is-selected {
  border-color: var(--jc-green, #0b5d2a);
  box-shadow: 0 0 0 2px var(--jc-green, #0b5d2a);
}
/* Stoğu tamamen biten ürün: muted ama seçilebilir (CTA "STOKTA YOK" gösterir) */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-product-thumb.is-oos {
  opacity: 0.55;
}
/* Ürün görseli KIRPILMAZ (contain); sabit kare alan → kart yükseklikleri eşit */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-product-thumb-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 8px;
  background: #f5f1e8;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-product-thumb-ph {
  display: block;
}
/* İsim her kartta SABİT 2 satır alanı kaplar → düzensiz kart yüksekliği olmaz */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-product-thumb-name {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.25;
  height: 2.5em; /* tam 2 satır */
  color: #2e2e33;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Baskı iade uyarısı — kişiselleştirme seçiliyken onay alanının hemen
   üstünde. Amed kırmızısı yalnız İKAZ vurgusu olarak, yumuşak zeminle. */
/* ── Kişiselleştirme notu ──────────────────────────────────────────────
   BİLGİLENDİRME, hata değil: kırmızı hata kutusu yerine sıcak-nötr sakin
   yüzey. Kırmızı yalnız ikon glifinde, aksan ölçüsünde kalır (§44: yeşil
   baskın, kırmızı destekleyici). Beden ile sipariş özeti arasında durur. */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-note {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0;
  padding: 0.75rem 0.875rem;
  border: 1px solid #ece5db;
  border-radius: 12px;
  background: #faf8f4;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-note__icon {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  /* Optik hizalama: ikon dairesi başlık x-yüksekliğinin ortasına oturur. */
  margin-top: 0.0625rem;
  color: var(--jc-red, #a82025);
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-note__body {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  min-width: 0;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-note__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-text-primary, #1c1917);
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-note__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #55504a;
  /* Uzun metin dar mobil kolonda yatay taşma üretmez. */
  overflow-wrap: anywhere;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-note__link {
  align-self: flex-start;
  margin-top: 0.125rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--jc-green, #0b5d2a);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-note__link:hover {
  text-decoration-thickness: 2px;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-note__link:focus-visible {
  outline: 2px solid var(--jc-green, #0b5d2a);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Hidrasyon iskeleti: tam ürün gelene dek kart alanı bekler — geçici legacy
   kart render edilmez. Mevcut skeleton dili (.jersey-size--skel) ile aynı. */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-product-thumb--skel {
  height: 9.5rem;
  border-color: #ece5db;
  background: linear-gradient(90deg, #f2ede4 25%, #e9e2d6 37%, #f2ede4 63%);
  background-size: 400% 100%;
  animation: cc_nugnohn9_Hiu7dFbbGQ_jersey-skel 1.4s ease infinite;
  cursor: default;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-product-thumb--skel {
    animation: none;
  }
}

/* Varyant kartında RENK adı esas etikettir; ürün adı yalnız ÇOK ürünlü
   listede tek satırlık sessiz alt bilgi olarak eklenir (Product A / yeşil
   ile Product B / beyaz ayrımı). */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-product-thumb-sub {
  font-family: var(--font-label);
  font-size: 0.5625rem;
  font-weight: 500;
  line-height: 1.2;
  max-width: 100%;
  color: #6f6f76;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Yükleme skeleton pill'i (dekoratif; veri gelince gerçek bedenlerle değişir) */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-size--skel {
  width: 3.25rem;
  height: 2.75rem;
  border-color: #ece5db;
  background: linear-gradient(90deg, #f2ede4 25%, #e9e2d6 37%, #f2ede4 63%);
  background-size: 400% 100%;
  animation: cc_nugnohn9_Hiu7dFbbGQ_jersey-skel 1.4s ease infinite;
  cursor: default;
  pointer-events: none;
}
@keyframes cc_nugnohn9_Hiu7dFbbGQ_jersey-skel {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}

/* ── İsim & Numara — sıkı label/input aralığı, kompakt yükseklik ── */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-input {
  width: 100%;
  box-sizing: border-box;
  height: 3rem;
  padding: 0 3.25rem 0 1rem;
  border: 1px solid var(--card-border, rgba(10,72,48,0.1));
  border-radius: 12px;
  background: #fbfaf7;
  font-family: var(--font-body);
  font-size: 1rem;
  color: #07170d;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-input::placeholder {
  color: #a7a196;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-input:hover {
  border-color: #c7bfb1;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-input:focus-visible {
  outline: none;
  background: #ffffff;
  border-color: var(--jc-green, #0b5d2a);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jc-green, #0b5d2a) 16%, transparent);
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-input[aria-invalid="true"] {
  border-color: var(--jc-red, #a82025);
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-input--number {
  font-weight: 700;
  letter-spacing: 0.06em;
}
/* Input içi sayaç */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-counter {
  position: absolute;
  right: 0.875rem;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 600;
  color: #a7a196;
  pointer-events: none;
}

/* Alan doğrulama hatası — ilgili input'un hemen altında */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-field-error {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--jc-red, #a82025);
}
/* Engellemeyen uyarı (örn. isim okunabilirlik sınırının altına küçülüyor) */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-field-warning {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: #8a6a1c;
}
/* Ekran okuyucuya özel — görsel olarak gizli success anonsu */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Sipariş özeti — hafifletildi: kutu yok, sade satırlar + güçlü Toplam ── */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-summary {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-summary-label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: #6b6560;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-summary-value {
  font-family: var(--font-label);
  font-size: 0.875rem;
  font-weight: 600;
  color: #07170d;
  text-align: right;
  overflow-wrap: anywhere;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-summary-row--total {
  margin-top: 0.375rem;
  padding-top: 0.75rem;
  border-top: 1px solid #ece5db;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-summary-row--total .jersey-summary-label {
  font-family: var(--font-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #07170d;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-summary-row--total .jersey-summary-value {
  font-size: 1.25rem;
  color: var(--jc-green, #0b5d2a);
}

/* ── Sepet hatası (CTA yanı) ── */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-error {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--jc-red, #a82025);
}

/* ── Ana CTA — güçlü fakat sade; hover'da buton sabit, YALNIZ ok kayar ── */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  min-height: 3.5rem; /* 56px */
  padding: 0.875rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--jc-green, #0b5d2a);
  color: #ffffff;
  font-family: var(--font-label);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: box-shadow 180ms ease, filter 180ms ease, background-color 180ms ease;
  box-shadow: 0 16px 32px -16px color-mix(in srgb, var(--jc-green, #0b5d2a) 72%, transparent);
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-cta:hover:not(:disabled) {
  filter: brightness(0.94);
  box-shadow: 0 20px 38px -16px color-mix(in srgb, var(--jc-green, #0b5d2a) 80%, transparent);
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-cta-icon {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  transition: transform 200ms ease;
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-cta:hover:not(:disabled) .jersey-cta-icon--arrow {
  transform: translateX(4px); /* yalnız ok; maks 5px kuralı içinde */
}
/* Gerçek cart success'inde kısa check pop'u — tek seferlik, shimmer yok */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-cta-icon--check {
  animation: cc_nugnohn9_Hiu7dFbbGQ_jc-check-pop 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes cc_nugnohn9_Hiu7dFbbGQ_jc-check-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jc-green, #0b5d2a) 30%, transparent);
}
.cc_nugnohn9_Hiu7dFbbGQ .jersey-cta:disabled {
  background: #c7c3ba;
  color: #f4f4f2;
  cursor: not-allowed;
  box-shadow: none;
}

/* ── Mobil sticky sepet barı — yalnız <768px; fixed + safe-area.
   Görünürlük JS'te IntersectionObserver ile: section görünür VE ana CTA
   ekran dışı. Footer üzerinde asla durmaz. ── */
.cc_nugnohn9_Hiu7dFbbGQ .jersey-sticky-bar {
  display: none;
}
@keyframes cc_nugnohn9_Hiu7dFbbGQ_jersey-sticky-in {
  from {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}
@media (max-width: 767px) {
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-header, 90);
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-height: 4.25rem; /* 68px */
    padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom, 0px));
    background: #ffffff;
    border-top: 1px solid var(--card-border, rgba(10,72,48,0.1));
    box-shadow: 0 -10px 28px -18px rgba(7, 23, 13, 0.3);
    animation: cc_nugnohn9_Hiu7dFbbGQ_jersey-sticky-in 240ms ease;
  }
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-sticky-price {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
  }
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-sticky-price-label {
    font-family: var(--font-label);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b6560;
  }
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-sticky-price-value {
    font-family: var(--font-label);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--jc-green, #0b5d2a);
    white-space: nowrap;
  }
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-sticky-cta {
    flex: 1;
    min-height: 3rem; /* 48px buton → bar toplamı ~68-72px bandında */
    box-shadow: none;
  }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-sticky-bar {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-cta, .cc_nugnohn9_Hiu7dFbbGQ .jersey-input, .cc_nugnohn9_Hiu7dFbbGQ .jersey-size, .cc_nugnohn9_Hiu7dFbbGQ .jersey-cta-icon {
    transition: none;
  }
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-cta:hover:not(:disabled) .jersey-cta-icon--arrow {
    transform: none;
  }
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-cta-icon--check {
    animation: none;
  }
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-size--skel {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TEK KOLON yerleşim (<1024px): panel kutusu YOK — sol kolon ve
   kontrol paneli display:contents ile flex akışına açılır; görsel
   sıra: 1 başlık · 2 ürün seçici · 3 önizleme · 4 isim · 5 numara ·
   6 beden · 7 özet · 8 hata · 9 CTA. Başlık sağ panele taşındığından
   bu sıralama tablet bandında da (768–1023) zorunlu — yoksa önizleme
   başlıktan önce gelir.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-customizer-layout {
    display: flex;
    flex-direction: column;
    /* Taban grid kuralındaki align-items:start'ı ez: flex kolonda cross-axis
       stretch olmazsa önizleme kartı içerik genişliğine büyüyüp taşıyor */
    align-items: stretch;
    gap: 1.25rem;
  }
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-left, .cc_nugnohn9_Hiu7dFbbGQ .jersey-customizer-controls {
    display: contents;
  }
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-customizer-header {
    order: 1;
  }
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-products {
    order: 2;
  }
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-preview {
    order: 3;
  }
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-mode {
    order: 4;
  }
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-players-field {
    order: 5;
  }
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-field--name {
    order: 5;
  }
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-field--number {
    order: 6;
  }
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-size-section {
    order: 7;
  }
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-note {
    order: 8;
  }
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-consent {
    order: 8;
  }
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-summary {
    order: 9;
  }
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-error {
    order: 10;
  }
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-cta {
    order: 11;
  }
}

@media (max-width: 767px) {
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-note__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: -0.25rem;
    margin-bottom: -0.375rem;
  }
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-customizer {
    /* Alt padding sticky barın kullanılabildiği mobil durum için bir miktar
       geniş — son içerik bar altında kalmaz */
    padding-block: 2rem 3rem;
    /* Mobilde ön/arka flip daha yumuşak (spec: maks 4-5deg) */
    --jc-flip-deg: 4.5deg;
  }
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-customizer-container {
    padding-inline: 1rem;
  }
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-customizer-layout {
    gap: 1rem;
  }

  /* Önizleme kartı: üst/alt iç boşluk sıkı; etiket satırı switch'e yer
     bırakacak kadar yüksek → ÖN/ARKA kontrolü forma görseline taşmaz */
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-preview-card {
    padding: 0.75rem;
  }
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-preview-tag {
    min-height: 2.5rem;
    margin-bottom: 0.375rem;
  }
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-preview-side-switch {
    top: 0.625rem;
    right: 0.625rem;
  }
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-preview-img {
    padding: 0.5rem;
  }

  /* Form alanları: 56px input, kompakt label/bullet */
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-input {
    height: 3.5rem; /* 56px */
  }
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-label {
    font-size: 0.75rem;
  }
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-label-dot {
    width: 0.25rem;
    height: 0.25rem;
  }

  .cc_nugnohn9_Hiu7dFbbGQ .jersey-customizer-title {
    font-size: clamp(1.75rem, 7.5vw, 2.25rem);
    line-height: 1.06;
  }

  /* Ürün seçici: ~96px kart, sonraki kartın bir kısmı görünür (peek). */
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-product-thumb {
    width: 6rem; /* 96px */
  }

  /* Özet: uzun ürün adı taşmasın */
  .cc_nugnohn9_Hiu7dFbbGQ .jersey-summary-value {
    max-width: 58%;
    overflow-wrap: anywhere;
    text-align: right;
  }
}

/* ═══ MOBİL KANONİK CTA (global.css --m-cta-*) ═══ */
@media (max-width: 767px) {
  /* ── 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_Hiu7dFbbGQ .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_Hiu7dFbbGQ .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_Hiu7dFbbGQ .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_Hiu7dFbbGQ .amed-mobile-primary-cta:active .amed-cta-arrow {
    transform: translateX(1px);
  }
  .cc_nugnohn9_Hiu7dFbbGQ .amed-mobile-primary-cta:focus-visible {
    outline: 3px solid rgba(10, 104, 69, 0.28);
    outline-offset: 3px;
  }
  .cc_nugnohn9_Hiu7dFbbGQ .amed-mobile-primary-cta:disabled, .cc_nugnohn9_Hiu7dFbbGQ .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_Hiu7dFbbGQ .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_Hiu7dFbbGQ .amed-mobile-primary-cta:hover .amed-cta-arrow {
    transform: translateX(3px);
  }
}