.rsvp-container {
            transition: all 0.4s;
			width: 100%;
			padding: 0 15px;
        }

        .rsvp-container h1 { 
            text-align: center; 
            margin-bottom: 10px; 
            transition: color 0.4s; 
            color: #333;
						width: 100%;

        }
        .rsvp-container p { text-align: center; color: #6c757d; margin-bottom: 25px; transition: color 0.4s; }
        
        /* Media Query untuk Mobile */
  

        /* ========================================= */
        /* 2. CUSTOM PLACEHOLDER CSS DENGAN IKON */
        /* ========================================= */
        .placeholder {
            padding: 7px 0 0 0;
            background: white;
            position: relative;
            width: 100%;
            margin-bottom: 15px; 
        }
        
        /* Styling Ikon */
        .placeholder .icon {
            position: absolute;
            top: 25px; 
            left: 17px;
            font-size: 16px;
            color: #666;
            z-index: 2;
            transition: color 0.3s;
        }

        .placeholder > input[type="text"], 
        .placeholder > input[type="tel"], 
        .placeholder > textarea, 
        .placeholder > input[type="date"] {
            /* Perubahan di sini: default border 2px solid #666 */
            border: 2px solid #666; 
            outline: none;
            box-shadow: none;
            font-size: 100%;
            font-family: inherit; 
            letter-spacing: .8px;
            transition: .3s border-radius, .3s color, .3s border-color; /* Tambahkan border-color ke transisi */
            padding: 12px 15px 12px 45px; /* PADDING KIRI untuk ikon */
            box-sizing: border-box;
            width: 100%;
            background: transparent;
            /* Tambahan: Pastikan input adalah relatif untuk mengatur ::after/::before jika tema elegan tidak aktif */
            position: relative;
			box-shadow: none !important;
        }
        
        .placeholder > textarea {
            padding-left: 45px; 
            resize: vertical;
        }

        .placeholder > textarea + label, .placeholder > input + label {
            font-size: 100%;
            font-family: inherit;
            letter-spacing: .8px;
            position: absolute;
            top: 23px;
            left: 45px; 
            transition: .3s font, .3s top, .3s color, .3s left;
            z-index: 1;
            color: #333;
            text-transform: capitalize;
            font-weight: bold;
        }

        /* Posisi label di textarea */
        .placeholder textarea + label {
             left: 45px;
        }

        .placeholder > textarea + label::before, .placeholder > input + label::before {
            content: "";
            position: absolute;
            width: 0;
            background: transparent;
            height: 100%;
            top: -22px;
            left: 50%;
            transform: translateX(-50%);
            z-index: -1;
            transition: .3s width linear;
        }

        .placeholder > textarea:focus, .placeholder > input:focus {
            border-radius: 8px;
            border-color: var(--color-red) !important;
            box-shadow: none !important;
        }

        /* Fokus: Ubah warna ikon dan label */
        .placeholder > input:focus ~ .icon, .placeholder > textarea:focus ~ .icon {
            color: var(--color-red);
        }

        .placeholder > textarea:focus + label, .placeholder > input:focus + label {
            top: 0;
            font-size: 85%;
            color: var(--color-red);
        }
        .placeholder > textarea:focus + label::before, .placeholder > input:focus + label::before {
            top: 0;
            width: calc(100% + 16px);
            background: white;
        }

        /* Filled & Focused: Ubah warna ikon dan label ke Green */
        .placeholder > input:focus:not(:placeholder-shown) ~ .icon, .placeholder > textarea:focus:not(:placeholder-shown) ~ .icon {
            color: var(--color-green) !important;
        }
        .placeholder > textarea:focus:not(:placeholder-shown), .placeholder > input:focus:not(:placeholder-shown) {
            border-color: var(--color-green) !important;
            color: var(--color-green);
        }
        .placeholder > textarea:focus:not(:placeholder-shown) + label, .placeholder > input:focus:not(:placeholder-shown) + label {
            color: var(--color-green) !important;
        }

        /* Filled (Not Focused): Ubah warna ikon dan label ke Purple */
        .placeholder > input:not(:placeholder-shown) ~ .icon, .placeholder > textarea:not(:placeholder-shown) ~ .icon {
            color: var(--color-purple) !important;
        }
        .placeholder > textarea:not(:placeholder-shown), .placeholder > input:not(:placeholder-shown) {
            border-color: var(--color-purple) !important;
            color: var(--color-purple);
        }
        .placeholder > textarea:not(:placeholder-shown) + label, .placeholder > input:not(:placeholder-shown) + label {
            color: var(--color-purple);
            top: 0;
            font-size: 85%;
        }
        .placeholder > textarea:not(:placeholder-shown) + label::before, .placeholder > input:not(:placeholder-shown) + label::before {
            top: 0;
            width: calc(100% + 16px);
            background: white;
        }
        /* END PLACEHOLDER*/
        
        /* ========================================= */
        /* 3. RADIO & TOMBOL SUBMIT */
        /* ========================================= */
        .attendance-group { margin-top: 5px; margin-bottom: 25px; }
        .attendance-group > label {
             display: block; margin-bottom: 8px; font-weight: bold; color: #495057;
        }
        .attendance-group .radio-options { display: flex; flex-wrap: wrap; gap: 15px; }
        .attendance-group .radio-options input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
        .attendance-group .radio-options label {
            flex-grow: 1; text-align: center; cursor: pointer;
            background-color: #f8f9fa; border: 2px solid #ced4da;
            padding: 10px 5px; border-radius: 8px;
            transition: all 0.4s ease; font-weight: normal;
        }
        
        .submit-btn {
            width: 100%; padding: 15px; color: white; border: none;
            border-radius: 8px; cursor: pointer; font-size: 18px;
            font-weight: 700; margin-top: 10px; transition: background-color 0.4s;
        }

        /* ========================================= */
        /* 4. DEFINISI TEMA (data-theme) */
        /* ========================================= */
        .theme-switcher { margin-bottom: 20px; text-align: center; }
        .theme-btn {
            padding: 8px 15px; margin: 5px; border: none; border-radius: 5px;
            cursor: pointer; font-size: 14px; color: white; transition: opacity 0.3s;
        }
        
        /* --- TEMA DEFAULT (BIRU-HIJAU) --- */
        .rsvp-container[data-theme="default"] { 
            --color-red: #007bff; /* Focus Color */
            --color-green: #28a745; /* Filled & Focused Color */
            --color-purple: #17a2b8; /* Filled Color */
        }
        .rsvp-container[data-theme="default"] .submit-btn { background-color: #28a745; }
        .rsvp-container[data-theme="default"] .radio-options input[type="radio"]:checked + label { background-color: #e2f0fb; border-color: #007bff; color: #007bff; }
        .theme-btn[data-theme-name="default"] { background-color: #17a2b8; }

        /* --- TEMA ROMANTIC (PINK-GOLD) --- */
        .rsvp-container[data-theme="romantic"] { 
            --color-red: #8b0046;
            --color-green: #c79a29;
            --color-purple: #e91e63;
        }
        .rsvp-container[data-theme="romantic"] h1, .rsvp-container[data-theme="romantic"] .attendance-group > label { color: #8b0046; }
        .rsvp-container[data-theme="romantic"] .submit-btn { background-color: #c79a29; }
        .rsvp-container[data-theme="romantic"] .radio-options input[type="radio"]:checked + label { background-color: #ffe6f0; border-color: #e91e63; color: #e91e63; }
        .theme-btn[data-theme-name="romantic"] { background-color: #e91e63; }

        /* --- TEMA MODERN (TEAL-YELLOW) --- */
        .rsvp-container[data-theme="modern"] { 
            --color-red: #00bcd4; /* Focus Color: Cyan/Teal */
            --color-green: #ffc107; /* Filled & Focused Color: Yellow/Gold */
            --color-purple: #00796b; /* Filled Color: Dark Teal */
        }
        .rsvp-container[data-theme="modern"] h1, .rsvp-container[data-theme="modern"] .attendance-group > label { color: #00796b; }
        .rsvp-container[data-theme="modern"] .submit-btn { background-color: #00bcd4; }
        .rsvp-container[data-theme="modern"] .radio-options input[type="radio"]:checked + label { background-color: #e0f7fa; border-color: #00bcd4; color: #00bcd4; }
        .theme-btn[data-theme-name="modern"] { background-color: #00bcd4; }

        /* --- TEMA ELEGAN (BLACK-GOLD) --- */
        .rsvp-container[data-theme="elegant"] { 
            --color-red: #8b4513; /* Focus Color: Saddle Brown (Lebih Dark Gold) */
            --color-green: #daa520; /* Filled & Focused Color: Gold/Goldenrod */
            --color-purple: #495057; /* Filled Color: Dark Grey/Charcoal */
        }
        .rsvp-container[data-theme="elegant"] h1, .rsvp-container[data-theme="elegant"] .attendance-group > label { color: #212529; }
        .rsvp-container[data-theme="elegant"] .submit-btn { 
            background-color: #daa520; 
            color: #212529; /* Teks tombol submit jadi gelap */
        }
        .rsvp-container[data-theme="elegant"] .radio-options input[type="radio"]:checked + label { 
            background-color: #fff8e1; /* Latar belakang radio sangat muda */
            border-color: #daa520; 
            color: #8b4513; 
        }
        .theme-btn[data-theme-name="elegant"] { 
            background-color: #495057;
            color: #daa520; /* Teks tombol bertema gold */
            border: 1px solid #daa520;
        }
		 
        /* =================================================================================================== */
        /* TEMA ELEGAN: OVERRIDES untuk menghilangkan border dan menambahkan animasi garis bawah */
        /* =================================================================================================== */
        
        /* A. Hilangkan border 4 sisi & tambahkan garis dasar samar */
        .rsvp-container[data-theme="elegant"] .placeholder > input,
        .rsvp-container[data-theme="elegant"] .placeholder > textarea {
            /* Hapus semua border default */
            border: none !important; 
            /* Tambahkan garis bawah statis untuk pemisah visual */
            border-bottom: 1px solid #ced4da !important; 
            border-radius: 0 !important;
        }
        
        /* Tambahkan ruang dan posisi relatif pada kontainer untuk menampung garis animasi */
        .rsvp-container[data-theme="elegant"] .placeholder {
            padding-bottom: 5px; /* Tambah ruang di bawah input */
            position: relative;
            /* Garis dasar label saat floating di Elegant harus putih */
            background-color: #ffffff;
        }
        
        /* B. Buat garis animasi (::after) yang bergerak dari kiri ke kanan */
        .rsvp-container[data-theme="elegant"] .placeholder::after {
            content: '';
            position: absolute;
            bottom: 4px;
            left: 0;
            height: 2px; /* Ketebalan garis */
            width: 0; /* Mulai dari nol untuk animasi */
            background-color: var(--color-red); /* Warna Fokus Default */
            transition: width 0.4s ease-out, background-color 0.4s;
            z-index: 5;
        }
        
        /* C. Garis muncul penuh pada saat kontainer memiliki elemen yang fokus (Input atau Textarea) */
        .rsvp-container[data-theme="elegant"] .placeholder:focus-within::after {
            width: 100%;
            background-color: var(--color-red); /* Ambil warna fokus (Saddle Brown) */
        }

        /* D. Ketika terisi DAN fokus (Filled & Focused): Ganti warna garis ke warna Green (Gold) */
        .rsvp-container[data-theme="elegant"] .placeholder > input:focus:not(:placeholder-shown) ~ .icon, 
        .rsvp-container[data-theme="elegant"] .placeholder > textarea:focus:not(:placeholder-shown) ~ .icon {
            /* Warna ikon tetap hijau/gold */
            color: var(--color-green) !important;
        }
        
        .rsvp-container[data-theme="elegant"] .placeholder > input:focus:not(:placeholder-shown) + label, 
        .rsvp-container[data-theme="elegant"] .placeholder > textarea:focus:not(:placeholder-shown) + label {
            /* Warna label tetap hijau/gold */
            color: var(--color-green) !important;
        }

        /* E. Ketika terisi dan TIDAK fokus: Ganti warna garis statis ke warna Purple (Dark Grey) */
        .rsvp-container[data-theme="elegant"] .placeholder > input:not(:placeholder-shown),
        .rsvp-container[data-theme="elegant"] .placeholder > textarea:not(:placeholder-shown) {
            border-bottom: 2px solid var(--color-purple) !important; /* Garis statis tebal warna filled */
            color: var(--color-purple);
        }

        /* F. Pastikan Garis Animasi menggunakan warna Filled & Focused (Green/Gold) saat terisi dan fokus.
           Karena keterbatasan CSS, kita harus override :focus-within::after. */
        .rsvp-container[data-theme="elegant"] .placeholder:focus-within::after {
            width: 100%;
            /* Coba atur warna pada state terisi & fokus */
            background-color: var(--color-red); /* Default focus color */
        }
        
        /* Catatan: Karena tidak ada parent selector, animasi garis akan mengikuti warna Fokus (Red) saat aktif.
           Untuk keadaan 'Filled (Not Focused)', input akan memiliki garis bawah statis tebal (Purple) sesuai permintaan. */
        
        /* --- TEMA DARK (MALAM) --- */
        .rsvp-container[data-theme="dark"] { 
            --color-red: #00bcd4;
            --color-green: #2ecc71;
            --color-purple: #f8f9fa;
        }
        body[data-theme="dark"] { background-color: #343a40; }
        .rsvp-container[data-theme="dark"] { background-color: #495057; }
        .rsvp-container[data-theme="dark"] h1, .rsvp-container[data-theme="dark"] p, .rsvp-container[data-theme="dark"] .attendance-group > label { color: #f8f9fa; }
        .rsvp-container[data-theme="dark"] .placeholder > input, .rsvp-container[data-theme="dark"] .placeholder > textarea { 
            background-color: #6c757d; border-color: #495057; 
        }
        .rsvp-container[data-theme="dark"] .placeholder > input + label, .rsvp-container[data-theme="dark"] .placeholder > textarea + label { color: #ccc; }
        .rsvp-container[data-theme="dark"] .placeholder > textarea:focus + label::before, 
        .rsvp-container[data-theme="dark"] .placeholder > input:focus + label::before,
        .rsvp-container[data-theme="dark"] .placeholder > textarea:not(:placeholder-shown) + label::before, 
        .rsvp-container[data-theme="dark"] .placeholder > input:not(:placeholder-shown) + label::before {
             background: #495057; /* Ubah latar belakang label menjadi warna container Dark Mode */
        }
        .rsvp-container[data-theme="dark"] .submit-btn { background-color: #00bcd4; }
        .rsvp-container[data-theme="dark"] .radio-options label { background-color: #5a6268; border-color: #495057; color: #f8f9fa; }
        .rsvp-container[data-theme="dark"] .radio-options input[type="radio"]:checked + label { background-color: #00bcd4; border-color: #00bcd4; color: #212529; }
        .theme-btn[data-theme-name="dark"] { background-color: #212529; border: 1px solid #00bcd4; }