/**
 * contact.css — İletişim sayfası (page-iletisim.php).
 *
 * Form stilleri GLOBAL components.css'tedir (.contact-form / .form-*). Burada yalnız:
 * sayfa düzeni (bilgi | form), iletişim bilgi kartları ve harita.
 *
 * @package Atlas-Proses
 */

.contact { padding-block: clamp(var(--space-8), 4vw, var(--space-16)); }

/* Öğe hem `.container` hem `.contact__grid` taşıyor; `.container` sitenin geniş
   kabı (--container-2xl, 1720px). İletişimde iki sütun o genişlikte birbirinden
   kopuyordu → 1200'e sınırlandı. `.container` da 0,1,0 olduğu için son gelen
   kural kazanır; kaynak sırasına güvenmemek adına !important değil, ayrı
   sayfa CSS'i (contact.css components/utilities'ten SONRA yükleniyor). */
.contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(var(--space-8), 4vw, var(--space-16));
    align-items: start;
    max-width: var(--container-xl);
    margin-inline: auto;
}

/* ── İletişim bilgi kartları ── */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-8);
}
.contact-info__item {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-background);
}
.contact-info__ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: 0 0 auto;
    border-radius: var(--radius-full);
    background-color: var(--color-surface-2);
    color: var(--color-primary);
}
/* Metin sütunu (ikonun yanındaki <div>): flex öğesinin örtük alt sınırı
   `min-width: auto`; uzun e-posta/adres kartı taşırıyordu. */
.contact-info__item > div { min-width: 0; }
.contact-info__label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}
.contact-info__value {
    display: block;
    color: var(--color-navy);
    font-weight: 600;
    line-height: var(--leading-normal);
    /* E-posta ve adres tek kelimede uzun ("atlas@atlaspompa.com"); dar ekranda
       kartın dışına taşıyordu. */
    overflow-wrap: anywhere;
}
a.contact-info__value:hover { color: var(--color-primary); }

.contact__actions { margin-top: var(--space-6); }
.contact__info .social-list { margin-top: var(--space-6); }

/* Form kartı stilleri BURADA DEĞİL: assets/css/component/quote-card.css
   (anasayfadaki teklif formuyla AYNI bileşen — tek kaynak).
   Yalnız bu sayfaya özgü olan tek şey: form sütunu geniş ekranda çok
   genişlediği için kart ortalanıp sınırlanır. */
.contact__form-wrap .quote__card { max-width: 550px; margin-inline: auto; }

/* ── Harita ── */
.contact-map {
    margin-top: clamp(var(--space-10), 5vw, var(--space-16));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    line-height: 0;
}
.contact-map iframe { display: block; width: 100%; }

/* ── Duyarlı ── */
@media (max-width: 900px) {
    .contact__grid { grid-template-columns: 1fr; }
}

/* Çok dar ekranlar (≤360px): 44px'lik ikon rozeti + iki yanda space-5 padding,
   340px'te metne 180px'den az yer bırakıyordu; değerler kırpılıyor ve satırlar
   birbirine giriyordu. Rozet küçülür, boşluklar kısılır. */
@media (max-width: 360px) {
    .contact-info__item { padding: var(--space-4); gap: var(--space-3); }
    .contact-info__ic { width: 36px; height: 36px; }
    .contact-info__ic .icon { font-size: .85rem; }
    .contact-info__label { font-size: .62rem; letter-spacing: .03em; }
    .contact-info__value { font-size: var(--text-sm); }
}