:root{--header-h:72px;}
body{padding-top:var(--header-h);}
/* DemoEmlak Site Responsive UI Patch (v27_23_21) */
/* Additive: only affects presentation */

.siteHeader{ position:fixed; top:0; left:0; right:0; z-index:1030; }
body{ padding-top:72px; background:#f6f7fb; }

/* Desktop guard: ensure mobile-only sheet/layout rules don't leak into desktop */
@media (min-width: 992px){
  .only-mobile{ display:none !important; }
}

/* === Image skeleton / CLS helpers === */
.img-skel{ position:relative; overflow:hidden; background:#e5e7eb; }
.img-skel::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.65), rgba(255,255,255,0));
  animation:skelShimmer 1.15s infinite;
}
.img-skel img{ display:block; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .18s ease; }
.img-skel.is-loaded::after{ display:none; }
.img-skel.is-loaded img{ opacity:1; }
@keyframes skelShimmer{ 100%{ transform:translateX(100%);} }

.ratio-16x9{ aspect-ratio:16/9; }
.ratio-4x3{ aspect-ratio:4/3; }
.ratio-1x1{ aspect-ratio:1/1; }

/* İlan Detay (bootstrap bağımsız iki kolon) */
/*
  ✅ Kalıcı fix: Flex bazı DOM varyasyonlarında wrap/ölçü hesapları yüzünden "ilan-side" alt satıra düşebiliyordu.
  Grid ile iki kolon deterministik olur.
*/
.ilan-layout{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap:18px;
  align-items:start;
  width:100%;
}
.ilan-main{ min-width:0; }
.ilan-side{ width:360px; max-width:360px; }
@media (max-width: 767.98px){
  .ilan-layout{ display:block; }
  .ilan-side{ width:auto; max-width:none; }
}

.eavWidget{ background:#fff; border-radius:14px; box-shadow:0 2px 10px rgba(0,0,0,.04); padding:16px; margin-bottom:16px; }
.eavWidget h3, .eavWidget .h5{ margin-bottom:10px; }

@media (max-width: 767.98px){
  body{ padding-top:64px; }
  .siteHeader .navbar-brand img{ max-height:28px !important; }
  .siteHeader .navbar-brand{ font-size:16px; }
  .container{ padding-left:12px; padding-right:12px; }
  .card{ border-radius:14px; }
  .btn{ padding-top:.55rem; padding-bottom:.55rem; }
  .btn-block{ white-space:normal; }
  .siteHeader .navbar-collapse{ background:#fff; padding:8px 10px; border-radius:12px; margin-top:8px; box-shadow:0 2px 10px rgba(0,0,0,.06); }
  .siteHeader .navbar-nav .nav-link{ padding:.5rem .75rem; }
  #ilanMap, #map{ height:260px !important; }
  .table td, .table th{ padding:.55rem .6rem; }
}

/* Ultra small phones */
@media (max-width: 575.98px){
  .h1, h1{ font-size:1.55rem; }
  .h2, h2{ font-size:1.35rem; }
  .h3, h3{ font-size:1.15rem; }
  .price, .ilanPrice, .ilan-price{ font-size:1.45rem !important; }
  .eavWidget{ padding:12px; }
}


/* === ILAN DETAIL LAYOUT HARD LOCK (desktop: main left, sidebar right) === */
.ilan-layout{
  display:grid !important;
  grid-template-columns: minmax(0, 1fr) 360px !important;
  grid-template-areas: "main side" !important;
  gap:18px;
  align-items:start;
  max-width:1200px;
  margin:0 auto;
}
.ilan-layout > .ilan-main{ grid-area:main !important; min-width:0; }
.ilan-layout > .ilan-side{ grid-area:side !important; width:360px !important; max-width:360px !important; justify-self:end; }
@media (min-width: 992px){
  .ilan-layout > .ilan-side .sticky{ position:sticky; top:84px; }
}
@media (max-width: 767.98px){
  .ilan-layout{
    grid-template-columns: 1fr !important;
    grid-template-areas: "main" "side" !important;
  }
  .ilan-layout > .ilan-side{ width:auto !important; max-width:none !important; justify-self:stretch; }
}


/* ===== Mobile/PWA standard helpers (v27_23_50) ===== */
:root{
  --site-nav-h: 72px;
}
body{
  padding-top: var(--site-nav-h);
}
.siteHeader{
  min-height: var(--site-nav-h);
}
body.no-scroll{
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
}
/* map filter modal/backdrop helpers (admin map) */
.mapFiltersBackdrop{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.55);
  z-index: 10050;
  display:none;
}
.mapFiltersBackdrop.is-show{
  display:block;
}
@media (min-width: 576px){
  /* desktop: always show map filters panel even if collapse state gets weird */
  #mapFilters{ display:block !important; height:auto !important; visibility:visible !important; }
}
@media (max-width: 576px){
  /* mobile: keep filter bar compact */
  .map-filter-bar{ left:10px; right:10px; top:10px; }
  .map-filter-bar .card-body{ padding:10px; }
  /* when filters expanded, show as bottom sheet */
  #mapFilters.show{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    top: auto;
    max-height: 70vh;
    overflow: auto;
    z-index: 10060;
    background: transparent;
    padding: 0 10px 12px 10px;
  }
  #mapFilters.show > .d-flex{
    background: #fff;
    border-radius: 16px;
    padding: 12px;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
  }
}

/* ===== CLS reduction: listing card cover skeleton (v27_23_55) ===== */
.coverWrap{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;
  border-radius:16px;
  overflow:hidden;
  background:#eef2f7;
}
.coverWrap .cover{ width:100%; height:100%; object-fit:cover; display:block; }
.coverWrap::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#eef2f7,#f8fafc,#eef2f7);
  background-size:200% 100%;
  animation:skel 1.2s ease-in-out infinite;
  opacity:.85;
}
.coverWrap.loaded::before{ display:none; }
@keyframes skel{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

/* ===== Site /site index: desktop sol sidebar + sağ grid (hard lock) ===== */
.siteLayout{ display:grid; grid-template-columns: 320px minmax(0,1fr); gap:16px; align-items:start; }
.siteSide{ position:sticky; top: calc(var(--site-nav-h,72px) + 16px); align-self:start; }
.siteMain{ min-width:0; }

/* Desktop/tablet should keep 2-column layout; collapse only on true phone */
@media (max-width: 767.98px){
  .siteLayout{ display:block; }
  .siteSide{ position:static; top:auto; }
}

/* /site card grid: tablet 2 col */
@media (min-width: 768px) and (max-width: 1199.98px){
  .siteGrid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* ===== Mobile map UX: floating actions + list drawer (admin /ilan map) ===== */
@media (max-width: 767.98px){
  /* map already set, but keep consistent */
  #ilanMap{ height:65vh !important; }

  .map-fab{
    position:fixed;
    right:14px;
    bottom:14px;
    z-index:1200;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .map-fab .btn{ border-radius:999px; box-shadow:0 6px 18px rgba(0,0,0,.14); }

  #ilanListCard{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:1190;
    max-height:45vh;
    overflow:auto;
    border-radius:18px 18px 0 0;
    transform:translateY(100%);
    transition:transform .22s ease;
    box-shadow:0 -12px 30px rgba(0,0,0,.18);
    background:#fff;
  }
  body.map-list-open #ilanListCard{ transform:translateY(0); }
}