/* ============================================================
   ZEDA İNŞAAT — Editöryal Lüks (v3)
   Yön    : Fildişi & Bronz — mimari monograf estetiği
   İmza   : "Monograf" — fildişi kâğıt panellerin fotoğrafın
            üzerine binmesi + hairline indeks sistemi
   Tipo   : Archivo (kurumsal grotesk, başlık) + Work Sans (metin/etiket)
   Kural  : KÖŞELİ — border-radius yok
   ============================================================ */

:root {
  /* kağıt */
  --kagit:      #faf8f4;
  --kagit-2:    #f0ece4;
  --kagit-3:    #e5dfd4;
  /* lacivert mürekkep */
  --murekkep:   #14213d;   /* başlık ve koyu yüzey */
  --murekkep-2: #2b3a55;   /* gövde metni */
  --lacivert:   #0f1a2e;   /* en derin yüzey */
  --lacivert-2: #17263f;   /* panel */
  --soluk:      #6b7689;
  /* bronz */
  --bronz:      #9c6f3f;
  --bronz-acik: #b98a57;
  --bronz-sis:  rgba(156, 111, 63, .12);
  /* çizgi */
  --hairline:   #ded8cc;
  --hairline-2: #c8c0b1;

  --gecis: cubic-bezier(.22, .61, .36, 1);
  --kenar: clamp(20px, 6vw, 92px);   /* editöryal dış boşluk */
}

* { border-radius: 0 !important; }
html { scroll-behavior: smooth; }

/* overflow-x YALNIZ html'de ve 'clip'ile: 'hidden' body'ye de verilince
   body ayri bir kaydirma kabina donusuyor, window.scrollY calismiyor ve
   scroll'a bagli her sey (sticky header, reveal, yukari butonu) bozuluyor. */
html { overflow-x: clip; }

body {
  font-family: "Work Sans", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--murekkep-2);
  background: var(--kagit);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* Bootstrap satirlarinin negatif kenar bosluklari kabimizdan tasmasin.
   NOT: yalnizca dis marj sifirlanir; sutun genislikleri (col-md-6 vb.) ve
   gutter dolgulari Bootstrap'ta kalir - aksi halde 2 sutunlu formlar bozulur. */
.zd-kap > .row,
.zd-kap .row { margin-left: 0; margin-right: 0; }

h1, h2, h3, h4, h5 {
  font-family: Archivo, "Work Sans", Arial, sans-serif;
  font-weight: 600;
  color: var(--murekkep);
  letter-spacing: -.022em;
  line-height: 1.1;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

::selection { background: var(--bronz); color: var(--kagit); }
:focus-visible { outline: 1px solid var(--bronz); outline-offset: 4px; }

/* ---------- editöryal kap ---------- */
.zd-kap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--kenar);
}

/* ---------- scroll reveal ---------- */
.zd-gizli { opacity: 0; transform: translateY(22px); }
.zd-goster {
  opacity: 1; transform: none;
  transition: opacity .9s var(--gecis), transform .9s var(--gecis);
}
@media (prefers-reduced-motion: reduce) {
  .zd-gizli { opacity: 1; transform: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   ETİKET / İNDEKS SİSTEMİ  (imza)
   ============================================================ */
.zd-etiket {
  display: inline-block;
  font-family: "Work Sans", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--bronz);
}
.zd-indeks {
  font-family: "Work Sans", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--soluk);
  font-variant-numeric: tabular-nums;
}
.zd-kural { height: 1px; background: var(--hairline); border: 0; margin: 0; }

/* bölüm başlığı: etiket + hairline + dev serif */
.zd-bslk { margin-bottom: clamp(38px, 5vw, 66px); }
.zd-bslk__ust {
  display: flex; align-items: center; gap: 20px;
  padding-bottom: 18px; border-bottom: 1px solid var(--hairline);
  margin-bottom: 26px;
}
.zd-bslk__ust .zd-indeks { margin-left: auto; }
.zd-bslk h2 {
  font-size: clamp(34px, 5.2vw, 62px);
  max-width: 17ch;
}
.zd-bslk__aciklama {
  margin-top: 18px; max-width: 52ch; color: var(--soluk); font-size: 17px;
}

/* ============================================================
   HEADER
   ============================================================ */
.zd-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(250, 247, 242, .93);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--hairline);
  transition: border-color .3s;
}
.zd-header.-kucuk { border-bottom-color: var(--hairline-2); }

.zd-header__ic {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  max-width: 1440px; margin: 0 auto;
  padding: 0 var(--kenar);
  height: 92px;
  transition: height .35s var(--gecis);
}
.zd-header.-kucuk .zd-header__ic { height: 70px; }
.zd-logo img { height: 40px; width: auto; transition: height .35s var(--gecis); }
.zd-header.-kucuk .zd-logo img { height: 32px; }

/* --- nav --- */
.zd-nav { display: flex; align-items: center; gap: 2px; }
.zd-nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px;
  font-family: "Work Sans", sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--murekkep-2);
  transition: color .25s;
}
.zd-nav__link::after {
  content: ""; position: absolute;
  left: 16px; right: 16px; bottom: 2px; height: 1px;
  background: var(--bronz);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--gecis);
}
.zd-nav__link:hover { color: var(--bronz); }
.zd-nav__link:hover::after, .zd-nav__link.-aktif::after { transform: scaleX(1); }
.zd-nav__link.-aktif { color: var(--murekkep); }

.zd-nav__grup { position: relative; }
.zd-nav__ok { font-size: 8px; opacity: .55; transition: transform .3s var(--gecis); }
.zd-nav__grup:hover .zd-nav__ok, .zd-nav__grup:focus-within .zd-nav__ok { transform: rotate(180deg); }
.zd-nav__alt {
  position: absolute; top: 100%; left: 8px; min-width: 244px;
  background: var(--kagit);
  border: 1px solid var(--hairline);
  border-top: 1px solid var(--bronz);
  padding: 10px 0;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s var(--gecis), transform .3s var(--gecis), visibility .3s;
  box-shadow: 0 26px 60px rgba(22, 21, 15, .1);
}
.zd-nav__grup:hover .zd-nav__alt, .zd-nav__grup:focus-within .zd-nav__alt {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.zd-nav__altlink {
  display: block; padding: 11px 24px;
  font-size: 14px; color: var(--murekkep-2);
  transition: color .22s, padding-left .22s;
}
.zd-nav__altlink:hover { color: var(--bronz); padding-left: 30px; }

.zd-header__sag { display: flex; align-items: center; gap: 22px; }
.zd-header__tel {
  display: inline-flex; align-items: baseline; gap: 10px;
  font-size: 15px; font-weight: 500; color: var(--murekkep);
  transition: color .25s;
}
.zd-header__tel span:first-child {
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--soluk);
}
.zd-header__tel:hover { color: var(--bronz); }

.zd-burger {
  background: none; border: 0; cursor: pointer;
  /* 44x44 dokunma alani (WCAG); cizgiler gorsel olarak ayni kalir */
  width: 44px; height: 44px; padding: 0; margin-right: -9px;
  display: inline-flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px;
}
.zd-burger span { display: block; width: 26px; height: 1px; background: var(--murekkep); transition: .3s var(--gecis); }
.zd-burger:hover span:nth-child(2) { width: 16px; background: var(--bronz); }

/* --- mobil menü --- */
.zd-mobilmenu { background: var(--kagit); width: min(88vw, 400px) !important; }
.zd-mobilmenu .offcanvas-header { border-bottom: 1px solid var(--hairline); padding: 24px var(--kenar); }
.zd-mobilmenu .offcanvas-header { padding-block: 18px; }
.zd-mobilmenu .offcanvas-body { padding: 16px var(--kenar) 26px; }

/* Menu tek ekrana sigsin: dikey ritim sikilastirildi */
.zd-mobilmenu__link {
  display: block; padding: 12px 0;
  font-family: Archivo, sans-serif; font-size: 21px; letter-spacing: -.01em;
  color: var(--murekkep);
  border-bottom: 1px solid var(--hairline);
  transition: color .22s, padding-left .22s;
}
.zd-mobilmenu__link:hover { color: var(--bronz); padding-left: 10px; }
.zd-mobilmenu__link.-alt {
  font-family: "Work Sans", sans-serif; font-size: 13.5px;
  padding: 7px 0 7px 18px; color: var(--soluk); border-bottom: 0;
}
.zd-mobilmenu__link.-alt::before { content: "—"; color: var(--bronz); margin-right: 9px; }
/* alt link grubunun ilkine ve sonuncusuna nefes payi */
.zd-mobilmenu__link.-alt:first-of-type { padding-top: 10px; }
.zd-mobilmenu__alt { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.zd-mobilmenu__alt a { color: var(--bronz); }
.zd-mobilmenu.show .zd-mobilmenu__link { animation: zdMobil .5s var(--gecis) backwards; }
.zd-mobilmenu.show .zd-mobilmenu__link:nth-child(1) { animation-delay: .06s; }
.zd-mobilmenu.show .zd-mobilmenu__link:nth-child(2) { animation-delay: .1s; }
.zd-mobilmenu.show .zd-mobilmenu__link:nth-child(3) { animation-delay: .14s; }
.zd-mobilmenu.show .zd-mobilmenu__link:nth-child(4) { animation-delay: .18s; }
.zd-mobilmenu.show .zd-mobilmenu__link:nth-child(5) { animation-delay: .22s; }
.zd-mobilmenu.show .zd-mobilmenu__link:nth-child(6) { animation-delay: .26s; }
.zd-mobilmenu.show .zd-mobilmenu__link:nth-child(7) { animation-delay: .3s; }
@keyframes zdMobil { from { opacity: 0; transform: translateX(20px); } }

/* ============================================================
   BÖLÜM
   ============================================================ */
.zd-bolum { padding: clamp(72px, 10vw, 150px) 0; }
.zd-bolum.-kagit2 { background: var(--kagit-2); }
.zd-bolum.-koyu { background: var(--lacivert); color: #b9c2d1; }
.zd-bolum.-koyu h2, .zd-bolum.-koyu h3 { color: var(--kagit); }
.zd-bolum.-koyu .zd-bslk__ust { border-bottom-color: rgba(250,247,242,.16); }
.zd-bolum.-koyu .zd-etiket { color: var(--bronz-acik); }
.zd-bolum.-koyu .zd-indeks { color: rgba(250,247,242,.45); }
.zd-bolum.-dar { padding-top: 0; }

/* ============================================================
   HERO  —  monograf: kâğıt panel fotoğrafın üzerinde
   ============================================================ */
.zd-hero {
  position: relative;
  background: var(--kagit);
  overflow: hidden;
  /* SABİT yükseklik: slayt değişince zıplama olmaz */
  height: clamp(620px, 88vh, 880px);
}
.zd-hero__slayt {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .75s var(--gecis), visibility .75s;
}
.zd-hero__slayt.-acik {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

.zd-hero__izgara {
  display: grid;
  grid-template-columns: minmax(0, 47%) minmax(0, 53%);
  height: 100%;
  align-items: stretch;
}
.zd-hero__sol {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(56px, 8vw, 110px) clamp(30px, 5vw, 76px) clamp(56px, 8vw, 110px) var(--kenar);
  position: relative; z-index: 3;
  background: var(--kagit);
}
.zd-hero__sag { position: relative; overflow: hidden; }
.zd-hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  animation: zdHeroZoom 11s var(--gecis) forwards;
}
@keyframes zdHeroZoom { from { transform: scale(1.1); } to { transform: scale(1); } }
/* üst satır sağa dayalı indeks */
.zd-hero__ustsatir .zd-indeks { margin-left: auto; white-space: nowrap; }

.zd-hero__ustsatir {
  display: flex; align-items: center; gap: 18px;
  padding-bottom: 20px; margin-bottom: 34px;
  border-bottom: 1px solid var(--hairline);
}
.zd-hero__baslik {
  font-size: clamp(40px, 5.6vw, 82px);
  line-height: 1.02;
  margin: 0 0 26px;
  min-height: 2.04em;          /* iki satirlik sabit alan */
}
.zd-hero__baslik em {
  font-style: normal;
  font-weight: 400;
  color: var(--bronz);
}
.zd-hero__alt {
  color: var(--soluk); font-size: clamp(16px, 1.3vw, 19px);
  max-width: 44ch; margin-bottom: 40px;
  min-height: 3.4em;           /* iki-uc satirlik sabit alan */
}
.zd-hero__slayt.-acik .zd-hero__ustsatir { animation: zdSatir .9s var(--gecis) .1s backwards; }
.zd-hero__slayt.-acik .zd-hero__baslik   { animation: zdSatir .9s var(--gecis) .22s backwards; }
.zd-hero__slayt.-acik .zd-hero__alt      { animation: zdSatir .9s var(--gecis) .34s backwards; }
.zd-hero__slayt.-acik .zd-hero__eylem    { animation: zdSatir .9s var(--gecis) .46s backwards; }
@keyframes zdSatir { from { opacity: 0; transform: translateY(26px); } }
.zd-hero__eylem { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

/* hero kontrol şeridi */
.zd-hero__kontrol {
  position: absolute; left: var(--kenar); bottom: 42px; z-index: 5;
  display: flex; align-items: center; gap: 22px;
}
.zd-hero__sayac { font-family: Archivo, sans-serif; font-size: 15px; color: var(--soluk); font-variant-numeric: tabular-nums; }
.zd-hero__sayac b { color: var(--murekkep); font-size: 26px; font-weight: 500; }
.zd-hero__ilerleme { width: 116px; height: 1px; background: var(--hairline-2); position: relative; overflow: hidden; }
.zd-hero__ilerleme i { position: absolute; inset: 0; background: var(--bronz); transform-origin: left; transform: scaleX(0); }
.zd-hero__ilerleme i.-akiyor { animation: zdIlerle 7s linear forwards; }
@keyframes zdIlerle { to { transform: scaleX(1); } }
.zd-hero__oklar { display: flex; gap: 0; }
.zd-hero__oklar button {
  width: 46px; height: 46px; border: 1px solid var(--hairline-2);
  background: transparent; color: var(--murekkep); cursor: pointer;
  transition: .3s var(--gecis); font-size: 13px;
}
.zd-hero__oklar button + button { border-left: 0; }
.zd-hero__oklar button:hover { background: var(--murekkep); border-color: var(--murekkep); color: var(--kagit); }

/* ============================================================
   BUTON / BAĞLANTI
   ============================================================ */
.zd-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 17px 34px; border: 1px solid var(--murekkep); background: var(--murekkep);
  color: var(--kagit); cursor: pointer;
  font-family: "Work Sans", sans-serif; font-size: 11.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  transition: .35s var(--gecis);
}
.zd-btn::after { content: "\2192"; font-family: Arial, sans-serif; transition: transform .35s var(--gecis); }
.zd-btn:hover { background: var(--bronz); border-color: var(--bronz); color: var(--kagit); }
.zd-btn:hover::after { transform: translateX(6px); }
.zd-btn.-bos { background: transparent; color: var(--murekkep); }
.zd-btn.-bos:hover { background: var(--murekkep); border-color: var(--murekkep); color: var(--kagit); }
.zd-btn.-beyaz { background: transparent; border-color: rgba(250,247,242,.4); color: var(--kagit); }
.zd-btn.-beyaz:hover { background: var(--kagit); border-color: var(--kagit); color: var(--murekkep); }
.zd-btn.-sade::after { content: none; }

/* metin bağlantısı: altı çizili, hover'da bronz */
.zd-link {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  font-family: "Work Sans", sans-serif; font-size: 11.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--murekkep);
  padding-bottom: 6px;
}
.zd-link::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--murekkep); transform-origin: right; transition: transform .4s var(--gecis);
}
.zd-link:hover { color: var(--bronz); }
.zd-link:hover::before { background: var(--bronz); transform: scaleX(.4); transform-origin: left; }

/* ============================================================
   HAKKIMIZDA — monograf katmanı
   ============================================================ */
.zd-hakkinda { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.zd-hakkinda__gorsel { position: relative; }
.zd-hakkinda__gorsel img:first-child { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.zd-hakkinda__kagit {
  position: absolute; right: -34px; bottom: -34px; width: 62%;
  background: var(--kagit); padding: 26px 28px;
  border: 1px solid var(--hairline);
}
.zd-hakkinda__kagit img { width: 100%; aspect-ratio: 4/3; object-fit: cover; margin-bottom: 16px; }
.zd-hakkinda__kagit p { margin: 0; font-family: Archivo, sans-serif; font-size: 15px; color: var(--murekkep); }
.zd-hakkinda__kagit span { display: block; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--bronz); margin-top: 4px; }
.zd-hakkinda__metin p { margin-bottom: 18px; }
.zd-hakkinda__metin p:first-of-type {
  font-family: Archivo, sans-serif; font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.45; color: var(--murekkep);
}
.zd-hakkinda__metin u {
  text-decoration-color: var(--bronz); text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.zd-hakkinda__metin b { font-weight: 600; color: var(--murekkep); }

/* ============================================================
   SAYILAR — hairline indeks
   ============================================================ */
.zd-sayilar { display: grid; grid-template-columns: repeat(4, 1fr); }
.zd-sayi { padding: 8px 26px 8px 0; border-left: 1px solid rgba(250,247,242,.16); padding-left: 26px; }
.zd-sayi:first-child { border-left: 0; padding-left: 0; }
.zd-sayi__deger {
  font-family: Archivo, sans-serif; font-size: clamp(44px, 5.6vw, 76px); font-weight: 700; letter-spacing: -.03em;
  color: var(--kagit); line-height: 1; font-variant-numeric: tabular-nums;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}
.zd-sayi__etiket {
  margin-top: 14px; font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--bronz-acik);
}

/* ============================================================
   SÜREÇ — numaralı indeks (gerçek sıra taşıdığı için meşru)
   ============================================================ */
.zd-surec { border-top: 1px solid var(--hairline); }
.zd-surec__satir {
  display: grid; grid-template-columns: 90px minmax(0, 320px) 1fr;
  gap: clamp(20px, 4vw, 60px); align-items: baseline;
  padding: 34px 0; border-bottom: 1px solid var(--hairline);
  transition: background .4s var(--gecis), padding-left .4s var(--gecis);
}
.zd-surec__satir:hover { background: var(--bronz-sis); padding-left: 18px; }
.zd-surec__no {
  font-family: Archivo, sans-serif; font-size: 15px; color: var(--bronz);
  font-variant-numeric: tabular-nums; letter-spacing: .1em;
}
.zd-surec__baslik { font-size: clamp(21px, 2.2vw, 29px); margin: 0; }
.zd-surec__metin { color: var(--soluk); margin: 0; font-size: 16px; max-width: 56ch; }

/* ============================================================
   PROJELER — editöryal ızgara
   ============================================================ */
.zd-projeler { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(24px, 3vw, 46px); }
.zd-proje { grid-column: span 2; position: relative; display: block; }
/* editöryal ritim: 1. ve 4. daha geniş */
.zd-proje.-genis { grid-column: span 4; }
.zd-proje__cerceve { position: relative; overflow: hidden; background: var(--kagit-3); }
.zd-proje__cerceve img {
  width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 3/4;
  transition: transform 1s var(--gecis), filter .6s;
}
.zd-proje.-genis .zd-proje__cerceve img { aspect-ratio: 16/11; }
.zd-proje:hover .zd-proje__cerceve img { transform: scale(1.045); }
.zd-proje__bos {
  aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center;
  background: var(--kagit-3); color: var(--hairline-2); font-size: 34px;
}
.zd-proje.-genis .zd-proje__bos { aspect-ratio: 16/11; }
.zd-proje__durum {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  background: var(--kagit); color: var(--murekkep);
  font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  padding: 8px 14px;
}
.zd-proje__durum.-devam { background: var(--bronz); color: var(--kagit); }
.zd-proje__alt {
  display: flex; align-items: baseline; gap: 16px;
  padding: 20px 0 0; border-top: 1px solid var(--hairline); margin-top: 20px;
  transition: border-color .4s var(--gecis);
}
.zd-proje:hover .zd-proje__alt { border-top-color: var(--bronz); }
.zd-proje__no { font-family: Archivo, sans-serif; font-size: 13px; color: var(--bronz); font-variant-numeric: tabular-nums; }
.zd-proje__baslik { font-size: clamp(20px, 1.9vw, 27px); margin: 0; }
.zd-proje__konum { margin-left: auto; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--soluk); white-space: nowrap; }

/* ============================================================
   YORUMLAR — editöryal alıntı
   ============================================================ */
.zd-yorumlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 54px); }
.zd-yorum { border-top: 1px solid rgba(250,247,242,.2); padding-top: 26px; }
.zd-yorum__metin {
  font-family: Archivo, sans-serif; font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.5; color: var(--kagit); margin: 0 0 22px;
  font-variation-settings: "SOFT" 20, "WONK" 1;
}
.zd-yorum__yazar { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--bronz-acik); }
.zd-yorum__kaynak { font-size: 12px; color: rgba(250,247,242,.4); margin-top: 4px; }

/* ============================================================
   BLOG — editöryal liste
   ============================================================ */
.zd-yazilar { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 3vw, 48px); }
.zd-yazi-kart { display: flex; flex-direction: column; }
.zd-yazi-kart__gorsel { overflow: hidden; background: var(--kagit-3); }
.zd-yazi-kart__gorsel img { width: 100%; aspect-ratio: 3/2; object-fit: cover; transition: transform 1s var(--gecis); }
.zd-yazi-kart:hover .zd-yazi-kart__gorsel img { transform: scale(1.045); }
.zd-yazi-kart__meta {
  display: flex; gap: 16px; align-items: center;
  padding: 20px 0 14px; border-top: 1px solid var(--hairline); margin-top: 20px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--soluk);
  transition: border-color .4s var(--gecis);
}
.zd-yazi-kart:hover .zd-yazi-kart__meta { border-top-color: var(--bronz); }
.zd-yazi-kart__meta .-kategori { color: var(--bronz); }
.zd-yazi-kart__baslik { font-size: clamp(20px, 1.8vw, 26px); margin: 0 0 12px; }
.zd-yazi-kart__baslik a { transition: color .25s; }
.zd-yazi-kart:hover .zd-yazi-kart__baslik a { color: var(--bronz); }
.zd-yazi-kart p { color: var(--soluk); font-size: 15.5px; margin: 0 0 18px; flex: 1; }

/* ============================================================
   SAYFA AFİŞİ
   ============================================================ */
.zd-afis { position: relative; background: var(--kagit-2); padding: clamp(70px, 9vw, 130px) 0 clamp(46px, 5vw, 70px); overflow: hidden; }
.zd-afis__bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: .16; filter: grayscale(.4);
}
.zd-afis .zd-kap { position: relative; z-index: 2; }
.zd-afis__ust {
  display: flex; align-items: center; gap: 18px;
  padding-bottom: 18px; border-bottom: 1px solid var(--hairline-2); margin-bottom: 28px;
}
.zd-afis__baslik {
  font-size: clamp(36px, 6vw, 76px); margin: 0; max-width: 20ch;
  animation: zdSatir .9s var(--gecis) .1s backwards;
}
.zd-afis__aciklama { margin-top: 20px; color: var(--soluk); max-width: 58ch; }
.zd-kirinti { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--soluk); }
.zd-kirinti a { color: var(--bronz); }
.zd-kirinti a:hover { color: var(--murekkep); }
.zd-kirinti i { font-size: 8px; margin: 0 10px; opacity: .5; }

/* ============================================================
   PROJE DETAY
   ============================================================ */
.zd-kunye { border-top: 1px solid var(--hairline); }
.zd-kunye__satir {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 17px 0; border-bottom: 1px solid var(--hairline);
}
.zd-kunye__k { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--soluk); }
.zd-kunye__v { font-family: Archivo, sans-serif; font-size: 17px; color: var(--murekkep); text-align: right; }
.zd-eksik { color: var(--hairline-2); font-style: italic; font-family: "Work Sans", sans-serif; font-size: 14px; }
.zd-galeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.zd-galeri a { overflow: hidden; display: block; background: var(--kagit-3); }
.zd-galeri img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .8s var(--gecis); }
.zd-galeri a:hover img { transform: scale(1.06); }

/* lightbox */
.zd-lightbox {
  position: fixed; inset: 0; z-index: 2000; display: none;
  align-items: center; justify-content: center; background: rgba(15, 26, 46, .97); padding: 5vh 5vw;
}
.zd-lightbox.-acik { display: flex; animation: zdFade .3s; }
@keyframes zdFade { from { opacity: 0; } }
.zd-lightbox img { max-width: 100%; max-height: 88vh; }
.zd-lightbox__kapat, .zd-lightbox__ok {
  position: absolute; background: none; border: 1px solid rgba(250,247,242,.3);
  color: var(--kagit); cursor: pointer; transition: .3s var(--gecis);
}
.zd-lightbox__kapat { top: 26px; right: 30px; width: 46px; height: 46px; font-size: 22px; }
.zd-lightbox__ok { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; font-size: 17px; }
.zd-lightbox__kapat:hover, .zd-lightbox__ok:hover { background: var(--kagit); color: var(--murekkep); }
.zd-lightbox__ok.-geri { left: 22px; }
.zd-lightbox__ok.-ileri { right: 22px; }

/* ============================================================
   YAZI (blog detay)
   ============================================================ */
.zd-yazi { font-size: 18px; line-height: 1.85; max-width: 68ch; }
.zd-yazi > p:first-of-type {
  font-family: Archivo, sans-serif; font-size: 22px; line-height: 1.55; color: var(--murekkep);
}
.zd-yazi h2 {
  font-size: clamp(25px, 2.4vw, 33px); margin: 46px 0 18px;
  padding-top: 22px; border-top: 1px solid var(--hairline);
}
.zd-yazi h3 { font-size: 22px; margin: 32px 0 12px; }
.zd-yazi img { margin: 26px 0; }
.zd-yazi ul, .zd-yazi ol { padding-left: 20px; margin-bottom: 20px; }
.zd-yazi li { margin-bottom: 10px; }
.zd-yazi li::marker { color: var(--bronz); }
.zd-yazi a { color: var(--bronz); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.zd-yazi a:hover { color: var(--murekkep); }
.zd-yazi strong, .zd-yazi b { font-weight: 600; color: var(--murekkep); }
.zd-yazi blockquote {
  border-left: 1px solid var(--bronz); padding: 6px 0 6px 26px; margin: 28px 0;
  font-family: Archivo, sans-serif; font-size: 21px; font-style: italic; color: var(--murekkep);
}
.zd-etiketler { display: flex; flex-wrap: wrap; gap: 10px; }
.zd-etiketler a {
  border: 1px solid var(--hairline); padding: 8px 16px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--soluk);
  transition: .28s var(--gecis);
}
.zd-etiketler a:hover { border-color: var(--bronz); color: var(--bronz); }

/* ============================================================
   İLETİŞİM
   ============================================================ */
.zd-iletisim-liste { border-top: 1px solid var(--hairline); }
.zd-iletisim-oge {
  display: grid; grid-template-columns: 130px 1fr; gap: 24px; align-items: baseline;
  padding: 24px 0; border-bottom: 1px solid var(--hairline);
  transition: padding-left .4s var(--gecis);
}
.zd-iletisim-oge:hover { padding-left: 12px; }
.zd-iletisim-oge__k { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--soluk); }
.zd-iletisim-oge__v { font-family: Archivo, sans-serif; font-size: clamp(18px, 1.6vw, 23px); color: var(--murekkep); }
.zd-iletisim-oge__v a:hover { color: var(--bronz); }
.zd-harita { width: 100%; height: clamp(320px, 44vw, 520px); filter: grayscale(.32); transition: filter .5s; }
.zd-harita:hover { filter: none; }

.zd-form label {
  display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--soluk); margin-bottom: 10px;
}
.zd-form .form-control {
  border: 0; border-bottom: 1px solid var(--hairline-2); background: transparent;
  padding: 12px 0; font-size: 17px; color: var(--murekkep);
  box-shadow: none !important; transition: border-color .3s;
}
.zd-form .form-control:focus { border-bottom-color: var(--bronz); background: transparent; }
.zd-form .form-control::placeholder { color: var(--hairline-2); }
.zd-balpetek { position: absolute; left: -9999px; opacity: 0; }

/* ============================================================
   CTA
   ============================================================ */
/* CTA: YUKSELTILMIS panel tonu. Footer en derin tonda kalir; ikisi
   ayni zemini paylasinca tek bir dev koyu blok gibi gorunuyordu. */
.zd-cta { background: var(--lacivert-2); color: #b9c2d1; position: relative; }
.zd-cta::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(185,138,87,.5) 22%, rgba(185,138,87,.5) 78%, transparent);
}
.zd-cta__izgara { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: end; }
.zd-cta h2 { color: var(--kagit); font-size: clamp(30px, 4.4vw, 58px); max-width: 16ch; }
.zd-cta p { color: rgba(250,247,242,.6); max-width: 46ch; margin: 20px 0 0; }

/* ============================================================
   SAYFALAMA
   ============================================================ */
.zd-sayfalama { display: flex; gap: 0; justify-content: center; border: 1px solid var(--hairline); width: fit-content; margin: 0 auto; }
.zd-sayfalama a, .zd-sayfalama span {
  min-width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center;
  font-family: Archivo, sans-serif; font-size: 16px; color: var(--murekkep);
  border-left: 1px solid var(--hairline); transition: .28s var(--gecis);
}
.zd-sayfalama a:first-child, .zd-sayfalama span:first-child { border-left: 0; }
.zd-sayfalama a:hover { background: var(--kagit-2); color: var(--bronz); }
.zd-sayfalama .-aktif { background: var(--murekkep); color: var(--kagit); }

/* ============================================================
   FLASH
   ============================================================ */
.zd-flash { padding: 16px 22px; border: 1px solid; margin-bottom: 26px; font-size: 15px; }
.zd-flash.-ok { border-color: #4a6b3f; background: #eef3ea; color: #3d5a33; }
.zd-flash.-hata { border-color: #9c4a3f; background: #f8ece9; color: #8a3a30; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .zd-projeler { grid-template-columns: repeat(4, 1fr); }
  .zd-proje, .zd-proje.-genis { grid-column: span 2; }
  .zd-proje.-genis .zd-proje__cerceve img, .zd-proje.-genis .zd-proje__bos { aspect-ratio: 3/4; }
  .zd-yazilar, .zd-yorumlar { grid-template-columns: repeat(2, 1fr); }
  .zd-footer__izgara { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 991px) {
  body { font-size: 16px; }
  /* Slaytlar absolute oldugu icin hero SABIT yukseklik ister.
     Mobilde alan yetmeyince flex ogeler eziliyor ve baslik alt metne biniyordu:
     yukseklik buyutuldu + ogelerin ezilmesi kapatildi. */
  .zd-hero { height: clamp(700px, 175vw, 1000px); }
  .zd-hero__izgara { grid-template-columns: 1fr; grid-template-rows: 38% 62%; }
  .zd-hero__sag { order: -1; min-height: 0; }
  .zd-hero__sol { padding: 26px var(--kenar) 78px; justify-content: flex-start; }
  .zd-hero__sol > * { flex-shrink: 0; }          /* KRITIK: ezilme yok */
  .zd-hero__ustsatir { padding-bottom: 14px; margin-bottom: 22px; }
  .zd-hero__baslik { min-height: 0; margin-bottom: 16px; font-size: clamp(34px, 8.6vw, 52px); }
  .zd-hero__alt { min-height: 0; margin-bottom: 22px; font-size: 15.5px; line-height: 1.62; max-width: 100%; }
  .zd-hero__eylem { gap: 16px 20px; }
  .zd-hero__sol::after { display: none; }
  .zd-hero__kontrol { bottom: 26px; }
  .zd-hakkinda { grid-template-columns: 1fr; }
  .zd-hakkinda__kagit { position: static; width: 100%; margin-top: 18px; }
  .zd-sayilar { grid-template-columns: repeat(2, 1fr); gap: 30px 0; }
  .zd-sayi:nth-child(3) { border-left: 0; padding-left: 0; }
  .zd-surec__satir { grid-template-columns: 60px 1fr; }
  .zd-surec__metin { grid-column: 2; }
  .zd-cta__izgara { grid-template-columns: 1fr; }
  .zd-galeri { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .zd-projeler, .zd-yazilar, .zd-yorumlar { grid-template-columns: 1fr; }
  .zd-footer__izgara { grid-template-columns: 1fr; }
  .zd-iletisim-oge { grid-template-columns: 1fr; gap: 6px; }
  .zd-hero__kontrol { gap: 14px; }
  .zd-hero__ilerleme { width: 60px; }
}

/* ============================================================
   MİMARİ DOKU KATMANLARI  (blueprint ızgara + cephe çizimi)
   ============================================================ */
.zd-doku { position: relative; }
.zd-doku > * { position: relative; z-index: 2; }

/* blueprint ızgara: koyu yüzeylerde ince teknik kâğıt hissi */
.zd-bolum.-koyu::before,
.zd-cta::before,
.zd-footer::before,
.zd-hero__sol::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("../img/desen/izgara.svg");
  background-size: 96px 96px;
  opacity: .07;
  pointer-events: none;
  z-index: 0;
}
.zd-hero__sol::before { opacity: .05; }
.zd-bolum.-koyu, .zd-cta { position: relative; overflow: hidden; }
.zd-bolum.-koyu > *, .zd-cta > *, .zd-footer > * { position: relative; z-index: 2; }

/* cephe çizimi: footer ve CTA altında yavaşça kayan mimari silüet */
.zd-cephe {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: clamp(180px, 26vw, 340px);
  background-image: url("../img/desen/cephe.svg");
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: auto 100%;
  opacity: .13;
  pointer-events: none;
  z-index: 1;
  animation: zdKay 90s linear infinite;
}
@keyframes zdKay { to { background-position: -1200px 100%; } }
.zd-cta .zd-cephe { opacity: .1; }

/* pergel: hero sol panelde yavaşça dönen mimari araç çizimi */
.zd-pergel {
  position: absolute; z-index: 1; pointer-events: none;
  width: clamp(190px, 22vw, 320px); aspect-ratio: 1;
  background: url("../img/desen/pergel.svg") center/contain no-repeat;
  opacity: .1;
  animation: zdDon 64s linear infinite;
}
@keyframes zdDon { to { transform: rotate(360deg); } }
.zd-hero__sol .zd-pergel { right: 4%; bottom: 8%; }
.zd-footer .zd-pergel { right: -60px; top: -60px; opacity: .07; }

/* menü panellerinde ızgara */
.zd-mobilmenu .offcanvas-body { position: relative; }   /* zd-nav__alt zaten absolute — dokunma */
.zd-nav__alt::before, .zd-mobilmenu .offcanvas-body::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("../img/desen/izgara.svg");
  background-size: 72px 72px;
  opacity: .05;
  pointer-events: none;
}
.zd-nav__alt > *, .zd-mobilmenu .offcanvas-body > * { position: relative; z-index: 2; }

/* ============================================================
   HAREKET  (parallax + süzülme)
   ============================================================ */
.zd-hero__bg { will-change: transform; }

/* süzülen ince mimari çizgiler — "gravity" hissi */
.zd-suzulen {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1;
}
.zd-suzulen i {
  position: absolute;
  display: block;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--bronz-acik), transparent);
  opacity: .3;
  animation: zdDus linear infinite;
}
@keyframes zdDus {
  0%   { transform: translateY(-120%); opacity: 0; }
  12%  { opacity: .34; }
  88%  { opacity: .34; }
  100% { transform: translateY(120%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .zd-cephe, .zd-pergel, .zd-suzulen i { animation: none !important; }
}

/* ============================================================
   FOOTER — mimari monograf künyesi
   ============================================================ */
.zd-footer {
  position: relative;
  background: var(--lacivert);           /* en derin ton - CTA panelinden koyu */
  color: rgba(250, 248, 244, .62);
  padding-top: clamp(64px, 8vw, 116px);
  overflow: hidden;
  box-shadow: inset 0 14px 34px -18px rgba(0, 0, 0, .75);   /* ustten yumusak golge = katman ayrimi */
}
.zd-footer > * { position: relative; z-index: 2; }

/* --- üst şerit: dev marka + iletişim kartı --- */
.zd-footer__ust {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  padding-bottom: clamp(44px, 5vw, 72px);
  border-bottom: 1px solid rgba(250, 248, 244, .13);
}
.zd-footer__logo { height: 46px; margin-bottom: 22px; }
.zd-footer__ad {
  color: var(--kagit);
  font-size: clamp(38px, 6.4vw, 88px);
  line-height: .95;
  letter-spacing: -.035em;
  margin: 0 0 18px;
}
.zd-footer__slogan {
  color: rgba(250, 248, 244, .58);
  font-size: clamp(15px, 1.3vw, 18px);
  max-width: 40ch;
  margin: 0;
}

.zd-footer__kart {
  border: 1px solid rgba(250, 248, 244, .16);
  border-top: 1px solid var(--bronz-acik);
  padding: clamp(24px, 2.6vw, 34px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  background: rgba(250, 248, 244, .02);
}
.zd-footer__tel {
  font-family: Archivo, sans-serif;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--kagit);
  margin-top: 12px;
  transition: color .25s;
}
.zd-footer__tel:hover { color: var(--bronz-acik); }
.zd-footer__eposta { font-size: 15px; color: rgba(250, 248, 244, .6); transition: color .25s; }
.zd-footer__eposta:hover { color: var(--kagit); }
.zd-footer__btn { margin-top: 22px; }

/* --- künye sütunları --- */
.zd-footer__izgara {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(26px, 3vw, 54px);
  padding: clamp(40px, 5vw, 68px) 0;
}
.zd-footer__baslik {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: "Work Sans", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--bronz-acik);
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(250, 248, 244, .13);
}
.zd-footer__baslik span {
  font-family: Archivo, sans-serif;
  font-size: 13px;
  color: rgba(250, 248, 244, .3);
  font-variant-numeric: tabular-nums;
}
.zd-footer__liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 13px; font-size: 15px; }
.zd-footer__liste a { position: relative; transition: color .25s, padding-left .25s; }
.zd-footer__liste a::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 0; height: 1px; background: var(--bronz-acik);
  transition: width .3s var(--gecis);
}
.zd-footer__liste a:hover { color: var(--kagit); padding-left: 18px; }
.zd-footer__liste a:hover::before { width: 12px; }
.zd-footer__adres { font-style: normal; font-size: 15px; line-height: 1.75; margin: 0 0 16px; }
.zd-footer__yol { color: var(--bronz-acik); }
.zd-footer__yol::before { background: var(--bronz-acik); }

/* --- teknik künye şeridi --- */
.zd-footer__alt {
  border-top: 1px solid rgba(250, 248, 244, .16);
  padding: 26px 0 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px clamp(20px, 4vw, 48px);
  align-items: center;
  font-size: 13px;
  color: rgba(250, 248, 244, .62);
}
.zd-footer__alt .zd-indeks { color: rgba(250, 248, 244, .5); }
.zd-footer__alt > :first-child { margin-right: auto; }

/* ============================================================
   YÜZEN EYLEM BUTONLARI (FAB)
   ============================================================ */
.zd-fab {
  position: fixed;
  bottom: 26px;
  z-index: 1050;
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 21px;
  text-decoration: none;
  transition: .35s var(--gecis);
  box-shadow: 0 14px 34px rgba(15, 26, 46, .26);
}
.zd-fab.-whatsapp {
  left: 26px;
  background: #1f7d54;
  color: #fff;
  gap: 0;
  overflow: hidden;
  width: 54px;
}
.zd-fab.-whatsapp:hover { background: #25a367; width: 172px; gap: 11px; }
.zd-fab__etiket {
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 0;
  opacity: 0;
  transition: max-width .35s var(--gecis), opacity .25s;
}
.zd-fab.-whatsapp:hover .zd-fab__etiket { max-width: 110px; opacity: 1; }

.zd-fab.-yukari {
  right: 26px;
  background: var(--lacivert);
  color: var(--kagit);
  border-color: rgba(250, 248, 244, .2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
}
.zd-fab.-yukari.-gorunur { opacity: 1; visibility: visible; transform: none; }
.zd-fab.-yukari:hover { background: var(--bronz); border-color: var(--bronz); transform: translateY(-3px); }

@media (max-width: 700px) {
  .zd-fab { width: 48px; height: 48px; font-size: 19px; bottom: 18px; }
  /* WhatsApp mobilde SAGA alindi: sol altta hero slayt sayacini kapatiyordu */
  .zd-fab.-whatsapp { left: auto; right: 18px; bottom: 76px; }
  .zd-fab.-whatsapp:hover { width: 48px; gap: 0; }
  .zd-fab.-whatsapp:hover .zd-fab__etiket { max-width: 0; opacity: 0; }
  .zd-fab.-yukari { right: 18px; }
}

/* ============================================================
   FOOTER — RESPONSIVE
   Mobilde kunye SUTUNLARI tek sutuna dusmez: ikili izgara kalir,
   boylece footer yarisi kadar kisalir.
   ============================================================ */
@media (max-width: 1100px) {
  .zd-footer__izgara { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .zd-footer__ust { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 620px) {
  .zd-footer__izgara {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 22px;
    padding: 34px 0 30px;
  }
  /* 2x2 izgara: adres tam genislik almaz, footer yarisi kadar kisalir */
  .zd-footer__sutun.-genis { grid-column: auto; }
  .zd-footer__adres { font-size: 13.5px; line-height: 1.65; }

  .zd-footer__baslik {
    font-size: 10px;
    letter-spacing: .18em;
    padding-bottom: 11px;
    margin-bottom: 14px;
    gap: 9px;
  }
  .zd-footer__baslik span { font-size: 11px; }
  .zd-footer__liste { gap: 10px; font-size: 14.5px; }
  .zd-footer__adres { font-size: 14.5px; margin-bottom: 12px; }

  /* mobilde 4. proje ve sonrasi gizli - liste kisa kalsin */
  .zd-footer__liste.-projeler li:nth-child(n+4) { display: none; }

  /* Kurumsal sutunu mobilde gizli: ayni linkler hamburger menude zaten var */
  .zd-footer__sutun.-menu { display: none; }
}

/* ust serit mobilde daha kompakt */
@media (max-width: 620px) {
  .zd-footer { padding-top: 42px; }
  .zd-footer__ust { gap: 24px; padding-bottom: 2px; }
  .zd-footer__ad { font-size: clamp(30px, 9vw, 40px); }
  .zd-footer__slogan { font-size: 15px; }
  .zd-footer__kart { padding: 22px; }
  .zd-footer__btn { margin-top: 18px; }
}


/* ============================================================
   IMZA — mimar kasesi
   Ikon yerine ince bronz cizgi: kucuk boyutta leke gibi durmuyor.
   ============================================================ */
.zd-imza {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 8px 15px;
  border: 1px solid rgba(250, 248, 244, .18);
  color: rgba(250, 248, 244, .48);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: border-color .35s var(--gecis), background .35s var(--gecis), color .35s;
}
.zd-imza::before {
  content: "";
  width: 18px; height: 1px; flex: 0 0 auto;
  background: var(--bronz-acik);
  opacity: .8;
  transition: width .35s var(--gecis);
}
.zd-imza a {
  font-family: Archivo, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--bronz-acik);
  transition: color .25s;
}
.zd-imza:hover {
  border-color: var(--bronz);
  background: rgba(156, 111, 63, .12);
  color: rgba(250, 248, 244, .7);
}
.zd-imza:hover::before { width: 28px; }
.zd-imza:hover a { color: var(--kagit); }


/* ============================================================
   MOBIL KUNYE SERIDI — yuzen butonlar kunyeyi kapatmasin
   ============================================================ */
@media (max-width: 700px) {
  .zd-footer__alt {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 20px 0 78px;         /* WhatsApp / yukari butonu icin pay */
    font-size: 12.5px;
    color: rgba(250, 248, 244, .66);
  }
  .zd-footer__alt > :first-child { margin-right: 0; }
  /* telif + yil yan yana, imza alt satirda ortali */
  .zd-footer__alt .zd-indeks::before { content: "·"; margin-right: 10px; opacity: .5; }
  .zd-imza {
    flex: 0 0 auto;
    width: auto;
    margin-top: 4px;
    justify-content: center;
    padding: 9px 15px;
    font-size: 10px;
  }
  /* imza kutusu icerigine gore daralsin; satir dolunca dogal olarak alta gecer */
  .zd-footer__alt > .zd-imza { flex: 0 0 auto; width: fit-content; margin-inline: auto; }
}


/* Mobil menu acikken yuzen butonlar menuyu kapatmasin */
body.zd-menu-acik .zd-fab,
body:has(.zd-mobilmenu.show) .zd-fab,
body:has(.offcanvas-backdrop) .zd-fab {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s var(--gecis), visibility .2s;
}


/* ============================================================
   DOKUNMA HEDEFLERI
   Gorsel boyut degismeden tiklama alani buyutulur (yalniz
   dokunmatik cihazlarda; imlecli cihazlarda gereksiz).
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  .zd-link,
  .zd-footer__liste a,
  .zd-footer__eposta,
  .zd-blogkart__baslik a,
  .zd-yazi-kart__baslik a,
  .zd-imza a {
    position: relative;
  }
  .zd-link::after,
  .zd-footer__liste a::after,
  .zd-footer__eposta::after,
  .zd-blogkart__baslik a::after,
  .zd-yazi-kart__baslik a::after,
  .zd-imza a::after {
    content: "";
    position: absolute;
    inset: -11px -6px;
    /* yalniz dokunma alani - gorsel etki yok */
  }
}

/* ============================================================
   BLOG KATEGORI FILTRESI
   Header nav stili odunc alinmiyordu -> sarmada girintiler
   bozuluyordu. Kendi bileseni: esit hizali, sarabilen cipler.
   Yatay kaydirma YOK.
   ============================================================ */
.zd-blogfiltre {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 26px;
  margin-bottom: 42px;
  border-bottom: 1px solid var(--hairline);
}
.zd-blogfiltre__oge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--hairline);
  color: var(--murekkep-2);
  font-family: "Work Sans", sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: border-color .25s var(--gecis), color .25s, background .25s;
}
.zd-blogfiltre__adet {
  font-family: Archivo, sans-serif;
  font-size: 11px;
  letter-spacing: 0;
  color: var(--soluk);
  font-variant-numeric: tabular-nums;
}
.zd-blogfiltre__oge:hover {
  border-color: var(--bronz-acik);
  color: var(--bronz);
}
.zd-blogfiltre__oge:hover .zd-blogfiltre__adet { color: var(--bronz-acik); }
.zd-blogfiltre__oge.-aktif {
  background: var(--murekkep);
  border-color: var(--murekkep);
  color: var(--kagit);
}
.zd-blogfiltre__oge.-aktif .zd-blogfiltre__adet { color: var(--bronz-acik); }

@media (max-width: 620px) {
  .zd-blogfiltre {
    gap: 7px;
    padding-bottom: 20px;
    margin-bottom: 30px;
  }
  .zd-blogfiltre__oge {
    padding: 8px 12px;
    font-size: 10.5px;
    letter-spacing: .12em;
  }
}

/* ============================================================
   FOOTER — MIMARI ATMOSFER KATMANLARI
   Uc katman: blueprint izgara (statik) + surüklenen siluet seridi
   + yavas nefes alan bronz isik. Hepsi cok dusuk opaklikta;
   metnin okunurlugunu bozmaz.
   ============================================================ */
.zd-footer { position: relative; isolation: isolate; }

/* 1) blueprint ızgara — hafif, sabit */
.zd-footer__izgara-desen {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(185, 138, 87, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185, 138, 87, .055) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 74%, transparent);
}

/* 2) sürüklenen mimari siluet şeridi */
.zd-footer__siluet {
  position: absolute; left: 0; right: 0; bottom: 0; height: 190px;
  z-index: 0; pointer-events: none; overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.zd-footer__siluet::before,
.zd-footer__siluet::after {
  content: "";
  position: absolute; bottom: 0; width: 200%; height: 100%;
  background: url("../img/desen/siluet.svg") repeat-x left bottom;
  background-size: auto 100%;
}
.zd-footer__siluet::before {
  opacity: .16;
  animation: zdSiluetKay 90s linear infinite;
}
/* ikinci kat: daha kucuk, daha yavas -> derinlik hissi */
.zd-footer__siluet::after {
  opacity: .07;
  background-size: auto 62%;
  animation: zdSiluetKay 150s linear infinite reverse;
}
@keyframes zdSiluetKay {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 3) yavas nefes alan bronz isik */
.zd-footer__isik {
  position: absolute; z-index: 0; pointer-events: none;
  width: min(720px, 82vw); aspect-ratio: 1;
  right: -14%; top: -22%;
  background: radial-gradient(circle, rgba(185, 138, 87, .16), transparent 66%);
  animation: zdIsikNefes 14s ease-in-out infinite;
}
@keyframes zdIsikNefes {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.12); }
}

/* footer icerigi katmanlarin uzerinde kalsin */
.zd-footer > .zd-kap { position: relative; z-index: 2; }

@media (max-width: 620px) {
  .zd-footer__siluet { height: 132px; }
  .zd-footer__siluet::before { opacity: .13; }
  .zd-footer__siluet::after { display: none; }   /* mobilde tek kat yeterli */
  .zd-footer__izgara-desen { background-size: 34px 34px; }
}

/* hareket azaltma tercihine saygi */
@media (prefers-reduced-motion: reduce) {
  .zd-footer__siluet::before,
  .zd-footer__siluet::after,
  .zd-footer__isik { animation: none !important; }
}

/* ============================================================
   CTA — footer'dan ayrisan kendi dokusu
   Onceden footer ile ayni "cephe" desenini paylasiyordu; ikisi
   ust uste gelince tek blok gibi okunuyordu. Artik CTA'da ince
   olcu cizgileri (teknik cizim dili), footer'da bina silueti var.
   ============================================================ */
.zd-cta__cizgi {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(185, 138, 87, .16) 0 1px,
      transparent 1px 84px);
  mask-image: linear-gradient(to bottom, transparent, #000 34%, #000 66%, transparent);
}
.zd-cta .zd-kap { position: relative; z-index: 2; }

/* footer iletisim kartindaki yeni ogeler */
.zd-footer__wa {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 20px; padding: 11px 18px;
  border: 1px solid rgba(37, 211, 102, .42);
  color: #6ee7a4;
  font-family: "Work Sans", sans-serif; font-size: 12px;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  transition: background .28s var(--gecis), border-color .28s, color .28s;
}
.zd-footer__wa i { font-size: 16px; }
.zd-footer__wa:hover {
  background: rgba(37, 211, 102, .12);
  border-color: #25d366;
  color: #8df3bd;
}
.zd-footer__saat {
  display: block; margin-top: 16px;
  font-size: 12.5px; letter-spacing: .04em;
  color: rgba(250, 248, 244, .42);
}

/* footer gorunurken yuzen WhatsApp gizlenir (footer'da kendi butonu var) */
.zd-fab.-whatsapp.zd-fab-gizle {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
}

/* ============================================================
   CTA — sag sutun: 3 adimlik surec
   Telefon footer'a tasininca sag sutun bos kalmisti; yerine
   footer'da tekrar etmeyen gercek icerik kondu.
   ============================================================ */
.zd-cta__yan { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }

.zd-adimlar {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0;
  width: 100%;
  border-top: 1px solid rgba(250, 248, 244, .14);
}
.zd-adim {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid rgba(250, 248, 244, .14);
}
.zd-adim__no {
  font-family: Archivo, sans-serif;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--bronz-acik);
  letter-spacing: .06em;
  padding-top: 2px;
}
.zd-adim__govde { display: flex; flex-direction: column; gap: 3px; }
.zd-adim__baslik {
  color: var(--kagit);
  font-family: "Work Sans", sans-serif;
  font-size: 14px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.zd-adim__metin { color: rgba(250, 248, 244, .55); font-size: 14.5px; line-height: 1.6; }
.zd-cta__btn { align-self: flex-start; }

@media (max-width: 991px) {
  .zd-cta__yan { gap: 24px; }
  .zd-adim { padding: 13px 0; grid-template-columns: 34px 1fr; gap: 11px; }
  .zd-adim__metin { font-size: 14px; }
}

/* ============================================================
   SÜREÇ ADIM KARTLARI
   Duz numarali listenin yerine ikonlu kartlar. Ikon cercevesi
   KARE (marka kurali: oval/yuvarlak yok), bronz hairline.
   ============================================================ */
.zd-surec {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
.zd-adimkart {
  position: relative;
  padding: clamp(28px, 2.6vw, 40px) clamp(22px, 2vw, 32px) clamp(34px, 3vw, 46px);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--kagit);
  transition: background .4s var(--gecis), transform .4s var(--gecis);
}
.zd-adimkart::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--bronz);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--gecis);
}
.zd-adimkart:hover { background: #fff; transform: translateY(-4px); }
.zd-adimkart:hover::after { transform: scaleX(1); }

.zd-adimkart__ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px;
  border: 1px solid var(--bronz-acik);
  color: var(--bronz);
  font-size: 22px;
  margin-bottom: 26px;
  transition: background .4s var(--gecis), color .4s var(--gecis), border-color .4s;
}
.zd-adimkart:hover .zd-adimkart__ikon {
  background: var(--bronz);
  border-color: var(--bronz);
  color: var(--kagit);
}

.zd-adimkart__no {
  display: block;
  font-family: Archivo, sans-serif;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .2em;
  color: var(--soluk);
  margin-bottom: 8px;
}
.zd-adimkart__baslik {
  font-size: clamp(18px, 1.5vw, 21px);
  margin: 0 0 10px;
  color: var(--murekkep);
}
.zd-adimkart__metin {
  margin: 0;
  color: var(--murekkep-2);
  font-size: 15.5px;
  line-height: 1.68;
}

@media (max-width: 1100px) {
  .zd-surec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .zd-surec { grid-template-columns: 1fr; }
  .zd-adimkart { padding: 24px 20px 28px; }
  .zd-adimkart__ikon { width: 50px; height: 50px; font-size: 19px; margin-bottom: 20px; }
}

/* ============================================================
   ÖN YÜKLEME — "teknik çizim sayfası"
   Logo kendi konturunu cizer, olcu cizgisi dolar, ardindan
   fildisi perde ikiye ayrilip sayfayi acar.
   JS calismasa bile animasyon kendini gizler (guvenli varsayilan).
   ============================================================ */
.zd-on {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  color: var(--bronz);
  pointer-events: all;
}
/* fildisi perdeler */
.zd-on__perde {
  position: absolute; left: 0; right: 0; height: 50.5%;
  background: var(--kagit);
  background-image:
    linear-gradient(rgba(156, 111, 63, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(156, 111, 63, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  transition: transform 1s cubic-bezier(.76, 0, .24, 1);
}
.zd-on__perde.-ust { top: 0; }
.zd-on__perde.-alt { bottom: 0; }

.zd-on__ic {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  transition: opacity .45s ease, transform .6s var(--gecis);
}

/* --- logo kontur cizimi --- */
.zd-on__logo { width: clamp(120px, 17vw, 190px); height: auto; overflow: visible; }
.zd-on__logo path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: zdOnCiz 1.5s cubic-bezier(.65, 0, .35, 1) forwards;
}
.zd-on__logo path:nth-child(2) { animation-delay: .28s; }
@keyframes zdOnCiz { to { stroke-dashoffset: 0; } }

/* --- marka adi --- */
.zd-on__ad {
  margin-top: 26px;
  font-family: "Work Sans", sans-serif;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .42em; text-transform: uppercase;
  color: var(--murekkep);
  opacity: 0;
  animation: zdOnBelir .7s var(--gecis) 1.1s forwards;
}
@keyframes zdOnBelir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --- olcu cizgisi (ilerleme) --- */
.zd-on__olcu {
  position: relative;
  width: clamp(140px, 20vw, 210px); height: 1px;
  margin-top: 22px;
  background: var(--hairline);
}
.zd-on__olcu::before,
.zd-on__olcu::after {
  content: ""; position: absolute; top: -3px; width: 1px; height: 7px;
  background: var(--hairline);
}
.zd-on__olcu::before { left: 0; }
.zd-on__olcu::after  { right: 0; }
.zd-on__olcu__dolgu {
  position: absolute; inset: 0 auto 0 0;
  width: 0; background: var(--bronz);
  animation: zdOnDolum 2.1s cubic-bezier(.5, 0, .2, 1) forwards;
}
@keyframes zdOnDolum { to { width: 100%; } }

/* --- kunye (cizim sayfasi etiketi) --- */
.zd-on__kunye {
  display: flex; gap: 18px; margin-top: 16px;
  font-family: Archivo, sans-serif;
  font-size: 10px; letter-spacing: .24em;
  color: var(--soluk);
  opacity: 0;
  animation: zdOnBelir .7s var(--gecis) 1.35s forwards;
}

/* --- CIKIS: perdeler ayrilir --- */
.zd-on.-cikis { pointer-events: none; }
.zd-on.-cikis .zd-on__ic { opacity: 0; transform: translateY(-14px); }
.zd-on.-cikis .zd-on__perde.-ust { transform: translateY(-101%); }
.zd-on.-cikis .zd-on__perde.-alt { transform: translateY(101%); }
.zd-on.-bitti { display: none; }

/* --- JS yoksa guvenli varsayilan: kendi kendine kalkar --- */
.zd-on {
  animation: zdOnGuvenlik 0s linear 5s forwards;
}
@keyframes zdOnGuvenlik { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* --- on yukleme acikken sayfa kaymasin --- */
body.zd-on-acik { overflow: hidden; }

/* --- hareket azaltma: aninda gecilir --- */
@media (prefers-reduced-motion: reduce) {
  .zd-on { display: none !important; }
  body.zd-on-acik { overflow: auto; }
}

@media (max-width: 620px) {
  .zd-on__ad { font-size: 10.5px; letter-spacing: .34em; margin-top: 20px; }
  .zd-on__olcu { margin-top: 18px; }
}