/* ============================================================
   Tohum — Auth pages (login / signup) shared styles
   Reuses the exact design tokens, fonts and component language
   of the landing page. UI only.
   ============================================================ */
:root{
  --bg:#0C140E;
  --bg-deep:#080D09;
  --forest:#143027;
  --forest-2:#1B4332;
  --mid:#2D6A4F;
  --fresh:#52B788;
  --fresh-2:#74C69D;
  --gold:#D4E09B;
  --cream:#F4F1E8;
  --sage:#9DA89B;
  --sage-dim:#6E7A6E;
  --warn:#E0876B;
  --hair:rgba(244,241,232,0.09);
  --hair-strong:rgba(244,241,232,0.16);

  --display:"Fraunces",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,sans-serif;

  --pad:clamp(20px,5vw,40px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--cream);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  min-height:100svh;
}
::selection{background:var(--fresh);color:var(--bg-deep)}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.06;letter-spacing:-.012em}
p{color:var(--sage)}

/* ---------- buttons (mirrors landing page) ---------- */
.btn{
  --b:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--sans);font-size:.96rem;font-weight:500;
  padding:.86em 1.45em;border-radius:999px;
  border:1px solid var(--b);
  cursor:pointer;transition:transform .25s cubic-bezier(.2,.7,.3,1),background .25s,color .25s,border-color .25s;
}
.btn-primary{background:var(--gold);color:#1A2114;--b:var(--gold)}
.btn-primary:hover{background:#E2EBAE;transform:translateY(-2px)}
.btn-ghost{color:var(--cream);--b:var(--hair-strong);background:transparent}
.btn-ghost:hover{border-color:var(--fresh);color:var(--fresh-2);transform:translateY(-2px)}
.btn-sm{padding:.6em 1.1em;font-size:.88rem}
.btn:focus-visible{outline:2px solid var(--fresh-2);outline-offset:3px}

/* ---------- header (mirrors landing page) ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);
  background:rgba(8,13,9,.72);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid var(--hair);
}
.wordmark{display:flex;align-items:center;gap:.55em;font-family:var(--display);font-size:1.18rem;font-weight:600;letter-spacing:-.01em;color:var(--cream)}
.wordmark svg{width:20px;height:20px;color:var(--fresh)}
.nav{display:flex;align-items:center;gap:30px}
.nav a.link{font-size:.92rem;color:var(--sage);transition:color .2s}
.nav a.link:hover{color:var(--cream)}

/* ---------- auth layout ---------- */
.auth-main{
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  padding:120px var(--pad) 64px;
  background:
    radial-gradient(120% 90% at 50% -10%,rgba(45,106,79,.20) 0%,rgba(12,20,14,0) 55%),
    radial-gradient(90% 60% at 50% 120%,rgba(45,106,79,.12) 0%,rgba(12,20,14,0) 60%);
}
.auth-card{
  width:100%;max-width:420px;
  border:1px solid var(--hair-strong);border-radius:22px;
  padding:clamp(28px,4vw,40px) clamp(24px,3.4vw,36px);
  background:linear-gradient(180deg,rgba(244,241,232,.03),rgba(244,241,232,0)),var(--bg-deep);
  box-shadow:0 44px 100px -50px rgba(0,0,0,.9), inset 0 0 0 1px var(--hair);
}
.auth-card.wide{max-width:460px}

/* brand mark on top */
.auth-brand{
  width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--hair-strong);color:var(--fresh);
  background:rgba(82,183,136,.07);margin:0 auto 22px;
}
.auth-brand svg{width:24px;height:24px}

.auth-head{text-align:center;margin-bottom:26px}
.auth-head h1{font-size:clamp(1.7rem,3.4vw,2.05rem);color:var(--cream)}
.auth-head p{margin-top:.55rem;font-size:.98rem;color:var(--sage)}

/* fields */
.field{margin-top:16px}
.field:first-of-type{margin-top:0}
.field label{
  display:block;font-size:.82rem;font-weight:500;color:var(--sage);
  letter-spacing:.01em;margin-bottom:.5em;
}
.control{position:relative}
.input{
  width:100%;
  background:rgba(244,241,232,.04);
  border:1px solid var(--hair-strong);
  color:var(--cream);font-family:var(--sans);font-size:1rem;
  padding:.85em 1em;border-radius:12px;
  transition:border-color .25s,background .25s,box-shadow .25s;
}
.input::placeholder{color:var(--sage-dim)}
.input:focus{
  outline:none;border-color:var(--fresh);
  background:rgba(82,183,136,.06);
  box-shadow:0 0 0 3px rgba(82,183,136,.14);
}
/* password field leaves room for the toggle */
.control.has-toggle .input{padding-right:3em}

/* error state — styling only, ready to be toggled with .error */
.field.error .input,.input.error{
  border-color:var(--warn);
  background:rgba(224,135,107,.06);
  box-shadow:0 0 0 3px rgba(224,135,107,.12);
}
.field-msg{margin-top:.5em;font-size:.82rem;color:var(--warn);display:none}
.field.error .field-msg{display:block}

/* show / hide password toggle */
.toggle-pass{
  position:absolute;top:50%;right:.55em;transform:translateY(-50%);
  width:34px;height:34px;border:none;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--sage-dim);border-radius:8px;transition:color .2s,background .2s;
}
.toggle-pass:hover{color:var(--cream)}
.toggle-pass:focus-visible{outline:2px solid var(--fresh-2);outline-offset:2px}
.toggle-pass svg{width:19px;height:19px}
.toggle-pass .icon-off{display:none}
.toggle-pass.showing .icon-on{display:none}
.toggle-pass.showing .icon-off{display:block}

/* helper row (forgot password) */
.row-end{display:flex;justify-content:flex-end;margin-top:10px}
.link-muted{font-size:.86rem;color:var(--sage-dim);transition:color .2s}
.link-muted:hover{color:var(--fresh-2)}

/* checkbox row (signup) */
.check-row{display:flex;align-items:flex-start;gap:.65em;margin-top:18px}
.check-row input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  flex:0 0 auto;width:18px;height:18px;margin-top:2px;
  border:1px solid var(--hair-strong);border-radius:6px;
  background:rgba(244,241,232,.04);cursor:pointer;position:relative;transition:border-color .2s,background .2s;
}
.check-row input[type="checkbox"]:hover{border-color:var(--fresh)}
.check-row input[type="checkbox"]:checked{background:var(--fresh);border-color:var(--fresh)}
.check-row input[type="checkbox"]:checked::after{
  content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;
  border:solid #0C140E;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.check-row input[type="checkbox"]:focus-visible{outline:2px solid var(--fresh-2);outline-offset:2px}
.check-row label{font-size:.86rem;color:var(--sage);line-height:1.45;cursor:pointer}
.check-row label a{color:var(--fresh-2);text-decoration:underline;text-underline-offset:2px}
.check-row label a:hover{color:var(--gold)}

/* form-level error message (below the inputs) */
.auth-error{
  display:none;margin-top:14px;
  font-size:.88rem;color:var(--warn);
  background:rgba(224,135,107,.08);
  border:1px solid rgba(224,135,107,.32);
  padding:.7em .9em;border-radius:10px;
}
.auth-error.show{display:block}

/* primary CTA full width */
.auth-cta{width:100%;margin-top:22px}

/* divider "— veya —" */
.divider{
  display:flex;align-items:center;gap:14px;margin:22px 0;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-dim);
}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--hair)}

/* google button — dark-theme friendly subtle fill + outline */
.btn-google{
  width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  font-family:var(--sans);font-size:.95rem;font-weight:500;color:var(--cream);
  padding:.82em 1.2em;border-radius:999px;cursor:pointer;
  background:rgba(244,241,232,.04);border:1px solid var(--hair-strong);
  transition:border-color .25s,background .25s,transform .25s cubic-bezier(.2,.7,.3,1);
}
.btn-google:hover{border-color:var(--fresh);background:rgba(82,183,136,.06);transform:translateY(-2px)}
.btn-google:focus-visible{outline:2px solid var(--fresh-2);outline-offset:3px}
.btn-google svg{width:18px;height:18px;flex:0 0 auto}

/* bottom alt line */
.auth-alt{text-align:center;margin-top:24px;font-size:.92rem;color:var(--sage)}
.auth-alt a{color:var(--fresh-2);font-weight:500;transition:color .2s}
.auth-alt a:hover{color:var(--gold)}

/* ---------- responsive ---------- */
@media (max-width:560px){
  .nav{gap:16px}
  .auth-main{padding:100px 16px 48px}
  .auth-card,.auth-card.wide{max-width:100%}
}