/* IMPORTANT: background slider must NOT affect page height */
.bg-slider{
  position:fixed;
  inset:0;
  width:100%;
  height:100vh;
  z-index:-2;
  overflow:hidden;
}

.overlay{
  position:fixed;
  inset:0;
  background: rgba(2,6,23,0.85);
  width:100%;
  height:100vh;
  z-index:-1;
  pointer-events:none;
}


.bg-track {
  display: flex;
  width: 300%;
  height: 100%;
  animation: slideBg 30s linear infinite;
}

.bg-slide {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.bg1 { background-image: url('https://images.unsplash.com/photo-1512436991641-6745cdb1723f'); }
.bg2 { background-image: url('https://images.unsplash.com/photo-1725797951116-98dc0cce8ac8?q=80&w=880&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); }
.bg3 { background-image: url('https://images.unsplash.com/photo-1612703769284-0103b1e5ef70?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); }
.bg4 { background-image: url('https://plus.unsplash.com/premium_photo-1683746792239-6ce8cdd3ac78?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); }
.bg5{ background-image: url('https://images.unsplash.com/photo-1556742049-0cfed4f6a45d');}

@keyframes slideBg {
  0% { transform: translateX(0); }
  100% { transform: translateX(-66.66%); }
}

/* ===== NAVBAR USER PROFILE ===== */

.navbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 40px;
  background:#020617;
  position:relative;
  z-index:10;
}

.nav-links{
  display:flex;
  gap:22px;
  list-style:none;
}

.nav-user{
  display:flex;
  align-items:center;
  gap:12px;
}

.btn-login,
.btn-register{
  background:#22c55e;
  padding:8px 16px;
  border-radius:6px;
  font-size:14px;
}

.btn-register{
  background:#16a34a;
}

/* USER DROPDOWN */
.user-dropdown{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  position:relative;
}

.avatar{
  width:38px;
  height:38px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #22c55e;
}

.dropdown-menu{
  position:absolute;
  top:55px;
  right:0;
  background:#020617;
  width:170px;
  border-radius:10px;
  box-shadow:0 15px 40px rgba(0,0,0,.6);
  display:none;
  overflow:hidden;
}

.dropdown-menu a{
  display:block;
  padding:12px 18px;
  font-size:14px;
}

.dropdown-menu a:hover{
  background:#22c55e;
  color:#000;
}

.user-dropdown:hover .dropdown-menu{
  display:block;
}