/*--------------------------------------------------------------
# Custom CSS VAl 10 Jun 2025
--------------------------------------------------------------*/
/* Flip Card Core */
.flip-card {
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s ease-in-out;
}

/* Animasi Auto Flip */
@keyframes flipAuto {
  0%, 49.999% {
    transform: rotateY(0deg);
  }
  50%, 100% {
    transform: rotateY(180deg);
  }
}

.auto-flip {
  animation: flipAuto 6s infinite ease-in-out;
}

/* Flip manual saat hover */
.group:hover .flip-card-inner {
  animation: none !important;
  transform: rotateY(180deg);
}

/* Front & Back sides */
.flip-card-front,
.flip-card-back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
}

.flip-card-back {
  transform: rotateY(180deg);
}


/* Swiper */
[x-cloak] {
    display: none !important;
}

.jdb {
    font-size: 17px !important;
}

.jdn {
    font-size: 15px !important;
}

swiper-container {
    position: relative;
    width: 100%;
    margin: auto;
}

.swiper-button-prev,
.swiper-button-next {
    color: white;
    background-color: rgba(79, 78, 78, 0.001);
    padding: 5px;
    border-radius: 50%;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 10px;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.swiper-button-prev {
    left: -10px;
}

.swiper-button-next {
    right: -10px;
}

/* Tombol filter aktif */
.filter-btn.active {
    background-color: #0f766e; /* Tailwind teal-700 */
    color: white;
}


/* Swiper Blog */
.mySwiper {
    overflow: hidden;
}

.swiper-slide {
    height: auto; /* agar tingginya fleksibel */
}


/* Shake Animation */
@keyframes shake {
    10%, 90% {
        transform: translateX(-1px);
    }
    20%, 80% {
        transform: translateX(2px);
    }
    30%, 50%, 70% {
        transform: translateX(-4px);
    }
    40%, 60% {
        transform: translateX(4px);
    }
}

.shake-on-load {
    animation: shake 1.2s ease-in-out;
}

/* ================ END CUSTOM ================== */