body { background-color: #050505; color: white; overflow-x: hidden; }

        /* SUSPENSE OVERLAY */
        #suspenseOverlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-color: #000; z-index: 10000;
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            opacity: 0; pointer-events: none; transition: opacity 0.5s;
        }
        #suspenseOverlay.active { opacity: 1; pointer-events: all; }
        .suspense-text { font-size: 2rem; font-weight: 800; color: white; text-align: center; animation: pulse 1s infinite; }

        /* NAVBAR */
        .nav-transparent { background: transparent; padding-top: 2rem; padding-bottom: 2rem; }
        .nav-scrolled { background: rgba(10, 10, 10, 0.9); backdrop-filter: blur(15px); border-bottom: 1px solid rgba(255, 215, 0, 0.1); padding-top: 1rem; padding-bottom: 1rem; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); }
        .nav-link:hover { color: #FFD700; transition: color 0.3s; }
        
        /* MARQUEE SQUAD */
        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        @keyframes scrollLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
        .marquee-container { display: flex; overflow: hidden; width: 100%; position: relative; mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%); }
        .marquee-content { display: flex; gap: 2rem; padding: 1rem 0; width: max-content; animation: scrollLeft 50s linear infinite; }
        .marquee-container:hover .marquee-content { animation-play-state: paused; }
        .squad-card { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        .squad-card:hover { transform: translateY(-8px) scale(1.05); z-index: 50; }

        /* BLOG CARD */
        .blog-card { transition: all 0.3s ease; border: 1px solid #1a1a1a; }
        .blog-card:hover { transform: translateY(-10px); border-color: #FFD700; box-shadow: 0 10px 30px -10px rgba(255, 215, 0, 0.15); }
        .blog-card:hover .blog-img { transform: scale(1.1); }

        /* KREASI SKEWED CARD */
        .skew-box { transform: skewX(-6deg); transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); background: #111; border: 1px solid #222; }
        .kreasi-group:hover .skew-box { transform: skewX(0deg) scale(1.02); border-color: #FFD700; box-shadow: 0 0 30px rgba(255, 215, 0, 0.2); }
        .skew-content { transform: skewX(6deg); transition: all 0.5s ease; }
        .kreasi-group:hover .skew-content { transform: skewX(0deg); }

        /* AI SECTION */
        .ai-glow { box-shadow: 0 0 50px rgba(255, 215, 0, 0.1); }
        .chat-preview { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); }

        /* MOBILE MENU ANIMATION */
        #mobileMenu { transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out; max-height: 0; opacity: 0; overflow: hidden; }
        #mobileMenu.open { max-height: 400px; opacity: 1; }

        /* BIRTHDAY NOTIF BUTTON */
        #birthdayNotif { 
            position: fixed; 
            bottom: 30px; 
            right: 30px; 
            z-index: 100; 
            background: linear-gradient(45deg, #FFD700, #ffec8b); 
            color: black; 
            border-radius: 50px; 
            box-shadow: 0 0 20px rgba(255, 215, 0, 0.4); 
            transform: translateY(100px); 
            opacity: 0; 
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
        }
        #birthdayNotif.show { transform: translateY(0); opacity: 1; }
        #birthdayNotif:hover { transform: scale(1.1) translateY(-5px); box-shadow: 0 0 30px rgba(255, 215, 0, 0.6); }

        /* BIRTHDAY BADGE */
        .birthday-badge {
            background: linear-gradient(135deg, #FFD700, #ffb347);
            animation: pulse 2s infinite;
        }