/* ================================
   GENEL STİL (Tüm Ekranlar)
================================= */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Chakra Petch', sans-serif;
  color: white;
  background-color: #111;
}

/* ================================
   ANA İKİLİ BÖLÜM
================================= */
.main-second-image-section {
  max-width: 1200px;
  margin: 30px auto;
  padding: 0 20px;
}

.image-text-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: stretch;
  justify-content: space-between;
}

.text-column {
  flex: 1 1 320px;
  max-width: 600px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  word-break: break-word;
  padding: 0 15px;
}

.text-column h3 {
  font-family: 'Orbitron', sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  margin: 0;
  line-height: 1.2;
}

.text-column p {
  font-style: italic;
  font-size: clamp(0.9rem, 1.2vw, 1.2rem);
  margin: 0;
  line-height: 1.5;
}

/* ================================
   GÖRSEL KUTU (Kart)
================================= */
.information-card {
  position: relative;
  flex: 1 1 320px;
  max-width: 600px;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #111;
}

.information-card:hover {
  transform: scale(1.03);
  box-shadow: 0 20px 50px rgb(117, 8, 8);
  z-index: 5;
}

/* ================================
   MEDYA KONTEYNER
================================= */
.media-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9; /* Safari uyumu için sabit oran */
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.media-container img {
  width: 100%;
  height: 100%; /* auto yerine sabit */
  object-fit: cover;
  border-radius: 16px;
  transition: opacity 0.4s ease;
  display: block; /* Safari bug fix */
}

.media-container img.main-image { z-index: 1; opacity: 1; }
.media-container img.hover-image { z-index: 2; opacity: 0; }

.information-card:hover .media-container img.main-image { opacity: 0; }
.information-card:hover .media-container img.hover-image { opacity: 1; }

/* Dokunmatik cihazlarda hover-image’ı tamamen kaldır */
@media (hover: none) {
  .media-container img.hover-image { display: none !important; }
}

/* ================================
   ANİMASYONLAR
================================= */
.scroll-animate { 
  opacity: 0; 
  transform: translateY(40px); 
  pointer-events: none; 
}
.text-column.scroll-animate { transform: translateX(-40px); }
.information-card.scroll-animate { transform: translateX(40px); }

.scroll-visible {
  opacity: 1;
  transform: translateX(0) translateY(0);
  pointer-events: auto;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.text-column.scroll-visible { transition-delay: 0.3s; }
.information-card.scroll-visible { transition-delay: 0.6s; }

/* ================================
   RESPONSIVE
================================= */
/* Tablet ve Küçük Laptop */
@media (max-width: 1024px) {
  .image-text-wrapper { gap: 30px; }
  .text-column h3 { font-size: clamp(1.3rem, 2vw, 2rem); }
  .text-column p { font-size: clamp(0.85rem, 1.5vw, 1rem); }
}

/* iPad / Büyük Telefonlar */
@media (max-width: 768px) {
  .image-text-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 25px;
  }
  .text-column, .information-card {
    max-width: 100%;
    width: 100%;
  }
}

/* Küçük Telefonlar */
@media (max-width: 480px) {
  .image-text-wrapper { gap: 20px; padding: 0 10px; }
  .text-column h3 { font-size: clamp(1rem, 4vw, 1.5rem); }
  .text-column p { font-size: clamp(0.75rem, 3vw, 0.9rem); line-height: 1.3; }
  .text-column { padding: 0 10px; }
  .information-card { width: 100%; }
}