/**
 * Mobil form alanları.
 *
 * ASIL SORUN — iOS'ta otomatik yakınlaştırma:
 * Safari, yazı boyutu 16px'in ALTINDA olan bir alana dokunulduğunda sayfayı
 * kendiliğinden yakınlaştırır ve odak kalktığında GERİ UZAKLAŞTIRMAZ. Kullanıcı
 * adını yazdıktan sonra sayfa yamuk kalır, sonraki alanları bulmak için yatay
 * kaydırmak gerekir.
 *
 * Ölçülen kaynaklar (375x812):
 *   - Elementor'un kendi kuralı: .elementor-field-textual { font-size: 15px;
 *     min-height: 40px } — /iletisim/ (4 alan), /seo-teklif-formu/ (5 alan +
 *     mesaj alanı), /blog/ ve her yazıdaki bülten alanı.
 *   - /sira-bulucu/ araç formunda keywords alanı ve iki seçim listesi 14px.
 *
 * 16px bir tercih değil, iOS'un eşiği. Bu yüzden yalnızca dar ekranda
 * uygulanıyor; masaüstü görünümü olduğu gibi kalıyor.
 *
 * İKİNCİL: dokunma hedefleri. Alanlar 40px, onay kutuları 13x13px, gönder
 * butonu 118x40 idi. Önerilen asgari 44px.
 */

@media (max-width: 1024px) {

    /* ------------------------------------------------ Metin alanları */

    /*
     * Hem Elementor formları hem eklenti/araç formları kapsanıyor; araç
     * sayfalarındaki alanların hiç sınıfı yok, o yüzden tür seçicisiyle.
     */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="number"],
    input[type="password"],
    input[type="date"],
    textarea,
    select {
        /* iOS eşiği: 16px'in altı odakta yakınlaştırma demek. */
        font-size: 16px;
    }

    /*
     * Elementor'un kuralı `.elementor-field-textual.elementor-size-sm`
     * ağırlığında olabiliyor; gövdeyle başlayıp iki sınıf kullanarak geçiyoruz.
     */
    body .elementor-field.elementor-field-textual,
    body textarea.elementor-field-textual,
    body select.elementor-field-textual {
        font-size: 16px;
        min-height: 48px;
        padding: 11px 14px;
    }

    /* "Mesajınız" tek satır yüksekliğindeydi. */
    body textarea.elementor-field-textual {
        min-height: 104px;
        line-height: 1.5;
    }

    /* ------------------------------------------------ Araç sayfası formları
     *
     * Araç eklentileri alanlarını 14px yapıyor ve kuralları
     * `.form-group input` gibi 1 sınıf + 1 eleman ağırlığında; yukarıdaki tür
     * seçicisi bunu geçemiyor. Eklenti CSS'i tema CSS'inden SONRA yüklendiği
     * için kaynak sırası da yardım etmiyor, seçiciliği yükseltmek gerekiyor.
     *
     * Ölçülen kapsayıcılar: .form-group (/sira-bulucu/,
     * /backlink-analiz-araci/), .seo-form-group (/seo-analizi/),
     * .rtg-* (/robots-txt-olusturucu/). Yeni bir araç eklenirse kapsayıcısının
     * buraya yazılması gerekir.
     */
    body .form-group input,
    body .form-group select,
    body .form-group textarea,
    body .seo-form-group input,
    body .seo-form-group select,
    body .seo-form-group textarea {
        font-size: 16px;
    }

    /*
     * robots-txt-generator-pro eklentisi kendi değerlerini `!important` ile
     * yazıyor (`font-size: 14px !important`, onay kutusunda
     * `width: auto !important`). Bir !important'ı yenmek için !important
     * gerekiyor; seçicilik zaten daha yüksek (1 sınıf + 2 eleman).
     * Burada gerekçe işlevsel: 16px iOS'un yakınlaştırma eşiği.
     */
    body .rtg-form-group input,
    body .rtg-form-group select,
    body .rtg-form-group textarea,
    body .rtg-dynamic-input input {
        font-size: 16px !important;
    }

    /* Araç sayfalarındaki onay kutuları da 13x13px idi. */
    body .rtg-checkbox-item input[type="checkbox"] {
        width: 20px !important;
        height: 20px;
        accent-color: var(--e-global-color-411a7fe, #3878c3);
    }

    body .form-group input[type="checkbox"],
    body .seo-form-group input[type="checkbox"] {
        width: 20px;
        height: 20px;
        accent-color: var(--e-global-color-411a7fe, #3878c3);
    }

    /* ------------------------------------------------ Onay kutuları */

    /*
     * Tarayıcı varsayılanı 13x13px. KVKK onayı ve teklif formundaki 10 seçenek
     * bu ölçüdeydi; parmakla isabet ettirmek zordu.
     */
    body .elementor-field-type-acceptance input[type="checkbox"],
    body .elementor-field-type-checkbox input[type="checkbox"],
    body .elementor-field-type-radio input[type="radio"],
    body .elementor-field-subgroup input[type="checkbox"],
    body .elementor-field-subgroup input[type="radio"] {
        width: 20px;
        height: 20px;
        margin-right: 9px;
        flex: none;
        /* Desteklemeyen tarayıcıda varsayılan renge düşer. */
        accent-color: var(--e-global-color-411a7fe, #3878c3);
    }

    /* Etiketin tamamı dokunulabilir olsun. */
    body .elementor-field-subgroup .elementor-field-option,
    body .elementor-field-type-acceptance .elementor-field-option {
        display: flex;
        align-items: flex-start;
        gap: 2px;
        padding: 7px 0;
        line-height: 1.45;
    }

    body .elementor-field-subgroup .elementor-field-option label,
    body .elementor-field-type-acceptance .elementor-field-option label {
        cursor: pointer;
    }

    /* ------------------------------------------------ Gönder butonu */

    /*
     * Formun gönder butonu 118x40 ve sola yapışıktı. Dar ekranda tam genişlik
     * hem daha kolay isabet ediyor hem formun bittiğini belli ediyor.
     */
    body .elementor-field-type-submit {
        justify-content: stretch;
    }

    /*
     * Seçicilik notu: Elementor'un kuralı
     * `.elementor-form .elementor-button.elementor-size-sm { min-height: 40px }`
     * yani 3 sınıf ağırlığında. Sınıf sayısı önce karşılaştırıldığı için
     * 2 sınıf + 1 eleman ile yazılan ilk deneme kaybediyordu; 3 sınıf + 1
     * elemana çıkarak geçiyoruz. Dikey dolgu da açıkça veriliyor: kit
     * butonların dikey dolgusunu sıfırlıyor ve yükseklik yalnızca satır
     * yüksekliğinden geliyordu.
     */
    body .elementor-form .elementor-button.elementor-size-sm {
        width: 100%;
        min-height: 50px;
        padding: 13px 24px;
        font-size: 15.5px;
    }

    /* ------------------------------------------------ Odak görünürlüğü */

    /*
     * Klavye açıkken hangi alanda olduğunun anlaşılması gerekiyor; Elementor
     * varsayılanı belirgin bir odak halkası vermiyor.
     */
    body .elementor-field.elementor-field-textual:focus,
    body textarea.elementor-field-textual:focus,
    body select.elementor-field-textual:focus {
        outline: 2px solid var(--e-global-color-a6885d0, #4877bd);
        outline-offset: 1px;
        border-color: var(--e-global-color-a6885d0, #4877bd);
    }
}