/* ============================================================
   escEmlak — "Modern Portal" temasi
   Renkler layout'ta :root uzerine basilir (bkz. TemaPalet).
   --p  ana renk      --p2 ana renk acik
   --a  aksan         --a2 aksan koyu
   --ink metin        --soft yumusak zemin
   ============================================================ */

:root{
  --line:#e6ecf2; --muted:#64748b; --bg:#fff;
  --r:14px;
  --sh:0 1px 3px rgba(15,23,42,.06),0 8px 24px rgba(15,23,42,.06);
  --sh2:0 8px 30px rgba(15,23,42,.14);
  /* Navbar yuksekligi ve logo boyu birbirine bagli: logo bardan buyuk
     olamaz. Sticky yan sutunlar da bara yapismasin diye --yapisik'i
     buradan turetiyor - bar degisince elle guncellenecek sayi kalmasin. */
  --nav-h:86px; --logo-h:65px;
  --yapisik:calc(var(--nav-h) + 20px);
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}

/* --- butonlar --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;
  font:600 15px/1 inherit;padding:14px 22px;border-radius:10px;background:var(--a);color:#fff;transition:.2s}
.btn:hover{background:var(--a2);transform:translateY(-1px);color:#fff}
.btn-o{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
.btn-o:hover{background:var(--soft);border-color:var(--a);color:var(--a);transform:none}
.btn-p{background:var(--p)}
.btn-p:hover{background:var(--p2)}
.btn-sm{padding:10px 16px;font-size:14px}

/* --- bolum --- */
.sec{padding:76px 0}
.sec.soft{background:var(--soft)}
.eyebrow{display:inline-block;font:700 12px/1 inherit;letter-spacing:.12em;text-transform:uppercase;color:var(--a);margin-bottom:12px}
.h2{font-size:clamp(26px,3.4vw,38px);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.lead{color:var(--muted);margin-top:10px;max-width:620px}
/* Cok paragrafli tanitim yazisi tek satir gibi sikismasin. */
.hakkimizda-metin{line-height:1.75;max-width:720px}

/* Duz metin sayfalari (cerez politikasi gibi). Okuma genisligi 760px'te
   tutuluyor - 1200px'lik wrap icinde satirlar goz takip edemeyecek kadar
   uzuyordu. Basliklar burada sinifsiz <h2> olarak yazilabilsin diye
   bicimlendirme elemana veriliyor. */
.metin-sayfa{max-width:760px;line-height:1.75;color:var(--ink)}
.metin-sayfa h2{font-size:20px;font-weight:700;letter-spacing:-.01em;margin:30px 0 10px}
.metin-sayfa h2:first-child{margin-top:0}
.metin-sayfa p{margin-bottom:14px}
.metin-sayfa ul{margin:0 0 14px 20px}
.metin-sayfa li{margin-bottom:6px}
.metin-sayfa a{color:var(--a);text-decoration:underline}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px;flex-wrap:wrap}
.bos{text-align:center;padding:56px 20px;color:var(--muted);background:var(--soft);border-radius:var(--r)}

/* --- topbar / nav --- */
.topbar{background:var(--p);color:rgba(255,255,255,.78);font-size:13.5px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:42px;gap:16px;flex-wrap:wrap}
.topbar b,.topbar a:hover{color:#fff}
.topbar .tb-r{display:flex;gap:18px;align-items:center}
/* Sosyal simgeler. Sabit 16px kutu: metin ("Instagram", "Facebook")
   ust barin yarisini yiyor ve dar ekranda satiri tasiriyordu. */
.tb-sim{display:grid;place-items:center;width:16px;height:16px;flex:none}
.tb-sim svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7}
/* "Ilan Gonder" — ust barda ayirt edilsin ama gurultu yapmasin.
   Sabit dolgu ve cerceve: modul acilip kapandiginda bar yuksekligi
   degismiyor, menude kayma olmuyor. */
.tb-vurgu{border:1px solid rgba(255,255,255,.34);border-radius:999px;
  padding:4px 12px;line-height:1.4;white-space:nowrap;transition:.16s}
.tb-vurgu:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
/* Cekmecede tam genislikte dugme. */
.menu-gonder .btn{width:100%;justify-content:center}
nav.ust{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav.ust .wrap{display:flex;align-items:center;gap:28px;min-height:var(--nav-h)}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-.02em}
.logo .mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--p),var(--a));
  display:grid;place-items:center;color:#fff;font-size:16px;flex:none}
/* Genis logolarda width:auto tek basina tasmayi engellemiyor; max-width +
   object-fit ile dar ekranda oran bozulmadan kuculsun. */
.logo img{height:var(--logo-h);width:auto;max-width:100%;object-fit:contain}
.menu{display:flex;gap:26px;margin-left:auto;font-weight:500;font-size:15px;list-style:none;align-items:center}
.menu > li{position:relative}
.menu a{display:block;padding:26px 0;border-bottom:2px solid transparent;transition:.2s}
.menu a:hover,.menu a.on{color:var(--a);border-color:var(--a)}
.menu .alt{position:absolute;top:100%;left:0;min-width:200px;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--sh);padding:8px;display:none;list-style:none;z-index:60}
.menu > li:hover .alt{display:block}
.menu .alt a{padding:9px 12px;border:0;border-radius:7px;font-size:14.5px}
.menu .alt a:hover{background:var(--soft)}
.nav-tel{margin-left:auto}

/* Hamburger: uc cizgi. Metin karakteri (☰) yerine span'ler.
   Eskiden acilinca X'e donuyordu; cekmecenin kendi kapatma dugmesi
   eklenince ekranin sag ustunde IKI X gorunur oldu. Artik cekmece
   acilinca hamburger gizleniyor (bkz. mobil blogundaki .nav-ac.acik). */
.nav-ac{display:none;background:none;border:0;cursor:pointer;margin-left:auto;
  width:44px;height:44px;padding:10px;position:relative;z-index:70}
.nav-ac span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px}
.nav-ac span + span{margin-top:5px}

/* Cekmece basligi ve alt iletisim bloğu yalnizca mobilde gorunur. */
.menu-bas,.menu-alt{display:none}

.menu-perde{position:fixed;inset:0;z-index:55;background:rgba(8,15,26,.5);
  opacity:0;transition:opacity .3s;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  /* Kapanis animasyonu suresince perde gorunmez ama hala ekranda; pointer-events
     olmadan o ~300 ms boyunca altindaki butonlarin tiklamalarini yutuyor. */
  pointer-events:none}
.menu-perde.acik{opacity:1;pointer-events:auto}

/* --- hero / slider --- */
.hero{position:relative;color:#fff;overflow:hidden}
.hero .slayt{position:relative;padding:96px 0 130px;background-size:cover;background-position:center}
.hero .slayt.varsayilan{background:linear-gradient(120deg,var(--p) 0%,var(--p2) 55%,var(--a2) 130%)}
.hero .slayt::before{content:"";position:absolute;inset:0;background:rgba(8,20,32,var(--karartma,.45))}
.hero .slayt.varsayilan::before{background:none}
.hero .slayt::after{content:"";position:absolute;inset:0;opacity:.14;
  background-image:radial-gradient(circle at 18% 22%,#fff 1.4px,transparent 1.4px),radial-gradient(circle at 78% 68%,#fff 1.4px,transparent 1.4px);
  background-size:44px 44px,64px 64px}
.hero .wrap{position:relative;z-index:2}
.hero.orta{text-align:center}
.hero.orta .hero-ic{margin:0 auto}
.hero.sag{text-align:right}
.hero h1{font-size:clamp(32px,5vw,54px);font-weight:800;letter-spacing:-.03em;line-height:1.1;max-width:17ch}
.hero.orta h1,.hero.orta p{max-width:none}
.hero p{margin-top:16px;font-size:18px;color:rgba(255,255,255,.86);max-width:52ch}
.hero-btn{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
.hero.orta .hero-btn{justify-content:center}

/* --- arama --------------------------------------------------
   Birlesik arama cubugu: alanlarin kendi kutusu YOK, tek govde
   icinde dikey ayraclarla bolunur. Kutucuk yigini yerine tek
   parca gorunur — hover/odak alani yumusak zeminle vurgular.
   ------------------------------------------------------------ */
.arama{margin-top:38px;background:#fff;border-radius:22px;box-shadow:var(--sh2);
  padding:8px;text-align:left;color:var(--ink)}

/* Sekmeler: segment kontrolu (kaydirmali hap) */
.arama .tabs{display:inline-flex;gap:3px;margin:6px 6px 10px;padding:4px;
  background:var(--soft);border-radius:999px}
.arama .tab{padding:9px 20px;border-radius:999px;font:600 14px/1 inherit;color:var(--muted);
  cursor:pointer;border:0;background:transparent;transition:.2s;white-space:nowrap}
.arama .tab.on{background:var(--a);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.14)}
.arama .tab:not(.on):hover{color:var(--ink)}

.alanlar{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr auto;gap:2px;
  padding:0 2px 2px;align-items:stretch}

.alan{position:relative;min-width:0;display:flex;align-items:center;gap:11px;
  padding:11px 15px;border-radius:16px;transition:background .18s,box-shadow .18s}
.alan:hover{background:var(--soft)}
.alan:focus-within{background:var(--soft);box-shadow:inset 0 0 0 1.5px var(--a)}

/* Ayrac: her alanin soluna. Komsu alan vurgulaninca gizlenir ki
   yuvarlak zeminin kenarina cizgi yapismasin. */
.alan + .alan::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:30px;background:var(--line);transition:opacity .18s}
.alan:hover::before,.alan:focus-within::before,
.alan:hover + .alan::before,.alan:focus-within + .alan::before{opacity:0}

.alan-ikon{width:19px;height:19px;flex:none;color:var(--a);stroke:currentColor;
  fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.alan-govde{min-width:0;flex:1}

.alan label{display:block;font:600 10.5px/1 inherit;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px;cursor:pointer}
/* display:block şart — inline-block bırakılırsa alanlar satır kutusunda
   taban çizgisine hizalanıp aşağı kayıyor ve satır gereksiz uzuyor. */
.alan input,.alan select{display:block;width:100%;border:0;background:transparent;
  padding:0;font:15px/1.25 inherit;color:var(--ink);appearance:none;
  text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
/* Dokunma hedefi. Select yalnizca 19px'lik yazi satiri kadardi; kutunun
   bos kalan yerine basinca hicbir sey olmuyordu, ozellikle mobilde secim
   yapmak zordu. Negatif margin ile yerlesimi bozmadan tiklanabilir alani
   buyutuyoruz — etiketin "for" bagi zaten var, o da aciyor. */
.alan select{cursor:pointer;padding:7px 18px 7px 0;margin:-7px 0}
/* 16px alti yazi iOS'ta odaklaninca sayfayi zorla yakinlastiriyor. */
@media(max-width:900px){
  .alan select,.alan input{font-size:16px}
  .alan select{padding:11px 18px 11px 0;margin:-11px 0}
}
.alan input:focus,.alan select:focus{outline:0}
.alan input::placeholder{color:#9aa8b8}
/* NOT: bu sınıfın adı ".sec" OLMAMALI — ".sec" temada bölüm (section)
   anlamında kullanılıyor ve padding:76px 0 taşıyor. */
.alan.acilir::after{content:"";position:absolute;right:15px;bottom:17px;width:6px;height:6px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);pointer-events:none}

.arama .btn{border-radius:16px;padding:0 28px;font-size:15.5px;gap:9px;align-self:stretch}
.arama .btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* --- sayaclar --- */
.sayac{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-radius:var(--r);
  overflow:hidden;margin-top:-52px;position:relative;z-index:5;box-shadow:var(--sh)}
.sayac > div{background:#fff;padding:26px 22px;text-align:center}
.sayac b{display:block;font-size:30px;font-weight:800;color:var(--p);letter-spacing:-.02em}
.sayac span{font-size:13.5px;color:var(--muted)}

/* --- kategori --- */
.kats{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.kat{background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:24px 14px;text-align:center;transition:.22s;display:block}
.kat:hover{border-color:var(--a);transform:translateY(-4px);box-shadow:var(--sh)}
.kat .ic{width:52px;height:52px;margin:0 auto 12px;border-radius:14px;background:var(--soft);
  display:grid;place-items:center;font-size:22px;transition:.22s;color:var(--p)}
.kat:hover .ic{background:var(--a);color:#fff}
.kat b{display:block;font-size:14.5px;font-weight:650}
.kat span{font-size:12.5px;color:var(--muted)}

/* --- ilan kartlari --- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid.g2{grid-template-columns:repeat(2,1fr)}
.grid.g3{grid-template-columns:repeat(3,1fr)}

/* --- sonuç çubuğu ve görünüm seçici --- */
.sonuc-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:18px;flex-wrap:wrap}
.sonuc-adet{font-size:14.5px;color:var(--muted)}
.sonuc-adet b{color:var(--ink);font-size:16px;font-weight:700}
.gorunum{display:flex;gap:2px;background:var(--soft);border:1px solid var(--line);
  border-radius:10px;padding:3px}
.gorunum button{width:36px;height:32px;border:0;background:transparent;cursor:pointer;
  border-radius:7px;display:grid;place-items:center;color:var(--muted);transition:.16s}
.gorunum button:hover{color:var(--ink);background:#fff}
.gorunum button.on{background:var(--a);color:#fff}
.gorunum svg{width:14px;height:14px;fill:currentColor}

/* --- liste görünümü ---
   Kart normalde dikey (foto üstte). Listede yatayda: foto solda sabit
   genişlikte, içerik sağda. Kartın kendi işaretlemesi değişmiyor,
   yalnızca yerleşim. */
.grid.liste{grid-template-columns:1fr;gap:14px}
.grid.liste .kart{flex-direction:row}
.grid.liste .kart:hover{transform:none;box-shadow:var(--sh)}
.grid.liste .kart .foto{width:280px;height:auto;min-height:190px;flex:none}
.grid.liste .kart .govde{display:flex;flex-direction:column;justify-content:center}
.grid.liste .kart .alt{border-top:0;border-left:1px solid var(--line);background:transparent;
  flex-direction:column;align-items:flex-start;justify-content:center;min-width:190px}

@media(max-width:900px){
  /* Dar ekranda üç sütun okunmuyor; iki sütuna, listede tekrar dikey karta. */
  .grid.g3{grid-template-columns:repeat(2,1fr)}
  .grid.liste .kart .foto{width:190px;min-height:150px}
  .grid.liste .kart .alt{display:none}
}
@media(max-width:560px){
  .grid.g3,.grid.g2{grid-template-columns:1fr}
  .grid.liste .kart{flex-direction:column}
  .grid.liste .kart .foto{width:100%;height:210px;min-height:0}
}
.kart{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.25s;display:flex;flex-direction:column}
.kart:hover{transform:translateY(-6px);box-shadow:var(--sh2);border-color:transparent}
.kart .foto{position:relative;height:210px;background:var(--soft);overflow:hidden}
.kart .foto img{width:100%;height:100%;object-fit:cover;transition:.4s}
.kart:hover .foto img{transform:scale(1.05)}
.kart .foto .yok{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:13px}
.rozetler{position:absolute;top:12px;left:12px;display:flex;gap:6px;z-index:2;flex-wrap:wrap}
.rozet{background:var(--a);color:#fff;font:700 11px/1 inherit;padding:7px 10px;border-radius:6px;letter-spacing:.03em}
.rozet.koyu{background:var(--p)}
.rozet.one{background:#f59e0b}
/* 95 — video / 360 rozeti. Durum rozetleri sol üstte; bunlar sağ altta
   dursun ki fiyat ve "Satıldı" ile aynı köşeye yığılmasınlar. */
.medya-rozetler{position:absolute;right:10px;bottom:10px;display:flex;gap:6px;z-index:2}
.medya-rozet{display:inline-flex;align-items:center;gap:5px;background:rgba(15,23,42,.72);
  color:#fff;font:700 11px/1 inherit;padding:6px 9px;border-radius:6px;letter-spacing:.02em;
  backdrop-filter:blur(3px)}
.medya-rozet svg{width:13px;height:13px;fill:#fff}
.medya-rozet svg.ince{fill:none;stroke:#fff;stroke-width:1.8}
.kart .govde{padding:20px;flex:1}
.fiyat{font-size:22px;font-weight:800;color:var(--p);letter-spacing:-.02em}
.fiyat small{font-size:14px;color:var(--muted);font-weight:500}
/* Baslik en fazla iki satir. Emlak ilanlarinin basliklari cok uzun
   yaziliyor ("BAGLUM EMLAKTAN LUX YAPILI GENIS KAT SECENEKLERI MEVCUT
   OLAN EMSALI OLMAYAN DAIRE"); kirpmayinca kartlar farkli boylarda
   oluyor ve izgara dagiliyor. Tam basligi detay sayfasi gosteriyor,
   ayrica title ile uzerine gelince baloncukta cikiyor. */
.kart h3{font-size:16px;font-weight:650;margin:8px 0 6px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:calc(2 * 1.35em)}
.kart h3 a:hover{color:var(--a)}
.konum{font-size:13.5px;color:var(--muted)}
.ozellikler{display:flex;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.ozellikler > div{flex:1;text-align:center;border-right:1px solid var(--line);padding:0 4px;min-width:0}
.ozellikler > div:last-child{border-right:0}
.ozellikler b{display:block;font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ozellikler span{font-size:11.5px;color:var(--muted);letter-spacing:.02em}
.kart .alt{display:flex;align-items:center;gap:10px;padding:14px 20px;background:var(--soft);border-top:1px solid var(--line)}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--p),var(--a));
  display:grid;place-items:center;color:#fff;font:700 12px/1 inherit;flex:none;overflow:hidden}
/* object-position ust tarafa kaydirilir: portre fotograflarinda yuz genelde
   karenin ust ucte birindedir, "center" birakilirsa daire maskesi cenenin
   altini gosterip alni kirpar. */
.avatar img{width:100%;height:100%;object-fit:cover;object-position:center 28%}
.kart .alt b{font-size:13.5px;font-weight:600;display:block}
.kart .alt small{color:var(--muted);font-size:12.5px}

/* --- projeler --- */
.projeler{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.proje{position:relative;border-radius:var(--r);overflow:hidden;min-height:260px;display:flex;align-items:flex-end;
  padding:26px;color:#fff;background:linear-gradient(135deg,var(--p2),var(--a2));background-size:cover;background-position:center}
.proje::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,24,38,.85),rgba(8,24,38,.05) 65%)}
.proje > div{position:relative;z-index:2}
.proje .durum{display:inline-block;background:var(--a);font:700 11px/1 inherit;padding:6px 10px;border-radius:6px;margin-bottom:10px}
.proje h3{font-size:21px;font-weight:700}
.proje p{font-size:13.5px;color:rgba(255,255,255,.82);margin-top:4px}

/* --- danismanlar --- */
.ekip{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.uye{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 20px;text-align:center;transition:.22s}
.uye:hover{border-color:var(--a);box-shadow:var(--sh);transform:translateY(-4px)}
.uye .pp{width:88px;height:88px;border-radius:50%;margin:0 auto 14px;overflow:hidden;
  background:linear-gradient(135deg,var(--p),var(--a));display:grid;place-items:center;color:#fff;font:700 26px/1 inherit}
.uye .pp img{width:100%;height:100%;object-fit:cover;object-position:center 28%}
.uye b{font-size:16px;font-weight:650}
.uye .unvan{display:block;font-size:13px;color:var(--a);font-weight:600;margin-top:2px}
.uye small{display:block;font-size:12.5px;color:var(--muted);margin-top:8px}
.uye .sosyal{display:flex;justify-content:center;gap:8px;margin-top:14px}
.uye .sosyal a{width:32px;height:32px;border-radius:8px;background:var(--soft);display:grid;place-items:center;font-size:13px;transition:.2s}
.uye .sosyal a:hover{background:var(--a);color:#fff}

/* --- harita bandi --- */
.harita-band{position:relative;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,var(--p),var(--p2));
  padding:52px;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:36px;flex-wrap:wrap}
.harita-band::after{content:"";position:absolute;inset:0;opacity:.13;
  background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:48px 48px}
.harita-band > *{position:relative;z-index:2}
.harita-band h3{font-size:29px;font-weight:750;letter-spacing:-.02em}
.harita-band p{color:rgba(255,255,255,.82);margin-top:8px;max-width:46ch}
.harita-band .btn{background:#fff;color:var(--p)}
.harita-band .btn:hover{background:var(--soft)}

/* --- footer --- */
footer.alt{background:#0b1f2e;color:#93a9b8;padding:64px 0 26px;margin-top:76px;font-size:14.5px}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:40px}
footer.alt h4{color:#fff;font-size:15.5px;font-weight:650;margin-bottom:16px}
footer.alt ul{list-style:none;display:grid;gap:9px}
footer.alt a:hover{color:var(--a)}
footer.alt .logo{color:#fff;margin-bottom:14px}
.fbot{border-top:1px solid rgba(255,255,255,.09);margin-top:44px;padding-top:22px;
  display:flex;justify-content:space-between;font-size:13px;flex-wrap:wrap;gap:10px}

/* --- sayfa basligi --- */
.sayfa-bas{background:linear-gradient(120deg,var(--p),var(--p2));color:#fff;padding:46px 0}
.sayfa-bas h1{font-size:clamp(24px,3.2vw,34px);font-weight:750;letter-spacing:-.02em}
.sayfa-bas p{color:rgba(255,255,255,.78);margin-top:6px;font-size:15px}
.sayfa-bas .yol{font-size:13.5px;color:rgba(255,255,255,.66);margin-bottom:8px}
.sayfa-bas .yol a:hover{color:#fff}

/* --- liste duzeni: sol filtre + sag sonuclar --- */
.liste-duzen{display:grid;grid-template-columns:290px 1fr;gap:28px;align-items:start}
.filtre-ac{display:none;width:100%;margin-bottom:12px}
.filtre-govde{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;position:sticky;top:var(--yapisik)}
.fgrup{margin-bottom:18px}
.fgrup h4{font:700 11.5px/1 inherit;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
/* font kisaltmasi KULLANMAYIN: "font:14.5px/1.3 inherit" gecersizdir
   (inherit yalnizca declaration'in tamami olabilir), tarayici satiri komple
   atiyordu ve alanlar 14.5px yerine varsayilan 13.3px cikiyordu — mobilde
   de iOS'un 16px esiginin altinda kalip odaklaninca sayfayi zoomluyordu. */
.fgrup input[type=text],.fgrup input[type=number],.fgrup select{
  display:block;width:100%;border:1.5px solid var(--line);border-radius:9px;padding:10px 12px;
  font-size:14.5px;line-height:1.3;font-family:inherit;color:var(--ink);background:#fff}
.fgrup select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 16px) 18px,calc(100% - 11px) 18px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px}
.fgrup input:focus,.fgrup select:focus{outline:0;border-color:var(--a)}
.fgrup .ikili{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fgrup .ipucu{display:block;margin-top:7px;font-size:12px;color:var(--muted);line-height:1.45}
.secenekler{max-height:190px;overflow-y:auto;display:grid;gap:2px;padding-right:4px}
.secenekler::-webkit-scrollbar{width:6px}
.secenekler::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.onay{display:flex;align-items:center;gap:9px;padding:6px 4px;border-radius:7px;cursor:pointer;font-size:14px;transition:.15s}
.onay:hover{background:var(--soft)}
.onay input{width:16px;height:16px;accent-color:var(--a);cursor:pointer;flex:none}
.temizle{display:block;text-align:center;margin-top:10px;font-size:13.5px;color:var(--muted)}
.temizle:hover{color:var(--a)}

/* --- ilan detay --- */
.detay-duzen{display:grid;grid-template-columns:1fr 350px;gap:32px;align-items:start}
.galeri{margin-bottom:28px}
.galeri-buyuk{position:relative;border-radius:var(--r);overflow:hidden;background:var(--soft);aspect-ratio:16/10}
.galeri-buyuk img{width:100%;height:100%;object-fit:cover}
.galeri-buyuk.bos-foto{display:grid;place-items:center;color:var(--muted);font-size:14.5px}
.galeri-kucuk{display:flex;gap:10px;margin-top:10px;overflow-x:auto;padding-bottom:4px;scroll-behavior:smooth}
.galeri-kucuk img{width:104px;height:74px;object-fit:cover;border-radius:9px;cursor:pointer;
  border:2px solid transparent;transition:.18s;flex:none;opacity:.62}
.galeri-kucuk img:hover{border-color:var(--a);opacity:1}
.galeri-kucuk img.on{border-color:var(--a);opacity:1}

/* --- galeri gezinme --- */
.galeri-buyuk img{cursor:zoom-in}
.g-ok{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;cursor:pointer;
  border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;
  box-shadow:0 2px 12px rgba(0,0,0,.22);transition:.18s;z-index:3;opacity:0}
.galeri-buyuk:hover .g-ok,.g-ok:focus-visible{opacity:1}
.g-ok:hover{background:#fff;transform:translateY(-50%) scale(1.07)}
.g-ok.onceki{left:12px}
.g-ok.sonraki{right:12px}
.g-ok svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* Galeride yeni fotograf ilk kez aciliyorsa sunucuda o an uretiliyor ve
   birkac yuz milisaniye surebiliyor. Mevcut fotografi hafifce soldurmak
   "tiklandi, geliyor" bilgisini veriyor; onbellektekilerde hic gorunmez. */
.galeri-buyuk.yukleniyor img{opacity:.5;transition:opacity .12s}
.galeri-buyuk img{transition:opacity .18s}

.g-sayac{position:absolute;right:12px;bottom:12px;z-index:3;background:rgba(15,23,42,.72);color:#fff;
  font:600 12.5px/1 inherit;padding:7px 11px;border-radius:999px;letter-spacing:.02em}

/* Dokunmatikte hover yok - oklar hep gorunur.
   Genislik sorgusu da var: hover:none her ortamda guvenilir raporlanmiyor,
   dar ekranda okun gizli kalmasi kabul edilemez. */
@media(hover:none),(max-width:860px){ .g-ok{opacity:1} }

/* Mobilde galeri. Ana gorsel .wrap'in 20px'lik yan boslugu yuzunden dar
   kaliyor ve ilan vitrini zayif duruyordu; kenardan kenara aliniyor ve
   4/3'e cekiliyor - dikey alanin daha cogunu gorsel kapliyor.
   Kucuk onizlemeler 104px'te ekranin ucte birini yiyordu, 64px'e indi.
   Bu blok galeri kurallarinin SONUNDA durmali: ustte olsaydi asagidaki
   temel kurallar ezer, ozellikle .g-ok'un display'i geri gelirdi. */
@media(max-width:700px){
  /* Kenardan kenara. 100vw + translateX yerine negatif margin: vw kaydirma
     cubugunu sayip saymadigina gore degisiyor ve bazi tarayicilarda yatay
     tasma yapiyor. .wrap yan boslugu 20px, birebir onu geri aliyoruz. */
  .galeri-buyuk{margin-left:-20px;margin-right:-20px;
    border-radius:0;aspect-ratio:4/3}
  .galeri-kucuk{gap:6px;margin-top:8px;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .galeri-kucuk img{width:64px;height:48px;border-radius:6px;border-width:1.5px;
    scroll-snap-align:start;opacity:.75}
  /* Oklar bilerek gizlenmiyor: ustteki kural dokunmatikte gorunur
     yapiyor, parmakla kaydirma tek basina kesfedilebilir degil. */
  .g-ok{width:38px;height:38px}
  .g-ok.onceki{left:8px}
  .g-ok.sonraki{right:8px}
}

/* --- tam ekran gorunum --- */
.g-tam{position:fixed;inset:0;z-index:9500;background:rgba(8,12,20,.94);display:none;
  align-items:center;justify-content:center;padding:28px}
.g-tam.acik{display:flex}
.g-tam img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.g-tam .g-kapat{position:absolute;top:18px;right:20px;width:42px;height:42px;border:0;cursor:pointer;
  border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1}
.g-tam .g-kapat:hover{background:rgba(255,255,255,.26)}
.g-tam .g-ok{opacity:1;background:rgba(255,255,255,.16);color:#fff}
.g-tam .g-ok:hover{background:rgba(255,255,255,.3)}
.g-tam .g-sayac{left:50%;right:auto;transform:translateX(-50%);bottom:20px}

/* --- paylas --- */
.paylas{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}
.paylas .etiket-yazi{font-size:13px;color:var(--muted);margin-right:2px}
.paylas a,.paylas button{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);
  background:#fff;color:var(--ink);border-radius:9px;padding:8px 13px;font:600 13.5px/1 inherit;
  cursor:pointer;transition:.16s}
.paylas a:hover,.paylas button:hover{border-color:var(--a);color:var(--a)}
.paylas svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ilan-no{font-size:13px;color:var(--muted);margin-top:10px}
.ilan-no b{color:var(--ink);font-weight:650;letter-spacing:.02em}

.blok{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;margin-bottom:22px}
.blok h2{font-size:19px;font-weight:700;letter-spacing:-.01em;margin-bottom:16px}
.blok .metin{color:#334155;line-height:1.75;font-size:15.5px}

.oz-tablo{display:grid;grid-template-columns:repeat(2,1fr);gap:0 28px}
.oz-satir{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.oz-satir span{color:var(--muted)}
.oz-satir b{font-weight:650;text-align:right}

.oz-etiketler{display:flex;flex-wrap:wrap;gap:8px}
.oz-etiket{background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:8px 13px;font-size:13.5px;font-weight:500}

.detay-harita{height:380px;border-radius:10px;overflow:hidden;z-index:1}

/* --- 95 · video / sanal tur gömmesi ---
   Kutu tıklanana kadar yalnızca kendi kapak fotoğrafımızı gösterir;
   iframe JS ile sonradan giriyor (bkz. js/medya-gomme.js). */
.gomme{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;
  background:#0f172a;isolation:isolate}
.gomme.gomme-tur{aspect-ratio:3/2}
.gomme .gomme-kapak{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* Kapak burada içeriğin kendisi değil, arka plan: hafifçe karartıp
     bulanıklaştırınca oynat düğmesi her fotoğrafta okunur kalıyor. */
  filter:brightness(.62) saturate(.9);transform:scale(1.03)}
.gomme .gomme-ac{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;
  background:transparent;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;color:#fff;font:inherit;padding:20px}
.gomme .gomme-ac:focus-visible{outline:3px solid var(--a);outline-offset:-3px}
.gomme .gomme-oynat{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.85);
  backdrop-filter:blur(2px);transition:transform .18s,background .18s}
.gomme .gomme-oynat svg{width:38px;height:38px;fill:#fff;stroke:#fff;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
/* Oynat üçgeni dolu, tur küresi çizgi — ikisi aynı svg kuralını paylaşıyor. */
.gomme .gomme-oynat svg path,.gomme .gomme-oynat svg circle,.gomme .gomme-oynat svg ellipse{fill:none}
.gomme:not(.gomme-tur) .gomme-oynat svg path{fill:#fff;stroke:none}
.gomme-ac:hover .gomme-oynat{transform:scale(1.07);background:rgba(255,255,255,.28)}
.gomme .gomme-not{font-size:13px;font-weight:600;letter-spacing:.01em;
  text-shadow:0 1px 3px rgba(0,0,0,.55);text-align:center}
.gomme iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* Fotoğrafsız ilanda kapak yok; boş koyu kutu yerine hafif bir doku. */
.gomme:not(:has(.gomme-kapak)){background:linear-gradient(135deg,#1e293b,#0f172a)}
@media(max-width:560px){
  .gomme.gomme-tur{aspect-ratio:4/3}
  .gomme .gomme-oynat{width:60px;height:60px}
  .gomme .gomme-oynat svg{width:30px;height:30px}
}

/* --- "Yakında ne var?" — harita altındaki çevre bilgisi --- */
.cevre{margin-top:18px}
.cevre h3{font-size:16px;font-weight:700;margin-bottom:4px}
.cevre-not{font-size:13px;color:var(--muted);margin-bottom:12px}
.cevre-sekme{display:flex;flex-wrap:wrap;gap:8px}
.cevre-dugme{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  border:1.5px solid var(--line);background:var(--bg);color:inherit;
  border-radius:20px;padding:8px 14px;font:600 13.5px/1 inherit;transition:.16s}
.cevre-dugme:hover{border-color:var(--a)}
.cevre-dugme.on{background:var(--a);border-color:var(--a);color:#fff}
.cevre-liste{margin-top:12px;display:grid;gap:2px}
.cevre-liste:empty{margin-top:0}
.cevre-satir{display:flex;justify-content:space-between;gap:12px;align-items:center;
  padding:9px 12px;border-radius:8px;cursor:pointer;font-size:14px;transition:.14s}
.cevre-satir:nth-child(odd){background:var(--soft)}
.cevre-satir:hover{background:var(--a);color:#fff}
.cevre-satir b{flex:none;font-size:13px;opacity:.85}
.cevre-bos{font-size:13.5px;color:var(--muted);padding:8px 0}

/* yan sutun */
.detay-yan{position:sticky;top:var(--yapisik);display:grid;gap:18px}
.fiyat-kart{background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;border-radius:var(--r);padding:24px}
.fiyat-kart .fiyat{font-size:29px;font-weight:800;color:#fff;letter-spacing:-.02em}
.fiyat-kart .fiyat small{color:rgba(255,255,255,.75)}
.kat-etiket{display:inline-block;margin-top:10px;background:rgba(255,255,255,.18);padding:5px 11px;border-radius:6px;font-size:12.5px;font-weight:600}

.danisman-kart,.talep-kart{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px}
.danisman-kart .ust{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.avatar.buyuk{width:52px;height:52px;font-size:18px}
.danisman-kart .ust b{display:block;font-size:15.5px;font-weight:650}
.danisman-kart .ust small{color:var(--muted);font-size:13px}
.danisman-kart .butonlar{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.danisman-kart .butonlar .btn{padding:12px;font-size:14px}
.profil-link{display:block;text-align:center;margin-top:13px;font-size:13.5px;color:var(--a);font-weight:600}
.talep-kart h3{font-size:17px;font-weight:700;margin-bottom:14px}
.talep-kart input,.talep-kart textarea{width:100%;border:1.5px solid var(--line);border-radius:9px;
  padding:11px 13px;font:14.5px inherit;color:var(--ink);margin-bottom:9px;font-family:inherit}
.talep-kart input:focus,.talep-kart textarea:focus{outline:0;border-color:var(--a)}
.uyari{padding:13px 15px;border-radius:9px;font-size:14px;line-height:1.5}
.uyari.basarili{background:#ecfdf5;color:#065f46;border:1px solid #6ee7b7}
.uyari.hata{background:#fef2f2;color:#991b1b;border:1px solid #fca5a5;margin-bottom:12px}

/* --- sekmeler (proje filtreleri) --- */
.sekmeler{display:flex;gap:8px;margin-bottom:30px;flex-wrap:wrap}
.sekmeler a{padding:10px 18px;border-radius:9px;border:1.5px solid var(--line);font-weight:600;font-size:14.5px;transition:.18s;background:#fff}
.sekmeler a:hover{border-color:var(--a);color:var(--a)}
.sekmeler a.on{background:var(--a);border-color:var(--a);color:#fff}

/* --- bilgi kartlari (hakkimizda) --- */
.kartlar-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.bilgi-kart{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;transition:.22s}
.bilgi-kart:hover{border-color:var(--a);box-shadow:var(--sh);transform:translateY(-4px)}
.bilgi-kart .ic{width:54px;height:54px;border-radius:14px;background:var(--soft);display:grid;place-items:center;font-size:24px;margin-bottom:14px}
.bilgi-kart b{display:block;font-size:17px;font-weight:700;margin-bottom:6px}
.bilgi-kart p{color:var(--muted);font-size:14.5px}

/* --- iletisim --- */
.iletisim-duzen{display:grid;grid-template-columns:1fr 380px;gap:28px;align-items:start}
.iletisim-form input,.iletisim-form textarea{width:100%;border:1.5px solid var(--line);border-radius:9px;
  padding:12px 14px;font-size:15px;font-family:inherit;color:var(--ink);margin-bottom:11px}
.iletisim-form input:focus,.iletisim-form textarea:focus{outline:0;border-color:var(--a)}
.iletisim-liste{list-style:none;display:grid;gap:0}
.iletisim-liste li{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.iletisim-liste li:last-child{border-bottom:0}
.iletisim-liste span{color:var(--muted);flex:none}
.iletisim-liste b{font-weight:650;text-align:right}
.iletisim-liste a:hover{color:var(--a)}
.iletisim-butonlar{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}
.yol-tarifi{display:flex;width:100%;margin-top:9px;gap:8px}
.yol-tarifi svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.ofis-harita{height:380px;border-radius:var(--r);overflow:hidden;z-index:1;border:1px solid var(--line)}

/* --- Ziyaretçi ilan gönderme formu ---
   Kendi sınıf öneki (ig-) var: public temada .alan zaten arama çubuğunun
   alanı, onu kullansaydık form paramparça görünürdü. */
/* DIKKAT: burada "font:15px inherit" gibi bir kisaltma KULLANMAYIN.
   CSS-genel anahtar kelimeler (inherit) yalnizca declaration'in TAMAMI
   olabilir; font kisaltmasinin aile bolumunde gecersizdir ve tarayici
   declaration'i komple atar. Bu formda oyleydi: etiketler 600 13px yerine
   400 16px, girdiler 15px yerine tarayici varsayilani 13.3px cikiyordu.
   font-size / font-weight ayri ayri yaziliyor. */
.ig-form{max-width:820px;margin:0 auto}
.ig-baslik{font-size:19px;font-weight:700;margin:26px 0 14px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.ig-baslik:first-child{margin-top:0}
.ig-satir{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.ig-alan{margin-bottom:15px;min-width:0}
.ig-alan label{display:block;font-size:13px;font-weight:600;line-height:1.3;margin-bottom:6px;color:var(--ink)}
.ig-alan input,.ig-alan select,.ig-alan textarea{width:100%;border:1.5px solid var(--line);border-radius:9px;
  padding:12px 14px;font-size:15px;font-family:inherit;color:var(--ink);background:var(--bg)}
.ig-alan input:focus,.ig-alan select:focus,.ig-alan textarea:focus{outline:0;border-color:var(--a);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--a) 18%,transparent)}
.ig-alan input[type=file]{padding:14px;background:var(--soft);cursor:pointer;
  border-style:dashed;font-size:14px}
.ig-ipucu{display:block;font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.5}
.ig-zorunlu{color:#dc2626}
.ig-onay{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.55;cursor:pointer}
.ig-onay input{width:auto;flex:none;margin-top:3px}
.ig-harita{height:300px;border-radius:10px;overflow:hidden;z-index:1;border:1.5px solid var(--line)}
.ig-gonder{width:100%;justify-content:center;padding:15px;font-size:16px;font-weight:600}
.ig-basari{max-width:600px;margin:0 auto;text-align:center;background:var(--soft);
  border:1px solid var(--line);border-radius:var(--r);padding:44px 30px}
.ig-basari h2{font-size:23px;margin-bottom:12px}
.ig-basari p{color:var(--muted);line-height:1.65;margin-bottom:22px}

@media(max-width:560px){
  /* 16px ALTINA INMEYIN: iOS Safari daha kucuk yazili bir alana
     odaklaninca sayfayi otomatik buyutuyor ve geri dondurmuyor. */
  .ig-alan input,.ig-alan select,.ig-alan textarea{font-size:16px;padding:13px 14px;min-height:48px}
  .ig-alan input[type=file]{min-height:0;font-size:14px}
  .ig-alan{margin-bottom:13px}
  .ig-alan label{font-size:13.5px}

  /* Kisa sayisal alanlar tek sutunda gereksiz yer kapliyordu: fiyat + para
     birimi ve m2 + oda ikili duruyor, form bir ekran kisaliyor. */
  .ig-satir.kisa{grid-template-columns:1fr 1fr;gap:10px}

  .ig-bolum{background:var(--soft);border:1px solid var(--line);border-radius:12px;
    padding:16px 14px;margin-bottom:16px}
  .ig-bolum .ig-alan:last-child{margin-bottom:0}
  .ig-baslik{font-size:16px;margin:0 0 14px;padding-bottom:8px}

  .ig-harita{height:230px}
  /* Sticky yapmadik: sabit iletisim butonu (z-index 8500) mobilde sag altta
     duruyor, yapisan bir gonder cubugu onun altina giriyordu. */
  .ig-gonder{padding:16px}
  .ig-basari{padding:32px 20px}
  .ig-basari h2{font-size:20px}
}

/* --- veri tablosu --- */
.tablo-sar{overflow-x:auto}
.veri-tablo{width:100%;border-collapse:collapse;font-size:14.5px;min-width:380px}
.veri-tablo th{text-align:left;padding:11px 12px;background:var(--soft);font:700 11.5px/1 inherit;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.veri-tablo td{padding:13px 12px;border-bottom:1px solid var(--line)}
.veri-tablo tr:last-child td{border-bottom:0}

/* --- harita sayfasi (sol liste + sag harita) --- */
.harita-sayfa{display:grid;grid-template-columns:380px 1fr;height:calc(100dvh - 116px);min-height:520px}
.harita-liste{display:flex;flex-direction:column;border-right:1px solid var(--line);background:#fff;min-height:0}
.harita-liste-bas{padding:16px 18px;border-bottom:1px solid var(--line);font-size:14.5px}
.harita-liste-bas b{color:var(--p)}
.harita-liste-bas small{display:block;color:var(--muted);font-size:12.5px;margin-top:3px}
.harita-liste-govde{overflow-y:auto;flex:1;min-height:0}
.mini-kart{border-bottom:1px solid var(--line);transition:.15s}
.mini-kart:hover{background:var(--soft)}
.mini-kart a{display:flex;gap:12px;padding:12px 14px}
.mini-foto{width:92px;height:70px;border-radius:8px;overflow:hidden;background:var(--soft);flex:none}
.mini-foto img{width:100%;height:100%;object-fit:cover}
.mini-govde{min-width:0}
.mini-fiyat{font-weight:800;color:var(--p);font-size:15px}
.mini-baslik{font-size:13.5px;font-weight:600;margin:2px 0;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini-konum{font-size:12.5px;color:var(--muted)}
.harita-alan{z-index:1}

/* Harita/liste sekmesi — yalnizca dar ekranda. Masaustunde ikisi zaten
   yan yana duruyor, sekmeye gerek yok. */
.harita-sekme{display:none;gap:2px;padding:8px 12px;background:var(--soft);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.harita-sekme button{flex:1;border:0;cursor:pointer;background:transparent;color:var(--muted);
  font:600 14.5px/1 inherit;padding:11px;border-radius:9px;transition:.16s}
.harita-sekme button.on{background:var(--a);color:#fff}

/* --- harita onay kapısı ---
   Karolar üçüncü taraftan (OSM / Esri / CARTO) geliyor; ziyaretçi
   onaylayana kadar harita yerine bu kutu duruyor. Bkz. js/harita-onay.js */
.harita-kapali{position:relative;background:var(--soft);
  background-image:
    linear-gradient(rgba(148,163,184,.22) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.22) 1px,transparent 1px);
  background-size:38px 38px}
.harita-yer-tutucu{position:absolute;inset:0;display:grid;place-items:center;
  padding:22px;text-align:center;z-index:2}
.harita-yer-tutucu .hyt-ic{max-width:400px}
.harita-yer-tutucu .hyt-ikon{display:grid;place-items:center;width:52px;height:52px;
  margin:0 auto 12px;border-radius:50%;background:#fff;border:1px solid var(--line)}
.harita-yer-tutucu .hyt-ikon svg{width:26px;height:26px;fill:none;stroke:var(--a);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.harita-yer-tutucu b{display:block;font-size:16px;font-weight:700;margin-bottom:7px}
.harita-yer-tutucu p{color:var(--muted);font-size:13.5px;line-height:1.55;margin-bottom:15px}
.harita-yer-tutucu .hyt-dugme{border:0;cursor:pointer;background:var(--a);color:#fff;
  border-radius:9px;padding:12px 22px;font:650 14.5px/1 inherit}
.harita-yer-tutucu .hyt-dugme:hover{filter:brightness(1.07)}
.harita-yer-tutucu .hyt-hatirla{display:flex;align-items:center;justify-content:center;
  gap:7px;margin-top:12px;font-size:12.5px;color:var(--muted);cursor:pointer}
.harita-yer-tutucu .hyt-hatirla input{width:15px;height:15px;accent-color:var(--a);cursor:pointer}
@media(max-width:560px){
  .harita-yer-tutucu p{font-size:12.5px}
  .harita-yer-tutucu .hyt-ikon{width:44px;height:44px;margin-bottom:9px}
}

/* --- 96 · blog --- */
.yazi-grid{align-items:stretch}
.yazi-kart{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:.25s}
.yazi-kart:hover{transform:translateY(-6px);box-shadow:var(--sh2);border-color:transparent}
.yazi-kart .foto{position:relative;height:190px;background:var(--soft);overflow:hidden;display:block}
.yazi-kart .foto img{width:100%;height:100%;object-fit:cover;transition:.4s}
.yazi-kart:hover .foto img{transform:scale(1.05)}
.yazi-kart .foto .yok{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:13px}
.yazi-kart .govde{padding:20px;flex:1;display:flex;flex-direction:column}
.yazi-kart .ust-bilgi{font-size:12.5px;color:var(--muted);margin-bottom:8px}
.yazi-kart h2{font-size:17.5px;font-weight:700;line-height:1.35;letter-spacing:-.01em;margin-bottom:9px}
.yazi-kart h2 a:hover{color:var(--a)}
.yazi-kart p{color:#475569;font-size:14.5px;line-height:1.6;flex:1}
.yazi-kart .devam{display:inline-block;margin-top:14px;font-size:13.5px;font-weight:650;color:var(--a)}

/* Etiket şeridi — blog listesinin üstündeki filtre */
.etiket-serit{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.etiket-serit a{border:1.5px solid var(--line);background:#fff;border-radius:20px;padding:8px 15px;
  font-size:13.5px;font-weight:500;transition:.18s}
.etiket-serit a:hover{border-color:var(--a);color:var(--a)}
.etiket-serit a.on{background:var(--a);border-color:var(--a);color:#fff}

/* Yazı gövdesi — okunabilirlik için dar ölçü. 65-75 karakter satır
   uzunluğu uzun metinde göz yormuyor; tam genişlik satırda okuyucu
   satır başını kaybediyor. */
.yazi-sar{max-width:840px}
.yazi-kapak{margin:0 0 28px;border-radius:var(--r);overflow:hidden}
.yazi-kapak img{width:100%;height:auto;display:block}
.yazi-metin{color:#334155;font-size:16.5px;line-height:1.8}
.yazi-metin p{margin-bottom:18px}
.yazi-metin h2{font-size:23px;font-weight:750;letter-spacing:-.015em;color:var(--ink);margin:34px 0 14px}
.yazi-metin ul{margin:0 0 18px;padding-left:22px;list-style:disc}
.yazi-metin li{margin-bottom:8px}
.yazi-metin>*:first-child{margin-top:0}

.yazi-etiketler{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:30px;
  padding-top:22px;border-top:1px solid var(--line)}
.yazi-etiketler .etiket-yazi{font-size:13px;color:var(--muted);margin-right:2px}
.yazi-etiketler a{background:var(--soft);border:1px solid var(--line);border-radius:8px;
  padding:7px 12px;font-size:13px;font-weight:500}
.yazi-etiketler a:hover{border-color:var(--a);color:var(--a)}

.yazi-yazar{display:flex;gap:15px;align-items:center;margin-top:30px;padding:20px;
  background:var(--soft);border:1px solid var(--line);border-radius:var(--r)}
.yazi-yazar img,.yazi-yazar .avatar{width:58px;height:58px;border-radius:50%;object-fit:cover;flex:none}
.yazi-yazar .avatar{display:grid;place-items:center;background:var(--a);color:#fff;
  font-weight:700;font-size:22px}
.yazi-yazar b{display:block;font-size:15.5px;font-weight:700}
.yazi-yazar small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.yazi-yazar a{display:inline-block;margin-top:6px;font-size:13.5px;font-weight:600;color:var(--a)}

.bos-liste{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:48px 26px;text-align:center}
.bos-liste b{display:block;font-size:17px;font-weight:700;margin-bottom:6px}
.bos-liste span{color:var(--muted);font-size:14.5px}

@media(max-width:560px){
  .yazi-metin{font-size:15.5px}
  .yazi-metin h2{font-size:20px;margin:26px 0 12px}
  .yazi-kart .foto{height:170px}
}

/* --- sayfalama --- */
.sayfalama{display:flex;justify-content:center;gap:6px;margin-top:34px;flex-wrap:wrap}
.sayfalama a{min-width:40px;height:40px;padding:0 12px;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:9px;font-weight:600;font-size:14.5px;background:#fff;transition:.18s}
.sayfalama a:hover{border-color:var(--a);color:var(--a)}
.sayfalama a.on{background:var(--a);border-color:var(--a);color:#fff}

/* --- sabit iletisim butonu ------------------------------------
   Her sayfada durur, site ayarindan kapatilabilir.
   Masaustu: sag altta yuvarlak butonlar.
   Mobil: ekranin altina yapisan tam genislikte cubuk.
   -------------------------------------------------------------- */
.sabit-iletisim{position:fixed;right:18px;bottom:18px;z-index:8500;display:flex;
  flex-direction:column;gap:10px;align-items:flex-end}
.si-btn{display:inline-flex;align-items:center;gap:9px;height:52px;padding:0 17px;border-radius:999px;
  color:#fff;font:650 14.5px/1 inherit;box-shadow:0 4px 18px rgba(0,0,0,.26);transition:.18s;white-space:nowrap}
.si-btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.32)}
.si-btn svg{width:23px;height:23px;fill:currentColor;flex:none}
.si-wa{background:#25d366}
.si-wa:hover{background:#1fb457}
.si-tel{background:var(--p)}
.si-tel:hover{background:var(--p2)}

/* Masaustunde yalnizca ikon; uzerine gelince yazi acilir - koseyi mesgul etmesin. */
@media(min-width:861px){
  .si-metin{max-width:0;overflow:hidden;opacity:0;transition:max-width .22s,opacity .18s}
  .si-btn:hover .si-metin,.si-btn:focus-visible .si-metin{max-width:120px;opacity:1}
}

@media(max-width:860px){
  .sabit-iletisim{left:0;right:0;bottom:0;flex-direction:row;gap:0;align-items:stretch}
  .si-btn{flex:1;justify-content:center;height:56px;border-radius:0;box-shadow:none;font-size:15px}
  .si-btn:hover{transform:none}
  /* Cubuk icerigin uzerine binmesin. */
  body{padding-bottom:56px}
  footer.alt{margin-bottom:0}
}

/* --- responsive --- */
@media(max-width:1100px){
  .kats{grid-template-columns:repeat(3,1fr)}
  .ekip{grid-template-columns:repeat(2,1fr)}
  .harita-sayfa{grid-template-columns:320px 1fr}
}
@media(max-width:980px){
  .detay-duzen{grid-template-columns:1fr}
  .detay-yan{position:static}
  .oz-tablo{grid-template-columns:1fr}
  .iletisim-duzen,.kartlar-3{grid-template-columns:1fr}
  /* Sekmeli mod: harita ve liste ust uste degil, biri ekranin tamami.
     Eskiden liste ustte 44vh + harita altta 60vh vardi; toplam ekrani
     asiyordu ve harita sayfasina girip haritayi gormek icin kaydirmak
     gerekiyordu. */
  .harita-sekme{display:flex}
  .harita-sayfa{grid-template-columns:1fr;grid-template-rows:1fr;
    height:calc(100dvh - 164px);min-height:420px}
  .harita-liste{display:none;border-right:0;max-height:none}
  .harita-sayfa.liste-acik .harita-liste{display:flex}
  .harita-sayfa.liste-acik .harita-alan{display:none}
  .liste-duzen{grid-template-columns:1fr}
  .filtre-ac{display:block}
  .filtre-govde{display:none;position:static}
  .filtre-govde.acik{display:block}
  .topbar{display:none}
  .nav-ac{display:block}
  /* Cekmece acikken hamburger gizlenir. z-index:70 ile cekmecenin (60)
     ustunde durdugu icin, kapatma dugmesinin tam uzerine binip ikinci bir
     X gibi gorunuyordu. Kapatma isi .menu-bas'taki dugmede ve perdede.
     visibility: display:none olsaydi cekmece kapanirken buton bir kare
     erken geri gelip zipliyordu. */
  .nav-ac.acik{visibility:hidden}
  .nav-tel{display:none}

  /* KRITIK: backdrop-filter, icindeki position:fixed elemanlar icin KAPSAYICI
     BLOK olusturur. Blur acik kalirsa cekmece viewport'a degil navbar'a gore
     konumlanir ve yuksekligi navbar kadar (--nav-h) kalir. Mobilde blur'u
     kaldiriyoruz; zaten gorsel bir sustan ibaret, islevsel karsiligi yok. */
  /* z-index: cekmece ve perde nav'in yigilma baglami icinde kaldigi icin
     disariya karsi TEK seviye olarak davraniyorlar. Sabit iletisim butonu
     (8500) ve demo paneli (9000) acik cekmecenin uzerine binmesin diye
     nav CEKMECE ACIKKEN bunlarin ustune cikiyor.
     Cekmece KAPALIYKEN nav'i 9500'de tutmak demo panelini menu seridinin
     altinda birakiyordu: panelin ust seridindeki kapatma X'i menunun arkasina
     dusuyor ve ziyaretci paneli kapatamiyordu. Sinifi _Layout'taki ayarla()
     takip cikariyor. */
  nav.ust{-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff;z-index:8000}
  nav.ust.cekmeceAcik{z-index:9500}

  /* --- yandan kayan menu cekmecesi ---
     Ekranin sagindan girer. display:none yerine transform kullaniliyor ki
     acilip kapanma animasyonlu olsun; kapaliyken visibility ile klavye
     odagindan da cikarilir. */
  .menu{
    position:fixed;top:0;right:0;bottom:0;left:auto;
    width:min(86vw,340px);max-width:none;
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    background:#fff;box-shadow:-8px 0 40px rgba(8,15,26,.22);
    padding:0 0 24px;margin:0;z-index:60;
    overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(100%);visibility:hidden;
    transition:transform .3s cubic-bezier(.4,0,.2,1),visibility .3s;
  }
  .menu.acik{transform:translateX(0);visibility:visible}

  .menu-bas{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:18px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2}
  .menu-bas span{font-weight:750;font-size:16px;letter-spacing:-.01em;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .menu-bas button{background:none;border:0;font-size:30px;line-height:1;cursor:pointer;
    color:var(--muted);padding:0 4px}
  .menu-bas button:hover{color:var(--ink)}

  .menu > li{border-bottom:1px solid var(--line)}
  .menu > li:last-child{border-bottom:0}
  .menu a{padding:15px 20px;border:0;font-size:15.5px}
  .menu a:hover,.menu a.on{background:var(--soft);border:0;color:var(--a)}

  /* Alt menuler acik listelenir - cekmecede ayrica acilir menu istenmiyor. */
  .menu .alt{position:static;display:block;border:0;box-shadow:none;
    padding:0 0 8px;background:var(--soft);border-radius:0;min-width:0}
  .menu .alt a{padding:11px 20px 11px 34px;font-size:14.5px;border-radius:0}

  .menu-alt{display:grid;gap:8px;padding:18px 20px 0;border-bottom:0 !important;margin-top:auto}
  .menu-alt .btn{width:100%}
  .alanlar{grid-template-columns:1fr 1fr}
  /* Dar ekranda ayrac dikey degil yatay olmali. */
  .alan + .alan::before{left:15px;right:15px;top:0;bottom:auto;transform:none;
    width:auto;height:1px}
  .alan:nth-child(2)::before{display:none}
  .arama .btn{grid-column:span 2;padding:15px;margin-top:4px}
  .sayac{grid-template-columns:repeat(2,1fr);margin-top:-30px}
  .grid,.grid.g2,.projeler,.fgrid{grid-template-columns:1fr}
  .sec{padding:52px 0}
  .harita-band{padding:34px}
}
@media(max-width:560px){
  .kats{grid-template-columns:repeat(2,1fr)}
  .ekip{grid-template-columns:1fr}
  .alanlar{grid-template-columns:1fr}
  .alan:nth-child(2)::before{display:block}
  .arama .btn{grid-column:span 1}
}

/* --- mobilde zorla yakinlastirmayi engelle ---
   iOS Safari, 16px'ten kucuk yazili bir alana odaklaninca sayfayi kendiliginden
   buyutuyor ve geri dondurmuyor. Kullanici her form alanina dokundugunda site
   "kayiyor". Anasayfa arama kutusu (.alan) bunu zaten yapiyordu; ayni esik tum
   form alanlari icin gecerli olmali.

   Cozum viewport'a "user-scalable=no" koymak DEGIL: o, yakinlastirmayi tamamen
   kapatir ve az goren kullaniciyi siteden diser. Yalnizca yaziyi buyutuyoruz. */
@media(max-width:900px){
  .fgrup input[type=text],.fgrup input[type=number],.fgrup select,
  .iletisim-form input,.iletisim-form textarea,
  .arama input,.arama select{font-size:16px}
}