/* Custom CSS */
        :root {
            --cursor-main: url('/img/cursors/sci-fi-cursor.png'), auto;
            --cursor-pointer: url('/img/cursors/sci-fi-pointer.png'), pointer;
            --header-height: 60px; /* 64px, tinggi header Anda */
            --header-top-offset: 0px; /* Jarak header dari atas viewport */
        }

        body {
            font-family: 'Roboto', sans-serif;
            background-color: #0A0F1A; 
            color: #E0E0E0;
            cursor: var(--cursor-main);
            padding-top: calc(var(--header-height) + var(--header-top-offset)); /* Padding atas memperhitungkan offset header */
        }
        a:hover, button:hover, .menu-item:hover, .project-card:hover, .certificate-card:hover, .social-icon:hover, .header-nav-link:hover {
            cursor: var(--cursor-pointer);
        }

        /* Scanlines Effect */
        body::after {
            content: ""; position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            width: 100%; height: 100%;
            background: repeating-linear-gradient(transparent, transparent 2px, rgba(34, 211, 238, 0.02) 3px, rgba(34, 211, 238, 0.02) 4px);
            animation: scanline-animation 25s linear infinite;
            pointer-events: none; 
            z-index: 1; opacity: 0.5;
        }
        @keyframes scanline-animation { 0% { background-position-y: 0; } 100% { background-position-y: 100px; } }
        
        /* Z-index layering */
        #mainHeaderNav { /* Header utama */
            position: fixed; /* Akan diatur jadi fixed oleh kelas Tailwind */
            z-index: 999; 
            top: var(--header-top-offset); /* Atur posisi top menggunakan variabel */
        }
        #home, main, footer {
            position: relative;
            z-index: 2; /* Konten di atas scanlines tapi di bawah header sticky dan modal */
        }
        #loadingScreen, #lightboxModal { z-index: 10000 !important; }
        #tsparticles-container { z-index: 0; } /* Partikel di paling belakang */


        .font-orbitron { font-family: 'Orbitron', sans-serif; }
        .text-neon-cyan { color: #67E8F9; text-shadow: 0 0 5px #67E8F9, 0 0 10px #67E8F9, 0 0 15px #22D3EE, 0 0 20px #06B6D4; }
        .text-neon-purple { color: #C084FC; text-shadow: 0 0 5px #C084FC, 0 0 10px #C084FC, 0 0 15px #A855F7, 0 0 20px #9333EA; }
        .border-neon-cyan { border-color: #22D3EE; box-shadow: 0 0 8px #22D3EE; }
        .border-neon-purple { border-color: #A855F7; box-shadow: 0 0 8px #A855F7; }
        .shadow-neon-cyan { box-shadow: 0 0 15px rgba(34, 211, 238, 0.8); }
        .shadow-neon-purple { box-shadow: 0 0 15px rgba(168, 85, 247, 0.7); }

        /* Styling untuk Navigasi GameMenu yang sudah ada */
        .menu-item {
            display: inline-block; padding: 0.75rem 1.5rem;
            background-color: rgba(23, 37, 84, 0.6); color: #67E8F9;
            border: 2px solid #22D3EE; font-family: 'Orbitron', sans-serif;
            text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700;
            transition: all 0.2s ease-in-out;
        }
        .menu-item:hover {
            background-color: #22D3EE; color: #0A0F1A;
            box-shadow: 0 0 15px #22D3EE, inset 0 0 10px #67E8F9;
            transform: translateY(-2px) scale(1.02);
        }
        
        /* Styling untuk Header Navigasi BARU */
        #mainHeaderNav { /* Sudah ada rule di atas untuk z-index dan top */
            background-color: rgba(10, 15, 26, 0.85); 
            backdrop-filter: blur(12px);
            box-shadow: 0 2px 15px rgba(0,0,0,0.4);
        }
        .header-nav-link {
            font-family: 'Orbitron', sans-serif;
            padding: 0.5rem 0.75rem; 
            margin: 0 0.25rem; 
            color: #94A3B8; 
            text-transform: uppercase;
            font-size: 0.875rem; 
            letter-spacing: 0.05em;
            transition: color 0.2s ease-out, text-shadow 0.2s ease-out, border-color 0.2s ease-out;
            border-bottom: 2px solid transparent;
        }
        .header-nav-link:hover {
            color: #67E8F9; 
            text-shadow: 0 0 8px #67E8F9;
        }
        .header-nav-link.active {
            color: #22D3EE; 
            font-weight: bold;
            border-bottom-color: #22D3EE;
            text-shadow: 0 0 10px #22D3EE;
        }


        .section-title {
            font-family: 'Orbitron', sans-serif; position: relative; padding-bottom: 10px;
            text-align: center; font-size: 2.25rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 2.5rem;
        }
        .section-title::after {
            content: ''; position: absolute; bottom: 0; left: 50%;
            transform: translateX(-50%); width: 100px; height: 3px;
            background-color: currentColor; box-shadow: 0 0 10px currentColor;
        }
        .skill-tag, .tool-tag {
            display: inline-block; padding: 0.5rem 1rem;
            background-color: rgba(45, 55, 72, 0.7); color: #A5B4FC;
            font-family: 'Orbitron', sans-serif; font-size: 0.875rem;
            border-radius: 0.125rem; border: 1px solid rgba(129, 140, 248, 0.5);
            transition: all 0.2s ease;
        }
        .skill-tag:hover, .tool-tag:hover {
            background-color: #A855F7; color: #0A0F1A;
            border-color: #C084FC; transform: scale(1.05);
            box-shadow: 0 0 10px #A855F7;
        }
        .project-card {
            background-color: rgba(30, 41, 59, 0.7); border-radius: 0.375rem;
            overflow: hidden; border: 1px solid rgba(51, 65, 85, 1);
            transition: all 0.3s ease-in-out; box-shadow: 0 4px 6px rgba(0,0,0,0.4);
            display: flex; flex-direction: column; 
        }
        .project-card .p-5 { flex-grow: 1; display: flex; flex-direction: column; }
        .project-card .mt-auto { margin-top: auto; }
        .project-card:hover {
            border-color: #A855F7; box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
            transform: translateY(-5px);
        }
        .project-image { width: 100%; height: 12rem; object-fit: cover; transition: transform 0.3s ease-in-out; }
        .project-card:hover .project-image { transform: scale(1.05); }
        .project-button {
            padding: 0.5rem 1rem; font-size: 0.875rem; border-radius: 0.125rem;
            font-weight: 600; font-family: 'Orbitron', sans-serif;
            transition: all 0.2s ease; text-transform: uppercase;
        }
        .project-button-primary { background-color: #22D3EE; color: #0A0F1A; }
        .project-button-primary:hover { background-color: #67E8F9; box-shadow: 0 0 10px #22D3EE; }
        .project-button-secondary { background-color: transparent; border: 1px solid #A855F7; color: #C084FC; }
        .project-button-secondary:hover { background-color: #A855F7; color: #0A0F1A; box-shadow: 0 0 10px #A855F7; }
        .certificate-card {
            background-color: rgba(30, 41, 59, 0.5); padding: 0.75rem;
            border-radius: 0.5rem; cursor: pointer; transition: all 0.3s ease;
            border: 1px solid transparent;
        }
        .certificate-card:hover {
            transform: scale(1.05); border-color: #22D3EE;
            box-shadow: 0 0 15px rgba(34, 211, 238, 0.5);
        }
        .terminal-input {
            width: 100%; background-color: rgba(15, 23, 42, 0.8); color: #67E8F9;
            padding: 0.75rem; border: 2px solid #A855F7;
            font-family: 'Share Tech Mono', monospace; font-size: 0.875rem;
            border-radius: 0px; caret-color: #F472B6; transition: border-color 0.2s ease;
        }
        .terminal-input:focus { border-color: #EC4899; outline: none; box-shadow: 0 0 10px #EC4899; }
        .terminal-button {
            width: 100%; padding: 0.75rem 1rem; background-color: #A855F7; color: #E0E0E0;
            font-family: 'Orbitron', sans-serif; text-transform: uppercase;
            letter-spacing: 0.05em; border: 2px solid #9333EA; transition: all 0.2s ease;
        }
        .terminal-button:hover { background-color: #C084FC; color: #0A0F1A; box-shadow: 0 0 15px #A855F7; }
        .social-icon svg { width: 2rem; height: 2rem; color: #C084FC; transition: all 0.2s ease; }
        .social-icon:hover svg { color: #67E8F9; transform: scale(1.1); }
        .social-tooltip {
            position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%);
            background-color: #1E293B; color: #E0E0E0; font-family: 'Orbitron', sans-serif;
            font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 0.25rem;
            opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease;
            white-space: nowrap; z-index: 10;
        }
        .group:hover .social-tooltip { opacity: 1; visibility: visible; }
        .terminal-input::placeholder { color: rgba(100, 116, 139, 0.7); }
        .blinking-cursor-effect {
            display: inline-block; width: 8px; height: 1.2em;
            background-color: #F472B6; animation: blink-caret 1s step-end infinite;
            margin-left: 2px;
        }
        @keyframes blink-caret { from, to { opacity: 1 } 50% { opacity: 0 } }
        
        .animate-on-scroll { opacity: 0; transition: opacity 0.7s ease-out, transform 0.7s ease-out; }
        .fade-in-up { transform: translateY(40px); }
        .fade-in-left { transform: translateX(-40px); }
        .fade-in-right { transform: translateX(40px); }
        .is-visible { opacity: 1; transform: translateY(0) translateX(0); }

        #loadingScreen {
            position: fixed; inset: 0; background-color: #0A0F1A; 
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            transition: opacity 0.7s ease-out, visibility 0.7s ease-out;
        }
        #loadingScreen.hidden { opacity: 0; visibility: hidden; }
        #loadingBarContainer {
            width: clamp(200px, 50%, 400px); margin-top: 1.5rem;
            background-color: #1E293B; height: 0.75rem;
            border: 1px solid #A855F7; border-radius: 0.125rem; overflow: hidden;
        }
        #loadingBar {
            background: linear-gradient(to right, #A855F7, #67E8F9);
            height: 100%; width: 0%; transition: width 0.2s ease-out;
        }

        section[id] {
            scroll-margin-top: calc(var(--header-height) + var(--header-top-offset));
        }
        #home { /* #home juga section[id], jadi scroll-margin-top di atas sudah berlaku */
             padding-top: 0; 
        }


        @media (prefers-reduced-motion: reduce) {
          .menu-item:hover, .skill-tag:hover, .tool-tag:hover,
          .project-card:hover, .project-card:hover .project-image,
          .certificate-card:hover, .social-icon:hover svg,
          #loadingScreen .animate-spin { animation: none !important; }
          .animate-on-scroll { opacity: 1 !important; transform: none !important; transition: none !important; }
          .text-neon-cyan, .text-neon-purple { text-shadow: 0 0 3px currentColor; }
          body::after { animation: none !important; }
        }

        /* Animasi untuk Avatar Utama */
.avatar-utama {
    /* Sedikit transisi untuk kehalusan jika ada interaksi lain */
    transition: all 0.3s ease;
    /* Menjalankan animasi yang kita buat di bawah */
    animation: breathing-glow 3s ease-in-out infinite;
}

/* Definisi animasi 'breathing-glow' */
@keyframes breathing-glow {
    0% {
        box-shadow: 0 0 10px rgba(103, 232, 249, 0.7), 0 0 20px rgba(103, 232, 249, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(34, 211, 238, 1), 0 0 40px rgba(34, 211, 238, 0.8);
    }
    100% {
        box-shadow: 0 0 10px rgba(103, 232, 249, 0.7), 0 0 20px rgba(103, 232, 249, 0.5);
    }
}