/* Style tambahan (utama memakai Tailwind CSS) */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}
body {
  font-family: "Inter", system-ui, sans-serif;
  overflow-x: hidden;
}
.no-sb {
  scrollbar-width: none;
}
.no-sb::-webkit-scrollbar {
  display: none;
}
.ncard {
  flex: 0 0 calc((100% - 3rem) / 3);
  scroll-snap-align: start;
}
@media (max-width: 767px) {
  .ncard {
    flex-basis: 100%;
  }
}
.slide {
  will-change: opacity, transform;
}
.hdr-solid {
  /* tanpa backdrop-filter: properti itu membuat elemen fixed (menu mobile) di dalam header
     berubah acuan posisi saat header berganti class, menyebabkan lompatan saat menu menutup */
  background: rgba(1, 42, 43, 0.97);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

/* header: animasi masuk murni CSS (tidak bisa "macet" tersembunyi) */
#hdr {
  animation: hdrIn 0.7s ease-out both;
}
@keyframes hdrIn {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: none;
  }
}
/* hover underline menu: desktop saja */
@media (min-width: 1024px) {
  #menu .menu-link {
    position: relative;
  }
  #menu .menu-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 2px;
    width: 100%;
    background: #c8f400;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
  }
  #menu .menu-link:hover::after {
    transform: scaleX(1);
  }
}

/* members: di mobile/sentuh tombol sosmed disembunyikan, muncul saat kartu di-tap */
@media (max-width: 767px), (hover: none) {
  .mem {
    cursor: pointer;
  }
  .mem .soc {
    transform: translateY(100%) !important;
    opacity: 0 !important;
    pointer-events: none;
  }
  .mem.open .soc {
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto;
  }
}

/* menu mobile: state awal diatur di CSS biasa (bukan class Tailwind) supaya sudah
   tertutup sejak render pertama. Tailwind CDN baru siap setelah JS jalan, dan itu
   dulu memicu animasi "close" kedua setiap pindah halaman. */
@media (max-width: 1023px) {
  #menu {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: #012a2b;
    z-index: 60;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateX(100%);
    visibility: hidden;
    will-change: transform;
    transition:
      transform 0.5s cubic-bezier(0.77, 0, 0.18, 1),
      visibility 0s linear 0.5s;
  }
  #menu.is-open {
    transform: none;
    visibility: visible;
    transition:
      transform 0.5s cubic-bezier(0.77, 0, 0.18, 1),
      visibility 0s;
  }
}