/* İletişim sayfası — style.css'in üzerine yalnızca iletisim.html'de yüklenen ekler (önek: ilt-).
   Sayfa sitenin diğer sayfalarıyla aynı parçalardan kurulur: koyu giriş bandı ve değer şeridi (Hakkımızda),
   bölüm etiketi + ölçü çizgili başlık (tüm sayfalar), ikonlu sade iletişim listesi (SSS "Sorunuz burada yok mu?"),
   teklif penceresinin koyu yan paneli ve formu, konum bölümü (ana sayfa "Fabrikamız" düzeni, alt bilginin haritası).
   Düzen: giriş (iki eylem, üç değer) · doğrudan ulaşın (solda başlık, sağda telefon, WhatsApp ve e-posta listesi)
   · teklif formu (yan panelde talepten sonrası ve üç güvence) · konum (davet, adres, yol tarifi, harita). Sayfada alt bilgi yok.
   style.css 24. maddedeki eski .il- kuralları kaldırıldı; bu sayfanın kuralları yalnız bu dosyadadır. */

/* Sayfaya özgü renk: "kopyalandı" onayının yeşili. Diğer her renk style.css'teki tokenlardan gelir. */
main.ilt-sayfa {
  --ilt-yesil: #178044;
  --ilt-yesil-koyu: #126A38;
}

/* ---------- 1. Giriş ---------- */
.ilt-kapak .giris-dugmeler { margin-top: 6px; }
.ilt-kapak .giris-sayilar { margin-top: 18px; }

/* Telefon düğmesi: numara düğmenin üzerinde yazar (LFAM kapağındaki düğmeyle aynı) */
.ilt-tel { gap: 10px; font-family: var(--yazi-mono); font-weight: 500; letter-spacing: 0.02em; text-transform: none; white-space: nowrap; }
.ilt-tel svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* "e-postanıza" gibi sözcükler kısa çizgiden bölünmez */
.ilt-tek { white-space: nowrap; }

/* ---------- 2. Doğrudan ulaşın: solda başlık, sağda üç kanal ----------
   Sade liste: mavi çizgi ikon, değer (bağlantı) ve altında kısa açıklama; düğme yok, kutu yok.
   Değer gövde yazısıyla 21 px. Daha önce denenip reddedilenler: gri kutularda mono yazılı kartlar ("eskiz"),
   60 px renkli değerler ve mavi/yeşil/turuncu dolu düğmeler ("çok büyük, yapay zekâ gibi"). */
.ilt-ulas { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; grid-template-areas: "ust liste" "sosyal liste"; align-items: start; column-gap: clamp(28px, 5vw, 80px); row-gap: 14px; }
.ilt-ulas > .tek-ust { grid-area: ust; }
.ilt-kanallar { grid-area: liste; list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--murekkep); }
.ilt-kanallar > li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 16px; padding-block: 18px; border-bottom: 1px solid var(--cizgi); }
.ilt-ikon { width: 22px; height: 22px; margin-top: 7px; color: var(--vurgu); }
.ilt-kanal { min-width: 0; }
.ilt-deger-satir { position: relative; width: fit-content; max-width: 100%; min-height: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.ilt-deger { min-width: 0; font-size: 21px; font-weight: 600; line-height: 1.3; white-space: nowrap; color: var(--murekkep); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.ilt-deger:hover { color: var(--mavi-koyu); text-decoration: underline; text-underline-offset: 4px; }
.ilt-deger svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--vurgu); }
.ilt-kanal p { margin: 2px 0 0; max-width: 56ch; font-size: 15px; line-height: 1.6; color: var(--ikincil); text-wrap: pretty; }

/* Değerin yanındaki kopyala düğmesi: sessiz gri ikon; kopyalanınca yeşil onay işaretine döner */
.ilt-kopya-ikon { flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--soluk); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.ilt-kopya-ikon svg { width: 18px; height: 18px; }
.ilt-kopya-ikon .i-tamam { display: none; }
.ilt-kopya-ikon:hover { background: var(--ust-zemin); color: var(--murekkep); }
.ilt-kopya-ikon.kopyalandi { background: none; color: var(--ilt-yesil); }
.ilt-kopya-ikon.kopyalandi .i-kopya { display: none; }
.ilt-kopya-ikon.kopyalandi .i-tamam { display: block; }
/* Kopyalama sonucu: düğmenin sağında kısa süre görünen bilgi (ana sayfadaki "Bize ulaşın" kartındaki gibi).
   Pano kullanılamazsa değer seçilir ve bunu söyleyen yazı burada görünür. Telefonda sağda yer olmadığı için düğmenin üstüne çıkar. */
.ilt-bilgi { position: absolute; left: calc(100% + 8px); top: 50%; padding: 5px 10px; border-radius: 6px; background: var(--murekkep); color: var(--beyaz); font-size: 13px; font-weight: 600; line-height: 1.35; white-space: nowrap; opacity: 0; transform: translate(-4px, -50%); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; }
.ilt-bilgi.goster { opacity: 1; transform: translate(0, -50%); }

.ilt-sosyal { grid-area: sosyal; margin: 0; font-size: 15px; color: var(--ikincil); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.ilt-sosyal a { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--murekkep); text-decoration: none; }
.ilt-sosyal a svg { width: 15px; height: 15px; color: var(--vurgu); }
.ilt-sosyal a:hover { color: var(--mavi-koyu); text-decoration: underline; text-underline-offset: 4px; }

/* Düğme satırı (tesis bölümü) */
.ilt-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 8px; }

/* Yazılı kopyala düğmesi (adres): sessiz yazı düğmesi */
.ilt-kopya { min-height: 44px; padding: 0; border: 0; border-radius: 6px; background: none; font-family: var(--yazi-govde); font-size: 14.5px; font-weight: 600; color: var(--murekkep); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.ilt-kopya svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--vurgu); }
.ilt-kopya:hover { color: var(--mavi-koyu); text-decoration: underline; text-underline-offset: 4px; }
.ilt-kopya.kopyalandi { color: var(--ilt-yesil-koyu); }
.ilt-kopya.kopyalandi svg { color: var(--ilt-yesil-koyu); }

/* ---------- 3. Teklif formu: teklif penceresinin sayfaya yerleşmiş hâli ---------- */
.ilt-form-kart { border: 1px solid var(--cizgi); border-radius: 12px; overflow: hidden; background: var(--zemin); box-shadow: 0 1px 2px var(--golge-ince), 0 28px 56px -32px var(--golge-guclu); }
.ilt-form-kart.teklif-ic { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); min-height: 0; }
.ilt-form-kart .teklif-sol { padding: 36px 32px 32px; gap: 22px; background-color: var(--lacivert); }
.ilt-form-kart .teklif-form,
.ilt-form-kart .teklif-sonuc { padding: 36px clamp(22px, 3vw, 40px) 32px; }

.ilt-panel-baslik { margin: 0; font-family: var(--yazi-baslik); font-size: clamp(28px, 2.8vw, 34px); font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; color: var(--beyaz); }

/* Talepten sonraki üç adım: pencere sonucundaki adım listesinin koyu zemindeki hâli */
.ilt-sonra { list-style: none; counter-reset: ilt-adim; margin: 0; padding: 0; display: grid; gap: 26px; }
.ilt-sonra li { counter-increment: ilt-adim; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; font-size: 15.5px; line-height: 1.5; color: var(--giris-yazi); }
.ilt-sonra li::before { content: counter(ilt-adim); width: 36px; height: 36px; border-radius: 50%; background: var(--vurgu); color: var(--beyaz); display: inline-flex; align-items: center; justify-content: center; font-family: var(--yazi-baslik); font-size: 21px; font-weight: 600; line-height: 1; }
.ilt-sonra strong { display: block; font-size: 17px; font-weight: 600; color: var(--beyaz); }
/* Güvenceler panelin alt kenarına oturur */
.ilt-form-kart .teklif-guvence { margin-top: auto; padding-top: 22px; gap: 14px; }
.ilt-form-kart .teklif-guvence li { font-size: 14.5px; }

/* Dosya alanı style.css'teki ortak görünümü kullanır (düz zemin, kesik çizgi, sade ikon); teklif penceresiyle aynıdır.
   Açık mavi kutu + yuvarlak ok denendi; kullanıcının reddettiği kalıba benzediği için kaldırıldı. */
.ilt-form-kart .girdi { border-color: var(--cizgi-guclu); border-radius: 6px; }
.ilt-form-kart .teklif-gonder { min-height: 52px; font-size: 14.5px; }

/* Gönderim sonrası: tek talimat. Sonraki adımlar yan panelde durduğu için burada yinelenmez */
.ilt-sonuc-metin { margin: 0; max-width: 56ch; font-size: 15.5px; line-height: 1.6; color: var(--ikincil); }
.ilt-sonuc-metin strong { display: block; margin-bottom: 2px; font-size: 17px; font-weight: 600; color: var(--murekkep); }

.ilt-sss { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ikincil); }
.ilt-sss a { color: var(--mavi-koyu); font-weight: 600; text-underline-offset: 3px; }

/* ---------- 4. Konum: solda davet, adres ve yol tarifi, sağda harita ---------- */
.fabrika.ilt-tesis { background: var(--zemin); border-top: 1px solid var(--cizgi); }
.ilt-tesis .fabrika-ic { padding-block: clamp(48px, 6.5vw, 88px); }
.ilt-kunye { margin: 4px 0 0; width: 100%; border-top: 1px solid var(--cizgi); }
.ilt-kunye div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding-block: 13px; border-bottom: 1px solid var(--cizgi); }
.ilt-kunye dt { font-size: 14px; line-height: 1.5; color: var(--soluk); }
.ilt-kunye dd { margin: 0; font-size: 15.5px; font-weight: 500; line-height: 1.5; color: var(--murekkep); }
.ilt-kunye address { font-style: normal; }
.ilt-kunye a { color: var(--mavi-koyu); font-weight: 600; text-underline-offset: 3px; }
.ilt-tesis .ilt-eylem { margin-top: 6px; }
/* Harita: alt bilgideki harita bileşeni (harita.js) bu sayfada kutunun içinde; tesis kutunun ortasında */
.ilt-harita-kap { min-width: 0; display: grid; gap: 8px; align-content: start; }
.ilt-harita { position: relative; min-height: 460px; height: 100%; border-radius: 10px; overflow: hidden; background: #0F1722; }
.ilt-harita .harita-ekran { --isaret-x: 0.5; --isaret-y: 0.56; }
.ilt-harita-kaynak { margin: 0; font-size: 12.5px; color: var(--soluk); }
.ilt-harita-kaynak a { color: inherit; }
.ilt-yol { gap: 9px; }
.ilt-yol svg { width: 17px; height: 17px; flex: 0 0 auto; }

/* ---------- Dar ekranlar ---------- */
@media (max-width: 899px) {
  .ilt-harita { min-height: 340px; height: 340px; }
  /* Doğrudan ulaşın: tek sütun; sosyal medya satırı listenin altına iner */
  .ilt-ulas { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "ust" "liste" "sosyal"; row-gap: clamp(20px, 3vw, 28px); }
  .ilt-form-kart.teklif-ic { grid-template-columns: minmax(0, 1fr); }
  /* Tek sütunda önce form, altında koyu panel */
  .ilt-form-kart .teklif-sol { order: 2; }
  .ilt-form-kart .teklif-guvence { margin-top: 4px; }
}
@media (max-width: 759px) {
  /* Dokunma hedefi 40 px */
  .ilt-deger-satir { min-height: 40px; }
  .ilt-kopya-ikon { width: 40px; height: 40px; }
  .ilt-ikon { margin-top: 9px; }
}
@media (max-width: 719px) {
  .ilt-form-kart .teklif-sol { padding: 28px 20px 26px; }
  .ilt-form-kart .teklif-form { padding: 24px 20px 24px; }
  .ilt-form-kart .teklif-sonuc { padding: 28px 20px 24px; }
  /* Telefonda güvencelerin açıklaması da görünür kalır (pencerede gizlenir) */
  .ilt-form-kart .teklif-guvence .g-ac { display: inline; }
}
@media (max-width: 559px) {
  .ilt-tel { width: 100%; justify-content: center; }
  .ilt-kapak .giris-dugmeler .dugme-vurgu { width: 100%; }
  .ilt-kunye div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ilt-tesis .ilt-yol { flex: 1 1 100%; }
}
@media (max-width: 479px) {
  .ilt-bilgi { left: auto; right: 0; top: auto; bottom: calc(100% + 4px); transform: translateY(4px); }
  .ilt-bilgi.goster { transform: none; }
}
@media (max-width: 359px) {
  /* E-posta adresi ve kopyala düğmesi tek satırda kalsın */
  .ilt-kanallar > li { gap: 12px; }
  .ilt-deger { font-size: 19px; }
}
@media (max-width: 319px) {
  /* Çok dar ekranda (katlanır telefonların ön ekranı) kopyala düğmesi sığmaz; değer zaten dokununca arar ya da yazar */
  .ilt-kopya-ikon { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ilt-kopya-ikon, .ilt-bilgi { transition: none; }
}
@media print {
  .ilt-eylem, .ilt-form-kart, .ilt-kopya-ikon, .ilt-bilgi { display: none !important; }
}