/* --- Full height supaya bisa center vertikal --- */
html, body {
    height: 100%;
}

/* opsional: warna latar belakang halaman */
body {
    background: #86b6e2;
}

/* --- Viewport login: pusatkan isi (wrap) di tengah layar --- */
.login-viewport {
    min-height: 100vh; /* setinggi layar */
    display: flex;
    align-items: center; /* center vertical */
    justify-content: center; /* center horizontal */
    padding: 24px; /* supaya di HP tidak mepet pinggir */
}

/* --- Kartu login utama (elemen .wrap yang sudah ada) --- */
.wrap {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 16px; /* sudut rounded */
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
    overflow: hidden; /* bagian gambar ikut rounded */
    width: 100%;
    max-width: 900px; /* sesuaikan agar “panjang” sama seperti contoh */
}

    /* --- Kolom kiri (logo) --- */
    .wrap .img {
        background-repeat: no-repeat;
        background-position: center 5px; /* posisikan logo */
        background-size: 300px auto; /* skala logo; sesuaikan jika perlu */
        background-color: #fff;
        flex: 0 0 40%; /* porsi lebar kolom kiri */
        min-height: 220px; /* tinggi minimum agar proporsional */
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding-top: 16px; /* ruang untuk teks "Pharmacy Purchasing System" */
    }

/* --- Kolom kanan (form) --- */
.login-wrap {
    flex: 1 1 auto;
    background: #fff;
}

/* --- Responsif: di layar kecil jadi satu kolom --- */
@media (max-width: 767.98px) {
    .wrap {
        border-radius: 12px;
    }

        .wrap .img {
            flex-basis: 100%;
            min-height: 140px;
            background-position: center;
        }
}