/* Preloader Styles */
        #preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, #2A0D45, var(--dark-bg));
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            transition: opacity 0.8s ease-out;
        }
        
        .loading-text {
            color: #fff;
            font-size: 1.2rem;
            margin-top: 1.5rem;
            letter-spacing: 1px;
            text-align: center;
            padding: 0 1rem;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
        }
        
        .cake-container {
            position: relative;
            width: 150px;
            height: 150px;
            margin: 0 auto;
        }
        
        /* Piring cake */
        .plate {
            position: absolute;
            width: 135px;
            height: 15px;
            background: #e0e0e0;
            border-radius: 50%;
            bottom: 0;
            left: 7.5px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.2);
        }
        
        /* Base cake */
        .cake-base {
            position: absolute;
            width: 112px;
            height: 52px;
            background: linear-gradient(to bottom, #d2a679, #a57c5b);
            border-radius: 50% 50% 12px 12px;
            bottom: 15px;
            left: 19px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.2);
            overflow: hidden;
        }
        
        /* Texture cake */
        .cake-texture {
            position: absolute;
            width: 100%;
            height: 100%;
            background: 
                linear-gradient(90deg, transparent 90%, rgba(255,255,255,0.1) 90%),
                linear-gradient(transparent 90%, rgba(0,0,0,0.05) 90%);
            background-size: 8px 8px;
            opacity: 0.3;
        }
        
        /* Chocolate syrup */
        .chocolate-syrup {
            position: absolute;
            top: -30px;
            left: 45px;
            width: 22px;
            height: 30px;
            background: #5d4037;
            border-radius: 50% 50% 4px 4px;
            animation: pour 2.5s ease-in-out infinite;
            transform-origin: bottom center;
        }
        
        .syrup-flow {
            position: absolute;
            top: 30px;
            left: 10px;
            width: 2px;
            height: 0;
            background: linear-gradient(to bottom, #7b3f00, #5d4037);
            animation: flow 2.5s ease-in-out infinite;
        }
        
        /* Chocolate pool on cake */
        .chocolate-pool {
            position: absolute;
            top: 8px;
            left: 37px;
            width: 38px;
            height: 8px;
            background: #5d4037;
            border-radius: 50%;
            opacity: 0;
            animation: pool 2.5s ease-in-out infinite;
        }
        
        /* Chocolate drizzle */
        .drizzle {
            position: absolute;
            top: 15px;
            width: 4px;
            height: 15px;
            background: #5d4037;
            border-radius: 2px;
            opacity: 0;
        }
        
        .drizzle-1 {
            left: 30px;
            animation: drizzle 2.5s 1.2s ease-in-out infinite;
        }
        
        .drizzle-2 {
            left: 52px;
            animation: drizzle 2.5s 1.4s ease-in-out infinite;
        }
        
        .drizzle-3 {
            left: 75px;
            animation: drizzle 2.5s 1.6s ease-in-out infinite;
        }
        
        /* Progress bar */
        .progress-container {
            width: 250px;
            height: 6px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 3px;
            margin-top: 1.5rem;
            overflow: hidden;
        }
        
        .progress-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(to right, #ffb74d, #ff9800);
            border-radius: 3px;
            animation: loading 4s ease-in-out infinite;
        }
        
        /* Animations */
        @keyframes pour {
            0%, 40% { 
                transform: translateY(0) rotate(0deg);
                height: 30px;
            }
            50%, 60% { 
                transform: translateY(15px) rotate(-15deg);
                height: 37px;
            }
            70%, 100% { 
                transform: translateY(0) rotate(0deg);
                height: 30px;
            }
        }
        
        @keyframes flow {
            0%, 40% { 
                height: 0;
            }
            50%, 60% { 
                height: 45px;
            }
            70%, 100% { 
                height: 0;
            }
        }
        
        @keyframes pool {
            0%, 45% { 
                opacity: 0;
                transform: scale(0);
            }
            55%, 90% { 
                opacity: 1;
                transform: scale(1);
            }
            100% { 
                opacity: 0;
                transform: scale(1);
            }
        }
        
        @keyframes drizzle {
            0%, 40% { 
                opacity: 0;
                height: 0;
            }
            50%, 60% { 
                opacity: 1;
                height: 15px;
            }
            70%, 100% { 
                opacity: 0;
                height: 15px;
            }
        }
        
        @keyframes loading {
            0% { width: 0%; }
            50% { width: 70%; }
            100% { width: 100%; }
        }
        
        /* Content styles */
        .content {
            display: none;
            text-align: center;
            padding: 1.5rem;
        }
        
        .btn {
            display: inline-block;
            padding: 10px 22px;
            background: linear-gradient(to right, #8d6e63, #6d4c41);
            color: white;
            text-decoration: none;
            border-radius: 25px;
            font-weight: bold;
            margin-top: 1rem;
            font-size: 0.9rem;
            box-shadow: 0 3px 8px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 12px rgba(0,0,0,0.3);
        }

        /* Media queries untuk perangkat mobile kecil */
        @media (max-width: 360px) {
            .cake-container {
                width: 120px;
                height: 120px;
            }
            
            .plate {
                width: 110px;
                height: 12px;
                left: 5px;
            }
            
            .cake-base {
                width: 90px;
                height: 42px;
                left: 15px;
                bottom: 12px;
            }
            
            .chocolate-syrup {
                left: 35px;
                top: -25px;
                width: 18px;
                height: 25px;
            }
            
            .syrup-flow {
                top: 25px;
                left: 8px;
            }
            
            .chocolate-pool {
                top: 6px;
                left: 30px;
                width: 30px;
                height: 6px;
            }
            
            .drizzle {
                top: 12px;
                width: 3px;
                height: 12px;
            }
            
            .drizzle-1 {
                left: 24px;
            }
            
            .drizzle-2 {
                left: 42px;
            }
            
            .drizzle-3 {
                left: 60px;
            }
            
            .loading-text {
                font-size: 1rem;
                margin-top: 1.2rem;
            }
            
            .progress-container {
                width: 200px;
                margin-top: 1.2rem;
            }
            
            h1 {
                font-size: 1.6rem;
            }
            
            p {
                font-size: 0.9rem;
            }
        }