.bg-shadow {
    box-shadow: rgba(255, 187, 0, 0.164) 0 20px 200px 200px;
}

.carousel-container {
    perspective: 1000px;
    touch-action: pan-y pinch-zoom;
}

.carousel-track {
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.carousel-item {
    backface-visibility: hidden;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.carousel-item.active {
    opacity: 1;
    transform: scale(1) translateZ(0);
}

@media (max-width: 640px) {
    .carousel-item.prev {
        opacity: 0;
        transform: scale(0.8) translateX(-50%) translateZ(-100px);
    }

    .carousel-item.next {
        opacity: 0;
        transform: scale(0.8) translateX(50%) translateZ(-100px);
    }
}

@media (min-width: 641px) {
    .carousel-item.prev {
        opacity: 0.7;
        transform: scale(0.9) translateX(-100%) translateZ(-100px);
    }

    .carousel-item.next {
        opacity: 0.7;
        transform: scale(0.9) translateX(100%) translateZ(-100px);
    }
}

.carousel-item.hidden {
    opacity: 0;
    transform: scale(0.8) translateZ(-200px);
}

.nav-button {
    transition: all 0.3s;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

@media (hover: hover) {
    .nav-button:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: scale(1.1);
    }
}

.nav-button:active {
    transform: scale(0.95);
}

.progress-bar {
    transition: width 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.bg-sdhw {
    background: rgba(255, 128, 0, 0);
    background: radial-gradient(circle, rgba(255, 170, 0, 0.201) 0%, rgba(255, 170, 0, 0.201) 5%, rgba(255, 174, 0, 0) 60%);
}

.bg-glass-1 {
    /* From https://css.glass */
    background: rgba(39, 39, 39, 0.457);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10.5px);
    -webkit-backdrop-filter: blur(10.5px);
    border: 1px solid rgba(29, 25, 20, 0.49);
}

.bg-glass-1:hover {
    /* From https://css.glass */
    background: rgba(39, 39, 39, 0.509);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.449);
    backdrop-filter: blur(10.5px);
    -webkit-backdrop-filter: blur(10.5px);
    border: 1px solid rgba(193, 158, 20, 0.749);
}
/* 
.box-shadow-c {
    box-shadow: rgb(93, 90, 83) 3px 3px 6px 0px inset, rgba(48, 48, 48, 0.5) -3px -3px 6px 1px inset;
} */

.wave-divider {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.wave-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 60px;
}

@media (min-width: 768px) {
    .wave-divider svg {
        height: 150px;
    }
}

.fade-in {
    opacity: 0;
    transform: translateY(15px); /* Mulai dari bawah */
    transition: opacity 0.5s ease-in, transform 1s ease-in; /* Animasi opacity & posisi */
}

.fade-in.show {
    opacity: 1;
    transform: translateY(0px); /* Kembali ke posisi normal */
}

.card {
    border-radius: 30px;
    box-shadow: inset 15px 15px 30px #000000, inset
               -15px -15px 30px #000000;

  }

/* From Uiverse.io by MuhammadHasann */ 
.button {
    --yellow-700: rgba(235, 177, 43, 0);
    --border_radius: 15px;
    --transtion: 0.3s ease-in-out;
    --offset: 2px;
  
    cursor: pointer;
    position: relative;
  
    display: flex;
    align-items: center;
    gap: 0.5rem;
  
    transform-origin: center;
  
    padding: 1rem 2rem;
    background-color: transparent;
  
    border: none;
    border-radius: var(--border_radius);
    transform: scale(calc(1 + (var(--active, 0) * 0.1)));
  
    transition: transform var(--transtion);
  }
  
  .button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  
    width: 100%;
    height: 100%;
    background-color: var(--black-700);
  
    border-radius: var(--border_radius);
    box-shadow: inset 0 0.5px hsl(0, 0%, 100%), inset 0 -1px 2px 0 hsl(0, 0%, 0%),
      0px 4px 10px -4px hsla(0 0% 0% / calc(1 - var(--active, 0))),
      0 0 0 calc(var(--active, 0) * 0.01rem) hsla(53, 100%, 69%, 0.445);
  
    transition: all var(--transtion);
    z-index: 0;
  }
  
  .button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  
    width: 100%;
    height: 100%;
    background-color: hsla(0, 0%, 6%, 0.859);
    
    background-position: top;
  
    opacity: var(--active, 0);
    border-radius: var(--border_radius);
    transition: opacity var(--transtion);
    z-index: 2;
  }
  
  .button:is(:hover, :focus-visible) {
    --active: 1;
  }
  .button:active {
    transform: scale(1);
  }
  
  .button .sparkle {
    position: relative;
    z-index: 10;
  
    width: 1.75rem;
  }
  
  .button .sparkle .path {
    fill: currentColor;
    stroke: currentColor;
  
    transform-origin: center;
  
    color: hsl(0, 0%, 100%);
  }
  
  .button:is(:hover, :focus) .sparkle .path {
    animation: path 1.5s linear 0.5s infinite;
  }
  
  .button .sparkle .path:nth-child(1) {
    --scale_path_1: 1.2;
  }
  .button .sparkle .path:nth-child(2) {
    --scale_path_2: 1.2;
  }
  .button .sparkle .path:nth-child(3) {
    --scale_path_3: 1.2;
  }
  
  @keyframes path {
    0%,
    34%,
    71%,
    100% {
      transform: scale(1);
    }
    17% {
      transform: scale(var(--scale_path_1, 1));
    }
    49% {
      transform: scale(var(--scale_path_2, 1));
    }
    83% {
      transform: scale(var(--scale_path_3, 1));
    }
  }
  
  .button .text_button {
    position: relative;
    z-index: 10;
  
    background-image: linear-gradient(
      90deg,
      rgb(255, 255, 255) 100%,
      hsla(0 0% 100% / var(--active, 0)) 120%
    );
    background-clip: text;
  
    font-size: 1rem;
    color: transparent;
  }