/* =========================================================
   Saff Medya — yeni tasarım
   ========================================================= */

:root {
  --paper: #f3f0ea;
  --paper-2: #e9e4db;
  --ink: #121110;
  --ink-2: #1c1a18;
  --muted: #6f6a63;
  --muted-light: #a39d94;
  --line: rgba(18, 17, 16, .12);
  --line-light: rgba(243, 240, 234, .16);
  --accent: #f19100;

  /* Hero dili: açık zemin, mürekkep tonu (hero ve Anlatı ile aynı değerler) */
  --bg: #ffffff;
  --bg-alt: #f5f5f7;
  --text: #1d1a2e;
  --sub: #4a4460;
  --soft: #6b6480;
  --hairline: rgba(29, 26, 46, .1);
  --violet: #5a3fbf;
  --grad: linear-gradient(100deg, #a8305a 0%, #5a3fbf 100%);

  --sans: "Inter Tight", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  --gutter: clamp(16px, 4vw, 56px);
  --radius: clamp(18px, 2.4vw, 32px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --header-h: 84px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

html[dir="rtl"] body { --sans: "IBM Plex Sans Arabic", "Inter Tight", system-ui, sans-serif; }

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
/* Vurgu: hero harf akışının derin tonları. Bölünmüş başlıkta (data-split) degrade her kelimenin iç span'ine de verilir */
em, em .w > span {
  font-style: normal; font-weight: inherit;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

::selection { background: #d4ccff; color: var(--text); }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--paper);
  transform: translateY(-200%); transition: transform .3s var(--ease);
}
.skip-link:focus { transform: none; }

.container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(96px, 14vw, 200px) 0; }

/* ---------- Tipografi (Anlatı başlığıyla aynı ölçü) ---------- */
.container--text { max-width: calc(1080px + 2 * var(--gutter)); }
.section--alt { background: var(--bg-alt); }

.label {
  margin: 0 0 22px; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--soft);
}
html[dir="rtl"] .label { letter-spacing: 0; font-size: 15px; }

.display {
  margin: 0; padding-bottom: .04em;
  font-size: clamp(40px, 5.8vw, 92px); line-height: 1.02; letter-spacing: -.045em; font-weight: 700;
  color: var(--text); text-wrap: balance;
}
.display--md { font-size: clamp(36px, 4.6vw, 72px); line-height: 1.04; }
.display--xl { font-size: clamp(48px, 7.4vw, 120px); line-height: .98; }
html[dir="rtl"] .display { letter-spacing: 0; line-height: 1.3; }

/* Split animasyon yardımcıları */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.w > span { display: inline-block; will-change: transform; }

/* ---------- Metin bağlantısı ---------- */
.link-arrow { font-size: 17px; font-weight: 500; color: var(--text); white-space: nowrap; }
.link-arrow::after { content: " ›"; }
html[dir="rtl"] .link-arrow::after { content: " ‹"; }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------- İmleç ----------
   Geometri (konum, boyut, köşe, esneme) main.js'te yay ile hesaplanır; burada yalnız görünüm.
   Stil html[data-imlec] ile seçilir: simdiki | apple | fark | cam | damla. */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 90; pointer-events: none;
  width: 0; height: 0; display: none; transition: opacity .3s;
}
.has-cursor .cursor { display: block; }
.cursor.is-hidden { opacity: 0; }
.cursor__shape {
  position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink);
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease), -webkit-backdrop-filter .35s, backdrop-filter .35s;
}
.cursor__label {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  font-size: 14px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); white-space: nowrap;
  opacity: 0; transition: opacity .25s;
}
.cursor.is-label .cursor__label { opacity: 1; transition-delay: .08s; }
.cursor.is-label .cursor__shape { background: var(--accent); }

/* 00 · Şimdiki */
[data-imlec="simdiki"] .cursor.is-link .cursor__shape { background: rgba(241, 145, 0, .25); }
[data-imlec="simdiki"] .cursor.is-dark:not(.is-label) .cursor__shape { background: var(--paper); }

/* 01 · Apple işaretçi — yarı saydam nokta, bağlantıda öğenin kendi şekline dönüşür */
[data-imlec="apple"] .cursor__shape { background: rgba(28, 26, 24, .26); }
[data-imlec="apple"] .cursor.is-dark .cursor__shape { background: rgba(243, 240, 234, .42); }
[data-imlec="apple"] .cursor.is-link .cursor__shape { background: rgba(18, 17, 16, .065); }
[data-imlec="apple"] .cursor.is-link.is-dark .cursor__shape { background: rgba(243, 240, 234, .1); }
[data-imlec="apple"] .cursor.is-link.is-lift .cursor__shape { background: rgba(255, 255, 255, .14); }
[data-imlec="apple"] .cursor.is-text .cursor__shape { background: rgba(18, 17, 16, .72); }
[data-imlec="apple"] .cursor.is-text.is-dark .cursor__shape { background: rgba(243, 240, 234, .85); }
[data-imlec="apple"] .cursor.is-label .cursor__shape { background: var(--accent); }

/* 02 · Fark — altındakini tersine çevirir; başlıkların üstünde büyüyüp mercek olur */
[data-imlec="fark"] .cursor { mix-blend-mode: difference; }
[data-imlec="fark"] .cursor.is-label { mix-blend-mode: normal; }
[data-imlec="fark"] .cursor__shape { background: #fff; }
[data-imlec="fark"] .cursor.is-label .cursor__shape { background: var(--accent); }

/* 03 · Sıvı cam — üst barla aynı malzeme: bulanık, parlak kenarlı mercek + ortada hassas nokta */
[data-imlec="cam"] .cursor__shape {
  background: rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(2px) saturate(180%) brightness(1.06);
  backdrop-filter: blur(2px) saturate(180%) brightness(1.06);
  box-shadow:
    inset 0 0 0 .5px rgba(255, 255, 255, .75),
    inset 0 1.5px 1px rgba(255, 255, 255, .8),
    inset 0 -3px 6px rgba(0, 0, 0, .06),
    0 10px 24px -12px rgba(0, 0, 0, .4);
}
[data-imlec="cam"] .cursor__shape::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 50%; background: var(--ink); transition: transform .35s var(--ease), background-color .35s;
}
[data-imlec="cam"] .cursor.is-dark .cursor__shape::after { background: var(--paper); }
[data-imlec="cam"] .cursor:is(.is-link, .is-label, .is-text) .cursor__shape::after { transform: scale(0); }
[data-imlec="cam"] .cursor.is-link .cursor__shape { background: rgba(241, 145, 0, .1); }
[data-imlec="cam"] .cursor.is-label .cursor__shape {
  background: rgba(243, 240, 234, .55);
  -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
}
[data-imlec="cam"] .cursor.is-text .cursor__shape { background: var(--ink); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-imlec="cam"] .cursor.is-text.is-dark .cursor__shape { background: var(--paper); }

/* 04 · Damla — hızla yönüne doğru uzayan mürekkep damlası; bağlantıda halkaya açılır */
[data-imlec="damla"] .cursor.is-dark:not(.is-label) .cursor__shape { background: var(--paper); }
[data-imlec="damla"] .cursor.is-link .cursor__shape { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
[data-imlec="damla"] .cursor.is-link.is-dark .cursor__shape { background: transparent; box-shadow: inset 0 0 0 1.5px var(--paper); }

/* ---------- Üst bar (sıvı cam) ---------- */
.header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  padding: 16px var(--gutter);
  pointer-events: none; /* boş kenar boşluğu tıklamaları engellemesin */
}
.header__inner {
  --bar-logo: 124px; /* logo genişliği (22px yükseklikte) — daralmış hap bunu sarar */
  position: relative; isolation: isolate; pointer-events: auto; overflow: hidden;
  width: min(100%, 1200px); margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  height: 58px; padding-inline: 24px 8px; border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(14px) saturate(200%) brightness(1.04);
  backdrop-filter: blur(14px) saturate(200%) brightness(1.04);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .7),
    inset 0 -1px 1px rgba(255, 255, 255, .18),
    inset 0 0 22px rgba(255, 255, 255, .16),
    0 12px 32px -14px rgba(18, 17, 16, 0);
  transition: color .5s, background-color .5s, box-shadow .5s, width .8s var(--ease), padding .8s var(--ease);
}
/* Kaydırınca bar ortada yalnız logoyu taşıyan küçük bir hapa daralır; en üste dönünce açılır */
.header.is-compact .header__inner { width: calc(var(--bar-logo) + 48px); padding-inline: 24px; }
.header__nav, .header__actions { transition: opacity .5s .3s, visibility 0s; }
.header.is-compact .header__nav,
.header.is-compact .header__actions { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.header.is-solid .header__inner {
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .7),
    inset 0 -1px 1px rgba(255, 255, 255, .18),
    inset 0 0 22px rgba(255, 255, 255, .16),
    0 12px 32px -14px rgba(18, 17, 16, .32);
}
/* Kenarda ışık kırılması */
.header__inner::before {
  content: ""; position: absolute; inset: 0; z-index: 1; padding: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(120deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .12) 32%, rgba(255, 255, 255, .04) 60%, rgba(255, 255, 255, .7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* Üst yarıda yumuşak parıltı */
.header__inner::after {
  content: ""; position: absolute; inset: 1px 1px 50%; z-index: -1; pointer-events: none;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0));
}
.header__logo { display: inline-flex; justify-self: start; }
.header__logo img { width: auto; max-width: none; height: 22px; filter: brightness(0); transition: filter .5s; }

.header__nav { display: flex; }
.header__nav a {
  position: relative; padding: 8px 14px; font-size: 14.5px; white-space: nowrap;
  opacity: .72; transition: opacity .3s;
}
.header__nav a:hover, .header__nav a.is-active { opacity: 1; }
.header__nav a::after {
  content: ""; position: absolute; inset-inline: 14px; bottom: 4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .5s var(--ease);
}
html[dir="rtl"] .header__nav a::after { transform-origin: 100% 50%; }
.header__nav a.is-active::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; justify-self: end; gap: 16px; }
.header__cta {
  display: inline-flex; align-items: center; gap: 10px; height: 42px; padding-inline: 20px 16px;
  border-radius: 999px; background: var(--ink); color: var(--paper);
  font-size: 14px; font-weight: 500; white-space: nowrap;
  transition: background-color .5s, color .5s;
}
.header__cta:hover { background: #2d2a27; }
.header__cta svg {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .4s var(--ease);
}
.header__cta:hover svg { transform: translate(2px, -2px); }
html[dir="rtl"] .header__cta svg { transform: scaleX(-1); }
html[dir="rtl"] .header__cta:hover svg { transform: scaleX(-1) translate(2px, -2px); }

/* Dil seçici: düz metin, ince ayraçlar */
.lang { display: flex; align-items: center; }
.lang i { width: 1px; height: 10px; background: currentColor; opacity: .2; }
.lang button {
  padding: 6px 9px; font-size: 12px; font-weight: 500; letter-spacing: .08em;
  opacity: .45; transition: opacity .3s;
}
.lang button:hover { opacity: .8; }
.lang button[aria-pressed="true"] { opacity: 1; }

.burger {
  display: none; position: relative; width: 44px; height: 44px; border-radius: 50%;
  background: var(--ink); color: var(--paper); transition: background-color .5s, color .5s;
}
.burger i {
  position: absolute; left: 14px; right: 14px; height: 1.5px; background: currentColor;
  transition: transform .45s var(--ease), top .45s var(--ease);
}
.burger i:first-of-type { top: 18px; }
.burger i:last-of-type { top: 25px; }
.burger[aria-expanded="true"] i:first-of-type { top: 21.5px; transform: rotate(45deg); }
.burger[aria-expanded="true"] i:last-of-type { top: 21.5px; transform: rotate(-45deg); }

/* Koyu zeminin üstünde (data-header-dark) ya da mobil menü açıkken */
.header.on-dark .header__inner,
.header.is-menu .header__inner { color: var(--paper); background: rgba(20, 18, 16, .34); }
.header.on-dark .header__logo img,
.header.is-menu .header__logo img { filter: none; }
.header.on-dark .header__cta { background: var(--paper); color: var(--ink); }
.header.on-dark .header__cta:hover { background: #fff; }
.header.on-dark .burger,
.header.is-menu .burger { background: var(--paper); color: var(--ink); }

/* Cam desteklenmiyorsa ya da kullanıcı saydamlığı azaltmışsa: dolu zemin */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header__inner { background: rgba(243, 240, 234, .94); }
  .header.on-dark .header__inner, .header.is-menu .header__inner { background: rgba(18, 17, 16, .9); }
}
@media (prefers-reduced-transparency: reduce) {
  .header__inner { background: rgba(243, 240, 234, .94); }
  .header.on-dark .header__inner, .header.is-menu .header__inner { background: rgba(18, 17, 16, .9); }
}

/* ---------- Mobil menü ---------- */
.menu {
  position: fixed; inset: 0; z-index: 45;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--header-h) + 40px) var(--gutter) 32px;
  background: var(--ink); color: var(--paper);
  clip-path: circle(0% at calc(100% - 44px) 46px);
  transition: clip-path .8s var(--ease);
}
html[dir="rtl"] .menu { clip-path: circle(0% at 44px 46px); }
.menu.is-open { clip-path: circle(150% at calc(100% - 44px) 46px); }
html[dir="rtl"] .menu.is-open { clip-path: circle(150% at 44px 46px); }
.menu__nav { display: flex; flex-direction: column; gap: 4px; }
.menu__nav a { display: flex; align-items: flex-start; gap: 12px; font-size: clamp(40px, 11vw, 72px); line-height: 1.1; letter-spacing: -.03em; font-weight: 500; }
.menu__nav sup { font-size: 13px; color: var(--muted-light); letter-spacing: 0; margin-top: 14px; }
.menu__foot { display: grid; gap: 8px; color: var(--muted-light); }
.menu__social { display: flex; gap: 20px; margin-top: 12px; color: var(--paper); }

/* ---------- Hero (Paper Warp akışı — assets/js/hero-flow.js) ---------- */
.hero {
  --hero-ink: #1d1a2e;
  --hero-pad: calc(var(--header-h) + 24px) var(--gutter) clamp(56px, 8vh, 96px);
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center; padding: var(--hero-pad);
  text-align: center; background: #fff; color: var(--hero-ink);
}
/* Shader çalışmazsa (WebGL yok / JS kapalı) görünen durağan zemin; canvas gelince üstünü örter */
.hero__flow {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 18% 20%, #ffd4ae, rgba(255, 212, 174, 0) 70%),
    radial-gradient(55% 50% at 82% 25%, #ffc4d8, rgba(255, 196, 216, 0) 70%),
    radial-gradient(60% 55% at 75% 85%, #d4ccff, rgba(212, 204, 255, 0) 70%),
    radial-gradient(55% 50% at 15% 85%, #c4e9ff, rgba(196, 233, 255, 0) 70%),
    #fff;
}
.hero__flow[data-flow="ink"] { background: linear-gradient(115deg, #1d1a2e 20%, #a8305a 42%, #1d1a2e 58%, #5a3fbf 80%, #1d1a2e); }

/* Harf içi akış: .hero__ink yalnız başlık kutusunu kaplar (konum/boyut hero-flow.js'ten, .is-inked ile açılır).
   .hero__knock beyaz zemin + siyah başlık; screen ile koyu akış yalnız harflerde kalır,
   .hero__ink multiply ile beyazı şeffaflaştırır. JS yoksa başlık düz koyu renkte görünür. */
.hero__ink {
  position: absolute; left: var(--ink-x, 0); top: var(--ink-y, 0); width: var(--ink-w, 0); height: var(--ink-h, 0);
  overflow: hidden; isolation: isolate; mix-blend-mode: multiply; pointer-events: none; visibility: hidden;
}
/* Koyu akış kutunun 2px içinde: kenardaki yumuşatılmış pikseller yalnız beyaz maskeye düşer,
   multiply sonrası kutunun çevresinde ince çizgi kalmaz (harflere en az 13px uzak, görüntü değişmez) */
.hero__ink .hero__flow { inset: 2px; }
.hero__knock { position: absolute; inset: 0; background: #fff; mix-blend-mode: screen; }
.hero__knock .hero__title { position: absolute; left: var(--ink-pad, 0); top: var(--ink-pad, 0); width: var(--title-w, auto); color: #000; }
.hero.is-inked .hero__ink { visibility: visible; }
/* Görünür h1 erişilebilirlik ve seçim için DOM'da; rengi harf içi akıştan gelir */
.hero.is-inked .hero__title--front { color: transparent; }

/* Alt kenarda sayfa zeminine yumuşak geçiş */
.hero::after {
  content: ""; position: absolute; inset: auto 0 0; height: 16vh; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--bg));
}

.hero__inner { position: relative; z-index: 1; }
.hero__title {
  margin: 0; padding-bottom: .08em;
  font-size: clamp(44px, 6.4vw, 104px); line-height: 1; letter-spacing: -.045em; font-weight: 700;
}
html[dir="rtl"] .hero__title { letter-spacing: 0; line-height: 1.25; }
.hero__sub { margin: 32px 0 0; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.4; letter-spacing: -.01em; font-weight: 500; color: #4a4460; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px; margin-top: 44px; }
.hero__btn {
  display: inline-flex; align-items: center; height: 44px; padding: 0 22px; border-radius: 999px;
  background: var(--hero-ink); color: #fff; font-size: 16px; font-weight: 500; white-space: nowrap;
  transition: transform .5s var(--ease), background-color .3s;
}
.hero__btn:hover { transform: scale(1.03); background: #2d2842; }

/* Açılış: iki başlık kopyası aynı anda yükselir */
.js .hero__inner, .js .hero__knock .hero__title { animation: hero-rise 1.3s var(--ease) .15s both; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(28px); } }

@media (max-width: 600px) {
  .hero__title { font-size: 13.5vw; }
  .hero .m-break { display: block; }
}

.stage { padding: clamp(56px, 8vw, 120px) var(--gutter) 0; }
.stage__media {
  position: relative; display: block; width: 100%;
  max-width: 1440px; margin: 0 auto;
  aspect-ratio: 21 / 9; max-height: 88vh;
  border-radius: var(--radius); overflow: hidden; background: #0c0b0f;
  transform-origin: 50% 0;
  box-shadow: 0 50px 90px -50px rgba(29, 26, 46, .45);
}
.stage__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, .3));
}

/* Sahne slaytı: WebGL tuvali ilk kare hazır olunca posterin üstünde belirir */
.reel, .reel__poster, .reel__gl { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.reel__poster { object-fit: cover; object-position: 55% 50%; transform: scale(1.03); }
.reel__gl { opacity: 0; transition: opacity .9s var(--ease); }
.reel.is-live .reel__gl { opacity: 1; }


/* ---------- Hakkımızda (kaydırdıkça kelime kelime dolar) ---------- */
.about__text {
  margin: 0;
  font-size: clamp(30px, 4.2vw, 60px); line-height: 1.12; letter-spacing: -.035em; font-weight: 600;
  color: var(--text);
}
html[dir="rtl"] .about__text { letter-spacing: 0; line-height: 1.5; }
.about__text .word { color: var(--text); }
.js-words .about__text .word { color: rgba(29, 26, 46, .14); }

/* ---------- Anlatı: assets/css/story.css ---------- */

/* ---------- İşlerimiz: assets/css/work.css ---------- */

/* ---------- Ne yapıyoruz ---------- */
.services__head { max-width: 860px; margin: 0 auto clamp(48px, 6vw, 88px); text-align: center; }
.services__intro {
  margin: 28px auto 0; max-width: 46ch;
  font-size: clamp(17px, 1.35vw, 21px); line-height: 1.5; color: var(--sub); text-wrap: pretty;
}

/* Deste: her hizmet kendi pastel ışığı olan yapışkan bir kart; sıradaki kart üstüne biner.
   Geride kalan kartın ölçeği ve karartması (--dim) main.js'te kaydırmaya göre ayarlanır. */
.deck { max-width: 1330px; margin: 0 auto; }
.deck__card {
  --tint: #ffd4ae; --tint2: #ffc4d8;
  position: sticky; top: calc(14vh + var(--i, 0) * 16px);
  height: min(64vh, 620px); margin-bottom: 10vh;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: end; gap: 40px;
  padding: clamp(28px, 4vw, 64px); border-radius: var(--radius); background: var(--bg);
  overflow: hidden; isolation: isolate; transform-origin: 50% 0;
  box-shadow: 0 30px 60px -40px rgba(29, 26, 46, .35), 0 0 0 1px rgba(29, 26, 46, .04);
}
.deck__card:last-child { margin-bottom: 0; }
/* Hero'nun "Nefes" paletinden iki köşe ışığı */
.deck__card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(80% 90% at 0% 0%, var(--tint), rgba(255, 255, 255, 0) 62%),
    radial-gradient(70% 80% at 100% 100%, var(--tint2), rgba(255, 255, 255, 0) 60%);
}
.deck__card::after { content: ""; position: absolute; inset: 0; background: rgba(29, 26, 46, var(--dim, 0)); pointer-events: none; }
.deck__card:nth-child(1) { --i: 0; --tint: #ffd4ae; --tint2: #ffc4d8; }
.deck__card:nth-child(2) { --i: 1; --tint: #c4e9ff; --tint2: #d4ccff; }
.deck__card:nth-child(3) { --i: 2; --tint: #ffc4d8; --tint2: #ffd4ae; }
.deck__card:nth-child(4) { --i: 3; --tint: #d4ccff; --tint2: #c4e9ff; }
.deck__card:nth-child(5) { --i: 4; --tint: #ffd4ae; --tint2: #c4e9ff; }
.deck__num {
  align-self: start; font-size: clamp(88px, 13vw, 210px); line-height: .8; font-weight: 700; letter-spacing: -.06em;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.deck__title { margin: 0; font-size: clamp(28px, 3.2vw, 52px); line-height: 1.05; letter-spacing: -.04em; font-weight: 700; color: var(--text); text-wrap: balance; }
.deck__body p { margin: 16px 0 0; max-width: 46ch; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; color: var(--sub); }
html[dir="rtl"] .deck__title { letter-spacing: 0; line-height: 1.35; }
html[dir="rtl"] .deck__num { letter-spacing: 0; }

/* ---------- İlke cümlesi: projektör ışığı paneli + kaydırdıkça netleşen kelimeler ----------
   Bölüm ekran boyundan uzun; panel sabitlenir, ilerleme main.js'te kelimelere ve ışığa (--light) dağıtılır. */
.statement { position: relative; height: 240vh; }
.statement__pin {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: grid; padding: clamp(16px, 2.4vw, 32px) var(--gutter);
}
.statement__panel {
  position: relative; overflow: hidden; isolation: isolate;
  width: 100%; max-width: 1440px; margin: 0 auto;
  display: grid; place-items: center; padding: clamp(48px, 7vw, 112px) var(--gutter);
  border-radius: var(--radius); text-align: center;
  transform-origin: 50% 60%;
}
/* Projektör ışığı: panelin altından yelpaze gibi açılan pastel hüzmeler (hero'nun "Nefes" paleti).
   Durağan; yalnız yoğunluğu (--light) cümle netleştikçe artar. */
.statement__light { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #fff; }
.statement__light::before {
  content: ""; position: absolute; inset: -10%; filter: blur(22px); opacity: var(--light, 1);
  background: conic-gradient(from 270deg at 50% 112%,
    #fff 0deg, #ffd4ae 10deg, #fff 20deg, #ffc4d8 32deg, #fff 44deg, #d4ccff 58deg, #fff 70deg,
    #c4e9ff 84deg, #fff 96deg, #ffd4ae 110deg, #fff 122deg, #ffc4d8 136deg, #fff 148deg,
    #d4ccff 162deg, #fff 172deg, #c4e9ff 180deg, #fff 181deg);
}
/* Dikey ekranda panel uzun ve dar: yelpaze geniş bir kutuda çizilip yatayda sıkıştırılır,
   böylece masaüstündeki gibi birkaç hüzme sığar (yoksa ortadaki tek hüzme tüm paneli kaplar) */
@media (max-aspect-ratio: 1/1) {
  .statement__light::before { left: -50%; right: -50%; transform: scaleX(.5); }
}
@media (max-aspect-ratio: 3/5) {
  .statement__light::before { left: -150%; right: -150%; transform: scaleX(.25); }
}
/* Kaynakta beyaz parıltı, üstte perdeye doğru sönme */
.statement__light::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(40% 30% at 50% 104%, #fff, rgba(255, 255, 255, 0) 70%),
    linear-gradient(0deg, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, .7));
}
.statement__text {
  margin: 0 auto; max-width: 17em;
  font-size: clamp(34px, 5.4vw, 88px); line-height: 1.08; letter-spacing: -.04em; font-weight: 600;
  color: var(--text); text-wrap: balance;
}
/* Tek renk mürekkep: burada degrade vurgu yok */
.statement__text em { background: none; color: inherit; }
.statement__text .fw { display: inline-block; will-change: filter, opacity, transform; }
html[dir="rtl"] .statement__text { letter-spacing: 0; line-height: 1.4; }
@media (prefers-reduced-motion: reduce) {
  .statement { height: auto; }
  .statement__pin { position: static; height: auto; min-height: 80vh; }
}

/* ---------- Alt bilgi ---------- */
.footer { background: var(--bg-alt); color: var(--soft); padding: 0 0 28px; font-size: 13px; }
.footer__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px;
  padding: 28px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.footer__logo { width: auto; height: 20px; filter: brightness(0); opacity: .85; }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.footer__links a { color: var(--sub); font-size: 14px; transition: color .3s; }
.footer__links a:hover { color: var(--text); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 20px; }
.to-top:hover { color: var(--text); }

/* ---------- Açılış animasyonu için başlangıç durumları (yalnız JS varsa) ---------- */
.js [data-split]:not(.is-split) { visibility: hidden; }
.js [data-reveal] { opacity: 0; transform: translateY(40px); }
.has-cursor body, .has-cursor a, .has-cursor button, .has-cursor label, .has-cursor input, .has-cursor textarea { cursor: none; }
.js .is-in[data-reveal] { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1.2s var(--ease); }

/* ---------- Duyarlı ---------- */
@media (max-width: 1080px) {
  .header__nav { display: none; }
  .header__inner { grid-template-columns: 1fr auto; }
  .burger { display: block; }
}

@media (max-width: 860px) {
  :root { --header-h: 72px; }
  body { font-size: 16px; }
  .header { padding: 12px var(--gutter); }
  .header__inner { height: 56px; padding-inline: 18px 6px; }
  .header__actions { gap: 8px; }
  .header__cta { display: none; }
  .deck__card { grid-template-columns: 1fr; height: auto; min-height: 60vh; gap: 24px; }
  .stage__media { aspect-ratio: 4 / 5; max-height: none; }
}

@media (max-width: 420px) {
  .lang button { padding: 10px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}