/* ══════════════════════════════════════════════════════════════════════
   KİMLİK SAYFALARI — giriş · kayıt · parola

   Referanstan UYARLANDI, kopyalanmadı: referans açık temalı ve eski
   temanın `eg-*` ikon fontunu kullanıyordu. Burası sitenin koyu teması,
   ikonlar satır içi SVG, ölçüler `tokens.css` değişkenlerinden.

   Düzen: geniş ekranda iki sütun (solda kreatif görsel + avantaj,
   sağda form kartı). 860px altında görsel gizlenir ve yalnızca form
   kalır — küçük ekranda dekoratif bir fotoğraf formu aşağı itiyordu.

   Parola sıfırlama bu düzeni KULLANMAZ: orada tek ortalanmış sade kart
   var (bilinçli — o ekranda satmaya çalışılacak bir şey yok).
   ══════════════════════════════════════════════════════════════════════ */

.k-sar { margin: var(--sp-10) auto var(--sp-16); }

.k-grid { display: grid; gap: var(--sp-8); align-items: stretch; }
@media (min-width: 860px) {
  .k-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: var(--sp-10); }
}

/* ── Sol panel ─────────────────────────────────────────────────────── */

.k-yan {
  position: relative;
  display: none;                     /* Küçük ekranda hiç basılmaz */
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  overflow: hidden;
  min-height: 560px;
  isolation: isolate;
}
@media (min-width: 860px) { .k-yan { display: block; order: -1; } }

.k-yan__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%;
}
/* Fotoğrafın üstüne koyu perde: metnin okunurluğu fotoğrafın
   parlaklığına bırakılamaz. */
.k-yan::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 12, 15, .55) 0%, rgba(10, 12, 15, .92) 62%);
}

.k-yan__ic {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: var(--sp-5);
  padding: var(--sp-10);
}
.k-yan__ic h2 {
  font-family: var(--font-head); font-size: var(--fs-3xl); font-weight: var(--fw-bold);
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
  color: #fff; margin: 0; max-width: 22ch;
}
.k-yan__ic > p { margin: 0; color: rgba(255, 255, 255, .82); font-size: var(--fs-md); max-width: 46ch; }
.k-yan .b-kicker { align-self: flex-start; background: rgba(34, 181, 115, .22); color: var(--brand); }

.k-yan__liste { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.k-yan__liste li { display: flex; align-items: flex-start; gap: var(--sp-5); }
.k-yan__liste li > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.k-yan__liste b { color: #fff; font-size: var(--fs-md); }
.k-yan__liste b + span { color: rgba(255, 255, 255, .72); font-size: var(--fs-sm); line-height: var(--lh-body); }
.k-yan__i {
  width: 34px; height: 34px; flex: none; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(34, 181, 115, .2); color: var(--brand);
}
.k-yan__i svg { width: 17px; height: 17px; }

.k-yan__not {
  margin: var(--sp-4) 0 0; padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: var(--fs-xs); color: rgba(255, 255, 255, .6);
}

/* ── Form kartı ────────────────────────────────────────────────────── */

.k-kart {
  align-self: start;
  padding: var(--sp-9);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  display: flex; flex-direction: column; gap: var(--sp-6);
}
.k-kart--tek { max-width: 460px; margin-inline: auto; }
.k-kart__bas h1 {
  font-family: var(--font-head); font-size: var(--fs-2xl); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight); color: var(--ink); margin: 0;
}
.k-kart__bas p { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--mute); }

.k-form { display: flex; flex-direction: column; gap: var(--sp-6); }

/* Parola alanı + göster/gizle düğmesi */
.k-parola { position: relative; display: flex; }
.k-parola .c-input { flex: 1; padding-inline-end: 44px; }
.k-parola__goz {
  position: absolute; inset-inline-end: 4px; inset-block: 4px;
  width: 36px; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--mute); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.k-parola__goz:hover { color: var(--ink); background: var(--card-2); }
.k-parola__goz svg { width: 18px; height: 18px; }

.k-kart__alt { display: flex; flex-direction: column; gap: var(--sp-4); font-size: var(--fs-sm); }
.k-kart__alt a { font-weight: var(--fw-semibold); }
.k-kart__not {
  margin: 0; padding-top: var(--sp-5); border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--mute); line-height: var(--lh-body);
}