html, body {
  margin: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
  cursor: none;
  -webkit-user-select: none;
  user-select: none;
}

#sahne { position: fixed; top: 0; right: 0; bottom: 0; left: 0; }

/* Döndürülmüş ekran (index.php: /?dondur=90|270): sahne pencerenin ters ölçüsünde kurulur ve çevrilir */
.dondur-90 #sahne, .dondur-90 #bos,
.dondur-270 #sahne, .dondur-270 #bos {
  right: auto; bottom: auto;
  width: 100vh; height: 100vw;
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
}
.dondur-90 #sahne, .dondur-90 #bos { transform: rotate(90deg) translateY(-100%); -webkit-transform: rotate(90deg) translateY(-100%); }
.dondur-270 #sahne, .dondur-270 #bos { transform: rotate(-90deg) translateX(-100%); -webkit-transform: rotate(-90deg) translateX(-100%); }

.slayt {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  will-change: transform, opacity;
}

/* Afiş ekran oranına uymadığında boşluğu dolduran bulanık arka plan (40 px'lik kopya büyütülür) */
.slayt .arka {
  position: absolute;
  top: -8%; left: -8%;
  width: 116%; height: 116%;
  object-fit: cover;
  filter: blur(28px) brightness(.55);
  -webkit-filter: blur(28px) brightness(.55);
}

.slayt .on {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  animation: yakinlas 11s linear forwards;
  -webkit-animation: yakinlas 11s linear forwards;
}
.slayt.dolu .on { object-fit: cover; }

@keyframes yakinlas { from { transform: scale(1); } to { transform: scale(1.045); } }
@-webkit-keyframes yakinlas { from { -webkit-transform: scale(1); } to { -webkit-transform: scale(1.045); } }

/* Geçişler */
.gir-solma  { animation: gir-solma 1.4s ease-out both; }
.cik-solma  { animation: cik-solma 1.4s ease-in both; }
.gir-kaydir { animation: gir-kaydir 1.1s cubic-bezier(.22,.8,.24,1) both; }
.cik-kaydir { animation: cik-kaydir 1.1s cubic-bezier(.5,0,.6,.4) both; }
.gir-yukari { animation: gir-yukari 1.2s cubic-bezier(.22,.8,.24,1) both; }
.cik-yukari { animation: cik-yukari 1.2s ease-in both; }

@keyframes gir-solma  { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
@keyframes cik-solma  { from { opacity: 1; } to { opacity: 0; } }
@keyframes gir-kaydir { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes cik-kaydir { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-35%); opacity: .2; } }
@keyframes gir-yukari { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes cik-yukari { from { transform: scale(1); opacity: 1; } to { transform: scale(.92); opacity: 0; } }

#bos {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F4EDE1;
}
#bos[hidden] { display: none; }
#bos img { width: min(60vw, 60vh); height: auto; }

@media (prefers-reduced-motion: reduce) {
  .slayt .on { animation: none; }
}