/* Turkish Spa — efekt: kapak derinliği (M7, K4d). Kullanım: BENIOKU.md. tokens.css'in --hareket-* belirteçlerini okur.
   Kök = sayfanın kemeri (overflow: hidden, kendi resmi içinde). Satır içi stil yok: JS yalnız CSSOM ile konum/transform yazar. */

[data-efekt="kapak-derinlik"] { position: relative; }

.efekt-kd__yigin {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--hareket-sure-uzun, 900ms) var(--hareket-egri, cubic-bezier(0.2, 0.7, 0.2, 1));
}
.efekt-kd--hazir .efekt-kd__yigin { opacity: 1; }

/* object-fit: cover kutusu (JS boyutlar). Hazır olunca %1,2 taşar: zemin kaydığında kemer kenarı açılmasın.
   Belirme ile aynı anda, aynı sürede: başlangıçta sayfanın resmiyle birebir. */
.efekt-kd__alan {
  position: absolute;
  transform: scale(1);
  transition: transform var(--hareket-sure-uzun, 900ms) var(--hareket-egri, cubic-bezier(0.2, 0.7, 0.2, 1));
}
.efekt-kd--hazir .efekt-kd__alan { transform: scale(1.012); }

.efekt-kd__katman {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.efekt-kd__katman > picture,
.efekt-kd__katman > picture img,
.efekt-kd__aplik img {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  user-select: none;
}
.efekt-kd__aplik { position: absolute; display: block; }

/* Aplik camlarında nefes: ek, yumuşak sıcak hale; iki yarım döngü, her biri tek eğriyle (hızlı başlar, yavaşça varır) */
.efekt-kd__isik {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 228 182 / 0.6), rgb(255 206 142 / 0.2) 48%, rgb(255 200 130 / 0) 100%);
  mix-blend-mode: screen;
  opacity: 0.2;
  animation: efekt-kd-nefes 8s infinite;
  will-change: opacity;
}
@keyframes efekt-kd-nefes {
  0% { opacity: 0.2; animation-timing-function: var(--hareket-egri, cubic-bezier(0.2, 0.7, 0.2, 1)); }
  50% { opacity: 0.6; animation-timing-function: var(--hareket-egri, cubic-bezier(0.2, 0.7, 0.2, 1)); }
  100% { opacity: 0.2; }
}
.efekt-kd--gizli .efekt-kd__isik { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .efekt-kd__yigin { display: none; }
}