/* ============================================================
   GoldSyntax ana site: sayfa düzenleri (çekirdeğin dışındakiler).
   Çekirdek: assets/core/css/{tokens,base,components}.css
   ============================================================ */

/* ---------- İkonlar ---------- */
.ico { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- Sayfa başı (iç sayfalar) ---------- */
.page-head { padding: calc(var(--header-h) + clamp(3rem, 8vw, 6.5rem)) 0 var(--sp-lg); }
.page-head__title { max-width: 22ch; }
.page-head__lead { margin-top: 1.5rem; max-width: var(--measure); font-size: var(--fs-lead); color: var(--ink-soft); }

/* ---------- Bölüm ---------- */
.section { padding-block: var(--sp-lg); }
.section__head { max-width: var(--measure); margin-bottom: var(--sp-md); }
.section__title { font-size: var(--fs-h2); }

/* ---------- Kapanış çağrısı (cta partial) ---------- */
.cta { padding: var(--sp-xl) 0 var(--sp-lg); }
.cta__title { max-width: 16ch; font-size: clamp(2.25rem, 4.6vw + 0.5rem, 5rem); }
.cta__body { margin-top: 1.25rem; max-width: var(--measure); font-size: var(--fs-lead); color: var(--ink-soft); }
.cta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* ---------- Yasal metin (gizlilik) ---------- */
.legal { max-width: 46rem; padding-top: calc(var(--header-h) + clamp(2rem, 6vw, 4.5rem)); }
.legal .section__title { font-size: clamp(2rem, 3vw + 1rem, 3.5rem); }
.legal__meta { margin-top: 0.75rem; color: var(--muted); font-family: var(--font-mono); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.legal__body { margin-top: var(--sp-md); color: var(--ink-soft); }
.legal__body > * + * { margin-top: 1rem; }
.legal__body h2 { margin-top: 2.5rem; font-size: 1.5rem; letter-spacing: -0.015em; color: var(--ink); }
.legal__body ul { padding-left: 1.25rem; list-style: disc; }
.legal__body li { padding-left: 0.25rem; }
.legal__body li + li { margin-top: 0.5rem; }
.legal__body li::marker { color: var(--muted); }
.legal__body strong { color: var(--ink); font-weight: 600; }
.legal__body a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.25em; transition: text-decoration-color var(--t-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .legal__body a:hover { text-decoration-color: var(--accent); } }
.legal__body code { overflow-wrap: anywhere; padding: 0.1em 0.4em; border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }

/* ============================================================
   ANA SAYFA: Projeksiyon Odası sahneleri (tier=off tam deneyim)
   Her sahne <section class="chapter" data-chapter="…">. 3D açıkken (html.stage-ready) poster ve ekran
   görüntüleri gizlenir, içerik aynı yerleşimle kalır. Kart yok; yerleşim ailesi her sahnede farklı.
   ============================================================ */
.chapter { position: relative; isolation: isolate; }
.chapter__body { position: relative; }
.chapter__title { font-size: clamp(1.75rem, 1.6vw + 1.15rem, 3rem); max-width: 26ch; }
.chapter__lead { margin-top: 1.25rem; max-width: var(--measure); font-size: var(--fs-lead); color: var(--ink-soft); }
.chapter__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 2rem; margin-top: 1.75rem; }
.chapter__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chapter:not(#hero, #closing) { padding-block: var(--sp-xl); }

/* Poster: hero/kapanışta tam kenar arka plan; diğer sahnelerde sahne başında banner (dosya yoksa hiç basılmaz) */
.chapter__poster { display: block; }
.chapter__poster img { width: 100%; height: auto; }
.chapter:not(#hero, #closing) > .chapter__poster { width: min(100% - 2 * var(--gutter), var(--container)); margin: 0 auto var(--sp-lg); }
.chapter:not(#hero, #closing) > .chapter__poster img { height: clamp(13rem, 38vh, 28rem); object-fit: cover; border-radius: var(--r-lg); border: 1px solid var(--line); }   /* banner: ekrandan kısa; çapa bağlantısı başlığa inebilsin */
:is(#hero, #closing) > .chapter__poster { position: absolute; inset: 0; z-index: -2; }
:is(#hero, #closing) > .chapter__poster img { height: 100%; object-fit: cover; object-position: 50% 14%; }   /* dikey poster yatay kapta kırpılırken logo (üst kısım) görünür kalır */

/* Projektör huzmesi: hero ve kapanışın CSS ışığı (poster/3D yüklenene kadar ve yedek olarak) */
.chapter--hero::before, .chapter--closing::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(72% 92% at 85% -14%, var(--beam-amber), transparent 64%);
}
.chapter--closing::before { background: radial-gradient(70% 90% at 20% 112%, var(--beam-amber), transparent 62%); }

/* ---------- Sahne 0: Açılış ---------- */
.chapter--hero { display: flex; align-items: flex-end; min-height: 100svh; padding: calc(var(--header-h) + 2.5rem) 0 clamp(1.5rem, 4vh, 3rem); }
.hero__body { width: min(100% - 2 * var(--gutter), var(--container)); }
.hero__title { max-width: none; font-size: clamp(2.125rem, 3.35vw + 0.4rem, 4.25rem); letter-spacing: var(--tracking-display); }
.hero__line { display: block; }
.hero__lead { max-width: 54ch; margin-top: clamp(1.25rem, 2.2vw, 1.75rem); font-size: var(--fs-lead); color: var(--ink-soft); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.hero__proof {
  display: flex; flex-wrap: wrap; gap: 0 clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(1.75rem, 6vh, 4rem); padding-top: 0.25rem; border-top: 1px solid var(--line);
}
.hero__proof .tlink { color: var(--ink-soft); font-weight: 500; }
.hero__proof .tlink .ico { width: 0.95em; height: 0.95em; }
@media (hover: hover) and (pointer: fine) { .hero__proof .tlink:hover .ico { transform: translateY(2px); } }

/* ---------- Sahne 1: CafeSystem ---------- */
.steps { display: grid; gap: clamp(3rem, 7vw, 6rem); margin-top: 1.25rem; }
.steps > li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.steps > li[data-step="intro"] { display: block; margin-bottom: calc(-1 * clamp(1rem, 2.5vw, 2.5rem)); }
.steps__intro { max-width: 34ch; font-size: var(--fs-lead); color: var(--ink-soft); }
.step__title { font-size: var(--fs-h3); max-width: 24ch; }
.step__desc { margin-top: 0.75rem; max-width: 44ch; color: var(--ink-soft); }
.step__shot, .tt__shot {
  margin: 0; overflow: hidden; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--lift);
}
.step__shot img, .tt__shot img { width: 100%; height: auto; }
.step__shot--phone { width: min(100%, 15rem); justify-self: center; border: 5px solid oklch(0.30 0.012 70); border-radius: 2.1rem; }
/* 3D açıkken: ekran görüntüleri gizli, adım listesi sol kolonda; aktif adım vurgulu (director aria-current verir) */
html.stage-ready .step__shot { display: none; }
html.stage-ready .steps > li { opacity: 0.58; transition: opacity var(--t-base) var(--ease-out); }   /* pasif adım: büyük metin için en kötü zeminde ≥ 3:1 (contrast-3d.spec.js) */
html.stage-ready .steps > li[aria-current="step"], html.stage-ready .steps > li[data-step="intro"] { opacity: 1; }
/* 3D açık: sabitlenen CafeSystem sahnesi tek ekrana sığar. Ekran görüntüleri 3D'de olduğundan adımlar tek sütun; yalnızca aktif adımın açıklaması açık. */
html.stage-ready #cafesystem { display: flex; align-items: center; min-height: 100svh; padding-block: calc(var(--header-h) + 1rem) 1.5rem; }
html.stage-ready #cafesystem .chapter__body { width: min(100% - 2 * var(--gutter), var(--container)); }
html.stage-ready #cafesystem .steps { gap: clamp(0.75rem, 2.2vh, 1.5rem); margin-top: 0.75rem; max-width: 30rem; }
html.stage-ready #cafesystem .steps > li { display: block; margin-bottom: 0; }
/* Pasif adımın açıklaması yalnızca görsel olarak gizlenir (erişilebilirlik ağacında ve sayfada-bul'da kalır); aktif olunca normal akışa döner. */
html.stage-ready .steps > li:not([aria-current="step"], [data-step="intro"]) .step__desc {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
html.stage-ready .steps > li[aria-current="step"] .step__desc { animation: step-in 320ms var(--ease-out); }
@keyframes step-in { from { opacity: 0; transform: translateY(6px); } }
html.stage-ready #cafesystem .chapter__title { max-width: 22ch; }
/* 3D pencere ürün ekranını gösterir: HTML ekran görüntüsü yalnızca 3D yokken (poster/yedek) görünür */
html.stage-ready .tt__shot { display: none; }
/* Sabitlenen 3D sahneler tam ekran yüksekliğinde; sol metin sütununun arkası tuvali karartır (komşu cihaz/kare metnin altında kalsa da okunur).
   Karartma rengi oda zemini (--bg-deep) ile aynıdır: tuvalden açık bir bant gibi ayrışmaz. */
html.stage-ready :is(#timetotime, #concepts) { display: flex; flex-direction: column; justify-content: center; min-height: 100svh; padding-block: calc(var(--header-h) + 1rem) 2rem; }
html.stage-ready #concepts::before { background: linear-gradient(90deg, oklch(0.110 0.005 70 / 0.94) 0%, oklch(0.110 0.005 70 / 0.88) 36%, transparent 60%) !important; }   /* başlık + açıklama geniş: kareler metnin altına girmesin */
html.stage-ready :is(#cafesystem, #timetotime, #concepts)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* Karartma metin sütunu bitene kadar sürer: sütun genişliği rem (30rem) olduğundan duraklar yüzde değil, en az gutter + sütun genişliği (900px'te de metin cihaz ekranına binmez). */
  background: linear-gradient(90deg, oklch(0.110 0.005 70 / 0.92) 0%, oklch(0.110 0.005 70 / 0.8) max(30%, calc(var(--gutter) + 31rem)), transparent max(48%, calc(var(--gutter) + 39rem)));
}
/* Dar/dokunmatik ekranda metin tüm genişliği doldurur ve cihaz/pencere onun arkasından geçer: yan karartma yerine dikey karartma.
   Beyaz bir cihaz ekranı bile ≥ 0.78 karartmanın altında kalır: gövde ve etiket metni en kötü zeminde ≥ 4.5:1 (tools/tests/e2e/contrast-3d.spec.js ölçer).
   */
@media not all and (min-width: 900px) and (pointer: fine) {
  html.stage-ready :is(#cafesystem, #timetotime, #concepts)::before,
  html.stage-ready #concepts::before {
    background: linear-gradient(180deg, oklch(0.110 0.005 70 / 0.86) 0%, oklch(0.110 0.005 70 / 0.80) 60%, oklch(0.110 0.005 70 / 0.78) 100%) !important;
  }
}
html.stage-ready .chapter:not(#hero) .chapter__poster { display: none; }
/* ScrollTrigger pin-spacer'ı piksel genişlikle kurar; pencere daraldığında (döndürme) yeniden ölçülene kadar sayfayı genişletip
   mobil tarayıcının görünüm alanını büyütmesin: ölçüler yeniden hesaplanana kadar kapta kalır. */
.pin-spacer { max-width: 100% !important; }
/* İlk kare çizildi: CSS huzme yedeği ve hero/kapanış posteri 400 ms'de tuvale bırakır */
.chapter--hero::before, .chapter--closing::before, :is(#hero, #closing) > .chapter__poster { transition: opacity 400ms var(--ease-out); }
html.stage-ready :is(.chapter--hero, .chapter--closing)::before, html.stage-ready :is(#hero, #closing) > .chapter__poster { opacity: 0; }

/* ---------- Sahne 2: TimeToTime ---------- */
.tt__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }

/* ---------- Sahne 3: Konsept film şeridi ---------- */
.concepts {
  display: flex; gap: 3px; margin-top: var(--sp-lg); padding: 0 var(--gutter) 1rem; overflow-x: auto;   /* kareler arası 3px: şeridin zemini görünür */
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; scrollbar-width: thin;
}
.concepts > li { position: relative; flex: 0 0 min(82vw, 27rem); scroll-snap-align: start; background: var(--surface-2); }
/* film kenarı delikleri: radial-gradient maskesi, her karede sürekli akar */
.concepts > li::before, .concepts > li::after {
  content: ""; display: block; height: 1.5rem;
  background: radial-gradient(circle 0.27rem at center, var(--bg) 96%, transparent 100%) 0 50% / 1.75rem 100% repeat-x;
}
.concept__media { padding: 0.75rem 1rem 0; }
.concept__media img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-sm); }
.concept__meta { padding: 1rem 1rem 0.25rem; }
.concept__name { font-size: 1.25rem; letter-spacing: -0.01em; }
.concept__sector { margin-top: 0.15rem; color: var(--ink-soft); }
.concept__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; margin-top: 0.75rem; }
.concepts > li[data-active] { box-shadow: inset 0 0 0 1px var(--accent); }
/* 3D şerit kareleri taşıdığında (masaüstü kümesi, high) HTML kare görselleri gizlenir; mobil kümede şerit yalnızca HTML'dir ve görselleri kalır.
   Masaüstünde şerit sahneyle birlikte kaydırılır (director.js): yakalama noktaları kaydırmayı bölmesin. */
@media (min-width: 900px) and (pointer: fine) {
  html.stage-ready[data-tier="high"] #concepts .concepts img { display: none; }
  html.stage-ready #concepts .concepts { scroll-snap-type: none; }
}

/* ---------- Sahne 4: Hizmetler (kart değil; tipografik satırlar) ---------- */
.svc-list { margin-top: var(--sp-lg); }
.svc-row {
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) 12.5rem; gap: 0.75rem 2rem; align-items: baseline;
  margin-inline: -1rem; padding: clamp(1.5rem, 3vw, 2.25rem) 1rem; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none;
}
/* amber ışık süpürmesi: soldan sağa, yalnızca transform */
.svc-row::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 15%, transparent), transparent 78%);
  transform: scaleX(0); transform-origin: left center; transition: transform calc(var(--t-move) * 2.5) var(--ease-expo);
}
.svc-row:focus-visible::before { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .svc-row:hover::before { transform: scaleX(1); } }
.svc-row__title { font-size: clamp(1.75rem, 2.4vw + 0.9rem, 3.25rem); letter-spacing: var(--tracking-display); }
.svc-row__desc { max-width: 40ch; color: var(--ink-soft); }
.svc-row:first-child { border-top: 1px solid var(--line); }
.svc-row .tag { justify-self: end; }

/* ---------- Sahne 5: Kurucu ---------- */
.founder__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(2rem, 7vw, 7rem); align-items: center; }
.founder__portrait { position: relative; margin: 0; max-width: 27rem; overflow: hidden; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.founder__portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; }
/* yukarıdan spot ışığı: saf CSS */
.founder__portrait::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(85% 68% at 50% -10%, oklch(0.93 0.09 85 / 0.34), transparent 64%);
}

/* ---------- Sahne 6: Kapanış ---------- */
.chapter--closing { display: flex; align-items: center; min-height: min(100svh, 56rem); padding: var(--sp-xl) 0 var(--sp-lg); }
.closing__title { max-width: 14ch; font-size: clamp(2.5rem, 5.4vw + 0.4rem, 6rem); }
.closing__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.75rem, 4vw, 2.5rem); }

/* ---------- Mobil: tek kolon ---------- */
@media (max-width: 899.98px) {
  .steps > li, .tt__grid, .founder__grid { grid-template-columns: minmax(0, 1fr); }
  .svc-row { grid-template-columns: minmax(0, 1fr); }
  .svc-row .tag { justify-self: start; }
  .hero__proof { flex-direction: column; }
}

/* ============================================================
   İŞLER: ürün sahne satırları, konsept şeridi, lab listesi
   ============================================================ */
.work-group { padding-block: var(--sp-lg); }
.work-group__title { font-size: clamp(1.75rem, 1.6vw + 1.15rem, 3rem); }
.work-group__note { margin-top: 0.75rem; max-width: var(--measure); font-size: var(--fs-lead); color: var(--ink-soft); }
.work-group .concepts { margin-top: var(--sp-md); }

.work-rows { display: grid; gap: clamp(3rem, 7vw, 6.5rem); margin-top: var(--sp-md); }
.work-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: center; }
.work-row--flip .work-row__media { order: 2; }
.work-row__media { overflow: hidden; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--lift); }
.work-row__media img { width: 100%; height: auto; }
.work-row__title { font-size: clamp(1.5rem, 1.4vw + 1rem, 2.25rem); letter-spacing: -0.02em; max-width: 22ch; }
.work-row__desc { margin-top: 0.75rem; max-width: 44ch; color: var(--ink-soft); }
.work-row .chapter__tags { margin-top: 1.25rem; }
.work-row .tlink { margin-top: 0.75rem; }
/* Gerçek telefon ekranı (frame: phone): koyu bir sahnenin ortasında, .shot--phone ile aynı çerçeve (5px kasa, 2.1rem köşe). */
.work-row__media--phone { display: grid; place-items: center; padding: clamp(1.25rem, 3vw, 2.25rem); background: var(--bg-deep); }
.work-row__media--phone img { width: auto; max-width: min(100%, 15rem); max-height: 32rem; border: 5px solid oklch(0.30 0.012 70); border-radius: 2.1rem; }
.work-row__media .tg-msg { display: grid; justify-items: center; align-content: center; min-block-size: clamp(14rem, 22vw, 19rem); padding: clamp(1.25rem, 3vw, 2.25rem); background: var(--bg-deep); }
.work-row__media .tg-msg figcaption { text-align: center; }

/* Telegram mesajı (partials/tg-message.php): botun gerçek metni, sitenin token'larıyla; gerçek bir kontrol değildir.
   Telegram'ın koyu temasına yakın baloncuk: --surface-2 zemin, sol alt köşe sivri, yumuşak (ofsetli) gölge. */
.tg-msg { margin: 0; }
.tg-msg__bubble { inline-size: min(100%, 26rem); padding: 0.7rem 0.95rem 0.8rem; background: var(--surface-2); color: var(--ink); border-radius: var(--r-md) var(--r-md) var(--r-md) 0.25rem; box-shadow: var(--lift); font-size: 0.9375rem; line-height: 1.5; overflow-wrap: anywhere; }
.tg-msg__bubble p { margin: 0; max-width: none; color: inherit; }
.tg-msg__bubble strong { font-weight: 600; }
.tg-msg__link { color: var(--accent-bright); }
.tg-msg__gap { block-size: 0.6rem; }
.tg-msg__button { display: block; margin-top: 0.6rem; padding: 0.5rem 0.75rem; text-align: center; font-weight: 500; border-radius: var(--r-sm); background: color-mix(in oklch, var(--ink) 9%, transparent); }
.tg-msg figcaption { margin-top: 0.7rem; max-width: 34ch; font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); text-wrap: balance; overflow-wrap: anywhere; }

/* ── VLR.gg botu vaka sayfası (is/vlr-bot.php, spec 2026-10-11 §4) ── */
.vb-hero .case-title { max-width: 24ch; font-size: clamp(1.875rem, 2.1vw + 1rem, 3.25rem); }
.case-hero__visual.case-hero__visual--message { width: min(100%, 38rem); }   /* iki sınıf: genel .case-hero__visual (17rem/14rem) kuralını her genişlikte yener */
.vb-hero .tg-msg__bubble { inline-size: 100%; }   /* ekran yokken HTML mesaj da büyük kabı doldurur (genel 26rem sınırı hero'da kalkar) */
@media (min-width: 900px) {
  .vb-hero .case-hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }   /* 1:1; görseli daha fazla büyütmek H1'i dar kolonda 4-5 satıra iter */
}
.case code { padding: 0.1em 0.4em; border-radius: var(--r-sm); background: var(--surface); color: var(--ink); overflow-wrap: anywhere; }
.vb-features { max-width: 64rem; margin-top: clamp(2rem, 4vw, 3rem); }   /* /canli bölümündeki başlık → içerik boşluğuyla aynı ritim */
.vb-features strong { font-weight: 600; color: var(--ink); }
/* Gerçek ekranlar yatay mesaj kırpıntılarıdır (bir tanesi dikey): ince ekran çerçevesi, okunur genişlikte (~22-25rem), boyları farklı olduğundan sütunlu akış. */
.vb-shots { display: contents; }
.vb-gallery { columns: 3 19rem; column-gap: 1.25rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.vb-gallery .shot { break-inside: avoid; margin: 0 0 1.25rem; }
.vb-live { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; margin-top: clamp(2rem, 4vw, 3rem); }
.vb-live__shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.25rem; align-items: start; }
/* Mimari akış (partials/arch-flow.php): düğümler arası ok CSS ile çizilir (dekoratif, metin içeriği yok). Varsayılan dikey (mobil, büyütülmüş yazı);
   kapsayıcı 50rem ve üstüyse yatay. rem tabanlı container query: normal yazıda 900px viewport'ta yatay, %125+ yazıda düğüm adları bölünmesin diye dikey. */
.arch-flow-wrap { container-type: inline-size; }
.arch-flow { --arch-gap: 1.25rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--arch-gap); margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; list-style: none; }
.arch-flow__node { position: relative; display: grid; gap: 0.25rem; align-content: start; padding: 0.8rem 0.75rem 0.9rem; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); }
.arch-flow__node b { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.arch-flow__node span { font-size: 0.8125rem; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
/* dikey ok: düğümün altında, aşağı bakar */
.arch-flow__node:not(:last-child)::before { content: ''; position: absolute; inset-block-start: 100%; inset-inline-start: 1.5rem; inline-size: 1px; block-size: var(--arch-gap); background: var(--muted); }
.arch-flow__node:not(:last-child)::after { content: ''; position: absolute; inset-block-start: calc(100% + var(--arch-gap) - 7px); inset-inline-start: calc(1.5rem - 3px); inline-size: 7px; block-size: 7px; border-top: 1px solid var(--muted); border-right: 1px solid var(--muted); transform: rotate(135deg); }
.arch-flow__side { margin-top: 1.5rem; font-size: var(--fs-sm); color: var(--muted); }
.arch-flow__side b { margin-inline-end: 0.5rem; font-family: var(--font-mono); font-weight: 500; color: var(--ink); }
@container (min-width: 50rem) {
  .arch-flow { --arch-gap: clamp(1.25rem, 2.2cqi, 1.75rem); grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .arch-flow__node:not(:last-child)::before { inset-block-start: 1.3rem; inset-inline-start: 100%; inline-size: var(--arch-gap); block-size: 1px; }
  .arch-flow__node:not(:last-child)::after { inset-block-start: calc(1.3rem - 3px); inset-inline-start: calc(100% + var(--arch-gap) - 7px); transform: rotate(45deg); }
}
.vb-challenges { margin-top: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--line); }
.vb-challenge { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 0.75rem clamp(1.5rem, 5vw, 5rem); padding-block: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--line); }
.vb-challenge__title { max-width: 22ch; font-size: var(--fs-h3); letter-spacing: -0.01em; }
.vb-challenge__text { max-width: 62ch; color: var(--ink-soft); }
.vb-numbers { margin-top: 1.25rem; }
.vb-note-section { padding-block: 0 clamp(3rem, 6vw, 5rem); }
.vb-note { max-width: 62ch; font-size: var(--fs-sm); line-height: 1.6; color: var(--muted); }
@media (max-width: 899.98px) {
  .vb-live, .vb-challenge { grid-template-columns: minmax(0, 1fr); }
}

.lab-list { margin-top: var(--sp-md); }
.lab-item {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr) minmax(0, 2.4fr); gap: 0.75rem clamp(1rem, 3vw, 2.5rem); align-items: baseline;
  padding-block: 1.5rem; border-top: 1px solid var(--line);
}
.lab-item:last-child { border-bottom: 1px solid var(--line); }
.lab-item__name { font-size: 1.375rem; letter-spacing: -0.015em; }
.lab-item__desc { color: var(--ink-soft); max-width: 46ch; }
.lab-item__demo { color: var(--muted); }

@media (max-width: 899.98px) {
  .work-row, .lab-item { grid-template-columns: minmax(0, 1fr); }
  .work-row--flip .work-row__media { order: 0; }
}

/* ============================================================
   HİZMETLER & SÜREÇ
   ============================================================ */
.svc { padding-block: var(--sp-lg); border-top: 1px solid var(--line); }
.svc__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 5vw, 5rem); }
.svc__head { align-self: start; position: sticky; top: calc(var(--header-h) + 2rem); }
.svc__title { font-size: clamp(2rem, 2.8vw + 1rem, 3.75rem); max-width: 14ch; }
.svc__head .tag { margin-top: 1.25rem; }
.svc__lead { max-width: 46ch; font-size: var(--fs-lead); color: var(--ink); }
.svc__long { margin-top: 1rem; max-width: var(--measure); color: var(--ink-soft); }
.svc__points-title { margin-top: 2rem; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; color: var(--ink); }
.svc__points { display: grid; gap: 0.6rem; margin-top: 0.75rem; max-width: 46ch; }
.svc__points li { position: relative; padding-left: 1.5rem; color: var(--ink-soft); }
.svc__points li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 0.7rem; height: 1px; background: var(--accent); }

.process-section, .faq-section { padding-block: var(--sp-lg); border-top: 1px solid var(--line); }
.process { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 clamp(1rem, 2vw, 2rem); margin-top: var(--sp-md); }
.process > li { position: relative; padding-top: 2.25rem; }
/* zaman çizgisi: her adımın üstünde bir sonraki adıma uzanan 1px çizgi + düğüm */
.process > li::before { content: ""; position: absolute; top: 0.45rem; left: 0; right: calc(-1 * clamp(1rem, 2vw, 2rem)); height: 1px; background: var(--line-strong); }
.process > li:last-child::before { right: 0; }
.process__node { position: absolute; top: 0; left: 0; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg); }
.process__title { font-size: 1.125rem; letter-spacing: -0.01em; line-height: 1.2; }
.process__desc { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--ink-soft); }

.faq-list { display: grid; max-width: 52rem; margin-top: var(--sp-md); border-top: 1px solid var(--line); }
.faq { border-bottom: 1px solid var(--line); interpolate-size: allow-keywords; }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 3.75rem; padding-block: 0.5rem; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 500; font-size: clamp(1.0625rem, 0.6vw + 0.95rem, 1.375rem); letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 0.6rem; height: 0.6rem; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft);
  transform: translateY(-2px) rotate(45deg); transition: transform var(--t-move) var(--ease-out);
}
.faq[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq__body { max-width: 60ch; padding-bottom: 1.25rem; color: var(--ink-soft); }
/* açılış animasyonu: ilerlemeli (interpolate-size + ::details-content); desteklenmezse anında açılır */
.faq::details-content { block-size: 0; overflow: clip; transition: block-size var(--t-base) var(--ease-out), content-visibility var(--t-base) allow-discrete; }
.faq[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) { .faq::details-content { transition: none; } }
html[data-motion="off"] .faq::details-content { transition: none; }

@media (max-width: 1099.98px) {
  .process { grid-template-columns: minmax(0, 1fr); gap: 1.75rem 0; max-width: 34rem; }
  .process > li { padding: 0 0 0 2.25rem; }
  .process > li::before { top: 1rem; bottom: calc(-1.75rem - 0.45rem); left: 0.45rem; right: auto; width: 1px; height: auto; }
  .process > li:last-child::before { display: none; }
}
@media (max-width: 899.98px) {
  .svc__grid { grid-template-columns: minmax(0, 1fr); }
  .svc__head { position: static; }
}

/* ============================================================
   HAKKIMIZDA
   ============================================================ */
.about-block { padding-block: var(--sp-lg); border-top: 1px solid var(--line); }
.about-block__body { max-width: var(--measure); margin-top: 1.25rem; font-size: var(--fs-lead); color: var(--ink-soft); }
/* üç ilke: düz yazı, büyük tipografi; kart, numara, liste yok */
.principles { display: grid; gap: clamp(0.5rem, 1.5vw, 1.25rem); margin-top: var(--sp-md); }
.principle {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(2.25rem, 5.4vw + 0.4rem, 5.75rem);
  line-height: 1.02; letter-spacing: var(--tracking-display); text-wrap: balance; overflow-wrap: anywhere;
}
.tools-title { margin-top: 2rem; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; color: var(--ink); }
.tools-list { margin-top: 0.75rem; }
.about-founder-actions { margin-top: 1.5rem; }
.about-block .founder__grid { align-items: start; }
.about-block .founder__portrait { max-width: 24rem; }

/* ============================================================
   İLETİŞİM
   ============================================================ */
.contact-section { padding-block: 0 var(--sp-xl); }
.contact-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: start; }
.contact-form { display: grid; gap: 1.5rem; }
.contact-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.contact-form__note { max-width: 36ch; font-size: 0.9375rem; color: var(--muted); }
.form__status a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; }
.contact-aside { display: grid; gap: 0.5rem; align-content: start; }
.contact-aside__title { font-size: 1.375rem; letter-spacing: -0.015em; }
.contact-aside__title--next { margin-top: 2.5rem; }
.contact-lines { display: grid; margin-top: 0.5rem; }
.contact-lines .tlink { gap: 0.7rem; overflow-wrap: anywhere; }
.contact-lines .ico { width: 1.15rem; height: 1.15rem; }
.contact-aside .footer__socials { margin-top: 0.5rem; }
.next-steps { display: grid; gap: 0.9rem; margin-top: 0.75rem; max-width: 36ch; }
.next-steps li { position: relative; padding-left: 1.5rem; color: var(--ink-soft); }
.next-steps li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 0.7rem; height: 1px; background: var(--accent); }
@media (max-width: 899.98px) { .contact-layout { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   VAKA SAYFALARI (/is/cafesystem, /is/timetotime)
   Ürün ekranları kart değil, çerçeveli görüntüdür; "dört rol" sekansı yalnızca CSS position: sticky.
   ============================================================ */
.case-hero { position: relative; isolation: isolate; padding: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem)) 0 var(--sp-lg); }
.case-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.case-back { color: var(--ink-soft); }
.case-title { margin-top: 1rem; max-width: 20ch; font-size: clamp(2rem, 2.7vw + 0.9rem, 4rem); }
.case-summary { margin-top: 1.5rem; max-width: 56ch; font-size: var(--fs-lead); color: var(--ink-soft); }
.case-meta { display: flex; flex-wrap: wrap; gap: 1rem 2.75rem; margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.case-meta dt { font-size: 0.875rem; color: var(--muted); }
.case-meta dd { margin-top: 0.15rem; font-weight: 500; }
.case-hero__visual { justify-self: center; width: min(100%, 17rem); }
.case-hero__visual .shot { margin: 0; }

.case-section { padding-block: clamp(4rem, 8vw, 7rem); }
.case-section--deep { background: var(--bg-deep); }
.case-head { max-width: var(--measure); }
.case-head__title { font-size: var(--fs-h2); }
.case-head__lead { margin-top: 1rem; font-size: var(--fs-lead); color: var(--ink-soft); }
.case-block__title { font-size: clamp(1.5rem, 1.4vw + 1rem, 2.25rem); letter-spacing: -0.02em; }
.case-block p { max-width: 54ch; margin-top: 1rem; color: var(--ink-soft); }
.case-block p + p { margin-top: 1.1rem; }
.case-brief__grid, .case-tech__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.case-points { border-bottom: 1px solid var(--line); }
.case-points li { padding: 1rem 0; border-top: 1px solid var(--line); color: var(--ink-soft); }

/* Ekran görüntüsü çerçeveleri */
.shot { margin: 0; }
.shot__btn {
  display: block; width: 100%; overflow: hidden; background: var(--surface); color: inherit; cursor: default;
  box-shadow: var(--lift); transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
html.lb-ready .shot__btn { cursor: zoom-in; }
.shot__btn:active { transform: scale(0.985); transition-duration: 90ms; }
.shot__btn.is-lifted img { visibility: hidden; }
.shot img { width: 100%; height: auto; }
.shot--screen .shot__btn { border: 1px solid var(--line-strong); border-radius: var(--r-md); }
.shot--phone .shot__btn { --bezel: oklch(0.30 0.012 70); border: 5px solid var(--bezel); border-radius: 2.1rem; }
.shot figcaption { margin-top: 0.7rem; max-width: 34ch; font-size: 0.875rem; line-height: 1.45; color: var(--muted); text-wrap: balance; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { html.lb-ready .shot--screen .shot__btn:hover { border-color: var(--accent); } html.lb-ready .shot--phone .shot__btn:hover { --bezel: oklch(0.45 0.05 72); } }

/* Dört rol: metin sabit, ekran grubu yanında akar */
.role {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: start;
  margin-top: clamp(3rem, 7vw, 6rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line);
}
.role__text { position: sticky; top: calc(var(--header-h) + 2rem); }
.role__title { font-size: clamp(1.5rem, 1.4vw + 1rem, 2.25rem); letter-spacing: -0.02em; max-width: 18ch; }
.role__desc { margin-top: 1rem; max-width: 40ch; color: var(--ink-soft); }
.role__shots { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); }
.role__shots--phones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.role__shots--phones .shot:nth-child(3n + 2) { margin-top: clamp(1.5rem, 4vw, 3.5rem); }

/* Özellikler: başlık + açıklama yan yana, ekranlar altta tam genişlikte */
.feature { margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.feature__text { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0.75rem clamp(1.5rem, 4vw, 4.5rem); align-items: start; }
.feature__title { font-size: clamp(1.375rem, 1.1vw + 1rem, 1.875rem); letter-spacing: -0.02em; max-width: 22ch; }
.feature__desc { max-width: 54ch; color: var(--ink-soft); }
.feature__shots { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); margin-top: clamp(1.75rem, 3.5vw, 2.75rem); align-items: start; }
.feature__shots--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature__shots--1 { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }

/* TimeToTime: beş ürün ekranı, her biri kendi bölümünde; metin ve ekran yan yana, sırayla yön değiştirir */
.tt-screen { padding-block: clamp(3rem, 6vw, 5.5rem); }
.tt-screen + .tt-screen { border-top: 1px solid var(--line); }
.tt-screen__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: center; }
.tt-screen--flip .tt-screen__text { order: 2; }
.tt-screen__title { font-size: clamp(1.75rem, 1.8vw + 1.1rem, 3rem); letter-spacing: var(--tracking-display); max-width: 16ch; }
.tt-screen__desc { margin-top: 1rem; max-width: 36ch; color: var(--ink-soft); font-size: var(--fs-lead); }
.case-store__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2rem; margin-top: 2rem; }
.case-hero__visual--poster { width: 100%; justify-self: stretch; }

/* Durumlar galerisi: üç grup, her grupta küçük telefon / masaüstü çerçeveleri */
.states { display: grid; gap: clamp(3rem, 6vw, 5rem); margin-top: var(--sp-md); }
.state-group { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1.25rem clamp(1.5rem, 4vw, 4.5rem); align-items: end; padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.state-group__text { align-self: start; }
.state-group__title { font-size: clamp(1.375rem, 1.1vw + 1rem, 1.875rem); letter-spacing: -0.02em; max-width: 20ch; }
.state-group__desc { margin-top: 0.75rem; max-width: 40ch; color: var(--ink-soft); }
.state-group__shots { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.5rem 1.25rem; }
.state-group__shots .shot--phone { width: clamp(7rem, 9vw, 8.5rem); }
.state-group__shots .shot--screen { width: clamp(13rem, 17vw, 16rem); }
.state-group__shots .shot--phone .shot__btn { border-width: 4px; border-radius: 1.6rem; }
.state-group__shots figcaption { font-size: 0.8125rem; }

@media (max-width: 899.98px) {
  .case-hero__grid, .case-brief__grid, .case-tech__grid, .role, .feature__text, .state-group, .tt-screen__grid { grid-template-columns: minmax(0, 1fr); }
  .tt-screen--flip .tt-screen__text { order: 0; }
  .case-hero__visual { width: min(100%, 14rem); }
  .role__text { position: static; }
  .role__shots--phones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .role__shots--phones .shot:nth-child(3n + 2) { margin-top: 0; }
  .role__shots--phones .shot:nth-child(2n) { margin-top: 1.5rem; }
  .feature__shots--2 { grid-template-columns: minmax(0, 1fr); }
  .state-group { align-items: start; }
  .state-group__shots .shot--phone { width: calc((100% - 1.25rem) / 2); }
  .state-group__shots .shot--screen { width: 100%; }
}

/* ============================================================
   LIGHTBOX (modal <dialog id="lightbox">; assets/js/lightbox.js)
   ============================================================ */
html.has-lightbox { overflow: hidden; scrollbar-gutter: stable; }
.lightbox {
  position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  overflow: hidden; background: oklch(0.11 0.005 70 / 0.94); color: var(--ink);
}
.lightbox[open] { display: grid; }
.lightbox::backdrop { background: transparent; }
.lightbox__figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; min-height: 0; }
.lightbox__stage { display: flex; min-height: 0; padding: clamp(0.75rem, 3vw, 2.5rem); overflow: hidden; overscroll-behavior: contain; }
.lightbox__img { margin: auto; width: auto; height: auto; max-width: 100%; max-height: 100%; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; }
.lightbox.is-zoomed .lightbox__stage { overflow: auto; cursor: grab; }
.lightbox.is-zoomed .lightbox__img { max-width: none; max-height: none; cursor: zoom-out; }
.lightbox__stage.is-panning { cursor: grabbing; }
.lightbox__cap { padding: 0.25rem clamp(4.25rem, 10vw, 7rem) clamp(1rem, 2.5vh, 1.75rem); text-align: center; color: var(--ink-soft); font-size: 0.9375rem; }
.lightbox__count { color: var(--muted); font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lightbox__count:not(:empty)::before { content: "· " / ""; }

.lightbox__tools { position: absolute; top: clamp(0.5rem, 2vw, 1.25rem); right: clamp(0.5rem, 2vw, 1.25rem); display: flex; gap: 0.5rem; }
.lightbox__btn {
  display: inline-grid; place-items: center; width: var(--target); height: var(--target); border-radius: 50%; color: var(--ink);
  background: color-mix(in oklab, var(--surface-2) 82%, transparent); border: 1px solid var(--line-strong);
  transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.lightbox__btn:active { transform: scale(0.94); transition-duration: 90ms; }
@media (hover: hover) and (pointer: fine) { .lightbox__btn:hover { background: var(--surface-2); border-color: var(--accent); } }
.lightbox__nav { position: absolute; top: 50%; margin-top: calc(var(--target) / -2); }
.lightbox__prev { left: clamp(0.5rem, 2vw, 1.25rem); }
.lightbox__next { right: clamp(0.5rem, 2vw, 1.25rem); }
.lightbox__zoom .lightbox__ico-out, .lightbox__zoom[aria-pressed="true"] .lightbox__ico-in { display: none; }
.lightbox__zoom[aria-pressed="true"] .lightbox__ico-out { display: block; }
/* Dar ekranda oklar alt alt yazı satırında durur: satır, düğmeyi görselin üstüne taşırmayacak kadar yüksek */
@media (max-width: 899.98px) {
  .lightbox__cap { display: grid; place-content: center; min-height: calc(var(--target) + 1.5rem); padding-block: 0; }
  .lightbox__nav { top: auto; bottom: 0.75rem; margin-top: 0; }
  .lightbox__count { display: block; }
  .lightbox__count::before { content: none !important; }
}
@media (prefers-reduced-transparency: reduce) { .lightbox { background: var(--bg-deep); } }

/* ============================================================
   404: CSS ile yapılmış sahne. Salonu tarayan tek huzme (yalnızca transform); azaltılmış harekette ve hareket kapalıyken durağan.
   ============================================================ */
.notfound { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 100svh; overflow: clip; padding: calc(var(--header-h) + 2.5rem) 0 clamp(3rem, 9vh, 6rem); }
.notfound__beam {
  position: absolute; z-index: -1; top: calc(-1 * var(--header-h)); right: 12%; width: min(120vw, 70rem); height: 120%; pointer-events: none;
  background: linear-gradient(to bottom, var(--beam-amber), transparent 82%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  transform-origin: 50% 0; transform: rotate(-9deg);
  animation: beam-sweep 14s ease-in-out infinite alternate;
}
@keyframes beam-sweep { from { transform: rotate(-9deg); } to { transform: rotate(13deg); } }
@media (prefers-reduced-motion: reduce) { .notfound__beam { animation: none; } }
html[data-motion="off"] .notfound__beam { animation: none; }
.notfound__title { max-width: 14ch; font-size: clamp(2.5rem, 5.4vw + 0.5rem, 6rem); }
.notfound__lead { margin-top: 1.5rem; max-width: 46ch; font-size: var(--fs-lead); color: var(--ink-soft); }
.notfound__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 2rem; margin-top: 2rem; }

/* Vaka sayfaları, 3D açıkken: hero görseli (ekran görüntüsü/poster yedeği) yerini 3D'ye bırakır (düzen yerinde kalır);
   metin sütununun arkası oda zemini renginde karartılır (cihaz/pencere metnin altına girse de okunur). */
@media (min-width: 900px) and (pointer: fine) {          /* director'ın masaüstü kümesiyle aynı koşul: dar/dokunmatikte 3D nesne yok, görsel kalır */
  html.stage-ready[data-stage^="case-"] .case-hero__visual { visibility: hidden; }
  html.stage-ready[data-stage^="case-"] .case-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, oklch(0.110 0.005 70 / 0.9) 0%, oklch(0.110 0.005 70 / 0.78) 32%, transparent 52%);
  }
}