/*==================================================
    ARVACLOUD LOGIN / REGISTER
    Redesigned — modern, rapi, & dijamin nggak
    overflow horizontal di HP.
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html, body{
    /* Pengaman utama: apapun yang kejadian di dalam (termasuk widget
       reCAPTCHA yang lebarnya suka fixed & nggak responsive), halaman
       nggak akan pernah bisa di-scroll ke samping. */
    max-width:100%;
    overflow-x:hidden;
}

body{
    font-family:'Inter',sans-serif;
    background:#f4f7fb;
    color:#1f2937;
    -webkit-font-smoothing:antialiased;
}

.login-page{
    min-height:100vh;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 20px;
    background:
        radial-gradient(circle at 15% 15%, rgba(227,38,28,.06), transparent 40%),
        radial-gradient(circle at 85% 85%, rgba(227,38,28,.05), transparent 40%),
        #f4f7fb;
}

.login-wrapper{
    width:100%;
    max-width:1040px;
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    display:grid;
    grid-template-columns:1fr 440px;
    border:1px solid #eef0f5;
    box-shadow:0 25px 70px -15px rgba(15,23,42,.15);
}

/*==================================================
LEFT — BRANDING
==================================================*/

.login-brand{
    padding:60px 56px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:linear-gradient(160deg,#fffaf8 0%,#fff 55%);
    border-right:1px solid #eef2f7;
    position:relative;
}

.brand-logo{
    width:180px;
    margin-bottom:32px;
}

.brand-badge{
    display:inline-flex;
    width:max-content;
    padding:7px 16px;
    border-radius:50px;
    background:#fff1ee;
    color:#e3261c;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.6px;
    margin-bottom:22px;
}

.login-brand h1{
    font-size:38px;
    font-weight:800;
    line-height:1.2;
    color:#0f172a;
    margin-bottom:16px;
    letter-spacing:-.5px;
}

.login-brand p{
    font-size:15px;
    line-height:1.75;
    color:#64748b;
    max-width:440px;
}

.brand-feature{
    list-style:none;
    margin-top:34px;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.brand-feature li{
    display:flex;
    align-items:center;
    gap:11px;
    color:#334155;
    font-size:14.5px;
    font-weight:500;
}

.brand-feature i{
    color:#22c55e;
    font-size:17px;
    flex-shrink:0;
}

/*==================================================
RIGHT — FORM CARD
==================================================*/

.login-card{
    padding:56px 48px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
}

.login-card h2{
    font-size:28px;
    font-weight:800;
    color:#0f172a;
    margin-bottom:8px;
    letter-spacing:-.3px;
}

.login-card>p{
    color:#64748b;
    font-size:14.5px;
    margin-bottom:28px;
}

.login-alert{
    background:#fef2f2;
    border:1px solid #fecaca;
    color:#dc2626;
    font-size:14px;
    padding:13px 16px;
    border-radius:12px;
    margin-bottom:20px;
}

.intended-product-banner{
    display:flex;align-items:flex-start;gap:12px;
    background:linear-gradient(135deg,#fff1ee,#ffe1db);
    border:1.5px solid #ffb49e;border-radius:12px;
    padding:14px 16px;margin-bottom:20px;
    font-size:13.5px;color:#334155;line-height:1.5;
}
.intended-product-banner i{ color:#e3261c;font-size:19px;margin-top:1px;flex-shrink:0; }
.intended-product-banner strong{ color:#5a0806; }

.form-group{
    margin-bottom:18px;
}

.form-group label{
    display:block;
    font-size:13.5px;
    font-weight:600;
    color:#374151;
    margin-bottom:7px;
}

.form-control{
    width:100%;
    height:50px;
    border:1.5px solid #e2e8f0;
    border-radius:11px;
    padding:0 16px;
    font-size:14.5px;
    transition:.2s;
    background:#fff;
    color:#0f172a;
}

.form-control:focus{
    outline:none;
    border-color:#e3261c;
    box-shadow:0 0 0 4px rgba(227,38,28,.10);
}

.login-option{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:22px;
}

.remember{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13.5px;
    color:#4b5563;
    cursor:pointer;
}

/* reCAPTCHA suka punya lebar tetap ~304px yang nggak nyusut sendiri
   -- ini dipaksa muat di container manapun (termasuk HP paling
   sempit), diciutin proporsional via transform:scale. */
.recaptcha-wrap{
    width:100%;
    overflow:hidden;
    margin-bottom:18px;
}

.recaptcha-wrap .g-recaptcha{
    transform:scale(1);
    transform-origin:0 0;
}

.btn-login{
    width:100%;
    height:52px;
    border:none;
    border-radius:11px;
    background:#e3261c;
    color:#fff;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    transition:.2s;
}

.btn-login:hover{
    background:#a3130f;
    box-shadow:0 10px 24px rgba(227,38,28,.22);
}

.btn-login:active{
    transform:scale(.98);
}

.register-link{
    margin-top:24px;
    text-align:center;
    color:#64748b;
    font-size:13.5px;
}

.register-link a{
    color:#e3261c;
    text-decoration:none;
    font-weight:700;
}

.register-link a:hover{
    text-decoration:underline;
}

.legal-links{
    text-align:center;
    font-size:12px;
    color:#94a3b8;
    margin-top:16px;
    line-height:1.6;
}

.legal-links a{
    color:#e3261c;
    text-decoration:none;
    font-weight:600;
}

.social-divider{
    display:flex;
    align-items:center;
    gap:12px;
    margin:16px 0;
    color:#94a3b8;
    font-size:12.5px;
}

.social-divider::before,
.social-divider::after{
    content:"";
    flex:1;
    height:1px;
    background:#e2e8f0;
}

.btn-google{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    padding:12px;
    border:1.5px solid #e2e8f0;
    border-radius:11px;
    background:#fff;
    color:#334155;
    font-weight:600;
    font-size:14.5px;
    text-decoration:none;
    transition:.2s;
}

.btn-google:hover{
    background:#f8fafc;
    color:#334155;
    border-color:#cbd5e1;
}

.btn-google img{
    width:19px;
    height:19px;
    flex-shrink:0;
}

/*==================================================
RESPONSIVE — TABLET (branding disembunyiin, form full width)
==================================================*/

@media(max-width:900px){

    .login-page{
        padding:24px 16px;
    }

    .login-wrapper{
        grid-template-columns:1fr;
        max-width:460px;
    }

    .login-brand{
        padding:36px 32px 24px;
        text-align:center;
        align-items:center;
        border-right:none;
        border-bottom:1px solid #eef2f7;
    }

    .brand-logo{
        width:150px;
        margin-bottom:0;
    }

    .brand-badge,
    .login-brand h1,
    .login-brand p,
    .brand-feature{
        display:none;
    }

    .login-card{
        padding:32px 28px;
    }

}

/*==================================================
RESPONSIVE — MOBILE KECIL
==================================================*/

@media (max-width:380px){

    .login-page{
        padding:16px 10px;
    }

    .login-wrapper{
        border-radius:16px;
    }

    .login-brand{
        padding:28px 20px 18px;
    }

    .brand-logo{
        width:130px;
    }

    .login-card{
        padding:26px 18px;
    }

    .login-card h2{
        font-size:24px;
    }

    .form-control{
        height:46px;
        font-size:14px;
    }

    .btn-login,
    .btn-google{
        height:48px;
    }

    /* Di layar super sempit, reCAPTCHA diciutin dikit lagi biar
       nggak mepet-mepet banget ke tepi. */
    .recaptcha-wrap .g-recaptcha{
        transform:scale(.87);
    }

}