/*
 * MG PS — Mağaza listeleme (PLP). Kaynak tasarım: design-explore/plp-final.html
 *
 * KAPSAMA: tasarımdaki sınıf adları (.card, .side, .kat, .mrk, .grid …) genel
 * adlar; tema ile çakışmasınlar diye hepsi `.mgps-shop` kökü altına kapsandı —
 * PDP'de (pdp.css) uygulanan yöntemin aynısı. Özgüllük (0,2,0) temanın çıplak
 * sınıf kurallarını (0,1,0) yener ve maket dosyasıyla birebir parite korunur.
 *
 * ÖNCEKİ SÜRÜMDEN FARK: burada global `*{margin:0;padding:0}` ve `body{...}`
 * kuralları VARDI. Eklenti stil dosyası olduğu için mağaza/ürün sayfalarında
 * temanın kendi başlık ve alt bilgi aralıklarını da siliyorlardı. Artık her
 * kural `.mgps-shop` altında.
 *
 * Font ayarlanmıyor — tema Montserrat'ı zaten global veriyor (pdp.css da
 * ayarlamıyor ve doğru görünüyor).
 *
 * Konteyner 1440 (PDP 1240): listeleme daha geniş, okuma daha dar.
 */

/* Alt bosluk (alt bilgiden önce) BURADA, `.body`'de değil. `.body` yalnızca
   sidebar+ızgara ikilisini kapsıyor, sayfalama onun DIŞINDA — dolayısıyla
   `.body`'nin alt dolgusu alt bilgiyi değil, son ürün ile sayfa numaralarını
   ayırıyordu (90 + 48 = 138px'lik kopukluk). Kök öğeye taşınınca boşluk
   sayfalamanın ALTINA düşüyor ve sayfalama gizliyken (tek sayfalık sonuç,
   `[hidden]`) de korunuyor. `.wrap` kullanılamaz: responsive kuralları
   `padding` KISAYOLU ile yazılmış, alt değeri sıfırlarlar. */
.mgps-shop{
  --ink:#0F0F10; --ink-2:#3B3F45; --muted:#70757C; --faint:#A3A7AD;
  --line:#ECECEE; --wash:#F4F3F1; --white:#fff;
  width:100%; background:#fff; color:var(--ink); line-height:1.6;
  padding-bottom:90px;
}
.mgps-shop *{box-sizing:border-box}
.mgps-shop img{max-width:100%;display:block}
.mgps-shop a{color:inherit;text-decoration:none}
.mgps-shop button,.mgps-shop input,.mgps-shop select{font-family:inherit}

/* Temanın kendi sayfa yolu şeridi — tasarımın kendi `.crumb`'ı var, ikisi üst
   üste iki satır basıyordu (PDP'de de aynısı yapıldı). */
body.woocommerce-shop .breadcrumb-wrap,
body.tax-product_cat .breadcrumb-wrap,
body.tax-product_brand .breadcrumb-wrap{display:none}

/* TEMA GENİŞLİK KISITI.
   xprocal, içeriği `#content > .col-full` içine alıyor: `max-width:1320px` +
   `padding:0 15px` → kullanılabilir genişlik 1290. Tasarım 1440 istiyor, yani
   kendi `.wrap`'imiz tavana çarpıp 1290'da kalıyordu ve kartlar 247 yerine
   210px'e düşüyordu. (PDP bu duvara çarpmıyor: onun konteyneri 1240.)
   Kısıt yalnızca mağaza/kategori/marka sayfalarında kaldırılıyor; ölçüldü,
   sayfada `.col-full` yalnızca BİR tane var ve `#content` içinde — başlık ve
   alt bilgi etkilenmiyor. 100vw ile kırma yöntemi bilerek kullanılmadı: dikey
   kaydırma çubuğu genişliği kadar yatay taşma üretiyor. */
body.woocommerce-shop #content > .col-full,
body.tax-product_cat #content > .col-full,
body.tax-product_brand #content > .col-full{
  max-width:none;width:100%;padding-left:0;padding-right:0;margin-left:0;margin-right:0;
}

.mgps-shop .wrap{max-width:1440px;margin:0 auto;padding:0 48px}

/* ── Sayfa yolu ── PDP .crumb ile birebir */
.mgps-shop .crumb{padding:22px 0 0;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--faint)}
.mgps-shop .crumb a:hover{color:var(--ink)}
.mgps-shop .crumb i{font-style:normal;margin:0 8px;color:var(--line)}
.mgps-shop .crumb b{font-weight:600;color:var(--muted)}

/* ── Başlık şeridi ──
   BÜYÜK HARF YOK: PDP de yapmıyor ve Türkçe'de "i"→"I" tuzağı buradan geliyor.
   Kategori adları zaten veritabanında olması gereken biçimde duruyor
   (üst kategoriler "AKSESUAR", altlar "Mikrofiber Ürünler"). */
.mgps-shop .head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;
      padding:20px 0 26px;border-bottom:1px solid var(--line)}
.mgps-shop .head__title{font-size:34px;font-weight:800;letter-spacing:-.6px;line-height:1.15;margin:0}
.mgps-shop .head__count{font-size:13px;font-weight:500;color:var(--muted);margin:8px 0 0}
.mgps-shop .head__count b{font-weight:700;color:var(--ink-2)}
.mgps-shop .tools{display:flex;align-items:center;gap:12px}
.mgps-shop .tools__label{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
/* Sıralama bir <form> içinde; temanın `form{margin-bottom}` kuralı formun
   marj kutusunu büyütüyor ve `align-items:center` görünen select'i "SIRALA:"
   etiketine göre 13px yukarı kaydırıyordu. */
.mgps-shop .tools form{margin:0;display:flex}
/* ARAÇ ÇUBUĞU ÖĞELERİ AYNI YÜKSEKLİKTE.
   Yükseklikler yazı boyutundan hesaplanınca select 45px, Filtrele 41px
   oluyordu (font 13 ve 11) — mobilde ikisi yan yana durduğu için hizasızlık
   görünüyordu. Yükseklik sabit, dikey dolgu sıfır; metin flex ile ortalanıyor
   (select'te tarayıcı kendisi ortalıyor). */
.mgps-shop .sort,
.mgps-shop .filtrele,
.mgps-shop .toplu{height:44px;padding-top:0;padding-bottom:0}
.mgps-shop .sort{-webkit-appearance:none;appearance:none;border:1px solid var(--line);background:var(--white)
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2370757C' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>")
  no-repeat right 14px center;background-size:12px;padding:11px 40px 11px 14px;font-size:13px;font-weight:500;
  color:var(--ink);min-width:190px;border-radius:0;transition:border-color .2s}
.mgps-shop .sort:hover,.mgps-shop .sort:focus{border-color:var(--ink-2);outline:none}
/* SINIF ADI `filter-toggle` DEĞİL: xprocal teması `assets/js/woocommerce/off-canvas.js`
   içinde `body`ye delege bir dinleyiciyle `.filter-toggle` tıklamasını yakalayıp
   kendi boş off-canvas panelini (`#xprocal-canvas-filter`) açıyor. Aynı sınıfı
   kullanınca tek tıklamada iki panel açılıyordu: üstte temanın bomboş beyaz
   paneli ("Close ×"), arkasında bizimki. Panel boştu çünkü temanın
   `clone_sidebar()`'ı 1024px altında `#secondary` içeriğini oraya taşıyor ve
   bizim sidebar orada değil. */
.mgps-shop .filtrele{display:none;align-items:center;gap:8px;padding:11px 18px;background:var(--ink);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;border:0;cursor:pointer}
.mgps-shop .filtrele svg{width:14px;height:14px;flex:0 0 auto}

/* ── Gövde ── içerik 1344 − sidebar 248 − boşluk 48 = grid 1048 → 4 × 247px
   Alt dolgu YOK: sayfalama bu kabın dışında, alt boşluk `.mgps-shop` kökünde. */
.mgps-shop .body{display:grid;grid-template-columns:248px 1fr;gap:48px;padding:30px 0 0;align-items:start}

/* ── Sidebar ──
   KAYDIRMA HER LİSTENİN KENDİ İÇİNDE. Dış kutu `overflow:hidden` ve esnek
   sütun; kategori ile marka listeleri boşluğu paylaşıp kendi alanlarında
   kayıyor. Böylece blok başlıkları ve Uygula butonu hep görünür kalıyor —
   tek bir dış kaydırma çubuğu olsaydı marka filtresine inmek için kategori
   listesini geçmek gerekirdi. Esnemenin çalışması için zincirdeki her
   elemanda `min-height:0` şart (flex öğesinin varsayılan `auto` minimumu
   küçülmeyi engeller). */
.mgps-shop .side{position:sticky;top:24px;max-height:calc(100vh - 48px);
      display:flex;flex-direction:column;overflow:hidden;padding-right:4px}
/* Yönetici çubuğu 32px yer kaplıyor ve `position:fixed` — yapışma noktası
   onun altına alınmazsa sidebar'ın üstü çubuğun arkasında kalıyor. */
body.admin-bar .mgps-shop .side{top:56px;max-height:calc(100vh - 80px)}
.mgps-shop .side__head{display:none;align-items:center;justify-content:space-between;padding-bottom:16px;margin-bottom:8px;border-bottom:1px solid var(--line);flex:0 0 auto}
.mgps-shop .side__head b{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase}
/* `color` ŞART: xprocal'ın çıplak `button` kuralı `color:#fff` veriyor. Buton
   zemini beyaz ve içindeki SVG `stroke="currentColor"` kullandığı için ikon
   beyaz üstüne beyaz çiziliyordu — mobil çekmecede kapatma tuşu görünmüyordu.
   (Aynı kuralın `padding:16px 43px` tuzağı için `padding:0` zaten vardı.) */
.mgps-shop .side__close{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--white);color:var(--ink);cursor:pointer;padding:0}
.mgps-shop .side__close svg{width:15px;height:15px;flex:0 0 auto}
.mgps-shop .blok{padding:22px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.mgps-shop .blok:first-child{padding-top:0}
.mgps-shop .blok.is-kapali{flex:0 0 auto}
.mgps-shop .blok__baslik{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;width:100%;background:0;border:0;padding:0;cursor:pointer;text-align:left;flex:0 0 auto}
.mgps-shop .blok__baslik svg{width:14px;height:14px;flex:0 0 auto;transition:transform .25s}
.mgps-shop .blok.is-kapali .blok__baslik svg{transform:rotate(-90deg)}
.mgps-shop .blok.is-kapali .blok__ic{display:none}
.mgps-shop .blok__ic{margin-top:14px;display:flex;flex-direction:column;min-height:0}

/* Kategori — AÇILIR AĞAÇ, çoklu seçim.
   `[hidden]` ile gizlenen alt listeye `display:flex` VERİLMEZ — flex, tarayıcının
   `[hidden]{display:none}` kuralını ezer ve dal kapalıyken görünür kalır. */
.mgps-shop .agac,.mgps-shop .agac__alt{list-style:none;margin:0;padding:0}
.mgps-shop .agac li{list-style:none;margin:0}
.mgps-shop .agac__satir{display:flex;align-items:center;gap:6px}
.mgps-shop .agac__ac{width:22px;height:28px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:0;border:0;padding:0;cursor:pointer;color:var(--faint);transition:color .2s}
.mgps-shop .agac__ac:hover{color:var(--ink)}
.mgps-shop .agac__ac svg{width:12px;height:12px;flex:0 0 auto;transition:transform .2s}
.mgps-shop .agac__ac[aria-expanded="true"] svg{transform:rotate(90deg)}
.mgps-shop .agac__bos{width:22px;flex:0 0 auto}
.mgps-shop .agac label{display:flex;align-items:center;gap:9px;flex:1 1 auto;min-width:0;
  padding:6px 0;cursor:pointer;color:var(--ink-2);transition:color .2s}
.mgps-shop .agac label:hover{color:var(--ink)}
.mgps-shop .agac b{font-size:13px;font-weight:500;line-height:1.35;min-width:0}
.mgps-shop .agac em{font-style:normal;margin-left:auto;font-size:11px;font-weight:500;color:var(--faint);flex:0 0 auto}
/* Üst seviye biraz daha baskın — 6 kök arasında gezinmeyi kolaylaştırıyor. */
.mgps-shop .agac > li > .agac__satir b{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.mgps-shop .agac__alt{margin-left:11px;padding-left:11px;border-left:1px solid var(--line)}
.mgps-shop .agac__alt[hidden]{display:none}
.mgps-shop .agac input{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:1.5px solid #D6D6DA;
  background:var(--white);flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  padding:0;margin:0;cursor:pointer;transition:border-color .2s}
.mgps-shop .agac input:checked{border-color:var(--ink)}
.mgps-shop .agac input:checked::after{content:'';width:8px;height:8px;background:var(--ink)}
.mgps-shop .agac input:checked ~ b{color:var(--ink);font-weight:700}
/* 0 EŞLEŞMELİ SEÇENEK: gizlenmez, soluklaştırılır.
   Gizlemek kullanıcıya "filtre bozuldu" ya da "bu ürünler hiç yok" hissi
   veriyor; soluk + devre dışı ise "şu anki seçimle bu yok" diyor. Seçili
   olan ASLA soluklaşmaz — yoksa kaldırılamaz. */
.mgps-shop .agac > li.is-bos > .agac__satir,
.mgps-shop .agac__alt > li.is-bos > .agac__satir,
.mgps-shop .mrk label.is-bos{opacity:.38}
.mgps-shop .agac li.is-bos > .agac__satir label,
.mgps-shop .mrk label.is-bos{cursor:not-allowed}
.mgps-shop .agac input:disabled,.mgps-shop .mrk input:disabled{cursor:not-allowed;background:var(--wash)}
/* KENDİ TAVANI ŞART.
   Yalnızca `flex:1 1 auto` + `.side{max-height:100vh}` yeterli değildi: sidebar
   yapışmadan önce sayfada 360px aşağıdan başlıyor, alt kenarı ekranın 264px
   altına taşıyor. O durumda `.kat` taşmadığı için KAYMIYOR ama ekranda kesik
   görünüyor — fare listenin üzerindeyken kayacak bir şey olmadığından sayfa
   kayıyor. Açık `max-height` ile liste her zaman kendi alanında kayar; kısa
   ekranda `flex-shrink` tavanın da altına indirir, ikisi birlikte çalışır. */
/* KAYDIRMA ÇUBUĞU GÖRÜNÜR OLMALI.
   Önce `--line` (#ECECEE) üstünde beyaz zeminle neredeyse görünmezdi ve macOS
   çubukları zaten varsayılan olarak gizliyor: kullanıcı orada kaydırılacak bir
   alan olduğunu anlamıyor, sayfayı kaydırıp "çalışmıyor" sanıyordu. Çubuk artık
   belirgin, ayrıca liste dolduğunda alt kenarda solma göstergesi var. */
.mgps-shop .kat{overflow-y:auto;min-height:96px;max-height:min(42vh,440px);
  padding-right:10px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#C2C2C8 var(--wash)}
.mgps-shop .kat::-webkit-scrollbar{width:8px}
.mgps-shop .kat::-webkit-scrollbar-track{background:var(--wash);border-radius:4px}
.mgps-shop .kat::-webkit-scrollbar-thumb{background:#C2C2C8;border-radius:4px}
.mgps-shop .kat::-webkit-scrollbar-thumb:hover{background:var(--muted)}
/* Alt kenar solması — "aşağıda devamı var" işareti. Sınıfı JS koyuyor
   (yalnızca gerçekten kaydırılabilirken ve sona gelinmemişken). */
.mgps-shop .blok__ic{position:relative}
.mgps-shop .blok--kat.has-daha .blok__ic::after{content:'';position:absolute;left:0;right:10px;bottom:0;
  height:34px;background:linear-gradient(to top,#fff,rgba(255,255,255,0));pointer-events:none}

/* Marka — FİLTRE (checkbox) */
.mgps-shop .mrk{display:flex;flex-direction:column;gap:11px;overflow-y:auto;min-height:96px;max-height:min(26vh,290px);
  padding-right:8px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.mgps-shop .mrk::-webkit-scrollbar{width:6px}
.mgps-shop .mrk::-webkit-scrollbar-track{background:transparent}
.mgps-shop .mrk::-webkit-scrollbar-thumb{background:var(--line)}
.mgps-shop .mrk label{display:flex;align-items:center;gap:10px;cursor:pointer;transition:color .2s;color:var(--ink-2);flex:0 0 auto}
.mgps-shop .mrk label:hover{color:var(--ink)}
.mgps-shop .mrk input{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:1.5px solid #D6D6DA;background:var(--white);
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;padding:0;margin:0;cursor:pointer;transition:border-color .2s}
.mgps-shop .mrk input:checked{border-color:var(--ink)}
.mgps-shop .mrk input:checked::after{content:'';width:8px;height:8px;background:var(--ink)}
.mgps-shop .mrk b{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.mgps-shop .mrk em{font-style:normal;margin-left:auto;font-size:11px;font-weight:500;color:var(--faint)}

/* Fiyat bloğu (yalnızca bayi girişinde) esnemez — kaydırılacak listesi yok,
   alanı kategori ve markadan çalmasın. */
.mgps-shop .blok--sabit{flex:0 0 auto}
.mgps-shop .fiyat{display:flex;align-items:center;gap:8px}
.mgps-shop .fiyat input{width:100%;min-width:0;border:1px solid var(--line);background:var(--white);padding:10px 11px;
  font-size:13px;color:var(--ink);border-radius:0;-moz-appearance:textfield}
.mgps-shop .fiyat input::-webkit-outer-spin-button,.mgps-shop .fiyat input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.mgps-shop .fiyat input:focus{border-color:var(--ink-2);outline:none}
.mgps-shop .fiyat i{font-style:normal;color:var(--faint);flex:0 0 auto}
.mgps-shop .fiyat__not{margin:9px 0 0;font-size:11px;color:var(--faint);letter-spacing:.3px}

/* Butonlar kaydırma alanının dışında, hep görünür (flex:0 0 auto).
   `.mgps-js` sınıfını JS ekliyor: filtre anında uygulandığı için masaüstünde
   Uygula butonuna gerek yok. Mobil çekmecede kalıyor ve "N ürünü gör" olup
   çekmeceyi kapatıyor. JS yoksa buton her yerde durur ve formu gönderir.

   `.side__islem` masaüstünde yalnızca bir sarmalayıcı — akış değişmiyor.
   Mobil çekmecede alta yapışan şerit oluyor (bkz. 960px bloğu). */
.mgps-shop .side__islem{flex:0 0 auto}
.mgps-shop.mgps-js .uygula{display:none}
@media (max-width:960px){ .mgps-shop.mgps-js .uygula{display:block} }
.mgps-shop .uygula{display:flex;align-items:center;justify-content:center;width:100%;height:44px;
  margin-top:20px;padding:0 13px;background:var(--ink);color:#fff;font-size:11px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;border:0;cursor:pointer;transition:background .2s;flex:0 0 auto}
.mgps-shop .uygula:hover{background:var(--ink-2)}
/* Çerçeveli ikincil buton — tasarımdaki `.card__cta` ve `.toplu` ile aynı dil:
   1px çizgi, 11/700 aralıklı BÜYÜK HARF, soluk metin; hover'da mürekkep dolgu.
   Önceden çerçevesiz düz bir bağlantıydı ve tıklanabilir göründüğü belli
   olmuyordu. Masaüstünde Uygula gizli olduğu için üst boşluk 10 → 18px. */
.mgps-shop .temizle{display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:18px;padding:12px;border:1px solid var(--line);font-size:11px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);flex:0 0 auto;
  transition:background-color .22s,border-color .22s,color .22s}
.mgps-shop .temizle:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.mgps-shop .temizle svg{width:13px;height:13px;flex:0 0 auto}

/* ── Grid + kart ──
   Kart PDP'nin "Birlikte iyi gider" (.rcard) kartıyla aynı dil:
   beyaz zemin + 1px çerçeve, hover'da çerçeve koyulaşır ve görsel büyür. */
.mgps-shop .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 20px}
.mgps-shop .card{display:flex;flex-direction:column}
.mgps-shop .card__media{position:relative;aspect-ratio:1/1;background:var(--white);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden;transition:border-color .3s}
.mgps-shop .card__media img{width:100%;height:100%;object-fit:contain;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.mgps-shop .card:hover .card__media{border-color:var(--ink-2)}
.mgps-shop .card:hover .card__media img{transform:scale(1.06)}
/* Önizle — görsel tıklanamaz olduğu için ayrı bir göz ikonu var.
   HER ZAMAN GÖRÜNÜR. Önceden yalnızca hover'da beliriyordu (dokunmatikte ve
   ≤960px'te override ile hep görünür): fareyi karta getirmeyen kullanıcı
   özelliğin varlığını hiç fark etmiyordu. Keşfedilmeyen bir özellik yok
   demektir — üç ayrı görünürlük kuralı yerine tek ve tutarlı davranış. */
.mgps-shop .card__peek{position:absolute;top:10px;right:10px;width:36px;height:36px;display:flex;align-items:center;
  justify-content:center;background:var(--white);border:1px solid var(--line);color:var(--ink-2);cursor:pointer;
  padding:0;transition:background-color .2s,border-color .2s,color .2s}
.mgps-shop .card__peek:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.mgps-shop .card__peek svg{width:16px;height:16px;flex:0 0 auto}
.mgps-shop .card__brand{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--faint);margin-top:16px}
/* 3 satır: başlıkların %76'sı 60 karakterin üzerinde, 2 satır çoğunu kesiyordu.
   Marka öneki KIRPILMIYOR — PDP'nin .rcard kartı da kırpmıyor ve kırpmak
   alfabetik sırayı ekranda tutarsız gösteriyor (437 başlık markayla başlıyor,
   58'i başlamıyor). */
.mgps-shop .card__name{font-size:14px;font-weight:600;line-height:1.35;margin:6px 0 0;min-height:57px;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mgps-shop .card__name a:hover{color:var(--muted)}
.mgps-shop .card__cta{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;padding:12px;
  border:1px solid var(--line);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted);transition:background-color .22s,border-color .22s,color .22s}
.mgps-shop .card__cta:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.mgps-shop .card__cta svg{width:14px;height:14px;flex:0 0 auto}

/* ── Bayi girişi ──
   Liste fiyatı HERKESTE AYNI: bayi indirimi sepette uygulanıyor. Bu yüzden
   fiyat filtresi ve fiyat sıralaması `wc_product_meta_lookup` üzerinden doğru
   çalışır — gösterilen fiyatla filtrelenen fiyat aynı sayı. */
.mgps-shop .serit{display:flex;align-items:center;gap:10px;margin-top:18px;padding:11px 16px;background:var(--wash);
  font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-2)}
.mgps-shop .serit svg{width:14px;height:14px;flex:0 0 auto;color:var(--muted)}
.mgps-shop .serit b{font-weight:800;color:var(--ink)}
.mgps-shop .serit span{margin-left:auto;font-weight:600;color:var(--muted);letter-spacing:.8px;text-transform:none}
.mgps-shop .toplu{display:inline-flex;align-items:center;gap:7px;padding:11px 16px;border:1px solid var(--line);
  font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);transition:border-color .2s,color .2s}
.mgps-shop .toplu:hover{border-color:var(--ink);color:var(--ink)}
.mgps-shop .toplu svg{width:14px;height:14px;flex:0 0 auto}
.mgps-shop .card__fiyat{margin-top:10px;font-size:16px;font-weight:700;letter-spacing:-.2px;color:var(--ink)}
/* WooCommerce fiyat işaretlemesi: <span class="woocommerce-Price-amount"> */
.mgps-shop .card__fiyat .woocommerce-Price-amount{white-space:nowrap}
.mgps-shop .card__fiyat del{color:var(--faint);font-weight:500;margin-right:6px}
.mgps-shop .card__cta--sepet{background:var(--ink);border-color:var(--ink);color:#fff}
.mgps-shop .card__cta--sepet:hover{background:var(--ink-2);border-color:var(--ink-2)}
/* WooCommerce ajax sepet: butona `loading` / `added` sınıfı ekliyor */
.mgps-shop .card__cta.loading{opacity:.65;pointer-events:none}
.mgps-shop .card__cta.added{background:var(--ink-2);border-color:var(--ink-2);color:#fff}
.mgps-shop .added_to_cart{display:none}

.mgps-shop .bos{grid-column:1/-1;padding:70px 24px;text-align:center;color:var(--muted);font-size:14px}

/* AJAX bekleme durumu — parça ~0,8 sn sürüyor, o sürede tıklamanın işlendiği
   görünmeli. Izgara soluyor ve tıklama almıyor; `Uygula` butonu da kilitleniyor. */
.mgps-shop .body.is-yukleniyor .grid,
.mgps-shop .body.is-yukleniyor .bos{opacity:.42;pointer-events:none;transition:opacity .18s}
.mgps-shop .body.is-yukleniyor .side{pointer-events:none}
.mgps-shop .body.is-yukleniyor .uygula{opacity:.6}

/* ── Sayfalama ──
   WP paginate_links(type=list) çıktısı: nav > ul.page-numbers > li > (a|span)
   NOT: ul DE .page-numbers taşır → kurallar `li >` ile kapsanır.

   Üst boşluk 60+30 = 90px'ti; son ürün sırasıyla sayfa numaraları arasında
   kopukluk yaratıyordu (numaralar ızgaraya ait değil, ayrı bir blok gibi
   duruyordu). 32+16 = 48px: ayırıcı çizgi hâlâ bölümü ayırıyor ama numaralar
   listenin devamı olarak okunuyor. */
.mgps-shop .sayfalar{display:flex;justify-content:center;margin-top:32px;padding-top:16px;border-top:1px solid var(--line)}
.mgps-shop .sayfalar ul.page-numbers{list-style:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin:0;padding:0}
.mgps-shop .sayfalar li{list-style:none;margin:0;padding:0;display:flex}
.mgps-shop .sayfalar li > .page-numbers{min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 8px;font-size:13px;font-weight:600;line-height:1;color:var(--ink-2);background:var(--white);
  border:1px solid transparent;border-radius:0;transition:border-color .2s,background-color .2s,color .2s}
.mgps-shop .sayfalar li > a.page-numbers:hover{border-color:var(--ink);color:var(--ink)}
.mgps-shop .sayfalar li > .page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:700;cursor:default}
.mgps-shop .sayfalar li > .page-numbers.dots{min-width:24px;color:var(--faint);background:transparent;border-color:transparent;cursor:default;pointer-events:none}
.mgps-shop .sayfalar li > .page-numbers.prev,.mgps-shop .sayfalar li > .page-numbers.next{padding:0 12px;color:var(--ink)}
.mgps-shop .sayfalar li > .page-numbers.prev:hover,.mgps-shop .sayfalar li > .page-numbers.next:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.mgps-shop .sayfalar svg{width:14px;height:14px;flex:0 0 auto;display:block}

/* ── Erişilebilirlik ── */
.mgps-shop :focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.mgps-shop .gizli,.mgps-shop .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mgps-shop .perde{display:none;position:fixed;inset:0;background:rgba(15,15,16,.5);z-index:110;cursor:pointer}
body.mgps-cekmece .mgps-shop .perde{display:block}
/* SAYFA KİLİDİ — `html` DE KİLİTLENMELİ.
   Bu temada sayfayı kaydıran eleman `<body>` değil `<html>` (`document.
   scrollingElement` → HTML, `html{overflow:hidden auto}`). Yalnızca `body`
   kilitlenince çekmece/modal açıkken arka plan kayabiliyordu — canlıda
   ölçüldü: çekmece dibe gelince sayfa 3070px kaydı. */
body.mgps-cekmece,body.mgps-modal-acik{overflow:hidden}
html:has(body.mgps-cekmece),html:has(body.mgps-modal-acik){overflow:hidden}

/* ══ RESPONSIVE ══ */
@media (max-width:1280px){
  .mgps-shop .wrap{padding:0 40px}
  .mgps-shop .body{grid-template-columns:230px 1fr;gap:36px}
  .mgps-shop .grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:960px){
  .mgps-shop .wrap{padding:0 24px}
  .mgps-shop .body{grid-template-columns:1fr;gap:0;padding-top:24px}
  /* Çekmecede iç içe kaydırma İSTENMEZ — dar ekranda iki ayrı kaydırma alanı
     parmakla ayırt edilemiyor. Çekmecenin kendisi tek parça kayar, masaüstündeki
     esnek sütun kurgusu geri alınır.

     ÜST DOLGU YOK (`padding:0 20px`) — bu bilinçli, boşluğu başlık kendi
     dolgusuyla veriyor. Kaydırma kutusuna `padding-top` verilirse `sticky`
     çocuk `top:0` ile kutunun tepesine DEĞİL, dolgunun bittiği yere kilitlenir;
     üstte kalan şeritten kaydırılan içerik başlığın ÜSTÜNDE görünür. */
  /* AÇIK YÜKSEKLİK ŞART. `top:0;bottom:0` canlıda çekmeceyi ekranın tamamına
     uzatmıyordu (ölçüldü: 812px ekranda 786px — altta 26px açık kalıyor ve
     "Filtreleri Temizle" butonu tamamen kesiliyordu). `100dvh` adres çubuğu
     açılıp kapanınca da doğru sonucu verir; `100vh` desteklemeyen tarayıcı
     için yedek. */
  .mgps-shop .side{position:fixed;top:0;left:0;bottom:0;height:100vh;height:100dvh;width:min(320px,86vw);max-height:none;background:var(--white);
    z-index:120;transform:translateX(-105%);transition:transform .3s cubic-bezier(.25,.46,.45,.94);
    display:block;overflow-y:auto;overscroll-behavior:contain;padding:0 20px;box-shadow:4px 0 24px rgba(0,0,0,.12)}
  .mgps-shop .side.acik{transform:translateX(0)}
  /* Başlık ve işlem şeridi çekmecenin İKİ UCUNA yapışır. Kaydırma alanı
     çekmecenin kendisi olduğu için `sticky` yetiyor — masaüstündeki gibi iç
     içe kaydırma alanı açılmıyor (dar ekranda parmakla ayırt edilemiyor).
     Şeritsiz hâlde ağaç açık + filtre seçiliyken çekmece 4556px oluyordu ve
     "N ürünü gör" butonuna inmek 3738px kaydırma istiyordu (ölçüldü).
     `margin-top` NEGATİF DEĞİL: `.side`'ın üst dolgusu kaldırıldı, negatif
     kenar boşluğu yalnızca ilk görünümü düzeltip yapışma noktasını bozuyordu. */
  .mgps-shop .side__head{display:flex;position:sticky;top:0;z-index:2;background:var(--white);
    margin:0 -20px 8px;padding:20px 20px 16px}
  .mgps-shop .side__islem{position:sticky;bottom:0;z-index:2;background:var(--white);
    margin:-1px -20px 0;padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px));
    border-top:1px solid var(--line);box-shadow:0 -8px 18px rgba(15,15,16,.07)}
  .mgps-shop .side__islem .uygula{margin-top:0}
  .mgps-shop .side__islem .temizle{margin-top:10px}
  .mgps-shop .blok,.mgps-shop .blok__ic{display:block;flex:none;min-height:0}
  .mgps-shop .kat{overflow:visible;min-height:0;max-height:none;padding-right:0}
  .mgps-shop .mrk{display:flex;overflow:visible;min-height:0;max-height:none;padding-right:0}
  .mgps-shop .filtrele{display:inline-flex}
  .mgps-shop .head{flex-direction:column;align-items:flex-start;gap:16px}
  .mgps-shop .grid{grid-template-columns:repeat(3,1fr);gap:28px 16px}
}
@media (max-width:640px){
  .mgps-shop .wrap{padding:0 20px}
  .mgps-shop .head__title{font-size:26px}
  .mgps-shop .grid{grid-template-columns:repeat(2,1fr);gap:24px 12px}
  /* Kart 174px'e düşünce 3 satır yetmiyordu (12 başlığın 9'u kesiliyordu);
     mobilde 4 satır. 13px × 1.35 × 4 = 70px. */
  .mgps-shop .card__name{font-size:13px;-webkit-line-clamp:4;line-clamp:4;min-height:70px}
  .mgps-shop .card__cta{padding:11px 8px;font-size:10px;letter-spacing:1.2px}
  /* `stretch`: satır yüksekliği ne olursa olsun iki öğe de aynı yüksekliği
     doldurur — 44px sabiti olmasa bile hizasızlık oluşmaz. */
  .mgps-shop .tools{display:grid;grid-template-columns:auto 1fr;gap:10px;width:100%;align-items:stretch}
  .mgps-shop .tools__label{display:none}
  .mgps-shop .sort{min-width:0;width:100%}
  .mgps-shop .filtrele{width:100%;justify-content:center}
  .mgps-shop .tools form{width:100%}
  .mgps-shop .serit{flex-direction:column;align-items:flex-start;gap:6px}
  .mgps-shop .serit span{margin-left:0}
  .mgps-shop .toplu{grid-column:1/-1;justify-content:center}
  /* Izgara aralığı da daraldığı için (24px) 48px orantısız kalıyordu. */
  .mgps-shop .sayfalar{margin-top:24px;padding-top:14px}
}
@media (max-width:480px){
  .mgps-shop .wrap{padding:0 16px}
  .mgps-shop .card__media{padding:14px}
  .mgps-shop .grid{gap:22px 10px}
  .mgps-shop .sayfalar li > .page-numbers{min-width:36px;height:36px;font-size:12px}
}
@media (max-width:360px){
  .mgps-shop .wrap{padding:0 14px}
  .mgps-shop .head__title{font-size:23px}
  .mgps-shop .card__name{font-size:12px;min-height:65px}
}
@media (prefers-reduced-motion:reduce){
  .mgps-shop *,.mgps-shop *::before,.mgps-shop *::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   ÖNİZLE MODALI
   `wp_footer`'da basılıyor, yani `.mgps-shop` kökünün DIŞINDA — kendi
   değişkenlerini taşıması gerekiyor.
   ══════════════════════════════════════════════════════════════════════════ */
.mgps-modal{
  --ink:#0F0F10; --ink-2:#3B3F45; --muted:#70757C; --faint:#A3A7AD;
  --line:#ECECEE; --white:#fff;
  position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:24px;
  color:var(--ink);line-height:1.6;
}
.mgps-modal *{box-sizing:border-box}
.mgps-modal.acik{display:flex}
.mgps-modal__perde{position:absolute;inset:0;background:rgba(15,15,16,.62);cursor:pointer}
.mgps-modal__kutu{position:relative;background:var(--white);width:100%;max-width:920px;max-height:calc(100vh - 48px);
  display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.mgps-modal__kapat{position:absolute;top:14px;right:14px;width:36px;height:36px;display:flex;align-items:center;
  justify-content:center;background:var(--white);border:1px solid var(--line);cursor:pointer;z-index:3;padding:0;color:var(--ink)}
.mgps-modal__kapat:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.mgps-modal__kapat svg{width:16px;height:16px;flex:0 0 auto}
.mgps-modal__gorsel{background:var(--white);border-right:1px solid var(--line);display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;padding:32px}
.mgps-modal__gorsel img{width:100%;height:100%;object-fit:contain;display:block}
.mgps-modal__ic{display:flex;flex-direction:column;padding:38px 34px;overflow-y:auto}
.mgps-modal__marka{font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--faint)}
.mgps-modal__ad{font-size:22px;font-weight:800;line-height:1.25;letter-spacing:-.3px;margin:10px 0 16px}
.mgps-modal__ozet{font-size:14px;line-height:1.7;color:var(--ink-2);margin:0}
.mgps-modal__etiket{display:block;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--faint)}

/* Boyut seçimi — PDP'nin boyut butonlarının küçük kardeşi. Butonlar içerik
   genişliğinde (`flex:1` YOK, PDP'de de öyle); tek varyantlı üründe blok hiç
   basılmaz. `[hidden]` kuralı açıkça yazılıyor: `display:flex` tarayıcının
   `[hidden]{display:none}` kuralını ezer (aynı tuzağa kategori ağacında
   düşülmüştü). */
.mgps-modal__boyut{margin-top:20px}
.mgps-modal__boyut[hidden]{display:none}
.mgps-modal__boyutlar{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.mgps-modal__boy{min-width:54px;padding:9px 12px;background:var(--white);border:1px solid var(--line);
  font-size:12px;font-weight:700;letter-spacing:.6px;color:var(--ink-2);cursor:pointer;
  transition:background-color .2s,border-color .2s,color .2s}
.mgps-modal__boy:hover{border-color:var(--ink-2);color:var(--ink)}
.mgps-modal__boy[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

/* Künye: kategori + barkod. Satırlar ayrı ayrı gizlenebiliyor, ikisi de yoksa
   listenin tamamı gizleniyor (JS) — boş `dl` aradaki boşluğu bırakmasın. */
.mgps-modal__kunye{display:flex;flex-direction:column;gap:9px;margin:20px 0 0;padding:0}
.mgps-modal__kunye[hidden]{display:none}
.mgps-modal__satir{display:flex;align-items:baseline;gap:12px}
.mgps-modal__satir[hidden]{display:none}
.mgps-modal__satir dt{flex:0 0 84px;font-size:10px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--faint)}
.mgps-modal__satir dd{margin:0;min-width:0;font-size:13px;font-weight:600;color:var(--ink-2);overflow-wrap:anywhere}

.mgps-modal__fiyat{margin-top:16px;font-size:19px;font-weight:700;color:var(--ink)}
/* Butonu panelin altına iten esnek boşluk. `margin-top:auto` tek başına
   yetmiyordu: künye eklendikten sonra içerik paneli doldurunca `auto` sıfıra
   iniyor ve buton metne yapışıyordu. Bu boşluk asla 22px'in altına inmez. */
.mgps-modal__bosluk{flex:1 0 22px;min-height:22px}
.mgps-modal__git{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px;
  background:var(--ink);color:#fff;font-size:12px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;text-decoration:none}
.mgps-modal__git svg{width:14px;height:14px;flex:0 0 auto}
.mgps-modal :focus-visible{outline:2px solid var(--ink);outline-offset:2px}

@media (max-width:640px){
  .mgps-modal{padding:0;align-items:flex-end}
  .mgps-modal__kutu{grid-template-columns:1fr;max-width:none;max-height:94vh}
  .mgps-modal__gorsel{aspect-ratio:auto;height:min(38vh,320px);border-right:0;border-bottom:1px solid var(--line)}
  .mgps-modal__ic{padding:24px 20px}
  .mgps-modal__ad{font-size:19px}
  /* Dar ekranda görsel zaten yüksekliğin üçte birini alıyor; künye sıkışsın ki
     "Detay Gör" kaydırmadan görünsün. Etiket sütunu 84 → 72px. */
  .mgps-modal__boyut{margin-top:16px}
  .mgps-modal__kunye{margin-top:16px;gap:8px}
  .mgps-modal__satir dt{flex-basis:72px}
  .mgps-modal__bosluk{flex-basis:18px;min-height:18px}
}
@media (prefers-reduced-motion:reduce){
  .mgps-modal *,.mgps-modal *::before,.mgps-modal *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}