/* ═══════════════════════════════════════════════════════════════════
   bk-mobil-okunabilirlik.css — MOBİL OKUNABİLİRLİK KATMANI
   2026-09-26

   AMAÇ: mobil görünümü kolay + anlaşılır yapmak.
   KAPSAM: yalnız @media(max-width:860px) / 480px. Masaüstü görünümü
           HİÇ etkilenmez — bu dosyada medya sorgusu dışında kural yok.

   Kurallar canlı ölçümle bulundu (Playwright, 375x812 iPhone profili,
   3 sayfa × 3 viewport). Ezberden seçici yazılmadı; her blok altında
   ölçülen değer yorumda duruyor.

   !important kullanımı bilinçli: 163 hisse sayfası header CSS'ini
   <style> olarak GÖMÜLÜ taşıyor ve bu dosyadan sonra parse ediliyor;
   !important olmadan gömülü kurallar kazanıyor.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {

  /* ─────────────────────────────────────────────────────────────
     1) KRİTİK BUG — header/arama bandı daralması
     Ölçüm: .premium-command 375px ekranda 261px genişlikti.
     Kök neden: sayfa body'si display:flex + align-items:center,
     .bk-shared-chrome ise display:contents → chrome çocukları
     body'nin flex item'ı oluyor ve içerik genişliğine büzülüyor.
     header-footer-shared.css'te 2026-09-25'te düzeltildi, ama
     163 hisse sayfası o dosyayı linklemiyor (CSS gömülü).
     ───────────────────────────────────────────────────────────── */
  /* NOT: iki farklı sarmalayıcı var — 869 sayfada .bk-shared-chrome,
     anasayfa gibi sayfalarda chrome doğrudan .premium-light içinde.
     Bu yüzden seçiciler sarmalayıcısız yazıldı. */
  .ticker,
  .header,
  .premium-command {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-self: stretch !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }

  /* Bu 163 sayfanın gövdesinde padding:20px 15px var; genişlik
     düzeltmesi tek başına yetmiyor, bant kenarlara değmiyordu
     (414px ekranda 384px ölçüldü). Full-bleed ile gövde
     boşluğundan bağımsız olarak ekran genişliğine taşınır.
     Zaten tam genişlikte olan sayfalarda 100vw == 100%, etkisiz. */
  body > .ticker,
  body > .header,
  body > .premium-command,
  .bk-shared-chrome > .ticker,
  .bk-shared-chrome > .header,
  .bk-shared-chrome > .premium-command {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  /* ─────────────────────────────────────────────────────────────
     2) KRİTİK BUG — arama kutusu ekranın yarısı kadardı
     Ölçüm: input 188px / .premium-search 229px (375px ekranda).
     Placeholder kesiliyordu: "Hisse kodu veya adı ara (or. A"
     Kök neden: __inner mobilde flex-direction:column'a geçiyor,
     ama .premium-search'te flex:1 dikey eksene uygulanıyor —
     yatayda genişlik verilmemiş.
     ───────────────────────────────────────────────────────────── */
  .premium-command__inner {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .premium-search {
    width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;   /* dokunma hedefi */
    box-sizing: border-box !important;
  }
  .premium-search input {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;    /* <16px iOS'ta odakta sayfayı zoomlar */
    /* input kutuyu dikeyde doldurmalı: aksi halde kutunun kenarına
       dokunulduğunda odaklanmıyor. Ölçümde 44px → 28px'e düşmüştü. */
    min-height: 42px !important;
    align-self: stretch !important;
  }

  /* ─────────────────────────────────────────────────────────────
     3) OKUNABİLİRLİK — 10-11px gövde metinleri
     Ölçüm (anasayfa 375px): 10px'lik 84 öğe, 11px'lik 56 öğe,
     13px'lik 146 öğe. Mobilde 10-11px okunmuyor.
     Not: yalnız ölçümde yakalanan seçiciler; global font büyütme
     YOK (layout'u kırar).
     ───────────────────────────────────────────────────────────── */

  /* hisse adı listeleri — tek başına 100 öğe (anasayfa) */
  .p-name      { font-size: 12px !important; letter-spacing: .2px !important; }
  .akis-name   { font-size: 12px !important; }
  .sym-name    { font-size: 12.5px !important; }

  /* para akışı / tablo etiketleri */
  .akis-col-lbl { font-size: 12px !important; letter-spacing: .4px !important; }
  .m-lbl        { font-size: 12px !important; }

  /* son dakika şeridi */
  .breaking-time { font-size: 12px !important; }
  .breaking-cat  { font-size: 12px !important; }
  .breaking-text { letter-spacing: .4px !important; }

  /* ─────────────────────────────────────────────────────────────
     Bölüm başlığı dikey kırılması
     Ölçüm: .data-section-head içindeki "Para Akışı" başlığı 46px'e
     sıkışıp iki satıra bölünüyordu (46x28, satır yüksekliği 13px);
     yanındaki uzun "SON KAPANIŞ VERİSİ..." uyarısı yeri yiyordu.
     Başlık bölünmez yapıldı, uyarı metni kalan alana sarılır.
     ───────────────────────────────────────────────────────────── */
  .data-section-head > div {
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }
  .data-section-head > div > span:first-child {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }

  /* slider */
  .slide-tag { font-size: 12px !important; letter-spacing: .8px !important; }
  .slide-cta { font-size: 13px !important; }

  /* tablo başlıkları — 10.5-11.5px ölçüldü */
  table th { font-size: 12px !important; letter-spacing: .3px !important; }

  /* mobil menü / ticker etiketleri */
  .mob-nav-section-title { font-size: 12px !important; letter-spacing: .5px !important; }
  .mob-tick-label        { font-size: 12px !important;   letter-spacing: .3px !important; }
  .tick-name             { font-size: 12px !important; }
  .tick-chg              { font-size: 12px !important; }

  /* grafik sekmeleri ve rozetler (hisse sayfası) */
  .bkchart-tab   { font-size: 12px !important; }
  .bkchart-live  { font-size: 12px !important; }
  .bkgauge-note  { font-size: 12px !important; }
  .bk-akd-sira   { font-size: 12px !important; }
  .gc-sub        { font-size: 12px !important; }
  .badge         { font-size: 12px !important; }

  /* yazar/etiket satırları */
  .ky-rol    { font-size: 12px !important; }
  .ky-sure   { font-size: 12px !important; }
  .ky-tarih  { font-size: 12px !important; }

  /* ─────────────────────────────────────────────────────────────
     9) TABLO AĞIRLIKLI SAYFALAR (bankalar, aracı kurum, endeks)
     İlk turda bu sayfalarda 12px altı öğe yüksek kalmıştı
     (bankalar 141, aracı kurum 123). Ölçülen seçiciler:
     ───────────────────────────────────────────────────────────── */

  /* bankalar.html */
  .bnk-kart .ad   { font-size: 12.5px !important; }  /* banka adı — birincil */
  .bnk-kart .fark { font-size: 12px !important; }
  .zaman          { font-size: 12px !important; }
  .adet           { font-size: 12px !important; }
  .bnk-atif       { font-size: 12px !important; }
  .bnk-rozet      { font-size: 11px !important; }    /* 9,5px'ti; rozet dar, ölçülü artış */

  /* araci-kurum.html
     NOT: .kh-row-val ve .fp-val buraya KONULMUYOR — tablette (768px)
     zaten 12,5px oluyorlar, 860px'lik bu blokta 12px'e çekmek onları
     KÜÇÜLTÜYORDU (ölçüldü: 30 öğe 12,5 -> 12). Telefon bloğunda (640px)
     tanımlılar; orada gerçek değerleri 11-11,5px. */
  .kh-row-pct    { font-size: 12px !important; }
  .kh-sub        { font-size: 12px !important; }
  .fp-title      { letter-spacing: .5px !important; }
  .fp-unit       { letter-spacing: .4px !important; }
  .cc-eyebrow    { font-size: 11.5px !important; letter-spacing: .5px !important; }
  .cc-pill       { letter-spacing: .4px !important; }
  .kh-donut-center-lbl { font-size: 11px !important; letter-spacing: .3px !important; }

  /* endeks-*.html */
  .mtc-name { font-size: 12px !important; }
  .mtc-chg  { font-size: 12px !important; }
  .sc-code  { font-size: 11.5px !important; letter-spacing: .3px !important; }
  .mil      { font-size: 11.5px !important; letter-spacing: .3px !important; }
  .ctab     { font-size: 12px !important; }
  .sec      { letter-spacing: .6px !important; }

  /* ─────────────────────────────────────────────────────────────
     10) HALKA ARZ SAYFALARI
     Ölçüm (375px): halka-arz.html 196 öğe 12px altında + 48 dokunma
     hedefi 24px altında; guncel-halka-arzlar.html'de şirket adı
     78px kutuda kırpılıyordu ("Net Global..." okunmuyor).
     ───────────────────────────────────────────────────────────── */

  /* halka-arz.html — 16 sütunlu liste tablosu yatay kaydırmada */
  .ha-list-status { font-size: 11.5px !important; letter-spacing: .3px !important; }
  .ha-list-date   { font-size: 12px !important; }
  .ha-list-code   { font-size: 12px !important; }
  .h-stat-lbl     { font-size: 11.5px !important; letter-spacing: .5px !important; }
  .h-stat-sub     { font-size: 12px !important; }
  .kaynak-not     { font-size: 12px !important; }
  .hero-eyebrow   { letter-spacing: .6px !important; }

  /* guncel-halka-arzlar.html */
  .arz-meta-lbl { font-size: 11.5px !important; letter-spacing: .4px !important; }
  .arz-status   { font-size: 11.5px !important; letter-spacing: .3px !important; }
  .arz-progress-hd .pct { font-size: 12px !important; }
  .hero-stat-lbl { font-size: 11.5px !important; letter-spacing: .4px !important; }
  .kg-lbl        { font-size: 11.5px !important; letter-spacing: .4px !important; }
  .kg-sub        { font-size: 12px !important; }

  /* Şirket adı kırpılması: ad `white-space:nowrap` + ellipsis ile 78px'e
     sıkışıyordu çünkü sağdaki durum rozeti yeri alıyor. Telefonda ad
     iki satıra sarsın, rozet kendi satırına geçebilsin. */
  .arz-top {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .arz-id {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  .arz-info { min-width: 0 !important; flex: 1 1 auto !important; }
  .arz-name {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }

  /* Liste tablosu gövdesi (.tbl). NOT: halka-arz.html'de bu kural
     kasten ETKİSİZ kalıyor — sayfanın kendi
     `table.tbl td,table.tbl th{font-size:11.5px!important}` kuralı
     (@max-width:768px) daha spesifik (0,1,2 > 0,1,1) ve o kazanıyor.
     Bu, sayfa yazarının 16 sütunlu tablo için bilinçli mobil tercihi;
     ezmek yatay kaydırma mesafesini uzatırdı. Kural, aynı override'a
     sahip olmayan diğer .tbl tabloları için duruyor. */
  .tbl td, .tbl th { font-size: 12px !important; }

  /* 11px'te kalan ikincil satırlar */
  .ha-list-card-foot span   { font-size: 12px !important; }
  .arz-progress-hd span     { font-size: 12px !important; }
  .karne-head span          { font-size: 12px !important; }

  /* guncel-halka-arzlar hero: 4 istatistik kutusu flex/wrap ile
     içeriğe göre farklı genişlikte alt alta diziliyordu (dağınık
     görünüm). Telefonda eşit iki sütun. */
  .hero-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .hero-stats > * { min-width: 0 !important; }

  /* halka-arz-tavan-serisi.html */
  .pv-label   { font-size: 12px !important; letter-spacing: .5px !important; }
  .gc-eyebrow { font-size: 11.5px !important; letter-spacing: .6px !important; }
  .current    { letter-spacing: .5px !important; }

  /* Liste/kart içindeki bağlantılar 39x15 - 78x16 ölçülmüştü.
     Satır içi metin akışını bozmamak için yalnız dikey dolgu verilir. */
  .ha-list-grid a,
  .arz-grid a,
  .arz-detail,
  .dt-head a {
    display: inline-block !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    min-height: 24px !important;
  }

  /* Filtre/arama denetimleri (input 242x15, select 86x17 ölçüldü) */
  .ha-list-tools input,
  .ha-list-tools select,
  .arz-ara,
  input[type="search"] {
    min-height: 44px !important;
    font-size: 16px !important;   /* iOS odakta zoom yapmasın */
  }

  /* NOT — bilerek DOKUNULMAYANLAR:
     .bnk-logo-fallback (8px, ×48): 16x16px logo kutusunun içindeki iki
       harflik rozet. Yanında banka adı tam boyutta yazıyor; fontu
       büyütmek harfleri kutudan taşırır.
     .hcc / .hcv (8-9px): ısı haritası hücre etiketleri. Hücre genişliği
       veriye göre daralıyor, büyütmek metni kutudan taşırır.
     İkisi de ikincil/süs katman, birincil bilgi değil. */

  /* ─────────────────────────────────────────────────────────────
     4) HARF ARALIĞI — dar ekranda yer yiyip başlıkları kırıyordu
     Ölçüm: .p-name 1px ×100, .akis-col-lbl 1.8px, .slide-tag 2.04px,
     .breaking-text 1.89px, .mono-cap 1.44px, .ky-etiket 1.84px.
     375px'te 20 karakterlik bir başlıkta 2px aralık = 40px kayıp.
     ───────────────────────────────────────────────────────────── */
  .mono-cap,
  .ky-etiket,
  .ad-premium,
  .premium-kicker,
  .panel-title,
  .akis-more-btn,
  .kesfet-hdr { letter-spacing: .5px !important; }

  /* ─────────────────────────────────────────────────────────────
     5) DOKUNMA HEDEFLERİ
     Ölçüm: nav-btn 38x38, mob-nav-close 40x40, breadcrumb linkleri
     15-16px yükseklik, slider noktaları 5x5, btn-action 36px.
     WCAG 2.2 AA asgarisi 24px; birincil kontroller 44px'e çekildi.
     Görsel boyut korunuyor — büyüyen yalnız tıklama alanı.
     ───────────────────────────────────────────────────────────── */
  .nav-btn,
  .ham-btn,
  .mob-nav-close {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .btn-action,
  .bkchart-tab {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* breadcrumb: satır yüksekliğini açmadan tıklama alanını büyüt */
  nav[aria-label="breadcrumb"] a,
  .breadcrumb a,
  .crumbs a {
    display: inline-block !important;
    padding: 6px 2px !important;
    min-height: 24px !important;
  }

  /* slider noktaları: görsel 5px kalır, tıklama alanı 24px olur */
  .dot {
    position: relative !important;
  }
  .dot::after {
    content: "" !important;
    position: absolute !important;
    inset: -10px !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }

  /* ─────────────────────────────────────────────────────────────
     6) SAYFA BOYU — hisse sayfası 8.286px = 13 ekran boyuydu
     Ölçüm: .metrics-grid mobilde 1 sütun, her .metric-box 345x80px.
     2 sütuna alınınca metrik bloğu yarı yarıya kısalıyor.
     ───────────────────────────────────────────────────────────── */
  /* NOT: 2 sütun kuralı 640px altına sınırlı. 768px tablette ızgara
     zaten 3 sütun; 860px'e uygulansaydı tabletti geriletirdi
     (ölçüldü: 3 sütun → 2 sütun). Tablet dokunulmadan bırakıldı. */

  /* ─────────────────────────────────────────────────────────────
     7) SLIDER — geçiş anında iki başlık üst üste biniyordu ve
     ok butonları başlık metnini örtüyordu (ekran görüntüsüyle
     doğrulandı, 375px).
     ───────────────────────────────────────────────────────────── */
  .slides .slide {
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
  }
  .slides .slide.active {
    opacity: 1;
    pointer-events: auto;
  }
  /* NOT: .slide-content dolgusuna DOKUNULMUYOR. İlk denemede
     padding:8px verilmişti; sayfanın kendi yan dolgusunu ezip
     başlığı ok düğmelerinin altına kaydırdı (375px'te ölçüldü).
     Oklar zaten 44x44 ve başlık 241px'lik kendi sütununda. */

  /* ─────────────────────────────────────────────────────────────
     8) SON DAKİKA ŞERİDİ — kayan habere yer açılır
     Ölçüm (375px): şeridin solunda "SON DAKİKA" etiketi
     (padding 18px×2 + letter-spacing .18em), sağında "Tüm Son
     Dakika →" bağlantısı (padding 16px×2) duruyor; ortadaki kayan
     habere ~120px kalıyor, yani aynı anda ~16 karakter okunuyordu.
     Etiket ve bağlantı sıkılaştırıldı, ikisi de görünür kalıyor.
     ───────────────────────────────────────────────────────────── */
  .breaking-label { padding: 0 10px !important; }
  .breaking-text  { letter-spacing: .06em !important; font-size: 11px !important; }
  .breaking-all   { padding: 0 10px !important; }
}

/* ══════════ TELEFON (≤640px) — sayfa boyu kısaltma ══════════
   Ölçüm: hisse sayfası 375px'te 8.054px (≈10 ekran) uzunluktaydı;
   .metrics-grid tek sütun, her .metric-box 345x80px.
   2 sütunla sayfa 7.000px'e indi (≈8,6 ekran).                    */
@media (max-width: 640px) {
  /* Tablette 12,5px oldukları için yalnız telefonda yükseltiliyorlar
     (telefonda ölçülen değerleri 11-11,5px). */
  .kh-row-val { font-size: 12px !important; }
  .fp-val     { font-size: 12px !important; }

  .metrics-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .metrics-grid .metric-box {
    min-width: 0 !important;
    padding: 10px 12px !important;
  }
  .metrics-grid .metric-box > * {
    overflow-wrap: anywhere;
  }
}

/* ══════════ ÇOK DAR EKRAN (≤480px) ══════════ */
@media (max-width: 480px) {

  /* metrik kartı 2 sütunda taşmasın diye rakam ölçeği hafif kısılır */
  .metrics-grid .metric-box { padding: 9px 10px !important; }

  /* çok dar ekranda metrik başlığı tek satırda kalsın */
  .metrics-grid .m-lbl {
    font-size: 11.5px !important;
    letter-spacing: .2px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ══════════ 360px ve altı — en dar cihaz ══════════ */
@media (max-width: 360px) {
  /* 2 sütun metrik 360px'te sıkışıyorsa tek sütuna güvenli dönüş */
  .metrics-grid { gap: 6px !important; }
}