/* MasalSaatim — Header ve Drawer CSS (MD7) */

/* ── Header ───────────────────────────────────────── */
.ms-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--color-surface); border-bottom: 1px solid var(--color-border);
  height: var(--header-h);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: var(--space-4); }
.header-left  { display: flex; align-items: center; gap: var(--space-3); }
.header-right { display: flex; align-items: center; gap: var(--space-3); }
.header-logo  { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; font-weight: 800; font-size: var(--text-xl); color: var(--color-text); }
.logo-icon    { font-size: 1.4rem; }
.logo-text    { color: var(--color-primary); }

/* ── Desktop Nav ──────────────────────────────────── */
.header-nav   { display: flex; align-items: center; gap: var(--space-2); }
.nav-link {
  display: flex; align-items: center; gap: var(--space-1);
  padding: 0.45rem 0.9rem; border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted);
  text-decoration: none; background: none; border: none; cursor: pointer;
  transition: all var(--transition-fast);
}
.nav-link:hover, .nav-link.active { color: var(--color-primary); background: var(--color-primary-light); }
.nav-cta { background: var(--color-primary); color: #fff; font-weight: 700; }
.nav-cta:hover { background: var(--color-primary-hover); color: #fff; }

/* ── Nav Dropdown ─────────────────────────────────── */
.nav-dropdown { position: relative; }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-float);
  min-width: 180px; padding: var(--space-2); z-index: var(--z-drawer);
  opacity: 0; pointer-events: none; transform: translateY(-8px);
  transition: all var(--transition-fast);
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-trigger[aria-expanded="true"] + .nav-dropdown-menu { opacity: 1; pointer-events: all; transform: translateY(0); }
.nav-dropdown-menu a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--color-text); text-decoration: none; }
.nav-dropdown-menu a:hover { background: var(--color-surface-soft); }

/* ── Hamburger ────────────────────────────────────── */
.hamburger-btn { background: none; border: none; font-size: 1.5rem; color: var(--color-text); padding: var(--space-2); border-radius: var(--radius-sm); }
.hamburger-btn:hover { background: var(--color-surface-soft); }

/* ── Drawer ───────────────────────────────────────── */
.drawer-overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(0,0,0,0.5); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity var(--transition-normal);
}
.drawer-overlay.open { opacity: 1; pointer-events: all; }

.ms-drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(320px, 85vw);
  background: var(--color-surface); z-index: var(--z-drawer);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(-100%); transition: transform var(--transition-normal);
  box-shadow: var(--shadow-drawer);
  display: flex; flex-direction: column;
}
.ms-drawer.open { transform: translateX(0); }

.drawer-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); }
.drawer-logo   { font-size: var(--text-xl); font-weight: 800; color: var(--color-primary); text-decoration: none; }
.drawer-close  { background: none; border: none; font-size: 1.3rem; color: var(--color-text-muted); padding: var(--space-1); border-radius: var(--radius-sm); }
.drawer-close:hover { color: var(--color-text); }

.drawer-body   { flex: 1; padding: var(--space-3) var(--space-4) var(--space-8); }
.drawer-user   { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; }
.drawer-user-name { font-weight: 700; font-size: var(--text-sm); }
.drawer-credit    { font-size: var(--text-xs); color: var(--color-primary); text-decoration: none; }
.drawer-sep    { border: none; border-top: 1px solid var(--color-border); margin: var(--space-3) 0; }
.drawer-section-title { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); padding: var(--space-3) 0 var(--space-1); }
.drawer-nav    { display: flex; flex-direction: column; gap: var(--space-1); }
.drawer-link   { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--color-text); text-decoration: none; transition: all var(--transition-fast); background: none; border: none; width: 100%; text-align: left; }
.drawer-link:hover { background: var(--color-surface-soft); color: var(--color-primary); }
.drawer-link-cta { color: var(--color-primary); font-weight: 700; }
.drawer-logout  { color: var(--color-error); }
.drawer-theme   { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; }

/* ── Tema Toggle ──────────────────────────────────── */
.theme-switcher { display: flex; gap: var(--space-1); }
.theme-btn { background: var(--color-surface-soft); border: 2px solid transparent; border-radius: var(--radius-sm); width: 36px; height: 36px; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); }
.theme-btn:hover { border-color: var(--color-border); }
.theme-btn.active { border-color: var(--color-primary); background: var(--color-primary-light); }

/* ── Bildirim / Profil ────────────────────────────── */
.notif-bell { position: relative; font-size: 1.3rem; text-decoration: none; padding: var(--space-2); border-radius: var(--radius-sm); display: flex; align-items: center; transition: background var(--transition-fast); }
.notif-bell:hover { background: var(--color-surface-soft); }
.notif-badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; background: var(--color-error); color: #fff; border-radius: var(--radius-full); font-size: 0.65rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--color-surface); }

.profile-menu-wrapper { position: relative; }
.profile-trigger { background: none; border: 2px solid var(--color-border); border-radius: var(--radius-full); padding: 2px; cursor: pointer; transition: border-color var(--transition-fast); }
.profile-trigger:hover { border-color: var(--color-primary); }
.profile-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-float);
  min-width: 220px; padding: var(--space-2); z-index: var(--z-drawer);
  opacity: 0; pointer-events: none; transform: translateY(-8px);
  transition: all var(--transition-fast);
}
.profile-dropdown.open { opacity: 1; pointer-events: all; transform: translateY(0); }
.profile-dropdown a, .profile-dropdown button { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--color-text); text-decoration: none; transition: background var(--transition-fast); background: none; border: none; width: 100%; cursor: pointer; }
.profile-dropdown a:hover, .profile-dropdown button:hover { background: var(--color-surface-soft); }
.profile-dropdown hr { border: none; border-top: 1px solid var(--color-border); margin: var(--space-2) 0; }
.profile-dropdown-user { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); }
.pd-name   { font-weight: 700; font-size: var(--text-sm); }
.pd-credit { font-size: var(--text-xs); color: var(--color-primary); }
.pd-logout { color: var(--color-error) !important; }

/* ── Bottom Nav ───────────────────────────────────── */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--color-surface); border-top: 1px solid var(--color-border);
  height: var(--bottom-nav-h);
  display: flex; align-items: stretch; z-index: var(--z-sticky);
  padding-bottom: var(--safe-bottom);
}
.bnav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; color: var(--color-text-muted); font-size: var(--text-xs); padding-block: var(--space-2); transition: color var(--transition-fast); }
.bnav-item.active { color: var(--color-primary); }
.bnav-icon  { font-size: 1.3rem; }
.bnav-label { font-size: 0.65rem; font-weight: 500; }
.bnav-create { background: var(--color-primary); color: #fff !important; border-radius: var(--radius-md); margin: var(--space-1); }