.nav-link {
  position: relative;
  font-weight: 500;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: linear-gradient(to right,#D4B46A,#B8913E);
  transition: width .3s;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.feature-card {
  background: linear-gradient(135deg,#D4B46A,#B8913E);
  color: white;
  padding: 1.75rem;
  border-radius: 1rem;
  font-weight: 600;
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
  transition: .4s;
}

.feature-card:hover {
  transform: translateY(-6px) scale(1.04);
}

.feature-card:hover .icon {
  transform: translateY(-6px) scale(1.04);
  text-shadow:
    0 2px 0 #6d28d9,
    0 4px 0 #5b21b6,
    0 6px 0 #4c1d95,
    0 10px 22px rgba(0,0,0,.55),

    0 0 12px rgba(124,58,237,.9),
    0 0 22px rgba(212,180,106,.75);
}

.icon {
  font-size: 2.3rem;
  margin-bottom: .75rem;
  color: #7c3aed;
  /* 3D depth */
  text-shadow:
    0 1px 0 #6d28d9,
    0 2px 0 #5b21b6,
    0 3px 0 #4c1d95,
    0 6px 12px rgba(0,0,0,.45),

  /* glow ungu + emas */
    0 0 8px rgba(124,58,237,.7),
    0 0 14px rgba(212,180,106,.6);

  transition: transform .35s ease, text-shadow .35s ease;
}

[data-animate] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  [data-animate].show {
    opacity: 1;
    transform: translateY(0);
  }

  /* animasi card produk */
.product-enter {
  opacity: 0;
  transform: translateY(24px);
}

.product-enter.show {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}