/* ==========================================================================
   3. CATALOG-CARDS.CSS — Butik Galeri Ürün Kartları (Ön / Sırt Geçişli)
   ========================================================================== */

.jersey-card-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 7 / 8;
  background-color: var(--stage-bg, #F4F4F5);
  transition: background-color 0.18s ease;
}

.jersey-img-front,
.jersey-img-back {
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.jersey-img-back {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.02);
}

/* Monokrom İndirim / Ön Sipariş Rozeti (Her iki temada da net mat siyah) */
.monochrome-badge,
html.light .monochrome-badge {
  background-color: rgba(10, 10, 10, 0.88) !important;
  color: #FAFAFA !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(6px);
}

/* Masaüstünde üzerine gelince (hover) yalnızca pürüzsüzce sırt yüzünü göster */
@media (hover: hover) and (pointer: fine) {
  .jersey-card:hover .jersey-img-front {
    opacity: 0;
    transform: scale(0.99);
  }
  .jersey-card:hover .jersey-img-back {
    opacity: 1;
    transform: scale(1);
  }
}