/* ================================================================
   Webboll Security — Giriş Sayfası Stili
================================================================ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

:root {
  --c-bg:       #0c0e16;
  --c-card:     #13161f;
  --c-border:   #22263a;
  --c-accent:   #6c63ff;
  --c-accent2:  #8b85ff;
  --c-text:     #e8eaf6;
  --c-muted:    #6b6f8e;
  --c-inp:      #0e1018;
  --c-err-bg:   #1f1018;
  --c-err:      #f87171;
  --c-ok-bg:    #0d1f14;
  --c-ok:       #4ade80;
  --radius:     14px;
  --font:       'DM Sans',system-ui,sans-serif;
}

html,body { height:100%; }

.wbs-login-body {
  font-family:var(--font);
  background:var(--c-bg);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  position:relative;
  overflow:hidden;
}

/* Arka plan blob'ları */
.wbs-login-bg { position:fixed; inset:0; pointer-events:none; z-index:0; }
.wbs-blob { position:absolute; border-radius:50%; filter:blur(80px); opacity:.25; }
.wbs-blob-1 { width:500px; height:400px; background:#6c63ff; top:-100px; left:-100px; }
.wbs-blob-2 { width:400px; height:350px; background:#a855f7; bottom:-80px; right:-80px; }

/* Kart */
.wbs-login-wrap { position:relative; z-index:1; width:100%; max-width:420px; }
.wbs-login-card {
  background:var(--c-card);
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  padding:40px 36px;
  box-shadow:0 32px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(108,99,255,.08);
}

/* Logo */
.wbs-logo-area { text-align:center; margin-bottom:20px; }
.wbs-logo-area img { max-height:56px; }
.wbs-site-initial {
  width:60px; height:60px; border-radius:16px;
  background:linear-gradient(135deg,#6c63ff,#a855f7);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:28px; font-weight:800; color:#fff;
  font-family:'DM Serif Display',serif;
  box-shadow:0 8px 24px rgba(108,99,255,.4);
}

/* Başlıklar */
.wbs-heading { font-size:23px; font-weight:700; color:var(--c-text); text-align:center; margin-bottom:4px; }
.wbs-subheading { color:var(--c-muted); font-size:13px; text-align:center; margin-bottom:28px; }

/* Alert */
.wbs-alert {
  border-radius:9px; padding:11px 14px; font-size:13.5px;
  display:flex; align-items:flex-start; gap:8px;
  margin-bottom:20px; line-height:1.5;
}
.wbs-alert-icon { flex-shrink:0; font-style:normal; }
.wbs-alert-error  { background:var(--c-err-bg); color:var(--c-err);   border:1px solid rgba(248,113,113,.25); }
.wbs-alert-success{ background:var(--c-ok-bg);  color:var(--c-ok);    border:1px solid rgba(74,222,128,.25); }

/* Form */
.wbs-form { display:flex; flex-direction:column; gap:16px; }

/* Field */
.wbs-field { display:flex; flex-direction:column; gap:5px; }
.wbs-label { font-size:12px; font-weight:600; color:var(--c-muted); letter-spacing:.3px; text-transform:uppercase; }
.wbs-input {
  background:var(--c-inp); border:1px solid var(--c-border);
  border-radius:8px; padding:11px 14px; color:var(--c-text);
  font-family:var(--font); font-size:15px; width:100%;
  transition:border-color .2s, box-shadow .2s;
}
.wbs-input:focus { outline:none; border-color:var(--c-accent); box-shadow:0 0 0 3px rgba(108,99,255,.18); }
.wbs-input::placeholder { color:rgba(255,255,255,.2); }

/* Password */
.wbs-pass-wrap { position:relative; }
.wbs-pass-wrap .wbs-input { padding-right:46px; }
.wbs-eye-btn {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; font-size:18px;
  opacity:.5; transition:opacity .2s; padding:0; line-height:1;
}
.wbs-eye-btn:hover { opacity:1; }

/* CAPTCHA */
.wbs-captcha-wrap {
  background:rgba(108,99,255,.07); border:1px solid rgba(108,99,255,.2);
  border-radius:10px; padding:16px; display:flex; flex-direction:column; gap:10px;
}
.wbs-captcha-label { font-size:11px; font-weight:700; color:var(--c-accent); text-transform:uppercase; letter-spacing:.6px; }
.wbs-captcha-row { display:flex; align-items:center; gap:14px; }
.wbs-captcha-q {
  font-family:'DM Serif Display',Georgia,serif; font-size:21px; color:var(--c-text);
  background:rgba(255,255,255,.05); padding:8px 16px; border-radius:8px;
  letter-spacing:2px; white-space:nowrap; flex-shrink:0;
}
.wbs-captcha-inp {
  background:var(--c-inp); border:1px solid var(--c-border);
  border-radius:8px; padding:10px 12px; color:var(--c-text);
  font-family:var(--font); font-size:15px; width:90px;
  -moz-appearance:textfield;
}
.wbs-captcha-inp::-webkit-outer-spin-button,
.wbs-captcha-inp::-webkit-inner-spin-button { -webkit-appearance:none; }
.wbs-captcha-inp:focus { outline:none; border-color:var(--c-accent); box-shadow:0 0 0 3px rgba(108,99,255,.18); }

/* 2FA code input */
.wbs-code-input {
  text-align:center; font-size:28px; font-weight:700; letter-spacing:12px;
  font-family:monospace; padding:14px;
}

/* 2FA info */
.wbs-2fa-info {
  background:rgba(108,99,255,.08); border:1px solid rgba(108,99,255,.2);
  border-radius:9px; padding:13px 16px; font-size:13.5px;
  color:rgba(232,234,246,.85); line-height:1.6; margin-bottom:16px;
}

/* Remember */
.wbs-remember { display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--c-muted); cursor:pointer; }
.wbs-remember input { accent-color:var(--c-accent); width:15px; height:15px; }

/* Submit button */
.wbs-btn {
  background:linear-gradient(135deg,#6c63ff,#a855f7);
  color:#fff; border:none; border-radius:9px;
  padding:14px; font-family:var(--font); font-size:15px; font-weight:700;
  cursor:pointer; width:100%; letter-spacing:.3px;
  transition:opacity .2s, transform .1s, box-shadow .2s;
  box-shadow:0 6px 20px rgba(108,99,255,.4);
}
.wbs-btn:hover { opacity:.92; box-shadow:0 8px 28px rgba(108,99,255,.5); }
.wbs-btn:active { transform:scale(.98); }

.wbs-btn-ghost {
  width:100%; background:transparent; border:1px solid var(--c-border);
  color:var(--c-muted); border-radius:9px; padding:10px;
  font-family:var(--font); font-size:13.5px; cursor:pointer;
  transition:border-color .2s, color .2s;
}
.wbs-btn-ghost:hover { border-color:var(--c-accent); color:var(--c-text); }

/* Footer links */
.wbs-login-footer { margin-top:22px; text-align:center; display:flex; justify-content:center; gap:12px; }
.wbs-login-footer a { color:var(--c-muted); font-size:13px; text-decoration:none; transition:color .2s; }
.wbs-login-footer a:hover { color:var(--c-accent); }

/* Powered */
.wbs-powered { text-align:center; margin-top:20px; font-size:12px; color:rgba(107,111,142,.6); }
.wbs-powered a { color:rgba(108,99,255,.6); text-decoration:none; }
.wbs-powered a:hover { color:var(--c-accent); }

/* Responsive */
@media(max-width:480px){
  .wbs-login-card { padding:28px 20px; }
  .wbs-captcha-row { flex-direction:column; align-items:flex-start; }
  .wbs-captcha-inp { width:100%; }
}