/* Mobile Bottom Navigation — Using design-system.css tokens */
.dw-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: calc(60px + env(safe-area-inset-bottom));
  box-shadow: var(--dw-shadow, 0 -4px 20px rgba(0,0,0,0.06));
  z-index: 1040;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--border);
}
[data-theme="dark"] .dw-bottom-nav {
  background: var(--bg-elevated);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
  border-top-color: var(--border);
}
.dw-bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.6875rem; /* ≥11px okunabilirlik */
  font-weight: 600;
  gap: 4px;
  width: 20%;
  transition: all 0.2s var(--ease-out, cubic-bezier(0.4, 0, 0.2, 1));
}
[data-theme="dark"] .dw-bottom-nav-item {
  color: var(--muted);
}
.dw-bottom-nav-item i {
  font-size: 20px;
  margin-bottom: 2px;
  transition: transform 0.2s;
}
.dw-bottom-nav-item.active {
  color: var(--drawest-accent);
}
.dw-bottom-nav-item.active i {
  background: var(--drawest-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: translateY(-3px) scale(1.1);
}
/* Body padding to prevent content from hiding behind bottom nav */
@media (max-width: 991px) {
  body {
    padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
  }
}

/* Bottom Sheet Styling — Using design-system.css tokens */
.space-bottom-sheet {
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  max-height: 85vh;
  min-height: 50vh;
  bottom: 10px !important;
  left: 10px !important;
  right: 10px !important;
  width: calc(100% - 20px) !important;
  border-radius: 16px !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
  background: var(--bg-elevated);
  color: var(--text);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  transition: height 0.35s cubic-bezier(0.32, 0.72, 0, 1), max-height 0.35s cubic-bezier(0.32, 0.72, 0, 1), border-radius 0.35s ease, bottom 0.35s ease, left 0.35s ease, right 0.35s ease, width 0.35s ease;
  overflow-y: auto;
  touch-action: pan-y;
}
.space-bottom-sheet.fullscreen {
  max-height: 100vh !important;
  max-height: 100dvh !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  height: 100vh !important;
  height: 100dvh !important;
}
.space-bottom-sheet .offcanvas-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: calc(60px + env(safe-area-inset-bottom));
}
.sheet-drag-handle {
  width: 40px;
  height: 5px;
  background: var(--border);
  border-radius: 3px;
  margin: 8px auto 4px;
  display: block;
  flex-shrink: 0;
  cursor: grab;
  touch-action: none;
}
.sheet-drag-handle:active { cursor: grabbing; }
.space-bottom-sheet .offcanvas-header {
  padding: 20px 20px 10px;
  border-bottom: 1px solid var(--border);
}
.space-bottom-sheet .btn-close {
  background-color: var(--bg-surface);
  border-radius: 50%;
  padding: 10px;
  color: var(--text);
}
[data-theme="dark"] .space-bottom-sheet .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}
.sheet-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--hover);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  transition: all 0.2s var(--ease-out, cubic-bezier(0.4, 0, 0.2, 1));
}
.sheet-menu-item:hover, .sheet-menu-item:active {
  background: var(--drawest-accent-soft);
  color: var(--drawest-accent);
}

/* ─── Bottom Sheet Menu — Minimalist Apple style ─── */
#bottomSheetMenu {
  --menu-bg: #ffffff;
  --menu-tile: #f2f2f7;
  --menu-tile-active: #e5e5ea;
  --menu-text: #1c1c1e;
  --menu-muted: rgba(60, 60, 67, 0.6);
  background: var(--menu-bg);
}

[data-theme="dark"] #bottomSheetMenu {
  --menu-bg: #000000;
  --menu-tile: #1c1c1e;
  --menu-tile-active: #2c2c2e;
  --menu-text: #ffffff;
  --menu-muted: rgba(235, 235, 245, 0.6);
}

#bottomSheetMenu .offcanvas-header {
  border-bottom: 0;
  background: var(--menu-bg);
}

#bottomSheetMenu .offcanvas-body {
  background: var(--menu-bg);
  padding-top: 4px;
}

#bottomSheetMenu .sheet-drag-handle {
  background: var(--menu-muted);
}

.menu-nav-grid {
  margin-bottom: 20px;
}

.menu-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  height: 100%;
  border-radius: 14px;
  background: var(--menu-tile);
  color: var(--menu-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  transition: background 0.15s ease, transform 0.15s var(--ease-out, cubic-bezier(0.4, 0, 0.2, 1));
}

.menu-nav-item:hover,
.menu-nav-item:active {
  background: var(--menu-tile-active);
  color: var(--menu-text);
  text-decoration: none;
  transform: translateY(-1px);
}
.menu-nav-item--donate {
  background: linear-gradient(135deg, rgba(255,59,110,0.14) 0%, rgba(236,72,153,0.16) 100%);
  border: 1px solid rgba(236,72,153,0.22);
}
.menu-nav-item--donate:hover,
.menu-nav-item--donate:active {
  background: linear-gradient(135deg, rgba(255,59,110,0.20) 0%, rgba(236,72,153,0.22) 100%);
  border-color: rgba(236,72,153,0.32);
}
[data-theme="dark"] .menu-nav-item--donate {
  background: linear-gradient(135deg, rgba(255,59,110,0.18) 0%, rgba(236,72,153,0.20) 100%);
  border-color: rgba(236,72,153,0.28);
}
.menu-nav-item--install {
  background: linear-gradient(135deg, rgba(0,122,255,0.12) 0%, rgba(88,86,214,0.14) 100%);
  border: 1px solid rgba(0,122,255,0.22);
}
.menu-nav-item--install:hover,
.menu-nav-item--install:active {
  background: linear-gradient(135deg, rgba(0,122,255,0.18) 0%, rgba(88,86,214,0.20) 100%);
  border-color: rgba(0,122,255,0.32);
}
[data-theme="dark"] .menu-nav-item--install {
  background: linear-gradient(135deg, rgba(10,132,255,0.16) 0%, rgba(122,122,255,0.18) 100%);
  border-color: rgba(10,132,255,0.30);
}

.nav-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* Soft, harmonized tinted icon tiles (light) */
.nav-icon--blue    { color: #007aff; background: rgba(0, 122, 255, 0.12); }
.nav-icon--purple  { color: #af52de; background: rgba(175, 82, 222, 0.12); }
.nav-icon--cyan    { color: #32ade6; background: rgba(50, 173, 230, 0.12); }
.nav-icon--indigo  { color: #5856d6; background: rgba(88, 86, 214, 0.12); }
.nav-icon--pink    { color: #ff2d55; background: rgba(255, 45, 85, 0.12); }
.nav-icon--teal    { color: #30b0c7; background: rgba(48, 176, 199, 0.12); }
.nav-icon--orange  { color: #ff9500; background: rgba(255, 149, 0, 0.14); }
.nav-icon--mint    { color: #00c7be; background: rgba(0, 199, 190, 0.12); }

/* Dark mode: brighter glyphs, slightly stronger tint */
[data-theme="dark"] .nav-icon--blue    { color: #0a84ff; background: rgba(10, 132, 255, 0.16); }
[data-theme="dark"] .nav-icon--purple  { color: #bf5af2; background: rgba(191, 90, 242, 0.16); }
[data-theme="dark"] .nav-icon--cyan    { color: #64d2ff; background: rgba(100, 210, 255, 0.16); }
[data-theme="dark"] .nav-icon--indigo  { color: #7a7aff; background: rgba(122, 122, 255, 0.16); }
[data-theme="dark"] .nav-icon--pink    { color: #ff375f; background: rgba(255, 55, 95, 0.16); }
[data-theme="dark"] .nav-icon--teal    { color: #40c8e0; background: rgba(64, 200, 224, 0.16); }
[data-theme="dark"] .nav-icon--orange  { color: #ff9f0a; background: rgba(255, 159, 10, 0.16); }
[data-theme="dark"] .nav-icon--mint    { color: #63e6e2; background: rgba(99, 230, 226, 0.16); }

/* Settings — grouped, flat rows */
.menu-settings {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.menu-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--menu-tile);
  transition: background 0.15s ease;
}

.menu-setting-row:active {
  background: var(--menu-tile-active);
}

.menu-setting-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--menu-text);
}

.menu-setting-row .ios-switch {
  flex-shrink: 0;
}