/* Kayıt sayfası (/signup) — yalnız form gösterilirken yüklenir (auth/signup.html → block head).
   Aile sistemi (çatı site cati.css): lacivert #0C1B2A, Ön Büro yeşili, düğme #0A7D56 + beyaz (5,2:1 AA),
   başlık Space Grotesk, gövde Manrope. Giriş sayfası (login) bu dosyayı hiç görmez.

   Yerleşim: masaüstünde solda form kartı, sağda lacivert panel (üstte maskot sahnesi, altta
   üç adım). Dar ekranda sıra: küçük sahne şeridi → form → adımlar. Form her zaman ilk ekranda. */

.auth-wrap.auth-kayit {
  --k-ink:#0C1B2A; --k-ink-2:#13263A; --k-btn:#0A7D56; --k-btn-hover:#075E40;
  --k-ok:#0E9F6E; --k-ok-soft:#E7F6EF; --k-muted:#3B4756;
  display:grid; grid-template-columns:minmax(0,460px) minmax(0,440px);
  grid-template-areas:"form sahne" "form adim";
  grid-template-rows:auto auto; row-gap:0;
  column-gap:56px; align-content:center; justify-content:center;
  justify-items:stretch; align-items:stretch; /* panel.css .auth-wrap place-items:center'ı geri al */
  min-height:100vh; padding:40px 24px; background:#F7F8FA;
}

/* --- form --- */
.auth-kayit .auth-card { grid-area:form; align-self:center; max-width:none; order:0;
  padding:34px 34px 26px; border-radius:20px; border-color:#E6E9EE;
  box-shadow:0 1px 2px rgba(12,27,42,.04), 0 18px 48px rgba(12,27,42,.08); }
.auth-kayit .auth-logo { margin-bottom:22px; }
.auth-kayit .kayit-h1 { white-space:normal; font-family:var(--fd); font-weight:600; font-size:clamp(25px,2.4vw,30px);
  line-height:1.15; letter-spacing:-.01em; color:var(--k-ink); margin:0 0 14px; }
.kayit-guven { list-style:none; margin:0 0 6px; padding:0; display:grid; gap:7px; }
.kayit-guven li { position:relative; padding-left:28px; font-size:15px; line-height:1.45; color:var(--k-muted); }
.kayit-guven li::before { content:''; position:absolute; left:0; top:1px; width:20px; height:20px;
  border-radius:50%; background:var(--k-ok-soft); }
.kayit-guven li::after { content:''; position:absolute; left:7px; top:5px; width:5px; height:9px;
  border:solid #075E40; border-width:0 2px 2px 0; transform:rotate(45deg); }
.auth-kayit .form { gap:16px; }
.auth-kayit .fld .fl { font-size:13.5px; color:#2D3A48; }
.auth-kayit .fld .fh { font-size:12.5px; color:#5B6675; }
/* 16px: iOS odakta yakınlaştırmasın. */
.auth-kayit .fld input:not([type=checkbox]), .auth-kayit .fld select {
  font-size:16px; padding:13px 14px; border-radius:12px; min-height:50px; }
.auth-kayit .form .btn.primary { width:100%; min-height:52px; font-size:16px; font-weight:700;
  border-radius:14px; background:var(--k-btn); color:#fff; }
.auth-kayit .form .btn.primary:hover { background:var(--k-btn-hover); filter:none; }
.auth-kayit .form .btn.primary:focus-visible { outline:3px solid var(--k-ok); outline-offset:2px; }
.auth-kayit .form .small a { color:var(--k-ink); }
.auth-kayit .auth-foot { margin-top:20px; font-size:13px; }

/* --- sağ panel: sahne (krem kil vitrin) + adımlar — iki öğe, tek kart görünümü --- */
.kayit-sahne { grid-area:sahne; align-self:end; position:relative; overflow:hidden;
  border-radius:24px 24px 0 0; background:#F8EEE0; }
/* Oran vitrin kırpmasıyla aynı (560:900, satır içi de gelir); katmanların konumu sahne.json'dan satır içi gelir. */
.kayit-sahne-ic { position:relative; width:100%; aspect-ratio:560/900; }
.kayit-sahne img { position:absolute; display:block; height:auto; max-width:none; }
.k-vitrin { left:0; top:0; width:100%; }

.auth-kayit .auth-aside { grid-area:adim; align-self:start; order:0; max-width:none;
  background:var(--k-ink); color:#C9D2DC; border-radius:0 0 24px 24px; padding:24px 30px 24px; }
.auth-kayit .auth-aside h2 { color:#fff; font-size:17px; margin:0 0 14px; }
.auth-kayit .auth-steps { padding-left:0; list-style:none; counter-reset:adim; }
.auth-kayit .auth-steps li { counter-increment:adim; position:relative; padding-left:40px;
  font-size:14.5px; color:#C9D2DC; margin-bottom:12px; }
.auth-kayit .auth-steps li::before { content:counter(adim); position:absolute; left:0; top:0;
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:var(--k-ok); color:#032318; font:600 14px/1 var(--fd); }
.auth-kayit .auth-steps li strong { color:#fff; }
.auth-kayit .auth-aside-foot { color:#BCC8D3; border-top-color:#2A4560; font-size:13.5px; }

/* --- giriş animasyonu (marka/sahne/README.md): her maskot alttan 24 px + opaklık, 450 ms,
   sıra/gecikme sahne.json'dan; Satış Takibi kapının içinden sağa çıkar, Pazarlama hafif zıplar. --- */
@media (prefers-reduced-motion: no-preference) {
  .kayit-sahne .k { animation:k-cik .45s var(--gecikme, 0s) ease-out both; }
  .kayit-sahne .k-kapidan { animation-name:k-kapidan; animation-duration:.6s; }
  .kayit-sahne .k-zipla { animation:k-cik .45s var(--gecikme, 0s) ease-out both,
    k-zipla 2.4s calc(var(--gecikme, 0s) + .6s) ease-in-out infinite; }
}
@keyframes k-cik { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
@keyframes k-kapidan { from { opacity:0; transform:translateX(-28%) scale(.92); } to { opacity:1; transform:none; } }
@keyframes k-zipla { 0%, 100% { transform:none; } 50% { transform:translateY(-3%); } }

/* --- dar ekran: sahne küçük şerit, form önde --- */
@media (max-width: 900px) {
  .auth-wrap.auth-kayit { grid-template-columns:minmax(0,480px);
    grid-template-areas:"sahne" "form" "adim"; row-gap:0; padding:16px 16px 32px; align-content:start; }
  /* Şerit: sahnenin alt kısmı (maskotlar) görünür, form ilk ekranda kalır. */
  .kayit-sahne { height:160px; border-radius:20px; margin-bottom:14px; }
  .kayit-sahne-ic { position:absolute; bottom:0; left:50%; width:250px; transform:translateX(-50%); }
  .auth-kayit .auth-card { padding:26px 20px 20px; }
  .auth-kayit .auth-aside { border-radius:20px; margin-top:16px; padding:22px 22px 20px; }
}

/* Sarmalayıcı uzun sayfada bitince gövde rengi farklı görünmesin. */
body.auth:has(.auth-kayit) { background:#F7F8FA; }