/* ════════════════════════════════════════════════════════════════════════════
   [mc_products] ÜRÜN GRID SHORTCODE
   Kart görünümü product-category.css'ten gelir; burada YALNIZCA yerleşim
   (sütun/satır/carousel), başlık ve sayfalama kabuğu tanımlanır.

   Sütun sayısı CSS DEĞİŞKENLERİ ile verilir → her örnek için ayrı <style>
   bloğu üretilmez, tek kural seti tüm örnekleri yönetir.
     --pg-cols    : masaüstü sütun
     --pg-cols-t  : tablet (≤1100px)
     --pg-cols-m  : mobil (≤640px)
     --pg-rows    : satır (carousel'de satır sayısı)
     --pg-gap     : boşluk
   ════════════════════════════════════════════════════════════════════════════ */

.mc-pg{
  --pg-cols:4; --pg-cols-t:3; --pg-cols-m:2; --pg-rows:1;
  --pg-gap:var(--gap,22px);
  display:block;
}

/* ── Başlık satırı ─────────────────────────────────────────────── */
.mc-pg__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(12px,calc(8px + 1vw),26px);
  flex-wrap:wrap;margin-bottom:clamp(14px,calc(10px + 0.8vw),24px);
}
.mc-pg__titles{min-width:0}
.mc-pg__title{
  margin:0 !important;font-size:clamp(19px,calc(15px + 1.1vw),28px) !important;font-weight:800 !important;
  letter-spacing:-.01em;line-height:1.2;color:var(--fg);
}
.mc-pg__title-link{display:inline-block}
.mc-pg__title-link:hover .mc-pg__title{color:var(--red)}
.mc-pg__sub{margin:6px 0 0;max-width:70ch;font-size:clamp(12.5px,calc(12px + 0.2vw),14px);color:var(--muted);line-height:1.55}
.mc-pg__tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-inline-start:auto}
.mc-pg__count{font-size:13px;color:var(--muted)}
.mc-pg__count strong{color:var(--fg);font-weight:700}
.mc-pg__all{
  display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--red);
  white-space:nowrap;transition:gap .15s;
}
.mc-pg__all:hover{gap:9px;text-decoration:underline}

/* Sonuç kabı — .mc-results sınıfı spinner/liste modunu hazır getirir */
.mc-pg__results{min-height:0}

/* ── IZGARA ────────────────────────────────────────────────────── */
/* Özgüllük 0,2,0 → arşivin ".mc-grid" (0,1,0) kuralını ezer, ancak
   ".mc-results.is-list .mc-grid" (0,3,0) liste kuralının altında kalır. */
.mc-pg .mc-grid{
  grid-template-columns:repeat(var(--pg-cols),minmax(0,1fr));
  gap:var(--pg-gap);
}
@media(max-width:1100px){
  .mc-pg .mc-grid{grid-template-columns:repeat(var(--pg-cols-t),minmax(0,1fr))}
}
@media(max-width:640px){
  .mc-pg .mc-grid{grid-template-columns:repeat(var(--pg-cols-m),minmax(0,1fr))}
}

/* ── CAROUSEL (native scroll-snap — harici kütüphane yok) ───────── */
/* Izgara, sütun akışlı yatay kaydırıcıya dönüşür. Satır sayısı --pg-rows ile
   çok satırlı carousel de mümkündür (öğeler sütun sırasıyla dizilir). */
.mc-pg--carousel .mc-grid{
  grid-template-columns:none;
  grid-template-rows:repeat(var(--pg-rows),auto);
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - (var(--pg-cols) - 1) * var(--pg-gap)) / var(--pg-cols));
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  /* Kart gölgesi/hover dönüşümü kırpılmasın */
  padding:2px 2px 6px;margin:-2px -2px -6px;
  overscroll-behavior-x:contain;
}
.mc-pg--carousel .mc-grid::-webkit-scrollbar{display:none}
.mc-pg--carousel .mc-card{scroll-snap-align:start}
.mc-pg--carousel .mc-grid:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
@media(max-width:1100px){
  .mc-pg--carousel .mc-grid{grid-auto-columns:calc((100% - (var(--pg-cols-t) - 1) * var(--pg-gap)) / var(--pg-cols-t))}
}
@media(max-width:640px){
  .mc-pg--carousel .mc-grid{grid-auto-columns:calc((100% - (var(--pg-cols-m) - 1) * var(--pg-gap)) / var(--pg-cols-m))}
}
/* Carousel'de kartların dikey büyümesi kaydırmayı bozmasın */
.mc-pg--carousel .mc-card:hover{transform:none}

/* Oklar — sonuç kabına göre konumlanır (.mc-results position:relative) */
.mc-pg__arrow{
  position:absolute;top:34%;z-index:6;
  display:grid;place-content:center;
  width:clamp(34px,calc(30px + 0.8vw),42px);aspect-ratio:1;
  border:1px solid var(--line2);border-radius:50%;
  background:rgba(255,255,255,.96);color:var(--fg);
  box-shadow:0 4px 16px -6px rgba(0,0,0,.35);
  cursor:pointer;transition:background .15s,color .15s,box-shadow .15s,opacity .15s;
}
.mc-pg__arrow:hover{background:var(--dark);color:var(--dark-c);border-color:var(--dark)}
.mc-pg__arrow[hidden]{display:none}
.mc-pg__arrow--prev{inset-inline-start:0;transform:translateX(-45%)}
.mc-pg__arrow--next{inset-inline-end:0;transform:translateX(45%)}
/* Dar ekranda oklar taşmasın → içe al */
@media(max-width:900px){
  .mc-pg__arrow--prev{transform:translateX(-6px)}
  .mc-pg__arrow--next{transform:translateX(6px)}
}
/* Dokunmatikte parmakla kaydırma yeterli; okları sakla */
@media(hover:none) and (pointer:coarse){
  .mc-pg__arrow{display:none !important}
}

/* Noktalar */
.mc-pg__dots{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:18px;flex-wrap:wrap}
.mc-pg__dot{
  width:8px;height:8px;padding:0;border:0;border-radius:50%;
  background:var(--line2);cursor:pointer;transition:background .15s,width .2s;
}
.mc-pg__dot:hover{background:var(--muted)}
.mc-pg__dot.is-active{background:var(--red);width:22px;border-radius:99px}
.mc-pg__dot:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ── Daha fazla yükle ──────────────────────────────────────────── */
.mc-pg__more-wrap{display:flex;justify-content:center;margin-top:clamp(20px,calc(16px + 0.8vw),32px)}
.mc-pg__more{min-width:min(240px,100%);padding:13px 26px}
.mc-pg__more.is-loading{opacity:.65;pointer-events:none}

/* Numaralı sayfalama — arşiv .mc-pag stilini kullanır */
.mc-pg__pag .mc-pag{margin-top:clamp(20px,calc(16px + 0.8vw),32px)}

/* ── Liste görünümü ────────────────────────────────────────────── */
/* .mc-pg__results üzerinde .is-list olduğunda product-category.css'teki
   tüm ".mc-results.is-list …" kuralları otomatik devreye girer.
   Yalnız sütun sayısını tekile indirmeyi garantiye alıyoruz. */
.mc-pg .mc-results.is-list .mc-grid{
  grid-template-columns:1fr;
  /* Carousel'den listeye geçişte satır/akış kısıtları sıfırlanmalı,
     aksi hâlde kartlar --pg-rows kadar satıra sıkışır. */
  grid-template-rows:none;
  grid-auto-flow:row;
  grid-auto-columns:auto;
  overflow:visible;
  scroll-snap-type:none;
  padding:0;margin:0;
}
/* Listeye geçildiğinde carousel kontrolleri anlamsızdır → gizle */
.mc-pg .mc-results.is-list .mc-pg__arrow,
.mc-pg .mc-results.is-list .mc-pg__dots{display:none !important}

/* ── Hareket azaltma tercihi ───────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .mc-pg--carousel .mc-grid{scroll-behavior:auto}
  .mc-pg__all:hover{gap:5px}
}