body{
    margin:0;
    min-height:100vh;
    font-family:Arial,sans-serif;
    overflow:hidden;
}

/* ARKA PLAN GRID */
.background-grid{
    position:fixed;
    inset:0;
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    grid-auto-rows:180px;
    gap:10px;
    padding:10px;
    background:#000;
    z-index:-1;
}
.background-grid div{
    background-size:cover;
    background-position:center;
    border-radius:12px;
    filter:brightness(.7);
}

/* LOGO */
.logo-container{
    text-align:center;
    margin-top:6vh;
    margin-bottom:20px;
}
.logo-container img{
    max-width:320px;
    width:80%;
}

/* LOGIN BOX */
.login-box,
.register-box{
    max-width:420px;
    margin:auto;
    margin-top:8vh;
    padding:35px;
    border-radius:20px;
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);
    box-shadow:0 0 40px rgba(0,0,0,.6);
    color:#fff;
}

.login-box h2,
.register-box h2{
    text-align:center;
    margin-bottom:25px;
    font-weight:bold;
}

/* INPUT */
.form-control{
    background:rgba(255,255,255,.25);
    border:none;
    color:#fff;
}
.form-control::placeholder{color:#ddd}
.form-control:focus{
    background:rgba(255,255,255,.35);
    color:#fff;
    box-shadow:none;
}

/* BUTONLAR */
.btn-login,
.btn-register{
    background:linear-gradient(135deg,#00c6ff,#0072ff);
    border:none;
    color:#fff;
    font-weight:bold;
    border-radius:30px;
    padding:12px;
}
.btn-login:hover,
.btn-register:hover{opacity:.9}

/* FOOTER LINK */
.login-footer a,
.register-footer a{
    color:#00c6ff;
}

/* MODAL */
.modal-bg{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.75);
    z-index:9999;
    align-items:center;
    justify-content:center;
}
.modal-box{
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(15px);
    padding:30px;
    border-radius:18px;
    width:360px;
    color:#fff;
    position:relative;
}
.modal-box input{
    width:100%;
    padding:10px;
    margin-bottom:15px;
    border-radius:8px;
    border:none;
}
.modal-box button{
    width:100%;
    padding:12px;
    border:none;
    border-radius:20px;
    background:#1e90ff;
    color:#fff;
    font-weight:bold;
}
.modal-box .close{
    position:absolute;
    top:10px;
    right:14px;
    cursor:pointer;
    font-size:18px;
}