.navbar .container,
.navbar .container-fluid,
.app-navbar .navbar-shell {
  position: relative;
}

.hori-selector {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  /* Fare üzerindeyken açık, aktif (dinlenme) konumunda belirgin; ikisi de düz renk olduğundan
     geçişte yumuşakça değişir. */
  background-color: rgb(129 180 255 / 12%);
  border: none;
  border-radius: 0.75rem;
  box-shadow: inset 0 0 0 1px rgb(95 148 230 / 18%);
  transition:
    left 0.27s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.27s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.27s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.27s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    opacity 0.2s ease;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}
.hori-selector.is-visible {
  opacity: 1;
}

.hori-selector.is-resting {
  background-color: rgb(129 180 255 / 23%);
  box-shadow: inset 0 0 0 1px rgb(95 148 230 / 30%);
}

.app-navbar[data-bs-theme="dark"] .hori-selector {
  background-color: rgb(164 200 255 / 8%);
  box-shadow: inset 0 0 0 1px rgb(164 200 255 / 14%);
}

.app-navbar[data-bs-theme="dark"] .hori-selector.is-resting {
  background-color: rgb(164 200 255 / 15%);
  box-shadow: inset 0 0 0 1px rgb(164 200 255 / 28%);
}

.hori-selector.is-instant {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .hori-selector {
    transition: none;
  }
}

.navbar-nav .nav-link,
.navbar-brand {
  position: relative;
  z-index: 1;
}

.navbar-nav .nav-link {
  padding: 0.5rem 1rem;
}

.navbar-brand {
  
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}