/* ============================================================
   Tema: zarif  (Zarif — Lacivert & Altın)  — 168
   ------------------------------------------------------------
   taban.css'ten SONRA, palet :root'undan ÖNCE yüklenir.
   Renkler paletten gelir: --p lacivert, --a altın, --a2 koyu altın.

   Referans: müşterinin beğendiği "sade portal" görünümü —
     1. Lacivert üst blok, ortada menü, aktif sayfada altın çizgi,
        sağda telefon + yeşil WhatsApp.
     2. Beyaz kart: fotoğraf üstte; sol üstte durum rozeti
        (Satılık lacivert, Kiralık altın), sağ üstte kalp, sol altta
        "İlan No". Altında başlık (tek satır), konum, özellik satırı,
        en altta fiyat ile "Detayları Gör".
     3. İlan listesi tam genişlik 3'lü ızgara: süzgeç sol üstteki
        "Filtrele" düğmesiyle soldan açılan çekmece, sağ üstte
        "Sırala".

   Temaya özgü işaretleme (.kart-no, .kart-tip, .kart-detay, .nav-wa,
   .sira-ust) taban.css'te GİZLİ başlıyor; burada açılıyor.

   ALTIN ÜSTÜNE BEYAZ OKUNMUYOR (#b8914a üstünde beyaz ≈ 2.9).
   --a-yazi laciverte çekiliyor; altın METİN gereken yerde --a2.
   ============================================================ */

:root{
  --ilan-duzeni:"g3";
  /* 169 — vurgu zemini ustundeki yazi MARKA rengi: varsayilan
     paletle lacivert, sari-siyah bir paletle siyah. */
  --a-yazi:var(--p);
  --r:10px;
  --line:#e7e9ee;
  --sh:0 1px 2px rgba(19,35,63,.05),0 6px 20px rgba(19,35,63,.07);
  --sh2:0 12px 34px rgba(19,35,63,.15);
  --serif:Georgia,"Times New Roman",Times,serif;
}

/* ------------------------------------------------------------
   1. ÜST BLOK
   ------------------------------------------------------------ */
/* 169 — ust bar YOK: referansta sayfa dogrudan logo + menu ile
   basliyor. Iletisim zaten menude (telefon + WhatsApp); favoriler
   ilan kartindaki kalpte ve mobil cekmecede. */
.topbar{display:none}
nav.ust{
  background:var(--p);
  border-bottom:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
nav.ust .logo{color:#fff}
nav.ust .logo .mark{background:var(--a);border-radius:6px}
nav.ust .nav-ac span{background:#fff}

/* Beyaz bağlantılar YALNIZCA masaüstünde: 980px altında menü beyaz
   bir çekmece (bkz. ofis teması, aynı karar). */
@media(min-width:981px){
  nav.ust .menu{margin:0 auto;gap:30px}
  nav.ust .menu > li > a{color:rgba(255,255,255,.88);font-weight:600;padding:28px 0 24px;border-bottom-width:2px}
  nav.ust .menu > li > a:hover{color:#fff;border-color:transparent}
  nav.ust .menu > li > a.on{color:var(--a);border-color:var(--a)}
  nav.ust .menu .alt{border-radius:8px;box-shadow:var(--sh2)}

  nav.ust .nav-tel{
    margin-left:0;background:transparent;border:0;color:#fff;
    font-weight:700;font-size:15.5px;padding:10px 6px;
  }
  nav.ust .nav-tel::before{
    content:"";width:17px;height:17px;flex:none;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  nav.ust .nav-tel:hover{background:transparent;color:var(--a);transform:none}

  /* WhatsApp yeşili: marka yeşili #25d366 üstünde beyaz 2.0 —
     okunur koyu tonu (≈4.6) kullanılıyor. */
  nav.ust .nav-wa{
    display:inline-flex;margin-left:6px;background:#128c4a;color:#fff;
    border-radius:999px;font-weight:700;padding:10px 18px;
  }
  nav.ust .nav-wa::before{
    content:"";width:17px;height:17px;flex:none;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.1 5.1 0 0 0 1.1 2.7 11.7 11.7 0 0 0 4.5 4c1.7.7 2.3.8 3.2.6a2.7 2.7 0 0 0 1.8-1.2 2.2 2.2 0 0 0 .1-1.3c0-.1-.2-.2-.5-.3z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.1 5.1 0 0 0 1.1 2.7 11.7 11.7 0 0 0 4.5 4c1.7.7 2.3.8 3.2.6a2.7 2.7 0 0 0 1.8-1.2 2.2 2.2 0 0 0 .1-1.3c0-.1-.2-.2-.5-.3z'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  nav.ust .nav-wa:hover{background:#0f7a40;color:#fff}
}

/* ------------------------------------------------------------
   2. GENEL DİL
   ------------------------------------------------------------ */
/* 171 — ilan BASLIKLARI (kart + detay sayfasi) serif degil: musteri
   "daha kurumsal" istedi. Serif yalnizca vitrin basliklarinda kaldi. */
.hero h1,.h2{font-family:var(--serif);letter-spacing:-.01em}
.sayfa-bas h1{letter-spacing:-.02em}
.btn{border-radius:8px;font-weight:700}
.btn-p{color:#fff}
.btn-p:hover{color:#fff}
.eyebrow{color:var(--a2);letter-spacing:.14em}

/* 172 — anasayfadaki "Aktif ilan / Proje / Danışman / Hizmet bölgesi"
   sayac seridi yok (musteri istegi). Taban hero'nun altina 130px bosluk
   birakiyor, cunku serit hero'ya -42px biniyordu; serit gidince o
   bosluk da sade bir alt pay oluyor. */
.sayac{display:none}

/* Slider yuksekligi DOLGUDAN degil ekrandan geliyor; metin dikeyde ortada.
   172'de 16:9 (resim tam gorunsun) yapilmisti; 173'te musteri "ekranin
   yarisi yeter" dedi: ekranin yarisi, metnin sigacagi 380px'in altina
   inmiyor. Resim yine cover — tam gorunmesi icin genis (≈3:1) resim. */
.hero .slayt{
  display:flex;align-items:center;padding:56px 0;
  min-height:max(380px, 50vh);
}
.hero .slayt > .wrap{width:100%}

.sayfa-bas{background:var(--p);padding:44px 0}
.sayfa-bas h1{font-weight:700}

/* ------------------------------------------------------------
   3. İLAN KARTI
   ------------------------------------------------------------ */
.kart{border-radius:12px;border:1px solid var(--line);box-shadow:var(--sh)}
.kart:hover{transform:translateY(-4px);box-shadow:var(--sh2);border-color:var(--line)}
.kart:hover .foto img{transform:scale(1.03)}
/* 169 — 16:10, ilan detayindaki galeriyle ayni oran: panelde onerilen
   1600x1000 fotograf kartta da kirpilmadan oturuyor. */
.kart .foto{height:auto;aspect-ratio:16/10}

/* Durum rozeti: Satılık lacivert, Kiralık altın. İşaretlemede
   kiralık "koyu" sınıfı taşıyor; yalnızca İLK rozet (durum)
   altına çevriliyor, "Satıldı/Kiralandı" lacivert kalıyor. */
.rozet{background:var(--p);color:#fff;border-radius:6px;font-size:12px;padding:7px 11px;letter-spacing:.01em}
.rozetler > .rozet.koyu:first-child{background:var(--a);color:var(--a-yazi)}
.rozet.one{background:var(--ustu);color:var(--p)}
.medya-rozet{border-radius:6px}

.kart .kart-no{
  display:block;position:absolute;left:12px;bottom:12px;z-index:2;
  background:rgba(15,23,42,.62);color:#fff;font-size:12px;font-weight:600;
  line-height:1;padding:6px 9px;border-radius:5px;pointer-events:none;
}
/* EİDS rozeti de sol altta: varsa ilan no onun sağına kayıyor. */
.kart .foto .eids-foto-rozet ~ .kart-no{left:58px}

/* Gövde: başlık → konum → özellikler → (fiyat | Detayları Gör).
   Grid: fiyat ile düğme aynı satırda, uzun fiyat düğmeyi itmiyor. */
/* Başlık iki satırı doldurmuyorsa boşluk başlığın altında değil
   fiyatın ÜSTÜNDE toplanıyor (son satır 1fr): fiyatlar yan yana
   kartlarda yine aynı hizada. */
.kart .govde{
  display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto 1fr;
  align-items:center;column-gap:12px;padding:18px 18px 18px;
}
.kart .govde > h3{grid-row:1;grid-column:1/-1}
.kart .govde > .konum{grid-row:2;grid-column:1/-1}
.kart .govde > .ozellikler{grid-row:3;grid-column:1/-1}
.kart .govde > .fiyat{grid-row:4;grid-column:1;margin-top:10px;align-self:end}
.kart .govde > .kart-detay{grid-row:4;grid-column:2;margin-top:10px;align-self:end}

/* 171 — baslik TEK SATIR, sigmayan kisim "..." ile kesiliyor (tamami
   uzerine gelince title balonunda). Iki satira tasan baslik yan
   kartlarla hizayi bozuyor, kisa baslikli kartta fiyat asagida
   kaliyordu. Yazi kurumsal: sistem yazi tipi, kalin, koyu metin. */
.kart h3{
  font-family:inherit;font-size:16.5px;font-weight:700;letter-spacing:-.01em;
  color:var(--ink);margin:0 0 6px;line-height:1.35;min-height:0;
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  -webkit-line-clamp:unset;
}
.kart h3 a:hover{color:var(--a2)}

.kart .konum{display:flex;align-items:flex-start;gap:6px;font-size:13.5px;line-height:1.4}
.kart .konum::before{
  content:"";width:15px;height:15px;flex:none;margin-top:1px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
}
.kart .konum:empty{display:none}

/* Özellik satırı: kutu değil, tek satır "değer etiket" dizisi.
   En fazla ÜÇ özellik + emlak tipi; dördüncüsü (bina yaşı vb.)
   ayrıntı sayfasında. */
/* 171 — ozellik satiri da TEK SATIR: "Stüdyo (1+0)" gibi uzun bir
   deger satiri ikiye bolup ayni siradaki kartlarda fiyati asagi
   itiyordu. Sigmayan deger "..." ile kisaliyor. */
.kart .ozellikler{
  display:flex;flex-wrap:nowrap;gap:6px 14px;margin-top:12px;padding-top:0;border-top:0;
  overflow:hidden;
}
.kart .ozellikler > div{
  flex:0 1 auto;min-width:0;white-space:nowrap;text-align:left;border-right:0;padding:0;
  display:inline-flex;align-items:baseline;gap:4px;font-size:13.5px;
}
.kart .ozellikler > div::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--a);
  align-self:center;margin-right:3px;flex:none;
}
.kart .ozellikler b{font-size:14px;font-weight:600;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis}
.kart .ozellikler span{font-size:12.5px;text-transform:lowercase;letter-spacing:0}
.kart .ozellikler > .kart-tip{order:9}
.kart .ozellikler > .kart-tip b{font-weight:500;color:var(--ink-yumusak)}
.kart .ozellikler > .kart-tip ~ div:nth-of-type(n+5),
.kart .ozellikler > div:first-child:not(.kart-tip) ~ div:nth-of-type(n+4){display:none}

.kart .fiyat{font-size:20px;font-weight:800;color:var(--p-metin);letter-spacing:-.01em}
.kart .fiyat small{font-size:13px}

.kart .kart-detay{
  display:inline-block;white-space:nowrap;
  border:1.5px solid var(--a);color:var(--a2);background:transparent;
  font-size:13px;font-weight:600;line-height:1;padding:8px 14px;border-radius:999px;
  transition:.16s;
}
.kart .kart-detay:hover{background:var(--a);color:var(--a-yazi)}

/* Danışman şeridi: referansta yok, kart sade kalsın. */
.kart .alt{display:none}

/* Yoğun ve liste görünümleri (ziyaretçi seçerse) dar kalıyor. */
.grid.yogun .kart h3{font-size:14.5px}
.grid.yogun .kart .kart-detay{display:none}
.grid.yogun .kart .govde > .fiyat{grid-column:1/-1;margin-top:10px;font-size:16px}
.grid.yogun .kart .kart-no{font-size:10.5px;padding:4px 6px;left:8px;bottom:8px}
.grid.liste .kart .govde{display:grid;align-content:center}
.grid.liste .kart .foto{aspect-ratio:auto}

.ilan-tablo .t-foto img,.ilan-tablo .t-foto .yok{border-radius:6px}

/* ------------------------------------------------------------
   4. İLAN LİSTESİ — üstte "Filtrele" + "Sırala", tam genişlik
   ------------------------------------------------------------
   Süzgeç her genişlikte çekmece. Masaüstünde SOLDAN açılıyor;
   mobilde taban.css'in alttan çekmecesi aynen kalıyor. Düğme ile
   sonuç çubuğu AYNI grid hücresinde üst üste: çubuk solda düğmeye
   yer bırakıyor. İşaretleme ve JS aynı; JS'teki "masaüstüne
   dönünce kapat" kuralı düğme görünürken çalışmıyor (bkz. 168).
   ------------------------------------------------------------ */
@media(min-width:981px){
  .liste-duzen{grid-template-columns:1fr;gap:0}
  /* z-index DÜĞMEDE, aside'da değil: aside'a verilseydi yığılma
     bağlamı açardı ve içindeki sabit çekmece yapışkan üst barın
     altında kalırdı. */
  .liste-duzen > .filtre{grid-column:1;grid-row:1;justify-self:start;align-self:start}
  .liste-duzen > .sonuclar{grid-column:1;grid-row:1}
  .liste-duzen .sonuc-bar{padding-left:140px;min-height:46px;margin-bottom:24px}
  /* 173 — filtre secilince dugmeye sayi rozeti ekleniyor ve dugme
     ~147px'e genisliyor; sabit 140px'lik pay "4 ilan" yazisinin
     ustune biniyordu (olculdu). Rozet varken pay da genisliyor. */
  .liste-duzen:has(.fa-rozet) .sonuc-bar{padding-left:176px}
  .liste-duzen .bos{margin-top:66px}

  .filtre-ac{
    display:inline-flex;align-items:center;gap:9px;width:auto;margin:0;height:46px;
    position:relative;z-index:3;
    padding:0 18px;background:var(--yuzey);color:var(--ink);
    border:1px solid var(--line);border-radius:8px;box-shadow:var(--sh);font-weight:600;
  }
  .filtre-ac:hover{background:var(--yuzey);color:var(--p-metin);border-color:var(--a);transform:none}
  .fa-sim{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
  .fa-rozet{min-width:20px;height:20px;padding:0 6px;border-radius:999px;
    background:var(--a);color:var(--a-yazi);font-size:12px;font-weight:700;line-height:20px;text-align:center}

  .filtre-perde{display:block;position:fixed;inset:0;z-index:9050;
    background:rgba(8,15,26,.45);opacity:0;transition:opacity .28s;pointer-events:none}
  .filtre-perde.acik{opacity:1;pointer-events:auto}

  .filtre-govde{
    position:fixed;top:0;bottom:0;left:0;width:380px;max-width:92vw;z-index:9100;
    padding:0 22px;border-radius:0;border:0;overflow-y:auto;overscroll-behavior:contain;
    box-shadow:10px 0 40px rgba(8,15,26,.22);
    transform:translateX(-100%);visibility:hidden;
    transition:transform .28s cubic-bezier(.4,0,.2,1),visibility .28s;
  }
  .filtre-govde.acik{transform:none;visibility:visible}
  .filtre-bas{display:flex;align-items:center;justify-content:space-between;
    position:sticky;top:0;z-index:2;background:var(--yuzey);margin:0 -22px 18px;
    padding:18px 22px;border-bottom:1px solid var(--line)}
  .filtre-bas b{font-size:17px;font-family:var(--serif)}
  .filtre-bas button{background:none;border:0;font-size:30px;line-height:1;cursor:pointer;color:var(--muted);padding:0 4px}
  .filtre-alt{position:sticky;bottom:0;z-index:2;background:var(--yuzey);margin:14px -22px 0;
    padding:14px 22px;border-top:1px solid var(--line);text-align:center}

  /* Sıralama üstte; paneldeki kopyası gizli ama formda duruyor. */
  .filtre-govde .fgrup:has(select[name=sira]){display:none}
}

/* Sırala — her genişlikte görünür. */
.sira-ust{display:inline-flex;align-items:center;gap:10px;margin-left:auto;font-size:14.5px;color:var(--muted)}
.sira-ust select{
  border:1px solid var(--line);border-radius:8px;background:var(--yuzey);color:var(--ink);
  font-size:15px;font-family:inherit;padding:10px 36px 10px 14px;min-width:190px;cursor:pointer;
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.sira-ust select:focus{outline:0;border-color:var(--a)}
/* Görünüm seçici: referansta yok; masaüstünde 3'lü ızgara sabit
   hissi veriyor. Ziyaretçinin önceki seçimi yine uygulanır. */
.sonuc-bar .gorunum{display:none}
.sonuc-adet{order:0}

.fgrup input[type=text],.fgrup input[type=number],.fgrup select{border-radius:8px}
.fgrup h4{color:var(--p-metin)}
.blok,.danisman-kart{border-radius:12px}

/* ------------------------------------------------------------
   5. İLAN DETAYI / ALTBİLGİ
   ------------------------------------------------------------ */
.fiyat-kart{background:var(--p)}
.galeri-kucuk img.on,.galeri-kucuk img:hover{border-color:var(--a)}
.sekmeler a{border-radius:8px}
.bos{border-radius:12px}

footer.alt{background:var(--p);color:rgba(255,255,255,.66)}
footer.alt a:hover{color:var(--a)}
footer.alt .fkunye,.fbot{border-color:rgba(255,255,255,.10)}

/* ------------------------------------------------------------
   6. Tablet / telefon
   ------------------------------------------------------------ */
@media(max-width:980px){
  .menu-bas{border-color:var(--line)}
  .sira-ust{width:100%;justify-content:space-between}
  .sira-ust select{flex:1;min-width:0}
}
@media(max-width:560px){
  .kart h3{font-size:16px}
  .kart .fiyat{font-size:18px}
}