:root{
  /* Brand colors */
  --ggcs-navy:#1f3c86;   /* primary */
  --ggcs-gold:#f0cc57;   /* accent */
  --ggcs-ink:#111318;    /* text */
  --ggcs-cloud:#f6f7fb;  /* background */
  --ggcs-card:#ffffff;   /* card bg */
  --ggcs-muted:#6b7280;  /* muted text */
  --radius:20px;
  --shadow:0 10px 25px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
body{
  margin:0; min-height:100svh;
  font: 500 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--ggcs-ink);
  background:
    radial-gradient(1200px 600px at 100% 0%, rgba(31,60,134,.05), transparent 80%),
    radial-gradient(1000px 500px at 0% 100%, rgba(240,204,87,.08), transparent 80%),
    var(--ggcs-cloud);
  display:grid; place-items:center; padding:24px;
}
.login-wrap{
  width:100%; max-width:980px;
  display:grid; grid-template-columns: 1.1fr 1fr; gap:0;
  border-radius: clamp(16px, 2.5vw, var(--radius));
  background: #fff; box-shadow: var(--shadow); overflow:hidden;
}
@media (max-width: 900px){
  .login-wrap{grid-template-columns:1fr}
  .hero{display:none}
}
/* Hero */
.hero{
  position:relative; padding:48px clamp(24px, 5vw, 56px);
  background:
    linear-gradient(135deg, rgba(31,60,134,.75), rgba(31,60,134,.55)),
    url('https://images.unsplash.com/photo-1518600506278-4e8ef466b810?q=80&w=2000&auto=format&fit=crop') center/cover no-repeat;
  color:#e9edff;
}
.brand{display:flex; align-items:center; gap:16px}
.brand img{ height:64px; width:auto; display:block }
.brand h1{ margin:0; font-size:clamp(18px,2.2vw,22px); letter-spacing:.08em; font-weight:800 }
.tagline{ margin-top:18px; color:#d8ddff; font-weight:500 }
.benefits{ margin-top:28px; display:grid; gap:10px }
.benefits li{ list-style:none; display:flex; gap:10px; align-items:flex-start }
.dot{ height:10px; width:10px; border-radius:999px; background:var(--ggcs-gold); margin-top:7px }
/* Panel */
.panel{ padding: clamp(24px, 4.2vw, 48px); background:var(--ggcs-card); display:grid; gap:22px }
.panel .heading{ display:grid; gap:6px }
.panel h2{ margin:0; font-size:28px; letter-spacing:.3px }
.panel p{ margin:0; color:var(--ggcs-muted) }
form{ display:grid; gap:16px }
.field{ display:grid; gap:8px }
label{ font-weight:600 }
input[type="email"], input[type="password"]{
  width:100%; padding:14px 14px; border:1px solid #e5e7eb; border-radius:12px;
  outline:none; background:#fff; transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus{ border-color: var(--ggcs-navy); box-shadow: 0 0 0 4px rgba(31,60,134,.12) }
.row{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap }
.row a{ color:var(--ggcs-navy); text-decoration:none; font-weight:600 }
.row a:hover{ text-decoration:underline }
.btn{
  appearance:none; border:0; cursor:pointer; padding:14px 16px; border-radius:12px; font-weight:700;
  background: linear-gradient(180deg, var(--ggcs-navy), #172c61); color:#fff; box-shadow:0 6px 14px rgba(31,60,134,.25);
  width:100%; text-align:center; text-decoration:none; display:inline-block;
}
.btn:hover{ filter:brightness(1.04) }
.btn:active{ transform: translateY(1px) }
.alt-actions{ display:grid; gap:12px; margin-top:4px }
.btn-outline{ background:#fff; color:var(--ggcs-navy); border:1.2px solid #d4d7e5; box-shadow:none }
.divider{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; color:#9aa0af }
.divider::before, .divider::after{ content:""; height:1px; background:#e5e7eb }
.meta{ color:#9aa0af; font-size:13px; text-align:center }
/* Alerts */
.alert{ display:none; padding:12px 14px; border-radius:10px; font-size:14px }
.alert.error{ background:#fff1f2; color:#b91c1c; border:1px solid #fecaca }
/* Footer */
.footer{ text-align:center; margin-top:6px; color:#9aa0af; font-size:13px }
/* Dark mode */
@media (prefers-color-scheme: dark){
  body{ color:#e7e9ee; background:
      radial-gradient(1200px 600px at 100% 0%, rgba(31,60,134,.10), transparent 80%),
      radial-gradient(1000px 500px at 0% 100%, rgba(240,204,87,.05), transparent 80%),
      #2a2d39 }
  .login-wrap{ background: #0f1219; box-shadow: 0 12px 28px rgba(0,0,0,.45) }
  .panel{ background:#0f1219 }
  input{ background:#0c0f15; border-color:#1b2233; color:#e7e9ee }
  .divider::before, .divider::after{ background:#20283a }
  .meta, .footer{ color:#8088a3 }
  .btn-outline{ background:#0c0f15; border-color:#20283a; color:#cbd5ff }
}
.muted{ color:var(--ggcs-muted) }
/* — Language switch — */
.login-wrap{ position:relative; } /* anchor supaya absolute ga ganggu layout */
.lang-switch{
  position:absolute; top:16px; right:24px;
  display:flex; gap:10px; z-index:10;
  font-size:14px; font-weight:600;
}
.lang-switch a{
  color:var(--ggcs-navy); text-decoration:none;
  padding:6px 10px; border-radius:10px;
  border:1px solid #e5e7eb; background:#fff;
  transition:transform .12s ease, background .12s ease;
}
.lang-switch a:hover{ background:#f7f8fc; transform:translateY(-1px); }
.lang-switch a.active{
  background: linear-gradient(180deg, var(--ggcs-navy), #172c61);
  color:#fff; border-color:transparent; box-shadow:0 6px 14px rgba(31,60,134,.20);
}

/* Dark mode tweaks */
@media (prefers-color-scheme: dark){
  .lang-switch a{ background:#0c0f15; border-color:#20283a; color:#cbd5ff; }
  .lang-switch a:hover{ background:#121826; }
  .lang-switch a.active{ background: linear-gradient(180deg, #243b79, #172c61); }
}