body {
      font-family: 'Poppins', sans-serif;
    }

    /* Tombol sentuhan animasi */
    .btn-glow {
      transition: all 0.3s ease;
    }

    .btn-glow:hover {
      transform: scale(1.05);
      box-shadow: 0 0 15px rgba(255, 102, 0, 0.6);
    }

    .timeline-dot:hover {
      transform: scale(1.1);
      transition: 0.3s;
    }

    /* Modal animasi muncul */
    .modal-animate {
      animation: popIn 0.4s ease-out;
    }

    @keyframes popIn {
      0% {
        transform: scale(0.9);
        opacity: 0;
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }


/* ==========================================================================
SCROL KANAN FITUR
========================================================================== */
html {
  scrollbar-width: thin;
  scrollbar-color: #ff8c00 #1A1A1A;
}

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: #1A1A1A;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: #ff8c00;
  border-radius: 10px;
  border: 1px solid #1A1A1A;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #FFA500;
}

::-webkit-scrollbar-thumb:active {
  background-color: #E07B00;
}

::-webkit-scrollbar-button {
  display: none;
}

.card-parallax {
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.card-layer {
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}

/* ==========================================================================
ANIMASI
========================================================================== */
  #particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    filter: blur(2px); /* Membuat partikelnya sedikit blur */
  }

  /* Membuat konten punya efek blur latar belakang (blur di belakang konten) */
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(8px); /* Blur background */
    z-index: 0;
  }

  body > *:not(canvas):not(style):not(script) {
    position: relative;
    z-index: 1;
  }