/**
 * Axtea — İLETİŞİM BÖLÜMÜ (harita + form)
 * Ortak parça: php/iletisim-bolumu.php · main.css'e DOKUNULMUYOR.
 */

/* --- Bölüm zemini ----------------------------------------------------------
 * Tema `.tj-contact-section`a `var(--tj-color-theme-dark)` veriyor ve içindeki
 * başlığı/etiketleri BEYAZ yapıyor — yani burayı KOYU tasarlamış. Tayfun o
 * değişkeni açık griye (#dbdbdf) çevirdiği için bölüm solmuş, beyaz metinler
 * kontrast 1.0 ile görünmez olmuştu (ölçüldü). Sitenin yerleşik koyusu #17282d.
 * ⚠️ `.contact-form` kartı `rgba(255,255,255,.1)` — kendi rengi yok, zeminin
 *    üstüne %10 beyaz biniyor; dolayısıyla zemin değişince kart da düzeliyor. */
.axtea-iletisim.tj-contact-section {
  background-color: #17282d;
}

/* ===========================================================================
 * 📍 PİN KONUMLARI — OYNATMAK İSTERSENİZ TEK YER BURASI
 * ---------------------------------------------------------------------------
 * `top` = haritanın üstünden yüzde, `inset-inline-start` = solundan yüzde.
 * Şablonun 3 pini (loc-1/2/3) silindi; Axtea'nın 2 ofisi var.
 * Değerler göz kararı DEĞİL: map.svg'nin noktaları kıtalara ayrıştırılıp
 * ölçek çözüldü →  x% = 48,48 + 0,2652 × boylam
 * (doğrulama: -180° → %0,7 ve +180° → %96,2, yani haritanın tam eni.)
 * Enlem doğrusal değil (kutuplara doğru sıkışıyor); 30-45° kuşağı için
 * y% = 31,6 - (enlem - 32) × 0,5051 kullanıldı.
 *   Bursa      40,19°K / 29,06°D → %56,0 / %27,5
 *   Charlotte  35,23°K / 80,84°B → %27,0 / %30,0
 * NOT: harita stilize; nokta aralığı ~3,4° ve Akdeniz/Karadeniz ÇİZİLMEMİŞ.
 * ±1% oynatma sayfada ~6px eder.
 * =========================================================================== */
.location-indicator.loc-tr {   /* Bursa / Türkiye */
  top: 27.5%;
  inset-inline-start: 56%;
}

.location-indicator.loc-us {   /* Charlotte NC / ABD */
  top: 30%;
  inset-inline-start: 27%;
}

/* ⚠️ Balon yönleri: harita 1167px ve col-lg-6'dan TAŞIYOR, sağ yarısı form
 * kartının ALTINA giriyor. Tema balonu pine göre ORTALIYOR; TR balonu böyle
 * bırakılınca kartın altında 26px kalıyordu (ölçüldü). Bu yüzden:
 *   ABD pini → balon SAĞA açılır (solda harita kenarı var)
 *   TR  pini → balon SOLA açılır (sağda form kartı var) */
.axtea-iletisim .loc-us .location-tooltip {
  inset-inline-start: 0;
  transform: none;
}

.axtea-iletisim .loc-us .location-tooltip::after {
  inset-inline-start: 12px;
  transform: rotate(45deg);
}

.axtea-iletisim .loc-tr .location-tooltip {
  inset-inline-start: auto;
  inset-inline-end: 0;
  transform: none;
}

.axtea-iletisim .loc-tr .location-tooltip::after {
  inset-inline-start: auto;
  inset-inline-end: 12px;
  transform: rotate(45deg);
}

/* Unvan satırı balonda öne çıksın */
.axtea-iletisim .location-tooltip p strong {
  display: inline-block;
  margin-bottom: 2px;
  font-weight: var(--tj-fw-sbold);
  color: var(--tj-color-common-white);
}

.axtea-iletisim .location-tooltip {
  width: 250px;
  line-height: 1.45;
}

/* --- Form -----------------------------------------------------------------
 * Tema alanlarda yalnız `placeholder` kullanıyordu; ekran okuyucu için
 * görsel olarak gizli `<label>` eklendi (placeholder etiket YERİNE GEÇMEZ). */
.gorsel-gizli {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* KVKK onayı */
.iletisim-onay {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 26px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tj-color-common-white);
}

.iletisim-onay input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 3px;
  accent-color: var(--tj-color-theme-primary);
  cursor: pointer;
}

.iletisim-onay a {
  color: var(--tj-color-common-white);
  text-decoration: underline;
}

.iletisim-onay a:hover {
  color: var(--tj-color-theme-primary);
}

/* Hatalı alan işareti (JS `aria-invalid` basar) */
.axtea-iletisim [aria-invalid="true"],
.axtea-iletisim [aria-invalid="true"] + .nice-select {
  border-color: #ff6b6b !important;
}

/* Gönderim sonucu satırı */
.iletisim-durum {
  margin: 0;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 15px;
}

.iletisim-durum[data-durum="hata"] {
  background-color: rgba(255, 107, 107, 0.15);
  color: #ffd5d5;
}

.iletisim-durum[data-durum="basarili"] {
  background-color: rgba(109, 113, 217, 0.25);
  color: var(--tj-color-common-white);
}

@media only screen and (max-width: 991px) {
  /* Harita mobilde küçülüyor; balonlar taşmasın diye pinler içeri alınıyor */
  .location-indicator.loc-tr {
    inset-inline-start: 54%;
  }
  .location-indicator.loc-us {
    inset-inline-start: 30%;
  }
  .axtea-iletisim .location-tooltip {
    width: 210px;
  }
}

/* ===========================================================================
 * İLETİŞİM SAYFASI (iletisim.php — tema `contact.html`)
 * =========================================================================== */
body:has(.iletisim-kartlar) {
  background-color: #eceefa;
}

/* Bilgi kartları aynı boyda dursun (adres uzunlukları farklı) */
.iletisim-kartlar .contact-item.style-2 {
  height: 100%;
}

/* ⚠️ Unvan `<strong>` satır içiydi, adrese YAPIŞIYORDU
 * ("…LTD. ŞTİ.Büyükbalıklı Mah…"). Kendi satırına alındı. */
.iletisim-unvan {
  display: block;
  margin-bottom: 6px;
  font-weight: var(--tj-fw-sbold);
  color: var(--tj-color-heading-primary);
}

/* Form + harita eşit yükseklikte olsun */
.axtea-iletisim-sayfa .row {
  align-items: stretch;
}

.axtea-iletisim-sayfa .contact-form,
.axtea-iletisim-sayfa .map-area {
  height: 100%;
}

.axtea-iletisim-sayfa .contact-form {
  padding: 40px;
  border-radius: 12px;
  background-color: #ffffff;
}

.axtea-iletisim-sayfa .contact-form > .title {
  margin-bottom: 28px;
  font-size: 26px;
  line-height: 1.35;
}

/* ⚠️ Bu sayfada form BEYAZ kart üzerinde; `php/iletisim-formu.php` ortak parça
 * ve hizmetler.php'de KOYU zeminde duruyor — oradaki beyaz metinler burada
 * görünmez olurdu. Bu yüzden yalnız bu sayfada koyu metne çevriliyor. */
.axtea-iletisim-sayfa .iletisim-onay,
.axtea-iletisim-sayfa .iletisim-onay a {
  color: var(--tj-color-text-body-3);
}

.axtea-iletisim-sayfa .iletisim-onay a:hover {
  color: var(--tj-color-theme-primary);
}

.axtea-iletisim-sayfa .iletisim-durum[data-durum="basarili"] {
  background-color: rgba(109, 113, 217, 0.12);
  color: var(--tj-color-heading-primary);
}

.axtea-iletisim-sayfa .iletisim-durum[data-durum="hata"] {
  background-color: rgba(255, 107, 107, 0.12);
  color: #a33;
}

@media only screen and (max-width: 767px) {
  .axtea-iletisim-sayfa .contact-form {
    padding: 26px;
  }
}