@charset "UTF-8";
/* =====================================================================
   V3 · GİRİŞ / KAYIT (pages/login.html) — eski CSS katmanı YOK (saf V3)
   ≥ 960: solda bordo marka paneli, sağda form. Altında tek sütun.
   ===================================================================== */

.auth-page { min-height: 100vh; min-height: 100dvh; background: var(--bg); }
.auth-shell { display: grid; grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr); min-height: 100vh; min-height: 100dvh; }

/* ---------- Marka paneli ---------- */
.auth-aside {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-8);
  padding: var(--s-10) clamp(var(--s-8), 4vw, var(--s-16));
  background: var(--p-wine-800); color: var(--p-bone-50); overflow: hidden;
}
/* İnce çizgi dokusu: sadece dekor */
.auth-aside::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.08;
  background-image: repeating-linear-gradient(135deg, currentColor 0 1px, transparent 1px 22px);
}
.auth-aside > * { position: relative; z-index: 1; }
.auth-aside-brand { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--t-md); font-weight: var(--w-semibold); letter-spacing: -0.01em; }
.auth-aside-brand .brand-mark { width: 32px; height: 32px; }
.auth-aside-body { display: flex; flex-direction: column; gap: var(--s-6); max-width: 30rem; }
.auth-aside-body h2 { margin: 0; font-size: clamp(1.75rem, 2.4vw, 2.5rem); font-weight: var(--w-medium); line-height: 1.12; letter-spacing: -0.03em; color: inherit; }
.auth-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.auth-features li { display: flex; align-items: baseline; gap: var(--s-3); font-size: var(--t-base); line-height: var(--lh-snug); color: color-mix(in srgb, currentColor 86%, transparent); }
.auth-features i { flex: none; width: 18px; text-align: center; opacity: 0.8; }
.auth-aside-foot { margin: 0; font-size: var(--t-xs); opacity: 0.75; }

/* ---------- Form alanı ---------- */
.auth-main { position: relative; display: flex; flex-direction: column; min-width: 0; padding: var(--s-6) var(--s-6) var(--s-8); }
.auth-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: var(--s-2); }
.auth-lang { width: auto; min-width: 72px; }
.auth-container { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-6); padding: var(--s-6) 0; }
.auth-card { width: min(400px, 100%); display: flex; flex-direction: column; gap: var(--s-6); }

.auth-logo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); text-align: left; }
.auth-logo .logo-icon { display: none; } /* geniş ekranda marka panelde */
.auth-logo h1 { margin: 0; font-size: var(--t-2xl); font-weight: var(--w-medium); letter-spacing: var(--track-tight); color: var(--ink); }
.auth-logo p { margin: 0; font-size: var(--t-sm); color: var(--ink-3); }

.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; gap: 3px; border: 1px solid var(--line); border-radius: calc(var(--r-2) + 3px); background: var(--bg-sunken); }
.auth-tab {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 40px;
  border: 0; border-radius: var(--r-2); background: transparent; color: var(--ink-2);
  font: inherit; font-size: var(--t-sm); font-weight: var(--w-medium); cursor: pointer;
}
.auth-tab:hover { color: var(--ink); }
.auth-tab.active { background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-1), 0 0 0 1px var(--line); }

.auth-form { display: none; flex-direction: column; gap: var(--s-4); }
.auth-form.active { display: flex; animation: v3-pop var(--d-base) var(--ease-out); }
.auth-form .form-group + .form-group { margin-top: 0; }
.auth-form .form-group > label { display: block; }
.password-input { position: relative; display: flex; align-items: center; }
.password-input input { padding-right: 48px; }
.toggle-password {
  position: absolute; right: 2px; display: inline-grid; place-items: center; width: 40px; height: 40px;
  border: 0; border-radius: var(--r-2); background: none; color: var(--ink-3); cursor: pointer;
}
.toggle-password:hover { color: var(--ink); background: var(--surface-hover); }
.form-group.error input { border-color: var(--neg); }
.form-group.error input:focus { box-shadow: 0 0 0 3px var(--neg-soft); }

.auth-form .btn-block { min-height: var(--h-lg); margin-top: var(--s-2); }
.btn-loader { display: none; }
.btn.loading .btn-text { visibility: hidden; }
.btn.loading { position: relative; }
.btn.loading .btn-loader { display: inline-grid; place-items: center; position: absolute; inset: 0; }

.demo-info { padding: var(--s-3) var(--s-4); border: 1px dashed var(--line-strong); border-radius: var(--r-2); background: none; font-size: var(--t-sm); color: var(--ink-2); }
.demo-badge { display: inline-flex; align-items: center; gap: var(--s-2); margin-bottom: 4px; font-size: var(--t-xs); font-weight: var(--w-semibold); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }
.demo-info p { margin: 0; line-height: 1.7; }
.demo-info strong { font-weight: var(--w-medium); color: var(--ink); }

.auth-footer { display: none; font-size: var(--t-xs); color: var(--ink-3); text-align: center; }
.auth-footer p { margin: 0; }

/* Koyu tema: marka paneli espresso + gül vurgu */
:root[data-theme="dark"] .auth-aside { background: var(--p-esp-800); color: var(--p-cream-100); border-right: 1px solid var(--line); }
:root[data-theme="dark"] .auth-aside-brand .brand-mark { color: var(--accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .auth-aside { background: var(--p-esp-800); color: var(--p-cream-100); border-right: 1px solid var(--line); }
}

/* ---------- < 960: tek sütun ---------- */
@media (max-width: 959px) {
  .auth-shell { grid-template-columns: minmax(0, 1fr); }
  .auth-aside { display: none; }
  .auth-main { padding: var(--s-4) var(--s-4) var(--s-6); }
  .auth-container { justify-content: flex-start; padding-top: var(--s-6); }
  .auth-logo { align-items: center; text-align: center; }
  .auth-logo .logo-icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-3); background: var(--accent); color: var(--accent-ink); --logo-accent: var(--accent-ink); }
  .auth-logo .logo-icon .brand-mark { width: 30px; height: 30px; }
  .auth-footer { display: block; }
}
@media (max-width: 768px), (pointer: coarse) {
  .auth-tab { min-height: 44px; }
  .toggle-password { width: 44px; height: 44px; }
}