html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
}

#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.3s ease-out,
    opacity 0.3s ease-out;
  opacity: 0;
}

#mobile-menu.active {
  max-height: 400px;
  opacity: 1;
}

/* Gradient Utama yang Konsisten */
.bg-main-gradient {
  background: radial-gradient(
    circle at center,
    rgb(178, 220, 255) 0%,
    rgb(148, 203, 255) 40%,
    rgb(120, 180, 240) 100%
  );
}

.glass-card {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

@keyframes typing {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

.animate-typing {
  animation: typing 2s steps(20, end) infinite alternate;
}

@keyframes rise {
  0% {
    transform: translateY(100vh) scale(0);
    opacity: 0;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    transform: translateY(-20vh) scale(1.5);
    opacity: 0;
  }
}

.animate-rise {
  animation: rise 4s linear infinite;
}

.delay-700 {
  animation-delay: 0.7s;
}

.delay-1000 {
  animation-delay: 1s;
}

@keyframes soft-bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-25px);
  }
}

.animate-soft-bounce {
  animation: soft-bounce 4s ease-in-out infinite;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.animate-cursor {
  animation: blink 0.8s infinite;
}

@keyframes blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }

  33% {
    transform: translate(30px, -50px) scale(1.1);
  }

  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }

  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

.animate-blob {
  animation: blob 7s infinite alternate ease-in-out;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Tab Styling */
.active-tab {
  background: #2563eb;
  /* Blue 600 */
  color: white;
}

.inactive-tab {
  background: rgba(255, 255, 255, 0.4);
  color: #1e293b;
  /* Slate 800 */
  backdrop-filter: blur(10px);
}

.inactive-tab:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* Animasi Fade untuk Gallery Filter */
.gallery-item {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Kursor Kedip */
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.animate-blink {
  animation: blink 0.8s infinite;
}

/* Animasi Mengambang Halus */
@keyframes soft-float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-20px) rotate(1deg);
  }
}

.animate-soft-float {
  animation: soft-float 6s ease-in-out infinite;
}

/* Class pembantu untuk animasi */
.menu-open {
  max-height: 600px !important;
  /* Sesuaikan dengan perkiraan tinggi menu */
  opacity: 1 !important;
  border-top-width: 1px;
}

/* Animasi halus untuk icon rotasi */
#hamburger-button svg {
  transition: transform 0.3s ease-in-out;
}

.rotate-icon {
  transform: rotate(90deg);
}

/* gelembung */
.bubble {
  position: absolute;
  bottom: -120px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  animation: bubbleUp 18s linear infinite;
  box-shadow:
    inset 0 0 10px rgba(255, 255, 255, 0.15),
    0 0 20px rgba(59, 130, 246, 0.15);
  animation-duration: calc(12s + (random * 10s));
}

.bubble:nth-child(2n) {
  animation-duration: 20s;
}

.bubble:nth-child(3n) {
  animation-duration: 24s;
}

.bubble:nth-child(4n) {
  animation-duration: 16s;
}

.bubble::before {
  content: "";
  position: absolute;
  top: 20%;
  left: 25%;
  width: 30%;
  height: 30%;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 9999px;
  filter: blur(2px);
}

@keyframes bubbleUp {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  50% {
    transform: translateY(-50vh) translateX(20px) scale(1.05);
  }

  100% {
    transform: translateY(-120vh) translateX(-30px) scale(1.15);
    opacity: 0;
  }
}

.animation-delay-0 {
  animation-delay: 0s;
}

.animation-delay-1 {
  animation-delay: 2s;
}

.animation-delay-2 {
  animation-delay: 4s;
}

.animation-delay-3 {
  animation-delay: 6s;
}

.animation-delay-4 {
  animation-delay: 8s;
}

.animation-delay-5 {
  animation-delay: 10s;
}

/* testi */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#testimonialSlider {
  scroll-behavior: smooth;
}