*{

margin:0;

padding:0;

box-sizing:border-box;

font-family:'Segoe UI',sans-serif;

}

body{

background:#eef3f8;

}



.overlay h1{

font-weight:700;

margin-bottom:15px;

}

.overlay p{

font-size:20px;

margin-bottom:10px;

}

/*=====================
KANAN
======================*/

.login-right{

width:55%;

display:flex;

justify-content:center;

align-items:center;

padding:40px;

}

.login-wrapper{

width:100%;

max-width:470px;

}

.login-card{

background:white;

padding:45px;

border-radius:20px;

box-shadow:0 15px 35px rgba(0,0,0,.08);

animation:fadeUp .7s;

}

.login-logo{

width:85px;

height:85px;

border-radius:50%;

background:#198754;

display:flex;

align-items:center;

justify-content:center;

font-size:40px;

color:white;

margin:auto;

}

.input-group-text{

background:#198754;

color:white;

border:none;

}

.form-control{

height:50px;

}

.btn-success{

height:50px;

font-weight:600;

border-radius:10px;

}

.btn-success:hover{

transform:translateY(-3px);

transition:.3s;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*=====================
RESPONSIVE
======================*/

@media(max-width:991px){

.login-left{

display:none;

}

.login-right{

width:100%;

padding:20px;

}

}
/*==========================
AUTH CONTAINER
==========================*/

.auth-container{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:30px;

    background:#f5f7fa;

}
.login-card{

    width:100%;

    max-width:460px;

    background:#fff;

    border-radius:20px;

    padding:40px;

    box-shadow:0 15px 40px rgba(0,0,0,.12);

}
/* =====================================================================
   PREMIUM THEME OVERRIDE — Billiard Training System
   Tema "meja biliar": hijau felt tua + aksen emas, kartu mengambang,
   tipografi lebih tegas. Ditambahkan di akhir file agar override
   aturan lama tanpa mengubah struktur HTML yang sudah ada.
   ===================================================================== */

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

:root{
    --felt-900:#0b3327;
    --felt-800:#0f4c3a;
    --felt-700:#146c50;
    --gold-500:#d4af37;
    --gold-400:#e6c65c;
    --ink-900:#16241f;
    --surface:#f4f7f6;
}

.auth-container{
    min-height:100vh;
    padding:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background:
        radial-gradient(circle at 12% 15%, rgba(212,175,55,.16), transparent 42%),
        radial-gradient(circle at 88% 85%, rgba(212,175,55,.10), transparent 45%),
        linear-gradient(160deg, var(--felt-900) 0%, var(--felt-800) 45%, #0c3b2d 100%);
    position:relative;
    overflow:hidden;
}

.auth-container::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size:26px 26px;
    opacity:.5;
    pointer-events:none;
}

.login-card{
    position:relative;
    width:100%;
    max-width:440px;
    background:#fffefb;
    border-radius:22px;
    padding:44px 40px;
    box-shadow:
        0 30px 60px -15px rgba(0,0,0,.45),
        0 2px 0 rgba(212,175,55,.35) inset;
    border:1px solid rgba(212,175,55,.25);
    animation:authFadeUp .55s ease both;
}

@keyframes authFadeUp{
    from{ opacity:0; transform:translateY(24px); }
    to{ opacity:1; transform:translateY(0); }
}

.login-logo{
    width:78px;
    height:78px;
    border-radius:20px;
    background:linear-gradient(145deg, var(--felt-700), var(--felt-900));
    box-shadow:0 10px 24px -6px rgba(15,76,58,.55);
    color:var(--gold-400);
    font-size:34px;
}

.auth-container h1,
.auth-container h2,
.auth-container h3,
.auth-container h4{
    font-family:'Poppins',sans-serif;
    font-weight:700;
    color:var(--ink-900);
}

.auth-container .text-success,
.auth-container a{
    color:var(--felt-700);
}

.input-group-text{
    background:var(--felt-800);
    border:1px solid var(--felt-800);
}

.form-control{
    border-radius:10px;
    border:1.5px solid #e4e2d8;
    font-size:.95rem;
}

.form-control:focus{
    border-color:var(--gold-500);
    box-shadow:0 0 0 .2rem rgba(212,175,55,.2);
}

.auth-container .btn-success{
    background:linear-gradient(135deg, var(--felt-700), var(--felt-900));
    border:none;
    border-radius:12px;
    letter-spacing:.02em;
    box-shadow:0 12px 24px -8px rgba(15,76,58,.55);
}

.auth-container .btn-success:hover{
    background:linear-gradient(135deg, var(--felt-800), var(--felt-900));
    transform:translateY(-2px);
}

.auth-container .badge.bg-success{
    background:var(--gold-500) !important;
    color:var(--ink-900);
}