:root {
  --zeus-login-bg: #06111e;
  --zeus-login-panel: rgba(7, 14, 28, .88);
  --zeus-login-line: rgba(116, 255, 231, .22);
  --zeus-login-line-strong: rgba(116, 255, 231, .62);
  --zeus-login-text: #f8fafc;
  --zeus-login-muted: #93a4b8;
  --zeus-login-cyan: #6fffe9;
  --zeus-login-blue: #3b82f6;
}

html body.login {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 22% 30%, rgba(111, 255, 233, .12), transparent 28rem),
    radial-gradient(circle at 80% 30%, rgba(59, 130, 246, .12), transparent 24rem),
    linear-gradient(rgba(111, 255, 233, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 255, 233, .035) 1px, transparent 1px),
    var(--zeus-login-bg);
  background-size: auto, auto, 32px 32px, 32px 32px, auto;
  color: var(--zeus-login-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.login::before,
body.login::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body.login::before {
  background: radial-gradient(circle at center, transparent 0 56%, rgba(2, 6, 23, .48) 100%);
}

body.login::after {
  background: linear-gradient(rgba(255,255,255,.025) 50%, rgba(0,0,0,.05) 50%);
  background-size: 100% 4px;
  mix-blend-mode: screen;
  opacity: .42;
}

.zeus-login-stage {
  position: relative;
  z-index: 1;
  width: min(980px, calc(100vw - 36px));
  min-height: min(540px, calc(100vh - 48px));
  margin: 24px auto;
  display: grid;
  grid-template-columns: minmax(360px, 1.18fr) minmax(340px, .82fr);
  overflow: hidden;
  border: 1px solid var(--zeus-login-line);
  border-radius: 24px;
  background: rgba(6, 16, 31, .78);
  box-shadow:
    0 32px 100px rgba(0, 0, 0, .52),
    inset 0 0 0 1px rgba(255, 255, 255, .025);
  backdrop-filter: blur(14px);
}

.zeus-login-visual,
body.login #login {
  position: relative;
  min-height: 540px;
}

.zeus-login-visual {
  overflow: hidden;
  border-right: 1px solid var(--zeus-login-line);
  background:
    radial-gradient(circle at 48% 50%, rgba(111, 255, 233, .16), transparent 21rem),
    linear-gradient(rgba(111, 255, 233, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 255, 233, .06) 1px, transparent 1px);
  background-size: auto, 24px 24px, 24px 24px;
}

.zeus-login-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 19%, rgba(111, 255, 233, .06) 19% 19.2%, transparent 19.2% 100%),
    linear-gradient(0deg, transparent 0 50%, rgba(111, 255, 233, .06) 50% 50.2%, transparent 50.2% 100%);
  opacity: .8;
}

.zeus-radar {
  position: absolute;
  width: min(320px, 68%);
  aspect-ratio: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(111, 255, 233, .34);
  border-radius: 999px;
  box-shadow:
    0 0 80px rgba(111, 255, 233, .12),
    inset 0 0 50px rgba(111, 255, 233, .08);
}

.zeus-radar::before,
.zeus-radar::after {
  content: "";
  position: absolute;
  inset: 28%;
  border: 1px solid rgba(111, 255, 233, .20);
  border-radius: inherit;
  box-shadow: inset 0 0 26px rgba(111, 255, 233, .14);
}

.zeus-radar::after {
  inset: 42%;
  background: radial-gradient(circle, rgba(111, 255, 233, .32), transparent 62%);
}

.zeus-radar-ring {
  position: absolute;
  border: 1px dashed rgba(111, 255, 233, .20);
  border-radius: inherit;
}

.zeus-radar-ring.ring-a { inset: 14%; }
.zeus-radar-ring.ring-b { inset: 27%; }
.zeus-radar-ring.ring-c { inset: 39%; }

.zeus-radar-sweep {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48%;
  height: 48%;
  transform-origin: 0 0;
  clip-path: polygon(0 0, 100% 0, 34% 100%);
  border-radius: 999px;
  opacity: .82;
  animation: zeusRadarSpin 5.2s linear infinite;
}

.zeus-radar-sweep.sweep-a {
  background: linear-gradient(90deg, rgba(111, 255, 233, .85), rgba(111, 255, 233, 0));
}

.zeus-radar-sweep.sweep-b {
  background: linear-gradient(90deg, rgba(59, 130, 246, .78), rgba(59, 130, 246, 0));
  animation-delay: -1.7s;
}

.zeus-radar-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--zeus-login-cyan);
  box-shadow: 0 0 18px rgba(111, 255, 233, .9);
}

.zeus-radar-dot.dot-a { left: 8%; top: 30%; }
.zeus-radar-dot.dot-b { right: 9%; top: 34%; }
.zeus-radar-dot.dot-c { right: 34%; bottom: 14%; }

@keyframes zeusRadarSpin {
  to { transform: rotate(360deg); }
}

.zeus-login-corner {
  position: absolute;
  bottom: 24px;
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .18em;
  color: rgba(226, 232, 240, .56);
}

.zeus-login-corner.left { left: 32px; }
.zeus-login-corner.right { right: 32px; }

body.login #login {
  width: auto;
  max-width: none;
  padding: 38px 44px;
  margin: 0;
  background:
    radial-gradient(circle at 70% 20%, rgba(59, 130, 246, .12), transparent 20rem),
    var(--zeus-login-panel);
}

body.login h1 {
  margin: 18px 0 12px;
}

body.login h1 a {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  background: none;
  text-indent: 0;
  color: var(--zeus-login-text);
  font-size: clamp(38px, 4vw, 52px);
  line-height: .92;
  font-weight: 900;
  letter-spacing: -.05em;
  text-decoration: none;
  text-shadow: 0 0 32px rgba(111, 255, 233, .10);
}

body.login h1 a::before {
  content: "ZEUS AI PLATFORM";
  display: block;
  margin-bottom: 9px;
  color: var(--zeus-login-cyan);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .22em;
  font-weight: 900;
}

body.login h1 a::after {
  content: "Control Access";
  display: block;
}

.zeus-login-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -4px 0 18px auto;
  width: max-content;
  max-width: 100%;
  color: rgba(226, 232, 240, .68);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.zeus-login-status span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--zeus-login-cyan);
  box-shadow: 0 0 14px rgba(111, 255, 233, .9);
}

.zeus-login-status em {
  color: var(--zeus-login-cyan);
  font-style: normal;
}

body.login #loginform,
body.login #lostpasswordform,
body.login #registerform {
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

body.login #loginform::before {
  content: "Masuk untuk mengakses project dan AI Agent sesuai role akun Anda.";
  display: block;
  margin: -6px 0 18px;
  max-width: 390px;
  color: var(--zeus-login-muted);
  font-size: 13px;
  line-height: 1.55;
}

body.login label {
  color: rgba(111, 255, 233, .76);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 900;
}

body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"] {
  width: 100%;
  min-height: 46px;
  margin: 6px 0 13px;
  padding: 0 16px;
  border: 1px solid rgba(111, 255, 233, .34);
  border-radius: 14px;
  background: rgba(3, 7, 18, .70);
  color: var(--zeus-login-text);
  font-size: 16px;
  outline: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .025),
    0 0 0 rgba(111, 255, 233, 0);
  transition: border-color .18s ease, box-shadow .18s ease;
}

body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus {
  border-color: var(--zeus-login-line-strong);
  box-shadow: 0 0 0 3px rgba(111, 255, 233, .12), 0 0 32px rgba(111, 255, 233, .10);
}

body.login .forgetmenot {
  float: none;
  display: flex;
  align-items: center;
  margin: 0 0 14px;
}

body.login .forgetmenot label {
  color: rgba(226, 232, 240, .78);
  font-size: 12px;
  letter-spacing: .10em;
}

body.login input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border-color: rgba(111, 255, 233, .46);
  background: rgba(3, 7, 18, .7);
}

body.login .submit {
  margin: 0;
}

body.login .button-primary {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(147, 197, 253, .82);
  border-radius: 14px;
  background: linear-gradient(135deg, #78e8ff, #2f86ff);
  color: #03111f;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-shadow: none;
  box-shadow: 0 18px 48px rgba(59, 130, 246, .32), inset 0 1px 0 rgba(255,255,255,.45);
  transition: transform .18s ease, filter .18s ease;
}

body.login .button-primary:hover,
body.login .button-primary:focus {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

body.login #nav,
body.login #backtoblog,
body.login .privacy-policy-page-link {
  text-align: center;
  color: rgba(226, 232, 240, .55);
}

body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-page-link a {
  color: rgba(111, 255, 233, .82);
  text-decoration: none;
}

body.login .message,
body.login .notice,
body.login #login_error {
  border-left: 3px solid var(--zeus-login-cyan);
  border-radius: 12px;
  background: rgba(3, 7, 18, .72);
  color: rgba(226, 232, 240, .88);
  box-shadow: none;
}

body.login .wp-pwd button.button {
  color: var(--zeus-login-cyan);
  border: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 900px) {
  .zeus-login-stage {
    grid-template-columns: 1fr;
    width: min(560px, calc(100vw - 28px));
    margin: 14px auto;
  }

  .zeus-login-visual {
    display: none;
  }

  body.login #login {
    min-height: auto;
    padding: 38px 24px;
  }

  body.login h1 a {
    font-size: 46px;
  }

  .zeus-login-status {
    margin-left: 0;
  }
}


/* v0.2.3 Light premium login default */
:root {
  --zeus-login-bg: #f6f9ff;
  --zeus-login-panel: rgba(255, 255, 255, .92);
  --zeus-login-line: rgba(37, 99, 235, .16);
  --zeus-login-line-strong: rgba(37, 99, 235, .42);
  --zeus-login-text: #102033;
  --zeus-login-muted: #64748b;
  --zeus-login-cyan: #14b8a6;
  --zeus-login-blue: #2563eb;
}

html body.login {
  background:
    radial-gradient(circle at 18% 18%, rgba(59, 130, 246, .12), transparent 28rem),
    radial-gradient(circle at 78% 24%, rgba(20, 184, 166, .10), transparent 26rem),
    linear-gradient(rgba(37,99,235,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.045) 1px, transparent 1px),
    linear-gradient(135deg, #ffffff 0%, #f7fbff 48%, #edf6ff 100%);
  background-size: auto, auto, 34px 34px, 34px 34px, auto;
  color: var(--zeus-login-text);
}

body.login::before {
  background: radial-gradient(circle at center, transparent 0 65%, rgba(219, 234, 254, .55) 100%);
}

body.login::after {
  opacity: .16;
  mix-blend-mode: multiply;
}

.zeus-login-stage {
  width: min(900px, calc(100vw - 36px));
  min-height: min(500px, calc(100vh - 48px));
  border-color: rgba(37, 99, 235, .16);
  background: rgba(255,255,255,.74);
  box-shadow:
    0 32px 90px rgba(27, 64, 126, .14),
    inset 0 0 0 1px rgba(255,255,255,.75);
}

.zeus-login-visual,
body.login #login {
  min-height: 500px;
}

.zeus-login-visual {
  border-right-color: rgba(37, 99, 235, .12);
  background:
    radial-gradient(circle at 48% 50%, rgba(37,99,235,.10), transparent 20rem),
    linear-gradient(rgba(37,99,235,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.07) 1px, transparent 1px),
    #fbfdff;
  background-size: auto, 24px 24px, 24px 24px, auto;
}

.zeus-radar {
  width: min(280px, 64%);
  border-color: rgba(37, 99, 235, .32);
  box-shadow:
    0 0 60px rgba(37,99,235,.12),
    inset 0 0 40px rgba(20,184,166,.06);
}

.zeus-radar::before,
.zeus-radar::after,
.zeus-radar-ring {
  border-color: rgba(37, 99, 235, .20);
}

.zeus-radar::after {
  background: radial-gradient(circle, rgba(37,99,235,.20), transparent 62%);
}

.zeus-radar-sweep.sweep-a {
  background: linear-gradient(90deg, rgba(20,184,166,.65), rgba(20,184,166,0));
}

.zeus-radar-sweep.sweep-b {
  background: linear-gradient(90deg, rgba(37,99,235,.62), rgba(37,99,235,0));
}

.zeus-radar-dot {
  background: #2563eb;
  box-shadow: 0 0 16px rgba(37,99,235,.7);
}

.zeus-login-corner {
  color: rgba(30,41,59,.45);
}

body.login #login {
  background:
    radial-gradient(circle at 82% 18%, rgba(37,99,235,.08), transparent 18rem),
    rgba(255,255,255,.92);
  padding: 34px 40px;
}

body.login h1 a {
  color: #0f172a;
}

body.login h1 a::before {
  background: linear-gradient(135deg, #2563eb, #14b8a6);
  box-shadow: 0 14px 30px rgba(37,99,235,.22);
}

body.login h1 a::after {
  color: #14b8a6;
}

.zeus-login-subtitle {
  color: var(--zeus-login-muted);
}

.zeus-login-status {
  color: #1e293b;
}

.zeus-login-status span {
  background: #14b8a6;
  box-shadow: 0 0 14px rgba(20,184,166,.72);
}

.zeus-login-status em {
  color: #059669;
}

body.login form {
  background: transparent;
}

body.login label {
  color: #53657d;
}

body.login form .input,
body.login input[type="text"],
body.login input[type="password"] {
  background: rgba(255,255,255,.96) !important;
  color: #0f172a !important;
  border-color: rgba(37,99,235,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 24px rgba(15,23,42,.04);
}

body.login form .input:focus,
body.login input[type="text"]:focus,
body.login input[type="password"]:focus {
  border-color: rgba(37,99,235,.55) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.10) !important;
}

body.login .button-primary {
  background: linear-gradient(135deg, #38bdf8, #2563eb) !important;
  color: white !important;
  box-shadow: 0 16px 30px rgba(37,99,235,.22) !important;
}

body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-page-link a {
  color: #475569 !important;
}

@media (max-width: 820px) {
  .zeus-login-stage {
    min-height: auto;
  }

  .zeus-login-visual {
    min-height: 220px;
  }

  body.login #login {
    min-height: auto;
  }
}


/* Zeus v0.5.1 — Premium Light Login */
:root {
  --zeus-login-bg: #f4f8ff;
  --zeus-login-panel: rgba(255, 255, 255, .88);
  --zeus-login-line: rgba(37, 99, 235, .16);
  --zeus-login-line-strong: rgba(37, 99, 235, .42);
  --zeus-login-text: #102033;
  --zeus-login-muted: #66758d;
  --zeus-login-cyan: #2563eb;
  --zeus-login-blue: #7c3aed;
}

html body.login {
  background:
    radial-gradient(circle at 18% 18%, rgba(37, 99, 235, .14), transparent 28rem),
    radial-gradient(circle at 82% 22%, rgba(124, 58, 237, .12), transparent 24rem),
    linear-gradient(rgba(37, 99, 235, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, .045) 1px, transparent 1px),
    var(--zeus-login-bg);
  background-size: auto, auto, 32px 32px, 32px 32px, auto;
  color: var(--zeus-login-text);
}

body.login::before {
  background: radial-gradient(circle at center, transparent 0 62%, rgba(219, 234, 254, .48) 100%);
}

body.login::after {
  background: none;
}

.zeus-login-stage {
  min-height: min(500px, calc(100vh - 48px));
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 32px 100px rgba(37, 99, 235, .14), inset 0 0 0 1px rgba(255, 255, 255, .42);
}

.zeus-login-visual,
body.login #login {
  min-height: 500px;
}

.zeus-login-visual {
  background:
    radial-gradient(circle at 48% 50%, rgba(37, 99, 235, .15), transparent 21rem),
    linear-gradient(rgba(37, 99, 235, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, .06) 1px, transparent 1px),
    #eef6ff;
}

body.login #login {
  background:
    radial-gradient(circle at 70% 20%, rgba(124, 58, 237, .10), transparent 20rem),
    var(--zeus-login-panel);
}

body.login h1 a {
  color: var(--zeus-login-text);
  text-shadow: none;
}

body.login h1 a::before {
  color: var(--zeus-login-cyan);
}

.zeus-login-status,
.zeus-login-corner {
  color: rgba(51, 65, 85, .64);
}

body.login form {
  background: rgba(255,255,255,.82) !important;
  border-color: rgba(37,99,235,.16) !important;
  box-shadow: 0 18px 48px rgba(37, 99, 235, .10) !important;
}

body.login form .input,
body.login input[type="text"],
body.login input[type="password"] {
  background: rgba(248, 250, 252, .92) !important;
  color: #102033 !important;
  border-color: rgba(37,99,235,.18) !important;
}

body.login label,
body.login .forgetmenot label,
body.login #nav a,
body.login #backtoblog a {
  color: #334155 !important;
}


/* Zeus v0.8.1 — Compact minimal high-tech login */
html body.login {
  background:
    radial-gradient(circle at 18% 22%, rgba(59, 130, 246, .10), transparent 24rem),
    radial-gradient(circle at 80% 70%, rgba(20, 184, 166, .10), transparent 22rem),
    linear-gradient(rgba(37, 99, 235, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, .035) 1px, transparent 1px),
    #f6f9ff;
  background-size: auto, auto, 28px 28px, 28px 28px, auto;
  color: #102033;
}

.zeus-login-stage {
  width: min(760px, calc(100vw - 32px));
  min-height: 430px;
  margin: max(24px, 7vh) auto;
  grid-template-columns: 300px minmax(300px, 1fr);
  border-color: rgba(37, 99, 235, .16);
  border-radius: 22px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 26px 80px rgba(27, 64, 126, .16);
}

.zeus-login-visual,
body.login #login {
  min-height: 430px;
}

.zeus-login-visual {
  border-right-color: rgba(37, 99, 235, .14);
  background:
    radial-gradient(circle at 48% 50%, rgba(37, 99, 235, .12), transparent 14rem),
    linear-gradient(rgba(37, 99, 235, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, .055) 1px, transparent 1px),
    rgba(248,251,255,.72);
  background-size: auto, 22px 22px, 22px 22px;
}

.zeus-radar {
  width: min(220px, 70%);
  border-color: rgba(37, 99, 235, .32);
  box-shadow: 0 0 54px rgba(37, 99, 235, .10), inset 0 0 34px rgba(20, 184, 166, .08);
}

.zeus-radar::before,
.zeus-radar::after,
.zeus-radar-ring {
  border-color: rgba(37, 99, 235, .18);
}

.zeus-radar-sweep.sweep-a {
  background: linear-gradient(90deg, rgba(37, 99, 235, .62), rgba(37, 99, 235, 0));
}

.zeus-radar-sweep.sweep-b {
  background: linear-gradient(90deg, rgba(20, 184, 166, .58), rgba(20, 184, 166, 0));
}

.zeus-radar-dot {
  width: 8px;
  height: 8px;
  background: #2563eb;
  box-shadow: 0 0 14px rgba(37, 99, 235, .65);
}

.zeus-login-corner {
  bottom: 18px;
  color: rgba(15, 23, 42, .42);
  font-size: 10px;
}

.zeus-login-corner.left { left: 22px; }
.zeus-login-corner.right { right: 22px; }

body.login #login {
  padding: 28px 32px;
  background: rgba(255,255,255,.90);
}

body.login h1 {
  margin: 6px 0 10px;
}

body.login h1 a {
  color: #0f172a;
  font-size: clamp(30px, 4vw, 42px);
  text-shadow: none;
}

body.login h1 a::before {
  color: #2563eb;
  font-size: 10px;
  margin-bottom: 7px;
}

body.login #loginform {
  margin-top: 14px;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

body.login label {
  color: #334155;
  font-size: 10px;
}

body.login input[type="text"],
body.login input[type="password"] {
  min-height: 42px;
  border-radius: 12px;
  border-color: rgba(37, 99, 235, .18);
  background: rgba(248,251,255,.96);
  color: #0f172a;
  box-shadow: none;
}

body.login .button-primary {
  min-height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2563eb, #14b8a6);
  box-shadow: 0 14px 30px rgba(37, 99, 235, .22);
}

.zeus-login-status {
  color: #475569;
  font-size: 10px;
  margin-bottom: 10px;
}

.zeus-login-status span {
  background: #14b8a6;
}

@media (max-width: 760px) {
  .zeus-login-stage {
    width: min(390px, calc(100vw - 24px));
    display: block;
    min-height: auto;
  }

  .zeus-login-visual {
    display: none;
  }

  body.login #login {
    min-height: auto;
    padding: 26px 24px;
  }
}