/* HAMBURGER BUTTON */
.hamburger{
  display:none;
  flex-direction:column;
  cursor:pointer;
  gap:6px;
  z-index:101;
}

.hamburger span{
  width:28px;
  height:3px;
  background:white;
  border-radius:5px;
  transition:0.3s ease;
}

/* ===== MOBILE NAV FIXED ===== */
@media (max-width: 768px){

  .hamburger{display:flex;}

  nav{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:rgba(0,0,0,0.97);
    backdrop-filter: blur(10px);
    flex-direction:column;
    text-align:center;
    padding:10px 0;
    gap:10px;

    /* animation-safe hidden state */
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:all 0.35s ease;
  }

  nav.active{
    max-height:300px;
    opacity:1;
  }

  nav a{
    padding:14px;
    font-size:18px;
  }
}

.hamburger.active span:nth-child(1){
  transform:rotate(45deg) translate(5px,5px);
}
.hamburger.active span:nth-child(2){
  opacity:0;
}
.hamburger.active span:nth-child(3){
  transform:rotate(-45deg) translate(6px,-6px);
}