/* =========================================================
   ElevenBank — account.css
   Hesap açma (Account/Create) sayfası için stiller
   ========================================================= */

:root {
  --bg:#080c14; --surface:#0e1420; --surface2:#141c2e;
  --border:rgba(255,255,255,0.08);
  --accent:#2563eb; --accent2:#3b82f6;
  --text:#f0f4ff; --muted:#71809e;
}

* { margin:0; padding:0; box-sizing:border-box; }

/* ── BACKGROUND ── */
.bg-grid {
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(37,99,235,0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(37,99,235,0.03) 1px,transparent 1px);
  background-size:60px 60px; z-index:0;
}
.bg-glow {
  position:fixed; top:-200px; left:50%; transform:translateX(-50%);
  width:900px; height:700px;
  background:radial-gradient(circle,rgba(37,99,235,0.15),transparent 70%);
  z-index:0;
}

/* ── CARD ── */
.register-card {
  position:relative; z-index:1;
  width:100%; max-width:920px;
  background:rgba(14,20,32,0.82); backdrop-filter:blur(24px);
  border:1px solid var(--border); border-radius:32px; overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr;
  box-shadow:0 30px 80px rgba(0,0,0,0.45);
}

/* ── LEFT ── */
.left-side {
  padding:60px;
  background:linear-gradient(135deg,rgba(37,99,235,0.18),rgba(37,99,235,0.04));
  border-right:1px solid var(--border);
}
.logo {
  display:flex; align-items:center; gap:12px; margin-bottom:40px;
  font-family:'Syne',sans-serif; font-weight:800; font-size:24px;
}
.logo-box {
  width:42px; height:42px; border-radius:12px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex; align-items:center; justify-content:center;
}
.left-side h1 { font-family:'Syne',sans-serif; font-size:52px; line-height:1; letter-spacing:-2px; margin-bottom:24px; }
.left-side h1 span { color:var(--accent2); }
.left-side p { color:var(--muted); line-height:1.8; font-size:15px; max-width:360px; }
.info-box { margin-top:40px; display:flex; flex-direction:column; gap:16px; }
.info-item { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.05); padding:18px; border-radius:16px; }
.info-item strong { display:block; margin-bottom:6px; }
.info-item span { color:var(--muted); font-size:14px; }

/* ── RIGHT ── */
.right-side { padding:60px; }
.form-title { font-family:'Syne',sans-serif; font-size:34px; font-weight:800; margin-bottom:10px; }
.form-sub { color:var(--muted); margin-bottom:36px; line-height:1.7; }

/* ── FORM ── */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.input-group { display:flex; flex-direction:column; }
.input-group.full { grid-column:span 2; }

.input-group label { font-size:13px; margin-bottom:10px; color:#d9e4ff; }
.input-group input {
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08);
  border-radius:16px; padding:16px; color:var(--text);
  outline:none; transition:0.25s; font-size:14px; font-family:'DM Sans',sans-serif;
}
.input-group input:focus { border-color:var(--accent2); box-shadow:0 0 0 4px rgba(37,99,235,0.12); }
.input-group input::placeholder { color:var(--muted); }

/* Hata mesajları */
.field-error { font-size:12px; color:#f87171; margin-top:6px; min-height:18px; }
.validation-summary { background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.3); border-radius:12px; padding:14px 18px; margin-bottom:20px; font-size:13px; color:#fca5a5; }
.validation-summary ul { padding-left:16px; }

.submit-btn {
  width:100%; margin-top:26px; border:none; border-radius:18px; padding:18px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff; font-size:15px; font-weight:700; cursor:pointer; transition:0.25s;
  font-family:'DM Sans',sans-serif;
}
.submit-btn:hover { transform:translateY(-2px); box-shadow:0 14px 40px rgba(37,99,235,0.4); }

.back-link {
  display:inline-flex; align-items:center; gap:8px;
  margin-top:24px; color:var(--muted); text-decoration:none; font-size:14px;
}
.back-link:hover { color:var(--text); }

/* ── RESPONSIVE ── */
@media(max-width:900px) {
  .register-card { grid-template-columns:1fr; }
  .left-side { display:none; }
  .right-side { padding:36px 24px; }
  .form-grid { grid-template-columns:1fr; }
  .input-group.full { grid-column:span 1; }
}