/* ==================================================================
   Ekran: GİRİŞ ve köprü sayfalar (Faz 2 / 07.26, Yön D), geliştirici S
   layouts/guest: giriş, iki adımlı doğrulama, şifremi unuttum, şifre sıfırlama,
   hesap açılış şifresi, KVKK onayı, e-posta doğrulama, şifre onayı.
   Menü adası yok; ortada tek büyük karo, isteğe bağlı yanında örnek konuşma karosu.
   Renkler masa.css :root değişkenlerinden.
================================================================== */

body.giris-govde{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.giris{flex:1;display:flex;flex-direction:column}
.giris-ust{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem var(--gutter)}
.giris-ust .marka .marka-logo-tam{display:block;height:3rem}
.giris-ust .marka .marka-logo-yalniz{display:none}
.giris-sahne{flex:1;display:grid;place-items:center;padding:1rem var(--gutter) 2rem}
.giris-izgara{display:grid;grid-template-columns:minmax(0,27rem);gap:1.25rem;width:100%;justify-content:center;align-items:stretch}
.giris-izgara.iki{grid-template-columns:minmax(0,27rem) minmax(0,25rem)}

/* Karo */
.giris-karo{display:flex;flex-direction:column;gap:1rem;padding:2rem 2rem 1.75rem;border-radius:var(--r-k);background:var(--c-card);box-shadow:inset 0 0 0 1px var(--c-line),var(--shadow-2);animation:karo-gel var(--d-3) var(--ease) both;transform-origin:50% 50%}
.giris-karo h1{font-size:var(--fs-2xl);letter-spacing:-.04em}
.giris-etiket{color:var(--c-accent-ink)}
.giris-etiket svg{color:var(--c-accent-ink)}
.giris-alt{font-size:var(--fs-body);color:var(--c-muted);margin-top:-.375rem}
.giris-karo .serit{margin:0}
.giris-form{display:flex;flex-direction:column;gap:1rem;margin-top:.25rem}
.giris-form .dg-tam{margin-top:.25rem;min-height:3rem}
.etiket-satir{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.etiket-satir label{font-size:var(--fs-m);font-weight:700}
.giris-bag{display:inline-flex;align-items:center;min-height:var(--tap);font-size:var(--fs-m)}
.sifre-alan{position:relative}
.sifre-alan .alan{padding-right:3.25rem}
.sifre-goster{position:absolute;right:.125rem;top:50%;transform:translateY(-50%);color:var(--c-muted)}
.sifre-goster[aria-pressed="true"]{color:var(--c-ink)}
.kod-alan{letter-spacing:.3em;font-size:var(--fs-l);font-variant-numeric:tabular-nums}
.giris-son{display:flex;align-items:center;flex-wrap:wrap;gap:.375rem;margin-top:.25rem;padding-top:1rem;border-top:var(--cizgi);font-size:var(--fs-m);color:var(--c-muted)}
.giris-son .bag-tek svg{width:1.125rem;height:1.125rem}
.giris-son .bag{display:inline-flex;align-items:center;gap:.375rem;min-height:var(--tap)}
.dg-cikis{color:var(--c-danger);text-decoration-color:var(--c-danger-bg);background:none;border:0;padding:0;cursor:pointer;font:inherit;font-weight:700}
.kurtarma-ac{border-radius:1rem;background:var(--c-bg);box-shadow:inset 0 0 0 1px var(--c-line)}
.kurtarma-ac > summary{display:flex;align-items:center;min-height:var(--tap);padding:.5rem .875rem;font-size:var(--fs-m);font-weight:700;color:var(--c-accent-ink);cursor:pointer;list-style:none}
.kurtarma-ac > summary::-webkit-details-marker{display:none}
.kurtarma-ac[open] > summary{border-bottom:var(--cizgi)}
.kurtarma-ac .alan-grup{padding:.875rem}
.giris-karo .kvkk-onay{margin:0}

/* Şifre sıfırlama: giriş karosunun arka yüzü (çevrilerek açılır) */
.giris-karo.cevir{animation:kart-ac var(--d-3) var(--ease) both}
.giris-karo.donuyor{transition:transform .26s cubic-bezier(.5,0,.75,0),opacity .26s;transform:perspective(75rem) rotateY(78deg);opacity:0}
@keyframes kart-ac{from{transform:perspective(75rem) rotateY(-78deg);opacity:0}}

/* Yan karo: örnek konuşma (gelen kutusunun balon dili: müşteri beyaz, asistan nane) */
.giris-yan{display:flex;flex-direction:column;gap:1.125rem;padding:1.75rem;border-radius:var(--r-k);background:var(--c-surface);box-shadow:inset 0 0 0 1px var(--c-line);animation:karo-gel var(--d-3) var(--ease) .08s both}
.giris-yan h2{font-size:var(--fs-xl);letter-spacing:-.03em}
.ornek-akis{display:flex;flex-direction:column;gap:.625rem}
.ornek-akis li{display:flex;flex-direction:column;gap:.25rem;max-width:88%}
.o-musteri{align-self:flex-start}
.o-asistan{align-self:flex-end;align-items:flex-end}
.o-kim{display:inline-flex;align-items:center;gap:.375rem;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted)}
.o-kim .mk{width:1.125rem;height:1.125rem}
.o-balon{padding:.625rem .875rem;border-radius:1.125rem;font-size:var(--fs-m);line-height:1.45}
.o-musteri .o-balon{background:var(--c-card);box-shadow:inset 0 0 0 1px var(--c-line);border-bottom-left-radius:.375rem}
.o-asistan .o-balon{background:var(--c-surface-2);border-bottom-right-radius:.375rem}
.o-yaziyor{align-self:flex-end;padding:.625rem .875rem;border-radius:1.125rem;background:var(--c-surface-2);color:var(--c-accent-ink)}
.ornek-akis .o-musteri{animation:balon-gel .5s var(--ease) .3s both}
.ornek-akis .o-yaziyor{animation:yaziyor-gel 1.6s var(--ease) .8s both}
.ornek-akis .o-asistan{animation:balon-gel .5s var(--ease) 2.2s both}
@keyframes balon-gel{from{opacity:0;transform:translateY(.5rem)}}
@keyframes yaziyor-gel{0%{opacity:0;max-height:0;padding-block:0}15%,85%{opacity:1;max-height:3rem;padding-block:.625rem}100%{opacity:0;max-height:0;padding-block:0;margin-top:-.625rem}}
.ornek-maddeler{display:grid;gap:.5rem;margin-top:auto}
.ornek-maddeler li{display:flex;align-items:flex-start;gap:.625rem;font-size:var(--fs-m);color:var(--c-ink-3)}
.ornek-maddeler svg{width:1.125rem!important;height:1.125rem!important;margin-top:.125rem;color:var(--c-accent-ink)}

.giris-dip{padding:0 var(--gutter) 1.5rem;display:flex;justify-content:center}

@media (max-width:56.24em){
  .giris-izgara.iki{grid-template-columns:minmax(0,27rem)}
  .giris-karo{padding:1.5rem 1.25rem 1.25rem}
  .giris-yan{padding:1.375rem 1.25rem}
  .giris-sahne{place-items:start center;padding-top:.25rem}
}
@media (prefers-reduced-motion:reduce){
  .giris-karo.donuyor{transform:none;opacity:1}
}