/* Turkish Spa — efekt: oda render'larında derinlik (M7, K4d). Kullanım: BENIOKU.md. tokens.css --hareket-* okur.
   Kök = sayfanın oda bölümü; sayfanın kendi resimlerine yalnız sınıf eklenir. Satır içi stil yok (JS yalnız CSSOM). */

/* büyük render: çerçevesinde kırpılır, kaydırmada ölçeklenir */
.efekt-rd__resim {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--renk-tas, #E6DDCD) center / cover no-repeat;
}
.efekt-rd__resim img {
  position: relative;
  transform-origin: 50% 50%;
  transition: opacity var(--hareket-sure-uzun, 900ms) var(--hareket-egri, cubic-bezier(0.2, 0.7, 0.2, 1));
}
/* yüklenirken: küçük önizleme bulanık (resim üstünde belirir). Sözde öğe hep var, yalnız saydamlığı değişir:
   eklenip kaldırılması kaydırma sırasında yerleşim (layout) hesabı tetikliyordu */
.efekt-rd__resim::before {
  content: "";
  position: absolute;
  inset: -8%;
  background: inherit;
  filter: blur(14px);
  opacity: 0;
  pointer-events: none;
}
.efekt-rd__resim--bekliyor::before { opacity: 1; }
.efekt-rd__resim--bekliyor img { opacity: 0; }

/* küçük resim düğmesi: resmin tamamı, 3D rozeti üstte kalır */
.efekt-rd__sec {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: zoom-in;
  z-index: 1;   /* üzerine gelince ölçeklenen resim (kendi yığın bağlamı) düğmenin önüne geçmesin */
}
.efekt-rd__sec ~ [data-3d] { z-index: 2; } /* sayfanın 3D rozeti düğmenin üstünde kalır */
/* büyükte gösterilen: petrol halka + açık iç çizgi (açık ve koyu resimde de ≥ 3:1) */
.efekt-rd__sec[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--renk-petrol, #1F4A5A), inset 0 0 0 3.5px rgb(255 255 255 / 0.9); }
.efekt-rd__sec ~ picture { display: block; overflow: hidden; }
.efekt-rd__sec ~ picture img { transition: transform var(--hareket-sure-kisa, 500ms) var(--hareket-egri, cubic-bezier(0.2, 0.7, 0.2, 1)); }
.efekt-rd__sec:focus-visible ~ picture img { transform: scale(1.03); }
@media (hover: hover) { .efekt-rd__sec:hover ~ picture img { transform: scale(1.03); } } /* dokunmatikte yapışkan hover yok */

/* takas: eski resmin kopyası üstte söner */
.efekt-rd__ortu {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.efekt-rd__ortu img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; }

@media (prefers-reduced-motion: reduce) {
  .efekt-rd__resim img, .efekt-rd__sec ~ picture img { transition: none; transform: none !important; }
  .efekt-rd__resim--bekliyor img { opacity: 1; }
}