/**
 * 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: 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;
}

/* ===========================================================================
 * HARİTA + FORM TEK EKRAN (30 Eyl 2026, patron: "bu alan tek ekrana sığsın, form
 * sağda kalsın, harita daha şık ve solda")
 * ---------------------------------------------------------------------------
 * ESKİ: tema haritası 1167px sabit genişlikteydi, sütunundan taşıp formun altına
 * giriyordu; bölüm her ekranda 941px'ti (yalnız 1920×1080'e sığıyordu).
 * YENİ: harita sütununa sığar (oran 1167:638), noktalar marka moruna geçişli ve
 * kenarları yumuşakça söner, iki ofis kesikli akan bir yayla bağlanır, pin
 * etiketleri hep görünür. Boşluklar ekran YÜKSEKLİĞİNE göre ölçeklenir (vh).
 * Üst boşluk ≥ sabit menü yüksekliği: bölüm ekrana oturtulunca menü formu örtmez.
 * Ölçüm: 1920×1080 … 1280×720, 1024×768, 768×1024 → bölüm ≤ ekran yüksekliği.
 * Telefonda harita + form tek ekrana sığamaz; orada FORM tek başına ekrana sığar.
 * =========================================================================== */
.axtea-iletisim.section-gap {
  padding-top: clamp(96px, 14vh, 130px);
  padding-bottom: clamp(24px, 5vh, 70px);
}

.axtea-harita {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  aspect-ratio: 1167 / 638;
}

/* Geniş ekranda harita sola doğru büyür (formla çakışmaz; sol taraf boştu) */
@media only screen and (min-width: 1200px) {
  .axtea-harita {
    width: 110%;
    max-width: none;
    margin-inline-start: -8%;
  }
}

/* Yumuşak mor ışıma (iki ofisin arası) */
.axtea-harita::before {
  content: "";
  position: absolute;
  top: 5%;
  left: 22%;
  width: 45%;
  height: 55%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(109, 113, 217, 0.28), transparent);
  filter: blur(10px);
  pointer-events: none;
}

.axtea-harita-noktalar {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(169, 172, 243, 0.75) 0%, rgba(109, 113, 217, 0.55) 45%, rgba(30, 138, 138, 0.5) 100%);
  -webkit-mask-image: url("../images/bg/map.svg"), radial-gradient(ellipse 72% 78% at 48% 45%, #000 45%, transparent 100%);
          mask-image: url("../images/bg/map.svg"), radial-gradient(ellipse 72% 78% at 48% 45%, #000 45%, transparent 100%);
  -webkit-mask-size: 100% 100%, 100% 100%;
          mask-size: 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

.axtea-harita-hat {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.axtea-harita-hat path {
  fill: none;
  stroke: #a9acf3;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 3 7;
  vector-effect: non-scaling-stroke;
  opacity: 0.85;
  animation: axtea-hat-ak 1.8s linear infinite;
}

@keyframes axtea-hat-ak {
  to { stroke-dashoffset: -20; }
}

/* Pinler: koordinat pinin MERKEZİ (eskiden sol üst köşesiydi) */
.axtea-harita .location-indicator {
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(109, 113, 217, 0.55), 0 0 22px 6px rgba(109, 113, 217, 0.55);
  z-index: 3;
}

.axtea-harita .location-indicator::after {
  background: rgba(169, 172, 243, 0.45);
}

.axtea-harita .location-indicator:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 6px;
}

.axtea-harita .location-indicator:focus-within .location-tooltip {
  opacity: 1;
  visibility: visible;
  margin-bottom: 42px;
}

.axtea-harita .location-indicator:hover,
.axtea-harita .location-indicator:focus-within {
  z-index: 5;
}

.axtea-pin-etiket {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(23, 40, 45, 0.7);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 12px;
  font-weight: var(--tj-fw-medium);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.axtea-pin-etiket b {
  color: #a9acf3;
  font-weight: var(--tj-fw-sbold);
  letter-spacing: 0.04em;
}

/* Form: ekran yüksekliğine göre sıkılaşır */
.axtea-iletisim .contact-form.style-2 {
  margin-inline-start: auto;
  padding: clamp(26px, 4.6vh, 50px) clamp(22px, 3vw, 50px);
}

.axtea-iletisim .sec-heading {
  margin-bottom: clamp(14px, 3vh, 35px);
}

.axtea-iletisim .sec-heading .sub-title {
  margin-bottom: clamp(10px, 1.8vh, 20px);
}

.axtea-iletisim .sec-heading .sec-title {
  font-size: clamp(34px, min(6.4vh, 4.2vw), 60px);
}

.axtea-iletisim .contact-form.style-2 .form-input {
  margin-bottom: clamp(10px, 2.2vh, 27px);
}

.axtea-iletisim .contact-form.style-2 .form-input textarea {
  height: clamp(70px, 11vh, 140px);
}

.axtea-iletisim .iletisim-onay {
  margin-bottom: clamp(14px, 2.4vh, 26px);
  font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .axtea-harita-hat path {
    animation: none;
  }
}

/* Tablet ve telefon: harita formun ÜSTÜNDE, kısa bir bant */
@media only screen and (max-width: 991px) {
  .axtea-iletisim.section-gap {
    padding-top: 96px;
    padding-bottom: 32px;
  }
  .axtea-harita {
    max-width: 440px;
    margin-bottom: 24px;
  }
  .axtea-iletisim .location-tooltip {
    width: 200px;
  }
  .axtea-iletisim .contact-form.style-2 .form-input.message-input {
    margin-top: 0;
  }
}

@media only screen and (max-width: 575px) {
  .axtea-harita {
    margin-bottom: 30px;
  }
  .axtea-pin-etiket {
    font-size: 11px;
    padding: 4px 9px;
    top: calc(100% + 9px);
  }
  .axtea-iletisim .location-tooltip {
    width: 180px;
    font-size: 13px;
  }
}

/* --- 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);
}

/* ===========================================================================
 * İ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%;
}

/* Harita kartı (iletişim sayfası, sağ üst): firma adı, adres, yol tarifi */
.axtea-iletisim-sayfa .map-area {
  position: relative;
}
.harita-kart {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 12px;
  /* Google'ın kendi firma kartı sol üstte (~270px); ikisi yan yana sığsın */
  width: min(270px, calc(100% - 300px));
  min-width: 230px;
  padding: 14px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(23, 40, 45, 0.18);
}
.harita-kart-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tj-color-theme-bg);
}
.harita-kart-ikon .ax-hizmet-ikon {
  width: 56%;
  height: 56%;
  color: var(--tj-color-theme-primary);
  overflow: visible;
}
.harita-kart-metin strong {
  display: block;
  color: var(--tj-color-heading-primary);
  font-size: 16px;
  line-height: 1.3;
}
.harita-kart-metin span {
  display: block;
  margin-top: 4px;
  color: var(--tj-color-text-body);
  font-size: 13px;
  line-height: 1.45;
}
.harita-kart-dugmeler {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.harita-kart-tarif {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 30px;
  background: var(--tj-color-theme-primary);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.25s ease;
}
.harita-kart-tarif:hover,
.harita-kart-tarif:focus-visible {
  background: #17282d;
  color: #ffffff;
}
.harita-kart-ac {
  color: var(--tj-color-theme-primary);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Tablet/telefon: masaüstündeki `height: 100%` (form sütunuyla eşit boy) burada
 * sütun yüksekliği olmadığı için haritayı ~170px'e çökertiyordu; Google'ın kartı
 * ile yol tarifi kartı üst üste biniyordu (30 Eyl tablet denetimi). */
@media only screen and (max-width: 991px) {
  .axtea-iletisim-sayfa .map-area {
    height: 440px;
    margin-bottom: 40px;   /* footer'a yapışıyordu */
  }
  .axtea-iletisim-sayfa .map-area iframe {
    height: 100%;
    min-height: 0;
  }
}
@media only screen and (max-width: 575px) {
  .axtea-iletisim-sayfa .map-area {
    height: 420px;
  }
  .harita-kart {
    top: auto;
    bottom: 10px;
    right: 10px;
    width: calc(100% - 20px);
    padding: 12px;
  }
}

.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;
  }
}