.navbar > ul {
  list-style:none;
  display:flex;
}
.navbar > ul > li {
  position:relative;
}
.navbar > ul > li > a {
  display:block;
  padding:14px 20px;
  color:#fff;
  text-decoration:none;
  transition:color 0.2s ease;
}
.navbar > ul > li > a:hover {
  background:#444;
  color:yellow;
}

/* Semua submenu */
.navbar ul ul {
  list-style:none;
  position:absolute;
  top:100%;
  left:0;
  background:#444;
  min-width:200px;
  border-radius:6px;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:all 0.25s ease;
  z-index:100;
}
.navbar ul ul li {
  position:relative;
}
.navbar ul ul li a {
  display:block;
  padding:10px 14px;
  color:#fff;
  text-decoration:none;
  white-space:nowrap;
  transition:color 0.2s ease;
}
.navbar ul ul li a:hover {
  background:#555;
  color:yellow;
}

/* Hover untuk submenu desktop */
.navbar li:hover > ul {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* Level 3 → ke kanan */
.navbar ul ul ul {
  top:0;
  left:100%;
  min-width:180px;
  transform:translateX(15px);
  opacity:0;
  visibility:hidden;
  transition:all 0.3s ease;
}
.navbar ul ul li:hover > ul {
  opacity:1;
  visibility:visible;
  transform:translateX(0);
}

/* Panah otomatis */
.navbar li > a::after {
  content:"";
  margin-left:6px;
  font-size:0.8em;
}
.navbar > ul > li:has(> ul) > a::after {
  content:" ▾";
}
.navbar ul ul li:has(> ul) > a::after {
  content:" ▸";
}

/* ===== Responsif untuk HP ===== */
.menu-toggle {
  display:none;
  font-size:22px;
  color:#fff;
  padding:14px 20px;
  cursor:pointer;
}
@media (max-width:768px) {
  .navbar > ul {
    display:none;
    flex-direction:column;
    width:100%;
    background:#333;
  }
  .navbar > ul.show {
    display:flex;
  }
  .navbar > ul > li {
    border-top:1px solid #444;
  }
  .navbar ul ul {
    position:static;
    transform:none;
    opacity:1;
    visibility:visible;
    background:#444;
    border-radius:0;
    max-height:0;              /* animasi slide */
    overflow:hidden;
    transition:max-height 0.4s ease;
  }
  .navbar ul ul.show {
    max-height:500px;          /* cukup besar untuk muat semua isi */
  }
  .navbar ul ul ul {
    position:static;
    transform:none;
    max-height:0;
    overflow:hidden;
    transition:max-height 0.4s ease;
  }
  .navbar ul ul ul.show {
    max-height:500px;
  }
  /* Tampilkan tombol burger */
  .menu-toggle {
    display:block;
  }
}