/* PRODUCT CARD + ürün ızgarası marka-tema — F3. İlke: kart bir "UI kutusu" DEĞİLDİR. Çerçeve, gölge, yuvarlatma, zemin yoktur; fotoğ */

/* ============================================================ IZGARA (WooCommer */
/* !important ×3: WooCommerce `ul.products`'a float tabanlı eski ızgarayı (width:22.05%, float:left, margin-right */
.woocommerce ul.products, ul.wc-block-grid__products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(30px, 3vw, 44px) clamp(10px, 1.2vw, 16px);
  padding: 0; margin: 0; list-style: none;
}
.woocommerce ul.products li.product, .wc-block-grid__product {
  width: auto !important; margin: 0 !important; text-align: left;
}
.woocommerce ul.products li.product::before { content: none; }   /* WC'nin float temizleyicisi */

/* ============================================================
   KART
   ============================================================ */
.mk-kart { position: relative; display: flex; flex-direction: column; }

/* ---------- medya ---------- */
.mk-kart-medya {
  position: relative;
  aspect-ratio: 2 / 3;
  background: var(--mk-beyaz);   /* fildişi zeminde yardımcı yüzey */
  overflow: hidden;
}
.mk-kart-medya-bag { display: block; width: 100%; height: 100%; }
.mk-kart-kare {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* İkinci kare: kontrollü, hızlı crossfade. Zoom/scale YOK — fotoğrafın kadrajı k */
.mk-kart-kare--ikinci { opacity: 0; transition: opacity .25s ease; }
.mk-kart-kare--ilk    { opacity: 1; transition: opacity .25s ease; }

/* Geçiş üç koşulun HEPSİ sağlanınca çalışır: ürünün ikinci görseli var,
   işaretçi ince (hover gerçek), ve hareket azaltma kapalı. */
@media (hover: hover) and (pointer: fine) {
  .mk-kart-medya--cift.mk-kart-medya--hazir:hover .mk-kart-kare--ikinci,
  .mk-kart:focus-within .mk-kart-medya--cift.mk-kart-medya--hazir .mk-kart-kare--ikinci { opacity: 1; }
  .mk-kart-medya--cift.mk-kart-medya--hazir:hover .mk-kart-kare--ilk,
  .mk-kart:focus-within .mk-kart-medya--cift.mk-kart-medya--hazir .mk-kart-kare--ilk { opacity: 0; }
}

/* ---------- durum rozeti (kartta EN FAZLA BİR TANE) ---------- */
.mk-kart-durum {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: var(--mk-fs-rozet); font-weight: var(--mk-fw-islevsel);
  letter-spacing: var(--mk-ls-rozet); text-transform: uppercase;
  padding: 6px 9px; line-height: 1;
  background: var(--mk-beyaz); color: var(--mk-siyah);
}
.mk-kart-durum--yeni    { background: transparent; color: var(--mk-beyaz); mix-blend-mode: difference; padding-left: 0; }
.mk-kart-durum--sinirli { color: var(--mk-gri); }

/* Tükendi: fotoğraf ÖLDÜRÜLMEZ — merchandising değeri korunur.
   Yalnız çok hafif bir açılma; rozet durumu zaten söylüyor. */
.mk-kart--tukendi .mk-kart-medya { opacity: .82; }

/* ---------- istek listesi (yalnız özellik aktifken basılır) ---------- */
.mk-kart-istek {
  position: absolute; top: 4px; right: 4px; z-index: 2;
  width: 44px; height: 44px;                 /* dokunma hedefi */
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: var(--mk-siyah);
  opacity: .75; transition: opacity var(--mk-gecis-hizli);
}
.mk-kart-istek svg { width: 19px; height: 19px; }
.mk-kart-istek:hover, .mk-kart-istek:focus-visible { opacity: 1; }
.mk-kart-istek[aria-pressed="true"] svg { fill: currentColor; }

/* ---------- bilgi ---------- */
/* ⚠️ r6.22d1 — Burada asgari yükseklik YOK: bu kural mağaza, arama, favoriler ve ilgili ürünler dâhil */
.mk-kart-bilgi { padding: 12px 2px 0; display: flex; flex-direction: column; gap: 4px; }

/* Ürün adı: işlevsel tipografi. Uppercase DEĞİL, geniş harf aralığı YOK —
   gerçek ürün adı okunabilir kalmalı. Kırpma yok; iki satıra sarabilir. */
.mk-kart-ad {
  margin: 0;
  font-family: var(--mk-font);
  font-size: var(--mk-fs-kart-ad); font-weight: 400; letter-spacing: 0;
  line-height: var(--mk-lh-kart-ad);
  color: var(--mk-siyah);
  /* ⚠️ Ürün adı VERİTABANINDAKİ doğal yazımıyla — uppercase YOK. */
  text-transform: none;
}
/* ═══ ETKİLEŞİM KATMANI SÖZLEŞMESİ (F3.1) ═══ Kartın tıklama alanı tek bir bağlantıdır; içteki eylemler onun üstünde ayrı katmandır. */
.mk-kart-bag { display: inline; }
.mk-kart-bag::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
.mk-kart-eylem { position: relative; z-index: 2; }
.mk-kart-bag:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Fiyat: küçültülmez — okunabilir ve net. */
/* ⚠️ Fiyat ürün adından BASKIN değil: aynı ölçü, 400 ağırlık. */
.mk-kart-fiyat {
  font-size: var(--mk-fs-kart-ad); font-weight: 400; line-height: var(--mk-lh-kart-ad);
  color: var(--mk-siyah);
  font-variant-numeric: tabular-nums;
}
.mk-kart-fiyat del {
  color: var(--mk-gri-acik); text-decoration: line-through;
  margin-right: 8px; font-size: 13px;
}
.mk-kart-fiyat ins { text-decoration: none; color: var(--mk-siyah); }
.mk-kart-fiyat .woocommerce-Price-currencySymbol { font-size: .92em; }

/* ---------- renk swatchları ---------- */
/* Swatch'lar bugün BİLGİLENDİRİCİ (span). Sahte buton yapılmadı — F4/F5'te gerçekten etkileşimli olduklarında se */
.mk-kart-renkler {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 6px; margin-top: 3px; min-height: 14px;
  width: fit-content;                 /* yalnız swatch'ların üstü; kalan alan bağlantıda kalır */
}
.mk-kart-swatch {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(20,18,15,.16);   /* açık renkler zeminde kaybolmasın */
  flex: none;
}
.mk-kart-swatch-kalan,
.mk-kart-renk-sayi {
  font-size: 11px; line-height: 1; color: var(--mk-gri);
  letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
.mk-kart-renk-sayi { margin-top: 3px; }

/* ============================================================ RESPONSIVE — kart kendi genişliğine uyar Kırılıml */
@media (max-width: 1240px) {
  .woocommerce ul.products, ul.wc-block-grid__products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .woocommerce ul.products, ul.wc-block-grid__products {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(24px, 5vw, 32px) 8px;
  }
  /* Mobil 2 kolonda bilgi alanı yükselmesin: ad ve fiyat sıkışır ama okunur kalır. */
  .mk-kart-bilgi { padding-top: 10px; gap: 3px; }
  .mk-kart-ad { font-size: 13px; line-height: 1.35; }
  .mk-kart-fiyat { font-size: 13px; }
  .mk-kart-durum { top: 8px; left: 8px; font-size: 9.5px; padding: 5px 7px; letter-spacing: .12em; }
  .mk-kart-swatch { width: 10px; height: 10px; }
  .mk-kart-renkler { gap: 5px; flex-wrap: wrap; }   /* taşma yerine alta sar */
}
@media (max-width: 380px) {
  .mk-kart-ad { font-size: 12.5px; }
}

/* ============================================================ SON BAKTIKLARINIZ — aynı kart bileşeni, */
.mk-son-bakilan { margin: clamp(48px,7vw,80px) auto 40px; }
.mk-son-bakilan .mk-son-ic {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr);
  gap: 14px; overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.mk-son-bakilan .mk-son-ic::-webkit-scrollbar { display: none; }
.mk-son-bakilan .mk-son-ic > * { scroll-snap-align: start; }
.mk-son-bakilan .mk-son-gorsel { aspect-ratio: 2/3; background: var(--mk-beyaz); overflow: hidden; }
.mk-son-bakilan img { width: 100%; height: 100%; object-fit: cover; }
.mk-son-bakilan .mk-son-ad { font-size: 13px; font-weight: 400; padding: 10px 0 2px; line-height: 1.4; }
.mk-son-bakilan .mk-son-fiyat { font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .mk-kart-kare--ilk, .mk-kart-kare--ikinci { transition: none; }
}