/* =========================================================================
   UYAN/fit — SİNEMATİK GİRİŞ: dev figür elini buzlu cama dayar
   Açılış (.f-hero) yapışkan kalır; kaydırma/tıklama ilerletir (js/fcine.js → --fb, --fgo, --fq, --hx …).
   Figür: anatomy.js sinema modu (tuval tüm ekran → figür kutusuna küçülür).
   ========================================================================= */

.f-cine { position: relative; }
.f-cine > .f-hero { position: sticky; top: 0; overflow-x: clip; } /* temas halesi / yansıma yatay taşma yapmasın (clip kaydırma kabı oluşturmaz, sticky bozulmaz) */
.f-cine-run { height: 520vh; } /* temas → ayrılış → dev yüz → gövde → yerleşme (sık ara karelerle) */

/* sinema sırasında tuval tüm ekranı kaplar (konumu/ölçeği kamera yönetir) */
.anat-stage.cine-full { position: fixed; inset: 0; z-index: 5; pointer-events: none; cursor: default; }

/* açılış içeriği sonda belirir */
/* sinema sürerken (içerik tam görünmeden) açılıştaki düğmeler tıklanmasın */
.f-hero.fc-lock .f-hero-text, .f-hero.fc-lock .anat-info, .f-hero.fc-lock .anat > :not(.anat-stage) { pointer-events: none; }
.f-cine .f-hero-text, .f-cine .anat-info { opacity: var(--fq, 1); transform: translate3d(0, calc((1 - var(--fq, 1)) * 24px), 0); }
.f-cine .anat > :not(.anat-stage):not(.anat-tip) { opacity: var(--fq, 1); } /* ipucu balonu kendi opaklığını yönetir */
.f-cine .anat {
  background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(255,255,255,var(--fq, 1)) 0%, rgba(243,242,239,var(--fq, 1)) 60%, rgba(233,231,227,var(--fq, 1)) 100%);
  box-shadow: inset 0 0 0 1px rgba(232,232,230,var(--fq, 1));
}
.f-cine .anat::before { opacity: var(--fq, 1); }

/* ---- buzlu cam: elin değdiği yerde açılır (temas izi) ---- */
.fc-glass {
  --hole: radial-gradient(circle var(--hr2, 0px) at var(--hx, 50%) var(--hy, 50%), transparent 55%, #000 100%);
  position: absolute; left: 0; right: 0; top: 0; height: 100vh; height: 100svh; z-index: 6; cursor: pointer; overflow: hidden; /* kayan yansıma sayfayı yatay taşırmasın */
  backdrop-filter: blur(var(--fb, 18px)) saturate(1.06) brightness(1.03); -webkit-backdrop-filter: blur(var(--fb, 18px)) saturate(1.06) brightness(1.03);
  background:
    linear-gradient(115deg, rgba(255,255,255,.34), rgba(255,255,255,.12) 40%, rgba(255,255,255,.26) 70%, rgba(255,255,255,.1)),
    rgba(250,249,246,.18);
  -webkit-mask-image: var(--hole); mask-image: var(--hole);
  opacity: var(--fgo, 1); visibility: var(--fgv, visible);
}
/* elin dayandığı bölge: daha ince buzlu cam — el net değil, cama yaslanmış gibi hafif bulanık */
.fc-glass2 {
  position: absolute; left: 0; right: 0; top: 0; height: 100vh; height: 100svh; z-index: 6; pointer-events: none; overflow: hidden;
  backdrop-filter: blur(var(--fb2, 5px)) saturate(1.04); -webkit-backdrop-filter: blur(var(--fb2, 5px)) saturate(1.04);
  background: rgba(250,249,246,.14);
  -webkit-mask-image: radial-gradient(circle var(--hr2, 0px) at var(--hx, 50%) var(--hy, 50%), #000 55%, transparent 100%);
  mask-image: radial-gradient(circle var(--hr2, 0px) at var(--hx, 50%) var(--hy, 50%), #000 55%, transparent 100%);
  opacity: var(--fgo, 1); visibility: var(--fgv, visible);
}
.fc-glass::before { /* camda kayan yansıma */
  content: ""; position: absolute; inset: -20%; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.35) 48%, rgba(255,255,255,.06) 52%, transparent 58%);
  transform: translate3d(calc(-40% + var(--fp, 0) * 260%), 0, 0);
}
.fc-glass::after { /* ince gren */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .09; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* avucun bastırdığı yerde sıcak hale */
.fc-print { display: none; } /* turuncu temas halkası kaldırıldı */
.fc-print-off {
  position: absolute; left: 0; top: 0; z-index: 7; pointer-events: none; width: 0; height: 0;
  transform: translate3d(var(--hx, 50vw), var(--hy, 50vh), 0); opacity: var(--po, 1); visibility: var(--fgv, visible);
}
.fc-print::before {
  content: ""; position: absolute; left: calc(var(--hr, 80px) * -1.7); top: calc(var(--hr, 80px) * -1.9);
  width: calc(var(--hr, 80px) * 3.4); height: calc(var(--hr, 80px) * 3.8); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,0) 58%, rgba(255,214,196,.32) 74%, rgba(255,59,31,.08) 88%, transparent);
  filter: blur(6px);
}

/* ---- HUD ---- */
.fc-hud { position: absolute; left: 0; right: 0; top: 0; height: 100vh; height: 100svh; z-index: 8; pointer-events: none; visibility: var(--fhv, visible); }
.fc-tag, .fc-skip { opacity: var(--ft, 1); }
.fc-tag { position: absolute; top: 96px; left: max(24px, calc((100% - 1440px) / 2)); display: grid; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(10,10,10,.6); }
.fc-tag b { color: var(--acc); font-weight: 800; }
.fc-hint { opacity: var(--fh, 1); position: absolute; left: 50%; bottom: 112px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: rgba(10,10,10,.7); }
.fc-hint i { width: 22px; height: 36px; border: 1.5px solid rgba(10,10,10,.55); border-radius: 12px; position: relative; }
.fc-hint i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--acc); animation: fcWheel 1.6s ease-in-out infinite; }
/* çekim alt yazıları: opaklık/kayma fcine.js'ten, kaydırmaya bağlı */
.fc-caps { position: absolute; left: max(24px, calc((100% - 1440px) / 2)); bottom: 40px; width: min(560px, calc(100% - 48px)); height: 130px; }
.fc-cap { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; }
.fc-cap em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .22em; color: var(--acc); text-shadow: 0 0 10px #fff, 0 0 4px #fff, 0 0 2px #fff; }
.fc-cap p { margin-top: 8px; font-size: clamp(22px, 2.6vw, 36px); font-weight: 800; line-height: 1.06; letter-spacing: -.035em; color: var(--bk);
  text-shadow: 0 0 24px rgba(255,255,255,.95), 0 0 8px rgba(255,255,255,.9); }
@keyframes fcWheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }
.fc-skip {
  position: absolute; right: max(24px, calc((100% - 1440px) / 2)); bottom: 36px; pointer-events: auto; min-height: 44px; padding: 0 18px; border-radius: 999px;
  font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--bk); background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1.5px var(--bk);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background-color .2s, color .2s;
}
.fc-skip:hover { background: var(--bk); color: #fff; }
.fc-skip:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

@media (max-width: 760px) {
  .f-cine-run { height: 380vh; }
  .fc-caps { left: 16px; bottom: 150px; width: calc(100% - 32px); height: 110px; }
  .fc-cap p { font-size: 24px; }
  .fc-tag { top: 84px; left: 16px; }
  .fc-hint { bottom: 300px; }
  .fc-skip { right: 16px; bottom: 96px; }
}

/* WebGL yoksa ya da hareket azaltma açıksa: sinema yok, açılış normal */
.f-cine.off .f-cine-run, .f-cine.off .fc-glass, .f-cine.off .fc-glass2, .f-cine.off .fc-print, .f-cine.off .fc-hud { display: none; }
.f-cine.off > .f-hero { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .f-cine-run, .fc-glass, .fc-glass2, .fc-print, .fc-hud { display: none; }
  .f-cine > .f-hero { position: relative; }
  .f-cine .f-hero-text, .f-cine .anat-info, .f-cine .anat > :not(.anat-stage):not(.anat-tip), .f-cine .anat::before { opacity: 1; transform: none; }
}