/* --- STYLE DASAR --- */
body {
    background-color: #FFFDF2;
    font-family: 'Poppins', sans-serif;
}

#welcomeContainer {
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.brand-name {
    color: #4A5D44;
    font-size: 2.5rem;
}

.welcome-text {
    color: #5A6E54;
}

.tap-text {
    color: #5A6E54;
    font-size: 1rem;
    font-weight: 400;
    margin-top: 2rem;
}

/* --- ANIMASI --- */
.slide-up-exit {
    animation: exitUp 0.8s ease-in forwards;
}

@keyframes exitUp {
    to { transform: translateY(-100vh); opacity: 0; }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}

/* --- DAUN (POSISI TETAP - JANGAN DIUBAH) --- */
/* Daun berada di area: Top 20-40% & Bottom 15-35% pada Left/Right 15-20% */
.leaf { 
    position: absolute; width: 80px; opacity: 0.95; 
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.1)); z-index: 1; 
}
.leaf-left-1 { top: 20%; left: 15%; transform: rotate(-70deg); }
.leaf-left-2 { top: 40%; left: 20%; transform: rotate(-50deg); }
.leaf-left-3 { bottom: 35%; left: 20%; transform: rotate(-20deg); }
.leaf-left-4 { bottom: 15%; left: 15%; transform: rotate(10deg); }

.leaf-right-1 { top: 20%; right: 15%; transform: scaleX(-1) rotate(-70deg); }
.leaf-right-2 { top: 40%; right: 20%; transform: scaleX(-1) rotate(-50deg); }
.leaf-right-3 { bottom: 35%; right: 20%; transform: scaleX(-1) rotate(-20deg); }
.leaf-right-4 { bottom: 15%; right: 15%; transform: scaleX(-1) rotate(-10deg); }


/* --- MAKANAN (UMUM) --- */
.food-item {
    position: absolute; width: 45px; height: auto; z-index: 1; 
    opacity: 0.9; /* Sedikit lebih tegas */
    filter: drop-shadow(2px 3px 4px rgba(0,0,0,0.08));
    pointer-events: none; transition: transform 0.3s ease;
}
.small-item { width: 35px; opacity: 0.75; }


/* --- POSISI MAKANAN (ZONA AMAN) --- */

/* ZONA 1: TENGAH ATAS (Di atas Logo, di antara daun kiri & kanan) */
.pos-1 { top: 5%; left: 35%; transform: rotate(15deg); }
.pos-2 { top: 8%; left: 55%; transform: rotate(-20deg); }
.pos-9 { top: 2%; left: 45%; transform: rotate(45deg); } /* Paling atas tengah */
.pos-new-1 { top: 12%; left: 40%; transform: rotate(-10deg); }
.pos-new-2 { top: 10%; right: 40%; transform: rotate(25deg); }


/* ZONA 2: TENGAH BAWAH (Di bawah Teks, di antara daun kiri & kanan) */
.pos-5 { bottom: 5%; left: 35%; transform: rotate(30deg); }
.pos-6 { bottom: 8%; left: 55%; transform: rotate(-10deg); }
.pos-13 { bottom: 2%; left: 45%; transform: rotate(180deg); } /* Paling bawah tengah */
.pos-new-5 { bottom: 15%; left: 42%; transform: rotate(-5deg); }
.pos-new-6 { bottom: 12%; right: 42%; transform: rotate(15deg); }


/* ZONA 3: SANGAT PINGGIR (Di luar area daun - Safe Zone Kiri & Kanan) */
/* Kiri */
.pos-3 { top: 50%; left: 2%; transform: translateY(-50%) rotate(10deg); } /* Tengah Kiri Pas */
.pos-7 { top: 5%; left: 2%; transform: rotate(-45deg); } /* Pojok Kiri Atas */
.pos-11 { bottom: 5%; left: 2%; transform: rotate(-15deg); } /* Pojok Kiri Bawah */
.pos-new-3 { top: 30%; left: 3%; transform: rotate(20deg); }
.pos-new-7 { bottom: 30%; left: 3%; transform: rotate(-20deg); }

/* Kanan */
.pos-4 { top: 50%; right: 2%; transform: translateY(-50%) rotate(-15deg); } /* Tengah Kanan Pas */
.pos-8 { top: 5%; right: 2%; transform: rotate(20deg); } /* Pojok Kanan Atas */
.pos-15 { bottom: 5%; right: 2%; transform: rotate(-5deg); } /* Pojok Kanan Bawah */
.pos-new-4 { top: 30%; right: 3%; transform: rotate(-30deg); }
.pos-new-8 { bottom: 30%; right: 3%; transform: rotate(40deg); }


/* ZONA 4: FILLER (Iseng nyelip dikit tapi aman) */
.pos-10 { top: 18%; left: 5%; transform: rotate(-10deg); } /* Di atas daun kiri atas */
.pos-12 { top: 18%; right: 5%; transform: rotate(10deg); } /* Di atas daun kanan atas */
.pos-14 { bottom: 10%; left: 25%; transform: rotate(45deg); } /* Di bawah daun kiri bawah */


/* --- RESPONSIF HP --- */
@media (max-width: 768px) {
    .leaf { width: 50px; }
    /* Daun di HP agak geser ke pinggir, jadi makanan harus hati-hati */
    .leaf-left-2, .leaf-left-3 { left: 5%; }
    .leaf-right-2, .leaf-right-3 { right: 5%; }

    .food-item { width: 35px; }
    .small-item { width: 25px; }
    .tap-text { font-size: 0.9rem; }

    /* Sembunyikan item yang berpotensi tabrakan di layar sempit */
    .pos-3, .pos-4, .pos-10, .pos-12, .pos-new-3, .pos-new-4, .pos-new-7, .pos-new-8 { 
        display: none; 
    }

    /* Penyesuaian posisi agar rapi di layar kecil */
    .pos-1 { left: 10%; top: 10%; } /* Geser ke pojok aman */
    .pos-2 { right: 10%; top: 10%; }
    .pos-5 { left: 15%; bottom: 10%; }
    .pos-6 { right: 15%; bottom: 15%; }
}