/* ==========================================================================
   Backrooms Antalya — staging stylesheet
   Sıfır bağımlılık: harici font yok, JS yok, görsel yok.
   Tüm doku CSS gradient ile üretilir → LCP metin, ilk boya hızlı.
   Kontrast: tüm metin/zemin çiftleri WCAG AA (4.5:1) üzerinde, çoğu AAA.
   ========================================================================== */

:root {
  /* Gölge katmanı — derin, yeşilimsi siyah */
  --void:      #0d0b06;
  --void-2:    #16130a;
  --void-3:    #211c0f;

  /* Duvar katmanı — kirli sarı */
  --wall:      #d4c86a;
  --wall-2:    #c4b85c;
  --wall-deep: #a89c46;
  --wall-dark: #6d6538;

  /* Metin */
  --bone:      #efe7cd;  /* koyu zeminde ana metin   → 15.7:1 */
  --bone-dim:  #b9b096;  /* koyu zeminde ikincil     →  9.0:1 */
  --ink:       #14110a;  /* sarı zeminde ana metin   → 11.0:1 */
  --ink-dim:   #4a4326;  /* sarı zeminde ikincil     →  5.7:1 */

  --line:      rgba(212, 200, 106, .22);
  --line-ink:  rgba(20, 17, 10, .22);

  --max:  68rem;
  --pad:  clamp(1rem, 5vw, 2.75rem);
  --gap:  clamp(1.25rem, 3vw, 2.25rem);

  --t--1: clamp(.80rem, .77rem + .15vw,  .90rem);
  --t-0:  clamp(1rem,   .96rem + .22vw, 1.10rem);
  --t-1:  clamp(1.15rem, 1.07rem + .4vw, 1.4rem);
  --t-2:  clamp(1.45rem, 1.25rem + 1vw, 2.05rem);
  --t-3:  clamp(1.9rem, 1.5rem + 2vw,   3rem);
  --t-4:  clamp(2.5rem, 1.7rem + 4vw,   4.5rem);

  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  color-scheme: dark;
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font: var(--t-0)/1.7 var(--sans);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--wall); text-underline-offset: .22em; }
a:hover { color: var(--bone); }
h1, h2, h3 { line-height: 1.1; letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: balance; }
p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin-bottom: .45em; }

:focus-visible {
  outline: 3px solid var(--wall);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap { width: min(100% - 2 * var(--pad), var(--max)); margin-inline: auto; }
.narrow { max-width: 60ch; }
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: .5rem; top: -100%; z-index: 99;
  background: var(--wall); color: var(--ink); padding: .6rem 1rem;
  font: 600 var(--t--1)/1 var(--mono); text-decoration: none;
}
.skip:focus { top: .5rem; }

/* -------------------------------------------------------------- header -- */
.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(13, 11, 6, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.bar {
  display: flex; align-items: center; gap: 1rem;
  min-height: 3.75rem; flex-wrap: wrap;
}

.brand {
  display: inline-flex; align-items: baseline; gap: .45rem;
  font: 700 var(--t--1)/1 var(--mono);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--wall); text-decoration: none; margin-right: auto;
}
.brand__sub { color: var(--bone-dim); letter-spacing: .3em; font-weight: 400; }

.nav-t { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nav-b {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  font: 600 var(--t--1)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--bone); border: 1px solid var(--line); padding: .55rem .8rem;
}
.nav-b::before { content: "\2261"; font-size: 1.2em; line-height: 1; }
.nav-t:focus-visible + .nav-b { outline: 3px solid var(--wall); outline-offset: 3px; }

.nav { display: none; width: 100%; padding-bottom: .75rem; }
.nav-t:checked ~ .nav { display: block; }
.nav a {
  display: block; padding: .7rem .2rem; text-decoration: none;
  color: var(--bone); border-top: 1px solid var(--line);
  font: 500 var(--t--1)/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--wall); }
.nav a[aria-current="page"] { font-weight: 700; }
.nav__lang { color: var(--wall) !important; }

@media (min-width: 58rem) {
  .nav-b { display: none; }
  .nav { display: flex !important; width: auto; align-items: center; gap: .1rem; padding: 0; }
  .nav a { border-top: 0; padding: .5rem .65rem; }
  .nav__lang { border: 1px solid var(--line); margin-left: .5rem; }
}

/* ------------------------------------------------------------- bandlar -- */
.band { padding: clamp(3rem, 8vw, 5.5rem) 0; position: relative; }
.band--void   { background: var(--void); }
.band--void-2 { background: var(--void-2); border-block: 1px solid var(--line); }

/* Duvar bandı: sarı zemin + panel dikişleri + nem lekesi */
.band--wall {
  color: var(--ink);
  background:
    radial-gradient(70% 90% at 22% 8%,  rgba(255, 255, 220, .28), transparent 60%),
    radial-gradient(48% 60% at 88% 95%, rgba(109, 101, 56, .45),  transparent 70%),
    repeating-linear-gradient(90deg,
      transparent 0 calc(25% - 1px), rgba(20, 17, 10, .13) calc(25% - 1px) 25%),
    linear-gradient(175deg, var(--wall) 0%, var(--wall-2) 55%, var(--wall-deep) 100%);
}
.band--wall a { color: #3d3512; }
.band--wall a:hover { color: var(--ink); }
.band--wall .eyebrow,
.band--wall .lede { color: var(--ink-dim); }

.eyebrow {
  font: 600 var(--t--1)/1 var(--mono);
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--wall); margin: 0 0 1.1rem;
}
.lede { font-size: var(--t-1); color: var(--bone-dim); }
h2 { font-size: var(--t-2); }
h3 { font-size: var(--t-1); }

/* ------------------------------------------------- koridor gorselleri -- */
/* Gorseller gercek fotograf (Pexels lisansi, ticari serbest, atif yok),
   hepsi ayni sari floresan duotonu + gren + vinyetle islenmis WebP.
   Uretici: scratchpad grade.py - kaynak kimlikleri README'de.            */
.hero, .band--art { position: relative; isolation: isolate; overflow: hidden; }
.band--art { color: var(--bone); }

.art__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}

/* Karartma perdesi: metin gorselin uzerinde kaybolmasin.
   Olculen kontrast: #efe7cd / perde altindaki zemin ~13:1 (AA cok uzerinde). */
.hero::before, .band--art::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(96deg,
    rgba(8, 7, 3, .92) 0%,  rgba(8, 7, 3, .84) 38%,
    rgba(8, 7, 3, .52) 60%, rgba(8, 7, 3, .14) 82%,
    rgba(8, 7, 3, .05) 100%);
}
/* Mobilde metin tam genislige yayildigi icin perde dikey olur */
@media (max-width: 55rem) {
  .hero::before, .band--art::before {
    background: linear-gradient(180deg,
      rgba(8, 7, 3, .55) 0%, rgba(8, 7, 3, .80) 45%, rgba(8, 7, 3, .92) 100%);
  }
}

/* Floresan titremesi - sadece isik katmani oynar, metin sabit kalir */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(48% 38% at 73% 44%,
              rgba(255, 250, 214, .24), transparent 72%);
  animation: flicker 7s steps(1, end) infinite;
}
@keyframes flicker {
  0%, 44%, 47%, 61%, 63%, 100% { opacity: 1; }
  45%, 62%                     { opacity: .35; }
  46%                          { opacity: .9; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::after { animation: none; opacity: 1; }
}

.hero { padding: clamp(4rem, 13vw, 9rem) 0 clamp(4.5rem, 12vw, 8rem); }
.band--art { padding: clamp(4rem, 11vw, 7.5rem) 0; }

.hero h1 {
  font: 800 var(--t-4)/.92 var(--sans);
  letter-spacing: -.035em; text-transform: uppercase;
  color: var(--bone); margin: 0 0 .4em; max-width: 15ch;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .55);
}
.hero h1 .sub {
  display: block; font-size: .28em; font-weight: 600; letter-spacing: .38em;
  color: var(--wall); margin-top: 1em; text-transform: uppercase;
}
.hero__lede {
  font-size: var(--t-1); color: var(--bone-dim); max-width: 46ch; margin-bottom: 0;
}
.hero__tag {
  display: inline-block; font: 600 var(--t--1)/1 var(--mono);
  letter-spacing: .26em; text-transform: uppercase; color: var(--bone-dim);
  border: 1px solid var(--line); padding: .5rem .85rem; margin-bottom: 1.75rem;
}
.band--art h1 { color: var(--bone); text-shadow: 0 2px 30px rgba(0, 0, 0, .5); }

/* Tam genislik atmosfer bandi */
.art-line {
  font: 600 var(--t-2)/1.25 var(--sans); color: var(--bone);
  max-width: 26ch; margin: 0 auto; text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .65);
}

/* ----------------------------------------------------------------- cta -- */
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.75rem 0 0; }
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .9rem 1.4rem; text-decoration: none;
  font: 700 var(--t--1)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  border: 2px solid transparent; transition: transform .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

.btn--primary { background: var(--ink); color: var(--wall) !important; }
.btn--primary:hover { background: #000; color: #fff !important; }
.btn--ghost { border-color: var(--line-ink); color: var(--ink) !important; }
.btn--ghost:hover { background: rgba(20, 17, 10, .1); }

.band--void .btn--primary, .band--void-2 .btn--primary,
.site-foot .btn--primary { background: var(--wall); color: var(--ink) !important; }
.band--void .btn--primary:hover, .band--void-2 .btn--primary:hover,
.site-foot .btn--primary:hover { background: var(--bone); }
.band--void .btn--ghost, .band--void-2 .btn--ghost,
.site-foot .btn--ghost { border-color: var(--line); color: var(--bone) !important; }
.band--void .btn--ghost:hover, .band--void-2 .btn--ghost:hover,
.site-foot .btn--ghost:hover { background: rgba(212, 200, 106, .1); }

/* ------------------------------------------------------------ ızgaralar -- */
.grid { display: grid; gap: var(--gap); }
@media (min-width: 42rem) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 58rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--void-2); border: 1px solid var(--line);
  padding: clamp(1.25rem, 3vw, 1.9rem);
}
.card h3 { color: var(--wall); }
.card p:last-child { margin-bottom: 0; }
.card__n {
  display: block; font: 700 var(--t--1)/1 var(--mono);
  letter-spacing: .2em; color: var(--wall-deep); margin-bottom: .9rem;
}
.band--wall .card {
  background: rgba(20, 17, 10, .07); border-color: var(--line-ink); color: var(--ink);
}
.band--wall .card h3 { color: var(--ink); }
.band--wall .card__n { color: var(--ink-dim); }

/* Künye şeridi */
.facts {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); margin: 0;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 46rem) { .facts { grid-template-columns: repeat(4, 1fr); } }
.facts > div { background: var(--void-2); padding: 1.25rem 1.1rem; }
.facts dt {
  font: 600 var(--t--1)/1 var(--mono); letter-spacing: .18em;
  text-transform: uppercase; color: var(--bone-dim); margin-bottom: .5rem;
}
.facts dd { margin: 0; font-size: var(--t-1); font-weight: 700; color: var(--wall); }

/* Detay tablosu */
.spec { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: var(--t-0); }
.spec th, .spec td {
  text-align: left; padding: .85rem .6rem;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.spec th { width: 40%; font-weight: 600; color: var(--bone-dim); }
.spec td { color: var(--bone); }

/* SSS */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 1.15rem .2rem; list-style: none;
  font-size: var(--t-1); font-weight: 600; color: var(--bone);
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--wall); font: 400 1.4em/1 var(--mono); }
.faq details[open] summary { color: var(--wall); }
.faq details[open] summary::after { content: "\2013"; }
.faq .a { padding: 0 .2rem 1.35rem; color: var(--bone-dim); max-width: 68ch; }

/* Uyarı kutusu */
.note {
  border-left: 3px solid var(--wall-deep); background: var(--void-2);
  padding: 1.1rem 1.3rem; color: var(--bone-dim); font-size: var(--t--1);
}
.note strong { color: var(--bone); }
.band--wall .note {
  background: rgba(20, 17, 10, .08); border-left-color: var(--ink); color: var(--ink-dim);
}
.band--wall .note strong { color: var(--ink); }

/* --------------------------------------------------------------- footer -- */
.site-foot {
  background: var(--void-2); border-top: 1px solid var(--line);
  padding: clamp(2.5rem, 6vw, 4rem) 0 2.5rem; font-size: var(--t--1);
}
.foot__cta { font-size: var(--t-1); font-weight: 700; margin-bottom: 1.5rem; }
.foot__cta a { text-decoration: none; }
.foot__cta a:hover { text-decoration: underline; }
.foot__meta { color: var(--bone-dim); display: grid; gap: .45rem; }
.foot__meta p { margin: 0; }
.foot__addr { color: #8d866f; font-size: .95em; }

/* --------------------------------------------------------- yardımcılar -- */
.stack > * + * { margin-top: var(--gap); }
.mt { margin-top: clamp(2rem, 5vw, 3rem); }
.center { text-align: center; }
.mono { font-family: var(--mono); }

/* --------------------------------- iç sayfa başlıkları + merkezli CTA -- */
.band h1 { font-size: var(--t-3); max-width: 20ch; }
.band--wall h1 { color: var(--ink); }
.cta-row--center { justify-content: center; }
.band .facts + .note { margin-top: var(--gap); }

/* ------------------------------ gorsel uzerindeki butonlar (koyu zemin) -- */
.hero .btn--primary, .band--art .btn--primary {
  background: var(--wall); color: var(--ink) !important;
}
.hero .btn--primary:hover, .band--art .btn--primary:hover { background: var(--bone); }
.hero .btn--ghost, .band--art .btn--ghost {
  border-color: var(--line); color: var(--bone) !important;
}
.hero .btn--ghost:hover, .band--art .btn--ghost:hover {
  background: rgba(212, 200, 106, .12);
}

/* -------------------------------------------------- dar okuma sutunu -- */
/* .wrap.narrow birlesik kullanildiginda sutun ortalaniyor ve sayfa
   basligiyla ayni sol kenardan baslamiyordu. Sarmalayici tam genislikte
   kalir, dar sinir cocuklara uygulanir - her sey ayni hizadan baslar.   */
.wrap.narrow { width: min(100% - 2 * var(--pad), var(--max)); max-width: none; }
.wrap.narrow > * { max-width: 60ch; }

/* Koridor bandi biraz daha yuksek dursun ki kompozisyon okunsun */
.band--art { padding: clamp(4.5rem, 12vw, 8.5rem) 0; }
.band--art .art__bg { object-position: 50% 42%; }

/* Mobilde genis gorselin ortasi kadraja giriyordu: koridorun derinligi
   disarida kaliyordu. Kadraji saga kaydirip kacis noktasini iceri aliyoruz. */
@media (max-width: 55rem) {
  .hero .art__bg { object-position: 68% 50%; }
}

/* ------------------------------------------------ koridor karesi seridi -- */
.gallery-band { padding: 0; }
.gallery {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
  background: #000;
}
.gallery__item { margin: 0; overflow: hidden; aspect-ratio: 3 / 4; }
.gallery__item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(.82); transform: scale(1.02);
  transition: filter .6s ease, transform 1.2s ease;
}
.gallery__item:hover img { filter: brightness(1.05); transform: scale(1.07); }
@media (max-width: 40rem) {
  .gallery { grid-template-columns: 1fr 1fr; }
  .gallery__item:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery__item img { transition: none; }
}

/* ------------------------------------------------ fotografli anlati -- */
/* Ana sayfa "seni ne bekliyor": her fotograf kendi metniyle, zigzag.
   Metinsiz 3'lu galeri seridinin yerine geldi (Yusif: "neyi anlatiyor?"). */
.story { padding-bottom: clamp(3rem, 8vw, 6rem); }
.story__list { display: grid; gap: clamp(2rem, 4.5vw, 3.5rem); margin-top: clamp(2rem, 5vw, 3.5rem); }
.story__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
.story__row--flip .story__img { order: 2; }
.story__img {
  margin: 0; position: relative; overflow: hidden; aspect-ratio: 5 / 4;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
}
.story__img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.9); }
/* kenarlar karanliga erir: fotograf sayfaya gomulu dursun, cerceveli kart gibi degil */
.story__img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 70px 18px rgba(8, 7, 3, .85);
}
.story__text { max-width: 34rem; }
.story__n {
  display: block; font: 800 clamp(3rem, 8vw, 5.5rem)/.9 var(--sans);
  color: transparent; -webkit-text-stroke: 1px var(--wall); opacity: .55; margin-bottom: .6rem;
}
.story__text h3 { font-size: var(--t-2); margin: .3rem 0 1rem; color: var(--bone); }
.story__text p { color: var(--bone-dim); }
/* Telefonda da YAN YANA (Yusif: "alt alta sarkmasin, toplu dursun"):
   fotograf ~%40, metin kisaltilir (ikinci paragraf gizli) */
@media (max-width: 55rem) {
  .story__list { gap: 1.75rem; margin-top: 1.5rem; }
  .story__row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: .9rem; align-items: center; }
  .story__row--flip { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .story__img { aspect-ratio: 3 / 4; }
  .story__img::after { box-shadow: inset 0 0 30px 8px rgba(8, 7, 3, .85); }
  .story__n { font-size: 2rem; margin-bottom: .2rem; }
  .story__text .eyebrow { font-size: .62rem; margin-bottom: .2rem; }
  .story__text h3 { font-size: 1.05rem; line-height: 1.25; margin: .15rem 0 .45rem; }
  .story__text p:not(.eyebrow) { font-size: .86rem; line-height: 1.5; margin: 0; }
  .story__text p:last-child:not(:nth-of-type(2)) { display: none; }
}

/* ------------------------------------------------------ ajans imzasi -- */
.foot-sign { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: .8rem; color: #8d866f; }
.foot-sign a { color: var(--bone-dim); }
.foot-sign--fixed { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; padding: .6rem 1rem;
  text-align: center; background: rgba(8, 7, 3, .85); border-top: 1px solid var(--line); z-index: 5; }

.foot__note { font-size: .78rem; color: #6f6a5c; }
.foot__links { margin: 0 0 .8rem; }

/* --------------------------------------------------------------- varlik -- */
/* URETILMIS BOLUM - elle duzenleme; tools/make_scare.py yazar.
   Ana sayfa kapagi, 10s dongu: floresan vizlar, kararmada koridorun dibinde
   Slender tarzi figur (dokunacsiz, normal kollu) belirir, kipirdamaz; isik
   kapanir, acilinca yandaki kapidan yari sakli, kafasi yamuk bakiyor; isik
   kapanir, fotograf yuz ekrana carpar, karanlik, isik geri gelir.
   Flas guvenligi: tam ekran degisimler saniyede en fazla 3 (make_scare.py). */
/* Sahne: fotografla ayni kirpilir (min-width/min-height aspect-ratio uzerinden
   aktarilir = cover). Figur konumlari FOTOGRAF koordinatinda (%). */
.stage {
  position: absolute; top: 50%; left: 50%; z-index: -1; pointer-events: none;
  transform: translate(-50%, -50%); min-width: 100%; min-height: 100%;
  aspect-ratio: 2400 / 1150;
  animation: corridor-fx 10s steps(1, end) infinite;   /* figurler de odayla birlikte titrer */
}
.entity {
  position: absolute; z-index: -1; pointer-events: none;
  left: 54.7%; top: 51.5%; height: 16%; aspect-ratio: 1 / 4;
  transform: translate(-50%, -100%); transform-origin: 50% 100%; opacity: 0;
  animation: entity 10s steps(1, end) infinite;
}
.ent {
  display: block; width: 100%; height: 100%; max-width: none; overflow: visible;
  animation: ent-jitter 10s steps(1, end) infinite;
}
.ent-head { transform-box: view-box; transform-origin: 60px 58px;
  animation: ent-head 10s steps(1, end) infinite; }
@keyframes ent-head {
  0%, 53.4% { transform: rotate(0); }
  53.5% { transform: rotate(-32deg); }
  62.5% { transform: rotate(-44deg); }
  71.5%, 100% { transform: rotate(0); }
}
@keyframes entity {
  0%, 32.9% { opacity: 0; left: 54.7%; top: 51.5%; height: 16%; }
  33% { opacity: 1; left: 54.7%; top: 51.5%; height: 16%; }
  51.15%, 100% { opacity: 0; left: 54.7%; top: 51.5%; height: 16%; }
}
@keyframes entity-m {
  0%, 32.9% { opacity: 0; left: 44%; top: 41.5%; height: 14.5%; }
  33% { opacity: 1; left: 44%; top: 41.5%; height: 14.5%; }
  51.15%, 100% { opacity: 0; left: 44%; top: 41.5%; height: 14.5%; }
}
/* Kapidaki figur: TAM GOVDE kapinin icinde durur, kasadan disari egilip bakar.
   Maske = kapi kasasi (dikey cizgi): cizginin solu gorunur (kafa, omuz, bir kol,
   govdenin bir kismi), sagi kapinin karanliginda. Kutu genis (viewBox -40..160)
   ki egilen govde kutudan tasip kesilmesin. RGB kaymasi yok. */
.entity.entity--door {
  animation-name: entity-door; aspect-ratio: 200 / 480;
  -webkit-mask-image: linear-gradient(90deg, #000 54%, transparent 58%);
          mask-image: linear-gradient(90deg, #000 54%, transparent 58%);
}
.entity--door .ent { animation: none; filter: drop-shadow(0 0 1px rgba(246,236,178,.2)) drop-shadow(0 0 10px rgba(0,0,0,.85));
  transform: none; }
.entity--door .ent-head { animation: none; transform: rotate(-24deg); }
@keyframes entity-door {
  0%, 52.25% { opacity: 0; left: 70%; top: 69.5%; height: 43%; transform: translate(-50%, -100%) ; }
  52.35% { opacity: 1; left: 70%; top: 69.5%; height: 43%; transform: translate(-50%, -100%) ; }
  73%, 100% { opacity: 0; left: 70%; top: 69.5%; height: 43%; transform: translate(-50%, -100%) ; }
}
@keyframes entity-door-m {
  0%, 52.25% { opacity: 0; left: 86.5%; top: 47%; height: 27%; transform: translate(-50%, -100%) ; }
  52.35% { opacity: 1; left: 86.5%; top: 47%; height: 27%; transform: translate(-50%, -100%) ; }
  73%, 100% { opacity: 0; left: 86.5%; top: 47%; height: 27%; transform: translate(-50%, -100%) ; }
}
@keyframes ent-jitter {
  0%, 53.4% { filter: contrast(1.15) drop-shadow(0 0 6px rgba(246,236,178,.22)) drop-shadow(0 0 14px rgba(0,0,0,.9)); }
  53.5%, 100% { filter: drop-shadow(0 0 14px rgba(0,0,0,.9)) drop-shadow(1.5px 0 0 rgba(255,30,30,.35)) drop-shadow(-1.5px 0 0 rgba(30,255,255,.3)); }
}
/* TELEFON: kapak tam ekran. Ofis fotografinin dikey kesimi (corridor-hero-m,
   uzak kapi ~%42 yukseklikte, arkasi aydinlik pencere), yazilar altta; ust
   yari bos -> figur pencerelerin onunde belirir, sonra sag duvardaki kapidan
   bakar. */
@media (max-width: 55rem) {
  .hero {
    min-height: calc(100svh - 3.75rem - 1px);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 0 0 clamp(1.5rem, 6vw, 2.25rem);
  }
  .hero .art__bg { object-position: 50% 50%; }
  .hero::before {
    background: linear-gradient(180deg,
      rgba(8, 7, 3, .25) 0%, rgba(8, 7, 3, .05) 30%, rgba(8, 7, 3, .35) 48%,
      rgba(8, 7, 3, .86) 64%, rgba(8, 7, 3, .96) 100%);
  }
  .hero .hero__tag { display: none; }
  .hero__lede { font-size: 1rem; text-shadow: 0 0 12px #000, 0 0 4px #000; }
  .hero .cta-row { flex-wrap: nowrap; gap: .5rem; margin-top: 1.25rem; }
  .hero .cta-row .btn { flex: 1 1 auto; justify-content: center; text-align: center;
    padding-left: .55rem; padding-right: .55rem; letter-spacing: .06em; white-space: nowrap; }
  .hero .cta-row .btn--primary { flex-grow: 1.4; }
  .hero .btn:not(.btn--primary) { background: rgba(8, 7, 3, .8); }
  .stage { aspect-ratio: 900 / 1579; }
  .entity { animation-name: entity-m; }
  .entity.entity--door { animation-name: entity-door-m;
    -webkit-mask-image: linear-gradient(90deg, #000 46%, transparent 50%);
            mask-image: linear-gradient(90deg, #000 46%, transparent 50%); }
  .entity--door .ent { transform: none; }   /* telefonda dik */
}


/* Son sicrama: gercek fotograf yuz tum kapagi kaplar, yazilarin ONUNDE
   (tiklama gecer). Once silinmis yuz, sonra yuzsuz kafa ile bozulur. */
.jumpface {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden;
  background: #000; opacity: 0;
  animation: jumpface 10s steps(1, end) infinite;
}
.jumpface img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 35%;
  animation: jumpface-img 10s steps(1, end) infinite;
}
.jumpface .jumpface__b { opacity: 0; animation: jumpface-img 10s steps(1, end) infinite, jumpface-b 10s steps(1, end) infinite; }
@media (max-width: 55rem) {
  .jumpface img { object-position: 50% 45%; }
}
@keyframes jumpface {
  0%, 74.4% { opacity: 0; }
  74.5% { opacity: 1; }
  81%, 100% { opacity: 0; }
}
@keyframes jumpface-img {
  0%, 74.4% { transform: none; filter: none; }
  74.5% { transform: translate(-1.2%, 0.6%) scale(1.04, 1.04); filter: brightness(.9) contrast(1.1) drop-shadow(5px 0 0 rgba(255,30,30,.35)) drop-shadow(-4px 0 0 rgba(30,255,255,.3)); }
  75.1% { transform: translate(1.6%, -0.8%) scale(1.12, 1.07); filter: brightness(.9) contrast(1.1) drop-shadow(9px 0 0 rgba(255,30,30,.35)) drop-shadow(-9px 0 0 rgba(30,255,255,.3)); }
  75.7% { transform: translate(-0.9%, 0.45%) scale(1.09, 1.11); filter: brightness(.9) contrast(1.1) drop-shadow(13px 0 0 rgba(255,30,30,.35)) drop-shadow(-4px 0 0 rgba(30,255,255,.3)); }
  76.3% { transform: translate(2%, -1.0%) scale(1.21, 1.15); filter: brightness(.9) contrast(1.1) drop-shadow(5px 0 0 rgba(255,30,30,.35)) drop-shadow(-9px 0 0 rgba(30,255,255,.3)); }
  76.9% { transform: translate(-1.7%, 0.85%) scale(1.19, 1.18); filter: brightness(.9) contrast(1.1) drop-shadow(9px 0 0 rgba(255,30,30,.35)) drop-shadow(-4px 0 0 rgba(30,255,255,.3)); }
  77.5% { transform: translate(1.1%, -0.55%) scale(1.28, 1.22); filter: brightness(.9) contrast(1.1) drop-shadow(13px 0 0 rgba(255,30,30,.35)) drop-shadow(-9px 0 0 rgba(30,255,255,.3)); }
  78.1% { transform: translate(-1.2%, 0.6%) scale(1.25, 1.25); filter: brightness(.9) contrast(1.1) drop-shadow(5px 0 0 rgba(255,30,30,.35)) drop-shadow(-4px 0 0 rgba(30,255,255,.3)); }
  78.7% { transform: translate(1.6%, -0.8%) scale(1.34, 1.29); filter: brightness(.9) contrast(1.1) drop-shadow(9px 0 0 rgba(255,30,30,.35)) drop-shadow(-9px 0 0 rgba(30,255,255,.3)); }
  79.3% { transform: translate(-0.9%, 0.45%) scale(1.29, 1.32); filter: brightness(.9) contrast(1.1) drop-shadow(13px 0 0 rgba(255,30,30,.35)) drop-shadow(-4px 0 0 rgba(30,255,255,.3)); }
  79.9% { transform: translate(2%, -1.0%) scale(1.44, 1.35); filter: brightness(.9) contrast(1.1) drop-shadow(5px 0 0 rgba(255,30,30,.35)) drop-shadow(-9px 0 0 rgba(30,255,255,.3)); }
  80.5% { transform: translate(-1.7%, 0.85%) scale(1.40, 1.39); filter: brightness(.9) contrast(1.1) drop-shadow(9px 0 0 rgba(255,30,30,.35)) drop-shadow(-4px 0 0 rgba(30,255,255,.3)); }
  81%, 100% { transform: none; filter: none; }
}
@keyframes jumpface-b {
  0%, 74.4% { opacity: 0; }
  74.5% { opacity: 0; }
  75.1% { opacity: 0; }
  75.7% { opacity: 0; }
  76.3% { opacity: 0; }
  76.9% { opacity: 0; }
  77.5% { opacity: 0; }
  78.1% { opacity: 1; }
  78.7% { opacity: 1; }
  79.3% { opacity: 1; }
  79.9% { opacity: 1; }
  80.5% { opacity: 1; }
  81%, 100% { opacity: 0; }
}

/* Kararma perdesi */
.scare-dim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: #000; opacity: 0;
  animation: scare-dim 10s steps(1, end) infinite;
}
@keyframes scare-dim {
  0% { opacity: 0; }
  31.5% { opacity: 1; }
  34.5% { opacity: 0; }
  50% { opacity: 1; }
  53.5% { opacity: 0; }
  71.5% { opacity: 1; }
  74.5% { opacity: 0; }
  81% { opacity: 1; }
  86.5% { opacity: 0.5; }
  89.5% { opacity: 0.8; }
  92.5% { opacity: 0; }
  100% { opacity: 0; }
}

/* TV karincasi - figurun de USTUNDE (yapistirma gibi durmasin), yaklastikca artar */
.static {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(static.png) 0 0 / 160px 160px; mix-blend-mode: screen; opacity: 0;
  animation: static-a 10s steps(1, end) infinite, static-move .24s steps(1, end) infinite;
}
@keyframes static-a {
  0% { opacity: 0; }
  31.5% { opacity: 0.1; }
  34.5% { opacity: 0.04; }
  50% { opacity: 0.12; }
  53.5% { opacity: 0.12; }
  71.5% { opacity: 0.2; }
  74.5% { opacity: 0.24; }
  81% { opacity: 0.2; }
  86.5% { opacity: 0.1; }
  92.5% { opacity: 0; }
}
@keyframes static-move {
  0% { background-position: 0 0; }          25% { background-position: -53px 71px; }
  50% { background-position: 97px -38px; }  75% { background-position: -121px -89px; }
}

/* Koridor fotografi: floresan vizlamasi + her sicramada sarsinti */
.hero .art__bg { animation: corridor-fx 10s steps(1, end) infinite; }
@keyframes corridor-fx {
  0% { filter: none; }
  24% { filter: brightness(.86); }
  24.7% { filter: brightness(1); }
  25.4% { filter: brightness(.86); }
  26.1% { filter: brightness(1); }
  26.8% { filter: brightness(.86); }
  27.5% { filter: brightness(1); }
  28.2% { filter: brightness(.86); }
  28.9% { filter: brightness(1); }
  29.6% { filter: brightness(.86); }
  30.3% { filter: brightness(1); }
  31% { filter: none; }
  63% { filter: brightness(.86); }
  63.7% { filter: brightness(1); }
  64.4% { filter: brightness(.86); }
  65.1% { filter: brightness(1); }
  65.8% { filter: brightness(.86); }
  66.5% { filter: brightness(1); }
  67.2% { filter: brightness(.86); }
  67.9% { filter: brightness(1); }
  68.6% { filter: brightness(.86); }
  69.3% { filter: brightness(1); }
  69.5% { filter: none; }
  100% { filter: none; }
}

/* Isik efektini kapat (WCAG 2.2.2): saf CSS onay kutusu */
.fx-off { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.fx-off__btn {
  position: absolute; right: var(--pad, 16px); top: .9rem; z-index: 4;
  font: 600 var(--t--1, .75rem)/1 var(--mono, monospace); letter-spacing: .14em;
  text-transform: uppercase; color: var(--bone-dim, #cfc6a8);
  background: rgba(8, 7, 3, .55); border: 1px solid var(--line, #3a3524);
  padding: .5rem .7rem; cursor: pointer;
}
.fx-off__btn:hover { color: var(--bone, #efe7cd); }
.fx-off:focus-visible + .fx-off__btn { outline: 2px solid var(--wall, #d8c66d); outline-offset: 2px; }
.fx-off:checked + .fx-off__btn { color: var(--wall, #d8c66d); border-color: var(--wall, #d8c66d); }
.fx-off:checked ~ .stage, .fx-off:checked ~ .scare-dim,
.fx-off:checked ~ .static, .fx-off:checked ~ .jumpface { display: none; }
.fx-off:checked ~ picture .art__bg { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .stage, .scare-dim, .static, .jumpface { display: none; }
  .hero .art__bg { animation: none; }
}