/* ===========================================================================
   ADIMLI BASVURU FORMU SAYFALARI (04.09.2026, Ozgur - Claude Design handoff
   "Oyuneks Insan Kaynaklari" + "Oyuneks Sponsorluk"): /insan-kaynaklari ve /sponsor-basvuru-formu.
   Ilk adi insan-kaynaklari.css idi; sponsorluk sayfasi ayni deseni kullaninca ortaklastirildi.
   Adim mantigi: js/basvuru-formu.js. Sayfaya ozel eklemeler dosyanin sonunda (Sponsorluk bolumu).

   Sayfa kurumsal sol menu kabugunun DISINDA, tam genislikte basilir
   (master.blade.php istisnasi); ustte kurumsal sekme seridi
   (css/kurumsal-sekmeler.css, --ku* tokenlar). Icerik sitenin .container'ina
   (1550px) oturur. Yazi tipi sitenin kendi fontu (Wix Madefor Display).

   Solda yapisan tanitim karti (lacivert gradyan, IKI TEMADA DA SABIT - tasarim
   karari), sagda 4 adimli basvuru formu: her adim ayri kart, ayni anda tek adim
   gorunur. x-ui.step-form bileseni ve sayfa ici <style> kalkti; adim mantigi
   career.blade.php js-last'ta.

   Form kontrolleri style.css'in .formGroup .formControl kurallarini (2px kenar,
   kose 15 !important, 7/15 dolgu) EZER: asagidaki .ikSayfa .formGroup .formControl
   secicileri daha ozgul; kose icin !important sart. getAjax'in hata gosterimi
   (.formGroup.danger + .formFail) ayni sinif adlariyla calisir, gorunumu burada.

   Yapisan tanitim kartinin top'u sabit yazilmaz: JS sekme seridini olcup
   --ikSekmeAlt'a yazar; adim kartlarinin scroll-margin-top'u da ondan turer.
   =========================================================================== */
.ikSayfa {
    --ikSekmeAlt: 50px;                    /* sekme seridi alt kenari (JS gunceller) */
    --ikGirisZemin: #111117;
    --ikGirisMetin: #EDEEF2;
    --ikGirisPlaceholder: #8B8C99;
    --ikHata: #E0553F;
    --ikHataZemin: rgba(224,85,63,.08);
    --ikOnay: #343891;
    --ikPilBittiZemin: rgba(128,241,177,.12);
    --ikPilBittiKenar: rgba(128,241,177,.40);
    --ikSecimDoluKenar: rgba(128,241,177,.45);
    --ikOdak: rgba(128,241,177,.18);
    color: var(--kuMetin); padding-bottom: 80px;
}
body.light .ikSayfa {
    --ikGirisZemin: #F5F4EE;
    --ikGirisMetin: #1F1E1D;
    --ikGirisPlaceholder: #5F5E58;
    --ikPilBittiZemin: rgba(19,126,76,.10);
    --ikPilBittiKenar: rgba(19,126,76,.40);
    --ikSecimDoluKenar: rgba(19,126,76,.45);
    --ikOdak: rgba(19,126,76,.16);
}
.ikSayfa a { color: var(--kuNane); }
.ikSayfa a:hover { color: var(--kuNaneHover); }
.ikSayfa button { font-family: inherit; }

/* ---- Izgara: sol 560 tanitim + sag form ---------------------------------------- */
.ikIzgara { padding-top: 48px; display: grid; grid-template-columns: 560px minmax(0, 1fr); gap: 24px; align-items: start; }

/* ---- Tanitim karti: lacivert gradyan, iki temada sabit; acik temada yalniz dis cerceve degisir */
.ikTanitim {
    position: sticky; top: calc(var(--ikSekmeAlt) + 22px);
    display: flex; flex-direction: column; gap: 18px; padding: 30px; border-radius: 18px; border: 1px solid var(--kuKenar);
    background: radial-gradient(circle at top left, rgba(128,241,177,.16), transparent 35%), linear-gradient(135deg, #252864, #17192F);
    color: rgba(255,255,255,.72);
}
.ikKicker { font-size: 11px; font-weight: 800; letter-spacing: 1.4px; color: #80F1B1; text-transform: uppercase; }
.ikTanitim h1 { font-size: 32px; font-weight: 800; letter-spacing: -.8px; line-height: 1.12; color: #FFFFFF; margin: 0; text-wrap: balance; }
.ikTanitim h1 strong { font-weight: 800; }
.ikTanitim .ikAltBaslik { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.86); margin: 0; }
.ikTanitim .ikMetin { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.72); margin: 0; text-wrap: pretty; }
.ikTanitim .ikMetin strong { color: #FFFFFF; }
.ikOzetler { display: flex; gap: 10px; padding-top: 4px; }
.ikOzet {
    flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); border-radius: 10px;
}
.ikOzet strong { font-size: 20px; font-weight: 800; color: #FFFFFF; line-height: 1.2; }
.ikOzet strong.nane { color: #80F1B1; }
.ikOzet span { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.7); }
.ikTanitim img { width: 78%; height: auto; display: block; align-self: center; margin-top: 6px; }

/* ---- Form sutunu ------------------------------------------------------------------ */
.ikForm { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ikForm .formResult { margin: 0; }

/* Adim karti: ayni anda tek adim gorunur ([hidden]) */
.ikAdim {
    display: flex; flex-direction: column; gap: 22px; padding: 26px;
    background: var(--kuKart); border: 1px solid var(--kuKenar); border-radius: 14px; box-shadow: var(--kuKartGolge);
    scroll-margin-top: calc(var(--ikSekmeAlt) + 22px);
}
.ikAdim[hidden] { display: none; }

/* Adim pilleri: aktif nane dolu, tamamlanan nane tint + tik (tiklanir), bekleyen pasif */
.ikPiller { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; }
.ikPiller::-webkit-scrollbar { display: none; }
.ikSayfa button.ikPil {
    flex: none; display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px 0 8px; margin: 0; border-radius: 999px;
    background: var(--kuKart); border: 1px solid var(--kuKenar); color: var(--kuGovde); font-size: 13px; font-weight: 700; white-space: nowrap;
    cursor: default; transition: background .16s, border-color .16s, color .16s;
}
.ikPilIkon { width: 26px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--kuNaneZemin); }
.ikPilIkon svg { width: 13px; height: 13px; }
.ikPil .ikPilTik { display: none; }
.ikSayfa button.ikPil.aktif { background: var(--kuNane); border-color: var(--kuNane); color: var(--kuNaneUstu); }
.ikPil.aktif .ikPilIkon { background: rgba(24,24,32,.14); }
body.light .ikPil.aktif .ikPilIkon { background: rgba(255,255,255,.22); }
.ikSayfa button.ikPil.bitti { background: var(--ikPilBittiZemin); border-color: var(--ikPilBittiKenar); color: var(--kuNane); cursor: pointer; }
.ikPil.bitti .ikPilSimge { display: none; }
.ikPil.bitti .ikPilTik { display: block; }
.ikSayfa button.ikPil.bitti:hover { border-color: var(--kuNane); }
.ikSayfa button.ikPil:focus-visible { outline: 2px solid var(--kuNane); outline-offset: 2px; }

/* Adim basi */
.ikAdimBas { display: flex; align-items: flex-start; gap: 14px; padding-top: 4px; }
.ikAdimIkon {
    flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--kuNaneZemin); border: 1px solid var(--kuNaneKenar);
    display: flex; align-items: center; justify-content: center; color: var(--kuNane);
}
.ikAdimIkon svg { width: 20px; height: 20px; }
.ikAdimBas h2 { font-size: 20px; font-weight: 800; letter-spacing: -.3px; line-height: 1.25; color: var(--kuBaslik); margin: 0 0 4px; }
.ikAdimBas p { font-size: 13px; color: var(--kuUcuncul); margin: 0; }

/* Alanlar: 2 kolon, 16px dikey / 20px yatay oluk; .tam tum satir */
.ikAlanlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.ikAlanlar .tam { grid-column: 1 / -1; }
.ikSayfa .formGroup { gap: 6px; }
/* etiket normal yazim (tasarim 11/700); text-transform/letter-spacing sifirlamasi miras kaymasina karsi guvence */
.ikSayfa .formGroup .ikEtiket { font-size: 11px; font-weight: 700; color: var(--kuGovde); line-height: 1.4; gap: 4px; text-transform: none; letter-spacing: 0; margin: 0; }
.ikSayfa .formGroup .ikEtiket b { color: var(--ikHata); font-weight: 700; }
.ikSayfa .formGroup .formControl {
    height: 44px; padding: 0 13px; background: var(--ikGirisZemin); border: 1px solid var(--kuKenar); border-radius: 9px !important;
    font-size: 13px; color: var(--ikGirisMetin); box-shadow: none; transition: border-color .16s, box-shadow .16s;
}
/* style.css'te body.light .formGroup .formControl (#bdbdbd kenar) daha ozgul; acik tema icin ayni ozgullukte yeniden yazilir */
body.light .ikSayfa .formGroup .formControl { border-color: var(--kuKenar); background: var(--ikGirisZemin); color: var(--ikGirisMetin); }
body.light .ikSayfa .formGroup .formControl:focus { border-color: var(--kuNane); background: var(--ikGirisZemin); }
body.light .ikSayfa .formGroup.danger .formControl { border-color: var(--ikHata); }
.ikSayfa .formGroup .formControl::placeholder { color: var(--ikGirisPlaceholder); opacity: 1; }
.ikSayfa .formGroup .formControl:focus { background: var(--ikGirisZemin); border-color: var(--kuNane); box-shadow: 0 0 0 3px var(--ikOdak); color: var(--ikGirisMetin); }
.ikSayfa .formGroup textarea.formControl { height: auto; min-height: 102px; padding: 12px 13px; line-height: 1.55; resize: vertical; }
.ikSayfa .formGroup textarea.formControl.kisa { min-height: 88px; }
/* select: yerli <select>, sagda kendi oku; deger secilince (.dolu) nane kenar + 600 */
.ikSecimSarma { position: relative; }
.ikSayfa .formGroup select.formControl { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; }
.ikSayfa .formGroup select.formControl.dolu { border-color: var(--ikSecimDoluKenar); font-weight: 600; color: var(--kuMetin); }
.ikSayfa .formGroup select.formControl option { background: var(--kuKart); color: var(--kuMetin); }
.ikSecimOk { position: absolute; right: 13px; top: 50%; width: 12px; height: 12px; margin-top: -6px; color: var(--kuUcuncul); pointer-events: none; }
/* flatpickr: goruntu d.m.Y (altInput), deger Y-m-d gizli input'ta; takvim ikonu */
.ikTarihSarma { position: relative; }
.ikTarihSarma .ikSecimOk { width: 14px; height: 14px; margin-top: -7px; }
.ikSayfa .formGroup .ikTarihSarma .formControl { padding-right: 38px; }

/* Hata durumu: getAjax .formGroup.danger + .formFail ekler; adim gecisinde ayni siniflar */
.ikSayfa .formGroup.danger .formControl { border-color: var(--ikHata); box-shadow: 0 0 0 3px var(--ikHataZemin); }
.ikSayfa .formGroup .formFail { margin: 0; padding: 0; background: none; border: 0; }
.ikSayfa .formGroup .formFail ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ikSayfa .formGroup .formFail ul li { font-size: 11px; line-height: 1.4; color: var(--ikHata); padding: 0; margin: 0; }
.ikSayfa .formGroup .formFail ul li:before { display: none; }

/* Onay kutulari: 18px, kose 5; isaretli #343891 zemin + beyaz tik */
.ikSayfa .formGroup.ikOnayGrup { gap: 4px; }
.ikSayfa label.ikOnay { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 0; }
.ikOnay input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.ikOnayKutu {
    flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 5px; background: var(--ikGirisZemin); border: 1px solid var(--kuKenarBelirgin);
    display: flex; align-items: center; justify-content: center; color: #fff; transition: background .16s, border-color .16s;
}
.ikOnayKutu svg { width: 11px; height: 11px; display: none; }
.ikOnay input:checked + .ikOnayKutu { background: var(--ikOnay); border-color: var(--ikOnay); }
.ikOnay input:checked + .ikOnayKutu svg { display: block; }
.ikOnay input:focus-visible + .ikOnayKutu { outline: 2px solid var(--kuNane); outline-offset: 2px; }
.ikOnay span.ikOnayMetin { font-size: 12.5px; line-height: 1.5; color: var(--kuGovde); }
.ikOnay span.ikOnayMetin b { color: var(--ikHata); font-weight: 700; }
.ikSayfa .formGroup.danger .ikOnayKutu { border-color: var(--ikHata); }

/* reCAPTCHA v2 kutusu (dusuk v3 skorunda acilir) */
.ikRecaptcha { display: flex; justify-content: center; }
.ikRecaptcha[hidden] { display: none; }

/* Alt satir: zorunlu notu + Geri / Devam Et / Basvuruyu Gonder */
.ikAltSatir { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--kuInceKenar); }
.ikZorunluNot { font-size: 12px; color: var(--kuUcuncul); }
.ikZorunluNot b { color: var(--ikHata); font-weight: 700; }
.ikDugmeler { display: flex; gap: 10px; }
.ikSayfa button.ikDugme {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 22px; margin: 0; border-radius: 10px;
    border: 1px solid var(--kuNane); background: var(--kuNane); color: var(--kuNaneUstu); font-size: 13px; font-weight: 800; white-space: nowrap;
    cursor: pointer; transition: filter .16s, background .16s, border-color .16s;
}
.ikSayfa button.ikDugme:hover { filter: brightness(1.06); }
.ikSayfa button.ikDugme.cerceve { padding: 0 18px; border-color: var(--kuKenarBelirgin); background: var(--kuKart); color: var(--kuMetin); font-weight: 700; }
.ikSayfa button.ikDugme.cerceve:hover { filter: none; background: var(--kuKartHover); border-color: var(--kuNane); }
.ikSayfa button.ikDugme:disabled { opacity: .6; cursor: wait; filter: none; }
.ikSayfa button.ikDugme:focus-visible { outline: 2px solid var(--kuNane); outline-offset: 2px; }
.ikDugme svg { width: 14px; height: 14px; }

/* Guven notu */
.ikGuven { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--kuKart); border: 1px solid var(--kuKenar); border-radius: 12px; box-shadow: var(--kuKartGolge); }
.ikGuvenIkon { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--kuNaneZemin); display: flex; align-items: center; justify-content: center; color: var(--kuNane); }
.ikGuvenIkon svg { width: 17px; height: 17px; }
.ikGuven p { font-size: 12.5px; line-height: 1.5; color: var(--kuGovde); margin: 0; }

/* Basari ekrani: gonderim sonrasi form kartlarinin yerine */
.ikBasari {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 48px 26px;
    background: var(--kuKart); border: 1px solid var(--kuKenar); border-radius: 14px; box-shadow: var(--kuKartGolge);
    scroll-margin-top: calc(var(--ikSekmeAlt) + 22px);
}
.ikBasari[hidden] { display: none; }
.ikBasariIkon { width: 64px; height: 64px; border-radius: 999px; background: var(--kuNane); color: var(--kuNaneUstu); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.ikBasariIkon svg { width: 28px; height: 28px; }
.ikBasari h2 { font-size: 22px; font-weight: 800; color: var(--kuBaslik); margin: 0; }
.ikBasari p { font-size: 13.5px; line-height: 1.6; color: var(--kuGovde); margin: 0; max-width: 520px; text-wrap: pretty; }

/* ---- Tablet / mobil ---------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .ikIzgara { grid-template-columns: 460px minmax(0, 1fr); }
}
@media (max-width: 991.98px) {
    .ikSayfa { padding-bottom: 48px; }
    .ikIzgara { padding-top: 24px; grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .ikTanitim { position: static; padding: 24px; gap: 14px; }
    .ikTanitim h1 { font-size: 26px; }
    .ikTanitim img { width: 60%; }
    .ikAdim { padding: 20px; gap: 18px; }
    .ikAdimBas h2 { font-size: 18px; }
    /* alanlar tek kolon; yazi 16px (iOS odakta yaklastirma yapmasin), yukseklik 44 korunur */
    .ikAlanlar { grid-template-columns: 1fr; gap: 14px; }
    .ikSayfa .formGroup .formControl { font-size: 16px; }
    .ikSayfa .formGroup textarea.formControl { font-size: 16px; }
    /* alt satir: not ustte, dugmeler alt alta tam genislik */
    .ikAltSatir { flex-direction: column; align-items: stretch; gap: 14px; }
    .ikDugmeler { flex-direction: column-reverse; }
    .ikSayfa button.ikDugme { width: 100%; }
    .ikBasari { padding: 36px 20px; }
}
@media (max-width: 575.98px) {
    .ikOzetler { flex-direction: column; }
    .ikOzet { flex-direction: row; align-items: baseline; justify-content: space-between; }
}

/* ===========================================================================
   SPONSORLUK BASVURUSU EKLERI (04.09.2026, handoff "Oyuneks Sponsorluk")
   Tanitim kartinda arti listesi, adim 2 platform satirlari (link 2fr + sayi 1fr),
   adim 3 dosya alani, adim 5 secilebilir kutucuklar (coklu secim) ve bilgi notu kutusu.
   =========================================================================== */
/* Tanitim karti arti listesi: 20px yesil tint daire + 14/600 metin, 1px ayirici */
.ikArtilar { display: flex; flex-direction: column; }
.ikArti { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.09); font-size: 14px; font-weight: 600; color: rgba(255,255,255,.86); }
.ikArti:last-child { border-bottom: 0; }
.ikArtiIkon { flex: none; width: 20px; height: 20px; border-radius: 999px; background: rgba(128,241,177,.18); display: flex; align-items: center; justify-content: center; color: #80F1B1; }
.ikArtiIkon svg { width: 11px; height: 11px; }

/* Platform satiri: link genis, sayi dar; tum satiri kaplar */
.ikPlatform { grid-column: 1 / -1; display: grid; grid-template-columns: 2fr 1fr; gap: 12px; align-items: end; }

/* Secilebilir kutucuklar (checkbox grubu): tek satirda 4; secili nane tint + #343891 kutu */
.ikKutucuklar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ikSayfa label.ikKutucuk {
    position: relative; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; margin: 0; border-radius: 9px;
    background: var(--ikGirisZemin); border: 1px solid var(--kuKenar); cursor: pointer;
    font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--kuGovde); transition: background .16s, border-color .16s, color .16s;
}
.ikKutucuk input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.ikKutucukKutu {
    flex: none; width: 16px; height: 16px; border-radius: 5px; background: var(--kuKart); border: 1px solid var(--kuKenarBelirgin);
    display: flex; align-items: center; justify-content: center; color: #fff; transition: background .16s, border-color .16s;
}
.ikKutucukKutu svg { width: 10px; height: 10px; display: none; }
.ikSayfa label.ikKutucuk:hover { border-color: var(--kuKenarBelirgin); }
.ikSayfa label.ikKutucuk.secili, .ikSayfa label.ikKutucuk:has(input:checked) { background: var(--kuNaneZemin); border-color: var(--ikSecimDoluKenar); color: var(--kuMetin); font-weight: 700; }
.ikKutucuk.secili .ikKutucukKutu, .ikKutucuk:has(input:checked) .ikKutucukKutu { background: var(--ikOnay); border-color: var(--ikOnay); }
.ikKutucuk.secili .ikKutucukKutu svg, .ikKutucuk:has(input:checked) .ikKutucukKutu svg { display: block; }
.ikKutucuk input:focus-visible + .ikKutucukKutu { outline: 2px solid var(--kuNane); outline-offset: 2px; }
.ikSayfa .formGroup.danger label.ikKutucuk { border-color: var(--ikHata); }

/* Dosya alani: kesikli cerceve, solda "Dosya sec" dugmesi, sagda secilen ad; gercek input gorunmez ustte */
.ikDosya {
    position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding-right: 13px; overflow: hidden;
    background: var(--ikGirisZemin); border: 1px dashed var(--kuKenarBelirgin); border-radius: 9px; transition: border-color .16s;
}
.ikDosya:hover, .ikDosya:focus-within { border-color: var(--kuNane); }
.ikDosya input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; }
.ikDosyaButon {
    flex: none; align-self: stretch; display: flex; align-items: center; gap: 6px; padding: 0 14px;
    background: var(--kuKart); border-right: 1px solid var(--kuKenar); font-size: 12.5px; font-weight: 700; color: var(--kuMetin); pointer-events: none;
}
.ikDosyaButon svg { width: 14px; height: 14px; color: var(--kuNane); }
.ikDosyaAd { flex: 1; min-width: 0; font-size: 13px; color: var(--kuUcuncul); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.ikDosyaAd.dolu { color: var(--kuMetin); font-weight: 600; }
.ikDosyaIpucu { font-size: 11px; color: var(--kuUcuncul); }
.ikSayfa .formGroup.danger .ikDosya { border-color: var(--ikHata); }

/* Bilgi notu kutusu (adim 5): nane tint, i ikonu */
.ikNotKutu { grid-column: 1 / -1; display: flex; gap: 12px; padding: 14px 16px; background: var(--kuNaneZemin); border: 1px solid var(--kuNaneKenar); border-radius: 10px; }
.ikNotKutu svg { flex: none; width: 18px; height: 18px; color: var(--kuNane); margin-top: 1px; }
.ikNotKutu p { font-size: 12.5px; line-height: 1.55; color: var(--kuGovde); margin: 0; }

@media (max-width: 991.98px) {
    .ikPlatform { grid-template-columns: 1fr; gap: 14px; }
    .ikKutucuklar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}