/* ════════ 1. TOKEN / RESET ════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
:root{
  --bg:#F4F4F8;--surface:#fff;--deep:#0C0817;--ink:#0B0B14;
  --brand:#6938EF;--brand-2:#9B6BFF;--brand-3:#C9B6FF;--brand-ink:#4A23B8;--brand-soft:#F1ECFE;
  --live:#12B886;--live-2:#3FD6A6;
  --line:#E8E8F0;--line-2:#F1F1F6;--text:#13141E;--muted:#5E6072;--faint:#9C9DAC;--rose:#E03E5C;
  --mono:'JetBrains Mono',ui-monospace,monospace;--sans:'Inter',-apple-system,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:var(--bg);color:var(--text);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;letter-spacing:-.011em;min-height:100vh}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit}
.mono{font-family:var(--mono);letter-spacing:0}

/* ════════ 2. SHELL (split) ════════ */
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);min-height:100vh}

/* ── sol: marka paneli ── */
.brandside{position:relative;background:var(--deep);color:#fff;padding:48px 56px;display:flex;flex-direction:column;overflow:hidden}
.aurora{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.aurora i{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;mix-blend-mode:screen}
.aurora i:nth-child(1){width:460px;height:460px;background:#6938EF;top:-140px;left:-100px;animation:d1 16s ease-in-out infinite}
.aurora i:nth-child(2){width:380px;height:380px;background:#7C3AED;bottom:-120px;right:-90px;animation:d2 19s ease-in-out infinite}
.aurora i:nth-child(3){width:320px;height:320px;background:#12B886;bottom:18%;left:24%;opacity:.3;animation:d3 22s ease-in-out infinite}
@keyframes d1{50%{transform:translate(50px,40px) scale(1.1)}}
@keyframes d2{50%{transform:translate(-40px,-30px) scale(1.08)}}
@keyframes d3{50%{transform:translate(30px,-30px) scale(1.12)}}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse 80% 70% at 40% 40%,#000,transparent 76%);pointer-events:none}
.pulse-line{position:absolute;left:0;right:0;top:52%;height:90px;opacity:.45;pointer-events:none}
.pulse-line path{stroke:url(#pg);stroke-width:2;fill:none;stroke-dasharray:1200;stroke-dashoffset:1200;animation:trace 5s linear infinite}
@keyframes trace{to{stroke-dashoffset:-1200}}
.bs-top{position:relative;z-index:2}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:23px;letter-spacing:-.03em}
.brand .mk{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#6938EF,#9B6BFF);display:grid;place-items:center;flex:none;box-shadow:0 8px 20px -6px rgba(105,56,239,.8)}
.brand .mk svg{width:20px;height:20px;color:#fff}
.bs-mid{position:relative;z-index:2;margin-top:auto;margin-bottom:auto;padding:40px 0}
.bs-badge{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:30px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);font-size:13px;font-weight:500;margin-bottom:26px}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--live);position:relative;flex:none}
.pulse-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;background:var(--live);opacity:.4;animation:pd 2s ease-out infinite}
@keyframes pd{0%{transform:scale(.6);opacity:.5}70%,100%{transform:scale(2.4);opacity:0}}
.bs-mid h2{font-size:38px;font-weight:800;letter-spacing:-.035em;line-height:1.1}
.bs-mid h2 .grad{background:linear-gradient(105deg,#C9B6FF,#9B6BFF 45%,#5BE3B0);-webkit-background-clip:text;background-clip:text;color:transparent}
.bs-mid p{font-size:16px;color:rgba(255,255,255,.7);margin-top:18px;max-width:380px}
.bs-mini{display:flex;gap:32px;margin-top:36px}
.bs-mini .v{font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:-.02em}
.bs-mini .k{font-size:12.5px;color:rgba(255,255,255,.6);margin-top:2px}
.bs-foot{position:relative;z-index:2;display:flex;align-items:center;gap:13px;font-size:13.5px;color:rgba(255,255,255,.65)}
.bs-foot .stars{color:#FFC53D;letter-spacing:1px}
.av-stack{display:flex}
.av-stack span{width:30px;height:30px;border-radius:50%;border:2px solid var(--deep);margin-left:-9px;display:grid;place-items:center;font-size:11px;font-weight:600;font-family:var(--mono)}
.av-stack span:first-child{margin-left:0}

/* ── sağ: form paneli ── */
.formside{display:flex;flex-direction:column;padding:32px 40px;overflow-y:auto}
.fs-top{display:flex;align-items:center;justify-content:flex-end;font-size:13.5px;color:var(--muted);gap:8px;flex:none}
.fs-top a{font-weight:600;color:var(--brand)}
.fs-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:24px 0}
.card{width:100%;max-width:400px;margin:0 auto}
.card h1{font-size:28px;font-weight:800;letter-spacing:-.03em}
.card .lede{font-size:15px;color:var(--muted);margin-top:8px}
.fs-bottom{flex:none;text-align:center;font-size:13px;color:var(--faint);padding-top:16px}

/* ════════ 3. FORM ════════ */
.gbtn{width:100%;height:50px;border:1px solid var(--line);border-radius:13px;background:#fff;display:flex;align-items:center;justify-content:center;gap:10px;font-size:14.5px;font-weight:600;transition:.18s;margin-top:24px}
.gbtn:hover{border-color:#D6D6E0;background:var(--line-2)}
.gbtn svg{width:19px;height:19px}
.divide{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--faint);font-size:12.5px;font-family:var(--mono)}
.divide::before,.divide::after{content:"";flex:1;height:1px;background:var(--line)}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:7px}
.field label .opt{font-weight:400;color:var(--faint);margin-left:5px}
.inp-wrap{position:relative}
.inp-wrap .lic{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--faint);pointer-events:none}
.inp{width:100%;height:50px;border:1px solid var(--line);border-radius:13px;background:var(--surface);padding:0 14px 0 42px;font-size:14.5px;color:var(--text);transition:.16s}
.inp:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.inp::placeholder{color:var(--faint)}
.pw-eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--faint)}
.pw-eye:hover{background:var(--line-2);color:var(--muted)}.pw-eye svg{width:18px;height:18px}
.row-between{display:flex;align-items:center;justify-content:space-between;margin:-2px 0 20px}
.check{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);cursor:pointer;user-select:none}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box{width:19px;height:19px;border-radius:6px;border:1.5px solid var(--line);display:grid;place-items:center;transition:.15s;flex:none}
.check .box svg{width:13px;height:13px;color:#fff;opacity:0;transition:.15s}
.check input:checked+.box{background:var(--brand);border-color:var(--brand)}
.check input:checked+.box svg{opacity:1}
.check input:focus-visible+.box{box-shadow:0 0 0 3px var(--brand-soft)}
.link{font-size:13.5px;font-weight:600;color:var(--brand)}
.link:hover{color:var(--brand-ink)}
.submit{width:100%;height:52px;border-radius:13px;background:var(--brand);color:#fff;font-size:15.5px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:9px;transition:.2s;box-shadow:0 12px 30px -12px rgba(105,56,239,.7)}
.submit:hover{background:var(--brand-ink);transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(105,56,239,.8)}
.submit svg{width:18px;height:18px}
.alt{text-align:center;font-size:14px;color:var(--muted);margin-top:24px}
.alt a{font-weight:600;color:var(--brand)}
/* şifre gücü */
.pw-meter{display:flex;gap:5px;margin-top:9px}
.pw-meter i{flex:1;height:4px;border-radius:3px;background:var(--line);transition:.25s}
.pw-hint{font-size:12px;color:var(--faint);margin-top:7px;font-family:var(--mono)}
/* views */
.view{display:none;animation:fade .35s}
.view.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* forgot success */
.sent{text-align:center;display:none}
.sent.on{display:block;animation:fade .35s}
.sent .ic{width:72px;height:72px;border-radius:50%;background:var(--live-soft,#E2F6EF);display:grid;place-items:center;margin:0 auto 20px}
.sent .ic svg{width:34px;height:34px;color:var(--live)}
.sent h1{font-size:24px;font-weight:800;letter-spacing:-.02em}
.sent p{font-size:14.5px;color:var(--muted);margin-top:10px}
.sent .mail{font-weight:600;color:var(--text)}
.backlink{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--brand);margin-top:24px}
.backlink svg{width:16px;height:16px}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}
@media(max-width:900px){
  .auth{grid-template-columns:1fr}
  .brandside{padding:32px 28px;min-height:auto}
  .bs-mid{padding:28px 0 8px}.bs-mid h2{font-size:28px}.bs-mid p{display:none}.bs-mini{display:none}.bs-foot{display:none}.pulse-line{display:none}
  .formside{padding:24px 22px}
}

/* sunucu hata kutusu */
.auth-err{background:var(--rose-soft,#FCE6EA);border:1px solid #F3C0CB;color:#B02436;border-radius:11px;padding:11px 14px;font-size:13px;line-height:1.5;margin-bottom:18px}
.auth-err div+div{margin-top:4px}
.auth-ok{background:var(--live-soft,#E2F6EF);border:1px solid #A7E8CF;color:#0A7A57;border-radius:11px;padding:11px 14px;font-size:13px;margin-bottom:18px}