/* Hesap formu bileşenleri: kart, sekmeler, form alanları, düğmeler, durum kutusu.
   İki yerde kullanılır:
     - hesap_ui/*.html  : ayrı hesap sayfaları (sayfa kabuğu hesap.css'te)
     - ppm_calculator   : profil düğmesiyle açılan hesap penceresi (account_dialog.css)
   Bu yüzden burada yalnız .hesap-* sınıflarına yazılır; body, html veya genel
   seçicilere dokunulmaz. Renkler tema katmanından (argmins-brand.css) gelir;
   ikinci değerler tema yüklenmezse kullanılır. */
:root {
  --hesap-surface: var(--surface, #ffffff);
  --hesap-sunken: var(--sunken, #e9f2ef);
  --hesap-line: var(--line, #d6e3df);
  --hesap-text: var(--text, #132a2e);
  --hesap-muted: var(--muted, #5f7472);
  --hesap-accent: var(--blue, #087b65);
  --hesap-accent-strong: var(--blue-dark, #065c4c);
  --hesap-info-bg: var(--blue-soft, #e3f6ef);
  --hesap-warn-bg: #fff6e6;
  --hesap-warn-text: #8a5208;
  --hesap-error-bg: #fff2f3;
  --hesap-error-text: #a32f39;
  --hesap-focus: var(--blue, #087b65);
}

.hesap-baglanti {
  color: var(--hesap-accent);
  font-weight: 600;
  text-decoration: none;
  justify-self: start;
}

.hesap-baglanti:hover { text-decoration: underline; }

/* Bağlantı görünümlü düğme (ör. "Şifremi unuttum"); dokunma alanı 44 px. */
button.hesap-baglanti {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.hesap-kart {
  background: var(--hesap-surface);
  border: 1px solid var(--hesap-line);
  border-radius: 14px;
  padding: 24px 20px;
  display: grid;
  gap: 16px;
  color: var(--hesap-text);
}

.hesap-kart h1 { margin: 0; font-size: 1.5rem; }
.hesap-alt-baslik { margin: 0; font-size: 1.1rem; }

.hesap-not,
.hesap-ipucu {
  margin: 0;
  color: var(--hesap-muted);
  font-size: 0.92rem;
}

.hesap-durum {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--hesap-info-bg);
  font-size: 0.95rem;
}

.hesap-durum[data-tone="success"] { background: #e8f6ef; color: #17643f; font-weight: 600; }
.hesap-durum[data-tone="warning"] { background: var(--hesap-warn-bg); color: var(--hesap-warn-text); }
.hesap-durum[data-tone="error"] { background: var(--hesap-error-bg); color: var(--hesap-error-text); }

.hesap-sekmeler {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--hesap-sunken);
  border: 1px solid var(--hesap-line);
  margin-bottom: 12px;
}

.hesap-sekme {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--hesap-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}

.hesap-sekme[aria-selected="true"] {
  background: var(--hesap-surface);
  color: var(--hesap-accent-strong);
  box-shadow: 0 0 0 1px var(--hesap-line), 0 1px 4px rgba(16, 44, 50, .08);
}

.hesap-form { display: grid; gap: 8px; }

.hesap-form label { font-weight: 600; margin-top: 4px; }

.hesap-form input {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--hesap-line);
  border-radius: 10px;
  background: #fff;
  color: var(--hesap-text);
  font: inherit;
  font-size: 16px; /* iOS yakınlaştırmasını önler */
  transition: border-color .16s ease, box-shadow .16s ease;
}

.hesap-form input:focus { border-color: var(--hesap-accent); box-shadow: 0 0 0 3px var(--hesap-info-bg); outline: none; }
.hesap-form input[aria-invalid="true"] { border-color: var(--hesap-error-text); }

.hesap-dugme {
  min-height: 46px;
  margin-top: 8px;
  padding: 0 16px;
  border: 1px solid var(--hesap-accent);
  border-radius: 10px;
  background: var(--hesap-accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.hesap-dugme:hover:not(:disabled) { background: var(--hesap-accent-strong); }
.hesap-dugme:disabled { opacity: 0.65; cursor: progress; }

.hesap-dugme-ikincil {
  background: transparent;
  color: var(--hesap-accent);
}

.hesap-dugme-ikincil:hover:not(:disabled) { background: var(--hesap-info-bg); }

.hesap-bilgi { display: grid; gap: 8px; }
.hesap-bilgi p { margin: 0; }
.hesap-yenile { display: grid; gap: 4px; margin-top: 12px; }

:is(.hesap-sekme, .hesap-dugme, .hesap-baglanti):focus-visible {
  outline: 3px solid var(--hesap-focus);
  outline-offset: 2px;
}