body {
            font-family: 'Poppins', sans-serif;
            background-color: #0c1427; /* Deep Navy Blue */
            color: #e0e0e0;
            
        }
         
        
        
        /* Tampilkan kursor pointer untuk elemen interaktif */
        a, button, .gallery-item {
            cursor: pointer;
        }

       

        /* Custom Navy Palette */
        .bg-navy-deep { background-color: #0c1427; }
        .bg-navy-medium { background-color: #1a2a4a; }
        .text-accent-cyan { color: #22d3ee; }
        .text-accent-blue { color: #3b82f6; }
        .border-accent-cyan { border-color: #22d3ee; }

        /* Particle Canvas */
        #particle-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            opacity: 0.6;
        }

        /* Footer social icons */
        .social-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            border-radius: 10px;
            background: transparent;
            color: #cbd5e1; /* muted light */
            transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;
            text-decoration: none;
        }

        .social-icon:focus,
        .social-icon:hover {
            transform: translateY(-4px) scale(1.05);
            color: #22d3ee; /* cyan accent */
            background: rgba(34, 211, 238, 0.06);
            outline: none;
        }

        .social-icon:focus {
            box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12);
            border-radius: 12px;
        }

        .icon {
            width: 22px;
            height: 22px;
            display: block;
        }

        /* Screen-reader only helper */
        .sr-only {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            padding: 0 !important;
            margin: -1px !important;
            overflow: hidden !important;
            clip: rect(0, 0, 0, 0) !important;
            white-space: nowrap !important;
            border: 0 !important;
        }

        /* Hero Load Animation */
        @keyframes fadeInDown {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .hero-title {
            animation: fadeInDown 1s ease-out 0.5s forwards;
            opacity: 0;
        }
        .hero-subtitle {
            animation: fadeInUp 1s ease-out 0.8s forwards;
            opacity: 0;
        }
        .hero-button {
            animation: fadeInUp 1s ease-out 1.1s forwards;
            opacity: 0;
        }

        /* Scroll Animations */
        .scroll-animate {
            opacity: 0;
            transition: opacity 0.7s ease-out, transform 0.7s ease-out;
        }
        .scroll-animate.fade-in-up {
            transform: translateY(30px);
        }
        .scroll-animate.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Gallery Hover Effect */
        .gallery-item {
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        .gallery-item:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 25px rgba(34, 211, 238, 0.3);
            border-color: #22d3ee;
        }

        /* Text Glow */
        .text-glow {
            text-shadow: 0 0 12px rgba(34, 211, 238, 0.5);
        }
        
        /* Nav Link Effect */
        .nav-link {
            position: relative;
            transition: color 0.3s ease;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -4px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #22d3ee;
            transition: width 0.3s ease;
        }
        .nav-link:hover {
            color: #22d3ee;
        }
        .nav-link:hover::after {
            width: 100%;
        }

        /* Marquee (Angkatan) CSS */
        .marquee-container {
            width: 100%;
        }
        .marquee {
            display: flex;
            white-space: nowrap;
            will-change: transform;
        }
        .marquee.scroll-left {
            animation: scrollLeft 80s linear infinite;
        }
        .marquee.scroll-right {
            animation: scrollRight 80s linear infinite;
        }
        .marquee-item {
            flex-shrink: 0;
            width: 150px;
            margin: 0 10px;
            background-color: #1a2a4a; /* bg-navy-medium */
            border-radius: 0.5rem; /* rounded-lg */
            overflow: hidden;
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .marquee-item:hover {
            transform: scale(1.1) translateY(-5px);
            box-shadow: 0 8px 20px rgba(34, 211, 238, 0.3);
            z-index: 10;
        }
        .marquee-item img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            display: block;
        }
        .marquee-item p {
            padding: 12px 8px;
            font-size: 0.875rem; /* text-sm */
            font-weight: 600; /* font-semibold */
            color: #e0e0e0; /* text-gray-200 */
            white-space: normal;
        }
        @keyframes scrollLeft {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); } /* Scroll by half the width */
        }
        @keyframes scrollRight {
            0% { transform: translateX(-50%); } /* Start from the halfway point */
            100% { transform: translateX(0); }
        }
        /* (Removed duplicate social-icon rules — styles defined earlier) */