body {
        background-color: #f0f0f0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        font-family: Arial, sans-serif;
        overflow: hidden; /* Mencegah scrollbar muncul saat konfeti aktif */
    }

    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 90%;
        max-width: 650px;
    }

    /* --- GAYA UNTUK TEKS & TOMBOL --- */

    #stayTunedText {
        font-family: 'Courier New', Courier, monospace;
        font-size: 18px;
        color: #13184C;
        font-weight: bold;
        text-align: center;
        margin-top: 50px; 
        margin-bottom: 50px; 
        width: 0; 
        white-space: nowrap; 
        overflow: hidden; 
        max-width: 100%; 
        box-sizing: border-box; 
        animation: typing 3s steps(36, end) 5.7s forwards,
                   blink-caret .75s step-end 5.7s 4; 
    }
     .hepy-text {
        color: #af4df8;
        font-style: italic;
    }

    .social-buttons {
        display: flex;
        gap: 20px;
        margin-bottom: 25px;
        opacity: 0; /* Mulai dengan tidak terlihat */

        /* Muncul setelah animasi ketikan selesai (5.7s + 3s = 8.7s) */
        animation: fadeIn 1s ease-out 8.8s forwards;
    }

    .social-buttons a {
        display: inline-block;
        transition: transform 0.2s ease-in-out;
    }

    .social-buttons a:hover {
        transform: scale(1.1);
    }

    .social-buttons svg {
        width: 35px; /* Ukuran ikon responsif */
        height: 35px;
    }

    .logo-container {
        text-align: center;
        width: 100%;
    }

    .logo-container > svg {
        width: 100%;
        overflow: visible;
    }

#playGameButton {
    background: #13184C;
    color: #f0f0f0;
    border: none;
    padding: 15px 30px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    opacity: 0;
    animation: fadeIn 1s ease-out 9.5s forwards;
    margin-top: 20px;
}

#playGameButton:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

    /* --- GAYA UNTUK EASTER EGG & RADAR --- */
    #path-4.clickable {
        cursor: pointer;
    }

    .radar-ping {
        stroke: #F84D4D; /* Warna radar merah */
        stroke-width: 15;
        fill: none;
        opacity: 0;
        transform-origin: center;
        transform-box: fill-box;
    }

    .radar-ping.active {
        animation: radar-wave 2.5s infinite ease-out;
    }

    #radar-ping-2.active {
        animation-delay: 0.5s;
    }
    #radar-ping-3.active {
        animation-delay: 1s;
    }


    /* --- KEYFRAME ANIMATIONS --- */

    @keyframes radar-wave {
        0% {
            transform: scale(0.5);
            opacity: 0.8;
        }
        100% {
            transform: scale(3);
            opacity: 0;
        }
    }

    @keyframes fadeIn { to { opacity: 1; } }

    /* PERUBAHAN KUNCI: Menggunakan 'ch' untuk lebar agar tidak meluap di layar kecil */
    @keyframes typing {
        from { width: 0; }
        to { width: 36ch; } /* Lebar pas untuk 36 karakter */
    }

    @keyframes blink-caret {
        from, to { border-color: transparent; }
        50% { border-color: #13184C; }
    }
    @keyframes fade-in { to { opacity: 1; } }
    @keyframes move-and-fade {
        0% { opacity: 1; offset-distance: 0%; }
        90% { opacity: 1; }
        100% { opacity: 0; offset-distance: 100%; }
    }
    @keyframes appear-and-pop {
        0% { opacity: 0; transform: scale(0.5); }
        70% { opacity: 1; transform: scale(1.2); }
        100% { opacity: 1; transform: scale(1); }
    }
    @keyframes reveal-wipe {
        to { clip-path: inset(0 0 0 0); }
    }

    /* --- INITIAL STATES (BEFORE ANIMATION) --- */
    #path-5, .traveler-dot, .real-dot {
        opacity: 0;
    }
    #path-1, #path-6, #path-7 {
        clip-path: inset(0 100% 0 0);
    }
    .real-dot {
        transform-origin: center;
    }
    .traveler-dot {
        offset-path: path("M1614.31 650.9C1528.42 1034.2 1188.7 1307.8 780.09 1307.8C442.57 1307.8 150.705 1112.3 10.953 828.2L104.036 778C225.888 1029.1 482.884 1202.1 780.09 1202.1C1129.86 1202.1 1426.61 953.4 1510.25 628.9L1614.31 650.9Z");
    }

    /* --- APPLYING ANIMATIONS WITH DELAYS --- */
    #path-5 { animation: fade-in 2s ease-out 0.5s forwards; }
    #path-1 { animation: reveal-wipe 2s ease-out 2.5s forwards; }
    #path-6 { animation: reveal-wipe 2s ease-out 2.8s forwards; }
    #path-7 { animation: reveal-wipe 2s ease-out 3.1s forwards; }
    #traveler-2 { animation: move-and-fade 3s ease-in-out 1.7s forwards; }
    #traveler-3 { animation: move-and-fade 3s ease-in-out 1.9s forwards; }
    #traveler-4 { animation: move-and-fade 3s ease-in-out 2.1s forwards; }
    #path-2 { animation: appear-and-pop 0.5s ease-out 4.7s forwards; }
    #path-3 { animation: appear-and-pop 0.5s ease-out 4.9s forwards; }
    #path-4 { animation: appear-and-pop 0.5s ease-out 5.1s forwards; }

    /* Media Query untuk layar yang lebih besar */
    
@media (min-width: 768px) {
    #stayTunedText { font-size: 24px; margin-top: 50px; margin-bottom: 25px; }
    .social-buttons svg { width: 40px; height: 40px; }
    #playGameButton { font-size: 18px; }
}