/* DENEYİM — "Bir gece, bir sabah" · dünya olarak kurulan ana sayfa (2026-10-09).
   Sayfa bir dünyadır: annenin odası, gece 3. Kaydırma kameradır (perde 1 ve 3'te film kaydırmaya bağlı ilerler), metin sahnenin içindedir,
   ışık çizgisi (canvas) LOGONUN İPLİĞİDİR (4. tur): giriş perdesinde tam işaret çizilir → sol oluktaki evine süzülür → kaydırmayla tek ipliğe çözülür → şafak ufkuna katılır → gündüz mürekkep iplik → kapanışta yeniden işaret.
   Gündüz zemini (ürün perdesi → topluluk → adımlar → SSS → kapanış) tek, uzun marka gradyeni (--g0 → --g3) + iki watermark (ürün perdesi sağ-alt, kapanış).
   Ölçü: taban 16 px, adım √φ = 1,272 (13 / 16 / 20,4 / 25,9 / 33 / 41,9 / 53,3 / 67,8 / 86,3 / 109,7). Boşluk theme --space-1..6 (φ dizisi); bileşen içi 4-pt (beyanlı).
   BİLİNÇLİ SAPMA: H1 ve dev başlık viewport'a göre ölçülenir (6,67vw → 1440'ta 96 px; BRIEF §4.1 ≥ 96 px) — sinema başlığı gibi; kalan her şey √φ.
   Ağırlık: 300 = en büyük ekran boyları + annenin ağzından cümleler; Mamity başlıkları 400; adım/düğme/menü/çip 500; kart adı/footer başlığı 600. Comfortaa yalnız logo + "Sabah oluyor." Kesme ’.
   Katmanlar (gece sahnesi, .stage isolation): film 0 · .glow canvas 1 (hero içi; iplik kamera evresinde metnin ARKASINDA) · metin .cue 2 · pencereler .windows 3 · giriş perdesi 5 · üst menü 30.
   Sayfa boyu .light canvas (fixed, z 1; giriş sırasında 6) kök bağlamdadır: sahne içeriğinin ÜSTÜNDE boyanır (ufuk, çerçeve, adım çizgisi, güneş, giriş morfu) — metin kutularına giren noktalar ×.2 soluklaşır (deneyim.js dims).
   Gece ve pencereler TEK yapışkan sahnedir (720vh): ilk yarı kamera (kare dizisi), ikinci yarı aynı kare üstünde koyulaşma + derinlik katmanları — perde dikişi yok.
   Tokenlar theme.css ile AYNI değerlerdir (sayfa symlink yolundan da tek başına dizilsin). Mağaza durumu: <html data-magaza="var|yakinda"> — varsayılan "var" (Özer kararı: uygulama yayında gibi); "yakinda" yalnız ?magaza=yakinda önizlemesi (deneyim.js). */

@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;src:url(fonts/poppins-latin-ext-300-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;src:url(fonts/poppins-latin-300-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Comfortaa;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/comfortaa-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Comfortaa;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/comfortaa-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins Yedek";src:local("Arial"),local("Helvetica Neue"),local("Liberation Sans");size-adjust:111.74%;ascent-override:93.97%;descent-override:31.32%;line-gap-override:8.95%}
@font-face{font-family:"Comfortaa Yedek";src:local("Arial"),local("Helvetica Neue"),local("Liberation Sans");size-adjust:107.52%;ascent-override:81.85%;descent-override:21.39%;line-gap-override:0%}

:root{
  --primary:#fdd66d;--primary-hover:#fcc84a;--primary-light:#fdcdc1;--secondary:#c7d9a7;--secondary-hover:#b5c995;--secondary-light:#f9f6e3;
  --tertiary:#063231;--white:#ffffff;--light-gray:#fafafa;--medium-gray:#666666;--dark-gray:#1f1f1f;--border:#e5e7eb;--text-muted:#9ca3af;
  --bg:var(--white);--surface:var(--secondary-light);--ink:var(--tertiary);--ink-muted:var(--medium-gray);--accent:var(--primary);--on-accent:var(--tertiary);--on-dark:var(--white);--focus-ring:var(--tertiary);
  --space-1:.618rem;--space-2:1rem;--space-3:1.618rem;--space-4:2.618rem;--space-5:4.236rem;--space-6:6.854rem;
  --radius-sm:.75rem;--radius-md:1rem;--radius-lg:1.618rem;--radius-full:9999px;
  --font-display:Comfortaa,"Comfortaa Yedek",Poppins,system-ui,sans-serif;--font-body:Poppins,"Poppins Yedek",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-fine:.8125rem;--fs-body:1rem;--fs-lead:1.272rem;--fs-3:1.618rem;--fs-4:2.058rem;--fs-5:2.618rem;--fs-6:3.33rem;--fs-7:4.236rem;--fs-8:5.39rem;--fs-9:6.86rem;
  --fs-h1:clamp(2.618rem,6.67vw,var(--fs-9)); /* 1440 → 96 px · 1920 → 109,7 (fs-9) · 1024 → 68 */
  --fs-big:clamp(2.618rem,5.5vw,var(--fs-8)); /* "Peki, indirince ne yapacağım?" 1440 → 79 px */
  --section:var(--space-6);
  --top-h:4.236rem;
  --pad:max(24px,6.5vw);
  --ease:cubic-bezier(.22,1,.36,1);--ease-line:cubic-bezier(.3,0,.2,1);
  --tertiary-hover:color-mix(in oklab,var(--tertiary) 86%,white);
  --warm:color-mix(in oklab,var(--white) 78%,var(--primary)); /* ışık çizgisinin gece rengi (sıcak beyaz) */
  --g0:#cfe0b0;--g1:#f4f1da;--g2:#fde0a6;--g3:#fdd0c3; /* marka gradyeni durakları (4. tur; Özer'in marka arkaplanları: assets/backgrounds/slide-*.svg ile birebir) — gündüz zemini */
  --dim:rgba(255,255,255,.78);
  --hair:rgba(6,50,49,.14);
  --hair-w:rgba(255,255,255,.16);
  --grain: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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (max-width:760px){:root{--section:var(--space-5);--top-h:3.5rem;--pad:16px}}
@supports not (color:color-mix(in srgb,red 50%,blue)){:root{--tertiary-hover:var(--tertiary);--warm:var(--white)}}
*,*:before,*:after{box-sizing:border-box}
html{overflow-x:clip;background:var(--tertiary);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html[data-static],html.kb{scroll-behavior:auto}
html[data-static]{overflow:hidden}
html[data-static] .stage{position:relative} /* statik mod: sahne betikle konumlanır (gövde translateY) */
body{margin:0;font-family:var(--font-body);font-size:var(--fs-body);line-height:1.618;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased}
img,video,canvas{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.act :focus-visible,.top:not(.day) :focus-visible,.foot :focus-visible{outline-color:var(--white)}
.act--dawn :focus-visible,.close :focus-visible{outline-color:var(--ink)}
[id]{scroll-margin-top:var(--top-h)}
.wrap{max-width:calc(1200px + 2 * var(--pad));margin:0 auto;padding-inline:var(--pad)} /* 4. tur: akış bölümleri de sahnelerle aynı oluğu (--pad) kullanır — iplik oluğun ortasında (pad/2) iner, hiçbir metne değmez; 1440'ta içerik 120+94 = eskisiyle aynı yerde */

/* yazı */
.h1{font-weight:300;font-size:var(--fs-h1);line-height:1.02;letter-spacing:-.025em;text-wrap:balance}
.h2{font-weight:400;font-size:var(--fs-4);line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
.say{font-weight:300;line-height:1.14;letter-spacing:-.02em;text-wrap:balance}
.lead{font-size:var(--fs-lead);line-height:1.5;text-wrap:pretty}
.muted{color:var(--ink-muted)}
.fine{font-size:var(--fs-fine);line-height:1.5}
p{text-wrap:pretty}
br.d{display:none}
@media (min-width:901px){br.d{display:inline}}

/* düğmeler */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3.236rem;padding:0 var(--space-3);border-radius:var(--radius-full);font:500 var(--fs-body)/1 var(--font-body);text-decoration:none;white-space:nowrap}
.btn--accent{background:var(--primary);color:var(--ink)}
.btn--accent:hover{background:var(--primary-hover)}
.btn--dark{background:var(--tertiary);color:var(--white)}
.btn--dark:hover{background:var(--tertiary-hover)}
.btn--line{border:1.5px solid var(--ink);color:var(--ink)}
.btn--line:hover{background:rgba(6,50,49,.06)}
.btn--sm{min-height:2.75rem;padding:0 var(--space-2)}
.link{display:inline-block;font-weight:500;text-underline-offset:.3em;text-decoration-thickness:1.5px;padding-block:.75rem}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-3)}
[data-magaza="var"] .st-soon,[data-magaza="yakinda"] .st-var{display:none}
.skip{position:absolute;left:var(--space-2);top:-100%;z-index:60;min-height:2.75rem;display:inline-flex;align-items:center;padding:.5rem 1rem;border-radius:var(--radius-full);background:var(--white);color:var(--ink);font-weight:500;text-decoration:none}
.skip:focus-visible{top:var(--space-2)}

/* GİRİŞ PERDESİ (4. tur): tam işaret tek kalemle çizilir (≤ 2 s), perde yukarı açılır. Zemin 5. tur: gece filminin karartılmış ilk karesi (.still = hero posteriyle aynı dosya ve kadraj; .intro:after karartma — hero scrim'inden koyu, perde kalkınca sahne aydınlanır); poster inene dek koyu çam. Giriş watermark'ı kalktı (BRIEF-5 §A).
   Azalt/`?intro=0`/tekrar ziyaret: perde hiç yok (.intro display none, betik). */
.intro{position:fixed;inset:0;z-index:5;overflow:hidden;background:var(--tertiary);color:var(--warm);pointer-events:none;--mx:18%;--my:32%} /* 5. tur düzeltme 1 (eleştirmen şart 1): işaret ortada bebeğin yüzüne oturuyordu → sol-üst üçte bir (x %18, y %32); telefonda ortanın biraz altı (yüz kutuları üstte) */
@media (max-width:760px){.intro{--mx:20%;--my:56%}} /* telefon: ortadan sol-alta — ortada kalınca evine (sol üst) süzülürken bebeğin yüzünden geçiyordu (yuz5 ölçümü) */
.intro .still,.intro .still img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 40%} /* .hero --focus ile aynı */
.intro:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(3,24,23,.86) 0,rgba(3,24,23,.56) 45%,rgba(3,24,23,.64) 100%)} /* karartma: çam tonu ama koyu/az doygun — hero scrim'inin yeşil örtüsü ikiye katlanmasın */
.intro svg,.intro .word{z-index:1}
.close .wm,.hero .film:before,html.cam:not(.dayflow) .act--day .stage:after,html:not(.cam) .act--day:after,html.dayflow .act--day:after{content:"";position:absolute;pointer-events:none;aspect-ratio:780/1000;
  -webkit-mask:url(img/mark.svg) center/contain no-repeat;mask:url(img/mark.svg) center/contain no-repeat} /* watermark: işaretin maskesi; renk/opaklık yerinde */
.hero .film:before{right:-4%;top:22%;width:min(38vw,46vh);background:var(--white);opacity:.045} /* düzeltme 1 (eleştirmen #4): watermark küçüldü/soldu, çizilen işaret büyüdü — kahraman işaret */ /* giriş + filmin inmediği an (poster altı) aynı zemin: koyu çam + beyaz işaret %6 */
.intro.canvas svg{opacity:0} /* işaret ışık canvas'ında çizilir, perde açılınca evine süzülür */
html.intro-on .top{opacity:0}
html.intro-on .light{z-index:6}
.intro svg{position:absolute;left:var(--mx);top:var(--my);translate:-50% -50%;width:clamp(5rem,11vw,8.5rem);height:auto;overflow:visible}
.intro path{fill:none;stroke:currentColor;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0;opacity:.92} /* canvas yoksa: işaretin dış hattı SVG'de çizilir */
.intro .word{position:absolute;left:var(--mx);top:calc(var(--my) + clamp(5rem,11vw,8.5rem) * .64 + .5rem);translate:-50% 0;font-family:var(--font-display);font-weight:700;font-size:1.618rem;letter-spacing:-.01em;color:var(--white);opacity:0}
html:not(.js) .intro,html.no-intro .intro{display:none}
.intro.open{transform:translateY(-100%)}
@media (prefers-reduced-motion:no-preference){
  html.js:not(.no-intro) .intro path{stroke-dashoffset:100;animation:draw 1200ms var(--ease) both}
  html.js:not(.no-intro) .intro .word{animation:word 500ms var(--ease) 800ms both}
  html.js:not(.no-intro) .intro.open .word{animation:wordout 150ms var(--ease) 70ms forwards} /* sözcük, daireler akmaya başlamadan (açılış + 220 ms) 150 ms önce söner */
  .intro.open{transition:transform 560ms cubic-bezier(.7,0,.2,1)}
  @keyframes draw{to{stroke-dashoffset:0}}
  @keyframes word{to{opacity:1}}
  @keyframes wordout{from{opacity:1}to{opacity:0}}
}
.intro.idle path{animation:none;stroke-dashoffset:0;opacity:.55}
/* başlık yerleşir: perde açılınca H1 → giriş → düğme → ince yazı sırayla (BRIEF §1 "film oynar, başlık yerleşir") */
@media (prefers-reduced-motion:no-preference){
  html.js.intro-on .act--night .cue>*,html.js.intro-on .hint{opacity:0}
  html.js.open .act--night .cue>*{animation:settle 700ms var(--ease) 450ms backwards} /* 450/550/650/750 ms: başlık belirmeye başladığında (açılış + 450) daireler sarmaya akmış, H1 kutusundaki çizgi ×.2'ye inmiş olur (ölçüldü); yerleşme açılış + 1,15 s'de biter */
  html.js.open .act--night .cue>:nth-child(2){animation-delay:550ms}
  html.js.open .act--night .cue>:nth-child(3){animation-delay:650ms}
  html.js.open .act--night .cue>:nth-child(4){animation-delay:750ms}
  html.js.open .hint{animation:settle 700ms var(--ease) 1100ms backwards}
  @keyframes settle{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}
.intro.gone{display:none}

/* IŞIK ÇİZGİSİ = LOGONUN İPLİĞİ (4. tur) — iki canvas. .light: sayfa boyu fixed, z 1 (kök bağlam) → sahne metninin ÜSTÜNDE boyanır; iplik sol olukta (pad/2) iner, metne değmez; koruma metin kutularında ×.2 (JS dims) yine açık.
   .glow: gece kamera evresinde .hero içinde absolute, z 1 → film (0) ile metin (2) ARASINDA. Gündüz bölümlerinde (.gun, .close) z-index YOK: iplik canvas'ı (z 1) bu bölümlerin üstünde kalır. */
.light{position:fixed;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
.light:not(.on){display:none}
.hero>.glow{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
.glow:not(.on){display:none}

/* ÜST MENÜ: fixed; gece perdelerinde saydam, gün ağarınca beyaz. blur yok. */
.top{position:fixed;inset:0 0 auto;z-index:30;color:var(--white)}
.top:before{content:"";position:absolute;inset:0 0 -60%;z-index:-1;background:linear-gradient(to bottom,rgba(6,50,49,.62),rgba(6,50,49,.28) 45%,rgba(6,50,49,0));pointer-events:none}
.top.day:before{content:none}
.top.solid:not(.day){background:var(--tertiary)} /* düzeltme 2: düz akışta hero sonrası koyu bölümde menü dolu zemin (alttaki yumuşak geçiş :before ile kalır) — içerik logo/bağlantıların altından geçerken çakışmaz */
html:not(.js) .top{background:var(--tertiary)}html:not(.js) .top:before{content:none} /* JS kapalı: .solid/.day sınıfları hiç gelmez → menü baştan dolu koyu zemin (krem bölümlerde beyaz logo kaybolmasın, metin altından geçmesin) — 2. tur doğrulaması düşük #2, orkestratör */
.top .bar{display:flex;align-items:center;gap:var(--space-3);height:var(--top-h);padding-inline:var(--pad)}
.logo{display:flex;align-items:center;gap:.55rem;padding-block:.375rem;text-decoration:none}
.logo img{width:2.25rem;height:2.25rem;filter:brightness(0) invert(1)}
.logo span{font-family:var(--font-display);font-weight:700;font-size:1.618rem;line-height:1;letter-spacing:-.01em}
.top nav{margin-left:auto;display:flex;align-items:center;gap:var(--space-2)}
.top nav a:not(.btn){text-decoration:none;padding:.75rem .5rem} /* "SSS" dâhil dokunma genişliği ≥ 44 */
.top nav a:not(.btn):hover{text-decoration:underline;text-underline-offset:.3em}
.top .btn{background:var(--white);color:var(--ink)}
.top.ev .logo{opacity:0;pointer-events:none} /* düzeltme 1: işaret evdeyken menü logosu yok (tek logo); iplik olunca belirir (geçiş aşağıda) */
.top.day{background:var(--white);color:var(--ink);box-shadow:inset 0 -1px 0 var(--border)}
.top.day .logo img{filter:none}
.top.day .btn{background:var(--tertiary);color:var(--white)}
@media (max-width:53.75em){.top nav .hide-m{display:none}.logo img{width:2rem;height:2rem}.logo span{font-size:1.5rem}} /* 5. tur (BRIEF-5 §B): masaüstü "Neler var? · SSS · Giriş Yap · [Uygulamayı İndir]"; telefonda yalnız "Giriş Yap · [İndir]" — "Uygulama" bağlantısı düğmeyle aynı kelimeyle başlıyordu (Özer: kafa karıştırıyor); ürün perdesi kaydırınca zaten gelir */
@media (max-width:26.25em){.top .bar{gap:var(--space-2)}.top nav{gap:.25rem}.top nav a:not(.btn){padding-inline:.375rem}}
@media (max-width:21.25em){.logo span{display:none}.logo{padding-inline:.375rem;margin-inline:-.375rem}}
.top .logo{flex-shrink:0} /* 2. turun 2. düzeltmesi (uygulama yayında): logo menüde hiç sıkışmaz — sıkışınca "mamity" yazısı kutusundan taşıp "Uygulama" ile üst üste biniyordu (360–414) */
@media (max-width:30em){.top .m-uzun{display:none}} /* menü kırılımları em (860/420/340/480 px ÷ 16): 16 px'te birebir aynı; tarayıcı yazı boyutu büyüyünce kırılım da büyür, menü kesilmez (2. tur doğrulaması, orkestratör) */ /* telefonda menü düğmesi "İndir" (erişilebilir ad "Uygulamayı İndir", aria-label) — "Uygulamayı İndir" 170 px, 360–414'te ekranın sağından kesiliyordu */

/* PERDE (act): masaüstünde yüksek bölüm + yapışkan sahne (kaydırma = kamera); telefonda akış. */
.act{position:relative;height:var(--act-h,320vh);color:var(--white);background:var(--tertiary)}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;display:grid}
.film{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--tertiary)}
.film>picture,.film>picture img,.film>canvas,.film>video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--focus,50% 50%)}
.film>canvas{display:none}
.film.frames>canvas{display:block}
.film>video{opacity:0}
.film>video.on{opacity:1}
.film .scrim{position:absolute;inset:0;background:var(--scrim)}
.film .grain{position:absolute;inset:0;opacity:.07;mix-blend-mode:soft-light;background-image:var(--grain)}
.cue{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}

/* PERDE 1+2 — GECE + BAŞKA PENCERELER: tek yapışkan sahne (720vh). İlk yarı: kamera anneye yaklaşır (kare dizisi), H1 96 px (1440) 2 satır, sarı yalnız burada;
   metin bloğu hafif yukarı kayar ve p .32–.42'de solar (JS --p). İkinci yarı: AYNI kare üstünde koyu scrim (--w) ve beş derinlik katmanı (JS transform/opacity), imleç parallax. Dikiş yok. */
.act--night{--act-h:720vh}
.act--night .stage{display:block}
.hero{position:absolute;inset:0;display:grid;align-content:end;padding:calc(var(--top-h) + var(--space-4)) var(--pad) var(--space-5);
  --focus:50% 40%;
  --scrim:linear-gradient(to top,rgba(6,50,49,.96) 0,rgba(6,50,49,.82) 20%,rgba(6,50,49,.46) 44%,rgba(6,50,49,.08) 66%,rgba(6,50,49,0) 80%),linear-gradient(to right,rgba(6,50,49,.72) 0,rgba(6,50,49,.3) 30%,rgba(6,50,49,0) 58%),linear-gradient(to bottom,rgba(6,50,49,.55),rgba(6,50,49,0) 18%)}
.act--night .cue{--p:0;transform:translateY(calc(var(--p) * -6vh));opacity:min(1,calc((1 - var(--p)) * 4))} /* p .75'ten sonra solar */
.act--night .cue:focus-within{opacity:1;transform:none} /* klavye: odak gelince blok görünür (WCAG 2.4.7); betik perde başına döner */
.act--night .cue.off{pointer-events:none}.act--night .cue.off:focus-within{pointer-events:auto}
.act--night .h1{max-width:11.6em;color:var(--white)} /* "Gece 3’te uyanık olan / tek sen değilsin." */
.act--night .lead{max-width:22em;color:var(--dim)}
.act--night .link{color:var(--white)}
.act--night .fine{color:var(--dim);max-width:28em}
.hint{position:absolute;right:var(--pad);bottom:var(--space-4);z-index:2;display:flex;align-items:center;gap:.75rem;font-size:var(--fs-fine);font-weight:500;color:var(--dim);letter-spacing:.01em}
.hint i{display:block;width:1px;height:2.618rem;background:linear-gradient(to bottom,transparent,var(--white) 40%,var(--white) 60%,transparent);background-size:100% 200%;opacity:.8}
@media (prefers-reduced-motion:no-preference){.hint i{animation:slide 2.4s linear infinite}@keyframes slide{from{background-position:0 100%}to{background-position:0 -100%}}}
.hint.off{opacity:0;transition:opacity 400ms}
@media (max-width:760px){.hint{display:none}}

/* BAŞKA PENCERELER (aynı sahnenin ikinci yarısı): koyu scrim --w ile gelir; katmanlar iki sütunda (A: p1/p3 · B: p2/p4), kart solda — 1000–2560 × p .85/1'de kutu×satır 0 ve örtme 0 ölçülür (düzeltme 2). */
.windows{position:absolute;inset:0;z-index:3;padding:calc(var(--top-h) + var(--space-3)) var(--pad) var(--space-4);pointer-events:none;--w:0;
  --focus:50% 50%;
  --scrim:linear-gradient(to bottom,rgba(6,50,49,.88),rgba(6,50,49,.8) 50%,rgba(6,50,49,.92))}
.windows .film{background:transparent}
.windows .film>picture{display:none} /* masaüstünde zemin, tutulan son kare (hero canvas) — ikinci görsel yok */
.windows .film .scrim{opacity:var(--w)}
.windows .h2{position:relative;z-index:2;max-width:12em;color:var(--white);opacity:0}
.deck{position:absolute;inset:0;z-index:2;perspective:1400px;transform-style:preserve-3d;pointer-events:none}
.deck .layer{position:absolute;pointer-events:auto;--o:1;--s:1;--y:0px;--z:0px;transform:translate3d(0,var(--y),var(--z)) scale(var(--s)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));opacity:var(--o);transform-origin:50% 50%}
.layer--card{left:var(--pad);top:max(30%,calc(var(--h2b,0px) + 1.5rem + 26px));width:min(22rem,calc(36% - var(--pad) - 1.5rem));--z:40px} /* üst kenar H2'nin altına bağlı (--h2b JS ölçer; +26 = p 1'deki yukarı kayma); sağ kenar p1/p3'ün (36 %) 1,5rem solunda — 1112×834'te 24 px çakışma yok */
.layer--p1{left:36%;top:14%;width:min(28rem,28vw);--z:110px}
.layer--p2{left:66%;top:34%;width:min(26rem,28vw);--z:170px}
.layer--p3{left:36%;top:56%;width:min(28rem,28vw);--z:70px}
.layer--p4{left:66%;top:70%;width:min(26rem,28vw);--z:130px}
.ask{background:var(--white);color:var(--ink);border-radius:var(--radius-md);padding:var(--space-3);display:grid;gap:var(--space-2);box-shadow:0 1px 2px rgba(6,50,49,.18),0 30px 60px -30px rgba(253,214,109,.45)}
.who{display:flex;align-items:center;gap:.75rem;font-size:var(--fs-fine);line-height:1.3}
.who b{display:block;font-size:var(--fs-body);font-weight:600}
.who span{color:var(--ink-muted)}
.av{width:2.618rem;height:2.618rem;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:600}
.who .av,.reply .av{color:var(--ink)} /* pembe/yeşil üstüne metin hep mürekkep (marka kuralı; 4,0:1 → 9+) */
.q{font-size:var(--fs-body);line-height:1.5}
.reply{display:flex;gap:.75rem;padding-top:var(--space-2);border-top:1px solid var(--border)}
.reply .av{width:2rem;height:2rem;font-size:var(--fs-fine)}
.reply p{background:var(--light-gray);border-radius:4px var(--radius-md) var(--radius-md) var(--radius-md);padding:.618rem .875rem;font-size:var(--fs-body);line-height:1.5}
.reply b{display:block;font-size:var(--fs-fine);font-weight:600}
.ask figcaption{font-size:var(--fs-fine);color:var(--ink-muted)}
.pain .say{font-size:var(--fs-4);text-indent:-.42em;quotes:"\201C" "\201D";text-wrap:pretty;color:var(--white)}
.pain .say:before{content:open-quote}.pain .say:after{content:close-quote}
.pain p+p{margin-top:var(--space-1);color:var(--dim);max-width:30em}
@media (min-width:1601px){.pain .say{font-size:var(--fs-5)}}
html.cam .deck .layer{pointer-events:none} /* kamera kipinde görünmez (opaklık 0) katman dokunmayı yakalamaz — hero düğmesinin üstünde duruyordu (düzeltme 1); görünür olunca JS 'auto' yazar */

/* PERDE 3 — ŞAFAK: film kaydırmaya bağlı; sayfanın tek Comfortaa cümlesi; mürekkep metin + krem scrim (ışık o köşeden doğar). Zemin koyudan kreme JS --p ile. */
.act--dawn{--act-h:auto;color:var(--ink)} /* iç içe: sahne (sticky 100svh) + .dawn-run (scrub payı, yalnız cam) + .act--day (ürün perdesi) — şafak sahnesi gün perdesi bitene dek yapışık: ürünün zemini aynı tuvalin son karesi */
.dawn-run{display:none}
html.cam .dawn-run{display:block;height:220vh;height:220svh}
.act--dawn .veil{display:none}
html.cam .act--dawn .veil{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;opacity:var(--v,0);
  background:linear-gradient(to top,rgba(244,241,218,1) 0,rgba(244,241,218,0) 16%),linear-gradient(to right,rgba(249,246,227,.9) 0,rgba(249,246,227,.84) 40%,rgba(253,232,186,.58) 68%,rgba(253,224,166,.46) 100%)} /* düzeltme 1 (eleştirmen #5): örtü KREM-SICAK (krem → sarı ucu), sağ yarı .46–.58 → odanın altın ışığı dönsün; alt kenar düz --g1 → .gun gradyeniyle dikişsiz */
.act--dawn .stage{align-content:end;padding:var(--space-5) var(--pad) var(--space-5);
  --focus:50% 40%;
  --scrim:linear-gradient(to top,rgba(249,246,227,.96) 0,rgba(249,246,227,.84) 22%,rgba(249,246,227,.4) 40%,rgba(249,246,227,0) 56%),linear-gradient(to right,rgba(249,246,227,.7) 0,rgba(249,246,227,.26) 28%,rgba(249,246,227,0) 48%)}
.act--dawn .film:before{content:"";position:absolute;inset:0;z-index:1;background:var(--tertiary);opacity:calc(1 - var(--p,0) * 1.56);pointer-events:none} /* gece → şafak: koyu örtü p 0'da tam (pencerelerin koyu scrim'iyle aynı düz renk → panel kenarı görünmez), p .64'te biter */
.act--dawn .film .scrim{z-index:2;opacity:min(1,calc(var(--p,0) * 2))}
.act--dawn .soft{font-family:var(--font-display);font-weight:700;font-size:var(--fs-6);line-height:1.12;letter-spacing:-.01em;--t:0;opacity:var(--t);transform:translateY(calc((1 - var(--t)) * 1.2rem))}
.act--dawn .lead{max-width:26em;--t:0;opacity:var(--t);transform:translateY(calc((1 - var(--t)) * 1.2rem))}
.act--dawn .cue{gap:var(--space-2)}
@media (min-width:1601px){.act--dawn .soft{font-size:var(--fs-7)}}

/* GÜN — ürün perdesi (.act--day, şafak perdesinin İÇİNDE). Akış (azalt / Save-Data / JS kapalı / düz / düşük bellek telefon): gün zemini + krem, üç cevap alt alta.
   cam: yapışkan sahne (masaüstü 100 + 340svh, telefon 100 + 360svh), zemin şafak tuvalinin son karesi (sahne saydam); dev başlık solda/üstte sabit; kanıtlar SIRAYLA (aynı anda bir):
   önceki küçülüp söner, yeni olan derinlikten gelir (JS opaklık + transform); ışık çizgisi etkin kanıtı çerçeveler. Başlık ve kanıt ayrı ızgara hücrelerinde → kesişim yapısal 0. */
.act--day{--act-h:auto;position:relative;color:var(--ink);padding-block:var(--section);overflow:clip;
  background:linear-gradient(128deg,rgba(249,246,227,.9),rgba(244,241,218,.92) 55%,var(--g1) 100%),url(img/gun-16x9.webp) 50% 30%/cover no-repeat var(--g1)} /* akış: krem-sıcak örtü, oda görseli altta soluk */
@media (max-width:760px){.act--day{background:linear-gradient(170deg,var(--g1),color-mix(in srgb,var(--g1) 65%,var(--g2)))}} /* telefon akışında (düşük bellek / azalt / Save-Data) görselsiz: görselin alt kenarı başlığın üstünde sert kenarlı şerit gibi duruyordu (2. tur jüri) */
.act--day .stage{position:relative;top:auto;height:auto;overflow:visible;display:block;isolation:auto;max-width:calc(1200px + 2 * var(--pad));margin:0 auto;padding-inline:var(--pad)}
/* WATERMARK (4. tur, BRIEF-4 §B): tam işaret mürekkep %5 — ürün perdesinin sağ altı (büyük, kesik); kapanışta .wm (tam, ipliğin çizdiği kutu). Marka kuralının "en çok bir kez" satırı Özer'in yönüyle güncellendi. */
html.cam:not(.dayflow) .act--day .stage:after,html:not(.cam) .act--day:after,html.dayflow .act--day:after{right:-9vw;bottom:-16vh;width:min(62vh,70vw);background:var(--ink);opacity:calc(.05 * var(--wmo,1));z-index:-1} /* --wmo JS: k1'de 0 (halkalarla çakışmasın), k2'den 1, perde çıkarken 0 */
@media (max-width:1200px){html.cam:not(.dayflow) .act--day .stage:after{right:-12vw;bottom:-8vh;width:min(46vh,40vw)}} /* 1024 k3 alt yazısının altına girmesin (bekçi #2) */
@media (max-width:760px){html.cam:not(.dayflow) .act--day .stage:after,html:not(.cam) .act--day:after,html.dayflow .act--day:after{content:none}} /* telefonda ürün watermark'ı yok (bekçi #2, anne #9): kopya metninin altında parça parça kalıyordu; kapanış watermark'ı kalır */
.act--day .say{font-size:var(--fs-big);max-width:16ch;margin-bottom:var(--space-5);line-height:1.02}
.feats{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-6)}
.feat{display:grid;grid-template-columns:minmax(0,29em) minmax(0,1fr);gap:var(--space-5);align-items:center}
.feat .copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);max-width:29em}
.feat h3{font-size:var(--fs-4);font-weight:400;line-height:1.2;letter-spacing:-.015em;max-width:22ch;text-wrap:balance}
.rings{width:100%;max-width:32rem;justify-self:start;overflow:visible}
.gruplar{display:grid;gap:var(--space-1)}.gruplar .rings-tel,.gruplar .gruplar-not{display:none}.gruplar .gruplar-not-m{color:rgba(6,50,49,.8)} /* 5. tur §C: masaüstü halkaları hamilelik → okul çağı; kalanlar ince notta (telefon notu ayrı: .gruplar-not) */
@media (max-width:760px){.gruplar .gruplar-not-m{display:none}.gruplar .rings{display:none}.gruplar .rings-tel{display:block;width:100%;max-width:22rem;overflow:visible}.gruplar .gruplar-not{display:block;color:rgba(6,50,49,.8)}.gruplar{--ar:1.9}.rings-tel .rl{font-size:30px}} /* düzeltme 2 (eleştirmen #2): telefonda pill tekrarı yerine halkaların telefona uyarlanmış hâli — 3 iç içe yay + 3 etiket (ekranda ≥ 15 px) + kalan üç grup bir cümle */ /* düzeltme 1 (anne #5): telefonda yaş halkaları + 6 küçük etiket "wifi işareti" gibi okunuyordu → topluluktaki beyaz pill'ler */
.rings .ring,.rings-tel .ring{fill:none;stroke:var(--tertiary);stroke-width:4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0}
.rings .rl,.rings-tel .rl{font-family:var(--font-body);font-weight:500;font-size:39px;fill:var(--ink);text-anchor:end}
.shot{width:100%;max-width:30rem;justify-self:start;display:grid;gap:var(--space-1)}
.shot img{width:100%;border-radius:var(--radius-md);background:var(--light-gray);box-shadow:0 1px 2px rgba(6,50,49,.05),0 40px 70px -36px rgba(6,50,49,.45);outline:1px solid rgba(6,50,49,.07);outline-offset:-1px}
.shot figcaption,.gun .muted,.act--day .muted{color:rgba(6,50,49,.8)} /* 4. tur: gradyen zeminde #666 yeşil durakta 4,1:1 kalır → ikincil metin mürekkebin %80'i (ölçüldü: ≥ 4,5 her konumda) */
/* 3. tur: uzman kanıtı telefonda kendi görseliyle (img/uzman-tel.webp: yalnız soru + cevap, gövde yazısı 16,5/372 → ekranda ≥ 12,5 px); --ar JS'in kanıt yüksekliği hesabına girer */
.shot--uzman{--ar:1.097}
.shot picture{display:block}
@media (max-width:760px){.shot--uzman{--ar:1.333}}
@media (max-width:900px){
  .act--day .say{font-size:var(--fs-5);max-width:none}
  .feat{grid-template-columns:1fr;gap:var(--space-3)}
  .feats{gap:var(--space-5)}
  .feat h3{font-size:var(--fs-3)}
  .rings,.shot{max-width:none;justify-self:stretch}
}
/* cam: yapışkan ürün perdesi */
html.cam:not(.dayflow) .act--day{height:calc(100vh + 340vh);height:calc(100svh + 340svh);padding:0;background:none}
html.cam:not(.dayflow) .act--day .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;max-width:none;margin:0;padding:0;isolation:isolate}
html.cam:not(.dayflow)[data-static] .act--day .stage{position:relative} /* statik kare kipi: sahne betikle konumlanır */
html.cam:not(.dayflow) .act--day{--colL:calc((100vw - 2 * var(--pad) - var(--space-5)) / 2.15)}
html.cam:not(.dayflow) .act--day .say{position:absolute;z-index:3;left:var(--pad);top:calc(var(--top-h) + var(--space-4));width:var(--colL);max-width:none;margin:0;text-wrap:wrap;
  font-size:clamp(3rem,calc(var(--colL) / 7.8),4.236rem);line-height:1.04;opacity:var(--ti,1);transform:translateY(var(--ty,0px))} /* --ty JS: giriş +32 → 0, kısa telefonda k2'ye geçerken −24 (söner). √φ tavanı 67,8 px; boy sol sütuna bağlı ("ne yapacağım?" ≈ 7,5em) → hep 2 satır, kanıt sütununa taşmaz (1440 → 67,8 · 1280 → 63 · 1024 → 53,4) */
html.cam:not(.dayflow) .feats{position:absolute;inset:0;display:block}
html.cam:not(.dayflow) .feat{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:var(--dth,40%) minmax(0,1fr);column-gap:var(--space-5);align-items:start;
  padding:calc(var(--top-h) + var(--space-4)) var(--pad) var(--space-5);pointer-events:none}
html.cam:not(.dayflow) .feat.on{z-index:2;pointer-events:auto}
html.cam:not(.dayflow) .feat .copy{grid-column:1;grid-row:2;max-width:26em;opacity:0;will-change:opacity,transform;align-self:start;align-self:safe end} /* metin sol-altta (sayfanın kuralı; boş alt pay kalmaz); sığmazsa "safe" üste döner — başlığın üstüne taşmaz */
html.cam:not(.dayflow) .feat .copy p.muted{color:rgba(6,50,49,.85)} /* oda zemini üstünde --medium-gray 4,56 kontrastta kalıyordu; mürekkebin %80 i → 6,7–7,05 → düzeltme 2: %85 (telefon kanıt bandında örtü .50'ye indi; metin her boyutta ≥ 7) */
html.cam:not(.dayflow) .feat .copy p.fine.muted{color:rgba(6,50,49,.72)}
html.cam:not(.dayflow) #uygulama{scroll-margin-top:0} /* menüdeki "Uygulama": sahne tam yapışık açılır (başlık + k1 görünür) */
html.cam:not(.dayflow) .feat .proof{grid-column:2;grid-row:1/3;align-self:center;justify-self:center;max-width:none;width:min(100%,38rem,calc(var(--ph,24rem) * var(--ar,1.4)));opacity:0;transform-origin:50% 55%;will-change:opacity,transform}
html.cam:not(.dayflow) .feat .shot{gap:var(--space-1)}
@media (min-width:901px) and (max-width:1200px){html.cam:not(.dayflow) .act--day{--colL:calc((100vw - 2 * var(--pad) - var(--space-5)) / 2)}html.cam:not(.dayflow) .feat{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (min-width:761px) and (max-height:760px){html.cam:not(.dayflow) .feat h3{font-size:var(--fs-3)}html.cam:not(.dayflow) .feat .copy{gap:var(--space-1)}}
/* ≤ 900 (telefon, iPad dikey): başlık üstte, kanıt ortada (kalan yüksekliğe sığar: --ph JS ölçer), metin altta */
@media (max-width:900px){
  html.cam:not(.dayflow) .act--day .say{top:calc(var(--top-h) + var(--space-3));width:calc(100% - 2 * var(--pad));max-width:14ch;font-size:var(--fs-5);text-wrap:balance}
  html.cam:not(.dayflow) .feat{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--dth,30%) minmax(0,1fr) auto;row-gap:var(--space-3);padding:calc(var(--top-h) + var(--space-3)) var(--pad) var(--space-4)}
  html.cam:not(.dayflow) .feat .copy{grid-row:3;max-width:none;gap:var(--space-1)}
  html.cam:not(.dayflow) .feat .proof{grid-column:1;grid-row:2;width:min(100% - 28px,32rem,calc(var(--ph,16rem) * var(--ar,1.4)))}
  html.cam:not(.dayflow) .feat h3{font-size:var(--fs-lead);line-height:1.3;max-width:none}
  html.cam:not(.dayflow) .feat .copy p{font-size:.9375rem;line-height:1.5}
  html.cam:not(.dayflow) .feat .copy .fine{font-size:var(--fs-fine)}
  /* kısa telefon (iPhone Safari çubuklu ≈ 390×660): başlıklı kanıt payı < 240 px ise (JS ölçer) k2/k3 başlıksız — başlık k1'den çıkarken söner, kanıt üst satıra çıkar */
  html.cam:not(.dayflow) .feat.notitle{grid-template-rows:minmax(0,1fr) auto}
  html.cam:not(.dayflow) .feat.notitle .proof{grid-row:1}
  html.cam:not(.dayflow) .feat.notitle .copy{grid-row:2}
}
@media (min-width:761px) and (max-width:900px){ /* iPad dikey: telefon dizilimi, bir √φ basamağı büyük */
  html.cam:not(.dayflow) .act--day .say{font-size:var(--fs-6);max-width:13ch}
  html.cam:not(.dayflow) .feat h3{font-size:var(--fs-3)}
  html.cam:not(.dayflow) .feat .copy{max-width:34em}
  html.cam:not(.dayflow) .feat .copy p{font-size:var(--fs-body)}
}
@media (max-width:760px){html.cam:not(.dayflow) .act--day{height:calc(100vh + 360vh);height:calc(100svh + 360svh)}}
@media (max-width:380px),(max-width:760px) and (max-height:700px){html.cam:not(.dayflow) .act--day .say{font-size:var(--fs-4)}}
@media (max-width:760px){html.dayflow .act--day .say{font-size:var(--fs-4);margin-bottom:var(--space-3)}html.dayflow #uygulama{scroll-margin-top:calc(var(--top-h) - var(--section))}} /* çok kısa telefonun ürün akışı: "Uygulama" kestirmesinde başlık menünün hemen altına iner, ilk cevap ve halkalar ilk ekrana girer */

/* GÜNDÜZ ZEMİNİ (4. tur): topluluk → adımlar → SSS → kapanış tek sarmalda (.gun), zemin tek uzun marka gradyeni — 128° çapraz, --g0 → --g1 → --g2 → --g3 + sağ üstten beyaz ışık (marka SVG'siyle aynı duraklar);
   kaydırdıkça yeşil-kremden sıcak pembeye akar (sabah ışığı). Bölümlerin kendi zemini yok; z-index yok (iplik canvas'ı üstte). Raster değil → bantlanmaz. */
.gun{position:relative;background:linear-gradient(to bottom,var(--g1) 0,rgba(244,241,218,0) 12vh),radial-gradient(1200px 680px at 100% 0,rgba(255,255,255,.92),rgba(255,255,255,0) 46%),radial-gradient(900px 520px at 12% 46%,rgba(255,255,255,.34),rgba(255,255,255,0) 60%),radial-gradient(760px 480px at 88% 72%,rgba(253,214,109,.22),rgba(253,214,109,0) 62%),linear-gradient(170deg,var(--g1) 0,var(--g0) 20%,var(--g1) 42%,color-mix(in srgb,var(--g1) 55%,var(--g2)) 70%,var(--g2) 86%,var(--g3) 100%)} /* düzeltme 1 (eleştirmen #8, anne #7): krem başlar (örtüyle dikişsiz), yeşil topluluğa, SSS'de yumuşak sarı (g1–g2 karışımı, color-mix), pembe kapanışa; iki pencere-ışığı lekesi (sol orta beyaz, sağ alt sıcak) — boş slayt değil, aynı oda ışığı */
/* TOPLULUK — film görünürlükle oynar; metin solda, film sağda kenara taşar */
.community{position:relative;background:transparent;padding-block:var(--section);overflow:clip}
.community .grid{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:var(--space-5);align-items:center}
.community .copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.community .h2{font-size:var(--fs-5)}
.community .lead{max-width:24em}
.reel{position:relative;isolation:isolate;aspect-ratio:16/9;width:calc(100% + max(0px,(100vw - 1200px)/2) + 24px);border-radius:var(--radius-lg) 0 0 var(--radius-lg);overflow:hidden;--scrim:none}
.reel .film{position:absolute}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0}
.chips li{font-size:var(--fs-fine);font-weight:500;line-height:1;padding:.75rem 1rem;border:1px solid var(--hair);border-radius:var(--radius-full);background:var(--white)}
@media (max-width:900px){
  .community .grid{grid-template-columns:1fr;gap:var(--space-4)}
  .community .h2{font-size:var(--fs-4)}
  .reel{aspect-ratio:4/3;width:calc(100% + 48px);margin-inline:-24px;border-radius:0}
}
@media (max-width:760px){.reel{width:calc(100% + 32px);margin-inline:-16px}}

/* ÜÇ ADIMDA BAŞLA — 4. tur: adım çizgisi ve halka düğümler kalktı (Özer); adımlar ince büyük rakamla (Poppins 300) — iplik sol olukta sessizce geçer */
.steps{position:relative;padding-block:var(--section) var(--space-5)} /* düzeltme 1: adımlar–SSS arası boşluk bir basamak kısa */
.steps:before,.faq:before,.community:before{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.05;mix-blend-mode:multiply;pointer-events:none}
.steps>.wrap,.faq>.wrap,.community>.wrap{position:relative}
.track{position:relative;margin-top:var(--space-4)}
.steps ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);counter-reset:adim}
.steps li{position:relative;display:flex;flex-direction:column;gap:var(--space-1);counter-increment:adim}
.steps li:before{content:counter(adim);display:block;font-size:var(--fs-6);font-weight:300;line-height:1;letter-spacing:-.03em;color:var(--ink);margin-bottom:var(--space-1)}
.steps h3{font-size:var(--fs-lead);font-weight:500;line-height:1.4}
.steps .cta-row{margin-top:var(--space-4)}
/* 5. tur: adım kesitleri — fotoğraf köşesi radius-lg (marka), 4:5; uygulama kesiti (telefon kadrajı, saydam webp) gradyen zemin üstünde alttan taşar */
.cut{margin:0;aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;background:var(--secondary-light);box-shadow:0 1px 2px rgba(6,50,49,.05),0 30px 50px -36px rgba(6,50,49,.4);outline:1px solid rgba(6,50,49,.06);outline-offset:-1px}
.cut img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.cut--app{background:linear-gradient(165deg,var(--g1) 0,color-mix(in srgb,var(--g0) 70%,var(--g1)) 100%)}
.cut--app img{object-position:50% 0}
.steps .cut{margin:var(--space-1) 0 var(--space-2)}
@media (max-width:760px){
  .steps ol{grid-template-columns:1fr;gap:var(--space-3)}
  .steps li{display:grid;grid-template-columns:2.5rem 1fr;grid-template-rows:auto auto auto;column-gap:var(--space-1)}
  .steps li:before{grid-row:1/4;font-size:var(--fs-5);margin:0}
  .steps .cut{aspect-ratio:4/3;margin:0 0 var(--space-1)}
}

/* SSS */
.faq{position:relative;background:transparent;padding-block:var(--section)}
.faq .grid{display:grid;grid-template-columns:1fr 1.618fr;gap:var(--space-5);align-items:start}
.faq .copy{display:flex;flex-direction:column;gap:var(--space-4)} /* 5. tur: sol yarı boş kalmaz — başlık + tek sıcak fotoğraf (pencere ışığı), kutular sağda */
.faq .cut{aspect-ratio:3/2}
.faq .cut img{object-position:50% 40%}
.faq details{border-top:1px solid var(--hair)}
.faq details:last-child{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--space-2);padding-block:var(--space-3);font-size:var(--fs-lead);line-height:1.4;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"";flex:none;width:.75rem;height:.75rem;margin-top:.45em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.faq details[open] summary:after{transform:rotate(-135deg);margin-top:.75em}
.faq details p{padding-bottom:var(--space-3);max-width:34em}
@media (max-width:900px){.faq .grid{grid-template-columns:1fr;gap:var(--space-3)}.faq .copy{gap:var(--space-3)}}

/* PERDE 7 — SABAH: film görünürlükle; metin sol-alt mürekkep; 4. tur: zemin gradyenin sonu (pembe) — film maske ile gradyene erir (scrim yerine; maske yoksa krem scrim kalır),
   iplik .wm watermark'ının (başlığın üstünde, sol sütun) kutusuna sarılıp işareti yeniden çizer; iki durumlu CTA + sigorta */
.close{position:relative;isolation:isolate;min-height:clamp(36rem,100svh,52rem);display:grid;align-content:end;color:var(--ink);padding:var(--space-6) var(--pad) var(--space-5);
  --focus:50% 30%;
  --scrim:linear-gradient(to top,rgba(249,246,227,.97) 0,rgba(249,246,227,.9) 30%,rgba(249,246,227,.5) 50%,rgba(249,246,227,0) 68%),linear-gradient(to right,rgba(249,246,227,.8) 0,rgba(249,246,227,.34) 32%,rgba(249,246,227,0) 56%)}
@supports ((mask-composite:intersect) or (-webkit-mask-composite:source-in)){
  .close{--scrim:none}
  .close .film{-webkit-mask-image:linear-gradient(to top,transparent 0,#000 62%),linear-gradient(to right,transparent 0,#000 54%),linear-gradient(to bottom,transparent 0,#000 14%);-webkit-mask-composite:source-in,source-in;
    mask-image:linear-gradient(to top,transparent 0,#000 62%),linear-gradient(to right,transparent 0,#000 54%),linear-gradient(to bottom,transparent 0,#000 14%);mask-composite:intersect} /* film üstten/soldan/alttan gradyene erir: sert kenar yok, metin gradyen üstünde */
}
.close .film{z-index:0}
.close .cue{z-index:2}
.close .wm{position:relative;display:block;width:clamp(7rem,10.6vw,10.4rem);background:var(--ink);opacity:.05;margin-bottom:var(--space-3)} /* işaretin kutusu: JS bu kutuya ipliği sarar (kitap ucu); watermark %5 */
.close>.cipa{position:absolute;left:0;bottom:100vh;bottom:100svh;width:1px;height:0;scroll-margin-top:0;pointer-events:none} /* "Uygulamayı İndir" (#indir) bu çapaya iner: kapanışın ALT kenarı ekranın altına oturur → mağaza düğmeleri her ekranda görünür (bölümün üstüne inince kısa telefonda ve 1024×768 / 1280×720'de ekranın altında kalıyordu) */
.close .h1{font-size:var(--fs-8)}
.close .lead{max-width:24em}
.soon{font-weight:400}
[data-magaza="yakinda"] .store{pointer-events:none;background:transparent;border:1.5px solid var(--hair);color:var(--ink)}
[data-magaza="yakinda"] .store .soon{color:var(--ink-muted)}
[data-magaza="yakinda"] .stores>.st-soon{order:-1}
[data-magaza="yakinda"] .stores:after{content:"";order:-1;flex-basis:100%;height:0}
@media (min-width:761px) and (max-width:1400px){.close{--focus:100% 30%}} /* dar kadrajda sağdaki boş duvar görünür kalsın: güneş film karesine çapalıdır (deneyim.js, kare x .85) — yüz/saç üstüne düşmez (1024/1200/1366'da ölçüldü) */

/* FOOTER */
.foot{position:relative;z-index:2;background:var(--tertiary);color:rgba(255,255,255,.8);padding-block:var(--space-5) var(--space-3);font-size:var(--fs-body)}
.foot .cols{display:grid;grid-template-columns:1.618fr 1fr 1fr;gap:var(--space-4)} /* 5. tur §C: Kurumsal sütunu kalktı (İletişim = e-posta); yayın 1 = tek sayfa + 4 yasal */
.foot h3{margin:0 0 var(--space-1);color:var(--white);font-size:var(--fs-body);font-weight:600}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:0}
.foot ul a{display:inline-block;padding:.6rem .5rem;margin-inline:-.5rem} /* "SSS" dâhil dokunma genişliği ≥ 44 */
.foot a{text-decoration:none}.foot a:hover{color:var(--white);text-decoration:underline}
.foot .logo span{color:var(--white)}
.foot .legal{margin-top:var(--space-5);padding-top:var(--space-3);border-top:1px solid rgba(255,255,255,.12);font-size:var(--fs-fine)}
@media (max-width:760px){.foot .cols{grid-template-columns:1fr 1fr}.foot .cols>div:first-child{grid-column:1/-1}}
@media (max-width:340px){.foot .cols{grid-template-columns:1fr}}

/* TELEFON (≤ 760). İki kip:
   html.cam (varsayılan telefon): gece + pencereler ve şafak + gün YAPIŞKAN sahne; 9:16 kare dizisi kaydırmaya bağlı (masaüstüyle aynı deterministik scrub). Gece 700svh = 100 sahne + 260 kamera + 340 pencereler (düzeltme 1);
     pencereler tek sütun "gelen mesaj" yığını (deste kendi kutusunda kırpılır, üstte maske; sütun adım adım yukarı kayar, aynı anda en çok iki katman).
   html:not(.cam) (yedek: deviceMemory ≤ 4 / canvas yok / düz yakalama): bugünkü akış — perdeler akışta, dikey gece filmi kendiliğinden oynar, katmanlar IO ile sırayla belirir.
   Her iki kipte ilk ekranda H1 + giriş + düğme (320×568, 360×640, 375×553 ölçülür). */
@media (max-width:760px){
  .act--night .h1{font-size:var(--fs-5);max-width:none}
  .act--night .lead{font-size:1.1rem;max-width:none}
  .act--night .cue{gap:var(--space-2)}
  .act--night .cta-row{align-self:stretch;flex-direction:column;align-items:stretch;gap:0}
  .act--night .cta-row .btn{width:100%}
  .act--night .cta-row .link{align-self:center}
  .act--night .fine{font-size:var(--fs-fine)}
  .layer--card{max-width:24rem}
  .pain .say{font-size:var(--fs-3)}
  .act--dawn .soft{font-size:var(--fs-5)}
  .act--dawn .lead{font-size:1.1rem}
  /* yedek akış */
  html:not(.cam) .act{height:auto}
  html:not(.cam) .stage{position:relative;height:auto;min-height:0}
  html:not(.cam) .hero{position:relative;inset:auto;min-height:min(100svh,56rem);padding:calc(var(--top-h) + var(--space-4)) var(--pad) var(--space-3);
    --focus:50% 0;
    --scrim:linear-gradient(to top,rgba(6,50,49,.95) 0,rgba(6,50,49,.84) 26%,rgba(6,50,49,.5) 50%,rgba(6,50,49,0) 72%)}
  html:not(.cam) .hero .film>picture img,html:not(.cam) .hero .film>video{top:auto;bottom:0;height:108%}
  html:not(.cam) .act--night .cue{transform:none;opacity:1}
  html:not(.cam) .windows{position:relative;inset:auto;z-index:auto;min-height:0;padding:var(--section) var(--pad) var(--space-4);pointer-events:auto;--w:1}
  html:not(.cam) .windows .film{background:var(--tertiary)}
  html:not(.cam) .windows .film>picture{display:block}
  html:not(.cam) .windows .h2{opacity:1}
  html:not(.cam) .deck{position:relative;inset:auto;perspective:none;transform-style:flat;display:grid;gap:var(--space-4);margin-top:var(--space-4)}
  html:not(.cam) .deck .layer{position:relative;left:auto;top:auto;width:auto;transform:none!important;opacity:1!important}
  html:not(.cam) .deck .layer.pending{opacity:0!important;transform:translateY(1.5rem)!important}
  html:not(.cam) .deck .layer.in{transition:opacity 600ms var(--ease),transform 600ms var(--ease)}
  /* şafak (yedek): film üstte (pencere + ışık kadrajda — 9:16 film, odak üst), metin altta krem zeminde */
  html:not(.cam) .act--dawn .stage{min-height:0;display:flex;flex-direction:column;gap:var(--space-3);padding:0 var(--pad) var(--space-4);background:var(--secondary-light);--focus:50% 24%}
  html:not(.cam) .act--dawn .film{position:relative;inset:auto;height:24rem;margin-inline:calc(-1 * var(--pad));
    --scrim:linear-gradient(to top,rgba(249,246,227,1) 0,rgba(249,246,227,0) 26%)}
  html:not(.cam) .act--dawn .film:before{content:none}
  html:not(.cam) .act--dawn .film .scrim{opacity:1}
  html:not(.cam) .act--dawn .cue{position:relative}
  html:not(.cam) .act--dawn .soft,html:not(.cam) .act--dawn .lead{opacity:1;transform:none}
  /* cam: yapışkan gece sahnesi (dikey kare dizisi), başlık bloğu masaüstündeki gibi süzülüp söner */
  html.cam .act--night{--act-h:700vh;height:700svh} /* 100 sahne + 260 kamera + 340 pencereler (düzeltme 1: 250 → 340 — her dert ≥ ~1 ekran okunur; deneyim.js SPLIT = 260/600) */
  html.cam .hero{padding:calc(var(--top-h) + var(--space-4)) var(--pad) var(--space-3);
    --focus:50% 40%;
    --scrim:linear-gradient(to top,rgba(6,50,49,.95) 0,rgba(6,50,49,.84) 26%,rgba(6,50,49,.5) 50%,rgba(6,50,49,0) 72%),linear-gradient(to bottom,rgba(6,50,49,.5),rgba(6,50,49,0) 16%)}
  html.cam .windows{padding:calc(var(--top-h) + var(--space-3)) var(--pad) var(--space-2);display:flex;flex-direction:column} /* deste H2'nin altına düzenle bağlı (JS ölçüsü yok → CLS 0) */
  html.cam .windows .h2{max-width:11em}
  html.cam .deck{position:relative;inset:auto;flex:1 1 auto;min-height:0;margin-top:calc(var(--space-3) - 1.5rem);padding:1.5rem 0 .5rem 14px;perspective:none;transform-style:flat; /* üst 1,5rem maske payı (ilk katman kesilmez), sol 14 px asılı tırnak + ışık yayı oluğu */
    display:flex;flex-direction:column;gap:var(--space-4);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0,var(--tertiary) 1.25rem);mask-image:linear-gradient(to bottom,transparent 0,var(--tertiary) 1.25rem)} /* maske yalnız alfayı okur; renk paletten */
  html.cam .deck .layer{position:relative;left:auto;top:auto;width:auto;flex:none;opacity:0;transform-origin:50% 0}
  html.cam .layer--card{padding:var(--space-2) var(--space-3) var(--space-3)}
  @media (max-height:700px){ /* kısa telefon (SE, 320×568, uygulama içi tarayıcı): kart + H2 desteye sığsın */
    html.cam .windows .h2{font-size:var(--fs-3)}
    html.cam .layer--card{padding:var(--space-2);gap:var(--space-1)}
    html.cam .ask .q,html.cam .reply p{font-size:.875rem;line-height:1.45}
    html.cam .reply{padding-top:var(--space-1)}
    html.cam .pain .say{font-size:var(--fs-lead)}
  }
  /* cam: şafak sahnesi tam ekran 9:16 dizi; metin altta krem scrim üstünde */
  html.cam .act--dawn .stage{padding:0 var(--pad) var(--space-5);--focus:50% 50%;
    --scrim:linear-gradient(to top,rgba(249,246,227,.97) 0,rgba(249,246,227,.88) 22%,rgba(249,246,227,.4) 40%,rgba(249,246,227,0) 54%)}
  html.cam .act--dawn .veil{background:linear-gradient(to top,rgba(249,246,227,1) 0,rgba(249,246,227,.92) 40%,rgba(249,246,227,.54) 56%,rgba(249,246,227,.50) 68%,rgba(249,246,227,.84) 84%,rgba(249,246,227,.88) 100%)} /* oda görünsün: kanıt bandında örtü .50–.54 (düzeltme 2, eleştirmen O2: .62–.66'dan indi; kanıt kendi zemininde), başlık ve metin bantlarında ≥ .84 */
  html.cam .dawn-run{height:200vh;height:200svh}
  /* kapanış */
  .close{min-height:0;padding-top:35rem;padding-bottom:var(--space-5);--focus:58% 40%;
    --scrim:linear-gradient(to top,rgba(249,246,227,1) 0,rgba(249,246,227,.9) 14%,rgba(249,246,227,.45) 26%,rgba(249,246,227,0) 40%)}
  .close .film{bottom:auto;height:34rem}
  @supports ((mask-composite:intersect) or (-webkit-mask-composite:source-in)){
    .close{--scrim:none}
    .close .film{-webkit-mask-image:linear-gradient(to top,transparent 0,#000 46%),linear-gradient(to bottom,transparent 0,#000 12%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to top,transparent 0,#000 46%),linear-gradient(to bottom,transparent 0,#000 12%);mask-composite:intersect}
  }
  .close .wm{width:6rem;margin-bottom:var(--space-2)}
  .close .h1{font-size:var(--fs-5)} /* telefonda hiyerarşi: H1 37,6 (3 satır) · "Peki" 41,9 · "Sen de sor" 41,9 — ilk ekran fısıldamaz */
  .close .cta-row{flex-direction:column;align-items:stretch;align-self:stretch;gap:var(--space-1);flex-wrap:nowrap}
  [data-magaza="yakinda"] .close .stores:after{content:none}
  .close .btn{width:100%}
  .close .link{align-self:center}
}
@media (max-width:390px){.act--night .h1{font-size:2.35rem}} /* iPhone 12–16 genişliği: dev tip 3 satır, 37,6 px (400'de 41,9) */
@media (max-width:340px){.act--night .h1{font-size:2rem}.close .btn{white-space:normal;line-height:1.2;padding-block:.75rem;flex-wrap:wrap}.close .btn .soon{flex-basis:100%;text-align:center}}
/* ara genişlikler (761–1100, iPad yatay / küçük dizüstü): sahne kalır, metin daha küçük. Kart sol sütunda (H2'nin altına bağlı), dertler kartın sağında (--rc = kartın sağ kenarı + 1,5rem) —
   kart hiçbir dert cümlesini ya da H2'yi örtmez. Kısa pencerede (≤ 900 yüksek) dertler 2×2 ızgara + daha küçük yazı; satır B'nin üstü satır A'nın altına bağlı (--rowB JS ölçer). */
@media (min-width:761px) and (max-width:1100px){
  .act--night .h1{font-size:clamp(2.618rem,6vw,4.236rem)}
  .windows{--rc:calc(var(--pad) + min(19rem,36vw) + 1.5rem)}
  .layer--p1,.layer--p2,.layer--p3,.layer--p4{width:min(24rem,40vw)}
  .layer--card{width:min(19rem,36vw);top:max(22%,calc(var(--h2b,0px) + 1.5rem + 26px))}
  .layer--p1{left:44%;top:14%}.layer--p2{left:56%;top:40%}.layer--p3{left:var(--rc);top:62%}.layer--p4{left:54%;top:80%}
  .pain .say{font-size:var(--fs-3)}
}
@media (min-width:761px) and (max-width:1100px) and (max-height:900px){
  .windows{--rw:calc((100% - var(--rc) - var(--pad) - 1.5rem) / 2)}
  .layer--p1,.layer--p2,.layer--p3,.layer--p4{width:var(--rw)}
  .layer--p1{left:var(--rc);top:calc(var(--h2b,0px) + 1.5rem + 35px)}
  .layer--p2{left:calc(var(--rc) + var(--rw) + 1.5rem);top:28%}
  .layer--p3{left:var(--rc);top:calc(var(--rowB,56%) + 53px)}
  .layer--p4{left:calc(var(--rc) + var(--rw) + 1.5rem);top:calc(var(--rowB,68%) + 62px + 2.5rem)}
  .pain .say{font-size:var(--fs-lead)}
  .pain p+p{font-size:var(--fs-fine)}
}
/* uzun ara pencere (761–1100 × > 900, iPad dikey): H2 daha dar (p1'in açılış tırnağına bitişmesin), p4'ün üstü p3'ün altına bağlı
   (--p3b JS ölçer; p 1'de p3 53, p4 62 px yukarı kayar → 62 − 53 + 24 = 33 px) — 768×1024'te p3/p4 bitişikliği kapanır */
@media (min-width:761px) and (max-width:1100px) and (min-height:901px){
  .windows .h2{max-width:8em} /* 768'de "Başka / pencereler de / yanıyor": sağ kenar ≈ 273, p1 44 % = 338 → ≥ 1rem boşluk */
  .layer--p4{top:max(80%,calc(var(--p3b,0px) + 33px))}
}
/* kısa masaüstü penceresi (≥ 1101 × ≤ 720: tarayıcı çubuklu dizüstü, %125 ölçek): ara bandın 2×2 ızgarası. p1 H2'nin altında
   (menü bandına girmez), p2 menü bandının altında, B satırı A satırının altına bağlı (--rowB). */
@media (min-width:1101px) and (max-height:720px){
  .windows{--rc:calc(var(--pad) + min(22rem,calc(36% - var(--pad) - 1.5rem)) + 1.5rem);--rw:calc((100% - var(--rc) - var(--pad) - 1.5rem) / 2)}
  .layer--p1,.layer--p2,.layer--p3,.layer--p4{width:var(--rw)}
  .layer--p1{left:var(--rc);top:calc(var(--h2b,0px) + 1.5rem + 35px)}
  .layer--p2{left:calc(var(--rc) + var(--rw) + 1.5rem);top:max(28%,calc(var(--top-h) + 1.5rem + 44px))}
  .layer--p3{left:var(--rc);top:calc(var(--rowB,56%) + 53px)}
  .layer--p4{left:calc(var(--rc) + var(--rw) + 1.5rem);top:calc(var(--rowB,68%) + 62px + 2.5rem)}
  .pain .say{font-size:var(--fs-lead)}
  .pain p+p{font-size:var(--fs-fine)}
}
@media (min-width:1101px) and (max-height:640px){.layer--p4{top:calc(var(--rowB,68%) + 62px)}}
@media (min-width:761px) and (max-width:1100px) and (max-height:640px){.layer--p4{top:calc(var(--rowB,68%) + 62px)}} /* çok kısa pencere (900×600): B satırında kaydırma yok, son satır viewport altına inmez */

/* HAREKET: yalnız azalt kapalıyken. */
@media (prefers-reduced-motion:no-preference){
  .film>video{transition:opacity 400ms ease-out}
  .top .logo{transition:opacity 500ms var(--ease)}
  .top,.top .btn,.logo img{transition:background-color 200ms,color 200ms,box-shadow 200ms,filter 200ms,opacity 400ms}
  .btn{transition:background-color 160ms ease-out,transform 120ms ease-out}
  .btn:active{transform:translateY(1px)}
  .faq summary:after{transition:transform 160ms ease-out,margin-top 160ms ease-out}
  .draw{transition:stroke-dashoffset 800ms var(--ease)}
  .pending .draw{stroke-dashoffset:100;transition:none}
  .in .ring:nth-of-type(2){transition-delay:70ms}
  .in .ring:nth-of-type(3){transition-delay:140ms}
  .in .ring:nth-of-type(4){transition-delay:210ms}
  .in .ring:nth-of-type(5){transition-delay:280ms}
  .in .ring:nth-of-type(6){transition-delay:350ms}
}
/* AZALT: film/canvas yok (betik çıkar), her şey sabit ve görünür; perdeler akışa döner (sayfa düz okunur).
   Aynı kurallar html.reduce (Save-Data / prefers-reduced-data: başlık betiği + deneyim.js sınıfı koyar — BRIEF §4.4 masaüstünde de düz) ve html:not(.js) (JS kapalı) / html.no-engine (deneyim.js 3 s içinde gelmedi: baş betiği sigortası) için de uygulanır — yapışkan 720vh sahne donmasın, katmanlar H1'in üstüne binmesin, gizli metin 0. */
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .act{height:auto}
  .stage{position:relative;height:auto;min-height:0}
  .hero{position:relative;inset:auto;min-height:100svh}
  .act--night .cue{transform:none;opacity:1}
  .act--night .cue>*,.hint{opacity:1;animation:none}
  .windows{position:relative;inset:auto;z-index:auto;min-height:0;padding-block:var(--section) var(--space-4);pointer-events:auto;--w:1}
  .windows .film{background:var(--tertiary)}
  .windows .film>picture{display:block}
  .windows .h2{opacity:1}
  .act--dawn .film:before{content:none}
  .act--dawn .film .scrim{opacity:1}
  .act--dawn .soft,.act--dawn .lead{opacity:1;transform:none}
  .proof{transform:none;opacity:1}
  .deck .layer{--o:1;--s:1;--y:0px;--rx:0deg;--ry:0deg;opacity:1!important;transform:none!important}
  .hint,.light,.glow{display:none}
}
@media (prefers-reduced-motion:reduce) and (min-width:761px){
  .windows{padding-block:var(--section) var(--space-4)}
  .act--dawn .stage{min-height:100svh}
  .deck{position:relative;inset:auto;perspective:none;display:grid;grid-template-columns:1fr 1.618fr;gap:var(--space-4) var(--space-5);margin-top:var(--space-4)}
  .deck .layer{position:relative;left:auto;top:auto;width:auto}
  .layer--card{grid-row:1/5;max-width:22rem}
}
html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)) *,html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)) *:before,html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)) *:after{animation:none!important;transition:none!important}
html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)){scroll-behavior:auto}
html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)) .act{height:auto}
html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)) .stage{position:relative;height:auto;min-height:0}
html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)) .hero{position:relative;inset:auto;min-height:100svh}
html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)) .act--night .cue{transform:none;opacity:1}
html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)) .act--night .cue>*,html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)) .hint{opacity:1;animation:none}
html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)) .windows{position:relative;inset:auto;z-index:auto;min-height:0;padding-block:var(--section) var(--space-4);pointer-events:auto;--w:1}
html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)) .windows .film{background:var(--tertiary)}
html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)) .windows .film>picture{display:block}
html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)) .windows .h2{opacity:1}
html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)) .act--dawn .film:before{content:none}
html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)) .act--dawn .film .scrim{opacity:1}
html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)) .act--dawn .soft,html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)) .act--dawn .lead{opacity:1;transform:none}
html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)) .proof{transform:none;opacity:1}
html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)) .deck .layer{--o:1;--s:1;--y:0px;--rx:0deg;--ry:0deg;opacity:1!important;transform:none!important}
html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)) .hint,html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)) .light,html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)) .glow{display:none}
@media (min-width:761px){
  html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)) .windows{padding-block:var(--section) var(--space-4)}
  html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)) .act--dawn .stage{min-height:100svh}
  html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)) .deck{position:relative;inset:auto;perspective:none;display:grid;grid-template-columns:1fr 1.618fr;gap:var(--space-4) var(--space-5);margin-top:var(--space-4)}
  html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)) .deck .layer{position:relative;left:auto;top:auto;width:auto}
  html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)) .layer--card{grid-row:1/5;max-width:22rem}
}
/* YATAY TELEFON / KISA YATAY PENCERE (html.yatay: yükseklik ≤ 500 ve yatay, yüklemede; düzeltme 1): düz akış + ilk ekran yüksekliğe göre — H1 menünün altında ve tam, düğme ilk ekranda (844×390, 932×430, 740×360, 667×375) */
@media (max-height:500px) and (orientation:landscape){ /* düz akışın her türü (yatay yükleme, dikeyden çevirince düşüş, azalt) */
  html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)) .hero{padding:calc(var(--top-h) + var(--space-2)) var(--pad) var(--space-3)}
  html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)) .act--night .h1{font-size:clamp(2rem,10vh,var(--fs-6));max-width:16em}
  html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)) .act--night .cue{gap:var(--space-2)}
  html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)) .act--night .lead{font-size:1.1rem;max-width:30em}
  html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)) .act--day .say{font-size:var(--fs-5)}
}

/* DÜZ MOD (html.flat): yalnız tam-sayfa yakalama (pencere > 2400 px ve > 760 geniş) ya da ?flat=1 — yapışkan sahne yerine her perde tek sahne (56rem), katmanlar son hâlinde, filmler sabit kare. Gerçek kullanıcı (1440×1500, 2560×1440) bunu görmez. */
html.flat .act{height:auto}
html.flat .stage{position:relative;height:auto}
html.flat .hero{position:relative;inset:auto;height:56rem}
html.flat .windows{position:relative;inset:auto;height:56rem;--w:1}
html.flat .windows .film{background:var(--tertiary)}
html.flat .windows .film>picture{display:block}
html.flat .windows .h2{opacity:1}
html.flat .act--dawn .stage{height:56rem}
html.flat .act--night .cue{transform:none;opacity:1}
html.flat .act--dawn .film:before{opacity:0}
html.flat .act--dawn .film .scrim{opacity:1}
html.flat .act--dawn .soft,html.flat .act--dawn .lead{opacity:1;transform:none}
html.flat .hint{display:none}
html.flat .light{position:absolute}
html.flat .glow{display:none} /* düz modda tüm hâller tek (absolute) canvas'ta çizilir */
html.flat .top{position:absolute}
html.flat .close .wm,html:is(.reduce,.no-engine,.yatay,.buyuk-yazi,:not(.js)) .close .wm{opacity:.05} /* düz/azalt: iplik yok, watermark kalır */