/* =========================================
   Mobile Header + Footer (≤ 799px)
   ========================================= */

/* --- Varsayılan değişkenler --- */
:root{
  --m-header-h: 56px;                 /* mobil header yüksekliği */
  --m-footer-h: 64px;                 /* mobil footer yüksekliği */
  --m-safe-b: env(safe-area-inset-bottom, 0px); /* iOS home indicator payı */
}

/* =========================================
   Mobile Header
   ========================================= */
/* Grid: 40% | 20% | 40%  */
.m-header{
  position: fixed; inset: 0 0 auto 0; height: var(--m-header-h);
  display: none;                        /* <800'de açılıyor (media aşağıda) */
  background: var(--block-bg);
  border-bottom: 1px solid var(--color-border-dark);
  z-index: 1000;

  display: grid;
  grid-template-columns: 40% 20% 40%;
  align-items: center;
  padding: 0 8px;                       /* biraz daha sıkı */
}


/* hücreler */
.m-h-left, .m-h-center, .m-h-right{ display:flex; align-items:center; gap:8px; min-width:0; }
.m-h-left  { justify-content:flex-start; overflow:hidden; }
.m-h-center{ justify-content:center; }
.m-h-right { justify-content:flex-end; overflow:hidden; }


/* ikon buton + svg boyutları */
.m-iconbtn{
  width: 40px; height: 40px;            /* biraz büyütüldü */
  display:grid; place-items:center;
  border:1px solid transparent; border-radius:10px;
  background:transparent; cursor:pointer; padding:0; flex:0 0 auto;
}
.m-iconbtn img{ width:32px; height:32px; }  /* ikonlar büyüdü */

/* logo / exchange.svg */
.m-brand{ flex:0 1 auto; }
.m-brand img{ height:48px; display:block; }

/* butonlar sağ tarafa; metin taşmasını engelle */
.m-btn-login,
.m-btn-signup{
  padding:8px 10px !important; font-weight:700; border-radius:10px !important; white-space:nowrap; font-size:14px; flex:0 0 auto;
}
.m-btn-login {
  background-color: var(--color-bmx-purple2);
  color: #000;
}

.m-btn-signup{
  background-color: var(--color-bmx-dark);
  color: #000;
}

.m-btn-login:hover{
  background-color: var(--color-bmx-light);
} 

.m-btn-signup:hover {
  background-color: var(--color-bmx-darker);
}


/* =========================================
   Mobile Footer
   ========================================= */
.m-footer{
  position: fixed; left: 0; right: 0; bottom: 0;
  height: calc(var(--m-footer-h) + var(--m-safe-b));
  padding-bottom: var(--m-safe-b);
  display: none;                      /* base: gizli, <800'de aç */
  background: var(--block-bg);
  border-top: 1px solid var(--color-border-dark);
  z-index: 1000;

  /* 5 kolonlu grid (display burada tanımlı değil; media içinde açılacak) */
  grid-template-columns: repeat(5, 1fr);
}

.mft-item{
  display: grid; place-items: center;
  gap: 4px; text-decoration: none; color: var(--text-color);
  padding: 8px 0 6px;
  font-size: 11px;                    /* etiket boyutu */
}
.mft-ico{ width: 22px; height: 22px; display:block; opacity: .85; }
.mft-txt{ opacity: .8; font-weight: 600; letter-spacing: .2px; }

/* aktif/hover */
.mft-item.is-active .mft-ico,
.mft-item.is-active .mft-txt{
  color: var(--color-bmx-darker); opacity: 1;
}
.mft-item:is(:hover, :focus-visible){
  background: var(--color-bmx-shadow3);
}

/* =========================================
   Breakpoints
   ========================================= */


@media (min-width: 621px){
  .m-header{ display:none !important; }
}

@media (max-width: 620px){
   .m-header{ display:grid; }
  .m-footer{ display:grid; }

  /* Desktop header/footer gizle */
  .top-menu-flex{ display:none !important; }
  .site-footer{ display:none !important; }

  /* İçerik; header ve footera çarpmayı önle */
  main, .page-shell, .tr-page{
    padding-top: calc(var(--m-header-h) + 8px);
    padding-bottom: calc(var(--m-footer-h) + var(--m-safe-b) + 8px);
  }
}


@media (min-width: 620px){
  .m-header{ display: none !important; }
  .m-footer{ display: none !important; }
  main, .page-shell, .tr-page{
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* (İsteğe bağlı) hareket azaltma tercihine saygı */
@media (prefers-reduced-motion: reduce){
  .m-header, .m-footer, .mft-item{ transition: none !important; }
}