/* Yeslist hesap ailesi (TASARIM-01 parti 7.2, plan v2 §7; kurucu 25011).
   site.css'ten SONRA yüklenir ve onun dilini kullanır. Form EN ÜSTTE durur:
   kısa başlık, alanlar, düğme, sonra büyük satır bağlantılar; açıklama notu en
   altta. Telefonda düğme ilk ekranda görünür. Bu sayfalarda hareket yoktur.
   Kabuğun sınıflarını (`.brand`, `.head`, `.foot`, `.btn`) yeniden tanımlamaz. */

.account main, .account .foot { overflow-wrap: anywhere; }

.account .poster > span { white-space: normal; }

.acc { padding: var(--space-6) 0 var(--space-16); }

.acc-col { max-width: 26rem; }

.acc-title { margin-bottom: var(--space-5); font-size: clamp(2.5rem, 11.5vw, 3.75rem); }

/* ---------------------------------------------------------------- form */

.acc-form { display: grid; gap: var(--space-4); }

.field { display: grid; gap: 6px; min-width: 0; }

.field > label { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: var(--color-ink); }

.input-wrap { position: relative; display: flex; }

/* 16 px altı yazı iOS'ta odakta sayfayı yakınlaştırır. */

.field input:not([type="checkbox"]) {
  width: 100%;
  min-width: 0;
  height: 54px;
  padding: 0 var(--space-4);
  border: 1.5px solid var(--color-border-strong);
  border-radius: 16px;
  background: var(--color-surface);
  color: var(--color-ink);
  font: 500 1.0625rem/1.2 var(--font-body);
  -webkit-appearance: none;
  appearance: none;
}

.field input:not([type="checkbox"]):focus { outline: 2px solid var(--color-brand); outline-offset: 1px; border-color: var(--color-brand); }

.field--error input:not([type="checkbox"]) { border-color: var(--color-danger); }

.input-wrap input[type="password"], .input-wrap input[data-password-shown] { padding-right: 5rem; }

.password-toggle {
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  min-width: 4.25rem;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: 12px;
  background: var(--color-surface-soft);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  cursor: pointer;
}

/* Düğme yalnız betik çalışıyorsa görünür; betiksiz sayfada işlevsiz düğme durmaz. */

.password-toggle { display: none; }

.js .password-toggle { display: block; }

.field-help { font-size: var(--text-sm); line-height: 1.4; color: var(--color-ink-soft); }

.field-help ul, .field-errors ul { margin: 0; padding: 0; list-style: none; }

.field-errors { font-size: 0.9375rem; font-weight: 600; line-height: 1.4; color: var(--color-danger); }

.check {
  display: grid;
  grid-template-columns: 1.625rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
}

.check input { width: 1.625rem; height: 1.625rem; margin: 0; accent-color: var(--color-brand); }

.acc-submit { width: 100%; min-height: 56px; padding: var(--space-3) var(--space-6); font-size: 1.125rem; line-height: 1.25; white-space: normal; text-align: center; }

.notice, .form-error {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--color-info);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--color-info-soft);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.form-error { border-left-color: var(--color-danger); background: var(--color-danger-soft); }

/* ---------------------------------------------------------------- satır bağlantılar */

.acc-links { margin-top: var(--space-5); border-top: 2px solid var(--color-ink); }

.row-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 56px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1.25;
}

.row-link svg { flex: 0 0 auto; width: 22px; height: 22px; fill: none; stroke: var(--color-brand); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.row-link:hover { color: var(--color-brand); }

.acc-out { margin-top: var(--space-6); }

.acc-note { margin: var(--space-6) 0 0; font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-soft); }

.acc-note + .acc-note { margin-top: var(--space-3); }

.acc-empty { margin: 0; font-size: 1.0625rem; }

/* ---------------------------------------------------------------- durum ve oturum listeleri */

.status-list, .session-list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--color-ink); }

.status-list > div, .session-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.status-list dt, .session-list span { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: var(--color-ink-soft); }

.status-list dd, .session-list strong { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1rem; text-align: right; font-variant-numeric: tabular-nums; }

.session-list + .acc-form { margin-top: var(--space-5); }

.account main .btn:focus-visible, .account main a:focus-visible, .account main button:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; }

@media (min-width: 48rem) {
  .acc { padding: var(--space-12) 0 var(--space-20); }
  .acc-title { margin-bottom: var(--space-6); }
}