/* Sayfa arka plan ve genel stil */
body {
  margin: 0;
  font-family: "Saira", sans-serif;
  background-color: #020b12; /* Arka plan rengi */
  color: white; /* Yazı rengi */
  overflow-x: hidden; /* Yatay taşmayı gizle */
}

/* Ana düzen */
.main-layout {
  display: flex; /* Elemanları yatay hizala */
  justify-content: space-between; /* Elemanlar arasında boşluk bırak */
  align-items: flex-start; /* Üst hizala */
  width: 90%; /* Genişlik %90 */
  max-width: 1200px; /* Maksimum genişlik */
  margin: 40px auto; /* Sayfayı ortala ve boşluk bırak */
}

/* Sol sütun fotoğraflar */
.photo-column.left {
  display: flex;
  flex-direction: column; /* Dikey düzen */
  width: 20%; /* Sütun genişliği */
  gap: 10px; /* Fotoğraflar arası boşluk */
  animation: slideInLeft 1.5s ease-out; /* Soldan sağa kayma efekti */
}

/* Sağ sütun fotoğraflar */
.photo-column.right {
  display: flex;
  flex-direction: column; /* Dikey düzen */
  width: 20%; /* Sütun genişliği */
  gap: 10px; /* Fotoğraflar arası boşluk */
  animation: slideInRight 1.5s ease-out; /* Sağdan sola kayma efekti */
}

/* Fotoğraf stil tanımları */
.photo-column img {
  width: 100%; /* Fotoğraf genişliği sütunla uyumlu */
  height: auto; /* Oranı koru */
  border-radius: 8px; /* Köşeleri yuvarlat */
}

/* İçerik alanı */
.content-area {
  width: 50%; /* İçerik alanı genişliği */
}

/* İlk kutucuk (First Box) */
.first-box {
  position: relative;
  width: 100%; /* İçerik alanının genişliğine göre ayarlanır */
  max-width: 627px; /* Maksimum genişlik */
  height: auto; /* İçeriğe göre yükseklik */
  aspect-ratio: 627 / 167; /* Oranı koruma */
  margin: 30px auto; /* Ortala ve yukarıdan boşluk bırak */
  background-color: rgba(255, 255, 255, 0.008); /* Şeffaflık %8 */
  display: flex; /* İçeriği ortalamak için */
  justify-content: center; /* Yatayda ortala */
  align-items: center; /* Dikeyde ortala */
  border-radius: 8px; /* Köşeleri yuvarlat */
  animation: fadeIn 2s ease-in-out; /* Görünerek gelme efekti */
}
.first-box h1 {
  font-size: 2vw;
  max-font-size: 38px;
  color: white; /* Yazı rengi */
  animation: fadeIn 2s ease-in-out;
}
.hover-line {
  position: absolute;
  top: calc(100% + 10px); /* İlk kutunun altından 10px boşluk */
  left: 50%; /* Ortalamak için */
  transform: translateX(-50%);
  width: 100%; /* DEĞİŞİKLİK BURADA YAPILDI: Çizgi genişliği kutucukla aynı */
  height: 4px; /* Çizgi kalınlığı */
  background-color: #e9204f; /* Çizgi rengi */
  animation: slideIn 2s ease-in-out;
}

/* İkinci kutucuk (Second Box) */
.second-box {
  margin-top: 30px;
  background-color: rgba(0, 0, 0, 0.17);
  padding: 20px;
  border-radius: 8px;
  line-height: 1.6;
  animation: fadeIn 2s ease-in-out;
}
.second-box p {
  margin: 15px 0;
  font-size: 1rem;
  font-weight: bold; /* DEĞİŞİKLİK BURADA YAPILDI: Yazı kalın yapıldı */
  animation: fadeIn 2s ease-in-out;
}
.second-box .highlight {
  font-size: 1.2rem;
  font-weight: bold; /* DEĞİŞİKLİK BURADA YAPILDI: Yazı kalın yapıldı */
  animation: fadeIn 2s ease-in-out;
}
.second-box .highlight-bold {
  font-weight: bold; /* Yazı kalın yapıldı */
  font-size: 1rem;
  animation: fadeIn 2s ease-in-out;
}

/* Responsive tasarım */
@media (max-width: 768px) {
  .main-layout {
    flex-direction: column; /* Mobilde dikey düzen */
    align-items: center;
  }
  .photo-column {
    width: 80%; /* Fotoğraflar daha geniş */
  }
  .content-area {
    width: 90%;
  }
}

/* Animasyonlar */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}