/* Turkish Spa — efekt: 3D giriş bölümü (M7, K4c). Kullanım: BENIOKU.md. tokens.css'i okur (yoksa yedek değerler).
   Satır içi stil yok: JS yalnız CSSOM ile birkaç değişken (--g3-x/y/r) ve SVG özniteliği yazar. */

.efekt-g3,
[data-efekt="giris-3d"] {
  --g3-zemin: var(--renk-petrol-gece, #0F2A38);
  --g3-krem: var(--renk-krem-metin, #EFE6D6);
  --g3-sis: var(--renk-sis, #9FB0B8);
  --g3-pirinc: var(--renk-pirinc-acik, #D4B477);
  --g3-pirinc-parlak: #F3DFA8;
  --g3-egri: var(--egri, cubic-bezier(0.2, 0.7, 0.2, 1));
  position: relative;
  display: grid;
  align-items: center;
  min-height: max(40rem, 100svh);
  overflow: hidden;
  isolation: isolate;
  background: var(--g3-zemin);
  color: var(--g3-krem);
  text-align: center;
  font-family: var(--font-govde, var(--font-manrope, "Manrope", system-ui, sans-serif));
}

/* Sahne: yedek resim → WebGL koridor → (varsa) canlı 3D → perde */
.efekt-g3__sahne { position: absolute; inset: 0; z-index: -1; }
.efekt-g3__yedek,
.efekt-g3__yedek img,
.efekt-g3__tuval,
.efekt-g3__canli,
.efekt-g3__perde {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.efekt-g3__yedek img { object-fit: cover; object-position: 50% 44%; filter: saturate(0.82); }
.efekt-g3__tuval { display: block; opacity: 0; transition: opacity 900ms var(--g3-egri); }
.efekt-g3--gl .efekt-g3__tuval { opacity: 1; }
.efekt-g3__canli { opacity: 0; pointer-events: none; transition: opacity 1.6s var(--g3-egri); }
.efekt-g3--canli .efekt-g3__canli { opacity: 1; }
.efekt-g3--canli .efekt-g3__tuval { opacity: 0; transition-duration: 1.6s; }
.efekt-g3__perde {
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--g3-zemin) 0, rgb(15 42 56 / 0) 15%, rgb(15 42 56 / 0) 85%, var(--g3-zemin) 100%),
    radial-gradient(ellipse 58% 62% at 50% 50%, rgb(15 42 56 / 0.44), rgb(15 42 56 / 0.58) 55%, rgb(11 32 43 / 0.88) 100%);
}

/* İçerik */
.efekt-g3__ic {
  position: relative;
  display: grid;
  justify-items: center;
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: var(--sp-9, 6rem) var(--kenar-boslugu, 1rem);
  text-shadow: 0 1px 18px rgb(15 42 56 / 0.65);
}
.efekt-g3__ust {
  margin: 0 0 var(--sp-4, 1rem);
  font: 500 var(--fs--2, 0.8rem)/1 var(--font-govde, var(--font-manrope, system-ui));
  letter-spacing: var(--iz-genis, 0.18em);
  text-transform: uppercase;
  color: var(--g3-pirinc);
}
.efekt-g3__baslik {
  margin: 0;
  max-width: 18ch;
  font: 400 var(--fs-4, 3rem)/var(--lh-baslik, 1.15) var(--font-marcellus, "Marcellus", Georgia, serif);
  letter-spacing: 0.01em;
  color: var(--g3-krem);
}
.efekt-g3__metin {
  margin: var(--sp-5, 1.5rem) 0 0;
  max-width: 36rem;
  font-size: var(--fs-0, 1rem);
  line-height: var(--lh-govde, 1.6);
  color: rgb(239 230 214 / 0.9);
}

/* Pirinç halka düğme */
.efekt-g3__halka {
  --g3-cap: clamp(10.5rem, 8.6rem + 6vw, 13.75rem);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--g3-cap);
  height: var(--g3-cap);
  margin: var(--sp-7, 3rem) 0 var(--sp-6, 2rem);
  padding: 0 1.75rem;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(15 42 56 / 0.42), rgb(15 42 56 / 0.62) 68%, rgb(15 42 56 / 0.3) 100%);
  color: var(--g3-pirinc);
  font: 400 var(--fs-0, 1.05rem)/1.32 var(--font-marcellus, "Marcellus", Georgia, serif);
  letter-spacing: 0.06em;
  text-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 360ms var(--g3-egri), transform 360ms var(--g3-egri);
}
.efekt-g3__halka::before {        /* dinlenirken nefes alan sıcak hale (yalnız opaklık/ölçek: bileşikleştirici) */
  content: "";
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(212 180 119 / 0.2), rgb(212 180 119 / 0.07) 55%, transparent 100%);
  animation: efekt-g3-nefes 4.6s ease-in-out infinite;
  pointer-events: none;
}
.efekt-g3__halka-pirinc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 200deg, #6E5430, #E8CF94 11%, #8A6A3C 24%, #CDA866 37%, #5E4527 50%, #F1DDA8 62%, #8A6A3C 75%, #D4B477 88%, #6E5430);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  animation: efekt-g3-donus 16s linear infinite;
  pointer-events: none;
}
.efekt-g3__halka-isik {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 232 186 / 0.5) 0%, rgb(222 190 128 / 0.3) 36%, rgb(212 180 119 / 0.1) 60%, transparent 71%);
  transform: scale(0.3);
  opacity: 0;
  transition: transform 650ms var(--g3-egri), opacity 650ms var(--g3-egri);
  pointer-events: none;
}
.efekt-g3__halka-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
  pointer-events: none;
}
.efekt-g3__halka-ic { fill: none; stroke: currentColor; stroke-width: 0.8; opacity: 0.5; }
.efekt-g3__halka-ilerleme {
  fill: none;
  stroke: var(--g3-pirinc-parlak);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0;
  transition: stroke-dashoffset 260ms linear, opacity 300ms;
}
.efekt-g3__halka-metin { position: relative; }
.efekt-g3__halka-metin > span { display: block; }
.efekt-g3__halka:hover,
.efekt-g3__halka:focus-visible,
[data-g3-durum="yukleniyor"] .efekt-g3__halka { color: #FFF4DC; }
.efekt-g3__halka:hover .efekt-g3__halka-isik,
.efekt-g3__halka:focus-visible .efekt-g3__halka-isik,
[data-g3-durum="yukleniyor"] .efekt-g3__halka-isik { transform: scale(1); opacity: 1; }
.efekt-g3__halka:active { transform: scale(0.97); }
.efekt-g3__halka:focus-visible { outline: var(--odak-halka, 3px) solid var(--g3-pirinc); outline-offset: 6px; }
[data-g3-durum="yukleniyor"] .efekt-g3__halka-ilerleme { opacity: 1; }
[data-g3-durum="yukleniyor"] .efekt-g3__halka { cursor: progress; }
.efekt-g3--titre .efekt-g3__halka { animation: efekt-g3-titre 700ms var(--g3-egri) 1; }

/* Özellik satırları */
.efekt-g3__ozellikler {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1, 0.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.efekt-g3__satir {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  padding: 0.3rem 0.75rem;
  border: 0;
  border-radius: var(--yaricap-hap, 999px);
  background: none;
  color: var(--g3-krem);
  font: 400 var(--fs-0, 1rem)/1.4 var(--font-govde, var(--font-manrope, system-ui));
  text-shadow: inherit;
  cursor: pointer;
}
.efekt-g3__satir span { border-bottom: 1px solid transparent; transition: border-color 240ms; }
.efekt-g3__satir:hover span,
.efekt-g3__satir:focus-visible span { border-color: rgb(212 180 119 / 0.65); }
.efekt-g3__satir:focus-visible { outline: 2px solid var(--g3-pirinc); outline-offset: 2px; }
.efekt-g3__ikon {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: var(--g3-pirinc);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (min-width: 900px) {
  .efekt-g3__ozellikler { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--sp-2, 0.5rem) var(--sp-5, 1.5rem); }
}
.efekt-g3__durum {
  min-height: 1.5em;
  margin: var(--sp-4, 1rem) 0 0;
  font-size: var(--fs--1, 0.9rem);
  color: var(--g3-pirinc);
}
.efekt-g3__not {
  margin: var(--sp-1, 0.25rem) 0 0;
  font-size: var(--fs--2, 0.8rem);
  color: var(--g3-sis);
}

/* Tam ekran 3D katmanı (body'ye eklenir): halkadan açılan iris */
html.efekt-g3-acik,
html.efekt-g3-acik body { overflow: hidden; }
.efekt-g3-katman {
  position: fixed;
  inset: 0;
  z-index: 1000;
  height: 100vh;
  height: 100dvh;
  background: var(--renk-petrol-gece, #0F2A38);
  opacity: 0;
  pointer-events: none;
  clip-path: circle(var(--g3-r, 0px) at var(--g3-x, 50%) var(--g3-y, 50%));
  transition: clip-path 800ms cubic-bezier(0.7, 0, 0.2, 1), opacity 220ms linear;
}
.efekt-g3-katman[data-durum="hazir"] {
  opacity: 1;
  pointer-events: auto;
  clip-path: circle(150vmax at var(--g3-x, 50%) var(--g3-y, 50%));
}
.efekt-g3-katman[data-durum="kapaniyor"] {
  opacity: 0;
  clip-path: circle(150vmax at var(--g3-x, 50%) var(--g3-y, 50%));
  transition: opacity 380ms ease;
}
.efekt-g3-katman__sahne {
  position: absolute;
  inset: 0;
  --ae-accent: var(--renk-pirinc-acik, #D4B477);
  --ae-accent-text: var(--renk-pirinc-acik, #D4B477);
  --ae-on-accent: var(--renk-petrol-gece, #0F2A38);
  --ae-bg: var(--renk-petrol-gece, #0F2A38);
  --ae-bg-gradient: radial-gradient(130% 95% at 50% 32%, #1E4152 0%, #0F2A38 58%, #0A1F2A 100%);
  --ae-glass: rgb(15 42 56 / 0.72);
  --ae-glass-strong: rgb(15 42 56 / 0.9);
  --ae-fg: var(--renk-krem-metin, #EFE6D6);
  --ae-muted: var(--renk-sis, #9FB0B8);
  --ae-line: rgb(239 230 214 / 0.16);
  --ae-ring: var(--renk-pirinc-acik, #D4B477);
  --ae-poche: var(--renk-krem-metin, #EFE6D6);
  --ae-font: var(--font-govde, var(--font-manrope, system-ui));
}

/* Hafif sürüm (dar ekran / az bellek / veri tasarrufu) */
.efekt-g3--hafif .efekt-g3__halka::before { animation: none; opacity: 0.8; }
.efekt-g3--hafif .efekt-g3__ic { padding-block: var(--sp-8, 4rem); }

@keyframes efekt-g3-donus { to { transform: rotate(1turn); } }
@keyframes efekt-g3-nefes {
  0%, 100% { opacity: 0.55; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.04); }
}
@keyframes efekt-g3-titre {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(0.95); }
  70% { transform: scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  .efekt-g3__tuval,
  .efekt-g3__canli { display: none; }
  .efekt-g3__halka-pirinc,
  .efekt-g3__halka::before,
  .efekt-g3--titre .efekt-g3__halka { animation: none; }
  .efekt-g3__halka-isik,
  .efekt-g3__halka,
  .efekt-g3-katman,
  .efekt-g3-katman[data-durum] { transition: none; }
}