/* İletişim stilleri bölümü başlangıcı — SADECE bu sayfaya özel sınıflar.
   .shell/.button/renkler gibi ortak taban zaten navbar-yeni.css'te yükleniyor;
   .section/.breadcrumb/.page-hero hakkimizda-yeni.css'tekiyle aynı ama bu sayfada
   o dosya yüklenmediği için (her -yeni.css kendi sayfasına özel, bilinçli olarak)
   burada bağımsız kopyalandı. body/html sıfırlaması BİLEREK yok (footer-yeni.css'teki
   "direction: rtl" bug'ı buna örnek). */

.section {
  padding: 44px 0;
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 8px;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.85rem;
}
.breadcrumb a {
  color: var(--teal);
  font-weight: 700;
  transition: color 0.2s ease;
}
.breadcrumb a:hover {
  color: var(--teal-dark);
}
.page-hero {
  padding: 12px 0 8px;
  text-align: center;
}
.page-hero h1 {
  position: relative;
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
}
.page-hero h1::after {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  margin: 12px auto 0;
  border-radius: 2px;
  background: var(--gold);
}

/* İletişim ana bölümü başlangıcı */
.contact-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 28px;
  margin-top: 34px;
  align-items: stretch;
}
/* İletişim ana bölümü bitişi */

/* İletişim formu bölümü başlangıcı */
.contact-form-panel {
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.contact-form-panel h2 {
  margin: 0 0 22px;
  font-size: 1.2rem;
}
.contact-form {
  display: grid;
  gap: 16px;
}
.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact-field {
  display: block;
  min-width: 0;
}
.contact-field > span:first-child {
  display: block;
  margin-bottom: 7px;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
}
.contact-field > span:first-child em {
  color: var(--gold);
  font-style: normal;
}
.contact-field > input,
.contact-field > textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 0.86rem;
  outline: none;
  overflow-wrap: break-word;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.contact-field > input:focus,
.contact-field > textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(8, 127, 122, 0.12);
}
/* 2026-09-28 (müşteri talebi: "placeholder'lar biraz daha ince ve soluk olsun,
   iletişim sayfasında kalın kalmış"): ad/e-posta/mesaj alanlarında ::placeholder
   kuralı HİÇ YOKTU, tarayıcı varsayılanı (koyu gri, input'un font-weight'ini
   miras alan) çıkıyordu. Hemen yanındaki telefon alanı ise bilinçli soluk tonu
   kullandığı için aynı formda iki farklı görünüm oluşuyordu. Artık ikisi de
   aynı: ince (400) ve soluk. */
.contact-field > input::placeholder,
.contact-field > textarea::placeholder,
.input-icon input::placeholder {
  color: #b3bdbb;
  font-weight: 400;
  opacity: 1; /* Firefox placeholder'a varsayılan opacity uygular */
}
.contact-field > textarea {
  min-height: 120px;
  resize: none;
}

/* Telefon alanı bölümü başlangıcı */
.input-icon {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.input-icon:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(8, 127, 122, 0.12);
}
.input-icon > svg {
  width: 17px;
  margin-inline-start: 13px;
  color: var(--muted);
  flex-shrink: 0;
  order: 1;
}
.input-icon input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 12px;
  font-size: 0.85rem;
  color: var(--ink);
  outline: none;
  font-family: inherit;
}
.input-icon input::placeholder {
  color: #adb8b6;
}
/* 2026-09-30 (revizeler30-09 md.3): ülke seçici HER DİLDE solda, numara soldan
   sağa ve sola yaslı. Önceki kural (svg 1, input 2, ülke 3) satır yönünü
   sayfadan aldığı için ülke yalnız AR'de soldaydı. Artık alan yönü sabit LTR:
   [ülke kodu][numara][ikon] — AR görünümü aynı kalıyor. */
.phone-field {
  direction: ltr;
  padding-right: 13px;
  padding-inline-end: 13px;
}
.phone-field .country-select {
  order: 1;
}
.phone-field input {
  direction: ltr;
  text-align: left;
  order: 2;
}
.phone-field > svg {
  order: 3;
  margin-left: 0;
  margin-inline-start: 0;
}
.phone-field .country-select-btn {
  border-inline-start: 0;
  border-right: 1px solid var(--line);
}
/* Telefon alanı bölümü bitişi */

.contact-form .button {
  width: 100%;
  min-height: 50px;
  color: #fff;
  background: var(--teal);
  box-shadow: 0 10px 22px rgba(8, 127, 122, 0.25);
}
.contact-form .button:hover {
  background: var(--teal-dark);
}
/* İletişim formu bölümü bitişi */

/* İletişim bilgi paneli bölümü başlangıcı */
.contact-info-panel {
  display: flex;
  flex-direction: column;
  padding: 34px;
  border-radius: var(--radius);
  color: #fff;
  background: linear-gradient(160deg, var(--teal), var(--teal-dark));
}
.contact-info-panel h2 {
  margin: 0 0 24px;
  color: #fff;
  font-size: 1.2rem;
}
.contact-info-rows {
  display: grid;
  gap: 20px;
}
.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.contact-info-item .icon {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}
.contact-info-item .icon svg {
  width: 17px;
  height: 17px;
  color: #fff;
}
.contact-info-item strong {
  display: block;
  margin-bottom: 2px;
  font-size: 0.82rem;
}
.contact-info-item span,
.contact-info-item a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.82rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}
.contact-info-item a:hover {
  color: #fff;
}
.contact-info-socials {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 26px;
}
.contact-info-socials a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.85);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}
.contact-info-socials a svg {
  width: 15px;
  height: 15px;
}
.contact-info-socials a:hover {
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
}
.contact-info-socials a.social-fb:hover {
  background: #1877f2;
}
.contact-info-socials a.social-x:hover {
  background: #fff;
  color: #000;
}
.contact-info-socials a.social-ig:hover {
  background: radial-gradient(
    circle at 30% 107%,
    #fdf497,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
}
.contact-info-socials a.social-yt:hover {
  background: #ff0000;
}
/* İletişim bilgi paneli bölümü bitişi */

/* Harita bölümü başlangıcı */
.contact-map {
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.contact-map iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}
/* Harita bölümü bitişi */

@media (max-width: 900px) {
  .contact-hero-grid {
    grid-template-columns: 1fr;
  }
  .contact-form-row {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .contact-form-panel,
  .contact-info-panel {
    padding: 22px;
  }
  .contact-field input,
  .contact-field textarea,
  .input-icon input,
  .country-select-btn {
    font-size: 16px;
  }
  .contact-map iframe {
    height: 280px;
  }
}
/* İletişim stilleri bölümü bitişi */