/* Liste / detay / iletisim sayfalari. Global bilesenler (header, footer, .btn*, .alan, .etiket, .flash, .pager,
   .bos-durum, .ilan-kart*) assets/css/site.css'te. Yalniz tokens.css degiskenleri. Mobil-once. */
:root {
  --kenar-girdi: #7d8f94;   /* kontrol bilesenleri kenari: beyazda 3.37:1, kremde 3.07:1 */
}

/* ---- Yerel yardimcilar (ortaklar site.css'te) ---- */
.btn-kucuk { min-height: 40px; padding: var(--bosluk-1) var(--bosluk-4); }
.btn-kucuk[hidden] { display: none; }
.eylem-satiri--orta { justify-content: center; }
.form-dikey .btn { width: 100%; }

.tablo { width: 100%; border-collapse: collapse; font-size: var(--boyut-sm); }
.tablo th, .tablo td { text-align: left; padding: var(--bosluk-3); border-bottom: 1px solid var(--kenar-yumusak); vertical-align: top; }
.tablo th { width: 45%; font-weight: 600; color: var(--renk-metin-soluk); }
.tablo tbody tr:nth-child(even) { background: var(--renk-arka); }
.tablo tr:last-child th, .tablo tr:last-child td { border-bottom: 0; }
.rozet-hafif { display: inline-flex; align-items: center; padding: 2px var(--bosluk-3); border-radius: var(--yaricap-tam); font-size: var(--boyut-xs); font-weight: 600; background: var(--renk-arka-2); color: var(--renk-birincil); border: 1px solid var(--renk-kenar); }

/* ---- Kirinti + ust bant (liste, iletisim) ---- */
.kirinti { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bosluk-1) var(--bosluk-2); font-size: var(--boyut-sm); color: var(--renk-metin-soluk); margin-bottom: var(--bosluk-3); }
.kirinti a { color: var(--renk-link); }
.liste-band {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--bosluk-3);
  background: var(--degrade-hero); color: var(--renk-metin-ters);
  border-radius: var(--yaricap-lg); padding: var(--bosluk-6) var(--bosluk-5); margin-bottom: var(--bosluk-5);
  position: relative; overflow: hidden;
}
.liste-band::after { content: ""; position: absolute; right: -4rem; top: -5rem; width: 16rem; height: 16rem; border-radius: 50%; background: radial-gradient(circle, rgb(232 137 79 / 0.35), transparent 70%); pointer-events: none; }
.liste-band > * { position: relative; z-index: 1; }
.liste-band h1 { color: #fff; margin: 0 0 var(--bosluk-1); }
.liste-band__alt { color: #d3e2e4; margin: 0; max-width: 56ch; }
.liste-band__sayi { margin: 0; padding: var(--bosluk-2) var(--bosluk-4); border-radius: var(--yaricap-tam); background: rgb(255 255 255 / 0.14); border: 1px solid rgb(255 255 255 / 0.28); font-size: var(--boyut-sm); }
.liste-band__sayi strong { font-size: var(--boyut-lg); }

/* ---- Liste yerlesimi / filtre paneli ---- */
.liste-yerlesim { display: grid; gap: var(--bosluk-5); grid-template-columns: minmax(0, 1fr); }
.filtre-form { background: var(--renk-yuzey); border: 1px solid var(--renk-kenar); border-radius: var(--yaricap); padding: var(--bosluk-4); box-shadow: var(--golge); }
.filtre-form .alan { margin-bottom: var(--bosluk-3); }
.filtre-ac { width: 100%; display: none; }
.chip-grup { border: 0; padding: 0; margin: 0 0 var(--bosluk-4); min-width: 0; }
.chip-grup legend { padding: 0; margin-bottom: var(--bosluk-2); font-size: var(--boyut-xs); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--renk-metin-soluk); }
.chip-grup .alan { margin-bottom: 0; }
.chip-sira { display: flex; flex-wrap: wrap; gap: var(--bosluk-2); }
.chip { position: relative; display: inline-block; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 40px; padding: 0 var(--bosluk-4);
  border: 1px solid var(--kenar-girdi); border-radius: var(--yaricap-tam); background: var(--renk-yuzey);
  font-size: var(--boyut-sm); font-weight: 600; color: var(--renk-metin); transition: background-color var(--gecis-hizli), border-color var(--gecis-hizli), color var(--gecis-hizli);
}
.chip--kare span { min-width: 44px; padding: 0 var(--bosluk-3); }
.chip:hover span { border-color: var(--renk-birincil); }
.chip input:checked + span { background: var(--renk-birincil); border-color: var(--renk-birincil); color: #fff; }
.chip input[type="checkbox"]:checked + span::before { content: "\2713"; font-size: .85em; }
.chip input:focus-visible + span { outline: 3px solid var(--renk-link); outline-offset: 2px; }
.konum-durum { min-height: 1.2em; margin: calc(var(--bosluk-2) * -1) 0 var(--bosluk-3); font-size: var(--boyut-xs); color: var(--renk-metin-soluk); }
.konum-durum.hata { color: var(--renk-hata); font-weight: 600; }
.filtre-form select[aria-busy="true"] { opacity: .6; cursor: progress; }
.filtre-eylem { margin-top: var(--bosluk-4); }
.filtre-eylem .btn { flex: 1 1 auto; }

/* JS varsa mobilde filtre daraltilir; JS yoksa hep acik */
@media (max-width: 899px) {
  .filtre-ac { display: inline-flex; margin-bottom: var(--bosluk-3); }
  .js .filtre-form:not(.acik) { display: none; }
}

/* ---- Aktif filtre etiketleri ---- */
.aktif-filtreler { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bosluk-2) var(--bosluk-3); margin-bottom: var(--bosluk-4); }
.aktif-filtreler__baslik { font-size: var(--boyut-xs); font-weight: 700; color: var(--renk-metin-soluk); }
.aktif-filtreler ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--bosluk-2); margin: 0; padding: 0; }
.filtre-etiket {
  display: inline-flex; align-items: center; gap: var(--bosluk-2); min-height: 36px; padding: 0 var(--bosluk-3);
  border-radius: var(--yaricap-tam); background: var(--renk-kum); border: 1px solid #ddd0b4; color: var(--renk-birincil-koyu);
  font-size: var(--boyut-xs); font-weight: 600; text-decoration: none;
}
.filtre-etiket:hover { background: #e6dcc6; color: var(--renk-hata); }
.aktif-filtreler__temizle { font-size: var(--boyut-xs); font-weight: 600; }

/* ---- Sonuc cubugu ---- */
.sonuc-cubugu { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bosluk-3); margin-bottom: var(--bosluk-4); padding-bottom: var(--bosluk-3); border-bottom: 1px solid var(--renk-kenar); }
.sonuc-sayisi { font-weight: 700; margin: 0; color: var(--renk-birincil-koyu); }
.sonuc-cubugu__arac { display: flex; align-items: center; gap: var(--bosluk-3); }
.sirala-form { display: flex; align-items: center; gap: var(--bosluk-2); margin: 0; }
.sirala-form label { font-size: var(--boyut-xs); font-weight: 600; color: var(--renk-metin-soluk); }
.sirala-form select {
  font: inherit; font-size: var(--boyut-sm); min-height: 44px; padding: 0 var(--bosluk-3); border: 1px solid var(--kenar-girdi);
  border-radius: var(--yaricap-sm); background: var(--renk-yuzey); color: var(--renk-metin); max-width: 11.5rem;
}
.gorunum { display: inline-flex; border: 1px solid var(--kenar-girdi); border-radius: var(--yaricap-sm); overflow: hidden; background: var(--renk-yuzey); }
.gorunum[hidden] { display: none; }
.gorunum__dugme { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--renk-metin-soluk); cursor: pointer; }
.gorunum__dugme + .gorunum__dugme { border-left: 1px solid var(--kenar-girdi); }
.gorunum__dugme:hover { color: var(--renk-birincil); }
.gorunum__dugme[aria-pressed="true"] { background: var(--renk-birincil); color: #fff; }

/* ---- Ilan izgarasi (kartin kendisi site.css'te) ---- */
/* Sutun/bosluk tanimi site.css'te (1 / 2 / 3 sutun); burada yalniz liste sayfasina ozgu farklar */

/* Bos durum ek bicimi */
.bos-durum--liste { padding-block: var(--bosluk-7); }
.bos-durum__ikon { color: var(--renk-birincil-acik); margin: 0 auto var(--bosluk-3); }

/* ---- Ilan detay ---- */
.durum-serit { padding: var(--bosluk-3) var(--bosluk-4); border-radius: var(--yaricap-sm); font-weight: 700; color: #fff; background: var(--renk-hata); margin-bottom: var(--bosluk-4); }
.durum-serit--kiralandi { background: var(--renk-uyari); color: #1d1300; }
.ilan-detay__ust { display: grid; gap: var(--bosluk-3); margin-bottom: var(--bosluk-4); }
.ilan-detay__rozetler { display: flex; flex-wrap: wrap; gap: var(--bosluk-2); margin: 0 0 var(--bosluk-3); }
.ilan-detay__ust h1 { margin-bottom: var(--bosluk-2); }
.ilan-detay__konum { display: flex; align-items: flex-start; gap: var(--bosluk-2); color: var(--renk-metin-soluk); margin: 0; }
.ilan-detay__konum svg, .konum-satir svg { flex: none; margin-top: 3px; color: var(--renk-vurgu); }
.ilan-detay__fiyat { font-size: var(--boyut-xl); font-weight: 800; line-height: 1.1; color: var(--renk-birincil); margin: 0 0 var(--bosluk-2); font-variant-numeric: tabular-nums; }
.ilan-detay__fiyat small { font-size: var(--boyut-sm); font-weight: 600; color: var(--renk-metin-soluk); }
.paylas { display: flex; align-items: center; gap: var(--bosluk-3); }
.paylas__durum { font-size: var(--boyut-xs); color: var(--renk-basari); font-weight: 600; }
.ilan-detay__yerlesim { display: grid; gap: var(--bosluk-4); grid-template-columns: minmax(0, 1fr); }
.aciklama { overflow-wrap: anywhere; }
.konum-satir { display: flex; align-items: flex-start; gap: var(--bosluk-2); }

/* Galeri */
.galeri { margin-bottom: var(--bosluk-4); }
.galeri__ana { position: relative; margin: 0; aspect-ratio: 4 / 3; background: #0d2a31; border-radius: var(--yaricap-lg); overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: var(--golge); }
.galeri__ana img { width: 100%; height: 100%; object-fit: contain; }
.galeri__ana--bos { background: var(--renk-arka-2); }
.galeri__ana--bos img { object-fit: cover; }
.galeri__buyut {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: transparent; cursor: zoom-in;
  display: flex; align-items: flex-end; justify-content: flex-start;
}
.galeri__buyut span {
  display: inline-flex; align-items: center; gap: var(--bosluk-2); margin: var(--bosluk-3); padding: var(--bosluk-2) var(--bosluk-3);
  border-radius: var(--yaricap-tam); background: rgb(7 42 51 / 0.72); color: #fff; font-size: var(--boyut-xs); font-weight: 600; backdrop-filter: blur(4px);
}
.galeri__buyut:focus-visible { outline: 3px solid var(--renk-vurgu-acik); outline-offset: -3px; }
.galeri__sayac { position: absolute; right: var(--bosluk-3); top: var(--bosluk-3); margin: 0; padding: 2px var(--bosluk-3); border-radius: var(--yaricap-tam); background: rgb(7 42 51 / 0.72); color: #fff; font-size: var(--boyut-xs); font-weight: 600; }
.galeri__sayac[hidden] { display: none; }
.galeri__ok {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgb(255 255 255 / 0.92); color: var(--renk-birincil-koyu); font-size: 1.75rem; line-height: 1; cursor: pointer; box-shadow: var(--golge);
  display: inline-flex; align-items: center; justify-content: center; padding-bottom: 4px;
}
.galeri__ok:hover { background: #fff; }
.galeri__ok--onceki { left: var(--bosluk-3); }
.galeri__ok--sonraki { right: var(--bosluk-3); }
.galeri__seritler { list-style: none; display: flex; gap: var(--bosluk-2); overflow-x: auto; margin: var(--bosluk-3) 0 0; padding: 4px; scroll-snap-type: x proximity; }
.galeri__seritler li { flex: none; scroll-snap-align: start; }
.galeri__seritler a { display: block; width: 92px; aspect-ratio: 4 / 3; border-radius: var(--yaricap-sm); overflow: hidden; border: 2px solid transparent; opacity: .7; transition: opacity var(--gecis-hizli), border-color var(--gecis-hizli); }
.galeri__seritler a[aria-current="true"] { border-color: var(--renk-vurgu); opacity: 1; }
.galeri__seritler a:hover { opacity: 1; }
.galeri__seritler img { width: 100%; height: 100%; object-fit: cover; }

/* Lightbox (JS olusturur) */
body.lb-acik { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 200; background: rgb(4 24 29 / 0.96); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--bosluk-5) var(--bosluk-3) var(--bosluk-4); }
.lb__sahne { position: relative; flex: 1 1 auto; width: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; touch-action: pan-y; }
.lb__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--yaricap-sm); user-select: none; }
.lb__alt { color: #d3e2e4; font-size: var(--boyut-sm); margin: var(--bosluk-3) 0 0; text-align: center; }
.lb__btn {
  position: absolute; z-index: 2; width: 48px; height: 48px; border: 1px solid rgb(255 255 255 / 0.3); border-radius: 50%;
  background: rgb(255 255 255 / 0.12); color: #fff; font-size: 1.75rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding-bottom: 4px; transition: background-color var(--gecis-hizli);
}
.lb__btn:hover { background: rgb(255 255 255 / 0.28); }
.lb__btn:focus-visible { outline: 3px solid var(--renk-vurgu-acik); outline-offset: 2px; }
.lb__kapat { top: var(--bosluk-3); right: var(--bosluk-3); font-size: 1.5rem; padding-bottom: 0; }
.lb__onceki { left: var(--bosluk-2); top: 50%; transform: translateY(-50%); }
.lb__sonraki { right: var(--bosluk-2); top: 50%; transform: translateY(-50%); }

/* Ozellik kutulari */
.ozellik-kutulari { list-style: none; margin: 0 0 var(--bosluk-4); padding: 0; display: grid; gap: var(--bosluk-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ozellik-kutusu {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ikon ad" "ikon deger"; column-gap: var(--bosluk-3); align-items: center;
  background: var(--renk-yuzey); border: 1px solid var(--renk-kenar); border-radius: var(--yaricap); padding: var(--bosluk-3) var(--bosluk-4); box-shadow: var(--golge);
}
.ozellik-kutusu__ikon { grid-area: ikon; width: 44px; height: 44px; border-radius: var(--yaricap-sm); background: var(--renk-arka-2); color: var(--renk-birincil-acik); display: inline-flex; align-items: center; justify-content: center; }
.ozellik-kutusu__ad { grid-area: ad; font-size: var(--boyut-xs); color: var(--renk-metin-soluk); font-weight: 600; }
.ozellik-kutusu__deger { grid-area: deger; font-size: var(--boyut-md); color: var(--renk-metin); overflow-wrap: anywhere; }

/* Danisman karti */
.danisman__baslik { display: flex; align-items: center; gap: var(--bosluk-3); margin-bottom: var(--bosluk-3); }
.danisman__avatar { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--degrade-vurgu); color: #fff; font: 700 1.35rem var(--font-baslik); display: inline-flex; align-items: center; justify-content: center; }
.danisman__h { margin: 0; font-size: var(--boyut-md); }
.danisman__rol { margin: 0; font-size: var(--boyut-xs); color: var(--renk-metin-soluk); }
.danisman__tel { font-size: var(--boyut-lg); font-weight: 700; margin-bottom: var(--bosluk-2); }
.danisman__tel a { text-decoration: none; }

/* Benzer ilanlar */
.benzer { margin: var(--bosluk-6) 0; }
.benzer__ust { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bosluk-3); margin-bottom: var(--bosluk-4); }
.benzer__ust h2 { margin: 0; }

/* Mobil sabit cubuk (yalniz ilan sayfasi) */
.mobil-cubuk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--bosluk-2);
  padding: var(--bosluk-2) var(--bosluk-4) calc(var(--bosluk-2) + env(safe-area-inset-bottom));
  background: var(--renk-yuzey); border-top: 1px solid var(--renk-kenar); box-shadow: 0 -4px 16px rgb(7 42 51 / 0.12);
}
.mobil-cubuk .btn { padding-inline: var(--bosluk-2); }
body.public:has(.mobil-cubuk) .site-footer { padding-bottom: 5rem; }

/* ---- Iletisim ---- */
.iletisim-yerlesim { display: grid; gap: var(--bosluk-5); grid-template-columns: minmax(0, 1fr); }
.bilgi-kartlari { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bosluk-3); }
.bilgi-karti { display: flex; gap: var(--bosluk-4); align-items: flex-start; background: var(--renk-yuzey); border: 1px solid var(--renk-kenar); border-radius: var(--yaricap); padding: var(--bosluk-4); box-shadow: var(--golge); }
.bilgi-karti__ikon { flex: none; width: 44px; height: 44px; border-radius: var(--yaricap-sm); background: var(--renk-arka-2); color: var(--renk-birincil-acik); display: inline-flex; align-items: center; justify-content: center; }
.bilgi-karti h3 { margin: 0 0 2px; font-size: var(--boyut-xs); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--renk-metin-soluk); font-family: var(--font-govde); }
.bilgi-karti p { margin: 0; overflow-wrap: anywhere; }
.iletisim-form-kart { margin-bottom: 0; }
.iletisim-form-kart > p.soluk { margin-bottom: var(--bosluk-4); }

/* Iletisim formu sonuc blogu: .form-sonuc site.css'te */
#iletisim-formu { scroll-margin-top: 5.5rem; }

/* ---- Genis ekran ---- */
@media (min-width: 600px) {
  .ilan-izgara.gorunum-liste { grid-template-columns: minmax(0, 1fr); }
  .ilan-izgara.gorunum-liste .ilan-kart { flex-direction: row; }
  .ilan-izgara.gorunum-liste .ilan-kart__gorsel { flex: 0 0 38%; aspect-ratio: auto; min-height: 11rem; }
  .ilan-izgara.gorunum-liste .ilan-kart__govde { flex: 1 1 auto; justify-content: center; }
  .ozellik-kutulari { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .liste-band { padding: var(--bosluk-7) var(--bosluk-6); }
  .ilan-detay__ust { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .ilan-detay__ust-sag { text-align: right; }
  .paylas { justify-content: flex-end; }
}
@media (min-width: 900px) {
  .liste-yerlesim { grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
  .filtre { position: sticky; top: 5.5rem; max-height: calc(100vh - 6.5rem); overflow-y: auto; scrollbar-width: thin; }
  .ilan-detay__yerlesim { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
  .ilan-detay__yan { position: sticky; top: 5.5rem; max-height: calc(100vh - 6.5rem); overflow-y: auto; scrollbar-width: thin; padding: 2px; }
  .iletisim-yerlesim { grid-template-columns: 1fr 1.25fr; align-items: start; }
  .mobil-cubuk { display: none; }
  body.public:has(.mobil-cubuk) .site-footer { padding-bottom: 0; }
  .galeri__seritler a { width: 104px; }
  .lb__onceki, .lb__sonraki { width: 56px; height: 56px; }
  .lb__onceki { left: var(--bosluk-4); }
  .lb__sonraki { right: var(--bosluk-4); }
}
/* Liste sayfasinda 300px filtre kolonu var: 1100-1279px arasi 2, 1280px ustu 3 sutun */
@media (min-width: 1100px) {
  .liste-yerlesim .ilan-izgara:not(.gorunum-liste) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .liste-yerlesim .ilan-izgara:not(.gorunum-liste) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .chip span, .galeri__seritler a, .lb__btn { transition: none; }
}