/* General Styling */
body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #ffe0e6; /* Warna pink dasar */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #880022;
    overflow: hidden; /* Mencegah scroll */
    position: relative;
}

.container {
    text-align: center;
    background-color: rgba(255, 255, 255, 0.85);
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 400px;
    z-index: 10;
}

h1 {
    font-size: 1.8em;
    margin-bottom: 25px;
    color: #d81b60;
}

.love-button {
    background-color: #e91e63;
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 1.2em;
    border-radius: 50px;
    cursor: pointer;
    outline: none;
    transition: background-color 0.3s ease, transform 0.1s ease;
    position: absolute;
    z-index: 20;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    user-select: none;
}

.love-button:active {
    transform: scale(0.95);
}

.hidden {
    display: none !important; /* Gunakan !important untuk memastikan elemen tersembunyi */
}

#message {
    font-size: 2.5em;
    color: #d81b60;
    margin-top: 40px;
    font-weight: bold;
    animation: fadeIn 1s forwards;
    cursor: pointer; /* Membuatnya terlihat bisa diklik */
}

#message:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

/* --- PERUBAHAN UTAMA DI SINI --- */
/* Gaya untuk kontainer foto sebagai overlay */
#photoContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Latar belakang gelap transparan */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 100;
    animation: fadeIn 0.5s forwards;
    cursor: pointer; /* Bisa diklik untuk menutup */
}

#photoContainer span {
    color: white;
    margin-top: 20px;
    font-size: 1em;
}

.love-frame {
    width: 80vw; /* Lebar 80% dari lebar layar */
    max-width: 400px; /* Batas lebar maksimum */
    height: auto;
    object-fit: cover;
    box-shadow: 0 0 25px rgba(255, 105, 180, 0.8);
    /* Trik CSS untuk membuat bentuk hati */
    clip-path: polygon(50% 12%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    -webkit-clip-path: polygon(50% 12%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

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

/* Animasi hati di background (tidak perlu diubah) */
.heart {
    position: absolute;
    width: 20px; height: 20px;
    background-color: #ff69b4;
    transform: rotate(-45deg);
    animation: floatHeart 12s infinite linear;
    z-index: 0; opacity: 0.7;
}
.heart::before, .heart::after {
    content: ''; position: absolute;
    width: 20px; height: 20px;
    background-color: #ff69b4; border-radius: 50%;
}
.heart::before { top: -10px; left: 0; }
.heart::after { left: 10px; top: 0; }
@keyframes floatHeart {
    0% { transform: translateY(100vh) rotate(-45deg); opacity: 0; }
    100% { transform: translateY(-50px) rotate(-45deg); opacity: 0; }
}
.heart:nth-child(1) { left: 10%; animation-delay: 0s; }
.heart:nth-child(2) { left: 20%; animation-delay: -8s; }
.heart:nth-child(3) { left: 40%; animation-delay: -3s; }
.heart:nth-child(4) { left: 60%; animation-delay: -10s; }
.heart:nth-child(5) { left: 80%; animation-delay: -5s; }
.heart:nth-child(6) { left: 90%; animation-delay: -1s; }
.heart:nth-child(7) { left: 5%; animation-delay: -6s; }