/* Kayalar Yapı — ana stil. CSS Grid + custom properties. Framework yok. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--kagit);
  color: var(--kavak);
  font-family: var(--font-metin);
  font-size: var(--t-16);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--font-baslik);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--a-4); max-width: var(--olcu-metin); }
img, svg, video { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration-color: var(--beton-40); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

/* Görünür klavye odağı — her yerde, istisnasız */
:focus-visible {
  outline: 2px solid var(--pirinc);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.gizli-erisilebilir {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.atla {
  position: absolute; left: var(--a-4); top: -100px; z-index: 100;
  background: var(--kavak); color: var(--kagit);
  padding: var(--a-3) var(--a-4);
}
.atla:focus { top: var(--a-4); }

/* ---------- Düzen ---------- */
.kap {
  width: 100%;
  max-width: var(--kap-genislik);
  margin-inline: auto;
  padding-inline: var(--kap-pad);
}

.bolum { padding-block: var(--a-24); }
.bolum--kirec { background: var(--kirec); }
.bolum--kavak { background: var(--kavak); color: var(--kirec); }
.bolum--kavak h2 { color: var(--kagit); }

.bolum-basi {
  display: flex; flex-wrap: wrap; gap: var(--a-4);
  align-items: baseline; justify-content: space-between;
  margin-bottom: var(--a-12);
  padding-bottom: var(--a-4);
  border-bottom: var(--cizgi);
}
.bolum--kavak .bolum-basi { border-bottom-color: rgba(232, 231, 225, .18); }
.bolum-basi h2 { font-size: var(--t-31); }
.bolum-basi p { color: var(--beton-metin); margin: 0; font-size: var(--t-14); }

/* ---------- Üst çubuk ---------- */
.ust {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251, 251, 249, .92);
  backdrop-filter: blur(8px);
  border-bottom: var(--cizgi);
}
.ust__ic {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--a-6); min-height: 68px;
}
.logo {
  font-family: var(--font-baslik); font-weight: 700;
  font-size: var(--t-20); letter-spacing: -0.02em;
  text-decoration: none; display: flex; align-items: baseline; gap: var(--a-2);
}
.logo span { font-weight: 400; color: var(--beton-metin); font-size: var(--t-14); letter-spacing: 0; }

.menu { display: flex; gap: var(--a-6); align-items: center; }
.menu a {
  font-size: var(--t-14); text-decoration: none; color: var(--kavak-80);
  padding-block: var(--a-2);
  border-bottom: 1px solid transparent;
}
.menu a:hover { color: var(--kavak); border-bottom-color: var(--kavak-12); }
.menu a[aria-current="page"] { color: var(--kavak); border-bottom-color: var(--kavak); }
.menu .tel { font-weight: 550; color: var(--kavak); }

.menu-dugme {
  display: none; background: none; border: 1px solid var(--beton);
  padding: var(--a-2) var(--a-3); font: inherit; font-size: var(--t-14);
  cursor: pointer; border-radius: var(--radius);
}

/* ---------- Butonlar ---------- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--a-2);
  font-family: var(--font-metin); font-size: var(--t-16); font-weight: 550;
  padding: var(--a-3) var(--a-6); min-height: 48px;
  border-radius: var(--radius); border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
}
.dugme--birincil { background: var(--pirinc); color: var(--kavak); }
.dugme--birincil:hover { background: var(--pirinc-acik); }
.dugme--cerceve { border-color: currentColor; color: inherit; background: transparent; }
.dugme--cerceve:hover { background: var(--kavak); color: var(--kagit); border-color: var(--kavak); }
.bolum--kavak .dugme--cerceve:hover { background: var(--kirec); color: var(--kavak); }
.dugme--koyu { background: var(--kavak); color: var(--kagit); }
.dugme--koyu:hover { background: #0F1A14; }

/* ---------- Hero ---------- */
.hero { position: relative; height: 80vh; min-height: 520px; overflow: hidden; background: var(--kavak); }
.hero__medya { position: absolute; inset: 0; }
.hero__medya img { width: 100%; height: 100%; object-fit: cover; }

/* Sitedeki TEK orkestrasyon anı */
.hero__medya img { animation: heroOlcek 1.2s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes heroOlcek { from { transform: scale(1.06); } to { transform: scale(1); } }

.hero__perde {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,43,35,.30) 0%, rgba(28,43,35,.55) 55%, rgba(28,43,35,.86) 100%);
}
.hero__ic {
  position: relative; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: var(--a-16); color: var(--kagit);
}
.hero__ic h1 {
  font-size: clamp(var(--t-31), 5.2vw, var(--t-61));
  max-width: 16ch; color: var(--kagit);
}
.hero__eylem { display: flex; flex-wrap: wrap; gap: var(--a-3); margin-top: var(--a-8); }

.sicil {
  display: flex; flex-wrap: wrap; gap: var(--a-8) var(--a-12);
  margin-top: var(--a-8); padding-top: var(--a-6);
  border-top: 1px solid rgba(232, 231, 225, .25);
}
.sicil div { display: flex; flex-direction: column; }
.sicil b { font-family: var(--font-baslik); font-size: var(--t-31); font-weight: 700; line-height: 1; }
.sicil span { font-size: var(--t-14); color: rgba(232, 231, 225, .75); margin-top: var(--a-1); }

/* ---------- Filtre ---------- */
.filtre { display: flex; flex-wrap: wrap; gap: var(--a-2); }
.filtre button {
  font: inherit; font-size: var(--t-14);
  background: transparent; border: 1px solid var(--beton); color: var(--kavak-80);
  padding: var(--a-2) var(--a-4); min-height: 40px;
  border-radius: 999px; cursor: pointer;
  transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
}
.filtre button:hover { border-color: var(--kavak); color: var(--kavak); }
.filtre button[aria-pressed="true"] { background: var(--kavak); border-color: var(--kavak); color: var(--kagit); }
.filtre .sayi { margin-left: var(--a-2); color: var(--beton-metin); }
.filtre button[aria-pressed="true"] .sayi { color: rgba(232, 231, 225, .8); }

/* ---------- Proje listesi: kat kesiti ---------- */
.projeler { border-top: var(--cizgi); }

.proje {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 0;
  border-bottom: var(--cizgi);
  background: var(--kagit);
  text-decoration: none;
  transition: background var(--gecis);
}
.proje:hover { background: var(--kavak-06); }
.proje:hover .proje__ad { text-decoration: underline; text-decoration-color: var(--kavak-12); }

.proje__gorsel { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--kirec); }
.proje__gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms cubic-bezier(.2,.6,.3,1); }
.proje:hover .proje__gorsel img { transform: scale(1.02); }

.proje__kunye {
  padding: var(--a-8) var(--a-8) var(--a-8) var(--a-12);
  display: flex; flex-direction: column; gap: var(--a-3);
  justify-content: center;
}
.proje__ad { font-size: var(--t-31); }
.proje__satir { color: var(--kavak-80); font-size: var(--t-16); margin: 0; }
.proje__satir b { font-weight: 550; }
.proje__ayrac { color: var(--beton); padding-inline: var(--a-2); }

.rozet {
  display: inline-flex; align-items: center; gap: var(--a-2);
  font-size: var(--t-12); letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600; color: var(--beton-metin);
}
.rozet::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--beton-40);
}
/* Vurgu rengi #2: sadece devam eden projenin işareti */
.rozet--devam { color: var(--pirinc-metin); }
.rozet--devam::before { background: var(--pirinc); }

.ilerleme { margin-top: var(--a-2); max-width: 420px; }
.ilerleme__ray { height: 3px; background: var(--kavak-12); border-radius: 999px; overflow: hidden; }
.ilerleme__dolu { height: 100%; background: var(--kavak); border-radius: 999px; }
.ilerleme__etiket { font-size: var(--t-12); color: var(--beton-metin); margin-top: var(--a-2); }

.bos-durum {
  padding: var(--a-16) 0; border-bottom: var(--cizgi);
  color: var(--kavak-80);
}
.bos-durum p { font-size: var(--t-20); }

/* ---------- Proje detay ---------- */
.detay-ust { padding-block: var(--a-12) var(--a-8); }
.geri {
  /* flex (inline-flex değil): kendi satırını alsın, rozet altına insin */
  display: flex; width: fit-content; align-items: center; gap: var(--a-2);
  font-size: var(--t-14); color: var(--beton-metin); text-decoration: none;
  margin-bottom: var(--a-6);
}
.geri:hover { color: var(--kavak); }
.detay-ust h1 { font-size: clamp(var(--t-31), 4.5vw, var(--t-49)); margin-block: var(--a-3); }
.detay-ust .konum { color: var(--kavak-80); }

.galeri {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--a-2);
  margin-bottom: var(--a-12);
}
.galeri__ana { grid-column: 1 / -1; }
.galeri figure { margin: 0; position: relative; }
.galeri button.karo {
  display: block; width: 100%; padding: 0; border: 0; background: var(--kirec);
  cursor: zoom-in; overflow: hidden; aspect-ratio: 3 / 2;
}
.galeri__ana button.karo { aspect-ratio: 16 / 9; }
.galeri button.karo img { width: 100%; height: 100%; object-fit: cover; }
.karo__etiket {
  position: absolute; left: var(--a-3); bottom: var(--a-3);
  background: var(--kavak-80); color: var(--kagit);
  font-size: var(--t-12); padding: var(--a-1) var(--a-2);
  border-radius: var(--radius); pointer-events: none;
}
.karo--video::after {
  content: "▶"; position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: var(--t-31); text-shadow: 0 2px 12px rgba(0,0,0,.5);
  pointer-events: none;
}

.detay-govde {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--a-16); align-items: start;
}

.kunye-tablo { width: 100%; border-collapse: collapse; font-size: var(--t-16); }
.kunye-tablo th, .kunye-tablo td {
  text-align: left; padding: var(--a-3) 0; border-bottom: var(--cizgi); vertical-align: top;
}
.kunye-tablo th { font-weight: 500; color: var(--beton-metin); width: 42%; }

.tipler { width: 100%; border-collapse: collapse; font-size: var(--t-14); margin-top: var(--a-4); }
.tipler th { text-align: left; color: var(--beton-metin); font-weight: 500; padding: var(--a-2) var(--a-3) var(--a-2) 0; border-bottom: var(--cizgi); }
.tipler td { padding: var(--a-3) var(--a-3) var(--a-3) 0; border-bottom: var(--cizgi); }
.tipler td:first-child { font-weight: 600; }

.ozellikler { display: flex; flex-wrap: wrap; gap: var(--a-2); margin-top: var(--a-4); }
.ozellikler li {
  font-size: var(--t-14); border: var(--cizgi); border-radius: 999px;
  padding: var(--a-1) var(--a-3); color: var(--kavak-80);
}

.yan-kutu {
  background: var(--kirec); padding: var(--a-8); border-radius: var(--radius);
  position: sticky; top: 92px;
}
.yan-kutu h3 { font-size: var(--t-20); margin-bottom: var(--a-3); }
.yan-kutu .dugme { width: 100%; margin-top: var(--a-2); }

.harita { margin-top: var(--a-6); }
/* Görsel her zaman <img width="1200" height="600"> ile geliyor (js/app.js) ama gerçek
   yüklenen fotoğrafın en-boy oranı bu olmak zorunda değil. Global "img { max-width:100% }"
   kuralı height'ı sabit 600px'te bırakıyordu (width küçülüyor, height küçülmüyordu) — sonuç
   görselin gerilip/sıkışması. width/height'tan bağımsız, kutunun kendi oranını (2/1) CSS'te
   sabitleyip görseli "cover" ile kutuyu TAMAMEN doldurarak yerleştiriyoruz — oranı korunur
   (gerilme yok), gerekiyorsa orantılı büyütülüp taşan kısım kırpılır (boşluk kalmaz).
   Diğer görsel kutularıyla aynı desen: .hero__medya, .proje__gorsel, .galeri karo.
   Görsel artık .galeri karo'daki gibi bir <button> içinde — tıklanınca js/gallery.js'teki
   lightbox'ta büyük hâli açılıyor (bkz. haritaBuyutBagla, js/app.js). */
.harita button.harita__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: var(--cizgi);
  background: var(--kirec);
  cursor: zoom-in;
  overflow: hidden;
  aspect-ratio: 2 / 1;
  border-radius: var(--radius);
}
.harita__zoom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.harita a { font-size: var(--t-14); display: inline-block; margin-top: var(--a-3); }

/* ---------- Firma ---------- */
.firma { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--a-16); align-items: start; }
.mahalle-liste { display: flex; flex-wrap: wrap; gap: var(--a-2); margin-top: var(--a-4); }
.mahalle-liste li {
  font-size: var(--t-14); padding: var(--a-1) var(--a-3);
  border: 1px solid rgba(232,231,225,.25); border-radius: 999px;
}

/* ---------- Süreç (tek numaralı bölüm) ---------- */
.surec { display: grid; gap: 0; counter-reset: adim; }
.surec li {
  display: grid; grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--a-6); padding-block: var(--a-6);
  border-top: var(--cizgi);
}
.surec li::before {
  counter-increment: adim; content: counter(adim, decimal-leading-zero);
  font-family: var(--font-baslik); font-size: var(--t-20); color: var(--beton-metin);
}
.surec h3 { font-size: var(--t-20); margin-bottom: var(--a-2); }
.surec p { margin: 0; color: var(--kavak-80); }

/* ---------- İletişim ---------- */
.iletisim { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--a-16); align-items: start; }

.alan { display: flex; flex-direction: column; gap: var(--a-2); margin-bottom: var(--a-4); }
.alan label { font-size: var(--t-14); font-weight: 550; }
.alan .ipucu { font-size: var(--t-12); color: var(--beton-metin); font-weight: 400; }
.alan input, .alan select, .alan textarea {
  font: inherit; font-size: var(--t-16);
  padding: var(--a-3); min-height: 48px;
  background: var(--kagit); color: var(--kavak);
  border: 1px solid var(--beton); border-radius: var(--radius);
}
.alan textarea { min-height: 130px; resize: vertical; }
.alan ::placeholder { color: var(--beton-metin); opacity: 1; }
.alan input:focus, .alan select:focus, .alan textarea:focus { border-color: var(--kavak); }
.alan .hata { font-size: var(--t-12); color: #A32B1E; }
.alan[data-hatali="true"] input,
.alan[data-hatali="true"] select,
.alan[data-hatali="true"] textarea { border-color: #A32B1E; }

.onay { display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--a-3); align-items: start; margin-bottom: var(--a-6); }
.onay input { width: 20px; height: 20px; margin-top: 3px; }
.onay label { font-size: var(--t-14); color: var(--kavak-80); }

/* Honeypot — ekran okuyucudan da gizli, sadece bot doldurur */
.tuzak { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-sonuc { padding: var(--a-4); border-radius: var(--radius); font-size: var(--t-14); margin-bottom: var(--a-4); }
.form-sonuc[data-tip="basarili"] { background: rgba(28,43,35,.06); border-left: 3px solid var(--kavak); }
.form-sonuc[data-tip="hata"] { background: rgba(163,43,30,.08); border-left: 3px solid #A32B1E; }

.iletisim-bilgi li { padding-block: var(--a-3); border-bottom: var(--cizgi); font-size: var(--t-16); }
.iletisim-bilgi .etiket { display: block; font-size: var(--t-12); color: var(--beton-metin); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--a-1); }

/* ---------- Footer ---------- */
.alt { background: var(--kavak); color: rgba(232,231,225,.75); padding-block: var(--a-12) var(--a-8); font-size: var(--t-14); }
.alt__ic { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--a-8); }
.alt h4 { color: var(--kagit); font-size: var(--t-14); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--a-3); }
.alt li { padding-block: var(--a-1); }
.alt__son { margin-top: var(--a-12); padding-top: var(--a-6); border-top: 1px solid rgba(232,231,225,.15); display: flex; flex-wrap: wrap; gap: var(--a-4); justify-content: space-between; font-size: var(--t-12); }

/* ---------- Mobil alt çubuk ---------- */
.mobil-cubuk {
  display: none;
  position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
  background: var(--kagit); border-top: var(--cizgi);
  padding: var(--a-2) var(--a-3) calc(var(--a-2) + env(safe-area-inset-bottom));
  grid-template-columns: 1fr 1fr; gap: var(--a-2);
}
.mobil-cubuk .dugme { min-height: 50px; font-size: var(--t-16); }

/* ---------- Lightbox ---------- */
.kutu[hidden] { display: none; }
.kutu {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(15, 22, 18, .95);
  display: grid; grid-template-rows: auto 1fr auto;
}
.kutu__ust { display: flex; justify-content: space-between; align-items: center; padding: var(--a-4) var(--a-6); color: var(--kirec); font-size: var(--t-14); }
.kutu__kapat, .kutu__ok {
  background: none; border: 1px solid rgba(232,231,225,.3); color: var(--kirec);
  font: inherit; font-size: var(--t-20); line-height: 1;
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
}
.kutu__kapat:hover, .kutu__ok:hover { background: rgba(232,231,225,.12); }
.kutu__ic { display: grid; place-items: center; padding: 0 var(--a-4); min-height: 0; }
.kutu__ic img { max-height: 78vh; width: auto; object-fit: contain; }
.kutu__ic iframe { width: min(1100px, 92vw); aspect-ratio: 16/9; height: auto; border: 0; }
.kutu__alt { display: flex; align-items: center; justify-content: center; gap: var(--a-6); padding: var(--a-4) var(--a-6); color: rgba(232,231,225,.75); font-size: var(--t-14); }

/* ---------- Yükleniyor / hata ---------- */
.durum-mesaji { padding: var(--a-16) 0; color: var(--beton-metin); }

/* ---------- Duyarlılık ---------- */
@media (max-width: 900px) {
  .detay-govde, .firma, .iletisim { grid-template-columns: minmax(0, 1fr); gap: var(--a-12); }
  .yan-kutu { position: static; }
  .alt__ic { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 720px) {
  .bolum { padding-block: var(--a-16); }
  .hero { height: auto; min-height: 0; }
  .hero__ic { padding-top: var(--a-24); padding-bottom: var(--a-12); }
  .sicil { gap: var(--a-6); }
  .sicil b { font-size: var(--t-25); }

  .menu { display: none; }
  .menu--acik {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; inset-inline: 0; top: 100%;
    background: var(--kagit); border-bottom: var(--cizgi);
    padding: var(--a-2) var(--kap-pad) var(--a-4);
  }
  .menu--acik a { padding-block: var(--a-3); border-bottom: var(--cizgi); }
  .menu-dugme { display: block; }
  .ust__ic { position: relative; }

  .proje { grid-template-columns: minmax(0, 1fr); }
  .proje__kunye { padding: var(--a-6) 0 var(--a-8); }

  .galeri { grid-template-columns: minmax(0, 1fr); }

  .mobil-cubuk { display: grid; }
  body { padding-bottom: 76px; }

  .alt__ic { grid-template-columns: minmax(0,1fr); gap: var(--a-6); }
  .surec li { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--a-4); }
}

@media print {
  .ust, .mobil-cubuk, .kutu, .filtre { display: none !important; }
}