/* =====================================================================
   Uraltay İnşaat — Site Stilleri
   ---------------------------------------------------------------------
   İçindekiler
   01. Yazı tipleri
   02. Değişkenler (renk, ölçü, kırılım)
   03. Temel / sıfırlama
   04. Yardımcılar (kapsayıcı, düğme, ikon)
   05. Giriş animasyonu
   06. Üst şerit ve site başlığı
   07. Ana menü (masaüstü + mobil)
   08. Manşet (ana sayfa slider)
   09. Bölüm başlıkları
   10. Hizmet daireleri
   11. Proje kartları ve filtre
   12. Uzmanlık kartları
   13. Sıkça sorulan sorular
   14. Sayfa başlığı ve içerik düzeni
   15. Hakkımızda, hizmetler, referanslar
   16. Proje detay
   17. Galeri ve ışık kutusu
   18. İletişim ve form
   19. Alt bilgi (footer)
   20. 404 sayfası

   Kırılımlar (mobil öncelikli):
   576px  küçük tablet  | 768px tablet | 992px küçük masaüstü | 1200px masaüstü
   ===================================================================== */

/* 01. Yazı tipleri ---------------------------------------------------- */
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../yazitipleri/raleway-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../yazitipleri/raleway-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 02. Değişkenler ----------------------------------------------------- */
:root {
  --altin: #efb71d;
  --altin-koyu: #c9960f;
  --koyu: #333d40;
  --koyu-2: #293133;
  --metin: #3d4549;
  --metin-acik: #6b7378;
  --gri: #9c9c9c;
  --cizgi: #e4e2dd;
  --zemin: #f6f4f0;
  --beyaz: #fff;

  --yazi: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --kapsayici: 1200px;
  --kenar: clamp(16px, 4vw, 32px);   /* kapsayıcı yan boşluğu */
  --bosluk: clamp(48px, 8vw, 88px);  /* bölüm dikey boşluğu */
  --gecis: 250ms ease;
  --golge: 0 10px 30px rgba(41, 49, 51, .12);
}

/* 03. Temel ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--yazi);
  font-size: 16px;
  line-height: 1.65;
  color: var(--metin);
  background: var(--beyaz);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--gecis), background-color var(--gecis); }
a:hover { color: var(--altin-koyu); }
h1, h2, h3, h4 { margin: 0 0 .6em; line-height: 1.2; color: var(--koyu-2); font-weight: 700; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--altin); outline-offset: 3px; }
::selection { background: var(--altin); color: var(--koyu-2); }

.ekran-okuyucu {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.atla-baglanti {
  position: absolute; left: 16px; top: -60px; z-index: 1000;
  background: var(--altin); color: var(--koyu-2); padding: 10px 16px; font-weight: 700;
}
.atla-baglanti:focus { top: 12px; }

/* 04. Yardımcılar ----------------------------------------------------- */
.kapsayici {
  width: 100%;
  max-width: calc(var(--kapsayici) + 2 * var(--kenar));
  margin-inline: auto;
  padding-inline: var(--kenar);
}
.bolum { padding-block: var(--bosluk); }
.bolum--zemin { background: var(--zemin); }

.ikon { width: 1em; height: 1em; flex: none; stroke: currentColor; fill: none; }

.dugme {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  border: 2px solid var(--altin);
  background: var(--altin);
  color: var(--koyu-2);
  font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--gecis), color var(--gecis), border-color var(--gecis);
}
.dugme:hover { background: transparent; color: var(--altin); }
.dugme--cizgi { background: transparent; color: var(--koyu-2); }
.dugme--cizgi:hover { background: var(--altin); color: var(--koyu-2); }
.dugme .ikon { font-size: 18px; }

/* 05. Giriş animasyonu -------------------------------------------------
   Yalnızca oturumdaki ilk sayfa açılışında gösterilir (bkz. <head> içi betik).
   Tamamen CSS ile çalışır; JavaScript kapalı olsa da kendiliğinden kapanır. */
.giris {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--koyu-2);
  animation: giris-kapan .6s cubic-bezier(.7, 0, .3, 1) 1.5s forwards;
}
.giris__icerik { display: grid; justify-items: center; gap: 18px; }
.giris__ikon {
  width: 92px; height: auto;
  opacity: 0; transform: scale(.85);
  animation: giris-ikon .7s ease-out .1s forwards;
}
.giris__cizgi {
  width: 120px; height: 2px; background: var(--altin);
  transform: scaleX(0);
  animation: giris-cizgi .7s ease-in-out .5s forwards;
}
.giris__yazi {
  width: 160px; height: auto; opacity: 0; transform: translateY(6px);
  animation: giris-yazi .6s ease-out .8s forwards;
}
@keyframes giris-ikon  { to { opacity: 1; transform: none; } }
@keyframes giris-cizgi { to { transform: scaleX(1); } }
@keyframes giris-yazi  { to { opacity: 1; transform: none; } }
@keyframes giris-kapan { to { transform: translateY(-100%); visibility: hidden; } }
.giris-goruldu .giris { display: none; }
@media (prefers-reduced-motion: reduce) { .giris { display: none; } }

/* 06. Üst şerit ve site başlığı --------------------------------------- */
.ust-serit { background: var(--koyu-2); color: #d7dadb; font-size: 13px; }
.ust-serit .kapsayici { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; padding-block: 9px; }
.ust-serit ul { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.ust-serit a, .ust-serit span { display: inline-flex; align-items: center; gap: 8px; }
.ust-serit a:hover { color: var(--altin); }
.ust-serit .ikon { color: var(--altin); font-size: 14px; }
@media (max-width: 767px) { .ust-serit .ust-serit__saat { display: none; } }
@media (max-width: 420px) { .ust-serit .kapsayici { justify-content: center; } }

.site-baslik { background: var(--koyu); position: relative; z-index: 50; }
.site-baslik .kapsayici { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 96px; }
.logo { display: block; flex: none; }
.logo img { width: auto; height: 62px; }
@media (max-width: 991px) {
  .site-baslik .kapsayici { min-height: 76px; }
  .logo img { height: 48px; }
}

/* 07. Ana menü -------------------------------------------------------- */
.menu-dugme {
  display: none;
  align-items: center; gap: 10px;
  padding: 10px 14px;
  background: transparent; border: 1px solid rgba(255, 255, 255, .25); color: var(--beyaz);
  font-weight: 700; font-size: 14px; letter-spacing: .08em; cursor: pointer;
}
.menu-dugme .ikon { font-size: 22px; }
.menu-dugme .ikon--kapat { display: none; }
.menu-acik .menu-dugme .ikon--menu { display: none; }
.menu-acik .menu-dugme .ikon--kapat { display: block; }

.ana-menu > ul { display: flex; }
.ana-menu a, .ana-menu .alt-menu-baslik {
  display: flex; align-items: center; gap: 6px;
  color: var(--beyaz); font-weight: 600; font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
}
.ana-menu > ul > li { position: relative; }
.ana-menu > ul > li > a,
.ana-menu > ul > li > .alt-menu-baslik {
  height: 96px; padding: 0 20px;
  border-left: 1px solid rgba(255, 255, 255, .07);
  background: none; border-top: 0; border-right: 0; border-bottom: 0; cursor: pointer;
}
.ana-menu > ul > li:last-child > a { border-right: 1px solid rgba(255, 255, 255, .07); }
.ana-menu > ul > li > a:hover,
.ana-menu > ul > li:hover > .alt-menu-baslik,
.ana-menu > ul > li:focus-within > .alt-menu-baslik { background: rgba(255, 255, 255, .06); color: var(--altin); }

/* Aktif sayfa: altın zemin ve alttaki imza üçgen */
.ana-menu > ul > li.aktif > a,
.ana-menu > ul > li.aktif > .alt-menu-baslik { background: var(--altin); color: var(--koyu-2); }
.ana-menu > ul > li.aktif::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%;
  height: 14px; background: var(--altin);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none;
}
.alt-menu-baslik .ikon { font-size: 16px; transition: transform var(--gecis); }

.alt-menu {
  position: absolute; left: 0; top: 100%; min-width: 250px;
  background: var(--koyu-2); box-shadow: var(--golge);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis);
  z-index: 5;
}
.ana-menu li:hover > .alt-menu,
.ana-menu li:focus-within > .alt-menu { opacity: 1; visibility: visible; transform: none; }
.alt-menu a {
  padding: 16px 20px; font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.alt-menu a:hover, .alt-menu a[aria-current="page"] { background: var(--altin); color: var(--koyu-2); }

@media (max-width: 1199px) {
  .ana-menu > ul > li > a, .ana-menu > ul > li > .alt-menu-baslik { padding: 0 14px; font-size: 14px; }
}
@media (max-width: 991px) {
  .menu-dugme { display: inline-flex; }
  .ana-menu {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--koyu-2);
    max-height: 0; overflow: hidden;
    transition: max-height .35s ease;
  }
  .menu-acik .ana-menu { max-height: 80vh; overflow-y: auto; box-shadow: var(--golge); }
  .ana-menu > ul { flex-direction: column; padding: 8px var(--kenar) 16px; }
  .ana-menu > ul > li > a,
  .ana-menu > ul > li > .alt-menu-baslik {
    height: auto; width: 100%; padding: 14px 4px; border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .ana-menu > ul > li:last-child > a { border-right: 0; }
  .ana-menu > ul > li.aktif > a,
  .ana-menu > ul > li.aktif > .alt-menu-baslik { background: none; color: var(--altin); }
  .ana-menu > ul > li.aktif::after { display: none; }
  .alt-menu-baslik .ikon { display: none; }
  /* Mobilde alt menüler her zaman açık ve girintili */
  .alt-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: none; box-shadow: none; min-width: 0;
  }
  .alt-menu a { padding: 12px 4px 12px 20px; color: #c9cdce; border-bottom-color: rgba(255, 255, 255, .05); }
  .alt-menu a:hover, .alt-menu a[aria-current="page"] { background: none; color: var(--altin); }
}

/* 08. Manşet (ana sayfa slider) --------------------------------------- */
.manset {
  position: relative; overflow: hidden; background: var(--koyu-2);
  aspect-ratio: 1920 / 660;
  min-height: 380px; max-height: 660px;
  width: 100%;
}
.manset__slayt {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 1s ease, visibility 1s;
}
.manset__slayt.aktif { opacity: 1; visibility: visible; }
.manset__slayt picture, .manset__slayt img { width: 100%; height: 100%; }
.manset__slayt img { object-fit: cover; object-position: center; transform: scale(1.08); }
.manset__slayt.aktif img { animation: manset-yakinlas 8s ease-out forwards; }
.manset__slayt::after {  /* yazı okunurluğu için koyu geçiş */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20, 25, 27, .78) 0%, rgba(20, 25, 27, .45) 45%, rgba(20, 25, 27, 0) 75%);
}
.manset__yazi {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.manset__ust, .manset__baslik, .manset__alt, .manset__yazi .dugme {
  opacity: 0; transform: translateX(-40px);
}
.manset__slayt.aktif .manset__ust    { animation: manset-yazi .7s ease-out .3s forwards; }
.manset__slayt.aktif .manset__baslik { animation: manset-yazi .8s ease-out .5s forwards; }
.manset__slayt.aktif .manset__alt    { animation: manset-yazi .8s ease-out .75s forwards; }
.manset__slayt.aktif .dugme          { animation: manset-yazi .8s ease-out 1s forwards; }
.manset__ust {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--altin); font-weight: 700; font-size: 13px; letter-spacing: .3em; text-transform: uppercase;
  margin-bottom: 14px;
}
.manset__ust::before { content: ""; width: 40px; height: 2px; background: var(--altin); }
.manset__baslik {
  color: var(--beyaz); font-size: clamp(30px, 5vw, 60px); font-weight: 800; line-height: 1.05;
  max-width: 14ch; margin: 0 0 16px; text-shadow: 0 2px 20px rgba(0, 0, 0, .35);
}
.manset__alt { color: #e7e9ea; font-size: clamp(15px, 1.6vw, 19px); max-width: 44ch; margin-bottom: 28px; }
@keyframes manset-yakinlas { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes manset-yazi { to { opacity: 1; transform: none; } }

.manset__ok {
  position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  width: 52px; height: 52px; display: grid; place-items: center;
  background: rgba(41, 49, 51, .55); color: var(--beyaz); border: 0; cursor: pointer;
  font-size: 26px; transition: background-color var(--gecis), color var(--gecis);
}
.manset__ok:hover { background: var(--altin); color: var(--koyu-2); }
.manset__ok--onceki { left: 0; }
.manset__ok--sonraki { right: 0; }
.manset__noktalar {
  position: absolute; left: 0; right: 0; bottom: 22px; z-index: 3;
  display: flex; justify-content: center; gap: 10px;
}
.manset__nokta {
  width: 34px; height: 4px; padding: 0; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .45); transition: background-color var(--gecis), width var(--gecis);
}
.manset__nokta[aria-current="true"] { background: var(--altin); width: 54px; }
@media (max-width: 767px) {
  .manset { aspect-ratio: auto; height: 74vh; min-height: 420px; max-height: 560px; }
  .manset__slayt::after { background: linear-gradient(0deg, rgba(20, 25, 27, .85) 0%, rgba(20, 25, 27, .35) 60%, rgba(20, 25, 27, .15) 100%); }
  .manset__yazi { justify-content: flex-end; padding-bottom: 64px; }
}
@media (max-width: 991px) { .manset__ok { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .manset__slayt img, .manset__slayt.aktif img { animation: none; transform: none; }
  .manset__ust, .manset__baslik, .manset__alt, .manset__yazi .dugme { opacity: 1; transform: none; animation: none !important; }
}

/* 09. Bölüm başlıkları ------------------------------------------------ */
.bolum-baslik { text-align: center; margin-bottom: clamp(32px, 5vw, 52px); }
.bolum-baslik h2 { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 12px; }
.bolum-baslik p {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin: 0; color: var(--metin-acik); font-size: 16px;
}
.bolum-baslik p::before, .bolum-baslik p::after { content: ""; flex: 0 0 60px; height: 1px; background: var(--metin-acik); }
@media (max-width: 575px) { .bolum-baslik p { gap: 12px; } .bolum-baslik p::before, .bolum-baslik p::after { flex-basis: 28px; } }

/* 10. Hizmet daireleri ------------------------------------------------ */
.hizmetler { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.hizmet-daire {
  width: min(250px, 100%); aspect-ratio: 1; margin: 0 auto;
  border: 9px solid var(--altin); border-radius: 50%; padding: 14px;
}
.hizmet-daire__ic {
  height: 100%; border: 2px solid rgba(239, 183, 29, .7); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  text-align: center; padding: 10px;
  transition: background-color var(--gecis), color var(--gecis);
}
.hizmet-daire .ikon { font-size: 44px; color: var(--altin); transition: color var(--gecis); }
.hizmet-daire h3 { font-size: 16px; margin: 0; color: var(--koyu); }
.hizmet-daire:hover .hizmet-daire__ic { background: var(--altin); }
.hizmet-daire:hover .ikon, .hizmet-daire:hover h3 { color: var(--koyu-2); }
@media (max-width: 991px) {
  .hizmetler { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .hizmet-daire { width: min(220px, 100%); }
}
@media (max-width: 420px) {
  .hizmet-daire { border-width: 6px; padding: 8px; }
  .hizmet-daire .ikon { font-size: 30px; }
  .hizmet-daire h3 { font-size: 13px; }
}

/* 11. Proje kartları ve filtre ---------------------------------------- */
.filtre { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 36px; }
.filtre button {
  padding: 10px 20px; border: 1px solid var(--cizgi); background: var(--beyaz);
  font-weight: 600; font-size: 13px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--metin-acik); cursor: pointer;
  transition: background-color var(--gecis), color var(--gecis), border-color var(--gecis);
}
.filtre button:hover { border-color: var(--altin); color: var(--koyu-2); }
.filtre button[aria-pressed="true"] { background: var(--altin); border-color: var(--altin); color: var(--koyu-2); }

.proje-izgara {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
}
.proje-izgara--uclu { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 991px) { .proje-izgara--uclu { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .proje-izgara--uclu { grid-template-columns: 1fr; } }

.proje-kart { position: relative; overflow: hidden; background: var(--koyu-2); }
.proje-kart[hidden] { display: none; }
.proje-kart a { display: block; color: var(--beyaz); }
.proje-kart img {
  width: 100%; aspect-ratio: 456 / 333; object-fit: cover;
  transition: transform .6s ease, opacity var(--gecis);
}
.proje-kart__bilgi {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px;
  background: rgba(41, 49, 51, .82);
  transition: background-color var(--gecis);
}
.proje-kart__ad { margin: 0; color: inherit; font-weight: 700; font-size: 15px; line-height: 1.3; }
.proje-kart__tur { display: block; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .65); margin-top: 2px; letter-spacing: .04em; }
.proje-kart__ok {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--altin); color: var(--altin); font-size: 18px;
  transition: background-color var(--gecis), color var(--gecis);
}
.proje-kart:hover img { transform: scale(1.06); opacity: .9; }
.proje-kart:hover .proje-kart__bilgi { background: var(--altin); color: var(--koyu-2); }
.proje-kart:hover .proje-kart__tur { color: rgba(41, 49, 51, .75); }
.proje-kart:hover .proje-kart__ok { background: var(--koyu-2); border-color: var(--koyu-2); color: var(--altin); }
.bos-mesaj { text-align: center; color: var(--metin-acik); }

/* 12. Uzmanlık kartları ----------------------------------------------- */
.kartlar { display: grid; gap: 28px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 991px) { .kartlar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .kartlar { grid-template-columns: 1fr; } }
.kart { display: flex; flex-direction: column; background: var(--beyaz); border: 1px solid var(--cizgi); transition: box-shadow var(--gecis), transform var(--gecis); }
.kart:hover { box-shadow: var(--golge); transform: translateY(-4px); }
.kart__gorsel { overflow: hidden; }
.kart__gorsel img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s ease; }
.kart:hover .kart__gorsel img { transform: scale(1.06); }
.kart__govde { display: flex; flex-direction: column; flex: 1; padding: 24px; }
.kart__govde h3 { font-size: 18px; }
.kart__govde p {
  color: var(--metin-acik); font-size: 15px;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.devami {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--altin-koyu); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .05em;
}
.devami:hover { gap: 12px; }

/* 13. Sıkça sorulan sorular ------------------------------------------- */
.sss { max-width: 860px; margin: 0 auto; border-top: 1px solid var(--cizgi); }
.sss details { border-bottom: 1px solid var(--cizgi); background: var(--beyaz); }
.sss summary {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; cursor: pointer; list-style: none;
  font-weight: 600; color: var(--koyu-2);
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary .ikon { color: var(--altin); font-size: 22px; }
.sss summary::after {
  content: "+"; margin-left: auto; width: 32px; text-align: center;
  font-size: 24px; font-weight: 400; color: var(--metin-acik); line-height: 1;
}
.sss details[open] summary::after { content: "−"; }
.sss details[open] summary { color: var(--altin-koyu); }
.sss__cevap { padding: 0 20px 22px 56px; color: var(--metin-acik); }
.sss__cevap ul { list-style: disc; padding-left: 20px; }
.sss__cevap li + li { margin-top: 4px; }

/* 14. Sayfa başlığı ve içerik düzeni ---------------------------------- */
.sayfa-baslik {
  position: relative; text-align: center; color: var(--beyaz);
  padding: clamp(48px, 8vw, 84px) 0 clamp(36px, 5vw, 52px);
  background: var(--koyu) url("../gorseller/arayuz/sayfa-baslik.webp") center / cover no-repeat;
}
.sayfa-baslik::before { content: ""; position: absolute; inset: 0; background: rgba(41, 49, 51, .78); }
.sayfa-baslik .kapsayici { position: relative; }
.sayfa-baslik h1 {
  display: inline-block; margin: 0 0 18px; padding: 14px 28px;
  border: 1px solid var(--altin); background: rgba(0, 0, 0, .2);
  color: var(--beyaz); font-size: clamp(22px, 3vw, 30px); font-weight: 700;
}
.yol-haritasi ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.yol-haritasi li { display: inline-flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .75); }
.yol-haritasi li + li::before { content: "›"; color: var(--altin); font-size: 18px; line-height: 1; }
.yol-haritasi a { color: var(--beyaz); }
.yol-haritasi a:hover { color: var(--altin); }

.icerik-duzen { display: grid; gap: clamp(32px, 5vw, 56px); grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
@media (max-width: 991px) { .icerik-duzen { grid-template-columns: 1fr; } }
.metin h2 { font-size: clamp(22px, 2.6vw, 28px); margin-top: 1.4em; }
.metin h2:first-child { margin-top: 0; }
.metin p { color: var(--metin); }
.vurgu { font-weight: 700; color: var(--koyu-2); text-transform: uppercase; letter-spacing: .04em; font-size: 15px; }
.onay-listesi li { position: relative; padding-left: 32px; margin-bottom: 10px; }
.onay-listesi .ikon { position: absolute; left: 0; top: 4px; color: var(--altin); font-size: 18px; stroke-width: 3; }

.yan-kutu { background: var(--zemin); border-top: 4px solid var(--altin); padding: 26px; }
.yan-kutu + .yan-kutu { margin-top: 24px; }
.yan-kutu h2 { font-size: 18px; margin-bottom: 16px; }
.iletisim-listesi li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cizgi); }
.iletisim-listesi li:last-child { border-bottom: 0; }
.iletisim-listesi .ikon { color: var(--altin-koyu); font-size: 18px; margin-top: 4px; }
.iletisim-listesi small { display: block; color: var(--metin-acik); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.iletisim-listesi a:hover { color: var(--altin-koyu); }

/* 15. Hakkımızda, hizmetler, referanslar ------------------------------ */
.yonetici { display: flex; align-items: stretch; gap: 0; margin-top: 40px; background: var(--koyu-2); max-width: 560px; }
.yonetici img { width: 46%; aspect-ratio: 576 / 678; object-fit: cover; }
.yonetici__bilgi { display: flex; flex-direction: column; justify-content: center; padding: 24px; }
.yonetici .yonetici__ad { color: var(--beyaz); font-weight: 800; font-size: 20px; margin: 0 0 6px; }
.yonetici .yonetici__unvan { color: var(--altin); font-weight: 600; margin: 0; }
@media (max-width: 480px) {
  .yonetici { flex-direction: column; }
  .yonetici img { width: 100%; }
}

.hizmet-listesi { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); margin: 24px 0 8px; }
.hizmet-listesi li {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: var(--zemin); border-left: 3px solid var(--altin);
  font-weight: 600; font-size: 15px; color: var(--koyu-2);
}
.hizmet-listesi .ikon { color: var(--altin-koyu); stroke-width: 3; }
.uzmanlik-detay { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 32px; align-items: start; padding-top: 40px; margin-top: 40px; border-top: 1px solid var(--cizgi); scroll-margin-top: 24px; }
.uzmanlik-detay img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.uzmanlik-detay h2 { margin-top: 0; }
@media (max-width: 767px) { .uzmanlik-detay { grid-template-columns: 1fr; gap: 20px; } }

.referanslar { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.referans { border: 1px solid var(--cizgi); background: var(--beyaz); text-align: center; transition: box-shadow var(--gecis); }
.referans:hover { box-shadow: var(--golge); }
.referans img { width: 100%; aspect-ratio: 341 / 251; object-fit: contain; }
.referans h2 { font-size: 16px; margin: 0; padding: 16px; border-top: 1px solid var(--cizgi); }

/* 16. Proje detay ----------------------------------------------------- */
.proje-detay { display: grid; gap: clamp(28px, 4vw, 48px); grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 991px) { .proje-detay { grid-template-columns: 1fr; } }
.proje-detay__gorsel { display: block; position: relative; background: var(--koyu-2); }
.proje-detay__gorsel img { width: 100%; aspect-ratio: 456 / 333; object-fit: cover; }
.proje-detay__gorsel .ikon {
  position: absolute; right: 14px; bottom: 14px; font-size: 22px;
  width: 44px; height: 44px; padding: 10px; background: var(--altin); color: var(--koyu-2);
}
.durum-etiketi {
  display: inline-block; padding: 6px 12px; margin-bottom: 14px;
  background: var(--altin); color: var(--koyu-2); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.proje-detay h2 { font-size: clamp(22px, 2.6vw, 28px); }
.ozellikler { margin: 0 0 24px; border-top: 1px solid var(--cizgi); }
.ozellikler div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--cizgi); }
.ozellikler dt { font-weight: 700; color: var(--koyu-2); }
.ozellikler dd { margin: 0; color: var(--metin); }
@media (max-width: 420px) { .ozellikler div { grid-template-columns: 1fr; gap: 2px; } }
.diger-projeler { margin-top: var(--bosluk); }
.diger-projeler h2 { font-size: 24px; margin-bottom: 24px; }

/* 17. Galeri ve ışık kutusu ------------------------------------------- */
.galeri { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.galeri a { position: relative; display: block; overflow: hidden; background: var(--koyu-2); }
.galeri img { width: 100%; aspect-ratio: 456 / 333; object-fit: cover; transition: transform .6s ease, opacity var(--gecis); }
.galeri a::after {
  content: attr(data-baslik); position: absolute; left: 0; right: 0; bottom: 0;
  padding: 12px 14px; color: var(--beyaz); font-weight: 600; font-size: 14px;
  background: linear-gradient(0deg, rgba(20, 25, 27, .85), transparent);
}
.galeri a:hover img { transform: scale(1.06); opacity: .85; }

.isik-kutusu {
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(20, 25, 27, .94); color: var(--beyaz);
}
.isik-kutusu[open] { display: grid; place-items: center; }
.isik-kutusu figure { margin: 0; padding: 60px 16px; text-align: center; }
.isik-kutusu img { width: min(92vw, 900px); max-height: 78vh; object-fit: contain; margin: 0 auto; }
.isik-kutusu figcaption { margin-top: 14px; font-weight: 600; }
.isik-kutusu button {
  position: absolute; width: 48px; height: 48px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .08); border: 0; color: var(--beyaz); font-size: 26px; cursor: pointer;
}
.isik-kutusu button:hover { background: var(--altin); color: var(--koyu-2); }
.isik-kutusu__kapat { top: 12px; right: 12px; }
.isik-kutusu__onceki { left: 12px; top: 50%; transform: translateY(-50%); }
.isik-kutusu__sonraki { right: 12px; top: 50%; transform: translateY(-50%); }

/* 18. İletişim ve form ------------------------------------------------ */
.iletisim-duzen { display: grid; gap: clamp(32px, 5vw, 56px); grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
@media (max-width: 991px) { .iletisim-duzen { grid-template-columns: 1fr; } }
.form { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.form__alan { display: grid; gap: 6px; }
.form__alan--genis { grid-column: 1 / -1; }
.form label { font-weight: 600; font-size: 14px; color: var(--koyu-2); }
.form input, .form textarea {
  width: 100%; padding: 13px 14px; border: 1px solid var(--cizgi); background: var(--beyaz); border-radius: 0;
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.form input:focus, .form textarea:focus { outline: 0; border-color: var(--altin); box-shadow: 0 0 0 3px rgba(239, 183, 29, .2); }
.form textarea { min-height: 150px; resize: vertical; }
.form__not { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--metin-acik); }
.form .dugme { justify-self: start; }
@media (max-width: 575px) { .form { grid-template-columns: 1fr; } }
.harita { margin-top: var(--bosluk); }
.harita iframe { width: 100%; height: clamp(300px, 45vw, 450px); border: 0; filter: grayscale(.2); }

/* 19. Alt bilgi ------------------------------------------------------- */
.site-alt { background: var(--koyu); color: #c9cdce; font-size: 15px; position: relative; margin-top: 30px; }
.yukari-cik {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%);
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: var(--altin); color: var(--koyu-2); font-size: 28px; box-shadow: var(--golge);
}
.yukari-cik:hover { background: var(--beyaz); color: var(--koyu-2); }
.site-alt__izgara {
  display: grid; gap: 36px; grid-template-columns: 1.3fr 1fr 1.2fr;
  padding-top: 72px; padding-bottom: 48px;
}
@media (max-width: 991px) { .site-alt__izgara { grid-template-columns: 1fr 1fr; } .site-alt__marka { grid-column: 1 / -1; } }
@media (max-width: 575px) { .site-alt__izgara { grid-template-columns: 1fr; } }
.site-alt__marka img { height: 84px; width: auto; margin-bottom: 22px; }
@media (max-width: 575px) { .site-alt__marka img { height: 72px; } }
.site-alt__marka p { max-width: 40ch; margin: 0; }
.site-alt h2 { color: var(--beyaz); font-size: 16px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.site-alt h2::before { content: ""; width: 10px; height: 10px; background: var(--altin); }
.site-alt__baglantilar li { margin-bottom: 8px; }
.site-alt__baglantilar a { display: inline-flex; align-items: center; gap: 8px; }
.site-alt__baglantilar a .ikon { color: var(--altin); font-size: 14px; }
.site-alt a:hover { color: var(--altin); }
.site-alt .iletisim-listesi li { border-bottom-color: rgba(255, 255, 255, .08); }
.site-alt .iletisim-listesi .ikon { color: var(--altin); }
.site-alt .iletisim-listesi small { color: #8f979a; }
.telif { border-top: 1px solid rgba(255, 255, 255, .08); background: var(--koyu-2); font-size: 14px; }
.telif .kapsayici { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-block: 20px; }
.telif p { margin: 0; }
.telif a { color: var(--altin); font-weight: 700; }
.telif a:hover { color: var(--beyaz); }
@media (max-width: 575px) { .telif .kapsayici { justify-content: center; text-align: center; } }

/* 20. 404 sayfası ----------------------------------------------------- */
.bulunamadi { text-align: center; padding-block: clamp(64px, 12vw, 140px); }
.bulunamadi__kod { font-size: clamp(80px, 16vw, 160px); font-weight: 800; line-height: 1; color: var(--altin); margin: 0; }
.bulunamadi p { color: var(--metin-acik); margin-bottom: 28px; }