body,
html {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  font-family: sans-serif;
  /* Genel font */
  background: #333;
}

.book {
  width: 100vw;
  height: 100vh;
  position: relative;
  /* önemli */
  perspective: 2000px;
}

.page {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: transform 0.8s ease;
}

.left {
  background-image: url('assets/orig.jpg');
  background-size: cover;
  background-position: center;
  border: none;
  clip-path: polygon(0 100%, 0 0, 100% 0);
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;

}

.right {
  background-image: url('assets/gecekulubu.jpg');
  background-size: cover;
  background-position: center;
  border: none;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 100%, 100% 0);
}

.overlay-text {
  position: absolute;
  bottom: 30px;
  width: 100%;
  text-align: center;
  font-size: 2rem;
  color: white;
  text-shadow: 2px 2px 10px black;
}

.overlay-text1 {
  position: absolute;
  top: 30px;
  width: 100%;
  text-align: center;
  font-size: 2rem;
  color: white;
  text-shadow: 2px 2px 10px black;
}

/* DM Serif Display fontu için */
.dm-serif {
  font-family: 'DM Serif Display', serif;
}

/* Dancing Script fontu için */
.dancing-script {
  font-family: 'Dancing Script', cursive;
}

.top-center-svg {
  position: fixed;
  top: 80px;
  /* sayfa üstünden boşluk */
  left: 260px;
  transform: translateX(-50%);
  height: 120px;
  /* istediğin boyut */
  width: auto;
  z-index: 1000;
  /* diğer içeriklerin üstünde olsun */
}

.top-center-svg1 {
  position: fixed;
  bottom: 30px;
  right: -70px;
  transform: translateX(-50%);
  height: 200px;
  /* istediğin boyut */
  width: auto;
  z-index: 1000;
  /* diğer içeriklerin üstünde olsun */
}

.page {
  transition: clip-path 0.3s ease, filter 0.3s ease;
  will-change: clip-path, filter;
}

/* Sol tarafa gelinince */
body.hover-left .left {
  filter: brightness(1);
  z-index: 2;
  clip-path: polygon(0 150%, 0 0, 150% 0);
}

body.hover-left .right {
  filter: brightness(0.4);
}

/* Sağ tarafa gelinince */
body.hover-right .right {
  /* transform: scale(1.05); */
  filter: brightness(1);
  z-index: 2;
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 49%, 65% 0);
}

body.hover-right .left {
  /* transform: scale(0.95); */
  filter: brightness(0.4);
}


/* Fare sol tarafa gelince logolar büyüsün */
body.hover-left .top-center-svg {
  transform: translateX(-50%) scale(1.1);
  /* 1.2 kat büyütme, kendi translateX kalıyor */
  left: 50%;
  top: 35%;
  transition: transform 0.7s ease, top 0.7s ease, left 0.7s ease;
}

body.hover-right .top-center-svg1 {
  transform: translateX(-50%) scale(1.2);
  /* 1.2 kat büyütme, kendi translateX kalıyor */
  right: 34%;
  bottom: 35%;
  transition: transform 0.7s ease, bottom 0.7s ease, right 0.7s ease;
}

/* Fare sol tarafa gelince overlay yazılar da büyüsün */
body.hover-left .overlay-text1 {
  transform: scale(1.1);
}

body.hover-right .overlay-text {
  transform: scale(1.2);
}

@media only screen and (max-width: 768px) {

  /* Container flex ile alt alta dizilsin */
  .book {
    display: flex;
    flex-direction: column;
    height: auto;
    /* Yükseklik otomatik olsun */
  }

  /* Sayfalar doğal akışta alt alta dizilsin */
  .page {
    position: static !important;
    /* Absolute konum kaldır */
    width: 100% !important;
    height: 50vh !important;
    /* Yarı yükseklik */
    border: none !important;
    border-bottom: 1px solid #ccc;
    clip-path: none !important;
    /* Clip-path kaldır */
  }

  .page:last-child {
    border-bottom: none;
  }

  /* Logolar pozisyon ve boyut mobil uyumlu */
  .top-center-svg {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 10px auto 0 auto;
    display: block;
    height: 100px !important;
  }

  .top-center-svg1 {
    position: relative !important;
    left: auto !important;
    top: 5% !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 10px auto 0 auto;
    display: block;
    height: 100px !important;
  }

  body.hover-left .top-center-svg {
    transform: translateX(-50%) scale(1.1);
    /* 1.2 kat büyütme, kendi translateX kalıyor */
  }

  body.hover-right .top-center-svg1 {
    transform: translateX(-50%) scale(1.2);
    /* 1.2 kat büyütme, kendi translateX kalıyor */
  }

  /* Overlay metinleri mobilde daha küçük */

  .overlay-text {
    position: absolute !important;
    top: 60% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 1.5rem;
    text-align: center;
    padding: 0;
  }

  .overlay-text1 {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 1.5rem;
    text-align: center;
    padding: 0;
  }

  /* Body overflow kontrolü mobilde açılabilir */
  body,
  html {
    overflow: auto;
    height: auto;
  }
}



.fade-out {
  animation: fadeOut 1s forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}