/* Motorun çizdiği katmanlar. Hem telefon hem konsol önizlemesi kullanır. */
.sahne {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}
.sahne .kat-zemin,
.sahne .kat-medya,
.sahne .kat-fx {
  position: absolute;
  inset: 0;
}
.sahne .kat-zemin {
  /* Renk geçişini CSS'e bırakmıyoruz: her kareyi motor hesaplıyor.
     transition burada senkronu bozar, bilinçli olarak yok. */
  will-change: background-color;
}
.sahne .kat-medya {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6%;
  pointer-events: none;
}
.sahne .kat-medya a { pointer-events: auto; }
.sahne .kat-medya img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
}
.sahne .kat-fx {
  pointer-events: none;
  /* Canvas "replaced element"tir: inset:0 tek başına esnetmez, kendi
     genişlik/yükseklik özniteliğini kullanır. Açıkça %100 vermezsek
     bitmap boyutunda (retinada 2 kat) görünür ve çizim büyük çıkar. */
  width: 100%;
  height: 100%;
}

.sahne .yazi {
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  letter-spacing: -0.02em;
  word-break: break-word;
}

.sahne .bekleme {
  text-align: center;
  color: #fff;
  font-size: clamp(17px, 5vw, 30px);
  line-height: 1.5;
  font-weight: 600;
  max-width: 20ch;
}
.sahne .bekleme small {
  display: block;
  margin-top: 1.1em;
  font-size: 0.62em;
  font-weight: 500;
  opacity: 0.62;
  line-height: 1.5;
}

.sahne .geri-sayim {
  color: #fff;
  font-weight: 900;
  font-size: clamp(64px, 32vw, 220px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  /* Sayı motorda her saniye değişiyor — CSS transition senkronu bozmasın
     diye burada da (kat-zemin gibi) bilinçli olarak animasyon yok. */
}

/* ---------------------------------------------------------- kapanış ekranı
   Gösterinin son karesi — binlerce kişinin ekranında dakikalarca kalır.
   Tüm hareket transform/opacity üzerinden yapılır (compositor'da döner,
   telefonu yormaz) ve çizim döngüsüne hiç dokunmaz. */

.sahne .tesekkur {
  position: relative;
  text-align: center;
  color: #fff;
  width: 100%;
  max-width: 34ch;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Arkada yavaşça nefes alan ışık — ekranı tek renk siyahtan çıkarır */
.sahne .tesekkur-isik {
  position: absolute;
  left: 50%; top: 45%;
  width: 150vmax; height: 150vmax;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle closest-side,
    var(--vurgu, #ffd48a) 0%, transparent 70%);
  opacity: 0.18;
  pointer-events: none;
  animation: tesekkurNefes 7s ease-in-out infinite alternate;
}
@keyframes tesekkurNefes {
  from { transform: translate(-50%, -50%) scale(0.82); opacity: 0.10; }
  to   { transform: translate(-50%, -50%) scale(1.06); opacity: 0.24; }
}

.sahne .tesekkur > *:not(.tesekkur-isik) {
  position: relative;
  opacity: 0;
  transform: translateY(14px);
  animation: tesekkurGir 1s cubic-bezier(.16,.8,.3,1) forwards;
}
@keyframes tesekkurGir {
  to { opacity: 1; transform: translateY(0); }
}

.sahne .tesekkur-logo {
  width: auto;
  max-width: 58%;
  max-height: 18vh;
  margin-bottom: 1.4em;
  object-fit: contain;
  animation-delay: 0.1s;
}

.sahne .tesekkur-baslik {
  font-size: clamp(28px, 9vw, 54px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  animation-delay: 0.35s;
}

.sahne .tesekkur-alt {
  margin-top: 1.1em;
  font-size: clamp(14px, 4vw, 18px);
  font-weight: 500;
  line-height: 1.55;
  opacity: 0;
  color: rgba(255, 255, 255, 0.68);
  white-space: pre-line;
  animation-delay: 0.65s;
}
/* animation-delay'li kural opacity:0'ı ezmesin diye bitiş değeri netleştirilir */
.sahne .tesekkur-alt { animation-name: tesekkurGirSoluk; }
@keyframes tesekkurGirSoluk {
  to { opacity: 0.68; transform: translateY(0); }
}

.sahne .tesekkur-cizgi {
  width: 46px; height: 2px;
  margin-top: 1.8em;
  border-radius: 2px;
  background: var(--vurgu, #ffd48a);
  opacity: 0;
  animation-delay: 0.85s;
  animation-name: tesekkurGirCizgi;
}
@keyframes tesekkurGirCizgi {
  to { opacity: 0.55; transform: translateY(0) scaleX(1); }
}

.sahne .tesekkur-buton {
  display: inline-block;
  margin-top: 2.2em;
  padding: 0.95em 2.3em;
  border-radius: 100px;
  background: #fff;
  color: #000;
  font-size: clamp(15px, 4.2vw, 18px);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  animation-delay: 1.1s;
}
.sahne .tesekkur-buton:active { transform: scale(0.97); }