/* --- Tombol Dark Mode --- */
#dark-mode-toggle {
    position: fixed;
    bottom: 80px; /* Posisi di atas tombol musik (20px + 55px + 5px) */
    right: 20px;
    background-color: var(--primary-color);
    color: var(--light-color);
    border: none;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    font-size: 1.3rem;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

#dark-mode-toggle:hover {
    transform: scale(1.1);
}

/* --- Definisi Warna Dark Mode --- */
/* Tambahkan variabel baru di root untuk dark mode */
:root {
    /* ... variabel yang sudah ada ... */
    --dark-bg-color: #121212; /* Abu-abu sangat gelap */
    --dark-surface-color: #1e1e1e; /* Sedikit lebih terang dari bg */
    --dark-text-color: #e0e0e0;
}

/* Terapkan warna dark mode saat body memiliki class 'dark-mode' */
body.dark-mode {
    background-color: var(--dark-bg-color);
    color: var(--dark-text-color);
}

/* Ubah warna section dan elemen lain di dark mode */
body.dark-mode section {
    background-color: var(--dark-bg-color);
}

body.dark-mode #mempelai,
body.dark-mode #rsvp,
body.dark-mode #wish-well,
body.dark-mode #countdown {
    background-color: var(--dark-surface-color);
    color: var(--dark-text-color);
}

body.dark-mode .event-card,
body.dark-mode .name-card,
body.dark-mode .guestbook-entry {
    background-color: var(--dark-surface-color);
    border-color: #444;
    color: var(--dark-text-color);
}

body.dark-mode .guestbook-entry {
    border-left-color: var(--accent-color);
}

body.dark-mode footer {
    background-color: var(--dark-surface-color);
    color: var(--dark-text-color);
}

/* Ubah warna input dan textarea agar nyaman di mata */
body.dark-mode input,
body.dark-mode textarea {
    background-color: #333;
    color: var(--dark-text-color);
    border-color: #555;
}

/* Ubah warna background animasi agar kontras */
body.dark-mode .floating-element {
    color: rgba(226, 150, 150, 0.5); /* Warna pink lebih transparan */
}