/* ============================================================================
 * İletişim sayfası (page-iletisim.php, slug iletisim). Başlık, breadcrumb ve
 * dış container product-archive.css ORTAK gelir (Tarihçe/Değerlerimiz/Kalite
 * Politikamız/İnsan Kaynakları ile birebir aynı). Sadece bu sayfaya özel: üst
 * ikili panel (harita kartı + şirket/iletişim bilgisi kartı, eşit yükseklik)
 * ve altındaki "İletişim Formu" kartı (Contact Form 7).
 *
 * Tüm ölçüler, İletişim XD artboard'unun kendisinden (Tada.xd →
 * artwork/artboard-9d350e4a-d09d-45b5-9f73-24aca1f7e3e8/graphics/
 * graphicContent.agc — 14 sayfalık XD dosyasında "İletişim" adıyla kayıtlı
 * artboard, native 1920×2771) doğrudan çıkarıldı: her metnin transform.tx/ty
 * konumu, her dikdörtgenin width/height/r değeri ve her text node'un
 * style.font.size/family/style değeri JSON olarak okunarak birebir
 * uygulandı — göz kararı YOK. 1920 native → vw dönüşümü her yerde /19.2
 * (1920/100) formülüyle yapıldı; aşağıdaki her clamp() değerinin üst sınırı
 * bu native pikseldir.
 * ==========================================================================*/

.iletisim-panels {
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 2.6vw, 50px);
}

/* ---- Üst panel: harita + şirket/iletişim kartı ----
 * XD: harita görseli (Rectangle arka planlı "Ekran Resmi..." bitmap dolgusu)
 * x=140 y=351 w=795 h=661 r=30; bilgi kartı (Rectangle 871) x=985 y=352
 * w=795 h=660 r=30 — aynı satırda başlıyor, aralarındaki yatay boşluk
 * 985-(140+795)=50 native (2.6vw). İki kart neredeyse aynı yükseklikte
 * (661 vs 660) — harita kartına sabit aspect-ratio verip (795:660) bilgi
 * kartını `align-items:stretch` ile aynı satır yüksekliğine germek, iki
 * kartı her genişlikte otomatik olarak eşitliyor (elle yükseklik vermeden).
 * ==========================================================================*/
.iletisim-bilgi {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 2.6vw, 50px);
	align-items: stretch;
}

.iletisim-map,
.iletisim-card {
	background: var(--tada-white);
	border: 1px solid var(--tada-gray-200);
	border-radius: clamp(20px, 1.56vw, 30px);
}

/* NOT: `aspect-ratio` daha önce burada tanımlıydı ve masaüstünde gerçek bir
   düzen hatasına yol açıyordu — grid hücresi `align-items:stretch` ile
   yükseklik aldığında (komşu bilgi kartının içerik yüksekliğine eşitlenerek)
   tarayıcı, sabit `aspect-ratio` oranını korumak için GENİŞLİĞİ o
   yükseklikten yeniden hesaplıyor, bu da kartın kendi grid sütun izinden
   (596.78px) ~50px daha geniş (684px) render edilmesine ve bilgi kartının
   üzerine binmesine neden oluyordu (Playwright ile ölçülüp doğrulandı).
   Çözüm: aspect-ratio kaldırıldı — grid'in varsayılan davranışı zaten
   doğru sonucu veriyor: genişlik = kendi sütun izni (asla taşmaz),
   yükseklik = `align-items:stretch` ile komşu kartla otomatik eşitlenir
   (aşağıdaki min-height yalnızca içerik çok kısaldığında haritanın
   tamamen çökmesini önleyen bir taban değer, sabit/kırılgan bir ortak
   yükseklik değil). */
.iletisim-map {
	position: relative;
	overflow: hidden;
	min-height: 320px;
}
.iletisim-map__image,
.iletisim-map__embed {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
	border-radius: inherit;
}
.iletisim-map__link {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
}
.iletisim-map__link:focus-visible {
	outline: 3px solid var(--tada-yellow);
	outline-offset: -3px;
}
.iletisim-map__embed-wrap {
	position: relative;
	width: 100%;
	height: 100%;
}
.iletisim-map__embed {
	pointer-events: auto;
}
/* Touch-scroll guard: main.js only adds `iletisim-map--gated` on coarse-
   pointer devices (see the guarded block in main.js) — without JS, or on
   desktop, the iframe stays fully interactive from the first paint (safe
   baseline, matches "harita sürüklenebilmeli ve zoom yapılabilmeli"). The
   gate only exists so a mobile visitor can flick-scroll the page over the
   map instead of getting stuck panning it; one tap unlocks normal
   dragging/pinch-zoom for the rest of the visit. */
.iletisim-map__activate {
	display: none;
}
.iletisim-map--gated .iletisim-map__embed {
	pointer-events: none;
}
.iletisim-map--gated .iletisim-map__activate {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 16px;
	background: rgba(17, 17, 17, 0.35);
	border: 0;
	border-radius: inherit;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: var(--tada-white);
	cursor: pointer;
}
.iletisim-map--gated .iletisim-map__activate:focus-visible {
	outline: 3px solid var(--tada-yellow);
	outline-offset: -3px;
}
.iletisim-empty-state__hint {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	margin: 0;
	padding: 10px 14px;
	background: rgba(255, 255, 255, .92);
	border: 1px dashed var(--tada-gray-400);
	border-radius: 12px;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 12px;
	line-height: 1.4;
	color: var(--tada-gray-700);
}

/* Kart iç dolgusu: üst/alt artık eşit (padding-block) — XD'nin kendi 81
   native üst değeri (433-352) bilinçli olarak kullanılmıyor, çünkü alttaki
   dengeli 50-native değerinden belirgin biçimde büyüktü ve başlığı
   gereğinden fazla aşağıda başlatıyordu (görev talebi: üst/alt görsel
   olarak eşit olsun). Yatay dolgu 50 native (1073-985) korunuyor. */
.iletisim-card {
	box-sizing: border-box;
	padding-block: clamp(26px, 2.6vw, 50px);
	padding-inline: clamp(26px, 2.6vw, 50px);
	display: flex;
	flex-direction: column;
	text-align: center;
}
/* Montserrat ExtraBold 32 native (1.67vw), siyah — XD text style: font
   ExtraBold size 32, fill #000. */
.iletisim-card__title {
	margin: 0 0 clamp(12px, 0.94vw, 18px);
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 800;
	font-size: clamp(20px, 1.67vw, 32px);
	line-height: 1.2;
	color: var(--tada-black);
}
/* Montserrat Regular 16 native (0.83vw) lineHeight 24, siyah, ortalı — XD
   text style: font Regular size 16, paragraphAlign center, fill #000. */
.iletisim-card__description {
	margin: 0 0 clamp(24px, 2.55vw, 49px);
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 400;
	font-size: clamp(13px, 0.83vw, 16px);
	line-height: 1.5;
	color: var(--tada-black);
}
.iletisim-card__description p {
	margin: 0 0 1em;
}
.iletisim-card__description p:last-child {
	margin-bottom: 0;
}

/* ---- 2×2 iletişim öğeleri grid'i ----
 * XD satır aralığı (icon-to-icon dikey pitch, Adres→Mail) 253.8 native
 * (13.22vw); sütun merkezleri (Ellipse155 cx=1228, Ellipse162 cx=1604)
 * arası 376 native (19.58vw). Grid gap bu iki pitch'ten kart iç dolgusu
 * (50 native yatay) düşülerek türetildi.
 * ==========================================================================*/
.iletisim-items {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 2.5vw, 122px) clamp(20px, 2.5vw, 48px);
	margin-top: auto;
}
.iletisim-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
/* İkon dış kutusu — dört ikon da aynı ölçüde (XD'deki en büyük glif
   gps_9084514: 76.2×60 native → kutu içinde `object-fit`-benzeri ortalama
   ile dört ikonun görsel ağırlığı eşitlenir). Bir önceki turda ikonlar
   başlıklara göre görsel olarak hafif kalıyordu — dış kutu ve glif oranı
   yaklaşık %30 büyütüldü (56px tavan → 72px, glif dolgusu %78 → %82) tüm
   viewport'larda orantılı biçimde. */
.iletisim-item__icon-wrap {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(50px, 3.75vw, 72px);
	height: clamp(50px, 3.75vw, 72px);
	margin-bottom: clamp(10px, 0.83vw, 16px);
}
/* Pembe gölge dairesi — XD: Ellipse 155/162/163/164, r=20 (çap 40 native,
   2.08vw), dolgu #9e262d @ %10 opaklık (tam --tada-red-soft token değil,
   kendi ham rgba'sı) — merkezi ikonun kendi sınır kutusunun sağ-alt
   köşesine denk geliyor (gps ikonu 76×60 kutusunun sağ-alt köşesi ~72,67 —
   ellipse merkezi tam bu köşede). İkon büyütülünce aynı oranla (~%30)
   büyütüldü ki ikon/gölge oranı XD'dekiyle aynı kalsın. */
.iletisim-item__icon-bg {
	position: absolute;
	right: 0;
	bottom: 0;
	transform: translate(35%, 35%);
	width: clamp(36px, 2.7vw, 52px);
	height: clamp(36px, 2.7vw, 52px);
	border-radius: 50%;
	background: rgba(158, 38, 45, 0.10);
}
.iletisim-item__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
}
.iletisim-item__icon svg,
.iletisim-item__icon img {
	display: block;
	width: 82%;
	height: auto;
	max-height: 82%;
	object-fit: contain;
}
/* Başlık: XD'de #9e262d (--tada-red-active), ExtraBold — Adres/Telefon &
   Fax 22 native (1.15vw), Mail/Tüketici Hattı 24 native (1.25vw); iki
   farklı boyut XD dosyasının kendi metin stilinde de böyle kayıtlı (küçük
   bir tutarsızlık olabilir ama görev kuralı gereği yaklaşık/ortalama
   alınmadan olduğu gibi uygulandı). */
.iletisim-item__title {
	margin: 0 0 8px;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 800;
	font-size: clamp(16px, 1.15vw, 22px);
	line-height: 1.36;
	color: var(--tada-red-active);
}
.iletisim-item--mail .iletisim-item__title,
.iletisim-item--tuketici .iletisim-item__title {
	font-size: clamp(17px, 1.25vw, 24px);
}
/* Değer: XD'de siyah, Montserrat Medium (500) 18 native (0.94vw) lineHeight
   28, ortalı. */
.iletisim-item__value {
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 500;
	font-size: clamp(13px, 0.94vw, 18px);
	line-height: 1.56;
	color: var(--tada-black);
}
.iletisim-item__value a {
	color: inherit;
	text-decoration: none;
	transition: color .2s ease;
}
.iletisim-item__value a:hover,
.iletisim-item__value a:focus-visible {
	color: var(--tada-red-active);
}
.iletisim-item__value-line {
	display: block;
}

/* ============================================================================
 * "İletişim Formu" kartı — büyük beyaz kart, form ortalanmış sınırlı
 * genişlikte. Başlık: XD "İletişim Formu" metni Montserrat ExtraBold
 * Italic 52 native (2.7vw) #9e262d — Kalite sayfasının onaylı aynı
 * tedavisiyle birebir eşleşiyor. Açıklama: Regular 16 native, SİYAH (XD'de
 * gri değil, #000).
 *
 * Dikey ritim (padding/margin) bu bölümde artık XD'nin ham metin
 * koordinatlarını DEĞİL — görev talimatının açık talebi üzerine — daha
 * kompakt, elle sıkılaştırılmış değerleri kullanıyor: XD'den birebir
 * çıkarılan üst dolgu (120 native, "İletişim Formu" başlığının kart
 * üstünden gerçek uzaklığı) uygulandığında kart daha da uzardı, kullanıcı
 * geri bildirimi tam tersini istiyor. Input/textarea/buton BOYUTLARI hâlâ
 * XD'den birebir (bir önceki revizyon notuna bkz.) — yalnızca aralarındaki
 * boşluklar küçültüldü.
 * ==========================================================================*/
.iletisim-form-card {
	box-sizing: border-box;
	padding: clamp(24px, 2.6vw, 50px) clamp(20px, 3vw, 60px) clamp(20px, 2.08vw, 40px);
	background: var(--tada-white);
	border: 1px solid var(--tada-gray-200);
	border-radius: clamp(24px, 2.3vw, 44px);
	text-align: center;
}
.iletisim-form-card__title {
	margin: 0 0 clamp(10px, 1vw, 16px);
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 800;
	font-style: italic;
	font-size: clamp(26px, 2.7vw, 52px);
	line-height: 1.15;
	color: var(--tada-red-active);
}
.iletisim-form-card__description {
	max-width: 640px;
	margin: 0 auto clamp(16px, 1.67vw, 32px);
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 400;
	font-size: clamp(13px, 0.83vw, 16px);
	line-height: 1.5;
	color: var(--tada-black);
}
.iletisim-form-card__description p {
	margin: 0 0 .5em;
}
.iletisim-form-card__description p:last-child {
	margin-bottom: 0;
}

/* Form içerik sütunu: XD'de tam 804 native (41.875vw) genişlik, karta göre
   ortalı (1640 genişlikli kartta sol/sağ dolgu 418 native eşit). */
.iletisim-form__wrap {
	max-width: min(804px, 41.875vw);
	margin: 0 auto;
	text-align: left;
}
.iletisim-form-card .iletisim-empty-state__hint {
	position: static;
	text-align: center;
	background: var(--tada-gray-100);
}

/* Form satır/alan KUTU ÖLÇÜLERİ XD'den birebir: input kutusu (Rectangle 739
   vb.) 387×60 r=30 (TAM PİL/kapsül — 12px sabit radius değil, yükseklik/2);
   Ad/Soyad arası yatay boşluk 30 native (1.5625vw); etiket-input arası 20
   native (1.04vw). Satırlar arası dikey boşluk (field margin-bottom) XD'nin
   kendi 47-native değeri yerine kasıtlı olarak daha sıkı tutuldu — bkz.
   yukarıdaki "Dikey ritim" notu. Mesaj alanı (Rectangle 746) 804×200 r=30.
   Dosya butonu (Rectangle 903) 250×60 r=30. KVKK kutusu (Rectangle 747)
   26×26 r=5. Gönder butonu (Component 11-31 iç
   Rectangle 4) 180×60, kartın 804-genişlikli içerik sütunuyla aynı eksende
   ortalı (buton merkezi x=960, içerik sütunu merkezi de x=960). */
.iletisim-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 clamp(18px, 1.5625vw, 30px);
}
.iletisim-form__field {
	display: flex;
	flex-direction: column;
	gap: clamp(6px, 1.04vw, 20px);
	margin: 0 0 clamp(10px, 1.04vw, 20px);
}
.iletisim-form__field label {
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(13px, 0.94vw, 18px);
	color: var(--tada-black);
}
.iletisim-form__field .wpcf7-form-control-wrap {
	display: block;
}
.iletisim-form__field input[type="text"],
.iletisim-form__field input[type="email"],
.iletisim-form__field input[type="tel"] {
	box-sizing: border-box;
	width: 100%;
	height: clamp(40px, 3.125vw, 60px);
	padding-block: 0;
	padding-inline: 18px;
	line-height: normal;
	background: var(--tada-white);
	border: 1px solid var(--tada-gray-400);
	border-radius: 999px;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 14px;
	color: var(--tada-black);
	transition: border-color .2s ease;
}
.iletisim-form__field textarea {
	box-sizing: border-box;
	width: 100%;
	height: clamp(110px, 10.42vw, 200px);
	padding: 14px 22px;
	background: var(--tada-white);
	border: 1px solid var(--tada-gray-400);
	border-radius: clamp(16px, 1.56vw, 30px);
	font-family: Montserrat, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--tada-black);
	resize: vertical;
	transition: border-color .2s ease;
}
.iletisim-form__field input[type="text"]:focus-visible,
.iletisim-form__field input[type="email"]:focus-visible,
.iletisim-form__field input[type="tel"]:focus-visible,
.iletisim-form__field textarea:focus-visible {
	border-color: var(--tada-red);
}
.iletisim-form__field--message {
	margin-bottom: clamp(12px, 1.15vw, 22px);
}

/* Dosya "Dosya Seç" özel kontrolü — İK formundaki aynı teknik: gerçek
   <input type="file"> tam kutunun üzerinde opacity:0 ile durur, her
   tıklama/klavye/sürükle-bırak etkileşimi doğrudan ona gider; buton +
   durum span'i tamamen dekoratiftir (main.js sadece dosya adını günceller).
   Buton XD'de 250×60 r=30 (pil) — İK formunun auto-width/padding tabanlı
   dar butonundan kasıtlı olarak farklı, bu sayfanın kendi ölçüsü.

   GERÇEK, İŞLEVSEL HATA VE DÜZELTMESİ: Contact Form 7'nin kendi çekirdek
   stil dosyası (wp-content/plugins/contact-form-7/includes/css/styles.css)
   `.wpcf7-form-control-wrap { position: relative; }` kuralını GLOBAL olarak
   uygular — bu span, dosya input'unun DOM'daki asıl ebeveynidir ve bizim
   `.iletisim-form__file-control`'dan (position:relative) DAHA YAKIN bir
   "positioned ancestor" haline gelir. Sonuç: `position:absolute; inset:0`
   verilen input, kendi ait olduğu düşünülen `.iletisim-form__file-control`
   yerine bu boş/içeriksiz `.wpcf7-form-control-wrap` kutusuna göre
   konumlanıyor — o kutu da tek çocuğu (input) akıştan çıkınca 0×0'a
   çöküyor, input da onunla birlikte 0×0 oluyor ve tıklanamaz hale geliyor
   (playwright ile doğrulandı: `getBoundingClientRect()` → width:0,
   height:0). Bu, İnsan Kaynakları formunda da MEVCUT olan, bu görevden önce
   fark edilmemiş site-geneli bir hata — ama görev kapsamı yalnızca bu
   sayfaya izin verdiği için düzeltme SADECE burada, `.iletisim-form__
   file-control` içine scope edilmiş bir override ile yapılıyor; CF7'nin
   kendi global `.wpcf7-form-control-wrap` kuralı veya İK formu hiç
   değiştirilmedi. */
.iletisim-form__field--file {
	margin-bottom: clamp(12px, 1.15vw, 22px);
}
.iletisim-form__file-control {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: clamp(12px, 1.04vw, 20px);
	max-width: 100%;
}
.iletisim-form__file-control .wpcf7-form-control-wrap {
	position: static;
}
.iletisim-form__file-control input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
}
.iletisim-form__file-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: clamp(170px, 13.02vw, 250px);
	height: clamp(40px, 3.125vw, 60px);
	padding: 0 20px;
	background: var(--tada-gray-100);
	border: 1px solid var(--tada-gray-200);
	border-radius: 999px;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: var(--tada-black);
	white-space: nowrap;
	transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}
.iletisim-form__file-status {
	font-family: Montserrat, Arial, sans-serif;
	font-size: 13px;
	color: var(--tada-gray-700);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.iletisim-form__file-control:hover .iletisim-form__file-btn {
	background: var(--tada-red);
	border-color: var(--tada-red);
	color: var(--tada-white);
}
.iletisim-form__file-control:has(input[type="file"]:focus-visible) .iletisim-form__file-btn {
	outline: 3px solid var(--tada-yellow);
	outline-offset: 2px;
}

/* KVKK: kutu 26×26 r=5 native, metin Medium 16 native lineHeight 26, kutu-
   metin arası 14 native (0.73vw). */
.iletisim-form__consent {
	margin: 0 0 clamp(12px, 1.15vw, 22px);
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 500;
	font-size: clamp(13px, 0.83vw, 16px);
	line-height: 1.44;
	color: var(--tada-black);
}
.iletisim-form__consent .wpcf7-list-item {
	margin: 0;
}
.iletisim-form__consent label {
	display: flex;
	align-items: flex-start;
	gap: clamp(8px, 0.73vw, 14px);
	cursor: pointer;
}
.iletisim-form__consent input[type="checkbox"] {
	flex-shrink: 0;
	width: clamp(18px, 1.35vw, 26px);
	height: clamp(18px, 1.35vw, 26px);
	margin-top: 2px;
	border-radius: 5px;
	accent-color: var(--tada-red);
}
.iletisim-form__consent a {
	color: var(--tada-red-active);
	text-decoration: underline;
}
.iletisim-form__consent a:hover,
.iletisim-form__consent a:focus-visible {
	color: #000000;
}

/* Gönder butonu: XD 180×60 native, form içerik sütunuyla aynı eksende
   ortalı (sabit genişlik — İK formunun auto-width dolgu tabanlı
   butonundan farklı, bu sayfanın kendi ölçüsü). */
/* CF7's own wpautop() wraps the bare `[submit]` shortcode in a plain,
   un-classed <p> (nothing else in the form markup wraps it). Two separate
   sources of extra height there, both fixed here: (1) the <p>'s
   browser-default margin (not the submit button's own `margin:0 auto`
   below, which only centers the button horizontally); (2) a trailing
   whitespace text node before `</p>` that, in a normal block-formatting
   context, renders as an anonymous inline line box below the block-level
   submit button — measured via Playwright as ~31px of real, visible extra
   height with margin already at 0. Making the <p> itself a flex container
   makes that stray whitespace collapse away per the flex-layout spec
   ("white space... is collapsed away"), which a plain `line-height:0`
   hack would not reliably do across engines. Reset scoped to this page's
   form only. */
.iletisim-form__wrap p:has(.wpcf7-submit) {
	display: flex;
	margin: 0;
}
.iletisim-form__wrap .wpcf7-submit {
	display: flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	width: clamp(140px, 9.375vw, 180px);
	height: clamp(46px, 3.125vw, 60px);
	margin: 0 auto;
	padding: 0 20px;
	background: var(--tada-red-active);
	border: 1.5px solid var(--tada-red-active);
	border-radius: 999px;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: var(--tada-white);
	cursor: pointer;
	transition: background-color .22s ease, border-color .22s ease;
}
.iletisim-form__wrap .wpcf7-submit:hover,
.iletisim-form__wrap .wpcf7-submit:focus-visible {
	background: #000000;
	border-color: #000000;
}
.iletisim-form__wrap .wpcf7-spinner {
	margin-left: 10px;
}
.iletisim-form__field .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 12px;
	color: var(--tada-red);
}
.iletisim-form__wrap .wpcf7-response-output {
	box-sizing: border-box;
	margin: clamp(16px, 1.6vw, 20px) 0 0;
	padding: 14px 18px;
	border-radius: 12px;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
}
.iletisim-form__wrap form.sent .wpcf7-response-output {
	border-color: #2e7d32;
	color: #2e7d32;
	background: #eef7ee;
}
.iletisim-form__wrap form.invalid .wpcf7-response-output,
.iletisim-form__wrap form.failed .wpcf7-response-output,
.iletisim-form__wrap form.spam .wpcf7-response-output,
.iletisim-form__wrap form.aborted .wpcf7-response-output,
.iletisim-form__wrap form.payment-required .wpcf7-response-output {
	border-color: var(--tada-red);
	color: var(--tada-red);
	background: var(--tada-red-soft);
}

/* ============================================================================
 * Scroll reveal — üst iki kartın sırası (Faz 4).
 *
 * Sayfada dört reveal hedefi var, hepsi sakin fade-up: H1 (0ms) ve breadcrumb
 * (80ms) attribute'tan gelir (page-iletisim.php, diğer kurumsal sayfalarla
 * birebir aynı), harita/bilgi kartı gecikmeleri BURADAN gelir, form kartı ise
 * hiç gecikme almaz (viewport'a girdiği anda 0ms).
 *
 * Gecikmeler neden CSS'te: harita ile bilgi kartı arasındaki fark, üst
 * panelin o genişlikte kaç kolon render ettiğine bağlı. `--tada-anim-delay`
 * zaten main.css'teki ortak keyframe'in okuduğu değişken; data-animate-delay
 * attribute'u kullanılsaydı main.js onu inline style olarak yazar ve
 * breakpoint'e göre değiştirmek imkânsız olurdu. Ölçülen kolon sayısı
 * (.iletisim-bilgi grid-template-columns, canlı sayfadan):
 *   1440 -> 2 kolon (harita x=104.5 / kart x=740)  -> 160ms / 260ms (+100ms)
 *   820  -> 1 kolon (ikisi de x=24, alt alta)      -> 160ms / 240ms (+80ms)
 *   390  -> 1 kolon (ikisi de x=16, alt alta)      -> 160ms / 240ms (+80ms)
 * Tek kolonda kartlar alt alta olduğu için offset zaten doğal olarak scroll
 * ile ayrışıyor; +80ms yalnızca ikisi aynı ekranda göründüğünde sırayı
 * belli ediyor. İki kolonlu masaüstünde ise fark 100ms — kartlar yan yana
 * geldiği için tek algılanabilir sıralama ipucu bu.
 *
 * Harita kartı tek parça açılıyor: iframe'e, harita görseline veya "Haritayı
 * görüntülemek için dokunun" düğmesine ayrı animasyon YOK, zoom/parallax YOK
 * — kartın kendisi bittiğinde (.is-anim-done) transform tamamen kalkıyor, bu
 * yüzden Google Maps'in kendi tıklama/sürükleme/zoom davranışı hiç
 * etkilenmiyor. Bilgi kartı da aynı şekilde tek parça: ikonlar, başlık,
 * açıklama ve Adres/Telefon/Mail/Tüketici satırları kendi başlarına
 * kıpırdamıyor.
 * ==========================================================================*/
.tada-anim .iletisim-map { --tada-anim-delay: 160ms; }
.tada-anim .iletisim-card { --tada-anim-delay: 240ms; }

@media (min-width: 1101px) {
	.tada-anim .iletisim-card { --tada-anim-delay: 260ms; }
}

/* ============================================================================
 * Responsive. Proje gerçek breakpoint seti: 767 / 1100 / 1600 / 1601+.
 * ==========================================================================*/
@media (max-width: 1100px) {
	.iletisim-bilgi {
		grid-template-columns: 1fr;
	}
	/* Masaüstündeki `min-height: 320px` (iki kart yan yanayken haritanın
	   hiç çökmemesi için bir taban değerdi) burada override edilmezse,
	   dar genişliklerde 16:9'un ürettiği gerçek yükseklik (ör. 390px
	   genişlikte ~220px) bu taban değerin altında kalıp yok sayılıyor ve
	   harita masaüstüne yakın, gereğinden uzun kalıyordu — asıl hata
	   buydu. Tek kolon düzeninde harita, iletişim kartıyla satır
	   paylaşmadığı için eşit-yükseklik kaygısı da yok; `min-height:0` ile
	   `aspect-ratio` tek başına, beklendiği gibi genişlikten yüksekliği
	   hesaplıyor. */
	.iletisim-map {
		height: auto;
		min-height: 0;
		aspect-ratio: 16 / 9;
	}
	.iletisim-form__wrap {
		max-width: min(804px, 68vw);
	}
}

/* 767px ve altı: XD'nin mobil artboard'ları masaüstünün aynı 16:9 oranını
   değil, biraz daha kısa/yatay bir kadraj kullanıyor — 16:10, 390/375
   genişliklerde ~220-235px arası dengeli bir yüksekliğe denk geliyor. */
@media (max-width: 767px) {
	.iletisim-map {
		aspect-ratio: 16 / 10;
	}
}

@media (max-width: 767px) {
	.iletisim-panels {
		gap: 28px;
	}
	.iletisim-card {
		padding: 28px 22px;
	}
	.iletisim-items {
		grid-template-columns: 1fr 1fr;
		gap: 26px 16px;
	}
	.iletisim-form-card {
		padding: 28px 20px;
	}
	.iletisim-form__wrap {
		max-width: 100%;
	}
	.iletisim-form__row {
		grid-template-columns: 1fr;
	}
	.iletisim-form__file-btn {
		width: auto;
		padding: 0 24px;
	}
}

@media (max-width: 400px) {
	.iletisim-items {
		grid-template-columns: 1fr;
	}
}