/* PLP — kategori / mağaza / keşif yüzeyi marka-tema — F4. Kart stilleri BURADA YOK: canonical bil */

/* ═══ PLP ═══ */
.mk-plp-baslik {
  padding: clamp(20px, 3vw, 36px) 0 clamp(18px, 2.5vw, 28px);
  max-width: 720px;
}
.mk-plp-h1 {
  margin: 6px 0 0;
  font-family: var(--mk-font);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: none;          /* devasa uppercase WooCommerce başlığı değil */
  line-height: 1.2;
}
.mk-plp-giris {
  margin: 10px 0 0;
  font-size: 14px; line-height: 1.6; color: var(--mk-gri);
  max-width: 62ch;
}

/* ============================================================ ARAÇ ÇUBUĞU — sayfanın doğal parçası, kutu d */
.mk-arac {
  position: relative;              /* masaüstü filtre panelinin konum bağlamı */
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 12px 0;
  border-top: 1px solid var(--mk-cizgi);
  border-bottom: 1px solid var(--mk-cizgi);
}
.mk-arac-sayi {
  margin: 0;
  font-size: 12px; letter-spacing: .04em; color: var(--mk-gri);
  font-variant-numeric: tabular-nums;
}
.mk-arac-eylem { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }

.mk-arac-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; cursor: pointer; color: var(--mk-siyah);
  font-family: var(--mk-font);
  font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  padding: 10px 0; min-height: 44px;
}
.mk-arac-btn::after {
  content: ""; display: block; width: 100%; height: 1px; background: currentColor;
  position: absolute; left: 0; bottom: 12px; transform: scaleX(0); transform-origin: left;
  transition: transform var(--mk-gecis);
}
.mk-arac-btn { position: relative; }
.mk-arac-btn:hover::after, .mk-arac-btn:focus-visible::after,
.mk-arac-btn[aria-expanded="true"]::after { transform: scaleX(1); }
.mk-arac-rozet {
  font-size: 11px; font-weight: 500; letter-spacing: 0;
  font-variant-numeric: tabular-nums; color: var(--mk-gri);
}
.mk-arac-rozet::before { content: "("; }
.mk-arac-rozet::after  { content: ")"; }

/* Sıralama: yerel select, tema diline uydurulmuş — kütüphane yok */
.mk-sirala { display: flex; align-items: center; }
.mk-sirala-secim {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; cursor: pointer; color: var(--mk-siyah);
  font-family: var(--mk-font);
  font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  padding: 10px 20px 10px 0; min-height: 44px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 6px center, right 1px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.mk-sirala-secim:focus-visible { outline: 2px solid var(--mk-siyah); outline-offset: 3px; }
.mk-sirala-git, .mk-fiyat-uygula {
  /* ⚠️ r6.21c — Yinelenen bildirim temizlendi (eski `.12em` kazanıyordu). */
  font-family: var(--mk-font);
  font-size: var(--mk-fs-cta); font-weight: var(--mk-fw-islevsel);
  letter-spacing: var(--mk-ls-cta); text-transform: uppercase;
  background: var(--mk-siyah); color: var(--mk-beyaz); border: 0;
  padding: 11px 18px; cursor: pointer;
}

/* ═══ FİLTRE ═══ */
.mk-aktif {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  padding: 14px 0 0;
}
.mk-aktif-oge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; letter-spacing: .01em; color: var(--mk-siyah);
  border-bottom: 1px solid var(--mk-cizgi-form);
  padding: 4px 0 3px; min-height: 32px;
}
.mk-aktif-oge:hover, .mk-aktif-oge:focus-visible { border-bottom-color: var(--mk-siyah); }
.mk-aktif-x { font-size: 15px; line-height: 1; color: var(--mk-gri); }
.mk-aktif-temizle {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mk-gri);
  border-bottom: 1px solid transparent; padding: 4px 0 3px; min-height: 32px;
  display: inline-flex; align-items: center;
}
.mk-aktif-temizle:hover, .mk-aktif-temizle:focus-visible {
  color: var(--mk-siyah); border-bottom-color: var(--mk-siyah);
}

/* ============================================================ IZGARA BOŞLUĞU — kart bileşeni kendi iç */
.woocommerce ul.products { margin-top: clamp(28px, 3.5vw, 44px) !important; }
/* !important: WooCommerce ul.products'a kendi margin'ini yüksek özgüllükle basar
   (kart.css'teki ızgara kuralıyla aynı sebep). */

/* ============================================================ FİLTRE PANELİ Masaüstü: araç çubuğunun altından açılan panel (kalıcı */
.mk-panel-ortu {
  position: fixed; inset: 0; z-index: var(--z-ortu);
  background: rgba(20,18,15,.28);
  opacity: 0; transition: opacity var(--mk-gecis);
}
.mk-panel-ortu[hidden] { display: none; }
.mk-panel-ortu.mk-acik { opacity: 1; }

.mk-filtre-panel {
  position: fixed; z-index: var(--z-filtre);
  background: var(--mk-fildisi);
  display: flex; flex-direction: column;
}
.mk-filtre-panel[hidden] { display: none; }

.mk-filtre-ust {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--mk-kenar);
  border-bottom: 1px solid var(--mk-cizgi);
}
.mk-filtre-baslik {
  font-size: 12px; font-weight: var(--mk-fw-islevsel); letter-spacing: .16em; text-transform: uppercase;
}
.mk-filtre-kapat {
  background: none; border: 0; cursor: pointer; color: inherit;
  font-size: 24px; line-height: 1; padding: 10px; min-width: 44px; min-height: 44px;
}

.mk-filtre-govde { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--mk-kenar); }

.mk-filtre-grup { border-bottom: 1px solid var(--mk-cizgi); }
.mk-filtre-grup summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0; min-height: 44px;
  font-size: 12px; font-weight: var(--mk-fw-islevsel); letter-spacing: .12em; text-transform: uppercase;
}
.mk-filtre-grup summary::-webkit-details-marker { display: none; }
.mk-filtre-isaret { position: relative; width: 11px; height: 11px; flex: none; }
.mk-filtre-isaret::before, .mk-filtre-isaret::after {
  content: ""; position: absolute; background: currentColor;
  transition: transform var(--mk-gecis);
}
.mk-filtre-isaret::before { left: 0; top: 5px; width: 11px; height: 1px; }
.mk-filtre-isaret::after  { left: 5px; top: 0; width: 1px; height: 11px; }
.mk-filtre-grup[open] .mk-filtre-isaret::after { transform: scaleY(0); }

.mk-filtre-ic { padding: 0 0 20px; }
.mk-filtre-ic--kutucuk { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-filtre-ic--liste, .mk-filtre-ic--swatch { display: flex; flex-direction: column; gap: 2px; }

/* Seçenek: liste biçimi */
.mk-secenek {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--mk-siyah);
  padding: 9px 0; min-height: 44px;
}
.mk-secenek--liste .mk-secenek-ad, .mk-secenek--swatch .mk-secenek-ad {
  border-bottom: 1px solid transparent; padding-bottom: 1px;
}
.mk-secenek:hover .mk-secenek-ad, .mk-secenek:focus-visible .mk-secenek-ad { border-bottom-color: currentColor; }
.mk-secenek.mk-secili .mk-secenek-ad { font-weight: 500; border-bottom-color: var(--mk-siyah); }
/* Seçili durum yalnız renkle/kalınlıkla değil, işaretle de anlatılır */
.mk-secenek--liste.mk-secili::before, .mk-secenek--swatch.mk-secili::before {
  content: "✓"; font-size: 12px; line-height: 1; color: var(--mk-siyah); order: -1;
}

/* Seçenek: beden kutucukları — kompakt ama dokunulabilir */
.mk-secenek--kutucuk {
  justify-content: center; min-width: 56px; min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--mk-cizgi-form);
  font-size: 13px; letter-spacing: .04em;
  transition: border-color var(--mk-gecis), background var(--mk-gecis), color var(--mk-gecis);
}
.mk-secenek--kutucuk:hover { border-color: var(--mk-siyah); }
.mk-secenek--kutucuk.mk-secili {
  background: var(--mk-siyah); color: var(--mk-beyaz); border-color: var(--mk-siyah);
}

/* Seçenek: renk ailesi — nokta + AD (bilgi yalnız renkle verilmez) */
.mk-secenek-nokta {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(20,18,15,.16);
  flex: none;
}

/* Fiyat: iki sayı alanı — kaydırıcı kütüphanesi yok */
.mk-fiyat { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mk-fiyat input {
  /* ⚠️ r6.21 — iOS için 16px. */
  width: 96px; font-family: var(--mk-font); font-size: var(--mk-fs-form-girdi);
  border: 1px solid var(--mk-cizgi-form); border-radius: 0;
  padding: 11px 12px; background: var(--mk-beyaz); min-height: 44px;
}
.mk-fiyat-ayrac { color: var(--mk-gri); }

.mk-filtre-alt {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px var(--mk-kenar);
  border-top: 1px solid var(--mk-cizgi);
  background: var(--mk-fildisi);
}
.mk-filtre-temizle {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mk-gri);
  border-bottom: 1px solid var(--mk-cizgi-form); padding: 4px 0;
  min-height: 44px; display: inline-flex; align-items: center;
}
.mk-filtre-temizle:hover { color: var(--mk-siyah); border-bottom-color: var(--mk-siyah); }
.mk-filtre-goster { flex: 1; max-width: 260px; text-align: center; }

/* ---------- masaüstü: araç çubuğu altında panel ---------- */
@media (min-width: 861px) {
  .mk-filtre-panel {
    position: absolute; left: 0; right: 0; top: 100%;
    max-height: min(70vh, 620px);
    border-top: 1px solid var(--mk-cizgi);
    border-bottom: 1px solid var(--mk-cizgi);
    box-shadow: 0 18px 40px -28px rgba(20,18,15,.30);
  }
  .mk-filtre-ust { display: none; }             /* başlık araç çubuğunda zaten var */
  .mk-filtre-govde {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0 clamp(28px, 4vw, 56px);
    padding: 8px var(--mk-kenar) 4px;
    align-items: start;
  }
  .mk-filtre-grup { border-bottom: 0; }
  .mk-filtre-grup summary { padding: 16px 0 10px; cursor: default; }
  .mk-filtre-isaret { display: none; }          /* masaüstünde gruplar hep açık */
  .mk-panel-ortu { display: none !important; }  /* masaüstünde örtü yok — sayfa görünür kalır */
}

/* ---------- mobil: tam yükseklik sayfa ---------- */
@media (max-width: 860px) {
  .mk-filtre-panel {
    inset: 0; top: auto; height: 92svh; bottom: 0;
    transform: translateY(100%); transition: transform var(--mk-gecis);
    border-top: 1px solid var(--mk-cizgi);
  }
  .mk-filtre-panel.mk-acik { transform: translateY(0); }
  .mk-arac { padding: 10px 0; }
  .mk-arac-eylem { gap: 20px; }
  .mk-aktif { gap: 6px 14px; }
}

/* ============================================================
   BOŞ SONUÇ
   ============================================================ */
.mk-bos {
  padding: clamp(56px, 9vw, 110px) 0;
  text-align: center; max-width: 520px; margin: 0 auto;
}
.mk-bos-baslik { font-size: clamp(17px, 2vw, 21px); margin: 0 0 10px; }
.mk-bos-yardim { font-size: 14px; color: var(--mk-gri); margin: 0 0 22px; }
.mk-bos .mk-aktif { justify-content: center; margin-bottom: 26px; }
.mk-bos .mk-btn { margin-top: 4px; }

/* ============================================================ SAYFALAMA — klasik; sonsuz kaydırm */
.woocommerce nav.woocommerce-pagination {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--mk-cizgi);
}
.woocommerce nav.woocommerce-pagination ul {
  border: 0; display: flex; justify-content: center; gap: 4px; margin: 0; padding: 0;
}
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 10px;
  font-size: 13px; color: var(--mk-siyah); background: none;
  border-bottom: 1px solid transparent; border-radius: 0;
  font-variant-numeric: tabular-nums;
}
.woocommerce nav.woocommerce-pagination ul li a:hover { background: none; border-bottom-color: var(--mk-cizgi-form); }
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: none; border-bottom-color: var(--mk-siyah); font-weight: 500;
}

/* ============================================================ ALT İÇERİK (uzun */
.mk-kat-alt-metin {
  max-width: var(--mk-metin-kolon); margin: clamp(48px,7vw,88px) auto 0;
  padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--mk-cizgi);
  font-size: 14px; line-height: 1.8; color: #333;
}
.mk-kat-alt-metin h2 { font-size: 15px; margin-top: 28px; }
.mk-kat-alt-metin h3 { font-size: 13.5px; text-transform: none; letter-spacing: 0; margin: 18px 0 6px; }

/* ============================================================ YÜKLENME DURUMU (AJAX zenginleştirmesi) İskelet d */
.mk-yukleniyor .woocommerce ul.products,
.woocommerce ul.products.mk-yukleniyor { opacity: .45; transition: opacity .18s ease; }
/* ⚠️ r6.29a2 — `.mk-durum-canli` header.css'e taşındı (çekmece+arama). */

@media (prefers-reduced-motion: reduce) {
  .mk-filtre-panel, .mk-panel-ortu, .mk-arac-btn::after { transition: none; }
}