/* ============================================================
   LOGIN PAGE
   Modern Minimal • Pastel Gradient
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700&family=Inter:wght@400;500;600&display=swap');

:root{

    --primary:#14b8a6;
    --primary-dark:#0f766e;
    --primary-light:#99f6e4;

    --accent:#fb923c;

    --bg-1:#f8fffd;
    --bg-2:#edfdf9;
    --bg-3:#f0fdfa;

    --white:#ffffff;

    --text:#0f172a;
    --muted:#64748b;

    --border:#dbeafe;

    --radius:20px;
    --radius-sm:12px;

    --shadow:
        0 10px 30px rgba(15,23,42,.06),
        0 2px 8px rgba(15,23,42,.04);

}

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

html,
body{
    height:100%;
}

body{

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

    color:var(--text);

    background:
        linear-gradient(
            135deg,
            #f8fffd 0%,
            #eefcf8 40%,
            #f4fbff 100%
        );

    min-height:100vh;

    -webkit-font-smoothing:antialiased;
}

/* hilangkan canvas particle */
#bubbles{
    display:none !important;
}

.login-shell{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:32px;

}

.login-card{

    width:100%;
    max-width:430px;

    background:var(--white);

    border:1px solid rgba(15,118,110,.08);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:40px;

}

.login-brand{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:34px;

}

.brand-icon{

    width:52px;

    height:52px;

    border-radius:16px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:#fff;

    font-size:22px;

}

.brand-name{

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

    font-size:1.25rem;

    font-weight:700;

    color:var(--primary-dark);

}

.login-title{

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

    font-size:1.8rem;

    font-weight:700;

    margin-bottom:8px;

}

.login-subtitle{

    color:var(--muted);

    font-size:.95rem;

    margin-bottom:30px;

}

.form-label{

    font-weight:600;

    color:var(--text);

    margin-bottom:8px;

}

.input-group{

    margin-bottom:18px;

}

.input-group-text{

    background:#fff;

    border:1px solid #dbe4ea;

    border-right:none;

    border-radius:12px 0 0 12px;

    color:#94a3b8;

}

.form-control{

    border:1px solid #dbe4ea;

    border-left:none;

    border-radius:0 12px 12px 0;

    padding:.8rem .9rem;

    transition:.2s;

}

.form-control:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(20,184,166,.12);

}

.input-group:focus-within .input-group-text{

    border-color:var(--primary);

}

.login-link{

    color:var(--primary-dark);

    text-decoration:none;

    font-weight:500;

}

.login-link:hover{

    color:var(--primary);

}

.btn-login{

    width:100%;

    padding:.85rem;

    border:none;

    border-radius:12px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:#fff;

    font-weight:600;

    transition:.2s;

}

.btn-login:hover{

    transform:translateY(-1px);

    box-shadow:0 12px 24px rgba(20,184,166,.18);

}

.btn-login:active{

    transform:none;

}

.alert{

    border-radius:12px;

}

@media (max-width:768px){

    .login-card{

        padding:30px 24px;

    }

    .login-title{

        font-size:1.55rem;

    }

}

@media (max-width:480px){

    .login-shell{

        padding:18px;

    }

    .login-card{

        border-radius:18px;

        padding:24px;

    }

    .brand-icon{

        width:46px;

        height:46px;

        font-size:20px;

    }

    .brand-name{

        font-size:1.1rem;

    }

}