/* Yoy Mimarlık & Tasarım — İsviçre tipografisi, monokrom, yapısal */
@font-face {
  font-family: "YOY Architect";
  src: url("../fonts/Handlee-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "YOY Architect Ek";
  src: url("../fonts/PatrickHand-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --renk-zemin: #faf6f0;
  --renk-metin: #221a12;
  --renk-soluk: #94897c;
  --renk-cizgi: #e7ddd0;
  --renk-siyah: #1d150d;
  --renk-bronz: #6b4a2f;
  --pikto-zemin: #3a2a1b;

  --font-govde: "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --text-kucuk: clamp(0.68rem, 0.62rem + 0.2vw, 0.78rem);
  --text-govde: clamp(0.92rem, 0.86rem + 0.25vw, 1.05rem);
  --text-baslik: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  --text-dev: clamp(2.6rem, 1.4rem + 6vw, 7rem);

  --bosluk-akis: clamp(4.5rem, 3rem + 6vw, 10rem);

  --sure-hizli: 220ms;
  --sure-normal: 500ms;
  --sure-yavas: 900ms;
  --esne: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-govde);
  font-size: var(--text-govde);
  color: var(--renk-metin);
  background: var(--renk-zemin);
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }

/* ---------- Preloader: gerçek logo animasyonu ---------- */
.onyukleyici {
  position: fixed; inset: 0; z-index: 200;
  /* Antakya Tarihi Kent Merkezi öneri planı — logo soldaki beyaz boşlukta */
  background: #fff url("../img/onyuk-zemin.jpg") no-repeat right center / cover;
  display: grid; align-items: center; justify-items: start;
  padding-left: clamp(2rem, 9vw, 10rem);
  transition: clip-path var(--sure-yavas) var(--esne);
  clip-path: inset(0 0 0 0);
}
@media (orientation: portrait) {
  .onyukleyici {
    /* Plan portre ekranda da kenardan kenara, tam ekran görünür. */
    background-position: right center;
    background-size: cover;
    align-items: end;
    justify-items: end;
    padding: 0;
    padding-right: clamp(1.15rem, 5vw, 2.5rem);
    padding-bottom: calc(clamp(1.5rem, 5vh, 3rem) + env(safe-area-inset-bottom));
  }
  .onyukleyici .onyuk-logo {
    /* Logo, haritanın sağ altındaki açık alana yerleşir. */
    width: clamp(7.25rem, 30vw, 13rem);
    background: transparent;
    padding: 0;
    border-radius: 0;
    backdrop-filter: none;
  }
}
.onyukleyici.bitti { clip-path: inset(0 0 100% 0); pointer-events: none; }
.onyuk-logo {
  width: clamp(210px, 30vw, 330px);
  display: grid; justify-items: center; gap: 0.55rem;
}
.onyuk-logo img { height: auto; }
.onyuk-logo .goz {
  width: 66%;
  transform-origin: 50% 60%;
  animation:
    gozGel 0.8s var(--esne) 0.15s both,
    gozKirp 0.42s ease-in-out 1.25s 1;
}
.onyuk-logo .yoy {
  width: 100%;
  clip-path: inset(0 0 100% 0);
  animation: yoyGel 0.9s var(--esne) 0.6s forwards;
}
.onyuk-logo .etiket {
  width: 92%;
  opacity: 0;
  animation: etiketGel 0.8s ease 1.15s forwards;
}
@keyframes gozGel {
  from { opacity: 0; transform: translateY(-26px) scale(0.92); }
  to   { opacity: 1; transform: none; }
}
@keyframes gozKirp {
  0%, 100% { transform: scaleY(1); }
  45%      { transform: scaleY(0.06); }
}
@keyframes yoyGel {
  from { clip-path: inset(0 0 100% 0); transform: translateY(16px); }
  to   { clip-path: inset(0 0 0 0); transform: none; }
}
@keyframes etiketGel {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Üst bar ---------- */
.ustbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 2rem; padding: 1.1rem clamp(1.2rem, 3vw, 3rem);
  background: color-mix(in srgb, var(--renk-zemin) 88%, transparent);
  backdrop-filter: blur(10px);
  transform: translateY(0);
  transition: transform var(--sure-normal) var(--esne), box-shadow var(--sure-normal);
}
.ustbar.gizli { transform: translateY(-110%); }
.ustbar.golgeli { box-shadow: 0 1px 0 var(--renk-cizgi); }
.marka { display: flex; align-items: center; gap: 0.7rem; }
.marka .logo-img { width: 64px; height: auto; }
.marka small {
  font-size: 0.6rem; letter-spacing: 0.14em; color: var(--renk-soluk);
  text-transform: uppercase; white-space: nowrap;
}

.kategori-nav { display: flex; justify-content: center; gap: clamp(1rem, 3vw, 3.2rem); }
.kategori-nav button {
  position: relative; text-transform: uppercase;
  font-size: var(--text-kucuk); letter-spacing: 0.22em; color: var(--renk-soluk);
  padding: 0.4rem 0.1rem;
  transition: color var(--sure-hizli);
}
.kategori-nav button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--renk-metin);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--sure-normal) var(--esne);
}
.kategori-nav button:hover, .kategori-nav button:focus-visible { color: var(--renk-metin); }
.kategori-nav button.aktif { color: var(--renk-metin); }
.kategori-nav button.aktif::after, .kategori-nav button:hover::after { transform: scaleX(1); }

.arama { display: flex; align-items: center; gap: 0.5rem; justify-self: end; }
.arama svg { width: 16px; height: 16px; stroke: var(--renk-soluk); }
.arama input {
  border: 0; outline: 0; background: transparent;
  font-size: var(--text-kucuk); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--renk-metin); width: 170px; font-family: inherit;
}
.arama input::placeholder { color: var(--renk-soluk); transition: opacity 300ms; }
.arama.donuyor input::placeholder { opacity: 0; }

/* ---------- Kapak ---------- */
.kapak {
  min-height: 62vh; display: grid; align-content: end;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 42%);
  column-gap: clamp(1.5rem, 3vw, 4rem);
  padding: 9rem clamp(1.2rem, 3vw, 3rem) 3.5rem;
}
.kapak h1, .kapak > p { grid-column: 1; }
.surec { grid-column: 1 / -1; }

/* Restorasyon sahnesi — 5 usta iş başında (siyah kontur, şeffaf zemin) */
.kapak-sahne {
  grid-column: 2; grid-row: 1 / span 2;
  align-self: end; justify-self: end;
  width: min(100%, 620px);
  pointer-events: none;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.1s ease 0.7s, transform 1.1s var(--esne) 0.7s;
}
body.hazir .kapak-sahne { opacity: 1; transform: none; }
.kapak-sahne svg { width: 100%; height: auto; display: block; }
.kapak-sahne .san {
  stroke: var(--renk-metin); stroke-width: 3.4; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.kapak-sahne .san [fill="#faf6f0"] { fill: var(--renk-zemin); }
/* Gözler: imleci takip eder (app.js) */
.kapak-sahne .goz circle { fill: var(--renk-metin); stroke: none; }
.kapak-sahne .goz { will-change: transform; }
/* --- Ustaların gelişi: yürüyerek girer, iskele/merdivendekiler tırmanır --- */
@keyframes adimA { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(19deg); } 75% { transform: rotate(-15deg); } }
@keyframes adimB { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-19deg); } 75% { transform: rotate(15deg); } }
body.hazir .gel .bacakA { animation: adimA var(--adim, 0.8s) ease-in-out var(--adimGecikme, 0s) var(--adimN, 8); }
body.hazir .gel .bacakB { animation: adimB var(--adim, 0.8s) ease-in-out var(--adimGecikme, 0s) var(--adimN, 8); }
/* U1: gecikmeli gelir, yalnızca yürürken adım atar (4.4s), sonra asansörde dik durur */
.gel-u1 { --adim: 0.55s; --adimN: 8; --adimGecikme: 1.2s; }
.gel-u5 { --adim: 0.5s; --adimN: 16; }
@keyframes gelU1 { 0% { transform: translate(-530px, 490px); } 55% { transform: translate(0, 490px); } 100% { transform: none; } }
body.hazir .gel-u1 { animation: gelU1 8s ease-in-out 1.2s both; }
/* Asansör platformu: usta ile aynı zamanlamayla birlikte yükselir */
@keyframes asansorKalk { 0%, 55% { transform: translateY(490px); } 100% { transform: none; } }
body.hazir .asansor { animation: asansorKalk 8s ease-in-out 1.2s both; }
@keyframes gelU2 { from { transform: translateX(-460px); } to { transform: none; } }
body.hazir .gel-u2 { animation: gelU2 6.4s ease-in-out both; }
@keyframes gelU3 { from { transform: translateX(-300px); } to { transform: none; } }
body.hazir .gel-u3 { animation: gelU3 6.4s ease-in-out both; }
@keyframes gelU4 { from { transform: translateX(430px); } to { transform: none; } }
body.hazir .gel-u4 { animation: gelU4 6.4s ease-in-out both; }
@keyframes gelU5 { 0% { transform: translate(160px, 184px); } 55% { transform: translate(0, 184px); } 100% { transform: none; } }
body.hazir .gel-u5 { animation: gelU5 8s ease-in-out both; }

/* --- İş döngüleri: gecikmeler "hazir" anından sayılır, herkes yerine geçince başlar --- */
@keyframes belirt { to { opacity: 1; } }
.anim-tripod, .anim-olcum, .anim-olcum-uc, .anim-kova { opacity: 0; }
@keyframes malaVur { from { transform: rotate(-16deg); } to { transform: rotate(9deg); } }
body.hazir .anim-mala { animation: malaVur 1.4s ease-in-out 9.7s infinite alternate; }
/* Duvara monte edilen ölçüm cihazı: usta asansörle varınca belirir */
.anim-cihaz { opacity: 0; }
body.hazir .anim-cihaz { animation: belirt 0.4s ease 9.4s forwards; }
@keyframes tasKaldir { from { transform: rotate(26deg); } to { transform: rotate(-3deg); } }
body.hazir .anim-govde { animation: tasKaldir 2.6s ease-in-out 6.7s infinite alternate; }
body.hazir .anim-tripod { animation: belirt 0.4s ease 6.6s forwards; }
@keyframes olcumAk { to { stroke-dashoffset: -56; } }
body.hazir .anim-olcum {
  stroke-dasharray: 7 7;
  animation: belirt 0.4s ease 9.9s forwards, olcumAk 1.7s linear 9.9s infinite;
}
body.hazir .anim-olcum-uc { animation: belirt 0.4s ease 9.9s forwards; }
@keyframes knobCevir { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }
body.hazir .anim-knob { animation: knobCevir 1.9s ease-in-out 6.7s infinite alternate; }
@keyframes isaretEt { from { transform: rotate(-8deg); } to { transform: rotate(7deg); } }
body.hazir .anim-isaret { animation: isaretEt 2.3s ease-in-out 6.7s infinite alternate; }
@keyframes paftaBak { from { transform: rotate(0deg); } to { transform: rotate(-3deg); } }
body.hazir .anim-pafta { animation: paftaBak 2.3s ease-in-out 6.7s infinite alternate; transform-box: fill-box; transform-origin: 10% 20%; }
@keyframes sivaYap { from { transform: rotate(-15deg); } to { transform: rotate(12deg); } }
body.hazir .anim-siva { animation: sivaYap 1.15s ease-in-out 8.4s infinite alternate; }
@keyframes kovaSalla { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
body.hazir .anim-kova { animation: belirt 0.4s ease 8.4s forwards, kovaSalla 2.9s ease-in-out 8.8s infinite alternate; }

@media (max-width: 1020px) {
  .kapak { grid-template-columns: 1fr; }
  .kapak-sahne { grid-column: 1; grid-row: auto; margin-top: 2.2rem; justify-self: stretch; width: 100%; }
}
.kapak h1 {
  font-family: "YOY Architect Ek", "YOY Architect", "Noteworthy", "Chalkboard SE", sans-serif;
  font-size: clamp(2.6rem, 1.35rem + 4.8vw, 6.7rem);
  font-weight: 400; line-height: 0.98; letter-spacing: -0.025em;
  text-transform: none; max-width: 18ch;
}
.kapak h1 .satir {
  display: block; overflow: hidden;
  padding: 0.09em 0 0.24em; margin: -0.09em 0 -0.24em;
}
.kapak h1 .satir span { display: inline-block; transform: translateY(135%); transition: transform 1s var(--esne); }
body.hazir .kapak h1 .satir span { transform: none; }
.kapak p {
  margin-top: 1.6rem; max-width: 62ch; color: var(--renk-soluk);
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.9s ease 0.5s, transform 0.9s var(--esne) 0.5s;
}
body.hazir .kapak p { opacity: 1; transform: none; }

.surec {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.6rem; margin-top: 3rem; padding-top: 1.6rem;
  border-top: 1px solid var(--renk-cizgi);
}
.surec .adim {
  position: relative; padding-top: 0.4rem; text-align: left; cursor: pointer;
  opacity: 0; translate: 0 18px;
  transition: opacity 0.8s ease, translate 0.8s var(--esne);
  /* transition-delay JS tarafında kademeli verilir */
}
body.hazir .surec .adim { opacity: 1; translate: 0 0; }
.surec .adim::before {
  content: ""; position: absolute; top: -1.6rem; left: 0; width: 100%; height: 2px;
  background: var(--renk-metin); transform: scaleX(0); transform-origin: left;
  transition: transform 0.7s var(--esne);
}
.surec .adim:hover::before, .surec .adim:focus-visible::before { transform: scaleX(1); }
.surec .surec-kare {
  display: block; width: 100%; aspect-ratio: 1; margin-bottom: 1rem;
  overflow: hidden; background: #efe9e0;
}
.surec .surec-kare img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  transition: transform 0.7s var(--esne), filter var(--sure-normal) ease;
}
.surec .adim:hover .surec-kare img,
.surec .adim:focus-visible .surec-kare img { transform: scale(1.055); }
.surec .no {
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--renk-bronz);
  letter-spacing: 0.2em; display: block; margin-bottom: 0.4rem;
}
.surec b { display: block; font-size: 0.95rem; letter-spacing: 0.02em; margin-bottom: 0.3rem; }
.surec p { font-size: 0.8rem; color: var(--renk-soluk); line-height: 1.55; max-width: 26ch; }
.surec .ipucu {
  display: inline-block; margin-top: 0.6rem;
  font-size: 0.6rem; letter-spacing: 0.26em; color: var(--renk-bronz);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--sure-hizli), transform var(--sure-normal) var(--esne), letter-spacing var(--sure-normal) var(--esne);
}
.surec .adim:hover .ipucu, .surec .adim:focus-visible .ipucu { opacity: 1; transform: none; }
.surec .adim:hover .ipucu { letter-spacing: 0.34em; }

/* ---------- Süreç adımı detay katmanı ---------- */
.surec-detay {
  position: fixed; inset: 0; z-index: 170;
  background: color-mix(in srgb, var(--renk-siyah) 55%, transparent);
  backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem);
  visibility: hidden; opacity: 0;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}
.surec-detay.acik { visibility: visible; opacity: 1; transition: opacity 0.45s ease; }
.surec-detay .sd-kapat {
  position: absolute; top: 1.1rem; right: clamp(1.2rem, 3vw, 3rem); z-index: 2;
  width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--renk-zemin); color: var(--renk-metin); border-radius: 50%;
  font-size: 1.05rem; transition: transform var(--sure-normal) var(--esne);
}
.surec-detay .sd-kapat:hover { transform: rotate(90deg); }
.surec-detay .sd-ic {
  display: grid; grid-template-columns: minmax(260px, 420px) minmax(0, 1fr);
  gap: 0; width: min(1060px, 100%); max-height: 86vh;
  background: var(--renk-zemin); overflow: hidden;
  transform: translateY(26px) scale(0.985);
  transition: transform 0.5s var(--esne);
}
.surec-detay.acik .sd-ic { transform: none; }
.sd-meta { padding: clamp(1.6rem, 3vw, 2.8rem); display: flex; flex-direction: column; overflow-y: auto; }
.sd-meta .sd-sembol { width: 64px; height: 64px; color: var(--renk-bronz); margin-bottom: 1.4rem; }
.sd-meta .sd-sembol svg { width: 100%; height: 100%; }
.surec-detay.acik .sd-sembol .ciz { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--esne); }
.sd-meta .no { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.22em; color: var(--renk-bronz); margin-bottom: 0.5rem; }
.sd-meta h3 { font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); font-weight: 500; letter-spacing: -0.01em; margin-bottom: 0.9rem; }
.sd-meta p { font-size: 0.92rem; line-height: 1.7; color: var(--renk-metin); }
.sd-gezinme { margin-top: auto; padding-top: 1.4rem; display: flex; justify-content: space-between; gap: 1rem; }
.sd-gezinme button {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.2em;
  color: var(--renk-soluk); transition: color var(--sure-hizli);
}
.sd-gezinme button:hover { color: var(--renk-metin); }
.sd-gorsel { margin: 0; background: #efe9e0; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 380px; overflow: hidden; }
.sd-gorsel img { width: 100%; height: 100%; min-height: 0; object-fit: cover; display: block; }
.sd-gorsel figcaption {
  padding: 0.7rem 1rem; font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.2em; color: var(--renk-soluk); text-transform: uppercase;
  border-top: 1px solid var(--renk-cizgi);
}
@media (max-width: 860px) {
  .surec-detay .sd-ic { grid-template-columns: 1fr; overflow-y: auto; }
  /* Metin kendi kutusunda değil, panelin tamamıyla birlikte kaysın (iç içe kaydırma olmasın) */
  .sd-meta { overflow: visible; }
  .sd-gorsel { min-height: 0; grid-template-rows: minmax(260px, 44vh) auto; }
  .sd-gorsel img { min-height: 260px; }
}

/* ---------- Ana sayfa özel kapağı: teslim çizimi + saha fotoğrafı ---------- */
.ozel-kapak {
  position: absolute; inset: 0; overflow: hidden;
  background: var(--renk-zemin);
  box-shadow: inset 0 0 0 1px var(--renk-cizgi);
}
/* Saha fotoğrafı: soldan girer, kreme doğru erir */
.ozel-kapak .ok-foto {
  position: absolute; inset: 0 auto 0 0; width: 50%;
  background-size: cover; background-position: 58% 38%;
  filter: sepia(0.34) saturate(0.7) brightness(1.02) contrast(0.95);
  opacity: 0.62;
  -webkit-mask-image:
    linear-gradient(to right, #000 0%, rgba(0,0,0,0.78) 46%, transparent 94%),
    linear-gradient(to bottom, #000 0%, #000 72%, rgba(0,0,0,0.25) 100%);
  mask-image:
    linear-gradient(to right, #000 0%, rgba(0,0,0,0.78) 46%, transparent 94%),
    linear-gradient(to bottom, #000 0%, #000 72%, rgba(0,0,0,0.25) 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
/* Sıcak ışık yıkaması: kompozisyonu krem zeminde toparlar */
.ozel-kapak .ok-isik {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(250,246,240,0.55) 0%, rgba(250,246,240,0) 32%),
    linear-gradient(to right, rgba(250,246,240,0) 40%, rgba(250,246,240,0.55) 72%, rgba(250,246,240,0.9) 100%);
}
/* Teslim çizimi: zemin çizgisine oturur, kâğıt beyazı krem zemine karışır */
.gorsel .ic .ozel-kapak .ok-cizim {
  position: absolute; left: 50%; bottom: 14%;
  transform: translateX(-50%);
  width: 88%; height: auto; max-height: 66%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform var(--sure-yavas) var(--esne);
}
/* Mozaik örgü bordürü: yapının bastığı zemin */
.ozel-kapak .ok-zemin {
  position: absolute; left: 0; right: 0; bottom: 10.5%;
  height: 13px; opacity: 0.5;
  background: url("../img/bordur.svg") repeat-x center / auto 13px;
}
.ozel-kapak .ok-ust,
.ozel-kapak .ok-altbilgi,
.ozel-kapak .ok-eylem {
  position: absolute; font-family: var(--font-mono);
  text-transform: uppercase; z-index: 2;
}
.ozel-kapak .ok-ust {
  top: 1.15rem; left: 1.25rem;
  font-size: 0.6rem; letter-spacing: 0.26em; color: var(--renk-bronz);
}
.ozel-kapak .ok-altbilgi {
  top: 1.2rem; right: 1.25rem; text-align: right; max-width: 46%;
  font-size: 0.56rem; letter-spacing: 0.18em; color: var(--renk-soluk);
}
.ozel-kapak .ok-eylem {
  right: 1.25rem; bottom: 1rem;
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.6rem; letter-spacing: 0.2em;
  color: var(--renk-zemin); background: var(--renk-siyah);
  padding: 0.62em 1.05em;
  transition: gap var(--sure-normal) var(--esne), background-color var(--sure-hizli);
}
.ozel-kapak .ok-eylem b { font-weight: 400; color: var(--renk-bronz); }
.ozel-kapak .ok-eylem i { font-style: normal; }
.gorsel:hover .ozel-kapak .ok-eylem { gap: 0.95rem; background: var(--renk-bronz); }
.gorsel:hover .ozel-kapak .ok-eylem b { color: var(--renk-zemin); }
.gorsel:hover .ic .ozel-kapak .ok-cizim { transform: translateX(-50%) scale(1.045); }
/* Özel kapakta genel "tam ekran incele" etiketi görünmesin */
.proje-karti.kart-ozel .gorsel::after { content: none; display: none; }
@media (max-width: 720px) {
  .ozel-kapak .ok-ust, .ozel-kapak .ok-altbilgi { font-size: 0.52rem; letter-spacing: 0.16em; }
  .ozel-kapak .ok-eylem { font-size: 0.52rem; padding: 0.55em 0.8em; right: 0.8rem; bottom: 0.8rem; }
  .ozel-kapak .ok-altbilgi { display: none; }
}

/* ---------- Proje akışı ---------- */
.akis { padding: var(--bosluk-akis) 0 6rem; }
.proje-karti {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 720px) 1fr;
  gap: clamp(1.2rem, 3vw, 3rem);
  padding: 0 clamp(1.2rem, 3vw, 3rem);
  margin-bottom: var(--bosluk-akis);
}
.proje-karti .kunye {
  grid-column: 1; justify-self: end; text-align: right;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0;
  padding-top: 0.4rem;
}
.proje-karti .pikto { width: 52px; height: 52px; overflow: hidden; }
.proje-karti .pikto svg { transition: transform var(--sure-normal) var(--esne); }
.proje-karti:hover .pikto svg { transform: scale(1.12) rotate(-4deg); }
.proje-karti .kunye h2 {
  font-size: 1rem; line-height: 1.25;
  font-weight: 500; letter-spacing: -0.01em;
  margin-top: 1.5rem;
}
.proje-karti .proje-altbilgi {
  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-end;
  gap: 0.65rem; max-width: 26rem; margin-top: 1.5rem;
  font-size: var(--text-kucuk); letter-spacing: 0.08em; color: var(--renk-soluk);
}
.proje-karti .proje-altbilgi .konum {
  color: var(--renk-metin); font-size: 0.875rem; line-height: 1.4;
}
.proje-karti .proje-altbilgi > span:not(.konum):not(.ayirac) {
  font-size: 0.75rem; line-height: 1.4;
}
.proje-karti .proje-altbilgi .ayirac { display: none; }
.proje-karti .kunye .etiket {
  margin-top: 0.4rem; font-size: 0.62rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--renk-zemin); background: var(--renk-metin);
  padding: 0.32em 0.7em;
}

.proje-karti .gorsel-dis {
  grid-column: 2; aspect-ratio: 4 / 3; position: relative; z-index: 2;
}
.proje-karti .gorsel {
  position: absolute; inset: 0; overflow: hidden; cursor: pointer;
  transform: scale(0.9); transform-origin: left center; will-change: transform;
}
.proje-karti .gorsel .ic {
  position: absolute; inset: -8% 0;
  clip-path: inset(6% 4% 6% 4%);
  transition: clip-path 1.1s var(--esne), transform var(--sure-normal) ease-out;
  will-change: transform;
}
.proje-karti.gorunur .gorsel .ic { clip-path: inset(0 0 0 0); }
.proje-karti .gorsel .ic svg { width: 100%; height: 100%; }
.proje-karti .gorsel .ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proje-karti .gorsel::after {
  content: "TAM EKRAN İNCELE ⤢";
  position: absolute; left: 1.1rem; bottom: 1rem;
  font-size: 0.62rem; letter-spacing: 0.26em; color: #fff;
  background: var(--renk-siyah); padding: 0.55em 1em;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--sure-hizli), transform var(--sure-normal) var(--esne);
}
.proje-karti .gorsel:hover::after { opacity: 1; transform: none; }

.proje-karti .kunye,
.proje-karti .gorsel-dis { opacity: 0; translate: 0 40px; transition: opacity 0.9s ease, translate 0.9s var(--esne); }
.proje-karti.gorunur .kunye, .proje-karti.gorunur .gorsel-dis { opacity: 1; translate: 0 0; }

.proje-karti .detay-lnk {
  display: inline-flex; align-items: center; min-height: 44px;
  white-space: nowrap;
  margin-top: 0.75rem;
  font-size: 0.625rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--renk-bronz);
  border-bottom: 1px solid currentColor; padding: 0.5rem 0 0.35rem;
  transition: letter-spacing var(--sure-normal) var(--esne), color var(--sure-hizli);
}
.proje-karti .detay-lnk:hover { letter-spacing: 0.32em; color: var(--renk-metin); }

.bos-sonuc {
  padding: 4rem clamp(1.2rem, 3vw, 3rem); text-align: center;
  color: var(--renk-soluk); letter-spacing: 0.2em; text-transform: uppercase; font-size: var(--text-kucuk);
}

/* ---------- Kayan bant ---------- */
.bant {
  overflow: hidden; border-block: 1px solid var(--renk-cizgi);
  padding: 1.1rem 0; white-space: nowrap;
}
.bant .ic {
  display: inline-block; animation: kay 36s linear infinite;
  font-size: var(--text-kucuk); letter-spacing: 0.34em; text-transform: uppercase; color: var(--renk-soluk);
}
.bant:hover .ic { animation-play-state: paused; }
@keyframes kay { to { transform: translateX(-50%); } }

/* ---------- Hakkında + iletişim ---------- */
.hakkinda {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
  padding: var(--bosluk-akis) clamp(1.2rem, 3vw, 3rem);
}
.hakkinda h2 {
  font-family: "YOY Architect Ek", "YOY Architect", "Noteworthy", "Chalkboard SE", cursive;
  font-weight: 400;
  font-size: clamp(4.2rem, 2.2rem + 6.5vw, 8.5rem);
  line-height: 0.85; text-transform: none; letter-spacing: 0.01em;
  transform: rotate(-2deg); transform-origin: left bottom;
}
.hakkinda .metin p { margin-bottom: 1.2rem; max-width: 52ch; }
.hakkinda .metin p:first-child { font-size: 1.15em; }

.altbilgi {
  background: var(--renk-siyah); color: #fff;
  padding: 4rem clamp(1.2rem, 3vw, 3rem) 2.5rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2.5rem;
}
.altbilgi h3 { font-size: var(--text-kucuk); letter-spacing: 0.26em; text-transform: uppercase; color: #777; margin-bottom: 1rem; }
.altbilgi p, .altbilgi a { color: #ddd; font-size: 0.95rem; line-height: 1.8; }
.altbilgi a { border-bottom: 1px solid #333; transition: border-color var(--sure-hizli), color var(--sure-hizli); }
.altbilgi a:hover { color: #fff; border-color: #fff; }
.altbilgi .imza {
  grid-column: 1 / -1; margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid #222;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-size: 0.72rem; letter-spacing: 0.18em; color: #666; text-transform: uppercase;
}
.altbilgi .logo-img {
  width: 96px; height: auto; margin-bottom: 1.2rem;
  filter: brightness(0) invert(1); /* koyu zeminde beyaz siluet */
  opacity: 0.92;
}

/* ---------- Proje detay katmanı ---------- */
.detay {
  position: fixed; inset: 0; z-index: 150; background: var(--renk-zemin);
  transform: translateY(100%);
  transition: transform 0.7s var(--esne);
  overflow-y: auto; overscroll-behavior: contain;
}
.detay.acik { transform: translateY(0); }
.detay-ic {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) minmax(260px, 380px);
  gap: clamp(1.5rem, 3vw, 3.5rem);
  padding: 7rem clamp(1.2rem, 3vw, 3rem) 5rem;
  max-width: 1600px; margin: 0 auto;
}
.detay .kapat {
  position: fixed; top: 1.1rem; right: clamp(1.2rem, 3vw, 3rem); z-index: 160;
  width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--renk-siyah); color: #fff; border-radius: 50%;
  font-size: 1.1rem; transition: transform var(--sure-normal) var(--esne);
}
.detay .kapat:hover { transform: rotate(90deg); }

.detay-meta { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
.detay-meta .pikto { width: 68px; height: 68px; margin-bottom: 0.8rem; }
.detay-meta h1 { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem); font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; }
.detay-meta .konum { font-size: var(--text-kucuk); letter-spacing: 0.18em; color: var(--renk-soluk); margin-bottom: 2rem; }
.detay-meta dl { display: grid; gap: 1.1rem; margin-top: 1rem; }
.detay-meta dt { font-size: 0.62rem; letter-spacing: 0.24em; color: var(--renk-soluk); text-transform: uppercase; }
.detay-meta dd { font-weight: 500; letter-spacing: 0.04em; }

.galeri { position: relative; z-index: 5; }
.galeri .sahne { height: 100%; min-height: 100vh; }
.galeri .yapiskan { position: sticky; top: 5.4rem; }
.galeri .cerceve {
  aspect-ratio: 4 / 3; overflow: hidden; background: #efe9e0;
  cursor: zoom-in; transform-origin: top center; will-change: transform;
}
.galeri .cerceve svg { width: 100%; height: 100%; }
.galeri .cerceve img { width: 100%; height: 100%; object-fit: contain; display: block; }
.galeri .cerceve.gecis svg, .galeri .cerceve.gecis img { animation: gorselGecis 0.6s var(--esne); }
@keyframes gorselGecis { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.galeri .kontrol { display: flex; justify-content: space-between; align-items: center; margin-top: 0.9rem; }
.galeri .kontrol .oklar { display: flex; gap: 0.5rem; }
.galeri .kontrol button {
  width: 42px; height: 42px; border: 1px solid var(--renk-cizgi); display: grid; place-items: center;
  transition: background var(--sure-hizli), color var(--sure-hizli);
}
.galeri .kontrol button:hover { background: var(--renk-siyah); color: #fff; }
.galeri .kontrol .sayfa { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.2em; color: var(--renk-soluk); }

.detay-metin p { margin-bottom: 1.3rem; }
.detay-metin .paylas { margin-top: 2.4rem; }
.detay-metin .paylas h3 { font-size: 0.62rem; letter-spacing: 0.24em; color: var(--renk-soluk); text-transform: uppercase; margin-bottom: 0.7rem; }
.detay-metin .paylas .ikonlar { display: flex; gap: 0.45rem; }
.detay-metin .paylas a {
  width: 34px; height: 34px; background: var(--renk-siyah); color: #fff;
  display: grid; place-items: center; font-size: 0.7rem; font-weight: 700;
  transition: transform var(--sure-hizli) var(--esne);
}
.detay-metin .paylas a:hover { transform: translateY(-4px); }

.detay-gezinme {
  grid-column: 1 / -1; margin-top: 3rem; padding-top: 1.6rem;
  border-top: 1px solid var(--renk-cizgi);
  display: flex; justify-content: space-between; gap: 1rem;
}
.detay-gezinme button {
  font-size: var(--text-kucuk); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--renk-soluk); transition: color var(--sure-hizli), letter-spacing var(--sure-normal) var(--esne);
}
.detay-gezinme button:hover { color: var(--renk-metin); letter-spacing: 0.3em; }

/* ---------- Tam ekran yatay galeri (vitrin) ---------- */
.vitrin {
  position: fixed; inset: 0; z-index: 190; background: #16110b;
  visibility: hidden; opacity: 0;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.vitrin.acik { visibility: visible; opacity: 1; transition: opacity 0.5s ease; }
.vitrin header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; gap: 1.4rem;
  padding: 1.2rem clamp(1.2rem, 3vw, 3rem);
  color: #f4ede2;
}
.vitrin-baslik { font-size: var(--text-kucuk); letter-spacing: 0.22em; text-transform: uppercase; }
.vitrin-sayac { margin-left: auto; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.2em; color: #9a8d7c; }
.vitrin-kapat {
  width: 42px; height: 42px; border-radius: 50%; background: #f4ede2; color: #16110b;
  display: grid; place-items: center; font-size: 1rem;
  transition: transform var(--sure-normal) var(--esne);
}
.vitrin-kapat:hover { transform: rotate(90deg); }
.vitrin-ray {
  position: absolute; inset: 0; display: flex; align-items: center;
  gap: 4vw; padding: 0 8vw;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; cursor: grab;
}
.vitrin-ray::-webkit-scrollbar { display: none; }
.vitrin-ray.suruklaniyor { cursor: grabbing; scroll-snap-type: none; }
.vitrin-slayt {
  flex: 0 0 84vw; scroll-snap-align: center; margin: 0;
  opacity: 0; transform: scale(0.95);
}
.vitrin.acik .vitrin-slayt { animation: slaytGel 0.7s var(--esne) forwards; }
.vitrin.acik .vitrin-slayt:nth-child(2) { animation-delay: 0.08s; }
.vitrin.acik .vitrin-slayt:nth-child(3) { animation-delay: 0.16s; }
@keyframes slaytGel { to { opacity: 1; transform: none; } }
.vitrin-slayt svg {
  width: 100%; height: auto; max-height: 76vh; display: block;
  user-select: none; pointer-events: none;
}
.vitrin-slayt img {
  width: auto; max-width: 100%; max-height: 76vh; display: block;
  margin: 0 auto; user-select: none; pointer-events: none;
}
.vitrin-slayt figcaption {
  margin-top: 0.9rem; font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.26em; color: #9a8d7c;
}
.vitrin-ipucu {
  position: absolute; bottom: 1.4rem; right: clamp(1.2rem, 3vw, 3rem);
  font-size: 0.62rem; letter-spacing: 0.3em; color: #9a8d7c;
  display: flex; gap: 0.6rem; align-items: center;
  transition: opacity 0.4s ease;
}
.vitrin-ipucu span { animation: ipucuKay 1.6s ease-in-out infinite; }
@keyframes ipucuKay { 50% { transform: translateX(8px); } }
.vitrin.gezildi .vitrin-ipucu { opacity: 0; }

/* ---------- İş makinesi konvoyu (Hakkında altı) ---------- */
.konvoy {
  grid-column: 1 / -1;
  margin-top: clamp(2.5rem, 2rem + 3vw, 5rem);
  overflow: hidden;
  padding-top: 1.2rem;
}
.konvoy-ic {
  display: flex; align-items: flex-end; width: max-content;
  border-bottom: 4px solid var(--renk-metin); /* tek kalın zemin çizgisi */
  animation: konvoyKay 230s linear infinite;
}
.konvoy:hover .konvoy-ic,
.konvoy:hover .dnr,
.konvoy:hover .plt { animation-play-state: paused; }
/* Palet zinciri: kesikli katman ray boyunca akar */
.plt {
  fill: none; stroke-dasharray: 8 7;
  animation: paletAk 0.7s linear infinite;
}
@keyframes paletAk { to { stroke-dashoffset: -15; } }
@keyframes konvoyKay { to { transform: translateX(-50%); } }
.arac { margin: 0; flex: 0 0 auto; }
.arac svg {
  height: 78px; width: auto; display: block;
  stroke: var(--renk-metin); stroke-width: 3; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.arac.tabela text {
  stroke: none; fill: var(--renk-bronz);
  font: 700 11px ui-monospace, Menlo, monospace; letter-spacing: 1px;
}
.dnr { animation: tekerDon 1.6s linear infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes tekerDon { to { transform: rotate(-360deg); } }

/* ---------- Mozaik dekoru: kapanış süslemesi ---------- */
.dekor-kapanis { display: none; }
body.anasayfa-modu .dekor-kapanis {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.6rem);
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 3vw, 3rem) calc(var(--bosluk-akis) * 0.55);
}
.dekor-kapanis .bordur {
  height: 22px;
  background: url("../img/bordur.svg") repeat-x center / auto 22px;
  opacity: 0.6;
}
.dekor-kapanis img {
  width: clamp(58px, 7vw, 86px); height: auto; opacity: 0.9;
}

/* ---------- İmleç ---------- */
.imlec {
  position: fixed; z-index: 300; width: 14px; height: 14px; border-radius: 50%;
  background: var(--renk-metin); pointer-events: none;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.25s var(--esne), opacity 0.2s;
  mix-blend-mode: difference; opacity: 0;
}
body.imlec-var .imlec { opacity: 1; }
.imlec.buyuk { transform: translate(-50%, -50%) scale(3.4); background: #fff; }

/* ---------- Duyarlılık ---------- */
@media (max-width: 1020px) {
  .proje-karti { grid-template-columns: 1fr; }
  .proje-karti .kunye { justify-self: start; text-align: left; align-items: flex-start; grid-column: 1; }
  .proje-karti .proje-altbilgi { align-items: flex-start; }
  .proje-karti .gorsel { grid-column: 1; }
  .detay-ic { grid-template-columns: 1fr; padding-top: 6rem; }
  .galeri .sahne { height: auto; min-height: 0; }
  .galeri .yapiskan { position: static; }
  .galeri .cerceve { transform: none !important; }
  .proje-surec li p { text-align: left; }
  .detay-meta { text-align: left; align-items: flex-start; order: 1; }
  .galeri { order: 0; }
  .detay-metin { order: 2; }
  .hakkinda { grid-template-columns: 1fr; }
}
@media (max-width: 1440px) {
  .marka small { display: none; } /* dar ekranda slogan navigasyonla çakışmasın */
}
@media (max-width: 720px) {
  .kategori-nav { display: none; }
  .ustbar { grid-template-columns: auto auto; justify-content: space-between; }
  .arama input { width: 110px; }
  .mobil-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 110;
    display: flex; overflow-x: auto; gap: 0; background: var(--renk-siyah);
  }
  .mobil-nav button {
    flex: 1 0 auto; color: #999; padding: 0.9rem 1rem;
    font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  }
  .mobil-nav button.aktif { color: #fff; }
}
@media (min-width: 721px) { .mobil-nav { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .bant .ic { animation: none; }
  .proje-karti .gorsel { transform: none !important; }
  .galeri .sahne { height: auto; min-height: 0; }
  .galeri .cerceve { transform: none !important; }
  .vitrin.acik .vitrin-slayt { animation: none; opacity: 1; transform: none; }
}

/* Kapak başlığı: harfler tek tek, yumuşak bir dalgayla salınır */
.kapak h1 .harf, .hakkinda h2 .harf { display: inline-block; font-style: normal; }
body.hazir .kapak h1 .harf, body.hazir .hakkinda h2 .harf {
  animation: harfDalga 3.4s ease-in-out calc(var(--i, 0) * 0.11s) infinite;
}
@keyframes harfDalga {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-0.055em) rotate(1.3deg); }
}

/* ---------- Anasayfa görünümü: projeler hizmet sekmelerinde ---------- */
body.anasayfa-modu #akis-baslangic,
body.anasayfa-modu #akis,
body.anasayfa-modu .bant { display: none; }

/* ---------- Antakya panoraması: kesintisiz akan şerit (yalnız ana sayfa) ---------- */
.panorama { display: none; }
body.anasayfa-modu .panorama {
  display: block;
  position: relative;
  overflow: hidden;
  margin-top: calc(var(--bosluk-akis) * 0.5);
  padding-block: 22px;
  background: var(--renk-zemin);
}
/* Antakya mozaiklerinin örgü bordürü: panoramayı mozaik panosu gibi çerçeveler */
.panorama::before,
.panorama::after {
  content: ""; position: absolute; left: 0; right: 0; height: 22px;
  background: url("../img/bordur.svg") repeat-x center / auto 22px;
  opacity: 0.7; pointer-events: none;
}
.panorama::before { top: 0; }
.panorama::after { bottom: 0; }
.panorama-serit {
  --serit-h: clamp(180px, 24vw, 320px);
  --karo: calc(var(--serit-h) * 5.1064); /* karo en/boy oranı 2400 / 470 */
  height: var(--serit-h);
  width: calc(100% + var(--karo));       /* bir karo fazlası: kayarken boşluk kalmaz */
  background-image: url("../img/panorama-antakya.svg");
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: var(--karo) 100%;
  animation: panoramaKay 110s linear infinite;
  will-change: transform;
}
.panorama:hover .panorama-serit { animation-play-state: paused; }
/* Tam bir karo kayınca desen kendini tekrarlar: dikiş görünmez */
@keyframes panoramaKay {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--karo))); }
}
@media (prefers-reduced-motion: reduce) {
  .panorama-serit { animation: none; width: 100%; }
}

/* ---------- Proje paftaları (PDF indirme) ---------- */
.belgeler { margin-top: 2.4rem; }
.belgeler h3 {
  font-family: var(--font-mono); font-size: var(--text-kucuk);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--renk-soluk); margin-bottom: 0.9rem;
}
.belgeler ul { list-style: none; display: grid; gap: 1px; background: var(--renk-cizgi); border-block: 1px solid var(--renk-cizgi); }
.belgeler a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.2rem;
  padding: 0.85rem 0.2rem; background: var(--renk-zemin);
  transition: background var(--sure-hizli), padding-inline var(--sure-normal) var(--esne);
}
.belgeler a::before { content: "↓"; margin-right: 0.7rem; color: var(--renk-bronz); }
.belgeler a span {
  font-family: var(--font-mono); font-size: var(--text-kucuk);
  letter-spacing: 0.12em; color: var(--renk-soluk); white-space: nowrap;
}
.belgeler a:hover, .belgeler a:focus-visible { background: #f2ebe0; padding-inline: 0.7rem 0.5rem; }

/* ---------- Proje süreci: aşama aşama anlatım ---------- */
.proje-surec { margin-top: 3rem; }
.proje-surec > h3 {
  font-family: var(--font-mono); font-size: var(--text-kucuk);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--renk-soluk); margin-bottom: 1.6rem;
}
.proje-surec ol { list-style: none; display: grid; gap: 2.6rem; }
.proje-surec li {
  border-top: 1px solid var(--renk-cizgi);
  padding-top: 1.3rem;
}
.ps-bas { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.9rem; }
.ps-sembol { flex: none; width: 34px; height: 34px; color: var(--renk-bronz); }
.ps-sembol svg { width: 100%; height: 100%; }
.ps-no {
  font-family: var(--font-mono); font-size: var(--text-kucuk);
  letter-spacing: 0.2em; color: var(--renk-soluk);
}
.ps-bas h4 {
  font-family: "YOY Architect Ek", "YOY Architect", "Noteworthy", cursive;
  font-weight: 400; font-size: clamp(1.4rem, 1.1rem + 0.9vw, 2rem);
  line-height: 1;
}
.proje-surec li p { margin-bottom: 0.9rem; max-width: 60ch; text-align: justify; hyphens: auto; }
.proje-surec li p:last-child { margin-bottom: 0; }
.ps-dayanak {
  font-family: var(--font-mono); font-size: var(--text-kucuk);
  line-height: 1.6; color: var(--renk-soluk);
  border-left: 2px solid var(--renk-cizgi); padding-left: 0.9rem;
  text-align: left !important;
}
.ps-dayanak span {
  display: block; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--renk-bronz); margin-bottom: 0.15rem;
}

/* ---------- Yatay proje sunumu ---------- */
.sunum {
  position: fixed; inset: 0; z-index: 170;
  background: var(--renk-zemin);
  display: grid; grid-template-rows: auto 1fr auto;
  opacity: 0; pointer-events: none;
  transition: opacity var(--sure-normal) ease;
}
.sunum.acik { opacity: 1; pointer-events: auto; }
.sunum-ust {
  display: flex; align-items: center; gap: 1.4rem;
  padding: 1.1rem clamp(1.2rem, 3vw, 3rem);
  border-bottom: 1px solid var(--renk-cizgi);
}
.sunum-marka {
  font-family: "YOY Architect Ek", "YOY Architect", cursive;
  font-size: 1.4rem; line-height: 1;
}
.sunum-baslik {
  flex: 1; min-width: 0; font-family: var(--font-mono);
  font-size: var(--text-kucuk); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--renk-soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sunum-sayac {
  font-family: var(--font-mono); font-size: var(--text-kucuk);
  letter-spacing: 0.2em; color: var(--renk-metin);
}
.sunum-kapat {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--renk-siyah); color: #fff; border-radius: 50%;
  transition: transform var(--sure-normal) var(--esne);
}
.sunum-kapat:hover { transform: rotate(90deg); }

.sunum-ray {
  display: flex; align-items: stretch;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; outline: none;
  cursor: grab;
}
.sunum-ray::-webkit-scrollbar { display: none; }
.sunum-ray.suruklaniyor { cursor: grabbing; }
.sunum-ray > .slayt {
  flex: none; scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(1.5rem, 4vw, 4.5rem);
  border-right: 1px solid var(--renk-cizgi);
}
.sunum-ray > .slayt > * { max-width: 62ch; }

/* Kapak slaytı: kireç sıva dokusu üzerinde mürekkep tipografi */
.slayt-kapak {
  width: min(92vw, 780px);
  position: relative; overflow: hidden;
  background: var(--renk-zemin); color: var(--renk-metin);
}
.sk-doku {
  position: absolute; inset: 0; z-index: 0;
  background: url("../img/doku-kirec.jpg") center / cover no-repeat;
  opacity: 0.55;
}
/* Cephe çizimi: kapağın altında soluk bir iz */
.slayt-kapak .sk-cizim {
  position: absolute; left: 50%; bottom: 6.5%; z-index: 1;
  transform: translateX(-50%);
  width: 104%; height: auto; max-height: 37%;
  object-fit: contain;
  mix-blend-mode: multiply; opacity: 0.3;
}
.sk-bordur {
  position: absolute; left: 0; right: 0; bottom: 5%; z-index: 1;
  height: 12px; opacity: 0.4;
  background: url("../img/bordur.svg") repeat-x center / auto 12px;
}
.slayt-kapak .sk-ic { position: relative; z-index: 2; }
/* Dekoratif katmanlar slaytın metin genişliği sınırına takılmasın */
.sunum-ray > .slayt > .sk-doku,
.sunum-ray > .slayt > .sk-cizim,
.sunum-ray > .slayt > .sk-bordur { max-width: none; }
.slayt-kapak .s-etiket {
  font-family: var(--font-mono); font-size: var(--text-kucuk);
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--renk-bronz);
}
.slayt-kapak h2 {
  font-family: "YOY Architect Ek", "YOY Architect", cursive; font-weight: 400;
  font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem); line-height: 0.95;
  margin: 1.2rem 0 1.6rem; color: var(--renk-metin);
}
.sk-konum { font-family: var(--font-mono); font-size: var(--text-kucuk); letter-spacing: 0.2em; text-transform: uppercase; color: var(--renk-soluk); }
.sk-yil { font-family: var(--font-mono); font-size: 2rem; letter-spacing: 0.1em; margin-top: 2.4rem; color: var(--renk-bronz); }

/* Ortak bölüm başlığı */
.s-bolum {
  font-family: var(--font-mono); font-size: var(--text-kucuk);
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--renk-soluk); margin-bottom: 1.6rem;
}

/* Künye */
.slayt-kunye { width: min(92vw, 620px); }
.slayt-kunye dl { display: grid; gap: 1px; background: var(--renk-cizgi); border-block: 1px solid var(--renk-cizgi); }
.slayt-kunye dl > div { background: var(--renk-zemin); padding: 0.9rem 0.2rem; display: grid; gap: 0.25rem; }
.slayt-kunye dt {
  font-family: var(--font-mono); font-size: var(--text-kucuk);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--renk-soluk);
}
.slayt-kunye dd { font-size: 1.05rem; }

/* Metin slaytları */
.slayt-metin { width: min(92vw, 640px); }
.slayt-metin p { margin-bottom: 1.1rem; text-align: justify; hyphens: auto; }
.slayt-giris p:first-of-type { font-size: 1.15em; }

/* Aşama slaytı */
.slayt-asama { width: min(92vw, 660px); }
.sa-bas { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1rem; }
.sa-sembol { width: 40px; height: 40px; color: var(--renk-bronz); }
.sa-sembol svg { width: 100%; height: 100%; }
.sa-no { font-family: var(--font-mono); font-size: var(--text-kucuk); letter-spacing: 0.2em; color: var(--renk-soluk); }
.slayt-asama h3 {
  font-family: "YOY Architect Ek", "YOY Architect", cursive; font-weight: 400;
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.8rem); line-height: 1; margin-bottom: 1.2rem;
}
.slayt-asama p { margin-bottom: 1rem; text-align: justify; hyphens: auto; }
.sa-dayanak {
  font-family: var(--font-mono); font-size: var(--text-kucuk); line-height: 1.6;
  color: var(--renk-soluk); border-left: 2px solid var(--renk-cizgi);
  padding-left: 0.9rem; text-align: left !important; margin-top: 0.4rem;
}
.sa-dayanak span { display: block; letter-spacing: 0.2em; text-transform: uppercase; color: var(--renk-bronz); }

/* Görsel slaytları */
.slayt-gorsel { width: auto; max-width: 96vw; padding-inline: clamp(1rem, 2vw, 2.5rem); }
.slayt-gorsel .s-gorsel { display: flex; flex-direction: column; gap: 0.8rem; height: 100%; justify-content: center; max-width: none; cursor: zoom-in; }
.s-cerceve {
  background: #fff; border: 1px solid var(--renk-cizgi);
  display: grid; place-items: center; overflow: hidden;
  transition: border-color var(--sure-hizli);
}
.s-gorsel:hover .s-cerceve { border-color: var(--renk-bronz); }
.s-cerceve img { max-height: 68vh; width: auto; max-width: 88vw; object-fit: contain; }
.s-gorsel figcaption {
  font-family: var(--font-mono); font-size: var(--text-kucuk);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--renk-soluk);
}

/* Ekip */
.slayt-ekip { width: min(92vw, 560px); position: relative; overflow: hidden; }
.slayt-ekip > .s-bolum, .slayt-ekip > ul { position: relative; z-index: 2; }
.slayt-ekip ul { list-style: none; display: grid; gap: 1.4rem; }
.slayt-ekip li { display: grid; gap: 0.2rem; border-top: 1px solid var(--renk-cizgi); padding-top: 0.9rem; }
.slayt-ekip b { font-size: 1.25rem; font-weight: 500; }
.slayt-ekip span { font-family: var(--font-mono); font-size: var(--text-kucuk); letter-spacing: 0.14em; color: var(--renk-soluk); }
.slayt-ekip em { font-family: var(--font-mono); font-size: var(--text-kucuk); font-style: normal; color: var(--renk-bronz); }

/* Kapanış */
.slayt-kapanis { width: min(92vw, 560px); }
.s-belgeler { list-style: none; display: grid; gap: 1px; background: var(--renk-cizgi); border-block: 1px solid var(--renk-cizgi); margin-bottom: 2.6rem; }
.s-belgeler a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  background: var(--renk-zemin); padding: 0.9rem 0.2rem;
  transition: background var(--sure-hizli), padding-inline var(--sure-normal) var(--esne);
}
.s-belgeler a::before { content: "↓"; margin-right: 0.6rem; color: var(--renk-bronz); }
.s-belgeler a span { font-family: var(--font-mono); font-size: var(--text-kucuk); color: var(--renk-soluk); white-space: nowrap; }
.s-belgeler a:hover { background: #f2ebe0; padding-inline: 0.6rem 0.4rem; }
.s-sonraki {
  display: grid; gap: 0.4rem; text-align: left;
  border-top: 1px solid var(--renk-cizgi); padding-top: 1.1rem;
  font-family: var(--font-mono); font-size: var(--text-kucuk);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--renk-soluk);
}
.s-sonraki b {
  font-family: "YOY Architect Ek", "YOY Architect", cursive; font-weight: 400;
  font-size: 1.9rem; letter-spacing: 0; text-transform: none; color: var(--renk-metin);
  transition: transform var(--sure-normal) var(--esne);
}
.s-sonraki:hover b { transform: translateX(10px); }

/* Alt çubuk */
.sunum-alt {
  display: flex; align-items: center; gap: 1.4rem;
  padding: 0.9rem clamp(1.2rem, 3vw, 3rem);
  border-top: 1px solid var(--renk-cizgi);
}
.sunum-cubuk { flex: 1; height: 2px; background: var(--renk-cizgi); position: relative; }
.sunum-cubuk i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--renk-bronz); transition: width 160ms linear; }
.sunum-oklar { display: flex; gap: 0.5rem; }
.sunum-oklar button {
  width: 40px; height: 40px; border: 1px solid var(--renk-cizgi); display: grid; place-items: center;
  transition: background var(--sure-hizli), color var(--sure-hizli);
}
.sunum-oklar button:hover { background: var(--renk-siyah); color: #fff; }
.sunum-ipucu {
  position: absolute; left: 50%; bottom: 5.2rem; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: var(--text-kucuk);
  letter-spacing: 0.24em; color: var(--renk-soluk);
  display: flex; gap: 0.6rem; pointer-events: none;
  transition: opacity var(--sure-normal);
}
.sunum-ipucu span { animation: ipucuKay 1.6s ease-in-out infinite; }
@keyframes ipucuKay { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
.sunum.gezildi .sunum-ipucu { opacity: 0; }

@media (max-width: 860px) {
  .sunum-ray > .slayt { width: 92vw; padding-block: 2rem; }
  .slayt-gorsel { width: 96vw; }
  .s-cerceve img { max-height: 52vh; max-width: 92vw; }
  .sunum-ray > .slayt > * { max-width: none; }
  .slayt-metin p, .slayt-asama p { text-align: left; }
}

/* ---------- Sunum: mimari tez panosu dili ---------- */
.sunum-ray > .slayt { position: relative; border-left: 1px solid var(--renk-cizgi); }
.pano-no {
  position: absolute; top: clamp(1.4rem, 3vh, 2.6rem); right: clamp(1.4rem, 3vw, 3rem);
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(1.6rem, 1rem + 1.6vw, 2.9rem);
  line-height: 1; letter-spacing: -0.02em;
  color: var(--renk-bronz); opacity: 0.85; pointer-events: none; z-index: 2;
}
.pano-no i { font-style: normal; font-size: 0.42em; opacity: 0.75; margin-left: 0.15em; }
.pano-imza {
  position: absolute; left: clamp(1.4rem, 3vw, 3rem); right: clamp(1.4rem, 3vw, 3rem);
  bottom: clamp(1.1rem, 2.4vh, 2rem); padding-top: 0.5rem;
  border-top: 1px solid var(--renk-cizgi);
  font-family: var(--font-mono); font-size: 0.6rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--renk-soluk); pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.slayt-kapak .pano-no { color: var(--renk-bronz); opacity: 1; }
.slayt-kapak .pano-imza { border-top-color: var(--renk-cizgi); color: var(--renk-soluk); }
.s-bolum { color: var(--renk-bronz) !important; }

.slayt-veri { width: min(94vw, 720px); }
.sv-liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--renk-cizgi); border: 1px solid var(--renk-cizgi); }
.sv-oge { background: var(--renk-zemin); padding: 1.5rem 1.2rem; display: grid; gap: 0.2rem; align-content: start; }
.sv-oge b {
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.6rem); line-height: 1;
  color: var(--renk-bronz); letter-spacing: -0.03em;
}
.sv-birim { font-family: var(--font-mono); font-size: var(--text-kucuk); letter-spacing: 0.2em; text-transform: uppercase; }
.sv-not { font-size: var(--text-kucuk); color: var(--renk-soluk); line-height: 1.5; }
.slayt-baglam img { filter: grayscale(1) contrast(1.04); transition: filter var(--sure-normal) ease; }
.slayt-baglam:hover img { filter: none; }
@media (max-width: 860px) { .sv-liste { grid-template-columns: 1fr; } .pano-no { font-size: 1.4rem; } }

/* ---------- Parçalı çizim panoları: üç renkli kodlama ---------- */
:root {
  --renk-turuncu: #d2691e;
  --renk-yesil: #4a7c3f;
  --renk-kahve: #6b4a2f;
}
.renk-turuncu { --pn: var(--renk-turuncu); }
.renk-yesil { --pn: var(--renk-yesil); }
.renk-kahve { --pn: var(--renk-kahve); }

.sunum-ray > .slayt-pano > * { max-width: none; }
.slayt-pano {
  width: min(96vw, 1180px);
  display: grid; grid-template-rows: auto 1fr;
  gap: 1.4rem; align-content: start;
  padding-top: clamp(3.5rem, 8vh, 5.5rem);
}
.slayt-pano .pano-no { color: var(--pn); opacity: 1; }
.pn-bas { border-top: 3px solid var(--pn); padding-top: 0.8rem; position: relative; }
.pn-bas h3 {
  font-family: "YOY Architect Ek", "YOY Architect", cursive; font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.4rem); line-height: 1; color: var(--pn);
}
.pn-bas p { color: var(--renk-soluk); margin-top: 0.35rem; max-width: 60ch; }
.pn-adet {
  position: absolute; right: 0; top: 0.9rem;
  font-family: var(--font-mono); font-size: var(--text-kucuk);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--pn);
}
.pn-izgara {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.1rem; align-content: start;
  max-height: 66vh; overflow-y: auto; padding-right: 0.3rem;
}
.pn-izgara::-webkit-scrollbar { width: 5px; }
.pn-izgara::-webkit-scrollbar-thumb { background: var(--renk-cizgi); }
.pn-oge { cursor: zoom-in; }
.pn-oge img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: contain;
  background: transparent; border: 0;
  mix-blend-mode: multiply;
  transition: transform var(--sure-normal) var(--esne);
}
.pn-oge:hover img { transform: translateY(-3px) scale(1.03); }
.pn-oge figcaption {
  display: flex; gap: 0.5rem; align-items: baseline;
  margin-top: 0.45rem; font-size: 0.66rem; line-height: 1.35;
  letter-spacing: 0.04em; color: var(--renk-metin);
}
.pn-oge figcaption b {
  flex: none; font-family: var(--font-mono); color: var(--pn);
  background: color-mix(in srgb, var(--pn) 12%, transparent);
  padding: 0.05rem 0.3rem;
}
/* Aşama çizim seçkisi: az sayıda çizim, daha büyük gösterilir */
.pr-izgara { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); max-height: 68vh; }
.slayt-parca .pn-bas h3 { font-size: clamp(1.35rem, 1rem + 1.1vw, 2.1rem); }
@media (max-width: 860px) {
  .pr-izgara { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

/* Aşama slaytları da kendi rengini alsın */
.slayt-asama .sa-sembol { color: var(--pn, var(--renk-bronz)); }
@media (max-width: 860px) {
  .pn-izgara { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); max-height: 56vh; }
}

/* ---------- Pano çizim büyüteci ---------- */
.pano-buyutec {
  position: fixed; inset: 0; z-index: 260;
  background: rgba(20, 14, 8, 0.94);
  display: grid; place-items: center; padding: 3.5rem clamp(1rem, 4vw, 4rem) 4.5rem;
  opacity: 0; pointer-events: none; transition: opacity var(--sure-normal);
}
.pano-buyutec.acik { opacity: 1; pointer-events: auto; }
.pano-buyutec img { max-width: 100%; max-height: 82vh; background: #fff; object-fit: contain; }
.pb-kapat {
  position: absolute; top: 1.2rem; right: clamp(1rem, 4vw, 4rem);
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; color: var(--renk-siyah); display: grid; place-items: center;
}
.pb-ad {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: var(--text-kucuk);
  letter-spacing: 0.18em; text-transform: uppercase; color: #e8d9c4; text-align: center;
  max-width: 80vw;
}

/* ---------- Yapı öğeleri tipolojisi ---------- */
.sunum-ray > .slayt-tipoloji > * { max-width: none; }
.slayt-tipoloji {
  width: min(96vw, 1120px);
  display: grid; grid-template-rows: auto auto auto; gap: 1.1rem;
  align-content: start; padding-top: clamp(3.5rem, 8vh, 5.5rem);
}
.slayt-tipoloji .pano-no { color: var(--pn); opacity: 1; }
.tp-bas { border-top: 3px solid var(--pn); padding-top: 0.7rem; }
.tp-no {
  font-family: var(--font-mono); font-size: var(--text-kucuk);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--pn);
}
.tp-bas h3 {
  font-family: "YOY Architect Ek", "YOY Architect", cursive; font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.3rem); line-height: 1; margin-top: 0.2rem;
}
.tp-uclu { display: grid; grid-template-columns: 0.62fr 1.15fr 1.15fr; gap: 1.1rem; align-items: center; }
/* 1. sütun: dolu renkli ikon panosu */
.tp-ikon {
  background: var(--pn); aspect-ratio: 3 / 4;
  display: grid; place-items: center; padding: 16%;
}
.tp-ikon svg { width: 100%; height: 100%; color: #fff; stroke: #fff; }
/* 2. sütun: aksonometrik, ilgili öğe renkli */
.tp-akson { display: grid; place-items: center; }
.tp-akson svg { width: 100%; max-height: 34vh; }
.tp-akson .akson g { stroke-width: 1.4; }
.vurgu-cati .ax-cati polygon,
.vurgu-kapi .ax-kapi polygon, .vurgu-kapi .ax-kapi path,
.vurgu-pencere .ax-pencere polygon,
.vurgu-merdiven .ax-merdiven polygon,
.vurgu-avlu .ax-avlu polygon,
.vurgu-kutle .ax-kutle polygon { fill: var(--pn); }
.vurgu-avlu .ax-seki polygon { fill: color-mix(in srgb, var(--pn) 45%, #fff); }
/* 3. sütun: gerçek teslim çizimi */
.tp-cizim img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: contain;
  background: transparent; border: 0; cursor: zoom-in;
  mix-blend-mode: multiply;
}
.tp-cizim figcaption {
  margin-top: 0.4rem; font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--pn);
}
.tp-metin { max-width: 78ch; color: var(--renk-metin); }
@media (max-width: 900px) {
  .tp-uclu { grid-template-columns: 1fr; }
  .tp-ikon { aspect-ratio: 16 / 6; padding: 3% 30%; }
}

/* ---------- Çizim tamamlanıyor (McBride tarzı sketch → tamamlanmış) ---------- */
.cizen {
  --ilerleme: 0;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 4.5rem); align-items: center;
  padding: var(--bosluk-akis) clamp(1.2rem, 3vw, 3rem);
  background: #e9e2d6;
}
.cizen-metin { display: grid; gap: clamp(2rem, 6vh, 4.5rem); align-content: center; }
.cizen h2 {
  font-family: "YOY Architect Ek", "YOY Architect", "Noteworthy", cursive;
  font-weight: 400; font-size: clamp(2.4rem, 1.4rem + 4vw, 5.2rem);
  line-height: 0.95; letter-spacing: 0.005em;
}
.cizen-alt { display: grid; gap: 0.9rem; max-width: 42ch; }
.cizen-etiket {
  font-family: var(--font-mono); font-size: var(--text-kucuk);
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--renk-bronz);
}
.cizen-baglanti {
  justify-self: start; margin-top: 0.6rem; padding: 0.55rem 0 0.5rem;
  border-bottom: 1px solid var(--renk-metin);
  font-family: var(--font-mono); font-size: var(--text-kucuk);
  letter-spacing: 0.18em; text-transform: uppercase;
  transition: gap var(--sure-normal) var(--esne), color var(--sure-hizli);
  display: inline-flex; gap: 0.8rem; align-items: center;
}
.cizen-baglanti:hover { gap: 1.5rem; color: var(--renk-bronz); }

.cizen-kagit {
  position: relative; background: #fdfaf5;
  padding: clamp(1rem, 2.5vw, 2.4rem);
  box-shadow: 0 26px 60px rgba(29, 21, 13, 0.13);
}
.cizen-kagit .eskiz { width: 100%; height: auto; display: block; }
/* Her çizgi sırayla çizilir: --g gecikmesi, --ilerleme kaydırmadan gelir */
.cizen-kagit .eskiz path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;   /* JS her karede sayısal olarak günceller */
}
.cizen-alt-yazi {
  display: block; margin-top: 0.9rem;
  font-family: var(--font-mono); font-size: var(--text-kucuk);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--renk-soluk);
}
@media (max-width: 900px) {
  .cizen { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cizen { --ilerleme: 1 !important; }
  .cizen-kalem { display: none; }
  .cizen-taslak { opacity: 0; }
}

/* ---------- Mobil kaydırma performansı ---------- */
/* Dokunmatik / dar ekranda kompozit maliyeti yüksek efektleri kapat */
@media (max-width: 900px), (pointer: coarse) {
  /* backdrop-filter mobil GPU'da her karede yeniden çizim yaptırıyor */
  .ustbar, .onyuk-logo, .vitrin header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .ustbar { background: var(--renk-zemin); }

  /* Kaydırmaya bağlı ölçek/paralaks: mobilde kapalı (JS de yazmayı bırakıyor) */
  .proje-karti .gorsel,
  .proje-karti .gorsel .ic { transform: none !important; }

  /* Görünmeyen bölümleri tarayıcı hiç çizmesin */
  .parsel-kart, .proje-karti {
    content-visibility: auto;
    contain-intrinsic-size: 1px 620px;
  }
  .tarihce, .hakkinda, .cizen {
    content-visibility: auto;
    contain-intrinsic-size: 1px 900px;
  }

  /* Gereksiz katman ipuçlarını bırak: mobilde bellek baskısı yapıyor */
  .proje-karti .gorsel, .kapak-sahne .goz { will-change: auto; }

  /* Gri filtre ve büyük gölgeler mobilde sadeleşsin */
  .slayt-baglam img { filter: none; }
  .cizen-kagit { box-shadow: 0 10px 24px rgba(29, 21, 13, 0.10); }
}


/* Eskiz: %2'lik adımlarla güncellenen çizim, kısa geçişle yumuşatılır */
.cizen .eskiz path { transition: stroke-dashoffset 0.16s linear; }
@media (prefers-reduced-motion: reduce) {
  .cizen .eskiz path { transition: none; stroke-dashoffset: 0 !important; }
}