/* =========================================================
   AYKENT PLANLAMA — Site stilleri
   Renkleri değiştirmek için sadece aşağıdaki :root bölümünü düzenleyin.
   ========================================================= */

:root {
  --lacivert: #1B2B4C;      /* ana koyu renk: başlıklar, butonlar, footer */
  --lacivert-2: #2A3D66;    /* buton üzerine gelince */
  --krem: #F5F1E8;          /* açık arka plan */
  --bej: #E8E1D1;           /* harita zemin rengi */
  --altin: #8B6C42;         /* vurgu rengi: küçük başlıklar, numaralar */
  --altin-italik: #8E7045;  /* başlıklardaki italik kelimeler */
  --metin: #4A5068;         /* paragraf rengi */
  --cizgi: #E6E0D4;         /* bölüm ayırıcı çizgiler */
  --kart-cizgi: #E9E1D6;    /* kart kenarlıkları */
  --liste-cizgi: #DCD3C2;   /* hizmet listesi çizgileri */
  --beyaz: #FFFFFF;

  --serif: "Newsreader", Georgia, serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--lacivert);
  background: var(--beyaz);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.kapsayici { max-width: 1080px; margin: 0 auto; padding: 0 60px; }

/* ---------- Yazı stilleri ---------- */
h1, h2, .serif {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
}
h1 { font-size: 55px; line-height: 57px; }
h2 { font-size: 40px; line-height: 43px; }
em { font-style: italic; color: var(--altin-italik); }

.ust-baslik {
  display: flex; align-items: center; gap: 9px;
  color: var(--altin);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.105em; text-transform: uppercase;
  line-height: 14px;
  margin-bottom: 12px;
}
.ust-baslik.cizgili::before { content: ""; width: 24px; height: 1px; background: currentColor; }

/* ---------- Butonlar ---------- */
.buton {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--lacivert); color: var(--beyaz);
  border: 0; border-radius: 999px;
  height: 42px; padding: 0 24px;
  font: 600 12.5px var(--sans);
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s;
}
.buton:hover { background: var(--lacivert-2); }
.buton-acik { background: var(--krem); color: var(--lacivert); }
.buton-acik:hover { background: var(--beyaz); }
.ok { display: inline-block; font-size: 13px; transition: transform .2s; }
.buton:hover .ok, a:hover > .ok { transform: translateX(3px); }

.link-ok {
  display: inline-flex; align-items: center; gap: 14px;
  font-weight: 500; font-size: 12.5px; line-height: 16px;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.link-ok:hover { color: var(--altin); }

/* ---------- Üst menü (header) ---------- */
.ust {
  background: var(--beyaz);
  border-bottom: 1px solid var(--cizgi);
  position: sticky; top: 0; z-index: 50;
}
.ust .kapsayici { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { display: flex; align-items: center; gap: 11px; }
.logo img { width: 39px; height: 39px; }
.logo span { font-weight: 700; font-size: 13.5px; letter-spacing: 0.057em; line-height: 15px; }

.menu { display: flex; align-items: center; gap: 30px; }
.menu a:not(.buton) {
  font-size: 12px; font-weight: 500;
  padding: 6px 0 5px; border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.menu a:not(.buton):hover { border-color: var(--liste-cizgi); }
.menu a.aktif { border-color: var(--altin); }
.menu .buton { height: 34px; padding: 0 17px; font-size: 12px; font-weight: 500; }

.menu-dugme {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 10px;
}
.menu-dugme span { display: block; height: 2px; background: var(--lacivert); margin: 5px 0; transition: .2s; }

/* ---------- Kontur çizgileri (arka plan süsü) ---------- */
.konturlu { position: relative; overflow: hidden; }
.konturlu > .kontur {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.konturlu > .kapsayici { position: relative; }

/* ---------- Ana sayfa: giriş (hero) ---------- */
.kahraman { background: var(--krem); border-bottom: 1px solid var(--cizgi); }
.kahraman .kapsayici { display: grid; grid-template-columns: 1fr 435px; gap: 40px; }
.kahraman-metin { padding: 81px 0 36px; }
.kahraman-metin .ust-baslik { margin-bottom: 20px; }
.iletisim-izgara .ust-baslik { margin-bottom: 15px; }
.sayfa-bas .ust-baslik { margin-bottom: 14px; }
.kahraman-metin h1 { max-width: 350px; }
.kahraman-metin .giris { font-size: 14.25px; line-height: 23px; color: var(--metin); max-width: 400px; margin: 19px 0 30px; }
.buton-grup { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; }
.kahraman-gorsel {
  margin-top: 92px;
  background: var(--bej);
  border-radius: 22px 22px 0 0;
  overflow: hidden;
}
.kahraman-gorsel img { width: 100%; }

/* ---------- Genel bölümler ---------- */
.bolum { padding: 93px 0 94px; }
.bolum-krem { background: var(--krem); border-top: 1px solid var(--cizgi); }
.baslik-satir {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  align-items: end;
}
.baslik-satir > p { color: var(--metin); font-size: 13.5px; line-height: 21.5px; padding-bottom: 2px; }

/* ---------- Ana sayfa: 4 adım ---------- */
.adimlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
.adim { border-top: 1px solid var(--lacivert); padding-top: 21px; }
.adim .no { display: block; font-family: var(--serif); color: var(--altin); font-size: 18px; line-height: 20px; }
.adim h3 { font-size: 16.5px; font-weight: 600; line-height: 20px; margin: 10px 0 11px; }
.adim p { font-size: 12px; line-height: 19px; color: var(--metin); max-width: 210px; }

/* ---------- Ana sayfa: hizmet listesi ---------- */
.hizmetler-bolum { padding: 98px 0 97px; }
.hizmet-izgara > div:last-child { margin-top: -4px; }
.hizmet-izgara { display: grid; grid-template-columns: 300px 1fr; gap: 66px; align-items: start; }
.hizmet-sol h2 { margin-bottom: 16px; }
.hizmet-sol .giris { font-size: 13.5px; line-height: 21.5px; color: var(--metin); margin-bottom: 26px; }

.pafta {
  background: var(--beyaz); border: 1px solid var(--kart-cizgi); border-radius: 13px;
  padding: 18px 18px 17px; margin-top: 45px;
}
.pafta { display: block; transition: box-shadow .2s; }
a.pafta:hover { box-shadow: 0 10px 30px rgba(27, 43, 76, .08); }
.pafta > img { border-radius: 8px; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pafta-lejant { display: flex; justify-content: space-between; font-size: 8.9px; margin-top: 21px; color: var(--lacivert); }
.pafta-lejant span { display: inline-flex; align-items: center; gap: 6px; }
.pafta-lejant i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.pafta-alt {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.084em; color: var(--altin);
  margin-top: 6px;
}
.pafta-alt svg { width: 23px; height: 23px; color: var(--lacivert); }

.asama + .asama { margin-top: 30px; }
.asama-baslik {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.086em; text-transform: uppercase;
  color: var(--altin); line-height: 14px;
  padding-bottom: 7px; border-bottom: 1px solid var(--liste-cizgi);
}
.hizmet-satir {
  display: grid; grid-template-columns: 60px 1fr 222px 39px; align-items: center;
  padding: 20.5px 0; border-bottom: 1px solid var(--liste-cizgi);
}
.hizmet-satir .no { font-family: var(--serif); color: var(--altin); font-size: 18px; letter-spacing: 0; line-height: 1; }
.hizmet-satir h3 { font-size: 23px; line-height: 23px; padding-right: 10px; transition: color .2s; }
.hizmet-satir p { font-size: 12px; line-height: 18px; color: var(--metin); }
.hizmet-satir .ok { color: var(--altin); justify-self: end; margin-right: 4px; line-height: 1; }
.hizmet-satir:hover h3 { color: var(--altin); }

/* ---------- Ana sayfa: hakkımızda ve rakamlar ---------- */
.hakkimizda { background: var(--lacivert); color: var(--beyaz); padding: 100px 0; position: relative; overflow: hidden; scroll-margin-top: 72px; }
.hakkimizda > .filigran { width: 520px; left: -140px; top: 50%; opacity: .05; transform: translateY(-50%); }
.hk-izgara { display: grid; grid-template-columns: 1fr 420px; gap: 64px; align-items: center; position: relative; }
.hakkimizda .ust-baslik { color: #C9A877; }
.hakkimizda h2 { margin-bottom: 24px; max-width: 460px; }
.hakkimizda em { color: #C9A877; }
.hk-metin > p { color: #C4CBD8; font-size: 14.25px; line-height: 23px; max-width: 470px; margin-bottom: 14px; }
.hk-degerler { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.hk-degerler > div { border-top: 1px solid rgba(255, 255, 255, .25); padding-top: 16px; }
.hk-degerler h3 { font-size: 14.5px; font-weight: 600; line-height: 19px; margin-bottom: 8px; }
.hk-degerler p { font-size: 12px; line-height: 18px; color: #AEB6C6; }

.sayac-kart {
  background: #22355C; border: 1px solid rgba(255, 255, 255, .1); border-radius: 20px;
  padding: 30px 32px 26px;
}
.sayac-ust { font-size: 11px; font-weight: 600; letter-spacing: .105em; text-transform: uppercase; color: #C9A877; margin-bottom: 18px; }
.sayaclar { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sayi { display: block; font-family: var(--serif); font-size: 76px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sayac-etiket { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #C4CBD8; margin-top: 8px; }
.sayac-etiket i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.sayac-etiket i.tamam, .parsel.tamam { background: #D8CCB2; }
.sayac-etiket i.devam, .parsel.devam { background: transparent; border: 1.5px dashed #C9A877; }

.parseller { display: grid; grid-template-columns: repeat(13, 1fr); gap: 5px; margin: 26px 0 24px; }
.parsel { height: 34px; border-radius: 4px; position: relative; }
.parsel.devam::after {
  content: ""; position: absolute; inset: 4px; border-radius: 2px; background: #C9A877; opacity: .35;
  animation: nabiz 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * 150ms);
}
@keyframes nabiz { 0%, 100% { opacity: .12; } 50% { opacity: .5; } }

.sayac-alt { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border-top: 1px solid rgba(255, 255, 255, .13); padding-top: 18px; }
.sayac-alt div { font-size: 12px; line-height: 18px; color: #AEB6C6; }
.sayac-alt strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 28px; color: var(--beyaz); }
.sayac-not { font-size: 10.5px; line-height: 15px; color: #8E98AD; margin-top: 18px; }

/* Kurucu kartı */
.kurucu {
  grid-column: 1 / -1; margin-top: 8px;
  display: grid; grid-template-columns: 190px 1fr; gap: 36px; align-items: center;
  background: #22355C; border: 1px solid rgba(255, 255, 255, .1); border-radius: 20px; padding: 26px;
}
.kurucu-foto { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 18%; border-radius: 12px; }
.kurucu-unvan { font-size: 11px; font-weight: 600; letter-spacing: .105em; text-transform: uppercase; color: #C9A877; margin-bottom: 8px; }
.kurucu h3 { font-size: 32px; line-height: 36px; margin-bottom: 14px; }
.kurucu-metin > p:not(.kurucu-unvan) { font-size: 13.5px; line-height: 22px; color: #C4CBD8; max-width: 640px; }
.kurucu-metin > p + p:not(.kurucu-unvan) { margin-top: 10px; }
/* Animasyon (sayfa kaydırılıp bölüm görününce başlar) */
.sayac-kart.hazir .parsel { opacity: 0; transform: translateY(10px) scale(.85); }
.sayac-kart.gorunur .parsel {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .3, 1.2);
  transition-delay: calc(var(--i) * 90ms + 150ms);
}
@media (prefers-reduced-motion: reduce) { .parsel.devam::after { animation: none; } }

/* ---------- Lacivert çağrı bandı ---------- */
.cta-bolum { background: var(--krem); padding: 0 0 91px; }
.cta {
  background: var(--lacivert); color: var(--beyaz);
  border-radius: 21px; height: 177px; padding: 0 54px;
  display: flex; justify-content: space-between; align-items: center; gap: 32px;
  position: relative; overflow: hidden;
}
.cta h2 { font-size: 37px; line-height: 38px; max-width: 520px; position: relative; }
.cta .buton { position: relative; min-width: 154px; justify-content: space-between; padding: 0 25px 0 23px; }
.filigran {
  position: absolute; width: 272px; left: 615px; top: 50%;
  transform: translate(-50%, -50%); opacity: 0.08; pointer-events: none;
}

/* ---------- Hizmetlerimiz sayfası ---------- */
.sayfa-bas { background: var(--krem); padding: 87px 0 96px; border-bottom: 1px solid var(--cizgi); }
.sayfa-bas .baslik-satir > p { font-size: 14.25px; line-height: 22px; padding-bottom: 5px; }
.genis-harita { border-radius: 20px; width: 100%; margin: 46px 0 72px; }

.kartlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px 16px; }
.kart {
  background: var(--beyaz); border: 1px solid var(--kart-cizgi); border-radius: 13px;
  padding: 28px 24px 26px; display: flex; flex-direction: column;
  scroll-margin-top: 100px; transition: box-shadow .2s;
}
.kart:hover { box-shadow: 0 10px 30px rgba(27, 43, 76, .07); }
.kart:target { outline: 2px solid var(--altin); }
.kart-ust { display: flex; justify-content: space-between; align-items: center; color: var(--altin); height: 24px; margin-bottom: 18px; }
.kart-ust svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.kart-ust .no { font-family: var(--serif); font-size: 18px; }
.etiket { font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--altin); line-height: 12px; }
.kart h3 { font-size: 23px; line-height: 24px; margin: 13px -6px 15px 0; }
.kart p { font-size: 12px; line-height: 19px; color: var(--metin); }

.kart-cta {
  background: var(--lacivert); color: var(--beyaz); border-color: var(--lacivert);
  padding: 24px 25px 27px 24px;
  justify-content: space-between; gap: 24px; position: relative; overflow: hidden;
}
.kart-cta h3 { margin: 0; position: relative; }
.kart-cta .buton {
  position: relative; justify-content: space-between; align-self: stretch;
  height: auto; min-height: 46px; padding: 8px 22px 8px 16px;
  white-space: normal; text-align: left; line-height: 16px;
}
.kart-cta .filigran { width: 250px; left: auto; right: -110px; top: auto; bottom: -120px; transform: none; opacity: .08; }

.kimler-bolum { padding: 91px 0 87px; }
.kimler { display: grid; grid-template-columns: 336px repeat(3, 1fr); gap: 30px; align-items: start; }
.kimler-baslik { padding-top: 3px; }
.kimler h2 { font-size: 37px; line-height: 39px; max-width: 300px; }
.kimler-kolon { border-top: 1px solid var(--lacivert); padding-top: 18px; }
.kimler-kolon h3 { font-size: 15.7px; font-weight: 600; line-height: 19px; margin-bottom: 11px; }
.kimler-kolon p { font-size: 12px; line-height: 19px; color: var(--metin); }

/* ---------- İletişim sayfası ---------- */
.iletisim-bolum { background: var(--krem); padding: 78px 0 96px; }
.iletisim-izgara > div:first-child { padding-top: 3px; }
.iletisim-izgara { display: grid; grid-template-columns: 444px 443px; justify-content: space-between; align-items: start; }
.iletisim-izgara h1 { font-size: 50.5px; line-height: 54px; }
.iletisim-izgara .giris { font-size: 14.25px; line-height: 23px; color: var(--metin); max-width: 380px; margin-top: 13px; }
.bilgi {
  display: grid; grid-template-columns: 237px 1fr; gap: 22px 0;
  border-top: 2px solid var(--cizgi); padding-top: 22px; margin: 31px 0 28px;
}
.bilgi small {
  display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--altin); line-height: 14px; margin-bottom: 6px;
}
.bilgi div { font-size: 12.7px; line-height: 20px; }
.harita-kucuk { border-radius: 16px; width: 100%; }
.yol-tarifi { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--lacivert); border: 1px solid var(--cizgi-koyu); border-radius: 999px; padding: 6px 12px 6px 9px; background: var(--beyaz); transition: border-color .2s, color .2s; }
.yol-tarifi:hover { border-color: var(--altin); color: var(--altin); }
.yol-tarifi svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.bilgi .yol-tarifi { display: flex; width: max-content; }

.form-kart {
  background: var(--beyaz); border: 1px solid var(--kart-cizgi); border-radius: 20px;
  padding: 32px 37px 34px 36px; margin-top: 0;
}
.form-kart h2 { font-size: 27px; line-height: 36px; margin-bottom: 11px; }
.alanlar { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 15px; }
.alan { display: flex; flex-direction: column; gap: 5px; }
.alan.tam { grid-column: 1 / -1; }
.alan label { font-size: 10.5px; font-weight: 600; line-height: 17px; }
.alan input, .alan select, .alan textarea {
  font: 12px var(--sans); color: var(--lacivert);
  background: #F5F2E9; border: 1px solid #E2D7C3; border-radius: 9px;
  height: 39px; padding: 0 12px; width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.alan select { padding: 0 10px 0 13px; }
.alan input::placeholder, .alan textarea::placeholder { color: #8C8779; }
.alan input:focus, .alan select:focus, .alan textarea:focus {
  outline: none; border-color: var(--altin); box-shadow: 0 0 0 3px rgba(139, 108, 66, .15);
}
.alan textarea { height: 130px; padding: 12px; resize: vertical; }
.onay { display: flex; gap: 8px; align-items: flex-start; font-size: 10.5px; line-height: 16px; color: var(--metin); margin: 17px 0 17px; cursor: pointer; }
.onay input { margin-top: 1px; width: 13px; height: 13px; accent-color: var(--lacivert); flex-shrink: 0; }
.onay a:hover { text-decoration: underline; }
.form-kart .buton { min-width: 151px; justify-content: space-between; padding: 0 21px 0 24px; }
.alan-not { font-size: 10.5px; line-height: 15px; color: var(--metin); }
.gizli { display: none; }

.form-not { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; color: var(--metin); margin: -4px 0 18px; }
.form-not i { width: 7px; height: 7px; border-radius: 50%; background: #3DA35D; box-shadow: 0 0 0 3px rgba(61, 163, 93, .18); flex-shrink: 0; }

/* ---------- Hizmetlerimiz: sıkça sorulan sorular ---------- */
.sss-bolum { background: var(--krem); border-top: 1px solid var(--cizgi); padding: 91px 0 96px; scroll-margin-top: 72px; }
.sss-izgara { display: grid; grid-template-columns: 336px 1fr; gap: 30px 60px; align-items: start; }
.sss-baslik h2 { font-size: 37px; line-height: 39px; margin-bottom: 16px; }
.sss-baslik > p:not(.ust-baslik) { color: var(--metin); font-size: 13.5px; line-height: 21.5px; max-width: 280px; margin-bottom: 26px; }
.sss { border-bottom: 1px solid var(--liste-cizgi); }
.sss:first-child { border-top: 1px solid var(--liste-cizgi); }
.sss summary {
  list-style: none; cursor: pointer; position: relative;
  font-family: var(--serif); font-size: 21px; line-height: 26px; letter-spacing: -0.01em;
  padding: 20px 44px 20px 0; transition: color .2s;
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  background:
    linear-gradient(var(--altin), var(--altin)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--altin), var(--altin)) center / 1.5px 12px no-repeat;
  transition: transform .25s;
}
.sss[open] summary::after { transform: rotate(45deg); }
.sss summary:hover { color: var(--altin); }
.sss summary:focus-visible { outline: 2px solid var(--altin); outline-offset: 4px; }
.sss-cevap { padding: 0 44px 22px 0; }
.sss-cevap p { font-size: 13.5px; line-height: 22px; color: var(--metin); max-width: 620px; }
.sss-cevap p + p { margin-top: 10px; }

/* ---------- Projeler (projelerimiz.html ve ana sayfa) ---------- */
.proje-bas { padding-bottom: 72px; }
.proje-ozet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 52px; }
.proje-ozet div { background: var(--beyaz); border: 1px solid var(--kart-cizgi); border-radius: 13px; padding: 22px 24px; display: flex; align-items: baseline; gap: 14px; }
.proje-ozet strong { font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: 1; letter-spacing: -0.02em; }
.proje-ozet span { font-size: 12.5px; line-height: 17px; color: var(--metin); }

.proje-bolum { padding: 80px 0 90px; }
.proje-bolum-krem { background: var(--krem); border-top: 1px solid var(--cizgi); }
.proje-grup-baslik { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; }
.proje-grup-baslik h2 { font-size: 34px; line-height: 38px; }

.projeler { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.projeler-3 { grid-template-columns: repeat(3, 1fr); margin-top: 48px; }
.proje {
  background: var(--beyaz); border: 1px solid var(--kart-cizgi); border-radius: 13px;
  padding: 26px 26px 24px; display: flex; flex-direction: column; scroll-margin-top: 96px;
  transition: box-shadow .2s, transform .2s;
}
.proje:target { outline: 2px solid var(--altin); }
a.proje:hover { box-shadow: 0 10px 30px rgba(27, 43, 76, .07); transform: translateY(-2px); }
.proje-ust { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.proje-yer { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--altin); }
.proje-yer::before {
  content: ""; width: 9px; height: 9px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  border: 1.5px solid currentColor; flex-shrink: 0;
}
.durum { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .03em; padding: 4px 10px 4px 9px; border-radius: 999px; white-space: nowrap; }
.durum::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.durum.tamam { background: #E7F2EA; color: #2E7447; }
.durum.surecte { background: #F5ECDC; color: #8B6C42; }
.durum.surecte::before { animation: nabiz 2s ease-in-out infinite; }
.proje h3 { font-size: 23px; line-height: 26px; letter-spacing: -0.01em; }
.proje-ozet-metin { font-size: 13px; line-height: 20px; color: var(--metin); margin-top: 10px; }
.proje-bilgi { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--cizgi); }
.proje-bilgi dt { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--altin); margin-bottom: 3px; }
.proje-bilgi dd { font-size: 13px; line-height: 18px; color: var(--lacivert); }
.proje-kapsam { list-style: none; margin-top: 16px; display: grid; gap: 6px; }
.proje-kapsam li { position: relative; padding-left: 18px; font-size: 12.5px; line-height: 18px; color: var(--metin); }
.proje-kapsam li::before { content: ""; position: absolute; left: 1px; top: 6px; width: 8px; height: 4px; border-left: 1.5px solid var(--altin); border-bottom: 1.5px solid var(--altin); transform: rotate(-45deg); }
.proje-kisa h3 { margin-bottom: 22px; }
.proje-kisa .proje-bilgi { margin-top: auto; }

.degerleme-not {
  display: grid; grid-template-columns: 336px 1fr; gap: 30px; align-items: center;
  margin-top: 48px; padding: 28px 30px; border: 1px solid var(--kart-cizgi); border-radius: 13px; background: var(--beyaz);
}
.degerleme-not h3 { font-size: 24px; line-height: 28px; }
.degerleme-not > p { font-size: 13.5px; line-height: 22px; color: var(--metin); }
/* Proje görseli (isteğe bağlı): kartın en üstüne
   <div class="proje-gorsel"><img src="img/dosya-adi.jpg" alt="..."></div> eklenir.
   Önerilen ölçü: 1600 x 800 piksel (2:1 yatay), JPG. */
.proje-gorsel {
  margin: -26px -26px 20px; aspect-ratio: 2 / 1; overflow: hidden;
  border-radius: 12px 12px 0 0; background: var(--bej);
}
.proje-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
a.proje:hover .proje-gorsel img { transform: scale(1.03); }
.hizmet-notlar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; }
.hizmet-not { background: var(--beyaz); border: 1px solid var(--kart-cizgi); border-radius: 13px; padding: 28px 30px; }
.hizmet-not .ust-baslik { margin-bottom: 14px; }
.hizmet-not h3 { font-size: 24px; line-height: 28px; margin-bottom: 12px; }
.hizmet-not > p:not(.ust-baslik) { font-size: 13.5px; line-height: 22px; color: var(--metin); }
.hizmet-not-sayi { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.hizmet-not-sayi strong { font-family: var(--serif); font-weight: 400; font-size: 52px; line-height: 1; letter-spacing: -0.02em; }
.hizmet-not-sayi span { font-family: var(--serif); font-size: 22px; line-height: 26px; }
.proje-cta { padding-top: 0; }

.secili-projeler { padding: 94px 0 96px; }
.secili-link { margin-top: 32px; }
.sayac-link { display: inline-flex; gap: 10px; margin-top: 16px; font-size: 12.5px; font-weight: 600; color: #C9A877; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.sayac-link:hover { color: var(--beyaz); }
/* ---------- Hizmet 08 ve akaryakıt sayfası ---------- */
.kart-link { display: inline-flex; gap: 8px; margin-top: auto; padding-top: 16px; font-size: 12.5px; font-weight: 600; color: var(--altin); }
.kart-link:hover { color: var(--lacivert); }
.kart-linkler { margin-top: auto; padding-top: 16px; display: grid; gap: 6px; }
.kart-linkler .kart-link { margin: 0; padding: 0; }
.proje .kart-link { margin-top: 18px; padding-top: 0; }
.kart-cta.genis { grid-column: 1 / -1; flex-direction: row; align-items: center; padding: 30px 34px; }
.kart-cta.genis h3 { max-width: 620px; }
.kart-cta.genis .buton { align-self: center; flex-shrink: 0; min-width: 230px; }
.kart-cta.genis .filigran { right: 180px; bottom: -130px; }
.kirinti { font-size: 12px; color: var(--metin); margin-bottom: 26px; }
.kirinti a { color: var(--altin); font-weight: 600; }
.kirinti a:hover { text-decoration: underline; }
.kirinti span { margin: 0 6px; opacity: .5; }
.ak-butonlar { margin-top: 26px; }
.ak-izgara { display: grid; grid-template-columns: 1fr 440px; gap: 56px; align-items: start; }
.ak-h2 { font-size: 34px; line-height: 38px; margin-bottom: 22px; }
.ak-kapsam { gap: 10px; margin-top: 0; }
.ak-kapsam li { font-size: 14px; line-height: 21px; }
.ak-izgara .proje .ust-baslik { margin-bottom: 16px; }
/* ---------- Blog ---------- */
.blog-kartlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.blog-kart {
  background: var(--beyaz); border: 1px solid var(--kart-cizgi); border-radius: 13px;
  padding: 26px 26px 24px; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s;
}
.blog-kart:hover { box-shadow: 0 10px 30px rgba(27, 43, 76, .07); transform: translateY(-2px); }
.blog-kart h2 { font-size: 23px; line-height: 27px; margin: 14px 0 12px; letter-spacing: -0.01em; }
.blog-kart p { font-size: 13px; line-height: 20px; color: var(--metin); margin-bottom: 20px; }
.blog-devam { margin-top: auto; display: inline-flex; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--altin); }
.blog-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12px; color: var(--metin); }
.blog-kategori { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--altin); }

.yazi-bas { background: var(--krem); border-bottom: 1px solid var(--cizgi); padding: 72px 0 56px; }
.yazi-dar { max-width: 780px; }
.yazi-bas h1 { font-size: 46px; line-height: 50px; margin: 16px 0 18px; }
.yazi-ozet { font-size: 16px; line-height: 26px; color: var(--metin); }
.yazi-govde { padding-top: 56px; padding-bottom: 72px; }
.yazi-govde > p, .yazi-govde li { font-size: 15.5px; line-height: 27px; color: #3E4660; }
.yazi-govde > p { margin-bottom: 18px; }
.yazi-govde h2 { font-size: 28px; line-height: 33px; margin: 40px 0 14px; }
.yazi-govde ul { margin: 0 0 18px 22px; }
.yazi-govde li { margin-bottom: 6px; }
.yazi-govde strong { color: var(--lacivert); font-weight: 600; }
.yazi-not { margin: 36px 0; padding: 18px 20px; border-left: 3px solid var(--altin); background: var(--krem); border-radius: 0 10px 10px 0; }
.yazi-not p { font-size: 13px; line-height: 20px; color: var(--metin); }
.yazar { display: flex; align-items: center; gap: 16px; padding: 22px 0; border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); }
.yazar img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: center 18%; flex-shrink: 0; }
.yazar p { font-size: 13px; line-height: 19px; color: var(--metin); }
.yazar .yazar-ad { font-family: var(--serif); font-size: 20px; line-height: 24px; color: var(--lacivert); }
.yazi-ilgili { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 32px; }
.yazi-ilgili .proje { flex: 1; max-width: 460px; }
.yazi-ilgili .proje .ust-baslik { margin-bottom: 10px; }
.yazi-ilgili .kart-link { margin-top: 14px; padding-top: 0; }
.yazi-cta { background: var(--beyaz); }
/* ---------- Hızlı iletişim düğmeleri ---------- */
.hizli-iletisim { position: fixed; right: 24px; bottom: 24px; z-index: 60; }
.hizli-iletisim a { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--beyaz); }
.hizli-iletisim svg { width: 26px; height: 26px; flex-shrink: 0; }
.hi-ara svg path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.hi-wa .hi-balon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.hi-wa .hi-ahize { fill: currentColor; }
.hi-ara { display: none !important; }
.hi-wa {
  width: 56px; height: 56px; border-radius: 50%; background: #1FA855;
  box-shadow: 0 8px 24px rgba(27, 43, 76, .25); transition: transform .2s, background .2s;
}
.hi-wa:hover { transform: translateY(-2px); background: #1A954B; }
.hi-wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* Mesai dışında "Ara" düğmesi */
.hi-ara.kapali { background: #3A4766; color: rgba(255, 255, 255, .6); cursor: default; }
.hi-bildirim {
  position: fixed; left: 16px; right: 16px; bottom: 72px; z-index: 61;
  background: var(--beyaz); color: var(--lacivert); border-radius: 12px; padding: 14px 16px;
  font-size: 13px; line-height: 19px; box-shadow: 0 10px 30px rgba(27, 43, 76, .22);
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .25s, transform .25s;
}
.hi-bildirim.goster { opacity: 1; transform: none; }
/* ---------- Basit metin sayfaları (KVKK, Teşekkürler) ---------- */
.metin-sayfa { background: var(--krem); padding: 84px 0 96px; min-height: 60vh; }
.metin-sayfa .kapsayici { max-width: 840px; }
.metin-sayfa h1 { margin-bottom: 28px; }
.metin-sayfa h2 { font-size: 26px; line-height: 30px; margin: 40px 0 14px; }
.metin-sayfa p, .metin-sayfa li { color: var(--metin); font-size: 14.5px; line-height: 24px; }
.metin-sayfa p { margin-bottom: 14px; }
.metin-sayfa ul { margin: 0 0 14px 20px; }
.metin-sayfa li { margin-bottom: 6px; }
.metin-sayfa strong { color: var(--lacivert); font-weight: 600; }
.metin-sayfa main a, .metin-sayfa p a, .metin-sayfa li a { color: var(--lacivert); text-decoration: underline; }
.metin-sayfa .guncelleme { font-size: 12.5px; margin-top: -14px; margin-bottom: 28px; }
.metin-sayfa .buton { margin-top: 16px; }

/* ---------- Alt kısım (footer) ---------- */
.alt { background: var(--lacivert); color: #D2D6E0; padding: 55px 0 20px; font-size: 11.25px; line-height: 18px; }
.alt-ust {
  display: grid; grid-template-columns: minmax(0, 360px) 1fr auto; column-gap: 28px; align-items: center;
  padding-bottom: 38px; border-bottom: 1px solid rgba(255, 255, 255, .13);
}
.alt-logo { display: flex; align-items: center; gap: 21px; }
.alt-logo img { width: 92px; margin-left: -2px; }
.alt-logo p { max-width: 200px; }
.alt-menu { display: flex; gap: 24px; color: var(--beyaz); font-size: 11.25px; white-space: nowrap; justify-self: center; }
.alt-menu a:hover, .alt-iletisim a:hover, .alt-alt a:hover { color: var(--beyaz); text-decoration: underline; }
.alt-iletisim { display: flex; flex-direction: column; gap: 5px; }
.alt-alt { display: flex; justify-content: space-between; gap: 16px; padding-top: 19px; font-size: 10.5px; line-height: 14px; }
.alt-alt span { max-width: 185px; }
.alt-alt a { width: 86px; margin-right: 30px; }

/* =========================================================
   Tablet ve telefon uyumu
   ========================================================= */
@media (max-width: 1000px) {
  .blog-kartlar { grid-template-columns: 1fr 1fr; }
  .projeler-3 { grid-template-columns: 1fr 1fr; }
  .degerleme-not { grid-template-columns: 1fr; gap: 12px; }
  .hk-izgara { grid-template-columns: 1fr; gap: 48px; }
  .sayac-kart { max-width: 480px; }
  .kapsayici { padding: 0 32px; }
  .kahraman .kapsayici { grid-template-columns: 1fr 1fr; }
  .hizmet-izgara { grid-template-columns: 1fr; gap: 48px; }
  .pafta { max-width: 360px; }
  .kartlar { grid-template-columns: repeat(2, 1fr); }
  .kimler { grid-template-columns: repeat(3, 1fr); }
  .kimler-baslik { grid-column: 1 / -1; margin-bottom: 12px; }
  .iletisim-izgara { grid-template-columns: 1fr; gap: 40px; }
  .form-kart { margin-top: 0; }
  .alt-ust { grid-template-columns: 1fr auto; gap: 28px; }
  .alt-iletisim { grid-column: 1 / -1; }
  .filigran { left: 60%; }
}

@media (max-width: 800px) {
  .kart-cta.genis { flex-direction: column; align-items: flex-start; }
  .kart-cta.genis .buton { align-self: stretch; min-width: 0; }
  .ak-izgara { grid-template-columns: 1fr; gap: 36px; }
  .hizmet-notlar { grid-template-columns: 1fr; }
  .projeler, .projeler-3, .proje-ozet { grid-template-columns: 1fr; }
  /* telefonda altta sabit iki düğme */
  body { padding-bottom: 64px; }
  .hizli-iletisim { left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; box-shadow: 0 -4px 20px rgba(27, 43, 76, .15); }
  .hizli-iletisim a { height: 56px; padding-bottom: env(safe-area-inset-bottom); }
  .hizli-iletisim svg { width: 22px; height: 22px; }
  .hi-ara { display: flex !important; background: var(--lacivert); }
  .hi-wa { width: auto; height: 56px; border-radius: 0; box-shadow: none; }
  .hi-wa:hover { transform: none; }
  .hi-wa span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .sss-izgara { grid-template-columns: 1fr; }
  .sss-baslik > p:not(.ust-baslik) { max-width: none; }  .menu-dugme { display: block; }
  .menu {
    display: none; position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 4px;
    background: var(--beyaz); border-bottom: 1px solid var(--cizgi);
    padding: 12px 20px 24px;
  }
  .menu.acik { display: flex; }
  .menu a:not(.buton) { padding: 12px 0; width: 100%; font-size: 16px; }
  .menu .buton { margin-top: 12px; height: 42px; }
  .menu-dugme.acik span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-dugme.acik span:nth-child(2) { opacity: 0; }
  .menu-dugme.acik span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .kahraman .kapsayici, .baslik-satir { grid-template-columns: 1fr; gap: 20px; }
  .kahraman-metin { padding: 56px 0 0; }
  .kahraman-gorsel { margin-top: 8px; }
  .adimlar { grid-template-columns: repeat(2, 1fr); gap: 32px 18px; }
  .kimler { grid-template-columns: 1fr; gap: 28px; }
  .cta { flex-direction: column; align-items: flex-start; justify-content: center; height: auto; padding: 44px 32px; }
}

@media (max-width: 600px) {
  .blog-kartlar { grid-template-columns: 1fr; }
  .yazi-bas { padding: 48px 0 40px; }
  .yazi-bas h1 { font-size: 34px; line-height: 38px; }
  .yazi-govde { padding-top: 36px; }
  .yazi-govde h2 { font-size: 24px; line-height: 29px; }
  .yazi-ilgili { flex-direction: column; align-items: stretch; }
  .proje-gorsel { margin: -22px -20px 18px; }
  .hizmet-not { padding: 22px 20px; }
  .proje-bolum, .secili-projeler { padding: 64px 0; }
  .proje { padding: 22px 20px; }
  .proje-ust { flex-wrap: wrap; }
  .proje-grup-baslik h2 { font-size: 28px; line-height: 32px; }
  .proje-ozet { margin-top: 36px; }
  .sss-bolum { padding: 64px 0; }
  .sss-baslik h2 { font-size: 32px; line-height: 35px; }
  .sss summary { font-size: 19px; line-height: 24px; padding: 18px 36px 18px 0; }
  .sss-cevap { padding-right: 0; }
  .kurucu { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .kurucu-foto { max-width: 220px; }
  .kurucu h3 { font-size: 28px; line-height: 32px; }
  .hakkimizda { padding: 64px 0; }
  .hk-degerler { grid-template-columns: 1fr; gap: 14px; }
  .sayac-kart { padding: 24px 20px 20px; }
  .sayi { font-size: 60px; }
  .parseller { gap: 3px; }
  .parsel { height: 26px; }
  .kapsayici { padding: 0 20px; }
  h1, .iletisim-izgara h1 { font-size: 44px; line-height: 44px; }
  h2 { font-size: 34px; line-height: 36px; }
  .cta h2 { font-size: 30px; line-height: 32px; }
  .bolum, .hizmetler-bolum, .kimler-bolum { padding: 64px 0; }
  .sayfa-bas, .iletisim-bolum { padding: 56px 0 64px; }
  .genis-harita { margin: 36px 0 40px; }
  .cta-bolum { padding-bottom: 64px; }
  .adimlar, .kartlar, .alanlar, .bilgi { grid-template-columns: 1fr; }
  .hizmet-satir {
    grid-template-columns: 40px 1fr 20px; gap: 8px 0;
    grid-template-areas: "no baslik ok" ". metin .";
  }
  .hizmet-satir .no { grid-area: no; }
  .hizmet-satir h3 { grid-area: baslik; }
  .hizmet-satir p { grid-area: metin; }
  .hizmet-satir .ok { grid-area: ok; }
  .form-kart { padding: 28px 20px; }
  .alt-ust { grid-template-columns: 1fr; }
  .alt-logo { flex-direction: column; align-items: flex-start; }
  .alt-menu { flex-wrap: wrap; gap: 20px; }
  .alt-alt { flex-direction: column; }
}

/* Netlify rozeti: WhatsApp düğmesinin üstüne binmesin diye sol alta alındı */
iframe[title="Powered by Netlify"] { right: auto !important; left: 12px !important; bottom: 12px !important; }
@media (max-width: 800px) {
  iframe[title="Powered by Netlify"] { left: 6px !important; bottom: 60px !important; }
}