html {
    background-color: #0d1117;
}
body {
    font-family: 'Inter', sans-serif;
    color: #0d1117;
}
.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.interactive-card:hover .glass-card, .interactive-card-solo:hover {
    transform: scale(1.03);
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.1);
}

.text-gradient-red {
    background: linear-gradient(90deg, #f87171, #ef4444);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#background-wrapper {
    position: relative;
    isolation: isolate;
    overflow-x: hidden;
}

.blob {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.4) 0%, rgba(239, 68, 68, 0) 70%);
    filter: blur(100px);
    z-index: -2;
    animation: move-blob 30s infinite alternate;
}
.blob-1 { width: 400px; height: 400px; top: -150px; left: -150px; animation-duration: 40s; }
.blob-2 { width: 500px; height: 500px; bottom: -200px; right: -200px; animation-duration: 35s; animation-delay: -10s; }
.blob-3 { width: 300px; height: 300px; top: 50%; left: 50%; animation-duration: 25s; animation-delay: -5s; }

@keyframes move-blob {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(100px, -50px) scale(1.2); }
    100% { transform: translate(-100px, 50px) scale(0.8); }
}

#main-content { position: relative; z-index: 2; }
.content-section { background-color: #0d1117; }

@media (min-width: 768px) {
    #home {
        height: 100vh;
        position: sticky;
        top: 0;
        z-index: 1;
    }
    #main-content {
        background-color: transparent;
    }
}

@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.animate-slide-up { animation: slideUp 0.8s ease-out forwards; opacity: 0; }
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-400 { animation-delay: 0.4s; }


.scroll-animate { opacity: 0; transition: opacity 1s ease-out, transform 1s ease-out; }
.scroll-animate.slide-in-from-left { transform: translateX(-50px); }
.scroll-animate.slide-in-from-right { transform: translateX(50px); }
.scroll-animate.is-visible { opacity: 1; transform: translateX(0); }

/* --- KODE INI SUDAH DIPERBARUI & DIRAPIKAN --- */
.scroll-animate-stagger { 
    opacity: 0; 
    transform: translateY(30px); /* Efek 'naik' sedikit diperjelas */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; 
}
.scroll-animate-stagger.is-visible { 
    opacity: 1; 
    transform: translateY(0); 
}
/* --- KELAS .slide-in-from-bottom SUDAH DIHAPUS KARENA TIDAK DIPERLUKAN --- */


.title-glow { transition: text-shadow 0.3s ease-in-out; }
.title-glow:hover { text-shadow: 0 0 25px rgba(239, 68, 68, 0.5); }

#particle-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; opacity: 0.75; }
@keyframes move-particles { from { transform: translateY(0); } to { transform: translateY(-100vh); } }
.particle { position: absolute; width: 2px; height: 2px; background: #fff; border-radius: 50%; animation: move-particles 50s linear infinite; }

.modal { transition: opacity 0.3s ease; }
.modal-content { transition: transform 0.3s ease; }

.thank-you-card { animation: slideUp 0.8s ease-out forwards; opacity: 0; }
.checkmark__circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 2; stroke-miterlimit: 10; stroke: #7ac142; fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; }
.checkmark { width: 56px; height: 56px; border-radius: 50%; display: block; stroke-width: 2; stroke: #fff; stroke-miterlimit: 10; margin: 10% auto; box-shadow: inset 0px 0px 0px #7ac142; animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; }
.checkmark__check { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; }
@keyframes stroke { 100% { stroke-dashoffset: 0; } }
@keyframes scale { 0%, 100% { transform: none; } 50% { transform: scale3d(1.1, 1.1, 1); } }
@keyframes fill { 100% { box-shadow: inset 0px 0px 0px 30px #7ac142; } }