/* mobil-altbar.css — MOBİL ALT ÇUBUK (<=768px) · 08.09.2026
 *
 * Ne yapar: açık olan sekmenin İŞ EYLEMLERİNİ alta taşır. Sayfalar arası geçiş
 * ilk yuvadaki "☰ Menü" (mevcut #hamburger drawer'ı) ile.
 *
 * 🔴 Masaüstü (>768px) HİÇ etkilenmez: #mobil-altbar varsayılan display:none,
 *    #bottom-nav gizleme kuralları YALNIZ medya sorgusunun içindedir.
 * 🔴 Eski genel nav (#bottom-nav) SİLİNMEZ, yalnız body.mab-acik iken gizlenir.
 *    Tanımı olmayan sayfada sınıf kalkar → eski nav aynen geri gelir.
 *
 * ⏪ Geri alma: index.html'den bu <link> ve /js/mobil-altbar.js <script> satırını sil.
 */

#mobil-altbar { display: none; }

@media (max-width: 768px) {

  /* Çift çubuk olmasın: özel çubuk açıkken genel nav ve sayfanın kendi alt navı iner. */
  body.mab-acik #bottom-nav { display: none !important; }
  body.mab-acik #main .ks-bottom-nav { display: none !important; }   /* Kişisel — MobilAltBar'a devredildi */
  /* Fatura Onay — .selbar da position:fixed; bottom:14px; z-index:80
     (fatura-onay-yeni.css:187), yani satır seçilince alt çubuğun ÜSTÜNE biner.
     Onayla/Reddet MobilAltBar'a devredildiği için mobilde iniyor; masaüstünde
     (>768px) bu kural hiç uygulanmaz, seçim çubuğu aynen durur. */
  body.mab-acik #main .fao-kap .selbar { display: none !important; }
  /* Mail — mobile.js:196 sağ alta bir compose FAB (.mob-fab) enjekte ediyor.
     Alt çubukta "Yaz" yuvası AYNI düğmeye (.mail-compose-btn) gittiği için iki
     yazma düğmesi birden durmasın: çubuk açıkken FAB iner. Çubuk tanımsız bir
     sayfadaysa (mab-acik yok) FAB aynen görünür — mobile.css DEĞİŞMEDİ. */
  body.mab-acik[data-page="mail"] .mob-fab { display: none !important; }

  body.mab-acik #mobil-altbar {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 60;                     /* #bottom-nav ile AYNI: .ick-dip(55)/.ima(55) altta kalsın */
    background: var(--surface, #fff);
    border-top: 1px solid var(--border, #e5e7eb);
    padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.04);
    align-items: stretch;
  }

  #mobil-altbar .mab-e {
    flex: 1 1 0;
    min-width: 0;                    /* 6 yuva 390px'te sığsın (taşma yok) */
    min-height: 44px;                /* dokunma hedefi */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    position: relative;
    padding: 4px 2px;
    margin: 0 2px;
    border: 0;
    background: none;
    border-radius: 8px;
    color: var(--text-secondary, #6b7280);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  #mobil-altbar .mab-ik { font-size: 17px; line-height: 1; }
  #mobil-altbar .mab-ik svg { width: 19px; height: 19px; display: block; }
  #mobil-altbar .mab-et {
    font-size: 11px;
    line-height: 1.1;
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 6 yuva (☰ + 5): 390px'te yuva ~61px kalıyor, 11px etiket "Beslenme"yi kırpıyordu. */
  #mobil-altbar.mab-yogun .mab-e { margin: 0 1px; padding: 4px 1px; }
  #mobil-altbar.mab-yogun .mab-et { font-size: 10px; letter-spacing: -.2px; }
  #mobil-altbar.mab-yogun .mab-ik { font-size: 16px; }

  #mobil-altbar .mab-e:active { background: var(--surface-active, rgba(0, 0, 0, .05)); }
  #mobil-altbar .mab-e.mab-on { color: var(--primary, #681620); background: var(--primary-soft, rgba(104, 22, 32, .08)); }
  #mobil-altbar .mab-e.mab-bir { color: var(--primary, #681620); }
  #mobil-altbar .mab-menu { color: var(--text, #111827); }

  #mobil-altbar .mab-rozet {
    position: absolute;
    top: 1px;
    right: 50%;
    transform: translateX(16px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--danger, #dc2626);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
  }
  #mobil-altbar .mab-rozet[hidden] { display: none; }
}