:root{--nav-h:76px}

.navbar{
  position:absolute;top:0;left:0;right:0;z-index:1040;
  background:transparent!important;
  border-bottom:1px solid transparent;
  box-shadow:none;
  transition:background .25s,box-shadow .25s,border-color .25s
}
.navbar.scrolled{
  position:fixed;
  background:#ffffff!important;
  border-bottom:1px solid rgba(0,0,0,.1);
  box-shadow:0 6px 20px rgba(0,0,0,.06)
}
body.nav-fixed{padding-top:var(--nav-h)}

/* link grubu arka plan */
.navbar-link-section{
  display:flex;
  gap:24px;
  background:rgba(0,0,0,.45);
  padding:8px 20px;
  border-radius:28px;
}
.navbar.scrolled .navbar-link-section{
  background:rgba(103,103,103,.08);
}

/* linkler */
.navbar .nav-link{
  position:relative;
  font-family:"Montserrat", sans-serif;
  font-weight:500;
  color:#fff!important;
  transition:color .2s;
}
.navbar.scrolled .nav-link{color:#444!important}

/* aktif link alt çizgi */
.navbar .nav-link.active{
  font-weight:600;
}
.navbar .nav-link.active::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:1px;
  margin:auto;
  width:60%;
  height:2px;
  background:#fff;
}
.navbar.scrolled .nav-link.active::after{
  background:#444;
}

/* brand ve sosyal ikonlar */
.navbar .navbar-brand img{height:auto;filter:drop-shadow(0 1px 6px rgba(0,0,0,.35))}
.navbar .navbar-social-media a{display:inline-flex;align-items:center;color:#fff}
.navbar.scrolled .navbar-social-media a{color:#676767}

/* toggler */
.navbar .navbar-toggler{border:0;outline:0}
.navbar:not(.scrolled) .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}
.navbar.scrolled .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(103,103,103,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}

@media(max-width:991.98px){
  :root{--nav-h:64px}
  .navbar-link-section{
    flex-direction:column;
    border-radius:12px;
    gap:0;
  }
  .navbar .nav-link{padding:10px}
}