* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }       

:root{
    --primary: #4ea1ff;
    --dark: #1b1b1b;
    --text: #666;
    --light: #f4f7fb;
    --white: #fff;
    --card: #e9eef2;
    --icon-bg:#f3f6f9;

}
       
       /* Tombol Pemicu Modal */
        .open-modal-btn {
            padding: 15px 30px;
            font-size: 18px;
            background-color: white;
            color: #d84183;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            font-weight: bold;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            transition: transform 0.2s;
        }

        form h2
        {
            font-size: 16px;
        }

        .open-modal-btn:hover {
            transform: scale(1.05);
        }

        /* MODAL STYLING */
        .modal-overlay-merah {
            display: none; /* Sembunyikan default */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(5px);
            z-index: 999;
            justify-content: center;
            align-items: center;
            animation: fadeInOverlay 0.3s ease;
        }

        .modal-overlay-merah.active {
            display: flex;
        }

        .container-merah {
            background-color: white;
    padding: 0; /* Padding dipindah ke wrapper dalam */
    border-radius: 12px;
    width: 850px; /* Diperlebar dari 480px */
    max-width: 95%;
    overflow: hidden; /* Agar gambar tidak keluar dari border-radius */
    position: relative;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
        }


        .modal-content-wrapper {
    display: flex;
    min-height: 500px;
}


/* Bagian Gambar (Kiri) */
.modal-side-image {
    flex: 1;
    background-color: #f8f9fa; /* Warna dasar jika gambar gagal load */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    border-right: 1px solid #eee;
}

.modal-side-image img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}


/* Bagian Form (Kanan) */
.modal-side-form {
    flex: 1.2; /* Form sedikit lebih lebar dari gambar */
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.modal-side-form h2
{
    font-size:16px; 
    margin-bottom:20px;
    color: var(--text);
}

/* Responsive: Jika layar HP, tumpuk ke bawah atau sembunyikan gambar */
@media (max-width: 768px) {
    .modal-content-wrapper {
        flex-direction: column;
    }
    .modal-side-image {
        display: none; /* Sembunyikan gambar di HP agar hemat ruang */
    }
    .container-merah {
        width: 480px;
    }
}





        .close-modal-merah {
            position: absolute;
            top: 15px;
            right: 20px;
            font-size: 28px;
            color: #999;
            cursor: pointer;
            transition: color 0.2s;
        }

        .close-modal-merah:hover {
            color: #333;
        }

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

        @keyframes slideUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* FORM STYLING (Sama seperti kode Anda) */
        h2 { text-align: center; margin-bottom: 30px; font-size: 28px; }

        .progress-container-merah {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 40px;
        }

        .step-item-merah {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
            font-weight: 600;
            position: relative;
            z-index: 1;
            color: var(--text);
        }

        .step-item-merah span { margin-bottom: 8px; color: #999; }
        .step-item-merah.active span, .step-item.completed span { color: #d84183; }

        .circle-merah {
            width: 35px; 
            height: 35px; 
            border: 2px solid #ccc;
            border-radius: 50%; 
            display: flex; 
            justify-content: center;
            align-items: center; 
            background: white; 
            font-weight: bold;
            transition: all 0.3s ease;
            color: var(--text);
        }

        .step-item-merah.active .circle { border-color: #333; }
        .step-item-merah.completed .circle {
            background-color: #d84183; border-color: #d84183; color: white;
        }

        .line-merah {
            flex-grow: 1; height: 2px; background-color: #ccc;
            margin-top: 22px; margin-left: -10px; margin-right: -10px;
        }

        .line-merah.active { background-color: #d84183; }

/* Pastikan hanya yang active yang muncul */
.form-step {
    display: none !important;
}
.form-step.active {
    display: block !important;
}

/* Tambahkan ini agar layout tombol rapi */
.button-group {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .input-group-merah { margin-bottom: 15px; }
        .input-group-merah label { 
            display: block; 
            margin-bottom: 5px; 
            font-size: 14px;
            color: var(--text); 
        }
        .input-group-merah input, .input-group-merah select {

            border: none;
            border-bottom: 1px solid #ccc;
            outline: none;
            padding: 8px 5px;
            width: 100%;
        }



        .button-group { display: flex; gap: 10px; margin-top: 30px; }
        button.form-btn {
            flex: 1; padding: 12px; border: none; border-radius: 4px;
            color: white; font-weight: bold; cursor: pointer;
            background-color: #d84183; transition: opacity 0.3s;
        }

        button.form-btn:hover { opacity: 0.9; }
        .btn-prev { background-color: #666 !important; }