/* =========================================
   1. GLOBAL VARIABLES & BASE SETUP
   ========================================= */
:root {
    --font-sans: 'Inter', sans-serif;
    --color-primary: #2563EB;
}

body {
    font-family: var(--font-sans);
    /* PENTING: Paksa scrollbar selalu ada biar layar gak 'goyang' pas pindah halaman pendek */
    overflow-y: scroll; 
}

html {
    scroll-behavior: smooth;
}

/* =========================================
   2. UTILITY CLASSES (Scrollbar & Shadow)
   ========================================= */

/* Smooth Scroll Reveal (Efek Muncul dari Bawah) */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Apple Style Shadow (Bayangan Halus Premium) */
.apple-shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

/* Custom Scrollbar (Biar gak kaku kayak bawaan Windows) */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Warna Scrollbar saat Dark Mode */
html.dark ::-webkit-scrollbar-track {
    background: #0f172a;
}
html.dark ::-webkit-scrollbar-thumb {
    background: #334155;
}

/* =========================================
   3. TEAM SECTION STYLES
   ========================================= */
.member-img {
    transform-origin: bottom center;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Efek Hover pada Foto Tim (Zoom & Terang) */
.team-member:hover .member-img {
    transform: scale(1.05) translateY(-8px);
    filter: grayscale(0) brightness(110%);
}

/* =========================================
   4. ANIMATIONS (Typewriter Gradient)
   ========================================= */

/* Teks Gradasi Bergerak (Vibe Coding Style) */
#typewriter-text {
    background: linear-gradient(to right, #2563eb, #9333ea, #ec4899, #2563eb);
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientFlow 4s linear infinite;
}

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

/* =========================================
   5. DARK MODE ENGINE (NAVY BLUE EDITION)
   ========================================= */

/* A. Background Halaman (Slate 900 - Gelap Nyaman) */
html.dark body {
    background-color: #0f172a !important; 
    color: #f8fafc !important;
}

/* B. Header & Footer (NAVY BLUE - Biar Beda & Elegan) */
/* Ini kuncinya biar gak mati warnanya */
html.dark header,
html.dark footer,
html.dark #mobile-menu {
    background-color: #172554 !important; /* Blue 950 (Navy Deep) */
    border-color: #1e3a8a !important;     /* Border Biru Tua */
    backdrop-filter: blur(10px);
}

/* C. Elemen Putih/Kartu (Slate 800 - Biar Kontras) */
html.dark .bg-white, 
html.dark .bg-gray-50, 
html.dark section.bg-white {
    background-color: #1e293b !important; /* Slate 800 */
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

/* D. Judul & Teks Penting (Putih Bersih) */
html.dark h1, 
html.dark h2, 
html.dark h3, 
html.dark .text-slate-900 {
    color: #ffffff !important;
}

/* E. Paragraf (Abu Terang) */
html.dark p, 
html.dark .text-gray-600, 
html.dark .text-gray-500 {
    color: #cbd5e1 !important;
}

/* F. Input Form (Biar gak ilang) */
html.dark input, 
html.dark textarea, 
html.dark select {
    background-color: #0f172a !important;
    border-color: #475569 !important;
    color: #fff !important;
}

/* =========================================
   6. MAGIC CURSOR PRO (GHOST MODE & STYLE)
   ========================================= */

@media (pointer: fine) {

    /* A. Definisi Gambar Hantu (Transparan 1x1 px) */
    :root {
        --ghost-cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');
    }
    
    /* B. JURUS HILANGKAN KURSOR ASLI (GLOBAL) */
    /* Memaksa semua elemen (termasuk tombol aktif) pake kursor hantu */
    *, *::before, *::after,
    html, body,
    input, textarea, select, label,
    a, button,
    *:hover, *:active, *:focus {
        cursor: var(--ghost-cursor), none !important; 
    }

    /* C. Matikan Seleksi Teks (Biar gak muncul I-Beam) */
    body :not(input):not(textarea) {
        -webkit-user-select: none;
        user-select: none;
    }

    /* D. Pengecualian Input (Biar tetep bisa ngetik) */
    input, textarea {
        user-select: text !important;
        -webkit-user-select: text !important;
        /* Kursor mouse tetep ilang, tapi Caret (garis kedip) muncul */
    }
}

/* E. Style Wadah Kursor Custom (Panah SVG) */
#magic-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999; /* Layer Paling Atas */
    pointer-events: none; /* Tembus pandang */
    transform: translate(0, 0);
    transition: transform 0.05s ease-out; /* Gerak responsif */
    display: none;
}

/* F. Efek Miring saat Hover Tombol */
#magic-cursor.hover-active {
    transform: rotate(-15deg) scale(1.2);
}

/* G. Warna Kursor (Adaptif / Stealth) */
/* Mode Terang: Putih Transparan + List Biru */
#cursor-path {
    fill: rgba(255, 255, 255, 0.85); 
    stroke: #2563eb; 
    transition: fill 0.3s, stroke 0.3s;
}

/* Mode Gelap: Hitam Transparan + List Biru Muda */
html.dark #cursor-path {
    fill: rgba(15, 23, 42, 0.85); 
    stroke: #60a5fa; 
}

/* Saat Hover Tombol: Jadi Biru Solid */
#magic-cursor.hover-active #cursor-path {
    fill: #2563eb; 
    stroke: #2563eb;
    opacity: 0.9; 
}

/* H. Matikan Custom Cursor di HP (PENTING!) */
@media (hover: none) { 
    #magic-cursor { display: none !important; }
    html, body, * { cursor: auto !important; user-select: auto !important; } 
}