/* id.nayi.me giriş ekranları — tek sütun, mobil önce, üst çubuk YOK (id bir ürün değildir).
 * Değişkenler kabuk/temel.css'ten gelir.
 *
 * Yerleşim kuralları (ui-yerlesim-disiplini):
 *  · Tek değeri temsil eden metin (başlık, maskeli kimlik, düğme yazısı) ASLA sarmaz.
 *  · Kutu üst/alt payı en büyük yazının (20px başlık) yarısını aşmaz → 10px.
 *  · İlişkili öğeler (kod alanı ↔ Doğrula düğmesi) yan yana ve bitişik; düğme kalan genişliği doldurur.
 *  · Boş yer tutucu satır yok: durum/ipucu satırları boşken [hidden] ile hiç yer kaplamaz.
 *  · 400 px genişlikte satır sarması ve yatay kaydırma yok.
 */

.sayfa {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
}

.kutu {
  width: 100%;
  max-width: 380px;
}

/* ortak kabuk önizlemesi: sayfa ortalanmaz, çubuk en üstte tam genişlikte durur */
.onizleme {
  display: block;
}

.onizleme .icerik {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--nid-bosluk-4);
}

.kart {
  background: var(--nid-yuzey);
  border-radius: var(--nid-yuvarlak-kart);
  box-shadow: var(--nid-golge);
  padding: 10px 20px;
}

.kart h1 {
  margin: 10px 0 6px;
  font-size: var(--nid-olcek-baslik);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aciklama {
  margin: 0 0 var(--nid-bosluk-3);
  font-size: var(--nid-olcek-ikincil);
  color: var(--nid-ikincil);
}

.deger {
  white-space: nowrap;
  font-weight: 600;
  color: var(--nid-metin);
}

.etiket {
  display: block;
  margin: 0 0 var(--nid-bosluk-1);
  font-size: var(--nid-olcek-ikincil);
  color: var(--nid-ikincil);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alan {
  display: block;
  width: 100%;
  height: var(--nid-dokunma);
  padding: 0 12px;
  font: var(--nid-olcek-alan) / 1.2 var(--nid-yazi);
  color: inherit;
  background: var(--nid-yuzey);
  border: 1px solid var(--nid-cizgi);
  border-radius: var(--nid-yuvarlak);
}

.alan:focus-visible {
  border-color: var(--nid-vurgu);
}

.alan.kod {
  text-align: center;
  letter-spacing: .3em;
  text-indent: .3em;
  font-variant-numeric: tabular-nums;
}

.dugme {
  display: block;
  width: 100%;
  height: var(--nid-dokunma);
  padding: 0 16px;
  border: 0;
  border-radius: var(--nid-yuvarlak);
  background: var(--nid-vurgu);
  color: var(--nid-vurgu-uzeri);
  font: 600 var(--nid-olcek-govde) / 1 var(--nid-yazi);
  white-space: nowrap;
  cursor: pointer;
}

.dugme[disabled] {
  opacity: .55;
  cursor: default;
}

/* düğme görünümlü bağlantı (satır içi biçem yok: CSP style-src 'self') */
a.dugme {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin-top: var(--nid-bosluk-3);
}

/* kod alanı ↔ düğme: yan yana, bitişik; düğme kalan genişliği doldurur */
.satir {
  display: flex;
  align-items: center;
  gap: var(--nid-bosluk-2);
}

.satir .alan {
  flex: 1 1 auto;
  min-width: 0;
}

.satir .dugme {
  flex: 0 0 auto;
  width: auto;
}

.form {
  margin: 0 0 var(--nid-bosluk-2);
}

.form .dugme {
  margin-top: var(--nid-bosluk-3);
}

.form .satir .dugme {
  margin-top: 0;
}

.ipucu {
  margin: var(--nid-bosluk-1) 0 0;
  font-size: var(--nid-olcek-kucuk);
  color: var(--nid-ikincil);
}

.durum {
  margin: 0 0 var(--nid-bosluk-3);
  /* en büyük yazı 13px → üst/alt pay en fazla 6px (9 Eyl 2026 kanunu) */
  padding: 6px 10px;
  border-radius: var(--nid-yuvarlak);
  background: rgba(179, 38, 30, .1);
  color: var(--nid-hata);
  font-size: var(--nid-olcek-ikincil);
}

.durum.olumlu {
  background: rgba(22, 106, 49, .12);
  color: var(--nid-olumlu);
}

/* ikincil eylemler: tek satırda, birbirine yakın; iki uca itilmez.
   Üstteki alana yapışmaması için küçük bir pay (yanlış dokunma riski). */
.eylemler {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--nid-bosluk-1) var(--nid-bosluk-4);
  margin: var(--nid-bosluk-2) 0 10px;
  font-size: var(--nid-olcek-ikincil);
}

.eylemler form {
  margin: 0;
}

.metin-dugme {
  padding: 0;
  border: 0;
  background: none;
  color: var(--nid-vurgu);
  font: var(--nid-olcek-ikincil) / 1.3 var(--nid-yazi);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.metin-dugme[disabled] {
  color: var(--nid-ikincil);
  cursor: default;
}

.alt {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--nid-bosluk-1) var(--nid-bosluk-4);
  margin: var(--nid-bosluk-3) 0 0;
  font-size: var(--nid-olcek-kucuk);
  color: var(--nid-ikincil);
}

.alt a {
  white-space: nowrap;
}

/* ————————————————————————— telefon: dokunma hedefleri ————————————————————————— */

/* --nid-dokunma (44px) yalnız .alan ve .dugme'ye uygulanmıştı; metin eylemleri ("Kanalı değiştir",
   "Bu adımı atla", "Vazgeç") 16,9px, alt bilgi bağlantıları 17,4px ölçülüyordu (16 Eyl 2026). */
@media (max-width: 520px) {
  .eylemler {
    align-items: center;
  }

  .metin-dugme,
  .alt a {
    display: inline-flex;
    align-items: center;
    min-height: var(--nid-dokunma);
  }
}

.kod-listesi {
  margin: 0 0 var(--nid-bosluk-3);
  padding: 0 0 0 18px;
  font-size: var(--nid-olcek-ikincil);
  color: var(--nid-ikincil);
}

.hata-kodu {
  display: block;
  margin: 0 0 10px;
  font: var(--nid-olcek-kucuk) / 1.3 var(--nid-tek-aralik);
  color: var(--nid-ikincil);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}