/* ==========================================================================
   GECE VİTRİNİ — kart yüzeyi ve huzme (beam)

   `kombos-card-beam` ürünü SARAN kabuğa verilir (ProductSlider, CategoryList,
   AccountFavorites, SearchModal). Kart gövdesi ProductCard ile kardeş olduğu
   için (ad/fiyat ayrı bileşenler) yüzey ve parıltı kabuğa ait olmalı.

   Prototip .card kalıbı: yüzey zemin + ince çizgi + 16px köşe, görsel tam
   genişlikte AÇIK kaide (4/5), gövde 18px dolgulu. Müşteri kuralı: kartta
   imleci takip eden huzme DIŞINDA statik hover parıltısı YOK.
   ========================================================================== */
.cc_MSI3fYnLer_navbar .kombos-card-beam, .cc_MSI3fYnLer_product_slider .kombos-card-beam, .cc_MSI3fYnLer_product_list .kombos-card-beam, .cc_MSI3fYnLer_account_favorites .kombos-card-beam {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  /* YÜKSEKLİK BİLEREK auto: flex/grid ebeveynde `align-items: stretch` ancak
     cross-size `auto` iken çalışır. Önceki `height: 100%` stretch'i iptal
     ediyordu ve %100 belirsiz ebeveynde çözülemeyince kartlar içerik boyuna
     düşüyordu — üründe kart yükseklikleri eşitlenmiyordu (canlıda görüldü). */
  background: var(--kombos-white);
  border: 1px solid var(--kombos-line);
  border-radius: var(--kombos-radius);
  overflow: hidden;
  padding: 0 0 1.125rem;
  transition: border-color 0.3s ease, transform 0.25s ease;
}

.cc_MSI3fYnLer_navbar .kombos-card-beam:hover, .cc_MSI3fYnLer_product_slider .kombos-card-beam:hover, .cc_MSI3fYnLer_product_list .kombos-card-beam:hover, .cc_MSI3fYnLer_account_favorites .kombos-card-beam:hover {
  transform: translateY(-4px);
}

/* Huzme katmanı — konumu JS'ten gelen --beam-x/--beam-y ile sürülür.
   Yalnız `opacity` anime edilir; gradyanın kendisi yeniden boyanmaz. */
.cc_MSI3fYnLer_navbar .kombos-card-beam::before, .cc_MSI3fYnLer_product_slider .kombos-card-beam::before, .cc_MSI3fYnLer_product_list .kombos-card-beam::before, .cc_MSI3fYnLer_account_favorites .kombos-card-beam::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(
    14rem 14rem at var(--beam-x, 50%) var(--beam-y, 50%),
    var(--kombos-glow-warm) 0%,
    rgba(255, 180, 84, 0.08) 45%,
    transparent 72%
  );
}

.cc_MSI3fYnLer_navbar .kombos-card-beam--on::before, .cc_MSI3fYnLer_product_slider .kombos-card-beam--on::before, .cc_MSI3fYnLer_product_list .kombos-card-beam--on::before, .cc_MSI3fYnLer_account_favorites .kombos-card-beam--on::before {
  opacity: 1;
}

.cc_MSI3fYnLer_navbar .kombos-card-beam--on, .cc_MSI3fYnLer_product_slider .kombos-card-beam--on, .cc_MSI3fYnLer_product_list .kombos-card-beam--on, .cc_MSI3fYnLer_account_favorites .kombos-card-beam--on {
  border-color: rgba(255, 180, 84, 0.32);
}

/* İçerik huzmenin ÜSTÜNDE kalır; ad/fiyat zemini saydam olduğu için
   parıltı metnin arkasından süzülür. */
.cc_MSI3fYnLer_navbar .kombos-card-beam > *, .cc_MSI3fYnLer_product_slider .kombos-card-beam > *, .cc_MSI3fYnLer_product_list .kombos-card-beam > *, .cc_MSI3fYnLer_account_favorites .kombos-card-beam > *, .cc_MSI3fYnLer_navbar .kombos-card-beam > .kombos-product-card > *, .cc_MSI3fYnLer_product_slider .kombos-card-beam > .kombos-product-card > *, .cc_MSI3fYnLer_product_list .kombos-card-beam > .kombos-product-card > *, .cc_MSI3fYnLer_account_favorites .kombos-card-beam > .kombos-product-card > * {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   SEPETE EKLE KARTIN EN ALTINDA

   Kombos'ta buton ProductCard'ın İÇİNDE, ad ve fiyat ise ProductCard'ın
   KARDEŞİ (ayrı bileşenler). `display: contents` ProductCard'ın kutusunu
   kaldırır, çocukları kabuğun doğrudan flex öğesi olur ve `order` ile
   sıralanır: görsel → ad → fiyat → CTA. `margin-top: auto` butonu tabana
   iter; bütün kartların butonu aynı hizada durur.

   Görsel tam kanat (dolgusuz), metin ve buton 1.125rem yan dolgu alır —
   prototipteki 18px gövde dolgusunun karşılığı.
   ========================================================================== */
.cc_MSI3fYnLer_navbar .kombos-card-beam > .kombos-product-card, .cc_MSI3fYnLer_product_slider .kombos-card-beam > .kombos-product-card, .cc_MSI3fYnLer_product_list .kombos-card-beam > .kombos-product-card, .cc_MSI3fYnLer_account_favorites .kombos-card-beam > .kombos-product-card {
  display: contents;
}

.cc_MSI3fYnLer_navbar .kombos-card-beam .kombos-product-card__image-wrapper, .cc_MSI3fYnLer_product_slider .kombos-card-beam .kombos-product-card__image-wrapper, .cc_MSI3fYnLer_product_list .kombos-card-beam .kombos-product-card__image-wrapper, .cc_MSI3fYnLer_account_favorites .kombos-card-beam .kombos-product-card__image-wrapper {
  order: 0;
  margin-bottom: 1rem;
}

/* ÖLÇÜLDÜ (canlı DOM): __card-content sarmalayıcısı da her çocuğun cc_*
   sarmalayıcısı da display: contents — kutu üretmezler, padding/margin/order
   üzerlerinde İŞLEMEZ. Kabuğun gerçek flex öğeleri bileşen köklerinin
   kendileridir. Bu yüzden yan dolgu ve hizalama kuralları köklere yazılır. */

/* Görsel altındaki tüm metin satırları kart kenarından 1.125rem içeride.
   position + z-index: eski `> *` kuralı contents sarmalayıcılara çarpıp
   İŞLEMİYORDU — metin huzme katmanının üstünde kalsın diye köklere verilir. */
.cc_MSI3fYnLer_navbar .kombos-card-beam
  :is(
    .kombos-card-product-category,
    .kombos-card-product-name,
    .kombos-card-product-tags,
    .kombos-card-product-price,
    .kombos-card-product-installment
  ), .cc_MSI3fYnLer_product_slider .kombos-card-beam
  :is(
    .kombos-card-product-category,
    .kombos-card-product-name,
    .kombos-card-product-tags,
    .kombos-card-product-price,
    .kombos-card-product-installment
  ), .cc_MSI3fYnLer_product_list .kombos-card-beam
  :is(
    .kombos-card-product-category,
    .kombos-card-product-name,
    .kombos-card-product-tags,
    .kombos-card-product-price,
    .kombos-card-product-installment
  ), .cc_MSI3fYnLer_account_favorites .kombos-card-beam
  :is(
    .kombos-card-product-category,
    .kombos-card-product-name,
    .kombos-card-product-tags,
    .kombos-card-product-price,
    .kombos-card-product-installment
  ) {
  padding-inline: 1.125rem;
  position: relative;
  z-index: 1;
}

/* TABAN BLOĞU: fiyat + taksit + CTA her kartta en alta yaslanır.
   Esnek boşluk etiketlerle fiyat ARASINDA büyür (prototip .price-row
   margin-top: auto) — iki ayrı auto margin OLMAZ, boşluğu bölüşürler. */
.cc_MSI3fYnLer_navbar .kombos-card-beam .kombos-card-product-price, .cc_MSI3fYnLer_product_slider .kombos-card-beam .kombos-card-product-price, .cc_MSI3fYnLer_product_list .kombos-card-beam .kombos-card-product-price, .cc_MSI3fYnLer_account_favorites .kombos-card-beam .kombos-card-product-price {
  margin-top: auto;
  padding-top: 0.375rem;
}

.cc_MSI3fYnLer_navbar .kombos-card-beam .kombos-product-card__add-btn, .cc_MSI3fYnLer_product_slider .kombos-card-beam .kombos-product-card__add-btn, .cc_MSI3fYnLer_product_list .kombos-card-beam .kombos-product-card__add-btn, .cc_MSI3fYnLer_account_favorites .kombos-card-beam .kombos-product-card__add-btn {
  order: 2;
  margin: 0.375rem 1.125rem 0;
  width: auto;
  align-self: stretch;
}

/* ===== Product Card ===== */
.cc_MSI3fYnLer_navbar .kombos-product-card, .cc_MSI3fYnLer_product_slider .kombos-product-card, .cc_MSI3fYnLer_product_list .kombos-product-card, .cc_MSI3fYnLer_account_favorites .kombos-product-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

/* Image wrapper — prototip .card-media: açık kaide, karta tam oturur */
.cc_MSI3fYnLer_navbar .kombos-product-card__image-wrapper, .cc_MSI3fYnLer_product_slider .kombos-product-card__image-wrapper, .cc_MSI3fYnLer_product_list .kombos-product-card__image-wrapper, .cc_MSI3fYnLer_account_favorites .kombos-product-card__image-wrapper {
  position: relative;
  overflow: hidden;
  background: var(--kombos-media-grad);
}

/* Prototip .media-dark otomatiği: fotoğrafın kenarları koyuysa (siyah fonlu
   neon çekimi gibi) açık kaide bantlara dönüşüyordu — kaide koyu radyale
   döner, multiply kapanır (koyu zeminde fotoğrafı simsiyah yapardı). */
.cc_MSI3fYnLer_navbar .kombos-product-card__image-wrapper--dark, .cc_MSI3fYnLer_product_slider .kombos-product-card__image-wrapper--dark, .cc_MSI3fYnLer_product_list .kombos-product-card__image-wrapper--dark, .cc_MSI3fYnLer_account_favorites .kombos-product-card__image-wrapper--dark {
  background: radial-gradient(circle at 50% 42%, #161b26 0%, #0a0d13 100%);
}

.cc_MSI3fYnLer_navbar .kombos-product-card__image-wrapper--dark .kombos-product-card__media, .cc_MSI3fYnLer_product_slider .kombos-product-card__image-wrapper--dark .kombos-product-card__media, .cc_MSI3fYnLer_product_list .kombos-product-card__image-wrapper--dark .kombos-product-card__media, .cc_MSI3fYnLer_account_favorites .kombos-product-card__image-wrapper--dark .kombos-product-card__media {
  mix-blend-mode: normal;
}

/* Koyu kaidede koyu mürekkep kalp görünmez — açık renge döner */
.cc_MSI3fYnLer_navbar .kombos-product-card__image-wrapper--dark .kombos-product-card__favorite, .cc_MSI3fYnLer_product_slider .kombos-product-card__image-wrapper--dark .kombos-product-card__favorite, .cc_MSI3fYnLer_product_list .kombos-product-card__image-wrapper--dark .kombos-product-card__favorite, .cc_MSI3fYnLer_account_favorites .kombos-product-card__image-wrapper--dark .kombos-product-card__favorite {
  color: var(--kombos-gray-900);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}

.cc_MSI3fYnLer_navbar .kombos-product-card__media-link, .cc_MSI3fYnLer_product_slider .kombos-product-card__media-link, .cc_MSI3fYnLer_product_list .kombos-product-card__media-link, .cc_MSI3fYnLer_account_favorites .kombos-product-card__media-link {
  display: block;
}

.cc_MSI3fYnLer_navbar .kombos-product-card__media, .cc_MSI3fYnLer_product_slider .kombos-product-card__media, .cc_MSI3fYnLer_product_list .kombos-product-card__media, .cc_MSI3fYnLer_account_favorites .kombos-product-card__media {
  width: 100%;
  height: auto;
  display: block;
  /* Karışım BİLİNÇLİ kapalı: gri stüdyo fonlu fotoğraflarda multiply
     kaideyle çarpıp görüntüyü soluklaştırıyordu (müşteri iki kez raporladı).
     Fotoğraf kaynağına birebir basılır; kaide yalnız contain boşluklarında
     görünür. */
  mix-blend-mode: normal;
  transition: transform 0.4s ease, opacity 0.3s ease;
}

/* Prototip: hover'da görsel hafifçe yaklaşır */
.cc_MSI3fYnLer_navbar .kombos-card-beam:hover .kombos-product-card__media--primary, .cc_MSI3fYnLer_product_slider .kombos-card-beam:hover .kombos-product-card__media--primary, .cc_MSI3fYnLer_product_list .kombos-card-beam:hover .kombos-product-card__media--primary, .cc_MSI3fYnLer_account_favorites .kombos-card-beam:hover .kombos-product-card__media--primary {
  transform: scale(1.045);
}

.cc_MSI3fYnLer_navbar .kombos-product-card__media--primary, .cc_MSI3fYnLer_product_slider .kombos-product-card__media--primary, .cc_MSI3fYnLer_product_list .kombos-product-card__media--primary, .cc_MSI3fYnLer_account_favorites .kombos-product-card__media--primary {
  transition: opacity 0.3s ease, transform 0.4s ease;
}

.cc_MSI3fYnLer_navbar .kombos-product-card__media--hover, .cc_MSI3fYnLer_product_slider .kombos-product-card__media--hover, .cc_MSI3fYnLer_product_list .kombos-product-card__media--hover, .cc_MSI3fYnLer_account_favorites .kombos-product-card__media--hover {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Görsel takası YALNIZ ikinci görsel varken: koşulsuz `opacity: 0` tek
   görselli üründe hover'da görseli tamamen yok ediyordu (canlıda görüldü).
   TSX, ikinci görsel varsa sarmalayıcıya --has-hover niteleyicisi ekler. */
.cc_MSI3fYnLer_navbar .kombos-product-card__image-wrapper--has-hover:hover
  .kombos-product-card__media--primary, .cc_MSI3fYnLer_product_slider .kombos-product-card__image-wrapper--has-hover:hover
  .kombos-product-card__media--primary, .cc_MSI3fYnLer_product_list .kombos-product-card__image-wrapper--has-hover:hover
  .kombos-product-card__media--primary, .cc_MSI3fYnLer_account_favorites .kombos-product-card__image-wrapper--has-hover:hover
  .kombos-product-card__media--primary {
  opacity: 0;
}

.cc_MSI3fYnLer_navbar .kombos-product-card__image-wrapper--has-hover:hover
  .kombos-product-card__media--hover, .cc_MSI3fYnLer_product_slider .kombos-product-card__image-wrapper--has-hover:hover
  .kombos-product-card__media--hover, .cc_MSI3fYnLer_product_list .kombos-product-card__image-wrapper--has-hover:hover
  .kombos-product-card__media--hover, .cc_MSI3fYnLer_account_favorites .kombos-product-card__image-wrapper--has-hover:hover
  .kombos-product-card__media--hover {
  opacity: 1;
}

/* Karartma perdesi — kart "kapalı" durur, hover'da ışık açılır (prototip .scrim) */
.cc_MSI3fYnLer_navbar .kombos-product-card__image-wrapper::after, .cc_MSI3fYnLer_product_slider .kombos-product-card__image-wrapper::after, .cc_MSI3fYnLer_product_list .kombos-product-card__image-wrapper::after, .cc_MSI3fYnLer_account_favorites .kombos-product-card__image-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--kombos-media-scrim);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.cc_MSI3fYnLer_navbar .kombos-card-beam:hover .kombos-product-card__image-wrapper::after, .cc_MSI3fYnLer_product_slider .kombos-card-beam:hover .kombos-product-card__image-wrapper::after, .cc_MSI3fYnLer_product_list .kombos-card-beam:hover .kombos-product-card__image-wrapper::after, .cc_MSI3fYnLer_account_favorites .kombos-card-beam:hover .kombos-product-card__image-wrapper::after {
  opacity: 0;
}

@media (hover: none) {
  .cc_MSI3fYnLer_navbar .kombos-product-card__image-wrapper::after, .cc_MSI3fYnLer_product_slider .kombos-product-card__image-wrapper::after, .cc_MSI3fYnLer_product_list .kombos-product-card__image-wrapper::after, .cc_MSI3fYnLer_account_favorites .kombos-product-card__image-wrapper::after {
    opacity: 0;
  }
}

.cc_MSI3fYnLer_navbar .kombos-product-card__media--placeholder, .cc_MSI3fYnLer_product_slider .kombos-product-card__media--placeholder, .cc_MSI3fYnLer_product_list .kombos-product-card__media--placeholder, .cc_MSI3fYnLer_account_favorites .kombos-product-card__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--kombos-gray-300);
  font-size: 4rem;
  mix-blend-mode: normal;
}

/* Badges */
.cc_MSI3fYnLer_navbar .kombos-product-card__badges, .cc_MSI3fYnLer_product_slider .kombos-product-card__badges, .cc_MSI3fYnLer_product_list .kombos-product-card__badges, .cc_MSI3fYnLer_account_favorites .kombos-product-card__badges {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 2;
}

/* Favorite */
.cc_MSI3fYnLer_navbar .kombos-product-card__favorite, .cc_MSI3fYnLer_product_slider .kombos-product-card__favorite, .cc_MSI3fYnLer_product_list .kombos-product-card__favorite, .cc_MSI3fYnLer_account_favorites .kombos-product-card__favorite {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 1.5rem;
  /* Açık kaide üzerinde koyu ikon okunur; parıltı gölgesi gerekmez */
  color: #171008;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.cc_MSI3fYnLer_navbar .kombos-product-card__favorite:hover, .cc_MSI3fYnLer_product_slider .kombos-product-card__favorite:hover, .cc_MSI3fYnLer_product_list .kombos-product-card__favorite:hover, .cc_MSI3fYnLer_account_favorites .kombos-product-card__favorite:hover {
  color: var(--kombos-accent);
}

/* Stok bitti perdesi BİLİNÇLİ kaldırıldı: %32 siyah örtü fotoğrafı soluk
   gösteriyordu (müşteri şikayeti — DOM karşılaştırmasıyla kanıtlandı; soluk
   görünen kartlar yalnız stoksuz olanlardı). Durum "Tükendi" butonuyla anlatılır. */

/* Add to Cart Button — prototip .btn-cart: yarı saydam amber dolgu + kontur;
   hover'da dolu amber. Button primary'nin parıltı gölgesi kart içinde fazla
   kaçar, burada bastırılır. */
.cc_MSI3fYnLer_navbar .kombos-product-card__add-btn.kombos-btn--primary, .cc_MSI3fYnLer_product_slider .kombos-product-card__add-btn.kombos-btn--primary, .cc_MSI3fYnLer_product_list .kombos-product-card__add-btn.kombos-btn--primary, .cc_MSI3fYnLer_account_favorites .kombos-product-card__add-btn.kombos-btn--primary {
  background: rgba(255, 180, 84, 0.12);
  border-color: rgba(255, 180, 84, 0.3);
  color: var(--kombos-accent);
  box-shadow: none;
}

/* Tükendi durumu — Sepete Ekle'den net ayrışır (müşteri isteği):
   amber tamamen çekilir, soluk gri hayalet buton kalır; üzerinden sol
   alttan sağ üste ince bir çizgi geçer ("üstü çizili" metaforu).
   Çizgi degrade ile çizilir — ek DOM ögesi gerekmez. */
.cc_MSI3fYnLer_navbar .kombos-product-card__add-btn.kombos-btn--primary:disabled, .cc_MSI3fYnLer_product_slider .kombos-product-card__add-btn.kombos-btn--primary:disabled, .cc_MSI3fYnLer_product_list .kombos-product-card__add-btn.kombos-btn--primary:disabled, .cc_MSI3fYnLer_account_favorites .kombos-product-card__add-btn.kombos-btn--primary:disabled {
  background:
    linear-gradient(
      to top right,
      transparent calc(50% - 0.5px),
      rgba(139, 149, 167, 0.45) calc(50% - 0.5px),
      rgba(139, 149, 167, 0.45) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)
    ),
    rgba(255, 255, 255, 0.03);
  border-color: var(--kombos-line-strong);
  color: var(--kombos-gray-400);
  opacity: 0.75;
  cursor: not-allowed;
}

.cc_MSI3fYnLer_navbar .kombos-product-card__add-btn.kombos-btn--primary:hover:not(:disabled), .cc_MSI3fYnLer_product_slider .kombos-product-card__add-btn.kombos-btn--primary:hover:not(:disabled), .cc_MSI3fYnLer_product_list .kombos-product-card__add-btn.kombos-btn--primary:hover:not(:disabled), .cc_MSI3fYnLer_account_favorites .kombos-product-card__add-btn.kombos-btn--primary:hover:not(:disabled) {
  background: var(--kombos-accent);
  border-color: var(--kombos-accent);
  color: var(--kombos-on-accent);
  transform: none;
  box-shadow: none;
}