/* =====================================================================
   ONESERVICE -- halaman Login / Register (template/HeaderFront.php)
   Hanya tampilan; struktur & animasi login Neon (neon-login.js) tetap.
   ===================================================================== */
body.login-page {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  background: #16213a;
  background: radial-gradient(1200px 600px at 50% -10%, #2a3b66 0%, #16213a 55%, #0f172a 100%) fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.login-page .login-header {
  background: transparent !important;
  padding: 70px 0 26px !important;
}
.login-page .login-header.login-caret:after { display: none; }
.login-page .login-header .logo {
  display: inline-block;
  background: #fff;
  padding: 14px 22px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.login-page .login-header .logo img { display: block; width: 200px; height: auto; }
.login-page .login-header .login-content { width: 100%; max-width: 380px; }

.login-page .login-form { background: transparent; padding-top: 6px; }
.login-page .login-form .login-content {
  max-width: 380px;
  background: #fff;
  border-radius: 16px;
  padding: 30px 28px 22px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, .35);
}
.login-page #form_login:before {
  content: 'Masuk ke Oneservice';
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  text-align: left;
}
.login-page #form_login:after {
  content: '';
  display: block;
}
.login-page #form_login > .form-group:first-of-type { margin-top: 18px; }
.login-page .login-form .form-group { margin-bottom: 14px; }
.login-page .login-form .form-group .input-group {
  background: #f8fafc;
  border: 1px solid #d5dbe5;
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.login-page .login-form .form-group .input-group.focused {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
  background: #fff;
}
.login-page .login-form .form-group .input-group .input-group-addon,
.login-page .login-form .form-group .input-group .form-control {
  background: transparent !important;
  border: 0 !important;
  color: #1e293b !important;
  height: 46px;
  box-shadow: none !important;
  font-size: 14px;
}
.login-page .login-form .form-group .input-group .input-group-addon { color: #7a8699 !important; }
.login-page .login-form .form-group .input-group .input-group-addon:after { display: none; }
.login-page .login-form .form-group .input-group .form-control::placeholder { color: #94a3b8; }
.login-page .login-form .form-group .btn-login {
  background: #2563eb !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 10px;
  height: 46px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  padding: 0 16px;
  transition: background .15s;
}
.login-page .login-form .form-group .btn-login:hover { background: #1d4ed8 !important; }
.login-page .login-form .form-group .btn-login i { float: none; margin-right: 6px; }
.login-page .login-form .link,
.login-page .login-bottom-links .link { color: #2563eb !important; font-weight: 500; font-size: 13px; }
.login-page .login-form .link:hover { text-decoration: underline; }
.login-page .login-bottom-links { padding-top: 0; text-align: center; }
.login-page .form-login-error {
  border-radius: 10px;
  margin-bottom: 16px;
  background: #fef2f2 !important;
  border: 1px solid #fecaca;
  overflow: hidden;
  text-align: left;
}
.login-page .form-login-error h3 {
  background: transparent !important;
  color: #b91c1c !important;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 14px 0 !important;
  margin: 0;
}
.login-page .form-login-error p { color: #991b1b !important; padding: 2px 14px 10px !important; margin: 0; font-size: 12.5px; }
.login-page .login-progressbar { background: #0f172a; }
.login-page .login-progressbar div { background: #2563eb; }
.login-page .login-progressbar-indicator h3,
.login-page .login-progressbar-indicator span { color: #e2e8f0; }

@media (max-width: 480px) {
  .login-page .login-header { padding: 40px 0 20px !important; }
  .login-page .login-form .login-content { margin: 0 14px; padding: 24px 20px 18px; }
}