.logo {
    height: 50px;
    width: auto;
}
/* Navbar Mobile Full Height */
@media (max-width: 991px) {
  .navbar-collapse {
    position: fixed;
      top: 0;
      left: 0;
      height: 100vh !important;
      width: 100%;
      background: rgba(0,0,0,0.95);
      backdrop-filter: blur(10px);
      transition: all 0.4s ease;
      padding-top: 40px;
      z-index: 1200;
  }

  .navbar-collapse.show {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .navbar-nav .nav-link {
    color: #fff !important;
    font-size: 1.5rem;
    margin: 10px 0;
  }
}


#themeToggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 2000;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
/* ===========================
   SPACER AGAR KONTEN TIDAK TERTUTUP NAVBAR
=========================== */
body.has-spacer::before {
  content: "";
  display: block;
  height: 70px; /* tinggi navbar */
}

/* ===========================
   NAVBAR BLUR + ANIMASI SHOW/HIDE
=========================== */
#navbar {
  transition: top 0.35s ease, opacity 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
  background: rgba(20, 20, 20, 0.55); /* semi-transparent */
  backdrop-filter: blur(12px); /* BLUR */
  -webkit-backdrop-filter: blur(12px);
}

/* Navbar disembunyikan saat scroll down */
#navbar.hide {
  top: -80px;
  opacity: 0;
}

/* Shadow saat tampil */
#navbar.show-shadow {
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

/* ===========================
   MOBILE MENU SLIDE FROM LEFT
=========================== */
@media (max-width: 991px) {
  #navMenu {
    position: fixed;
    top: 0;
    left: -280px; /* sembunyi di kiri */
    width: 250px;
    height: 100vh;
    background: rgba(15, 15, 15, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding-top: 80px;
    text-align: left;
    transition: left 0.35s ease-in-out;
    z-index: 2000;
  }

  /* Saat menu muncul */
  #navMenu.show {
    left: 0;
  }

  .navbar-nav .nav-link {
    font-size: 1.1rem;
    padding: 12px 25px;
    text-align: left;
  }

  /* Overlay saat menu muncul */
  #menu-overlay {
    content: "";
    position: fixed;
    display: none;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1500;
  }
  #menu-overlay.active {
    display: block;
  }
}

/* ===========================
   BUTTON TOGGLER → CLOSE (X)
=========================== */
.navbar-toggler.custom-close {
  border: none;
}
.navbar-toggler.custom-close .navbar-toggler-icon {
  background-image: none;
}
.navbar-toggler.custom-close::after {
  content: "✕";
  font-size: 30px;
  color: white;
}
/* ===============================
   ANIMASI BOUNCE SAAT MENU MUNCUL
=============================== */
@keyframes slideBounce {
  0%   { transform: translateX(-280px); }
  60%  { transform: translateX(20px); }
  80%  { transform: translateX(-10px); }
  100% { transform: translateX(0); }
}

@media (max-width: 991px) {
  #navMenu.show {
    animation: slideBounce 0.5s ease-out;
  }
}

/* ===============================
   DARK MODE GLOBAL
=============================== */
body.dark-mode {
  background-color: #111 !important;
  color: #eee !important;
}

body.dark-mode a {
  color: #f8f8f8 !important;
}

/* Navbar dark mode */
body.dark-mode #navbar {
  background: rgba(25, 25, 25, 0.7) !important;
  backdrop-filter: blur(12px);
}

/* Menu drawer dark mode */
body.dark-mode #navMenu {
  background: rgba(10, 10, 10, 0.9) !important;
}

/* Teks dark mode */
body.dark-mode .nav-link,
body.dark-mode .dropdown-item {
  color: #eaeaea !important;
}

/* Toggle button style */
#darkToggle {
  border-radius: 50px;
  width: 42px;
  height: 42px;
  font-size: 18px;
  transition: 0.3s ease;
}

body.dark-mode #darkToggle {
  background: #222;
  color: #fff;
}
.daftar{
    height: 38px;
    align-items: center;
   
}
.btn-login {
  
    align-items: center;
}

.img-profile{
    width:36px;
    height:36px;
    object-fit:cover;
}

.user-info{
    line-height:1.1;
}

.nama-user{
    font-weight:600;
    font-size:15px;
    color:#1c2af1;
}

.user-link{
    font-size:12px;
}

.user-link a{
    color:#8aaeb3;
    text-decoration:none;
    margin-right:8px;
}

.user-link a:hover{
    text-decoration:underline;
}
.login {
  border-radius:6px;
  margin-left: 5px;
}
.logout {
  margin-left: 5px;
}