/* =====================================================================
   Arda Eşberk Akademi 2.0 — Perde tabanlı video + hotspot motoru
   ---------------------------------------------------------------------
   §1 · Ortak kural   →  tokenler, .stage, .act kabuğu
   §2 · Anatomi       →  poster, idle (Ken-Burns), action video,
                         yönlü scrim, copy overlay, hotspot
   §3 · Geçişler      →  .flash (eşik beyazı, ~150ms; reduced-motion = soft fade)
   ===================================================================== */

:root {
  /* Palet (manifest §0 / §3) */
  --ink:        #05080D;
  --navy:       #0D305E;
  --teal:       #5AB6B7;
  --cyan:       #4CE7F2;
  --gold:       #F0BB3D;
  --paper:      #F1F0EB;

  /* Tipografi */
  --font-head:  "Cinzel", serif;
  --font-body:  "Cormorant Garamond", Georgia, serif;
  --font-label: "Inter", system-ui, -apple-system, sans-serif;

  /* Hareket */
  --t-curtain:  500ms;          /* perde cross-fade */
  --t-flash:    150ms;          /* eşik beyazı */
  --t-flash-soft: 400ms;        /* reduced-motion */
  --easing:     cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Erişilebilirlik */
  --touch-min:  48px;
  --copy-max:   64ch;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--navy);
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  font-size: clamp(16px, 1.05vw + 12px, 19px);
  line-height: 1.5;
}

img, video { display: block; max-width: 100%; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ====================================================================
   §1 · Stage + .act kabuğu
   ==================================================================== */

.stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy);
}

.act {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--navy);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  transition:
    opacity    var(--t-curtain) var(--easing),
    visibility 0ms              linear var(--t-curtain);
  will-change: opacity;

  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

.act.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity    var(--t-curtain) var(--easing),
    visibility 0ms              linear 0ms;
}

/* JS yok / yedek erişilebilirlik */
.no-js .act {
  position: relative;
  opacity: 1; visibility: visible; pointer-events: auto;
  height: 100vh;
}
.no-js body { overflow: auto; }

/* ====================================================================
   §2 · Perde anatomisi (Eşik = referans template)
   Katman sırası (alttan üste):
     act-poster  →  act-idle  →  act-action  →  act-scrim  →  act-copy  →  hotspot
   ==================================================================== */

.act-poster,
.act-idle,
.act-action {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

/* LCP poster — ilk kare; idle yüklenince üzeri kapanır */
.act-poster {
  z-index: 1;
  object-fit: cover;
  background: var(--navy);
}

/* Idle: dünya görseli + ince Ken-Burns; sadece aktif perdede oynar */
.act-idle {
  z-index: 2;
  background-color: var(--navy);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.06);
  animation: kenburns 32s ease-in-out infinite alternate;
  will-change: transform;
}
.act:not(.is-active) .act-idle { animation-play-state: paused; }

/* Eşik idle — manifest §3, satır 3: 02-esik-dunya.jpg
   Görsel yüklenince altta görünür; 404 olursa .act-idle'ın navy
   background-color'ı + üstteki tinted radial'lar bir "manzara hissi"
   bırakır (kullanıcı boş ekran görmez). */
.act-idle--esik {
  background-image:
    radial-gradient(120% 90% at 50% 55%, rgba(90, 182, 183, 0.10), transparent 60%),
    radial-gradient(80% 60% at 50% 70%,  rgba(240, 187, 61, 0.08), transparent 70%),
    url("/assets/img/02-esik-establishing.jpg");
}

/* Gölge — yeraltı su salonu (manifest §3, satır 6: 03-golge-dunya.jpg).
   Daha soğuk/derin tint (gölgeye iniş). */
.act-idle--golge {
  background-image:
    radial-gradient(120% 90% at 50% 60%, rgba(76, 231, 242, 0.08), transparent 60%),
    radial-gradient(90% 70% at 50% 80%,  rgba(13, 48, 94, 0.22),  transparent 70%),
    url("/assets/img/03-golge-establishing.jpg");
}

/* Kahraman — kalbinde ışık olan tapınak (manifest §3, satır 9: 04-kahraman-dunya.jpg).
   Sıcak altın-turkuaz tint (uyanış). */
.act-idle--kahraman {
  background-image:
    radial-gradient(120% 90% at 50% 50%, rgba(240, 187, 61, 0.14), transparent 60%),
    radial-gradient(80% 60% at 50% 72%,  rgba(240, 120, 40, 0.10), transparent 70%),
    url("/assets/img/04-kahraman-kapi.jpg");   /* ateş kapısı (dokun) */
}

/* Yönetmen — zirve teras, DIRECTOR koltuğu (manifest §3, satır 14: 05-yonetmen-dunya.jpg).
   Electric-cyan modern dokunuş. */
.act-idle--yonetmen {
  background-image:
    radial-gradient(120% 90% at 50% 45%, rgba(76, 231, 242, 0.09), transparent 60%),
    radial-gradient(80% 60% at 50% 75%,  rgba(240, 187, 61, 0.07), transparent 70%),
    url("/assets/img/05-yonetmen-idle.jpg");
}

/* Açılış — gece şehri + altın oktagonal portal (manifest §3, satır 1: 00-acilis-hero.jpg). */
.act-idle--acilis {
  background-image:
    radial-gradient(90% 70% at 50% 48%, rgba(240, 187, 61, 0.12), transparent 62%),
    radial-gradient(120% 90% at 50% 50%, rgba(76, 231, 242, 0.06), transparent 60%),
    url("/assets/atmos/atmos-sehir.jpg");
}

/* Naga mahfili — kalp/iç oda, 8-köşeli yıldız (manifest §3, satır 12: 04-naga-mahfili.jpg).
   Tepeden altın huzme. */
.act-idle--naga {
  background-image:
    radial-gradient(90% 70% at 50% 42%, rgba(240, 187, 61, 0.12), transparent 60%),
    radial-gradient(100% 80% at 50% 78%, rgba(13, 48, 94, 0.20), transparent 72%),
    url("/assets/img/04-naga-idle.jpg");
}

/* Final — şehir film-seti reveal (manifest §3, satır 15: 06-final-filmseti.jpg). */
.act-idle--final {
  background-image:
    radial-gradient(110% 80% at 50% 50%, rgba(240, 187, 61, 0.08), transparent 62%),
    url("/assets/img/06-final-poster.jpg");
}

@keyframes kenburns {
  0%   { transform: scale(1.06) translate3d(0, 0, 0); }
  100% { transform: scale(1.12) translate3d(-1%, -1.5%, 0); }
}

/* Action: yürüyüş klibi — varsayılan gizli; .is-playing ile öne çıkar */
.act-action {
  z-index: 3;
  opacity: 0;
  background: var(--ink);
  transition: opacity 280ms var(--easing);
}
.act-action.is-playing {
  opacity: 1;
  pointer-events: none;
}

/* Loop: yaşayan final klibi — perde aktifken idle üstünde sessiz döner.
   reduced-motion'da oynamaz, altta poster/idle kalır. */
.act-loop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  z-index: 2;            /* idle (2) üstü; ama scrim (4) altı */
  opacity: 0;
  transition: opacity 600ms var(--easing);
}
.act-loop.is-playing { opacity: 1; }

/* Yönlü scrim — yalnız alt üçte birde, ortayı/yüzü karartmadan
   yazıyı taşıyacak yumuşak bir gradient. Manifest §4: "tam-kare
   karartma YOK". */
.act-scrim {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.act-scrim--bottom {
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 45%,
      rgba(13, 48, 94, 0.55) 75%,
      rgba(5, 8, 13, 0.85) 100%
    );
}

/* ---------- Copy overlay ---------- */

.act-copy {
  position: absolute;
  z-index: 5;
  left: 0; right: 0;
  bottom: calc(var(--safe-bottom) + clamp(48px, 12vh, 140px));
  padding: 0 max(20px, var(--safe-left)) 0 max(20px, var(--safe-right));
  text-align: center;
  color: var(--paper);
}

.act-copy--center {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

/* FIX: aea-text-plate (cinematic CSS, sonra yüklenir) position:relative ile
   .act-copy'nin absolute'unu eziyordu → kopya akışa düşüp ekran dışına (üste)
   kaçıyordu (açılış hook + final slogan görünmez oluyordu). Yüksek özgüllük
   (0,2,0) ile absolute'u geri ver; plaka ::before bu absolute öğeye anchor olur. */
.act-copy.aea-text-plate { position: absolute; }

.kicker {
  display: inline-block;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: clamp(11px, 0.7vw + 9px, 13px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(90, 182, 183, 0.35);
}

.title {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(28px, 5vw + 8px, 64px);
  letter-spacing: 0.04em;
  line-height: 1.1;
  margin: 0;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.6),
    0 2px 28px rgba(0, 0, 0, 0.55);
}

.sub {
  margin: 16px auto 0;
  max-width: var(--copy-max);
  font-style: italic;
  font-size: clamp(16px, 1vw + 12px, 22px);
  line-height: 1.5;
  color: rgba(241, 240, 235, 0.92);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.85),
    0 2px 14px rgba(0, 0, 0, 0.6);
}

/* Kapı sözü — adımın anlamını mühürleyen tek satır */
.quote {
  margin: 18px auto 0;
  max-width: 46ch;
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(15px, 0.9vw + 11px, 20px);
  line-height: 1.5;
  color: rgba(90, 182, 183, 0.92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

/* ====================================================================
   Hotspot — ışıklı kapı, gerçek <button>, ≥48px, klavye + focus halkası
   ==================================================================== */

.hotspot {
  position: absolute;
  z-index: 6;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  padding: 12px 16px;
  border-radius: 999px;
  color: var(--paper);
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Eşik/Gölge/Kahraman — kapı kompozisyonda merkezde-yakın */
.hotspot--door,
.hotspot--star {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Naga — merkezde 8-köşeli yıldız (kapı değil); biraz daha iri yıldız */
.hotspot--star .hotspot-star { --size: 68px; }

/* Açılış — portal halkası, kompozisyondaki oktagonal portalın merkezi */
.hotspot--portal {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Yönetmen — DIRECTOR koltuğu, dikeyde biraz alta (koltuk konumu) */
.hotspot--chair {
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
}

/* 8 köşeli yıldız — kutsal imza, altın-turkuaz parıltı */
.hotspot-star {
  --size: 56px;
  width: var(--size);
  height: var(--size);
  display: block;
  /* iki 4-köşeli yıldız çarpışması = 8 köşeli */
  background:
    radial-gradient(circle at 50% 50%, rgba(240, 187, 61, 0.85), rgba(240, 187, 61, 0.0) 60%),
    conic-gradient(from 0deg,
      rgba(240, 187, 61, 0.95) 0deg,    transparent 22deg,
      rgba(90, 182, 183, 0.85) 45deg,   transparent 67deg,
      rgba(240, 187, 61, 0.95) 90deg,   transparent 112deg,
      rgba(90, 182, 183, 0.85) 135deg,  transparent 157deg,
      rgba(240, 187, 61, 0.95) 180deg,  transparent 202deg,
      rgba(90, 182, 183, 0.85) 225deg,  transparent 247deg,
      rgba(240, 187, 61, 0.95) 270deg,  transparent 292deg,
      rgba(90, 182, 183, 0.85) 315deg,  transparent 337deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 35%, transparent 70%);
          mask: radial-gradient(circle at 50% 50%, #000 35%, transparent 70%);
  border-radius: 50%;
  filter: drop-shadow(0 0 12px rgba(240, 187, 61, 0.5))
          drop-shadow(0 0 24px rgba(90, 182, 183, 0.35));
}

/* Çevresinde nazik nefes — dokun çağrısı */
.hotspot-pulse {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(240, 187, 61, 0.6);
  pointer-events: none;
  animation: hotspot-pulse 2.4s ease-out infinite;
}

@keyframes hotspot-pulse {
  0%   { transform: translate(-50%, -50%) scale(0.7);  opacity: 0.85; }
  70%  { transform: translate(-50%, -50%) scale(1.6);  opacity: 0;    }
  100% { transform: translate(-50%, -50%) scale(1.6);  opacity: 0;    }
}

/* Portal halkası — açılış; oktagonal çift halka, altın-turkuaz nefes */
.hotspot-ring {
  --r: 96px;
  width: var(--r);
  height: var(--r);
  display: block;
  border-radius: 50%;
  border: 2px solid rgba(240, 187, 61, 0.85);
  box-shadow:
    0 0 24px rgba(240, 187, 61, 0.45),
    inset 0 0 28px rgba(90, 182, 183, 0.30);
  position: relative;
}
.hotspot-ring::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px solid rgba(90, 182, 183, 0.7);
}
.hotspot--portal:hover .hotspot-ring,
.hotspot--portal:focus-visible .hotspot-ring {
  transform: scale(1.06);
  transition: transform 220ms var(--easing);
}

.hotspot-hint {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.hotspot:hover .hotspot-star,
.hotspot:focus-visible .hotspot-star {
  transform: scale(1.08);
  transition: transform 220ms var(--easing);
}

.hotspot:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 6px;
  border-radius: 999px;
}

/* Yürüyüş/aksiyon oynarken hotspot ve kopya geri çekilir */
.act.is-acting .hotspot,
.act.is-acting .act-copy {
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--easing);
}

/* ====================================================================
   GÖREV katmanı — yürüyüş bitince belirir (Eşik = hold-to-charge)
   ==================================================================== */
.act-task {
  position: absolute;
  inset: 0;
  z-index: 7;                 /* scrim(4)/copy(5)/hotspot(6) üstü */
  opacity: 0;
  visibility: hidden;
  /* ~0.4sn fade-in → walk son karesinden taş kapıya yumuşak crossfade */
  transition: opacity 400ms var(--easing), visibility 0ms linear 400ms;
}
.act-task.is-shown {
  opacity: 1;
  visibility: visible;
  transition: opacity 500ms var(--easing), visibility 0ms linear 0ms;
}

/* ====================================================================
   door-aligned — kapı görselini ve logoyu AYNI sabit-oranlı kutuda hizalar.
   Kutu, kapı görseli oranında (2048×1158) + cover-boyutunda + ekranda ortalı.
   Hem .door-stage (görsel) hem .door-key-layer (logo) bunu kullanır →
   logo her viewport oranında mandala merkezine kilitli kalır.
   ==================================================================== */
.door-aligned {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 2048 / 1158;                         /* kapı görseli oranı */
  height: max(100dvh, calc(100vw * 1158 / 2048));    /* cover: en küçük boyutu doldur */
  width: auto;                                       /* aspect-ratio genişliği türetir */
  pointer-events: none;
}
.door-stage { z-index: 1; }
.door-key-layer { z-index: 6; }
.door-key-layer .hold--key { pointer-events: auto; }

/* Doğrudan kapıya dokunma hedefi (logo yok) — kapı merkezinde geniş, görünmez */
.door-tap {
  position: absolute;
  z-index: 6;
  left: 50%; top: 52%;
  transform: translate(-50%, -50%);
  width: min(62vmin, 70%);
  height: min(62vmin, 64%);
  border-radius: 18px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.door-tap:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 6px;
}

/* Kapı yakın planı (02-esik-kapi.jpg) — door-stage'i tam doldurur (oran eşit) */
.task-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
.task-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 60% at 50% 50%, transparent 40%, rgba(5, 8, 13, 0.45) 100%),
    linear-gradient(180deg, transparent 55%, rgba(5, 8, 13, 0.8) 100%);
}

.task-copy {
  position: absolute;
  z-index: 2;
  left: 0; right: 0;
  bottom: calc(var(--safe-bottom) + clamp(36px, 9vh, 90px));
  padding: 0 24px;
  text-align: center;
}
.task-prompt {
  margin: 0;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: clamp(13px, 0.8vw + 10px, 16px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

/* ---------- hold-to-charge kontrolü ---------- */
.hold {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 132px;
  height: 132px;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  touch-action: none;          /* basılı tutarken kaydırma/zoom engelle */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none; /* iOS uzun-bas menüsü/seçim engelle */
  -webkit-user-select: none;
  user-select: none;
  --hold-progress: 0;          /* 0..1 JS sürer */
}
/* logo görseli sürüklenmesin (mobil bas-tut sırasında) */
.hold img { -webkit-user-drag: none; user-select: none; pointer-events: none; }

/* Dairesel halka progress */
.hold-ring {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);   /* tepeden başla */
  overflow: visible;
}
.hold-ring-track,
.hold-ring-fill {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
}
.hold-ring-track { stroke: rgba(241, 240, 235, 0.18); }
.hold-ring-fill {
  stroke: var(--teal);
  /* çevre = 2πr = 2·π·44 ≈ 276.46 */
  stroke-dasharray: 276.46;
  stroke-dashoffset: calc(276.46 * (1 - var(--hold-progress)));
  filter: drop-shadow(0 0 6px rgba(90, 182, 183, 0.6));
  transition: stroke-dashoffset 60ms linear, stroke 200ms;
}
/* Dolduğunda altına döner (eşik anı) */
.hold.is-complete .hold-ring-fill { stroke: var(--gold); }

/* Nefes alan 8-köşeli yıldız (merkez) */
.hold-star {
  width: 56px;
  height: 56px;
  display: block;
  background:
    radial-gradient(circle at 50% 50%, rgba(240, 187, 61, 0.85), rgba(240, 187, 61, 0) 60%),
    conic-gradient(from 0deg,
      rgba(240, 187, 61, 0.95) 0deg,   transparent 22deg,
      rgba(90, 182, 183, 0.85) 45deg,  transparent 67deg,
      rgba(240, 187, 61, 0.95) 90deg,  transparent 112deg,
      rgba(90, 182, 183, 0.85) 135deg, transparent 157deg,
      rgba(240, 187, 61, 0.95) 180deg, transparent 202deg,
      rgba(90, 182, 183, 0.85) 225deg, transparent 247deg,
      rgba(240, 187, 61, 0.95) 270deg, transparent 292deg,
      rgba(90, 182, 183, 0.85) 315deg, transparent 337deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 35%, transparent 70%);
          mask: radial-gradient(circle at 50% 50%, #000 35%, transparent 70%);
  border-radius: 50%;
  filter: drop-shadow(0 0 10px rgba(240, 187, 61, 0.5));
  animation: hold-breath 2.6s ease-in-out infinite;
  /* basılı tutarken parlaklık progress ile artar */
  opacity: calc(0.55 + 0.45 * var(--hold-progress));
  transform: scale(calc(0.92 + 0.12 * var(--hold-progress)));
}
@keyframes hold-breath {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(240, 187, 61, 0.4)); }
  50%      { filter: drop-shadow(0 0 18px rgba(240, 187, 61, 0.7)); }
}

.hold-hint {
  position: absolute;
  bottom: -26px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.hold.is-holding .hold-hint { opacity: 0.4; }

.hold:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 8px;
}

/* hold--star (Naga) — doğrudan idle çocuğu; hotspot katmanında (z6) dur.
   is-acting (uyanış klibi oynarken) gizlenir. */
.hold--star { z-index: 6; }
.act.is-acting .hold--star {
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--easing);
}

/* ====================================================================
   hold--key (Eşik) — gösterge = mühür yuvasındaki dönen LOGO.
   Halka yok; logo, progress 0→1 ilerledikçe 0→180° döner.
   ==================================================================== */
.hold--key {
  /* Konum, door-key-layer (= kapı görseli kutusu) içindeki MANDALA yüzdesi.
     Canvas ölçümü: mandala merkezi görselde ~%51 / %54. Kutu kapı oranında
     olduğu için bu yüzde her viewport'ta mandalaya kilitli kalır. */
  left: 51%;
  top: 54%;
  /* Altın halka, kapının iç madalyon halkasıyla örtüşür: kapı genişliğinin
     ~%15.5'i (door-key-layer genişliği = kapı genişliği). */
  width: 15.5%;
  height: auto;
  aspect-ratio: 1;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
}
/* Taşa gömülü ışık hissi — logonun arkasında yumuşak turkuaz-altın glow */
.hold--key::before {
  content: "";
  position: absolute;
  inset: -16%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(90, 182, 183, 0.38) 0%,
    rgba(240, 187, 61, 0.22) 42%,
    transparent 70%);
  filter: blur(16px);
  pointer-events: none;
  animation: key-glow 2.8s ease-in-out infinite;
}
@keyframes key-glow {
  0%, 100% { opacity: 0.5;  transform: scale(0.94); }
  50%      { opacity: 0.9;  transform: scale(1.08); }
}
.hold--key .hold-logo {
  position: relative;        /* glow (::before) arkada kalsın */
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Resmî şeffaf sembol → yıldız+halka+A net, kutu/hale yok, blend gerekmez. */
  /* progress ile döner (CSS değişkeni attachHold tarafından sürülür) */
  transform: rotate(calc(var(--hold-progress, 0) * 180deg));
  transition: transform 60ms linear, filter 200ms;
  /* nefes alan parıltı (idle pulse) */
  filter: drop-shadow(0 0 10px rgba(90, 182, 183, 0.45))
          drop-shadow(0 0 20px rgba(240, 187, 61, 0.25));
  animation: key-breath 2.8s ease-in-out infinite;
  will-change: transform, filter;
}
/* basılı tutarken nefes durur (dönüş geri bildirimi öne çıksın) */
.hold--key.is-holding .hold-logo,
.hold--key.is-complete .hold-logo { animation: none; }
/* dolunca altın parıltıya yüksel */
.hold--key.is-complete .hold-logo {
  filter: drop-shadow(0 0 16px rgba(240, 187, 61, 0.7))
          drop-shadow(0 0 32px rgba(90, 182, 183, 0.4));
}
@keyframes key-breath {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(90, 182, 183, 0.35)) drop-shadow(0 0 16px rgba(240, 187, 61, 0.18)); }
  50%      { filter: drop-shadow(0 0 16px rgba(90, 182, 183, 0.6))  drop-shadow(0 0 28px rgba(240, 187, 61, 0.35)); }
}
.hold--key .hold-hint { bottom: -30px; }

/* Aktivasyon klibi katmanı (taş→ışık→açılır) — task üstü (z8) */
.act-activate {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  z-index: 8;
  opacity: 0;
  background: var(--ink);
  transition: opacity 200ms var(--easing);
}
.act-activate.is-playing { opacity: 1; }

/* ====================================================================
   AÇILIŞ — sinematik akış: İdent → Şehir → Çağrı(logo) → eriyiş → portal
   ==================================================================== */

/* Şehir loop (Sıradan Dünya) — poster üstü, opacity ile belirir */
.acilis-city {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 800ms var(--easing);
}
.acilis-city.is-playing { opacity: 1; }

/* Çağrı sloganı — alttan fade-in (Cinzel başlık) */
.acilis-slogan {
  z-index: 5;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1100ms var(--easing), transform 1100ms var(--easing);
}
.acilis-slogan.is-shown { opacity: 1; transform: translateY(0); }
.acilis-slogan .title {
  /* font-size cinematic --hero clamp'ından gelir (ezme) — yalnız yerleşim */
  max-width: 22ch;
  margin: 0 auto;
}

/* Logo = Çağrı — vanishing point'te sabit nokta (şehir sarsılsa da kımıldamaz) */
.acilis-call {
  position: absolute;
  z-index: 6;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  padding: 14px;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1400ms var(--easing);
  -webkit-tap-highlight-color: transparent;
}
.acilis-call.is-shown { opacity: 1; pointer-events: auto; }

.call-logo {
  width: clamp(84px, 11vw, 150px);
  height: clamp(84px, 11vw, 150px);
  object-fit: contain;
  /* hafif dönen + nefes alan parıltı (Çağrı = kaosun ortasındaki sabit nokta) */
  animation: call-spin 18s linear infinite, call-breath 3.4s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(90, 182, 183, 0.5))
          drop-shadow(0 0 28px rgba(240, 187, 61, 0.3));
  will-change: transform, filter;
}
@keyframes call-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes call-breath {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(90, 182, 183, 0.4)) drop-shadow(0 0 20px rgba(240, 187, 61, 0.22)); }
  50%      { filter: drop-shadow(0 0 20px rgba(90, 182, 183, 0.7)) drop-shadow(0 0 36px rgba(240, 187, 61, 0.4)); }
}

.call-hint {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}

.acilis-call:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 8px;
  border-radius: 12px;
}

/* Dokun → anahtar dönüşü + tek ışık noktasına eriyiş */
.acilis-call.is-answering { pointer-events: none; }
.acilis-call.is-answering .call-hint { opacity: 0; transition: opacity 200ms; }
.acilis-call.is-answering .call-logo {
  animation: call-answer 720ms cubic-bezier(0.5, 0, 0.85, 0.3) forwards;
}
@keyframes call-answer {
  0%   { transform: rotate(0deg)   scale(1);    filter: brightness(1)   drop-shadow(0 0 16px rgba(90,182,183,0.6)); }
  55%  { transform: rotate(180deg) scale(1.1);  filter: brightness(1.6) drop-shadow(0 0 40px rgba(240,187,61,0.8)); }
  100% { transform: rotate(220deg) scale(0.04); filter: brightness(4)   drop-shadow(0 0 90px rgba(255,255,255,0.95)); }
}

/* Ekran merkezinden, eriyişle birlikte radyal flash (şehir ışıkta solar) */
.acilis-call.is-answering::after {
  content: "";
  position: fixed;
  z-index: 90;
  left: 50%; top: 50%;
  width: 30vmax; height: 30vmax;
  transform: translate(-50%, -50%) scale(0.1);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
    rgba(255,255,255,0.95) 0%, rgba(240,187,61,0.6) 35%, rgba(90,182,183,0.2) 60%, transparent 80%);
  mix-blend-mode: screen;
  animation: call-flash 720ms ease-in 120ms forwards;
}
@keyframes call-flash {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0.1); }
  60%  { opacity: 0.9; transform: translate(-50%, -50%) scale(1.6); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(3); }
}

/* İdent overlay — Space Black + logo (yumuşak belirir, hafif parlar) */
.acilis-ident {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: var(--ink);
  cursor: pointer;
  transition: opacity 700ms var(--easing), visibility 0ms linear 700ms;
}
.acilis-ident.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.ident-logo {
  width: clamp(120px, 16vw, 220px);
  height: clamp(120px, 16vw, 220px);
  object-fit: contain;
  /* Şeffaf zeminli sembol → kutu yok, Space Black üstünde temiz parıltı */
  opacity: 0;
  transform: scale(0.92);
  animation: ident-in 1100ms var(--easing) forwards;
}
@keyframes ident-in {
  0%   { opacity: 0;    transform: scale(0.92); filter: drop-shadow(0 0 0 rgba(90,182,183,0)); }
  60%  { opacity: 1;    transform: scale(1.0);  filter: drop-shadow(0 0 24px rgba(90,182,183,0.5)); }
  100% { opacity: 0.96; transform: scale(1.0);  filter: drop-shadow(0 0 16px rgba(240,187,61,0.35)); }
}
.ident-skip {
  position: absolute;
  bottom: calc(var(--safe-bottom, 0px) + 28px);
  right: calc(var(--safe-right, 0px) + 28px);
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: rgba(241, 240, 235, 0.6);
  pointer-events: none;  /* tüm overlay tıklanabilir, ipucu metni */
}
.acilis-ident:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -4px;
}

/* reduced-motion: ident yok, animasyonlar statik */
@media (prefers-reduced-motion: reduce) {
  .acilis-ident { display: none; }      /* direkt şehir */
  .acilis-city { transition: none; }
  .acilis-slogan { transition: none; transform: none; }
  .call-logo { animation: none; }
  .acilis-call { transition: none; }
  .acilis-call.is-answering .call-logo { animation: none; opacity: 0; transition: opacity 200ms; }
  .acilis-call.is-answering::after { animation: none; }
}

/* Naga copy içindeki satır-içi prompt */
.task-prompt--inline {
  margin: 0 0 6px;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: clamp(12px, 0.7vw + 9px, 14px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

/* ====================================================================
   GÖREV · tap-water (Gölge) — suya dokun → ripple → 3 seçenek
   ==================================================================== */
.water-touch {
  position: absolute;
  z-index: 2;
  left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  width: 120px; height: 120px;
  min-width: var(--touch-min); min-height: var(--touch-min);
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(90, 182, 183, 0.18), transparent 70%);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.water-glint {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(220, 245, 248, 0.9), rgba(90, 182, 183, 0.4) 60%, transparent 80%);
  box-shadow: 0 0 18px rgba(90, 182, 183, 0.55);
  animation: water-glint 3s ease-in-out infinite;
}
@keyframes water-glint {
  0%, 100% { transform: scale(0.9); opacity: 0.7; }
  50%      { transform: scale(1.1); opacity: 1; }
}
.water-ripple {
  position: absolute;
  left: 50%; top: 50%;
  width: 40px; height: 40px;
  transform: translate(-50%, -50%) scale(0.3);
  border-radius: 50%;
  border: 1px solid rgba(90, 182, 183, 0.7);
  opacity: 0;
  pointer-events: none;
}
.water-touch.is-rippling .water-ripple  { animation: water-ripple 900ms ease-out; }
.water-touch.is-rippling .water-ripple--2 { animation: water-ripple 900ms ease-out 180ms; }
@keyframes water-ripple {
  0%   { opacity: 0.8; transform: translate(-50%, -50%) scale(0.3); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(4.5); }
}
.water-touch:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 6px;
}

.water-options {
  position: absolute;
  z-index: 3;
  left: 0; right: 0;
  bottom: calc(var(--safe-bottom) + clamp(40px, 10vh, 110px));
  padding: 0 24px;
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms var(--easing), transform 500ms var(--easing);
}
.act-task.water-revealed .water-options {
  opacity: 1;
  transform: translateY(0);
}
/* #2: seçenekler belirince "suya dokun" prompt'u gizlen */
.act-task.water-revealed .task-prompt {
  opacity: 0;
  transition: opacity 350ms var(--easing);
}
.water-reveal {
  margin: 0 0 16px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(16px, 1vw + 12px, 22px);
  color: rgba(241, 240, 235, 0.92);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
/* Değer adımları (jenerik) — Naga'ya varışta üst bölgede belirip söner */
.value-credits {
  position: absolute;
  z-index: 6;
  left: 0; right: 0;
  top: calc(var(--safe-top, 0px) + 18%);
  text-align: center;
  padding: 0 24px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 600ms var(--easing), transform 600ms var(--easing);
  pointer-events: none;
}
.value-credits.is-shown { opacity: 1; transform: translateY(0); }
.value-credit-value { margin: 0 0 8px; font-size: clamp(26px, 5vw, 52px); }
.value-credit-line  { margin: 0 auto; max-width: 38ch; }

/* Seçilen gölgenin kişisel mısrası (golge.options.N.line) */
.water-line {
  margin: 18px auto 0;
  max-width: 42ch;
  opacity: 0;
  transition: opacity 700ms var(--easing);
  font-size: clamp(15px, 1vw + 11px, 20px);
}
.water-line.is-shown { opacity: 1; }
.water-opts-row {
  display: flex;
  flex-wrap: wrap;
  transition: opacity 500ms var(--easing);
  gap: 12px;
  justify-content: center;
}
.water-opt {
  min-height: var(--touch-min);
  padding: 12px 22px;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--paper);
  background: rgba(5, 8, 13, 0.4);
  border: 1px solid rgba(90, 182, 183, 0.5);
  border-radius: 999px;
  cursor: pointer;
  transition: transform 180ms var(--easing), background 200ms, border-color 200ms, color 200ms;
}
.water-opt:hover,
.water-opt:focus-visible {
  transform: translateY(-1px);
  border-color: var(--teal);
  color: var(--teal);
  background: rgba(90, 182, 183, 0.1);
  outline: none;
}
.water-opt:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }

/* ====================================================================
   GÖREV · clapboard (Yönetmen) — tap "Action!"
   ==================================================================== */
.clapboard {
  position: absolute;
  z-index: 2;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 180px; height: 132px;
  min-width: var(--touch-min); min-height: var(--touch-min);
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.clap-body {
  position: absolute;
  inset: 28px 0 0 0;
  background: linear-gradient(180deg, #11151c, #05080d);
  border: 2px solid rgba(241, 240, 235, 0.85);
  border-radius: 4px;
}
.clap-top {
  position: absolute;
  top: 8px; left: 0; right: 0;
  height: 26px;
  background:
    repeating-linear-gradient(45deg, #f1f0eb 0 14px, #11151c 14px 28px);
  border: 2px solid rgba(241, 240, 235, 0.85);
  border-radius: 4px;
  transform-origin: left center;
  transform: rotate(-18deg);
  transition: transform 160ms var(--easing);
}
.clapboard.is-snapping .clap-top { transform: rotate(0deg); }
.clap-label {
  position: relative;
  z-index: 1;
  margin-top: 22px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(18px, 1.4vw + 10px, 26px);
  letter-spacing: 0.08em;
  color: var(--gold);
  opacity: 0;
  transition: opacity 200ms var(--easing) 120ms;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}
.clapboard.is-snapping .clap-label,
.clapboard:hover .clap-label,
.clapboard:focus-visible .clap-label { opacity: 1; }
.clapboard:focus-visible { outline: 2px solid var(--teal); outline-offset: 8px; }

/* ====================================================================
   İçeri-ışık BLOOM — eşiğin ötesinden taşan ışık (aktivasyon klibi sonrası).
   Merkezden radyal turkuaz-altın, dışa doğru genişler (~700ms).
   Mevcut cool flash ile birleşir → tek akıcı patlama.
   ==================================================================== */
.bloom {
  position: fixed;
  z-index: 96;                 /* inner-glow(95) üstü, flash(100) altı */
  left: 50%; top: 50%;
  width: 40vmax; height: 40vmax;
  transform: translate(-50%, -50%) scale(0.15);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 252, 240, 0.95) 0%,
    rgba(90, 182, 183, 0.7) 28%,
    rgba(240, 187, 61, 0.45) 52%,
    rgba(90, 182, 183, 0.12) 72%,
    transparent 85%);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.bloom.is-firing { animation: bloom 720ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards; }
@keyframes bloom {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.15); }
  20%  { opacity: 0.95; transform: translate(-50%, -50%) scale(1.0);  }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(3.2);  }
}

/* ====================================================================
   İç parıltı — "ben değişiyorum" (~250ms, 8-köşeli yıldız, merkez)
   ==================================================================== */
.inner-glow {
  position: fixed;
  z-index: 95;                 /* flash(100) altı, her şey üstü */
  left: 50%; top: 50%;
  width: 60vmin; height: 60vmin;
  transform: translate(-50%, -50%) scale(0.4);
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 248, 230, 0.9), transparent 55%),
    conic-gradient(from 0deg,
      rgba(240, 187, 61, 0.95) 0deg,   transparent 22deg,
      rgba(90, 182, 183, 0.9) 45deg,   transparent 67deg,
      rgba(240, 187, 61, 0.95) 90deg,  transparent 112deg,
      rgba(90, 182, 183, 0.9) 135deg,  transparent 157deg,
      rgba(240, 187, 61, 0.95) 180deg, transparent 202deg,
      rgba(90, 182, 183, 0.9) 225deg,  transparent 247deg,
      rgba(240, 187, 61, 0.95) 270deg, transparent 292deg,
      rgba(90, 182, 183, 0.9) 315deg,  transparent 337deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 18%, transparent 60%);
          mask: radial-gradient(circle at 50% 50%, #000 18%, transparent 60%);
  mix-blend-mode: screen;
}
.inner-glow.is-firing { animation: inner-glow 260ms ease-out forwards; }
@keyframes inner-glow {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0.4)  rotate(0deg);  }
  45%  { opacity: 0.95; transform: translate(-50%, -50%) scale(1.0) rotate(8deg);  }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.25) rotate(16deg); }
}

/* ====================================================================
   Biriken kıvılcım motifi — POV köşesinde, kapı kapı birikir.
   data-level (0..6) → glow yoğunluğu. JS AEA.spark(n) ile artar.
   ==================================================================== */
.spark-meter {
  position: fixed;
  z-index: 55;
  left: calc(var(--safe-left, 0px) + 20px);
  bottom: calc(var(--safe-bottom, 0px) + 20px);
  width: 40px; height: 40px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms var(--easing);
}
.spark-meter[data-level="0"] { opacity: 0; }
.spark-meter:not([data-level="0"]) { opacity: 1; }

.spark-core {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 248, 230, 0.95), rgba(240, 187, 61, 0.85) 45%, transparent 75%);
  /* seviye arttıkça parıltı büyür (her kapıda biriken ışık) */
  box-shadow:
    0 0 calc(8px + var(--spark-level, 1) * 4px) rgba(240, 187, 61, 0.7),
    0 0 calc(16px + var(--spark-level, 1) * 8px) rgba(90, 182, 183, 0.4);
  animation: spark-pulse 3.2s ease-in-out infinite;
}
@keyframes spark-pulse {
  0%, 100% { transform: scale(0.9);  opacity: 0.8; }
  50%      { transform: scale(1.12); opacity: 1;   }
}

/* ====================================================================
   Yıldız yankısı (motif bağı) — Yönetmen idle göründüğünde DIRECTOR
   koltuğunun çevresinde 8-köşeli yıldız ~2.5s parlar, sonra söner.
   JS, perde aktifleşince .is-echoing ekler.
   ==================================================================== */
.star-echo {
  position: absolute;
  z-index: 3;                 /* idle üstü, scrim altı */
  left: 50%;
  top: 60%;                   /* koltuğun çevresi */
  width: 220px;
  height: 220px;
  transform: translate(-50%, -50%) scale(0.6);
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(240, 187, 61, 0.55), transparent 62%),
    conic-gradient(from 0deg,
      rgba(240, 187, 61, 0.85) 0deg,   transparent 22deg,
      rgba(90, 182, 183, 0.7) 45deg,   transparent 67deg,
      rgba(240, 187, 61, 0.85) 90deg,  transparent 112deg,
      rgba(90, 182, 183, 0.7) 135deg,  transparent 157deg,
      rgba(240, 187, 61, 0.85) 180deg, transparent 202deg,
      rgba(90, 182, 183, 0.7) 225deg,  transparent 247deg,
      rgba(240, 187, 61, 0.85) 270deg, transparent 292deg,
      rgba(90, 182, 183, 0.7) 315deg,  transparent 337deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 30%, transparent 72%);
          mask: radial-gradient(circle at 50% 50%, #000 30%, transparent 72%);
  filter: drop-shadow(0 0 20px rgba(240, 187, 61, 0.4));
}
.star-echo.is-echoing {
  animation: star-echo 2500ms var(--easing) forwards;
}
@keyframes star-echo {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.55) rotate(0deg);   }
  22%  { opacity: 0.9;  transform: translate(-50%, -50%) scale(1.0)  rotate(8deg);   }
  60%  { opacity: 0.55; transform: translate(-50%, -50%) scale(1.08) rotate(14deg);  }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(1.15) rotate(20deg);  }
}

/* ====================================================================
   §3 · Eşik beyazı — flash geçişi
   ==================================================================== */

.flash {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  background: #FFFFFF;
  will-change: opacity;
}

/* Varsayılan: eşik beyazı (~150ms) */
.flash.is-firing { animation: flash var(--t-flash) ease-out forwards; }
@keyframes flash {
  0%   { opacity: 0; }
  35%  { opacity: 1; }
  65%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Evrilen ışık skalası (Spec §2b — Demir→Altın ısınır):
   cool (Eşik, serin/gümüşi) → teal (Gölge) → gold (Kahraman/naga) →
   warm (Yönetmen) → crown (Final, taç/altın-beyaz).
   gateLight = { esik:'cool', golge:'teal', kahraman:'gold', yonetmen:'warm', final:'crown' } */
.flash--cool  { background: radial-gradient(circle at center, #EAF2F6 0%, #BFD4DE 45%, rgba(190,212,222,0) 82%); }
.flash--teal  { background: radial-gradient(circle at center, #DDF3F4 0%, #5AB6B7 48%, rgba(90,182,183,0) 85%); }
.flash--gold  { background: radial-gradient(circle at center, #F8DCA0 0%, #F0BB3D 40%, rgba(240,187,61,0) 80%); }
.flash--warm  { background: radial-gradient(circle at center, #FFE7B5 0%, #F0BB3D 55%, rgba(13,48,94,0) 90%); }
.flash--crown { background: radial-gradient(circle at center, #FFFFFF 0%, #F8DCA0 38%, rgba(240,187,61,0) 85%); }

/* prefers-reduced-motion: yumuşak fade, parlama yok */
@keyframes flash-soft {
  0%, 100% { opacity: 0; }
  50%      { opacity: 0.40; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --t-curtain: 0ms; }
  .act { transition: none; }
  .act-idle { animation: none; transform: none; }
  .hotspot-pulse { animation: none; opacity: 0; }
  .flash.is-firing { animation: flash-soft var(--t-flash-soft) ease-in-out forwards; }
  .star-echo.is-echoing { animation: none; opacity: 0; }
  .act-loop { display: none; }   /* loop oynamaz; idle/poster kalır */

  /* Görev/dönüşüm: animasyon yok, statik */
  .hold-star { animation: none; }
  .inner-glow.is-firing { animation: inner-glow-soft 200ms ease-out forwards; }
  .spark-core { animation: none; }
  .water-glint { animation: none; }
  .water-touch.is-rippling .water-ripple { animation: none; opacity: 0; }
  /* su seçenekleri geçişsiz, direkt görünür (JS ayrıca anında reveal eder) */
  .water-options { transition: none; }
  .clap-top, .clap-label { transition: none; }
  /* #2/#5 devam düğmeleri: hareketsiz (yalnız görünür/gizli) */
  .water-continue, .value-credit-cont { transition: none; transform: none; }

  /* logo-anahtar: nefes + dönüş yok (tek-tık complete) */
  .hold--key .hold-logo { animation: none; transform: none; transition: none; }
  .hold--key::before { animation: none; opacity: 0.6; }
  /* bloom: kısa fade */
  .bloom.is-firing { animation: bloom-soft 320ms ease-in-out forwards; }
}
@keyframes bloom-soft {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
}
@keyframes inner-glow-soft {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
}

/* ====================================================================
   Final — slogan + iki CTA
   ==================================================================== */

/* #5: Final metni dikey TAM ORTADA (alt değil) */
.act-copy--final {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

.title--slogan {
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(26px, 4vw + 8px, 56px);
}

/* #6: Final cevap bloğu — açılış sorusuna BÜYÜK yanıt (yalnız yerleşim;
   boyut --answer'dan, renk/gölge tipografi sınıflarından gelir). */
.final-answer {
  max-width: 18ch;
  margin: 0 auto;
}
.final-sub {
  margin: 20px auto 0;
  max-width: 34ch;
  font-size: clamp(1.05rem, 2.5vw, 1.7rem);
}
.final-stamp {
  margin: 26px auto 0;
  font-size: clamp(1rem, 2.2vw, 1.45rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cta-row {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* Final — sessiz alt-link (buton DEĞİL; ince metin-link, ghost'tan daha hafif) */
.cta-proof {
  display: inline-block;
  margin-top: 18px;
  max-width: 90vw;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(90, 182, 183, 0.62);          /* soluk turkuaz */
  text-decoration: none;
  opacity: 0.85;
  border-bottom: 1px solid rgba(90, 182, 183, 0.28);
  padding-bottom: 2px;
  transition: color 220ms var(--easing), border-color 220ms var(--easing),
              opacity 220ms var(--easing), text-shadow 220ms var(--easing);
}
.cta-proof:hover,
.cta-proof:focus-visible {
  color: var(--teal);
  border-color: rgba(90, 182, 183, 0.7);
  opacity: 1;
  text-shadow: 0 0 14px rgba(90, 182, 183, 0.45);   /* hover'da hafif parıltı */
  outline: none;
}
.cta-proof:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding: 14px 28px;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 200ms var(--easing), background 200ms, color 200ms, border-color 200ms;
}

/* Birincil — altın (Sahneni Bul) */
.btn--primary {
  background: var(--gold);
  color: var(--ink);
  border: 1px solid var(--gold);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  transform: translateY(-1px);
  background: #ffd166;
  border-color: #ffd166;
  outline: none;
}

/* İkincil — çerçeveli turkuaz (Demir Kapı'ya Gir) */
.btn--secondary {
  background: rgba(5, 8, 13, 0.35);
  color: var(--paper);
  border: 1px solid rgba(90, 182, 183, 0.6);
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
  transform: translateY(-1px);
  border-color: var(--teal);
  color: var(--teal);
  outline: none;
}

.btn:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
}

/* ====================================================================
   #1 · "dokun" etiketleri — okunaklı koyu plaka (parlak zeminlerde net).
   YALNIZ arka plan + gölge + radius + küçük padding; KONUM değişmez.
   ==================================================================== */
.hotspot-hint,
.call-hint,
.hold-hint {
  color: var(--paper);
  background: rgba(8, 16, 30, 0.55);
  border-radius: 999px;
  padding: 5px 12px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}

/* ====================================================================
   #4 · Kahraman "İrade" değer etiketi — ateş kapısında yıkanmasın.
   #1 plakası + güçlü gölge + arkasına yumuşak koyu radial scrim;
   aea-value altın rengi KORUNUR. (position:relative offset'siz → taşımaz.)
   ==================================================================== */
#kahraman .hotspot-hint {
  position: relative;
  color: var(--gold);
  -webkit-text-fill-color: var(--gold);
  font-weight: 600;
  background: rgba(8, 16, 30, 0.6);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.92), 0 0 14px rgba(0, 0, 0, 0.6);
}
#kahraman .hotspot-hint::before {
  content: "";
  position: absolute;
  inset: -130% -85%;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(5, 8, 13, 0.72) 0%, rgba(5, 8, 13, 0.4) 46%, rgba(5, 8, 13, 0) 76%);
  filter: blur(4px);
}

/* ====================================================================
   #2 · Gölge "devam →" — seçilen cümleden sonra köprüye geçiş düğmesi.
   ==================================================================== */
.water-continue {
  display: inline-block;
  margin-top: 18px;
  padding: 10px 22px;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(8, 16, 30, 0.55);
  border: 1px solid rgba(90, 182, 183, 0.6);
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 500ms var(--easing), transform 500ms var(--easing),
              border-color 200ms, color 200ms;
}
.water-continue.is-shown { opacity: 1; transform: translateY(0); }
.water-continue[hidden] { display: none; }
.water-continue:hover,
.water-continue:focus-visible { border-color: var(--teal); color: var(--teal); outline: none; }
.water-continue:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }

/* ====================================================================
   #5 · Naga değer adımı "devam →" — dokun-ilerle ipucu.
   Çalışırken kutu tıklanabilir olur (yalnız üst bölgede, yıldızı engellemez).
   ==================================================================== */
.value-credits.is-interactive { pointer-events: auto; cursor: pointer; }
.value-credit-cont {
  display: inline-block;
  margin-top: 16px;
  padding: 8px 18px;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(8, 16, 30, 0.55);
  border: 1px solid rgba(90, 182, 183, 0.5);
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 400ms var(--easing), border-color 200ms, color 200ms;
}
.value-credit-cont.is-shown { opacity: 1; }
.value-credit-cont[hidden] { display: none; }
.value-credit-cont:hover,
.value-credit-cont:focus-visible { border-color: var(--teal); color: var(--teal); outline: none; }
.value-credit-cont:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }

/* ====================================================================
   #7 · Üst kontroller — "Skip Intro →" (intro boyunca) / "↺ Yeniden izle"
   (Final'de). SOL ÜST köşede; dil seçici (EN/DE/TR) sağ üstte kalır →
   desktop + mobilde çakışma yok.
   ==================================================================== */
.journey-skip,
.journey-rewatch {
  position: static;          /* konumu .intro-hud taşır */
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(241, 240, 235, 0.72);
  background: rgba(8, 16, 30, 0.55);
  border: 1px solid rgba(241, 240, 235, 0.14);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition: color 180ms, border-color 180ms, background 180ms;
}
.journey-skip:hover,
.journey-rewatch:hover { color: var(--paper); border-color: rgba(90, 182, 183, 0.5); }
.journey-skip:focus-visible,
.journey-rewatch:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.journey-skip[hidden],
.journey-rewatch[hidden] { display: none; }

@media (max-width: 600px) {
  .journey-skip,
  .journey-rewatch {
    font-size: 10px;
    letter-spacing: 0.1em;
    padding: 7px 9px;
  }
}

/* ====================================================================
   Dil değiştirici (EN / DE / TR) — sağ üst
   ==================================================================== */

/* ÜST KONTROL ŞERİDİ — tek satır, space-between.
   Sol ve sağ ayrı fixed olduğunda uzun DE metinleri çakışıyordu; tek
   şerit + min-width:0 ile çakışma yapısal olarak imkânsız. */
.intro-hud {
  position: fixed;
  z-index: 60;
  top: calc(var(--safe-top, 0px) + 16px);
  left: calc(var(--safe-left, 0px) + 16px);
  right: calc(var(--safe-right, 0px) + 16px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;               /* şerit tıklamayı yutmasın */
}
.intro-hud__left,
.intro-hud__right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  pointer-events: auto;               /* butonlar tıklanabilir */
}

/* Siteye çıkış — skip/rewatch ile aynı görsel dil, üst şeritte kalıcı */
.journey-home {
  flex: none;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(241, 240, 235, 0.66);
  background: rgba(5, 8, 13, 0.35);
  border: 1px solid rgba(241, 240, 235, 0.12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 9px 14px;
  min-height: 32px;
  cursor: pointer;
  transition: color 180ms, border-color 180ms;
}
.journey-home:hover { color: var(--paper); border-color: rgba(90, 182, 183, 0.5); }
.jh-short { display: none; }
.journey-home:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }

.lang-switcher {
  flex: none;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: rgba(5, 8, 13, 0.35);
  border: 1px solid rgba(241, 240, 235, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
}

.lang-btn {
  min-width: 36px;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(241, 240, 235, 0.6);
  cursor: pointer;
  transition: color 180ms, background 180ms;
}

.lang-btn:hover { color: var(--paper); }

.lang-btn[aria-pressed="true"] {
  color: var(--ink);
  background: var(--paper);
}

/* ====================================================================
   Mobil tarafa nokta atışı: ≥48px touch hedefi, küçük ekranda kopya
   ve hotspot konum ayarı
   ==================================================================== */

@media (max-width: 480px) {
  /* Üst şerit 390px'te sığsın: sol grup (atla/yeniden izle) + çıkış + dil */
  .intro-hud { top: calc(var(--safe-top, 0px) + 12px); left: calc(var(--safe-left, 0px) + 12px); right: calc(var(--safe-right, 0px) + 12px); gap: 6px; }
  .intro-hud__left, .intro-hud__right { gap: 6px; }
  .journey-home { font-size: 10px; letter-spacing: 0.1em; padding: 7px 10px; }
  .jh-long  { display: none; }        /* dar ekranda kısa etiket */
  .jh-short { display: inline; }
  .lang-switcher { padding: 3px; gap: 2px; }
  .lang-btn { min-width: 28px; height: 28px; padding: 0 6px; font-size: 10px; letter-spacing: 0.1em; }

  .act-copy { bottom: calc(var(--safe-bottom, 0px) + 14vh); }
  .hotspot--door { top: 42%; }
  .hotspot-star  { --size: 52px; }
  .hotspot-pulse { width: 72px; height: 72px; }
}

/* =====================================================================
   FİNAL EKRANI — kısa/mobil viewport'ta CTA'lar ekran dışında kalıyordu
   ---------------------------------------------------------------------
   .act-copy--final dikey ORTALI (top:50% + translateY(-50%)). İçerik
   (başlık + alt satır + damga + iki CTA) ~500px; 667px'lik bir ekranda
   alt CTA 722px'e düşüyordu — üstelik iOS Safari'nin alt araç çubuğu
   vh'ye dahil olduğu için gerçek görünür alan ~90px daha kısa.
   Kısa viewport'ta: ortalamayı bırak, ALTTAN hizala ve ritmi sıkıştır.
   ===================================================================== */
@media (max-height: 800px) {
  .act-copy--final {
    top: auto;
    bottom: calc(var(--safe-bottom, 0px) + 14px);
    transform: none;
    /* güvenlik: hiçbir koşulda ekranı aşmasın, aşarsa kendi içinde kaysın */
    max-height: calc(100dvh - 88px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .act-copy--final .title { font-size: clamp(20px, 5.2vw, 30px); line-height: 1.16; }
  .act-copy--final .final-sub { margin-top: 10px; font-size: clamp(0.95rem, 2.6vw, 1.1rem); }
  .act-copy--final .final-stamp { margin-top: 10px; }
  .act-copy--final .cta-row { margin-top: 16px; gap: 10px; }
}
/* Çok kısa (yatay telefon / SE) — daha da sıkı */
@media (max-height: 620px) {
  .act-copy--final .final-sub { display: none; }   /* damga + CTA öncelikli */
  .act-copy--final .cta-row { margin-top: 12px; }
}