/* Modern Login UI - scoped */
.auth-modern{ --bg:#0b0f14; --panel:rgba(255,255,255,.06); --panel-stroke:rgba(255,255,255,.12); --text:#e6eefb; --muted:#a5b2c7; --primary:#00d2ff; --primary2:#3a7bd5; --focus:rgba(0,210,255,.32) }
.auth-modern{ color:var(--text) }
.auth-modern .wrap{ display:grid; grid-template-columns:1.1fr 1fr; gap:24px; align-items:stretch }
@media (max-width:980px){ .auth-modern .wrap{ grid-template-columns:1fr } }
.auth-modern .panel{ backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); background: var(--panel); border:1px solid var(--panel-stroke); border-radius:28px; box-shadow:0 10px 30px rgba(0,0,0,.35); overflow:hidden }
.auth-modern .brand{ padding:42px; background: radial-gradient(600px 360px at 30% 20%, rgba(0,210,255,.25), transparent 60%), radial-gradient(600px 360px at 80% 10%, rgba(58,123,213,.2), transparent 55%), linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,0)) }
.auth-modern .logo{ display:flex; gap:12px; align-items:center; font-weight:700; letter-spacing:.2px; font-size:20px }
.auth-modern .logo-badge{ width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg, var(--primary), var(--primary2)); display:grid; place-items:center; color:#00131a; font-weight:900; box-shadow:0 10px 30px rgba(0,210,255,.35) }
.auth-modern .brand h1{ font-size:34px; line-height:1.15; margin:26px 0 10px }
.auth-modern .muted{ color:var(--muted) }
.auth-modern .feature{ display:flex; gap:12px; align-items:center; color:var(--muted); font-size:14px; margin-top:10px }
.auth-modern .dot{ width:8px; height:8px; border-radius:999px; background:linear-gradient(135deg,var(--primary),var(--primary2)); box-shadow:0 0 0 4px rgba(0,210,255,.18) }
.auth-modern .form{ padding:40px 34px }
.auth-modern .title{ font-size:24px; font-weight:700; margin:0 0 6px }
.auth-modern .subtitle{ color:var(--muted); margin:0 0 18px }
.auth-modern label{ display:block; font-size:13px; color:var(--muted); margin:0 0 6px }
.auth-modern .input{ width:100%; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); color:var(--text); border-radius:16px; padding:14px 14px; outline:none; transition: border .2s, box-shadow .2s, background .2s }
.auth-modern .input:focus{ border-color:var(--primary); box-shadow:0 0 0 6px var(--focus) }
.auth-modern .btn-primary{ appearance:none; border:none; cursor:pointer; font-weight:700; letter-spacing:.2px; padding:14px 16px; border-radius:16px; color:#00131a; background:linear-gradient(135deg,var(--primary),var(--primary2)); box-shadow:0 12px 30px rgba(0,210,255,.35), inset 0 -2px 0 rgba(0,0,0,.1) }
.auth-modern .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 18px 40px rgba(0,210,255,.45) }
.auth-modern .alert{ display:flex; gap:10px; padding:12px 14px; border-radius:14px; background: rgba(255, 107, 107, .12); border: 1px solid rgba(255,107,107,.4); color: #ffd0d0; font-size:14px; margin-bottom:12px }
.auth-modern .help{ color:var(--muted); font-size:13px; margin-top:10px }


/* === ChatGPT patch v2: tighter login layout === */
.auth-modern{
  width: min(1100px, 92%);
}
.auth-modern .wrap{
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 440px);
}
/* left info panel shouldn't overgrow */
.auth-modern .panel.info,
.auth-modern .info-card{
  max-width: 640px;
}
/* right login card fixed, centered on small screens */
.auth-modern .login-card{
  max-width: 440px;
  margin-left: auto;
}
@media (max-width: 1024px){
  .auth-modern .wrap{ grid-template-columns: 1fr; }
  .auth-modern .login-card{ margin: 0 auto; }
}
/* make feature rows inside the left card align nicely */
.auth-modern .list-row{ max-width: 740px; }
/* === /ChatGPT patch v2 === */
.auth-modern{ margin-left:auto; margin-right:auto; } /* konteyner ortalı */
.auth-modern .wrap{
  display:flex;
  justify-content:center;   /* ÇİFT KART ORTADA */
  align-items:stretch;
  gap:28px;
}
.auth-modern .info-card{  flex:0 1 560px; max-width:560px; }
.auth-modern .login-card{ flex:0 1 440px; max-width:440px; }

/* küçük ekran: tek sütun, ortalı */
@media (max-width:1024px){
  .auth-modern .wrap{ flex-direction:column; align-items:center; }
  .auth-modern .info-card,
  .auth-modern .login-card{ width:min(560px,100%); max-width:560px; }
}