/* a6-mobile — bu dosya tek bir ajana ait. polish.css'e dokunulmuyor. */

/* ============================================================
   MyGarage — MOBİL DUYARLILIK KATMANI
   App.razor'da EN SON yüklenir; bu yüzden yalnızca kaynak sırası
   sayesinde (çoğunlukla !important olmadan) önceki katmanları ezer.

   İLKELER
     • Her kural bir `@media (max-width: …)` içinde. Medya sorgusu
       dışında TEK BİR global bildirim yok → masaüstü hiç etkilenmez.
     • Renkler daima var(--mg-*); sabit hex yok.
     • Kırılma noktaları projenin mevcut eşikleri:
       1160 · 1100 · 900 · 820 · 760 · 700 · 620 · 560 · 420
       (yeni bir sistem icat edilmedi).
     • Ana eşik 900px: bu noktadan sonra kabuk tek kolona iner ve
       sol menü yatay bir gezinme şeridine dönüşür. 900px zaten
       polish.css'in kendi "kabuğu çökert" eşiği (.blogs-layout,
       .saved-layout, .xp-layout, .sp-layout, .nitro-feed-layout).
     • Dokunma hedefleri en az 40x40px.
     • Yatay taşma yok: kolonlar minmax(0,1fr), metinler min-width:0.

   BÖLÜMLER
      0) Değişkenler ve genel güvenlik ağı
      1) Üst bar — araçlar geri geliyor
      2) Sol menü → yatay gezinme şeridi
      3) Kabuk düzenleri — hepsi tek kolon
      4) Ana akış (/)
      5) Keşfet (/kesfet)
      6) Nitro
      7) Forum, konu ve gönderi detayı
      8) Kulüpler · Etkinlikler · Rotalar
      9) Mağazalar (liste + harita)
     10) İşletme sitesi (.bz-site)
     11) Profil ve araç detayı
     12) Bildirimler · Mesajlar · Ayarlar · Oluşturma
     13) Giriş / kayıt
     14) Bloglar · Haberler · Yasal
     15) Modal, lightbox, hikâye ve açılır katmanlar
     16) Genel güvenlik kuralları (tipografi, dokunma, taşma)
   ============================================================ */


/* ============================================================
   0) DEĞİŞKENLER VE GENEL GÜVENLİK AĞI
   ============================================================ */
@media (max-width: 900px) {
  :root {
    /* Yatay gezinme şeridinin yüksekliği. Yapışkan yükseklik
       hesapları (Nitro, sohbet) bu değişkeni okur; şeridin ölçüsü
       değişirse hesaplar kendiliğinden düzelir. */
    --mg-mobile-nav-h: 53px;
    /* Üst bar + şerit: sayfa içi çapa (anchor) kaydırmalarında
       başlığın altına saklanmayı önler. */
    --mg-mobile-chrome-h: calc(var(--mg-topbar-h) + var(--mg-mobile-nav-h));
  }

  /* Taşma güvenlik ağı — NEDEN `.site-shell` ve NEDEN `clip`:
     `html`/`body` üzerindeki overflow görüntü alanına (viewport)
     yayılır; orada `clip` diğer eksenin `auto` değeriyle karışınca
     `hidden`a düşer ve `position: sticky` bozulur — üst bar ve yeni
     gezinme şeridi tam olarak buna dayanıyor. MainLayout'taki
     `.site-shell` sıradan bir <div>: `clip` orada kaydırma kabı
     oluşturmaz, yalnızca kırpar; sabit (fixed) katmanlar —
     lightbox, modal örtüleri, uygulama şeridi — kırpılmaz çünkü
     kapsayan blokları görüntü alanıdır. */
  .site-shell { max-width: 100%; overflow-x: clip; }

  /* Kabuklar da kendi içinde kırpsın: tek bir geniş kart bütün
     sayfayı yana kaydırmasın. */
  .social-app, .forum-app-shell, .nitro-app-shell, .shops-app, .sp-app,
  .xp-app, .gs-app, .explore-app, .blogs-app, .saved-app, .settings-app,
  .notifications-app, .create-app, .vehicle-add-app, .tr-app,
  .shop-detail-app, .route-detail-app, .bz-site, .auth-page {
    overflow-x: clip;
  }

  /* Görseller kutusunu aşmasın (ikonlar hariç: .mg-icon'un
     width/height'ı öznitelikle geliyor, ezilmemeli). */
  img:not(.mg-icon), video, iframe, canvas { max-width: 100%; }

  /* Uzun URL / model kodu / kullanıcı adı satırı kırmadan taşırıyordu. */
  p, li, td, blockquote,
  .post-copy, .bw-body, .legal-body, .comment-item p, .bubble-text,
  .fav-card-body p, .bz-item-body p, .settings-card p {
    overflow-wrap: anywhere;
  }
}


/* ============================================================
   1) ÜST BAR — ARAÇLAR GERİ GELİYOR
   Sorun: reference.css ≤1100px'te `.app-tools{display:none}`
   diyor, ≤760px'te bir kez daha. Yani tabletten küçük her ekranda
   tema düğmesi, mesajlar, bildirimler VE hesap/giriş menüsü tümden
   kayboluyordu — mobilde oturum açmanın yolu yoktu.
   Çözüm: araçlar geri geliyor, üst bar üç kolonlu esnek bir ızgaraya
   dönüyor (logo | arama | araçlar) ve daraldıkça arama küçülüyor.
   ============================================================ */
@media (max-width: 900px) {
  .app-topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    justify-content: stretch;
    align-items: center;
    gap: 0;
  }
  .app-logo { width: auto; min-width: 0; padding: 0 12px; border-right: 0; }
  .app-logo .brand, .app-logo .brand-global-logo { width: 128px; height: auto; max-height: 44px; }

  .app-search {
    width: auto; min-width: 0; max-width: none;
    margin: 0 10px; height: 40px; padding: 0 12px; gap: 8px;
  }
  /* 16px zorunlu: iOS Safari daha küçük bir alana dokununca sayfayı
     yakınlaştırıyor ve bir daha uzaklaştırmıyor. Yer taşarsa yer
     tutucu kırpılır — yakınlaşma hatasından iyidir. */
  .app-search input { min-width: 0; font-size: 16px; }
  /* ⌘K ipucu yalnız klavyeli cihazlar için anlamlı. */
  .app-search kbd { display: none; }

  .app-tools {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 8px; padding: 0 10px 0 4px; border-left: 0;
  }
  .app-tools .top-icon-group { gap: 2px; }
  /* Dokunma hedefi: 34px'lik masaüstü ölçüsü parmakla ıskalanıyordu. */
  .app-tools .top-icon-group .top-action { width: 40px; height: 40px; border-radius: 11px; }

  .topbar-account-wrap { margin-left: 2px; padding-left: 8px; }
  .topbar-account { gap: 7px; padding: 3px 8px 3px 3px; }
}

@media (max-width: 820px) {
  /* Ad + soyad çipi arama kutusunun yerini yiyordu. Avatar zaten
     kim olduğunu söylüyor; ad hesap menüsünün başlığında duruyor. */
  .topbar-account b, .topbar-account.guest b { display: none; }
  .topbar-account { padding: 3px 7px 3px 3px; }
}

@media (max-width: 620px) {
  .app-logo { padding: 0 8px; }
  .app-logo .brand, .app-logo .brand-global-logo { width: 100px; max-height: 38px; }
  .app-search { margin: 0 6px; padding: 0 10px; height: 38px; }
  .app-tools { gap: 4px; padding: 0 6px 0 2px; }
  .topbar-account-wrap { padding-left: 6px; }
  .topbar-account > .mg-icon { width: 13px; height: 13px; }
  .topbar-account .user-avatar, .topbar-account .guest-avatar { width: 32px; height: 32px; }

  /* Hesap menüsü ekranın kenarından taşıyordu. */
  .account-menu { width: min(268px, calc(100vw - 20px)); right: -2px; }
}

@media (max-width: 420px) {
  /* En dar ekranda büyüteç ikonu 25px yiyor; giriş alanı daha değerli. */
  .app-search > .mg-icon { display: none; }
  .app-search { padding: 0 9px; margin: 0 4px; }
  .app-logo { padding: 0 6px; }
  .app-logo .brand, .app-logo .brand-global-logo { width: 88px; }

  /* Sağ blok son bir tur sıkışıyor. Dokunma hedefleri 40px kalıyor —
     küçülen tek şey aralarındaki boşluk. Orta kolon `minmax(0,1fr)`
     olduğu için üst bar 320px'te bile TAŞMAZ; arama kutusu daralır. */
  .app-tools { gap: 2px; padding: 0 4px 0 0; }
  .app-tools .top-icon-group { gap: 0; }
  .topbar-account-wrap { margin-left: 0; padding-left: 4px; }
  .topbar-account { gap: 5px; padding: 3px 5px 3px 3px; }
}


/* ============================================================
   2) SOL MENÜ → YATAY GEZİNME ŞERİDİ
   Sorun: ≤760px'te `.social-sidebar{display:none}` ve yerine hiçbir
   şey gelmiyordu (reference.css'teki `.floating-dock` markup'ı artık
   üretilmiyor). Mobilde uygulamanın 11 bölümünün hiçbirine
   gidilemiyordu. 761–900px arasında ise sayfadan sayfaya değişiyordu:
   forumda menü vardı, bloglarda yoktu.
   Çözüm: aynı <aside>, mobilde üst barın altına yapışan tek satırlık
   yatay çip şeridi. Markup'a dokunulmadı — yalnız yön değişti.
   ============================================================ */
@media (max-width: 900px) {
  .social-container > .social-sidebar,
  .forum-layout > .social-sidebar,
  .chat-layout > .social-sidebar,
  .nitro-layout > .social-sidebar,
  .blogs-layout > .social-sidebar,
  .saved-layout > .social-sidebar,
  .tr-layout > .social-sidebar,
  .news-layout > .social-sidebar,
  .xp-layout > .social-sidebar,
  .gs-layout > .social-sidebar,
  .sp-layout > .social-sidebar,
  .shops-layout > .social-sidebar,
  .explore-layout > .social-sidebar,
  .notifications-layout > .social-sidebar,
  .settings-layout > .social-sidebar,
  .create-layout > .social-sidebar,
  .vehicle-add-layout > .social-sidebar,
  .shop-detail-layout > .social-sidebar,
  .route-detail-layout > .social-sidebar {
    /* Liste, markup'taki 15 kabuğun TAMAMINI kapsıyor (razor'dan
       sayıldı). Yasal sayfalar ayrıca yazılmadı: onlar da
       `.forum-layout` kullanıyor. `.shops-layout`, `.explore-layout`
       ve `.shop-detail-layout` eski kabuklar — hâlâ CSS'te tanımlı
       oldukları için ileriye dönük güvence olarak bırakıldı.
       Seçici ağırlığı (0,2,0): önceki katmanların `display:none`
       kurallarıyla eşit, kaynak sırası sonda olduğu için kazanır. */
    display: flex; flex-direction: row; align-items: center; gap: 8px;
    position: sticky; top: var(--mg-topbar-h); left: auto; right: auto;
    z-index: 18;
    box-sizing: border-box;
    width: auto; min-width: 0; max-width: 100%;
    height: auto; min-height: var(--mg-mobile-nav-h);
    margin: 0; padding: 0 10px;
    border: 0; border-bottom: 1px solid var(--mg-line);
    background: var(--mg-bg);
    overflow: visible;
  }

  /* Kimlik ve yasal bağlantılar şeritte yer kaplamasın: kullanıcı
     çipi üst barda, yasal bağlantılar sayfa altlarında zaten var. */
  .social-sidebar > .side-user-card,
  .social-sidebar > .mini-user,
  .social-sidebar > .side-legal,
  .social-sidebar > .sidebar-separator { display: none; }

  /* Bağlantılar tek satırda kayar. Kaydırma çubuğu gizli ama
     dokunmatikte parmakla, farede hscroll.js olmadan da
     shift+tekerlek ile erişilebilir. */
  .social-sidebar > nav {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: row; align-items: center; gap: 6px;
    margin: 0; padding: 6px 2px;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }
  .social-sidebar > nav::-webkit-scrollbar { display: none; }

  /* Bölüm etiketleri ("MENÜ", "İÇERİK") yatayda anlamsız. */
  .social-sidebar nav .nav-label { display: none; }

  .social-sidebar nav a {
    flex: 0 0 auto; scroll-snap-align: start;
    display: inline-flex; align-items: center; gap: 7px;
    height: 40px; padding: 0 14px; margin: 0;
    border: 1px solid var(--mg-line); border-radius: 999px;
    background: var(--mg-surface); color: var(--mg-muted);
    font-size: 13.5px; font-weight: 600; letter-spacing: -.1px;
    white-space: nowrap; box-shadow: none;
  }
  .social-sidebar nav a i { width: auto; }
  .social-sidebar nav a .mg-icon { width: 16px; height: 16px; flex: none; }

  /* Aktif çip: sol çubuk yerine dolgulu marka çipi.
     theme.css'teki aydınlık tema kuralı daha özgül olduğu için
     ikinci seçici zorunlu. */
  .social-sidebar nav a.active,
  html[data-theme="light"] .social-sidebar nav a.active {
    border-color: var(--mg-accent);
    background: var(--mg-accent-soft);
    color: var(--mg-accent-ink);
    font-weight: 700; box-shadow: none;
  }
  .social-sidebar nav a.active .mg-icon { color: var(--mg-accent-ink); }
  /* "YENİ" rozeti çipin içinde nefes almalı. */
  .social-sidebar nav .nitro-link strong { margin-left: 0; padding: 2px 6px; font-size: 9px; }

  /* "Paylaş" şeridin sağ ucunda sabit durur: şerit kaysa da kaybolmaz. */
  .social-sidebar > .create-post-button {
    flex: 0 0 auto; width: auto;
    height: 40px; margin: 0; padding: 0 14px;
    border-radius: 999px; font-size: 13px; font-weight: 700;
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  }
}

@media (max-width: 560px) {
  .social-sidebar nav a { height: 40px; padding: 0 12px; gap: 6px; font-size: 13px; }
  /* En dar ekranda "Paylaş" yazısı çipleri sıkıştırıyor; yuvarlak bir
     ikon düğmesi kalıyor. Metin DOM'dan silinmiyor, yalnız ölçüsüz
     kalıyor — ekran okuyucular etiketi okumaya devam eder. */
  .social-sidebar > .create-post-button {
    width: 40px; padding: 0; gap: 0;
    font-size: 0; justify-content: center;
  }
  .social-sidebar > .create-post-button .mg-icon { width: 17px; height: 17px; }
}


/* ============================================================
   3) KABUK DÜZENLERİ — HEPSİ TEK KOLON
   Sorun: birçok kabuk mobilde hâlâ ızgara. Örnek: ayarlar
   `248px minmax(650px,920px)` = en az 898px genişlik istiyor; 780px
   ekranda sayfa yana kayıyordu. Aynı hata oluştur/araç ekle/bildirim
   kabuklarında da vardı.
   İkinci sorun: bu kabuklar üst bar `position:fixed` iken yazılmış
   `padding-top:64–80px` taşıyor. Üst bar artık `sticky` (akışta), yani
   o dolgu mobilde üst barın altında 64px'lik ölü bir boşluk demek.
   ============================================================ */
@media (max-width: 900px) {
  .social-container, .forum-layout, .chat-layout, .nitro-layout,
  .blogs-layout, .saved-layout, .tr-layout, .news-layout,
  .xp-layout, .gs-layout, .sp-layout, .shops-layout, .explore-layout,
  .notifications-layout, .settings-layout, .create-layout,
  .vehicle-add-layout, .shop-detail-layout, .route-detail-layout {
    display: block;
    width: 100%; max-width: 100%;
    margin: 0; padding-top: 0; padding-left: 0; padding-right: 0;
    box-sizing: border-box;
  }

  /* Ortadaki sütunun yan çizgileri tek kolonda anlamsız. */
  .feed-column, .forum-main, .blogs-main, .saved-main, .tr-main,
  .news-main, .xp-main, .gs-main, .sp-list, .settings-main,
  .notifications-main, .create-main, .vehicle-add-main,
  .nitro-main, .shop-detail-main, .route-detail-main, .legal-main {
    border-left: 0; border-right: 0; min-width: 0; max-width: 100%;
  }

  /* Yapışkan sağ raylar mobilde gizli; boş kolon boşluk bırakmasın. */
  .social-rail, .forum-right, .xp-rail, .news-rail, .saved-rail,
  .nitro-right, .sp-map-panel, .explore-rail { display: none; }

  /* Sayfa içi çapalar (#hizmetler, #akis…) üst bar + şeridin
     altında kalmasın. */
  main[id], section[id], article[id] { scroll-margin-top: calc(var(--mg-mobile-chrome-h) + 10px); }
}


/* ============================================================
   4) ANA AKIŞ (/)
   ============================================================ */
@media (max-width: 900px) {
  .feed-column { padding: 0 14px 44px; }
  /* Hikâye şeridi kenardan kenara aksın, kart gibi durmasın. */
  .stories-block { margin: 10px -14px 0; padding: 2px 8px 10px; border-radius: 0; }
}

@media (max-width: 620px) {
  /* Beş sekme (Trend/Yeni/Takip/Yakın/Satılık) 360px'te ikonla
     birlikte sığmıyordu. İkon gidince etiketler tam okunur;
     yine de sığmazsa şerit kayar. */
  .feed-tabs { height: 48px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .feed-tabs::-webkit-scrollbar { display: none; }
  .feed-tabs button { flex: 1 0 auto; padding: 0 10px; font-size: 12.5px; white-space: nowrap; }
  .feed-tabs button .mg-icon { display: none; }

  .feed-column { padding: 0 12px 40px; }
  .stories-block { margin-inline: -12px; }
  .story { width: 70px; min-width: 70px; }

  .feed-column .post-card { padding: 13px 13px 8px; border-radius: 14px; }
  .feed-column .post-copy { font-size: 15px; line-height: 1.6; }
  /* Beğeni/yorum/kaydet: 34px'lik hedefler 40px'e çıkıyor. */
  .post-actions button { min-width: 40px; min-height: 40px; padding: 8px 9px; }
  .post-actions > div { gap: 2px; }
  .post-more { width: 40px; height: 40px; }
}

@media (max-width: 420px) {
  /* Anket seçenekleri ve uzun künyeler kartı taşırıyordu. */
  .post-card header { gap: 9px; }
  .post-header-side { gap: 2px; }
  .poll-option { padding: 11px 12px; }
}


/* ============================================================
   5) KEŞFET (/kesfet)
   ============================================================ */
@media (max-width: 900px) {
  .xp-main { padding: 18px 16px 56px; gap: 28px; }
  /* Kahraman karuseli 16:9'da telefonda bant gibi kalıyordu. */
  .xp-hero-carousel { aspect-ratio: 4 / 3; border-radius: 14px; }
  .xp-hero-copy h1 { font-size: clamp(24px, 7vw, 34px); }
  .xp-hero-copy p { font-size: 13.5px; }
  .xp-content, .xp-biz { grid-template-columns: minmax(0, 1fr); }
  .xp-blogs .xp-blog-lead { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .xp-main { padding: 14px 12px 48px; gap: 24px; }
  .xp-head h2 { font-size: 19px; }
  /* Otomatik ızgaralar telefonda tek/çift kolona insin. */
  .xp-car-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .xp-user-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .xp-forum-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* Yatay etkinlik şeridi parmakla kaysın, kesilmesin. */
  .xp-event-strip { overflow-x: auto; scrollbar-width: none; }
  .xp-event-strip::-webkit-scrollbar { display: none; }
  /* Tarayıcı taklidi (mockup) küçük ekranda yalnızca gürültü. */
  .xp-browser { transform: none; }
  .xp-mock-note { font-size: 12px; }
}

@media (max-width: 420px) {
  .xp-car-grid { grid-template-columns: minmax(0, 1fr); }
  .xp-user-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xp-forum-grid { grid-template-columns: minmax(0, 1fr); }
}


/* ============================================================
   6) NİTRO
   polish.css zaten ≤900px'te kabuğu çökertiyor ve dvh ile
   ölçekliyor. Eksik olan: yeni gezinme şeridinin yüksekliği
   hesaba katılmıyordu; video kolonun altından taşıyordu.
   ============================================================ */
@media (max-width: 900px) {
  .nitro-feed-layout .nitro-main {
    height: calc(100dvh - var(--mg-topbar-h) - var(--mg-mobile-nav-h));
    padding: 10px 10px 16px;
  }
  .nitro-feed-layout .nitro-feature {
    width: min(430px, 100%);
    max-height: calc(100dvh - var(--mg-topbar-h) - var(--mg-mobile-nav-h) - 28px);
    margin: 0 auto 14px;
  }
  .nitro-heading { height: auto; padding: 10px 0; }
  .nitro-tabs { overflow-x: auto; scrollbar-width: none; }
  .nitro-tabs::-webkit-scrollbar { display: none; }
  .nitro-tabs button { flex: 0 0 auto; white-space: nowrap; }
}

@media (max-width: 620px) {
  /* Video üstündeki katmanlar: sağdaki eylem sütunu metnin üstüne
     biniyordu, künye de sağa taşıyordu. */
  .nitro-feature .feature-copy { left: 14px; right: 74px; bottom: 56px; }
  .nitro-feature > nav { right: 10px; bottom: 56px; gap: 12px; }
  .nitro-feature > nav button { width: 44px; }
  .nitro-feature > nav i { width: 42px; height: 42px; }
  .feature-author { left: 12px; right: 12px; top: 12px; gap: 9px; }
  .feature-author .fa-names, .feature-author > div { min-width: 0; }
  .feature-author b, .feature-author small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Yorum tabakası tam genişlik ve yarım ekran yüksekliğinde. */
  .nitro-comments { inset: auto 0 0 0; max-height: 62%; border-radius: 16px 16px 0 0; }
}


/* ============================================================
   7) FORUM, KONU VE GÖNDERİ DETAYI
   `.forum-layout` bu projede ortak kabuk: forum, profil, araç,
   mesajlar, etkinlikler, kulüpler, rotalar ve gönderi detayı
   hepsi bunu kullanıyor. Bu yüzden ölçüler burada bir kez düzelir.
   ============================================================ */
@media (max-width: 900px) {
  .forum-main { padding: 18px 16px 64px; }
  .forum-heading h1 { font-size: 24px; }
  .forum-heading p { font-size: 13px; }
  .forum-toolbar { flex-wrap: wrap; gap: 8px; }
  .topic-search { flex: 1 1 100%; min-width: 0; }
  .filter-button, .new-topic-button { flex: 1 1 auto; min-height: 44px; justify-content: center; }
  /* Sekme şeritleri tek satırda kalıp kayar. */
  .forum-tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .forum-tabs::-webkit-scrollbar { display: none; }
  .forum-tabs button { flex: 0 0 auto; white-space: nowrap; }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .forum-main { padding: 14px 12px 56px; }
  .category-grid { grid-template-columns: minmax(0, 1fr); }
  /* Konu satırı: son yanıt sütunu telefonda sığmıyordu; başlık ve
     sayaçlar kalıyor. */
  .topic-row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 12px; }
  .last-reply { display: none; }
  .topic-info, .topic-lead { min-width: 0; }
  .topic-lead { overflow-wrap: anywhere; }
  .forum-stats { gap: 12px 10px; }

  /* Yorum ağacı: girinti telefonda genişliği yiyordu. */
  .comment-item.is-reply { margin-left: 12px; }
  .comment-list { gap: 10px; }
  .reply-composer, .reply-box { gap: 8px; }
  .reply-box textarea { min-height: 76px; font-size: 15px; }
  .reply-actions { flex-wrap: wrap; gap: 8px; }
  .reply-actions button { min-height: 40px; }

  /* Gönderi detayında fotoğraf ekrana sığsın. */
  .post-detail-card .media-art,
  .post-detail-card .media-art img,
  .post-detail-card .media-art video { max-height: 62vh; }
}


/* ============================================================
   8) KULÜPLER · ETKİNLİKLER · ROTALAR
   ============================================================ */
@media (max-width: 700px) {
  /* Kulüp kartı: 232px'lik kapak sütunu telefonda metne yer
     bırakmıyordu; kapak üste geçiyor. */
  .club-feed-card { grid-template-columns: minmax(0, 1fr); }
  .club-feed-media { min-height: 150px; }
  .club-feed-body { padding: 14px; }
  .club-feed-top { flex-wrap: wrap; gap: 8px; }

  /* Etkinlik ızgarası ve satırları. */
  .event-grid { grid-template-columns: minmax(0, 1fr); }
  .event-cover, .event-thumb { min-height: 0; }
  .event-foot, .event-meta, .event-cats { flex-wrap: wrap; gap: 8px; }
  .event-detail-actions { flex-wrap: wrap; gap: 8px; }
  .event-detail-actions > * { flex: 1 1 auto; min-height: 44px; }

  /* Rota kartı ve rota detayı. */
  .route-page-card { grid-template-columns: minmax(0, 1fr); }
  .route-page-media, .route-page-media img, .route-page-media .route-page-art { min-height: 150px; }
  .route-hero-panel { flex-direction: column; align-items: stretch; gap: 16px; padding: 18px 16px; }
  .route-hero-copy h1 { font-size: 24px; }
  .route-hero-actions { flex-wrap: wrap; }
  .route-hero-actions > * { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  .route-stop-list { grid-template-columns: minmax(0, 1fr); }
  .route-detail-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .route-detail-stats span { border-right: 0; padding: 0 8px; }
  .route-comment-composer { flex-direction: column; align-items: stretch; gap: 8px; }
  .route-comment-composer button { min-height: 44px; }
  .route-comment-list p { padding-left: 0; }
  .route-live-map { height: 300px; }
  .route-map-legend { left: 10px; right: 10px; bottom: 10px; gap: 8px; flex-wrap: wrap; }
  .route-map-overlay { top: 10px; left: 10px; right: 10px; }
}


/* ============================================================
   9) MAĞAZALAR (LİSTE)
   Not: harita paneli (.sp-map-panel) ≤1100px'te zaten gizli.
   Leaflet yeniden ölçülendirme JS'i olmadan mobilde açmak boş/kaymış
   bir harita riski taşıdığı için gizli bırakıldı — liste tam genişliğe
   yayıldı ve her kartta yol tarifi bağlantısı zaten var.
   ============================================================ */
@media (max-width: 900px) {
  .sp-list { padding: 14px 14px 48px; border-right: 0; gap: 10px; }
  .sp-head { flex-wrap: wrap; gap: 8px; }
  .sp-sort { flex-wrap: wrap; gap: 6px; }
  .sp-sort button { min-height: 40px; }
  /* Kategori şeridi parmakla kaysın (oklar ≤760'ta zaten gizli). */
  .sp-cats { overflow-x: auto; scrollbar-width: none; }
  .sp-cats::-webkit-scrollbar { display: none; }
  .sp-cats button { flex: 0 0 auto; min-height: 40px; white-space: nowrap; }
  .sp-results { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .sp-list { padding: 12px 12px 44px; }
  .sp-card { grid-template-columns: 78px minmax(0, 1fr); gap: 12px; }
  .sp-logo { width: 78px; height: 78px; }
  .sp-card-body { min-width: 0; }
  .sp-card-top { flex-wrap: wrap; gap: 6px; }
  .sp-card-meta { flex-wrap: wrap; gap: 4px 10px; }
  .sp-fav, .sp-go { width: 40px; height: 40px; }
  /* Seçili işletme baloncuğu haritasız ekranda tam genişlik. */
  .sp-selected { left: 12px; right: 12px; width: auto; }
  .sp-selected-actions { flex-wrap: wrap; gap: 8px; }
  .sp-selected-actions > * { flex: 1 1 auto; justify-content: center; min-height: 40px; }
}


/* ============================================================
   10) İŞLETME SİTESİ (.bz-site)
   Bu sayfa uygulamanın kabuğunu kullanmaz; kendi mikro sitesi.
   Sorunlar: 26px'lik sabit yan boşluk, 640px'lik kahraman
   (telefonda tam ekran bir kapak), gizlenen "Ara" düğmesi
   (yapışkan başlıkta tek dokunuşla arama kayboluyordu) ve
   9–10px'lik okunmayan metinler.
   ============================================================ */
@media (max-width: 900px) {
  .bz-container { padding: 0 18px; }
  .bz-header .bz-container { height: 62px; gap: 12px; }
  .bz-brand-logo { width: 40px; height: 40px; }
  .bz-brand b { font-size: 14px; }
  .bz-brand small { font-size: 10.5px; }

  .bz-header-cta { gap: 8px; margin-left: auto; }
  .bz-fav { width: 40px; height: 40px; }
  /* "Ara" düğmesi gizlenmiyor, yalnız daralıyor: yapışkan başlıkta
     tek dokunuşla telefon açılsın. Numara DOM'da kalır (font-size:0
     yalnız görsel), ekran okuyucular okumaya devam eder. */
  .bz-header-cta .bz-button {
    display: inline-grid; place-items: center;
    width: 40px; height: 40px; padding: 0; gap: 0;
    font-size: 0; border-radius: 50%; box-shadow: none;
  }
  .bz-header-cta .bz-button .mg-icon { width: 16px; height: 16px; }

  /* Kahraman: sabit 540–640px yerine ekranla orantılı. */
  .bz-hero { min-height: min(72vh, 520px); }
  .bz-hero-inner { padding-top: 64px; padding-bottom: 30px; }
  .bz-hero-actions > .bz-button { flex: 1 1 auto; justify-content: center; min-height: 46px; }

  .bz-section { padding: 40px 0; }
  .bz-hours { grid-template-columns: minmax(0, 1fr); }
  .bz-map { min-height: 260px; }
  /* Üst şeritteki 9–9,5px'lik metinler okunmuyordu. */
  .bz-topstrip { padding: 8px 14px; gap: 10px; }
  .bz-topstrip a, .bz-topstrip span { font-size: 11.5px; }
  .bz-topstrip .bz-theme { width: 40px; height: 40px; }

  /* İşletme sitesinde uygulama kabuğu (üst bar + gezinme şeridi) yok;
     bölüm 3'teki genel çapa payı burada 55px fazla kaydırıyordu.
     Yapışkan olan tek şey 62px'lik işletme başlığı. */
  .bz-site section[id] { scroll-margin-top: 72px; }
}

@media (max-width: 620px) {
  .bz-container { padding: 0 14px; }
  .bz-hero { min-height: min(68vh, 460px); }
  .bz-hero-copy { gap: 12px; }
  .bz-hero-meta, .bz-hero-details { flex-wrap: wrap; gap: 7px; }
  .bz-section { padding: 32px 0; }
  .bz-service-grid, .bz-campaign-grid, .bz-review-grid { grid-template-columns: minmax(0, 1fr); }
  .bz-showcase { height: clamp(160px, 44vw, 230px); }
  .bz-rate-strip { padding: 14px 15px; gap: 12px; }
  .bz-rate-stars { margin-left: 0; }
  .bz-rate-stars button { width: 40px; height: 40px; font-size: 26px; }
  .bz-review-form { flex-direction: column; }
  .bz-review-form .bz-button { min-height: 46px; justify-content: center; }
  .bz-contact { padding: 18px 16px; }
  .bz-cta { padding: 26px 18px; border-radius: 16px; }
  .bz-footer-grid { gap: 22px; }
  /* Ürün/hizmet modalı telefonda neredeyse tam ekran olmalı. */
  .bz-item-modal { width: min(100%, 100vw - 20px); max-height: 92vh; }
  .bz-item-close { width: 40px; height: 40px; }
  /* Bulunamadı ekranındaki uzun adres satırı taşıyordu. */
  .bz-missing-code { overflow-wrap: anywhere; }
}


/* ============================================================
   11) PROFİL VE ARAÇ DETAYI
   ============================================================ */
@media (max-width: 760px) {
  .profile-cover { height: 140px; border-radius: 12px; }
  .profile-head { flex-wrap: wrap; gap: 12px; margin: -28px 4px 0; }
  .profile-id { min-width: 0; flex: 1 1 200px; }
  .profile-id h1, .profile-id b { overflow-wrap: anywhere; }
  .profile-actions { flex-wrap: wrap; gap: 8px; padding-top: 10px; width: 100%; }
  .profile-actions > * { flex: 1 1 auto; justify-content: center; min-height: 42px; }
  .profile-bio { overflow-wrap: anywhere; }
  /* Beş sayaç yan yana 60px'e düşüp rakamları kırpıyordu. */
  .profile-stats { flex-wrap: wrap; gap: 8px; }
  .profile-stats > div { flex: 1 1 30%; min-width: 96px; }
  .badge-strip { flex-wrap: wrap; gap: 8px; }
}

@media (max-width: 620px) {
  .profile-blog-grid { grid-template-columns: minmax(0, 1fr); }
  .garage-grid { grid-template-columns: minmax(0, 1fr); }
  /* Nitro küçük kartları tek kolonda devasa oluyordu. */
  .reel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .profile-garage-head, .garage-legacy-head { flex-wrap: wrap; gap: 10px; }

  /* Araç detayı. */
  .vd-head { flex-wrap: wrap; gap: 10px; padding: 13px 14px; }
  .vd-title { min-width: 0; }
  .vd-title h1 { font-size: 21px; overflow-wrap: anywhere; }
  .vd-actions { flex-wrap: wrap; gap: 8px; width: 100%; }
  .vd-actions > * { flex: 1 1 auto; justify-content: center; min-height: 42px; }
  .vd-props { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vd-form-grid, .vd-form-wide { grid-template-columns: minmax(0, 1fr); }
  .vd-thumbs { overflow-x: auto; scrollbar-width: none; }
  .vd-thumbs::-webkit-scrollbar { display: none; }
  .vd-thumbs button { flex: 0 0 auto; min-width: 56px; min-height: 44px; }
  .vd-row, .vd-service, .vd-prop { min-width: 0; }
  .vd-row-body { min-width: 0; overflow-wrap: anywhere; }
  .vd-service-head, .vd-service-meta { flex-wrap: wrap; gap: 6px 12px; }
  .vd-tool, .vd-edit, .vd-del { min-width: 40px; min-height: 40px; }
  /* Favori/modifiye kartları. */
  .fav-head { gap: 10px; }
  .fav-card-actions button { width: 40px; height: 40px; }
}


/* ============================================================
   12) BİLDİRİMLER · MESAJLAR · AYARLAR · OLUŞTURMA
   ============================================================ */
@media (max-width: 900px) {
  /* Bildirimler: 92px'lik üst dolgu sabit üst bar zamanından kalma. */
  .notifications-main { padding: 18px 14px 48px; }
  .notifications-title { flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 16px; }
  .notifications-title h1 { font-size: 24px; }
  .notification-tabs { gap: 14px; overflow-x: auto; scrollbar-width: none; }
  .notification-tabs::-webkit-scrollbar { display: none; }
  .notification-tabs button { flex: 0 0 auto; white-space: nowrap; min-height: 44px; }
  .notification-item { gap: 11px; padding: 13px 10px; }
  .notification-text { min-width: 0; overflow-wrap: anywhere; }
  .notification-go { flex: none; min-width: 40px; min-height: 40px; }

  /* Ayarlar. */
  .settings-main { padding: 20px 14px 56px; }
  .settings-heading { flex-direction: column; align-items: flex-start; gap: 12px; padding-bottom: 18px; }
  .settings-heading h1 { font-size: 26px; }
  .settings-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .settings-menu { display: flex; flex-direction: row; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .settings-menu::-webkit-scrollbar { display: none; }
  .settings-menu button { flex: 0 0 auto; white-space: nowrap; min-height: 42px; padding: 0 14px; }
  .settings-card { padding: 18px 16px; }
  .setting-row, .setting-field { gap: 14px; }
  .setting-row > div, .setting-field label { min-width: 0; }
  .danger-zone button { margin: 0 8px 8px 0; min-height: 42px; }

  /* Gönderi oluştur / araç ekle. */
  .create-main, .vehicle-add-main { padding: 18px 14px 56px; }
  .create-title, .add-heading { gap: 12px; }
  .create-tools { overflow-x: auto; scrollbar-width: none; }
  .create-tools::-webkit-scrollbar { display: none; }
  .create-tools button { flex: 0 0 auto; white-space: nowrap; min-height: 42px; }
  .create-footer { flex-wrap: wrap; gap: 10px; }
  .create-footer > * { min-height: 44px; }
  .add-fields { grid-template-columns: minmax(0, 1fr); }
  .wizard-actions { gap: 10px; }
  .wizard-actions button { flex: 1 1 auto; min-height: 44px; }
}

@media (max-width: 900px) {
  /* Mesajlar: kabuk yüksekliği artık üst bar + gezinme şeridini
     hesaba katıyor, yoksa sohbet penceresi ekranın altından taşıyordu. */
  .chat-main {
    height: auto;
    min-height: calc(100dvh - var(--mg-topbar-h) - var(--mg-mobile-nav-h));
    overflow: visible;
  }
  .chat-main > .forum-heading, .chat-main > .forum-empty { margin: 16px 14px; }
  .chat-columns { display: flex; flex-direction: column; min-height: 0; }
  .chat-list-col { border-right: 0; border-bottom: 1px solid var(--mg-line); max-height: 40vh; padding: 14px 12px 8px; }
  .chat-thread-col { min-height: 0; }
  .chat-messages { min-height: 260px; }
  .chat-thread-head { gap: 10px; padding: 12px 14px; }
  .chat-composer { padding: 10px 12px; gap: 8px; }
  .chat-composer textarea { font-size: 16px; }
  .chat-send { min-width: 44px; min-height: 44px; }
  .bubble { max-width: 88%; }
  .bubble-text { overflow-wrap: anywhere; }
  .channel-row { padding: 10px; gap: 10px; min-height: 56px; }
  .channel-info { min-width: 0; }
}


/* ============================================================
   13) GİRİŞ / KAYIT
   auth.css ≤940px'te tanıtım panelini zaten üste alıyor; burada
   yalnız dar ekran ölçüleri ve dokunma hedefleri düzeltiliyor.
   ============================================================ */
@media (max-width: 620px) {
  .auth-side { padding: 22px 14px 40px; }
  .auth-card { padding: 22px 16px 20px; border-radius: 16px; }
  .auth-form h2 { font-size: 22px; }
  .auth-form input:not([type=checkbox]) { height: 46px; font-size: 16px; }
  .auth-submit, .forgot-submit { min-height: 48px; font-size: 15px; }
  .password-reveal { min-width: 40px; min-height: 40px; }
  .auth-switch, .guest-link { font-size: 13px; }
  .signup-nav { flex-wrap: wrap; gap: 10px; }
  .signup-nav .auth-submit, .signup-back { min-height: 46px; }
  .signup-steps { gap: 6px; }
  .signup-summary b { max-width: 55%; }
  .forgot-panel { padding: 16px 14px; }
  .auth-error { font-size: 13px; overflow-wrap: anywhere; }
  /* Sağ üstteki dil/tema kutusu kartın üstüne biniyordu. */
  .auth-toolbar { top: 10px; right: 10px; }
  .auth-toolbar .top-action,
  html .auth-page .auth-toolbar .top-action { width: 40px; height: 40px; }
  .auth-toolbar .lang-switch button { min-height: 40px; }
}


/* ============================================================
   14) BLOGLAR · HABERLER · YASAL
   ============================================================ */
@media (max-width: 900px) {
  .blogs-main { padding: 20px 14px 56px; }
  .blogs-heading h1 { font-size: 25px; }
  .blog-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
  .blog-card.lead { grid-column: span 1; }

  .news-main { padding: 18px 14px 56px; }
  .news-lead { grid-template-columns: minmax(0, 1fr); }
  .news-row { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; }
  .news-row-body { min-width: 0; }

  /* Blog okuma ekranı: yazı sütunu kenardan kenara değil, nefesli. */
  .bw-sheet, .bw-body { padding-inline: 16px; }
  .bw-body { font-size: 16.5px; line-height: 1.72; }
  .bw-cover { min-height: 200px; padding: 16px; }
  .blog-detail { padding: 18px 16px; }
}

@media (max-width: 560px) {
  .blog-grid { grid-template-columns: minmax(0, 1fr); }
  .legal-body { padding: 16px 14px; font-size: 14px; }
  .legal-langs { flex-wrap: wrap; gap: 8px; }
}


/* ============================================================
   15) MODAL, LIGHTBOX, HİKÂYE VE AÇILIR KATMANLAR
   ============================================================ */
@media (max-width: 620px) {
  /* 20px'lik dış boşluk telefonda modalı gereksiz daraltıyordu. */
  .mg-modal-backdrop, .forum-modal-backdrop { padding: 12px; }
  .mg-modal { width: min(100%, 100vw - 24px); max-height: 88vh; }
  .forum-modal { width: min(100%, 100vw - 24px); padding: 18px 16px; max-height: 88vh; overflow-y: auto; }
  .mg-modal-close, .modal-close { width: 40px; height: 40px; }
  .modal-cancel, .forum-modal button[type=submit] { min-height: 44px; }
  .fav-modal { width: min(100%, 100vw - 24px); max-height: 90vh; }
  .fav-cancel, .fav-save { min-height: 44px; }
  .fav-form input, .fav-form select, .fav-form textarea { font-size: 16px; }

  /* Paylaşım sayfası (mesaja gönder) ve uygulama kapısı. */
  .mg-modal.share-sheet, .mg-modal.app-gate, .mg-modal.post-report { width: min(100%, 100vw - 24px); }
  .report-reasons button { min-height: 44px; }

  /* Tam ekran görsel: oklar başparmak menzilinde. */
  .mg-lightbox { padding: 10px; }
  .mg-lb-close { top: 10px; right: 10px; width: 44px; height: 44px; }
  .mg-lb-nav { width: 44px; height: 44px; }
  .mg-lb-figure img { max-height: calc(100vh - 120px); }

  /* Rozet katalogu. */
  .badge-all { grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr)); }
}

@media (max-width: 900px) {
  /* Uygulama tanıtım şeridi yeni gezinme şeridiyle çakışmasın:
     alt kenarda kalıyor ve güvenli alanı (çentik) hesaba katıyor. */
  .mg-app-bar { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .mg-app-bar-cta { min-height: 40px; }
  .mg-app-bar-close { width: 40px; height: 40px; }
}


/* ============================================================
   16) GENEL GÜVENLİK KURALLARI
   Tek tek ele alınmayan ekranlar için ortak zemin. Amaç: hiçbir
   sayfada yatay kaydırma, kırpılmış metin veya 40px'ten küçük bir
   dokunma hedefi kalmasın.
   ============================================================ */
@media (max-width: 900px) {
  /* iOS'ta 16px'ten küçük bir alana dokununca sayfa yakınlaşıyor ve
     bir daha uzaklaşmıyor. Çıplak `input{}` seçicisi (0,0,1) bu
     projede işe yaramaz — girişlerin ölçüsü hep sınıf üzerinden
     (0,1,1) veriliyor ve `font` KISAYOLU ile yazılıyor. Bu yüzden
     gerçek suçlular tek tek, aynı ağırlıkta yazılıyor. */
  .topic-search input, .rail-search input, .chat-search input,
  .sp-head input, .shops-heading input,
  .reply-box textarea, .chat-composer textarea,
  .route-comment-composer textarea, .create-card textarea,
  .add-fields input, .add-fields select,
  .setting-field select, .create-footer select, .shops-heading select,
  .vd-form-grid input, .vd-form-grid select, .vd-form-grid textarea,
  .vd-maint-modal input,
  .forum-modal input, .forum-modal select, .forum-modal textarea,
  .fav-form input, .fav-form select, .fav-form textarea,
  .auth-form input:not([type=checkbox]), .forgot-panel input,
  .bz-review-form input,
  .settings-main input:not([type=checkbox]):not([type=radio]),
  .settings-main textarea,
  .create-main input:not([type=checkbox]):not([type=radio]),
  .create-main textarea,
  .vehicle-add-main input:not([type=checkbox]):not([type=radio]),
  .vehicle-add-main textarea {
    font-size: 16px;
  }

  /* Izgara/esnek kutu çocukları içeriklerinden daralabilsin:
     `min-width:auto` varsayılanı uzun kelimelerde taşmanın
     bir numaralı sebebi. */
  main, .forum-main, .feed-column, .xp-main, .sp-list, .settings-main,
  .notifications-main, .blogs-main, .saved-main, .create-main,
  .vehicle-add-main, .news-main, .nitro-main,
  .rail-card, .post-card, .settings-card, .topic-list, .club-feed-card,
  .event-card, .sp-card, .fav-card, .comment-item, .notification-item,
  .channel-row, .bz-service, .bz-campaign, .bz-review {
    min-width: 0;
  }

  /* Uzun başlıklar üç noktaya değil, alt satıra insin. */
  h1, h2, h3, .forum-heading h1, .blogs-heading h1, .settings-heading h1,
  .bz-hero h1, .bz-title h2, .route-hero-copy h1 {
    overflow-wrap: anywhere; text-wrap: pretty;
  }

  /* Tablolar ve geniş kod blokları kendi kabında kaysın; sayfayı
     yana kaydırmasın. */
  /* Editörden gelen serbest içerik (blog gövdesi, yasal metin, gönderi
     metni) tablo veya kod bloğu taşıyabiliyor. `display:block` bilinçli:
     tabloyu kendi kabında kaydırılabilir yapar. Uygulamanın kendi
     ızgaralarına bulaşmasın diye YALNIZ içerik alanlarında geçerli. */
  .bw-body table, .legal-body table, .blog-detail table, .post-copy table,
  .bz-item-body table {
    display: block; max-width: 100%; overflow-x: auto;
  }
  .bw-body pre, .legal-body pre, .blog-detail pre, .post-copy pre {
    max-width: 100%; overflow-x: auto;
  }

  /* Yatay şeritlerin ortak davranışı: parmakla kayar, çubuk gizli,
     zincirleme kaydırma sayfayı sürüklemez. */
  .chip-strip, .category-chips, .sp-cats, .profile-tabs, .route-list-tabs,
  .stories, .xp-event-strip, .tag-cloud, .service-pills, .badge-strip {
    overscroll-behavior-x: contain;
  }

  /* Küçük ikon düğmeleri için ortak taban: 40x40.
     (Görsel ölçü değişmiyorsa bile dokunulabilir alan büyüyor.) */
  .post-more, .mg-modal-close, .bz-fav, .bz-item-close,
  .fav-card-actions button, .vd-tool, .notification-go,
  .chat-send, .modal-close, .story-viewer button,
  .top-action, .theme-toggle {
    min-width: 40px; min-height: 40px;
  }

  /* Sabit/yapışkan katmanlar çentikli ekranlarda güvenli alanı
     hesaba katsın. */
  .app-topbar { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
  .bz-site, .social-app, .forum-app-shell { padding-bottom: env(safe-area-inset-bottom, 0px); }

  /* Bir sayfa yine de taşarsa suçluyu görünür kılmak yerine
     sessizce kırpmak yeterli: `overflow-x: clip` (bölüm 0) hem
     kaydırmayı hem yatay boşluğu engelliyor. */
}

@media (max-width: 560px) {
  /* Son savunma hattı: hiçbir mutlak konumlu panel ekrandan
     geniş olmasın. */
  .account-menu, .post-menu, .mg-modal, .forum-modal, .fav-modal,
  .sp-selected, .selected-shop, .route-map-overlay, .bz-item-modal {
    max-width: calc(100vw - 20px);
  }
  /* `.post-menu` zaten sağa çapalı (right:0), `.account-menu` da öyle:
     eklenen tek şey genişlik tavanı — 208px'lik min-width ile 300px'lik
     tavan çakışmıyor, yani menüler daralmadan ekranda kalıyor. */
}