/* iletisim.php için özel stiller */

/* Genel İyileştirmeler */
.contact-form-column,
.contact-details-column {
  margin-bottom: 30px; /* Sütunlar arasında genel bir alt boşluk (mobil ve tablet için geçerli olacak) */
}

.map-column {
  margin-bottom: 120px; /* Haritanın altına daha belirgin bir boşluk */
}

.contact-details-panel {
  padding: 25px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  background-color: #f9f9f9;
  height: 100%; /* Masaüstünde form ile aynı hizada olması için */
}

.contact-details-panel h3 {
  margin-top: 0; /* Panelin başlığının üstündeki boşluğu sıfırla */
  padding-bottom: 15px;
  border-bottom: 1px solid #d0d0d0;
  font-size: 22px;
}

.contact-info li {
  margin-bottom: 20px !important;
  font-size: 15px;
  line-height: 1.6;
}
.contact-info li:last-child {
  margin-bottom: 0 !important;
}

.contact-info li strong {
  font-size: 16px;
  display: block;
  margin-bottom: 3px;
}

.contact-info li i {
  color: #007bff;
  margin-right: 15px !important;
  width: 25px !important;
  text-align: center;
  vertical-align: top;
}
.contact-info li div {
  display: inline-block;
  vertical-align: top;
}


#mycontactform .form-group {
  margin-bottom: 25px;
}

#mycontactform .btn-primary {
  padding: 12px 25px;
  font-size: 16px;
}

#map {
  width: 100%;
  border: 1px solid #d0d0d0;
  border-radius: 5px;
  height: 450px; /* Varsayılan yükseklik */
}


/* Tablet ve Mobil Görünümleri (xs ve sm breakpoint'leri <992px) */
@media (max-width: 991px) {
  .contact-details-column {
    margin-top: 0; /* .contact-details-column'un kendi margin-bottom'ı var, formdan sonra gelince bu yeterli*/
                    /* Eğer formdan sonra gelmiyorsa (örn. sm'de yan yana ise) bu 0 olmalı */
  }
  .contact-details-panel {
    height: auto; /* Mobil ve tablette yüksekliği otomatik olsun */
    padding: 20px;
  }
  .contact-details-panel h3 {
    font-size: 20px;
  }
  #mycontactform .btn-primary {
    width: 100%; /* Mobil ve tablette buton tam genişlikte */
  }
  #map {
    height: 350px; /* Mobil ve tablette harita yüksekliği */
  }
}

/* Sadece en küçük mobil ekranlar için (xs breakpoint <768px) */
@media (max-width: 767px) {
  .contact-form-column,
  .contact-details-column {
    width: 90%; /* Genişliği %90 yap */
    margin-left: auto; /* Ortala */
    margin-right: auto; /* Ortala */
    float: none; /* Bootstrap'in float'ını ez */
    margin-bottom: 25px; /* Alt alta geldiklerinde aralarında boşluk */
  }

  .contact-details-column {
    margin-top: 0; /* Üstteki margin-bottom yeterli olacak */
  }


  .contact-form-column h3,
  .contact-details-column h3,
  .map-column h3 {
    font-size: 20px;
    text-align: center;
  }
  .contact-details-panel {
    text-align: left;
  }
  .contact-info li {
    font-size: 14px;
  }
   .contact-info li strong {
    font-size: 15px;
  }
  #map {
    height: 300px;
    width: 90%; /* Haritayı da %90 yapıp ortala */
    margin-left: auto;
    margin-right: auto;
  }
  .map-column { /* Harita sütununun kendi margin-bottom'ı zaten var */
    width: 100%; /* Harita sütunu tam genişlikte kalsın, içindeki #map daralsın */
    float: none;
    margin-left:0;
    margin-right:0;
  }
}