/* ÜRETİLMİŞ DOSYA — elle düzenlenmez.
 * Kaynak: src/designs/21-iletisim/section.css
 *
 * Her bildirime `!important` eklendi. Sebep:
 * florax teması `.post-entry h2 { font-size: 36px !important }` gibi
 * kurallar taşıyor ve `!important` özgüllüğü dinlemiyor. Ayrıntı:
 * scripts/gs-important.mjs başlığı ve assets/base.css.
 */
/* ─── 21-iletisim · İLETİŞİM SAYFASI ──────────────────────────────────────────
 *
 * Tez: sayfa bir İRSALİYEDİR (Section.tsx başındaki nota bak).
 *
 * 🔒 Kurallar aynı: `!important` yazılmaz · çıplak hex yok · punto
 * `--gs-fs-1…7` · boşluk `--gs-bo-1…6` · `opacity`/`transform` TANIMLANMAZ
 * (Ö-023) · kenarlık `border` kısayoluyla (Ö-135) · koyu zeminde
 * `:focus-visible` ezilir (Ö-113).
 *
 * ⚠️ FORM MARKUP'I CF7'DEN GELİYOR — sınıf yazamayız, ham etiketler
 * (`input`, `textarea`, `label`, `p`, `button`) biçimlendiriliyor.
 * 🔴 `<button>` ve `<input>` DÖRT bildirimi kendisi yazmak zorunda
 * (`border-radius` · `background` · `color` · `padding`): Elementor kiti
 * devralınmamış yüzeyde bunları dayatıyor (Ö-118).
 */

.gs-21-iletisim {
    --il-zemin: var(--gs-koyu-zemin);
    --il-yuzey: var(--gs-koyu-yuzey);
    --il-yuzey-ust: var(--gs-koyu-yuzey-ust);
    --il-metin: var(--gs-koyu-metin);
    --il-ikincil: var(--gs-koyu-ikincil);
    --il-silik: var(--gs-koyu-silik);
    --il-hat: var(--gs-koyu-hat);
    --il-eylem: var(--gs-primary);

    --il-aralik: 0.14em;
    --il-sinir: min(92vw, 74rem);

    background: var(--il-zemin) !important;
    color: var(--il-ikincil) !important;
}

.gs-21-iletisim .il {
    background-image: repeating-linear-gradient(
        135deg,
        rgb(255 255 255 / 0.016) 0,
        rgb(255 255 255 / 0.016) 1px,
        transparent 1px,
        transparent 7px
    ) !important;
}

.gs-21-iletisim .il-sinir {
    width: var(--il-sinir) !important;
    margin-inline: auto !important;
}

.gs-21-iletisim .il-etiket {
    margin: 0 0 var(--gs-bo-3) !important;
    font-size: var(--gs-fs-1) !important;
    font-weight: 700 !important;
    letter-spacing: var(--il-aralik) !important;
    text-transform: uppercase !important;
    color: var(--il-silik) !important;
}

.gs-21-iletisim .il-gizli-baslik {
    position: absolute !important;
    inset-block-start: 0 !important;
    inset-inline-start: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

.gs-21-iletisim .il-banner {
    padding-block: var(--gs-ritim) var(--gs-bo-6) !important;
    border-bottom: 1px solid var(--il-hat) !important;
}

.gs-21-iletisim .il-baslik {
    margin: 0 0 var(--gs-bo-4) !important;
    max-width: 18ch !important;
    font-size: var(--gs-fs-7) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.028em !important;
    color: var(--il-metin) !important;
}

.gs-21-iletisim .il-ozet {
    margin: 0 !important;
    max-width: 56ch !important;
    font-size: var(--gs-fs-4) !important;
    line-height: 1.65 !important;
    color: var(--il-ikincil) !important;
}

.gs-21-iletisim .il-govde {
    display: grid !important;
    gap: var(--gs-ritim) !important;
    padding-block: var(--gs-ritim) !important;
}

/* ── KÜNYE — alan/değer, Kurumsal'ın antetiyle AYNI sözleşme ────────────── */

.gs-21-iletisim .il-liste {
    margin: 0 !important;
    padding: 0 !important;
    border-top: 1px solid var(--il-hat) !important;
}

.gs-21-iletisim .il-satir {
    padding-block: var(--gs-bo-4) !important;
    border-bottom: 1px solid var(--il-hat) !important;
}

.gs-21-iletisim .il-et {
    margin: 0 0 var(--gs-bo-1) !important;
    font-size: var(--gs-fs-1) !important;
    font-weight: 700 !important;
    letter-spacing: var(--il-aralik) !important;
    text-transform: uppercase !important;
    color: var(--il-silik) !important;
}

.gs-21-iletisim .il-deger {
    margin: 0 !important;
    font-size: var(--gs-fs-4) !important;
    line-height: 1.5 !important;
    color: var(--il-metin) !important;
}

/* Fabrika telefonunun satırı — adresin altında, bir basamak sessiz. */
.gs-21-iletisim .il-deger-alt {
    margin-block-start: 0.25rem !important;
    font-size: var(--gs-fs-2) !important;
    color: var(--il-silik) !important;
}

.gs-21-iletisim .il-bag {
    display: inline-flex !important;
    align-items: center !important;
    min-height: var(--gs-hedef) !important;
    border-bottom: 1px solid var(--il-hat) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    color: var(--il-metin) !important;
}

.gs-21-iletisim .il-bag:hover {
    border-bottom-color: var(--il-metin) !important;
}

/* ── FORM — CF7'nin kendi markup'ı ───────────────────────────────────────── */

.gs-21-iletisim .il-h2 {
    margin: 0 0 var(--gs-bo-5) !important;
    font-size: var(--gs-fs-6) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.012em !important;
    color: var(--il-metin) !important;
}

/* 🔴 CF7'nin EKRAN OKUYUCU BÖLGESİ görsel olarak gizlenir — ve bunu bizim
 * yazmamız gerekiyor (Ö-170). Contact Form 7 bu bölgeyi kendi
 * `styles.css`inde gizliyor; o dosya gurtesv2'de yükleniyor, laboratuvarda
 * YOK. Ölçüldü: form laboratuvarda 50 px daha uzundu çünkü bölge orada
 * görünür kalıyordu.
 * ⚠️ `display: none` YAZILMAZ — bölge ekran okuyucuya ULAŞMALI; gizleme
 * sayfanın kendi sr-only reçetesiyle yapılıyor (aynı değerler `il-gizli-baslik`
 * ile birebir). */
.gs-21-iletisim .il-form .screen-reader-response {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

/* 🔴 Ö-170 ②'NİN İKİNCİ ELEMANI (Ö-178). Aynı aile, aynı sebep: CF7'nin gizli
 * alan kabı `styles.css`inde `display: none` ile gizleniyor
 * (`contact-form-7/includes/css/styles.css:15`) ve o dosya laboratuvarda YOK.
 * Ölçüldü: `<fieldset>`in tarayıcı varsayılan kenarlık/dolgusu formu
 * laboratuvarda **50 px** uzatıyordu (642.25 ↔ 592.25) ve fark bölümün
 * köküne kadar çıkıyordu.
 * ⚠️ `display: none` BURADA doğru: içerideki alanlar GİZLİ alanlar ve
 * `display: none` bir formun gönderimini engellemez (`disabled` engeller).
 * Kural CF7'den birebir devralındı, icat edilmedi. */
.gs-21-iletisim .il-form .hidden-fields-container {
    display: none !important;
    /* ⚠️ Kutusunu da BİLDİRİR (Ö-118 · Ö-141): eleman iki dünyada da
       görünmez, ama `getComputedStyle` görünmeyen elemanın da kutusunu
       döndürür ve laboratuvarda Tailwind preflight `<fieldset>`i sıfırlarken
       WordPress'te tarayıcı varsayılanı (2px groove + dolgu) duruyordu —
       15 hesaplanmış özellikte hayalet fark. */
    margin: 0 !important;
    padding: 0 !important;
    border: 0 solid transparent !important;
}

/* CF7'nin kendi kuralı, birebir devralındı (`styles.css:57`). Bu formda
   görünür bir etkisi yok — konumlanmış bir çocuk yok — ama iki dünyanın
   hesaplanmış stili ayrışıyordu. */
.gs-21-iletisim .il-form .wpcf7-form-control-wrap {
    position: relative !important;
}

/* 🔴 LABORATUVARA ÖZGÜ BİR BULAŞMA (Ö-178). CF7'nin formu BOOTSTRAP sınıf
 * adları taşıyor (`row` · `col-md-6` · `form-group` · `mb-3`) ve Tailwind'in
 * `mb-3` diye GERÇEK bir utility'si var. Tailwind v4 kaynak dosyaları
 * tarıyor, `ornekler.ts` içindeki dizeyi görüyor ve kuralı ÜRETİYOR:
 * `.mb-3 { margin-bottom: calc(var(--spacing) * 3) }` = 12 px.
 * WordPress'te böyle bir kural yok → 12 ↔ 0 ayrışması.
 *
 * Kapsam ölçüldü: formun BÜTÜN sınıfları tarandı, laboratuvar-özel kuralı
 * olan TEK sınıf `mb-3`. Değer WordPress'in hâline (0) sabitleniyor —
 * "görünen her kutu ölçüsünü kendisi bildirir" (Ö-118).
 *
 * ⚠️ GENEL TUZAK: bir `ornekler.ts` üçüncü tarafın sınıf adını taşıyorsa ve o
 * ad bir Tailwind utility'siyle çakışıyorsa, laboratuvar sessizce onu
 * biçimlendirir. Yeni bir bölümde üçüncü taraf markup'ı varsa bu taranır. */
.gs-21-iletisim .il-form .mb-3 {
    margin-bottom: 0 !important;
}

.gs-21-iletisim .il-form p {
    margin: 0 0 var(--gs-bo-4) !important;
}

.gs-21-iletisim .il-form label {
    display: block !important;
    font-size: var(--gs-fs-1) !important;
    font-weight: 700 !important;
    letter-spacing: var(--il-aralik) !important;
    text-transform: uppercase !important;
    color: var(--il-silik) !important;
}

.gs-21-iletisim .il-form input[type="text"],
.gs-21-iletisim .il-form input[type="email"],
.gs-21-iletisim .il-form input[type="tel"],
.gs-21-iletisim .il-form input[type="url"],
.gs-21-iletisim .il-form input[type="number"],
.gs-21-iletisim .il-form textarea,
.gs-21-iletisim .il-form select {
    display: block !important;
    width: 100% !important;
    min-height: var(--gs-hedef) !important;
    margin-top: var(--gs-bo-2) !important;
    padding: 0.7rem 0.9rem !important;
    border: 1px solid var(--il-hat) !important;
    border-radius: 0 !important;
    background: var(--il-yuzey) !important;
    color: var(--il-metin) !important;
    font-family: inherit !important;
    font-size: var(--gs-fs-4) !important;
    line-height: 1.5 !important;
}

.gs-21-iletisim .il-form textarea {
    min-height: 9rem !important;
    resize: vertical !important;
}

.gs-21-iletisim .il-form input:focus-visible,
.gs-21-iletisim .il-form textarea:focus-visible,
.gs-21-iletisim .il-form select:focus-visible {
    outline: 2px solid var(--il-metin) !important;
    outline-offset: 2px !important;
}

/* Gönder — sayfanın TEK dolgu kırmızısı (§5 ⑤ · ① Tek Kırmızı Kuralı). */
.gs-21-iletisim .il-form input[type="submit"],
.gs-21-iletisim .il-form button[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    min-height: var(--gs-hedef) !important;
    padding: 0.9rem 1.6rem !important;
    border: 0 solid transparent !important;
    border-radius: 0 !important;
    background: var(--il-eylem) !important;
    color: var(--gs-white) !important;
    font-family: inherit !important;
    font-size: var(--gs-fs-4) !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

/* CF7'nin kendi durum mesajları — sayfanın diline çevriliyor. */
.gs-21-iletisim .il-form .wpcf7-not-valid-tip {
    display: block !important;
    margin-top: var(--gs-bo-1) !important;
    font-size: var(--gs-fs-2) !important;
    color: var(--il-eylem) !important;
}

/* 🔴 CF7'nin DURUM kuralları — birebir devralındı (`styles.css:25`).
 * Form açılışta `init` sınıfını taşır ve CF7 yanıt kutusunu o durumda
 * gizler; laboratuvarda o kural olmadığı için altta BOŞ BİR ÇERÇEVE
 * duruyordu (26 px + marj = 42 px, ölçüldü). Kutu ancak form gerçekten
 * yanıt verince (`sent` · `failed` · `invalid` …) görünür — aşağıdaki
 * biçimlendirme o an içindir. */
.gs-21-iletisim .il-form form.init .wpcf7-response-output,
.gs-21-iletisim .il-form form.resetting .wpcf7-response-output,
.gs-21-iletisim .il-form form.submitting .wpcf7-response-output {
    display: none !important;
}

.gs-21-iletisim .il-form .wpcf7-response-output {
    margin: var(--gs-bo-4) 0 0 !important;
    padding: var(--gs-bo-3) var(--gs-bo-4) !important;
    border: 1px solid var(--il-hat) !important;
    border-radius: 0 !important;
    font-size: var(--gs-fs-3) !important;
    color: var(--il-metin) !important;
}

.gs-21-iletisim a:focus-visible,
.gs-21-iletisim button:focus-visible {
    outline: 2px solid var(--il-metin) !important;
    outline-offset: 3px !important;
}

/* ── 1025px ve üzeri — künye ve form yan yana ────────────────────────────── */

@media (min-width: 1025px) {
    .gs-21-iletisim .il-govde {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important;
        align-items: start !important;
    }
}