/* body{background:#59ABE3;margin:0} */
.form{
  width:480px;
  /* height:440px; */
  background:#efefef;
  border-radius:8px;
  /* box-shadow:0 0 40px -10px #000; */
  margin:calc(50vh - 220px) auto;
  padding:20px 30px;
  max-width:calc(100vw - 40px);
  box-sizing:border-box;
  font-family:'Montserrat',sans-serif;
  position:relative
}
.whatsappForm h2{
  margin:10px 0;
  padding-bottom:10px;
  width: 100px;
  color:#78788c;
  border-bottom:3px solid #78788c
}
.contact-form-subtitle {
    font-weight: 400;
  font-size: 11px;
  display: block;
  margin-bottom: 0;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #E5A600;
  position: relative;
}
#whatsappForm input, textarea{width:100%;padding:10px;box-sizing:border-box;background:none;outline:none;resize:none;border:0;font-family:'Montserrat',sans-serif;transition:all .3s;border-bottom:2px solid #bebed2}

#whatsappForm input:focus,textarea:focus{border-bottom:2px solid #78788c}

#whatsappForm p:before{content:attr(type);display:block;margin:28px 0 0;font-size:14px;color:#5a5a5a}

#whatsappForm button{
  width: 100%;
  background: #E5A600;
  border-radius: 4px;
  padding:8px 12px;
  margin:8px 0 0;
  color: white;
  font-family:'Montserrat',sans-serif;
  border: none;
  font-size: 18px;
  font-weight: 500;
  /* background:0; */
  cursor:pointer;
  transition:all .3s
}

#whatsappForm button:hover{
    border-radius: 4px;
    background:#78788c;color:#fff;
}

#whatsappForm div{content:'Hi';position:absolute;bottom:-15px;right:-20px;background:#50505a;color:#fff;width:320px;padding:16px 4px 16px 0;border-radius:6px;font-size:13px;box-shadow:10px 10px 40px -14px #000}
/* Ana kapsayıcıyı hizalamak için eklendi */
.contact-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    width: 100%;
}

/* Formun yerleşimini bozan margin temizlendi ve esneklik verildi */
#whatsappForm {
    flex: 1; /* Sol tarafla dengeli durması için */
    width: 100%; /* Flex kontrolünde olduğu için 100% yapıldı */
    max-width: 480px; 
    /* background: #e6e6e6; */
    border-radius: 8px;
    -webkit-box-shadow: 0px 0px 11px -5px rgba(66, 68, 90, 1);
-moz-box-shadow: 0px 0px 11px -5px rgba(66, 68, 90, 1);
box-shadow: 0px 0px 11px -5px rgba(66, 68, 90, 1);
    margin: 0; /* Sayfa ortalaması kaldırıldı, yan yana gelmesi sağlandı */
    padding: 20px 30px;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    position: relative;
}

/* Sol kolonun genişliğini ayarla */
.contact-info-col {
    flex: 1;
    min-width: 300px;
}

/* Mobil cihazlar için alt alta gelme kuralı */
@media (max-width: 992px) {
    .contact-top-row {
        flex-direction: column;
        align-items: center;
    }
    
    .whatsappForm {
        margin-top: 40px;
        width: 100%;
    }
}

/* Harita Bölümü Kapsayıcısı */
.contact-map-section {
    width: 75%;            /* Sayfanın %75'ini kapla */
    margin: 50px auto;     /* Üstten-alttan boşluk bırak ve yatayda ortala */
    border-radius: 15px;   /* Köşeleri yuvarlat */
    overflow: hidden;      /* İçerik dışarı taşmasın (yuvarlak köşeler için) */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Hafif gölge */
}

/* Harita iframe'i */
.contact-map-section iframe {
    width: 100%;           /* Kapsayıcısının (75%) tamamını doldur */
    height: 450px;         /* Yüksekliği sabit tut veya isteğine göre ayarla */
    display: block;        /* Altındaki boşluğu kaldırır */
    border: 0;             /* Kenarlığı kaldır */
}

/* Mobil cihazlar için harita genişliğini artır (Çok dar kalmaması için) */
@media (max-width: 768px) {
    .contact-map-section {
        width: 90%;        /* Mobilde %90 daha iyi görünür */
        margin: 30px auto;
    }
    
    .contact-map-section iframe {
        height: 300px;     /* Mobilde biraz daha kısa olabilir */
    }
}
.whatsappForm span{margin:0 5px 0 15px}
.contact-page-section {
  background-color: #f9f9f9;
}
/* Genel Kapsayıcı (HTML'inizde bu divlerin dışındaki ana div olduğunu varsayıyorum) */
.contact-container {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    padding: 60px 10%;
    background-color: #f9f9f9;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Sol Kolon Tasarımı */
.contact-info-col {
    flex: 1;
    min-width: 300px;
}

.contact-info-title {
    font-size: 2.2rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 10px;
}

.contact-info-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 70px;
    height: 3px;
    background-color: #E5A600; 
}
.fa-brands {
    -webkit-text-stroke: 1px;
    font-size: 23px;
}
.contact-info-list {
    list-style: none;
    padding: 0;
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
    transition: transform 0.3s ease;
}

.contact-info-item:hover {
    transform: translateX(5px);
}
.contact-icon-wrap {
    width: 50px;
    height: 50px;
    background-color: #fff;
    color: #E5A600;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.contact-info-text {
    color: #555;
    line-height: 1.6;
}

.contact-info-text strong {
    display: block;
    color: #2c3e50;
    font-size: 1.1rem;
    margin-bottom: 2px;
}

.contact-info-text a {
    text-decoration: none;
    color: #555;
    transition: color 0.3s;
}

.contact-info-text a:hover {
    color: #E5A600;
}

@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;
        padding: 40px 5%;
    }
    
    .contact-info-title {
        font-size: 1.8rem;
    }
}