body {
 margin: 0;
 padding: 0;
 background: linear-gradient(to bottom right, #ffcce6, #ffe6f2);
 font-family: 'Comic Sans MS', cursive;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 height: 100vh;
 overflow: hidden;
}

p.copyright {
 position: absolute;
 top: 10px;
 left: 15px;
 font-size: 0.85rem;
 color: #c2185b;
 font-weight: bold;
 z-index: 10;
 margin: 0;
 padding: 5px 10px;
 background-color: rgba(255, 255, 255, 0.5);
 border-radius: 8px;
 backdrop-filter: blur(5px);
}

.book {
 position: relative;
 width: 90vw;
 max-width: 700px;
 height: 80vh;
 max-height: 600px;
 perspective: 1500px;
}

.page {
 position: absolute;
 width: 100%;
 height: 100%;
 background: #fff0f5;
 border-radius: 20px;
 box-shadow: 0 0 20px #f99ac3;
 padding: 20px;
 box-sizing: border-box;
 backface-visibility: hidden;
 transform: rotateY(180deg);
 transition: transform 1s ease;
 display: none;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 text-align: center;
}

.page.active {
 display: flex;
 transform: rotateY(0deg);
}

.content p.end-notif {
 position: relative;
 top: 13%;
}

.content p {
 font-size: 1.2rem;
 margin: 1rem;
 color: #d63384;
}

.controls {
 margin-top: 20px;
 display: flex;
 gap: 10px;
}

button {
 padding: 10px 20px;
 font-size: 1rem;
 background: #ff99cc;
 color: white;
 border: none;
 border-radius: 10px;
 cursor: pointer;
}

button:hover {
 background: #ff66b2;
}

/* Foto animasi */
.photos {
 position: relative;
 width: 100%;
 height: 300px;
 margin-top: 20px;
}

.photo {
 width: 75px;
 height: 80px;
 position: absolute;
 opacity: 0;
 animation: floatIn 1.5s forwards;
}

.photo.p2.square,
.photo.p3.square,
.photo.p7.square {
 width: 67px;
 height: 65px;
}

.p1 {
 top: 0;
 left: 43%;
 transform: translateX(-50%) rotate(0deg);
 animation-delay: 0.2s;
}

.p2 {
 top: 20%;
 left: 70%;
 animation-delay: 0.4s;
}

.p3 {
 top: 80%;
 left: 70%;
 animation-delay: 0.6s;
}

.p4 {
 top: 14%;
 left: 17%;
 animation-delay: 0.8s;
}

.p5 {
 top: 80%;
 left: 17%;
 animation-delay: 1s;
}

.p6 {
 top: 50%;
 left: -2%;
 animation-delay: 1.2s;
}

.p7 {
 top: 50%;
 left: 90%;
 animation-delay: 1.4s;
}

.p8 {
 top: 100%;
 left: 43%;
 transform: translateX(-50%) rotate(0deg);
 animation-delay: 1.6s;
}

@keyframes floatIn {
 from {
  transform: scale(0.2);
  opacity: 0;
 }

 to {
  transform: scale(1);
  opacity: 1;
 }
}

/* Responsive */
@media (max-width: 600px) {
 p.copyright {
  font-size: 0.75rem;
  padding: 4px 8px;
  top: 8px;
  left: 10px;
 }

 .book {
  width: 95vw;
  height: 85vh;
 }

 .content p {
  font-size: 0.95rem;
  margin: 0.5rem;
 }

 .photo {
  width: 45px;
  height: 50px;
 }

 .photos {
  height: 220px;
  margin-top: 10px;
 }

 .photo.p2.square,
 .photo.p3.square,
 .photo.p7.square {
  width: 47px;
  height: 45px;
 }

 .p1 {
  top: 0;
  left: 40%;
  transform: translateX(-50%);
 }

 .p2 {
  top: 18%;
  left: 70%;
 }

 .p3 {
  top: 83%;
  left: 70%;
 }

 .p4 {
  top: 18%;
  left: 13%;
 }

 .p5 {
  top: 83%;
  left: 13%;
 }

 .p6 {
  top: 50%;
  left: -2%;
 }

 .p7 {
  top: 50%;
  left: 86%;
 }

 .p8 {
  top: 100%;
  left: 40%;
  transform: translateX(-50%);
 }

 .content p.end-notif {
  position: relative;
  top: 2%;
  margin-top: 2rem;
  font-size: 0.9rem;
 }

 button {
  font-size: 0.9rem;
  padding: 8px 16px;
 }
}