/**
 * mgps-bayiler — bayi listesi + harita.
 *
 * Kaynak: preview.html <style> bloğu. İkisi PARİTE içindedir: burada değişen
 * her şey preview.html'e de işlenir (proje kuralı), yoksa prototip artık
 * onaylanan tasarımı temsil etmez.
 *
 * Prototipten bilinçli üç fark (WordPress bağlamı):
 *   1. body{} reseti yok — temanın işi. Montserrat .mgb köküne taşındı
 *      (eklenti fontu kendi enqueue ediyor, tema fontuna güvenmiyoruz).
 *   2. box-sizing reseti .mgb altına kapsandı — global * teması bozar.
 *   3. prefers-reduced-motion bloğu da .mgb altına kapsandı — aynı sebep.
 */

:root{
  --mgb-accent:#CE1711;
  --mgb-metin:#313131;
  --mgb-soluk:#6B7280;
  --mgb-cizgi:#E5E7EB;
  --mgb-bg:#fff;
  --mgb-bg-alt:#F7F7F8;
  --mgb-radius:10px;
  --mgb-gecis:.25s cubic-bezier(.25,.46,.45,.94);
  --mgb-liste-gen:420px;
  --mgb-kontrol-y:0px;      /* JS ölçer — harita ve liste yapışkan ofseti */
}
.mgb,.mgb *,.mgb *::before,.mgb *::after{box-sizing:border-box}

/* Sayfanın tek H1'i — görsel olarak gizli, erişilebilirlik ağacında VAR.
   display:none/visibility:hidden KULLANILMAZ: ikisi de öğeyi erişilebilirlik
   ağacından düşürür, H1 hiç yokmuş gibi olur. */
.mgb__sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

/* Elementor container'ından breakout (proje kuralı) */
.mgb{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;
  background:var(--mgb-bg);color:var(--mgb-metin);
  font-family:Montserrat,system-ui,sans-serif}
.mgb__ic{max-width:100%;padding:0 180px}

/* Kontrol şeridi — yapışkan. Tema başlığı sabitse (xprocal'de 86px) top:0
   şeridi onun ARKASINA sokuyor; --mgb-offset JS'ten gelir, prototipte 0. */
.mgb-kontrol{position:sticky;top:var(--mgb-offset, 0px);z-index:20;background:var(--mgb-bg);
  border-bottom:1px solid var(--mgb-cizgi);padding:16px 0 12px}
.mgb-kontrol__ust{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mgb-ara{flex:1 1 260px;min-width:0}
.mgb-ara__girdi{width:100%;height:44px;padding:0 14px;border:1px solid var(--mgb-cizgi);
  border-radius:var(--mgb-radius);font:inherit;font-size:15px;background:var(--mgb-bg)}
.mgb-ara__girdi:focus-visible{outline:2px solid var(--mgb-accent);outline-offset:1px}
.mgb-secim{height:44px;padding:0 12px;border:1px solid var(--mgb-cizgi);
  border-radius:var(--mgb-radius);font:inherit;font-size:14px;background:var(--mgb-bg)}
.mgb-tip{display:flex;border:1px solid var(--mgb-cizgi);border-radius:var(--mgb-radius);overflow:hidden}
.mgb-tip__btn{height:44px;padding:0 14px;border:0;background:var(--mgb-bg);font:inherit;font-size:14px;
  cursor:pointer;color:var(--mgb-soluk);transition:background var(--mgb-gecis),color var(--mgb-gecis)}
.mgb-tip__btn[aria-pressed="true"]{background:var(--mgb-metin);color:#fff}
.mgb-konum{height:44px;padding:0 16px;border:1px solid var(--mgb-cizgi);background:var(--mgb-bg);
  border-radius:var(--mgb-radius);font:inherit;font-size:14px;cursor:pointer}
.mgb-konum[aria-pressed="true"]{border-color:var(--mgb-accent);color:var(--mgb-accent)}

/* Marka açılır listesi (mobil) — masaüstünde gizli, bkz. 960px sorgusu
   (kullanıcı geri bildirimi, 2026-08-10). */
.mgb-marka{position:relative;display:none}
.mgb-marka__btn{height:44px;width:100%;padding:0 16px;border:1px solid var(--mgb-cizgi);
  background:var(--mgb-bg);border-radius:var(--mgb-radius);font:inherit;font-size:14px;cursor:pointer}
.mgb-marka__btn[aria-expanded="true"],.mgb-marka__btn[data-secili="1"]{border-color:var(--mgb-accent);color:var(--mgb-accent)}
.mgb-marka__panel{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;
  background:var(--mgb-bg);border:1px solid var(--mgb-cizgi);border-radius:var(--mgb-radius);
  box-shadow:0 8px 24px rgba(0,0,0,.10);max-height:45vh;overflow-y:auto;padding:6px}
.mgb-marka__secenek{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 10px;
  font-size:14px;cursor:pointer;border-radius:6px}
.mgb-marka__secenek:hover{background:var(--mgb-bg-alt)}
.mgb-marka__secenek input{accent-color:var(--mgb-accent);width:18px;height:18px;margin:0}
.mgb-marka__secenek .mgb-cip__sayi{margin-left:auto}
.mgb-marka__secenek[data-bos="1"]{opacity:.4}

/* Marka çipleri */
.mgb-cipler{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.mgb-cip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;
  border:1px solid var(--mgb-cizgi);border-radius:999px;background:var(--mgb-bg);
  font:inherit;font-size:13px;cursor:pointer;transition:all var(--mgb-gecis)}
.mgb-cip[aria-pressed="true"]{background:var(--mgb-accent);border-color:var(--mgb-accent);color:#fff}
.mgb-cip__sayi{font-size:11px;color:var(--mgb-soluk);font-variant-numeric:tabular-nums}
.mgb-cip[aria-pressed="true"] .mgb-cip__sayi{color:rgba(255,255,255,.75)}
.mgb-cip[data-bos="1"]{opacity:.4}

.mgb-kontrol__alt{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.mgb-sayac{font-size:13px;color:var(--mgb-soluk)}
.mgb-temizle{border:0;background:none;font:inherit;font-size:13px;color:var(--mgb-accent);cursor:pointer;padding:0}
/* Harita katlama düğmesi — yalnız mobilde görünür (960px sorgusu açar).
   Sayaç satırında durur, ayrı satır açmaz. */
.mgb-katla{display:none;align-items:center;gap:5px;margin-left:14px;border:0;background:none;
  font:inherit;font-size:13px;color:var(--mgb-soluk);cursor:pointer;padding:0}
.mgb-katla::before{content:"";width:7px;height:7px;border-left:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(135deg);transition:transform var(--mgb-gecis)}
.mgb-katla[aria-expanded="false"]::before{transform:rotate(-45deg)}
.mgb-kontrol__alt{gap:8px}
.mgb-sayac{flex:0 0 auto}

/* Gövde: liste + harita */
.mgb-govde{display:grid;grid-template-columns:var(--mgb-liste-gen) 1fr;gap:24px;align-items:start;padding:20px 0 40px}
.mgb-liste-sar{min-width:0}
.mgb-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.mgb-harita-sar{position:sticky;top:calc(var(--mgb-offset, 0px) + var(--mgb-kontrol-y) + 20px);
  height:calc(100vh - var(--mgb-offset, 0px) - var(--mgb-kontrol-y) - 40px)}
.mgb-harita{width:100%;height:100%;border-radius:var(--mgb-radius);background:var(--mgb-bg-alt)}
/* Seçili pinin etiketi — kendi OverlayView'ımız çiziyor (InfoWindow DEĞİL,
   bkz. bayiler.js'teki gerekçe: role="dialog" temanın Lenis'ini durduruyor).
   Balon kabuğunu Google vermediği için burada kuruluyor; konumu JS yazıyor,
   translate ile pinin üstüne ortalanır. */
.mgb-pin-etiket{position:absolute;transform:translate(-50%,-100%);pointer-events:none;
  background:#fff;border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,.18);padding:4px 9px;
  font:700 12.5px/1.3 Montserrat,system-ui,sans-serif;color:var(--mgb-metin);white-space:nowrap}

/* Kart */
.mgb-kart{border:1px solid var(--mgb-cizgi);border-radius:var(--mgb-radius);padding:14px 16px;
  background:var(--mgb-bg);cursor:pointer;transition:border-color var(--mgb-gecis),box-shadow var(--mgb-gecis)}
.mgb-kart:hover,.mgb-kart[data-secili="1"]{border-color:var(--mgb-accent);box-shadow:0 2px 12px rgba(0,0,0,.06)}
.mgb-kart[hidden]{display:none}
.mgb-kart__ust{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.mgb-kart__ad{font-size:15px;font-weight:700;margin:0}
.mgb-kart__tip{font-size:11px;color:var(--mgb-soluk);white-space:nowrap;text-transform:uppercase;letter-spacing:.04em}
.mgb-kart__adres{font-size:13px;color:var(--mgb-soluk);margin:6px 0 0;line-height:1.5}
.mgb-kart__yer{font-size:13px;margin:4px 0 0;display:flex;justify-content:space-between;gap:10px}
.mgb-kart__km{color:var(--mgb-accent);font-weight:600;white-space:nowrap}
.mgb-kart__kapsam{font-size:12.5px;margin:6px 0 0;color:var(--mgb-metin);
  background:var(--mgb-bg-alt);padding:6px 10px;border-radius:6px}
.mgb-kart__markalar{font-size:11.5px;color:var(--mgb-soluk);margin:8px 0 0;letter-spacing:.02em}
.mgb-kart__baglam{font-size:12.5px;font-weight:600;color:var(--mgb-accent);margin:6px 0 0}
.mgb-kart__aksiyon{display:flex;gap:8px;margin-top:10px}
.mgb-kart__btn{flex:1;height:36px;border:1px solid var(--mgb-cizgi);border-radius:8px;background:var(--mgb-bg);
  font:inherit;font-size:13px;cursor:pointer;text-decoration:none;color:inherit;
  display:inline-flex;align-items:center;justify-content:center;transition:all var(--mgb-gecis)}
.mgb-kart__btn:hover{border-color:var(--mgb-accent);color:var(--mgb-accent)}
.mgb-kart__btn:focus-visible,.mgb-cip:focus-visible,.mgb-tip__btn:focus-visible,.mgb-harita__ac:focus-visible,.mgb-secim:focus-visible,.mgb-konum:focus-visible,.mgb-kart:focus-visible,.mgb-marka__btn:focus-visible,.mgb-marka__secenek input:focus-visible{outline:2px solid var(--mgb-accent);outline-offset:1px}

/* Boş durum */
.mgb-bos{padding:32px 16px;text-align:center;color:var(--mgb-soluk);font-size:14px}
.mgb-bos__baslik{font-size:15px;font-weight:600;color:var(--mgb-metin);margin:0 0 8px}
.mgb-bos__oneri{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}

@media(max-width:1200px){
  .mgb__ic{padding:0 60px}
  .mgb-govde{grid-template-columns:360px 1fr}
}
@media(max-width:960px){
  /* MOBİL YERLEŞİM — doğal akış (karar: 2026-08-10, Alipay/Walmart mobil
     mağaza bulucu deseni). Önceki yapı bileşeni ekran yüksekliğine kilitler,
     listeyi kendi içinde kaydırırdı; bildirilen tuzakların TAMAMI oradan
     geliyordu: harita üzerinde tek parmak hiç tepki vermiyor (aradaki iki
     `overflow:hidden` konteyneri hareketi yutuyordu), yatay çevirmede liste
     34px'e düşüp ekran dışına taşıyor, footer'a ulaşılamıyor, listede en çok
     iki kart görünüyor. Artık sayfa akar: kontrol + harita + liste normal
     blok. Harita "Haritayı gizle" ile katlanır, liste tam ekran okunur.
     NOT: eski yapının `align-items:stretch` düzeltmesi (harita 0 piksel
     kalıyordu) BURADA GEREKSİZ — o tuzak flex kolonuna özgüydü, blok
     akışta oluşmuyor. */
  .mgb__ic{padding:0 24px}
  .mgb-kontrol{position:static}

  .mgb-govde{display:block;padding:0}
  .mgb-harita-sar{position:static;height:40vh;min-height:220px;max-height:340px;margin:0 -24px}
  .mgb-harita{border-radius:0}
  .mgb-liste-sar{margin:0 -24px;padding:10px 24px 24px}

  /* Katlama */
  .mgb--harita-kapali .mgb-harita-sar{display:none}
  .mgb-katla{display:inline-flex}

  /* Kontrol şeridini sıkılaştır — her kazanılan piksel listeye gidiyor.
     44px'lik üç sıra + 16/12 dolgu 263px yapıyordu. */
  .mgb-kontrol{padding:10px 0 8px}
  .mgb-ara__girdi,.mgb-secim,.mgb-konum,.mgb-marka__btn,.mgb-tip__btn{height:40px}
  .mgb-kontrol__alt{margin-top:8px}
  .mgb-sayac{font-size:12px}

  /* Kartları sıkılaştır: 202px ortalama → ~170px, böylece 207px yerine
     ~350px'lik listede İKİ kart tam + üçüncüsünden bir şerit görünür
     (şerit kaydırılabilirliği de belli eder). */
  .mgb-liste{gap:8px}
  .mgb-kart__adres{line-height:1.4;margin-top:4px}
  .mgb-kart__markalar{margin-top:6px}
  .mgb-kart__aksiyon{margin-top:8px}
  .mgb-kart__btn{height:34px}

  /* Yer tutucu — harita JS'i gelene kadar görünen şey */
  .mgb-harita[data-bekliyor="1"]{
    display:flex;align-items:center;justify-content:center;
    background:var(--mgb-bg-alt);color:var(--mgb-soluk);font-size:13px;
    background-image:linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px);
    background-size:32px 32px;
  }
  .mgb-harita__ac{border:1px solid var(--mgb-cizgi);background:#fff;border-radius:var(--mgb-radius);
    padding:10px 16px;font:inherit;font-size:13px;cursor:pointer}

  /* Marka çipleri masaüstü şeridi mobilde gizli — yerine .mgb-marka açılır
     listesi (checkbox'lı) devrede (kullanıcı geri bildirimi, 2026-08-10). */
  .mgb-cipler{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-left:-24px;margin-right:-24px;padding:0 24px;scroll-snap-type:x proximity;display:none}
  .mgb-cipler::-webkit-scrollbar{display:none}
  .mgb-cip{flex:0 0 auto;scroll-snap-align:start}
  .mgb-marka{display:block}

  .mgb-kontrol__ust{gap:6px}
  .mgb-ara{flex:1 1 100%}
  /* Şehir seçici ile tip düğmeleri AYNI satırda kalmalı: `flex:1 1 auto` ile
     ikisi de kendi içerik genişliğini istiyordu (select en uzun il adına göre
     ~180px) ve tip grubu alt satıra düşüp şeride 46px ekliyordu. Yüzdeli
     taban + min-width:0 ikisini de daraltılabilir yapar. */
  /* Select'in payı %34'ten %44'e çıktı ve sağ dolgu 12→28px oldu: yerli
     açılır ok ~20px yer istiyor, 12px dolguyla "Tüm şehirler" oka değiyor,
     "Afyonkarahisar" gibi uzun iller okla kesişiyordu (kullanıcı bildirimi,
     2026-08-10). Yazı 13px'e indi; yine de taşarsa üç noktayla kesilir,
     ASLA okun altına girmez. */
  .mgb-secim{flex:1 1 44%;min-width:0;font-size:13px;
    padding-right:28px;text-overflow:ellipsis}
  /* Tip grubu %62'den %52'ye daralınca üç düğmenin üçü de iki satıra sarıyor;
     "Yetkili Bayi" artık "Gezici Satış" ile aynı biçimde görünüyor
     (kullanıcı önerisi). 40px yükseklik iki satırı alıyor (12px × 1.15),
     şerit yüksekliği DEĞİŞMİYOR. */
  .mgb-tip{flex:1 1 52%;min-width:0}
  .mgb-konum,.mgb-marka{flex:1 1 40%}
  .mgb-tip__btn{flex:1;padding:0 4px;font-size:12px;letter-spacing:normal;line-height:1.15}
}
@media(max-width:480px){
  .mgb__ic{padding:0 16px}
  .mgb-harita-sar{margin-left:-16px;margin-right:-16px}
  .mgb-liste-sar{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
  .mgb-cipler{margin-left:-16px;margin-right:-16px;padding:0 16px}
  .mgb-kart{padding:10px 12px}
}
@media(prefers-reduced-motion:reduce){
  .mgb,.mgb *{transition:none!important;animation:none!important}
}

/* ---------------------------------------------------------------------------
 * Tema kalkanı (xprocal) — prototipte gerekmiyordu, WordPress'te şart.
 *
 * Tema şunları yazıyor:
 *   button, input[type=button], … , .button { color:#fff; letter-spacing:2px;
 *                                             text-transform:uppercase }
 *   select:not([size]):not([multiple])      { width:100% }
 * Yukarıdaki kurallarımız bu özellikleri hiç AYARLAMADIĞI için tema kazanıyordu:
 * çip/konum/marka düğmelerinin metni beyaz-üstüne-beyaz kayboluyor, etiketler
 * harflenip büyüyor, <select> tüm satırı kaplayıp kontrol şeridini tek satırdan
 * 339 piksele çıkarıyordu.
 *
 * Özgüllük notu: select kuralı (0,2,1) — ".mgb .mgb-secim" (0,2,0) YETMEZ,
 * :not([multiple]) ile (0,3,0)'a çıkılıyor. Bu blok en sonda durmalı.
 * ------------------------------------------------------------------------ */
.mgb .mgb-cip,
.mgb .mgb-tip__btn,
.mgb .mgb-konum,
.mgb .mgb-marka__btn,
.mgb .mgb-temizle,
.mgb .mgb-katla,
.mgb .mgb-harita__ac,
.mgb .mgb-kart__btn,
.mgb .mgb-ara__girdi,
.mgb .mgb-secim{
  letter-spacing:normal;text-transform:none;text-shadow:none;
  color:var(--mgb-metin);font-weight:inherit}
.mgb .mgb-cip[aria-pressed="true"]{color:#fff}
.mgb .mgb-cip__sayi{color:var(--mgb-soluk);letter-spacing:normal}
.mgb .mgb-cip[aria-pressed="true"] .mgb-cip__sayi{color:rgba(255,255,255,.75)}
.mgb .mgb-tip__btn{color:var(--mgb-soluk)}
.mgb .mgb-tip__btn[aria-pressed="true"]{color:#fff}
.mgb .mgb-konum[aria-pressed="true"]{color:var(--mgb-accent)}
.mgb .mgb-marka__btn[aria-expanded="true"],
.mgb .mgb-marka__btn[data-secili="1"]{color:var(--mgb-accent)}
.mgb .mgb-temizle{color:var(--mgb-accent)}
.mgb .mgb-katla{color:var(--mgb-soluk)}
.mgb .mgb-katla:hover{color:var(--mgb-accent);background:none;border-color:transparent}
.mgb .mgb-kart__btn:hover{color:var(--mgb-accent)}
.mgb .mgb-kart__ad{letter-spacing:normal;text-transform:none}
.mgb .mgb-secim:not([multiple]){width:auto;max-width:none}

/* Hover/active — tema `button:hover{background-color:var(--primary_hover);
   border-color:…}` yazıp bütün düğmeleri koyu kırmızıya boyuyor: çipin
   üstüne gelince yazı okunmaz oluyor, "Konumumu kullan" dolu kırmızıya
   dönüyordu (dokunmatikte tap sonrası hover takılı kaldığı için mobilde de
   görünüyor). Kart düğmesinin dilini tüm kontrollere yayıyoruz: zemin
   değişmez, kenar ve yazı aksana döner. Seçili hâller kendi rengini korur. */
.mgb .mgb-cip:hover,
.mgb .mgb-konum:hover,
.mgb .mgb-marka__btn:hover,
.mgb .mgb-kart__btn:hover,
.mgb .mgb-harita__ac:hover{
  background:var(--mgb-bg);border-color:var(--mgb-accent);color:var(--mgb-accent)}
.mgb .mgb-cip[aria-pressed="true"]:hover{
  background:var(--mgb-accent);border-color:var(--mgb-accent);color:#fff}
.mgb .mgb-cip[aria-pressed="true"]:hover .mgb-cip__sayi{color:rgba(255,255,255,.75)}
.mgb .mgb-tip__btn:hover{background:var(--mgb-bg-alt);border-color:transparent;color:var(--mgb-metin)}
.mgb .mgb-tip__btn[aria-pressed="true"]:hover{background:var(--mgb-metin);border-color:transparent;color:#fff}
.mgb .mgb-temizle:hover{background:none;border-color:transparent;color:var(--mgb-accent);text-decoration:underline}
.mgb .mgb-marka__secenek:hover{background:var(--mgb-bg-alt);color:var(--mgb-metin)}

/* Yapışkanlık kurtarması: tema `body`/`.site`'a `overflow-x:hidden` yazıyor.
   CSS kuralı gereği bir eksen `visible` değilse diğeri `auto`ya düşer; bu da
   o kapsayıcıları kaydırma konteyneri yapıp içindeki `position:sticky`yi
   öldürüyor (masaüstünde kontrol şeridi ve harita kayıp gidiyordu — prototipte
   böyle bir sarmalayıcı yoktu, sorun ancak WordPress'te ortaya çıkıyor).
   `clip` aynı yatay taşma korumasını verir ama kaydırma konteyneri YARATMAZ.
   Bu dosya yalnız [mgps_bayiler] bulunan sayfada yüklendiği için etki o
   sayfayla sınırlıdır. Desteklemeyen tarayıcıda (Safari < 16) kural düşer,
   tema `hidden`'ı kalır: yapışkanlık gitmiş olur ama düzen bozulmaz.
   Tema style.css'i bu dosyadan SONRA yükleniyor ve `body` seçicisi eşit
   özgüllükte kazanıyordu — `html body` ile bir kademe yukarı çıkılıyor
   (!important'a gerek yok). */
html body,
html body .site{overflow-x:clip}