/* ── Mobil üst çubuk: hamburger + logo (bakiye/profil çipi topchip'ten gelir) ── */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: calc(var(--top-h) + var(--safe-top));
  padding: var(--safe-top) var(--gutter) 0;
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, rgba(20, 7, 38, 0.96), rgba(20, 7, 38, 0.75) 80%, transparent);
  z-index: 26;
}
.topbar[hidden] { display: none; }
.topbar-logo {
  font-family: var(--font-display);
  font-size: 24px; letter-spacing: 0.01em; color: #fff; line-height: 1;
  text-shadow: 0 0 24px rgba(192, 132, 252, 0.45);
}
.topbar-logo span { color: var(--accent-2); }

.menu-btn {
  width: 42px; height: 42px;
  display: grid; place-content: center; gap: 5px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line);
  cursor: pointer;
}
.menu-btn span {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: #fff; transition: transform 0.25s var(--ease), opacity 0.2s;
}
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Çekmece ── */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(8, 2, 16, 0.6);
  backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.25s;
}
.drawer-backdrop.open { opacity: 1; }
.drawer-backdrop[hidden] { display: none; }

.drawer {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 41;
  width: min(300px, 84vw);
  padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));
  display: flex; flex-direction: column; gap: 6px;
  background: linear-gradient(180deg, var(--nav-bg) 0%, var(--nav-bg2) 100%);
  box-shadow: 12px 0 40px rgba(0, 0, 0, 0.45);
  transform: translateX(-104%);
  transition: transform 0.3s var(--ease);
  overflow-y: auto;
}
.drawer.open { transform: none; }

.drawer-user {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 16px;
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: 8px;
}
.drawer-user .chip-avatar { width: 44px; height: 44px; font-size: 17px; }
.drawer-user b { display: block; font-size: 15px; color: #fff; }
.drawer-user small { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 4px; }
.drawer-user small svg { width: 14px; height: 14px; color: var(--gold); }

.drawer-link {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 12px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.8); font-weight: 600; font-size: 15px;
  transition: background 0.2s, color 0.2s;
}
.drawer-link svg { width: 22px; height: 22px; }
.drawer-link:hover, .drawer-link.active { background: rgba(255, 255, 255, 0.1); color: #fff; }
.drawer-link.active { background: #fff; color: var(--nav-bg); }
.drawer .nav-sep { height: 1px; background: var(--line-strong); margin: 8px 6px; }
.drawer-foot { margin-top: auto; padding-top: 12px; color: var(--muted); font-size: 12px; text-align: center; }

/* Mobilde içerik üst çubuğun altından başlar */
@media (max-width: 899px) {
  .view { padding-top: calc(var(--top-h) + 10px + var(--safe-top)); }
  .topchip { top: calc(((var(--top-h) - 36px) / 2) + var(--safe-top)); }
}
@media (min-width: 900px) {
  .topbar, .drawer, .drawer-backdrop { display: none !important; }
}