body {
    background-color: #f8f9fa;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color: #ff5f6d; stop-opacity: 1" /><stop offset="100%" style="stop-color: #ffc371; stop-opacity: 1" /></linearGradient></defs><rect width="100%" height="100%" fill="url(#grad1)" /></svg>');
    background-size: cover;
    background-position: center;
}


    /* Header styling */
    .header {
        /*background: transparent;*/
         background: #ff5f6d; 
            background: linear-gradient(to right, #ff5f6d, #ffc371);
        color: white;
        padding: 15px;
        text-align: center;
        position: relative;
    }
    .back-btn {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;
        color: white;
        text-decoration: none;
    }

    /* Styling form container */
    .login-container {
        max-width: 400px;
        margin: 40px auto;
        padding: 20px;
        background: rgba(255, 255, 255, 0.9); /* Transparansi putih */
        border-radius: 10px;
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(10px); /* Efek blur di belakang form */
        transition: all 0.3s ease-in-out;
    }

    /* Fieldset and Legend */
    fieldset {
        border: 1px solid #ddd;
        border-radius: 10px;
        padding: 15px;
    }
    legend {
        font-size: 1.2em;
        font-weight: bold;
        color: #ff5f6d;
    }

    /* Floating Label Input */
    .form-floating {
        position: relative;
        margin-bottom: 20px;
    }
    .form-floating input {
        border-radius: 5px;
        border: 1px solid #ddd;
        padding: 10px;
        transition: all 0.3s ease; /* Transisi halus */
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Efek shadow default */
    }

    .form-floating input:focus {
        border-color: #ff5f6d;
        box-shadow: 0 0 8px rgba(255, 95, 109, 0.7); /* Border bersinar oranye */
        outline: none;
    }

    .form-floating label {
        position: absolute;
        top: 0;
        left: 10px;
        font-size: 16px;
        transition: all 0.2s ease;
        color: #ff5f6d;
    }

    .form-floating input:focus ~ label,
    .form-floating input:not(:placeholder-shown) ~ label {
        top: -18px;
        left: 10px;
        font-size: 12px;
        color: #ff5f6d;
    }

    /* Button */
    .btn-danger {
        background-color: #ff5f6d;
        border: none;
        transition: background-color 0.3s ease, transform 0.2s ease;
    }
    .btn-danger:hover {
        background-color: #ffc371;
        transform: translateY(-2px);
    }

    /* Show Password Checkbox Styling */
    .form-check-input {
        border-color: #ff5f6d;
        color: #ff5f6d;
    }
    .form-check-input:checked {
        background-color: #ff5f6d;
        border-color: #ff5f6d;
    }

    .form-check-label {
        color: #ff5f6d;
    }