@import url('https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&family=Inter:wght@300;400;700&display=swap');
        
        body { 
            background-color: #050505; 
            color: #ffffff; 
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        .font-sync { font-family: 'Syncopate', sans-serif; }

        .neon-border {
            border: 1px solid rgba(255, 215, 0, 0.2);
            box-shadow: 0 0 15px rgba(255, 215, 0, 0.05);
            transition: 0.4s;
        }
        .neon-border:hover {
            border-color: #FFD700;
            box-shadow: 0 0 25px rgba(255, 215, 0, 0.2);
            transform: translateY(-5px);
        }

        .neon-button {
            background: #FFD700;
            color: #000;
            box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
            transition: 0.3s;
        }
        .neon-button:hover {
            box-shadow: 0 0 35px rgba(255, 215, 0, 0.5);
            transform: translateY(-2px);
        }

        .gradient-text {
            background: linear-gradient(to right, #FFD700, #FFA500);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .bg-glow {
            position: fixed;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
            z-index: -1;
            border-radius: 50%;
        }

        /* Portfolio & Filter */
        .portfolio-item { 
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease; 
        }
        #portfolio-gallery {
            transition: all 0.5s ease;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #050505; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #FFD700; }

        /* Mobile Nav */
        #mobile-menu {
            transform: translateX(100%);
            transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        #mobile-menu.active {
            transform: translateX(0);
        }
		/* Bikin scroll antar section jadi smooth */
    html {
        scroll-behavior: smooth;
    }

    /* Efek underline yang meluncur pas di-hover */
    .nav-link {
        position: relative;
        transition: color 0.3s ease;
    }

    .nav-link::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: -4px;
        left: 0;
        background-color: #eab308; /* Warna Kuning Neon */
        transition: width 0.3s ease;
    }

    .nav-link:hover::after {
        width: 100%;
    }

    /* Efek klik (Active State) */
    .nav-link:active {
        transform: scale(0.95);
        transition: transform 0.1s;
    }