<nav class="bottom-nav">
  <a href="#" class="bottom-tab active" aria-label="Ana Sayfa">
    <svg><!-- ev ikonu --></svg>
    <span>Ana</span>
  </a>
  <a href="#" class="bottom-tab" aria-label="Explore">
    <svg><!-- explore icon --></svg>
    <span>Explore</span>
  </a>
  <a href="#" class="bottom-tab bottom-tab-center">
    <span class="bottom-tab-fab">+</span>
  </a>
  <a href="#" class="bottom-tab" aria-label="Bildirimler">
    <svg><!-- zil ikonu --></svg>
    <span>Bildirim</span>
  </a>
  <a href="#" class="bottom-tab" aria-label="Profile">
    <svg><!-- profil ikonu --></svg>
    <span>Profile</span>
  </a>
</nav>

<style>
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 0.5rem 0 calc(0.5rem + env(safe-area-inset-bottom));
}
.bottom-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0.375rem; font-size: 0.6875rem; color: var(--muted); }
.bottom-tab.active { color: var(--accent); }
.bottom-tab-fab { width: 3rem; height: 3rem; border-radius: 50%; background: var(--accent); color: white; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; margin-top: -1.25rem; }
</style>