body {
    font-family: 'Inter', sans-serif;
    background-color: #0F172A;
    /* Latar belakang fallback */
    /* Latar belakang gradien + noise. */
    background-image: linear-gradient(145deg, #0B1120 0%, #1E293B 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    background-blend-mode: overlay;
    opacity: 1;
    color: #E2E8F0;
}

/* Keyframes untuk gradien animasi */
@keyframes animated-gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* CSS KARTU LAYANAN "GLASSMORPHISM / BENTO" */

/* Pembungkus luar untuk border gradien */
.card-border-wrapper {
    @apply rounded-xl p-px transition-all duration-300;
    /* Gradien awal untuk border (dibuat redup) */
    background-image: linear-gradient(to right, #1e293b, #334155, #1e293b);
}

/* Konten kartu di dalam */
.glass-card {
    /* EFEK KACA: 5% Putih Transparan + Backdrop Blur */
    @apply bg-white/5 backdrop-blur-lg rounded-[11px] h-full flex flex-col;
    /* h-full membuat semua kartu sama tinggi */
}

/* Efek "Keren" (Glow & Lift) saat di-hover */
.card-border-wrapper:hover {
    @apply transform -translate-y-1;
    /* Gradien border menyala saat di-hover */
    background-image: linear-gradient(to right, #a5b4fc, #c084fc, #a5b4fc);
    /* Cahaya (glow) profesional */
    box-shadow: 0 0 30px rgba(124, 58, 237, 0.4);
    /* purple-600 glow */
}

/* Tata Letak Rapi di dalam kartu */
.card-header {
    @apply p-6;
}

.card-icon-wrapper {
    @apply w-12 h-12 p-3 rounded-lg shadow-lg mb-5 inline-flex items-center justify-center;
}

.card-body {
    @apply p-6 pt-0 flex flex-col flex-grow;
}

.card-features {
    @apply space-y-3 mb-8 flex-grow;
}

.card-feature-item {
    @apply flex items-center text-gray-300;
}

.card-feature-icon {
    @apply w-5 h-5 mr-3 shrink-0;
}

.card-footer {
    @apply p-6 pt-0 mt-auto;
}

.card-button {
    @apply w-full text-center block px-5 py-3 rounded-lg font-semibold transition-all duration-300 ease-in-out;
    @apply bg-white/10 text-gray-200;
}

.card-button:hover {
    @apply bg-white/20 text-white;
}

/* CSS untuk Navigasi */
#mobile-menu {
    transition: transform 0.3s ease-in-out;
    transform: translateX(100%);
}

#mobile-menu.open {
    transform: translateX(0);
}

#menu-overlay {
    transition: opacity 0.3s ease-in-out;
}

.btn-primary {
    @apply inline-flex items-center justify-center px-6 py-3 font-semibold text-white bg-indigo-600 rounded-lg shadow-lg shadow-indigo-500/30 transition-all duration-300 ease-in-out;
}

.btn-primary:hover {
    @apply bg-indigo-500 scale-105 transform;
}