/* Makosan — Auth (login/register) sayfası */

/* ====== Tema renkleri ====== */
:root{
  --bg:#f4f6fa;
  --card:#fff;
  --text:#1b1c1f;
  --muted:#6b7280;
  --primary:#0b1226;   /* navbarla uyumlu koyu lacivert */
  --accent:#0b1226;    /* buton & vurgu */
  --border:#e5e7eb;
  --ring:rgba(0,40,85,.15);
  --radius:14px;
  --shadow:0 10px 25px rgba(0,0,0,.08);
}

/* ====== SPACING (tek noktadan kontrol) ====== */
:root{
  --gap-form:16px;      /* alanlar arası boşluk (14–20 aralığı iyi) */
  --input-h:48px;
  --radius-input:12px;
  --card-px:40px;       /* kart iç pad */
}

/* ====== Reset / temel ====== */
*{ box-sizing:border-box }
html,body{
  height:100%;
  margin:0;
  font-family: Inter, system-ui, Segoe UI, Roboto, Ubuntu, Helvetica, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  display:flex;
  flex-direction:column;
}

/* ====== Layout ====== */
.auth-main{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:40px 20px;
  flex-direction:column;
  gap:20px;
}

.top-logo img{ height:200px; }

.card{
  background:var(--card);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
  padding:var(--card-px);
  width:100%;
  max-width:500px;
  text-align:left;
}

/* ====== Sekmeler ====== */
.tabs{
  display:flex;
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  margin-bottom:24px;
}
.tab{
  flex:1;
  text-align:center;
  padding:12px 8px;
  font-weight:700;
  font-size:14px;
  background:#f7f7f8;
  color:var(--muted);
  border:none;
  cursor:pointer;
}
.tab.active{
  background:#fff;
  color:var(--text);
  box-shadow:inset 0 -2px 0 var(--primary);
}

/* ====== Form & Panel (grid tabanlı, hidden destekli) ====== */
.card form,
.panel{
  display:grid;                 /* !important YOK -> hidden çalışır */
  grid-auto-rows:min-content;
  row-gap:var(--gap-form);
}
/* gizli paneller */
.panel[hidden]{ display:none !important; }
/* panel içindeki elemanların default margin'leri sıfırlansın */
.panel > *{ margin:0; }

/* ====== Inputlar ====== */
.card input[type="email"],
.card input[type="password"],
.card input[type="text"],
.card input[type="tel"]{
  width:100%;
  height:var(--input-h);
  padding:12px 14px;
  border-radius:var(--radius-input);
  border:1px solid var(--border);
  font-size:15px;
  background:#fff;
  transition:.2s;
}
.card input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--ring);
  outline:none;
}

/* 'Beni hatırla' + 'Şifremi unuttum' dikey blok */
.remember-block{
  display:flex;
  flex-direction:column;
  gap:8px;            /* iç aralık */
}
.remember-block label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:var(--muted);
}
.remember-block .forgot{
  font-size:14px;
  color:var(--accent);
  text-decoration:none;
  font-weight:500;
}
.remember-block .forgot:hover{ text-decoration:underline; }

/* ====== Butonlar ====== */
.btn-primary{
  width:100%;
  height:var(--input-h);
  border:none;
  border-radius:var(--radius-input);
  background:var(--accent);
  color:#fff;
  font-weight:700;
  font-size:16px;
  cursor:pointer;
  transition:.2s;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 6px 14px rgba(11,18,38,.08);
}
.btn-primary:hover{ background:#151d3a; }

.btn-link{
  border:none;
  background:transparent;
  color:var(--accent);
  text-decoration:underline;
  cursor:pointer;
  font-size:14px;
}

/* ====== Üye ol akışı ekleri ====== */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-form); }
@media (max-width:640px){ .grid-2{ grid-template-columns:1fr; } }

.signup-note{ color:var(--muted); font-size:14px; }
.code-input{
  letter-spacing:4px;
  text-align:center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.password-wrap{ position:relative; }
.password-wrap .eye{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  border:none; background:transparent; cursor:pointer; font-size:16px; opacity:.6;
}
.password-wrap .eye:hover{ opacity:1; }

.ck{ font-size:14px; color:var(--muted); display:flex; gap:8px; align-items:flex-start; }

/* alert */
.alert{
  padding:10px 12px;
  border-radius:10px;
  font-size:14px;
}
.alert.err{ background:#fff1f1; color:#8a1f1f; border:1px solid #f1c9c9; }
.alert.ok { background:#effaf1; color:#1a7a3d; border:1px solid #c6e8cf; }

/* ====== Footer ====== */
.site-footer{
  text-align:center;
  padding:18px;
  font-size:13px;
  color:var(--muted);
  border-top:1px solid #e5e7eb;
}