/*
 * TASARIM BELİRTEÇLERİ — TEK KAYNAK.
 *
 * Değerler `plans/TASARIM_SISTEMI.md`'den geliyor ve orada kontrast oranları
 * ÖLÇÜLEREK yazıldı. Bileşenler renk değerini doğrudan yazmaz, belirteci okur:
 * ikinci bir yerde `#C9A227` yazılsaydı, tema değiştiğinde biri güncellenir
 * öbürü unutulurdu ve o gün ekranda okunmaz bir metin doğardı.
 *
 * ⚠️ `#C9A227` AÇIK ZEMİNDE KULLANILMAZ — beyaz üstünde kontrastı 2,42:1,
 * AA'nın çok altında. Açık temada altın her zaman `#8A6D12`.
 *
 * İşletme paneli KOYU. Berberler siyahı seviyor (Sabri) ve dükkân ışığı düşük;
 * koyu ekran gece de gündüz de okunuyor.
 */

:root {
  --bg-base: #0d0d0f;
  --bg-surface: #17171b;
  --bg-surface-2: #1f1f24;
  --bg-elevated: #26262b;
  --border: #2e2e35;
  --text-primary: #f2f2f3;
  --text-secondary: #a0a0a8;
  /* #7e7e87 idi: base'de 4,83 ama KART zemininde 4,44 — kural 4,5 (§3). Sönük metin
     kartın içinde yaşıyor; canlı axe ölçümü (19.09) ikisini de yakaladı. #88888f üç
     zeminde de geçer: kart 5,08 · girdi 4,66 · base 5,52. */
  --text-muted: #88888f;
  --accent: #c9a227;
  --accent-hover: #ddb53a;
  --accent-ink: #0d0d0f;

  /* Durum renkleri — zemin + metin ÇİFT olarak; tek renk yeterli değil çünkü
     metin okunabilirliği zeminle birlikte ölçülür. */
  --durum-taslak-bg: #2a2636;
  --durum-taslak-fg: #a99bc7;
  --durum-bos-bg: #26262b;
  --durum-bos-fg: #93939b;
  --durum-onay-bg: #1e5b3a;
  --durum-onay-fg: #cfebdb;
  --durum-tamam-bg: #14472c;
  --durum-tamam-fg: #a9d8bf;
  --durum-gelmedi-bg: #5c4711;
  --durum-gelmedi-fg: #f0d68a;
  --durum-iptal-bg: #5a2320;
  --durum-iptal-fg: #f3b7b3;

  --r: 10px;
  --bosluk: 12px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font: 16px/1.5 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Berber tablete dokunarak kullanıyor; seçim imleci yanlışlıkla metin
     seçmesin diye değil, DOKUNMA GECİKMESİ olmasın diye. */
  touch-action: manipulation;
}

h1 {
  /* §4 display: 32/700 — ekran başlığı. 22 px ölçekte yoktu. */
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 16px;
}

h2 {
  /* §4 heading: 20/600 — kart başlığı. 17 px ölçekte yoktu. */
  font-size: 20px;
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-weight: 600;
}

label {
  display: block;
  margin-bottom: 16px;
  color: var(--text-secondary);
  font-size: 14px;
}

input,
select {
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  background: var(--bg-surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-size: 16px; /* 16px ALTI iOS'ta sayfayı yakınlaştırır — 16 alt sınır. */
}

/* Yer tutucu tarayıcı varsayılan grisiyle kalıyordu — palet dışı ve koyu girdi
   zemininde düşük kontrast (canlı axe ölçümü, 19.09: "serious"). İkincil metin
   jetonu: zemin üstünde ≥ 4,5:1, ipucu olduğu ana metinden ayırt edilir. */
input::placeholder {
  color: var(--text-secondary);
  opacity: 1;
}

/* BAĞLANTI — bu üründe satır içi bağlantı YOK (§6 Bağlantı, 20.09). Tarayıcı
   varsayılanı maviydi (palet dışı, koyu zeminde kontrast düşük — canlı axe) ve
   110×17 px'lik satır içi hedef parmakla vurulmuyor. Bağlantı düğme gibi:
   ikincil görünüm (yükseltilmiş zemin, beyaz metin — §6 "altın kenarlık" metniyle fark AK-W10, Sabri), ≥ 44 px. */
a {
  color: var(--accent);
}

a.baglanti {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 16px;
  border-radius: var(--r);
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border);
  font-weight: 600;
  text-decoration: none;
}

a.baglanti:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Birincil bağlantı — düğme gibi bağlantının altın hâli (§6 Düğme: birincil, sayfada TEK).
   Vitrinde "Hesap aç" (21.09); panelde de aynı sınıf kullanılır, ikinci bir stil doğmaz. */
a.baglanti.birincil {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

a.baglanti.birincil:hover {
  background: var(--accent-hover);
}

input:focus,
select:focus,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button {
  padding: 12px 16px;
  border: 0;
  border-radius: var(--r);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  /* Dokunma hedefi en az 44px — parmakla kullanılıyor. */
  min-height: 44px;
}

button:hover:not(:disabled) {
  background: var(--accent-hover);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

button.ikincil {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.kart {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
}

.hata {
  background: var(--durum-iptal-bg);
  color: var(--durum-iptal-fg);
  padding: 12px;
  border-radius: var(--r);
  margin-bottom: var(--bosluk);
}

.sonuc {
  background: var(--durum-tamam-bg);
  color: var(--durum-tamam-fg);
  padding: 12px;
  border-radius: var(--r);
  margin-bottom: var(--bosluk);
}

.sonuk {
  color: var(--text-muted);
}

/* Dosya girdisi — tarayıcı düğmesi yerine bizim metnimiz (Dogrulama.tsx, E-10).
   Girdi gizli ama odaklanabilir; odak halkası görünen düğmeye taşınır. */
.dosya-sec input[type='file'] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.dosya-sec {
  position: relative;
}

.dosya-sec-dugme {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}

.ikincil-gorunum {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 16px;
  border-radius: var(--r);
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border);
  font-weight: 600;
}

.dosya-sec input[type='file']:focus-visible + .dosya-sec-dugme .ikincil-gorunum {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}