/* ================== ROOT & GLOBAL ================== */
:root{
  --nav-bg:#bae6fd; 
  --nav-h:50px; 
  --ad-h:120px; 
  --filter-h:48px; 
  --gap:6px;
  --cat-pad:8px; 
  --bbar-h:66px; 
  --card-gap:12px;
}

*,
*::before,
*::after{ box-sizing:border-box; }

html,body{
  margin:0; padding:0; width:100%;
  background:#f9fafb;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;
  overflow-x:hidden; 
  overscroll-behavior-x:none; 
  touch-action:pan-y;
}

img,video,iframe{ max-width:100%; display:block; }

/* ================== NAVBAR ================== */
.m-navbar{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--nav-h);
  background:var(--nav-bg);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 10px;
  z-index:1100;
  border-bottom:1px solid rgba(0,0,0,.08);
  transition:transform .35s cubic-bezier(0.4,0,0.2,1),opacity .3s ease;
}
.nav-left{ display:flex; align-items:center; gap:8px; }
.nav-logo{ width:46px; height:46px; object-fit:contain; border-radius:8px; }
.nav-center{
  flex:1; text-align:center;
  font-weight:700; font-size:17px; color:#0f172a;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nav-right button{
  border:0; background:none; cursor:pointer;
  width:40px; height:40px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
}
.nav-right img{ width:24px; height:24px; }
.nav-spacer{ height:var(--nav-h); }

/* ================== REKLAM BLOKU ================== */
.m-ad-fixed{
  position:fixed;
  top:var(--nav-h);
  left:0; right:0;
  height:var(--ad-h);
  z-index:1050;
  background:#fff;
}
.mobile-ad-container-fixed{ width:100%; height:100%; overflow:hidden; }
.mobile-ad-banner-fixed img{ width:100%; height:100%; object-fit:cover; }
.ad-spacer{ height:calc(var(--ad-h) + var(--gap)); }

/* ================== FILTER BAR ================== */
.m-filterbar{
  position:fixed;
  top:calc(var(--nav-h) + var(--ad-h));
  left:0; right:0;
  height:var(--filter-h);
  z-index:1040;
  background:#fff;
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 10px;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.m-filterbar .btn{
  flex:1;
  height:36px;
  border:1px solid #bae6fd;
  border-radius:10px;
  background:linear-gradient(to bottom,#fff 0%,#e0f4ff 100%);
  font-weight:700;
  font-size:14px;
  color:#1f2937;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.m-filterbar .btn:active{ transform:scale(.98); }
.filter-spacer{ height:calc(var(--filter-h) + var(--gap)); }

/* ================== KATEQORİYALAR ================== */
.m-cats{
  background:#fff;
  padding:var(--cat-pad);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.cats-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:6px;
}
.cat-link{
  flex:1;
  text-decoration:none;
  color:#111827;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.cat-avatar{
  width:clamp(54px,15vw,68px);
  height:clamp(54px,15vw,68px);
  border-radius:999px;
  border:2px solid #bae6fd;
  overflow:hidden;
  background:#fff;
}
.cat-avatar img{ width:100%; height:100%; object-fit:cover; }
.cat-text{
  margin-top:4px;
  font-size:clamp(11px,3vw,13px);
  font-weight:600;
  text-align:center;
}

/* ================== ELAN KARTLARI KONTEYNER ================== */
#elanContainerMobile{
  padding:12px 14px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  column-gap:12px;
  row-gap:14px;
}

/* ================== ALT BAR ================== */
.m-bbar{
  position:fixed;
  bottom:0; left:0; right:0;
  height:calc(var(--bbar-h) + env(safe-area-inset-bottom));
  background:#bae6fd;
  border-top:1px solid rgba(0,0,0,.08);
  z-index:1100;
  padding-bottom:env(safe-area-inset-bottom);
}
.bbar-inner{
  height:100%;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:6px 10px 4px;
}
.bbtn{
  width:20%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-decoration:none;
  color:#1f2937;

  /* button-larda ağ kvadratı silmək üçün */
  background:transparent;
  border:0;
  outline:0;
  padding:0;
  cursor:pointer;
  -webkit-appearance:none;
}
.bbtn img{
  width:42px;
  height:42px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 1px 4px rgba(0,0,0,.1);
}
.bbtn span{
  margin-top:2px;
  font-size:13.5px;
  font-weight:600;
  text-align:center;
  color:#1f2937;
}
.bbar-spacer{ height:calc(var(--bbar-h) + env(safe-area-inset-bottom)); }

/* ================== DİL POPUP ================== */
#mobileLangMenu{
  position:fixed;
  background:#fff;
  border:1px solid #cfe8ff;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  padding:8px;
  z-index:1110;
  display:none;
}
#mobileLangMenu .langs{ display:flex; gap:10px; }
#mobileLangMenu button{
  border:0;
  background:transparent;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
}
#mobileLangMenu img{ width:36px; height:36px; border-radius:50%; }
#mobileLangMenu span{ font-size:10px; margin-top:4px; color:#374151; }
#mobileLangMenu::after{
  content:""; position:absolute; bottom:-7px; left:50%; transform:translateX(-50%);
  border-width:7px 7px 0 7px; border-style:solid; border-color:#fff transparent transparent transparent;
  filter: drop-shadow(0 -1px 0 rgba(0,0,0,.08));
}

/* ================== Smooth Scroll States ================== */
.hide-up{ 
  transform:translateY(-100%); 
  opacity:0; 
  pointer-events:none; 
}
.hide-down{ 
  transform:translateY(100%); 
  opacity:0; 
  pointer-events:none; 
}
/* ================== Kiçik ekranlar üçün kompakt 2 sütun tuning ================== */
@media (max-width: 400px){

  /* Grid aralıqlarını və padding-i azaldırıq – kartlar azca daha geniş olsun */
  #elanContainerMobile{
    padding:8px 6px;
    column-gap:6px;
    row-gap:10px;
  }

  /* Kartın özündə padding-i bir az azaldırıq ki, içəri daha kompakt olsun */
  #elanContainerMobile .elan-card{
    padding:5px 5px 4px;
  }

  /* Başlığı bir az kiçildək ki, 2 sətirdə daha səliqəli dursun */
  #elanContainerMobile .elan-card .title{
    font-size:13px;
  }

  /* Meta chip-lər (region, şəxs sayı və s.) bir az incə olsun */
  #elanContainerMobile .meta-left .chip{
    padding:2px 6px;
    font-size:9.5px;
  }

  /* Qiymət chip-lərini də bir az xırdalaq */
  #elanContainerMobile .price-chip{
    font-size:9.5px;
    padding:1px 5px;
  }
}