/* Turkish Spa — efekt: dalga motifi çizimi (M8, K4d). Kullanım: BENIOKU.md. tokens.css --hareket-* okunur.
   Öğenin kendi görünümü (M5: .dalga = background + mask) hiç değişmez; çizim sürerken yalnız maske yerine aynı geometride satır
   içi SVG görünür, bitince kalkar. JS yalnız sınıf + --mc-* özelliği yazar (satır içi stil yok). */

.efekt-mc { position: relative; }
/* Gizleme yalnız ekranda ve hareket serbestken (betik bu sınıfı başka durumda zaten koymaz; bu bir güvencedir) */
@media screen and (prefers-reduced-motion: no-preference) {
  .efekt-mc.efekt-mc--bekle { opacity: 0; }
}

/* Çizgi motif: maske ve zemin kapanır, SVG (zemin rengiyle, currentColor) çizer */
.efekt-mc.efekt-mc--ciz {
  -webkit-mask: none;
  mask: none;
  background: none;
}
.efekt-mc__svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  color: var(--mc-renk, currentColor);
  pointer-events: none;
}
.efekt-mc__svg path {
  stroke-dasharray: var(--mc-uzunluk, 100000) var(--mc-uzunluk, 100000);
  stroke-dashoffset: var(--mc-uzunluk, 100000);
  animation: efekt-mc-ciz var(--mc-sure, 600ms) var(--hareket-egri, cubic-bezier(0.2, 0.7, 0.2, 1)) var(--mc-gecikme, 0ms) both;
}
@keyframes efekt-mc-ciz { to { stroke-dashoffset: 0; } }

/* Dolu motif / başka maske yerleşimi: öğe soldan sağa açılır */
.efekt-mc.efekt-mc--ac { clip-path: inset(0 100% 0 0); }
.efekt-mc.efekt-mc--ac.efekt-mc--acik {
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--mc-sure, 900ms) var(--hareket-egri, cubic-bezier(0.2, 0.7, 0.2, 1));
}

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