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

        body {
            height: 100vh;
        }

        /* MAIN CONTAINER */
        .container {
            display: flex;
            height: 100vh;
        }

        /* LEFT SIDE */
        .left {
            width: 35%;
            background: #f4c400;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin: 0px;
            color: #1a1a1a;
        }

        .logo1{
            width: 350px;
            height: 340px;
            margin-top: 15px;
            margin-left: 50px;
            justify-content: center;
            align-items: center;
        }

        .logo2{
            width: 380px;
            margin-left: 30px;
            height: 190px;
            justify-content: center; 
            align-items: center;
        }

        /* RIGHT SIDE - Menggunakan PHP untuk path gambar */
        .right {
            width: 65%;
            background-image: url('../asset/Alkhalifibg.png') !important;
            position: relative;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        /* OVERLAY BLUR */
        .overlay {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(255,255,255,0.4);
            backdrop-filter: blur(3px);
        }

        /* LOGIN BOX */
        .login-box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            z-index: 2;
        }

        .login-box h2 {
            margin-bottom: 30px;
            font-style: italic;
            text-align: center;
            color: #333;
        }

        /* PESAN ERROR */
        .error-msg {
            color: #D84315;
            background: rgba(255, 235, 238, 0.9);
            padding: 10px;
            border-radius: 4px;
            text-align: center;
            font-size: 14px;
            margin-bottom: 20px;
            font-weight: bold;
            border-left: 4px solid #D84315;
        }

        /* INPUT STYLE */
        .input-group {
            position: relative;
            margin-bottom: 25px;
        }

        .input-group input {
            width: 100%;
            border: none;
            border-bottom: 2px solid #333;
            outline: none;
            padding: 8px 5px;
            background: transparent;
            font-size: 16px;
        }

        .input-group label {
            position: absolute;
            top: 8px;
            left: 5px;
            color: #333;
            font-size: 14px;
            transition: 0.3s;
            pointer-events: none; /* Biar bisa diklik tembus ke input */
        }

        /* ANIMATION */
        .input-group input:focus + label,
        .input-group input:valid + label {
            top: -10px;
            font-size: 12px;
            color: #000;
            font-weight: bold;
        }

        /* BUTTON */
        button {
            width: 100%;
            padding: 10px;
            border: none;
            background: linear-gradient(to right, #ff9966, #ff5e62);
            color: white;
            font-weight: bold;
            cursor: pointer;
            border-radius: 4px;
            transition: 0.3s;
            font-size: 16px;
        }

        button:hover {
            opacity: 0.85;
            transform: translateY(-2px);
        }

        /* Responsive untuk layar kecil */
@media (max-width: 768px) {
    /* FIX UTAMA: Kunci layar HP agar tidak bisa di-scroll ke bawah maupun ke kanan */
    html, body {
        position: fixed;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }

    .container { 
        flex-direction: column; 
        width: 100%;
        height: 100vh;
        overflow: hidden; /* Mencegah overflow komponen internal */
    }
    
    /* Sembunyikan Sisi Kiri bawaan desktop agar tidak double */
    .left { 
        display: none; 
    }
    
    /* Sisi Kanan menjadi Fullscreen & Backgroundnya diganti pakai Logo 2 */
    .right { 
        width: 100%; 
        height: 100vh; 
        /* Mengubah background menggunakan path Logo 2 */
        background: rgba(255, 255, 255, 0.85) !important;
       
        background-size: 80% auto; /* Ukuran logo di background agar proporsional di HP */
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
    }

    /* Membuat overlay putih transparan agar Logo 2 di background menjadi samar/soft */
    .overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: url('../asset/Alkhalifibg.png') !important;  /* Mengaburkan background agar form login tetap kontras */
        backdrop-filter: blur(2px);
    }

    /* Memastikan Form Login Berada Tepat di Tengah-Tengah Layar HP */
    .login-box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 85%; /* Lebar form box fleksibel mengikuti layar HP */
        max-width: 320px;
        z-index: 2;
        background: rgba(255, 255, 255, 0.95); /* Kotak form putih bersih agar stand out */
        padding: 30px 25px;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); /* Efek bayangan halus */
    }

    /* Menyembunyikan teks tulisan H2 "Log-in" bawaan desktop */
    .login-box h2 {
        display: none;
    }

    /* TRIK CSS: Memunculkan LOGO 1 tepat di atas form login tanpa mengubah file PHP */
    .login-box::before {
        content: "";
        display: block;
        width: 140px; /* Ukuran lebar Logo 1 di HP */
        height: 130px; /* Sesuaikan dengan tinggi proporsional Logo 1 kamu */
        margin: -10px auto 25px auto; /* Membuat posisi logo pas di tengah atas form */
        background-image: url('../asset/Alkhalifi_Logo.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* Merapikan susunan input form di dalam kotak */
    .input-group {
        margin-bottom: 20px;
    }

    .input-group input {
        border-bottom: 2px solid #f4c400; /* Menggunakan warna tema kuning emas kamu untuk garis bawah */
        padding: 10px 5px;
        font-size: 15px;
    }

    .input-group label {
        top: 10px;
        font-size: 14px;
        color: #666;
    }

    /* Animasi label tetap bekerja saat input fokus */
    .input-group input:focus + label,
    .input-group input:valid + label {
        top: -12px;
        font-size: 12px;
        color: #1a1a1a;
    }

    /* Tombol Login disesuaikan ukurannya agar serasi dengan kotak form */
    button {
        padding: 12px;
        font-size: 15px;
        border-radius: 6px;
        margin-top: 10px;
    }
}