/* ==========================================================================
   0. VARIABLES & DESIGN SYSTEM (:root)
   ========================================================================== */
:root {
    /* Color Palette */
    --bg-dark: #0f010f;          /* Warna dasar gelap bawaan */
    --bg-light: #ffffff;         /* Latar belakang putih (untuk section client, dll) */
    --text-primary: #e2e8f0;     /* Warna teks global terang */
    --text-dark: #111111;        /* Warna teks gelap kontras */
    --text-muted: #999999;       /* Warna teks abu-abu sekunder */
    --accent-yellow: #F8DA04;    /* Warna kuning ikonik penunjuk interaksi/CTA */
    
    /* Typography System */
    --font-primary: 'Inter', sans-serif;
    --font-secondary: 'Plus Jakarta Sans', sans-serif;
    --font-display: 'Anton', sans-serif;

    /* --- TIMING INTERVAL ANIMASI AUTOMATIC --- */
    --anim-interval: 0.2s;       /* Jeda waktu antar urutan elemen */
    --gd-orange: linear-gradient(135deg, #f09226 0%, #d86c6b 50%, #b84393 100%);

    /* 2. Gradien Jingga - Kuning - Hijau (image_a14939.jpg) */
    --gd-yellow-green: linear-gradient(135deg, #ef9125 0%, #e8dd1a 45%, #76be43 100%);

    /* 3. Gradien Ungu Gelap - Magenta Semburat Pink (image_ae7c21.png) */
    --gd-purple-pink: linear-gradient(135deg, #3d4a94 0%, #683b87 50%, #b8418c 100%);

    /* 4. Gradien Kuning Cerah ke Jingga Soft Vertikal (image_ae7c3f.png) */
    --gd-bright-yellow: linear-gradient(180deg, #f5d100 0%, #f1a403 60%, #e97a10 100%);

    /* 5. PEMBARUAN: Gradien Deep Blue ke Dark Purple-Magenta (image_ae8300.png) */
    --gd-dark-neon: linear-gradient(135deg, #111a4e 0%, #301740 55%, #59163e 100%);
}

/* 1. RESET GLOBAL & SCROLLING */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

/* 2. BASE BODY SYSTEM */
body {
    font-family: var(--font-primary);
    background-color: var(--bg-dark); 
    color: var(--text-primary);       
    overflow-x: hidden;
    line-height: 1.6;
}

/* 3. MAIN WRAPPER LAYOUT */
main {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* 4. UTILITY UTK TIAP SECTION BLOCK */
.slide-section {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
}

/* 5. MATERIAL ICONS GLOBAL UTILITY */
.material-icons {
    font-size: 24px;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   UTILITY ANIMATION ENGINE (MODULAR & CALCULATED DELAY SYSTEM)
   ========================================================================== */

/* Kunci semua elemen yang memiliki atribut anim agar PAUSED secara default */
.slide-section *[anim] {
    animation-play-state: paused;
    animation-fill-mode: both; /* Memastikan state 0% tertahan sebelum berjalan */
    
    /* --- FILTER KALKULASI DELAY OTOMATIS VIA CSS CALC --- */
    animation-delay: calc(var(--anim-interval) * attr(anim-order integer, 0));
}

/* Jalankan semua animasi di dalam section ketika section tersebut aktif */
.slide-section[data-active='true'] *[anim] {
    animation-play-state: running;
}

/* Fallback kalkulasi untuk browser yang belum mendukung pembacaan tipe data integer attr() */
@supports not (animation-delay: calc(1s * attr(test integer))) {
    .slide-section *[anim-order="0"] { animation-delay: calc(var(--anim-interval) * 0); }
    .slide-section *[anim-order="1"] { animation-delay: calc(var(--anim-interval) * 1); }
    .slide-section *[anim-order="2"] { animation-delay: calc(var(--anim-interval) * 2); }
    .slide-section *[anim-order="3"] { animation-delay: calc(var(--anim-interval) * 3); }
    .slide-section *[anim-order="4"] { animation-delay: calc(var(--anim-interval) * 4); }
    .slide-section *[anim-order="5"] { animation-delay: calc(var(--anim-interval) * 5); }
    .slide-section *[anim-order="6"] { animation-delay: calc(var(--anim-interval) * 6); }
    .slide-section *[anim-order="7"] { animation-delay: calc(var(--anim-interval) * 7); }
    .slide-section *[anim-order="8"] { animation-delay: calc(var(--anim-interval) * 8); }
}

/* ==========================================================================
   DAFTAR UTILITY ANIMASI GLOBAL
   ========================================================================== */

/* --- A. FADE IN UP (anim="fadeup") --- */
.slide-section *[anim="fadeup"] {
    animation-name: animFadeUp;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes animFadeUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
}

/* --- B. FADE IN DOWN / FADE BOTTOM (anim="fadebottom") --- */
.slide-section *[anim="fadebottom"] {
    animation-name: animFadeBottom;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes animFadeBottom {
    0% {
        opacity: 0;
        transform: translateY(-40px);
    }
}

/* --- C. FADE IN LEFT / LEFT IN (anim="leftin") --- */
.slide-section *[anim="leftin"] {
    animation-name: animLeftIn;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes animLeftIn {
    0% {
        opacity: 0;
        transform: translateX(-40px);
    }
}

/* --- D. FADE IN RIGHT / RIGHT IN (anim="rightin") --- */
.slide-section *[anim="rightin"] {
    animation-name: animRightIn;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes animRightIn {
    0% {
        opacity: 0;
        transform: translateX(40px);
    }
}

/* --- E. MURNI FADE IN TANPA GERAK (anim="fadein") --- */
.slide-section *[anim="fadein"] {
    animation-name: animFadeIn;
    animation-duration: 1.2s;
    animation-timing-function: ease;
}
@keyframes animFadeIn {
    0% {
        opacity: 0;
    }
}