.nav-link::after{
  content:'';
  display:block;
  height:2px;
  width:0;
  background:white;
  transition:.3s;
}
.nav-link:hover::after,
.nav-link.active::after{
  width:100%;
}

/* dari kiri */
.fade-left {
  animation: fadeLeft .8s ease forwards;
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}

/* dari kanan */
.fade-right {
  animation: fadeRight .8s ease forwards;
}
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

/* dari atas */
.fade-top {
  animation: fadeTop .8s ease forwards;
}
@keyframes fadeTop {
  from { opacity: 0; transform: translateY(-40px); }
  to { opacity: 1; transform: translateY(0); }
}

/* dari bawah */
.fade-bottom {
  animation: fadeBottom .8s ease forwards;
}
@keyframes fadeBottom {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Delay untuk animasi */
.fade-left.delay-1 { animation-delay: 0.2s; }
.fade-left.delay-2 { animation-delay: 0.4s; }
.fade-top.delay-1 { animation-delay: 0.6s; }
.fade-right.delay-1 { animation-delay: 0.8s; }

/* Animasi saat scroll */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.animate {
  opacity: 1;
  transform: translateY(0);
}