/* =========================================================
   Plastform Mimarlık — site şablonu
   Renkler logodan: lacivert + altın
   ========================================================= */
:root {
  --lacivert: #0e2552;
  --lacivert-2: #16336d;
  --gece: #0a1a3a;
  --altin: #b8924a;
  --altin-acik: #dcc28f;
  --kagit: #f6f3ee;
  --kagit-2: #ece7de;
  --beyaz: #ffffff;
  --murekkep: #141821;
  --soluk: #6a6f7a;
  --cizgi: rgba(20, 24, 33, .12);
  --cizgi-acik: rgba(255, 255, 255, .16);

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --kap: 1360px;
  --bosluk: clamp(16px, 4vw, 56px);
  --header-h: 92px;
  --gecis: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--murekkep);
  background: var(--kagit);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.1; }
p { margin: 0 0 1em; }
[hidden] { display: none !important; }
.ikon { width: 1.15em; height: 1.15em; flex: none; }

.kap { width: 100%; max-width: var(--kap); margin: 0 auto; padding: 0 var(--bosluk); }

/* ---------- Tipografi ---------- */
.ust-baslik {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--altin);
  margin-bottom: 20px;
}
.ust-baslik::before { content: ""; width: 32px; height: 1px; background: currentColor; }
.baslik { font-family: var(--serif); font-size: clamp(36px, 4.4vw, 60px); letter-spacing: -.01em; }
.baslik.kucuk { font-size: clamp(28px, 3vw, 40px); margin-bottom: 28px; }
.buyuk-baslik { font-family: var(--serif); font-size: clamp(40px, 5.6vw, 84px); letter-spacing: -.02em; line-height: 1.02; }
.buyuk-baslik em, .cta-bant em { font-style: italic; color: var(--altin); }
.giris { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; color: var(--murekkep); }
.soluk { color: var(--soluk); }
.metin p { color: #3c414c; }

/* ---------- Butonlar ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  height: 54px; padding: 0 30px;
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid transparent;
  transition: background .35s var(--gecis), color .35s var(--gecis), border-color .35s;
}
.btn .ikon { transition: transform .35s var(--gecis); }
.btn:hover .ikon { transform: translateX(5px); }
.btn-koyu { background: var(--lacivert); color: var(--beyaz); }
.btn-koyu:hover { background: var(--altin); }
.btn-altin { background: var(--altin); color: var(--beyaz); }
.btn-altin:hover { background: var(--beyaz); color: var(--lacivert); }
.btn-beyaz { background: var(--beyaz); color: var(--lacivert); }
.btn-beyaz:hover { background: var(--altin); color: var(--beyaz); }
.btn-cizgi { border-color: var(--cizgi-acik); color: var(--beyaz); }
.btn-cizgi:hover { border-color: var(--altin); background: var(--altin); }
.btn-ince { height: 44px; padding: 0 22px; font-size: 12px; border-color: currentColor; }
.btn-ince:hover { background: var(--altin); border-color: var(--altin); color: #fff; }

.link-ok {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--lacivert);
  padding-bottom: 6px; border-bottom: 1px solid currentColor;
}
.link-ok .ikon { transition: transform .35s var(--gecis); }
.link-ok:hover { color: var(--altin); }
.link-ok:hover .ikon { transform: translateX(5px); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--header-h);
  color: var(--beyaz);
  transition: background .4s var(--gecis), height .4s var(--gecis), box-shadow .4s, color .4s, transform .5s var(--gecis);
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(5, 14, 33, .55), transparent);
  transition: opacity .4s;
}
.header-ic { height: 100%; display: flex; align-items: center; gap: 40px; }
.logo { position: relative; display: block; width: 150px; flex: none; }
.logo img { width: 100%; height: auto; transition: opacity .4s; }
.logo .logo-renkli { position: absolute; inset: 0; opacity: 0; }

.ana-menu { display: flex; gap: 6px; margin: 0 auto; }
.ana-menu > a, .menu-acilir > a {
  position: relative; display: block; padding: 10px 18px;
  font-size: 14px; font-weight: 500; letter-spacing: .04em;
}
.ana-menu > a::after, .menu-acilir > a::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 4px; height: 1px;
  background: var(--altin); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--gecis);
}
.ana-menu a:hover::after, .ana-menu a.aktif::after { transform: scaleX(1); }

.menu-acilir { position: relative; }
.mega {
  position: absolute; top: 100%; left: 50%; translate: -50% 12px;
  display: grid; grid-template-columns: 220px 1fr; gap: 36px;
  width: 760px; padding: 32px;
  background: var(--beyaz); color: var(--murekkep);
  box-shadow: 0 30px 60px -20px rgba(10, 26, 58, .3);
  opacity: 0; visibility: hidden; transition: opacity .3s, translate .3s var(--gecis), visibility .3s;
}
.menu-acilir:hover .mega, .menu-acilir:focus-within .mega { opacity: 1; visibility: visible; translate: -50% 0; }
.mega-etiket { display: block; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--altin); margin-bottom: 14px; }
.mega-sutun > a:not(.mega-kart) { display: block; padding: 8px 0; font-family: var(--serif); font-size: 22px; border-bottom: 1px solid var(--cizgi); }
.mega-sutun > a:not(.mega-kart):hover { color: var(--altin); }
.mega-projeler { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }
.mega-projeler .mega-etiket { grid-column: 1 / -1; margin-bottom: 0; }
.mega-kart { display: flex; gap: 12px; align-items: center; }
.mega-kart img { width: 84px; height: 60px; object-fit: cover; transition: transform .4s; }
.mega-kart:hover img { transform: scale(1.05); }
.mega-kart span { font-weight: 600; font-size: 14px; line-height: 1.3; }
.mega-kart small { display: block; font-weight: 400; color: var(--soluk); font-size: 12px; }

.header-sag { display: flex; align-items: center; gap: 22px; }
.header-tel { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.menu-tus { display: none; width: 44px; height: 44px; position: relative; }
.menu-tus span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: currentColor; transition: transform .35s var(--gecis), top .35s; }
.menu-tus span:first-child { top: 17px; }
.menu-tus span:last-child { top: 26px; }
.menu-acik .menu-tus span:first-child { top: 21px; transform: rotate(45deg); }
.menu-acik .menu-tus span:last-child { top: 21px; transform: rotate(-45deg); }

/* Kaydırınca / koyu header */
.site-header.dolu, .header-sabit .site-header {
  background: var(--beyaz); color: var(--murekkep);
  box-shadow: 0 1px 0 var(--cizgi);
}
.site-header.dolu { height: 76px; }
.site-header.dolu::before, .header-sabit .site-header::before { opacity: 0; }
.site-header.dolu .logo-beyaz, .header-sabit .logo-beyaz { opacity: 0; }
.site-header.dolu .logo-renkli, .header-sabit .logo-renkli { opacity: 1; }
.site-header.dolu .btn-ince, .header-sabit .btn-ince { color: var(--lacivert); }
.menu-acik .site-header { background: var(--lacivert); color: #fff; box-shadow: none; }
.menu-acik .site-header .logo-beyaz { opacity: 1; }
.menu-acik .site-header .logo-renkli { opacity: 0; }

.mobil-menu {
  position: fixed; inset: 0; z-index: 40;
  background: var(--lacivert); color: #fff;
  padding: calc(var(--header-h) + 30px) var(--bosluk) 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  clip-path: inset(0 0 100% 0); transition: clip-path .6s var(--gecis);
}
.menu-acik .mobil-menu { clip-path: inset(0 0 0 0); }
.mobil-menu nav a { display: block; font-family: var(--serif); font-size: 38px; line-height: 1.5; border-bottom: 1px solid var(--cizgi-acik); }
.mobil-alt { display: grid; gap: 6px; color: var(--altin-acik); }
.menu-acik { overflow: hidden; }

/* ---------- Hero slider ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; background: var(--gece); color: #fff; }
.hero-slayt {
  position: absolute; inset: 0; z-index: 1; visibility: hidden;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 1.4s cubic-bezier(.77, 0, .18, 1), visibility 0s 1.4s;
}
.hero[data-yon="geri"] .hero-slayt:not(.aktif):not(.onceki) { clip-path: inset(0 100% 0 0); }
.hero-slayt.aktif { z-index: 3; visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path 1.1s cubic-bezier(.77, 0, .18, 1), visibility 0s; }
.hero-slayt.onceki { z-index: 2; visibility: visible; clip-path: inset(0 0 0 0); }
.hero-gorsel-kap { position: absolute; inset: -40px; transition: translate 1.1s cubic-bezier(.77, 0, .18, 1); }
.hero-slayt.onceki .hero-gorsel-kap { translate: -6% 0; }
.hero[data-yon="geri"] .hero-slayt.onceki .hero-gorsel-kap { translate: 6% 0; }
.hero-gorsel { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.2); }
/* Çıkan slayt (.onceki) animasyonu korur; yoksa geçiş sırasında tekrar yakınlaşır */
.hero-slayt.aktif .hero-gorsel, .hero-slayt.onceki .hero-gorsel { animation: kenburns 9s cubic-bezier(.2, .6, .3, 1) forwards; }
@keyframes kenburns { to { transform: scale(1); } }
.hero-slayt::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6, 16, 38, .78) 0%, rgba(6, 16, 38, .35) 55%, rgba(6, 16, 38, .1) 100%),
              linear-gradient(0deg, rgba(6, 16, 38, .6) 0%, transparent 40%);
}
.hero-icerik { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-top: 40px; }
.hero-icerik .ust-baslik { color: var(--altin-acik); }
.hero-icerik h1 { font-family: var(--serif); font-size: clamp(52px, 8.5vw, 132px); line-height: .95; letter-spacing: -.02em; max-width: 11ch; }
.hero-icerik p { font-size: clamp(17px, 1.6vw, 22px); max-width: 34ch; margin: 22px 0 36px; color: rgba(255, 255, 255, .85); }

/* kelime kelime yükselen yazı */
.k { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .14em 0; margin-bottom: -.14em; }
.k > span { display: inline-block; will-change: transform; }
.hero .k > span { transform: translateY(115%) rotate(4deg); transition: transform .6s cubic-bezier(.7, 0, .84, 0); }
.hero-slayt.aktif .k > span { transform: none; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1) calc(.45s + var(--i) * 70ms); }
.hero-icerik > .ust-baslik, .hero-icerik > .btn { opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .5s; }
.hero-slayt.aktif .hero-icerik > .ust-baslik { opacity: 1; transform: none; transition: opacity 1s .35s, transform 1s var(--gecis) .35s; }
.hero-slayt.aktif .hero-icerik > .btn { opacity: 1; transform: none; transition: opacity 1s .95s, transform 1s var(--gecis) .95s, background .35s, color .35s; }
.yukleniyor .hero-slayt.aktif .k > span { transform: translateY(115%); transition: none; }
.yukleniyor .hero-slayt.aktif .hero-icerik > * { opacity: 0; transition: none; }

.hero-alt { position: absolute; left: 0; right: 0; bottom: 44px; z-index: 3; display: flex; align-items: flex-end; gap: 40px; }
.hero-sayac { font-family: var(--serif); white-space: nowrap; }
.hero-sayac b { font-size: 46px; font-weight: 500; }
.hero-sayac span { font-size: 20px; opacity: .6; margin-left: 6px; }
.hero-noktalar { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 14px; }
.hero-noktalar button { text-align: left; font-size: 12px; letter-spacing: .06em; color: rgba(255, 255, 255, .55); transition: color .3s; }
.hero-noktalar button i { display: block; height: 2px; background: rgba(255, 255, 255, .25); margin-bottom: 12px; position: relative; overflow: hidden; }
.hero-noktalar button i::after { content: ""; position: absolute; inset: 0; background: var(--altin); transform: scaleX(0); transform-origin: left; }
.hero-noktalar button.aktif { color: #fff; }
.hero-noktalar button.aktif i::after { animation: ilerle var(--sure, 7s) linear forwards; }
.hero-noktalar button span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes ilerle { to { transform: scaleX(1); } }
.hero-oklar { display: flex; gap: 10px; }
.hero-oklar button, .kaydirici-oklar button {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .35);
  transition: background .3s, border-color .3s, color .3s;
}
.hero-oklar button:hover { background: #fff; color: var(--lacivert); border-color: #fff; }
.asagi { position: absolute; right: var(--bosluk); top: 50%; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 14px; translate: 0 -50%; }
.asagi span { writing-mode: vertical-rl; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.asagi i { position: relative; width: 1px; height: 70px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.asagi i::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 40%; background: var(--altin-acik); animation: asagi 2s cubic-bezier(.7, 0, .3, 1) infinite; }
@keyframes asagi { 0% { transform: translateY(-100%); } 100% { transform: translateY(260%); } }

/* ---------- Bölümler ---------- */
.bolum { padding: clamp(80px, 11vw, 160px) 0; }
.bolum-acik { background: var(--beyaz); }
.bolum-koyu { background: var(--lacivert); color: #fff; }
.bolum-koyu .ust-baslik { color: var(--altin-acik); }
.bolum-koyu .soluk, .bolum-koyu p { color: rgba(255, 255, 255, .72); }
.bolum-bas { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: clamp(40px, 5vw, 70px); flex-wrap: wrap; }

.tanitim-izgara, .genel-izgara { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: start; }
.tanitim-sag .giris, .metin .giris { margin-bottom: 1.4em; }
.tanitim-sag .link-ok, .metin .btn { margin-top: 18px; }

.sayilar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(70px, 9vw, 130px);
}
.sayi { padding: 36px 24px 0 0; border-top: 1px solid var(--cizgi); border-right: 1px solid var(--cizgi); padding-left: 24px; }
.sayi:first-child { padding-left: 0; }
.sayi:last-child { border-right: 0; }
.sayi b { font-family: var(--serif); font-size: clamp(48px, 5.5vw, 86px); font-weight: 500; line-height: 1; color: var(--lacivert); }
.sayi sup { font-family: var(--serif); font-size: 32px; color: var(--altin); vertical-align: top; margin-left: 2px; }
.sayi span { display: block; margin-top: 10px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--soluk); }

/* ---------- Proje kartları ---------- */
.kaydirici {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(280px, 30vw, 440px); gap: 28px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0 max(var(--bosluk), calc((100vw - var(--kap)) / 2 + var(--bosluk)));
  scroll-padding: 0 max(var(--bosluk), calc((100vw - var(--kap)) / 2 + var(--bosluk)));
}
.kaydirici::-webkit-scrollbar { display: none; }
.kaydirici > * { scroll-snap-align: start; }
.kaydirici-oklar { display: flex; align-items: center; gap: 10px; }
.kaydirici-oklar button { border-color: var(--cizgi); color: var(--lacivert); }
.kaydirici-oklar button:hover { background: var(--lacivert); color: #fff; border-color: var(--lacivert); }
.kaydirici-oklar .link-ok { margin-left: 20px; }
/* Sayfa kaydırması kartları sürüklerken (hareket.js) elle kaydırma ve oklar kapalı */
.yatay-pin .yatay-yapis { position: sticky; overflow: hidden; }
.yatay-pin .kaydirici { position: relative; overflow: visible; scroll-snap-type: none; will-change: transform; }
.yatay-pin .kaydirici-oklar button { display: none; }

.proje-kart { display: block; position: relative; }
.kart-gorsel { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--kagit-2); }
.kart-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--gecis); }
.proje-kart:hover .kart-gorsel img { transform: scale(1.06); }
.kart-alt { padding: 22px 0 6px; }
.kart-meta { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--altin); font-weight: 600; }
.kart-alt h3 { font-family: var(--serif); font-size: 32px; margin: 8px 0 10px; transition: color .3s; }
.proje-kart:hover h3 { color: var(--altin); }
.kart-alt p { color: var(--soluk); font-size: 15px; }

/* büyük kart: görsel üstüne bilgi */
.proje-kart.buyuk .kart-gorsel { aspect-ratio: 3 / 4; }
.proje-kart.buyuk .kart-gorsel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 16, 38, .85), transparent 55%); }
.proje-kart.buyuk .kart-bilgi { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 28px; color: #fff; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; }
.kart-no { font-family: var(--serif); font-size: 18px; color: var(--altin-acik); padding-top: 8px; }
.kart-bilgi h3 { font-family: var(--serif); font-size: clamp(30px, 2.6vw, 40px); }
.kart-bilgi p { margin: 6px 0 0; color: rgba(255, 255, 255, .78); font-size: 15px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--gecis), opacity .5s; }
.proje-kart.buyuk:hover .kart-bilgi p { max-height: 80px; opacity: 1; }

.rozet {
  display: inline-block; padding: 7px 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  background: var(--altin); color: #fff;
}
.rozet-tamamlanan { background: var(--lacivert); }
.rozet-cam { background: rgba(255, 255, 255, .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.kart-gorsel .rozet { position: absolute; top: 18px; left: 18px; z-index: 2; }

/* ---------- Tamamlanan projeler listesi ---------- */
.tamamlanan-izgara { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(40px, 7vw, 120px); align-items: center; }
.tamamlanan-sol p { margin: 26px 0 36px; max-width: 40ch; }
.tamamlanan-liste { position: relative; border-top: 1px solid var(--cizgi-acik); }
.liste-satir {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 60px 1fr auto 24px; align-items: center; gap: 20px;
  padding: 30px 0; border-bottom: 1px solid var(--cizgi-acik);
  transition: padding .4s var(--gecis), color .3s;
}
.liste-no { font-family: var(--serif); color: var(--altin-acik); font-size: 18px; }
.liste-ad { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 50px); line-height: 1; }
.liste-konum { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.liste-satir .ikon { transition: transform .4s var(--gecis); }
.liste-satir:hover { padding-left: 16px; color: var(--altin-acik); }
.liste-satir:hover .ikon { transform: rotate(-45deg); }
.liste-onizleme {
  position: absolute; z-index: 3; top: 0; left: 0; width: 300px; aspect-ratio: 4 / 3; pointer-events: none;
  opacity: 0; transform: scale(.9); transition: opacity .3s, transform .4s var(--gecis);
}
.liste-onizleme img { width: 100%; height: 100%; object-fit: cover; box-shadow: 0 30px 60px rgba(0, 0, 0, .4); }
.liste-onizleme.gorunur { opacity: 1; transform: scale(1); }

/* ---------- Değerler ---------- */
.deger-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--cizgi); }
.bolum-koyu .deger-izgara { border-color: var(--cizgi-acik); }
.deger { padding: 36px 32px 10px 0; }
.deger + .deger { padding-left: 32px; border-left: 1px solid var(--cizgi); }
.bolum-koyu .deger + .deger { border-color: var(--cizgi-acik); }
.deger-no { font-family: var(--serif); font-size: 20px; color: var(--altin); }
.deger h3 { font-family: var(--serif); font-size: 30px; margin: 40px 0 16px; }
.deger p { color: var(--soluk); font-size: 15px; }
.bolum-koyu .deger p { color: rgba(255, 255, 255, .66); }

/* ---------- CTA bant + footer ---------- */
.cta-bant { background: var(--altin); color: #fff; padding: clamp(60px, 7vw, 100px) 0; }
.cta-bant .ust-baslik { color: var(--lacivert); }
.cta-bant h2 { font-family: var(--serif); font-size: clamp(36px, 4.6vw, 64px); }
.cta-bant em { color: var(--lacivert); }
.cta-ic { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.cta-aksiyon { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.cta-tel { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 30px; }

.site-footer { background: var(--gece); color: rgba(255, 255, 255, .7); padding-top: 90px; font-size: 15px; }
.footer-ust { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 50px; padding-bottom: 70px; }
.footer-marka img { width: 170px; height: auto; margin-bottom: 26px; }
.footer-marka p { max-width: 34ch; }
.footer-sutun h4 { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--altin-acik); margin-bottom: 20px; }
.footer-sutun h4.mt { margin-top: 30px; }
.footer-sutun a { display: block; padding: 4px 0; transition: color .3s; }
.footer-sutun a:hover { color: #fff; }
.footer-iletisim p { color: rgba(255, 255, 255, .7); }
.sosyal { display: flex; gap: 10px; margin-top: 24px; }
.sosyal a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--cizgi-acik); transition: background .3s, border-color .3s; }
.sosyal a:hover { background: var(--altin); border-color: var(--altin); color: #fff; }
.sosyal.koyu a { border-color: var(--cizgi); color: var(--lacivert); }
.footer-alt { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 26px var(--bosluk); border-top: 1px solid var(--cizgi-acik); font-size: 13px; color: rgba(255, 255, 255, .45); }

.sabit-ara { display: none; }

/* ---------- Sayfa hero (iç sayfalar) ---------- */
.sayfa-hero, .proje-hero { position: relative; color: #fff; background: var(--gece); overflow: hidden; }
.sayfa-hero { height: 62vh; min-height: 460px; }
.proje-hero { height: 88vh; height: 88svh; min-height: 560px; }
.sayfa-hero-gorsel, .proje-hero-gorsel { position: absolute; inset: -8% 0 0; background-size: cover; background-position: center; will-change: transform; }
.sayfa-hero::after, .proje-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 16, 38, .85) 0%, rgba(6, 16, 38, .25) 60%, rgba(6, 16, 38, .45) 100%); }
.sayfa-hero-icerik, .proje-hero-icerik { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(40px, 6vw, 80px); }
.sayfa-hero h1 { font-family: var(--serif); font-size: clamp(48px, 7vw, 104px); letter-spacing: -.02em; }
.sayfa-hero p { max-width: 50ch; margin: 18px 0 0; color: rgba(255, 255, 255, .8); font-size: 18px; }
.proje-hero h1 { font-family: var(--serif); font-size: clamp(56px, 9.5vw, 150px); line-height: .92; letter-spacing: -.025em; margin: 22px 0 18px; }
.proje-hero p { font-size: clamp(18px, 1.8vw, 24px); color: rgba(255, 255, 255, .85); margin: 0; font-family: var(--serif); font-style: italic; }
.proje-hero .rozet { align-self: flex-start; }
.kirinti { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; letter-spacing: .06em; color: rgba(255, 255, 255, .7); margin-bottom: 22px; }
.kirinti a:hover { color: var(--altin-acik); }
.kirinti span { opacity: .5; }
.kirinti.koyu { color: var(--soluk); }

/* ---------- Proje detay ---------- */
.bilgi-bar { background: var(--lacivert); color: #fff; }
.bilgi-izgara { display: grid; grid-template-columns: repeat(4, 1fr); }
.bilgi-izgara > div { padding: 30px 24px; border-left: 1px solid var(--cizgi-acik); }
.bilgi-izgara > div:first-child { border-left: 0; padding-left: 0; }
.bilgi-izgara span { display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--altin-acik); margin-bottom: 6px; }
.bilgi-izgara b { font-family: var(--serif); font-size: clamp(22px, 2vw, 28px); font-weight: 500; }

.proje-sekme { position: sticky; top: 76px; z-index: 20; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--cizgi); }
.proje-sekme .kap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.proje-sekme a { padding: 20px 18px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--soluk); border-bottom: 2px solid transparent; transition: color .3s, border-color .3s; }
.proje-sekme a:hover, .proje-sekme a.aktif { color: var(--lacivert); border-color: var(--altin); }
.proje-sekme .sekme-btn { margin-left: auto; color: var(--altin); }
[id] { scroll-margin-top: 150px; }

.galeri { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; gap: 14px; }
.galeri-oge { position: relative; overflow: hidden; background: var(--kagit-2); }
.galeri-oge.genis { grid-column: span 2; grid-row: span 2; }
.galeri-dolu { grid-auto-flow: dense; }
.galeri-oge img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--gecis); }
.galeri-oge:hover img { transform: scale(1.06); }
.galeri-buyut { position: absolute; right: 14px; bottom: 14px; width: 42px; height: 42px; display: grid; place-items: center; background: #fff; color: var(--lacivert); opacity: 0; transform: translateY(8px); transition: .35s var(--gecis); }
.galeri-oge:hover .galeri-buyut, .plan-kart:hover .galeri-buyut { opacity: 1; transform: none; }
.galeri-sayi { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--soluk); }

.ozellik-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(30px, 5vw, 80px); }
.ozellik-grup h3 { font-family: var(--serif); font-size: 32px; padding-bottom: 20px; margin-bottom: 8px; border-bottom: 1px solid var(--murekkep); }
.ozellik-grup ul { list-style: none; margin: 0; padding: 0; columns: 1; }
.ozellik-grup li { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--cizgi); font-size: 15px; break-inside: avoid; }
.ozellik-grup li .ikon { color: var(--altin); margin-top: 3px; }

.konum-izgara { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
.mesafe-liste { list-style: none; margin: 36px 0 0; padding: 0; columns: 2; column-gap: 40px; }
.mesafe-liste li { display: flex; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--cizgi-acik); break-inside: avoid; }
.mesafe-liste b { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--altin-acik); min-width: 64px; }
.mesafe-liste span { font-size: 14px; color: rgba(255, 255, 255, .8); }
.harita { aspect-ratio: 4 / 3; background: var(--lacivert-2); }
.harita iframe, .harita-tam iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.6) contrast(1.05); }
.harita-tam { height: 460px; }

.form-izgara { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 7vw, 120px); }
.form-izgara .soluk { margin: 18px 0 40px; }
.sss details { border-bottom: 1px solid var(--cizgi); }
.sss summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; font-weight: 600; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary .ikon { transition: transform .35s var(--gecis); color: var(--altin); }
.sss details[open] summary .ikon { transform: rotate(45deg); }
.sss details p { color: var(--soluk); padding-bottom: 10px; }

/* ---------- Form ---------- */
.form { display: grid; gap: 20px; background: var(--beyaz); padding: clamp(28px, 4vw, 52px); }
.form-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.alan { position: relative; display: block; }
.alan input, .alan select, .alan textarea {
  width: 100%; font: inherit; color: var(--murekkep);
  padding: 26px 0 10px; border: 0; border-bottom: 1px solid var(--cizgi); background: transparent; border-radius: 0;
  outline: none; transition: border-color .3s; appearance: none;
}
.alan textarea { resize: vertical; }
.alan span { position: absolute; left: 0; top: 24px; color: var(--soluk); font-size: 15px; pointer-events: none; transition: top .25s, font-size .25s, color .25s; }
.alan input:focus, .alan select:focus, .alan textarea:focus { border-color: var(--altin); }
.alan input:focus + span, .alan input:not(:placeholder-shown) + span,
.alan textarea:focus + span, .alan textarea:not(:placeholder-shown) + span,
.alan.secim span { top: 2px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--altin); }
.alan.secim::after { content: ""; position: absolute; right: 4px; bottom: 18px; width: 8px; height: 8px; border-right: 1.5px solid var(--soluk); border-bottom: 1.5px solid var(--soluk); transform: rotate(45deg); pointer-events: none; }
.onay { display: flex; gap: 12px; font-size: 13px; color: var(--soluk); line-height: 1.5; }
.onay input { accent-color: var(--lacivert); width: 18px; height: 18px; flex: none; margin-top: 1px; }
.form .btn { justify-self: start; }
.gizli { position: absolute; left: -9999px; }
.form-mesaj { display: flex; gap: 10px; align-items: center; padding: 16px 20px; font-size: 15px; }
.form-mesaj.ok { background: #e8f2ea; color: #1e5c2f; }
.form-mesaj.hata { background: #f8e8e6; color: #8a2a1e; }

/* ---------- Projeler listesi ---------- */
.filtre-bar { display: flex; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; margin-bottom: 60px; padding-bottom: 24px; border-bottom: 1px solid var(--cizgi); }
.filtre-grup { display: flex; gap: 8px; flex-wrap: wrap; }
.filtre-grup button { padding: 12px 22px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--cizgi); transition: .3s; }
.filtre-grup button sup { color: var(--altin); font-size: 10px; margin-left: 2px; }
.filtre-grup button:hover { border-color: var(--lacivert); }
.filtre-grup button.aktif { background: var(--lacivert); color: #fff; border-color: var(--lacivert); }
.filtre-grup.ikincil button { border: 0; padding: 12px 6px; margin: 0 8px; color: var(--soluk); border-bottom: 1px solid transparent; }
.filtre-grup.ikincil button.aktif { background: none; color: var(--lacivert); border-bottom-color: var(--altin); }
.proje-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px 32px; }
.bos-mesaj { text-align: center; color: var(--soluk); padding: 40px 0; }

/* ---------- İletişim ---------- */
.iletisim-ust { padding-top: calc(var(--header-h) + 80px); }
.iletisim-izgara { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(40px, 7vw, 120px); margin-top: 70px; }
.bilgi-kutu { display: flex; gap: 20px; padding: 28px 0; border-bottom: 1px solid var(--cizgi); }
.bilgi-kutu > .ikon { width: 26px; height: 26px; color: var(--altin); }
.bilgi-kutu span { display: block; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--soluk); margin-bottom: 6px; }
.bilgi-kutu p, .bilgi-kutu a { font-family: var(--serif); font-size: 24px; line-height: 1.3; margin: 0; }
.bilgi-kutu small { font-family: var(--sans); font-size: 14px; color: var(--soluk); }
.bilgi-kutu a:hover { color: var(--altin); }

.bulunamadi { padding-top: calc(var(--header-h) + 100px); min-height: 70vh; }
.bulunamadi .soluk { margin: 20px 0 36px; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(6, 12, 26, .96); display: grid; place-items: center; }
.lightbox img { max-width: 88vw; max-height: 84vh; object-fit: contain; }
.lightbox button { position: absolute; width: 56px; height: 56px; display: grid; place-items: center; color: #fff; border: 1px solid var(--cizgi-acik); border-radius: 50%; }
.lightbox button:hover { background: #fff; color: var(--lacivert); }
.lb-kapat { top: 24px; right: 24px; }
.lb-onceki { left: 24px; top: 50%; translate: 0 -50%; }
.lb-sonraki { right: 24px; top: 50%; translate: 0 -50%; }
.lb-sayac { position: absolute; bottom: 26px; left: 50%; translate: -50% 0; color: rgba(255, 255, 255, .7); font-family: var(--serif); font-size: 20px; }

/* ---------- Görünme animasyonu ---------- */
.js .gorun { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--gecis), transform 1s var(--gecis); }
.js .gorun.gorundu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .gorun { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .ana-menu, .header-tel span { display: none; }
  .menu-tus { display: block; }
  .header-sag { margin-left: auto; }
  .deger-izgara { grid-template-columns: 1fr 1fr; }
  .deger:nth-child(3) { padding-left: 0; border-left: 0; }
  .footer-ust { grid-template-columns: 1fr 1fr; }
  .proje-izgara { grid-template-columns: 1fr 1fr; }
  .galeri { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  :root { --header-h: 76px; }
  .logo { width: 120px; }
  .header-sag .btn-ince { display: none; }
  .tanitim-izgara, .genel-izgara, .tamamlanan-izgara, .konum-izgara, .form-izgara, .iletisim-izgara { grid-template-columns: 1fr; }
  .sayilar, .bilgi-izgara { grid-template-columns: 1fr 1fr; }
  .sayi { padding: 28px 16px 28px 0; border-bottom: 1px solid var(--cizgi); }
  .sayi:nth-child(2n) { border-right: 0; padding-left: 16px; }
  .sayi:nth-child(2n+1) { padding-left: 0; }
  .bilgi-izgara > div { padding: 22px 16px; border-bottom: 1px solid var(--cizgi-acik); }
  .bilgi-izgara > div:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .hero-noktalar { display: none; }
  .hero-alt { justify-content: space-between; bottom: 28px; }
  .liste-satir { grid-template-columns: 40px 1fr 24px; }
  .liste-konum { display: none; }
  .liste-onizleme { display: none; }
  .galeri { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; }
  .mesafe-liste { columns: 1; }
  .proje-sekme { top: 76px; }
  .site-header.dolu { height: 68px; }
  .proje-sekme { top: 68px; }
  .kaydirici-oklar button { display: none; }
  .kaydirici-oklar .link-ok { margin-left: 0; }
}
@media (max-width: 600px) {
  .deger-izgara, .proje-izgara, .footer-ust { grid-template-columns: 1fr; }
  .deger + .deger { padding-left: 0; border-left: 0; border-top: 1px solid var(--cizgi); }
  .bolum-koyu .deger + .deger { border-color: var(--cizgi-acik); }
  .deger h3 { margin-top: 20px; }
  .form-satir { grid-template-columns: 1fr; }
  .galeri-oge.genis { grid-column: span 2; grid-row: span 1; }
  .cta-tel { font-size: 24px; }
  .sabit-ara { position: fixed; right: 16px; bottom: 16px; z-index: 30; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--altin); color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
  .sabit-ara .ikon { width: 22px; height: 22px; }
  .lb-onceki, .lb-sonraki { top: auto; bottom: 16px; translate: none; }
  .hero-oklar { display: none; }
  .filtre-grup { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; margin: 0 calc(var(--bosluk) * -1); padding: 0 var(--bosluk); }
  .filtre-grup button { white-space: nowrap; }
}

/* =========================================================
   HAREKET KATMANI
   ========================================================= */

/* Header kaydırınca gizlenir */
.header-gizli .site-header { transform: translateY(-100%); }
.proje-sekme { transition: top .5s var(--gecis); }
.header-gizli .proje-sekme { top: 0; }

/* Açılış perdesi (oturumdaki ilk ziyarette) */
.perde {
  position: fixed; inset: 0; z-index: 150; visibility: hidden; transform: translateY(100%);
  background: var(--lacivert); display: grid; place-items: center;
}
.ilk-ziyaret.yukleniyor .perde { visibility: visible; transform: none; }
.perde-ic { display: grid; justify-items: center; gap: 26px; opacity: 0; }
.ilk-ziyaret .perde-ic { opacity: 1; }
.perde-ic img { width: 190px; height: auto; }
.perde-cizgi { display: block; width: 190px; height: 1px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.perde-cizgi i { display: block; height: 100%; background: var(--altin); transform-origin: left; transform: scaleX(0); }

/* Dönen 40. yıl rozeti + görsel kolajı */
.tanitim-sol { position: relative; }
.merkez .tanitim-izgara { align-items: center; }
.merkez .kolaj { margin-top: 0; }
.kolaj { position: relative; height: clamp(360px, 38vw, 540px); margin-top: clamp(40px, 5vw, 70px); }
.kolaj figure { position: absolute; margin: 0; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(10, 26, 58, .45); }
.kolaj img { width: 100%; height: 100%; object-fit: cover; }
.kolaj-1 { left: 0; top: 0; width: 64%; height: 78%; }
.kolaj-2 { right: 0; bottom: 0; width: 46%; height: 56%; border: 10px solid var(--kagit); }
.rozet-don { position: absolute; left: 52%; top: 58%; width: 150px; height: 150px; translate: -50% -50%; z-index: 3; display: grid; place-items: center; background: var(--lacivert); border-radius: 50%; color: #fff; }
.rozet-don svg { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); animation: don 18s linear infinite; }
.rozet-don text { font-family: var(--sans); font-size: 13.4px; font-weight: 600; letter-spacing: 3.2px; fill: var(--altin-acik); }
.rozet-don b { font-family: var(--serif); font-size: 52px; font-weight: 500; line-height: 1; }
@keyframes don { to { transform: rotate(360deg); } }

/* Kayan yazı bandı */
.kayan-bant { overflow: hidden; padding: clamp(26px, 3vw, 44px) 0; background: var(--kagit); border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); }
.kayan-bant.koyu { background: var(--lacivert); border-color: transparent; color: #fff; }
.kayan-iz { display: flex; width: max-content; align-items: center; gap: 0 40px; padding-right: 40px; white-space: nowrap; animation: kay 40s linear infinite; }
.kayan-iz span { font-family: var(--serif); font-size: clamp(48px, 7vw, 110px); line-height: 1; color: var(--lacivert); }
.kayan-bant.koyu .kayan-iz span { color: #fff; }
.kayan-iz span.cizgili { color: transparent; -webkit-text-stroke: 1px var(--altin); font-style: italic; }
.kayan-iz i { font-style: normal; color: var(--altin); font-size: clamp(22px, 2.6vw, 38px); }
@keyframes kay { to { transform: translateX(-50%); } }

/* Değer kartları sırayla */
.deger.gorun:nth-child(2) { transition-delay: .12s; }
.deger.gorun:nth-child(3) { transition-delay: .24s; }
.deger.gorun:nth-child(4) { transition-delay: .36s; }
.ust-baslik::before { transition: width 1s var(--gecis) .2s; }
.js .gorun .ust-baslik::before { width: 0; }
.js .gorun.gorundu .ust-baslik::before { width: 32px; }

@media (max-width: 1180px) {
  .asagi { display: none; }
}
@media (max-width: 860px) {
  .kolaj { height: 360px; }
  .rozet-don { width: 120px; height: 120px; }
  .rozet-don b { font-size: 42px; }
  .rozet-don text { font-size: 13.4px; }
}

/* Slider: mobilde görselin hangi kısmı görünsün (projeler.json → slider_mobil_konum) */
@media (max-width: 760px) {
  .hero-gorsel { background-position: var(--mobil-konum, center); }
}

/* Mobil anasayfa: slider yerine projeler alt alta tam ekran; görsel sabit kalır,
   kaydırdıkça sıradaki proje bir öncekinin üzerinden perde gibi açılır */
@media (max-width: 760px) {
  .hero { height: auto; min-height: 0; overflow: visible; }
  .hero .hero-slayt, .hero[data-yon] .hero-slayt:not(.aktif):not(.onceki) {
    position: relative; inset: auto; z-index: auto; height: 100vh; height: 100svh; min-height: 560px;
    visibility: visible; clip-path: inset(0); transition: none;
  }
  /* Görsel, karartma ve yazı sabit; sadece bölümün kırpma alanı kayar */
  .hero .hero-gorsel-kap { position: fixed; inset: 0; translate: none; transition: none; }
  .hero-slayt::after { position: fixed; }
  .hero .hero-icerik { position: fixed; inset: 0; }
  /* Tarayıcının adres çubuğu açılıp kapanınca boyut değişip titremesin: sabit yükseklik
     (görsel en büyük ekran boyunu kaplar, yazı her zaman görünen alanda ortalanır) */
  .hero .hero-gorsel-kap, .hero-slayt::after { bottom: auto; height: 100vh; height: 100lvh; }
  .hero .hero-icerik { bottom: auto; height: 100vh; height: 100svh; }
  .hero-gorsel { transform: scale(1.1); }
  .hero-slayt::after { background: linear-gradient(0deg, rgba(6, 16, 38, .75) 0%, rgba(6, 16, 38, .25) 50%, rgba(6, 16, 38, .45) 100%); }
  .hero-icerik { align-items: center; text-align: center; padding-top: var(--header-h); }
  .hero-icerik h1 { max-width: none; }
  .hero-alt { display: none; }
}

/* Kat planları */
.plan-izgara { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.5vw, 32px); }
.plan-kart { display: block; color: inherit; }
.plan-gorsel { position: relative; display: block; overflow: hidden; background: #f8f6f1; border: 1px solid var(--cizgi); }
.plan-gorsel img { display: block; width: 100%; height: auto; transition: transform .8s var(--gecis); }
.plan-kart:hover .plan-gorsel img { transform: scale(1.03); }
.plan-alt { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; }
.plan-alt b { font-family: var(--serif); font-size: 24px; font-weight: 500; color: var(--lacivert); }
.plan-alt small { font-size: 14px; color: var(--soluk); }
@media (max-width: 760px) { .plan-izgara { grid-template-columns: 1fr; } }