/* =========================
RESET GLOBAL
========================= */
html, body {
margin: 0;
padding: 0;
height: 100%;
font-family: 'Segoe UI', Poppins, sans-serif;

/* FIX CSS lama */
padding-top: 0 !important;
}

/* =========================
BODY CENTER PERFECT
========================= */
body {
display: flex;
justify-content: center;
align-items: center;

min-height: 100vh;

background: linear-gradient(135deg, #eef2f7, #f8fafc);
}

/* =========================
FORM CENTER FIX
========================= */
#login_form {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}

/* =========================
LOGIN BOX
========================= */
#loginbox {
width: 360px;
padding: 35px 30px;

background: #ffffff;
border-radius: 18px;

box-shadow: 0 20px 50px rgba(0,0,0,0.08);
border: 1px solid #eee;

display: flex;
flex-direction: column;
align-items: center;

margin: 0;
animation: fadeInUp 0.6s ease;
}

/* =========================
LOGO
========================= */
#loginbox img {
height: 95px;
margin-bottom: 10px;
filter: drop-shadow(0 5px 10px rgba(0,0,0,0.1));
}

/* =========================
TITLE
========================= */
#loginbox div[style*="font-size:1.5em"] {
font-weight: 600;
color: #111827;
}

#loginbox div[style*="font-size:0.9em"] {
color: #6b7280;
}

/* =========================
TEXT KECIL
========================= */
.discreet {
font-size: 13px;
color: #6b7280;
}

/* =========================
INPUT
========================= */
#loginbox input[type="text"],
#loginbox input[type="password"] {
width: 90%;
padding: 14px 16px;

border-radius: 12px;
border: 1px solid #e5e7eb;

background: #f9fafb;
color: #111827;
font-size: 14px;

outline: none;
transition: all 0.25s ease;
}

/* placeholder */
#loginbox input::placeholder {
color: #9ca3af;
}

/* hover */
#loginbox input:hover {
border-color: #cbd5e1;
}

/* focus */
#loginbox input:focus {
background: #ffffff;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

/* =========================
BUTTON
========================= */
#loginbox input[type="button"] {
width: 90%;
padding: 14px;

border: none;
border-radius: 12px;

background: linear-gradient(135deg, #4facfe, #3b82f6);
color: #ffffff;

font-size: 15px;
font-weight: 600;
letter-spacing: 0.3px;

cursor: pointer;
transition: all 0.25s ease;
}

/* hover */
#loginbox input[type="button"]:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(59,130,246,0.25);
}

/* klik */
#loginbox input[type="button"]:active {
transform: scale(0.98);
box-shadow: 0 5px 15px rgba(59,130,246,0.2);
}

/* =========================
SPACING FIX INTERNAL
========================= */
#loginbox > div {
width: 100%;
}

/* =========================
ANIMATION
========================= */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(25px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* =========================
ANTI SHIFT (PENTING)
========================= */
body, html {
overflow: hidden;
}
/* =========================
FORCE RESPONSIVE LOGIN (OVERRIDE)
========================= */

/* reset semua pengaruh lama */
html, body {
margin: 0 !important;
padding: 0 !important;
height: 100%;
overflow: auto !important; /* penting untuk mobile */
}

/* body center tapi tetap fleksibel */
body {
display: flex;
justify-content: center;
align-items: center;

min-height: 100vh;
padding: 15px; /* biar ada jarak di HP */

background: linear-gradient(135deg, #eef2f7, #f8fafc);
}

/* form full fleksibel */
#login_form {
width: 100%;
display: flex;
justify-content: center;
}

/* login box RESPONSIVE */
#loginbox {
width: 100% !important;
max-width: 380px;

padding: 30px 20px;
border-radius: 16px;

margin: auto;
box-sizing: border-box;
}

/* semua isi full width */
#loginbox input,
#loginbox div {
width: 100% !important;
box-sizing: border-box;
}

/* input fix */
#loginbox input[type="text"],
#loginbox input[type="password"] {
width: 100% !important;
}

/* button fix */
#loginbox input[type="button"] {
width: 100% !important;
}

/* =========================
MOBILE FIX KHUSUS
========================= */
@media (max-width: 480px) {

body {
align-items: flex-start; /* biar tidak ke tengah atas aneh */
padding-top: 40px;
}

#loginbox {
padding: 25px 18px;
}

#loginbox img {
height: 70px !important;
}

/* title */
#loginbox div[style*="font-size:1.5em"] {
font-size: 1.3em !important;
}

/* subtitle */
#loginbox div[style*="font-size:0.9em"] {
font-size: 0.85em !important;
}
}