/* Çekmeköy Park AVM vaka sayfası, v2 (2026-10-14 gece). Çerçeve sitenin (site.css); burası Çekmeköy'ün kendi kimliği.
   v2 kuralı (Tayfun, Food Hall bölümünden): her bölümün zemini, yazı rengi ve yerleşimi gösterdiği görselden türetilir.
     Kapak ve vizyon  : logonun krem kâğıdı #F6EFE9 (Food Hall sanatpanosundaki kâğıtla aynı), başlık Deep Magenta
     Logo inşası      : Royal Purple'ın açık tonu #F2EEF5, başlık Royal Purple; logolar plakasız, doğrudan zeminde
     Ana tabela       : cephe fotoğrafı tam ekran; başlık camın üstünde (cam düzlemine -5° eğik) Royal Purple'ın koyusu, alt metin tavan gölgesinin koyusundan perde üstünde
     Marka dokunuşları: mermer #DEDAD2, başlık altın yaldızın koyu tonu #7A5A1C, metin gölgenin kahvesi #3F3A33
     Food Hall        : logonun çalışma dosyası (bej #EDE4CE, zeytin #544D23, kiremit #C04D39); neon sahnesinde tuğla gecesi #251D16; duvar mockup'ında duvarın grisi
     Arayış           : beyaz sanatpano; her erken yön gelince zemin o logonun baskın renginin açık tonuna döner
   Ölçülen değerler: tools/ai-donustur/ck-v2-gorseller.py ve README (vaka-donusum-kanit/cekmekoy/v2/).
   Yazı: işin kendi yazı tipleri, tam dosyalardan (fonts/). Yedek yalnızca genel (system-ui).
   Hareket (ck.js): yalnız transform ve opacity; hiçbir şey clip-path ile canlanmaz; döngü yok. Bu dosyanın varsayılanı hareketsiz, tam okunur
   sayfadır (azaltılmış hareket, betik yok): sahneler son karelerinde durur. .ck-sahne sınıfını (uzun sarıcılar, sticky sahne) yalnız ck.js ekler.
   Sabit clip-path yalnızca iki küçük ok biçiminde var (.ck-taslak i ve .ck-no span::before); onlar animasyonsuzdur.
   Başlık harfleri (.case-title) sitenin ortak kapak animasyonuyla gelir (letterIn); bu Çekmeköy'e özel değil.
   Düzeltme turu (2026-10-15): kaydırmayla canlanan her öğe kendi katmanında (will-change), böylece her kare yalnız birleştirme
   (compositor) işi olur, boyama ve katmanlama (Layerize) tekrarlanmaz; sanatpano karoları <img> (tools/ai-donustur/ck-v2-karolar.cjs);
   SVG'ler fare olaylarına kapalı (her tekerlek olayındaki isabet testi SVG yollarına inmez). Ölçüm: vaka-donusum-kanit/cekmekoy/v2/olcum/performans.json.
   v3 (2026-10-15, Tayfun'un v2 notları): sayfa doğrudan işle açılır (kapak: kendini kuran logo, h1; sitenin vaka başlığı yok), kategori ve
   "Tüm işler" küçük sabit bir etikette (.ck-sabit), giriş cümlesi ve künye sonda. Kaydırma ipucu yok (Kurallar 75): kapağın altında
   vizyon cümlesinin üst kenarı görünür. 1024 px mockup'lar büyütülmez: geniş ekranda en fazla 1024 css px'lik çerçevede (.ck-foto,
   neon için kare) durur, kamera çerçevenin içinde kayar. Food Hall başlığı neon sahnesinin içinde (başlık, logo, mockup tek ekranda);
   Arayış ve denemelerde daha çok boşluk. Ölçüm ve kareler: vaka-donusum-kanit/cekmekoy/v3/.
   v3 doğrulama düzeltmesi (2026-10-15): sitenin başlığı artık bir ada (çubuk yalnız sayfanın başında, kapakta). Yapışan sahneler
   ekranın en üstüne yapışır (top 0, 100svh): üstte sayfa zemininin rengiyle kalan 72 px'lik şerit yok; içerik sahnelerinde (yakın plan,
   neon, Arayış) içerik adanın bandının altında kalsın diye sahnenin üst payı --nav-h. Kapak logosunun gizlenmesi head betiğinin
   koyduğu .motion sınıfına bağlı (ck.js'i beklemez: ilk boyamada bitmiş logo görünmez); kurulum sitenin yükleme perdesi (#ld)
   kalkınca başlar (ck.js). Sabit etiketin kategorisi 1180 px altında gizli; etiket dar ekranda da kalır, ada hapı açıkken hapın
   altına iner. Dar ekranda neon cümlesi açık yazı, arkasında koyu yumuşak perde.
   v4 (2026-10-16, Tayfun'un geri bildirimi, vaka-donusum-kanit/cekmekoy/TAYFUN-GERI-BILDIRIM-v3.md): yazılar daha az yer tutar (küçük, dar, sıkı;
   Renk ve Yazı bölümleri kompakt); kapak logosu küçüldü; vizyon yine ortada; cephe ve çanta yine çerçevesiz TAM EKRAN (v2'deki gibi, 2048 px
   yeniden örneklenmiş kaynaktan); Food Hall denemeleri kaydırmasız, sakin 3 sütunlu ızgara ve eşit optik boyut; neon kafe fotoğrafı yerine
   yavaş zoom videosu (çerçevede kalır: 1080 px video 1024 px çerçevede keskin). */
@property --ck-sw { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --ck-ox { syntax: '<length>'; inherits: true; initial-value: 0px; }
@font-face { font-family: "CK Nexa"; src: url("fonts/Nexa-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "CK Nexa"; src: url("fonts/Nexa-Book.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "CK Nexa"; src: url("fonts/Nexa-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "CK Nasalization"; src: url("fonts/NasalizationRg-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "CK Arboria"; src: url("fonts/Arboria-Book.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "CK FinalSix"; src: url("fonts/FinalSix-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
/* .ai dosyasındaki canlı yazı (Food Hall denemelerindeki HALL, SourceCodeVariable) düzeltme turundan beri karo dosyasının içinde,
   kendi gömülü fontuyla (content/cekmekoy/karo/fd-1.svg); sayfanın @font-face'ine gerek kalmadı */

.ck-page, .ck { --ck-metin: "CK Nexa", system-ui, sans-serif; }
.ck {
  --ck-mg: #A30A5D; --ck-mg2: #A40771; --ck-mor: #5E2C81; --ck-pembe: #DF2153; --ck-siyah: #000000; --ck-fh: #C04D39;
  --ck-ink: #22102c; --ck-ink2: #5b4a66; --ck-krem: #F6EFE9; --ck-lila: #F2EEF5; --ck-bej: #EDE4CE; --ck-zeytin: #544D23;
  --ck-mermer: #DEDAD2; --ck-yaldiz: #7A5A1C; --ck-golge: #3F3A33; --ck-gece: #251D16; --ck-duvar: #A9A6A5;
  --ck-line: rgba(34, 16, 44, .14); --ck-r: 28px;
  /* --ck-st-h: yapışan sahnenin kutusu (ekranın tamamı; ada sayfanın üstünde yüzer). --ck-ic-h: içeriğin ölçüldüğü yükseklik
     (adanın bandı hariç; v3'teki sahne yüksekliği, logolar ve kartlar aynı boyda kalır) */
  --ck-st-h: 100svh;
  --ck-ic-h: calc(100svh - var(--nav-h, 72px));
  --ck-bosluk: clamp(96px, 18vh, 176px);
  /* v3: kapağın altında görünen bir sonraki sahnenin payı; çerçeveli fotoğrafın sahne kenarına uzaklığı */
  --ck-peek: clamp(88px, 15vh, 140px); --ck-kg: clamp(20px, 5vh, 56px);
  color: var(--ck-ink); font: 400 17px/1.7 var(--ck-metin);
  overflow-x: clip;
}
.ck *, .ck *::before, .ck *::after { box-sizing: border-box; }
.ck svg { display: block; pointer-events: none; }
.ck img.ck-karo { display: block; -webkit-user-drag: none; user-select: none; }
.ck-bg-mg { background: var(--ck-mg); } .ck-bg-mor { background: var(--ck-mor); } .ck-bg-pembe { background: var(--ck-pembe); } .ck-bg-siyah { background: var(--ck-siyah); }
.ck .f-mg { fill: var(--ck-mg); } .ck .f-mg2 { fill: var(--ck-mg2); } .ck .f-mor { fill: var(--ck-mor); } .ck .f-pembe { fill: var(--ck-pembe); }
.ck .f-siyah { fill: var(--ck-siyah); } .ck .f-fh { fill: var(--ck-fh); }

/* taslak şeridi ve taslak kipi (TASLAK = true) */
.ck-taslak { display: flex; align-items: flex-start; gap: 10px; max-width: 72ch; margin: clamp(32px, 6vh, 56px) 0 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink-2); font: 400 14px/1.5 var(--ck-metin); }
.ck-taslak i { flex: none; width: 9px; height: 10px; margin-top: 6px; background: var(--ck-mg); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ck-taslak-kip [data-kaynak="uyarlama"], .ck-taslak-kip [data-kaynak="gozlem"] { text-decoration: underline dotted var(--ck-mg, #A30A5D); text-decoration-thickness: 1px; text-underline-offset: .3em; }
.ck-taslak-kip .ck-fh [data-kaynak="uyarlama"], .ck-taslak-kip .ck-fh [data-kaynak="gozlem"] { text-decoration-color: var(--ck-fh); }
.ck-taslak-kip .ck-t-alt [data-kaynak], .ck-taslak-kip .ck-neon-cap[data-kaynak] { text-decoration-color: #f0a9cf; }
/* fotoğrafın içindeki başlıklar: satır aralığı açık, çizgi taban çizgisine yakın (bir alt satırın harflerine inmez) */
.ck-taslak-kip :is(.ck-t-h, .ck-c-h, .ck-duvar-yazi, .ck-neon-yazi)[data-kaynak] { text-underline-offset: .1em; text-decoration-thickness: 1px; }
.ck-taslak-kip .ck-neon-yazi[data-kaynak] { text-decoration-color: rgba(240, 169, 207, .8); }
.ck-taslak-kip .ck-duvar-yazi[data-kaynak] { text-decoration-color: rgba(31, 38, 56, .6); }

/* ortak yazı */
.ck-b { position: relative; padding: var(--ck-bosluk) 0; }
.ck-no { display: flex; align-items: baseline; gap: 12px; margin: 0 0 clamp(16px, 2.4vw, 28px); font: 400 13px/1.2 var(--ck-metin); letter-spacing: .12em; text-transform: uppercase; color: var(--ck-mg); }
.ck-no b { font-weight: 900; color: inherit; }
.ck-no span::before { content: ''; display: inline-block; width: 7px; height: 8px; margin-right: 8px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ck-ust { margin-bottom: clamp(32px, 6vh, 64px); }
.ck-nx { font-family: var(--ck-metin); font-weight: 300; }
.ck-h { margin: 0; font: 300 clamp(30px, min(3.8vw, 7vh), 56px)/1.06 var(--ck-metin); letter-spacing: -.012em; color: inherit; text-wrap: balance; }
.ck-h3 { margin: 0 0 12px; font: 300 clamp(22px, min(2.2vw, 4vh), 30px)/1.1 var(--ck-metin); }
.ck-big { margin: 0; font: 900 clamp(38px, min(6vw, 11vh), 92px)/1.02 var(--ck-metin); letter-spacing: -.035em; color: var(--ck-mg); text-wrap: balance; overflow-wrap: break-word; }
.ck-p { max-width: 46ch; margin: 14px 0 0; font-size: 15.5px; line-height: 1.62; color: var(--ck-ink2); text-wrap: pretty; }
.ck-etiket { margin: 0 0 10px; font: 400 12px/1.3 var(--ck-metin); letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.ck-not { max-width: 54ch; margin: 18px 0 0; font-size: 13px; line-height: 1.55; color: var(--ck-ink2); }
.ck-ipucu { margin: 0; font: 400 12px/1.4 var(--ck-metin); letter-spacing: .1em; text-transform: uppercase; color: var(--ck-ink2); }
.ck-cap { margin: 0; font: 400 12px/1.4 var(--ck-metin); letter-spacing: .06em; }
.ck-fig { margin: 0; min-width: 0; }
.ck-fig img { display: block; width: 100%; height: auto; border-radius: var(--ck-r); }
.ck-fig figcaption { margin-top: 12px; font: 400 12px/1.4 var(--ck-metin); letter-spacing: .06em; }

/* sahne iskeleti. Varsayılan: hareketsiz (sarıcı kendi yüksekliğinde, sahne akışta). .ck-sahne (ck.js): sarıcı uzar, sahne yapışır */
.ck-sc { position: relative; }
.ck-st { position: relative; }
.ck-foto { position: relative; height: var(--ck-st-h); min-height: 480px; overflow: hidden; container-type: size; }
.ck-sahne .ck-sc[data-sahne] > .ck-st { position: sticky; top: 0; height: var(--ck-st-h); min-height: 0; overflow: hidden; }
.ck-sahne .ck-sc[data-sahne="m"] { height: 210vh; }
.ck-sahne .ck-sc[data-sahne="tabela"] { height: 290vh; }
.ck-sahne .ck-sc[data-sahne="canta"] { height: 260vh; }
.ck-sahne .ck-sc[data-sahne="neon"] { height: 240vh; }
/* yatay sahnenin yüksekliğini ck.js yolun uzunluğundan hesaplar (--yatay-h) */
.ck-sahne .ck-sc[data-sahne="yatay"].ck-yatay-on { height: var(--yatay-h, 400vh); }
.ck-sahne .ck-sc[data-sahne="yatay"]:not(.ck-yatay-on) > .ck-st { position: relative; top: auto; height: auto; overflow: visible; }

/* tam ekran fotoğraf: görselin kapsayan karesi (dünya). Sahnenin hangi kısmını göstereceğini --fx (yatay odak) ve üst/alt hizası seçer;
   yazılar dünyanın içinde, görselin kendi koordinatlarında (%), böylece her ekranda fotoğraftaki aynı yere oturur */
.ck-dunya { position: absolute; width: max(100cqw, 100cqh); aspect-ratio: 1; container-type: inline-size;
  left: calc(-1 * clamp(0px, var(--fx, .5) * max(100cqw, 100cqh) - 100cqw, max(100cqw, 100cqh) - 100cqw)); }
.ck-dunya-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ck-neon-video { object-fit: cover; background: var(--ck-gece); }
.ck-sahne .ck-dunya { will-change: transform; }
/* çerçeve (v3): cephe, çanta ve neon mockup'ları 1024 px; tam ekranda büyütülürse yumuşar (Tayfun v2 notu 1). Geniş ekranda (≥ 1100 px)
   fotoğraf sahnesi en fazla 1024 x 1024 css px'lik yuvarlak köşeli bir çerçeve: dünya (kapsayan kare) çerçeveyi kaplar ama 1024'ü geçmez,
   yani görsel hiçbir zaman kendi pikselinden büyük çizilmez (1x ekranda). Çerçevenin çevresi bölümün görselden ölçülen zemini (gök,
   mermer, tuğla gecesi). Kamera hareketi çerçevenin içinde kayma (translate); büyütme yok. 1100 px altında dünya zaten en fazla
   max(ekran genişliği, sahne yüksekliği) kadar, bu ekranlarda 1024'ü geçmez: tam ekran kalır */
@media (min-width: 1100px) {
  /* v4: cephe ve çanta yine çerçevesiz, sahneyi tam kaplar (Tayfun: tam ekranken çok daha güzeldiler). Yalnız neon çerçevesinin kenar payı kalır */
  .ck { --ck-kg: clamp(64px, 8vh, 88px); }
}

/* 00 kapak (v3): sayfa doğrudan işle açılır. Krem kâğıtta logo kendini kurar (h1: işin adı logonun kendi büyük tipografisi). Kapak
   ekrandan --ck-peek kadar kısa: altta vizyon cümlesinin üst kenarı görünür, devam tasarımdan anlaşılır (ipucu yazılmaz) */
.ck-kapak { position: relative; background: var(--ck-krem); }
.ck-kapak-st { display: grid; place-items: center; height: calc(100svh - var(--nav-h, 72px) - var(--ck-peek)); min-height: 320px; padding: clamp(16px, 4vh, 48px) var(--margin) 0; }
.ck-kapak-h { margin: 0; width: min(100%, 660px, (100svh - var(--nav-h, 72px) - var(--ck-peek)) * .46 * 2.17); line-height: 0; }
.ck-kapak-logo { display: block; }
.ck-hero-logo { width: 100%; height: auto; }
/* 01 vizyon: kapağın kâğıdında devam eder */
.ck-vizyon { background: var(--ck-krem); padding-top: 0; }
.ck-vizyon-ic { text-align: center; }
.ck-vizyon .ck-no { justify-content: center; margin-bottom: clamp(16px, 2.6vh, 28px); }
.ck-vizyon .ck-big { margin-inline: auto; font-size: clamp(40px, min(6.2vw, 11vh), 92px); line-height: 1.02; }
.ck-vizyon .ck-p { margin: clamp(20px, 3.6vh, 36px) auto 0; max-width: 46ch; font-size: clamp(15px, 1.1vw, 17px); }
/* sabit etiket (v3): kategori ve "Tüm işler". Sitenin üst menü adası gizliyken ya da küçük hapken görünür (adanın yanında, üst
   bantta); ada tam çubukken (sayfanın başı, kapak) ve açıkken görünmez. Dar ekranda ada hap halinde de ortayı kapladığı için yalnız
   gizliyken. Durumu ck.js okur (.top[data-isl]) ve yalnız etikete .on koyar: gövdede :has() her ada değişiminde tüm sayfanın stilini
   yeniden hesaplatıyordu. Betik yoksa etiket görünmez (künyenin sonunda "Tüm işler" bağlantısı var) */
.ck-sabit { position: fixed; z-index: 45; top: 18px; left: var(--margin); display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 2 * var(--margin)); height: 34px; padding: 0 15px 0 11px; border-radius: 999px; background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px rgba(34, 16, 44, .07), 0 4px 12px rgba(34, 16, 44, .05); font: 400 12px/1 var(--ck-metin); color: var(--ck-ink); white-space: nowrap; opacity: 0; visibility: hidden; transform: translateY(-12px); }
.ck-sabit a { display: inline-flex; align-items: center; gap: 6px; color: var(--ck-mg); text-decoration: none; letter-spacing: .02em; }
.ck-sabit a svg { width: 15px; height: 15px; }
.ck-sabit a:hover span { text-decoration: underline; text-underline-offset: .25em; }
.ck-sabit a:focus-visible { outline: 2px solid var(--ck-mg); outline-offset: 4px; border-radius: 4px; }
.ck-sabit-ad { padding-left: 12px; border-left: 1px solid rgba(34, 16, 44, .14); font-weight: 900; letter-spacing: .01em; }
.ck-sabit-k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ck-ink2); }
.ck-sabit.on { opacity: 1; visibility: visible; transform: none; }
.motion .ck-sabit { transition: opacity .25s linear, transform .45s var(--emph), visibility 0s linear .25s; }
.motion .ck-sabit.on { transition-delay: 0s; }
/* kategori 1180 px altında gizli: 961-1180 px arasında küçük hap ortada (1024'te x 458-566) ve tam etiket (x 68-514) onun altına
   giriyordu. Hap etikete yine değiyorsa (dar ekran) ck.js .alt koyar: etiket hapın altına iner (yalnız transform) */
@media (max-width: 1180px) { .ck-sabit-k { display: none; } }
.ck-sabit.on.alt { transform: translateY(50px); }

/* 02 logo inşası */
.ck-insa { background: var(--ck-lila); color: var(--ck-mor); }
.ck-insa .ck-p, .ck-insa .ck-not, .ck-insa .ck-ipucu { color: var(--ck-ink2); }
/* karşılaştırma: iki logo üst üste; sol kısım mor, sağ kısım magenta. Ayırıcı yalnız transform ile kayar */
.ck-kars { margin: 0 auto; max-width: 1080px; }
.ck-kars-sahne { position: relative; height: clamp(180px, 36vh, 380px); overflow: hidden; touch-action: pan-y; cursor: ew-resize; }
/* iki logo aynı genişlikte (ÇEKMEKÖY satırı ikisinde de logonun tam genişliği): kelimeler üst üste oturur */
.ck-kars-k { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 clamp(8px, 3vw, 40px); }
.ck-kars-k .ck-logo { width: min(100%, 680px, 34vh * 2.6); height: auto; }
.ck-kars-mask, .ck-kars-ic { position: absolute; inset: 0; overflow: hidden; will-change: transform; }
.ck-kars-mask { transform: translateX(calc((var(--x) - 100) * 1%)); background: var(--ck-lila); }
.ck-kars-ic { transform: translateX(calc((100 - var(--x)) * 1%)); overflow: visible; }
.ck-kars-tut { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; pointer-events: none; transform: translateX(calc((var(--x) - 50) * 1%)); will-change: transform; }
.ck-kars-tut i { position: absolute; left: 50%; top: 4%; bottom: 4%; width: 1px; margin-left: -.5px; background: rgba(94, 44, 129, .35); }
.ck-kars-tut b { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(94, 44, 129, .25), 0 6px 18px rgba(94, 44, 129, .18); }
.ck-kars-tut b::before, .ck-kars-tut b::after { content: ''; position: absolute; top: 50%; width: 0; height: 0; margin-top: -5px; border: 5px solid transparent; }
.ck-kars-tut b::before { left: 9px; border-right: 7px solid var(--ck-mor); border-left: 0; }
.ck-kars-tut b::after { right: 9px; border-left: 7px solid var(--ck-mg); border-right: 0; }
.ck-kars-r { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ck-kars-r:focus-visible + .ck-kars-tut b, .ck-kars-sahne:has(.ck-kars-r:focus-visible) .ck-kars-tut b { outline: 2px solid var(--ck-mor); outline-offset: 3px; }
.ck-kars-alt { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: baseline; margin-top: clamp(16px, 3vh, 28px); }
.ck-kars-cap { margin: 0; font: 400 13px/1.4 var(--ck-metin); letter-spacing: .04em; color: var(--ck-ink2); }
.ck-kars-alt .ck-kars-cap:last-child { text-align: right; }
.ck-kars-alt .ck-ipucu { text-align: center; color: var(--ck-mor); opacity: .8; }

/* yakın plan */
.ck-st-m { padding: var(--ck-bosluk) 0; }
.ck-m-g { display: grid; gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) { .ck-m-g { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.ck-m-kutu { position: relative; width: min(100%, calc((var(--ck-ic-h) - 120px) * 1.432)); aspect-ratio: 126 / 88; justify-self: center; }
.ck-m-tam { position: absolute; left: 0; top: 50%; width: 100%; height: auto; margin-top: -23.03%; transform-origin: 45.96% 31.9%; transform: translate(4.04%, 18.1%) scale(2.247); opacity: 0; }
.ck-m-yakin { position: absolute; inset: 0; width: 100%; height: 100%; }
.ck-m-t { max-width: 40ch; }
.ck-m-t .ck-etiket { color: var(--ck-mg); }
.ck-m-cumle { margin: 0; font: 300 clamp(20px, min(1.9vw, 3.6vh), 28px)/1.28 var(--ck-metin); color: var(--ck-mor); text-wrap: balance; }
.ck-m-cap { margin: 14px 0 0; font: 400 12px/1.5 var(--ck-metin); color: var(--ck-ink2); }
.ck-sahne .ck-st-m { display: grid; align-content: center; padding: var(--nav-h, 72px) 0 0; }
.ck-sahne .ck-m-tam, .ck-sahne .ck-m-yakin { will-change: transform, opacity; }

/* renk: dokunulan kutu logolardaki yerini gösterir (diğer dolgular solar; dokunuşla, kaydırmayla değil) */
.ck-renk { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: clamp(56px, 9vh, 96px); }
@media (min-width: 1024px) { .ck-renk { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
.ck-renk-l .ck-ipucu { margin-bottom: 14px; }
.ck-sw-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; margin: 0; padding: 0; list-style: none; }
.ck-sw-l li { min-width: 0; }
.ck-sw { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; row-gap: 0; align-content: center; align-items: center; width: 100%; margin: 0; padding: 8px 10px 8px 8px; border: 0; border-radius: 16px; background: transparent; color: var(--ck-ink); text-align: left; font: inherit; cursor: pointer; }
.ck-sw:hover { background: rgba(94, 44, 129, .06); }
.ck-sw[aria-pressed="true"] { background: #fff; box-shadow: 0 0 0 1px rgba(94, 44, 129, .18); }
.ck-sw:focus-visible { outline: 2px solid var(--ck-mor); outline-offset: 2px; }
.ck-sw-c { display: block; grid-row: 1 / span 3; width: 44px; height: 44px; border-radius: 12px; }
.ck-sw b { font-weight: 900; font-size: 13.5px; line-height: 1.3; }
.ck-sw code { font: 400 12px/1.3 var(--ck-metin); letter-spacing: .08em; color: var(--ck-ink2); }
.ck-sw span { font-size: 12px; line-height: 1.3; color: var(--ck-ink2); }
.ck-renk-logolar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 36px); align-items: center; }
@media (max-width: 599px) { .ck-renk-logolar { grid-template-columns: minmax(0, 1fr); justify-items: center; } .ck-renk-logolar .ck-logo { max-width: 260px; } }
.ck-renk-logolar .ck-logo { width: 100%; height: auto; }
.ck-renk-logolar .ck-logo :is(path, rect) { transition: opacity .45s var(--emph); }
.ck-renk-logolar[data-vurgu="mg"] :is(path, rect):not(.f-mg),
.ck-renk-logolar[data-vurgu="mor"] :is(path, rect):not(.f-mor),
.ck-renk-logolar[data-vurgu="pembe"] :is(path, rect):not(.f-pembe),
.ck-renk-logolar[data-vurgu="siyah"] :is(path, rect):not(.f-siyah) { opacity: .1; }

/* yazı: düz zeminde, kart yok; satırlar arasında ince çizgi */
.ck-yazi { margin-top: clamp(40px, 7vh, 72px); }
.ck-yz-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 56px); border-top: 1px solid rgba(94, 44, 129, .16); }
@media (max-width: 767px) { .ck-yz-l { grid-template-columns: minmax(0, 1fr); } }
.ck-yz { display: grid; gap: 4px; align-content: start; padding: 14px 0 14px; border-bottom: 1px solid rgba(94, 44, 129, .16); color: var(--ck-ink); }
.ck-yz-n { display: block; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.15; color: #000; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.ck-f-nasal { font-family: "CK Nasalization", system-ui, sans-serif; font-weight: 400; letter-spacing: .04em; }
.ck-f-nexa { font-family: var(--ck-metin); font-weight: 400; letter-spacing: .1em; font-size: clamp(17px, 1.9vw, 26px); }
.ck-f-arb { font-family: "CK Arboria", system-ui, sans-serif; font-weight: 400; letter-spacing: .06em; }
.ck-f-fin { font-family: "CK FinalSix", system-ui, sans-serif; font-weight: 500; letter-spacing: .06em; }
.ck-yz p { margin: 0; font: 900 12.5px/1.35 var(--ck-metin); color: var(--ck-ink); }
.ck-yz p span { display: inline; margin-left: .6em; font-weight: 400; color: var(--ck-ink2); }

/* 03 ana tabela: cephe */
.ck-tabela { padding: 0; background: #DEECF4; }
.ck-dunya-tabela { --fx: .83; bottom: 0; transform-origin: 80% 62%; }
/* cam (düzeltme turu): giriş katının ÜST cam şeridi, tavan saçağı ile ilk yatay kayıt arasında (görselde x 500-817, y 538-662 / 1024;
   şerit perspektifle sağa doğru yükselir, eğimi yaklaşık -8,5°). Ağaç yansımaları bu şeridin altında kalır. Sağ kenar = çelik direğin
   sol kenarı (x 817): başlık oradan çıkar. Dar ekranda kamera tabelayı bütün gösterir; direk ekran dışında kalır, başlık bir önceki
   dikey kayıttan (x 767) çıkar */
.ck-t-cam { position: absolute; right: 20.2%; top: 51%; width: 34%; height: 15.5%; overflow: hidden; }
.ck-t-h { position: absolute; right: .9cqw; top: 1.83cqw; margin: 0; font: 300 3.1cqw/1.12 var(--ck-metin); letter-spacing: -.01em; color: #3E1C57; text-align: right; white-space: nowrap; transform: skewY(-8.5deg); transform-origin: 100% 50%; text-shadow: 0 0 .28em rgba(236, 242, 246, .9), 0 0 .9em rgba(236, 242, 246, .55); }
.ck-t-h .ck-sat { display: block; }
.ck-t-no { position: absolute; z-index: 2; top: calc(var(--nav-h, 72px) + clamp(18px, 3.4vh, 32px)); left: var(--margin); margin: 0; color: var(--ck-mg); text-shadow: 0 0 .8em rgba(222, 236, 244, .9); }
.ck-t-alt { position: absolute; z-index: 2; left: var(--margin); bottom: clamp(20px, 6vh, 64px); max-width: min(40ch, calc(100% - 2 * var(--margin))); color: #F6F1EA; }
.ck-t-alt::before { content: ''; position: absolute; z-index: -1; left: calc(-1 * var(--margin) - 40vw); bottom: -40vh; width: calc(100% + var(--margin) + 80vw); height: calc(100% + 80vh); background: radial-gradient(closest-side, rgba(34, 30, 25, .82), rgba(34, 30, 25, .5) 55%, rgba(34, 30, 25, 0)); pointer-events: none; }
.ck-t-alt .ck-p { margin: 0; color: #F6F1EA; font-size: clamp(16px, 1.2vw, 19px); }
.ck-t-alt .ck-cap { margin-top: 14px; color: #D9D2C6; }

/* 04 marka dokunuşları: çanta */
.ck-canta { padding: 0; background: var(--ck-mermer); }
.ck-dunya-canta { --fx: 1; top: 0; transform-origin: 41% 46%; }
/* tek kolon (düzeltme turu): etiket, başlık, paragraf ve alt yazı aynı sol kenarda, çantanın sağındaki mermerde (x 64,8%). Alt yazı da
   kolonda: önceki halde ekranın sağ altındaydı ve 1024 px'te antetli kâğıttaki altın logonun üstüne biniyordu */
.ck-c-kolon { position: absolute; left: 64.8%; top: 8.4%; width: 31%; }
.ck-c-no { margin: 0 0 1.5cqw; font-size: max(11px, .95cqw); color: var(--ck-yaldiz); }
.ck-c-h { margin: 0; font: 300 3.7cqw/1.1 var(--ck-metin); letter-spacing: -.01em; color: var(--ck-yaldiz); }
.ck-c-h .ck-sat { display: block; }
.ck-c-on { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ck-c-metin { margin-top: 2.3cqw; }
.ck-c-metin .ck-p { margin: 0; max-width: 34ch; color: var(--ck-golge); font-size: max(15px, 1.22cqw); line-height: 1.6; }
.ck-c-cap { margin-top: max(14px, 1.5cqw); color: #4A443B; max-width: 34ch; }
.ck-c-sis { display: none; }

/* 05 Food Hall: v1'deki zemin ve renkler (Tayfun: "logo sayfayla bütünleşmiş") */
.ck-fh { background: var(--ck-bej); color: var(--ck-zeytin); padding-bottom: calc(var(--ck-bosluk) * 1.3); }
.ck-fh .ck-no { color: var(--ck-fh); }
.ck-fh .ck-p { color: #6b5f2f; }
.ck-fh .ck-ipucu { color: #6b5f2f; }
.ck-fh-g { display: grid; gap: clamp(32px, 5vw, 80px); align-items: center; }
/* v3: başlık, logo ve mockup aynı ekranda (1366x768 ve 1440x900): başlık sol kolonda logonun üstünde, mockup sağda; hareketsiz halde de */
@media (min-width: 900px) { .ck-fh-g { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ck-fh-l { display: grid; justify-items: start; gap: 8px; }
.ck-fh-ust { margin-bottom: clamp(16px, 3.4vh, 36px); }
.ck-fh-logo { width: min(220px, 60%, 25vh); }
.ck-fh-logo .ck-logo { width: 100%; height: auto; }
.ck-fh-l .ck-p { margin-top: clamp(16px, 3vh, 32px); }
.ck-fh-kart { display: none; width: 100%; max-width: min(100%, 58vh); justify-self: center; }
@media (min-width: 900px) { .ck-fh-kart { display: block; } }
.ck-fh-kart img { display: block; width: 100%; height: auto; border-radius: var(--ck-r); }
.ck-neon-karanlik { display: none; }
/* neon tam ekran (düzeltme turu): hareketsiz halde Food Hall'un altında kendi ekranında durur (sahnenin son karesi); hareketli halde
   sahnenin içinde kartın yerinden büyür. Paragrafın ikinci cümlesi tabelanın sağındaki tuğlada, neon tüpün arkasından çıkar:
   maske (.ck-neon-mask) tabelanın sağ kapağının kenarında başlar (görselde x 643 / 1024) */
.ck-neon-tam { position: relative; margin: var(--ck-bosluk) 0 0; height: var(--ck-st-h); min-height: 420px; overflow: hidden; container-type: size; background: var(--ck-gece); }
.ck-dunya-neon { --fx: .5; left: calc((100cqw - max(100cqw, 100cqh)) / 2); top: clamp(calc(100cqh - max(100cqw, 100cqh)), calc(50cqh - .4 * max(100cqw, 100cqh)), 0px); }
.ck-neon-mask { position: absolute; left: 62.8%; top: 22.6%; width: 13.4%; height: 15%; overflow: hidden; }
.ck-neon-yazi { margin: 0; padding-left: 1cqw; font: 300 max(14px, 1.3cqw)/1.42 var(--ck-metin); letter-spacing: .01em; color: #F8E8D8; text-wrap: pretty; text-shadow: 0 0 .45em rgba(37, 29, 22, .95), 0 0 1.4em rgba(37, 29, 22, .7); }
.ck-neon-cap { position: absolute; z-index: 3; left: clamp(20px, 4.4cqw, var(--margin)); bottom: clamp(18px, 4cqh, 40px); margin: 0; font: 400 12px/1.4 var(--ck-metin); letter-spacing: .06em; color: #F6D6C4; }
.ck-sahne .ck-st-neon { display: grid; align-content: center; container-type: size; padding-top: var(--nav-h, 72px); }
.ck-sahne .ck-fh-kart { display: block; }
.ck-sahne .ck-fh-kart img { opacity: 0; }
.ck-sahne .ck-neon-karanlik { display: block; position: absolute; inset: 0; z-index: 1; background: var(--ck-gece); opacity: 0; }
.ck-sahne .ck-neon-tam { position: absolute; inset: 0; z-index: 2; margin: 0; height: auto; min-height: 0; overflow: visible; background: none; pointer-events: none; }
.ck-sahne .ck-dunya-neon { transform-origin: 0 0; border-radius: 28px; overflow: hidden; }
/* neon çerçevesi (v3): geniş ekranda (≥ 1100 px) neon tam ekran olmaz: görsel kendi karesinde (en fazla 1024 px, sahneden --ck-kg kadar
   içeride) sahnenin ortasında durur; kart bu kareye büyür, çevresi tuğla gecesine kararır. Paragrafın ikinci cümlesi karenin sağındaki
   gecede, fotoğrafın arkasından (karenin sağ kenarından) kayarak çıkar: küçük karede tabelanın yanındaki tuğlaya sığmıyordu.
   Hareketsiz halde de aynı: gece bandında kare ve yanında cümle */
@media (min-width: 1100px) {
  .ck-dunya-neon { --W: min(100cqh - 2 * var(--ck-kg), 100cqw - 2 * var(--margin), 1024px); width: var(--W); left: calc((100cqw - var(--W)) / 2); top: calc((100cqh - var(--W)) / 2); }
  .ck-sahne .ck-dunya-neon { overflow: visible; border-radius: 0; }
  .ck-dunya-neon .ck-dunya-img { border-radius: var(--ck-r); }
  .ck-neon-mask { left: 100%; top: 21%; width: min(320px, 50vw - 50cqw - 40px); height: auto; }
  .ck-neon-yazi { padding-left: clamp(24px, 3vw, 44px); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; text-shadow: none; }
}
/* duvar: tam genişlik; görsel ve üstündeki yazı birlikte, kendi çerçevesinde yavaş kayar (paralaks). Yazı duvarın sol yüzünde, boya gibi
   (multiply): duvarın ışık ve gölge şeritleri harflerin üstünden geçer; rengi tabelanın lacivert kenarı */
.ck-fh-duvar { position: relative; margin: var(--ck-bosluk) 0 0; background: var(--ck-duvar); }
.ck-fh-duvar-c { position: relative; height: min(66.667vw, var(--ck-ic-h)); overflow: hidden; container-type: size; }
.ck-duvar-d { position: absolute; left: 50%; top: 50%; width: max(100cqw, 168cqh); aspect-ratio: 3 / 2; margin: calc(max(100cqw, 168cqh) / -3) 0 0 calc(max(100cqw, 168cqh) / -2); container-type: inline-size; }
.ck-fh-duvar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ck-duvar-yazi { position: absolute; left: 6.5%; top: 33%; margin: 0; font: 300 4.6cqw/.98 var(--ck-metin); letter-spacing: -.012em; color: #1F2638; mix-blend-mode: multiply; }
.ck-duvar-yazi .ck-sat { display: block; }
.ck-duvar-yazi small { display: block; margin-top: 1.3cqw; font: 400 max(11px, .95cqw)/1.3 var(--ck-metin); letter-spacing: .16em; text-transform: uppercase; }
.ck-sahne .ck-duvar-d { will-change: transform; }
/* denemeler (v4): kaydırmasız, sakin ızgara. Her deneme kendi kâğıt payında, aynı oranlı (4:3) bir hücrede; logolar mürekkep kutusuna kırpılmış karolar
   ve her birinin hücredeki genişliği (--w) kutu alanından hesaplı: hepsi aynı optik boyutta (Tayfun: bazıları diğerlerinden büyük konmuş) */
.ck-fh-den { margin-top: calc(var(--ck-bosluk) * 1.1); }
.ck-fh-den-ust { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; margin-bottom: clamp(24px, 4vh, 44px); }
.ck-fh-den-ust .ck-etiket { margin: 0; }
.ck-den-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
@media (max-width: 899px) { .ck-den-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ck-den-k { display: grid; place-items: center; aspect-ratio: 4 / 3; min-width: 0; border-radius: 24px; background: var(--ck-bej); box-shadow: inset 0 0 0 1px rgba(84, 77, 35, .2); }
.ck-den-k .ck-karo { width: var(--w); height: auto; max-height: 66%; object-fit: contain; pointer-events: none; }

/* 06 Arayış (düzeltme turu: Food Hall ölçütü). Plaka ve kart yok: her yön kendi logosunun baskın renginin açık tonunda bir zemin
   bandı, logo doğrudan zeminde, sıra numarası ve ince renk çizgisi (karonun kendi dolguları) logonun koyu tonunda.
   Varsayılan (azaltılmış hareket, dar ekran, betik yok): bantlar alt alta, tam genişlik. .ck-yatay-on (ck.js, ≥ 900 px, hareket açık):
   yol yatay kayar, zemin gelen yönün tonuna döner, logolar o zeminde durur */
.ck-arayis { background: #fff; padding: calc(var(--ck-bosluk) * 1.2) 0 0; }
.ck-ton { display: none; }
.ck-iz { display: grid; width: 100%; margin: 0; }
.ck-iz-giris { width: var(--inner); margin: 0 auto clamp(72px, 13vh, 132px); }
.ck-iz-giris .ck-ust { margin-bottom: 20px; }
.ck-iz-ey { position: relative; display: grid; justify-items: center; gap: clamp(24px, 4vh, 40px); padding: clamp(112px, 20vh, 196px) var(--margin) clamp(80px, 15vh, 150px); background: var(--ton); }
.ck-iz-logo { width: min(100%, 640px, calc(var(--ck-ic-h) * .44 * 1.6)); }
.ck-iz-ey .ck-karo { width: 100%; height: auto; }
.ck-iz-n { position: absolute; top: clamp(20px, 4vh, 40px); left: max(var(--margin), calc((100vw - var(--wrap, 1248px)) / 2)); font: 300 clamp(40px, min(6vw, 10vh), 84px)/1 var(--ck-metin); letter-spacing: -.03em; color: var(--mur); }
.ck-iz-renk { display: flex; gap: 6px; }
.ck-iz-renk s { display: block; width: clamp(18px, 2.2vw, 30px); height: 5px; border-radius: 3px; }
.ck-iz-son { display: grid; gap: clamp(28px, 4vw, 72px); align-items: center; padding: clamp(112px, 20vh, 196px) max(var(--margin), calc((100vw - var(--wrap, 1248px)) / 2)); background: var(--ton); }
@media (min-width: 900px) { .ck-iz-son { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.ck-iz-son-karo .ck-karo { width: 100%; height: auto; }
.ck-son-t .ck-etiket { color: var(--mur); opacity: 1; }
.ck-son-t .ck-not { margin-top: 0; color: #5a2a44; }
.ck-yatay-on .ck-st-yatay { display: flex; align-items: center; padding-top: var(--nav-h, 72px); }
.ck-yatay-on .ck-ton { display: block; position: absolute; inset: 0; }
.ck-yatay-on .ck-ton i { position: absolute; inset: 0; opacity: 0; }
.ck-yatay-on .ck-ton .ck-ton-son { background: #F8EBF2; }
.ck-arayis:has(.ck-yatay-on) { padding: 0; }
.ck-yatay-on .ck-iz { position: relative; display: flex; align-items: center; gap: clamp(140px, 14vw, 260px); width: max-content; margin: 0; padding: 0 max(var(--margin), calc((100vw - var(--wrap, 1248px)) / 2)); will-change: transform; }
.ck-yatay-on .ck-iz-giris { flex: none; width: min(30vw, 420px); margin: 0; }
.ck-yatay-on .ck-iz-ey { flex: none; width: min(44vw, calc((var(--ck-ic-h) * .44) * 1.6)); justify-items: start; padding: 0; background: none; }
.ck-yatay-on .ck-iz-n { position: static; }
.ck-yatay-on .ck-iz-logo { width: 100%; }
.ck-yatay-on .ck-iz-son { flex: none; width: min(70vw, calc(var(--ck-ic-h) * 1.32)); padding: 0; background: none; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }

/* 07 künye */
.ck-kunye { background: var(--ck-krem); padding: clamp(56px, 9vh, 96px) 0; }
.ck-kunye .ck-ust { margin-bottom: clamp(20px, 3.4vh, 32px); }
.ck-kunye-lede { max-width: 46ch; margin: 0 0 clamp(20px, 3.6vh, 32px); font: 300 clamp(17px, 1.5vw, 21px)/1.45 var(--ck-metin); letter-spacing: -.005em; color: var(--ck-ink); text-wrap: pretty; }
.ck-kunye-don { display: inline-flex; align-items: center; gap: 8px; margin-top: clamp(32px, 6vh, 56px); font: 400 14px/1 var(--ck-metin); color: var(--ck-mg); text-decoration: none; }
.ck-kunye-don svg { width: 18px; height: 18px; }
.ck-kunye-don:hover span { text-decoration: underline; text-underline-offset: .25em; }
.ck-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 0; border-top: 1px solid var(--ck-line); }
.ck-dl div { padding: 11px 16px 11px 0; border-bottom: 1px solid var(--ck-line); }
.ck-dl dt { font: 400 12px/1.3 var(--ck-metin); letter-spacing: .12em; text-transform: uppercase; color: var(--ck-mg); }
.ck-dl dd { margin: 3px 0 0; font-weight: 900; font-size: 14.5px; }

/* bir kez belirme ve kapak logosunun kurulması (yalnız transform ve opacity) */
@keyframes ckYol { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
/* v3 kapak: logo bir kez, sayfa açılırken kurulur (harfler sırayla, bütün logo hafifçe yerine oturur; vektör, büyütme keskinliği bozmaz);
   kurulum bitmek üzereyken vizyon cümlesinin görünen ucu aşağıdan gelir. Bir kez; döngü yok */
@keyframes ckKur { from { transform: scale(1.07); } to { transform: none; } }
@keyframes ckGel { from { opacity: 0; transform: translateY(56px); } to { opacity: 1; transform: none; } }
/* v3 doğrulama düzeltmesi: bekleme hali .motion'a bağlı (head betiği ilk boyamadan önce koyar; ck.js ertelenmiş, ondan önce gelen bir
   ilk boyamada bitmiş logo görünüp siliniyordu). Kurulum ck.js'in koyduğu sınıflarla başlar: sitenin yükleme perdesi (#ld) kalkınca
   logoya .ani, sayfaya .ck-acik (kapak o an ekrandaysa .ck-kur da: vizyon cümlesi aşağıdan gelir). Betik hiç çalışmazsa ckBekle
   6 s sonra biter ve logo ile cümle hareketsiz görünür (perde açıksa altında kalır) */
@keyframes ckBekle { from, to { opacity: 0; } }
.motion .ck-hero-logo:not(.ani), .motion .ck:not(.ck-acik) .ck-vizyon-ic > * { animation: ckBekle 6s linear; }
.motion .ck-hero-logo.ani { animation: ckKur 2s var(--emph) backwards; }
.motion .ck-hero-logo.ani path { animation: ckYol .8s var(--emph) backwards; animation-delay: calc(.12s + var(--i, 0) * 22ms); }
.motion .ck.ck-kur .ck-vizyon-ic > * { animation: ckGel 1.1s var(--emph) backwards; animation-delay: calc(1.15s + var(--d, 0) * 110ms); }
.ck-vizyon-ic > .ck-big { --d: 1; }
.ck-vizyon-ic > .ck-p { --d: 2; }
/* kaydırmayla canlanan her öğe kendi katmanında: kare başına yalnız birleştirme (boyama ve katmanlama yok) */
.ck-sahne :is(.ck-kapak-logo, .ck-m-t > *, .ck-t-h .ck-sat, .ck-t-alt, .ck-c-no, .ck-c-h .ck-sat, .ck-c-metin, .ck-neon-karanlik, .ck-fh-l, .ck-neon-yazi, .ck-neon-cap) { will-change: transform, opacity; }
.ck-yatay-on .ck-ton i { will-change: opacity; }
.ck-js.motion .ck-rv { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--emph), transform .7s var(--emph); transition-delay: calc(var(--d, 0) * 90ms); }
.ck-js.motion .ck-rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .motion .ck-hero-logo, .motion .ck-hero-logo path, .motion .ck-vizyon-ic > * { animation: none !important; opacity: 1; }
  .motion .ck-sabit { transition: none; }
  .ck-js.motion .ck-rv { opacity: 1; transform: none; transition: none; }
  .ck-renk-logolar .ck-logo :is(path, rect), .ck-sw { transition: none; }
}


/* tek kolon (< 900 px), v3 doğrulama düzeltmesi: neon sahnesinde başlık, logo, metin ve kart bir ekrana sığsın (768x1024'te kart ve
   logo sahneyi taşırıyordu, başlık üstte kesiliyordu). Sahnenin üst payı adanın ve hapın altına inen sabit etiketin bandı kadar */
@media (max-width: 899px) {
  .ck-sahne .ck-st-neon { padding-top: calc(var(--nav-h, 60px) + 44px); }
  .ck-sahne .ck-st-neon .ck-fh-g { gap: 20px; }
  .ck-sahne .ck-st-neon .ck-fh-logo { width: min(150px, 17vh); }
  .ck-sahne .ck-st-neon .ck-fh-kart { max-width: min(100%, 38vh); }
}
/* dar ekran */
@media (max-width: 767px) {
  .ck { --ck-bosluk: 88px; }
  .ck-kars-alt { grid-template-columns: 1fr 1fr; }
  .ck-kars-alt .ck-ipucu { grid-column: 1 / -1; grid-row: 2; }
  .ck-t-alt .ck-p { font-size: 15px; line-height: 1.6; }
  /* neon: dar ekranda tabelanın sağında yer yok; cümle tabelanın üstünde, lambanın altında. v3 doğrulama düzeltmesi: koyu mürekkep
     tuğla dokusuna ve derzlere karışıyordu; artık açık yazı, arkasında kenarı yumuşak koyu bir perde (tabelanın alt metnindeki gibi).
     Burada cümle yalnız belirir (opacity + y), maske kesmez: perde maskenin dışına taşabilir */
  /* sahne ekranın üstüne yapışır; fotoğraf adanın bandının (--nav-h) altından başlar, üstünde sahnenin gece zemini: cümle adanın ve
     sabit etiketin altında kalır */
  .ck-dunya-neon { top: calc(var(--nav-h, 60px) + clamp(calc(100cqh - var(--nav-h, 60px) - max(100cqw, 100cqh)), calc(50cqh - var(--nav-h, 60px) / 2 - .4 * max(100cqw, 100cqh)), 0px)); }
  .ck-neon-mask { left: 27%; top: 11.2%; width: 46%; height: 8.8%; overflow: visible; }
  .ck-neon-yazi { position: relative; isolation: isolate; padding: 0; font-size: 14px; font-weight: 400; line-height: 1.45; text-align: center; color: #FBF1E6; text-shadow: 0 0 .4em rgba(30, 22, 16, .9); }
  .ck-neon-yazi::before { content: ''; position: absolute; z-index: -1; inset: -26px -34px; background: radial-gradient(closest-side, rgba(30, 22, 16, .86), rgba(30, 22, 16, .7) 58%, rgba(30, 22, 16, 0)); pointer-events: none; }
  .ck-duvar-yazi { left: 10.5%; font-size: 5cqw; }
}
@media (max-width: 599px) {
  .ck { font-size: 16px; --ck-peek: 24svh; }
  /* tabela: alt metnin perdesi tam genişlikte, alttan */
  .ck-t-alt::before { left: calc(-1 * var(--margin)); width: calc(100% + 2 * var(--margin) + 40px); bottom: calc(-1 * clamp(20px, 6vh, 64px)); height: calc(100% + 26vh); background: linear-gradient(to bottom, rgba(34, 30, 25, 0), rgba(34, 30, 25, .8) 42%, rgba(34, 30, 25, .86)); }
  /* tabela: kamera tabelayı bütün gösterir; başlık giriş camının dikey kaydından (x 767) çıkar */
  .ck-dunya-tabela { --fx: .7724; }
  /* sıra etiketi hapın altına inen sabit etiketin (en fazla 102 px) altında */
  .ck-t-no { top: calc(var(--nav-h, 60px) + 56px); }
  .ck-t-cam { right: 25.1%; top: 51.5%; width: 27.9%; }
  .ck-t-h { right: .8cqw; top: 2.1cqw; font-size: 3cqw; }
  /* çanta: dar ekranda fotoğraf sahnenin altına oturur (çanta ve üstündeki altın logo bütün); etiket, başlık, paragraf ve alt yazı
     üstteki mermer zeminde, tek sol kenarda. Fotoğrafın üst kenarı mermer tonunda zemine yumuşakça geçer */
  .ck-dunya-canta { --W: max(100cqw, min(150cqw, 100cqh - 250px - var(--nav-h, 60px))); --ck-sw: 100cqw; --ck-ox: min(.05 * var(--W), var(--W) - 100cqw); width: var(--W); left: calc(-1 * var(--ck-ox)); top: auto; bottom: 0; transform-origin: 50% 100%; }
  .ck-c-sis { display: block; position: absolute; left: 0; right: 0; top: 0; height: 14%; background: linear-gradient(var(--ck-mermer), rgba(222, 218, 210, 0)); pointer-events: none; }
  .ck-c-kolon { left: calc(var(--ck-ox) + var(--margin)); top: auto; bottom: calc(100% + 16px); width: calc(var(--ck-sw) - 2 * var(--margin)); }
  .ck-c-no { margin-bottom: 12px; font-size: 12px; }
  .ck-c-h { font-size: 28px; }
  .ck-c-h .ck-sat { display: inline; }
  .ck-c-metin { margin-top: 12px; }
  .ck-c-metin .ck-p { font-size: 14px; line-height: 1.55; max-width: none; }
  .ck-c-cap { margin-top: 10px; max-width: none; }
  .ck-sahne .ck-st-neon .ck-fh-l .ck-p { margin-top: 14px; font-size: 15px; line-height: 1.55; }
  .ck-sw-l { gap: 10px; }
  .ck-sw { padding: 8px 8px 12px; }
  .ck-yz-n { font-size: clamp(22px, 7vw, 30px); }
  .ck-f-nexa { font-size: clamp(16px, 4.6vw, 22px); }
  .ck-c-metin .ck-p { font-size: 14px; line-height: 1.5; }
}
/* v4: dar ekranda kapak logosu da küçük (kenarlardan taşan tam genişlik değil) */
@media (max-width: 599px) { .ck-kapak-h { width: min(80%, 360px); } }