body {
  margin: 0;
  background: black;
  overflow: hidden;
  font-family: 'Georgia', serif;
}

/* My precious yazısı */
.precious {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: gold;
  font-size: 3em;
  cursor: pointer;
  transition: transform 0.2s ease;
  z-index: 10;
}
.precious:active {
  transform: translate(-50%, -50%) scale(0.9);
}
.pulse {
  animation: pulse 0.4s ease;
}
@keyframes pulse {
  0% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.2); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* Yüzük */
.ring {
  position: absolute;
  width: 100px;
  pointer-events: none;
  z-index: 1;
}
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.static-ring { animation: spin 3s linear infinite; }

/* Gollum */
#gollum2 {
  position: absolute;
  bottom: 20px;
  right: -300px;
  height: 150px;
  display: none;
  z-index: 5;
}
#gollum2.run {
  display: block;
  animation: runAcross 4s linear forwards;
}
@keyframes runAcross {
  from { right: -300px; }
  to   { right: 100vw; }
}

/* Sauron */
#sauron-container {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 9;
}
#sauron {
  width: 40vmin;
  opacity: 1;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 0 80px red);
}

/* Gandalf */
#gandalf {
  position: absolute;
  right: -200px;
  bottom: 20%;
  height: 200px;
  display: none;
  z-index: 6;
}
#gandalf.show {
  display: block;
  animation: gandalfIn 4s linear forwards;
}
@keyframes gandalfIn {
  from { right: -200px; }
  to   { right: 60%; }
}

/* Patlama */
#explosion {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 300px; /* Büyütülmüş patlama efekti */
  display: none;
  z-index: 20;
}

/* Shire */
#shire {
  position: fixed;
  bottom: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  z-index: 0; /* En arkada kalır */
}

@keyframes shireSlide {
  to {
    bottom: 0;
  }
}


@keyframes shireSlide {
  to {
    bottom: 0;
  }
}

}
@keyframes shireSlide {
  0% { bottom: -100%; }
  100% { bottom: 0; }
}