/* ÜRETİLDİ — ELLE DÜZENLEMEYİN. Kaynak: kaynak/stil/*.css (ad sırasıyla), node araclar/derle.js */

/* ── kaynak/stil/00-temel.css ────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════
   00-temel.css — SAHİBİ: ÇEKİRDEK. Sayfa ajanları bu dosyaya DOKUNMAZ;
   ortak bir bileşende değişiklik gerekiyorsa kendi sayfa dosyalarında
   sayfa sınıfıyla (body.s-projeler …) daraltarak ezer ve raporda yazar.

   İçindekiler: değişkenler ve zeminler · temel · yazı ölçeği · düzen ·
   bağlantı ve düğme · üst bilgi ve menü · alt bilgi · görsel · künye ·
   proje kartı, diptik, diğer çalışmalar · derz şeması ·
   grup künyesi, listeler · ortak iç sayfa başı · süzgeç · form · harita ·
   ışık kutusu (06-isik.css'e taşındı) · giriş paneli · hareket (05-hareket.css, 07-bilesenler.css)

   Yazı: Noto Serif Display (başlık, proje adı; italik YOK) · Zalando Sans
   (gövde, menü, düğme — cümle düzeni) · Zalando Sans Expanded (YALNIZ küçük
   büyük harf etiket / künye türü, ≥ 12 px). Monospace YOK. Kırmızı YALNIZ
   logo, etkin menü çizgisi ve odak halkası.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Değişkenler ─────────────────────────────────────────────────── */
:root {
  --murekkep: #0E0F10; --murekkep-2: #18191B; --murekkep-3: #2A2B2C;
  --kagit: #F1EFEA; --tas: #E7E4DD; --tas-2: #D9D5CC;
  --acik: #EEEBE5; --kirmizi: #E11F2A;
  --serif: 'Noto Serif Display', Georgia, 'Times New Roman', serif;
  --sans: 'Zalando Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --genis: 'Zalando Sans Expanded', 'Zalando Sans', 'Segoe UI', sans-serif;
  --kenar: clamp(20px, 2.8vw, 40px);      /* kap yan boşluğu */
  --oluk: 24px;                           /* ızgara oluğu */
  --bolum: clamp(88px, 10vw, 152px);      /* bölüm dikey boşluğu */
  --ust-h: 84px;                          /* üst bilgi yüksekliği */
  --yavas: cubic-bezier(.22, .61, .36, 1);
}

/* ── Zeminler: bileşenler bulundukları zeminden renk alır ────────────
   --zemin   arka plan            --metin   başlık/vurgulu metin
   --govde   gövde metni (≥7:1)   --metin-2 ikincil metin
   --soluk   etiket (≥4.5:1)      --cizgi   ince çizgi   --cizgi-g  belirgin çizgi
   --dugme / --dugme-y / --dugme-h   dolu düğme zemini / yazısı / üzerine gelince
   --logo-bos   logodaki boş (beyaz) çubuğun dolgusu                       */
:root, .z-kagit {
  --zemin: var(--kagit); --metin: #141516; --govde: #2A2B2C; --metin-2: #3A3B3D; --soluk: #5F5B54;
  --cizgi: rgba(14, 15, 16, .15); --cizgi-g: rgba(14, 15, 16, .38);
  --dugme: var(--murekkep); --dugme-y: var(--kagit); --dugme-h: #2A2B2C; --logo-bos: var(--kagit);
}
.z-tas {
  --zemin: var(--tas); --metin: #141516; --govde: #2A2B2C; --metin-2: #38393B; --soluk: #58544D;
  --cizgi: rgba(14, 15, 16, .16); --cizgi-g: rgba(14, 15, 16, .4);
  --dugme: var(--murekkep); --dugme-y: var(--tas); --dugme-h: #2A2B2C; --logo-bos: var(--tas);
}
.z-murekkep {
  --zemin: var(--murekkep); --metin: var(--acik); --govde: rgba(238, 235, 229, .86); --metin-2: rgba(238, 235, 229, .78);
  --soluk: rgba(238, 235, 229, .64); --cizgi: rgba(238, 235, 229, .15); --cizgi-g: rgba(238, 235, 229, .42);
  --dugme: var(--acik); --dugme-y: var(--murekkep); --dugme-h: var(--tas-2); --logo-bos: var(--murekkep);
}
.z-kagit, .z-tas, .z-murekkep { background-color: var(--zemin); color: var(--metin); }

/* ── Temel ───────────────────────────────────────────────────────── */
html:lang(tr) { font-variant-ligatures: no-common-ligatures; }   /* Türkçe "fi" bağlacı */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--ust-h) + 16px); }
body { margin: 0; background: var(--kagit); color: var(--metin); font: 400 17px/1.6 var(--sans); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, dl, dd, ul, ol, figure, blockquote, address { margin: 0; padding: 0; }
ul, ol { list-style: none; }
address { font-style: normal; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p, dd, address, li { text-wrap: pretty; }
/* hidden HER ZAMAN kazanır: display veren bir bileşen kuralı (ör. telefonda .proje--kucuk
   display:grid) UA'nın [hidden] kuralını ezer ve süzgecin gizlediği kart görünür kalırdı. */
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--kirmizi); outline-offset: 3px; }
.gizli { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.nw { white-space: nowrap; }
.atla { position: fixed; left: var(--kenar); top: -80px; z-index: 200; padding: 12px 18px; background: var(--acik); color: var(--murekkep); font: 500 15px/1 var(--sans); text-decoration: none; }
.atla:focus { top: 12px; }
main:focus { outline: none; }

/* ── Yazı ölçeği ─────────────────────────────────────────────────────
   .b1 H1 (≤112 px) · .b2 H2 · .b3 ara başlık · .b4 proje adı (≥20 px)
   Ağırlık kuralı: 64 px üstü 300, 48–64 px 350, 48 px altı 400.        */
.b1, .b2, .b3, .b4 { font-family: var(--serif); color: var(--metin); text-wrap: balance; }
.b1 { font-size: clamp(48px, 7.6vw, 112px); font-weight: 300; font-stretch: 87.5%; line-height: .98; letter-spacing: -.018em; }
.b2 { font-size: clamp(40px, 5.4vw, 80px); font-weight: 300; font-stretch: 87.5%; line-height: 1.02; letter-spacing: -.016em; }
.b3 { font-size: clamp(28px, 2.9vw, 44px); font-weight: 400; font-stretch: 92%; line-height: 1.1; letter-spacing: -.01em; }
.b4 { font-size: clamp(21px, 1.75vw, 27px); font-weight: 420; font-stretch: 100%; line-height: 1.18; letter-spacing: -.004em; }
@media (max-width: 1185px) { .b2 { font-weight: 350; } }
@media (max-width: 888px) { .b1 { font-weight: 350; } .b2 { font-weight: 400; } }
@media (max-width: 630px) { .b1 { font-weight: 400; } }

/* Küçük büyük harf etiket (eyebrow) — numara YOK. */
.etiket { font: 500 12px/1.5 var(--genis); letter-spacing: .15em; text-transform: uppercase; color: var(--soluk); }
/* Giriş paragrafı ve gövde */
.giris-metni { font-size: clamp(17.5px, 1.32vw, 20px); line-height: 1.58; color: var(--govde); max-width: 36em; }
.metin { color: var(--govde); max-width: 38em; }
.metin + .metin { margin-top: 1em; }
.soluk { color: var(--soluk); }

/* ── Düzen ───────────────────────────────────────────────────────── */
.kap { max-width: 1440px; margin-inline: auto; padding-inline: var(--kenar); }
.izgara { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--oluk); }
.bolum { padding-block: var(--bolum); }
.eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
/* Bölüm çizgisi İÇERİK genişliğinde (kabın yan dolgusu hariç): kenarlık kullanılsaydı
   ≤ 1440 px'te kenardan kenara uzanırdı; öteki ince çizgiler (künye, liste) içerik genişliğinde. */
.bolum--cizgi > .kap { padding-top: clamp(28px, 3vw, 40px); background: linear-gradient(var(--cizgi), var(--cizgi)) no-repeat var(--kenar) 0 / calc(100% - 2 * var(--kenar)) 1px; }
/* İki sütunlu metin bölümü: solda ara başlık (4 sütun), sağda gövde (7 sütun). */
.bolum-ikili { row-gap: 24px; align-items: start; }
.bolum-ikili__bas { grid-column: 1 / span 4; }
.bolum-ikili__bas .etiket { margin-bottom: 14px; }
.bolum-ikili__bas > * + *:not(.b3, h2, h3) { margin-top: 20px; }
.bolum-ikili__govde { grid-column: 6 / -1; }
.bolum-ikili__govde > * + * { margin-top: 24px; }
/* Kart ızgarası (proje kartları için sade varsayılan: 3 sütun). */
.kart-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 4vw, 56px) var(--oluk); }
@media (max-width: 999px) {
  .izgara { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bolum-ikili__bas, .bolum-ikili__govde { grid-column: 1 / -1; }
  .kart-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) { .kart-izgara { grid-template-columns: minmax(0, 1fr); } }

/* ── Bağlantı ve düğme ───────────────────────────────────────────────
   İki tür: .dugme (dolu, dikdörtgen, logo açısıyla pahlı köşe) ve .bag
   (altı çizili metin bağlantısı). Ok/çember YOK. Pah ::after üçgenidir
   (clip-path düğmenin kendisinde DEĞİL — odak halkası kırpılmasın).     */
/* Bağlantı alt çizgisi: dinlenmede soluk çizgi (::before), üzerine gelince / odakta tam renkli çizgi
   soldan sağa ÇİZİLİR (::after, transform: scaleX — 05-hareket.css'te `--ease-cikis`). */
.bag { position: relative; display: inline-block; padding-bottom: 5px; margin-bottom: -5px; font: 500 15px/1.4 var(--sans); color: var(--metin); text-decoration: none; }
.bag::before, .bag::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; }
.bag::before { background: var(--cizgi-g); }
.bag::after { background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--sure-orta) var(--ease-cikis); }
.bag:hover::after, .bag:focus-visible::after { transform: scaleX(1); }
.dugme { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 34px 0 30px; border: 0; border-radius: 0; background: var(--dugme); color: var(--dugme-y); font: 500 15px/1.2 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .3s var(--yavas); }
/* Pah: 12 × 21 eğimli üçgen. 1 px dışarı taşar (aynı eğimle: 13.572 × 23.75) — düğme kesirli
   piksele düşünce kenar pikseli üçgenin sağında ince açık bir çizgi olarak kalıyordu (ölçüldü, 4×).
   Üzerine gelince / odakta pah büyür (scale, sağ üst köşeden; açı aynı kalır). */
.dugme::after { content: ""; position: absolute; top: -1px; right: -1px; width: 13.572px; height: 23.75px; background: var(--zemin); clip-path: polygon(0 0, 100% 0, 100% 100%); pointer-events: none; transform-origin: 100% 0; transition: transform var(--sure-orta) var(--ease-cikis); }
.dugme:hover { background: var(--dugme-h); }
.dugme:hover::after, .dugme:focus-visible::after { transform: scale(1.6); }
@media (forced-colors: active) { .dugme::after { display: none; } .dugme { border: 1px solid ButtonText; } .bag::before, .bag::after { display: none; } .bag { text-decoration: underline; } }

/* ── Logo ────────────────────────────────────────────────────────── */
.logo { display: block; height: auto; color: var(--metin); }
.logo .logo-bos { fill: var(--logo-bos); }

/* ── Üst bilgi ───────────────────────────────────────────────────────
   Sabit (sticky), ince. Zemini altındaki bölüme göre koyu/açık (site.js
   .z-murekkep / .z-kagit / .z-tas sınıfını değiştirir). Gizlenme/bulanıklık YOK. */
.ust { position: sticky; top: 0; z-index: 50; transition: background-color .35s var(--yavas), color .35s var(--yavas); }
.ust.z-kagit, .ust.z-tas { box-shadow: inset 0 -1px 0 var(--cizgi); }
.ust__ic { display: flex; align-items: center; gap: clamp(24px, 2.6vw, 44px); height: var(--ust-h); }
.ust__marka { flex: none; display: block; text-decoration: none; }
.ust__marka .logo { width: 236px; }
.menu { flex: 1; display: flex; justify-content: center; min-width: 0; }
.menu__liste { display: flex; gap: clamp(18px, 2.1vw, 34px); }
.menu__bag { position: relative; display: block; padding: 10px 0; font: 500 15px/1.2 var(--sans); color: var(--metin-2); text-decoration: none; white-space: nowrap; transition: color .25s; }
.menu__bag:hover, .menu__bag[aria-current="page"] { color: var(--metin); }
.menu__bag[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--kirmizi); }
.menu__alt { display: none; }
.ust__sag { flex: none; display: flex; align-items: center; gap: 20px; }
.ust__tel { font: 500 15px/1.2 var(--sans); color: var(--metin); text-decoration: none; white-space: nowrap; }
.ust__tel:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.btn--giris { padding: 8px 0 8px 20px; border-left: 1px solid var(--cizgi-g); font: 500 15px/1.2 var(--sans); color: var(--metin-2); text-decoration: none; }
.btn--giris:hover { color: var(--metin); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.menu-dugme { display: none; }
@media (max-width: 1180px) { .ust__tel { display: none; } .btn--giris { border-left: 0; padding-left: 0; } }

/* Mobil menü: tam ekran mürekkep, büyük serif bağlantılar, altta telefon · WhatsApp · Kurumsal Giriş */
@media (max-width: 999px) {
  :root { --ust-h: 64px; }
  .ust__marka .logo { width: 180px; }
  .ust__sag { display: none; }
  .menu-dugme { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; min-height: 44px; padding: 0 0 0 16px; border: 0; background: none; color: var(--metin); font: 500 15px/1 var(--sans); cursor: pointer; }
  .menu-dugme__cizgi { width: 20px; height: 8px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
  .menu-acik .menu-dugme__cizgi { display: none; }
  .menu { position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: flex-start; padding: calc(var(--ust-h) + clamp(24px, 5vh, 48px)) var(--kenar) max(28px, env(safe-area-inset-bottom)); background: var(--murekkep); color: var(--acik); overflow-y: auto; visibility: hidden; opacity: 0; transition: opacity .25s var(--yavas), visibility 0s linear .25s; }
  .menu-acik .menu { visibility: visible; opacity: 1; transition: opacity .25s var(--yavas); }
  .menu__liste { flex-direction: column; gap: 0; }
  .menu__bag { display: inline-block; padding: 7px 0; font: 400 clamp(34px, 9.6vw, 46px)/1.12 var(--serif); font-stretch: 92%; letter-spacing: -.01em; color: var(--acik); }
  .menu__bag[aria-current="page"]::after { bottom: 4px; }
  .menu__alt { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: auto; padding-top: 28px; border-top: 1px solid rgba(238, 235, 229, .16); }
  .menu__tel { font: 400 28px/1.15 var(--serif); font-stretch: 100%; color: var(--acik); text-decoration: none; }
  .menu__ek { font: 500 16px/1.4 var(--sans); color: rgba(238, 235, 229, .86); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; text-decoration-color: rgba(238, 235, 229, .4); }
  html.menu-acik { overflow: hidden; }
  /* JS yok: menü düğmesi çalışmaz → menü, üst bilginin altında akışta ve açık (alt bilgideki Sayfalar da var). */
  html:not(.js) .ust__ic { flex-wrap: wrap; height: auto; padding-block: 14px 6px; }
  html:not(.js) .menu-dugme, html:not(.js) .menu__alt { display: none; }
  html:not(.js) .menu { position: static; z-index: auto; flex: 1 0 100%; padding: 0; background: transparent; color: inherit; overflow: visible; visibility: visible; opacity: 1; }
  html:not(.js) .menu__liste { flex-direction: row; flex-wrap: wrap; gap: 0 22px; }
  html:not(.js) .menu__bag { padding: 9px 0; font: 500 15px/1.2 var(--sans); color: var(--metin-2); }
  .menu-acik .ust { --zemin: var(--murekkep); --metin: var(--acik); --metin-2: rgba(238, 235, 229, .78); --cizgi: rgba(238, 235, 229, .15); --logo-bos: var(--murekkep); box-shadow: none; }
}

/* ── Dokunma hedefleri (şartname § 7: ≥ 44 px) — ortak kurallar; sayfa CSS'inde yeniden yazılmaz ─────────────
   Logo bağlantısı, alt bilgi bağlantıları ve mobil menü ekleri. .bag için kural 07-bilesenler.css'te. Paragraf içi satır-içi
   bağlantılar WCAG 2.5.8 gereği istisnadır. */
@media (pointer: coarse), (max-width: 999px) {
  .ust__marka { display: flex; align-items: center; min-height: 44px; }
  .alt__sutun li { margin-bottom: 0; }
  .alt__sutun a:not(.bag), .alt__taban a, .alt__logo { display: inline-flex; align-items: center; min-height: 44px; }
  .menu__ek, .menu__tel { display: inline-flex; align-items: center; min-height: 44px; }
  .alt__taban a { min-width: 44px; }
  .grup-kunye a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ── Alt bilgi ───────────────────────────────────────────────────── */
.alt { padding: clamp(64px, 7vw, 104px) 0 32px; }
.alt__ust { row-gap: 48px; }
.alt__marka { grid-column: 1 / span 4; }
.alt__logo { display: inline-block; }
.alt__marka .logo { width: 212px; }
.alt__marka p { margin-top: 22px; font-size: 15px; line-height: 1.6; color: var(--metin-2); max-width: 22em; }
.alt__sutun { grid-column: span 3; font-size: 15px; line-height: 1.55; color: var(--metin-2); }
.alt__sutun--sayfa { grid-column: 5 / span 2; }
.alt__sutun .etiket { margin-bottom: 18px; }
.alt__sutun li { margin-bottom: 9px; }
.alt__sutun a:not(.bag) { color: var(--metin-2); text-decoration: none; }
.alt__sutun a:not(.bag):hover { color: var(--metin); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.alt__yol { display: inline-block; margin-top: 14px; }
.alt__taban { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; margin-top: clamp(56px, 6vw, 88px); padding-top: 22px; border-top: 1px solid var(--cizgi); font-size: 14px; color: var(--soluk); }
.alt__taban a { color: var(--metin-2); text-decoration: none; }
.alt__taban a:hover { color: var(--metin); text-decoration: underline; text-underline-offset: 5px; }
/* İLGERU imzası (Köroğlu / Çağöz sitelerindeki "Bu site İLGERU tarafından hazırlanmıştır." ile AYNI söz): cümle içi bağlantı —
   WCAG 2.5.8 cümle içi istisnası, bu yüzden dokunma hedefi 44 px'e ZORLANMAZ (yukarıdaki kural satır düzenini bozardı). */
.alt__taban .alt__imza { margin: 0; }
.alt__taban .alt__imza a { color: var(--metin); font-weight: 600; display: inline; min-height: 0; min-width: 0; }
@media (max-width: 999px) {
  .alt__marka { grid-column: 1 / -1; }
  .alt__sutun, .alt__sutun--sayfa { grid-column: span 2; }
}
@media (max-width: 599px) {
  .alt__ust { row-gap: 40px; }
  .alt__sutun, .alt__sutun--sayfa { grid-column: 1 / -1; }
  .alt__sutun--sayfa ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--oluk); }
}

/* ── Görsel (y.foto) ─────────────────────────────────────────────────
   Renderlar hafif tonlanır; eski/doygun olanlar (19–26) biraz daha.
   Yumuşak belirme: yalnız opacity, 400 ms (lqip'li görsel hemen görünür). */
.foto { filter: saturate(.92) contrast(1.02); transition: opacity .4s var(--yavas), scale .9s var(--ease-cikis); }
.foto--eski { filter: saturate(.74) contrast(1) brightness(1.01); }
.js .foto:not(.foto--hazir) { opacity: 0; }

/* ── Künye: ad · tür · adres (+ "N görsel") ──────────────────────────
   Adres boşken derleyici öğeyi hiç üretmez (:empty yalnız ikinci emniyet).
   align-content:start → adres dolunca komşu satırlar kaymaz.             */
.kunye { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; column-gap: 20px; row-gap: 7px; padding-top: 16px; }
.kunye__ad { grid-column: 1; font: 420 clamp(21px, 1.75vw, 27px)/1.18 var(--serif); font-stretch: 100%; letter-spacing: -.004em; color: var(--metin); }
.kunye__ac { margin: 0; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: left; cursor: pointer; }
.kunye__ac:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.kunye__sayi { grid-column: 2; grid-row: 1; align-self: baseline; font-size: 14.5px; color: var(--soluk); white-space: nowrap; }
.kunye__tur { grid-column: 1 / -1; font: 500 12px/1.5 var(--genis); letter-spacing: .15em; text-transform: uppercase; color: var(--soluk); }
.kunye__adres { grid-column: 1 / -1; font-size: 15px; line-height: 1.5; color: var(--metin-2); }
.kunye__adres:empty { display: none; }

/* ── Proje kartı (y.projeKarti) ──────────────────────────────────────
   Kartın tamamı ışık kutusunu açar: künyedeki düğmenin ::after'ı kartı
   kaplar; odak halkası da o ::after'da (kartın çevresinde).              */
.proje { position: relative; margin: 0; }
.proje__kare { position: relative; overflow: hidden; aspect-ratio: var(--oran, 4 / 3); background-color: var(--renk, var(--tas-2)); }
.proje__kare > .foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.proje .kunye__ac::after { content: ""; position: absolute; inset: 0; z-index: 1; cursor: zoom-in; }
.proje .kunye__ac:focus-visible { outline: none; }
.proje .kunye__ac:focus-visible::after { outline: 2px solid var(--kirmizi); outline-offset: 4px; }
.proje:hover .kunye__ac { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
[data-galeri]:not(button) { cursor: zoom-in; }
/* ⚠ Kartın İÇİNE konan başka bir tetikleyici (diptiğin ikinci karesi, föyün küçük kareleri)
   künye düğmesinin kartı kaplayan ::after'ının (z-index 1) ÜSTÜNDE durmalı:
   position: relative; z-index: 2 — yoksa tıklama ana görselin sırasından açar.
   Bu katman yüzünden Playwright'ın click('.proje__kare') çağrısı "intercepts pointer events"
   ile bekler: testler fare koordinatıyla ya da .kunye__ac düğmesiyle tıklar. */
button.proje__kare { display: block; margin: 0; padding: 0; border: 0; border-radius: 0; font: inherit; color: inherit; cursor: zoom-in; }
/* Diptik: aynı projenin iki görünümü, tek künye. İkinci kare kendi sırasından açar. */
.diptik { display: flex; gap: var(--oluk); height: clamp(240px, 34vw, 500px); }
.diptik > .proje__kare { aspect-ratio: auto; height: 100%; }
.diptik__genis { flex: 1 1 auto; min-width: 0; }
.diptik__dikey { flex: none; aspect-ratio: 4 / 5 !important; position: relative; z-index: 2; }
@media (max-width: 599px) {
  .diptik { height: auto; gap: 12px; }
  .diptik > .proje__kare { flex: 1 1 0; height: auto; aspect-ratio: 4 / 5 !important; }
}

/* "Diğer çalışmalar" dizini: eski renderlar küçük (masaüstü ~230 px; telefonda satır). */
.diger { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--oluk); align-items: start; padding-top: 28px; border-top: 1px solid var(--cizgi); }
.diger__bas { grid-column: 1 / span 3; padding-right: 16px; }
.diger__baslik { font: 400 clamp(26px, 2.2vw, 32px)/1.12 var(--serif); font-stretch: 92%; letter-spacing: -.008em; color: var(--metin); }
.diger__not { margin-top: 12px; font-size: 15px; line-height: 1.55; color: var(--metin-2); }
.diger__liste { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 20px; row-gap: 32px; }
.proje--kucuk .kunye { padding-top: 12px; row-gap: 5px; }
.proje--kucuk .kunye__ad { font-size: 20px; }
.proje--kucuk .kunye__tur { font-size: 12px; }
@media (max-width: 999px) {
  .diger { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .diger__bas, .diger__liste { grid-column: 1 / -1; }
  .diger__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; }
}
@media (max-width: 599px) {
  .diger__liste { grid-template-columns: minmax(0, 1fr); row-gap: 0; border-top: 1px solid var(--cizgi); }
  .diger__liste > li { border-bottom: 1px solid var(--cizgi); }
  .proje--kucuk { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 14px 0; }
  .proje--kucuk .kunye { padding: 0; }
}

/* ── Derz şeması (y.derzSemasi) ──────────────────────────────────────
   Her kare aynı 120 × 120 cm zemini aynı ölçekte gösterir; çizgiler derzdir.
   Tonlar YALNIZ paletten: kâğıt · taş-2 · mürekkep-3 · taş.                */
.derz { margin: 0; }
.derz__liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px var(--oluk); }
.derz__kare { width: 100%; height: auto; aspect-ratio: 1; overflow: visible; }
.derz__zemin { fill: var(--ton); stroke: var(--derz); stroke-width: 1; vector-effect: non-scaling-stroke; }
.derz__cizgi { fill: none; stroke: var(--derz); stroke-width: 1; vector-effect: non-scaling-stroke; }
.derz__kare--1 { --ton: #F1EFEA; --derz: rgba(14, 15, 16, .26); }
.derz__kare--2 { --ton: #D9D5CC; --derz: rgba(14, 15, 16, .26); }
.derz__kare--3 { --ton: #2A2B2C; --derz: rgba(238, 235, 229, .3); }
.derz__kare--4 { --ton: #E7E4DD; --derz: rgba(14, 15, 16, .3); }
.derz__alt { display: grid; gap: 2px; margin-top: 14px; }
.derz__ebat { font: 500 15px/1.35 var(--sans); color: var(--metin); white-space: nowrap; }
.derz__adet { font-size: 14.5px; line-height: 1.4; color: var(--metin-2); white-space: nowrap; }
.derz__not { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--cizgi); font-size: 14.5px; line-height: 1.5; color: var(--metin-2); }
.derz--mini .derz__liste { gap: 10px; }
.derz--mini .derz__ebat { display: block; margin-top: 8px; font-size: 14px; color: var(--metin-2); }
@media (max-width: 599px) {
  .derz:not(.derz--mini) .derz__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; column-gap: 16px; }
}

/* ── Grup künyesi · marka listesi · tanım listesi · madde listesi ───── */
.grup-kunye { border-top: 1px solid var(--cizgi); }
.grup-kunye > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--cizgi); }
.grup-kunye dt { font: 500 12px/1.5 var(--genis); letter-spacing: .15em; text-transform: uppercase; color: var(--soluk); }
.grup-kunye dd { font-size: 16px; line-height: 1.5; color: var(--metin); }
.grup-kunye a { text-decoration: none; }
.grup-kunye a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.marka-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--oluk); }
.marka-liste li { padding: 15px 0 16px; border-top: 1px solid var(--cizgi); font-size: 17px; line-height: 1.3; color: var(--metin); }
.tanim-liste > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 8px var(--oluk); padding: 18px 0 19px; border-top: 1px solid var(--cizgi); }
.tanim-liste dt { font: 420 21px/1.25 var(--serif); font-stretch: 100%; color: var(--metin); }
.tanim-liste dd { font-size: 16px; line-height: 1.55; color: var(--metin-2); }
.madde-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--oluk); font-size: 15px; line-height: 1.45; color: var(--metin-2); }
.madde-liste li { padding: 10px 0 11px; border-top: 1px solid var(--cizgi); }
@media (max-width: 599px) {
  .marka-liste { grid-template-columns: 1fr 1fr; }
  .marka-liste li { font-size: 16px; }
  .tanim-liste > div { grid-template-columns: minmax(0, 1fr); }
  .madde-liste { grid-template-columns: minmax(0, 1fr); }
  .grup-kunye > div { grid-template-columns: 96px minmax(0, 1fr); }
}

/* ── Ortak iç sayfa başı ─────────────────────────────────────────────
   Kâğıt zeminde etiket + H1 (72–96 px) + 1–2 cümle. Görsel varsa başlığın
   ALTINDA, çerçeveli (.sayfa-bas__gorsel). Yan yerleşim: .sayfa-bas--yan.
   Anasayfanın açılışını TEKRAR ETMEZ.                                    */
.sayfa-bas { padding: clamp(56px, 7.5vw, 120px) 0 clamp(48px, 5.5vw, 88px); }
.sayfa-bas__etiket { margin-bottom: 24px; }
.sayfa-bas__baslik { font-family: var(--serif); font-size: clamp(48px, 6.6vw, 96px); font-weight: 300; font-stretch: 87.5%; line-height: 1; letter-spacing: -.017em; color: var(--metin); max-width: 13em; text-wrap: balance; }
.sayfa-bas__on { margin-top: clamp(22px, 2.4vw, 32px); max-width: 34em; font-size: clamp(17.5px, 1.35vw, 20px); line-height: 1.55; color: var(--govde); }
/* Yalnız başlık satırı alta hizalanır (bölümdeki ikinci bir ızgara — ör. görsel + künye — etkilenmez). */
.sayfa-bas--yan > .izgara:first-child { align-items: end; }
.sayfa-bas--yan .sayfa-bas__metin { grid-column: 1 / span 7; }
.sayfa-bas--yan .sayfa-bas__on { grid-column: 9 / -1; margin-top: 0; }
.sayfa-bas__gorsel { margin-top: clamp(44px, 5vw, 72px); }
.sayfa-bas__gorsel .proje__kare, .sayfa-bas__kare { aspect-ratio: var(--oran, 21 / 9); }
@media (max-width: 970px) { .sayfa-bas__baslik { font-weight: 350; } }
@media (max-width: 727px) { .sayfa-bas__baslik { font-weight: 400; } }
@media (max-width: 999px) {
  .sayfa-bas--yan .sayfa-bas__metin, .sayfa-bas--yan .sayfa-bas__on { grid-column: 1 / -1; }
  .sayfa-bas--yan .sayfa-bas__on { margin-top: 24px; }
  .sayfa-bas__gorsel .proje__kare, .sayfa-bas__kare { aspect-ratio: 3 / 2; }
}

/* ── Süzgeç (projeler; site.js [data-filtre]) ────────────────────────── */
.filtre { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.filtre__dugme { position: relative; padding: 10px 0; border: 0; background: none; font: 500 15px/1.2 var(--sans); color: var(--metin-2); cursor: pointer; }
.filtre__dugme:hover { color: var(--metin); }
.filtre__dugme[aria-pressed="true"] { color: var(--metin); box-shadow: inset 0 -1px 0 currentColor; }
.filtre__sayi { margin-left: 6px; font-size: 14px; color: var(--soluk); }

/* ── Form (iletişim; site.js [data-form]) ────────────────────────────── */
.form { display: grid; gap: 20px; }
.form__satir { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.alan { display: grid; gap: 8px; }
.alan > span { font-size: 15px; font-weight: 500; color: var(--metin-2); }
.alan input, .alan select, .alan textarea { width: 100%; padding: 13px 14px; border: 1px solid var(--cizgi-g); border-radius: 0; background: transparent; color: var(--metin); font: 400 17px/1.4 var(--sans); }
.alan textarea { resize: vertical; min-height: 140px; }
.alan input:focus-visible, .alan select:focus-visible, .alan textarea:focus-visible { outline: 2px solid var(--kirmizi); outline-offset: 0; }
.alan .hata { border-color: var(--metin); box-shadow: inset 0 0 0 1px var(--metin); }
.form__not { min-height: 1.5em; font-size: 15px; color: var(--metin-2); }
/* Boş durum notu yer kaplamaz; ızgara boşluğu da geri alınır (dolunca düğmenin hemen üstünde görünür). */
.form > .form__not:empty { min-height: 0; margin-top: -20px; }
.form__not.kotu { color: var(--metin); font-weight: 500; }
.form__bilgi { font-size: 14.5px; color: var(--soluk); }
@media (max-width: 599px) { .form__satir { grid-template-columns: minmax(0, 1fr); } }

/* ── Harita gömmesi (renkler TERS ÇEVRİLMEZ) ─────────────────────────── */
.harita { position: relative; aspect-ratio: 4 / 3; background: var(--tas-2); }
.harita iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.35); }

/* ── Kurumsal giriş paneli (.gp; site.js — iki kip: panel / yönlendir) ── */
.gp-perde { position: fixed; inset: 0; z-index: 960; background: rgba(14, 15, 16, .55); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.gp { position: fixed; top: 0; right: 0; bottom: 0; z-index: 970; display: grid; grid-template-rows: auto 1fr auto; width: min(480px, 100vw); background: var(--kagit); color: var(--metin); transform: translateX(100%); visibility: hidden; transition: transform .45s var(--yavas), visibility .45s; }
html.gp-acik { overflow: hidden; }
html.gp-acik .gp-perde { opacity: 1; visibility: visible; }
html.gp-acik .gp { transform: none; visibility: visible; }
.gp__ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: var(--murekkep); color: var(--acik); --logo-bos: var(--murekkep); }
.gp__marka { display: flex; align-items: center; gap: 16px; }
.gp__marka .logo { width: 150px; color: var(--acik); }
.gp__baslik { padding-left: 16px; border-left: 1px solid rgba(238, 235, 229, .2); font: 500 15px/1.2 var(--sans); color: rgba(238, 235, 229, .82); }
.gp__kapat { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(238, 235, 229, .28); background: none; color: var(--acik); cursor: pointer; }
.gp__kapat svg { width: 20px; height: 20px; }
.gp__govde { position: relative; background: var(--kagit); }   /* çerçevedeki giriş sayfasının zemini de kâğıt: açılırken beyaz parlama olmaz */
.gp__cerceve { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .4s; }
.gp.is-yuklendi .gp__cerceve { opacity: 1; }
.gp__doner { position: absolute; left: 50%; top: 40%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; border: 1.5px solid rgba(14, 15, 16, .14); border-top-color: var(--murekkep); animation: gp-don .9s linear infinite; }
@keyframes gp-don { to { transform: rotate(360deg); } }
.gp.is-yuklendi .gp__doner, .gp.is-engelli .gp__doner { display: none; }
.gp__yedek { position: absolute; inset: 0; display: none; place-content: center; justify-items: center; gap: 16px; padding: 24px; text-align: center; color: var(--metin-2); }
.gp.is-engelli .gp__yedek { display: grid; }
.gp.is-engelli .gp__cerceve { display: none; }
.gp__alt { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; font-size: 14px; color: var(--soluk); border-top: 1px solid var(--cizgi); }
.gp__alt a { color: var(--metin); }

/* ── Hareket: neredeyse yok; azaltılmış harekette hiç ────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ── kaynak/stil/05-hareket.css ──────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════
   05-hareket.css — SAHİBİ: ÇEKİRDEK. Hareket dili: YÜKSELİŞ.
   Her giriş aşağıdan yukarıya (translate pozitif → 0) ya da alttan açılan perdedir.
   Yandan giriş yok, ölçek zıplaması yok, taşma (overshoot) yok.

   Kural: gizli başlangıç durumları YALNIZ html.hareket altındadır. Bu sınıfı
   <head>'deki betik koyar (azaltılmış hareket İSTENMİYORSA ve IntersectionObserver
   varsa); hareket.js 4 sn içinde `hareket-hazir` koymazsa sınıf kalkar → içerik
   her koşulda görünür. Yazdırmada her şey görünür.

   Yalnız transform (translate · scale · transform), opacity, clip-path, filter
   canlandırılır; düzen özelliği asla. `will-change` yalnız aktif öğede (JS koyar/kaldırır).

   Kancalar (ayrıntı: README › Hareket sistemi):
     data-reveal="gorsel|metin|cizgi|derz"  data-reveal-gecikme="120"  data-reveal-grup
     data-parallax="0.06"   data-genis   data-imlec="İncele"   data-ust-seffaf
     data-slayt · data-sahne (+ -gorsel / -adim) · data-rail · data-dizin   (07-bilesenler.css)
   Bayrak sınıfları (html): js · hareket · hareket-hazir · hareket-sessiz · imlec-aktif
   ═══════════════════════════════════════════════════════════════════ */

/* ── Ayarlar ─────────────────────────────────────────────────────────
   Bezier değerleri [0, 1] aralığında: zıplama / aşma YOK.
   --pah-x / --pah-y: logo açısı (Y kolu, düşeyden atan(12/21) ≈ 29.7°). Düğme pahı ve
   perde ucu AYNI açıyı kullanır — sayfadaki tek eğik grafik buluş.               */
:root {
  --ease-cikis: cubic-bezier(.16, 1, .3, 1);
  --ease-gecis: cubic-bezier(.76, 0, .24, 1);
  --ease-yumusak: cubic-bezier(.4, 0, .2, 1);
  --sure-ince: 220ms;
  --sure-orta: 600ms;
  --sure-uzun: 1100ms;
  --sure-sahne: 1500ms;
  --pah-x: 12px;
  --pah-y: 21px;
}

/* Kaydırmaya bağlı genişleme (data-genis): motor 0–1 yazar; JS yokken/azaltılmış harekette 1 = tam açık. */
@property --ilerleme { syntax: '<number>'; inherits: true; initial-value: 1; }

/* ── Perde: data-reveal="gorsel" ─────────────────────────────────────
   Kap (.proje__kare, figure …; KONUMLU + overflow:hidden) bir ÖRTÜ taşır (<span class="perde-ortu">; y.* üretir, JS yoksa
   hareket.js ekler). Örtü bölümün zemin renginde (--zemin) görselin ÜSTÜNDE durur; görsel görünce YUKARI kayar → görsel
   alttan yukarı açılır. Ucu logo açısıyla (düğme pahıyla aynı 12:21 eğim) kesiktir: örtünün sağ alt köşesi pahlıdır, açılan
   kenarın sağ ucu eğimle yükselir. İçteki .foto 1.14 → 1 yaklaşır. data-pah="yok" → pahsız düz kenar.
   ⚠ NEDEN clip-path / opacity DEĞİL (ölçüldü, Chrome 155): (1) IntersectionObserver hedefin KENDİ clip-path'ini hesaba katar —
   kapalı perdenin görünür oranı 0 çıkar, %15 eşiği hiç aşılmaz; (2) LCP, görseli İLK boyandığı andaki GÖRÜNÜR boyutuyla kaydeder —
   clip-path ile açılan açılış görseli 61 000 px² sayıldı (1,29 milyon yerine), LCP başlığa (2,3 sn) kaydı. Örtüde görsel baştan
   TAM boyutta boyanır; LCP görselin kendisidir.                                                                                 */
:root { --perde-x: clamp(12px, 1.8vw, 30px); --perde-y: calc(var(--perde-x) * 1.75); }
/* ⚠ Örtü kabın altından --perde-y kadar TAŞAR (kap overflow:hidden): çokgenin pahlı alt-sağ köşesi dinlenmede kabın dışında
   kalır — yoksa o köşede altındaki görselin küçük bir üçgeni görünürdü (iletişim paneli, harita, 404 görseli; 20.10.2026
   birleştirmede ortaklaştı). Yükselirken pahlı uç yine görünür. data-pah="yok" → düz dikdörtgen (clip-path yok). */
.perde-ortu { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: calc(var(--perde-y) * -1); z-index: 6; pointer-events: none; background: var(--zemin);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--perde-y)), calc(100% - var(--perde-x)) 100%, 0 100%); }
[data-reveal="gorsel"][data-pah="yok"] { --perde-x: 0px; --perde-y: 0px; }
[data-reveal="gorsel"][data-pah="yok"] > .perde-ortu { clip-path: none; }
/* :where() → özgüllük 0: kabın kendi konumu (.slayt__kap absolute, .proje__kare relative …) her zaman kazanır */
:where(html.hareket [data-reveal="gorsel"]) { position: relative; overflow: hidden; }
html.hareket [data-reveal="gorsel"] > .perde-ortu { display: block; }
html.hareket [data-reveal="gorsel"]:not(:has(> .perde-ortu)) { opacity: 0; }   /* hareket.js örtüyü ekleyene dek (elle yazılmış kaplar) */
html.hareket [data-reveal="gorsel"].is-gorundu > .perde-ortu { animation: perde-kalk var(--sure-uzun) var(--ease-cikis) var(--gecikme, 0ms) both; }
@keyframes perde-kalk { from { transform: translateY(0); visibility: visible; } to { transform: translateY(-102%); visibility: hidden; } }
html.hareket [data-reveal="gorsel"]:not(.is-gorundu) .foto { scale: 1.14; }
html.hareket [data-reveal="gorsel"].is-gorundu .foto { animation: perde-yakin var(--sure-sahne) var(--ease-cikis) var(--gecikme, 0ms) backwards; }
@keyframes perde-yakin { from { scale: 1.14; } }

/* ── Metin: data-reveal="metin" (ana başlık blokları, künye) ─────────── */
html.hareket [data-reveal="metin"]:not(.is-gorundu) { opacity: 0; translate: 0 28px; }
html.hareket [data-reveal="metin"].is-gorundu { animation: metin-yuksel var(--sure-uzun) var(--ease-cikis) var(--gecikme, 0ms) backwards; }
@keyframes metin-yuksel { from { opacity: 0; translate: 0 28px; } }
/* ⚠ LCP (ölçüldü, Chrome 155, CPU 4×): metin LCP adayı opaklık/translate animasyonu BİTİNCE kaydedilir — 1100 ms'lik giriş
   LCP'yi ≈ 2,1 sn'ye çıkardı, 520 ms'de ≈ 1,25 sn. İlk ekranda görsel olmayan iç sayfaların başlığı (H1) bu yüzden kısa girer;
   hareket yine yukarı doğrudur. data-reveal-giris (açılış anı öğeleri: başlık bloğu, künye, giriş cümlesi) aynı kısa süreyi alır.
   (Anasayfa kendi sürelerini 10-anasayfa.css'te verir; LCP orada görseldir.) */
html.hareket h1[data-reveal="metin"].is-gorundu, html.hareket [data-reveal="metin"][data-reveal-giris].is-gorundu { animation-duration: 520ms; }

/* ── Çizgi: data-reveal="cizgi" — elemanın ÜST hairline'ı (::before) soldan sağa çizilir.
   Boş bir kutuya (class="cizgi", min-height: 1px) ya da bir liste satırına konur. ─────────────── */
[data-reveal="cizgi"] { position: relative; }
[data-reveal="cizgi"]::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--cizgi); transform-origin: 0 50%; pointer-events: none; }
[data-reveal="cizgi"].cizgi--g::before { background: var(--cizgi-g); }
.cizgi { display: block; min-height: 1px; }
html.hareket [data-reveal="cizgi"]:not(.is-gorundu)::before { transform: scaleX(0); }
html.hareket [data-reveal="cizgi"].is-gorundu::before { animation: cizgi-ac var(--sure-uzun) var(--ease-cikis) var(--gecikme, 0ms) backwards; }
@keyframes cizgi-ac { from { transform: scaleX(0); } }

/* ── Derz çizimi: data-reveal="derz" (y.derzSemasi) — zeminler belirir, derz çizgileri çizilir.
   Çizgiler ayrı <line>'lardır (--i sırası, --k kare sırası): scaleX / scaleY — stroke-dashoffset yok. ── */
.derz__cizgi { transform-box: fill-box; transform-origin: 0 50%; }
.derz__cizgi--d { transform-origin: 50% 0; }
html.hareket [data-reveal="derz"]:not(.is-gorundu) .derz__zemin { opacity: 0; }
html.hareket [data-reveal="derz"]:not(.is-gorundu) .derz__cizgi { transform: scaleX(0); }
html.hareket [data-reveal="derz"]:not(.is-gorundu) .derz__cizgi--d { transform: scaleY(0); }
html.hareket [data-reveal="derz"].is-gorundu .derz__zemin { animation: derz-zemin var(--sure-orta) var(--ease-yumusak) calc(var(--gecikme, 0ms) + var(--k, 0) * 110ms) backwards; }
html.hareket [data-reveal="derz"].is-gorundu .derz__cizgi { animation: derz-yatay 900ms var(--ease-cikis) calc(var(--gecikme, 0ms) + 420ms + var(--k, 0) * 110ms + var(--i, 0) * 70ms) backwards; }
html.hareket [data-reveal="derz"].is-gorundu .derz__cizgi--d { animation-name: derz-dikey; }
@keyframes derz-zemin { from { opacity: 0; } }
@keyframes derz-yatay { from { transform: scaleX(0); } }
@keyframes derz-dikey { from { transform: scaleY(0); } }

/* ── Paralaks: data-parallax="0.06" — kapın içindeki .foto kaydırmaya göre YAVAŞ akar.
   Üç ayrı özellik birbirini ezmez: translate (motor yazar, geçişsiz) · transform: scale(--ps)
   (örtme payı, motor yazar) · scale (perde / üzerine gelme). ≥ 1000 px + ince işaretçi + hareket
   serbest iken motor çalışır; aksi hâlde görsel kendi yerinde durur.                          */
[data-parallax] .foto { transform: scale(var(--ps, 1)); }

/* ── Genişleyen görsel: data-genis — başta yanlardan/üstten içeride, ekranın ortasına gelirken kenara açılır.
   --ilerleme (0–1) motorca yazılır. Görselin ölçeği de aynı değere bağlıdır (1.06 → 1) ve GEÇİŞSİZDİR. ── */
html.hareket [data-genis] {
  --ilerleme: 0;
  clip-path: inset(calc((1 - var(--ilerleme)) * var(--genis-ust, 9vh)) calc((1 - var(--ilerleme)) * var(--genis-yan, 7vw)) 0 calc((1 - var(--ilerleme)) * var(--genis-yan, 7vw)));
}
html.hareket [data-genis] .foto { scale: calc(1 + (1 - var(--ilerleme)) * .06); transition: opacity .4s var(--yavas); }

/* ── Görsel üzerine gelme: çok yavaş yaklaşma (≤ 1.035, 900 ms; yalnız fareyle). `.foto` geçişi 00-temel'de.
   Künye çizgisi = kart üzerine gelince künye adının altının çizilmesi (00-temel: .proje:hover .kunye__ac). ── */
/* Yalnız kartın DOĞRUDAN çocuğu olan kare yaklaşır; birden çok görsel taşıyan .proje (föy, diptik) kendi sayfa CSS'inde görsel başına açar. */
@media (hover: hover) and (pointer: fine) {
  .proje:hover > .proje__kare .foto { scale: 1.035; }
}

/* ── İmleç etiketi: data-imlec="İncele" — YALNIZ (hover:hover) and (pointer:fine) ─────────────────
   İşaretçiyi gecikmeli izleyen küçük mürekkep daire + etiket. Yerel imleç YALNIZ etiketli alanda
   gizlenir ve yalnız JS etiketi gösterirken (html.imlec-aktif). aria-hidden.                      */
.imlec { position: fixed; left: 0; top: 0; z-index: 800; width: 92px; height: 92px; margin: -46px 0 0 -46px; display: grid; place-items: center; border-radius: 50%; background: var(--murekkep); box-shadow: inset 0 0 0 1px rgba(238, 235, 229, .34), 0 6px 28px rgba(14, 15, 16, .38); color: var(--acik); pointer-events: none; opacity: 0; transition: opacity var(--sure-ince) var(--ease-yumusak); }
.imlec.is-acik { opacity: 1; }
.imlec__yazi { display: block; font: 500 14px/1 var(--sans); letter-spacing: .02em; opacity: 0; translate: 0 10px; transition: opacity var(--sure-orta) var(--ease-cikis), translate var(--sure-orta) var(--ease-cikis); }
.imlec.is-acik .imlec__yazi { opacity: 1; translate: 0 0; }
html.imlec-aktif [data-imlec]:hover, html.imlec-aktif [data-imlec]:hover * { cursor: none; }
html.isik-acik .imlec, html.menu-acik .imlec { display: none; }
@media not all and (hover: hover) and (pointer: fine) { .imlec { display: none; } }

/* ── Üst bilgi: tam ekran görselle açılan sayfada şeffaf (data-ust-seffaf) ──────────────────────
   site.js is-seffaf sınıfını bölüm üst bilginin altından çıkana dek tutar. Bulanıklık/gizlenme YOK.
   Arkadaki görselin üstünde koyu tarama bölüm tarafından verilir (.tarama-ust).                  */
.ust.is-seffaf { background-color: transparent; box-shadow: none; }
.ust.is-seffaf .menu__bag, .ust.is-seffaf .ust__tel, .ust.is-seffaf .btn--giris { text-shadow: 0 1px 16px rgba(14, 15, 16, .7); }
.tarama-ust::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 200px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(14, 15, 16, .66) 0%, rgba(14, 15, 16, .34) 46%, rgba(14, 15, 16, 0) 100%); }

/* ── Sayfa geçişi: çapraz solma (≤ 450 ms). Üst bilgi ve alt bilgi kendi adlarıyla sabit kalır.
   Desteklemeyen tarayıcıda hiçbir şey olmaz; azaltılmış harekette tanımlı bile değildir.            */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  [data-ust] { view-transition-name: ust; }
  .alt { view-transition-name: alt-bilgi; }
  ::view-transition-group(root) { animation-duration: 340ms; animation-timing-function: var(--ease-yumusak); }
}

/* ── Mobil menü: tam ekran; bağlantılar yukarı kayarak girer (aralık 55 ms ≤ 60) ─────────────────── */
@media (max-width: 999px) {
  .menu__liste li, .menu__alt > * { opacity: 0; translate: 0 26px; transition: opacity var(--sure-orta) var(--ease-cikis), translate 800ms var(--ease-cikis); }
  .menu-acik .menu__liste li { opacity: 1; translate: 0 0; transition-delay: calc(120ms + var(--i, 0) * 55ms); }
  .menu-acik .menu__alt > * { opacity: 1; translate: 0 0; transition-delay: calc(120ms + 6 * 55ms + var(--j, 0) * 55ms); }
  .menu__alt > :nth-child(2) { --j: 1; }
  .menu__alt > :nth-child(3) { --j: 2; }
  html:not(.js) .menu__liste li, html:not(.js) .menu__alt > * { opacity: 1; translate: none; }
}

/* ── Yazdırma · geri/ileri dönüşü (hareket-sessiz) · azaltılmış hareket ─────────────────────────── */
@media print {
  html.hareket [data-reveal], html.hareket [data-reveal] .foto, html.hareket [data-genis], html.hareket [data-genis] .foto { opacity: 1 !important; translate: none !important; scale: none !important; clip-path: none !important; animation: none !important; }
  html.hareket [data-reveal="cizgi"]::before, html.hareket [data-reveal="derz"] .derz__cizgi, html.hareket [data-reveal="derz"] .derz__zemin { transform: none !important; opacity: 1 !important; animation: none !important; }
  .imlec, .perde-ortu { display: none !important; }
}
/* Geri/ileri ile gelinen sayfada açılış girişi OYNATILMAZ: gösterim son durumda başlar. */
html.hareket-sessiz [data-reveal-giris], html.hareket-sessiz [data-reveal-giris]:not(.slayt__kap) .foto { animation: none !important; }   /* slaytın Ken Burns'ü geri/ileri dönüşünde de sürer */
html.hareket-sessiz [data-reveal-giris]:not(.is-gorundu) { opacity: 1 !important; translate: none !important; }
html.hareket-sessiz [data-reveal-giris] > .perde-ortu { display: none !important; }
html.hareket-sessiz [data-reveal-giris]:not(.is-gorundu) .foto { scale: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .imlec { display: none !important; }
  .bag::after { transition: none !important; }
}

/* ── kaynak/stil/06-isik.css ─────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════
   06-isik.css — ışık kutusu v2 (assets/js/isik.js: [data-galeri] → .isik). SAHİBİ: ışık kutusu.
   Derlemede ad sırasıyla site.css'e eklenir.

   Katmanlar (alttan üste): .isik__perde (mürekkep zemin) → .isik__sahne (görsel kareleri, tam ekran)
   → .isik__krom (üst şerit, oklar, küçük resim şeridi; boş yerleri tıklamayı SAHNEYE geçirir).
   Kapanışta aynı bileşenler .isik-hayalet içinde (aria-hidden, tıklanmaz) yolculuğu tamamlar;
   bu yüzden bileşen kuralları DÜZ seçicilerdir (.isik içine bağımlı değil).

   Hareket (YÜKSELİŞ): animasyonlar JS'te (Web Animations); burada yalnız durumlar ve küçük geçişler.
   Azaltılmış harekette hiçbir geçiş yoktur. Görseller .foto sınıfını TAŞIMAZ (hareket sisteminin
   belirme kuralları onlara dokunmasın): ton, .foto'dan okunup --isik-filtre olarak yazılır.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Değişkenler: ışık kutusu ve hayaleti aynı değerleri taşır ───────── */
.isik, .isik-hayalet {
  --metin: var(--acik); --metin-2: rgba(238, 235, 229, .82); --soluk: rgba(238, 235, 229, .68);
  --cizgi: rgba(238, 235, 229, .18); --cizgi-g: rgba(238, 235, 229, .42);
  --isik-yan: clamp(92px, 7.4vw, 150px);   /* sahne yan boşluğu (masaüstünde oklar burada durur) */
  --isik-ust: 98px;                        /* üst şerit payı */
  --isik-alt: 134px;                       /* alt şerit payı */
  color: var(--acik);
  font-family: var(--sans);
}
@media (max-width: 999px) {
  .isik, .isik-hayalet { --isik-yan: 16px; --isik-ust: 92px; --isik-alt: 118px; }
}
/* Yatay telefon / kısa pencere: şerit yok, oklar yanlarda, üst şerit ince. */
@media (max-height: 520px) and (orientation: landscape) {
  .isik, .isik-hayalet { --isik-yan: 84px; --isik-ust: 58px; --isik-alt: 22px; }
}

/* ── Kutu ───────────────────────────────────────────────────────────── */
.isik { position: fixed; inset: 0; z-index: 900; overflow: hidden; overscroll-behavior: none; }
.isik[hidden] { display: none; }
/* Kaydırma kilidi: çubuk kaybolunca düzen kaymasın diye genişliği JS ölçer (--isik-sb). */
html.isik-acik { overflow: hidden; padding-right: var(--isik-sb, 0px); overscroll-behavior: none; }

.isik__perde, .isik-hayalet__perde { position: absolute; inset: 0; background: var(--murekkep); }

/* ── Sahne: görsel kareleri tam ekran katmanda üst üste durur ─────────── */
.isik__sahne {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: var(--isik-ust) var(--isik-yan) var(--isik-alt);
  cursor: zoom-out; -webkit-user-select: none; user-select: none;
  touch-action: none; touch-action: pinch-zoom;       /* tek parmak bize (sürükleme), kıstırma tarayıcıya */
}
.isik__kare {
  grid-area: 1 / 1; position: relative; overflow: hidden; margin: 0;
  background-color: var(--renk, var(--murekkep-3, #2A2B2C)); transform-origin: 0 0; cursor: default;
}
.isik__kare.is-oynuyor { will-change: transform, clip-path, opacity; }
.isik__kare.is-giden { pointer-events: none; }
.isik__gorsel, .isik__on, .isik__eski {
  position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; max-width: none;
  object-fit: cover; -webkit-user-drag: none;
  filter: var(--isik-filtre, saturate(.92) contrast(1.02));
}
.isik__kare--eski .isik__gorsel, .isik__kare--eski .isik__on, .isik__kare--eski .isik__eski {
  filter: var(--isik-filtre-eski, saturate(.74) contrast(1) brightness(1.01));
}
/* Ana görsel inince ön görüntünün (küçük sürüm) üstüne yumuşakça belirir. */
.isik__gorsel { opacity: 0; transition: opacity .45s var(--ease-yumusak, cubic-bezier(.4, 0, .2, 1)); }
.isik__kare.is-hazir .isik__gorsel, .isik__eski { opacity: 1; }

/* ── Krom: üst şerit, oklar, küçük resim şeridi ─────────────────────── */
.isik__krom, .isik-hayalet .isik__krom { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; pointer-events: none; }
.isik__ust {
  grid-row: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px 24px;
  padding: 20px max(var(--kenar), env(safe-area-inset-right)) 0 max(var(--kenar), env(safe-area-inset-left));
}
.isik__kunye { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; min-width: 0; max-width: min(64%, 780px); padding: 0; }
.isik__kunye .kunye__ad {
  flex: 1 1 100%; margin: 0; color: var(--acik); text-wrap: balance;
  font: 360 clamp(25px, 2.4vw, 36px)/1.1 var(--serif); font-stretch: 90%; letter-spacing: -.012em;
}
.isik__kunye .kunye__tur, .isik__kunye .kunye__adres { flex: none; margin: 0; }
.isik__kunye .kunye__tur { color: var(--soluk); }
.isik__kunye .kunye__adres { font-size: 15px; line-height: 1.4; color: var(--metin-2); }

.isik__sag { flex: none; display: flex; align-items: center; gap: 14px; }
.isik__sayac { min-width: 3.6em; text-align: right; font: 500 15px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--metin-2); white-space: nowrap; }
.isik__kapat {
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-width: 48px; min-height: 48px; padding: 0 2px 0 14px;
  border: 0; border-radius: 0; background: none; color: var(--acik); font: 500 15px/1 var(--sans); cursor: pointer; pointer-events: auto;
}
.isik__kapat svg { width: 22px; height: 22px; flex: none; }
/* Bağlantı alt çizgisi soldan sağa çizilir (yalnız üzerine gelince; ek bilgi) */
.isik__kapat::after { content: ""; position: absolute; left: 14px; right: 2px; bottom: 11px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-cikis, cubic-bezier(.16, 1, .3, 1)); }

.isik__ok {
  display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 0;
  background: none; color: var(--soluk); cursor: pointer; pointer-events: auto;
  transition: color .25s, box-shadow .3s;
}
.isik__ok svg { width: 30px; height: 30px; }

/* Alt: oklar + küçük resim şeridi */
.isik__alt { grid-row: 3; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 max(var(--kenar), env(safe-area-inset-right)) max(26px, env(safe-area-inset-bottom)) max(var(--kenar), env(safe-area-inset-left)); }
.isik__serit {
  position: relative; display: flex; gap: 8px; min-width: 0; max-width: 100%; padding: 7px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; pointer-events: auto;
}
.isik__serit::-webkit-scrollbar { display: none; }
.isik__kucuk {
  flex: none; position: relative; display: block; height: 56px; aspect-ratio: var(--oran, 1.6); margin: 0; padding: 0;
  border: 0; border-radius: 0; background: var(--renk, var(--murekkep-3, #2A2B2C)); cursor: pointer; opacity: .5; transition: opacity .3s;
}
.isik__kucuk img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: saturate(.92) contrast(1.02); -webkit-user-drag: none; }
.isik__kucuk[aria-current="true"] { opacity: 1; outline: 1px solid var(--acik); outline-offset: 3px; }
.isik__kucuk:focus-visible, .isik__kucuk[aria-current="true"]:focus-visible { opacity: 1; outline: 2px solid var(--kirmizi); outline-offset: 3px; }

@media (hover: hover) and (pointer: fine) {
  .isik__kapat:hover::after { transform: scaleX(1); }
  .isik__ok:hover { color: var(--acik); box-shadow: inset 0 0 0 1px var(--cizgi-g); }
  .isik__kucuk:hover { opacity: .88; }
}

/* Masaüstü ve yatay telefon: oklar sahnenin yan boşluğunda, dikeyde görselin ortasında. */
@media (min-width: 1000px), (max-height: 520px) and (orientation: landscape) {
  .isik__ok { position: absolute; top: calc(var(--isik-ust) + (100% - var(--isik-ust) - var(--isik-alt)) / 2); margin-top: -28px; }
  .isik__ok--geri { left: calc(var(--isik-yan) / 2 - 28px); }
  .isik__ok--ileri { right: calc(var(--isik-yan) / 2 - 28px); }
}
/* Dar ekran: oklar alt şeritte, küçük resimlerin iki yanında; küçük resimler daha alçak (≥ 44 px). */
@media (max-width: 999px) {
  .isik__ok { width: 48px; height: 48px; flex: none; }
  .isik__ok svg { width: 26px; height: 26px; }
  .isik__alt { gap: 0; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .isik__serit { flex: 1 1 auto; justify-content: flex-start; gap: 6px; }
  .isik__kucuk { height: 46px; }
  .isik__kunye { max-width: 58%; }
  .isik__kunye .kunye__ad { font-size: clamp(22px, 6vw, 28px); }
}
@media (max-width: 480px) {
  .isik__ust { padding-top: 14px; gap: 12px; }
  .isik__sayac { min-width: 0; }
  .isik__kapat { padding-left: 8px; }
  .isik__kapat::after { left: 8px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .isik__serit { display: none; }
  .isik__alt { padding-bottom: 0; }
  .isik__ust { padding-top: 6px; }
  .isik__kunye .kunye__tur, .isik__kunye .kunye__adres { display: none; }
  .isik__kunye .kunye__ad { font-size: 22px; }
}

/* Tek görselli proje: oklar, sayaç ve şerit yok. */
.isik.is-tek .isik__ok, .isik.is-tek .isik__sayac, .isik.is-tek .isik__serit { display: none; }

/* ── Hayalet: kapanışta görüntünün yerine uçuşunu tamamlar (tıklanmaz) ── */
.isik-hayalet { position: fixed; inset: 0; z-index: 900; overflow: hidden; pointer-events: none; }
.isik-hayalet .isik__kare { position: fixed; }

/* JS yoksa tetikleyiciler etkisizdir (<button>): yanıltıcı "büyüt" imleci de gösterilmez. (Bağlantı olarak yazılırlarsa href çalışır.) */
html:not(.js) [data-galeri], html:not(.js) .proje .kunye__ac::after { cursor: auto; }

/* ── Erişilebilirlik ve uyum ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .isik *, .isik *::before, .isik *::after, .isik-hayalet * { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  .isik__ok, .isik__kapat { border: 1px solid ButtonText; }
  .isik__kucuk[aria-current="true"] { outline: 2px solid Highlight; }
  .isik__kare { border: 1px solid CanvasText; }
}
@media print { .isik, .isik-hayalet { display: none !important; } }

/* ── kaynak/stil/07-bilesenler.css ───────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════
   07-bilesenler.css — SAHİBİ: ÇEKİRDEK. Ortak HAREKETLİ bileşenlerin yapısı ve durumları
   (araclar/parcalar.js üretir · assets/js/hareket.js yönetir). Sayfa ajanları bu dosyaya
   DOKUNMAZ: ölçü/yerleşim ayarını kendi dosyalarında `.s-<sayfa> .bileşen` ile ezer.

   İçindekiler: slayt (y.slayt) · bölüm sahnesi (y.bolumSahnesi) · sahne (y.sahne) · rail (y.rail) ·
                dizin (y.dizin) · referans şeridi (y.referansSeridi)
   Hareket durumları (gizli başlangıç vb.) YALNIZ html.hareket altındadır; bileşenler JS'siz de okunur.
   ═══════════════════════════════════════════════════════════════════ */

button.bag { appearance: none; border: 0; background: none; padding: 0 0 5px; cursor: pointer; text-align: left; }
/* Dokunmatik / dar ekran: metin bağlantısı (.bag) en az 44 px yüksek hedef olur (WCAG 2.5.5; şartname § 7). Alan YUKARI ve AŞAĞI büyür,
   yazı ve alt çizgi yerinde kalır (negatif kenar boşluğu ile düzen değişmez). Sayfa CSS'inde yeniden yazılmaz. */
@media (pointer: coarse), (max-width: 999px) {
  .bag, button.bag { padding-top: 12px; padding-bottom: 17px; margin-top: -12px; margin-bottom: -17px; }
  .bag::before, .bag::after { bottom: 12px; }
}

/* ═══ SLAYT — data-slayt (anasayfa açılışı) ═════════════════════════════════════════════════════
   Yavaş çapraz geçiş + çok yavaş yaklaşma (Ken Burns ≤ %6). Otomatik oynatma 7 sn; DURAKLAT düğmesi
   zorunlu; odak / üzerine gelme / sekme gizlenince / ekran dışında kendiliğinden duraklar.
   Kap (.slayt) yükseklik verilmiş konumlu bir kutudur; .slayt__kap onu doldurur.                  */
.slayt { position: relative; --slayt-sure: 7000ms; }
.slayt__kap { position: absolute; inset: 0; width: 100%; max-width: 1800px; margin-inline: auto; overflow: hidden; background: var(--murekkep-2); }
@media (min-width: 1801px) {
  .slayt__kap::before { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
    background: linear-gradient(to right, var(--murekkep) 0, rgba(14, 15, 16, 0) 6%, rgba(14, 15, 16, 0) 94%, var(--murekkep) 100%); }
}
.slayt__slayt { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; }
.slayt__slayt.is-aktif { z-index: 2; opacity: 1; visibility: visible; transition: opacity var(--sure-sahne) var(--ease-yumusak); }
.slayt__slayt.is-cikis { z-index: 1; opacity: 1; visibility: visible; }
.slayt__slayt .foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: var(--kb, 50% 55%); }
.slayt__slayt.is-aktif .foto, .slayt__slayt.is-cikis .foto { animation: slayt-yakin 15s linear both; }
@keyframes slayt-yakin { from { scale: 1; } to { scale: 1.055; } }
/* ⚠ Açılış slaytının kabı data-reveal="gorsel"dır; genel perde yakınlaşması (05-hareket.css › perde-yakin, 1.14 → 1) özgüllükle Ken Burns'ü
   EZİYORDU: slaytta hiçbir yavaş yaklaşma çalışmıyordu (birleştirme testi animationName === 'slayt-yakin' ile yakaladı). Slayt
   görselinin TEK ölçek hareketi Ken Burns'tür; giriş zaten örtünün kalkışı + başlığın yükselişidir. */
html.hareket .slayt__kap[data-reveal="gorsel"]:not(.is-gorundu) .slayt__slayt .foto { scale: 1; }
html.hareket .slayt__kap[data-reveal="gorsel"].is-gorundu .slayt__slayt .foto { animation: none; }
html.hareket .slayt__kap[data-reveal="gorsel"].is-gorundu .slayt__slayt.is-aktif .foto,
html.hareket .slayt__kap[data-reveal="gorsel"].is-gorundu .slayt__slayt.is-cikis .foto { animation: slayt-yakin 15s linear both; }
/* Tarama: görsel üstündeki metin için ZORUNLU (sayfa --slayt-tarama ile değiştirebilir) */
.slayt__slayt::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--slayt-tarama, linear-gradient(to top, rgba(14, 15, 16, .8) 0%, rgba(14, 15, 16, .36) 30%, rgba(14, 15, 16, 0) 58%)); }
/* Slayt künyesi (sağ alt): ad · tür · adres(varsa) · İncele */
.slayt__kunye-kap { position: absolute; z-index: 3; left: 0; right: 0; bottom: var(--slayt-kunye-alt, 112px); pointer-events: none; }
.slayt__kunye { width: max-content; max-width: min(100%, 22em); margin-left: auto; text-align: right; pointer-events: auto; opacity: 0; translate: 0 16px; transition: opacity .4s var(--ease-yumusak), translate .4s var(--ease-yumusak); }
.slayt__slayt.is-aktif .slayt__kunye { opacity: 1; translate: 0 0; transition: opacity var(--sure-orta) var(--ease-yumusak) 500ms, translate 900ms var(--ease-cikis) 500ms; }
.slayt__ad { font: 400 clamp(24px, 2.2vw, 32px)/1.15 var(--serif); font-stretch: 100%; letter-spacing: -.006em; color: var(--metin); }
.slayt__kunye .kunye__tur { display: block; margin-top: 7px; color: var(--metin-2); }
.slayt__kunye .kunye__adres { display: block; margin-top: 4px; font-size: 15px; color: var(--metin-2); }
.slayt__ac { min-width: 44px; margin-top: 14px; color: var(--metin); }
/* Denetim: ilerleme çizgileri · önceki · duraklat · sonraki */
.slayt__denetim { position: absolute; z-index: 5; left: 0; right: 0; bottom: var(--slayt-denetim-alt, clamp(16px, 3.2vh, 32px)); pointer-events: none; }
.slayt__denetim-ic { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.slayt__cubuklar { display: flex; align-items: center; pointer-events: auto; }
.slayt__cubuk { position: relative; width: 56px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.slayt__cubuk::before, .slayt__dolgu { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; margin-top: -1px; }
.slayt__cubuk::before { background: var(--cizgi-g); }
.slayt__dolgu { background: var(--metin); transform: scaleX(0); transform-origin: 0 50%; }
.slayt__cubuk.is-onceki .slayt__dolgu { transform: scaleX(1); }
.slayt__cubuk.is-aktif .slayt__dolgu { animation: slayt-dolum var(--slayt-sure) linear forwards; }
@keyframes slayt-dolum { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.slayt.is-durak .slayt__cubuk.is-aktif .slayt__dolgu, .slayt.is-durak .slayt__slayt .foto { animation-play-state: paused; }
.slayt__dugmeler { display: flex; gap: 8px; pointer-events: auto; }
.slayt__dugme { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--cizgi-g); background: rgba(14, 15, 16, .34); color: var(--metin); cursor: pointer; transition: border-color var(--sure-ince), background-color var(--sure-ince); }
.slayt__dugme:hover { border-color: var(--metin); background: rgba(14, 15, 16, .6); }
.slayt__dugme svg { width: 20px; height: 20px; }
.slayt__dugme .ikon-oynat { display: none; }
.slayt__dugme[aria-pressed="true"] .ikon-oynat { display: block; }
.slayt__dugme[aria-pressed="true"] .ikon-duraklat { display: none; }
.slayt.is-sabit .slayt__dugme--duraklat { display: none; }
.slayt.is-tek .slayt__cubuklar, .slayt.is-tek .slayt__dugmeler { display: none; }
.slayt { touch-action: pan-y; }
@media (forced-colors: active) { .slayt__dolgu { background: Highlight; } .slayt__cubuk::before { background: CanvasText; } }
@media (prefers-reduced-motion: reduce) {
  /* Azaltılmış hareket: slayt ilk karede durur (otomatik oynatma yok); etkin çubuk dolu gösterilir */
  .slayt__cubuk.is-aktif .slayt__dolgu { transform: scaleX(1); }
  .slayt__slayt.is-aktif .slayt__kunye { opacity: 1; translate: 0 0; }
}

/* ═══ BÖLÜM SAHNESİ — y.bolumSahnesi (seçilmiş çalışma) ═════════════════════════════════════════
   Genişleyen görsel (data-genis) + paralaks + büyük serif proje adı + tür + görsel sayısı + "İncele"
   imleci. Tam genişlik YALNIZ A katmanı görsellerle; B katmanı çerçeveli (≤ 1180 px).
   Kartın tamamı ışık kutusunu açar: .bs__ac'ın ::after'ı kartı kaplar (.bs konumlu, metin kabı DEĞİL). */
.bs { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; }
.bs > * { grid-area: 1 / 1; }
.bs__kare { position: relative; align-self: stretch; justify-self: center; width: 100%; max-width: 1800px; height: clamp(460px, 82svh, 860px); overflow: hidden; background-color: var(--renk, var(--murekkep-2)); }
.bs__kare .foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bs__kare { --bs-yerel: linear-gradient(transparent, transparent); --bs-lin: linear-gradient(to top, rgba(14, 15, 16, .92) 0%, rgba(14, 15, 16, .68) 26%, rgba(14, 15, 16, .42) 44%, rgba(14, 15, 16, .16) 62%, rgba(14, 15, 16, 0) 78%); }
.bs__kare::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--bs-yerel), var(--bs-lin); }
/* Metnin durduğu köşe: yerel koyulaştırma (parlak cephede küçük etiket de okunsun); görselin öbür yanı açık kalır */
.bs--tam.bs--sol .bs__kare { --bs-yerel: radial-gradient(ellipse 58% 62% at 14% 82%, rgba(14, 15, 16, .5) 0%, rgba(14, 15, 16, .26) 55%, rgba(14, 15, 16, 0) 100%); }
.bs--tam.bs--sag .bs__kare { --bs-yerel: radial-gradient(ellipse 58% 62% at 86% 82%, rgba(14, 15, 16, .5) 0%, rgba(14, 15, 16, .26) 55%, rgba(14, 15, 16, 0) 100%); }
/* Tam genişlikte metin görselin üstündedir: yerel açık renk değişkenleri (bölüm hangi zeminde olursa olsun okunur) */
.bs--tam .bs__metin { --metin: var(--acik); --metin-2: rgba(238, 235, 229, .84); --soluk: rgba(238, 235, 229, .7); color: var(--acik); }
.bs__metin { align-self: end; z-index: 2; position: static; padding-bottom: clamp(26px, 4.2vw, 64px); pointer-events: none; }
.bs__metin > * { pointer-events: none; }
.bs__tur { margin-bottom: 14px; color: var(--metin-2); }
.bs--tam .bs__tur { color: var(--acik); text-shadow: 0 0 22px rgba(14, 15, 16, .75); }
.bs__ad { font: 300 clamp(46px, 8vw, 132px)/.98 var(--serif); font-stretch: 72%; letter-spacing: -.02em; color: var(--metin); text-wrap: balance; max-width: 11em; }
/* ⚠ data-reveal="metin" (translate / opacity animasyonu) düğmenin İÇİNDEKİ yazı kabındadır, h3'te DEĞİL: dönüşümlü bir atası olan öğe,
   mutlak konumlu torunları için yeni "kapsayan kutu" olur — .bs__ac::after kartı kaplar (inset: 0) ve h3 yükselirken (≈ 1,2 sn) yalnız
   başlığı kaplıyor, kartın görseline tıklama ışık kutusunu AÇMIYORDU (birleştirmede gerçek tarayıcıda yakalandı). */
.bs__ad-yazi { display: block; }
.bs__alt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; margin-top: clamp(16px, 2vw, 26px); font-size: 15px; color: var(--metin-2); }
.bs__ac { appearance: none; position: static; margin: 0; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: left; cursor: pointer; pointer-events: auto; }
.bs__ac::after { content: ""; position: absolute; inset: 0; z-index: 3; cursor: zoom-in; pointer-events: auto; }
.bs__ac:focus-visible { outline: none; }
.bs__ac:focus-visible::after { outline: 2px solid var(--kirmizi); outline-offset: -6px; }
.bs__incele { font: 500 15px/1.4 var(--sans); color: var(--metin); }
.bs__incele::after { content: ""; display: block; height: 1px; margin-top: 4px; background: currentColor; transform: scaleX(.34); transform-origin: 0 50%; transition: transform var(--sure-orta) var(--ease-cikis); }
.bs:hover .bs__incele::after, .bs:focus-within .bs__incele::after { transform: scaleX(1); }
/* Çerçeveli (B katmanı): metin solda, görsel sağda 8 sütun (≤ 1180 px). hiza:'sag' → görsel solda, metin sağda. */
.bs--cerceve { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--oluk); align-items: end; }
.bs--cerceve > .bs__kare { grid-area: 1 / 5 / 2 / 13; height: auto; max-width: 1180px; aspect-ratio: 16 / 9; justify-self: stretch; }
.bs--cerceve > .bs__metin { grid-area: 1 / 1 / 2 / 5; padding-bottom: 0; align-self: end; }
.bs--cerceve .bs__ad { font-size: clamp(40px, 5.6vw, 92px); }
.bs--cerceve.bs--sag > .bs__kare { grid-column: 1 / 9; }
.bs--cerceve.bs--sag > .bs__metin { grid-column: 9 / 13; }
.bs--cerceve .bs__kare::after { background: linear-gradient(to top, rgba(14, 15, 16, .18) 0%, rgba(14, 15, 16, 0) 40%); }
/* Tam genişlikte hiza:'sag' → metin sağa yaslanır */
.bs--tam.bs--sag .bs__metin { text-align: right; }
.bs--tam.bs--sag .bs__ad { margin-left: auto; }
.bs--tam.bs--sag .bs__alt { justify-content: flex-end; }
@media (max-width: 999px) {
  .bs { display: block; }
  .bs__kare, .bs--cerceve > .bs__kare { height: auto; aspect-ratio: 4 / 3; max-width: none; }
  .bs__kare::after { display: none; }
  .bs__metin, .bs--cerceve > .bs__metin { padding: 22px 0 0; text-align: left; }
  .bs--tam.bs--sag .bs__metin { text-align: left; }
  .bs--tam.bs--sag .bs__ad { margin-left: 0; }
  .bs--tam.bs--sag .bs__alt { justify-content: flex-start; }
  /* Telefonda metin görselin ALTINDADIR: bölümün kendi zemin renkleri geçerli */
  .bs--tam .bs__metin { --metin: inherit; --metin-2: inherit; --soluk: inherit; color: inherit; }
  .bs__ad, .bs--cerceve .bs__ad { font-size: clamp(40px, 11vw, 64px); font-stretch: 80%; }
}

/* ═══ SAHNE — data-sahne (kaydırmayla anlatı) ═════════════════════════════════════════════════════
   Sol kolonda YAPIŞKAN görsel sahnesi (görseller üst üste, 700 ms çapraz geçiş), sağ kolonda adımlar.
   Adım ekranın %45'ini geçince ilgili görsel öne çıkar; adım başlığı yumuşakça vurgulanır.
   DOM: .sahne__izgara > figure.sahne__gorsel[data-sahne-gorsel]… + article.sahne__metin[data-sahne-adim]…
   (görseller dekoratif kopya: aria-hidden; adımlar normal içerik). < 1000 px / JS yok / azaltılmış hareket:
   sahne devre dışı — görsel her adımın BAŞINDA satır içi (CSS `order` ile; aynı DOM, tek görsel).      */
.sahne__izgara { display: flex; flex-direction: column; }
.sahne__gorsel { order: calc(var(--sira, 1) * 2 - 1); margin: 0 0 24px; }
.sahne__metin { order: calc(var(--sira, 1) * 2); margin-bottom: clamp(48px, 9vw, 72px); }
.sahne__metin:last-child { margin-bottom: 0; }
.sahne__kare { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background-color: var(--renk, var(--murekkep-3)); }
.sahne__kare > .foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sahne__kare > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sahne__baslik { font: 400 clamp(32px, 3.4vw, 52px)/1.08 var(--serif); font-stretch: 86%; letter-spacing: -.012em; color: var(--metin); }
.sahne__metin .giris-metni, .sahne__ozet { margin-top: 18px; max-width: 30em; }
.sahne__metin .madde-liste { margin-top: 24px; }
.sahne__metin .eylem { margin-top: 28px; }
@media (min-width: 1000px) {
  html.hareket .sahne__izgara { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--oluk); grid-auto-rows: auto; }
  html.hareket .sahne__gorsel { order: 0; grid-column: 1 / span 5; grid-row: 1 / span var(--n, 4); position: sticky; top: calc(var(--ust-h) + clamp(16px, 5vh, 56px)); align-self: start; height: min(74svh, 700px); margin: 0; opacity: 0; z-index: 1; transition: opacity 700ms var(--ease-yumusak); }
  html.hareket .sahne__gorsel.is-aktif { opacity: 1; z-index: 2; }
  html.hareket .sahne__kare { height: 100%; aspect-ratio: auto; }
  html.hareket .sahne__metin { order: 0; grid-column: 7 / -1; grid-row: var(--sira, 1); display: flex; flex-direction: column; justify-content: center; min-height: 78svh; margin: 0; padding-block: clamp(32px, 6vh, 72px); }
  html.hareket .sahne__baslik { opacity: .5; transition: opacity var(--sure-orta) var(--ease-yumusak); }
  html.hareket .sahne__metin.is-aktif .sahne__baslik { opacity: 1; }
}

/* ═══ RAIL — data-rail (yatay şerit) ═══════════════════════════════════════════════════════════════
   scroll-snap · fare ile sürükleme (masaüstü) · ok düğmeleri (uçlarda disabled) · odakta ←/→ · ince ilerleme
   çizgisi. Kartlar [data-galeri] açar. Süzgeç kartları gizlediğinde ilerleme çizgisi güncellenir.      */
.rail { position: relative; }
.rail__bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.rail__baslik { font: 400 clamp(28px, 2.6vw, 38px)/1.12 var(--serif); font-stretch: 90%; letter-spacing: -.01em; color: var(--metin); }
.rail__not { margin-top: 10px; max-width: 32em; font-size: 15px; line-height: 1.55; color: var(--metin-2); }
.rail__denetim { display: flex; gap: 8px; flex: none; }
.rail__dugme { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--cizgi-g); background: none; color: var(--metin); cursor: pointer; transition: border-color var(--sure-ince), opacity var(--sure-ince); }
.rail__dugme:hover:not(:disabled) { border-color: var(--metin); }
.rail__dugme:disabled { opacity: .35; cursor: default; }
.rail__dugme svg { width: 22px; height: 22px; }
.rail__goruntu { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--kenar) * -1); padding-inline: var(--kenar); scroll-padding-inline: var(--kenar); cursor: grab; -webkit-overflow-scrolling: touch; }
.rail__goruntu::-webkit-scrollbar { display: none; }
.rail__goruntu:focus-visible { outline-offset: -2px; }
.rail__liste { display: flex; gap: var(--rail-aralik, var(--oluk)); width: max-content; padding-block: 4px; }
.rail__oge { flex: none; width: var(--rail-oge, clamp(210px, 21vw, 290px)); scroll-snap-align: start; }
.rail__ilerleme { position: relative; height: 1px; margin-top: 28px; background: var(--cizgi); }
.rail__ilerleme-cubuk { position: absolute; inset: 0; background: var(--metin); transform: scaleX(.3); transform-origin: 0 50%; }
.rail.is-suruklenior .rail__goruntu { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.rail.is-suruklenior * { pointer-events: none; }
.rail.is-tek .rail__denetim, .rail.is-tek .rail__ilerleme { visibility: hidden; }
@media (hover: none), (pointer: coarse) { .rail__goruntu { cursor: auto; } }

/* ═══ DİZİN — data-dizin (y.dizin; proje dizini) ═══════════════════════════════════════════════════
   Büyük serif adlar + tür (+ adres doluysa). NUMARA YOK. Masaüstünde (hover + ince işaretçi) üzerine
   gelince imleci izleyen önizleme görseli; dokunmatikte satırda küçük kare. Tıklama ışık kutusunu açar. */
.dizin { margin: 0; }
.dizin__satir { position: relative; display: flex; align-items: center; gap: 16px; }
.dizin__ac { appearance: none; flex: 1 1 auto; width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--oluk); align-items: baseline; padding: clamp(18px, 2.2vw, 30px) 0 clamp(20px, 2.4vw, 32px); border: 0; background: none; color: var(--metin); font: inherit; text-align: left; cursor: pointer; }
.dizin__ac::after { content: ""; position: absolute; inset: 0; z-index: 1; cursor: zoom-in; }
.dizin__ac:focus-visible { outline: none; }
.dizin__ac:focus-visible::after { outline: 2px solid var(--kirmizi); outline-offset: 2px; }
.dizin__ad { grid-column: 1 / span 7; font: 300 clamp(34px, 4.4vw, 68px)/1.04 var(--serif); font-stretch: 76%; letter-spacing: -.016em; color: var(--metin); transition: opacity .45s var(--ease-yumusak); }
.dizin__bilgi { grid-column: 8 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; row-gap: 5px; align-self: center; }
.dizin__tur { font: 500 12px/1.5 var(--genis); letter-spacing: .15em; text-transform: uppercase; color: var(--soluk); }
.dizin__sayi { font-size: 15px; color: var(--soluk); white-space: nowrap; }
.dizin__adres { grid-column: 1 / -1; font-size: 15px; line-height: 1.5; color: var(--metin-2); }
.dizin__kare { position: relative; flex: none; order: -1; width: 88px; aspect-ratio: 1; margin: 0; overflow: hidden; pointer-events: none; background-color: var(--renk, var(--tas-2)); }
.dizin__kare .foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Telefon / dokunmatik: satırda küçük kare (adın solunda), ad ve tür yan yana değil alt alta */
@media (max-width: 999px), (hover: none), (pointer: coarse) {
  .dizin__ac { grid-template-columns: minmax(0, 1fr); row-gap: 6px; padding: 18px 0 20px; }
  .dizin__ad, .dizin__bilgi { grid-column: 1 / -1; }
  .dizin__ad { font-size: clamp(30px, 8.4vw, 44px); font-stretch: 82%; }
  .dizin__bilgi { grid-template-columns: minmax(0, 1fr) auto; }
}
/* Masaüstü + ince işaretçi: önizleme imleci izler (hareket.js konumlar; .is-aktif satırda görünür) */
@media (hover: hover) and (pointer: fine) and (min-width: 1000px) {
  .dizin__satir { display: block; }
  .dizin__kare { position: fixed; left: 0; top: 0; z-index: 60; order: 0; width: clamp(260px, 23vw, 360px); aspect-ratio: 4 / 3; translate: -200vw -200vh; visibility: hidden; clip-path: inset(100% 0 0 0); transition: clip-path 560ms var(--ease-cikis), visibility 0s linear 560ms; }
  .dizin__satir.is-aktif .dizin__kare { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path 640ms var(--ease-cikis), visibility 0s; }
  .dizin.is-uzerinde .dizin__satir:not(.is-aktif) .dizin__ad { opacity: .3; }
  .dizin__kare .foto { scale: 1.14; }
  .dizin__satir.is-aktif .dizin__kare .foto { scale: 1; transition-duration: 900ms; }
}

/* ═══ REFERANS ŞERİDİ — y.referansSeridi (yalnız adlar, ince çizgiler) ═════════════════════════════ */
.referans-seridi { margin: 0; }
.referans-seridi li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 28px; padding: clamp(18px, 1.9vw, 26px) 0 clamp(18px, 2vw, 28px); }
.referans-seridi__ad { font: 400 clamp(26px, 3vw, 44px)/1.12 var(--serif); font-stretch: 88%; letter-spacing: -.01em; color: var(--metin); }
.referans-seridi__tur { font-size: 15px; line-height: 1.4; color: var(--soluk); text-align: right; }
@media (max-width: 699px) {
  .referans-seridi li { grid-template-columns: minmax(0, 1fr); }
  .referans-seridi__tur { text-align: left; }
}

/* ═══ JAVASCRIPT YOKKEN: işlevsiz kalacak denetimler gizlenir (metin ve bağlantılar kalır) ════════════
   Slayt düğmeleri / çubukları / "İncele" (ışık kutusu) JS'siz hiçbir şey yapmaz; görünür bırakmak yanıltır. */
html:not(.js) .slayt__denetim, html:not(.js) .slayt__ac, html:not(.js) .bs__incele { display: none; }
html:not(.js) .bs__ac::after { cursor: auto; }

/* ── kaynak/stil/10-anasayfa.css ─────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════
   10-anasayfa.css — SAHİBİ: ÇEKİRDEK (anasayfa, v4). Yalnız body.s-anasayfa içindeki bölümler:
   1 açılış · 2 grup · 3 seçilmiş çalışmalar · 4 iki kol · 5 proje dizini · 6 hizmetler (sahne) ·
   7 seramik · 8 referanslar · 9 iletişim.
   Ortak bileşenlerin yapısı 07-bilesenler.css'te; burada yalnız anasayfaya özgü ölçü ve yerleşim vardır.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ 1 · AÇILIŞ ═════════════════════════════════════════════════════════════════════════════════
   100svh slayt; üst bilgi şeffaf (hero altına girer: negatif üst boşluk). Kap 1800 px'te biter, yanlar mürekkebe erir.
   Masaüstü: H1 sol altta (dar kesim, ölçekte dramatik), slayt künyesi + denetim sağ altta.
   Telefon/tablet: görsel üstte, başlık ve düğme altta mürekkep şeritte (görselin tarama kenarına biner).        */
.s-anasayfa .acilis { position: relative; isolation: isolate; height: 100svh; min-height: 580px; max-height: 1260px; margin-top: calc(var(--ust-h) * -1); overflow: hidden; background: var(--murekkep); }
.s-anasayfa .acilis__slayt { position: absolute; inset: 0;
  --slayt-kunye-alt: clamp(112px, 15vh, 150px);
  --slayt-tarama:
    linear-gradient(to top, var(--murekkep) 0%, rgba(14, 15, 16, .9) 11%, rgba(14, 15, 16, .6) 33%, rgba(14, 15, 16, .22) 52%, rgba(14, 15, 16, 0) 72%),
    radial-gradient(ellipse 64% 72% at 18% 68%, rgba(14, 15, 16, .6) 0%, rgba(14, 15, 16, .36) 52%, rgba(14, 15, 16, 0) 100%),
    linear-gradient(to right, rgba(14, 15, 16, .7) 0%, rgba(14, 15, 16, .52) 30%, rgba(14, 15, 16, .2) 56%, rgba(14, 15, 16, 0) 74%),
    linear-gradient(to bottom, rgba(14, 15, 16, .86) 0%, rgba(14, 15, 16, .6) 7%, rgba(14, 15, 16, .26) 14%, rgba(14, 15, 16, 0) 27%); }
/* ⚠ Görsel kabı 1 px KISA: Chrome, görünür alanı viewport'u TAM kaplayan görseli "arka plan" sayıp LCP adayı yapmaz (ölçüldü) —
   o durumda LCP açılış görseli değil başlık metni (yazı tipine bağlı, ~2.3 sn) olurdu. Son piksel satırı .acilis'in mürekkebidir. */
.s-anasayfa .acilis .slayt__kap { bottom: 1px; }
.s-anasayfa .acilis__ust { position: absolute; left: 0; right: 0; bottom: clamp(26px, 5vh, 52px); z-index: 4; pointer-events: none; }
.s-anasayfa .acilis__baslik { max-width: 62em; }
.s-anasayfa .acilis__baslik > * { pointer-events: auto; }
.s-anasayfa .acilis__etiket { white-space: nowrap; margin-bottom: clamp(14px, 2.2vh, 24px); color: var(--acik); text-shadow: 0 0 22px rgba(14, 15, 16, .8); }
.s-anasayfa .acilis__h1 { font: 300 clamp(60px, 10.2vw, 156px)/.9 var(--serif); font-stretch: 66%; letter-spacing: -.024em; color: var(--acik); }
.s-anasayfa .acilis__satir { display: block; white-space: nowrap; }
.s-anasayfa .acilis__alt { display: flex; align-items: center; gap: 36px; min-height: 80px; margin-top: clamp(22px, 3.4vh, 40px); }   /* min-height: yazı tipi değişince satır sayısı oynasa da blok kaymaz (CLS) */
.s-anasayfa .acilis__giris { max-width: 31em; font-size: 17.5px; line-height: 1.5; color: rgba(238, 235, 229, .92); text-shadow: 0 0 18px rgba(14, 15, 16, .6); }
/* Giriş (≤ 1.4 sn, perde başladığı andan): örtü 1200 ms iç-dış yumuşatmayla kalkar (açılışa ağırlık verir); etiket 360 / H1 420 /
   alt blok 540 ms gecikmeyle 800 ms'de yükselir (HTML'de gecikmeler) → en geç 1340 ms. Denetim 520 ms + 800 ms. */
html.hareket .s-anasayfa .acilis .slayt__kap.is-gorundu > .perde-ortu { animation-duration: 1200ms; animation-timing-function: var(--ease-gecis); }
html.hareket .s-anasayfa .acilis [data-reveal-giris].is-gorundu[data-reveal="metin"] { animation-duration: 800ms; }
html.hareket:not(.hareket-sessiz) .s-anasayfa .acilis .slayt__denetim { animation: metin-yuksel 800ms var(--ease-cikis) 520ms backwards; }

/* ═══ 2 · GRUP CÜMLESİ ══════════════════════════════════════════════════════════════════════════ */
.s-anasayfa .grup { padding: calc(var(--bolum) * 1.1) 0 var(--bolum); }
.s-anasayfa .grup__izgara { align-items: end; row-gap: 48px; }
.s-anasayfa .grup__giris { grid-column: 1 / span 8; }
.s-anasayfa .grup__etiket { margin-bottom: clamp(22px, 2.6vw, 36px); }
.s-anasayfa .grup__soz { font: 300 clamp(36px, 4.9vw, 76px)/1.07 var(--serif); font-stretch: 78%; letter-spacing: -.016em; color: var(--metin); max-width: 15.5em; text-wrap: balance; }
.s-anasayfa .grup__kunye { grid-column: 10 / -1; padding-bottom: 8px; }

/* ═══ 3 · SEÇİLMİŞ ÇALIŞMALAR ═══════════════════════════════════════════════════════════════════ */
.s-anasayfa .calisma { padding: clamp(96px, 11vw, 176px) 0 clamp(88px, 10vw, 160px); overflow-x: clip; }
.s-anasayfa .calisma__bas { align-items: end; row-gap: 14px; margin-bottom: clamp(48px, 6vw, 96px); }
.s-anasayfa .calisma__etiket { grid-column: 1 / span 4; }
.s-anasayfa .calisma__giris { grid-column: 5 / span 5; max-width: 32em; font-size: 16px; line-height: 1.6; color: var(--metin-2); }
.s-anasayfa .calisma__hepsi { grid-column: 10 / -1; justify-self: end; white-space: nowrap; }
.s-anasayfa .calisma > .bs { margin-top: clamp(96px, 11vw, 200px); }

/* ═══ 4 · İKİ KOL ═══════════════════════════════════════════════════════════════════════════════ */
.s-anasayfa .kollar { padding: var(--bolum) 0; }
.s-anasayfa .kollar__izgara { row-gap: 72px; align-items: start; }
.s-anasayfa .kol--insaat { grid-column: 1 / span 7; }
.s-anasayfa .kol--seramik { grid-column: 9 / -1; margin-top: clamp(0px, 9vw, 150px); }
.s-anasayfa .kol__etiket { margin-bottom: 20px; }
.s-anasayfa .kol__ad { font: 300 clamp(72px, 11.4vw, 176px)/.92 var(--serif); font-stretch: 66%; letter-spacing: -.026em; color: var(--metin); }
.s-anasayfa .kol--seramik .kol__ad { font-size: clamp(54px, 7.2vw, 112px); font-stretch: 70%; }
.s-anasayfa .kol__govde { margin-top: clamp(26px, 3.4vw, 48px); }
.s-anasayfa .kol__metin { max-width: 31em; font-size: 17px; }
.s-anasayfa .kol__kapsam { margin-top: 30px; max-width: 34em; }
.s-anasayfa .kol__kapsam li { padding: 13px 0 14px; font-size: 16px; line-height: 1.4; color: var(--metin-2); }
.s-anasayfa .kol__veri { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 30px; padding-top: 16px; font-size: 15px; color: var(--metin-2); }
.s-anasayfa .kol__veri span + span::before { content: "·"; margin-right: 18px; color: var(--soluk); }
.s-anasayfa .kol__bag { margin-top: 30px; }

/* ═══ 5 · PROJE DİZİNİ ══════════════════════════════════════════════════════════════════════════ */
.s-anasayfa .dizin-bolum { padding: var(--bolum) 0 calc(var(--bolum) * .9); }
.s-anasayfa .dizin-bolum__bas { align-items: end; row-gap: 14px; margin-bottom: clamp(40px, 5vw, 72px); }
.s-anasayfa .dizin-bolum__baslik { grid-column: 1 / span 6; font: 300 clamp(44px, 6vw, 92px)/1 var(--serif); font-stretch: 76%; letter-spacing: -.02em; color: var(--metin); }
.s-anasayfa .dizin-bolum__giris { grid-column: 8 / -1; max-width: 27em; padding-bottom: 8px; font-size: 16px; line-height: 1.6; color: var(--metin-2); }
.s-anasayfa .dizin { border-bottom: 1px solid var(--cizgi); }
.s-anasayfa .dizin-bolum__bag { margin-top: 40px; }

/* ═══ 6 · HİZMETLER (sahne) ═════════════════════════════════════════════════════════════════════ */
.s-anasayfa .hizmet { padding: var(--bolum) 0 calc(var(--bolum) * .9); }
.s-anasayfa .hizmet__bas { align-items: end; row-gap: 20px; margin-bottom: clamp(48px, 6vw, 96px); }
.s-anasayfa .hizmet__baslik { grid-column: 1 / span 6; font: 300 clamp(44px, 6vw, 92px)/1 var(--serif); font-stretch: 76%; letter-spacing: -.02em; color: var(--metin); }
.s-anasayfa .hizmet__giris { grid-column: 7 / -1; max-width: 31em; padding-bottom: 6px; }
.s-anasayfa .hizmet__son { margin-top: clamp(32px, 4vw, 64px); }

/* ═══ 7 · SERAMİK ═══════════════════════════════════════════════════════════════════════════════ */
.s-anasayfa .seramik { padding: var(--bolum) 0; }
.s-anasayfa .seramik .izgara { align-items: center; row-gap: 56px; }
.s-anasayfa .seramik__metin { grid-column: 1 / span 5; }
.s-anasayfa .seramik__baslik { margin-top: 22px; font: 300 clamp(44px, 5.8vw, 88px)/1 var(--serif); font-stretch: 76%; letter-spacing: -.02em; color: var(--metin); }
.s-anasayfa .seramik__giris { margin-top: 26px; }
.s-anasayfa .seramik__eylem { margin-top: 36px; }
.s-anasayfa .seramik__derz { grid-column: 7 / -1; }
.s-anasayfa .seramik__ara { margin-bottom: 22px; }
@media (min-width: 1000px) {
  /* Derz şeması uzundur: metin kolonu yapışkan kalır, çizim akarken okunur */
  .s-anasayfa .seramik .izgara { align-items: start; }
  .s-anasayfa .seramik__metin { position: sticky; top: calc(var(--ust-h) + clamp(32px, 7vh, 80px)); }
}
.s-anasayfa .seramik__sema .derz__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px var(--oluk); }
.s-anasayfa .seramik__sema .derz__alt { margin-top: 12px; }

/* ═══ 8 · REFERANSLAR ═══════════════════════════════════════════════════════════════════════════ */
.s-anasayfa .referans { padding: var(--bolum) 0; }
.s-anasayfa .referans .izgara { align-items: start; row-gap: 36px; }
.s-anasayfa .referans__bas { grid-column: 1 / span 4; }
.s-anasayfa .referans__baslik { font: 300 clamp(38px, 4.2vw, 64px)/1.04 var(--serif); font-stretch: 80%; letter-spacing: -.016em; color: var(--metin); }
.s-anasayfa .referans__bag { margin-top: 24px; }
.s-anasayfa .referans__liste { grid-column: 6 / -1; }

/* ═══ 9 · İLETİŞİM ══════════════════════════════════════════════════════════════════════════════ */
.s-anasayfa .iletisim { padding: var(--bolum) 0 clamp(40px, 5vw, 72px); }
.s-anasayfa .iletisim .izgara { align-items: end; row-gap: 48px; }
.s-anasayfa .iletisim__sol { grid-column: 1 / span 6; }
.s-anasayfa .iletisim__sol .etiket { margin-bottom: 24px; }
.s-anasayfa .iletisim__baslik { font: 300 clamp(48px, 6.4vw, 100px)/1 var(--serif); font-stretch: 76%; letter-spacing: -.02em; color: var(--metin); }
.s-anasayfa .iletisim__adres { margin-top: 30px; font-size: 17px; line-height: 1.6; color: var(--govde); }
.s-anasayfa .iletisim__giris { margin-top: 22px; max-width: 28em; }
.s-anasayfa .iletisim__sag { grid-column: 8 / -1; }
.s-anasayfa .iletisim__liste { border-bottom: 1px solid var(--cizgi); }
.s-anasayfa .iletisim__liste > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px 20px; align-items: baseline; padding: 20px 0 21px; }
.s-anasayfa .iletisim__liste dd { font-size: 17px; }
.s-anasayfa .iletisim__liste a { text-decoration: none; }
.s-anasayfa .iletisim__liste a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.s-anasayfa .iletisim__tel { display: block; font: 400 clamp(28px, 2.5vw, 38px)/1.25 var(--serif); font-stretch: 100%; letter-spacing: -.004em; white-space: nowrap; }
.s-anasayfa .iletisim__eylem { margin-top: 36px; }
@media (pointer: coarse), (max-width: 999px) {
  .s-anasayfa .iletisim__liste dd a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ═══ Duyarlı ═══════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .s-anasayfa .acilis__alt { gap: 28px; }
  /* Künye sütunu 3/12'de çok dardı ("Erenler / Sakarya" bölünmez boşluklu → 1000 px'te sayfa 11 px taşıyordu) */
  .s-anasayfa .grup__giris { grid-column: 1 / span 7; }
  .s-anasayfa .grup__kunye { grid-column: 8 / -1; }
}
@media (max-width: 999px) {
  /* ── Açılış: görsel üstte; başlık, giriş ve düğme altta; denetim en altta ── */
  .s-anasayfa .acilis { height: auto; min-height: 100svh; max-height: none; display: flex; flex-direction: column; }
  .s-anasayfa .acilis__slayt { position: relative; inset: auto; flex: 1 0 auto; display: flex; flex-direction: column;
    --gorsel-y: clamp(380px, 58svh, 640px);
    --slayt-kunye-alt: 76px;
    --slayt-tarama:
      linear-gradient(to top, var(--murekkep) 0%, rgba(14, 15, 16, .8) 18%, rgba(14, 15, 16, .42) 32%, rgba(14, 15, 16, 0) 50%),
      linear-gradient(to bottom, rgba(14, 15, 16, .78) 0%, rgba(14, 15, 16, .34) 16%, rgba(14, 15, 16, 0) 32%); }
  .s-anasayfa .acilis .slayt__kap { position: relative; inset: auto; bottom: auto; flex: none; height: var(--gorsel-y); }
  .s-anasayfa .acilis__ust { position: relative; left: auto; right: auto; bottom: auto; margin-top: 0; padding-top: 8px; padding-bottom: 34px; }
  .s-anasayfa .acilis__h1 { font-size: clamp(54px, 16vw, 112px); font-stretch: 68%; line-height: .94; }
  .s-anasayfa .acilis__satir, .s-anasayfa .acilis__etiket { white-space: normal; }
  .s-anasayfa .acilis__alt { min-height: 0; }
  .s-anasayfa .acilis__alt { flex-direction: column; align-items: stretch; gap: 20px; margin-top: 24px; }
  .s-anasayfa .acilis__alt .dugme { order: 2; }
  .s-anasayfa .acilis__giris { max-width: 30em; font-size: 17px; }
  /* Denetim görselin ALT kenarında (ilk ekranda görünür); künye bunun hemen üstünde, sola yaslı */
  .s-anasayfa .acilis .slayt__denetim { position: absolute; top: calc(var(--gorsel-y) - 62px); bottom: auto; left: 0; right: 0; }
  .s-anasayfa .acilis .slayt__denetim-ic { justify-content: space-between; }
  .s-anasayfa .acilis .slayt__kunye { margin-left: 0; margin-right: auto; text-align: left; }
  .s-anasayfa .acilis .slayt__cubuk { width: 44px; }
  .s-anasayfa .acilis .slayt__ad { font-size: 24px; }

  /* ── Grup ── */
  .s-anasayfa .grup__giris, .s-anasayfa .grup__kunye { grid-column: 1 / -1; }
  .s-anasayfa .grup__soz { font-size: clamp(32px, 7.4vw, 52px); font-stretch: 82%; }

  /* ── Çalışmalar ── */
  .s-anasayfa .calisma__etiket, .s-anasayfa .calisma__giris { grid-column: 1 / -1; }
  .s-anasayfa .calisma__hepsi { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }
  .s-anasayfa .calisma > .bs { margin-top: 72px; }
  .s-anasayfa .calisma > .bs .bs__metin { padding-inline: var(--kenar); }

  /* ── İki kol ── */
  .s-anasayfa .kol--insaat, .s-anasayfa .kol--seramik { grid-column: 1 / -1; margin-top: 0; }
  .s-anasayfa .kol__ad { font-size: clamp(64px, 19vw, 120px); }
  .s-anasayfa .kol--seramik .kol__ad { font-size: clamp(54px, 15vw, 96px); }

  /* ── Dizin / hizmet / seramik / referans / iletişim ── */
  .s-anasayfa .dizin-bolum__baslik, .s-anasayfa .dizin-bolum__giris { grid-column: 1 / -1; }
  .s-anasayfa .hizmet__baslik, .s-anasayfa .hizmet__giris { grid-column: 1 / -1; }
  .s-anasayfa .seramik__metin, .s-anasayfa .seramik__derz { grid-column: 1 / -1; }
  .s-anasayfa .referans__bas, .s-anasayfa .referans__liste { grid-column: 1 / -1; }
  .s-anasayfa .iletisim__sol, .s-anasayfa .iletisim__sag { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .s-anasayfa .acilis__etiket { font-size: 12px; }
  .s-anasayfa .kol__veri { flex-direction: column; gap: 2px; }
  .s-anasayfa .kol__veri span + span::before { content: none; }
  .s-anasayfa .seramik__sema .derz__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .s-anasayfa .iletisim__liste > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .s-anasayfa .iletisim__tel { font-size: clamp(26px, 8vw, 34px); }
}

/* ── kaynak/stil/20-kurumsal.css ─────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════
   20-kurumsal.css — SAHİBİ: kurumsal sayfa ajanı (v4). Kapsam: kurumsal.html (body.s-kurumsal).
   Kurallar: seçicileri .s-kurumsal ile daraltın; ortak bileşenler (00-temel, 05-hareket, 07-bilesenler) DEĞİŞMEZ,
   gerekirse burada ezilir. Alanlar: araclar/sayfa-kurumsal.js · metin: kaynak/icerik/kurumsal.json.

   Kurumsal, anasayfanın açılışını tekrar etmeyen sakin bir "yıllık rapor"dur. Altı bölüm:
     1 sayfa başı (kâğıt) · 2 görsel (A katmanı, genişleyen + paralaks) + künye · 3 biz kimiz ·
     4 faaliyet alanları (taş; yapışkan ad, dikey hairline) · 5 referanslar (mürekkep) · 6 ilkeler
   Önek: .kb-. Yeni renk yok; çizgiler zeminden gelir. Hareket YALNIZ ortak kancalarla (data-reveal, data-genis,
   data-parallax, data-imlec); tek sayfaya özgü ayrıntı: dikey hairline ALTTAN YUKARI çizilir (yükseliş dili).
   Gizli başlangıç durumu YALNIZ html.hareket altındadır.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Ortak: H2 ölçeği (anasayfa bölüm başlıklarıyla aynı) ─────────────── */
.s-kurumsal .kb-b2 { font: 300 clamp(44px, 6vw, 92px)/1 var(--serif); font-stretch: 76%; letter-spacing: -.02em; color: var(--metin); text-wrap: balance; }
@media (max-width: 1066px) { .s-kurumsal .kb-b2 { font-weight: 350; } }
@media (max-width: 799px) { .s-kurumsal .kb-b2 { font-weight: 400; } }

/* ═══ 1 · SAYFA BAŞI ═════════════════════════════════════════════════════════════════════════════
   Etiket → çizilen hairline → dar kesim serif H1 (soldan 8 sütun) + sağda iki satırlık giriş (alta hizalı). */
.s-kurumsal .kb-bas { overflow-x: clip; padding: clamp(56px, 7vw, 112px) 0 clamp(52px, 5.8vw, 92px); }
.s-kurumsal .kb-bas__etiket { margin-bottom: 18px; }
.s-kurumsal .kb-bas__cizgi { margin-bottom: clamp(30px, 3.6vw, 56px); }
.s-kurumsal .kb-bas__izgara { align-items: end; row-gap: 28px; }
.s-kurumsal .kb-bas__h1 { grid-column: 1 / span 8; white-space: nowrap; font: 300 clamp(50px, 11.2vw, 172px)/.9 var(--serif); font-stretch: 66%; letter-spacing: -.024em; color: var(--metin); }
.s-kurumsal .kb-bas__giris { grid-column: 9 / -1; max-width: 22em; padding-bottom: clamp(0px, .7vw, 10px); font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; color: var(--govde); }

/* ═══ 2 · GÖRSEL (A katmanı, tam genişlik) + KÜNYE ═══════════════════════════════════════════════
   data-genis: çerçeveden kenara açılır (kaydırmaya bağlı) · data-parallax: .foto yavaş akar (≥ 1000 px + fare).
   Kare kendi yüksekliğini taşır (.proje__kare'nin oranını kapatır); kartın tamamı ışık kutusunu açar (künye düğmesi). */
.s-kurumsal .kb-fig__kare { aspect-ratio: auto; width: 100%; max-width: 1760px; height: clamp(380px, 86vh, 900px); height: clamp(380px, 86svh, 900px); margin-inline: auto; }
.s-kurumsal .kb-fig__alt { align-items: start; row-gap: 12px; }
.s-kurumsal .kb-fig__kunye { grid-column: 1 / span 8; padding-top: 18px; }
.s-kurumsal .kb-fig__kunye .kunye__ad { font-size: clamp(20px, 1.6vw, 24px); }
.s-kurumsal .kb-fig__not { grid-column: 9 / -1; justify-self: end; max-width: 24em; padding-top: 20px; text-align: right; font-size: 14.5px; line-height: 1.5; color: var(--soluk); }

/* Künye: dört sütun; üst hairline'lar sırayla çizilir (data-reveal-grup). Her hücre etiket + değer. */
.s-kurumsal .kb-gorsel__kunye { padding-top: clamp(44px, 5vw, 80px); }
.s-kurumsal .kb-kunye { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--oluk); row-gap: 40px; }
.s-kurumsal .kb-kunye > div { padding-top: 18px; }
.s-kurumsal .kb-kunye dt { margin-bottom: 12px; }
.s-kurumsal .kb-kunye dd { font-size: 16.5px; line-height: 1.6; color: var(--metin); overflow-wrap: anywhere; }
.s-kurumsal .kb-kunye a { display: inline-block; text-decoration: none; }
.s-kurumsal .kb-kunye a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

/* ═══ 3 · BİZ KİMİZ ═══════════════════════════════════════════════════════════════════════════════
   Etiket solda; ilk paragraf serif giriş (dar kesim, ölçekte büyük), ikinci paragraf gövde ve sağa kaydırılmış. */
.s-kurumsal .kb-biz { padding: clamp(88px, 11vw, 168px) 0 var(--bolum); }
.s-kurumsal .kb-biz__izgara { align-items: start; row-gap: clamp(36px, 4.4vw, 68px); }
.s-kurumsal .kb-biz__etiket { grid-column: 1 / span 3; padding-top: 14px; }
.s-kurumsal .kb-biz__soz { grid-column: 4 / -1; max-width: 21em; font: 300 clamp(28px, 3.7vw, 58px)/1.14 var(--serif); font-stretch: 78%; letter-spacing: -.014em; color: var(--metin); text-wrap: balance; }
.s-kurumsal .kb-biz__metin { grid-column: 7 / -1; max-width: 33em; font-size: 18px; line-height: 1.65; }
@media (max-width: 1066px) { .s-kurumsal .kb-biz__soz { font-weight: 350; } }
@media (max-width: 799px) { .s-kurumsal .kb-biz__soz { font-weight: 400; } }

/* ═══ 4 · FAALİYET ALANLARI (taş) ════════════════════════════════════════════════════════════════
   İki satır. Solda ad + açıklama + bağlantılar (≥ 1000 px'te YAPIŞKAN: sağdaki uzun içerik akarken ekranda kalır),
   sağda kolun KENDİ verisi: İnşaat → görsel 17 + dört hizmet · Seramik → derz şeması + künye + ürün grupları + markalar.
   Üst hairline (kalın) ve kolonlar arası dikey hairline çizilir; dikey çizgi ALTTAN YUKARI (yükseliş).      */
.s-kurumsal .kb-faaliyet { padding: var(--bolum) 0; }
.s-kurumsal .kb-faaliyet__baslik { margin-bottom: clamp(48px, 6vw, 96px); }
.s-kurumsal .kb-alan { row-gap: 40px; align-items: start; padding: 30px 0 clamp(96px, 10vw, 160px); }
.s-kurumsal .kb-alan:last-child { padding-bottom: 0; }
.s-kurumsal .kb-alan__sol { grid-column: 1 / span 5; }
.s-kurumsal .kb-alan__sag { grid-column: 7 / -1; padding-top: 6px; }
.s-kurumsal .kb-alan__ad { margin-top: 18px; font: 300 clamp(64px, 8.8vw, 132px)/.92 var(--serif); font-stretch: 66%; letter-spacing: -.026em; color: var(--metin); }
.s-kurumsal .kb-alan__sol > .etiket + .kb-alan__ad { margin-top: 22px; }
.s-kurumsal .kb-alan__metin { margin-top: clamp(24px, 2.6vw, 36px); max-width: 24em; font-size: 17.5px; }
.s-kurumsal .kb-alan__bag { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 32px; }
.s-kurumsal .kb-alan__ara { margin: clamp(44px, 4.6vw, 64px) 0 8px; }
.s-kurumsal .kb-alan__sag > .proje + .kb-alan__ara { margin-top: clamp(40px, 4.2vw, 60px); }
@media (min-width: 1000px) {
  .s-kurumsal .kb-alan__sol { position: sticky; top: calc(var(--ust-h) + clamp(24px, 6vh, 64px)); }
}

/* Dikey hairline: iki kolon arasında, üst çizgiye T biçiminde bağlanır. Çekirdeğin data-reveal="cizgi" mekaniği
   (is-gorundu) kullanılır; yalnız yön değişir: scaleY, kaynak ALT uç → alttan yukarı çizilir. */
.s-kurumsal .kb-dikey { grid-column: 6; grid-row: 1; justify-self: center; align-self: stretch; width: 1px; margin-top: -30px; }
.s-kurumsal .kb-dikey::before { left: 0; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: var(--cizgi-g); transform-origin: 50% 100%; }
html.hareket .s-kurumsal .kb-dikey:not(.is-gorundu)::before { transform: scaleY(0); }
html.hareket .s-kurumsal .kb-dikey.is-gorundu::before { animation: kb-yuksel 1600ms var(--ease-cikis) var(--gecikme, 0ms) backwards; }
@keyframes kb-yuksel { from { transform: scaleY(0); } }

/* Hizmet / ürün grubu satırları: ad (serif) + açıklama; hairline satır başına çizilir */
.s-kurumsal .kb-liste > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 6px var(--oluk); padding: 22px 0 24px; }
.s-kurumsal .kb-liste dt { font: 400 clamp(23px, 1.9vw, 29px)/1.18 var(--serif); font-stretch: 92%; letter-spacing: -.008em; color: var(--metin); text-wrap: balance; }
.s-kurumsal .kb-liste dd { font-size: 16.5px; line-height: 1.55; color: var(--metin-2); }
/* dt bağlantısı: dinlenmede soluk çizgi (::before), üzerine gelince tam renkli çizgi soldan sağa çizilir (::after, transform —
   .bag ile aynı dil; yalnız transform canlandırılır) */
.s-kurumsal .kb-baglanti { position: relative; display: inline-block; padding-bottom: 4px; text-decoration: none; }
.s-kurumsal .kb-baglanti::before, .s-kurumsal .kb-baglanti::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none; }
.s-kurumsal .kb-baglanti::before { background: var(--cizgi-g); }
.s-kurumsal .kb-baglanti::after { background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--sure-orta) var(--ease-cikis); }
.s-kurumsal .kb-baglanti:hover::after, .s-kurumsal .kb-baglanti:focus-visible::after { transform: scaleX(1); }

/* Seramik: küçük künye, derz şeması, marka listesi */
.s-kurumsal .kb-derz { margin-bottom: 8px; }
.s-kurumsal .kb-derz .derz__liste { gap: 14px; }
.s-kurumsal .kb-veri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--oluk); margin-top: clamp(32px, 3.4vw, 48px); }
.s-kurumsal .kb-veri > div { padding: 18px 0 4px; }
.s-kurumsal .kb-veri dt { margin-bottom: 8px; }
.s-kurumsal .kb-veri dd { font-size: 17px; line-height: 1.5; color: var(--metin); }
.s-kurumsal .kb-markalar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--oluk); }
.s-kurumsal .kb-markalar li { padding: 15px 0 16px; font-size: 16.5px; line-height: 1.3; color: var(--metin); }

/* ═══ 5 · REFERANSLAR (mürekkep) ═════════════════════════════════════════════════════════════════
   Solda başlık + Bayındır İş Merkezi kartı (perde, "İncele" imleci, ışık kutusu); sağda dört ad, büyük serif, ince çizgiler.
   Proje bağlantılı satırın tamamı bir düğmedir (ışık kutusunu açar); diğerleri düz yazıdır. */
.s-kurumsal .kb-ref { padding: var(--bolum) 0; }
.s-kurumsal .kb-ref__izgara { align-items: start; row-gap: 56px; }
.s-kurumsal .kb-ref__sol { grid-column: 1 / span 5; }
.s-kurumsal .kb-ref__sag { grid-column: 7 / -1; }
.s-kurumsal .kb-ref__gorsel { margin-top: clamp(40px, 5vw, 72px); }
.s-kurumsal .kb-ref__satir { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 10px; padding: clamp(22px, 2.4vw, 34px) 0 clamp(24px, 2.6vw, 36px); }
.s-kurumsal .kb-ref__ad { font: 300 clamp(30px, 3.5vw, 54px)/1.08 var(--serif); font-stretch: 78%; letter-spacing: -.014em; color: var(--metin); text-wrap: balance; }
.s-kurumsal .kb-ref__tur { font: 500 12px/1.5 var(--genis); letter-spacing: .15em; text-transform: uppercase; color: var(--soluk); }
.s-kurumsal .kb-ref__ac { appearance: none; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; width: 100%; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.s-kurumsal .kb-ref__ac::after { content: ""; position: absolute; inset: 0; z-index: 1; cursor: zoom-in; }
.s-kurumsal .kb-ref__ac:focus-visible { outline: none; }
.s-kurumsal .kb-ref__ac:focus-visible::after { outline: 2px solid var(--kirmizi); outline-offset: 2px; }
.s-kurumsal .kb-ref__ac:hover .kb-ref__ad { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
.s-kurumsal .kb-ref__incele { flex: none; font: 500 15px/1.4 var(--sans); color: var(--metin); }
.s-kurumsal .kb-ref__incele::after { content: ""; display: block; height: 1px; margin-top: 4px; background: currentColor; transform: scaleX(.34); transform-origin: 0 50%; transition: transform var(--sure-orta) var(--ease-cikis); }
.s-kurumsal .kb-ref__satir:hover .kb-ref__incele::after, .s-kurumsal .kb-ref__ac:focus-visible .kb-ref__incele::after { transform: scaleX(1); }
@media (max-width: 1066px) { .s-kurumsal .kb-ref__ad { font-weight: 350; } }
@media (max-width: 799px) { .s-kurumsal .kb-ref__ad { font-weight: 400; } }

/* ═══ 6 · ÇALIŞMA İLKELERİ ═══════════════════════════════════════════════════════════════════════
   Dört satır, numarasız: solda serif ilke adı, sağda açıklama; hairline satır başına çizilir, listenin sonu kapanır. */
.s-kurumsal .kb-ilke { padding: var(--bolum) 0 calc(var(--bolum) * 1.1); }
.s-kurumsal .kb-ilke__baslik { margin-bottom: clamp(40px, 5vw, 80px); }
.s-kurumsal .kb-ilke__liste { border-bottom: 1px solid var(--cizgi); }
.s-kurumsal .kb-ilke__satir { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--oluk); align-items: baseline; padding: clamp(26px, 3vw, 44px) 0 clamp(28px, 3.2vw, 48px); }
.s-kurumsal .kb-ilke__satir dt { grid-column: 1 / span 8; font: 300 clamp(30px, 3.7vw, 56px)/1.06 var(--serif); font-stretch: 78%; letter-spacing: -.014em; color: var(--metin); text-wrap: balance; }
.s-kurumsal .kb-ilke__satir dd { grid-column: 9 / -1; max-width: 28em; font-size: 17.5px; line-height: 1.6; color: var(--govde); }
@media (max-width: 1180px) { .s-kurumsal .kb-ilke__satir dt { grid-column: 1 / span 7; } .s-kurumsal .kb-ilke__satir dd { grid-column: 8 / -1; } }
@media (max-width: 1066px) { .s-kurumsal .kb-ilke__satir dt { font-weight: 350; } }
@media (max-width: 799px) { .s-kurumsal .kb-ilke__satir dt { font-weight: 400; } }

/* ═══ 7 · DEVAM (mürekkep) ═══════════════════════════════════════════════════════════════════════
   İki büyük bağlantı satırı (Hizmetlerimiz · Projeler): dar kesim serif ad solda, kısa döküm sağda. Ok YOK:
   üzerine gelince / odakta satırın alt çizgisi soldan sağa çizilir (bağ ile aynı dil). Alt bilgiyle birlikte kapanış. */
.s-kurumsal .kb-devam { padding: clamp(24px, 3vw, 48px) 0 clamp(8px, 2vw, 24px); }
.s-kurumsal .kb-devam__liste { border-bottom: 1px solid var(--cizgi); }
.s-kurumsal .kb-devam__bag { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--oluk); align-items: baseline; padding: clamp(28px, 3.4vw, 52px) 0 clamp(30px, 3.6vw, 56px); text-decoration: none; color: var(--metin); }
.s-kurumsal .kb-devam__bag::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--metin); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--sure-uzun) var(--ease-cikis); pointer-events: none; }
.s-kurumsal .kb-devam__bag:hover::after, .s-kurumsal .kb-devam__bag:focus-visible::after { transform: scaleX(1); }
.s-kurumsal .kb-devam__ad { grid-column: 1 / span 7; font: 300 clamp(48px, 8.4vw, 132px)/.96 var(--serif); font-stretch: 68%; letter-spacing: -.024em; color: var(--metin); }
.s-kurumsal .kb-devam__alt { grid-column: 9 / -1; max-width: 22em; font-size: 16.5px; line-height: 1.55; color: var(--metin-2); }
@media (max-width: 1066px) { .s-kurumsal .kb-devam__ad { font-weight: 350; } }
@media (max-width: 799px) { .s-kurumsal .kb-devam__ad { font-weight: 400; } }

/* ═══ Duyarlı ════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  /* Sağ kolon daralır: hizmet / ürün grubu satırlarında ad üstte, açıklama altta */
  .s-kurumsal .kb-liste > div { grid-template-columns: minmax(0, 1fr); row-gap: 9px; }
  .s-kurumsal .kb-kunye dd { font-size: 16px; }
}
@media (max-width: 999px) {
  .s-kurumsal .kb-bas__h1, .s-kurumsal .kb-bas__giris { grid-column: 1 / -1; }
  .s-kurumsal .kb-bas__h1 { font-size: clamp(50px, 15.6vw, 156px); }
  .s-kurumsal .kb-fig__kare { height: clamp(340px, 108vw, 640px); }
  .s-kurumsal .kb-fig__kunye, .s-kurumsal .kb-fig__not { grid-column: 1 / -1; }
  .s-kurumsal .kb-fig__not { justify-self: start; padding-top: 0; text-align: left; }
  .s-kurumsal .kb-kunye { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-kurumsal .kb-biz__etiket, .s-kurumsal .kb-biz__soz, .s-kurumsal .kb-biz__metin { grid-column: 1 / -1; }
  .s-kurumsal .kb-biz__etiket { padding-top: 0; }
  .s-kurumsal .kb-alan__sol, .s-kurumsal .kb-alan__sag { grid-column: 1 / -1; }
  .s-kurumsal .kb-alan__sag { padding-top: 0; }
  .s-kurumsal .kb-dikey { display: none; }
  .s-kurumsal .kb-liste > div { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); row-gap: 6px; }
  .s-kurumsal .kb-ref__sol, .s-kurumsal .kb-ref__sag { grid-column: 1 / -1; }
  .s-kurumsal .kb-ilke__satir dt, .s-kurumsal .kb-ilke__satir dd { grid-column: 1 / -1; }
  .s-kurumsal .kb-ilke__satir dd { margin-top: 14px; }
  .s-kurumsal .kb-devam__ad, .s-kurumsal .kb-devam__alt { grid-column: 1 / -1; }
  .s-kurumsal .kb-devam__alt { margin-top: 14px; }
}
@media (max-width: 599px) {
  .s-kurumsal .kb-kunye { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .s-kurumsal .kb-liste > div { grid-template-columns: minmax(0, 1fr); row-gap: 9px; }
  .s-kurumsal .kb-markalar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-kurumsal .kb-veri { grid-template-columns: minmax(0, 1fr); }
  .s-kurumsal .kb-bas__h1 { font-weight: 350; }
}

/* Dokunmatik: bağlantı hedefleri ≥ 44 px (görünen çizgi yerinde kalır; hedef yukarı genişler, düzen kaymaz) */
@media (pointer: coarse), (max-width: 999px) {
  .s-kurumsal .kb-alan__bag { gap: 22px 28px; }
  .s-kurumsal .kb-alan__bag .bag { padding-top: 18px; margin-top: -18px; }
  .s-kurumsal .kb-kunye a { padding: 11px 0; margin: -11px 0; }
  .s-kurumsal .kb-baglanti { padding-top: 12px; margin-top: -12px; padding-bottom: 5px; }
  .s-kurumsal .kb-ref__ac { min-height: 44px; }
}

/* Yazdırma: yapışkan ad serbest, dikey çizgi görünür */
@media print {
  .s-kurumsal .kb-alan__sol { position: static; }
  .s-kurumsal .kb-dikey::before { transform: none !important; animation: none !important; }
}

/* ── kaynak/stil/30-hizmetlerimiz.css ────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════
   30-hizmetlerimiz.css (v4) — SAHİBİ: hizmetlerimiz sayfa ajanı. Kapsam: hizmetlerimiz.html (body.s-hizmetler).
   Kurallar: seçiciler sayfa sınıfıyla daraltılır; ortak bileşenlerin yapısı 00-temel / 05-hareket / 07-bilesenler'dedir —
   oralara DOKUNULMAZ, gerekirse burada .s-hizmetler önekiyle ezilir. Gizli başlangıç durumu YALNIZ html.hareket altındadır.

   Bölümler:
     1 sayfa başı   dev serif başlık + dizin (ad · özet; hairline'lar çizilir, üzerine gelince diğerleri söner)
     2 SAHNE        y.sahne'nin bu sayfaya uyarlaması: metin SOLDA (5 sütun), görsel SAĞDA ve daha büyük (6 sütun) — anasayfa
                    sahnesinin tersi. İMZA ANI: tadilatta zemin döşenir (satır satır, alttan yukarı; yalnız opacity + transform)
     3 süreç        solda yapışkan başlık, sağda defter satırları; geçilen adımın adı vurgulanır (aynı sahne mekanizması)
     4 keşif        genişleyen A görseli (data-genis + paralaks) + telefonlar
   Serif ağırlık kuralı (00-temel): 64 px üstü 300 · 48–64 px 350 · 48 px altı 400.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ 1 · SAYFA BAŞI ═══════════════════════════════════════════════════════════════════════════════
   Anasayfanın tam ekran açılışını TEKRAR ETMEZ: görselsiz, kâğıt zemin; ölçekte dramatik tek şey başlık.
   Giriş (data-reveal-giris): etiket · H1 · giriş cümlesi yükselir; geri/ileri ve azaltılmış harekette oynamaz. */
.s-hizmetler .hz-bas { padding: clamp(40px, 5.2vw, 84px) 0 clamp(72px, 8.4vw, 128px); overflow-x: clip; }   /* yedek yazı tipinde (Georgia) dar ekranda H1 taşmasın; başlık yazı tipi gelene dek zaten gizli */
.s-hizmetler .hz-bas__etiket { margin-bottom: clamp(20px, 3vw, 44px); }
.s-hizmetler .hz-bas__ust { align-items: start; row-gap: clamp(24px, 2.8vw, 40px); }
.s-hizmetler .hz-bas__h1 { grid-column: 1 / -1; font: 300 clamp(52px, 15vw, 224px)/.86 var(--serif); font-stretch: 62.5%; letter-spacing: -.028em; color: var(--metin); white-space: nowrap; }
.s-hizmetler .hz-bas__on { grid-column: 8 / -1; max-width: 27em; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.58; color: var(--govde); }
/* Giriş süresi (520 ms) ortak kuraldır (05-hareket.css › data-reveal-giris): LCP, başlığın tam görünür olduğu andır. */

/* Dizin: dört hizmet, çapalara. Ad büyük serif, yanında kısa özet. Üzerine gelince diğer satırlar söner (fare); klavye odağında da. */
.s-hizmetler .hz-dizin { margin-top: clamp(56px, 7.4vw, 112px); }
.s-hizmetler .hz-dizin__liste { border-bottom: 1px solid var(--cizgi); }
.s-hizmetler .hz-dizin__satir { transition: opacity .45s var(--ease-yumusak); }
.s-hizmetler .hz-dizin__bag { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--oluk); align-items: end; padding: clamp(22px, 2.5vw, 36px) 0 clamp(24px, 2.7vw, 38px); color: var(--metin); text-decoration: none; }
.s-hizmetler .hz-dizin__ad { grid-column: 1 / span 7; font: 300 clamp(36px, 4.6vw, 70px)/1.04 var(--serif); font-stretch: 76%; letter-spacing: -.016em; }
.s-hizmetler .hz-dizin__yazi { position: relative; display: inline-block; }
.s-hizmetler .hz-dizin__yazi::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--sure-orta) var(--ease-cikis); }
.s-hizmetler .hz-dizin__bag:hover .hz-dizin__yazi::after, .s-hizmetler .hz-dizin__bag:focus-visible .hz-dizin__yazi::after { transform: scaleX(1); }
.s-hizmetler .hz-dizin__kisa { grid-column: 8 / -1; max-width: 27em; font-size: 16px; line-height: 1.55; color: var(--metin-2); }
@media (hover: hover) and (pointer: fine) {
  .s-hizmetler .hz-dizin__liste:hover .hz-dizin__satir:not(:hover) { opacity: .38; }
}
.s-hizmetler .hz-dizin__liste:has(:focus-visible) .hz-dizin__satir:not(:focus-within) { opacity: .38; }

/* ═══ 2 · SAHNE ═════════════════════════════════════════════════════════════════════════════════════
   Çekirdeğin sahnesi (07-bilesenler) kullanılır; yalnız ölçü, yerleşim ve içerik biçimi burada.
   Taban (JS yok · azaltılmış hareket · < 1000 px): görsel her adımın BAŞINDA satır içi; adımlar çizgiyle ayrılır.
   ≥ 1000 px + hareket: sağda yapışkan görsel (sahnenin kendisi), solda adımlar.                              */
.s-hizmetler .hz-sahne { padding: clamp(80px, 9vw, 144px) 0 clamp(56px, 6vw, 96px); }
.s-hizmetler .hz-sahne .sahne__gorsel { max-width: 760px; }
.s-hizmetler .hz-sahne .sahne__metin { max-width: 760px; margin-bottom: clamp(44px, 7vw, 64px); padding-bottom: clamp(44px, 7vw, 64px); border-bottom: 1px solid var(--cizgi); }
.s-hizmetler .hz-sahne .sahne__metin:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.s-hizmetler .hz-sahne .sahne__baslik { font: 350 clamp(36px, 4.2vw, 62px)/1.04 var(--serif); font-stretch: 76%; letter-spacing: -.016em; }
.s-hizmetler .hz-soz { margin-top: 16px; font: 400 clamp(22px, 1.9vw, 28px)/1.25 var(--serif); font-stretch: 100%; letter-spacing: -.005em; color: var(--metin-2); }
.s-hizmetler .hz-sahne .sahne__ozet { margin-top: clamp(20px, 2vw, 28px); max-width: 31em; }
.s-hizmetler .hz-kapsam { margin-top: clamp(30px, 3.2vw, 48px); }
.s-hizmetler .hz-kapsam .etiket { margin-bottom: 14px; }
.s-hizmetler .hz-kapsam__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--oluk); }
.s-hizmetler .hz-kapsam__liste li { padding: 12px 0 13px; font-size: 15.5px; line-height: 1.4; color: var(--metin-2); }
.s-hizmetler .hz-malzeme { margin-top: clamp(26px, 2.8vw, 40px); }
.s-hizmetler .hz-malzeme__liste { margin-top: 10px; max-width: 26em; font: 400 clamp(20px, 1.6vw, 23px)/1.4 var(--serif); font-stretch: 100%; letter-spacing: -.004em; color: var(--metin); }
.s-hizmetler .hz-sahne .hz-eylem { margin-top: clamp(30px, 3.2vw, 44px); gap: 18px 32px; }
.s-hizmetler .hz-sahne__not { margin-top: clamp(40px, 5vw, 72px); max-width: 38em; font-size: 14.5px; line-height: 1.5; color: var(--soluk); }

/* Tadilatın "görseli": döşenen zemin. Karolar yalnız paletten; derz çizgisi karoların kenarı. */
.s-hizmetler .hz-zemin rect { stroke: rgba(14, 15, 16, .34); stroke-width: 1; vector-effect: non-scaling-stroke; }
.s-hizmetler .hz-zemin .hz-zemin__sap { stroke: none; }

@media (min-width: 1000px) {
  /* Sahne etkinken: metin solda 5 sütun, görsel sağda 6 sütun (anasayfanın tersi; B katmanı en çok 1,11 ×: yükseklik ≤ 640 px) */
  html.hareket .s-hizmetler .hz-sahne .sahne__gorsel { grid-column: 6 / -1; max-width: none; height: min(72vh, 640px); height: min(72svh, 640px); margin-left: clamp(24px, 4vw, 72px); }
  html.hareket .s-hizmetler .hz-sahne .sahne__metin { grid-column: 1 / span 5; max-width: none; margin-bottom: 0; padding-bottom: clamp(32px, 6vh, 72px); border-bottom: 0; }
  /* İMZA ANI — zemin DÖŞENİR: adım etkinleşince satırlar alttan yukarı sırayla gelir (yalnız opacity + transform, bir kez
     etkinleşme başına). Görsel kabı zaten 700 ms çapraz geçerken başlar; ilk satır 180 ms sonra. */
  html.hareket .s-hizmetler .hz-sahne .sahne__gorsel.is-aktif .hz-zemin__sira { animation: hz-dose 820ms var(--ease-cikis) calc(180ms + var(--r, 0) * 58ms) backwards; }
}
@keyframes hz-dose { from { opacity: 0; transform: translateY(26px); } }

/* ═══ 3 · SÜREÇ ═════════════════════════════════════════════════════════════════════════════════════
   Sıralı liste (ol), numarasız, kutusuz: çizgi sırayı taşır. Geçilen adım (ekranın %45'inde) tam renkte, ötekilerin adı soluk —
   aynı sahne mekanizması ([data-sahne] + [data-sahne-adim]; görselsiz). Hareket kapalıyken hepsi tam renkte.        */
.s-hizmetler .hz-surec { padding: var(--bolum) 0; }
.s-hizmetler .hz-surec.kap, .s-hizmetler .hz-surec .izgara { align-items: start; row-gap: 48px; }
.s-hizmetler .hz-surec__yan { grid-column: 1 / span 5; }
.s-hizmetler .hz-surec__baslik { font: 300 clamp(44px, 6vw, 92px)/1 var(--serif); font-stretch: 76%; letter-spacing: -.02em; color: var(--metin); }
.s-hizmetler .hz-surec__giris { margin-top: clamp(20px, 2.2vw, 30px); max-width: 26em; }
.s-hizmetler .hz-surec__liste { grid-column: 7 / -1; border-bottom: 1px solid var(--cizgi); }
.s-hizmetler .hz-adim { padding: clamp(26px, 2.8vw, 40px) 0 clamp(28px, 3vw, 44px); }
.s-hizmetler .hz-adim__ad { font: 400 clamp(28px, 3vw, 44px)/1.1 var(--serif); font-stretch: 88%; letter-spacing: -.01em; color: var(--metin); }
.s-hizmetler .hz-adim__metin { margin-top: 12px; max-width: 28em; font-size: 17px; line-height: 1.58; color: var(--metin-2); }
html.hareket .s-hizmetler .hz-adim__ad { transition: opacity var(--sure-orta) var(--ease-yumusak); }
html.hareket .s-hizmetler .hz-adim:not(.is-aktif) .hz-adim__ad { opacity: .5; }
@media (min-width: 1000px) {
  .s-hizmetler .hz-surec__yan { position: sticky; top: calc(var(--ust-h) + clamp(32px, 9vh, 104px)); }
}

/* ═══ 4 · KEŞİF VE TEKLİF (kapanış) ═══════════════════════════════════════════════════════════════
   Genişleyen A görseli (05-hareket › data-genis + paralaks) — keşif: işin yapılacağı yer. Künye ışık kutusunu açar
   (düğmenin ::after'ı figürü kaplar). Altında başlık solda, telefonlar sağda.                                    */
.s-hizmetler .hz-kesif { padding: clamp(72px, 9vw, 144px) 0 clamp(48px, 5vw, 80px); overflow-x: clip; }
.s-hizmetler .hz-kesif__fig { position: relative; margin: 0; }
.s-hizmetler .hz-kesif__kare { position: relative; overflow: hidden; width: 100%; max-width: 1800px; height: clamp(300px, 58vh, 620px); height: clamp(300px, 58svh, 620px); margin-inline: auto; background-color: var(--renk, var(--murekkep-2)); }
.s-hizmetler .hz-kesif__kare .foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-hizmetler .hz-kesif__kunye { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; padding-top: 18px; }
.s-hizmetler .hz-kesif__ad { font: 420 clamp(21px, 1.75vw, 27px)/1.18 var(--serif); font-stretch: 100%; letter-spacing: -.004em; color: var(--metin); }
.s-hizmetler .hz-kesif__ac { appearance: none; margin: 0; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: left; cursor: pointer; }
.s-hizmetler .hz-kesif__ac::after { content: ""; position: absolute; inset: 0; z-index: 2; cursor: zoom-in; }
.s-hizmetler .hz-kesif__ac:focus-visible { outline: none; }
.s-hizmetler .hz-kesif__ac:focus-visible::after { outline: 2px solid var(--kirmizi); outline-offset: -6px; }
.s-hizmetler .hz-kesif__fig:hover .hz-kesif__ac { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.s-hizmetler .hz-kesif__kunye .kunye__tur { grid-column: auto; }
.s-hizmetler .hz-kesif__kunye .kunye__adres { grid-column: auto; font-size: 15px; color: var(--metin-2); }
.s-hizmetler .hz-kesif__incele { margin-left: auto; font: 500 15px/1.4 var(--sans); color: var(--metin); }
.s-hizmetler .hz-kesif__incele::after { content: ""; display: block; height: 1px; margin-top: 4px; background: currentColor; transform: scaleX(.34); transform-origin: 0 50%; transition: transform var(--sure-orta) var(--ease-cikis); }
.s-hizmetler .hz-kesif__fig:hover .hz-kesif__incele::after, .s-hizmetler .hz-kesif__fig:focus-within .hz-kesif__incele::after { transform: scaleX(1); }
html:not(.js) .s-hizmetler .hz-kesif__incele { display: none; }
html:not(.js) .s-hizmetler .hz-kesif__ac::after { cursor: auto; }

.s-hizmetler .hz-kesif__ic { align-items: end; row-gap: 48px; margin-top: clamp(56px, 7vw, 104px); }
.s-hizmetler .hz-kesif__metin { grid-column: 1 / span 6; }
.s-hizmetler .hz-kesif__baslik { font: 300 clamp(48px, 6.4vw, 100px)/1 var(--serif); font-stretch: 76%; letter-spacing: -.02em; color: var(--metin); }
.s-hizmetler .hz-kesif__giris { margin-top: clamp(20px, 2.2vw, 30px); max-width: 26em; }
.s-hizmetler .hz-kesif__iletisim { grid-column: 8 / -1; }
.s-hizmetler .hz-kesif__teller { display: grid; gap: 2px; margin-top: 14px; }
.s-hizmetler .hz-kesif__tel { font: 400 clamp(28px, 2.5vw, 38px)/1.25 var(--serif); font-stretch: 100%; letter-spacing: -.004em; color: var(--metin); text-decoration: none; white-space: nowrap; }
.s-hizmetler .hz-kesif__tel:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.s-hizmetler .hz-kesif__eylem { margin-top: 32px; }
.s-hizmetler .hz-kesif__son { margin-top: clamp(56px, 6vw, 88px); }

/* ═══ Dokunma hedefi ═══════════════════════════════════════════════════════════════════════════════
   .bag'ın ≥ 44 px hedefi ortak kuraldır (07-bilesenler.css); büyük telefon numarası burada. */
@media (pointer: coarse), (max-width: 999px) {
  .s-hizmetler .hz-kesif__tel { padding-block: 5px; }
}

/* ═══ Ağırlık kuralı ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1142px) { .s-hizmetler .hz-sahne .sahne__baslik { font-weight: 400; } }
@media (max-width: 1066px) {
  .s-hizmetler .hz-surec__baslik, .s-hizmetler .hz-kesif__baslik { font-weight: 350; }
}
@media (max-width: 800px) {
  .s-hizmetler .hz-surec__baslik, .s-hizmetler .hz-kesif__baslik { font-weight: 400; }
}
@media (max-width: 426px) { .s-hizmetler .hz-bas__h1 { font-weight: 350; } }   /* 15vw < 64 px; alt sınır 52 px (≥ 48) olduğundan 400'e inmez */

/* ═══ Duyarlı ═══════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1279px) {
  .s-hizmetler .hz-kapsam__liste { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 999px) {
  .s-hizmetler .hz-bas__on { grid-column: 1 / -1; max-width: 30em; }
  .s-hizmetler .hz-dizin__ad, .s-hizmetler .hz-dizin__kisa { grid-column: 1 / -1; }
  .s-hizmetler .hz-dizin__ad { font-size: clamp(34px, 9vw, 52px); font-stretch: 82%; }
  .s-hizmetler .hz-dizin__kisa { margin-top: 10px; }
  .s-hizmetler .hz-kapsam__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-hizmetler .hz-surec__yan, .s-hizmetler .hz-surec__liste { grid-column: 1 / -1; }
  .s-hizmetler .hz-kesif__metin, .s-hizmetler .hz-kesif__iletisim { grid-column: 1 / -1; }
  .s-hizmetler .hz-kesif__kare { height: clamp(260px, 62vw, 460px); }
}
@media (max-width: 599px) {
  .s-hizmetler .hz-kapsam__liste { grid-template-columns: minmax(0, 1fr); }
  .s-hizmetler .hz-kesif__incele { margin-left: 0; }
  .s-hizmetler .hz-kesif__eylem { flex-direction: column; align-items: stretch; gap: 18px; }
  .s-hizmetler .hz-kesif__eylem .dugme { width: 100%; }
  .s-hizmetler .hz-kesif__eylem .bag { align-self: center; }
  .s-hizmetler .hz-kesif__tel { font-size: clamp(26px, 8vw, 34px); }
}

/* ── kaynak/stil/40-projeler.css ─────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════
   40-projeler.css — SAHİBİ: projeler sayfa ajanı. Kapsam: projeler.html (body.s-projeler).
   Kurallar: seçicileri sayfa sınıfıyla daraltın; ortak bileşenler (künye, proje kartı, rail, hareket…)
   00-temel.css · 05-hareket.css · 07-bilesenler.css'tedir — orayı DEĞİŞTİRMEYİN, gerekirse burada ezin.
   Hareket durumları (gizli başlangıç vb.) YALNIZ html.hareket altındadır.

   Kurgu (araclar/sayfa-projeler.js): katalog "föy"leri — ölçek görsel katmanına göre, ortam da ona göre.
     .pj-bas     sayfa başı: dev başlık + giriş + süzgeç (süzgeç = büyük serif sekmeler)
     .pf         föy = tam genişlik zemin bandı (z-kagit / z-tas / z-murekkep) > .kap > .pf__ic
       .pf--a      A katmanı: sinematik (kapla çerçeveli 2:1 görsel · dev ad · sağda küçük şerit)
       .pf--b      B katmanı: çerçeveli (görsel ≤ 9 sütun ≈ 1014 px · yanda künye + şerit sütunu)
       .pf--diptik iki görünüm yan yana (A: Bayındır · B: Yükselen Çarşı, aynalı)
     .pj__diger  "Diğer çalışmalar": taş bant, yalnız C katmanı küçük kareler, yatay şerit (rail)
     .pj-son     sayfa sonu: iki büyük bağlantı
   Mobil önce: taban tek sütun (≤ 999 px); ≥ 1000 px 12 sütunlu yerleşim.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ SAYFA BAŞI ════════════════════════════════════════════════════════════════════════════════ */
.s-projeler .pj-bas { padding: clamp(44px, 6vw, 92px) 0 0; }
.s-projeler .pj-bas__izgara { row-gap: clamp(12px, 1.6vw, 22px); }
.s-projeler .pj-bas__etiket, .s-projeler .pj-bas__baslik, .s-projeler .pj-bas__on { grid-column: 1 / -1; }
.s-projeler .pj-bas__baslik { margin: 0 0 0 -.03em; font: 300 clamp(76px, 14.6vw, 216px)/.84 var(--serif); font: 300 clamp(76px, min(14.6vw, 26svh), 216px)/.84 var(--serif); font-stretch: 62.5%; letter-spacing: -.03em; color: var(--metin); }
.s-projeler .pj-bas__on { max-width: 27em; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.58; color: var(--govde); }
@media (min-width: 1000px) {
  .s-projeler .pj-bas__baslik { grid-column: 1 / span 8; }
  .s-projeler .pj-bas__on { grid-column: 9 / -1; align-self: end; padding-bottom: .6em; }
}

/* Süzgeç = büyük serif sekmeler; etkin sekmenin 2 px çizgisi, üstteki ince çizginin ÜSTÜNE oturur */
.s-projeler .pj__arac { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 32px; margin-top: clamp(32px, 4.4vw, 68px); }
.s-projeler .pj__arac .filtre { gap: 0 22px; }
.s-projeler .pj__arac .filtre__dugme { position: relative; padding: 14px 0 12px; font: 400 clamp(22px, 2.35vw, 33px)/1.1 var(--serif); font-stretch: 84%; letter-spacing: -.008em; color: var(--soluk); box-shadow: none; transition: color .3s var(--ease-yumusak); }
.s-projeler .pj__arac .filtre__dugme:hover { color: var(--metin); }
.s-projeler .pj__arac .filtre__dugme[aria-pressed="true"] { color: var(--metin); box-shadow: none; }
.s-projeler .pj__arac .filtre__dugme::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--metin); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--sure-orta) var(--ease-cikis); }
.s-projeler .pj__arac .filtre__dugme[aria-pressed="true"]::before { transform: scaleX(1); }
.s-projeler .pj__arac .filtre__sayi { margin-left: 8px; font: 500 14px/1 var(--sans); letter-spacing: .02em; color: var(--soluk); }
.s-projeler .pj__durum { padding: 0 0 14px; font-size: 15px; line-height: 1.4; color: var(--soluk); white-space: nowrap; }
/* Telefonda sayı yalnız ekran okuyucuya (sekmeler zaten sayıyı taşır) */
@media (max-width: 599px) {
  .s-projeler .pj__durum { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; }
}
@media (min-width: 600px) {
  .s-projeler .pj__arac .filtre { gap: 0 clamp(22px, 3.2vw, 52px); }
  .s-projeler .pj__arac .filtre__dugme { padding: 20px 0 18px; }
  .s-projeler .pj__durum { padding: 20px 0 18px; }
}

.s-projeler .pj__bos { padding-block: 48px var(--bolum); }

/* ═══ FÖY (ortak) ═══════════════════════════════════════════════════════════════════════════════
   Makale tam genişlik zemin bandıdır (z-… sınıfı); .pf__ic konumlu sarmalayıcı.
   .proje'nin position:relative'i kapatılır: künye düğmesinin kartı kaplayan ::after'ı bu föyde YOK
   (ana görsel, ad ve her şerit karesi AYRI birer tetikleyicidir; hover bölgeleri birbirine karışmaz).
   Taban (mobil): tek sütun, sıra = çizgi · ana görsel · [künye · şerit].                              */
.s-projeler .pf { position: static; margin: 0; padding: clamp(40px, 4.4vw, 68px) 0 clamp(56px, 6.4vw, 104px); }
.s-projeler .pf__ic { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.s-projeler .pf__cizgi { margin-bottom: clamp(22px, 2.6vw, 38px); }
.s-projeler .pf__ana { --oran: 4 / 3; }
.s-projeler .pf__alt { margin-top: 26px; }
@media (min-width: 600px) { .s-projeler .pf__ana { --oran: 3 / 2; } }

/* Künye: tür etiketi · dev ad · meta satırı (N görsel · adres(varsa) · İncele) */
.s-projeler .pf .kunye { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; row-gap: 0; padding-top: 0; }
.s-projeler .pf .kunye__tur { margin-bottom: 14px; }
.s-projeler .pf .kunye__ad { grid-column: 1; font-family: var(--serif); font-weight: 300; font-stretch: 66%; letter-spacing: -.022em; line-height: .96; text-wrap: balance; overflow-wrap: break-word; }
.s-projeler .pf--a .kunye__ad { font-size: clamp(48px, 11.6vw, 96px); }
.s-projeler .pf--b .kunye__ad { font-size: clamp(44px, 9.6vw, 72px); font-weight: 350; font-stretch: 70%; }
.s-projeler .pf--a.pf--uzunad .kunye__ad { font-size: clamp(42px, 9.6vw, 72px); }
.s-projeler .pf--b.pf--uzunad .kunye__ad { font-size: clamp(38px, 8.4vw, 58px); }
.s-projeler .pf .kunye__ac { display: block; min-height: 44px; text-align: left; }
.s-projeler .pf .kunye__ac::after { content: none; }
.s-projeler .pf .kunye__ac:hover, .s-projeler .pf:hover .kunye__ac { text-decoration: none; }
.s-projeler .pf .kunye__ac:focus-visible { outline: 2px solid var(--kirmizi); outline-offset: 8px; }
.s-projeler .pf__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; margin-top: clamp(16px, 1.8vw, 24px); font-size: 15.5px; line-height: 1.5; color: var(--metin-2); }
.s-projeler .pf__meta .kunye__sayi { font-size: inherit; color: var(--metin-2); }
.s-projeler .pf__meta .kunye__adres { font-size: inherit; }
.s-projeler .pf__incele { font: 500 15px/1.4 var(--sans); color: var(--metin); }
.s-projeler .pf__incele::after { content: ""; display: block; height: 1px; margin-top: 4px; background: currentColor; transform: scaleX(.34); transform-origin: 0 50%; transition: transform var(--sure-orta) var(--ease-cikis); }
.s-projeler .pf__kunye:hover .pf__incele::after, .s-projeler .pf__ana:hover ~ .pf__alt .pf__incele::after, .s-projeler .pf .kunye__ac:focus-visible ~ .pf__meta .pf__incele::after { transform: scaleX(1); }
html:not(.js) .s-projeler .pf__incele { display: none; }
html:not(.js) .s-projeler .pf__kucuk, html:not(.js) .s-projeler .pf__ana, html:not(.js) .s-projeler .diptik > .proje__kare { cursor: default; }   /* JS yokken ışık kutusu açılmaz: büyütme imleci yanıltmasın */

/* Kare maliyeti (CPU 4× · yazılım rasterı ölçümü): tek tek ucuz, ama hızlı kaydırmada onlarca perde aynı anda canlı olunca
   kare p95 azaltılmış harekette 4,3 ms iken 16–21 ms'ye çıkıyor. Önlem: sayfa görselleri opacity ile SOLMAZ (örtü / LQIP zaten
   üstünü ya da altını kapatır); küçük şerit karelerinde perde yaklaşması yok, örtü dikdörtgen (çokgen maske katmanı yok) ve
   760 ms'de biter. */
.s-projeler .foto { transition: scale .9s var(--ease-cikis); }
html.hareket .s-projeler .pf__kucuk:not(.is-gorundu) .foto { scale: 1; }
html.hareket .s-projeler .pf__kucuk.is-gorundu .foto { animation: none; }
html.hareket .s-projeler .pf__kucuk.is-gorundu > .perde-ortu { animation-duration: 760ms; }

/* Görünüm şeridi: ana görselin dışındaki bütün görünümler küçük kare; her biri kendi sırasından açar */
.s-projeler .pf__serit { display: grid; grid-template-columns: repeat(var(--mc, 3), minmax(0, 1fr)); gap: 8px; margin: 20px 0 0; }
.s-projeler .pf__kucuk { position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; margin: 0; padding: 0; border: 0; border-radius: 0; overflow: hidden; background: var(--renk, var(--tas-2)); cursor: zoom-in; }
.s-projeler .pf__kucuk > .foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-projeler .pf__kucuk::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(14, 15, 16, .1); pointer-events: none; }
.s-projeler .z-murekkep .pf__kucuk::after { box-shadow: inset 0 0 0 1px rgba(238, 235, 229, .14); }
.s-projeler .pf__kucuk:focus-visible { outline-offset: 3px; }
@media (min-width: 600px) { .s-projeler .pf__serit { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 10px; } }

/* Diptik (taban): iki görünüm alt alta, 3:2 */
.s-projeler .pf--diptik .diptik { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; height: auto; }
.s-projeler .pf--diptik .diptik > .proje__kare { height: auto; aspect-ratio: 3 / 2 !important; }
.s-projeler .pf--diptik .diptik__dikey { position: relative; z-index: 0; width: 100%; }

/* ═══ ≥ 1000 px: 12 sütunlu föy yerleşimi ═══════════════════════════════════════════════════════ */
@media (min-width: 1000px) {
  .s-projeler .pf__ic { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--oluk); }
  .s-projeler .pf__cizgi { grid-column: 1 / -1; grid-row: 1; }
  .s-projeler .pf__ana { grid-column: 1 / -1; grid-row: 2; }
  .s-projeler .pf__alt { grid-column: 1 / -1; grid-row: 3; margin-top: clamp(30px, 3.2vw, 48px); }
  .s-projeler .pf__serit { margin-top: 0; }

  /* A katmanı — sinematik: kapla çerçeveli geniş görsel; altta dev ad (sol 7 sütun) + küçük şerit (sağ) */
  .s-projeler .pf--a:not(.pf--diptik) .pf__ana { --oran: 2 / 1; }
  .s-projeler .pf--a .pf__alt { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--oluk); align-items: end; }
  .s-projeler .pf--a .pf__kunye { grid-column: 1 / span 7; }
  .s-projeler .pf--a .pf__serit { grid-column: 8 / -1; justify-content: end; grid-template-columns: repeat(var(--n, 4), minmax(0, 138px)); padding-bottom: 4px; }
  .s-projeler .pf--a .kunye__ad { font-size: clamp(52px, 7.6vw, 112px); }
  .s-projeler .pf--a.pf--uzunad .kunye__ad { font-size: clamp(46px, 5.4vw, 80px); }

  /* B katmanı — çerçeveli: görsel 9 sütun (≤ 1014 px); sağ sütunda üstte künye, altta 2 sütunlu şerit */
  .s-projeler .pf--b:not(.pf--diptik) .pf__ana { grid-column: 1 / span 9; --oran: 16 / 9; width: 100%; align-self: stretch; }   /* alt kenar, sağ sütunun son şerit sırasıyla hizalanır; width:100% — yoksa gerilen yükseklik oran üzerinden genişliği şişirir */
  .s-projeler .pf--b:not(.pf--diptik) .pf__alt { grid-column: 10 / -1; grid-row: 2; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; margin-top: 0; }
  .s-projeler .pf--b:not(.pf--diptik) .pf__serit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-projeler .pf--b .kunye__ad { font-size: clamp(44px, 5vw, 72px); }
  .s-projeler .pf--b.pf--uzunad .kunye__ad { font-size: clamp(38px, 3.7vw, 54px); }

  /* Diptik — yatay 16:9 + dikey; B'de (Çarşı) aynalı */
  .s-projeler .pf--diptik .diptik { grid-column: 1 / -1; grid-row: 2; grid-template-columns: minmax(0, 2.222fr) minmax(0, 1fr); gap: var(--oluk); align-items: stretch; }
  .s-projeler .pf--diptik.pf--sag .diptik { grid-template-columns: minmax(0, 1fr) minmax(0, 2.222fr); }
  .s-projeler .pf--diptik.pf--sag .diptik__dikey { order: -1; }
  .s-projeler .pf--diptik .diptik > .proje__kare { align-self: stretch; aspect-ratio: auto !important; }
  .s-projeler .pf--diptik .diptik > .diptik__genis { aspect-ratio: 16 / 9 !important; }
}
@media (min-width: 1000px) and (max-width: 1180px) {
  .s-projeler .pf--a .pf__kunye { grid-column: 1 / span 8; }
  .s-projeler .pf--a .pf__serit { grid-column: 9 / -1; }
  .s-projeler .pf--b:not(.pf--diptik) .pf__ana { grid-column: 1 / span 8; }
  .s-projeler .pf--b:not(.pf--diptik) .pf__alt { grid-column: 9 / -1; }
}

/* ═══ Hover: görsel başına, çok yavaş yaklaşma (fare + ince işaretçi + hareket serbest) ═══════════
   Çekirdek yaklaşma kuralı (05-hareket.css) yalnız kartın DOĞRUDAN çocuğu olan kareye uygulanır; föy / diptik görsel başına burada açar. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .s-projeler .pf__ana:hover .foto, .s-projeler .pf--diptik .diptik > :hover .foto { scale: 1.035; }
  .s-projeler .pf__kucuk:hover .foto { scale: 1.07; }
  .s-projeler .pf__serit:hover .pf__kucuk:not(:hover) .foto { opacity: .5; }
  .s-projeler .pf--diptik .diptik:hover > :not(:hover) .foto { opacity: .62; }
}

/* ═══ SÜZGEÇ DEĞİŞİMİ: liste yükselerek yeniden dizilir (yalnız kullanıcının seçiminde; sayfa içi betik sınıfı koyar) ═══ */
html.hareket .s-projeler .pj__liste.is-degisti > .pf:not([hidden]) > .kap,
html.hareket .s-projeler .pj__liste.is-degisti > .pj__diger:not([hidden]) > .kap { animation: pj-yuksel 900ms var(--ease-cikis) backwards; }
@keyframes pj-yuksel { from { opacity: 0; translate: 0 36px; } }

/* ═══ DİĞER ÇALIŞMALAR — taş bant, yalnız C katmanı küçük kareler, yatay şerit ═══════════════════ */
.s-projeler .pj__diger { display: block; padding: clamp(64px, 7.4vw, 112px) 0 clamp(72px, 8.4vw, 128px); border: 0; }
.s-projeler .pj__diger .rail__bas { align-items: flex-end; margin-bottom: clamp(26px, 3vw, 44px); }
.s-projeler .pj__diger .rail__baslik { font: 300 clamp(40px, 4.8vw, 72px)/1 var(--serif); font-stretch: 74%; letter-spacing: -.018em; }
.s-projeler .pj__diger .rail__not { margin-top: 14px; }
.s-projeler .pj__kart .kunye { padding-top: 14px; row-gap: 6px; }
.s-projeler .pj__kart .kunye__ad { font-size: clamp(21px, 1.75vw, 26px); }

/* ═══ SAYFA SONU — iki büyük bağlantı ═══════════════════════════════════════════════════════════ */
.s-projeler .pj-son { padding: clamp(56px, 7vw, 112px) 0 clamp(64px, 8vw, 128px); }
.s-projeler .pj-son__liste > li:last-child { box-shadow: 0 1px 0 var(--cizgi); }
.s-projeler .pj-son__bag { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: baseline; gap: 10px 40px; padding: clamp(24px, 3.2vw, 48px) 0 clamp(26px, 3.4vw, 52px); color: var(--metin); text-decoration: none; }
.s-projeler .pj-son__bag::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--metin); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--sure-uzun) var(--ease-cikis); }
.s-projeler .pj-son__bag:hover::after, .s-projeler .pj-son__bag:focus-visible::after { transform: scaleX(1); }
.s-projeler .pj-son__bag:focus-visible { outline-offset: -2px; }
.s-projeler .pj-son__ad { font: 300 clamp(48px, 8.4vw, 132px)/.96 var(--serif); font-stretch: 66%; letter-spacing: -.024em; }
.s-projeler .pj-son__not { max-width: 20em; font-size: 16px; line-height: 1.5; color: var(--metin-2); }
@media (min-width: 1000px) {
  .s-projeler .pj-son__bag { grid-template-columns: minmax(0, 1fr) auto; }
  .s-projeler .pj-son__not { text-align: right; }
}

/* ── kaynak/stil/50-seramik.css ──────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════
   50-seramik.css — SAHİBİ: seramik sayfa ajanı. Kapsam: seramik.html (body.s-seramik).
   Kurallar: seçicileri sayfa sınıfıyla daraltın (çakışma olmasın); ortak bileşenler (düğme, künye, derz şeması,
   sayfa başı…) 00-temel.css'tedir — orayı DEĞİŞTİRMEYİN, gerekirse burada ezin. Hareket 05-hareket.css'tedir
   (data-reveal / data-imlec); bu dosya yalnız bu sayfanın yapısını ve iki yerel çizim durumunu taşır.
   Bu dosya derlemede assets/css/site.css'e ad sırasıyla eklenir.

   Sayfa: seramik görseli YOK. Görsel dil = dev ölçekli dar kesim serif + dört ebatlı derz şeması + canlı hesaplayıcı:
     kâğıt   BAŞ — H1 + "Aynı zemin, dört ebat" (120 × 120 cm; her kare #hesap'a giden bir bağlantı)
     mürekkep KARO HESAPLAYICI — seçili ebat büyük bir şema olarak yeniden çizilir (ölçü çizgileriyle); dev sonuç rakamı
     taş     KATALOG — ürün grupları + markalar (hairline'lar çizilerek açılır)
     kâğıt   MAĞAZA — yer adı, yatay künye, yol tarifi
   Yeni renk yok; şema tonları ortak bileşenden (.derz__kare--1…4). Kırmızı yalnız odak halkası.

   ⚠ Gizli başlangıç durumları YALNIZ html.hareket altındadır (hesaplayıcı şemasının çizgileri ek olarak form[data-hazir]
   ister: seramik.js yüklenmezse çizgiler gizli kalmasın).
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ 1 · BAŞ ═══════════════════════════════════════════════════════════════════════════════════
   Başlık dev ve dar (kule hissi); altında iki sütun: solda giriş cümlesi, sağda şemanın açıklaması.
   Sonra dört ebat yan yana: 1440 × 900'de H1 + giriş + dört şema ilk ekrana sığar.                */
.s-seramik .seramik-bas { padding: clamp(32px, 3.4vw, 56px) 0 clamp(72px, 8vw, 128px); }
.s-seramik .seramik-bas__etiket { margin-bottom: clamp(16px, 1.6vw, 24px); }
.s-seramik .seramik-bas__baslik { font: 300 clamp(60px, 10.6vw, 158px)/.95 var(--serif); font-stretch: 68%; letter-spacing: -.026em; color: var(--metin); text-wrap: balance; }
/* H1 = sayfanın LCP öğesi. ÖLÇÜLDÜ (Chrome 155, CPU 4×): H1'in KENDİSİ ya da alt ağacı translate ile canlandırılırken LCP, animasyon bitince
   (yazı tipi hazır olduktan 1,2 sn sonra: ~2,1 sn) bildiriliyor; translate H1'in ATASINDA canlandırılırsa LCP ≈ yazı tipi + 260 ms (~1,25 sn).
   Bu yüzden YÜKSELİŞ (28 px → 0, 1100 ms) sarmalayıcıda (:has — desteklemeyen tarayıcıda yalnız solma kalır), opaklık H1'de 260 ms'de tamamlanır.
   Hareket dili değişmez: yine aşağıdan yukarı. */
html.hareket .s-seramik .seramik-bas .seramik-bas__baslik:not(.is-gorundu) { translate: none; }
html.hareket .s-seramik .seramik-bas .seramik-bas__baslik.is-gorundu { animation: s-baslik-op 260ms linear var(--gecikme, 0ms) backwards; }
html.hareket .s-seramik .seramik-bas__baslik-kap:has(> .seramik-bas__baslik:not(.is-gorundu)) { translate: 0 28px; }
html.hareket .s-seramik .seramik-bas__baslik-kap:has(> .seramik-bas__baslik.is-gorundu) { animation: s-baslik-yuksel var(--sure-uzun) var(--ease-cikis) var(--gecikme, 0ms) backwards; }
@keyframes s-baslik-op { from { opacity: 0; } }
@keyframes s-baslik-yuksel { from { translate: 0 28px; } }
.s-seramik .seramik-bas__satir { margin-top: clamp(24px, 2.2vw, 32px); row-gap: 28px; align-items: start; }
.s-seramik .seramik-bas__on { grid-column: 1 / span 6; max-width: 31em; font-size: clamp(18px, 1.55vw, 23px); line-height: 1.5; color: var(--govde); }
.s-seramik .seramik-bas__yan { grid-column: 8 / -1; max-width: 30em; display: grid; gap: 10px; padding-top: 4px; }
.s-seramik .seramik-bas__not { font-size: 16px; line-height: 1.55; color: var(--metin-2); }
.s-seramik .seramik-bas__yonerge { font-size: 16px; font-weight: 500; line-height: 1.55; color: var(--metin); }

/* Dört ebat: her kare bir bağlantı. Üzerine gelince / odaklanınca öteki üçü soluklaşır, çizgiler belirginleşir,
   ebat adının altı çizilir. (:has desteklemeyen tarayıcıda yalnız çizgi vurgusu ve alt çizgi olur.) */
.s-seramik .seramik-derz { margin-top: clamp(32px, 2.8vw, 42px); }
.s-seramik .seramik-derz .derz__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--oluk); }
.s-seramik .seramik-derz .derz__oge { transition: opacity .4s var(--ease-yumusak); }
.s-seramik .seramik-derz .derz__sec { position: relative; display: block; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.s-seramik .seramik-derz .derz__sec:focus-visible { outline: 2px solid var(--kirmizi); outline-offset: 8px; }
.s-seramik .seramik-derz .derz__zemin, .s-seramik .seramik-derz .derz__cizgi { transition: stroke .3s var(--ease-yumusak), stroke-width .3s var(--ease-yumusak); }
.s-seramik .seramik-derz .derz__sec:is(:hover, :focus-visible) .derz__kare { --derz: rgba(14, 15, 16, .66); }
.s-seramik .seramik-derz .derz__sec:is(:hover, :focus-visible) .derz__kare--3 { --derz: rgba(238, 235, 229, .8); }
.s-seramik .seramik-derz .derz__sec:is(:hover, :focus-visible) .derz__cizgi { stroke-width: 1.6; }
.s-seramik .seramik-derz .derz__alt { display: grid; gap: 3px; margin-top: 18px; }
.s-seramik .seramik-derz .derz__ebat { position: relative; justify-self: start; padding-bottom: 6px; font: 400 clamp(22px, 2vw, 30px)/1.15 var(--serif); font-stretch: 100%; letter-spacing: -.006em; white-space: nowrap; color: var(--metin); }
.s-seramik .seramik-derz .derz__ebat::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--sure-orta) var(--ease-cikis); }
.s-seramik .seramik-derz .derz__sec:is(:hover, :focus-visible) .derz__ebat::after { transform: scaleX(1); }
.s-seramik .seramik-derz .derz__adet { font-size: 15px; line-height: 1.4; color: var(--metin-2); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .s-seramik .seramik-derz .derz__liste:has(.derz__sec:hover) .derz__oge:not(:has(.derz__sec:hover)) { opacity: .42; }
}
.s-seramik .seramik-derz .derz__liste:has(.derz__sec:focus-visible) .derz__oge:not(:has(.derz__sec:focus-visible)) { opacity: .42; }

/* ═══ 2 · KARO HESAPLAYICI (mürekkep) ═════════════════════════════════════════════════════════════
   Sol: alan (dev serif rakam, tek alt çizgi) + ebat + fire seçenekleri. Sağ: seçili ebat 120 × 120 cm'lik
   zeminde, ölçü çizgileriyle. Altta tam genişlikte sonuç: dev rakam + ayrıntı + not + WhatsApp.         */
.s-seramik .hesap { --sema-yan: clamp(76px, 6.6vw, 96px); padding: clamp(80px, 9vw, 144px) 0 clamp(88px, 10vw, 152px); }
.s-seramik .hesap__bas { row-gap: 28px; align-items: end; }
.s-seramik .hesap__baslik-kap { grid-column: 1 / span 8; }
.s-seramik .hesap__baslik { margin-top: 22px; font: 300 clamp(54px, 8.2vw, 124px)/.96 var(--serif); font-stretch: 68%; letter-spacing: -.024em; color: var(--metin); text-wrap: balance; }
.s-seramik .hesap__giris { grid-column: 9 / -1; max-width: 22em; padding-bottom: 10px; font-size: clamp(17.5px, 1.3vw, 20px); line-height: 1.55; color: var(--govde); }
/* JS yokken: form gizli, yerine kural + WhatsApp bağlantısı */
.s-seramik .hesap__yedek { display: none; margin-top: 40px; max-width: 36em; color: var(--govde); }
html:not(.js) .s-seramik .hesap__yedek { display: block; }
html:not(.js) .s-seramik .hesap__form { display: none; }

.s-seramik .hesap__form { margin-top: clamp(48px, 5vw, 80px); row-gap: clamp(36px, 3.6vw, 52px); align-items: start; }
.s-seramik .hesap__grup--alan { grid-column: 1 / span 6; }
.s-seramik .hesap__sonuc-ana { grid-column: 8 / -1; min-width: 0; padding-left: var(--sema-yan); }
.s-seramik .hesap__girdi { grid-column: 1 / span 6; display: grid; gap: clamp(32px, 3.4vw, 48px); }
.s-seramik .hesap__sema { grid-column: 8 / -1; grid-row: 2 / span 2; }
.s-seramik .hesap__detay { grid-column: 1 / span 6; }
.s-seramik .hesap__grup { min-width: 0; margin: 0; padding: 0; border: 0; }
.s-seramik .hesap__etiket { display: block; margin: 0 0 16px; padding: 0; }
.s-seramik .hesap__yardim { margin-top: 12px; max-width: 32em; font-size: 15px; line-height: 1.5; color: var(--soluk); }
.s-seramik .hesap__hata { margin-top: 12px; max-width: 32em; padding-left: 12px; border-left: 2px solid var(--metin); font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--metin); }

/* Alan: dev serif rakam, yalnız alt çizgi; odakta çizgi belirginleşir ve kırmızı halka çevreler */
.s-seramik .hesap__alan-kutu { display: flex; align-items: baseline; gap: 14px; border-bottom: 1px solid var(--cizgi-g); transition: border-color .3s var(--ease-yumusak); }
.s-seramik .hesap__alan-kutu:hover { border-bottom-color: var(--metin); }
.s-seramik .hesap__alan-kutu:focus-within { border-bottom-color: var(--metin); outline: 2px solid var(--kirmizi); outline-offset: 6px; }
.s-seramik .hesap__alan { flex: 1 1 auto; width: 100%; min-width: 0; padding: 0 0 6px; border: 0; border-radius: 0; background: transparent; color: var(--metin); font: 300 clamp(56px, 6.2vw, 92px)/1.1 var(--serif); font-stretch: 78%; letter-spacing: -.02em; outline: none; caret-color: var(--metin); }
.s-seramik .hesap__alan::placeholder { color: rgba(238, 235, 229, .56); opacity: 1; }
.s-seramik .hesap__alan[aria-invalid="true"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }
.s-seramik .hesap__alan-kutu:has(.hesap__alan[aria-invalid="true"]) { border-bottom-width: 2px; border-bottom-color: var(--metin); }
.s-seramik .hesap__birim { flex: none; font: 300 clamp(28px, 3vw, 44px)/1 var(--serif); font-stretch: 90%; color: var(--metin-2); }

/* Seçenekler (ebat, fire): gerçek radyo düğmeleri; seçili olan dolu, sağ üst köşesi logo açısıyla pahlı */
.s-seramik .hesap__secenekler { display: grid; gap: 10px; }
.s-seramik .hesap__secenekler--ebat { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.s-seramik .hesap__secenekler--fire { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 420px; }
.s-seramik .hesap__sec { position: relative; display: block; margin: 0; cursor: pointer; }
.s-seramik .hesap__sec input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.s-seramik .hesap__sec-yuz { position: relative; display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 10px; border: 1px solid var(--cizgi-g); background: transparent; color: var(--metin); font: 500 17px/1.2 var(--sans); white-space: nowrap; transition: background-color .25s var(--ease-yumusak), border-color .25s var(--ease-yumusak), color .25s var(--ease-yumusak); }
.s-seramik .hesap__sec:hover .hesap__sec-yuz { border-color: var(--metin); }
.s-seramik .hesap__sec input:checked + .hesap__sec-yuz { border-color: var(--dugme); background: var(--dugme); color: var(--dugme-y); }
.s-seramik .hesap__sec-yuz::after { content: ""; position: absolute; top: -1px; right: -1px; width: 13.572px; height: 23.75px; background: var(--zemin); clip-path: polygon(0 0, 100% 0, 100% 100%); transform: scale(0); transform-origin: 100% 0; transition: transform var(--sure-orta) var(--ease-cikis); pointer-events: none; }
.s-seramik .hesap__sec input:checked + .hesap__sec-yuz::after { transform: scale(1); }
.s-seramik .hesap__sec input:focus-visible + .hesap__sec-yuz { outline: 2px solid var(--kirmizi); outline-offset: 3px; }

/* Canlı şema: seçili ebat 120 × 120 cm'lik zeminde. Katmanlar üst üste; seçili olan görünür.
   Üstte bir karonun eni, solda boyu ölçü çizgisiyle gösterilir (yatay yazı; dikey yazı YOK). */
.s-seramik .hesap__sema { padding: 48px 0 0 var(--sema-yan); }
.s-seramik .hesap__kare { position: relative; aspect-ratio: 1; }
/* Çapraz geçişte eski katman, yenisi tam görünene dek yerinde kalır (iki yarı saydam katman koyu zeminde zemini soldururdu): çıkan katman gecikmeyle bir anda gizlenir, giren katman üstte solarak gelir. */
.s-seramik .hesap__katman { position: absolute; inset: 0; z-index: 1; opacity: 1; visibility: hidden; transition: visibility 0s linear .26s; }
.s-seramik .hesap__katman.is-secili { z-index: 2; visibility: visible; transition: none; }
html.hareket .s-seramik .hesap__form[data-hazir] .hesap__katman.is-secili { animation: s-katman-gir .24s var(--ease-yumusak) backwards; }
@keyframes s-katman-gir { from { opacity: 0; } }
.s-seramik .hesap__katman .derz__kare { width: 100%; height: 100%; aspect-ratio: auto; }
.s-seramik .hesap__olcu { position: absolute; display: block; color: var(--metin-2); }
.s-seramik .hesap__olcu--yatay { left: 0; top: -22px; width: var(--olcu); height: 10px; border-left: 1px solid currentColor; border-right: 1px solid currentColor; }
.s-seramik .hesap__olcu--yatay::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; }
.s-seramik .hesap__olcu--dikey { top: 0; left: -22px; width: 10px; height: var(--olcu); border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.s-seramik .hesap__olcu--dikey::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: currentColor; }
.s-seramik .hesap__olcu-yazi { position: absolute; white-space: nowrap; font: 500 14px/1 var(--sans); color: var(--metin); }
.s-seramik .hesap__olcu--yatay .hesap__olcu-yazi { left: 50%; bottom: calc(100% + 6px); translate: -50% 0; }
.s-seramik .hesap__olcu--dikey .hesap__olcu-yazi { right: calc(100% + 8px); top: 50%; translate: 0 -50%; }
.s-seramik .hesap__sema-yazi { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 22px; }
.s-seramik .hesap__sema-ebat { font: 400 clamp(26px, 2.4vw, 36px)/1.1 var(--serif); font-stretch: 100%; color: var(--metin); white-space: nowrap; }
.s-seramik .hesap__sema-zemin { font-size: 15px; color: var(--metin-2); }
/* Çizim: bölüm görününce seçili şemanın çizgileri çizilir; ebat değişince yeni şema yeniden çizilir (seramik.js is-etkin koyar) */
html.hareket .s-seramik .hesap__form[data-hazir] .hesap__katman:not(.is-etkin) .derz__cizgi { transform: scaleX(0); }
html.hareket .s-seramik .hesap__form[data-hazir] .hesap__katman:not(.is-etkin) .derz__cizgi--d { transform: scaleY(0); }
html.hareket .s-seramik .hesap__form[data-hazir] .hesap__katman:not(.is-etkin) .hesap__olcu { opacity: 0; }
html.hareket .s-seramik .hesap__katman.is-etkin .derz__cizgi { animation: s-derz-yatay 900ms var(--ease-cikis) calc(80ms + var(--i, 0) * 70ms) backwards; }
html.hareket .s-seramik .hesap__katman.is-etkin .derz__cizgi--d { animation-name: s-derz-dikey; }
html.hareket .s-seramik .hesap__katman.is-etkin .hesap__olcu { animation: s-olcu 700ms var(--ease-cikis) 520ms backwards; }
@keyframes s-derz-yatay { from { transform: scaleX(0); } }
@keyframes s-derz-dikey { from { transform: scaleY(0); } }
@keyframes s-olcu { from { opacity: 0; } }

/* Sonuç: alanın hemen yanında dev rakam (giriş ↔ çıkış aynı satırda); ayrıntılar altta. Yer değişmez: boş ve dolu durum aynı alanı kaplar. */
.s-seramik .hesap__sayi-satir { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 clamp(12px, 1.4vw, 22px); margin-top: 6px; }
.s-seramik .hesap__sayi { display: block; font: 300 clamp(88px, 10.6vw, 160px)/.92 var(--serif); font-stretch: 66%; letter-spacing: -.034em; font-variant-numeric: lining-nums; color: var(--metin); }
.s-seramik .hesap__form[data-bos] .hesap__sayi { color: var(--soluk); }
.s-seramik .hesap__sayi-birim { font: 300 clamp(28px, 3vw, 46px)/1 var(--serif); font-stretch: 78%; color: var(--metin-2); }
.s-seramik .hesap__bos { margin-top: 12px; font-size: 15px; line-height: 1.4; color: var(--soluk); }
.s-seramik .hesap__form:not([data-bos]) .hesap__bos { visibility: hidden; }
html.hareket .s-seramik .hesap__sayi.is-yeni { animation: s-sayi var(--sure-orta) var(--ease-cikis) backwards; }
@keyframes s-sayi { from { opacity: 0; translate: 0 .14em; } }
/* Ayrıntı: net ihtiyaç ↔ fire çubuğu (fire payı = çubuğun dolmayan ucu), üç satır, not, WhatsApp */
.s-seramik .hesap__detay { padding-top: clamp(28px, 3vw, 40px); }
.s-seramik .hesap__detay::before { background: var(--cizgi-g); }
.s-seramik .hesap__cubuk { position: relative; height: 10px; border: 1px solid var(--cizgi-g); transition: opacity var(--sure-orta) var(--ease-yumusak); }
.s-seramik .hesap__cubuk-net { position: absolute; inset: -1px; background: var(--metin); transform: scaleX(var(--net, .91)); transform-origin: 0 50%; transition: transform var(--sure-orta) var(--ease-cikis); }
.s-seramik .hesap__form[data-bos] .hesap__cubuk { opacity: .3; }
.s-seramik .hesap__cubuk-yazi { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; font-size: 14.5px; line-height: 1.4; color: var(--soluk); transition: opacity var(--sure-orta) var(--ease-yumusak); }
.s-seramik .hesap__form[data-bos] .hesap__cubuk-yazi { opacity: .3; }
.s-seramik .hesap__ayrinti { margin-top: clamp(24px, 2.6vw, 36px); }
.s-seramik .hesap__ayrinti > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 15px 0 16px; border-top: 1px solid var(--cizgi); }
.s-seramik .hesap__ayrinti > div:last-child { border-bottom: 1px solid var(--cizgi); }
.s-seramik .hesap__ayrinti dt { font-size: 15px; line-height: 1.4; color: var(--metin-2); }
.s-seramik .hesap__ayrinti dd { font: 400 clamp(22px, 1.9vw, 28px)/1.2 var(--serif); font-stretch: 100%; text-align: right; color: var(--metin); }
.s-seramik .hesap__ayrinti-not { display: block; margin-top: 3px; font: 400 14px/1.3 var(--sans); color: var(--soluk); }
.s-seramik .hesap__alt { display: grid; justify-items: start; gap: 22px; margin-top: clamp(24px, 2.6vw, 36px); }
.s-seramik .hesap__not { max-width: 32em; font-size: 15px; line-height: 1.5; color: var(--metin-2); }

/* ═══ 3 · KATALOG (taş) ═══════════════════════════════════════════════════════════════════════════ */
.s-seramik .katalog { padding: var(--bolum) 0; }
.s-seramik .katalog__izgara { row-gap: 40px; align-items: start; }
.s-seramik .katalog__bas { grid-column: 1 / span 4; }
.s-seramik .katalog__baslik { font: 300 clamp(44px, 5.4vw, 80px)/1 var(--serif); font-stretch: 72%; letter-spacing: -.02em; color: var(--metin); text-wrap: balance; }
.s-seramik .katalog__giris { margin-top: 22px; max-width: 16em; font-size: 17px; line-height: 1.55; color: var(--govde); }
.s-seramik .seramik-katalog { grid-column: 6 / -1; }
.s-seramik .seramik-katalog > div { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: var(--oluk); row-gap: 8px; align-items: baseline; padding: clamp(24px, 2.4vw, 34px) 0 clamp(26px, 2.6vw, 36px); }
.s-seramik .seramik-katalog > div:last-child { border-bottom: 1px solid var(--cizgi); }
.s-seramik .seramik-katalog dt { font: 400 clamp(26px, 2.5vw, 38px)/1.1 var(--serif); font-stretch: 84%; letter-spacing: -.01em; color: var(--metin); }
.s-seramik .seramik-katalog dd { max-width: 26em; font-size: 17px; line-height: 1.55; color: var(--govde); }
.s-seramik .markalar { margin-top: clamp(88px, 10vw, 152px); row-gap: 28px; align-items: start; }
.s-seramik .markalar__baslik { grid-column: 1 / span 4; font: 300 clamp(36px, 4vw, 60px)/1.04 var(--serif); font-stretch: 72%; letter-spacing: -.018em; color: var(--metin); text-wrap: balance; }
.s-seramik .seramik-markalar { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--oluk); border-bottom: 1px solid var(--cizgi); }
.s-seramik .seramik-markalar li { padding: 17px 0 19px; font: 400 clamp(20px, 1.7vw, 24px)/1.2 var(--serif); font-stretch: 88%; letter-spacing: -.004em; color: var(--metin); }
@media (min-width: 1000px) {
  .s-seramik .katalog__bas, .s-seramik .markalar__baslik { position: sticky; top: calc(var(--ust-h) + 40px); }
}

/* ═══ 4 · MAĞAZA (kâğıt) ══════════════════════════════════════════════════════════════════════════ */
.s-seramik .magaza { padding: var(--bolum) 0 clamp(80px, 8vw, 120px); }
.s-seramik .magaza__ust { row-gap: 32px; align-items: end; }
.s-seramik .magaza__bas { grid-column: 1 / span 7; }
.s-seramik .magaza__baslik { margin-top: 22px; font: 300 clamp(52px, 8vw, 120px)/.96 var(--serif); font-stretch: 68%; letter-spacing: -.024em; color: var(--metin); text-wrap: balance; }
.s-seramik .magaza__metin { grid-column: 9 / -1; max-width: 26em; padding-bottom: 8px; }
.s-seramik .magaza__bag { margin-top: 16px; }
.s-seramik .magaza__kunye { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--oluk); margin-top: clamp(56px, 6vw, 96px); }
.s-seramik .magaza__kunye > div { display: grid; align-content: start; gap: 12px; padding-top: 22px; }
.s-seramik .magaza__kunye dd { font-size: 17px; line-height: 1.55; color: var(--metin); }
.s-seramik .magaza__kunye a { text-decoration: none; }
.s-seramik .magaza__kunye a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.s-seramik .magaza__tel dd { font: 400 clamp(24px, 2vw, 30px)/1.25 var(--serif); font-stretch: 100%; letter-spacing: -.004em; }
.s-seramik .magaza__eylem { margin-top: clamp(40px, 4.4vw, 64px); }

/* ═══ Duyarlı ════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .s-seramik .seramik-katalog { grid-column: 5 / -1; }
  .s-seramik .seramik-markalar { grid-column: 5 / -1; }
  .s-seramik .magaza__kunye { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
}
@media (max-width: 999px) {
  .s-seramik .seramik-bas__on, .s-seramik .seramik-bas__yan { grid-column: 1 / -1; }
  .s-seramik .hesap__baslik-kap, .s-seramik .hesap__giris { grid-column: 1 / -1; }
  .s-seramik .hesap__giris { padding-bottom: 0; }
  .s-seramik .hesap__grup--alan, .s-seramik .hesap__sonuc-ana, .s-seramik .hesap__girdi, .s-seramik .hesap__detay { grid-column: 1 / -1; }
  .s-seramik .hesap__sema { grid-column: 1 / -1; grid-row: auto; max-width: 560px; }
  .s-seramik .hesap__sonuc-ana { padding-left: 0; }
  .s-seramik .katalog__bas, .s-seramik .seramik-katalog, .s-seramik .markalar__baslik, .s-seramik .seramik-markalar { grid-column: 1 / -1; }
  .s-seramik .magaza__bas, .s-seramik .magaza__metin { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .s-seramik .seramik-derz .derz__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; column-gap: 16px; }
}
@media (max-width: 630px) {
  .s-seramik .seramik-bas__baslik, .s-seramik .hesap__baslik, .s-seramik .magaza__baslik, .s-seramik .katalog__baslik, .s-seramik .markalar__baslik { font-weight: 400; }
  .s-seramik .seramik-bas__baslik { line-height: 1; }
}
@media (max-width: 599px) {
  .s-seramik .hesap__secenekler--ebat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-seramik .hesap__secenekler--fire { max-width: none; }
  .s-seramik .hesap { --sema-yan: 72px; }
  .s-seramik .hesap__sema { padding-top: 44px; }
  .s-seramik .seramik-katalog > div { grid-template-columns: minmax(0, 1fr); }
  .s-seramik .seramik-markalar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-seramik .seramik-markalar li { font-size: 19px; }
  .s-seramik .hesap__alt .dugme { width: 100%; }
  /* Telefonda künye satır satır: etiket solda, değer sağda */
  .s-seramik .magaza__kunye { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .s-seramik .magaza__kunye > div { grid-template-columns: 92px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 16px 0 17px; }
  .s-seramik .magaza__kunye dd { font-size: 16px; }
  .s-seramik .magaza__tel dd { font-size: 24px; }
  /* Dokunma hedefi ≥ 44 px: künyedeki bağlantılar blok olur (satır sonu <br> kalkar) */
  .s-seramik .magaza__kunye dd a { display: block; padding: 10px 0; }
  .s-seramik .magaza__kunye > div:not(:first-child) br { display: none; }
}

/* ── kaynak/stil/60-iletisim.css ─────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════
   60-iletisim.css — SAHİBİ: iletisim sayfa ajanı. Kapsam: iletisim.html (body.s-iletisim) ve 404.html (body.s-404).
   Kurallar: seçicileri sayfa sınıfıyla daraltın (çakışma olmasın); ortak bileşenler (düğme, künye, proje kartı,
   perde, çizgi …) 00-temel / 05-hareket / 07-bilesenler'dedir — orayı DEĞİŞTİRMEYİN, gerekirse burada ezin.
   Bu dosya derlemede assets/css/site.css'e ad sırasıyla eklenir.

   İLETİŞİM (v4). İlk ekran: solda kâğıt zeminde dar-kesim başlık + künye, sağda MÜREKKEP talep paneli.
   Panel görünümün sağ kenarına taşar: sayfa şeridi 4 sütunlu bir ızgaradır
   [kenar 1fr] [sol 680] [sağ 680] [kenar 1fr]; panel "sağ + kenar" alanını kaplar. Böylece 1920 px'te de panel
   kenara erişir, içerik ise öteki bölümlerle aynı 1360 px'lik ızgarada kalır. ≤ 999 px'te tek sütun.
   Hareket: panel = perde (kâğıt rengi örtü alttan kalkar → koyu duvar YÜKSELİR), başlık bloğu 28 px yükselir,
   künye bloğu yükselir; harita da perdeyle açılır. Gizli başlangıç durumları çekirdekte (html.hareket).
   Konum bölümü: taş zemin; solda semt adı + adres, sağda harita (renkleri TERS ÇEVRİLMEZ — 00-temel: grayscale .35).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Baş: izgara ─────────────────────────────────────────────────── */
.s-iletisim .ilt { display: grid; grid-template-columns: minmax(var(--kenar), 1fr) minmax(0, 680px) minmax(0, 680px) minmax(var(--kenar), 1fr); }
/* Sol sütun: başlık üstte, künye altta (panelle aynı yükseklikte biter) */
.s-iletisim .ilt__sol { grid-column: 2; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(36px, 3.8vw, 60px);
  padding: clamp(44px, 4.6vw, 72px) clamp(28px, 3.4vw, 56px) clamp(48px, 4.6vw, 72px) 0; }
.s-iletisim .ilt__etiket { margin-bottom: clamp(28px, 2.8vw, 40px); }   /* büyük İ'nin noktası etikete değmesin */
.s-iletisim .ilt__baslik { font: 300 clamp(72px, 9.6vw, 144px)/.9 var(--serif); font-stretch: 66%; letter-spacing: -.024em; color: var(--metin); }
.s-iletisim .ilt__on { margin-top: clamp(24px, 2.4vw, 34px); max-width: 24em; font-size: clamp(17.5px, 1.35vw, 20px); line-height: 1.55; color: var(--govde); }

/* Künye levhası: etiket sütunu + değer; telefonlar serif (anasayfa iletişimiyle aynı dil). Çizgiler satırların kendi kenarlığıdır:
   blok tek parça yükselir (aynı anda en çok 3 canlı öğe kuralı — satır başına çizgi çizdirmek 5 öğe daha olurdu). */
.s-iletisim .ilt-kunye { border-bottom: 1px solid var(--cizgi); }
.s-iletisim .ilt-kunye__satir { display: grid; grid-template-columns: 116px minmax(0, 1fr); column-gap: 20px; align-items: baseline; padding: 17px 0 18px; border-top: 1px solid var(--cizgi); }
.s-iletisim .ilt-kunye dd { font-size: 17px; line-height: 1.5; color: var(--metin); }
.s-iletisim .ilt-kunye__satir:first-child dd { display: flex; flex-wrap: wrap; column-gap: clamp(20px, 2vw, 30px); }   /* iki telefon yan yana sığarsa; sığmazsa alt alta */
.s-iletisim .ilt-kunye dd .bag { font: 400 17px/1.5 var(--sans); }
.s-iletisim .ilt-kunye__tel { position: relative; display: block; width: max-content; padding-bottom: 3px; font: 400 clamp(27px, 2.3vw, 34px)/1.24 var(--serif); font-stretch: 100%; letter-spacing: -.004em; white-space: nowrap; text-decoration: none; }
.s-iletisim .ilt-kunye__tel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--sure-orta) var(--ease-cikis); }
.s-iletisim .ilt-kunye__tel:hover::after, .s-iletisim .ilt-kunye__tel:focus-visible::after { transform: scaleX(1); }

/* ── Talep paneli (mürekkep, kenara taşar) ───────────────────────── */
/* Panel "sağ + kenar" alanını kaplar; içi de aynı iki sütunludur: içerik YALNIZ sağ sütunda (sol sütunun sağ kenarı = sayfa kabının sağ kenarı),
   kenar sütunu koyu zemin olarak kalır → form her genişlikte öteki bölümlerle aynı çizgide biter. */
.s-iletisim .ilt-form { grid-column: 3 / -1; display: grid; grid-template-columns: minmax(0, 680px) minmax(var(--kenar), 1fr); }
.s-iletisim .ilt-form__ic { grid-column: 1; min-width: 0; padding: clamp(44px, 4.6vw, 72px) 0 clamp(48px, 4.6vw, 72px) clamp(32px, 4.4vw, 68px); }
/* Panelin örtüsü SAYFA zemininin (kâğıt) rengindedir: koyu panel kâğıdın altından yükselir.
   Giriş (açılış anı, ≤ 1,4 sn): duvar 1200 ms iç-dış yumuşatmayla YÜKSELİR (anasayfa açılışıyla aynı ağırlık); başlık bloğu ve künye
   520 ms'de yükselir (künye 60 ms geriden; blok başına TEK yükseliş → aynı anda 3 öğe). Geri/ileri'de oynamaz (data-reveal-giris).
   ⚠ NEDEN 520 ms (çekirdeğin 1100'ü değil): bu sayfanın ilk ekranında görsel yok → LCP adayı H1 metnidir ve Chrome metni opaklığı
   yükselirken ölçer: LCP ≈ yazı tipi hazır (≈ 700 ms, CPU 4×) + gecikme + animasyon süresi (Chrome opaklık 1'e varınca kaydediyor).
   Ölçüldü (CPU 4×): 1100 ms + 260 ms gecikme → LCP 2080 ms; 700 ms → 1450; 500 ms → 1204; animasyonsuz → 784. */
.s-iletisim .ilt-form > .perde-ortu { background: var(--kagit); }
html.hareket .s-iletisim .ilt-form.is-gorundu > .perde-ortu { animation-duration: 1200ms; animation-timing-function: var(--ease-gecis); }
.s-iletisim .ilt-form__baslik { font: 400 clamp(32px, 3vw, 44px)/1.08 var(--serif); font-stretch: 84%; letter-spacing: -.012em; color: var(--metin); }
.s-iletisim .ilt-form__aciklama { margin-top: 14px; max-width: 31em; font-size: 16.5px; line-height: 1.55; color: var(--metin-2); }
/* Aralık ızgara boşluğuyla değil kenar boşluğuyla: boş durum notu ([data-form-not]) yer kaplamasın,
   dolunca düğmenin hemen üstünde görünsün (ızgara boşluğu boş satırın iki yanında da kalırdı). */
.s-iletisim .ilt-form__form { gap: 0; margin-top: clamp(28px, 3vw, 40px); }
.s-iletisim .ilt-form__form > * + * { margin-top: 22px; }
.s-iletisim .ilt-form .form__satir { gap: 22px; }

/* Alanlar: dolgulu zemin + alt çizgi; üzerine gelince / odakta çizgi soldan sağa kalınlaşır (::after). Kırmızı YALNIZ odak halkası. */
.s-iletisim .ilt-form .alan { position: relative; gap: 7px; }
.s-iletisim .ilt-form .alan > span { font: 500 14.5px/1.3 var(--sans); color: var(--metin-2); }
.s-iletisim .ilt-form .alan input, .s-iletisim .ilt-form .alan select, .s-iletisim .ilt-form .alan textarea {
  padding: 14px 16px 13px; border: 0; border-bottom: 1px solid var(--cizgi-g); background-color: rgba(238, 235, 229, .06);
  color: var(--metin); font: 400 18px/1.4 var(--sans); transition: background-color var(--sure-ince) var(--ease-yumusak), border-color var(--sure-ince); }
.s-iletisim .ilt-form .alan input:hover, .s-iletisim .ilt-form .alan select:hover, .s-iletisim .ilt-form .alan textarea:hover { background-color: rgba(238, 235, 229, .1); border-bottom-color: var(--metin-2); }
.s-iletisim .ilt-form .alan input:focus-visible, .s-iletisim .ilt-form .alan select:focus-visible, .s-iletisim .ilt-form .alan textarea:focus-visible { outline: 2px solid var(--kirmizi); outline-offset: 3px; background-color: rgba(238, 235, 229, .1); }
.s-iletisim .ilt-form .alan::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--metin); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--sure-orta) var(--ease-cikis); pointer-events: none; }
.s-iletisim .ilt-form .alan:focus-within::after { transform: scaleX(1); }
.s-iletisim .ilt-form .alan select { -webkit-appearance: none; appearance: none; padding-right: 48px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 24px) 54%, calc(100% - 18.5px) 54%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.s-iletisim .ilt-form .alan select option { color: var(--murekkep); background-color: var(--kagit); }
.s-iletisim .ilt-form .alan textarea { min-height: 136px; }
/* Eksik alan: renk yerine ÇİZGİ + yazı (renk körlüğü ve palet): alt çizgi iki kat, etiket "— gerekli" der. */
.s-iletisim .ilt-form .alan .hata { border-bottom-color: var(--metin); box-shadow: inset 0 0 0 1px var(--metin); }
.s-iletisim .ilt-form .alan:has(> [aria-invalid="true"]) > span::after { content: " — gerekli"; font-weight: 400; }
/* Tarayıcı otomatik doldurması koyu zemini sarıya/maviye çevirmesin */
.s-iletisim .ilt-form .alan input:-webkit-autofill, .s-iletisim .ilt-form .alan input:-webkit-autofill:hover, .s-iletisim .ilt-form .alan input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--metin); caret-color: var(--metin); box-shadow: inset 0 0 0 100px #1d1e20; transition: background-color 9999s; }
.s-iletisim .ilt-form__form > .ilt-form__ipucu { margin-top: 12px; font-size: 14.5px; line-height: 1.5; color: var(--soluk); max-width: 40em; }
.s-iletisim .ilt-form__form > .form__not:empty { min-height: 0; margin-top: 0; }
.s-iletisim .ilt-form__form > .ilt-form__gonder { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 30px; }
.s-iletisim .ilt-form__form > .form__not:not(:empty) + .ilt-form__gonder { margin-top: 18px; }
.s-iletisim .ilt-form__gonder .form__bilgi { flex: 1 1 18em; max-width: 30em; line-height: 1.5; color: var(--soluk); }

/* ── Konum (taş): semt adı + adres · harita ──────────────────────── */
.s-iletisim .ilt-yer { padding: var(--bolum) 0; }
.s-iletisim .ilt-yer__izgara { align-items: stretch; row-gap: 48px; }
/* Sol sütun harita yüksekliğinde: semt adı haritanın üst kenarından, adres + düğme alt kenarından hizalanır */
.s-iletisim .ilt-yer__bas { grid-column: 1 / span 4; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.s-iletisim .ilt-yer__baslik { margin-top: 20px; font: 300 clamp(48px, 5.8vw, 92px)/1 var(--serif); font-stretch: 72%; letter-spacing: -.02em; color: var(--metin); }
.s-iletisim .ilt-yer__adres { font-size: 17px; line-height: 1.6; color: var(--govde); }
.s-iletisim .ilt-yer__eylem { margin-top: 32px; }
.s-iletisim .ilt-yer__harita { grid-column: 5 / -1; margin: 0; aspect-ratio: 16 / 10; }

/* ── Duyarlı ─────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .s-iletisim .ilt-kunye__satir { grid-template-columns: 104px minmax(0, 1fr); }
  .s-iletisim .ilt-form .form__satir { gap: 18px; }
}
@media (max-width: 999px) {
  .s-iletisim .ilt { display: block; }
  .s-iletisim .ilt__sol { padding: clamp(40px, 7vw, 64px) var(--kenar) clamp(48px, 8vw, 72px); gap: clamp(40px, 7vw, 64px); }
  .s-iletisim .ilt__baslik { font-size: clamp(80px, 24vw, 150px); }
  .s-iletisim .ilt-kunye__satir { grid-template-columns: 116px minmax(0, 1fr); }
  .s-iletisim .ilt-form { display: block; }
  .s-iletisim .ilt-form__ic { padding: clamp(44px, 7vw, 64px) var(--kenar) clamp(52px, 8vw, 72px); }
  .s-iletisim .ilt-yer__bas, .s-iletisim .ilt-yer__harita { grid-column: 1 / -1; }
  .s-iletisim .ilt-yer__harita { aspect-ratio: 16 / 10; }
}
/* Dokunmatik hedefler ≥ 44 px: .bag için ortak kural (07-bilesenler.css); telefon numaraları burada. */
@media (max-width: 999px), (pointer: coarse) {
  .s-iletisim .ilt-kunye__satir:first-child dd { row-gap: 12px; }
  .s-iletisim .ilt-kunye__tel { padding-top: 6px; padding-bottom: 6px; margin-block: -6px; }
  .s-iletisim .ilt-kunye__tel::after { bottom: 3px; }
}
@media (max-width: 599px) {
  .s-iletisim .ilt-kunye__satir { grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; padding: 15px 0 16px; }
  .s-iletisim .ilt-kunye dd { font-size: 16.5px; overflow-wrap: anywhere; }   /* 320 px'te e-posta 14 px taşıyordu */
  .s-iletisim .ilt-kunye dd .bag { font-size: 16.5px; }
  .s-iletisim .ilt-kunye__tel { font-size: 26px; }
  .s-iletisim .ilt-form__gonder { flex-direction: column; align-items: stretch; }
  .s-iletisim .ilt-form__gonder .dugme { width: 100%; }
  /* Sütun yönünde flex-basis YÜKSEKLİKTİR: 18em'lik taban notun altında ~260 px boşluk açıyordu. */
  .s-iletisim .ilt-form__gonder .form__bilgi { flex: none; }
  .s-iletisim .ilt-yer__harita { aspect-ratio: 4 / 3.6; }
}

/* ═══ 404 — sakin: tek cümle + anasayfa bağlantısı; sağda kenara taşan kuşbakışı render ═══════════════════════
   İletişimle AYNI iskelet: [kenar] [metin 680] [görsel 680] [kenar]. Görsel (Lavanta Konutları · kuşbakışı) ışık
   kutusunu açar; künye görselin içinde, sol altta. Görsel perdeyle açılır (y.projeKarti varsayılanı).             */
.s-404 .s404 { display: grid; grid-template-columns: minmax(var(--kenar), 1fr) minmax(0, 680px) minmax(0, 680px) minmax(var(--kenar), 1fr);
  min-height: min(calc(100vh - var(--ust-h)), 900px); min-height: min(calc(100svh - var(--ust-h)), 900px); }   /* svh yoksa vh */
.s-404 .s404__metin { grid-column: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(56px, 7vw, 112px) clamp(28px, 3.4vw, 56px) clamp(56px, 7vw, 112px) 0; }
.s-404 .s404__etiket { margin-bottom: clamp(26px, 2.8vw, 40px); }
.s-404 .s404__baslik { max-width: 8.6em; font: 300 clamp(60px, 8.6vw, 132px)/.94 var(--serif); font-stretch: 66%; letter-spacing: -.024em; color: var(--metin); text-wrap: balance; }
.s-404 .s404__eylem { margin-top: clamp(32px, 3.6vw, 52px); }
.s-404 .s404__gorsel { grid-column: 3 / -1; display: flex; min-width: 0; }
.s-404 .s404__gorsel .proje { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.s-404 .s404__gorsel .proje > * { grid-area: 1 / 1; }
.s-404 .s404__gorsel .proje__kare { aspect-ratio: auto; min-height: 440px; }
/* Künye görselin içinde: alt kenarda koyu tarama + açık yazı (kontrast ölçüldü) */
.s-404 .s404__gorsel .proje__kare::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(14, 15, 16, .9) 0%, rgba(14, 15, 16, .66) 24%, rgba(14, 15, 16, .3) 46%, rgba(14, 15, 16, 0) 68%); }
.s-404 .s404__gorsel .kunye { align-self: end; z-index: 2; padding: 0 var(--kenar) clamp(26px, 3vw, 44px) clamp(32px, 4.4vw, 68px);
  --metin: var(--acik); --metin-2: rgba(238, 235, 229, .86); --soluk: rgba(238, 235, 229, .78); }
.s-404 .s404__gorsel .kunye__ad { color: var(--acik); }
.s-404 .s404__gorsel .kunye__tur, .s-404 .s404__gorsel .kunye__sayi { color: rgba(238, 235, 229, .82); }
@media (max-width: 999px) {
  .s-404 .s404 { display: block; min-height: 0; }
  .s-404 .s404__metin { padding: clamp(48px, 9vw, 80px) var(--kenar) clamp(44px, 8vw, 64px); }
  .s-404 .s404__baslik { font-size: clamp(60px, 15.6vw, 120px); }
  .s-404 .s404__gorsel .proje__kare { min-height: 0; aspect-ratio: 5 / 4; }
  .s-404 .s404__gorsel .kunye { padding-left: var(--kenar); }
}