/* Montserrat variable: tarayıcı sadece sayfadaki karakterlerin alt kümesini indirir (TR'de Kiril dosyası inmez) */
@font-face { font-family: Montserrat; font-weight: 100 900; font-display: swap; src: url(../fonts/montserrat-cyrillic-ext-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: Montserrat; font-weight: 100 900; font-display: swap; src: url(../fonts/montserrat-cyrillic-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Montserrat; font-weight: 100 900; font-display: swap; src: url(../fonts/montserrat-latin-ext-wght-normal.woff2) format("woff2-variations"); 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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Montserrat; font-weight: 100 900; font-display: swap; src: url(../fonts/montserrat-latin-wght-normal.woff2) format("woff2-variations"); 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; }

/* Palet: zemin + yeşil logodan; metin siyah değil sepya mürekkep (eski harita), başlıklar logo yeşili */
:root {
  --bg: #efede7;
  --bg-rgb: 239, 237, 231;
  --ink: #4a3b2a;
  --muted: rgba(74, 59, 42, 0.78);
  --accent: #1b542c;
  --accent-rgb: 27, 84, 44;
  --accent-hover: #2e8c54;
  --red-ink: #7d2f00; /* kırmızımsı vurgu (Özgür'ün kodu): sol bilgi bloğu, dil, menü, alıntı */
  /* Suluboya kâğıdı: zemine tek kat multiply → açık, hafif çay lekeli ton (3 kat koyu sarı-turuncuya kaçıyordu) */
  --paper: url(../img/paper.webp) center / cover;
  /* Şehir isimleri: zemin rengi + altında yumuşak gölge */
  --city: var(--bg);
  --city-hover: #8fd6a6; /* logo yeşilinin açık tonu: koyu gölge üstünde okunur */
  --city-shadow: 0 1px 2px rgba(20, 15, 10, 0.7), 0 2px 8px rgba(20, 15, 10, 0.45);
  /* Ölçüler ekranla akışkan büyür / küçülür (telefon → 4K); kırılımlar en altta */
  --gutter: clamp(16px, 4vw, 72px);
  --header-h: clamp(60px, 6vw, 112px);
  --skyline-inset: 6vw; /* silüet sayfa kenarlarına dayanmasın */
  --skyline-bottom: max(10px, 1.2vw); /* altında su yansımasına yer; biraz aşağıda (Özgür, 2026-10-22: 2vw yüksek kalıyordu) */
  --panel-w: clamp(300px, 30vw, 560px);
  --home-w: 3272; /* ana sayfa silüet tuvali genişliği (yüksekliği 220): tools/data/home-silhouettes.json ile aynı */
  /* İmleç: logo Λ (uç = sıcak nokta) ve yeşil el; SVG içinde renk sabit (#1b542c = --accent) */
  --cursor: url(../img/cursor.svg?v=2) 13 2, auto;
  --cursor-pointer: url(../img/cursor-pointer.svg?v=4) 2 1, pointer;
  --cursor-down: url(../img/cursor-down.svg) 13 23, pointer; /* silüet binaları: Λ aşağı dönük (V), uç = sıcak nokta */
  --cursor-left: url(../img/cursor-left.svg) 3 13, pointer; /* tam ekran görsel: Λ sola dönük, tıklama projeye döner */
}

* { box-sizing: border-box; margin: 0; }
/* Tek ekran, sabit sayfa: hiçbir boyutta kaydırma / esneme yok. Yazı seçme, görsel sürükleme ve uzun basma menüsü kapalı (main.js kopyalamayı da engeller) */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body { cursor: var(--cursor); position: fixed; inset: 0; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
img, video { -webkit-user-drag: none; }
/* Kaydırma main'de: proje sayfası açılınca haritanın bir ekran altına inilir (projects.js), kapalıyken main tek ekran. Kaydırma çubuğu gizli */
main { position: absolute; inset: 0; overflow: hidden auto; overscroll-behavior: none; scrollbar-width: none; scroll-snap-type: y mandatory; }
.map, .project-page { scroll-snap-align: start; } /* sayfa yarıda kalmaz: harita ya da proje sayfası tam ekrana oturur */
main::-webkit-scrollbar { display: none; }
body { font-family: Montserrat, system-ui, sans-serif; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
img, video, svg { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
a[href] { cursor: var(--cursor-pointer); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.kicker { font-size: clamp(11px, 0.8vw, 18px); font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); }

/* Header: zemin katmanı yok; logo, sağda dil. Ana sayfaya ait, proje sayfasının kendi üst köşesi var (.project-head) */
.site-header {
  position: absolute; inset: 0 0 auto; z-index: 20; height: var(--header-h); /* main içinde: haritayla birlikte kayar */
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--gutter);
}
/* Logo header ortasından biraz aşağıda (dil menüsü yerinde kalır) */
.brand img { width: clamp(160px, 20vw, 440px); height: auto; translate: 0 clamp(6px, 0.8vw, 16px); } /* logo.png rengi #144422; filtre yok ki ekranda birebir o renk görünsün */
/* Dil: üçü yan yana; seçili olan logo yeşili, diğerleri kırmızımsı */
.lang { display: flex; }
.lang button { all: unset; cursor: var(--cursor-pointer); padding: 6px 7px; color: var(--red-ink); opacity: 0.75; font-size: clamp(12px, 0.8vw, 20px); font-weight: 500; letter-spacing: 0.1em; transition: opacity 0.2s, color 0.2s; }
.lang button:hover { opacity: 1; }
.lang button[aria-pressed="true"] { color: var(--accent); font-weight: 600; opacity: 1; }
.lang button:focus-visible { outline: 2px solid var(--accent); }
.header-actions { display: flex; align-items: center; gap: clamp(10px, 1.2vw, 26px); }
/* Yayılma efekti yarıçapı (ana sayfa binaları, skyline-photos.js) */
@property --spread { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

/* Harita: tek ekran, site doğrudan bununla açılır */
/* Zemin: logo grisi × suluboya kâğıdı (multiply → lekeler griye biner, beyazlar kaybolur).
   Tek kat: üç kat çay lekelerini koyu sarı-turuncuya ısıtıyordu; zemin açık kalsın, kâğıt dokusu hafifçe sezilsin */
.map {
  position: relative; height: 100vh; height: 100svh; overflow: hidden;
  background: var(--bg) var(--paper); background-blend-mode: multiply;
}
.map-stage { position: absolute; inset: 0; }
.map-stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cubist-map .facets polygon { stroke: rgba(18, 40, 48, 0.22); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.cubist-map .borders { fill: none; stroke: rgba(18, 40, 48, 0.35); stroke-width: 0.8; vector-effect: non-scaling-stroke; }
/* Kıyı: kalınlık map.js render() içinde (zoom telafisi) */
.cubist-map .coast { fill: none; stroke: rgba(25, 45, 50, 0.6); }
/* Piri Reis rhumb çizgileri: kara altında, sadece okyanusta görünür; kalınlık --rw ile JS'ten */
.cubist-map .rhumbs path { fill: none; stroke-width: var(--rw); }
.cubist-map .rhumbs { filter: blur(calc(var(--rw) * 1.2px)); } /* hafif flu: --rw ekranda ~0.8px, zoom'da sabit kalır */
.cubist-map .rhumbs .r1 { stroke: rgba(31, 95, 107, 0.13); }
.cubist-map .rhumbs .r2 { stroke: rgba(217, 102, 31, 0.1); }
/* Projeli ülkeler logo zemin renginde, kenarı hafif yumuşak; açılışta ve yakınlaşınca map.js konturu çizer */
.cubist-map .highlights path { fill: rgba(var(--bg-rgb), 0.95); filter: url(#soft); cursor: var(--cursor-pointer); }
/* Kontur ayrı eleman: kalınlık --outline-w ile JS'ten (zoom telafisi), dash'ler harita biriminde */
.cubist-map .highlights .outline {
  fill: none; stroke: var(--accent); stroke-width: var(--outline-w); stroke-linejoin: round;
  filter: url(#glow); pointer-events: none;
}
/* Moldova'nın açılan kopyası ve ortadaki dolgu (map.js unfold): yalnız yakındayken görünür, #soft blur'u (dünya ölçeğinde ~1 px)
   orada onlarca piksele çıkıp şekli bulandırıyordu; kopya kendi konturuyla açılır */
.cubist-map .highlights .mirror { filter: none; }
.cubist-map .highlights .mirror-copy { stroke: var(--accent); stroke-width: var(--outline-w); stroke-linejoin: round; }
.cubist-map .outline-tip { fill: #fff; filter: url(#glow); pointer-events: none; }
/* Yakınlaşma sırasında (map.js flyTo) SVG her karede yeniden çizilir: fark edilmeyen hafif blur'ları o arada kapat */
.map.is-flying .cubist-map .rhumbs, .map.is-flying .cubist-map .highlights path:not(.outline) { filter: none; }

/* Pusula gülleri: SVG dışında ayrı katman, sadece kendisi döner */
.map-roses { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.map-rose { position: absolute; top: 0; left: 0; opacity: 0.32; } /* arka planda kalsın: soluk ve hafif flu */
/* Blur dönen img'nin kendi katmanında: kutuda olunca her karede yeniden hesaplanıyordu (boşta da CPU yiyordu) */
.map-rose img { width: 100%; filter: blur(1px); will-change: transform; animation: rose-spin 160s linear infinite; }
@keyframes rose-spin { to { transform: rotate(360deg); } }

/* Şehir silüetleri: suluboya dokusu, SVG maskeyle şekil alır (tools/build-skylines.mjs). Hepsi üst üste;
   --open ortadan iki yana açar, --gap ortadan iki yana siler (map.js). min(): silme açıklığı geçmesin, poligon ters dönmesin */
/* Kutunun altı = zemin çizgisi; daralınca silüet aynı zeminde küçülür */
/* Dünya görünümünde 11 projenin + yolun silüeti kenar boşlukları içinde tam genişlik (tuval --home-w × 220 → masaüstünde ~80 px boy; tools/build-home-silhouettes.py) */
.map-skyline {
  position: absolute; z-index: 1; left: var(--skyline-inset); right: var(--skyline-inset); bottom: var(--skyline-bottom); display: grid; grid-template-columns: minmax(0, 1fr); pointer-events: none;
  /* Altına doğru gölge: silüetin kendi maskesi / clip-path'i gölgeyi kırpardı, filtre bu yüzden kutuda */
  filter: drop-shadow(0 3px 2px rgba(60, 30, 12, 0.35)) drop-shadow(0 9px 8px rgba(60, 30, 12, 0.22));
  /* Su yansıması: altında ters, soluk ve aşağı doğru kaybolan kopya (hover görselleri de yansır). Firefox desteklemiyor: yansımasız */
  -webkit-box-reflect: below 1px linear-gradient(transparent 58%, rgba(0, 0, 0, 0.32));
}
/* Şehirde panelin soluna sığar (alttan açılan panelde tam genişlik, bkz. kırılımlar). map.js boyutu eski silüet silinmişken değiştirir */
/* Panel şimdilik kapalı: şehir silüeti ortada, ekranın ~%48'i (~78 px boy) — ülke büyük göründüğünde altına binmesin
   (panel dönünce: left: var(--skyline-inset); right: calc(var(--panel-w) + 3vw)) */
.map-skyline.is-city { left: 26vw; right: 26vw; }
.skyline {
  grid-area: 1 / 1; align-self: end; width: 100%; aspect-ratio: 2000 / 220; min-height: 70px; background: url(../img/map-texture.webp) center 40% / cover;
  -webkit-mask: center bottom / cover no-repeat; mask: center bottom / cover no-repeat;
  --open: 1; --gap: 0;
  --l: calc(50% - var(--open) * 50%); --r: calc(50% + var(--open) * 50%);
  --gl: calc(50% - min(var(--gap), var(--open)) * 50%); --gr: calc(50% + min(var(--gap), var(--open)) * 50%);
  clip-path: polygon(var(--l) 0, var(--gl) 0, var(--gl) 100%, var(--gr) 100%, var(--gr) 0, var(--r) 0, var(--r) 100%, var(--l) 100%);
}
.skyline:not([data-city="home"]) { --open: 0; opacity: 0.72; } /* şehir silüetleri geri planda kalsın */
/* Dar ekranda min-height silüeti uzatır, maske (cover) iki yandan kırpar (width: 100% → aspect-ratio min-height'ı genişliğe aktarıp kutudan taşırmaz).
   Ana sayfada 32px: telefonda ortadaki projeler okunur boyda kalır, uçlar kırpılır */
.skyline[data-city="home"] { aspect-ratio: var(--home-w) / 220; min-height: 32px; -webkit-mask-image: url(../img/skyline-home.svg?v=4); mask-image: url(../img/skyline-home.svg?v=4); }
/* Soldaki 6 yapı tek renk teal kalıyordu: her binaya suluboya paletinden ayrı ton (color karışımı dokunun lekelerini korur);
   duraklar bina ortalarında (konumlar site/assets/data/home-buildings.json kutularından, % = x / --home-w).
   Ortadaki yol: logo yeşili + okra karışımı yeşilimsi ton; 8. bina (Dünyagöz) daha canlı, doygun turuncu */
.skyline[data-city="home"] {
  --road: color-mix(in srgb, rgba(var(--accent-rgb), 0.78) 55%, rgba(214, 150, 62, 0.78));
  background:
    linear-gradient(90deg, rgba(181, 71, 27, 0.72) 5.04%, rgba(232, 162, 60, 0.72) 11.05%, rgba(156, 61, 30, 0.72) 18.08%, rgba(31, 95, 107, 0) 25.64%,
      rgba(214, 150, 62, 0.72) 32.61%, rgba(181, 71, 27, 0.66) 39.69%, rgba(181, 71, 27, 0) 45.16%,
      var(--road) 47.2%, var(--road) 51.49%, rgba(31, 95, 107, 0) 52.89%,
      rgba(214, 92, 34, 0) 62.86%, rgba(214, 92, 34, 0.8) 64.36%, rgba(214, 92, 34, 0.8) 69.19%, rgba(214, 92, 34, 0) 70.69%),
    url(../img/map-texture.webp) center 40% / cover;
  background-blend-mode: color, normal;
}
/* Ana sayfa binaları: home silüetiyle aynı kutu (maske cover → dar ekranda iki yandan kırpılır: --mw maskenin genişliği).
   Her bina kendi kutusunda; binanın gerçek görseli farenin girdiği noktadan yayılır (--spread), üstünde proje adı belirir.
   overflow yerine clip-path: iki yanda kırpar ama yukarı taşan adları kesmez */
.skyline-photos { grid-area: 1 / 1; align-self: end; position: relative; width: 100%; aspect-ratio: var(--home-w) / 220; min-height: 32px; container-type: size; clip-path: inset(-50vh 0 0 0); }
.map.has-selection .skyline-photos { display: none; }
.skyline-item {
  position: absolute; --mw: max(100cqw, 100cqh * var(--home-w) / 220);
  left: calc(50% + (var(--x0) - 0.5) * var(--mw)); width: calc(var(--w) * var(--mw));
  top: calc(var(--y0) * 100%); height: calc(var(--h) * 100%);
}
.skyline-photo {
  all: unset; position: absolute; inset: 0; cursor: var(--cursor-down); pointer-events: auto;
  background: center / 100% 100% no-repeat; /* binanın kendisi (arka planı saydam): kutuya tam oturur */
  -webkit-mask: radial-gradient(circle at var(--px, 50%) var(--py, 100%), #000 calc(var(--spread) - 15%), transparent var(--spread));
  mask: radial-gradient(circle at var(--px, 50%) var(--py, 100%), #000 calc(var(--spread) - 15%), transparent var(--spread));
  transition: --spread 1.4s ease-out;
}
.skyline-photo:hover, .skyline-photo:focus-visible, .skyline-photo.is-revealed, .skyline-photo.is-selected { --spread: 115%; } /* is-revealed: kendiliğinden renklenme (dalga / rastgele); is-selected: proje sayfasında açık proje */
.skyline[data-city="kiv"] { -webkit-mask-image: url(../img/skyline-kiv.svg); mask-image: url(../img/skyline-kiv.svg); }
.skyline[data-city="ist"] { -webkit-mask-image: url(../img/skyline-ist.svg); mask-image: url(../img/skyline-ist.svg); }
.skyline[data-city="znz"] { -webkit-mask-image: url(../img/skyline-znz.svg); mask-image: url(../img/skyline-znz.svg); }
.skyline[data-city="kyv"] { -webkit-mask-image: url(../img/skyline-kyv.svg); mask-image: url(../img/skyline-kyv.svg); }

/* Şehre yakınlaşınca ülkenin şeklinde medya (map.js): İstanbul'da video, diğerlerinde dönen proje görselleri; maske ülke yolu */
.map-media { position: absolute; top: 0; left: 0; z-index: 1; opacity: 0; overflow: hidden; pointer-events: none; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.map-media > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.map-markers { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.map-marker { all: unset; position: absolute; top: 0; left: 0; cursor: var(--cursor-pointer); pointer-events: auto; --pin: clamp(10px, 0.8vw, 16px); }
/* Parmakla da kolay basılsın: noktanın çevresinde görünmez dokunma alanı */
.map-marker::before { content: ""; position: absolute; inset: -18px; }
.map-marker:focus-visible .map-marker__pin { outline: 2px solid var(--accent); outline-offset: 6px; }
/* Pin: küçük parlayan çekirdek + ince dalga (::after); ülke şekli altında görünür kalsın */
.map-marker__pin {
  position: absolute; width: var(--pin); height: var(--pin); margin: calc(var(--pin) / -2) 0 0 calc(var(--pin) / -2); border-radius: 50%;
  background: radial-gradient(circle, #fff 0 30%, var(--accent) 38% 100%);
  box-shadow: 0 0 10px 2px rgba(var(--accent-rgb), 0.45); transition: box-shadow 0.3s;
}
.map-marker__pin::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1px solid var(--accent); animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse { from { transform: scale(1); opacity: 0.8; } to { transform: scale(2.4); opacity: 0; } }
.map-marker:hover .map-marker__pin { box-shadow: 0 0 16px 4px rgba(var(--accent-rgb), 0.6); }
.map-marker__label {
  position: absolute; left: calc(var(--pin) / 2 + 10px); top: -0.65em; white-space: nowrap; font-size: clamp(11px, 0.95vw, 24px); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--city); text-shadow: var(--city-shadow);
  transform-origin: left center; transition: color 0.8s ease, scale 0.6s ease; /* üzerine gelince yavaşça renklenir, %10 büyür */
}
/* .is-hover: ülke şeklinin üzerindeyken JS ekler */
.map-marker:hover .map-marker__label, .map-marker.is-hover .map-marker__label, .map-marker:focus-visible .map-marker__label { color: var(--city-hover); scale: 1.1; }
/* Kişinev dünya görünümünde adını sola yazar (Kiev ve İstanbul hemen üstünde/altında); yakınlaşınca sağa geçer */
.map-marker--left:not([aria-pressed="true"]) .map-marker__label { left: auto; right: calc(var(--pin) / 2 + 10px); transform-origin: right center; } /* noktaya doğru değil, dışa büyür */
.map-marker[aria-pressed="true"] .map-marker__pin { background: radial-gradient(circle, var(--accent) 0 24%, #fff 30% 100%); }

/* Sol orta: slogan + 30+ yıl (büyük değer + harf aralıklı etiket), düz yazı (hale yok); dikeyde sayfanın ortasında */
.map-intro {
  position: absolute; z-index: 2; left: var(--gutter); top: 0; bottom: 0; /* haritanın tam boyu: 30+ alttan silüete göre konumlanır */
  display: flex; flex-direction: column; justify-content: center; gap: clamp(12px, 1.1vw, 24px); margin: 0; padding: 40pt 0 6vh; list-style: none; pointer-events: none; /* padding: slogan ortanın biraz üstü, 20pt aşağıda (40pt / 2) */
  color: var(--red-ink);
  transition: opacity 1.4s ease 1s; /* dünyaya dönüşte kamera geri gelirken yavaşça belirir */
}
.map-intro strong { display: block; font-size: clamp(22px, 2.3vw, 52px); font-weight: 600; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; }
.map-intro span { display: block; margin-top: 5px; font-size: clamp(10px, 0.75vw, 16px); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; }
/* Slogan: her kelime ayrı satır, sola yaslı */
.map-intro .map-intro__motto { width: min-content; font-size: clamp(25px, 2.17vw, 48px); line-height: 1.45; letter-spacing: 0.04em; } /* iki katın %70'i (Özgür) */
/* 30+ akıştan çıkar: liste yalnız sloganla ortalanır (slogan dikeyde tam ortada), 30+ onun epey altında, sola yaslı */
.map-intro__years { position: absolute; left: 0; bottom: calc(var(--skyline-bottom) + max(32px, 88vw * 220 / var(--home-w)) + 2vh); width: max-content; } /* silüetin hemen üstü (ana sayfa silüet boyu) */
/* Kıtaya değerse map.js küçültür (--fit): sol kenar yerinde kalır; --intro-y açılışta aşağıdan gelme (map.js) */
.map-intro > li { --intro-y: 0px; transform-origin: left center; translate: 0 var(--intro-y); scale: var(--fit, 1); }
.map-intro__years span + strong { margin-top: clamp(12px, 1.1vw, 24px); } /* iki istatistik arası */
.map-intro .map-intro__years strong { font-size: clamp(18px, 1.6vw, 36px); } /* slogandan küçük */
.map-intro > .map-intro__years { transform-origin: left bottom; } /* küçülünce silüete doğru kaymasın */
.map-intro span span { display: inline; margin: 0; } /* "m² BUILT AREA": birim etiketin önünde, aynı satırda */
.map-intro .map-intro__unit { text-transform: none; font-size: 1.3em; } /* m küçük harf kalsın; m² etiketten bir tık büyük (Özgür) */
.map-intro sup { font-size: 0.9em; line-height: 0; vertical-align: 0.55em; } /* m² : küçük, yukarıda 2 (m ile birlikte büyüdü) */
/* Sağ orta: iletişim (slogan hizasında); tıklayınca altında ikonlar açılır, hepsi logo yeşili */
.map-contact {
  position: absolute; z-index: 2; right: var(--gutter); top: calc(50% - 3vh + 1.5cm); translate: 0 -50%; /* sloganın biraz altı */
  display: flex; flex-direction: column; align-items: flex-end; gap: clamp(10px, 1vw, 20px); color: var(--accent);
  /* Görünmez çevre: fare bu alanda gezinirken ikonlar açık kalır (padding hover alanını büyütür, negatif margin yerini korur) */
  --hover-pad: clamp(24px, 2.5vw, 56px); padding: var(--hover-pad); margin-right: calc(-1 * var(--hover-pad)); /* dikeyde translate -50% ortalıyor */
  transition: opacity 1.4s ease 1s, visibility 0s;
}
.map.has-selection .map-contact { opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 0s 1s; }
.map-contact__toggle { all: unset; cursor: var(--cursor-pointer); font-size: clamp(14.4px, 1.28vw, 28.8px); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; transition: font-size 0.6s ease; }
.map-contact.is-open .map-contact__toggle { font-size: clamp(11.52px, 1.024vw, 23.04px); } /* ikonlar açılınca %20 küçülür */
.map-contact__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.map-contact__links {
  display: flex; gap: clamp(12px, 1.1vw, 22px); margin: 0; padding: 0; list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s 0.6s; /* yavaş belirir / kaybolur */
}
.map-contact.is-open .map-contact__links { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.map-contact__links a { display: grid; place-items: center; color: inherit; transition: transform 0.2s, color 0.2s; }
.map-contact__links a:hover { transform: scale(1.12); color: var(--red-ink); } /* sitenin ikinci rengi */
.map-contact__links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.map-contact__links svg { width: clamp(22px, 1.6vw, 34px); height: auto; fill: currentColor; }
/* Ofis adresleri ikonların altında, sağa yaslı (konum ikonları sağ kenarda hizalı); ikonlardan biraz sonra açılır.
   Üstüne gelince yavaşça kırmızımsı marka rengine döner, tıklayınca Google Haritalar */
.map-contact__offices {
  display: grid; justify-items: end; gap: clamp(10px, 1vw, 18px); font-style: normal; text-align: right;
  opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s 0.6s;
}
.map-contact.is-open .map-contact__offices { opacity: 1; visibility: visible; transform: none; transition-delay: 0.15s, 0.15s, 0s; }
.map-contact__offices a { display: flex; align-items: flex-start; gap: 0.6em; color: inherit; text-decoration: none; font-size: clamp(11px, 0.78vw, 15px); line-height: 1.45; transition: color 0.8s ease; }
.map-contact__offices a:hover, .map-contact__offices a:focus-visible { color: var(--red-ink); }
.map-contact__offices strong { display: block; font-size: 0.78em; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.map-contact__offices svg { flex: none; width: 1.5em; height: auto; margin-top: 0.15em; fill: currentColor; }
.map.has-selection .map-intro { opacity: 0; transition: opacity 1s ease; }

/* Panel ve proje penceresi içindeki yazılar em: tek taban ölçüyle ekranla birlikte büyür */
.map-panel {
  position: absolute; z-index: 3; top: var(--header-h); right: 0; bottom: 0; width: min(var(--panel-w), 100%);
  padding: 1.75em var(--gutter) 2em 2em; overflow-y: auto; font-size: clamp(14px, 1vw, 19px);
  background: rgba(var(--bg-rgb), 0.92); backdrop-filter: blur(14px); border-left: 1px solid rgba(var(--accent-rgb), 0.2);
  transform: translateX(100%); visibility: hidden; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s 0.6s;
}
.map.has-selection .map-panel { transform: none; visibility: visible; transition-delay: 0s; }
/* Şimdilik kapalı (Özgür): şehre tıklanınca sağ panel açılmaz, ülke ortada kalır; projeler menüden */
.map-panel { display: none; }
.map-back { all: unset; cursor: var(--cursor-pointer); display: inline-flex; gap: 8px; margin-bottom: 1.6em; color: var(--accent); font-size: 0.75em; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.city h3 { color: var(--accent); margin: 0.3em 0 0.4em; font-size: 2.25em; font-weight: 300; }
.city h3 small { font-size: 0.36em; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.city > p:not(.kicker) { color: var(--muted); line-height: 1.7; }
.projects { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.9em; margin-top: 1.5em; }
.project button { all: unset; display: block; cursor: var(--cursor-pointer); }
.project img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: clamp(8px, 0.8vw, 14px); transition: filter 0.3s; }
.project button:hover img, .project button:focus-visible img { filter: brightness(1.08) saturate(1.1); }
.project button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: clamp(8px, 0.8vw, 14px); }
.project h4 { color: var(--accent); margin-top: 0.75em; font-size: 0.8em; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.project p { margin-top: 0.3em; font-size: 0.75em; line-height: 1.5; color: var(--muted); }

/* Proje sayfası (projects.js): haritayla aynı zemin, tek ekran. Logo ile silüet arasında görseller büyüklü küçüklü kutularda
   (7 parça); altta ana sayfa silüeti, seçili proje renkli (.is-selected) */
.project-page {
  position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--bg) var(--paper); background-blend-mode: multiply;
  --sk-inset: 12vw; --sk-bottom: max(4px, 0.35vw); /* silüet ana sayfadakinden küçük (genişlik 76vw), tabana çok yakın */
  --sk-h: max(32px, (100vw - 2 * var(--sk-inset)) * 220 / var(--home-w)); /* silüet boyu */
}
/* Derinlik (Özgür, 2026-10-22; beğenilmezse geri): görseller alta kadar iner, silüet onların önünde durur. Arkasında yalnız silüetin
   alanı kadar zemin renginde sis (kenarları ve üstü söner, arkadaki görselleri bulandırır), silüetin çevresinde ince hâle */
.project-page .map-skyline {
  z-index: 3; left: var(--sk-inset); right: var(--sk-inset); bottom: var(--sk-bottom);
  filter: drop-shadow(0 0 8px rgba(var(--bg-rgb), 0.7)) drop-shadow(0 3px 2px rgba(60, 30, 12, 0.3));
}
.project-page::after {
  content: ""; position: absolute; z-index: 2; left: var(--sk-inset); right: var(--sk-inset); bottom: 0; height: calc(var(--sk-h) + var(--sk-bottom)); pointer-events: none;
  background: rgba(var(--bg-rgb), 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); /* hafif sis */
  /* yanlar ve üst yumuşakça söner: sis silüetin kutusundan dışarı taşmaz */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to top, #000 55%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to top, #000 55%, transparent);
  mask-composite: intersect;
}
/* Yukarı (haritaya döner): imleçteki logo Λ tek başına, site zemin renginde (görselin üstünde okunsun diye hafif koyu gölge);
   hafifçe süzülür, üstüne gelince biraz büyür ve kırmızımsı olur. Proje sayfasında tepede ortada, görsellerin üstünde */
.project-head { position: absolute; z-index: 4; top: clamp(10px, 1vw, 20px); left: 50%; translate: -50% 0; } /* her açılışta yavaşça belirir (projects.js) */
.project-up {
  all: unset; display: grid; place-items: center; width: 26px; aspect-ratio: 1; color: var(--bg); cursor: var(--cursor-pointer); /* imleçle aynı boy (cursor.svg 26 px) */
  filter: drop-shadow(0 1px 3px rgba(40, 25, 10, 0.55)); transition: scale 0.3s, color 0.5s ease;
}
.project-up svg { width: 100%; height: auto; fill: currentColor; animation: up-bob 1.8s ease-in-out infinite; }
.project-up:hover, .project-up:focus-visible { scale: 1.18; color: var(--red-ink); }
@keyframes up-bob { 0%, 100% { transform: translateY(10%); } 50% { transform: translateY(-10%); } }
/* Silüetteki binalar da silüetle birlikte ortadan iki yana açılır (--open, projects.js); yukarı taşan pay haritadakiyle aynı */
.project-page .skyline-photo { cursor: var(--cursor-pointer); } /* proje sayfasında el (ana sayfada aşağı Λ) */
.project-page .skyline-photos { clip-path: inset(-50vh calc(50% - var(--open, 1) * 50%) 0); }
.project-collage {
  position: absolute; inset: 0 0 auto; /* üst, sağ ve sol kenara kadar */
  bottom: 0; /* alta kadar: silüet ve sis önünde */
  display: grid; gap: clamp(6px, 0.7vw, 14px);
}
/* Referans düzen (Özgür, 2026-10-22): ekran hep 7 parça, üç eşit sütun: solda ve sağda ikişer, ortada üç görsel.
   Okuma sırası a, b, c… (döngüde görsel bir sonrakine kayar) */
.project-collage { grid-template: "a b c" 1fr "a b c" 1fr "a d c" 1fr "e d g" 1fr "e f g" 1fr "e f g" 1fr / 1fr 1fr 1fr; }
.project-slot { position: relative; overflow: hidden; cursor: var(--cursor-pointer); } /* köşeler keskin (referans); tıklayınca tam ekran */
.project-slot:nth-child(2) { grid-area: b; }
.project-slot:nth-child(3) { grid-area: c; }
.project-slot:nth-child(4) { grid-area: d; }
.project-slot:nth-child(5) { grid-area: e; }
.project-slot:nth-child(6) { grid-area: f; }
.project-slot:nth-child(7) { grid-area: g; }
.project-slot:first-child { grid-area: a; }
.project-slot > img, .photo-frame > img, .project-shards { position: absolute; inset: 0; width: 100%; height: 100%; }
.project-slot > img, .photo-frame > img { object-fit: cover; }
/* Bilgi alanı açan kutu (sağ alt, projects.js markInfoSlot): sağ alt köşede tek başına "i", site zemin renginde, Λ ile aynı boyda
   (hafif koyu gölge); kutunun üstüne gelince yavaşça kırmızımsı olur. Üçgenlerin üstünde kalır */
.project-slot.has-info::after {
  content: "i"; position: absolute; z-index: 2; bottom: clamp(8px, 0.8vw, 14px); right: clamp(8px, 0.8vw, 14px); pointer-events: none;
  color: var(--bg); font-size: 28px; font-weight: 700; line-height: 1; text-shadow: 0 1px 3px rgba(40, 25, 10, 0.55); /* Λ / imleç yüksekliği (~20 px) */
  transition: color 0.5s ease;
}
.project-slot.has-info:hover::after { color: var(--red-ink); }
/* Geçiş: üçgenler kendi yerinde döner; dağılırken söner, gelirken (is-breaking kalkınca) toplanır. Gecikme başlangıç noktasına uzaklıkla (--d) */
.project-shards i {
  position: absolute; background-repeat: no-repeat;
  transition: transform 0.9s cubic-bezier(0.45, 0.05, 0.3, 1) var(--d), opacity 0.9s ease var(--d);
}
.project-shards.is-breaking i { transform: perspective(700px) rotate3d(var(--axis), 110deg); opacity: 0; }

/* Tek görsel tam ekran (projects.js view): ekranı kaplar, kenarlar kırpılır; arkası karartılmaz (blur açılıp kapanmayı yavaşlatıyordu);
   herhangi bir yere tıklayınca kapanır */
.photo-view { --info-w: 20%; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: none; overflow: hidden; }
.photo-view:focus { outline: none; } /* açılınca odak pencerede: tarayıcının mavi çerçevesi görünmesin */
.photo-view::backdrop { background: none; }
/* Görsel tam ekran; imleç sola dönük Λ: herhangi bir yere tıklama projeye döner (kapatır) */
.photo-frame { position: absolute; inset: 0; overflow: hidden; }
.photo-view { cursor: var(--cursor-left); }
.photo-view.is-tall { --info-k: 1.6; } /* dikey görsel: bilgi alanı %60 daha geniş (Özgür) */
/* Bilgi alanı (yalnız sağ alttaki kutunun görseli büyütülünce, projects.js): görselin sağında yukarıdan aşağı, genişliğin %20'si;
   görsel toplanınca belirir, kapanırken çizgiyle birlikte söner */
.photo-info {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(var(--info-w) * var(--info-k, 1), 60%); overflow-y: auto; scrollbar-width: none;
  padding: clamp(16px, 1.6vw, 32px) clamp(12px, 1.2vw, 24px);
  isolation: isolate; border-left: 1px solid rgba(var(--accent-rgb), 0.25); color: var(--ink); font-size: clamp(11px, 0.78vw, 15px);
  opacity: 0; visibility: hidden; clip-path: inset(0 0 0 100%); transition: opacity 0.4s ease, clip-path 0.4s ease, visibility 0s 0.4s;
}
/* Zemin ana sayfanınki (renk × suluboya kâğıdı), biraz saydam; doku ekrana sabit: arkadaki sayfanın dokusuyla hizalı, kutuya göre büyümez.
   Ayrı katmanda: saydamlık yazıları soldurmasın */
.photo-info::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.88;
  background: var(--bg) url(../img/paper.webp) center / cover fixed; background-blend-mode: multiply;
}
/* Yavaş açılış: zemin sağ kenardan sola açılarak belirir, yazılar ardından sırayla yukarı kayarak gelir */
.photo-view.has-info:not(.is-closing) .photo-info {
  opacity: 1; visibility: visible; clip-path: inset(0);
  transition: opacity 1.4s ease 0.9s, clip-path 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.9s, visibility 0s 0.9s;
}
.photo-info > * { opacity: 0; translate: 0 10px; transition: opacity 0.3s ease, translate 0.3s ease; }
.photo-view.has-info:not(.is-closing) .photo-info > * { opacity: 1; translate: 0; transition: opacity 0.9s ease var(--in), translate 0.9s ease var(--in); }
.photo-info > :nth-child(1) { --in: 1.6s; }
.photo-info > :nth-child(2) { --in: 1.85s; }
.photo-info > :nth-child(3) { --in: 2.1s; }
.photo-info > :nth-child(4) { --in: 2.35s; }
.photo-info .kicker { font-size: 0.72em; letter-spacing: 0.2em; }
.photo-info h3 { margin: 0.5em 0 0.3em; color: var(--accent); font-size: 1.4em; font-weight: 600; letter-spacing: 0.04em; line-height: 1.25; }
.photo-info__sub { color: var(--muted); font-size: 0.85em; line-height: 1.5; }
.photo-info dl { margin-top: 1.1em; padding-top: 0.4em; border-top: 1px solid rgba(var(--accent-rgb), 0.25); }
.photo-info dt { margin-top: 0.9em; color: var(--muted); font-size: 0.7em; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.photo-info dd { margin: 0.2em 0 0; line-height: 1.4; }

/* Harita yüklenemezse şehir butonları düz liste olarak kalır */
.map.is-fallback .map-markers { display: flex; align-items: flex-end; justify-content: center; gap: 40px; padding-bottom: 20vh; }
.map.is-fallback .map-marker { position: relative; transform: none !important; padding-left: 24px; }

/* Kırılımlar
   Dik telefon / tablet: panel alttan açılır, silüet tam genişlik, istatistikler altta yan yana.
   Yan telefon (alçak ekran): ince başlık, istatistikler altta yan yana, küçük resimler küçük. */
@media (max-width: 899px) and (orientation: portrait) {
  .map-panel {
    top: auto; left: 0; width: auto; max-height: 62%; border-left: 0; border-top: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 18px 18px 0 0; padding: 1.4em var(--gutter) 1.75em; transform: translateY(100%);
  }
  /* Dik ekranda iki sütun, kutular basamaklı (referansın dar hâli) */
  .project-collage { grid-template: "a b" 1fr "a c" 1fr "d e" 1fr "f e" 1fr "f g" 1fr / 1fr 1fr; }
  .photo-view { --info-w: 45%; } /* dar ekranda %20 okunmuyor */
}

@media (max-width: 899px) and (orientation: portrait) {
  .map-contact { top: calc(var(--header-h) + 2vh); translate: none; margin-top: calc(-1 * var(--hover-pad)); } /* alt kısım slogan + istatistiklerle dolu */
  .map-intro {
    top: auto; translate: none; right: var(--gutter); bottom: calc(max(70px, 6.2vw) + var(--skyline-bottom) + 14px); padding: 0;
    flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 12px;
  }
  .map-skyline.is-city { left: var(--skyline-inset); right: var(--skyline-inset); }
  .map-intro__years { position: static; }
  .map-intro > .map-intro__years { transform-origin: right bottom; }
  .map-intro .map-intro__motto { font-size: 22px; }
  .map-intro > li:first-child { transform-origin: left bottom; }
}

@media (max-height: 560px) {
  .map-contact { top: calc(var(--header-h) + 3vh); translate: none; margin-top: calc(-1 * var(--hover-pad)); }
  :root { --header-h: 52px; }
  /* Yan ekranda harita ortada, solu boş: istatistikler orada, başlığın hemen altında, küçük */
  .map-intro { top: calc(var(--header-h) + 3vh); bottom: auto; padding: 0; gap: 10px; }
  .map-intro__years { position: static; }
  .map-intro strong { font-size: 20px; }
  .map-intro .map-intro__motto { font-size: 20px; }
  .map-intro span { font-size: 9px; letter-spacing: 0.16em; }
  .brand img { width: clamp(140px, 18vw, 220px); }
}

@media (prefers-reduced-motion: reduce) {
  .map-marker__pin::after, .map-rose img { animation: none; }
  .photo-info, .photo-info > * { transition: none; }
  .project-up svg { animation: none; }
}