/* --- «Profilinizi tamamlayın» zorunlu penceresi (Pano dilim 4b, 2026-10-06) ---
   Davranış common.js'te («PROFİLİNİZİ TAMAMLAYIN»). Kural `styles.css`te: bu
   pencere her sayfada çıkabilir ve `game.html` program-theme.css yüklemiyor.
   Yeni renk yok: çerçeve `--line`, birincil `--brand`, hata `--red`/`--red-ink`.
   Girdi sınırı `--muted`ten türer: `--line` kartta ~1,3:1 kalıyor (görünmez),
   `--muted` karışımı iki temada da ≥3:1 (impeccable craft-floor). */
.profil-pencere {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  padding: 22px 22px 20px;
  width: calc(100vw - 32px);
  max-width: 440px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: var(--shadow-pop);
}
.profil-pencere::backdrop { background: rgba(0, 0, 0, 0.5); }
.profil-pencere h2 {
  margin: 0 0 6px;
  font-size: 19px;
  line-height: 1.3;
  font-weight: var(--agirlik-vurgu, 600);
  text-wrap: balance;
}
.profil-aciklama { margin: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.profil-alan { display: block; margin: 0 0 14px; }
.profil-alan > span {
  display: block; margin-bottom: 6px; font-size: 13px;
  font-weight: var(--agirlik-vurgu, 600);
}
/* 16px: iOS Safari 16px altındaki girdiye odaklanınca sayfayı büyütür. */
.profil-alan input,
.profil-alan select {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px;
  border-radius: 9px; border: 1px solid color-mix(in srgb, var(--muted) 70%, var(--card));
  background: var(--input-bg); color: var(--ink);
  font-family: inherit; font-size: 16px; line-height: 1.3;
}
.profil-alan input:focus-visible,
.profil-alan select:focus-visible {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus);
}
.profil-alan[data-hatali] input,
.profil-alan[data-hatali] select { border-color: var(--red); }
/* Rol sorusu (ZORUNLU, profil penceresi): iki radyo; satırın tamamı dokunma
   hedefi ve 44 px'ten kısa değil. Seçili hâl kenarlık, odak `--focus` halkası,
   hata `[data-hatali]` ile kırmızı kenarlık (diğer alanlarla aynı dil). */
.profil-rol { border: 0; margin: 0 0 14px; padding: 0; min-inline-size: 0; }
.profil-rol > legend {
  padding: 0; margin-bottom: 6px; font-size: 13px;
  font-weight: var(--agirlik-vurgu, 600);
  color: var(--muted);   /* komşu `.profil-alan > span` etiketleri genel `label` kuralından muted */
}
.profil-rol-secenek {
  display: flex; align-items: center; gap: 10px; box-sizing: border-box;
  min-height: 44px; margin-bottom: 8px; padding: 6px 12px; cursor: pointer;
  border-radius: 9px; border: 1px solid color-mix(in srgb, var(--muted) 70%, var(--card));
  background: var(--input-bg); color: var(--ink);
  font-size: 15px; line-height: 1.3;
}
.profil-rol-secenek input {
  flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--brand);
}
.profil-rol-secenek:has(input:checked) { border-color: var(--brand); }
.profil-rol-secenek:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--focus); }
.profil-rol[data-hatali] .profil-rol-secenek { border-color: var(--red); }
.profil-ipucu { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.profil-hata, .profil-genel-hata { margin-top: 6px; color: var(--red-ink); font-size: 13px; line-height: 1.4; }
.profil-hata[hidden], .profil-genel-hata[hidden] { display: none; }
.profil-genel-hata { margin: 0 0 12px; padding: 10px 12px; border-radius: 9px; background: var(--red-bg); }
.profil-kvkk { margin: 0 0 16px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.profil-kvkk a { color: var(--green-ink); text-underline-offset: 3px; }
.profil-kaydet {
  width: 100%; min-height: 46px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--brand); color: #fff; font-family: inherit; font-size: 15px;
  font-weight: var(--agirlik-vurgu, 600);
}
.profil-kaydet:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.profil-kaydet[disabled] { opacity: 0.6; cursor: progress; }