/* SOU — web kabuğu (Faz 1 · R17 · 2026-09-05). Native görünümü değiştirmez; yalnız tarayıcı zemini. */
html, body {
  height: 100%;
  /*
   * iOS'ta `viewport-fit=cover`ın YAŞAMASI için gereken satır.
   *
   * Belge yüksekliği salt yüzdeyle verildiğinde Safari, çentik/Dynamic Island
   * arkasındaki alanı hesaba katmaz ve SESSİZCE cover olmayan düzene geri döner:
   * görüntü alanı üstteki güvenli alan kadar kısalır. Cihazda ölçüldü —
   * `innerHeight` 873 iken ekran 932, aradaki 59 tam olarak `safe-area-inset-top`
   * (founder cihaz turu 2026-09-07). Asgari yüksekliğe o payı eklemek Safari'yi
   * cover düzeninde tutar; `overflow: hidden` taşmayı zaten kırpıyor.
   */
  min-height: calc(100% + env(safe-area-inset-top));
  margin: 0;
  padding: 0;
  background: #0D0A06;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

body { overflow: hidden; }
/*
 * #root GÖRÜNTÜ ALANINI birebir kaplar.
 *
 * `position: fixed` + `inset` BİLEREK seçildi: yükseklik birimine (dvh/vh)
 * güvenmek yerine kutuyu doğrudan görüntü alanına sabitler. `dvh` cihaz ve iOS
 * sürümüne göre farklı yorumlanıyor; ana ekrana eklenmiş uygulamada alt güvenli
 * alanı dışarıda bırakıp altta bant bırakabiliyor (founder cihaz turu 2026-09-07).
 * `inset` böyle bir yoruma yer bırakmaz ve HER ekran boyutunda aynı sonucu verir —
 * ölçü hesabı yok, dolayısıyla cihaza göre sapma da yok.
 *
 * Klavye: açıkken yükseklik `--sou-viewport-height` ile kısaltılır (viewport.js);
 * o değişken yazılıysa `height` kazanır ve `bottom` yok sayılır.
 */
#root {
  position: fixed;
  /* `fixed` DÜZEN viewport'una çivilidir. iOS klavye açarken GÖRSEL viewport'u
   * kaydırır; ofset telafi edilmezse uygulama yukarı kayar ve alt kenarı (sabit
   * CTA) klavyenin üstünde ölü boşluk bırakır. Değişkeni viewport.js yazar ve
   * klavye kapanınca siler → 0'a döner. */
  top: var(--sou-viewport-offset, 0px);
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--sou-viewport-height, auto);
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/*
 * Güvenli alanlar (çentik / ev göstergesi): #root'a env() padding VERİLMEZ. react-native-safe-area-context'in
 * web sağlayıcısı env(safe-area-inset-*) değerlerini zaten ölçüp her ekrana/TabBar'a inset olarak verir;
 * CSS'te ikinci kez uygulamak standalone (Ana Ekrana Ekle) modunda boşlukları ikiye katlıyordu.
 * viewport-fit=cover (public/index.html) yeterlidir.
 */

/*
 * Landing arka planı (video + poster + degrade) tarayıcının adres çubuğunun
 * ARKASINA da uzanır.
 *
 * Neden: iOS Safari sayfayı "küçük görüntü alanına" sığdırır — alt çubuk hariç.
 * Sayfa oraya kadar çizince görüntü çubuğun üstünde KESİLİYOR ve uygulama
 * ekranı kaplamıyormuş gibi duruyor. `lvh` çubuk gizliyken geçerli olan BÜYÜK
 * görüntü alanıdır; arka planı ona uzatınca görüntü çubuğun arkasından devam eder.
 *
 * YALNIZ arka plan katmanı uzatılır. Düğmeler ve bağlantılar küçük görüntü
 * alanında kalır — yoksa çubuğun altına düşer ve dokunulamaz hâle gelirlerdi.
 * `bottom: auto` şart: `absoluteFill` top+bottom verir, ikisi birlikteyken
 * `height` yok sayılırdı.
 *
 * Kurulu uygulamada (ana ekrana ekle) tarayıcı çubuğu YOKTUR; orada lvh = dvh
 * olduğu için bu kural hiçbir şeyi değiştirmez.
 */
#landing-bg {
  /*
   * `position: fixed` ŞART: Landing'in kök View'i `overflow: hidden` ve yalnız
   * görünen alan kadar yüksek. Katman `absolute` kalsaydı 932'lik kutu 775'te
   * KIRPILIRDI — ölçü doğru görünür ama boya çubuğun arkasına geçmezdi
   * (founder cihaz turu 2026-09-07). `fixed` elemanın kapsayıcı bloğu görüntü
   * alanıdır; ata `overflow` onu kırpmaz.
   *
   * `100vh` iOS Safari'de tarihsel olarak BÜYÜK görüntü alanıdır (adres çubuğu
   * gizliyken geçerli olan). `lvh`i desteklemeyen sürümler için yedek; destekleyen
   * tarayıcıda alttaki satır kazanır.
   */
  /*
   * `absolute` — `fixed` DEĞİL. Landing'de Moti/Reanimated animasyonları var;
   * bir üst katmanda `transform` varsa `fixed` elemanın kapsayıcısı görüntü alanı
   * OLMAKTAN ÇIKAR ve katman yanlış konumlanır. Kurulu uygulamada buna gerek de
   * yok: kök zaten görüntü alanının tamamı, `inset: 0` onu birebir kaplar.
   * Tarayıcı sekmesinde adres çubuğunun arkasına uzanmak için aşağıdaki medya
   * sorgusu `fixed`e geçer — orada Landing kökü kısa olduğu için gerekli.
   */
  position: absolute;
  inset: 0;
  /* Video kaplamak için kutudan TAŞACAK ölçüde büyütülür (BackgroundVideo.web.tsx
     `applyCover`); taşan kenar burada kırpılır. */
  overflow: hidden;
}

/*
 * `lvh` YALNIZ tarayıcı sekmesinde gerekli — adres çubuğunun arkasına uzanmak için.
 *
 * Ana ekrana eklenmiş uygulamada tarayıcı çubuğu YOKTUR ve orada `lvh` ekranın
 * tamamını vermiyor: ölçüldü, `100lvh` = 815 iken ekran 932. Katmana sabit lvh
 * yüksekliği vermek altta 117 pikselllik düz bir bant bırakıyordu — founder'ın
 * "iki ekran üst üste gibi" dediği dikiş buydu (cihaz turu 2026-09-07).
 * Kurulu uygulamada `inset: 0` zaten ekranın tamamıdır; kural devreye girmez.
 */
@media not all and (display-mode: standalone) {
  #landing-bg {
    position: fixed;
    height: 100vh;
    height: 100lvh;
    bottom: auto;
  }
}

/* Keep native visual hierarchy while preventing iOS focus zoom and showing keyboard focus. */
input, textarea { font-size: max(16px, 1em) !important; }
:focus-visible { outline: 2px solid #BDA27A; outline-offset: 3px; }
/* METİN KUTULARINDA halka KAPALI. Sebep: tarayıcı, yazı girilecek alanlarda
 * :focus-visible'ı DOKUNARAK odaklanınca da eşleştirir (klavye/işaretçi ayrımı
 * yalnız düğme-bağlantı gibi öğelerde geçerlidir). Sonuç, iOS'ta her kutunun
 * 3px dışında, köşe yuvarlaklığını takip etmeyen altın bir dikdörtgendi —
 * telefon girişinde, başvuruda, profilde ve mesaj yazma alanında (founder cihaz
 * turu, 2026-09-07). Odak metin alanlarında zaten görünür: yanıp sönen imleç +
 * alanın kendi odak kenarlığı (ör. ApplyScreen.tsx:1540 inputFocused alt çizgiyi
 * pirinç rengine çevirir). Düğme, bağlantı ve diğer klavyeyle gezilen öğelerde
 * yukarıdaki halka AYNEN durur — klavye erişilebilirliği bozulmaz.
 * checkbox/radio MUAF DEĞİL: react-native-web Switch'i tam-boy görünmez bir
 * <input type="checkbox"> olarak çizer (Switch/index.js:127,136,180-186) ve
 * uygulamadaki 4 Switch'in hiçbirinde kendi odak stili yok → onlarda halka
 * kalkarsa klavye odağı TAMAMEN görünmez olurdu (WCAG 2.4.7). */
input:not([type="checkbox"]):not([type="radio"]):focus-visible,
textarea:focus-visible,
[contenteditable]:focus-visible { outline: none; }
.sou-alert {
  box-sizing: border-box;
  width: min(382px, calc(100% - 40px));
  max-height: calc(100dvh - 48px);
  overflow: auto;
  padding: 28px 24px 20px;
  color: #EEE5D5;
  background: #18130D;
  border: 1px solid #77634A;
  border-radius: 18px;
  box-shadow: 0 24px 90px #0008;
  font-family: DMSans_400Regular, system-ui, sans-serif;
}
.sou-alert::backdrop { background: #0D0A06B8; }
.sou-alert h2 { margin: 0 0 12px; font: 500 27px/1.2 CormorantGaramond_500Medium, Georgia, serif; }
.sou-alert p { margin: 0; font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.sou-alert-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 24px; }
.sou-alert button {
  min-height: 48px; padding: 10px 16px; border: 1px solid #77634A; border-radius: 9px;
  color: inherit; background: transparent; font: inherit; cursor: pointer;
}
.sou-alert button:hover { background: #BDA27A1A; }
.sou-alert button:active { background: #BDA27A30; }
.sou-alert button.sou-alert-destructive { color: #F3B7AB; border-color: #916258; }