/* ==========================================
   ALULANET HOTSPOT LOGIN
   Premium Minimal UI
   Part 1
========================================== */

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

html,
body{

    width:100%;
    min-height:100%;
    font-family:'Poppins',sans-serif;
    background:#f4f7fb;
}

/* Background */

body{

    display:flex;
    justify-content:center;
    align-items:center;
    padding:30px 18px;
    position:relative;
    overflow-x:hidden;

    background:
    radial-gradient(circle at top,#ffffff,#eef4ff);
}


/* Decorative Waves */

body::before{

    content:"";
    position:fixed;
    width:450px;
    height:450px;

    top:-180px;
    right:-180px;

    border-radius:50%;

    background:rgba(22,119,255,.05);

}

body::after{

    content:"";

    position:fixed;

    width:380px;

    height:380px;

    left:-160px;

    bottom:-170px;

    border-radius:50%;

    background:rgba(22,119,255,.06);

}


/* Container */

.page{

    width:100%;

    max-width:420px;

}


/* Login Card */

.login-card{

    background:#fff;

    border-radius:28px;

    padding:38px 30px;

    box-shadow:

    0 18px 45px rgba(0,0,0,.08);

    text-align:center;

    opacity:0;

    transform:translateY(25px);

    transition:.6s;

}

.login-card.show{

    opacity:1;

    transform:translateY(0);

}


/* Logo */

.logo img{

    width:210px;

    max-width:85%;

    display:block;

    margin:auto;

}


/* Tagline */

.tagline{

    margin-top:8px;

    color:#7a8798;

    font-size:14px;

    font-weight:400;

}


/* Heading */

h2{

    margin-top:30px;

    font-size:23px;

    color:#22324b;

    font-weight:600;

}

.subtitle{

    margin-top:8px;

    color:#90a0b4;

    font-size:14px;

    margin-bottom:28px;

}


/* Input */

.input-group{

    width:100%;

    height:58px;

    background:#f5f8fd;

    border:1px solid #dde7f5;

    border-radius:16px;

    display:flex;

    align-items:center;

    padding:0 18px;

    transition:.3s;

}

.input-group:focus-within{

    border-color:#1677ff;

    box-shadow:

    0 0 0 4px rgba(22,119,255,.12);

}


.icon{

    font-size:20px;

    margin-right:12px;

}


.input{

    width:100%;

    border:none;

    outline:none;

    background:transparent;

    font-size:15px;

    color:#22324b;

    font-family:'Poppins',sans-serif;

}

.input::placeholder{

    color:#9aa9bc;

}


/* Button */

.login-btn{

    width:100%;

    height:56px;

    margin-top:24px;

    border:none;

    border-radius:16px;

    cursor:pointer;

    color:#fff;

    font-size:16px;

    font-weight:600;

    font-family:'Poppins',sans-serif;

    background:linear-gradient(135deg,#1677ff,#3f97ff);

    transition:.3s;

}

.login-btn:hover{

    transform:translateY(-2px);

    box-shadow:

    0 12px 28px rgba(22,119,255,.28);

}

.login-btn:active{

    transform:scale(.98);

}

.login-btn:disabled{

    opacity:.75;

    cursor:not-allowed;

}
/* ==========================================
   ALULANET HOTSPOT LOGIN
   Premium Minimal UI
   Part 2
========================================== */


/* Divider */

.divider{

    border:none;

    border-top:1px solid #e8edf5;

    margin:35px 0 20px;

}


/* Internet Supported */

.support-text{

    font-size:13px;

    color:#8c98a9;

    font-weight:500;

    letter-spacing:.5px;

}


/* Logo Difusi */

.support-logo{

    margin-top:18px;

}

.support-logo img{

    width:130px;      /* lebih kecil agar proporsional */
    max-width:55%;
    height:auto;
    display:block;
    margin:auto;
    transition:.3s;

}

.support-logo img:hover{

    transform:scale(1.03);

}


/* Company */

.company{

    margin-top:10px;

    font-size:12px;

    color:#8d99a8;

    letter-spacing:.8px;

    font-weight:500;

}


/* Error Login */

.error{

    margin-top:18px;

    background:#fff2f2;

    border:1px solid #ffd3d3;

    color:#d93025;

    padding:12px;

    border-radius:12px;

    font-size:13px;

    line-height:1.5;

}


/* Trial Button */

.trial{

    margin-top:20px;

}

.trial a{

    display:inline-block;

    padding:11px 22px;

    border-radius:12px;

    border:1px solid #1677ff;

    color:#1677ff;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    transition:.3s;

}

.trial a:hover{

    background:#1677ff;

    color:#fff;

}


/* Loading Animation */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.login-card.show{

    animation:fadeUp .7s ease;

}


/* Responsive */

@media(max-width:480px){

.login-card{

    padding:30px 22px;

    border-radius:22px;

}

.logo img{

    width:185px;

}

h2{

    font-size:21px;

}

.input-group{

    height:54px;

}

.login-btn{

    height:54px;

}

.support-logo img{

    width:115px;

}

}


/* Very Small Screen */

@media(max-width:340px){

.logo img{

    width:165px;

}

h2{

    font-size:18px;

}

.subtitle{

    font-size:13px;

}

.login-btn{

    font-size:15px;

}

}


/* Smooth Transition */

button,
input,
img{

    transition:.3s ease;

}


/* Autofill Chrome */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{

    -webkit-box-shadow:0 0 0 1000px #f5f8fd inset;

    -webkit-text-fill-color:#22324b;

}


/* Selection */

::selection{

    background:#1677ff;

    color:#fff;

}


/* Scrollbar */

::-webkit-scrollbar{

    width:6px;

}

::-webkit-scrollbar-thumb{

    background:#cdd9ea;

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:transparent;

}