:root{
  --neon:#39ff14; /* hijau stabilo */
  --bg:#050a06;
}

body.login-page{
  min-height:100vh;
  background: var(--bg);
  color:#eaf9ec;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  overflow-x:hidden;
}

/* Matrix canvas */
#matrix{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
}

/* Overlay biar teks kebaca */
.login-overlay{
  position:fixed;
  inset:0;
  z-index:1;
  background:
    radial-gradient(900px 520px at 15% 15%, rgba(57,255,20,.18), transparent 60%),
    radial-gradient(900px 520px at 85% 20%, rgba(57,255,20,.12), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.58), rgba(0,0,0,.78));
}

.login-wrap{
  position:relative;
  z-index:2;
}

.brand-top{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.9rem;
  margin-bottom: 1.1rem;
}
.brand-top img{
  width:52px;height:52px;
  border-radius: 14px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(57,255,20,.35);
  box-shadow: 0 0 24px rgba(57,255,20,.20);
}
.brand-name{ font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.brand-sub{ color: rgba(234,249,236,.75); font-size:.85rem; }

/* Terminal card */
.terminal{
  border-radius: 18px;
  border: 1px solid rgba(57,255,20,.35);
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 55px rgba(0,0,0,.55), 0 0 40px rgba(57,255,20,.12);
  overflow:hidden;
}

.terminal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: .75rem 1rem;
  border-bottom: 1px solid rgba(57,255,20,.22);
}

.dots{ display:flex; gap:.45rem; align-items:center; }
.dot{ width:10px; height:10px; border-radius:999px; background: rgba(234,249,236,.18); }
.dot:nth-child(1){ background: rgba(255,99,71,.55); }
.dot:nth-child(2){ background: rgba(255,193,7,.55); }
.dot:nth-child(3){ background: rgba(25,135,84,.55); }

.terminal-title{
  font-size: .82rem;
  letter-spacing:.08em;
  color: rgba(234,249,236,.78);
}

.terminal-body{ padding: 1.1rem 1.1rem 1.25rem; }

.kbd-hint{
  color: rgba(57,255,20,.85);
  font-size: .78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* Inputs */
.login-page .form-label{ color: rgba(234,249,236,.85); font-weight:700; }
.login-page .input-group-text{
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(57,255,20,.22);
  color: rgba(57,255,20,.92);
  border-right:0;
  border-radius: 12px 0 0 12px;
}
.login-page .form-control{
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(57,255,20,.22);
  color: #eaf9ec;
  border-radius: 0 12px 12px 0;
}
.login-page .form-control:focus{
  border-color: rgba(57,255,20,.55);
  box-shadow: 0 0 0 .2rem rgba(57,255,20,.12);
}

/* Button */
.btn-neon{
  background: rgba(57,255,20,.10);
  border: 1px solid rgba(57,255,20,.55);
  color: rgba(57,255,20,.95);
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  border-radius: 12px;
  padding: .75rem 1rem;
}
.btn-neon:hover{
  background: rgba(57,255,20,.16);
  border-color: rgba(57,255,20,.75);
  color: rgba(57,255,20,1);
}

/* Blink cursor effect */
.cursor::after{
  content:'▌';
  margin-left:.35rem;
  color: rgba(57,255,20,.95);
  animation: blink 1s step-end infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

/* Alerts */
.login-page .alert{
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(57,255,20,.18);
  color: rgba(234,249,236,.92);
}
.login-page .alert-danger{ border-color: rgba(220,53,69,.45); }
.login-page .alert-warning{ border-color: rgba(255,193,7,.45); }
.login-page .alert-success{ border-color: rgba(25,135,84,.45); }

/* Footer */
.login-foot{ color: rgba(234,249,236,.45); }

/* Mobile tweaks */
@media (max-width: 575.98px){
  .brand-top{ gap:.7rem; }
  .brand-top img{ width:46px;height:46px; border-radius: 12px; }
  .terminal-body{ padding: 1rem; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  #matrix{ display:none; }
  .cursor::after{ animation:none; }
}

/* Watermark */
.dev-wm{
  position: fixed;
  right: 14px;
  bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(57,255,20,.25);
  pointer-events:none;
  user-select:none;
  z-index: 3;
}
@media (max-width: 575.98px){
  .dev-wm{ font-size: 11px; right: 10px; bottom: 8px; }
}