:root {
    --bg-dark: #0F172A; /* slate-900 */
    --bg-light: #F1F5F9; /* slate-100 */
    --primary: #38BDF8; /* sky-400 */
    --secondary: #818CF8; /* indigo-400 */
    --accent: #F471B5; /* pink-400 */
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-dark);
    color: #E2E8F0; /* slate-200 */
}

.gradient-text {
    background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.animated-gradient-bg {
    background: linear-gradient(-45deg, #020617, #1e293b, #1d4ed8, #4f46e5);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.glass-card {
     background: rgba(30, 41, 59, 0.5); /* slate-800 with 50% opacity */
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.1);
}

.tech-icon-wrapper {
    filter: grayscale(100%) opacity(60%);
}
.tech-icon-wrapper:hover {
    filter: grayscale(0%) opacity(100%);
    transform: scale(1.1) translateY(-4px);
    background-color: #1e293b; /* slate-800 */
}

/* Animasi Scroll */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Style untuk Typed.js Cursor */
.typed-cursor {
    color: var(--primary);
    animation: typedjsBlink 0.7s infinite;
}
@keyframes typedjsBlink {
    50% { opacity: 0.0; }
}

/* Style untuk Testimonial Carousel */
.testimonial-item {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

/* Mengatasi style bawaan Tailwind untuk section-title dan section-subtitle jika diperlukan */
.section-title {
    font-size: 2.25rem; /* 36px */
    line-height: 2.5rem; /* 40px */
    font-weight: 700;
    color: #fff;
}
@media (min-width: 640px) {
    .section-title {
        font-size: 3rem; /* 48px */
        line-height: 1;
    }
}

.section-subtitle {
    margin-top: 1rem;
    font-size: 1.125rem; /* 18px */
    line-height: 1.75rem; /* 28px */
    color: #94a3b8; /* slate-400 */
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}