:root {
  --ui-nav-height: 64px;
  --ui-bottom-radius: 1.25rem;
  --ui-nav-bg: rgba(253, 250, 245, 0.88);
  --ui-nav-border: rgba(83, 88, 69, 0.12);
  --ui-nav-shadow: 0 -10px 30px rgba(29, 27, 23, 0.06);
  --ui-top-shadow: 0 6px 24px rgba(29, 27, 23, 0.04);
  --ui-item-color: #535845;
  --ui-item-active: #9b4338;
  --ui-item-active-bg: rgba(155, 67, 56, 0.12);
  --ui-nav-item-gap: 0.2rem;
  --ui-bottom-label-size: 10px;
  --ui-bottom-icon-size: 22px;
  --ui-bottom-item-minw: 54px;
  --ui-top-link-size: 12px;
  --ui-top-link-track: 0.08em;
  --ui-top-link-weight: 500;
  --ui-cta-height: 40px;
  --ui-cta-radius: 0.65rem;
  --ui-cta-pad-x: 1rem;
  --ui-cta-font-size: 11px;
}

.ui-topbar {
  min-height: var(--ui-nav-height);
  background: var(--ui-nav-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ui-nav-border);
  box-shadow: var(--ui-top-shadow);
}

.ui-bottombar {
  background: var(--ui-nav-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--ui-nav-border);
  box-shadow: var(--ui-nav-shadow);
  border-top-left-radius: var(--ui-bottom-radius);
  border-top-right-radius: var(--ui-bottom-radius);
}

.ui-nav-item {
  color: var(--ui-item-color);
  transition: transform 180ms ease, opacity 220ms ease, color 220ms ease, background-color 220ms ease;
}

.ui-nav-item:hover {
  opacity: 0.92;
}

.ui-nav-item:active {
  transform: scale(0.97);
}

.ui-nav-item.is-active {
  color: var(--ui-item-active) !important;
}

/* Desktop/Top menu active style */
.ui-topbar .ui-nav-item {
  position: relative;
}

.ui-topbar nav .ui-nav-item {
  font-size: var(--ui-top-link-size);
  letter-spacing: var(--ui-top-link-track);
  text-transform: uppercase;
  font-weight: var(--ui-top-link-weight);
}

.ui-topbar .ui-nav-item.is-active {
  opacity: 1;
  font-weight: 600;
}

.ui-topbar .ui-nav-item.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 9999px;
  background: currentColor;
}

/* Mobile/Bottom menu active style */
.ui-bottombar .ui-nav-item {
  border-radius: 0.75rem;
  padding: 0.35rem 0.55rem;
  min-width: var(--ui-bottom-item-minw);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--ui-nav-item-gap);
  line-height: 1;
  text-align: center;
}

.ui-bottombar .ui-nav-item.is-active {
  background: var(--ui-item-active-bg);
  color: var(--ui-item-active) !important;
}

.ui-bottombar .ui-nav-item.is-active .material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* Top bar CTA normalization (buttons/links) */
.ui-topbar .ui-nav-cta {
  min-height: var(--ui-cta-height);
  padding-left: var(--ui-cta-pad-x);
  padding-right: var(--ui-cta-pad-x);
  border-radius: var(--ui-cta-radius);
  color: #ffffff !important;
  font-size: var(--ui-cta-font-size);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.ui-topbar .ui-nav-cta:hover,
.ui-topbar .ui-nav-cta:focus-visible,
.ui-topbar .ui-nav-cta.ui-nav-item {
  color: #ffffff !important;
}

/* Brand logo: keep bar stable, enlarge logo visually */
.ui-topbar .ui-brand-link {
  height: 42px;
  display: inline-flex;
  align-items: center;
  overflow: visible;
}

.ui-topbar .ui-brand-logo {
  height: 52px;
  width: auto;
  transform: scale(3.2);
  transform-origin: left center;
}

@media (max-width: 767px) {
  .ui-topbar .ui-brand-link {
    height: 36px;
  }

  .ui-topbar .ui-brand-logo {
    height: 44px;
    transform: scale(2.8);
  }
}

/* Top bars (desktop + mobile) */
header.fixed.top-0,
nav.fixed.top-0 {
  min-height: var(--ui-nav-height) !important;
  background: var(--ui-nav-bg) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--ui-nav-border) !important;
  box-shadow: var(--ui-top-shadow);
}

/* Bottom bars (mobile) */
nav.fixed.bottom-0 {
  background: var(--ui-nav-bg) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
  border-top: 1px solid var(--ui-nav-border) !important;
  box-shadow: var(--ui-nav-shadow) !important;
  border-top-left-radius: var(--ui-bottom-radius);
  border-top-right-radius: var(--ui-bottom-radius);
}

nav.fixed.bottom-0 a {
  color: var(--ui-item-color);
  transition: transform 180ms ease, opacity 220ms ease, color 220ms ease;
}

nav.fixed.bottom-0 a:hover {
  opacity: 0.92;
}

nav.fixed.bottom-0 a:active {
  transform: scale(0.97);
}

/* Keep already-marked active states consistent */
nav.fixed.bottom-0 a.text-\[\#9b4338\],
nav.fixed.bottom-0 a.bg-\[\#535845\],
nav.fixed.bottom-0 a.text-secondary {
  color: var(--ui-item-active) !important;
}

/* Standard icon sizing */
nav.fixed.bottom-0 .material-symbols-outlined,
header.fixed.top-0 .material-symbols-outlined,
nav.fixed.top-0 .material-symbols-outlined {
  font-size: var(--ui-bottom-icon-size);
}

.ui-bottombar .ui-nav-item span:last-child {
  font-size: var(--ui-bottom-label-size);
  letter-spacing: 0.04em;
  line-height: 1.1;
}

/* v4: breakpoint bazlı nav ince ayarları */
@media (max-width: 389px) {
  :root {
    --ui-bottom-label-size: 9px;
    --ui-bottom-icon-size: 20px;
    --ui-bottom-item-minw: 48px;
    --ui-nav-item-gap: 0.12rem;
  }

  .ui-bottombar {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .ui-bottombar .ui-nav-item {
    padding: 0.3rem 0.42rem;
  }
}

@media (min-width: 390px) and (max-width: 767px) {
  :root {
    --ui-bottom-label-size: 10px;
    --ui-bottom-icon-size: 22px;
    --ui-bottom-item-minw: 54px;
    --ui-nav-item-gap: 0.18rem;
  }
}

@media (min-width: 768px) {
  .ui-topbar {
    min-height: 68px;
  }

  .ui-topbar .ui-nav-item {
    padding-left: 0.1rem;
    padding-right: 0.1rem;
  }

  :root {
    --ui-cta-height: 40px;
    --ui-cta-pad-x: 1rem;
  }
}

@media (min-width: 1024px) {
  .ui-topbar {
    min-height: 72px;
  }

  .ui-topbar nav .ui-nav-item {
    letter-spacing: 0.08em;
  }

  :root {
    --ui-cta-height: 42px;
    --ui-cta-pad-x: 1.1rem;
    --ui-cta-font-size: 11px;
  }
}

/* Safe area support */
@supports (padding: max(0px)) {
  nav.fixed.bottom-0 {
    padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
  }
}