/**
 * quote-card.css — Teklif/iletişim formu KARTI. TEK KAYNAK.
 *
 * NEDEN AYRI DOSYA: aynı form iki yerde çıkıyor (anasayfa teklif bölümü +
 * iletişim sayfası) ve stilleri front-page.css ile contact.css'te AYRI AYRI
 * kopyalanmıştı. Kopyalar zamanla ayrıştı: `.contact-form__wa` (WhatsApp) ve
 * `.contact-form__or` ("ya da" ayracı) yalnız front-page.css'te kaldığı için
 * iletişim sayfasında WhatsApp butonu beyaz kart üstünde beyaz görünüyordu
 * (yani görünmüyordu) ve ayracın çizgileri hiç çizilmiyordu.
 *
 * İşaretleme: inc/contact-form.php → atlas_contact_form().
 * Yükleme: inc/enqueue.php — anasayfa VE iletişim sayfası.
 *
 * @package Atlas-Proses
 */

/* ── Kart ── */
.quote__card {
    padding: clamp(var(--space-5), 2.4vw, var(--space-8));
    background-color: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}
.quote__card-head { margin-bottom: var(--space-5); }
.quote__card-title { font-size: var(--text-xl); color: var(--color-navy); }
.quote__card-sub { margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--text-sm); }

/* ── Form içi — kompakt padding/font, büyük harf etiketler ── */
.contact-form { gap: var(--space-4); }
.contact-form__row { gap: var(--space-4); }
.contact-form .form-input,
.contact-form .form-textarea,
.contact-form .form-select {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    /* Dar ekran: <select> içindeki en uzun seçenek ("Dozaj Pompaları ve Kontrol
       Ekipmanları") kutuya kendi doğal genişliğini dayatıyordu. */
    min-width: 0;
    max-width: 100%;
}
.contact-form .form-textarea {
    min-height: 88px;
    /* Kullanıcı yatay büyütünce kart taşıyordu; yalnız dikey büyüsün. */
    resize: vertical;
}
.quote__card .form-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.quote__card .form-label span[aria-hidden] { color: var(--color-danger); }

/* ── Butonlar: btn-hero mekaniği (alttan dolum); yalnız tam genişlik + köşe ── */
.contact-form__submit,
.contact-form__wa {
    width: 100%;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-6);
}
/* WhatsApp — btn-hero dolum değişkenlerini yeşile çevir (ayrı stil gerekmez) */
.contact-form__wa {
    color: #25d366;
    border-color: #25d366;
    --btn-fill: #25d366;
    --btn-fill-ink: #fff;
}

/* ── "ya da" ayracı ── */
.contact-form__or {
    display: flex; align-items: center; gap: var(--space-4);
    color: var(--color-text-muted); font-size: var(--text-sm);
}
.contact-form__or::before,
.contact-form__or::after {
    content: ""; flex: 1 1 auto; height: 1px;
    background-color: var(--color-border);
}

/* ── KVKK satırı ── */
.contact-form__kvkk {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-xs); color: var(--color-text-muted);
    max-width: none;
}
.contact-form__kvkk .icon { flex: 0 0 auto; color: var(--color-primary); }

/* ── Çok dar ekranlar (≤360px) ────────────────────────────────────────────
   360px'in altında kartın iç boşluğu + kabın yan boşluğu birlikte kullanılabilir
   genişliğin üçte birini yiyordu; alanlar okunmaz hâle geliyordu. Boşluklar
   kısılır, butonlardaki ikon+metin sarabilir. */
@media (max-width: 360px) {
    .quote__card { padding: var(--space-4); border-radius: var(--radius-lg); }
    .quote__card-title { font-size: var(--text-lg); }
    .contact-form { gap: var(--space-3); }
    .contact-form__row { gap: var(--space-3); }
    .contact-form__submit,
    .contact-form__wa {
        padding: var(--space-3) var(--space-3);
        font-size: var(--text-sm);
    }
    /* Uzun etiketler ("WhatsApp'tan Yazın") butonu taşırmasın */
    .contact-form__submit span,
    .contact-form__wa span { overflow-wrap: anywhere; }
    .contact-form__or { gap: var(--space-2); }
    .contact-form__kvkk { align-items: flex-start; }
}