/* ==========================================================================
   Maça Design, örnek site (v2)
   Açık taş zemin, siyah mürekkep; Elsie (başlık) + Geist (metin) + Geist Mono (etiket).
   Kaydırmaya bağlı sahneler: hero küçülüp çokgene dönüşür, tanıtımda parçalar süzülür,
   projeler kendi zemin renginde sabit sahnede akar, değer metinleri görselin içinde belirir.
   Hareket azaltma tercihinde ve JS yokken her bölüm düz akışta okunur.
   ========================================================================== */

:root {
  --zemin: #F2EFEA;
  --murekkep: #191919;
  --gri: #5C5C5C;
  --gri-acik: #8C8A86;
  --koyu: #161616;
  --acik: #F2EFEA;
  --cizgi: rgba(25, 25, 25, .14);
  --cizgi-acik: rgba(242, 239, 234, .16);

  --f-baslik: "Elsie", "Bodoni Moda", "Didot", Georgia, serif;
  --f-metin: "Geist", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --kenar: clamp(16px, 2.2vw, 32px);
  --aralik: clamp(12px, 1.4vw, 20px);
  --ust-bosluk: env(safe-area-inset-top, 0px);
  --alt-bosluk: env(safe-area-inset-bottom, 0px);
  --yumusak: cubic-bezier(.2, .8, .2, 1);
  --sert: cubic-bezier(.75, 0, .2, 1);

  color-scheme: light;
}

/* ---------- Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--zemin); color: var(--murekkep);
  font-family: var(--f-metin); font-size: 16px; line-height: 1.5; font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
h1, h2, h3 { font-weight: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
[hidden] { display: none !important; }
.gizli { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.atla { position: fixed; left: var(--kenar); top: -80px; z-index: 200; background: var(--murekkep); color: var(--acik); padding: 12px 16px; }
.atla:focus { top: calc(var(--ust-bosluk) + 12px); }

.etiket { font: 500 12px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .04em; }
.serif { font-family: var(--f-baslik); font-weight: 900; text-transform: uppercase; }

/* Satır açılışı: kapsayıcı kırpar, içteki satır aşağıdan yükselir.
   Kırpma kutusu İ noktası ve Ş çengeli için dikeyde genişletildi. */
.satir { display: block; overflow: hidden; padding: .14em 0 .16em; margin: -.14em 0 -.16em; }
.satir > span { display: block; }
.js .acilacak .satir > span { transform: translateY(150%); transition: transform 1.1s var(--yumusak); transition-delay: calc(var(--s, 0) * 90ms); }
.js.acildi .acilacak .satir > span { transform: none; }

/* ---------- Düğmeler ---------- */
.dugme-grup { display: inline-flex; gap: 4px; }
.dugme {
  display: inline-flex; align-items: center; height: 44px; padding: 0 18px;
  background: var(--murekkep); color: var(--acik);
  font: 500 13px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .05em;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%);
  transition: background-color .25s;
}
.kare-dugme {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  background: var(--murekkep); color: var(--acik);
  clip-path: polygon(11px 0, 100% 0, 100% 100%, 0 100%, 0 11px);
  transition: background-color .25s;
}
.kare-dugme svg { width: 16px; height: 16px; }
.dugme:hover, .kare-dugme:hover, .dugme-grup:hover .dugme, .dugme-grup:hover .kare-dugme { background: #3A3A3A; }
.dugme--acik, .kare-dugme--acik { background: var(--acik); color: var(--murekkep); }
.dugme-grup:hover .dugme--acik, .dugme-grup:hover .kare-dugme--acik, .dugme--acik:hover { background: #FFFFFF; }

/* ---------- Açılış ekranı ---------- */
.yukleyici {
  position: fixed; inset: 0; z-index: 150;
  display: grid; place-items: center;
  background: var(--zemin); color: var(--murekkep);
  transition: opacity .55s ease, visibility 0s linear .55s;
}
.yukleyici svg { width: 72px; height: 72px; overflow: visible; }
.yukleyici path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ciz 1.15s var(--sert) forwards; }
.yukleyici path:nth-child(2) { animation-delay: .3s; animation-duration: .7s; }
.yukleyici path:nth-child(3) { animation-delay: .55s; animation-duration: .8s; }
.yukleyici.bitti { opacity: 0; visibility: hidden; }
@keyframes ciz { to { stroke-dashoffset: 0; } }

/* ---------- Üst bar ---------- */
.ust {
  position: absolute; inset: 0 0 auto 0; z-index: 40;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--aralik);
  padding: calc(var(--ust-bosluk) + 18px) var(--kenar) 0;
  color: var(--murekkep);
  transition: opacity .8s ease .5s;
}
.js.yukleme .ust { opacity: 0; }
[data-ust="acik"] .ust { color: var(--acik); }
.ust .logo { justify-self: start; }
.logo { display: inline-flex; align-items: center; gap: 10px; height: 44px; }
.logo svg { width: 28px; height: 28px; flex: none; }
.logo-ad { font: 900 15px/1 var(--f-baslik); text-transform: uppercase; letter-spacing: .02em; }
.ust-nav { display: flex; gap: 4px; }
.ust-nav a { position: relative; padding: 10px 14px; font-size: 15px; font-weight: 500; opacity: .78; transition: opacity .2s; }
.ust-nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--yumusak); }
.ust-nav a:hover, .ust-nav a[aria-current="page"] { opacity: 1; }
.ust-nav a:hover::after, .ust-nav a[aria-current="page"]::after { transform: scaleX(1); }
.ust-sag { justify-self: end; }
[data-ust="acik"] .ust .dugme, [data-ust="acik"] .ust .kare-dugme { background: var(--acik); color: var(--murekkep); }
[data-ust="acik"] .ust .dugme-grup:hover .dugme, [data-ust="acik"] .ust .dugme-grup:hover .kare-dugme { background: #FFFFFF; }

.menu-sabit {
  position: fixed; z-index: 45; right: var(--kenar); bottom: calc(var(--alt-bosluk) + var(--kenar));
  display: inline-flex; align-items: center; gap: 22px; height: 44px; padding: 0 16px;
  background: var(--murekkep); color: var(--acik);
  font: 500 13px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .05em;
  clip-path: polygon(11px 0, 100% 0, 100% 100%, 0 100%, 0 11px);
  transform: translateY(calc(100% + var(--kenar) + 30px));
  transition: transform .5s var(--yumusak), background-color .25s;
}
.menu-sabit.gorunur { transform: none; }
.menu-sabit:hover { background: #3A3A3A; }
.menu-sabit .cizgiler { display: grid; gap: 5px; width: 18px; }
.menu-sabit .cizgiler::before, .menu-sabit .cizgiler::after { content: ""; height: 1.5px; background: currentColor; }

/* ---------- Menü ---------- */
.menu {
  position: fixed; inset: 0; z-index: 120;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr auto; gap: 24px var(--aralik);
  padding: calc(var(--ust-bosluk) + 18px) var(--kenar) calc(var(--alt-bosluk) + var(--kenar));
  background: var(--koyu); color: var(--acik);
  overflow-y: auto;
  clip-path: inset(0 0 0 100%);
  transition: clip-path .8s var(--sert);
}
.menu.acik { clip-path: inset(0 0 0 0); }
.menu-ust { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
.menu-nav { grid-column: 1 / span 8; align-self: center; }
.menu-liste { list-style: none; display: grid; }
.menu-liste a {
  display: inline-flex; align-items: flex-start; gap: 14px;
  font: 900 clamp(44px, 7.4vw, 124px)/.95 var(--f-baslik); text-transform: uppercase;
  transition: opacity .25s;
}
.menu-liste a small { font: 500 12px/1 var(--f-mono); padding-top: .9em; opacity: .6; }
.menu-liste:hover a { opacity: .38; }
.menu-liste a:hover, .menu-liste a:focus-visible { opacity: 1; }
.menu-liste .satir > span { transform: translateY(150%); transition: transform .9s var(--yumusak); transition-delay: calc(.25s + var(--s, 0) * 60ms); }
.menu.acik .menu-liste .satir > span { transform: none; }
.menu-yan { grid-column: 10 / -1; align-self: end; display: grid; gap: 28px; font-size: 15px; }
.menu-yan h2 { margin-bottom: 8px; opacity: .55; }
.menu-yan a:hover { text-decoration: underline; text-underline-offset: .25em; }
.menu-alt { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--cizgi-acik); padding-top: 16px; opacity: .6; }

/* ---------- Ana sayfa: hero + tanıtım + projeler (tek sahne) ---------- */
/* Düz akış (hareket yok / JS yok) */
.akis-sahne { position: relative; }
.hero-blok { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; color: var(--acik); background: var(--koyu); }
.hero-gorsel { position: absolute; inset: 0; will-change: transform, clip-path, width, height; }
.hero-gorsel-ic { position: absolute; inset: 0; }
.hero-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.hero-perde {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 14, 14, .5) 0%, rgba(14, 14, 14, .14) 34%, rgba(14, 14, 14, .1) 62%, rgba(14, 14, 14, .5) 100%);
  opacity: var(--perde, 1);
}
.js.yukleme .hero-gorsel-ic { clip-path: polygon(49.6% 49.4%, 50% 49.3%, 50.4% 49.5%, 50.5% 50%, 50.3% 50.5%, 50% 50.6%, 49.6% 50.4%, 49.5% 50%); }
.hero-baslik {
  position: absolute; z-index: 6; left: var(--kenar); right: var(--kenar); top: calc(var(--ust-bosluk) + clamp(112px, 15vh, 150px));
  font: 900 var(--sigdir, 9.4vw)/.86 var(--f-baslik); text-transform: uppercase; white-space: nowrap;
  opacity: var(--hb-o, 1); transform: translateY(var(--hb-y, 0px));
}
.hero-slogan {
  position: absolute; z-index: 6; left: var(--kenar); bottom: var(--kenar);
  font: 300 clamp(32px, 4.5vw, 72px)/.98 var(--f-metin); letter-spacing: -.035em;
  opacity: var(--hs-o, 1); transform: translateY(var(--hs-y, 0px));
}
.tanitim-metinler { display: grid; gap: 40px; justify-items: center; padding: clamp(96px, 16vh, 180px) var(--kenar); text-align: center; }
.tanitim-metin { font: 400 clamp(22px, 2.5vw, 38px)/1.2 var(--f-metin); letter-spacing: -.015em; max-width: 22em; text-wrap: balance; }
.tanitim-parcalar, .ph-katman, .ph-gorseller { display: none; }
.parca img { width: 100%; height: 100%; object-fit: cover; }

.ph-proje-statik { padding: clamp(72px, 11vh, 130px) var(--kenar); display: grid; gap: 28px; justify-items: start; }
.ph-proje-statik .ph-gorsel { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; clip-path: polygon(0 12%, 42% 0, 93% 7%, 100% 47%, 89% 93%, 45% 100%, 8% 89%, 3% 45%); }
.ph-proje-statik .ph-meta { width: 100%; }
.ph-baslik { font: 900 clamp(46px, 6.3vw, 116px)/.9 var(--f-baslik); text-transform: uppercase; }
.ph-meta { display: flex; justify-content: space-between; gap: 16px; font: 600 12px/1.3 var(--f-metin); text-transform: uppercase; letter-spacing: .06em; }
.ph-meta > span:first-child { display: flex; gap: 28px; }
.ph-gorsel img { width: 100%; height: 100%; object-fit: cover; }

/* Hareketli sahne */
.hareket .akis { position: relative; }
.hareket .akis-sahne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background-color: var(--zemin); transition: background-color .9s ease; }
.hareket .hero-blok { position: absolute; inset: 0; height: auto; min-height: 0; overflow: visible; background: none; pointer-events: none; }
.hareket .hero-gorsel { inset: auto; left: 0; top: 0; z-index: 3; width: 100vw; height: 100vh; }
.hareket .tanitim-metinler { display: block; padding: 0; }
.hareket .tanitim-metin {
  position: absolute; left: 50%; top: 50%; z-index: 4;
  width: min(23em, calc(100vw - 2 * var(--kenar)));
  transform: translate(-50%, calc(-50% + var(--ty, 0px))); opacity: var(--to, 0);
}
.hareket .tanitim-parcalar { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hareket .parca { position: absolute; left: 0; top: 0; aspect-ratio: 4 / 3; visibility: hidden; will-change: transform, clip-path; }
.hareket .ph-katman { display: block; position: absolute; inset: 0; pointer-events: none; }
.hareket .ph-basliklar { z-index: 2; }
.hareket .ph-ust { z-index: 5; }
.hareket .ph-gorseller { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hareket .ph-gorsel { position: absolute; left: 0; top: 0; display: block; visibility: hidden; pointer-events: auto; will-change: transform, clip-path; }
.hareket .ph-baslik { position: absolute; left: var(--kenar); top: calc(var(--ust-bosluk) + 9vh); }
.hareket .ph-baslik .satir > span { transform: translateY(150%); transition: transform .9s var(--yumusak); transition-delay: calc(var(--s, 0) * 80ms); }
.hareket .ph-baslik.aktif .satir > span { transform: none; }
.hareket .ph-baslik.cikti .satir > span { transform: translateY(-150%); transition-delay: 0s; }
.hareket .ph-meta { position: absolute; left: var(--kenar); right: var(--kenar); top: 50%; opacity: 0; transition: opacity .5s ease; }
.hareket .ph-meta.aktif { opacity: 1; }
.hareket .ph-eylem { position: absolute; left: var(--kenar); bottom: var(--kenar); opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }
.hareket .ph-eylem.aktif { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .4s ease; }

/* ---------- Değerler sahnesi ---------- */
.dg { padding: clamp(80px, 12vh, 140px) var(--kenar); display: grid; gap: 48px; }
.dg-etiket { display: flex; align-items: center; gap: 10px; }
.dg-etiket::before { content: ""; width: 7px; height: 7px; background: currentColor; }
.dg-kartlar { display: grid; gap: 24px; }
.dg-kart { position: relative; overflow: hidden; }
.dg-kart img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.dg-metin h3 { font: 700 clamp(40px, 5.4vw, 88px)/.95 var(--f-metin); text-transform: uppercase; letter-spacing: -.025em; }
.dg-metin p { font-size: 15px; line-height: 1.45; max-width: 27em; }
.dg-metinler { display: grid; gap: 32px; }

.hareket .dg { display: block; position: relative; height: calc(var(--n) * 100vh + 70vh); padding: 0; }
.hareket .dg-sahne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hareket .dg-etiket { position: absolute; left: var(--kenar); top: calc(var(--ust-bosluk) + 26px); z-index: 3; }
.hareket .dg-kartlar { display: block; position: absolute; inset: 0; }
.hareket .dg-kart {
  position: absolute; left: 0; top: 0; width: min(52vw, 860px); height: 66vh;
  will-change: transform;
}
.hareket .dg-kart img { aspect-ratio: auto; }
.hareket .dg-kart::after { content: ""; position: absolute; inset: 0; background: rgba(10, 10, 10, .34); }
.hareket .dg-metinler {
  display: block; position: absolute; inset: 0; z-index: 2; color: var(--acik); pointer-events: none;
  clip-path: inset(var(--kt, 100%) var(--kr, 0) var(--kb, 0) var(--kl, 0));
}
.hareket .dg-metin {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(46vw, 760px); display: grid; gap: 22px; justify-items: center; text-align: center;
  opacity: 0;
}
.hareket .dg-metin.aktif { opacity: 1; }

/* ---------- Hizmetler (koyu) ---------- */
.hz { background: var(--koyu); color: var(--acik); padding: clamp(96px, 17vh, 210px) var(--kenar) clamp(96px, 15vh, 180px); }
.hz-giris { font: 400 clamp(26px, 3vw, 46px)/1.16 var(--f-metin); letter-spacing: -.02em; max-width: 21em; }
.hz-giris .k { opacity: var(--o, 1); transition: opacity .15s linear; }
.hareket .hz-giris .k { opacity: var(--o, .16); }
.hz-icerik { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--aralik); margin-top: clamp(72px, 13vh, 150px); align-items: start; }
.hz-liste { grid-column: 1 / span 5; list-style: none; border-top: 1px solid var(--cizgi-acik); }
.hz-liste li { border-bottom: 1px solid var(--cizgi-acik); }
.hz-liste a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 16px; padding: 16px 0;
  font: 400 clamp(19px, 1.7vw, 26px)/1.2 var(--f-metin); letter-spacing: -.01em;
  color: rgba(242, 239, 234, .4); transition: color .3s;
}
.hz-liste a small { font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; }
.hz-liste a.aktif, .hz-liste a:hover, .hz-liste a:focus-visible { color: var(--acik); }
.hz-vitrin { grid-column: 7 / -1; display: grid; gap: 16px; }
.hz-gorsel {
  display: grid; aspect-ratio: 4 / 3; overflow: hidden; background: #262626;
  clip-path: polygon(0 9%, 8% 9%, 8% 0, 100% 0, 100% 86%, 92% 100%, 0 100%);
}
.hz-gorsel img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .55s ease, transform 1.1s var(--yumusak); }
.hz-gorsel img.gorunur { opacity: 1; transform: none; }
.hz-aciklama { font-size: 15px; color: rgba(242, 239, 234, .7); max-width: 34em; min-height: 3em; }

/* ---------- İletişim bloğu ---------- */
.ih { padding: clamp(88px, 14vh, 170px) var(--kenar) clamp(72px, 11vh, 130px); overflow: hidden; }
.dev-kelime { display: block; font: 900 var(--sigdir, 14vw)/.84 var(--f-baslik); text-transform: uppercase; white-space: nowrap; text-align: center; }
.ih-gorseller { display: flex; justify-content: center; align-items: flex-start; gap: 2vw; margin-top: -4vw; position: relative; z-index: 1; }
.ih-gorseller figure { flex: none; }
.ih-g1 { width: max(200px, 33vw); aspect-ratio: 1; transform: translateY(calc(-24% + var(--py, 0px))); clip-path: polygon(0 0, 72% 0, 72% 9%, 100% 9%, 100% 100%, 13% 100%, 0 88%); }
.ih-g2 { width: max(150px, 25vw); aspect-ratio: 1; transform: translateY(calc(26% + var(--py, 0px))); clip-path: polygon(10% 0, 100% 0, 100% 74%, 88% 74%, 88% 100%, 0 100%, 0 10%); }
.ih-gorseller img { width: 100%; height: 100%; object-fit: cover; }
.ih-alt { display: grid; gap: 22px; justify-items: start; max-width: 24em; margin-top: clamp(72px, 12vw, 180px); }
.ih-alt p { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.35; }

/* ---------- Alt bilgi ---------- */
.alt { padding: clamp(56px, 9vh, 100px) var(--kenar) calc(var(--alt-bosluk) + 14px); display: grid; gap: clamp(48px, 9vh, 96px); font-size: 14px; }
.alt-ust { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px var(--aralik); }
.alt-marka { grid-column: 1 / span 4; display: grid; gap: 14px; align-content: start; }
.alt-marka p { color: var(--gri); max-width: 22em; }
.alt-kolon { grid-column: span 2; }
.alt-kolon--genis { grid-column: span 3; }
.alt h2 { color: var(--gri-acik); margin-bottom: 12px; }
.alt ul { list-style: none; display: grid; gap: 6px; }
.alt a:hover { text-decoration: underline; text-underline-offset: .25em; }
.alt-alt { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px 24px; padding-top: 14px; border-top: 1px solid var(--cizgi); color: var(--gri); }
.alt-alt p:last-child { justify-self: end; text-align: right; }

/* ---------- Kaydırmayla şekil değiştiren / kayan öğeler ---------- */
[data-sekil] { will-change: clip-path; }
[data-paralaks] { will-change: transform; }

/* ---------- Alt sayfalar: ortak başlık ---------- */
.sb { padding: calc(var(--ust-bosluk) + clamp(150px, 24vh, 240px)) var(--kenar) clamp(56px, 9vh, 104px); display: grid; gap: 28px; justify-items: center; text-align: center; }
.sb-etiket { display: flex; align-items: center; gap: 10px; }
.sb-etiket::before { content: ""; width: 7px; height: 7px; background: currentColor; }
.sb-metin { font: 400 clamp(26px, 3.2vw, 50px)/1.12 var(--f-metin); letter-spacing: -.025em; max-width: 19em; text-wrap: balance; }
.bolum-baslik { font: 900 clamp(48px, 8vw, 150px)/.86 var(--f-baslik); text-transform: uppercase; }

/* ---------- Projeler sayfası ---------- */
.suzgec { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 0 var(--kenar) clamp(56px, 9vh, 96px); }
.secim {
  height: 36px; padding: 0 14px; font: 500 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .05em;
  background: rgba(25, 25, 25, .06); color: var(--murekkep);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
  transition: background-color .2s, color .2s;
}
.secim:hover { background: rgba(25, 25, 25, .12); }
.secim[aria-pressed="true"] { background: var(--murekkep); color: var(--acik); }
.gorunum-sec { display: flex; justify-content: flex-end; gap: 6px; padding: 0 var(--kenar) 16px; }

.liste { padding: 0 var(--kenar) clamp(96px, 14vh, 160px); }
.liste-tablo { width: 100%; border-collapse: collapse; font-size: 14px; }
.liste-tablo th { text-align: left; font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--gri); padding: 0 16px 14px 0; border-bottom: 1px solid var(--murekkep); }
.liste-tablo td { padding: 0; border-bottom: 1px solid var(--cizgi); }
.liste-tablo td a { display: block; padding: 18px 16px 18px 0; }
.liste-tablo td:first-child a { font: 900 clamp(16px, 1.5vw, 22px)/1.1 var(--f-baslik); text-transform: uppercase; }
.liste-tablo tr { transition: background-color .2s; }
.liste-tablo tbody tr:hover { background: rgba(25, 25, 25, .05); }
.liste-tablo .sag { text-align: right; padding-right: 0; }
.liste-tablo td.sag a { padding-right: 0; }
.onizleme {
  position: fixed; left: 0; top: 0; z-index: 30; width: 300px; aspect-ratio: 4 / 3; pointer-events: none;
  clip-path: polygon(6% 0, 100% 4%, 96% 100%, 0 94%);
  opacity: 0; transform: translate(var(--ox, 0), var(--oy, 0)) scale(.9);
  transition: opacity .25s ease, transform .25s ease-out;
}
.onizleme.gorunur { opacity: 1; transform: translate(var(--ox, 0), var(--oy, 0)) scale(1); }
.onizleme img { width: 100%; height: 100%; object-fit: cover; }
.durum::before { content: ""; display: inline-block; width: 8px; height: 8px; border: 1.5px solid currentColor; margin-right: 8px; vertical-align: .05em; }
.durum[data-durum="tamamlandi"]::before { background: currentColor; }
.durum[data-durum="devam"]::before { background: linear-gradient(135deg, currentColor 50%, transparent 50%); }

.kartlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px var(--aralik); }
.kart a { display: grid; gap: 12px; }
.kart-gorsel { overflow: hidden; aspect-ratio: 4 / 5; }
.kart-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--yumusak); }
.kart a:hover .kart-gorsel img { transform: scale(1.04); }
.kart-ust { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.kart h2 { font: 900 clamp(18px, 1.6vw, 24px)/1.05 var(--f-baslik); text-transform: uppercase; }
.kart-alt { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--gri); }
.bos { padding: 48px 0; display: grid; gap: 20px; justify-items: center; text-align: center; }

/* ---------- Proje detay ---------- */
.pd-hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; color: var(--acik); background: var(--koyu); }
.pd-hero-gorsel { position: absolute; inset: 0; }
.pd-hero-gorsel img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--pz, 1.08)); transition: transform 1.8s var(--yumusak); }
.acildi .pd-hero-gorsel img { --pz: 1; }
.pd-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 14, 14, .45), rgba(14, 14, 14, .08) 35%, rgba(14, 14, 14, .12) 55%, rgba(14, 14, 14, .62)); }
.pd-hero-ic { position: absolute; z-index: 1; left: var(--kenar); right: var(--kenar); bottom: var(--kenar); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px var(--aralik); align-items: end; }
.pd-hero h1 { grid-column: 1 / span 7; font: 900 clamp(48px, 7.6vw, 140px)/.88 var(--f-baslik); text-transform: uppercase; }
.pd-kunye { grid-column: 9 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 24px; font-size: 13px; }
.pd-kunye > div { display: contents; }
.pd-kunye dt { font: 500 11px/1.6 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; opacity: .72; }
.pd-giris { padding: clamp(96px, 16vh, 190px) var(--kenar); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px var(--aralik); }
.pd-ozet { grid-column: 2 / span 10; text-align: center; font: 400 clamp(24px, 2.8vw, 44px)/1.16 var(--f-metin); letter-spacing: -.02em; text-wrap: balance; }
.pd-detay { grid-column: 7 / span 5; display: grid; gap: 1em; color: var(--gri); font-size: 16px; }
.pd-galeri { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(48px, 9vh, 110px) var(--aralik); padding: 0 var(--kenar) clamp(96px, 15vh, 180px); }
.pd-g { cursor: zoom-in; display: block; width: 100%; }
.pd-g img { width: 100%; height: 100%; object-fit: cover; }
.pd-g--tam { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.pd-g--sol { grid-column: 1 / span 7; aspect-ratio: 4 / 3; }
.pd-g--sag { grid-column: 6 / -1; aspect-ratio: 4 / 3; }
.pd-g--kucuk { grid-column: 9 / -1; aspect-ratio: 4 / 5; align-self: end; }
.pd-g--kucuk-sol { grid-column: 1 / span 4; aspect-ratio: 4 / 5; }

.cizimler { padding: clamp(88px, 14vh, 160px) var(--kenar); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--aralik); border-top: 1px solid var(--cizgi); }
.cizimler-bas { grid-column: 1 / span 4; display: grid; gap: 16px; align-content: start; }
.cizimler-bas h2 { font: 900 clamp(32px, 3.4vw, 56px)/.9 var(--f-baslik); text-transform: uppercase; }
.cizimler-bas p { color: var(--gri); max-width: 30em; }
.cizim-izgara { grid-column: 5 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--aralik); }
.cizim { display: grid; gap: 10px; }
.cizim svg { width: 100%; height: auto; background: #FAF8F4; border: 1px solid var(--cizgi); color: var(--murekkep); }
.cizim figcaption { color: var(--gri); }

.sonraki { position: relative; overflow: hidden; padding: clamp(80px, 12vh, 140px) var(--kenar); background: var(--sonraki-zemin, #E7E2D9); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px var(--aralik); min-height: 90vh; align-content: space-between; }
.sonraki-ust { grid-column: 1 / -1; display: grid; gap: 18px; }
.sonraki-ad { font: 900 clamp(48px, 7vw, 128px)/.9 var(--f-baslik); text-transform: uppercase; max-width: 9ch; }
.sonraki-gorsel { grid-column: 5 / span 7; aspect-ratio: 4 / 3; display: block; }
.sonraki-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.sonraki-eylem { grid-column: 1 / span 4; align-self: end; }

.isik-kutusu { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--koyu); color: var(--acik); }
.isik-kutusu::backdrop { background: var(--koyu); }
.isik-kutusu[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.isik-ust, .isik-alt { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: calc(var(--ust-bosluk) + 14px) var(--kenar) 14px; }
.isik-alt { padding: 14px var(--kenar) calc(var(--alt-bosluk) + 14px); }
.isik-gorsel { display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 var(--kenar); }
.isik-gorsel img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.isik-yon { display: flex; gap: 4px; }

/* ---------- Ofis / Yaklaşım ---------- */
.genis { padding: 0 var(--kenar); }
.genis figure { aspect-ratio: 21 / 9; overflow: hidden; }
.genis img { width: 100%; height: 100%; object-fit: cover; }
.iki-kolon { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--aralik); padding: clamp(88px, 14vh, 170px) var(--kenar); align-items: start; }
.iki-kolon-sol { grid-column: 1 / span 4; display: grid; gap: 16px; }
.iki-kolon-sag { grid-column: 6 / -1; display: grid; gap: 1em; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.4; max-width: 38em; }
.kurucu { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px var(--aralik); align-items: end; }
.portre { aspect-ratio: 4 / 5; display: grid; place-items: center; background: #DCD5CB; clip-path: polygon(0 0, 100% 0, 100% 90%, 88% 100%, 0 100%); }
.portre span { font: 900 clamp(56px, 7vw, 110px)/1 var(--f-baslik); color: #A39A8D; }
.kurucu-metin { display: grid; gap: 1em; font-size: 16px; line-height: 1.5; }
.kurucu-metin h3 { font: 900 clamp(26px, 2.4vw, 38px)/1 var(--f-baslik); text-transform: uppercase; }

.ekip-bolum { padding: clamp(88px, 14vh, 170px) var(--kenar); display: grid; gap: clamp(40px, 7vh, 80px); }
.ekip { list-style: none; border-top: 1px solid var(--cizgi); }
.ekip li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--cizgi); transition: padding-left .4s var(--yumusak); }
.ekip li:hover { padding-left: 14px; }
.ekip strong { font: 500 clamp(24px, 3vw, 46px)/1.05 var(--f-metin); letter-spacing: -.025em; }
.ekip span { color: var(--gri); }

.tablo-bolum { padding: clamp(88px, 14vh, 170px) var(--kenar); display: grid; gap: clamp(40px, 7vh, 72px); }
.tablo-bolum-bas { display: grid; gap: 20px; max-width: 40em; }
.tablo-bolum-bas p { color: var(--gri); font-size: 17px; }
.tablo-kap { overflow-x: auto; }
.tablo { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; }
.tablo th { text-align: left; color: var(--gri); padding: 0 16px 12px 0; border-bottom: 1px solid var(--murekkep); font-weight: 500; }
.tablo td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--cizgi); vertical-align: baseline; }
.tablo td:first-child { font: 900 15px/1.2 var(--f-baslik); text-transform: uppercase; }
.tablo .sag { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }

.surec-bolum { padding: clamp(88px, 14vh, 170px) var(--kenar); display: grid; gap: clamp(40px, 7vh, 80px); }
.adimlar { list-style: none; border-top: 1px solid var(--cizgi); counter-reset: adim; }
.adim { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px var(--aralik); padding: clamp(28px, 5vh, 52px) 0; border-bottom: 1px solid var(--cizgi); counter-increment: adim; align-items: baseline; }
.adim::before { content: "(" counter(adim, decimal-leading-zero) ")"; grid-column: 1 / span 1; font: 500 12px/1 var(--f-mono); color: var(--gri); }
.adim h3 { grid-column: 2 / span 4; font: 400 clamp(22px, 2.2vw, 34px)/1.1 var(--f-metin); letter-spacing: -.02em; }
.adim p { grid-column: 7 / span 5; color: var(--gri); }
.adim-sure { grid-column: 12 / -1; justify-self: end; white-space: nowrap; }

/* ---------- İletişim sayfası ---------- */
.ilet { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 56px var(--aralik); padding: clamp(40px, 6vh, 72px) var(--kenar) clamp(96px, 14vh, 160px); }
.ilet-bilgi { grid-column: 1 / span 5; display: grid; gap: 0; align-content: start; border-top: 1px solid var(--cizgi); }
.bilgi-oge { display: grid; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--cizgi); }
.bilgi-oge h2 { color: var(--gri); }
.bilgi-oge > p, .bilgi-oge > a, .bilgi-satir > a { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.35; }
.bilgi-oge a:hover { text-decoration: underline; text-underline-offset: .22em; }
.bilgi-satir { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.kucuk-not { font-size: 13px; color: var(--gri); }
.kopyala { font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--gri); text-decoration: underline; text-underline-offset: .3em; }
.kopyala:hover { color: var(--murekkep); }

.form { grid-column: 7 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px var(--aralik); align-content: start; }
.form h2 { grid-column: 1 / -1; font: 900 clamp(32px, 3.4vw, 56px)/.9 var(--f-baslik); text-transform: uppercase; }
.alan { display: grid; gap: 6px; min-width: 0; }
.alan--tam { grid-column: 1 / -1; }
.alan label { color: var(--gri); }
.alan input, .alan select, .alan textarea {
  width: 100%; font: inherit; font-size: 18px; color: var(--murekkep);
  background: transparent; border: 0; border-bottom: 1px solid var(--murekkep); border-radius: 0; padding: 10px 0; appearance: none;
}
.alan textarea { min-height: 130px; resize: vertical; }
.alan select { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 6px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 28px; }
.alan input:focus, .alan select:focus, .alan textarea:focus { outline: none; border-bottom-width: 2px; padding-bottom: 9px; }
.alan input:focus-visible, .alan select:focus-visible, .alan textarea:focus-visible { outline: 2px solid var(--murekkep); outline-offset: 4px; }
.alan [aria-invalid="true"] { border-bottom-color: #9A2F1C; }
.hata { font-size: 14px; color: #9A2F1C; }
.form-alt { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.form-alt small { font-size: 13px; color: var(--gri); max-width: 40em; }
.form-alt small a { text-decoration: underline; text-underline-offset: .2em; }
.form-sonuc { grid-column: 1 / -1; background: var(--koyu); color: var(--acik); padding: 22px; display: grid; gap: 8px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }
.form-sonuc strong { font: 900 24px/1.1 var(--f-baslik); text-transform: uppercase; }

/* ---------- Yasal ---------- */
.yasal { padding: 0 var(--kenar) clamp(96px, 14vh, 160px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.yasal-ic { grid-column: 4 / span 6; display: grid; gap: 1em; max-width: 66ch; }
.yasal h2 { font: 900 22px/1.1 var(--f-baslik); text-transform: uppercase; margin-top: 1.2em; }
.yasal ul { padding-left: 1.2em; display: grid; gap: .4em; }

/* ---------- Duyarlı düzen ---------- */
@media (max-width: 1024px) {
  .kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alt-marka { grid-column: 1 / -1; }
  .alt-kolon, .alt-kolon--genis { grid-column: span 4; }
  .cizimler-bas, .cizim-izgara { grid-column: 1 / -1; }
  .menu-nav { grid-column: 1 / -1; }
  .menu-yan { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .ust { grid-template-columns: 1fr auto; }
  .ust-nav { display: none; }
  .hero-baslik { top: calc(var(--ust-bosluk) + 112px); }

  .hareket .ph-baslik { font-size: clamp(40px, 11vw, 64px); }
  .hareket .ph-meta { top: auto; bottom: calc(var(--kenar) + 60px); }
  .ph-meta > span:first-child { flex-direction: column; gap: 2px; }
  .hareket .tanitim-metin { width: 78vw; }

  .hareket .dg-kart { width: 86vw; height: 58vh; }
  .hareket .dg-metin { width: 76vw; }

  .hz-liste, .hz-vitrin { grid-column: 1 / -1; }
  .hz-vitrin { order: -1; }

  .ih-gorseller { margin-top: -2vw; }
  .ih-g1 { width: 52vw; }
  .ih-g2 { width: 38vw; }

  .alt-kolon, .alt-kolon--genis { grid-column: span 6; }
  .alt-alt { grid-template-columns: 1fr; }
  .alt-alt p:last-child { justify-self: start; text-align: left; }

  .menu-yan { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .menu-alt { flex-direction: column; }

  .kartlar { grid-template-columns: minmax(0, 1fr); }
  .liste-tablo th:nth-child(n+3), .liste-tablo td:nth-child(n+3) { display: none; }

  .pd-hero h1, .pd-kunye { grid-column: 1 / -1; }
  .pd-ozet, .pd-detay { grid-column: 1 / -1; }
  .pd-galeri { grid-template-columns: minmax(0, 1fr); }
  .pd-g--tam, .pd-g--sol, .pd-g--sag, .pd-g--kucuk, .pd-g--kucuk-sol { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .cizim-izgara { grid-template-columns: minmax(0, 1fr); }
  .sonraki-gorsel, .sonraki-eylem { grid-column: 1 / -1; }

  .genis figure { aspect-ratio: 4 / 3; }
  .iki-kolon-sol, .iki-kolon-sag { grid-column: 1 / -1; }
  .kurucu { grid-template-columns: minmax(0, 1fr); }
  .portre { max-width: 320px; }
  .ekip li { grid-template-columns: minmax(0, 1fr); gap: 2px; }

  .adim::before { grid-column: 1 / -1; }
  .adim h3, .adim p, .adim-sure { grid-column: 1 / -1; justify-self: start; }

  .ilet-bilgi, .form { grid-column: 1 / -1; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .yasal-ic { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; }
}

/* ---------- Güvenlik ağı: JS yüklenmezse açılış ekranı ve gizli başlıklar 9 sn sonra açılır ---------- */
.js .yukleyici { animation: yk-kapat 0s linear 9s forwards; }
.js .acilacak .satir > span { animation: yk-goster 0s linear 9s forwards; }
@keyframes yk-kapat { to { opacity: 0; visibility: hidden; } }
@keyframes yk-goster { to { transform: none; } }

[data-sayfa="iletisim"] .ih { padding-top: calc(var(--ust-bosluk) + clamp(130px, 20vh, 200px)); }