/*
 * Üye kayıt sihirbazı (UyeKayit/Index, UyeKayit/Tamamlandi). Yalnız bu sayfalarda yüklenir.
 * Sahne ve kart kabuğu css/yalin-sayfa.css'te (_YalinLayout); alan, etiket, yardım, onay kutusu ve
 * bölmeli seçim görünümü css/bilesenler/form.css'ten gelir (Index view'ı bunu bu dosyadan önce bağlar).
 * Burada yalnız sihirbaza özgü yerleşim kalır: adım göstergesi, telefon, SMS kodu, evrak alanı.
 * Doğrulama JS'tir (uye-kayit.js): hata metni .uk-hata[data-hata-for] içine yazılır, alana .is-invalid ve
 * aria-invalid="true" eklenir (form.css hata çerçevesini aria-invalid'den çizer).
 */

/* Sahnenin süs halkası (::after) taşma alanı oluşturuyor; overflow:hidden kap odak/scrollIntoView ile
   yatay kayıyordu (kart sola kaçıyordu). clip programatik kaydırmaya da izin vermez. */
.yalin-sahne {
    overflow: clip;
}

/* Sihirbaz giriş kartından geniş: iki sütunlu satırlar sığsın. */
.uk-kart {
    max-width: 640px;
}

.yalin-icerik > .container,
.uk-kart ~ .yalin-not {
    max-width: 640px;
}

/* ── Adım göstergesi ── */

.uk-adimlar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--b-2);
    margin: 0 0 var(--b-6);
    padding: 0;
    list-style: none;
}

.uk-adim button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--b-2);
    width: 100%;
    min-height: 44px;
    padding: var(--b-2) 0 0;
    border-top: 3px solid var(--renk-kenar);
    background: transparent;
    color: var(--renk-metin-ikincil);
    font-size: var(--t-sm);
    font-weight: var(--t-orta);
    line-height: var(--t-satir-arayuz);
    text-align: left;
    white-space: normal;
    transition: border-color var(--sure-orta), color var(--sure-orta);
}

.uk-adim button:disabled {
    cursor: default;
}

.uk-adim-no {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--renk-yuzey-vurgu);
    color: var(--renk-metin);
    font-size: var(--t-sm);
}

.uk-adim.aktif button {
    border-top-color: var(--renk-marka);
    color: var(--renk-metin);
}

.uk-adim.aktif .uk-adim-no {
    background-color: var(--renk-marka);
    color: var(--renk-marka-uzeri);
}

.uk-adim.tamam button {
    border-top-color: var(--gri-900);
    color: var(--renk-metin);
}

.uk-adim.tamam .uk-adim-no {
    background-color: var(--gri-900);
    color: var(--renk-metin-ters);
}

.uk-adim button:focus-visible {
    outline-offset: 3px;
}

/* ── Türe göre görünürlük (form[data-tur], form[data-tuzel]) ── */

.uk-form:not([data-tur="kurumsal"]) [data-goster="kurumsal"],
.uk-form:not([data-tur="bireysel"]) [data-goster="bireysel"],
.uk-form:not([data-tuzel="evet"]) [data-goster="tuzel"],
.uk-form[data-tuzel="evet"] [data-goster="tuzel-degil"] {
    display: none !important;
}

/* ── Alanlar (düzen form.css'te: .form-alan, .form-izgara, .form-yardim) ── */

.uk-panel {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

/* Bootstrap .is-invalid ikonu ve ek iç boşluğu kapatılır; çerçeve rengi form.css'te aria-invalid'den. */
.uk-form .form-control.is-invalid {
    padding-right: 14px;
    background-image: none;
}

/* Hata metni: boşken yer kaplamaz; doluyken form.css'teki .field-validation-error ile aynı görünüm. */
.uk-hata {
    display: block;
    color: var(--renk-hata);
    font-size: var(--t-sm);
    font-weight: var(--t-orta);
    line-height: var(--t-satir-arayuz);
}

.uk-hata:empty {
    display: none;
}

.uk-hata:not(:empty) {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.uk-hata:not(:empty)::before {
    content: "\f332";                 /* bootstrap-icons: exclamation-circle-fill */
    flex: none;
    font-family: bootstrap-icons;
    font-weight: var(--t-normal);
    line-height: inherit;
}

.uk-hata-cok-satir {
    white-space: pre-line;
}

/* Hata yardımın yerini alır. */
.form-alan:has(.uk-hata:not(:empty)) > .form-yardim {
    display: none;
}

.uk-yardim-olumlu {
    color: var(--renk-basari);
    font-weight: var(--t-orta);
}

/* Şifre alanlarının altındaki ortak yardım satırı iki sütunlu satırın hemen altında durur. */
.uk-yardim-ust {
    margin: calc(var(--form-alan-arasi) * -.5) 0 var(--form-alan-arasi);
}

/* Genel hata: kartın üstünde, her adımda görünür */
.uk-genel-hata {
    display: flex;
    align-items: flex-start;
    gap: var(--b-3);
    padding: var(--b-3) var(--b-4);
    font-size: var(--t-sm);
}

.uk-genel-hata[hidden] {
    display: none;
}

/* ── Bölmeli seçim (üyelik türü, firma tipi): .secim-bolmeli'nin iki satırlı etiket biçimi ── */

.uk-bolmeli > label {
    justify-content: flex-start;
    gap: var(--b-3);
    min-height: 52px;
    padding: var(--b-2) var(--b-3);
    text-align: left;
}

.uk-bolmeli > label > i {
    font-size: var(--t-lg);
}

.uk-bolmeli > label span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.uk-bolmeli > label strong {
    font-size: var(--t-sm);
    font-weight: var(--t-orta);
    color: inherit;
}

.uk-bolmeli > label small {
    font-size: var(--t-xs);
    font-weight: var(--t-normal);
}

.uk-bolmeli > input[type="radio"]:checked + label > i {
    color: var(--renk-marka);
}

/* ── Telefon: +90 öneki girdiye bitişik ── */

.uk-telefon {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border: var(--kenar-guclu);
    border-radius: var(--r-orta);
    background-color: var(--renk-yuzey);
    transition: border-color var(--sure-hizli) ease, box-shadow var(--sure-hizli) ease;
}

.uk-telefon:focus-within {
    border-color: var(--renk-marka);
    box-shadow: var(--odak-halkasi);
}

.uk-telefon:has(.is-invalid) {
    border-color: var(--renk-hata);
}

.uk-telefon-onek {
    display: flex;
    align-items: center;
    padding: 0 var(--b-3);
    border-right: var(--kenar);
    background-color: var(--renk-yuzey-ikincil);
    color: var(--renk-metin-ikincil);
    font-weight: var(--t-orta);
}

.uk-telefon .form-control,
.uk-telefon .form-control:focus {
    flex: 1;
    min-width: 0;
    min-height: calc(var(--form-yukseklik) - 2px);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* ── Düğmeler: .otocars-btn tabanı (site.css); burada yalnız sihirbaza özgü durumlar ── */

.uk-baglanti-btn:disabled {
    color: var(--renk-metin-ikincil);
    text-decoration: none;
    cursor: default;
}

.uk-gezinme {
    display: flex;
    justify-content: space-between;
    gap: var(--b-3);
    margin-top: var(--b-6);
}

.uk-gezinme .primary-btn1 {
    flex: 1;
    max-width: 280px;
    margin-left: auto;
}

@media (max-width: 575.98px) {
    .uk-gezinme .primary-btn1 {
        max-width: none;
    }
}

/* 320: iki düğme yan yana sığmaz ("Başvuruyu gönder" kesiliyordu); alt alta, ana düğme üstte. */
@media (max-width: 359.98px) {
    .uk-gezinme {
        flex-direction: column-reverse;
    }

    .uk-gezinme > .otocars-btn,
    .uk-gezinme > .uk-ikincil-btn,
    .uk-gezinme > .primary-btn1 {
        width: 100%;
        margin-left: 0;
    }
}

/* Gönderim sürerken dönen işaret */
.uk-kart .gonderiliyor {
    pointer-events: none;
}

.uk-kart .primary-btn1.gonderiliyor::before {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: uk-don .7s linear infinite;
}

@keyframes uk-don {
    to { rotate: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
    .uk-kart .primary-btn1.gonderiliyor::before {
        animation: none;
    }
}

/* ── SMS kodu ── */

.uk-otp {
    margin-top: var(--b-1);
    padding: var(--b-5);
    border: var(--kenar);
    border-radius: var(--r-buyuk);
    background-color: var(--renk-yuzey-ikincil);
    text-align: center;
}

.uk-otp-bilgi {
    margin: 0 0 var(--b-4);
    font-size: var(--t-sm);
    line-height: var(--t-satir-govde);
}

.uk-otp-kutular {
    display: flex;
    justify-content: center;
    gap: var(--b-2);
}

.uk-otp-hane {
    width: 48px;
    height: 56px;
    padding: 0;
    border: 1px solid var(--renk-kenar-guclu) !important;
    border-radius: var(--r-orta);
    background-color: var(--renk-yuzey);
    color: var(--renk-metin);
    font-size: var(--t-xl);
    font-weight: var(--t-kalin);
    text-align: center;
    caret-color: var(--renk-marka);
    transition: border-color var(--sure-hizli), box-shadow var(--sure-hizli);
}

.uk-otp-hane.dolu {
    border-color: var(--gri-900) !important;
}

.uk-otp-hane:focus {
    border-color: var(--renk-marka) !important;
    box-shadow: var(--odak-halkasi);
}

@media (max-width: 400px) {
    .uk-otp-kutular {
        gap: var(--b-1);
    }

    .uk-otp-hane {
        width: 40px;
        height: 52px;
    }
}

.uk-otp-hata {
    justify-content: center;
    margin-top: var(--b-2);
}

.uk-otp-sure {
    margin: var(--b-4) 0;
    color: var(--renk-metin-ikincil);
    font-size: var(--t-sm);
    line-height: var(--t-satir-arayuz);
}

.uk-otp-sure strong {
    color: var(--renk-metin);
    font-feature-settings: var(--t-sayi);
}

.uk-otp-sure strong.doldu {
    color: var(--renk-hata);
}

.uk-otp-alt {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 var(--b-4);
    margin-top: var(--b-3);
}

.uk-dogrulandi-bilgi {
    display: flex;
    align-items: center;
    gap: var(--b-2);
    margin: 0 0 var(--b-4);
    padding: var(--b-3) var(--b-4);
    border-radius: var(--r-orta);
    background-color: var(--renk-basari-zemin);
    color: var(--renk-basari);
    font-size: var(--t-sm);
    font-weight: var(--t-orta);
    line-height: var(--t-satir-arayuz);
}

/* ── Onay kutuları (kutu ve etiket görünümü form.css'te) ── */

.uk-form .form-check-label {
    font-size: var(--t-sm);
    line-height: var(--t-satir-govde);
}

.uk-form .form-check-label a {
    color: var(--renk-metin);
    font-weight: var(--t-orta);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.uk-form .form-check-label a:hover {
    color: var(--renk-marka);
}

.uk-form .form-check-input.is-invalid {
    border-color: var(--renk-hata);
}

/* Bootstrap geçersiz onayın etiketini de kırmızı yapıyor; hata metni altta zaten var, etiket okunur kalsın. */
.uk-form .form-check-input.is-invalid ~ .form-check-label {
    color: var(--renk-metin);
}

.uk-onay-kutu {
    padding: var(--b-3) var(--b-4);
    border: var(--kenar);
    border-radius: var(--r-orta);
    background-color: var(--renk-yuzey-ikincil);
}

.uk-onay-kutu .form-check {
    padding-top: 0;
}

.uk-onaylar > .form-alan {
    gap: 0;
    margin-bottom: var(--b-2);
}

/* ── Şifre ── */

.uk-parola {
    position: relative;
}

.uk-parola .form-control {
    width: 100%;
    padding-right: 52px;
}

.uk-parola-goster {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 100%;
    border-radius: 0 var(--r-orta) var(--r-orta) 0;
    background: transparent;
    color: var(--renk-metin-ikincil);
    font-size: var(--t-lg);
}

.uk-parola-goster:hover {
    color: var(--renk-metin);
}

.uk-parola-goster:focus-visible {
    outline-offset: -2px;
}

/* ── Evraklar ── */

.uk-evrak-alani {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--b-1);
    padding: var(--b-5) var(--b-4);
    border: 1px dashed var(--gri-400);
    border-radius: var(--r-buyuk);
    background-color: var(--renk-yuzey-ikincil);
    color: var(--renk-metin);
    font-size: var(--t-sm);
    line-height: var(--t-satir-arayuz);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--sure-hizli), background-color var(--sure-hizli);
}

.uk-evrak-alani > i {
    color: var(--renk-metin-ikincil);
    font-size: var(--t-2xl);
}

.uk-evrak-alani small {
    color: var(--renk-metin-ikincil);
    font-size: var(--t-xs);
}

.uk-evrak-alani:hover,
.uk-evrak-alani.suruklen {
    border-color: var(--gri-900);
    background-color: var(--renk-yuzey);
}

.uk-evrak-alani:focus-visible {
    border-color: var(--renk-marka);
    box-shadow: var(--odak-halkasi);
    outline: 0;
}

.uk-evrak-alani.hatali {
    border-color: var(--renk-hata);
}

.uk-evrak-listesi {
    margin: var(--b-2) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    /* minmax(0,…): uzun dosya adı satırı kartın dışına taşırmasın (ad kısalır, … ile biter) */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--b-2);
}

.uk-evrak-listesi:empty {
    display: none;
}

.uk-evrak-listesi li {
    display: flex;
    align-items: center;
    gap: var(--b-3);
    padding: var(--b-1) var(--b-1) var(--b-1) var(--b-3);
    border: var(--kenar);
    border-radius: var(--r-orta);
    background-color: var(--renk-yuzey);
    font-size: var(--t-sm);
    line-height: var(--t-satir-arayuz);
}

.uk-evrak-listesi li > i {
    color: var(--renk-metin-ikincil);
    font-size: var(--t-lg);
}

.uk-evrak-ad {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uk-evrak-listesi small {
    color: var(--renk-metin-ikincil);
    white-space: nowrap;
}

.uk-evrak-sil {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--r-kucuk);
    background: transparent;
    color: var(--renk-metin-ikincil);
}

.uk-evrak-sil:hover,
.uk-evrak-sil:focus-visible {
    background-color: var(--renk-yuzey-vurgu);
    color: var(--renk-hata);
}

/* reCAPTCHA kutusu (yalnız anahtarlar tanımlıysa basılır). Widget 304 px; dar kartta (320) sığsın diye küçültülür. */
.uk-recaptcha {
    display: grid;
    gap: var(--b-1);
    justify-items: start;
    margin-bottom: var(--b-2);
}

@media (max-width: 379.98px) {
    .uk-recaptcha .g-recaptcha {
        height: 64px;
        transform: scale(.8);
        transform-origin: 0 0;
    }
}

/* Bal küpü: ekran dışında (display:none olsa bazı botlar atlar). */
.uk-bal {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Kart altı */
.uk-giris {
    margin: var(--b-6) 0 0;
    padding-top: var(--b-4);
    border-top: var(--kenar);
    color: var(--renk-metin-ikincil);
    font-size: var(--t-sm);
    line-height: var(--t-satir-govde);
    text-align: center;
}

.uk-giris a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--renk-marka);
    font-weight: var(--t-orta);
}

.uk-giris a:hover {
    color: var(--renk-marka-koyu);
    text-decoration: underline;
}

/* ── Başvuru alındı ── */

.uk-sonuc {
    max-width: 520px;
    text-align: center;
}

.uk-sonuc-isaret {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: var(--b-4);
    border-radius: 50%;
    background-color: var(--renk-basari-zemin);
    color: var(--renk-basari);
    font-size: var(--t-3xl);
}

.uk-sonuc h1 {
    margin: 0 0 var(--b-2);
    font-size: var(--t-2xl);
    font-weight: var(--t-kalin);
    line-height: var(--t-satir-siki);
    letter-spacing: var(--t-harf-baslik);
}

.uk-sonuc-metin {
    margin: 0 0 var(--b-5);
    color: var(--renk-metin-ikincil);
    font-size: var(--t-md);
    line-height: var(--t-satir-govde);
}

.uk-sonuc-uyari {
    display: flex;
    gap: var(--b-3);
    text-align: left;
    font-size: var(--t-sm);
}

.uk-sonuc-adimlar {
    display: grid;
    gap: var(--b-2);
    margin: 0 0 var(--b-6);
    padding: 0;
    list-style: none;
    text-align: left;
}

.uk-sonuc-adimlar li {
    display: flex;
    align-items: center;
    gap: var(--b-3);
    padding: var(--b-3) var(--b-4);
    border: var(--kenar);
    border-radius: var(--r-orta);
    background-color: var(--renk-yuzey-ikincil);
    font-size: var(--t-sm);
    font-weight: var(--t-orta);
    line-height: var(--t-satir-arayuz);
}

.uk-sonuc-adimlar span {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--renk-yuzey-vurgu);
    font-size: var(--t-sm);
}

.uk-sonuc-adimlar li:first-child span {
    background-color: var(--gri-900);
    color: var(--renk-metin-ters);
}

.uk-sonuc-not {
    margin: var(--b-3) 0 0;
    color: var(--renk-metin-ikincil);
    font-size: var(--t-sm);
    line-height: var(--t-satir-govde);
}