/* BorsaKaynak — mobil başlık düzeni ve menü içi hızlı erişim
   ---------------------------------------------------------------------------
   SORUN: Mobilde başlığın hemen altında "Tema", "Bildirim" ve "PRO Model
   Portföy" tam genişlikte üç büyük buton olarak duruyordu. Bunlar ilk ekranın
   yarısını kaplıyor, asıl içeriği (piyasa verisi) aşağı itiyordu.

   ÇÖZÜM: Üç düğme mobilde menünün içine taşınır (taşıma işini mobil-menu.js
   yapar — DOM'dan kopyalanmaz, TAŞINIR; böylece tema düğmesine bağlı olay
   dinleyicisi korunur). Arama satırı yerinde kalır. Menü düğmesi de sağdan
   sola alınıp logonun soluna yaslanır.

   KAPSAM: Yalnızca 860 piksel altı. Masaüstü düzeni hiç değişmez —
   pencere büyütülünce düğmeler kendi yerine geri döner. */

@media (max-width: 860px) {

  /* --- 1. Menü düğmesi en sola ------------------------------------------
     .nav-actions bir sarmalayıcıydı ve içindeki üç düğmeyi tek blok olarak
     sağda tutuyordu. display:contents ile sarmalayıcı görsel olarak ortadan
     kalkar, çocukları doğrudan .nav'ın flex öğesi olur; böylece menü düğmesi
     order ile logonun soluna geçebilir. */
  .header .nav { display: flex; align-items: center; gap: 8px; }
  .header .nav-actions { display: contents; }
  .header .ham-btn { order: -2; margin-right: 2px; }
  .header .nav > a:first-of-type { order: -1; margin-right: auto !important; }
  .header .nav-btn { order: 1; }

  /* --- 2. Başlık altındaki büyük düğmeler gizlenir -----------------------
     Arama satırı kalır; yalnız düğme şeridi kalkar. */
  .premium-command__inner { grid-template-columns: 1fr; }
  .premium-command .premium-actions { display: none !important; }

  /* --- 3. Menü içine taşınan düğmeler ------------------------------------
     Menüdeki bağlantı diliyle aynı görünsünler: aynı yükseklik, aynı yarıçap,
     aynı hizalama. Sıralama: PRO (vurgulu) en üstte. */
  .mob-nav .mob-hizli {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 2px 4px;
  }
  .mob-nav .mob-hizli .premium-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 12px 14px;
    border-radius: 12px; font-size: 14px; font-weight: 600;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.045);
    color: rgba(240,244,248,.9) !important;
    text-decoration: none; transform: none !important; box-shadow: none !important;
  }
  .mob-nav .mob-hizli .premium-btn:hover,
  .mob-nav .mob-hizli .premium-btn:focus-visible {
    background: rgba(200,169,107,.12);
    border-color: rgba(200,169,107,.28);
    color: #C8A96B !important;
  }
  /* PRO düğmesi tam satır ve vurgulu */
  .mob-nav .mob-hizli .premium-btn.gold {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, #C8A96B, #B08F4F);
    border-color: transparent;
    color: #08121E !important;
    font-weight: 800;
  }
  .mob-nav .mob-hizli .premium-btn.gold:hover {
    filter: brightness(1.06);
    color: #08121E !important;
  }
  .mob-nav .mob-hizli .premium-btn i { flex-shrink: 0; }

  /* Açık tema karşılıkları. Sayfada "body, p, span, td, div{color:#F3F7FA}"
     diye sabit koyu-tema kuralı var ve metne DOĞRUDAN uyguluyor; bu yüzden
     renkler burada açıkça yazılır, mirasa bırakılmaz. */
  html[data-theme="light"] .mob-nav .mob-hizli .premium-btn,
  body.premium-light .mob-nav .mob-hizli .premium-btn {
    background: rgba(13,27,46,.04);
    border-color: rgba(13,27,46,.12);
    color: #0D1B2E !important;
  }
  html[data-theme="light"] .mob-nav .mob-hizli .premium-btn:hover,
  body.premium-light .mob-nav .mob-hizli .premium-btn:hover {
    background: rgba(138,106,50,.12);
    border-color: rgba(138,106,50,.3);
    color: #6B5223 !important;
  }
  html[data-theme="light"] .mob-nav .mob-hizli .premium-btn.gold,
  body.premium-light .mob-nav .mob-hizli .premium-btn.gold {
    background: linear-gradient(135deg, #8A6A32, #6B5223);
    color: #FFFFFF !important;
  }
}

/* Dar ekranda hesap düğmesi kesilmesin (2026-09-10)
   -------------------------------------------------------------------------
   SORUN: 360/375px ekranlarda başlık satırı 402px'e çıkıyor, SON .nav-btn --
   bk-auth.js'in "Hesabım / Giriş" davranışını bağladığı hesap düğmesi --
   başlığın kırpılan taşma alanında kalıyordu: görünmüyor, tıklanamıyordu.
   Sayfa yatay KAYMIYORDU (taşma kırpılı), o yüzden klasik scrollWidth
   ölçümü sorunu gizliyordu.

   KÖK NEDEN: Logo <img> doğal genişlikte (index.html varyantında satır içi
   width/flex-shrink:0 ile) ve flex öğesinin min-width:auto'su küçülmeyi
   engelliyordu.

   ÇÖZÜM: Yalnız 400px ALTINDA logo bağlantısına tavan koy ve img'i kutuya
   otur (width:100% + height:auto -> oran korunur, ne ezilir ne kırpılır).
   400px üstü ve masaüstü HİÇ etkilenmez -- tasarım aynen kalır.
   Düğmeler flex-shrink:0 ile dokunma hedefini korur.

   DENENDİ, ÇALIŞMADI (tekrar denemeyin):
   - Yalnız max-width vermek -> logo yatay EZİLİR (232x40 -> 198x40).
   - width:auto + height:auto -> img doğal boyutuna kaçar, kutu KIRPAR
     (".com" -> ".co"), max-height tavanı bunu kurtarmaz. */
@media (max-width: 400px) {
  /* Logoya KESİN genişlik: max-width yetmiyordu, imaj (satır içi
     height:32px;width:auto ile) kutusunu aşıp yandaki düğmenin altına
     giriyordu. Kesin width + height:auto -> oran korunur, taşma olmaz,
     nav satırı gerçekten 360px'e sığar (12+44+8+150+8+44+8+44 = 318). */
  .header .nav > a:first-of-type {
    min-width: 0;
    flex-shrink: 1 !important;
    margin-right: 8px !important;
  }
  .header .nav > a:first-of-type picture { min-width: 0; display: flex; align-items: center; }
  .header .nav > a:first-of-type img {
    width: 150px !important;
    height: auto !important;
    max-width: 100% !important;
  }
  .header .nav-btn { flex-shrink: 0 !important; }
}

/* 380 piksel altı: iki sütun sıkışıyor, tek sütuna düşer */
@media (max-width: 380px) {
  .mob-nav .mob-hizli { grid-template-columns: 1fr; }
}