/* Turkish Spa — efekt: plan levhası çizimi + render önizlemesi (M8, K4d). Kullanım: BENIOKU.md. tokens.css --hareket-* okunur.
   Sayfanın plan düzeni (M5: .plan, .plan__oda, .plan__nokta + bakış kaması ::before) olduğu gibi kalır; burada yalnız giriş
   durumları, çizgi katmanı, önizleme kartı ve etkin kama. JS yalnız sınıf, öznitelik ve CSSOM (konum, --pc-*) yazar. */

.efekt-pc {
  --pc-egri: var(--hareket-egri, cubic-bezier(0.2, 0.7, 0.2, 1));
  position: relative;
}

/* Giriş — gizleme yalnız ekranda ve hareket serbestken (betik bu sınıfları başka durumda koymaz; bu bir güvencedir) */
@media screen and (prefers-reduced-motion: no-preference) {
  .efekt-pc--gizli-plan > :not([data-3d^="render:"], .efekt-pc__cizgi, .efekt-pc__onizleme) { opacity: 0; }
  .efekt-pc--gizli-nokta > [data-3d^="render:"] { opacity: 0; scale: 0.6; }
}
.efekt-pc--giris > :not([data-3d^="render:"]) { transition: opacity var(--hareket-sure, 700ms) var(--pc-egri); }
.efekt-pc--giris > [data-3d^="render:"] {
  transform-origin: 0 0;   /* M5: translate(-50%, -50%) — ölçek noktanın merkezinde kalsın */
  transition:
    opacity var(--hareket-sure-kisa, 500ms) var(--pc-egri) var(--pc-gecikme, 0ms),
    scale var(--hareket-sure-kisa, 500ms) var(--pc-egri) var(--pc-gecikme, 0ms);
}

.efekt-pc__cizgi {
  position: absolute;
  display: block;
  overflow: hidden;            /* plan görseli gibi viewBox'a kırpılır (DXF kırpımının dışındaki çizgiler görünmez) */
  pointer-events: none;
}
.efekt-pc__cizgi path {
  stroke-dasharray: var(--pc-uzunluk, 100000) var(--pc-uzunluk, 100000);
  stroke-dashoffset: var(--pc-uzunluk, 100000);
}
.efekt-pc--ciz .efekt-pc__cizgi path {
  animation: efekt-pc-ciz var(--pc-sure, 840ms) var(--pc-egri) var(--pc-gecikme, 0ms) both;
}
@keyframes efekt-pc-ciz { to { stroke-dashoffset: 0; } }

/* Etkin nokta: bakış kaması belirginleşir (M5'in kaması: conic-gradient, scale 2.2, açı noktaya özgü rotate) */
.efekt-pc [data-3d^="render:"]::before { transition: scale var(--gecis, 320ms) var(--pc-egri), background var(--gecis, 320ms); }
.efekt-pc [data-3d^="render:"].efekt-pc__nokta--etkin { z-index: 2; box-shadow: 0 0 0 2px var(--zemin-2, #FBF8F3), 0 0 0 4px var(--sus, #B08D57); }
.efekt-pc [data-3d^="render:"].efekt-pc__nokta--etkin::before {
  scale: 3.4;
  background: conic-gradient(from 60deg, transparent 0 0, color-mix(in srgb, var(--renk-petrol, #224256) 62%, transparent) 0 60deg, transparent 60deg);
}

/* Önizleme kartı (role=tooltip; aria-describedby ile noktaya bağlı) */
.efekt-pc__onizleme {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: min(15rem, 56%);
  margin: 0;
  padding: 0.45rem 0.45rem 0.55rem;
  background: var(--zemin-2, #FBF8F3);
  color: var(--metin, #2B241D);
  border: 1px solid var(--cizgi-renk, rgb(43 36 29 / 0.14));
  border-radius: var(--yaricap-2, 6px);
  box-shadow: 0 1px 2px rgb(43 36 29 / 0.08), 0 14px 32px -10px rgb(43 36 29 / 0.32);
  opacity: 0;
  translate: 0 6px;
  transition: opacity var(--gecis, 320ms) var(--pc-egri), translate var(--gecis, 320ms) var(--pc-egri);
  pointer-events: none;
  cursor: pointer;
}
.efekt-pc__onizleme[hidden] { display: none; }
.efekt-pc__onizleme--altta { translate: 0 -6px; }
.efekt-pc__onizleme--acik { opacity: 1; translate: none; pointer-events: auto; }
.efekt-pc__onizleme picture,
.efekt-pc__onizleme img {
  display: block;
  width: 100%;
  height: auto;
}
.efekt-pc__onizleme img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 3px;
  background: var(--zemin-3, #E6DDCD);
  transition: opacity var(--gecis-hizli, 160ms);
}
.efekt-pc__onizleme--yukleniyor img { opacity: 0; }
.efekt-pc__baslik {
  margin: 0.45rem 0.15rem 0;
  font: 500 var(--fs--1, 0.85rem)/1.3 var(--font-govde, system-ui, sans-serif);
  color: var(--metin, #2B241D);
}
.efekt-pc__no {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.85em;
  letter-spacing: 0.02em;
  color: var(--sus-metin, #6F5429);
}
.efekt-pc__ipucu {
  margin: 0.3rem 0.15rem 0;
  font: 500 var(--fs--2, 0.75rem)/1.2 var(--font-govde, system-ui, sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vurgu, #224256);
}

@media (prefers-reduced-motion: reduce) {
  .efekt-pc__onizleme,
  .efekt-pc__onizleme img,
  .efekt-pc [data-3d^="render:"]::before { transition: none; }
  .efekt-pc__onizleme--altta,
  .efekt-pc__onizleme { translate: none; }
}