@layer base, components, utilities;

.nav-toggle {
  display: none;
}

/* Hamburger */
.nav-toggle-btn {
  display: none;
  cursor: pointer;
  z-index: 1001;
}

/* Overlay */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 1000;
}

/* Menü */
.nav-menu {
  z-index: 1002;
}

/* Mobile */
@media (max-width: 599px) {
  .nav-toggle-btn {
    display: block;
  }
  
  .nav-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .nav-toggle:checked ~ .nav-menu {
    max-height: 500px;
  }

  /* Menü açıksa overlay göster */
  .nav-toggle:checked ~ .nav-overlay {
    display: block;
  }
}