/*
  Basvuru sayfasinin platforma ozgu ekleri.

  apply.css karsi tarafin dosyasindan makineyle suzuluyor (bkz. oradaki baslik),
  bu yuzden oraya elle kural eklenmiyor. Sayfaya ozgu olan tek sey burada.
*/

/* ---------------------------------------------------------------- gezinme oklari

  Ikon kumesinde tek bir ok var ve saga bakiyor; Geri dugmesindeki aynaliyor.
*/
[data-apply-back] .ico { transform: scaleX(-1); }

/* ---------------------------------------------------------------- yan yana alanlar

  Iki sutunlu adimda yan yana duran alanlarin aciklama satiri farkli uzunlukta
  olabiliyor (telefonunki e-postanınkinden uzun, dile gore de degisiyor). Alan
  kendi satirlarini ust izgaradan aliyor; boylece etiket, aciklama ve kutu iki
  sutunda ayni hizada kaliyor, hata metni cikinca da kaymiyor.
  Satir sayisi en kalabalik alana gore: etiket, aciklama, kutu ve iki hata.
*/
@media (min-width: 640px) {
  #step-1 > [data-field="firstName"], #step-1 > [data-field="lastName"],
  #step-1 > [data-field="email"], #step-1 > [data-field="phone"],
  #step-1 > [data-field="residence"], #step-1 > [data-field="citizenship"] {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    align-content: start;
  }
}

/* ---------------------------------------------------------------- telefon

  Alan kodu ve numara tek satirda, numara kalan yeri aliyor. Dar ekranda alt
  alta geciyorlar.

  Kapali kutuda ulke adi yerine kisa bir yuz ("TR +90") gorunuyor: uzun adlar
  ("Saint Vincent and the Grenadines") hicbir makul genislige sigmiyordu.
  Acilan listede ise tam adlar duruyor, klavyeyle ada gore arama da calisiyor.
  Kutunun kendisi (cerceve, ok, odak) yerel secim kutusu; yuz yalnizca ustune
  yazilan metin, tiklamayi kutuya birakiyor.
*/
.phone { display: flex; gap: 10px; align-items: start; }
.phone__code { position: relative; flex: 0 0 8.5rem; }
.phone__code select { width: 100%; color: transparent; }
.phone__code select option { color: var(--ink); }
.phone__face {
  /* Kutunun ic boslugu 14px + cerceve 1.5px; sagda ok icin 40px. */
  position: absolute; inset: 0 40px 0 0;
  display: flex; align-items: center; padding-left: 15.5px;
  color: var(--ink); white-space: nowrap; overflow: hidden;
  pointer-events: none;
}
.phone__number { flex: 1 1 auto; min-width: 0; }

@media (max-width: 30rem) {
  .phone { flex-wrap: wrap; }
  .phone__code, .phone__number { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------- ekip üyeleri

  Her üye bir kart: ad, soyad, e-posta, telefon (2026-11-12) ve kartı kaldıran
  bağ. Geniş ekranda iki sütun, dar ekranda alt alta; bağ kartın altında.
*/
.members { display: grid; gap: 12px; }

.member {
  display: grid; gap: 12px; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface);
}

.member .field { margin: 0; }
.member__rm { white-space: nowrap; justify-self: start; grid-column: 1 / -1; }

.members__add { margin-top: 12px; }

@media (max-width: 40rem) {
  .member { grid-template-columns: minmax(0, 1fr); }
}

/* EIT raporlaması bilgi kutusu (2026-11-12): işaretlenecek bir şey yok. */
.eit-info {
  margin: 0 0 20px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
}
.eit-info .step__sub { margin-top: 0; }
.eit-info .hint { margin-bottom: 0; }

/* Uzun secenek listeleri (alan, nereden duydunuz, yonlendiren kurum): genis ekranda
   iki sutun, 640 px altinda tek sutun. Kart yine en az 44 px. */
.options--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }

@media (max-width: 639px) {
  .options--grid { grid-template-columns: minmax(0, 1fr); }
}