body { background-color: #050505; color: white; overflow-x: hidden; }
        
        /* UI UTILS */
        .loader-hidden { opacity: 0; visibility: hidden; }
        .skeleton { background: linear-gradient(90deg, #111 25%, #1a1a1a 50%, #111 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 0.5rem; }
        @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
        
        /* TABS */
        .tab-content { display: none; opacity: 0; transform: translateY(10px); transition: all 0.5s ease; }
        .tab-content.active { display: block; opacity: 1; transform: translateY(0); }
        .tab-btn.active { background: #FFD700; color: black; font-weight: 600; border-color: #FFD700; box-shadow: 0 0 20px rgba(255, 215, 0, 0.3); }
        
        /* CARD STYLES */
        .kreasi-card { 
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
            background: #0a0a0a; 
            border: 1px solid #222;
            cursor: pointer;
        }
        .kreasi-card:hover { 
            transform: translateY(-8px); 
            border-color: #FFD700; 
            box-shadow: 0 10px 40px -10px rgba(255, 215, 0, 0.1); 
            z-index: 10; 
        }
        
        /* MODAL */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(8px);
            z-index: 9999;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            animation: fadeIn 0.3s ease-out;
        }
        .modal-overlay.active {
            display: flex;
        }
        .modal-content {
            background: #0a0a0a;
            border: 1px solid #333;
            border-radius: 1rem;
            max-width: 800px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
            animation: slideUp 0.3s ease-out;
        }
        .modal-content::-webkit-scrollbar {
            width: 8px;
        }
        .modal-content::-webkit-scrollbar-track {
            background: #111;
        }
        .modal-content::-webkit-scrollbar-thumb {
            background: #333;
            border-radius: 4px;
        }
        .modal-content::-webkit-scrollbar-thumb:hover {
            background: #FFD700;
        }
        
        /* INFO BADGE */
        .info-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: #111;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            border: 1px solid #222;
            font-size: 0.875rem;
        }
        
        /* EBOOK / PROJECT CARD */
        .book-card:hover .book-cover { transform: scale(1.05) rotate(2deg); }
        .play-btn { transition: transform 0.3s ease; }
        .group:hover .play-btn { transform: scale(1.15); background: #FFD700; color: black; border-color: #FFD700; }
        
        /* LOADING STATES */
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255, 215, 0, 0.3);
            border-radius: 50%;
            border-top-color: #FFD700;
            animation: spin 1s ease-in-out infinite;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }