/* Gambar hero samikandha */
@keyframes subtle-up-down {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Goyang kiri kanan pada hero */
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-50px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(50px); }
  to { opacity: 1; transform: translateX(0); }
}
.animate-fadeInLeft {
  animation: fadeInLeft 1s ease-out forwards;
}
.animate-fadeInRight {
  animation: fadeInRight 1s ease-out forwards;
}

/* Tombol di hero */
@keyframes moveInBottom {
  0% {
    opacity: 0;
    transform: translateY(3rem);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
  }
}
.btn-animated {
  animation: moveInBottom 0.5s ease-out 0.75s backwards;
}

/* Animasi tulisan kiri kanan atas dalam navbar */
@keyframes bounceColor {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}
.animate-bounceColor {
  animation: bounceColor 0.75s ease-in-out infinite;
}
.animate-sequence span,
.animate-sequence-right span {
  opacity: 0;
  animation: showBounce 4.5s linear infinite;
  position: absolute;
  white-space: nowrap;
  left: 50%;
}
.animate-sequence span:nth-child(1),
.animate-sequence-right span:nth-child(3) { animation-delay: 0s; }
.animate-sequence span:nth-child(2),
.animate-sequence-right span:nth-child(1) { animation-delay: 1.5s; }
.animate-sequence span:nth-child(3),
.animate-sequence-right span:nth-child(2) { animation-delay: 3s; }

        .animate-sequence span { opacity: 0; animation: showBounce 4.5s linear infinite; position: absolute; white-space: nowrap; left: 50%; }
        .animate-sequence span:nth-child(1) { animation-delay: 0s; } 
        .animate-sequence span:nth-child(2) { animation-delay: 1.5s; } 
        .animate-sequence span:nth-child(3) { animation-delay: 3s; } 
        .animate-sequence-right span:nth-child(1) { animation-delay: 1.5s;   } 
        .animate-sequence-right span:nth-child(2) { animation-delay: 3s;   } 
        .animate-sequence-right span:nth-child(3) { animation-delay: 0s; }


@keyframes showBounce {
  0% { opacity: 0; transform: translateX(-50%) scale(1); }
  10% { opacity: 1; transform: translateX(-50%) scale(1.2); }
  20% { transform: translateX(-50%) scale(0.95); }
  30%, 100% { opacity: 0; transform: translateX(-50%) scale(1); }
}

/* Typing effect cursor */
.typing-cursor {
  display: inline-block;
  width: 8px;
  height: 1.1em;
  background-color: maroon;
  animation: blink 0.7s infinite;
  margin-left: 4px;
  vertical-align: baseline;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Konstelasi animasi */
#constellation-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background-image: linear-gradient(to bottom, #e8fcef 0%, #26b497 100%);
  overflow: hidden;
}
.constellation-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

        .card {
            -webkit-perspective: 150rem;
            perspective: 150rem;
            -moz-perspective: 150rem;
            position: relative;
          
        }

        .card__side {
            -webkit-transition: all .8s ease;
            transition: all .8s ease;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%; /* Sides must fill the .card container */
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            border-radius: 0.75rem; /* Tailwind's rounded-xl */
            overflow: hidden; /* To ensure content stays within rounded corners */
        }

        .card__side--front {
            /* Styling for front (bg, shadow, padding) applied directly via Tailwind */
        }

        .card__side--back {
            -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white; /* Default text color for back sides */
        }

        .card__side--back-1 { background-image: linear-gradient(to right bottom, #ffb900, #ff7730); } /* Orange */
        .card__side--back-2 { background-image: linear-gradient(to right bottom, #7ed56f, #28b485); } /* Green */
        .card__side--back-3 { background-image: linear-gradient(to right bottom, #2998ff, #5643fa); } /* Blue */

        .card:hover .card__side--front {
            -webkit-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
        }

        .card:hover .card__side--back {
            -webkit-transform: rotateY(0);
            transform: rotateY(0);
        }

        .card__cta { text-align: center; padding: 1.5rem; } /* Tailwind p-6 equivalent for padding on back content */
        .card__price-box { margin-bottom: 1.5rem; } /* Tailwind mb-6 */
        .card__price-only { font-size: 0.875rem; text-transform: uppercase; } /* text-sm */
        .card__price-value { font-size: 2rem; font-weight: 300; } /* text-3xl font-light */

        .btn, .btn:link, .btn:visited { text-transform: uppercase; text-decoration: none; padding: 0.75rem 2rem; display: inline-block; border-radius: 9999px; transition: all .2s; position: relative; font-size: 1rem; border: none; cursor: pointer; }
        .btn:hover { transform: translateY(-3px); box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15); }
        .btn:hover::after { transform: scaleX(1.4) scaleY(1.6); opacity: 0; }
        .btn:active, .btn:focus { outline: none; transform: translateY(-1px); box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.15); }
        .btn--white { background-color: #fff; color: #555; } /* Adjusted text color for better contrast */
        .btn--white::after { background-color: #fff; }
        .btn::after { content: ""; display: inline-block; height: 100%; width: 100%; border-radius: 9999px; position: absolute; top: 0; left: 0; z-index: -1; transition: all .4s; }

        /* Responsive: Disable flip on smaller screens / non-hover devices */
        @media only screen and (max-width: 768px), only screen and (hover: none) {
            .card { perspective: none; min-height: 0 !important; /* Allow natural height */ }
            .card__side { position: relative; height: auto; transition: none; backface-visibility: visible; transform: rotateY(0) !important; box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.1); }
            .card__side--front { /* Ensure padding is consistent */ padding: 1.5rem; }
            .card__side--back { margin-top: 0; border-top: 1px solid #eee; padding: 1.5rem; /* Display back content below front */ }
            .card:hover .card__side--front, .card:hover .card__side--back { transform: rotateY(0); }
        }



.whatsapp-icon {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 40px;
  right: 40px;
  z-index: 1000;
  transition: transform 0.3s ease-in-out;
}

.whatsapp-icon:hover {
  transform: scale(1.1);
}

.whatsapp-icon svg {
  width: 100%;
  height: 100%;
}



.letsconnect {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 40px;
  left: 40px;
  z-index: 1000;
  transition: transform 0.3s ease-in-out;
}

.letsconnect:hover {
  transform: scale(1.1);
}

.letsconnect svg {
  width: 100%;
  height: 100%;
}