@media (max-width: 768px) {
  .burger {
    display: block;
  }

.nav-left,
.nav-right {
display: none;
flex-direction: column;
width: 100%;
padding: 1em;
position: relative; /* GANTI dari absolute -> relative */
background: inherit;
animation: inherit;
background-size: inherit;
}


  nav.active .nav-left,
  nav.active .nav-right {
    display: flex;
    animation: fadeIn 0.3s ease;
  }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

  .nav-left a,
  .nav-right a {
    padding: 0.5em 0;
  }

  nav {
  flex-wrap: wrap; /* udah bener */
  overflow: hidden; /* biar animasi ga keluar-keluar */
  }

}