/* --- VARIABLES & PALETTE --- */
:root {
    --col-1: #0d1321; /* Rich Black - Latar Belakang */
    --col-2: #1d2d44; /* Oxford Blue */
    --col-3: #3e5c76; /* Payne's Gray - Tombol & Aksen */
    --col-4: #748cab; /* Shadow Blue - Teks Sekunder */
    --col-5: #f0ebd8; /* Alabaster - Teks Utama */
}

/* --- RESET --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* --- UTILITY CLASSES --- */
.font-sans { font-family: 'Inter', sans-serif; }
.min-h-screen { min-height: 100vh; }
.min-h-12 { min-height: 3rem; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.max-w-lg { max-width: 32rem; }
.w-96 { width: 24rem; }
.h-96 { height: 24rem; }

/* Layout & Flexbox */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.inline-block { display: inline-block; }
.relative { position: relative; }
.absolute { position: absolute; }
.top-0 { top: 0; }
.left-0 { left: 0; }
.overflow-hidden { overflow: hidden; }

/* Spacing */
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }

/* Typography */
.text-center { text-align: center; }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-4xl { font-size: 2.25rem; }
.font-medium { font-weight: 500; }
.font-bold { font-weight: 700; }
.leading-relaxed { line-height: 1.625; }

/* Colors */
.bg-col-1 { background-color: var(--col-1); }
.bg-col-3 { background-color: var(--col-3); }
.text-col-4 { color: var(--col-4); }
.text-col-5 { color: var(--col-5); }

/* Borders & Radius */
.rounded-full { border-radius: 9999px; }
.rounded-xl { border-radius: 0.75rem; }
.border { border-width: 1px; border-style: solid; }
.border-col-3 { border-color: var(--col-3); }

/* Effects & Transitions */
.shadow-glow { box-shadow: 0 4px 15px rgba(62, 92, 118, 0.5); }
.blur-3xl { filter: blur(64px); }
.opacity-30 { opacity: 0.3; }
.-z-10 { z-index: -10; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.pointer-events-none { pointer-events: none; }
.transition-all { transition: all 0.3s ease; }

/* Hover States */
.hover-bg-col-4:hover { background-color: var(--col-4); cursor: pointer; }
.hover-translate-y:hover { transform: translateY(-3px); }

/* Custom JS Animation Classes */
.transform-hidden {
    opacity: 0;
    transform: translateY(30px);
}
.transform-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1s ease-out, transform 1s ease-out;
}