.book-container {
  width: 1030px;         /* Eni dilediğiniz gibi ayarlayabilirsiniz */
  height: 681px;        /* Boyu dilediğiniz gibi ayarlayabilirsiniz */
  margin: 237px 240px;
  position: relative;
  perspective: 2000px;  /* 3D flip efekti için gerekli */
  background: transparent;      /* Arkaplan rengi (isteğe bağlı) */

  
  overflow: hidden;      /* Taşan kısımlar görünmesin */
}

/* Her sayfa için ortak stiller */
.page {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url("/images/logo/backhak.jpg") no-repeat center center;
  background-size:cover ;
  backface-visibility: hidden; /* Sayfa arkasının görünmemesi için */
  background-position: center center;
  background-size: contain;
  transform-origin: left center; /* Sağ kenardan dönecek */
  transition: transform 1s ease;  /* Sayfa çevirme yumuşaklığı */
}

/* Üst üste binme sırasını belirlemek için z-index kullanacağız. */
/* Soldaki sayfanın dönüş açısını ayarlıyoruz (normalde 180°). */
.page.flipped {
  transform: rotateY(-180deg); 
  z-index: 1; /* Önde kalsın diye */
}

/* Gezinti butonları */
.nav-button {
  position: absolute;
  top: 70%;
  transform: translateY(-50%);
  background: white;
  color: black;
  padding: 10px 15px;
  cursor: pointer;
  user-select: none; 
  font-weight: bold;
  z-index: 999;
  border-radius: 24px;
}
#prevPage {
  left: 10px;
}
#nextPage {
  right: 10px;
}
.nav-button:hover {
  background: gold;
}
.katalog-page{
  background: url("/images/logo/bey.jpg") no-repeat center center;
  background-size:cover ;
}
@media (max-width: 768px) {
  .book-container {
    /* Ekrana tam otursun */
    max-width: 100%;
    aspect-ratio: auto;
    margin: 120px auto; /* Yukarıdan biraz boşluk */
    /* En-boy oranını iptal etmek isterseniz */
    height: 400px;      /* Örnek: sabit bir yükseklik verilebilir (isteğe bağlı) */
  }

  .nav-button {
    top: 80%; /* Butonlar biraz daha ortada olsun */
  }
}