/*********************************************
 * FONT TANIMLARI
 *********************************************/
 @font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-BlackItalic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
}

/*********************************************
 * GENEL DÜZEN VE YAPI
 *********************************************/
.container {
  max-width: 1440px; /* Yapı 1440px için tasarlandı */
  margin: 0 auto; /* Daha büyük ekranlarda ortalanır */
  margin-top: 36px;
  margin-bottom: 36px;
  display: flex;
  flex-direction: column;
  gap: 24px; /* Üst ve alt satırlar arasındaki boşluk */
}

.row {
  display: flex;
  gap: 24px; /* Sağ ve sol kutular arasındaki boşluk */
  justify-content: center;
}

/* Kutular */
.rectangle {
  width: 649px;
  height: 400px; /* Yükseklik 400px */
  position: relative;
  background-size: cover;
  background-position: center;
  border-radius: 20px; /* Köşeleri yuvarlatılmış */
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* Gentle animasyon */
  overflow: hidden; /* İçeriği taşırmamak için */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Daha soft gölge */
  border: none; /* Başlangıçta border yok */
}

/*********************************************
 * KUTULAR İÇİN GÖRSELLER
 *********************************************/
#box1 {
  background-image: url('images/clara-iki.jpg');
}
#box2 {
  background-image: url('images/golden_harvest3.JPG');
}

/* Box 3 için görsel büyütme ve aşağı taşıma */
#box3 {
  background-image: url('images/mary1.jpg');
  background-size: 110%; /* Görseli biraz büyüt */
  background-position: center center; /* Ortala */
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* Gentle animasyon */
}
#box3:hover {
  background-size: 120%; /* Daha fazla büyüt */
  background-position: center bottom; /* Görseli aşağı taşı */
}

#box4 {
  background-image: url('images/perla-tanıtım.jpg');
}

/*********************************************
 * HOVER EFEKTLERİ
 *********************************************/
.rectangle:hover {
  border: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); /* Daha yoğun gölge */
}

/*********************************************
 * GÖLGE
 *********************************************/
.rectangle::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px; /* Gölge daha uzun */
  background: linear-gradient(
    0deg,
    rgba(60, 56, 56, 1) 0%,
    rgba(60, 56, 56, 0.6) 40%,
    rgba(60, 56, 56, 0) 90%
  );
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 0; /* Gölge başlangıçta görünmez */
  pointer-events: none;
  z-index: 1; /* Gölge katmanı */
}
.rectangle:hover::after {
  opacity: 1;
}

/*********************************************
 * YAZILAR
 *********************************************/
.label {
  position: absolute;
  bottom: 50px; /* Yazı daha yukarı */
  font-size: 40px; /* Daha büyük yazı */
  font-family: 'Satoshi', sans-serif;
  font-weight: 700;
  color: white; /* Beyaz renkte yazı */
  left: 42px; /* Başlangıç noktası */
  right: 42px; /* Sağ için denge */
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* Gentle animasyon */
  opacity: 0; /* İlk başta görünmez */
  transform: scale(0.8);
  z-index: 2; /* Yazıyı gölgenin üstüne taşı */
}

.rectangle.left .label {
  right: auto; /* Sağ sınırı kaldır */
}

.rectangle.right .label {
  left: auto; /* Sol sınırı kaldır */
}

.rectangle:hover .label {
  opacity: 1;
  transform: scale(1); /* Hafif büyür */
}

/*********************************************
 * BAĞLANTILAR (A ETİKETİ)
 *********************************************/
.rectangle a.link {
  display: block; /* Tüm kutuyu tıklanabilir yap */
  width: 100%;
  height: 100%;
  text-decoration: none; /* Bağlantı alt çizgisini kaldır */
  color: inherit; /* Yazı rengini koru */
  position: relative;
}

/*********************************************
 * MEDIA SORGULARI
 *********************************************/

/* Tablet cihazlar (max-width: 1024px) */
@media (max-width: 1024px) {
  .container {
    padding: 0 40px; /* Kenarlardan boşluk */
  }

  .rectangle {
    width: calc(50% - 12px); /* İki kutu yan yana */
  }
}

/* Genel mobil cihazlar (max-width: 767px) */
@media (max-width: 767px) {
  .container {
    padding: 0 24px; /* Daha dar boşluk */
    gap: 16px; /* Satır araları küçültüldü */
  }

  .row {
    flex-direction: column; /* Kutular alta dizilir */
    gap: 16px; /* Satır arası boşluk */
  }

  .rectangle {
    width: 100%; /* Tam genişlik */
    height: 300px; /* Yükseklik küçültüldü */
  }

  /* Hover efektlerini devre dışı bırak */
  .rectangle:hover {
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }

  .rectangle::after {
    opacity: 1; /* Gölge her zaman görünür */
  }

  .rectangle .label {
    opacity: 1; /* Yazılar her zaman görünür */
    transform: scale(1);
  }
}

/* Küçük mobil cihazlar (max-width: 480px) */
@media (max-width: 480px) {
  .container {
    padding: 0 16px; /* Daha küçük kenar boşlukları */
  }

  .rectangle {
    height: 240px; /* Daha küçük kutu yüksekliği */
  }

  .label {
    font-size: 32px; /* Daha küçük yazı */
    bottom: 36px; /* Yazıyı yukarı taşı */
    left: 24px; /* Sol boşluk */
    right: 24px; /* Sağ boşluk */
  }
}

/* Varsayılan (Masaüstü ve daha büyük cihazlar) */
@media (min-width: 1440px) {
  .container {
    padding: 0 60px; /* Kenar boşlukları */
  }
}