/* Genel Sıfırlama ve Temel Ayarlar */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Body Ayarları - Daha Premium Arka Plan */
body {
  font-family: 'Inter', sans-serif; /* Daha modern bir font, HTML'e eklemeniz gerekebilir */
  background: #ffffffd6; /* Biraz daha koyu, zengin ve mat bir gri arka plan */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* Sayfanın en az viewport yüksekliği kadar olmasını sağlar */
  padding: 20px;
  color: #333; /* Genel yazı rengi */
}

/* Ana Kapsayıcı (Container) */
.container {
  display: flex;
  background: #ffffff; /* Beyaz kart arka planı */
  border-radius: 20px; /* Daha da belirgin yuvarlak köşeler */
  overflow: hidden;
  max-width: 1100px; /* Biraz daha geniş */
  width: 100%;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35); /* Daha derin ve zarif gölge */
  border: 1px solid #7f8c96; /* Hafif bir dış çerçeve */
}

/* Slider Kapsayıcı */
.slider-container {
  flex: 2;
  position: relative;
  overflow: hidden;
  background: #fcfcfc; /* Çok hafif krem tonu */
  border-radius: 20px 0 0 20px; /* Sadece sol köşeler yuvarlak */
}

/* Slider */
.slider {
  position: relative;
  height: 100%;
}

/* Slide (Tek Resim) */
.slide {
  position : absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slide.active {
  opacity: 1;
}

/* Resim Ayarları */
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Resmi kabı dolduracak şekilde sığdır, gerekirse kırp */
  object-position: center; /* Resmi ortala */
}

/* Form Kapsayıcı */
.form-container {
  flex: 1;
  background: #ffffff; /* Beyaz arka plan */
  padding: 45px; /* İç boşluğu daha da artır */
  display: flex;
  flex-direction: column;
  border-radius: 0 20px 20px 0; /* Sadece sağ köşeler yuvarlak */
  box-shadow: -6px 0 25px rgba(0,0,0,0.1); /* Sol tarafta daha belirgin gölge */
}

/* Randevu Formu */
#appointment-form {
  display: flex;
  flex-direction: column;
  margin-bottom: 40px; /* Alt boşluğu artır */
}

/* Form Başlığı */
#appointment-form h2 {
  margin-bottom: 30px; /* Başlık alt boşluğunu artır */
  font-size: 32px; /* Başlık boyutunu büyüt */
  color: #2c3e50; /* Koyu gri, daha premium */
  text-align: center;
  font-weight: 700; /* Daha kalın */
  letter-spacing: -1px;
}

/* Input ve Buton Ortak Ayarları */
#appointment-form input,
#appointment-form button {
  margin-bottom: 20px; /* Input ve buton alt boşluğunu artır */
  padding: 18px; /* İç boşluğu artır */
  border: 1px solid #aeb9c4; /* Hafif gri çerçeve (daha koyu) */
  border-radius: 14px; /* Daha yuvarlak köşeler */
  font-size: 19px; /* Yazı boyutunu büyüt */
  outline: none; /* Odaklandığında varsayılan çerçeveyi kaldır */
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Input Odaklanma Efekti */
#appointment-form input:focus {
  border-color: #5b8ec9; /* Daha yumuşak mavi odak çerçevesi */
  box-shadow: 0 0 0 0.3rem rgba(91,142,201,.3); /* Hafif mavi gölge */
}

/* Buton Ayarları */
#appointment-form button {
  background: linear-gradient(to right, #e74c3c, #c0392b); /* Hafif kırmızı gradient */
  color: white;
  cursor: pointer;
  font-weight: bold;
  letter-spacing: 1.2px;
  box-shadow: 0 10px 25px rgba(231, 76, 60, 0.45); /* Belirgin buton gölgesi */
  border: none; /* Butonun kendi çerçevesini kaldır */
}

/* Buton Hover Efekti */
#appointment-form button:hover {
  background: linear-gradient(to right, #c0392b, #a52a22); /* Hover'da daha koyu gradient */
  box-shadow: 0 12px 30px rgba(231, 76, 60, 0.6);
}

/* Bilgi Bölümleri */
.info-sections {
  display: flex;
  flex-direction: column;
  gap: 30px; /* Bilgi kutuları arası boşluğu artır */
}

/* Bilgi Kutusu */
.info-box {
  background: #fdfdfd; /* Çok hafif beyaz arka plan */
  padding: 35px; /* İç boşluğu artır */
  border-radius: 16px; /* Daha yuvarlak köşeler */
  border: 1px solid #e0e0e0; /* Hafif çerçeve */
  box-shadow: 0 6px 20px rgba(0,0,0,0.07); /* Hafif gölge */
}

/* Bilgi Kutusu Başlığı */
.info-box h3 {
  margin-bottom: 18px; /* Başlık alt boşluğunu artır */
  color: #34495e; /* Koyu gri */
  font-size: 24px;
  font-weight: 600;
}

/* Bilgi Kutusu Paragrafı */
.info-box p {
  font-size: 18px; /* Paragraf boyutunu ayarla */
  line-height: 1.9;
  color: #666;
}

/* Sosyal Linkler */
.social-links {
  margin-top: 30px; /* Üst boşluğu artır */
  display: flex;
  gap: 30px; /* Sosyal linkler arası boşluğu artır */
  justify-content: center; /* Ortala */
}

/* Sosyal Link */
.social-links a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #7f8c8d; /* Daha mat gri */
  transition: color 0.3s ease;
}

/* Sosyal Link Hover Efekti */
.social-links a:hover {
  color: #e74c3c; /* Hover'da kırmızı */
}

/* İkonlar */
.icon {
  width: 30px; /* İkon boyutunu büyüt */
  height: 30px; /* İkon boyutunu büyüt */
  margin-right: 15px; /* Sağ boşluğu artır */
}

/* Tarih Input'u için Özel Stil (İkonlu) */
.date-input-with-icon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%236c757d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
  background-repeat: no-repeat;
  background-position: right 18px center; /* İkonu sağa hizala ve boşluk bırak */
  background-size: 24px;
  padding-right: 50px; /* Metin ile ikon arasında boşluk bırak */
}

/* Yeni Tarih Label Stili */
.date-label {
  font-size: 18px;
  color: #495057; /* Daha koyu gri */
  margin-bottom: 8px; /* Input'tan biraz boşluk */
  font-weight: 600; /* Kalın yazı */
  display: block; /* Kendi satırında durmasını sağla */
}


/* Mobil Uyumlu Tasarım (768px ve altı) */
@media (max-width: 768px) {
  body {
    padding: 0;
    align-items: flex-start; /* İçeriği üste hizala */
    min-height: auto; /* Mobil için min-height'ı kaldır */
  }

  .container {
    width: 100%;
    max-width: none;
    border-radius: 0; /* Köşeleri düz yap */
    box-shadow: none; /* Gölgeyi kaldır */
    flex-direction: column; /* Mobil için alt alta sıralama */
    border: none; /* Mobil için çerçeveyi kaldır */
  }

  .slider-container {
    flex: none;
    width: 75%;
    margin: 0 auto;
    padding-top: 75%; /* Fotoğrafın en-boy oranı (daha kareye yakın, mobil için daha iyi) */
    height: 0;
    position: relative;
    overflow: hidden;
    border-radius: 20px; /* Mobil için köşeleri düz yap */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7),
            0 0 15px rgba(231, 76, 60, 0.5),
            inset 0 0 20px rgba(0, 0, 0, 0.3);

  }

  .slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .form-container {
    flex: none;
    width: 100%;
    padding: 30px; /* Mobil iç boşluğu ayarla */
    margin-top: 0;
    background: #ffffff;
    border-radius: 0; /* Mobil için köşeleri düz yap */
    box-shadow: none; /* Mobil için gölgeyi kaldır */
    min-height: auto; /* Takvimin genişlemesine izin ver */
  }

  /* Randevu Formu Başlığı Mobil */
  #appointment-form h2 {
    font-size: 26px; /* Başlık boyutunu biraz küçült */
    margin-bottom: 20px; /* Alt boşluğu ayarla */
    line-height: 1.2; /* Satır yüksekliğini ayarla */
    white-space: normal; /* Metnin normal şekilde sarmasını sağla */
    word-wrap: break-word; /* Uzun kelimelerin kırılmasını sağla */
    text-align: center; /* Metni ortala */
  }

  /* Input ve Buton Mobil */
  #appointment-form input,
  #appointment-form button {
    font-size: 18px;
    padding: 16px;
    margin-bottom: 15px;
  }

  /* Tarih Input'u için Özel Stil (İkonlu) Mobil */
  .date-input-with-icon {
    background-position: right 15px center; /* İkonu sağa hizala ve boşluk bırak */
    background-size: 22px;
    padding-right: 45px; /* Metin ile ikon arasında boşluk bırak */
  }

  /* Yeni Tarih Label Stili Mobil */
  .date-label {
    font-size: 17px;
    margin-bottom: 10px; /* Input'tan biraz boşluk */
  }

  /* Bilgi Kutusu Mobil */
  .info-box {
    padding: 25px;
  }

  /* Bilgi Kutusu Başlığı Mobil */
  .info-box h3 {
    font-size: 22px;
  }

  /* Bilgi Kutusu Paragrafı Mobil */
  .info-box p {
    font-size: 16px;
  }

  /* Sosyal Linkler Mobil */
  .social-links {
    margin-top: 25px;
    gap: 10px;
  }

  /* İkonlar Mobil */
  .icon {
    width: 22px;
    height: 22px;
    margin-right: 5px;
  }
}