/* Acar 33 Gayrimenkul — demo sitesi
   Elle yazilir (kur.py yalniz HTML uretir, bkz README niyetindeki kur.py docstring'i).
   Iki tema: acik kabuk (index) + koyu mulk sayfasi (mulk/*.html), tek dosyada.
   Gecis sureleri/egrileri T02'den birebir (inbox/T02-REFERANS-CSS-SOKUM.md SS4). */

/* ---------------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--odak); outline-offset: 2px; }

/* ---------------------------------------------------------------------- tokens */
:root {
  /* acik kabuk — bej/kum, Antalya gunesi */
  --kum: #F5EFE2;
  --kum-koyu: #EAE0C9;
  --murekkep: #211D17;
  --murekkep-soft: #6E6252;
  --toprak: #BD4B1E;      /* ACAR 33 rozetinin turuncusuyla akraba vurgu */
  --toprak-koyu: #8F3714; /* D6 -- kucuk metinde acik zemin (kum) uzerinde, kontrast >=4.5 */
  --toprak-acik: #DD5E2C; /* D6 -- kucuk metinde koyu zemin (gece) uzerinde, kontrast >=4.5 */
  --cizgi: rgba(33, 29, 23, 0.14);
  --odak: #BD4B1E;

  /* koyu mulk sayfasi — 130william 0.17 parlaklik referansi */
  --gece: #16130F;
  --gece-panel: #201A13;
  --kagit: #F3EEE2;
  --kagit-soft: rgba(243, 238, 226, 0.64);
  --cizgi-koyu: rgba(243, 238, 226, 0.16);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "URW Palladio L", P052, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --kucuk-ui: 400ms cubic-bezier(0.785, 0.135, 0.15, 0.86);   /* fransilvestre */
  --gecis-genel: 400ms cubic-bezier(0.39, 0.575, 0.565, 1);   /* 130william */
  --hover-kart: 300ms cubic-bezier(0.57, 0.21, 0.69, 1);       /* fransilvestre, canli olculdu */
  --reveal: 2000ms cubic-bezier(0.19, 1, 0.22, 1);             /* casangelina */

  --radius: 0;
}

body { font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.sayfa--acik { background: var(--kum); color: var(--murekkep); }
.sayfa--koyu { background: var(--gece); color: var(--kagit); }

/* ---------------------------------------------------------------------- ust menu */
.menu {
  position: absolute; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem clamp(1.25rem, 4vw, 3rem);
}
.sayfa--koyu .menu { position: sticky; top: 0; background: linear-gradient(180deg, var(--gece) 0%, rgba(22,19,15,0.88) 70%, transparent 100%); }
/* Marka = Acar'in KENDI rozeti (2026-08-29). Kaynak 212x104 NATIVE (Operatorun getirdigi
   240x153 karenin olculmus levha kirpimi). Gorunen genislik BILEREK kucuk: 88px'te DPR2
   cihaz 176 fiziksel px ister, elimizde 212 var -- yani rozet DPR2'ye kadar hicbir yerde
   BUYUTULMUYOR. 106px iletisimde tavan; daha buyugu icin Acar'dan yuksek cozunurluklu
   logo gerekir (KOKEN.md sarti).
   Levha (siyah zemin) logonun kendi parcasi, SILINMEDI: knockout denendi, beyaz "ACAR"
   krem (--kum) zeminde kayboluyor -- olculdu, bkz KOKEN.md. */
.menu__marka { display: flex; align-items: center; }
.menu__rozet { width: 88px; height: auto; }
/* Forge duzeltmesi (D9): ana sayfada menu HERO'nun USTUNDE duruyor ve hero'da 3 kare doniyor --
   arkasindaki tonu garanti edemeyiz. Olculdu: mobilde marka acik gokyuzunun ustune dusuyor ve
   okunmuyor (koyu murekkep / parlak gok). Cozum: menu seridine ince ust perde + acik metin.
   Bu, PB-emlak §11'in yasakladigi "koyu perde + dev baslik + buton" jenerik acilis imzasi DEGIL;
   perde hero'yu ortmuyor, yalnizca menu seridinin arkasini okunur kiliyor. Hero'da hala yazi yok. */
.sayfa--acik .menu::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 190%;
  background: linear-gradient(180deg, rgba(12,10,8,0.84), rgba(12,10,8,0.40) 58%, transparent);
  pointer-events: none; z-index: -1;
}
.menu__linkler { display: flex; gap: clamp(1rem, 2.4vw, 2rem); }
.menu__linkler a {
  font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  transition: color var(--kucuk-ui);
}
.sayfa--acik .menu__linkler a { color: var(--kagit); }
.sayfa--acik .menu__linkler a:hover { color: var(--kagit); }
.sayfa--koyu .menu__linkler a { color: var(--kagit-soft); }
.sayfa--koyu .menu__linkler a:hover { color: var(--kagit); }
.menu__hizli { display: none; gap: 0.6rem; }
.menu__wa, .menu__tel, .menu__ig {
  width: 2.15rem; height: 2.15rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--toprak); color: #fff; transition: background var(--kucuk-ui);
}
.menu__wa:hover, .menu__tel:hover, .menu__ig:hover { background: var(--toprak-koyu); }

/* ---------------------------------------------------------------------- hero */
/* 2026-08-29 (D-042): hero = STOK bolge filmi. Eski 3 kareli CSS donusu (heroCycle,
   .hero__kare, D4/D8 notlari) SILINDI -- olu kural birakilmadi.
   Katman sirasi: POSTER altta (ilk boyanan, LCP adayi), VIDEO ustunde ve baslangicta
   opacity:0. main.js video gercekten oynamaya baslayinca .hero__video--acik ekliyor;
   yani video yuklenene kadar hicbir bosluk gorunmuyor, gecis de sicramiyor. */
.hero { position: relative; height: 92vh; min-height: 420px; max-height: 980px; overflow: hidden; background: var(--murekkep); }
.hero__katman { position: absolute; inset: 0; }
.hero__poster, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__poster img { width: 100%; height: 100%; object-fit: cover; }
.hero__video { object-fit: cover; opacity: 0; transition: opacity 900ms var(--gecis-genel); }
.hero__video--acik { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }   /* main.js zaten yuklemiyor; bu ikinci kapi */
}

/* ---------------------------------------------------------------------- sakin bant */
.bant { padding: 1.4rem clamp(1.25rem, 4vw, 3rem); border-bottom: 1px solid var(--cizgi); }
.bant__satir {
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--murekkep-soft);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; text-align: center;
}
.bant__ayrac { color: var(--toprak-koyu); }  /* D6 -- var(--toprak) kum uzerinde 4,375, esik 4,5 */

/* ---------------------------------------------------------------------- bolum genel */
.bolum { padding: clamp(3rem, 7vw, 5.5rem) clamp(1.25rem, 4vw, 3rem); }
.bolum__on {
  font-size: 0.82rem; letter-spacing: 0.16em; font-weight: 700; color: var(--toprak-koyu);
  margin-bottom: 1.4rem; text-align: center;
}
.dev-kelime {
  font-family: var(--serif); font-weight: 600; text-align: center;
  font-size: clamp(2.75rem, 13vw, 8.25rem); letter-spacing: 0.015em;
  margin: 0 0 2.2rem; line-height: 1;
}
.sayfa--acik .dev-kelime { color: var(--murekkep); }

/* ---------------------------------------------------------------------- filtre pilleri */
.pil-satir { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-bottom: 2rem; }
.pil {
  padding: 0.5rem 1.1rem; border: 1px solid var(--cizgi); font-size: 0.82rem; letter-spacing: 0.1em;
  font-weight: 600; color: var(--murekkep-soft); transition: background var(--kucuk-ui), color var(--kucuk-ui), border-color var(--kucuk-ui);
}
.pil:hover { border-color: var(--toprak); color: var(--toprak-koyu); }
.pil--aktif { background: var(--toprak); color: #fff; border-color: var(--toprak); }

/* ---------------------------------------------------------------------- mozaik */
.mozaik {
  display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 148px; gap: 0.7rem;
  grid-auto-flow: dense;
}
.kart { position: relative; display: block; overflow: hidden; border-radius: var(--radius); }
.kart--m { grid-column: span 1; grid-row: span 1; }
.kart--l { grid-column: span 1; grid-row: span 2; }
.kart--xl { grid-column: span 2; grid-row: span 2; }
/* Forge duzeltmesi (P6): filtre uygulaninca elde az kart kaliyor; karisik span'lar +
   grid-auto-flow:dense birlikte altta 400px'lik delikler biraktiriyordu. Filtreli durumda
   butun karolar esit boya gelir, izgara sikisir. */
.kart--extra { display: none; }
.kart--extra.kart--tipo { display: none; }
.mozaik--acik .kart--extra.kart--foto { display: block; }
.mozaik--acik .kart--extra.kart--tipo { display: flex; }
.kart--gizli { display: none !important; }
/* Forge (P8, ss2): mozaik 21 karttan 8'e indi. Degisken karo boylari (m/l/xl) + dense akis
   21 kartta zengin duruyordu; 8 kartta son satirlarda 2 buyuk DELIK biraktiriyor (Operator
   kirmizi ile isaretledi). Malzeme degisti, form onu izler (PB-emlak §8): foto mozaigi artik
   ESIT izgara -- 8 kart, genis ekranda 4 sutun x 2 satir, dar ekranda 2 x 4. Ikisi de 8'i
   tam boler, delik matematiksel olarak imkansiz. Kapatici karoya da gerek kalmadi. */
.kart--doldur {
  background: none; border: none;
  grid-column: -2 / -1; grid-row: span 2;
  /* Forge duzeltmesi (D2-c): zemin+cerceve ile bu karo "eksik kart" gibi okunuyordu --
     kapatmaya calistigi delikten daha kotuydu. Artik gorunmez bir izgara dolgusu. */
}
/* D2 -- ızgaranın alt kenarını kapat: son sutuna kilitli, dense akisin bosalttigi son satiri
   dolduran sessiz karo. Filtre uygulaninca (data-tip yok) diger kartlar gibi gizlenir. */
.kart--foto { background: var(--murekkep); }
.kart--foto picture { position: absolute; inset: 0; }
.kart--foto img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--hover-kart); }
.kart--foto:hover img { transform: scale(1.05); }
.kart__golge { position: absolute; inset: auto 0 0 0; height: 62%; background: linear-gradient(180deg, transparent, rgba(10,8,5,0.82)); pointer-events: none; }
.kart__rozetler { position: absolute; top: 0.6rem; left: 0.6rem; display: flex; gap: 0.35rem; z-index: 2; }
.karo__rozet {
  font-size: 0.82rem; letter-spacing: 0.05em; font-weight: 700; padding: 0.28rem 0.5rem;
  background: rgba(245,239,226,0.92); color: var(--murekkep);
}
.karo__rozet--acik { background: var(--toprak); color: #fff; }
.kart--foto .karo__rozet { background: rgba(245,239,226,0.92); color: var(--murekkep); }
.kart__etiket {
  position: absolute; bottom: 0.7rem; left: 0.7rem; right: 0.7rem; z-index: 2;
  color: #fff; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em;
}
.kart--tipo {
  background: var(--kum-koyu); border: 1px solid var(--cizgi); padding: 0.9rem;
  display: flex; flex-direction: column; justify-content: center; gap: 0.2rem;
  /* D2 -- eskiden flex-end: l/xl karolarda (110/63/55 m² gibi cok fotografli ama kapaksiz
     ilanlarda) icerik dibe yaslaniyor, ustte buyuk bos alan kaliyordu. Foto karosuyla esit
     agirlik icin dikeyde dengelendi. */
}
.tipo__m2 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1.05; color: var(--murekkep); }
.tipo__konum { font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--murekkep-soft); }
.tipo__fiyat { font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.03em; color: var(--toprak-koyu); margin-top: 0.15rem; }
.kart--tipo { position: relative; padding: 2.7rem 0.9rem 0.9rem; }
.kart--tipo .kart__rozetler { position: absolute; top: 0.6rem; left: 0.6rem; margin-bottom: 0; }
/* Forge duzeltmesi (D2-b): rozetlerdeki margin-bottom:auto tum serbest alani yutup icerigi
   yine dibe itiyordu -- justify-content:center etkisizdi. Rozet foto karosundaki gibi mutlak
   konumlandi (ayni yer, ayni his), kalan icerik gercekten dikeyde ortalandi. Ust padding
   rozet satirina yer birakiyor ki kucuk karolarda cakismasin. */

.devami {
  display: block; margin: 1.6rem auto 0; padding: 0.65rem 1.6rem; border: 1px solid var(--cizgi);
  font-size: 0.82rem; letter-spacing: 0.1em; font-weight: 700; color: var(--murekkep-soft);
}
.devami:hover { border-color: var(--toprak); color: var(--toprak-koyu); }

/* ---------------------------------------------------------------------- indeks (tum portfoy) */
/* Forge (P7): 21 ilanin tamami tipografik satir olarak. Mozaik yalnizca fotografli 8 ilani
   tasiyor; burasi envanterin kendisi -- omurga bu (D-028: kanit iddia degil envanterdir). */
.indeks { display: flex; flex-direction: column; border-top: 1px solid var(--cizgi); }
.indeks__satir {
  display: grid; grid-template-columns: 8.5rem 11rem 1fr 11rem 9rem;
  align-items: baseline; gap: 1rem; padding: 0.85rem 0.4rem;
  border-bottom: 1px solid var(--cizgi); color: var(--murekkep);
  transition: background var(--kucuk-ui), padding-left var(--kucuk-ui);
}
.indeks__satir:hover { background: var(--kum-koyu); padding-left: 1rem; }
.indeks__tip { font-size: 0.79rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--toprak-koyu); }
.indeks__olcu { font-family: var(--serif); font-size: 1.05rem; }
.indeks__yer { font-size: 0.86rem; letter-spacing: 0.06em; color: var(--murekkep-soft); }
.indeks__fiyat { font-family: var(--mono); font-size: 0.86rem; text-align: right; }
.indeks__tarih { font-family: var(--mono); font-size: 0.79rem; text-align: right; color: var(--murekkep-soft); }
.indeks__satir--gizli { display: none; }
/* Indeks satirinin dar-ekran duzeni. Esik 760 -> 820 (Forge 2026-08-28, OLCULDU).
   Satir sabit sutunlu: 8,5+11+11+9rem = 39,5rem (632px) + 4x1rem bosluk = 696px, ustune
   bolum ic bosluklari. 760-820 arasinda bu genislik viewport'a sigmiyordu ve `.indeks__tarih`
   sagdan tasiyordu: olculdu 761px'te 51px, 780'de 33px, 800'de 14px, 830'da 0.
   Bu ARALIK HIC OLCULMEMISTI -- onceki turlarda yalniz 1894/1440/iPhone bakilmisti; tablet
   genisligi kimsenin ekraninda denenmedigi icin taskin sessizce duruyordu. */
@media (max-width: 820px) {
  /* mobilde 5 sutun tasar -- iki satirlik kompakt duzen, tarih dusurulur (P7 mobil) */
  .indeks__satir { grid-template-columns: 1fr auto; gap: 0.15rem 0.8rem; padding: 0.8rem 0.2rem; }
  .indeks__tip { grid-column: 1; }
  .indeks__fiyat { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 0.92rem; }
  .indeks__olcu { grid-column: 1; }
  .indeks__yer { grid-column: 1; }
  .indeks__tarih { display: none; }
}

/* ---------------------------------------------------------------------- ledger (imza unsuru) */
.ledger { display: flex; flex-direction: column; gap: 0.45rem; }
/* D10 (Forge) -- ilk denemem `.mulk-tipo .ledger`'i hedefliyordu ama ledger `.mulk-govde`
   icinde, `.mulk-tipo` icinde DEGIL: kural hic uygulanmadi ve ben uygulandigini varsayip
   ekran goruntusune bakmadan gonderdim. Dogru secici asagida, `.ledger--mulk`. */
.ledger__satir {
  display: flex; justify-content: space-between; gap: 1rem; font-family: var(--mono); font-size: 0.82rem;
  padding-bottom: 0.45rem; border-bottom: 1px solid var(--cizgi);
}
.sayfa--koyu .ledger__satir { border-bottom-color: var(--cizgi-koyu); }
.ledger__k { letter-spacing: 0.08em; color: var(--murekkep-soft); }
.sayfa--koyu .ledger__k { color: var(--kagit-soft); }
.ledger__v { text-align: right; font-weight: 600; }
.ledger--kucuk .ledger__satir { font-size: 0.82rem; }
.ledger--iletisim { max-width: 26rem; margin: 1.6rem 0 2rem; }
.ledger--iletisim a:hover { color: var(--toprak-koyu); }
/* MULK KUNYESI = IZGARA (Operator, 2026-08-28: "asagi dogru uzun bir liste gibi olmasin,
   orasi da yazilardan sik bir grid olsun"). Gerekce olculu: detay hasadi bir daire ilaninda
   ~20 alan getiriyor (Kat Sayisi · Isitma · Banyo · Mutfak · Balkon · Asansor · Otopark ·
   Esyali · Kullanim Durumu · Site Icerisinde · EKB · Tapu Durumu ...). Bunlar tek sutunda
   alt alta dizilse kunye tek basina bir ekrandan uzun olur ve okunmaz.
   Hucre duzeni: etiket USTTE (kucuk, harf araligi genis, soluk), deger ALTTA (buyuk, net).
   Yan yana etiket/deger dar sutunda kirilirdi; ustuste dizilim dar sutuna dayanikli.
   `auto-fill + minmax` sabit sutun sayisi yazmaz: genis ekranda 4, tablette 3, telefonda 2,
   cok dar ekranda 1 sutun. Alan sayisi ilana gore degistigi icin bu sart -- Arsa 8 satir,
   daire 20 satir gosteriyor ve ikisi de ayni kuralla duzgun oturuyor. */
.ledger--mulk {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0 clamp(1rem, 2.4vw, 2.25rem); max-width: 62rem; margin-inline: auto;
}
.ledger--mulk .ledger__satir {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  gap: 0.28rem; padding: 0.7rem 0 0.55rem;
  /* `justify-content: flex-start` sart: izgara hucreyi bandin EN UZUN hucresi kadar geriyor
     (orn. "Altinkale Yasam Evleri" iki satira sariyor) ve gerilen bosluk etiket ile degerin
     ARASINA dagiliyordu -- o bantta aralik gorunur sekilde aciliyordu. Simdi ikisi tepeye
     yaslaniyor, fazla bosluk altta kaliyor; alt cizgiler zaten hizali kaliyor. */
}
.ledger--mulk .ledger__k { font-size: 0.79rem; }   /* 12,64px -- 0,72rem (11,52px) self-check tabanini deldi */
.ledger--mulk .ledger__v { text-align: left; font-size: 0.9rem; font-weight: 600; }

/* 2026-08-29 (D-047): `.kat-izgara/.kat-kart*` blogu SILINDI -- `kategori_bolum_html`
   P2'den beri cagrilmiyordu, kural olu duruyordu. Villa/Daire/Is Yeri bolumleri
   `.serit` kullaniyor. Ayni temizlikte `.arsa-*` ve `.dyg-*` de gitti (ARSA artik serit). */

/* ---------------------------------------------------------------------- mahalle */
/* Mahalle kartlari IZGARA (Operator, 2026-08-28: "harita bolumu cok uzun, sagi grid yapalim").
   Olculdu (1862px): tek sutunda 6 kart alt alta = 1336px yuksek; harita kutusu da izgaraya
   gerildigi icin 644x1411 oluyordu ve bolum 1629px'e cikiyordu -- iki ekrandan uzun.
   `auto-fill + minmax` sabit sutun sayisi YAZMAZ: yer varsa 2 (hatta 3) sutuna gecer, dar
   ekranda kendiliginden tek sutuna doner. Boylece kart sayisi degisirse (mahalle eklenirse)
   duzen kendini toplar -- elle sutun sayisi bakimi gerekmez. */
.mahalle-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 1rem; align-content: start; }
.mahalle-blok { position: relative; padding: 1rem; border: 1px solid var(--cizgi); transition: border-color var(--kucuk-ui), box-shadow var(--kucuk-ui); }
/* Arka planı KOYULAŞTIRMAZ (kum-koyu üstünde murekkep-soft 4,53 çıkıyordu -- eşik 4,5'e çok
   yakın, ölçülünce yakalandı). Vurgu yalnız kenarlık + gölge ile verilir -- metin rengi/zemini
   hiç değişmediği için kontrast aynı kalır (5,19; bkz. varsayılan --kum zemin). */
.mahalle-blok:hover, .mahalle-blok:focus-within, .mahalle-blok.vurgu { border-color: var(--toprak); box-shadow: 0 2px 12px rgba(189, 75, 30, 0.16); }
/* Kartin tamami tiklanabilir olmali (T07) ama baslik <h3> -- <button> icine gecersiz
   (h3 phrasing content degil). Cozum: gorunmez, tam-kapli buton kapak; ustundeki metin
   normal akista okunur kalir, tiklama/klavye odagi kapaktan gelir. */
.mahalle-blok__tikla { position: absolute; inset: 0; z-index: 1; }
.mahalle-blok__ad { font-family: var(--serif); font-size: 1.6rem; margin-bottom: 0.3rem; }
.mahalle-blok__tay { font-size: 0.82rem; color: var(--murekkep-soft); margin-bottom: 0.9rem; }

/* ---- bölge haritası (Leaflet, perde arkasında -- T07, Ayşe Yüksel sitesinden PORT edildi).
   ODbL + CARTO künyesi zorunlu ve kaldırılamaz (bkz. main.js bölgeHaritasi() yorumu). */
.harita-duzen {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem); max-width: 74rem; margin: 0 auto;
}
.harita-kutu { position: relative; min-height: 32rem; background: var(--kum-koyu); overflow: hidden; }
#harita { position: absolute; inset: 0; z-index: 1; }
/* Karo tonu (Forge 2026-08-27). Karo kaynagi CARTO'nun soluk `light_all` katmanindan resmi OSM
   karolarina cevrildi (CARTO artik anahtar istiyor, karonun UZERINE "API KEY REQUIRED" filigrani
   basiyor -- bkz. main.js). OSM'in kendi stili bu sayfanin kum/bej paletine gore fazla doygun;
   doygunlugu kirip hafif isitiyoruz. YALNIZ goruntu katmani filtrelenir: ignelere, balona ve
   kunyeye dokunulmaz (onlar .leaflet-marker-pane / .leaflet-popup-pane / kontrol katmanlarinda). */
.leaflet-tile-pane { filter: saturate(0.42) contrast(0.94) brightness(1.04) sepia(0.12); }
@media (prefers-contrast: more) { .leaflet-tile-pane { filter: none; } }
.harita-perde {
  position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; text-align: center;
  background: var(--kum-koyu); padding: clamp(1.25rem, 4vw, 3rem);
}
.harita-kutu.acik .harita-perde { display: none; }
.harita-perde h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.3rem, 2.6vw, 1.7rem); letter-spacing: 0.04em; margin: 0 0 0.8rem; color: var(--murekkep); }
.harita-perde p { font-size: 0.9rem; color: var(--murekkep); max-width: 30ch; margin: 0 auto 1.4rem; line-height: 1.5; }
.harita-js { margin: 1rem 0 0 !important; font-size: 0.82rem; }
.harita-ac-dugme {
  padding: 0.8rem 1.6rem; border: 1px solid var(--murekkep); font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.1em; color: var(--murekkep); transition: background var(--kucuk-ui), color var(--kucuk-ui), border-color var(--kucuk-ui);
}
.harita-ac-dugme:hover { background: var(--toprak); border-color: var(--toprak); color: #fff; }
.harita-ipucu {
  position: absolute; z-index: 10; left: 50%; bottom: 1rem; transform: translateX(-50%); margin: 0;
  background: rgba(33, 29, 23, 0.86); color: #fff; font-size: 0.82rem; letter-spacing: 0.06em;
  padding: 0.5rem 0.9rem; pointer-events: none; opacity: 0; white-space: nowrap;
}
.harita-kutu.ipucu-ac .harita-ipucu { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .harita-ipucu { transition: opacity 0.3s; } }
.harita-uyari {
  position: absolute; z-index: 15; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0;
  max-width: 30ch; text-align: center; background: rgba(33, 29, 23, 0.92); color: #fff;
  font-size: 0.86rem; line-height: 1.5; padding: 1.1rem 1.3rem;
}
/* iğne */
.igne { position: relative; width: 28px; height: 38px; }
.igne svg { display: block; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.3)); }
.igne span { position: absolute; top: 5px; left: 0; right: 0; text-align: center; color: #fff; font: 700 0.79rem/1 var(--sans); }
/* !important gerekli: Leaflet marker konumunu AYNI elemanin inline style.transform'una
   yazar (translate3d) -- inline stil, !important olmayan sinif kuralindan her zaman kazanir. */
.leaflet-marker-icon.vurgu { transform: scale(1.18) !important; z-index: 1000 !important; }
@media (prefers-reduced-motion: no-preference) { .leaflet-marker-icon { transition: transform 0.18s ease; } }
/* leaflet kabuğu -- sitenin diliyle */
/* leaflet.css'in kendi "general typography" kurali 12px taban veriyor (self-check yalniz
   style.css'i tarar, vendor'i degil) -- olcerek yakalandi: attribution 12px cikiyordu,
   esik 12,5px. !important sart: leaflet.css HTML'e SONRADAN eklenir (yalniz butona basilinca,
   kaynakYukle), yani belge sirasinda BIZDEN SONRA gelir -- ayni ozgullukte SON kural kazanir. */
.leaflet-container { background: var(--kum-koyu); font-family: var(--sans); font-size: 0.82rem !important; }
.leaflet-control-zoom { border: none !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14) !important; }
.leaflet-control-zoom a {
  width: 2.4rem !important; height: 2.4rem !important; line-height: 2.3rem !important;
  background: #fff !important; color: var(--murekkep) !important; border: none !important;
  border-bottom: 1px solid var(--cizgi) !important; font-size: 1.2rem !important; font-weight: 400;
}
.leaflet-control-zoom a:hover { background: var(--kum) !important; }
/* !important asagida da sart -- ayni ozgullukte (tek sinif) leaflet.css'in kendi
   varsayilanlari (yuvarlak kose, beyaz zemin, koyu golge) SONRADAN yuklenip kazanirdi. */
.leaflet-popup-content-wrapper { border-radius: 0 !important; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.2) !important; }
.leaflet-popup-content { margin: 1rem 1.2rem !important; font-family: var(--sans); }
.leaflet-popup-tip { box-shadow: none !important; }
.harita-balon b { display: block; font-family: var(--serif); font-weight: 600; font-size: 1rem; margin-bottom: 0.3rem; color: var(--murekkep); }
.harita-balon > span { display: block; font-size: 0.82rem; color: var(--murekkep-soft); line-height: 1.5; }
.balon-ilanlar {
  list-style: none; margin: 0.7rem 0 0; padding: 0; max-height: 34vh; overflow-y: auto;
  border-top: 1px solid var(--cizgi); scrollbar-width: thin; scrollbar-color: var(--cizgi) transparent;
}
.balon-ilanlar li { border-bottom: 1px solid var(--cizgi); }
.balon-ilanlar li:last-child { border-bottom: 0; }
/* leaflet.css `.leaflet-container a{color:#0078A8}` diyor -- sinif zinciriyle geciliyor */
.leaflet-container .balon-ilanlar a { display: block; padding: 0.6rem 0.1rem; color: var(--murekkep); text-decoration: none; }
.leaflet-container .balon-ilanlar a:hover,
.leaflet-container .balon-ilanlar a:focus-visible { background: var(--kum-koyu); }
.balon-ilanlar .bf { display: block; font-family: var(--mono); font-size: 0.86rem; color: var(--toprak-koyu); }
.balon-ilanlar .ba { display: block; font-size: 0.79rem; font-weight: 700; letter-spacing: 0.06em; margin-top: 0.2rem; }
.balon-ilanlar .bd { display: block; font-size: 0.79rem; color: var(--murekkep-soft); margin-top: 0.15rem; }
.leaflet-popup-content-wrapper .harita-balon { max-width: 100%; }
.leaflet-tooltip {
  border: none !important; border-radius: 0 !important; background: rgba(33, 29, 23, 0.9) !important;
  color: #fff !important; font: 700 0.79rem/1 var(--sans); letter-spacing: 0.05em;
  padding: 0.45rem 0.7rem !important; box-shadow: none !important;
}
.leaflet-tooltip-top:before { border-top-color: rgba(33, 29, 23, 0.9) !important; }
.harita-liste-sutun { display: flex; flex-direction: column; }
.harita-mahallesiz { font-size: 0.82rem; color: var(--murekkep-soft); margin-top: 1.1rem; }
.harita-kunye { margin-top: 1.1rem; font-size: 0.79rem; color: var(--murekkep-soft); line-height: 1.6; }
/* Yan yana duzenden TEK SUTUNA gecis 900px degil 1200px (Operator 2026-08-28, olculdu).
   900px esigiyle: 1000px'te duzen hala iki sutundu, sag sutun 387px kaliyordu ve
   `auto-fill minmax(13.5rem)` oraya tek kart sigdirabiliyordu -> 6 kart alt alta, harita
   kutusu onlara gerilip 1431px, bolum 1613px. Yani "ara genislikler" hala uzundu.
   1200px altinda harita tam genislige gecer, kartlar da genis alanda 3-4 sutuna yayilir. */
@media (max-width: 1200px) {
  .harita-duzen { grid-template-columns: 1fr; }
  .harita-kutu { min-height: 24rem; max-height: 30rem; }
}

/* ---------------------------------------------------------------------- iletisim */
.bolum--iletisim { text-align: center; }
.iletisim__rozet { width: 106px; height: auto; margin: 0 auto 1.6rem; }
.iletisim__isim { font-family: var(--serif); font-size: 1.6rem; margin-bottom: 1rem; }
.ledger--iletisim { margin-inline: auto; text-align: left; }
.cta {
  display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.8rem 1.5rem; font-size: 0.82rem;
  font-weight: 700; letter-spacing: 0.05em; margin: 0.35rem; transition: background var(--kucuk-ui), color var(--kucuk-ui), border-color var(--kucuk-ui);
}
.cta--birincil { background: var(--toprak); color: #fff; }
.cta--birincil:hover { background: var(--toprak-koyu); }
.cta--ikincil { border: 1px solid var(--cizgi); color: var(--murekkep); }
.sayfa--koyu .cta--ikincil { border-color: var(--cizgi-koyu); color: var(--kagit); }
.cta--ikincil:hover { border-color: var(--toprak); }
/* D6 -- .cta hem acik (iletisim) hem koyu (mulk sayfasi) zeminde kullaniliyor; var(--toprak) koyu
   zeminde 3,69 idi (esik 4,5). Zemine gore ayri terracotta varyanti. */
.sayfa--acik .cta--ikincil:hover { color: var(--toprak-koyu); }
.sayfa--koyu .cta--ikincil:hover { color: var(--toprak-acik); }

/* D-045: ucuncul CTA -- Instagram / sahibinden. Birincil (WhatsApp) ve ikincil (telefon)
   ile YARISMASIN diye daha sessiz: cerceve yok, alti cizili degil, kucuk punto ama
   >=12,5px ve kontrast esigi ustunde (olculdu). */
.iletisim__sosyal { margin-top: 0.9rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem; }
.cta--uc {
  padding: 0.6rem 1rem; font-size: 0.79rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--murekkep-soft); border: 1px solid transparent;
}
.cta--uc:hover { color: var(--toprak-koyu); border-color: var(--cizgi); }
.sayfa--koyu .cta--uc { color: var(--kagit-soft); }
.sayfa--koyu .cta--uc:hover { color: var(--toprak-acik); border-color: var(--cizgi-koyu); }

/* ---------------------------------------------------------------------- alt serit */
.alt-serit {
  padding: 1.4rem clamp(1.25rem, 4vw, 3rem) 2rem; text-align: center; font-size: 0.82rem;
  letter-spacing: 0.02em; color: var(--murekkep-soft);
}
.sayfa--koyu .alt-serit { color: var(--kagit-soft); }

/* ---------------------------------------------------------------------- mulk sayfasi */
.mulk-hero { position: relative; width: 100%; max-width: var(--kapak-max, 1600px); margin-inline: auto; }
.mulk-hero__gorsel img { width: 100%; height: auto; max-height: 88vh; object-fit: cover; }
.mulk-hero__golge { position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(180deg, transparent, rgba(10,8,5,0.86)); }
.mulk-hero__panel { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1.25rem, 4vw, 2.6rem); }
.mulk-hero__panel .kart__rozetler { position: static; margin-bottom: 0.7rem; }
.mulk-hero__etiket { font-family: var(--serif); font-size: clamp(1.4rem, 3.4vw, 2.4rem); color: #fff; }

.mulk-tipo { padding: clamp(4.5rem, 10vw, 6rem) clamp(1.25rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem); text-align: center; }
.mulk-tipo__m2 { font-family: var(--serif); font-weight: 600; font-size: clamp(3rem, 11vw, 6rem); line-height: 1; }
.mulk-tipo__konum { font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kagit-soft); margin-top: 0.6rem; }
.mulk-tipo__fiyat { font-family: var(--mono); font-size: 0.95rem; color: var(--toprak-acik); margin-top: 0.9rem; letter-spacing: 0.03em; }  /* D6 -- var(--toprak) gece uzerinde 3,69 idi */
.mulk-tipo .kart__rozetler { position: static; justify-content: center; margin-bottom: 1rem; }

.mulk-govde { padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 3rem); }

.karusel-sarici { position: relative; margin-top: 2.4rem; }
.karusel {
  display: flex; gap: 0.8rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 0.3rem;
  /* D-044: `stretch` (flex varsayilani) her karesi SATIRIN EN UZUNU kadar uzatiyordu ->
     kutunun `aspect-ratio`si ezilip `cover` yine kirpiyordu. Kareler artik kendi boyunda. */
  align-items: flex-start;
}
.karusel::-webkit-scrollbar { display: none; }
/* D-044: eskiden kutu sabit min(76vw,980px) + img max-height:70vh + cover idi -- yani kutu
   oranini VIEWPORT belirliyordu, kare de icine kirpiliyordu (dikey karelerde %51,8'e kadar,
   alt kenardan %25,9: rozet ikiye boluniyordu). Artik kutunun orani karenin KENDI orani
   (--ar, kur.py'den native olcuden); boy 70vh, en 76vw/980px tavanindan kucuk olani.
   Boylece hem kirpma 0 hem de hicbir slayt ekrandan tasmiyor. */
.karusel__slayt {
  --h: 70vh;
  flex: 0 0 auto; scroll-snap-align: start; overflow: hidden;
  aspect-ratio: var(--ar, 3/2);
  width: min(76vw, 980px, calc(var(--h) * var(--ar, 1.5)));
}
.karusel__slayt picture { display: block; width: 100%; height: 100%; }
.karusel__slayt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.karusel__ok {
  position: absolute; top: 50%; transform: translateY(-50%); width: 2.6rem; height: 2.6rem;
  background: rgba(22,19,15,0.72); color: var(--kagit); font-size: 1.4rem; display: grid; place-items: center;
  transition: background var(--kucuk-ui);
}
.karusel__ok:hover { background: rgba(22,19,15,0.92); }
.karusel__ok--sol { left: 0.6rem; }
.karusel__ok--sag { right: 0.6rem; }

.mulk-cta { text-align: center; padding: 1rem clamp(1.25rem, 4vw, 3rem) 2.5rem; }

/* ---------------------------------------------------------------------- scroll-reveal */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--reveal), transform var(--reveal); }
/* Kademe (T02 olcumu, casangelina): grup icindeki her sonraki eleman +90ms gecikir.
   8 karo x 90ms = 720ms -- izgara tek blok halinde degil, soldan saga dolarak aciliyor. */
.mozaik--foto .kart:nth-child(1) { transition-delay: 0ms, 0ms, 0ms; }
.mozaik--foto .kart:nth-child(2) { transition-delay: 0ms, 0ms, 90ms; }
.mozaik--foto .kart:nth-child(3) { transition-delay: 0ms, 0ms, 180ms; }
.mozaik--foto .kart:nth-child(4) { transition-delay: 0ms, 0ms, 270ms; }
.mozaik--foto .kart:nth-child(5) { transition-delay: 0ms, 0ms, 360ms; }
.mozaik--foto .kart:nth-child(6) { transition-delay: 0ms, 0ms, 450ms; }
.mozaik--foto .kart:nth-child(7) { transition-delay: 0ms, 0ms, 540ms; }
.mozaik--foto .kart:nth-child(8) { transition-delay: 0ms, 0ms, 630ms; }
/* hover transform'u reveal'in translateY'siyle catismasin: gorunur olunca reveal biter */
.mozaik--foto .kart.reveal--gorunur { transform: none; }
.reveal.reveal--gorunur { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .mozaik--foto .kart { transition-delay: 0ms !important; }
}

/* ---------------------------------------------------------------------- responsive */
@media (min-width: 640px) {
  .menu__hizli { display: none; }
  .kart--extra.kart--foto { display: block; }
  .kart--extra.kart--tipo { display: flex; }
  .devami { display: none; }
  .mozaik { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 168px; }
}
@media (max-width: 639px) {
  .menu__hizli { display: flex; }
  .menu__linkler { display: none; }
}
@media (min-width: 1024px) {
  .mozaik { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 190px; }
}


/* ---------------------------------------------------------------- foto mozaigi (P10, en son) */
/* 2026-08-29 (D-048) — MOZAIK: sabit satirli izgaradan SUTUN AKISINA (masonry).
   Gerekce olculdu: sabit satir yuksekligi (148/168/190px) + `cover`, havuzun %73'u dikey
   oldugu icin karelerin ortalama %62'sini, en kotu %85,8'ini atiyordu -- ince bantlarda
   odanin ne oldugu anlasilmiyordu. Artik her karo GORSELIN KENDI ORANINDA: kirpma %0.
   Ikinci kazanc BOYUT: eski karo 328px genisligindeydi, simdi ~480px -- ayni kareden
   daha buyuk turev secilebiliyor (filigran tavani zaten kalkmisti, 87 karenin >=1200px
   turevi var). Bedeli: bolum uzuyor (662px -> ~1800px). Operator karari: "daha guzel bir
   goruntu bekliyorum" -- yukseklik degil gorunum onceligi. */
.mozaik.mozaik--foto {
  display: block; height: auto;
  columns: 2; column-gap: 0.7rem;
  max-width: 96rem; margin-inline: auto;
}
/* <1000px: sutun kutulari YOK SAYILIR (display:contents) ve kareler tarayicinin iki sutunlu
   akisina duser. >=1000px: sutunlar kur.py'de kuruldugu gibi durur (bkz portfoy_html). */
.mozaik.mozaik--foto .mozaik__sutun { display: contents; }
@media (min-width: 1000px) {
  .mozaik.mozaik--foto { display: flex; align-items: flex-start; gap: 0.7rem; columns: auto; }
  .mozaik.mozaik--foto .mozaik__sutun { display: block; flex: 1 1 0; min-width: 0; }
}
.mozaik.mozaik--foto .kart {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  width: 100%; margin: 0 0 0.7rem; aspect-ratio: auto;
}
/* Karo artik kutuya kirpilmiyor: <picture> akista duruyor, yukseklik goruntuden geliyor.
   `width`/`height` oznitelikleri picture()'da basili -> yer bastan ayriliyor, CLS yok. */
.mozaik.mozaik--foto .kart--foto picture { position: static; display: block; }
.mozaik.mozaik--foto .kart--foto img { width: 100%; height: auto; }

/* ---- hareket: kart uzerine gelince buyusun (Operator, 2026-08-27) ------------------------- */
/* T02'nin olctugu fransilvestre egrisi taban: transform 300ms cubic-bezier(.57,.21,.69,1).
   Buyume 1,05 -> 1,08; ustune kartin kendisi hafifce kalkiyor ve alt yazi yukari suzuluyor. */
/* Gecis OZELLIK BAZINDA ayrilir: bu kural .reveal'den sonra ve daha ozgul oldugu icin onun
   `transition: opacity 2000ms`'ini EZIYORDU -- kartlar animasyonsuz, aninda 100 opakliga
   ziplyordu (olculdu: 60ms icinde 0 -> 100). Opaklik listeye alindi ve kademe gecikmesi
   yalniz OPAKLIGA verildi; transform/box-shadow hover'in ve gecikmesiz kalmali. */
.mozaik--foto .kart--foto {
  transition: transform 300ms cubic-bezier(0.57,0.21,0.69,1),
              box-shadow 300ms cubic-bezier(0.57,0.21,0.69,1),
              opacity var(--reveal);
  z-index: 0;
}
/* reveal'in translateY'si hover transform'uyla ayni ozelligi paylasiyor -> mozaikte hareket
   hover'in, reveal yalniz opaklik. */
.mozaik--foto .kart.reveal { transform: none; }
.mozaik--foto .kart--foto:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(28,20,12,0.22); z-index: 3; }
.mozaik--foto .kart--foto:hover img { transform: scale(1.08); }
.mozaik--foto .kart--foto .kart__etiket,
.mozaik--foto .kart--foto .kart__rozetler { transition: transform 300ms cubic-bezier(0.57,0.21,0.69,1); }
.mozaik--foto .kart--foto:hover .kart__etiket { transform: translateY(-3px); }
.mozaik--foto .kart--foto .kart__golge { transition: opacity 300ms ease; }
.mozaik--foto .kart--foto:hover .kart__golge { opacity: 0.82; }

@media (prefers-reduced-motion: reduce) {
  .mozaik--foto .kart--foto,
  .mozaik--foto .kart--foto:hover,
  .mozaik--foto .kart--foto:hover img,
  .mozaik--foto .kart--foto:hover .kart__etiket { transform: none; box-shadow: none; transition: none; }
}

/* ---- yatay pasaj: fareyle kaydirilabilir --------------------------------------------------- */
.karusel { scroll-behavior: smooth; }
/* Fareyle surukleme icin: tarayicinin kendi gorsel-suruklemesi ve metin secimi kapatilir */
.karusel img, .karusel a { -webkit-user-drag: none; user-drag: none; }
.karusel a { -webkit-touch-callout: none; }
.karusel.karusel--suruklenirken {
  cursor: grabbing; scroll-behavior: auto; user-select: none;
  scroll-snap-type: none;   /* surukleme sirasinda yapisma kapali; birakinca en yakina oturur */
}
.karusel-sarici { cursor: grab; }

/* D-039 -- temsilî görsel ibaresi. Etkilediği karenin yanında durur, dip şeritte değil.
   Punto kasanın tabanına uyar (>=12,5px); ton sakin ama okunur (kontrast ölçülüyor). */
.temsili {
  font-family: var(--mono); font-size: 0.79rem; letter-spacing: 0.06em;
  color: var(--murekkep-soft); margin: 0.5rem 0 0;
}
/* Once rgba(255,255,255,0.72) idi: GERCEK PIKSELDEN olculdu -> 4,75 (esik 4,5) -- geciyor
   ama zemin FOTOGRAF, ve baska bir kapagin alt kenari daha acik olabilir. Hero yazisiyla
   ayni renge cekildi (#fff, T05'te 18,52 olculmustu): pay birakmak, esigi teget gecmekten iyi. */
.temsili--bos { min-height: 1.2em; }   /* ibaresiz kartin yuvasi -- izgara hizasi icin */
.temsili--hero { color: #fff; margin-top: 0.45rem; }

/* ------------------------------------------------- kategori şeritleri (VİLLA/DAİRE/İŞ YERİ)
   Operatör 2026-08-28: "kullanılmayan fotoları da ekleyelim" + "wow katmanı".
   Şerit = iç mekân dokusu; mozaikte yalnız kapaklar var, buradaki kareler sayfanın başka
   hiçbir yerinde görünmüyor. Sürükleme + oklar mevcut karusel bileşeninden geliyor. */
.bolum--kategori { padding-left: 0; padding-right: 0; overflow: hidden; }
.dev-kelime--kat { margin-bottom: 0.4rem; }
.kat-veri {
  font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.1em; color: var(--murekkep-soft);
  text-align: center; margin: 0 auto 2rem; padding: 0 1.25rem; max-width: 62rem; line-height: 2;
}
.kat-veri__ayrac { color: var(--toprak-koyu); margin: 0 0.55rem; }
.serit-sarici { margin-top: 0; }
.serit { gap: 0.75rem; padding: 0 clamp(1.25rem, 4vw, 3rem); }
/* D-043: hucre YUKSEKLIGI sabit, GENISLIK karenin kendi oranindan (inline `aspect-ratio`).
   Boylece hicbir kare kirpilmiyor: dikey fotograf dar hucre, yatay fotograf genis hucre olur.
   Serit de tekduze olmaktan cikip degisken ritim kazaniyor. `cover` duruyor ama artik
   kirpacak sey yok -- yuvarlama farklarina karsi guvenlik. */
/* 2026-08-29 duzeltmesi: `height` sabit + `max-width` ikilisi MOBILDE kutuyu eziyordu --
   82vw tavani devreye girince oran bozuluyor, `cover` yine kirpiyordu (olculdu: mobil serit
   ort %18,0 / en kotu %36,9; masaustunde 0 oldugu icin kacmisti). Artik tek eksen sinirli:
   en = min(vw tavani, boy x oran) -> boy ondan tureyip oran her zaman korunuyor. */
.serit__kare {
  --h: clamp(280px, 42vh, 440px);
  position: relative; flex: 0 0 auto; scroll-snap-align: start;
  aspect-ratio: var(--ar, 4/3);
  width: min(88vw, calc(var(--h) * var(--ar, 1.333)));
  overflow: hidden; background: var(--kum-koyu); display: block;
}
.serit__kare picture { position: absolute; inset: 0; }
.serit__kare img { width: 100%; height: 100%; object-fit: cover;
                   transition: transform 1200ms var(--gecis-genel); }
.serit__kare:hover img, .serit__kare:focus-visible img { transform: scale(1.04); }
/* Etiket ÜSTTE: alt sol köşede Acar'ın kendi `ACAR 33` rozeti basılı (fotoğrafın içinde) --
   alta koyunca üst üste biniyordu (ölçüldü: şerit ekran görüntüsünde çakışma görüldü). */
.serit__etiket {
  position: absolute; left: 0; right: 0; top: 0; padding: 0.9rem 1rem 2.5rem;
  font-size: 0.86rem; letter-spacing: 0.06em; color: #fff;
  background: linear-gradient(180deg, rgba(10,8,5,0.88) 0%, rgba(10,8,5,0.72) 45%, transparent 100%);
}
@media (max-width: 640px) {
  .serit__kare { --h: clamp(260px, 46vh, 380px); width: min(82vw, calc(var(--h) * var(--ar, 1.333))); }
}

/* wow katmanı — şerit kareleri sıralı girer (casangelina kademesi: her sonraki +90ms) */
.serit.reveal--gorunur .serit__kare { animation: seritGir 900ms var(--gecis-genel) backwards; }
.serit.reveal--gorunur .serit__kare:nth-child(1) { animation-delay: 0ms; }
.serit.reveal--gorunur .serit__kare:nth-child(2) { animation-delay: 90ms; }
.serit.reveal--gorunur .serit__kare:nth-child(3) { animation-delay: 180ms; }
.serit.reveal--gorunur .serit__kare:nth-child(4) { animation-delay: 270ms; }
.serit.reveal--gorunur .serit__kare:nth-child(n+5) { animation-delay: 360ms; }
@keyframes seritGir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* 2026-08-29 (D-042): buradaki `.hero__kare img { animation: kenBurns ... }` ve @keyframes
   kenBurns SILINDI. Hero fotograf donusu olmaktan cikip video olunca `.hero__kare` DOM'dan
   kalkmisti; kural hicbir seye uymadan duruyordu. Hero'nun hareketi artik videonun kendi
   hareketi -- CSS'te taklit edilmiyor. */
@media (prefers-reduced-motion: reduce) {
  .serit.reveal--gorunur .serit__kare { animation: none; }
  .serit__kare img { transition: none; }
}

/* -------------------------------------------------- insaat hakki sahnesi (D-046, 2026-08-29) */
/* Operator: "scrolla etkilesime girecek bir seyler lazim... siteye hava katacak bir sey."
   Sahne kunyedeki iki sayiyi (m2, KAKS) harfi harfine ciziyor: her kare 1 m², dolan kareler
   insaat hakki. Animasyon TEK ozellik uzerinden: `.hk-perde` zemin renginde bir dikdortgen,
   scroll ile yukari dogru kuculuyor (scaleY). 400 kare degil, 1 transform anime ediliyor.
   VARSAYILAN --p:1 -- yani JS yoksa/basarisizsa alan DOLU gorunur, sayi da DOM'da yazili. */
.bolum--hak { text-align: center; }
.hak-baslik {
  font-family: var(--serif); font-weight: 600; line-height: 1.12;
  font-size: clamp(1.9rem, 5.2vw, 3.4rem); margin: 0 auto 1.1rem; max-width: 20ch;
}
.hak-giris { max-width: 44rem; margin: 0 auto; color: var(--murekkep-soft); font-size: 0.96rem; }
.hak-giris strong { color: var(--murekkep); font-weight: 600; }
.hak-izgara {
  display: grid; grid-template-columns: 1fr; gap: 3.2rem;
  max-width: 66rem; margin: 3rem auto 0;
}
@media (min-width: 760px) { .hak-izgara { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
/* Hucre boyu TUM panellerde ayni (--hk-birim): 1 m² her yerde ayni buyuklukte kare demek.
   Cizim alani en uzun panelin boyunda sabit, svg ALTA yaslanir -> uc panelin tabani ayni
   cizgide durur, sayilar ayni hizada okunur. */
.bolum--hak { --hk-birim: clamp(9.5px, 0.92vw, 13px); }
@media (max-width: 759px) { .bolum--hak { --hk-birim: clamp(11px, 3.6vw, 15px); } }
.hak-cizim {
  height: calc(var(--hk-sat-max, 20) * var(--hk-birim));
  display: flex; align-items: flex-end; justify-content: center;
}
.hak-cizim svg {
  width: calc(var(--sut, 20) * var(--hk-birim));
  height: calc(var(--sat, 20) * var(--hk-birim));
  max-width: 100%; overflow: visible;
}
.hk-bos { fill: none; stroke: rgba(33, 29, 23, 0.22); stroke-width: 0.9; }
.hk-dolu { fill: var(--toprak); }
.hk-perde {
  fill: var(--kum);                      /* bolumun zemini -- perde gorunmez, isini gizlice yapar */
  transform-box: fill-box; transform-origin: top;
  transform: scaleY(calc(1 - var(--p, 1)));
}
.hak-sayi { font-family: var(--serif); margin-top: 1.1rem; line-height: 1; }
.hak-sayi__n { font-size: clamp(2.2rem, 6vw, 3.4rem); font-weight: 600; color: var(--toprak-koyu); }
.hak-sayi__b { font-size: 1.1rem; color: var(--murekkep-soft); }
.hak-alt { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.05em; color: var(--murekkep-soft); margin-top: 0.5rem; }
.hak-link {
  display: inline-block; margin-top: 0.8rem; font-size: 0.79rem; font-weight: 700;
  letter-spacing: 0.08em; color: var(--toprak-koyu); transition: color var(--kucuk-ui);
}
.hak-link:hover { color: var(--murekkep); }
.hak-eksik, .hak-serh {
  max-width: 46rem; margin: 2.4rem auto 0; font-size: 0.8rem; line-height: 1.7;
  color: var(--murekkep-soft);
}
.hak-serh { margin-top: 0.8rem; font-family: var(--mono); font-size: 0.79rem; }
@media (prefers-reduced-motion: reduce) {
  .hk-perde { display: none; }           /* ikinci kapi: JS zaten devreye girmiyor */
}

/* -------------------------------------------------------- bolum perdeleri (D-046, 2026-08-29) */
/* Operator: "siteye hava katacak bir sey lazim." Sakin izgaralarin arasina tam genislik
   sinematik kare + TEK satir tipografi. Kare stok (Acar'in degil) -> ibare karenin uzerinde.
   Hareket: main.js `--py` yaziyor (scroll'a bagli yavas kayma); katman %8 tasarak duruyor ki
   kayma kenarda bosluk acmasin. Azaltilmis harekette --py hic yazilmaz, kare sabit kalir. */
.perde {
  position: relative; overflow: hidden; background: var(--murekkep);
  height: clamp(340px, 62vh, 640px);
  display: grid; place-items: center;
}
.perde__katman {
  position: absolute; inset: -8% 0; z-index: 0;
  transform: translate3d(0, calc(var(--py, 0) * 1px), 0);
}
.perde__gorsel, .perde__gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.perde::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* Perde yogunlugu HER KARE ICIN AYRI (--s, perdeler.json'dan): karenin kendi parlakligi
     farkli. Tek bir deger ya karanlik kareyi camura ceviriyor ya parlak karede yaziyi
     okunmaz birakiyordu -- olculdu: ayni perdeyle kontrast 8,93 ile 2,38 arasinda geziyor.
     Degerler gercek pikselden olculerek secildi (>=4,5), goz karariyla degil. */
  background: linear-gradient(180deg,
    rgba(10,8,5,var(--s, 0.46)),
    rgba(10,8,5,calc(var(--s, 0.46) - 0.20)) 42%,
    rgba(10,8,5,calc(var(--s, 0.46) + 0.16)));
}
.perde__yazi {
  position: relative; z-index: 2; margin: 0; padding: 0 clamp(1.25rem, 6vw, 5rem);
  font-family: var(--serif); font-weight: 600; text-align: center; color: #F6F2E8;
  font-size: clamp(1.6rem, 4.4vw, 3.1rem); line-height: 1.18; max-width: 24ch;
  text-wrap: balance;
}

/* D-047: mozaigin altindaki temsilî ibaresi (uretilmis kapaklarin bulundugu tek yer artik burasi) */
.mozaik-not {
  margin: 1.4rem auto 0; max-width: 52rem; text-align: center;
  font-size: 0.8rem; line-height: 1.7; color: var(--murekkep-soft);
}

/* D-047: serit karesinde temsilî rozeti (yalniz ARSA seridinde, uretilmis kapaklarin yaninda) */
.serit__temsili {
  display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.42rem;
  background: rgba(245,239,226,0.92); color: var(--murekkep);
  font-size: 0.79rem; font-weight: 700; letter-spacing: 0.06em; vertical-align: 0.05em;
}

/* D-050: mozaik ilk halde 9 ilan gosterir, gerisi butonla acilir (Operator, 2026-08-29).
   Gizli karolar `display:none` -- lazy gorseller de indirilmiyor, yani kisa hal HAFIF. */
.mozaik--foto .kart--gizli { display: none !important; }
.mozaik--foto.mozaik--acik .kart--gizli { display: block !important; }
.daha {
  display: block; margin: 2.2rem auto 0; padding: 0.85rem 1.8rem;
  border: 1px solid var(--cizgi); background: none; color: var(--murekkep);
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em;
  transition: background var(--kucuk-ui), border-color var(--kucuk-ui), color var(--kucuk-ui);
}
.daha:hover { border-color: var(--toprak); color: var(--toprak-koyu); }

/* ------------------------------------------------- büyüyen film (D-051, 2026-08-29) */
/* Operator: "scroll ile oraya geldiğimizde video tam ekran olsa, biraz daha kaydırınca
   küçülse ve akış devam etse." Bölüm bir KOŞU YOLU (200vh); sahne içeride `sticky` duruyor,
   film ortadan büyüyüp tekrar küçülüyor. Anime edilen tek şey `transform: scale()` --
   compositor'da döner, düzen hesabı yok. `--s` main.js'ten gelir; VARSAYILAN 1'dir, yani
   JS yoksa film tam ekran (poster) olarak durur, kırık bir kutu görünmez. */
.vfilm { height: 200vh; position: relative; background: var(--kum); }
.vfilm__sahne {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid; place-items: center;
}
.vfilm__kutu {
  position: absolute; inset: 0; overflow: hidden;
  transform: scale(var(--s, 1));
  transform-origin: center;
  will-change: transform;
}
.vfilm__poster, .vfilm__poster img, .vfilm__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.vfilm__video { opacity: 0; transition: opacity 900ms var(--gecis-genel); }
.vfilm__video--acik { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .vfilm { height: 100vh; }                 /* koşu yolu yok: tek ekran, sabit */
  .vfilm__kutu { transform: none; }
  .vfilm__video { display: none; }
}