/* ===== Login / Register / Forgot-Password ===== */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');

:root{
  --lg-bg:        oklch(0.975 0.004 150);
  --lg-surface:   #ffffff;
  --lg-ink:       oklch(0.27 0.012 155);
  --lg-ink-soft:  oklch(0.46 0.012 155);
  --lg-ink-faint: oklch(0.60 0.010 155);
  --lg-line:      oklch(0.925 0.006 155);
  --lg-line-soft: oklch(0.955 0.005 155);

  --lg-brand:      oklch(0.52 0.10 158);
  --lg-brand-deep: oklch(0.43 0.09 158);
  --lg-brand-tint: oklch(0.965 0.02 158);
  --lg-brand-line: oklch(0.90 0.04 158);

  --lg-radius: 16px;
  --lg-shadow-sm: 0 1px 2px oklch(0.4 0.02 155 / .06);
}

.login-page *{ box-sizing:border-box; }
.login-page a{ text-decoration:none; }

.login-page{
  font-family:"Manrope", system-ui, sans-serif;
  display:flex;
  min-height:100vh;
  background:var(--lg-bg);
  color:var(--lg-ink);
  -webkit-font-smoothing:antialiased;
}

/* ----- left: form panels ----- */
.login-panels{
  position:relative;
  flex:1 1 50%;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 32px;
}

.login-panel-wrap{
  display:none;
  width:100%;
  max-width:400px;
}
.login-panel-wrap.active{ display:block; }

.login-back{
  display:inline-flex; align-items:center; gap:8px;
  position:absolute; top:32px; left:32px;
  font-size:13.5px; font-weight:600; color:var(--lg-ink-faint);
}
.login-back:hover{ color:var(--lg-ink); }

.login-panel-inner h1{
  font-size:26px; font-weight:800; letter-spacing:-.02em;
  margin-bottom:6px;
}
.login-panel-inner > p{
  font-size:13.5px; color:var(--lg-ink-faint); margin-bottom:22px; line-height:1.6;
}

.login-field{ margin-bottom:16px; }
.login-field-row{ display:flex; gap:12px; margin-bottom:0; }
.login-field-row .login-field{ flex:1 1 0; margin-bottom:16px; }

.login-field label{
  display:block; font-size:12.5px; font-weight:700; color:var(--lg-ink-soft);
  margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em;
}
.login-field input,
.login-field select{
  width:100%; font-family:inherit; font-size:14.5px; color:var(--lg-ink);
  background:var(--lg-surface); border:1px solid var(--lg-line);
  border-radius:11px; padding:12px 15px; transition:.15s ease;
}
.login-field input::placeholder{ color:var(--lg-ink-faint); }
.login-field input:focus,
.login-field select:focus{
  outline:none; border-color:var(--lg-brand); box-shadow:0 0 0 3px var(--lg-brand-tint);
}

.login-recaptcha{ margin-bottom:16px; }
.login-recaptcha:empty{ display:none; }

.login-btn-primary{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; font-family:inherit; font-size:14.5px; font-weight:700; color:#fff;
  background:linear-gradient(150deg, var(--lg-brand), var(--lg-brand-deep));
  border:0; border-radius:11px; padding:13px 20px; cursor:pointer;
  box-shadow:0 6px 16px -8px var(--lg-brand); transition:.18s ease;
}
.login-btn-primary:hover{ filter:brightness(1.06); }

.login-link-forgot{
  display:block; text-align:center; margin-top:16px;
  font-size:13px; font-weight:600; color:var(--lg-brand-deep);
}
.login-link-forgot:hover{ text-decoration:underline; }

.login-divider{
  position:relative; text-align:center; margin:22px 0 16px; font-size:12.5px;
  color:var(--lg-ink-faint); text-transform:lowercase;
}
.login-divider::before{
  content:""; position:absolute; left:0; top:50%; width:100%;
  border-top:1px solid var(--lg-line);
}
.login-divider span{ position:relative; background:var(--lg-bg); padding:0 12px; }

.login-social{ display:flex; flex-direction:column; gap:10px; }
.login-google{ width:100%; }
.login-google > div{ width:100% !important; }
.login-google iframe{ width:100% !important; }

.login-social-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; font-family:inherit; font-size:14px; font-weight:600; cursor:pointer;
  border:0; border-radius:11px; padding:11px 16px; transition:.18s ease;
}
.login-social-btn:hover{ opacity:.9; box-shadow:0 2px 10px oklch(0.2 0.02 155 / .15); }
.login-fb-btn{ background:#1877f2; color:#fff; }
.login-fb-btn svg{ flex:none; }

.login-switch{
  text-align:center; font-size:13.5px; color:var(--lg-ink-faint); margin-top:20px;
}
.login-switch a{ font-weight:700; color:var(--lg-brand-deep); }
.login-switch a:hover{ text-decoration:underline; }

.login-kvkk{
  font-size:11.5px; color:var(--lg-ink-faint); line-height:1.6; margin:14px 0 0;
}

/* ----- right: background image (image module, bg mode) ----- */
.login-bg{
  position:relative;
  flex:1 1 50%;
  min-width:0;
  overflow:hidden;
}
.login-bg .ph{
  width:100%; height:100%; border-radius:0;
}
.login-bg::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, oklch(0.2 0.03 158 / .05), oklch(0.2 0.03 158 / .35));
  pointer-events:none;
}

@media (max-width: 900px){
  .login-bg{ display:none; }
  .login-panels{ flex:1 1 100%; padding:36px 20px; }
}

@media (max-width: 480px){
  .login-panel-inner h1{ font-size:22px; }
  .login-back{ top:20px; left:20px; }
}