/* YSR34 YAPI — ortak stil
   Düzen fikri: şantiye paftası. Koyu antrasit sahne; bronz çizgiler, kot ve antet
   işaretleri; kireç taşı bölümler nefes alanı. Tek, bilinçli koyu görünüm. */
:root {
  --antrasit: #1F2124;
  --antrasit-2: #26292D;
  --kuyu: #17191B;
  --bronz: #A0714F;
  --bronz-acik: #B8865F;
  --bronz-koyu: #7E5537;
  --kirec: #E9E2D6;
  --kirec-2: #DDD4C5;
  --tas: #A39B8F;
  --tas-koyu: #5A554E;
  --cizgi: rgba(233, 226, 214, .12);
  --cizgi-bronz: rgba(184, 134, 95, .42);

  --f-display: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --f-govde: "Manrope", "Segoe UI", system-ui, sans-serif;
  --f-teknik: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --kenar: clamp(16px, 4.2vw, 64px);
  --azami: 1320px;
  --bolum: clamp(88px, 11vw, 168px);
  color-scheme: dark;
}

/* Yayına alırken "Temsili" etiketlerini tamamen gizlemek için bu satırı açın:
.temsili { display: none !important; } */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.atla {
  position: fixed; z-index: 100; left: 16px; top: 16px;
  padding: 12px 16px; background: var(--bronz-acik); color: var(--kuyu);
  font-weight: 700; text-decoration: none;
  transform: translateY(-160%); transition: transform .2s;
}
.atla:focus { transform: none; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--antrasit);
  color: var(--kirec);
  font-family: var(--f-govde);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { max-width: 100%; }
img { display: block; height: auto; }
p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
code { font-family: var(--f-teknik); font-size: .86em; color: var(--kirec); }
:focus-visible { outline: 2px solid var(--bronz-acik); outline-offset: 3px; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.02;
  letter-spacing: -.012em;
  text-wrap: balance;
}
h1 em, h2 em, h3 em { font-style: italic; color: var(--bronz-acik); }
/* Bodoni'nin ince kılçıkları küçük boyda kaybolur (4 → 1 gibi okunur); rakamlarda ve logoda küçük optik boyut */
.logo text, .daire-olcu dd, .tip-tablo td:first-child, .tip-secici button, .numara-buyuk { font-variation-settings: "opsz" 11; }

.kap { max-width: var(--azami); margin-inline: auto; padding-inline: var(--kenar); }
.gorunmez {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.etiket {
  font-family: var(--f-teknik);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bronz-acik);
}
.oz { color: var(--tas); max-width: 36em; text-wrap: pretty; }

.temsili {
  display: inline-flex; align-items: center;
  font: 500 .6rem/1 var(--f-teknik);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bronz-acik);
  border: 1px dashed var(--cizgi-bronz);
  padding: .4em .6em;
  white-space: nowrap;
  vertical-align: middle;
}
.doldur {
  font-family: var(--f-teknik);
  font-size: .85em;
  color: var(--bronz-acik);
  border-bottom: 1px dashed var(--cizgi-bronz);
}

/* ---------- Butonlar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .65em;
  min-height: 50px;
  padding: .85em 1.5em;
  font: 700 .78rem/1 var(--f-govde);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-wa { background: var(--bronz-acik); color: var(--kuyu); }
.btn-wa:hover { background: var(--kirec); }
.btn-cizgi { border-color: var(--cizgi-bronz); color: var(--kirec); background: transparent; }
.btn-cizgi:hover { border-color: var(--kirec); }
.ok-baglanti {
  display: inline-flex; align-items: center; gap: .5em;
  font: 600 .78rem/1 var(--f-govde);
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: var(--kirec);
  padding-block: .6em;
  border-bottom: 1px solid var(--cizgi-bronz);
}
.ok-baglanti:hover { border-color: var(--kirec); }

/* ---------- Üst bar ---------- */
.ust {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color .35s, border-color .35s;
  border-bottom: 1px solid transparent;
}
.ust.dolu, .ust.menu-acik {
  background: rgba(23, 25, 27, .92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom-color: var(--cizgi);
}
.ust-ic {
  max-width: var(--azami); margin-inline: auto;
  padding: 14px var(--kenar);
  display: flex; align-items: center; gap: 28px;
}
.logo { display: block; flex: none; line-height: 0; }
.logo svg { width: 138px; height: auto; }
.ana-menu { display: flex; gap: 30px; margin-left: auto; }
.ana-menu a {
  font: 600 .74rem/1 var(--f-govde);
  letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: var(--tas);
  padding-block: 10px;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.ana-menu a:hover, .ana-menu a[aria-current="page"] { color: var(--kirec); border-bottom-color: var(--bronz-acik); }
.ust .btn { min-height: 42px; padding: .7em 1.1em; }
.menu-dugme {
  display: none; margin-left: auto;
  width: 48px; height: 48px; border: 1px solid var(--cizgi-bronz); background: transparent;
  cursor: pointer; position: relative;
}
.menu-dugme span, .menu-dugme span::before, .menu-dugme span::after {
  position: absolute; left: 13px; width: 20px; height: 1.5px; background: var(--kirec);
  transition: transform .3s, opacity .3s;
}
.menu-dugme span { top: 23px; }
.menu-dugme span::before, .menu-dugme span::after { content: ""; left: 0; }
.menu-dugme span::before { top: -6px; }
.menu-dugme span::after { top: 6px; }
.menu-acik .menu-dugme span { background: transparent; }
.menu-acik .menu-dugme span::before { transform: translateY(6px) rotate(45deg); }
.menu-acik .menu-dugme span::after { transform: translateY(-6px) rotate(-45deg); }
.mobil-menu {
  display: none;
  max-height: calc(100svh - 80px); overflow-y: auto;
  padding: 8px var(--kenar) 32px;
  border-top: 1px solid var(--cizgi);
}
.mobil-menu a.sayfa {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--f-display); font-size: 2rem; line-height: 1.2;
  text-decoration: none; padding-block: 14px;
  border-bottom: 1px solid var(--cizgi);
}
.mobil-menu .btn { margin-top: 24px; width: 100%; }
.menu-acik .mobil-menu { display: block; }

@media (max-width: 920px) {
  .ana-menu, .ust-ic > .btn { display: none; }
  .menu-dugme { display: block; }
}

/* Sabit WhatsApp butonu */
.wa-sabit {
  position: fixed; z-index: 40;
  right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bronz-acik); color: var(--kuyu);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transition: transform .25s, background-color .25s, opacity .3s;
}
.wa-sabit:hover { transform: translateY(-2px); background: var(--kirec); }
.wa-sabit svg { width: 26px; height: 26px; }
.wa-sabit.gizli { opacity: 0; pointer-events: none; transform: translateY(12px); }

/* ---------- Ana sahne: yükselen kule ---------- */
.sahne { position: relative; background: var(--antrasit); }
.sahne-sabit { position: relative; }
.tuval { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
.tuval canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sahne-golge {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(23, 25, 27, .78) 0%, rgba(23, 25, 27, .25) 42%, transparent 60%),
    linear-gradient(0deg, rgba(23, 25, 27, .7) 0%, transparent 34%);
}
.tuval canvas { visibility: hidden; }
.webgl-var .tuval canvas { visibility: visible; }
.yedek-cizim { display: grid; position: absolute; inset: 0; place-items: center; padding-left: 34%; }
.yedek-cizim svg { width: min(30vw, 260px); height: auto; opacity: .85; }
.webgl-var .yedek-cizim { display: none; }

.giris {
  position: absolute; z-index: 2;
  left: var(--kenar); right: var(--kenar);
  bottom: clamp(56px, 11vh, 132px);
  max-width: 780px;
  transition: opacity .6s ease, transform .6s ease;
}
.giris .etiket { display: block; margin-bottom: 1.4rem; }
.giris h1 { font-size: clamp(3rem, 8.2vw, 8.4rem); line-height: .95; }
.giris .oz { margin-top: 1.6rem; font-size: 1.08rem; }
.eylemler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }
.koordinat {
  position: absolute; z-index: 2;
  right: var(--kenar); bottom: clamp(56px, 11vh, 132px);
  text-align: right;
  font: 500 .7rem/1.9 var(--f-teknik); letter-spacing: .14em; text-transform: uppercase;
  color: var(--tas);
  transition: opacity .6s ease;
}
.koordinat .ipucu { display: inline-flex; align-items: center; gap: .6em; margin-top: .9rem; color: var(--bronz-acik); }
.koordinat .ipucu::after {
  content: ""; width: 1px; height: 28px; background: var(--bronz-acik);
  animation: ipucu 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes ipucu { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* Aşamalar: varsayılan (hareketsiz) görünümde liste olarak durur */
.asamalar {
  max-width: var(--azami); margin-inline: auto;
  padding: var(--bolum) var(--kenar) 0;
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  background: var(--cizgi);
  background-clip: content-box;
}
.asama { background: var(--antrasit); padding: 28px 26px 30px; display: flex; flex-direction: column; gap: 12px; }
.asama .no { font: 500 .72rem/1 var(--f-teknik); letter-spacing: .16em; color: var(--bronz-acik); }
.asama h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); }
.asama .baslik-ust { font: 600 .74rem/1 var(--f-govde); letter-spacing: .16em; text-transform: uppercase; color: var(--tas); }
.asama p { color: var(--tas); max-width: 30em; }
.sartname { display: grid; gap: 0; margin-top: 6px; border-top: 1px solid var(--cizgi); }
.sartname li {
  display: flex; justify-content: space-between; gap: 12px;
  font: 500 .74rem/1.4 var(--f-teknik); letter-spacing: .06em;
  padding-block: 9px; border-bottom: 1px solid var(--cizgi);
  color: var(--kirec);
}
.sartname li::after { content: "—"; color: var(--bronz-acik); }
.asama .temsili { align-self: flex-start; }
.kot, .ilerleme, .sembol-notu { display: none; }

/* Canlı (kaydırmaya bağlı) görünüm — JS "canli" sınıfını ekler */
.sahne.canli { height: 680vh; }
.sahne.canli .sahne-sabit { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.sahne.canli .tuval { position: absolute; inset: 0; height: auto; min-height: 0; }
.sahne.canli.gecti .giris { opacity: 0; transform: translateY(-36px); pointer-events: none; }
.sahne.canli.gecti .koordinat { opacity: 0; }
.sahne.canli .asamalar {
  position: absolute; z-index: 2;
  left: var(--kenar); top: 50%;
  width: min(450px, 36vw); height: 0; padding: 0; margin: 0;
  display: block; background: none;
}
.sahne.canli .asama {
  position: absolute; left: 0; right: 0; top: 0;
  transform: translateY(-40%); opacity: 0; visibility: hidden;
  padding: 0; background: none;
  transition: opacity .55s ease, transform .55s ease, visibility 0s linear .55s;
}
.sahne.canli .asama.aktif {
  opacity: 1; visibility: visible; transform: translateY(-50%);
  transition: opacity .55s ease .1s, transform .55s ease .1s, visibility 0s;
}
.sahne.canli .asama h2 { font-size: clamp(2.2rem, 4.2vw, 4rem); }
.sahne.canli .kot {
  display: block; position: absolute; z-index: 2;
  right: var(--kenar); top: 50%; transform: translateY(-50%);
  text-align: right;
  opacity: 0; transition: opacity .5s;
}
.sahne.canli.gecti .kot, .sahne.canli.gecti .sembol-notu { opacity: 1; }
.kot .ad { font: 500 .66rem/1 var(--f-teknik); letter-spacing: .18em; color: var(--tas); text-transform: uppercase; }
.kot .deger {
  display: block; margin-top: 10px;
  font: 400 clamp(1.5rem, 2.6vw, 2.3rem)/1 var(--f-teknik);
  font-variant-numeric: tabular-nums;
  color: var(--kirec);
}
.kot .cizgi { display: block; width: 100%; height: 1px; margin-top: 12px; background: var(--cizgi-bronz); }
.kot .kot-not { display: block; margin-top: 8px; font: 500 .62rem/1.5 var(--f-teknik); letter-spacing: .12em; color: var(--tas); }
.sahne.canli .ilerleme {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
  position: absolute; z-index: 2;
  left: var(--kenar); right: var(--kenar); bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  opacity: 0; transition: opacity .5s;
}
.sahne.canli.gecti .ilerleme { opacity: 1; }
.ilerleme li { font: 500 .6rem/1 var(--f-teknik); letter-spacing: .12em; text-transform: uppercase; color: var(--tas); }
.ilerleme li::before {
  content: ""; display: block; height: 2px; margin-bottom: 9px;
  background: linear-gradient(90deg, var(--bronz-acik) calc(var(--dolu, 0) * 100%), var(--cizgi) 0);
}
.sahne.canli .sembol-notu {
  display: block; position: absolute; z-index: 2; right: var(--kenar); top: calc(50% + 74px);
  font: 500 .6rem/1 var(--f-teknik); letter-spacing: .14em; text-transform: uppercase; color: var(--tas-koyu);
  opacity: 0; transition: opacity .5s;
}

@media (max-width: 760px) {
  .tuval { min-height: 620px; }
  .sahne-golge { background: linear-gradient(0deg, rgba(23, 25, 27, .95) 8%, rgba(23, 25, 27, .4) 48%, transparent 70%); }
  .giris { bottom: 40px; }
  .giris h1 { font-size: clamp(2.7rem, 13vw, 4.2rem); }
  .giris .oz { font-size: 1rem; }
  .koordinat { display: none; }
  .yedek-cizim { padding: 0 0 40%; }
  .sahne.canli .asamalar { left: var(--kenar); right: var(--kenar); width: auto; top: auto; bottom: 74px; }
  .sahne.canli .asama, .sahne.canli .asama.aktif { top: auto; bottom: 0; transform: translateY(20px); }
  .sahne.canli .asama.aktif { transform: none; }
  .sahne.canli .asama h2 { font-size: 2.2rem; }
  .sahne.canli .asama p { font-size: .95rem; }
  .sahne.canli .asama .sartname { display: none; }
  .sahne.canli .kot { top: calc(78px + env(safe-area-inset-top, 0px)); transform: none; }
  .kot .deger { font-size: 1.3rem; }
  .kot .kot-not, .sahne.canli .sembol-notu { display: none; }
  .ilerleme li { font-size: 0; }
}

/* ---------- Genel bölüm düzeni ---------- */
.bolum { padding-block: var(--bolum); }
.bolum-bas { display: grid; gap: 18px; margin-bottom: clamp(40px, 6vw, 72px); }
.bolum-bas h2 { font-size: clamp(2.4rem, 5.4vw, 5rem); max-width: 14em; }
.bolum-bas.yatay { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
@media (max-width: 760px) { .bolum-bas.yatay { grid-template-columns: 1fr; } }

/* Üç söz */
.sozler { border-top: 1px solid var(--cizgi); }
.soz-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--cizgi-bronz); }
.soz-liste li { padding: 34px clamp(18px, 2.6vw, 40px) 8px 0; display: grid; gap: 14px; align-content: start; }
.soz-liste li + li { padding-left: clamp(18px, 2.6vw, 40px); border-left: 1px solid var(--cizgi); }
.soz-liste .belge { font: 500 .7rem/1 var(--f-teknik); letter-spacing: .16em; text-transform: uppercase; color: var(--bronz-acik); }
.soz-liste h3 { font-size: clamp(2.2rem, 3.4vw, 3.2rem); font-style: italic; }
.soz-liste p { color: var(--tas); }
@media (max-width: 860px) {
  .soz-liste { grid-template-columns: 1fr; }
  .soz-liste li, .soz-liste li + li { padding: 28px 0; border-left: 0; border-bottom: 1px solid var(--cizgi); }
}

/* Hikâye */
.hikaye { background: var(--kuyu); }
.hikaye-izgara { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.hikaye blockquote {
  margin: 0;
  font: italic 400 clamp(2.1rem, 4.4vw, 4.2rem)/1.08 var(--f-display);
  text-wrap: balance;
}
.hikaye blockquote span { color: var(--bronz-acik); }
.hikaye .metin { display: grid; gap: 20px; color: var(--tas); }
.kunye { margin-top: 12px; border-top: 1px solid var(--cizgi-bronz); }
.kunye div { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 16px; padding-block: 13px; border-bottom: 1px solid var(--cizgi); }
.kunye dt { font: 500 .7rem/1.6 var(--f-teknik); letter-spacing: .14em; text-transform: uppercase; color: var(--tas); }
.kunye dd { color: var(--kirec); }
@media (max-width: 860px) { .hikaye-izgara { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .kunye div { grid-template-columns: 1fr; gap: 4px; } }

/* Proje kartları */
.proje-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(20px, 2.6vw, 36px); }
.proje-kart { display: grid; gap: 18px; text-decoration: none; align-content: start; }
.proje-kart .gorsel {
  position: relative; aspect-ratio: 4 / 3; max-width: 100%;
  background: var(--antrasit-2); border: 1px solid var(--cizgi);
  overflow: hidden;
}
.proje-kart .gorsel svg, .proje-kart .gorsel img { width: 100%; height: 100%; object-fit: contain; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.proje-kart:hover .gorsel svg, .proje-kart:hover .gorsel img { transform: scale(1.035); }
.proje-kart .gorsel .temsili { position: absolute; top: 14px; left: 14px; background: rgba(23, 25, 27, .7); }
.proje-kart .ust-bilgi { display: flex; justify-content: space-between; gap: 12px; font: 500 .7rem/1 var(--f-teknik); letter-spacing: .14em; text-transform: uppercase; color: var(--tas); }
.proje-kart h3 { font-size: clamp(1.8rem, 2.6vw, 2.3rem); }
.proje-kart .tur { color: var(--tas); font-size: .95rem; }
.durum { display: inline-flex; align-items: center; gap: .5em; color: var(--kirec); }
.durum::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bronz-acik); }
.durum[data-durum="Tamamlandı"]::before { background: var(--tas); }

/* SVG çizim renkleri (cephe ve plan) */
.c-hat { stroke: var(--bronz-acik); fill: none; }
.c-ince { stroke: rgba(184, 134, 95, .38); fill: none; }
.c-cam { fill: rgba(184, 134, 95, .07); stroke: rgba(184, 134, 95, .55); }
.c-dolgu { fill: rgba(233, 226, 214, .035); stroke: none; }
.c-yazi { fill: var(--tas); font-family: var(--f-teknik); }
.c-yazi-guclu { fill: var(--kirec); font-family: var(--f-teknik); }

/* ---------- Daire tipleri (açık bölüm) ---------- */
.acik { background: var(--kirec); color: var(--antrasit); }
.acik .etiket { color: var(--bronz-koyu); }
.acik .oz { color: var(--tas-koyu); }
.acik .temsili { color: var(--bronz-koyu); border-color: rgba(126, 85, 55, .5); }
.acik .btn-wa { background: var(--antrasit); color: var(--kirec); }
.acik .btn-wa:hover { background: var(--bronz-koyu); }
.acik .btn-cizgi { color: var(--antrasit); border-color: rgba(31, 33, 36, .3); }
.acik .btn-cizgi:hover { border-color: var(--antrasit); }
.acik h1 em, .acik h2 em { color: var(--bronz-koyu); }
.acik .c-hat { stroke: var(--antrasit); }
.acik .c-ince { stroke: rgba(31, 33, 36, .35); }
.acik .c-dolgu { fill: rgba(126, 85, 55, .06); }
.acik .c-yazi { fill: var(--tas-koyu); }
.acik .c-yazi-guclu { fill: var(--antrasit); }

.daire-izgara { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 100px); align-items: center; }
.daire-sol { display: grid; gap: 22px; }
.daire-sol h2 { font-size: clamp(2.4rem, 4.6vw, 4.2rem); }
.tip-secici { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid rgba(31, 33, 36, .25); width: fit-content; }
.tip-secici button {
  min-width: 84px; min-height: 52px; padding: 0 18px;
  background: transparent; border: 0; cursor: pointer;
  font: 400 1.5rem/1 var(--f-display);
  color: var(--tas-koyu);
  transition: background-color .25s, color .25s;
}
.tip-secici button + button { border-left: 1px solid rgba(31, 33, 36, .25); }
.tip-secici button[aria-checked="true"] { background: var(--antrasit); color: var(--kirec); }
.tip-secici button:hover:not([aria-checked="true"]) { background: var(--kirec-2); color: var(--antrasit); }
.daire-olcu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(31, 33, 36, .25); }
.daire-olcu div { padding: 16px 12px 16px 0; border-bottom: 1px solid rgba(31, 33, 36, .15); }
.daire-olcu dt { font: 500 .66rem/1 var(--f-teknik); letter-spacing: .14em; text-transform: uppercase; color: var(--tas-koyu); }
.daire-olcu dd { margin-top: 10px; font: 400 2rem/1 var(--f-display); font-variant-numeric: tabular-nums; }
.daire-olcu dd small { font: 500 .8rem/1 var(--f-teknik); color: var(--tas-koyu); margin-left: 4px; }
.fiyat-notu { font-size: .95rem; color: var(--tas-koyu); }
.pafta { position: relative; background: #F1ECE3; border: 1px solid rgba(31, 33, 36, .2); padding: clamp(14px, 2.4vw, 28px); }
.pafta svg { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .daire-izgara { grid-template-columns: 1fr; } }

/* ---------- Kentsel dönüşüm adımları ---------- */
.donusum { background: var(--antrasit-2); }
.adimlar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); counter-reset: adim; }
.adimlar li { position: relative; padding: 30px 22px 0 0; display: grid; gap: 10px; align-content: start; border-top: 1px solid var(--cizgi-bronz); }
.adimlar li::before {
  counter-increment: adim; content: "0" counter(adim);
  font: 500 .72rem/1 var(--f-teknik); letter-spacing: .14em; color: var(--bronz-acik);
}
.adimlar li::after { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; background: var(--bronz-acik); transform: rotate(45deg); }
.adimlar h3 { font-size: 1.55rem; }
.adimlar p { color: var(--tas); font-size: .95rem; }
.donusum .eylemler { margin-top: clamp(40px, 5vw, 64px); align-items: center; gap: 24px; }
@media (max-width: 980px) {
  .adimlar { grid-template-columns: 1fr; border-left: 1px solid var(--cizgi-bronz); margin-left: 4px; }
  .adimlar li { border-top: 0; padding: 0 0 30px 26px; }
  .adimlar li::after { top: 4px; left: -4px; }
}

/* ---------- Kapanış ---------- */
.kapanis { border-top: 1px solid var(--cizgi); }
.kapanis-ic { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
.kapanis h2 { font-size: clamp(2.8rem, 7vw, 6.6rem); line-height: .98; }
.kapanis .numara { margin-top: 16px; font: 500 .8rem/1.6 var(--f-teknik); letter-spacing: .1em; color: var(--tas); }
@media (max-width: 860px) { .kapanis-ic { grid-template-columns: 1fr; } }

/* ---------- Alt bilgi ---------- */
.alt { background: var(--kuyu); border-top: 1px solid var(--cizgi); padding-block: 64px calc(40px + env(safe-area-inset-bottom, 0px)); }
.alt-izgara { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.alt .logo svg { width: 150px; }
.alt h2 { font: 500 .7rem/1 var(--f-teknik); letter-spacing: .16em; text-transform: uppercase; color: var(--bronz-acik); margin-bottom: 18px; }
.alt ul { display: grid; gap: 10px; font-size: .95rem; color: var(--tas); }
.alt a { text-decoration: none; }
.alt a:hover { color: var(--kirec); }
.alt .tanim { margin-top: 18px; color: var(--tas); font-size: .95rem; max-width: 22em; }
.alt-son {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--cizgi);
  font: 500 .66rem/1.6 var(--f-teknik); letter-spacing: .12em; text-transform: uppercase; color: var(--tas-koyu);
}
@media (max-width: 860px) { .alt-izgara { grid-template-columns: 1fr 1fr; } .alt-izgara > :first-child { grid-column: 1 / -1; } }
@media (max-width: 460px) { .alt-izgara { grid-template-columns: 1fr; } }

/* ---------- İç sayfa başlığı ---------- */
.sayfa-bas { padding-top: calc(var(--bolum) + 60px); padding-bottom: clamp(48px, 6vw, 88px); border-bottom: 1px solid var(--cizgi); position: relative; }
.sayfa-bas .kap { display: grid; gap: 22px; }
.sayfa-bas h1 { font-size: clamp(2.8rem, 7.2vw, 7rem); line-height: .98; max-width: 13em; }
.sayfa-bas .oz { font-size: 1.1rem; }
.kot-izi {
  display: flex; align-items: center; gap: 12px; margin-top: 10px;
  font: 500 .66rem/1 var(--f-teknik); letter-spacing: .16em; text-transform: uppercase; color: var(--tas);
}
.kot-izi::before { content: ""; width: 56px; height: 1px; background: var(--bronz-acik); }

.taslak-notu {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; margin-bottom: 36px;
  border: 1px dashed var(--cizgi-bronz);
  font-size: .9rem; color: var(--tas);
}
.taslak-notu strong { color: var(--kirec); font-weight: 600; }

.filtre { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.filtre button {
  min-height: 44px; padding: 0 18px; cursor: pointer;
  background: transparent; border: 1px solid var(--cizgi);
  font: 600 .72rem/1 var(--f-govde); letter-spacing: .14em; text-transform: uppercase; color: var(--tas);
}
.filtre button[aria-pressed="true"] { border-color: var(--bronz-acik); color: var(--kirec); }
.bos-durum { color: var(--tas); padding-block: 40px; }

/* ---------- Proje detay ---------- */
.proje-bas { padding-top: calc(var(--bolum) + 40px); padding-bottom: var(--bolum); }
.proje-bas-izgara { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.proje-bas h1 { font-size: clamp(3rem, 6.6vw, 6.4rem); line-height: .98; }
.proje-bas .sol { display: grid; gap: 24px; }
.geri { font: 500 .7rem/1 var(--f-teknik); letter-spacing: .14em; text-transform: uppercase; color: var(--tas); text-decoration: none; }
.geri:hover { color: var(--kirec); }
.proje-cizim { border: 1px solid var(--cizgi); background: var(--antrasit-2); position: sticky; top: 96px; }
.proje-cizim svg, .proje-cizim img { width: 100%; height: auto; display: block; }
.tip-tablo { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tip-tablo th { text-align: left; font: 500 .66rem/1 var(--f-teknik); letter-spacing: .14em; text-transform: uppercase; color: var(--tas); padding: 0 12px 12px 0; border-bottom: 1px solid var(--cizgi-bronz); }
.tip-tablo td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--cizgi); vertical-align: middle; }
.tip-tablo td:first-child { font: 400 1.6rem/1 var(--f-display); }
.tip-tablo td:last-child { text-align: right; padding-right: 0; }
.tip-tablo a { font: 600 .7rem/1 var(--f-govde); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--bronz-acik); white-space: nowrap; }
.tip-tablo a:hover { color: var(--kirec); }
.tablo-kap { overflow-x: auto; }
.ozellik-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; border-top: 1px solid var(--cizgi); }
.ozellik-liste li { padding-block: 12px; border-bottom: 1px solid var(--cizgi); color: var(--kirec); display: flex; gap: 12px; }
.ozellik-liste li::before { content: "+"; font-family: var(--f-teknik); color: var(--bronz-acik); }
.galeri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.galeri .bos {
  aspect-ratio: 4 / 3; max-width: 100%;
  display: grid; place-items: center; text-align: center; padding: 16px;
  border: 1px dashed var(--cizgi-bronz);
  font: 500 .66rem/1.6 var(--f-teknik); letter-spacing: .14em; text-transform: uppercase; color: var(--tas);
}
.galeri img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.proje-gezinti { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--cizgi); }
.proje-gezinti a { padding: 32px 0; text-decoration: none; display: grid; gap: 8px; }
.proje-gezinti a + a { text-align: right; border-left: 1px solid var(--cizgi); padding-left: 24px; }
.proje-gezinti span { font: 500 .66rem/1 var(--f-teknik); letter-spacing: .14em; text-transform: uppercase; color: var(--tas); }
.proje-gezinti strong { font: 400 clamp(1.5rem, 3vw, 2.4rem)/1.1 var(--f-display); }
@media (max-width: 900px) {
  .proje-bas-izgara { grid-template-columns: 1fr; }
  .proje-cizim { position: relative; top: 0; }
  .galeri { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) { .ozellik-liste { grid-template-columns: 1fr; } .galeri { grid-template-columns: 1fr; } }

/* ---------- Kentsel dönüşüm sayfası ---------- */
.kimler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--cizgi); border: 1px solid var(--cizgi); }
.kimler li { background: var(--antrasit); padding: 30px 26px; display: grid; gap: 12px; align-content: start; }
.kimler h3 { font-size: 1.7rem; }
.kimler p { color: var(--tas); }
.adim-detay { display: grid; border-top: 1px solid var(--cizgi-bronz); }
.adim-detay li { display: grid; grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px; padding-block: 30px; border-bottom: 1px solid var(--cizgi); }
.adim-detay .no { font: 500 .78rem/2.4 var(--f-teknik); letter-spacing: .14em; color: var(--bronz-acik); }
.adim-detay h3 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.adim-detay p { color: var(--tas); }
.getirin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; border-top: 1px solid var(--cizgi); }
.getirin li { padding-block: 14px; border-bottom: 1px solid var(--cizgi); display: flex; gap: 14px; }
.getirin li::before { content: "□"; color: var(--bronz-acik); font-family: var(--f-teknik); }
.sss { border-top: 1px solid var(--cizgi-bronz); }
.sss details { border-bottom: 1px solid var(--cizgi); }
.sss summary {
  cursor: pointer; list-style: none; padding-block: 24px;
  display: flex; justify-content: space-between; gap: 20px; align-items: baseline;
  font: 400 clamp(1.4rem, 2.2vw, 1.9rem)/1.2 var(--f-display);
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: "+"; font: 400 1.4rem/1 var(--f-teknik); color: var(--bronz-acik); transition: transform .3s; }
.sss details[open] summary::after { transform: rotate(45deg); }
.sss details p { padding-bottom: 26px; color: var(--tas); max-width: 46em; }
@media (max-width: 860px) {
  .kimler { grid-template-columns: 1fr; }
  .adim-detay li { grid-template-columns: 3.4rem minmax(0, 1fr); }
  .adim-detay li p { grid-column: 2; }
  .getirin { grid-template-columns: 1fr; }
}

/* ---------- İletişim sayfası ---------- */
.iletisim-izgara { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.wa-kart { background: var(--antrasit-2); border: 1px solid var(--cizgi); padding: clamp(28px, 4vw, 48px); display: grid; gap: 20px; }
.wa-kart .numara-buyuk { font: 400 clamp(2rem, 4.4vw, 3.6rem)/1 var(--f-display); font-variant-numeric: tabular-nums; }
.bilgi-liste { border-top: 1px solid var(--cizgi-bronz); }
.bilgi-liste li { display: grid; grid-template-columns: 8.5em minmax(0, 1fr) auto; gap: 16px; align-items: center; padding-block: 16px; border-bottom: 1px solid var(--cizgi); }
.bilgi-liste .ad { font: 500 .68rem/1.5 var(--f-teknik); letter-spacing: .14em; text-transform: uppercase; color: var(--tas); }
.bilgi-liste .deger { overflow-wrap: anywhere; }
.kopyala {
  min-height: 36px; padding: 0 12px; cursor: pointer;
  border: 1px solid var(--cizgi); background: transparent;
  font: 500 .62rem/1 var(--f-teknik); letter-spacing: .12em; text-transform: uppercase; color: var(--tas);
}
.kopyala:hover { color: var(--kirec); border-color: var(--cizgi-bronz); }
.konum-pafta { border: 1px solid var(--cizgi); background: var(--antrasit-2); }
.konum-pafta svg { display: block; width: 100%; height: auto; }
.konum-pafta p { padding: 14px 18px; border-top: 1px solid var(--cizgi); font-size: .9rem; color: var(--tas); }
@media (max-width: 900px) { .iletisim-izgara { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .bilgi-liste li { grid-template-columns: 1fr auto; } .bilgi-liste .ad { grid-column: 1 / -1; } }

/* ---------- Görünür oldukça beliren öğeler ---------- */
.belir { transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.js .belir.bekliyor { transform: translateY(26px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .js .belir.bekliyor { transform: none; }
}


/* ── Sabit WhatsApp düğmesi ─────────────────────────────────────────
   Brief'te ana eylem WhatsApp. Sayfanın neresinde olursanız olun
   erişilebilir dursun diye sağ altta sabit. Yalnızca işaret yeşil;
   gövde sitenin antrasit-bronz dilinde. */
.wa-sabit{
  position:fixed; right:22px; bottom:22px; z-index:90;
  display:flex; align-items:center; gap:0; height:52px; padding:0 15px;
  background:var(--kuyu); border:1px solid var(--bronz);
  color:var(--kirec); text-decoration:none; overflow:hidden;
  box-shadow:0 10px 30px -14px rgba(0,0,0,.75);
  transition:border-color .35s ease, gap .45s cubic-bezier(.2,.8,.2,1);
}
.wa-sabit svg{ width:22px; height:22px; flex:0 0 22px; fill:#25D366; }
.wa-sabit span{
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  white-space:nowrap; max-width:0; opacity:0;
  transition:max-width .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
.wa-sabit:hover, .wa-sabit:focus-visible{ border-color:var(--bronz-acik); gap:11px; }
.wa-sabit:hover span, .wa-sabit:focus-visible span{ max-width:170px; opacity:1; }
@media (max-width:640px){ .wa-sabit{ right:14px; bottom:14px; height:48px; padding:0 13px; } }
@media (prefers-reduced-motion: reduce){ .wa-sabit, .wa-sabit span{ transition:none; } }