:root {
  --smk-purple: #2e3192;
  --smk-blue: #29abe2;
  --smk-yellow: #ffd200;

  --footer-dark: #020617;
  --footer-dark2: #0f172a;
  --footer-blue: #1e293b;

  --smk-white: #ffffff;
}

/* ===================================
   RESET
=================================== */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:"Poppins",sans-serif;

  background:#f8fafc;

  color:#222;

  overflow-x:hidden;

  animation:pageFade .5s ease;
}

/* ===================================
   PAGE FADE
=================================== */

@keyframes pageFade{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* ===================================
   OVERLAY
=================================== */

#overlay{
  position:fixed;
  top:0;
  left:0;

  width:100%;
  height:100%;

  background:rgba(2,6,23,.45);

  opacity:0;
  pointer-events:none;

  transition:.3s ease;

  z-index:998;
}

#overlay.show{
  opacity:1;
  pointer-events:auto;
}

/* ===================================
   NAVBAR
=================================== */
/* === NAVBAR === */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

  background: #1a1c5c; /* WARNA FOOTER */

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 12px 24px;

  color: white;

  z-index: 1000;

  transition:
    background 0.3s ease,
    backdrop-filter 0.3s ease,
    box-shadow 0.3s ease;
}

/* efek scroll */
.navbar.scrolled {
  background: rgba(26, 28, 92, 0.92);

  backdrop-filter: blur(10px);

  box-shadow:
    0 6px 18px rgba(0,0,0,0.25);
}

/* === LOGO === */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  width: 48px;
  height: 48px;
}

/* tulisan SMKN */
.nav-title h1 {
  font-size: 1.1rem;
  font-weight: 700;
  color: white;
}

/* tulisan inventaris sarpras */
.nav-title p {
  font-size: 0.82rem;

  color: #FFD200; /* TETAP KUNING */

  font-weight: 600;

  letter-spacing: 0.4px;
}

/* === MENU DESKTOP === */
.nav-menu {
  display: flex;
  gap: 26px;
}

.nav-menu a {
  position: relative;

  color: white;

  text-decoration: none;

  font-weight: 500;

  transition: 0.3s ease;
}

/* underline animasi */
.nav-menu a::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: -6px;

  width: 0%;
  height: 2px;

  background: #FFD200;

  border-radius: 10px;

  transition: 0.3s ease;
}

.nav-menu a:hover {
  color: #FFD200;
}

.nav-menu a:hover::after {
  width: 100%;
}

/* === HAMBURGER === */
.hamburger {
  display: none;

  flex-direction: column;
  justify-content: space-between;

  width: 24px;
  height: 18px;

  background: none;
  border: none;

  cursor: pointer;
}

.hamburger span {
  width: 100%;
  height: 3px;

  background: white;

  border-radius: 20px;

  transition: 0.3s ease;
}

/* === SIDEBAR === */
.sidebar {
  position: fixed;

  top: 0;
  right: -260px;

  width: 240px;
  height: 100%;

  padding: 90px 24px;

  display: flex;
  flex-direction: column;
  gap: 22px;

  background: #1a1c5c; /* SAMA KAYAK FOOTER */

  backdrop-filter: blur(10px);

  transition: right 0.3s ease;

  z-index: 999;

  box-shadow:
    -10px 0 30px rgba(0,0,0,0.25);
}

/* isi sidebar */
.sidebar a {
  color: white;

  text-decoration: none;

  font-size: 1rem;
  font-weight: 500;

  padding: 12px 14px;

  border-radius: 12px;

  transition: 0.3s ease;
}

/* hover sidebar */
.sidebar a:hover {
  background:
    rgba(255,255,255,0.12);

  color: #FFD200;

  padding-left: 18px;
}

/* === OVERLAY === */
#overlay {
  position: fixed;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background: rgba(0,0,0,0.45);

  opacity: 0;
  pointer-events: none;

  transition: 0.3s ease;

  z-index: 998;
}

#overlay.show {
  opacity: 1;
  pointer-events: auto;
}

/* === RESPONSIVE === */
@media(max-width:768px){

  .nav-menu{
    display:none;
  }

  .hamburger{
    display:flex;
  }

  .sidebar.open{
    right:0;
  }

  /* hamburger jadi X */
  .hamburger.active span:nth-child(1){
    transform:
      rotate(45deg)
      translateY(8px);
  }

  .hamburger.active span:nth-child(2){
    opacity:0;
  }

  .hamburger.active span:nth-child(3){
    transform:
      rotate(-45deg)
      translateY(-8px);
  }

  .navbar{
    padding:14px 5%;
  }

  .logo{
    width:42px;
    height:42px;
  }

  .nav-title h1{
    font-size:1rem;
  }

  .nav-title p{
    font-size:0.74rem;
  }
}

/* === ANIMASI PINDAH HALAMAN === */
body.fade-out {
  opacity: 0;
  transition: opacity 0.25s ease;
}