/* =========================
   Qonaqlama.az – main.css (common)
   ========================= */

/* Base */
html, body{
  margin:0; padding:0;
  font-family:sans-serif;
  overflow-y:auto;
}

/* ---- Lay və ölçü dəyişənləri ---- */
:root{
  --topbar-h: 56px;
  --filter-h: 78px;
  --side-gap: 180px;
  --z-ads: 3000; --z-topbar: 1200; --z-filter: 1100;
}

/* Üst panel */
.topbar{
  position:fixed; top:0; left:0; right:0;
  z-index:var(--z-topbar);
  background:#dbeafe; padding:10px 20px;
  will-change:transform; transform:translateZ(0); backface-visibility:hidden;
}
.topbar-inner{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:10px;
}

/* Kontent Topbar+Filter-in altından başlasın (>=640px) */
@media (min-width:640px){
  body{ padding-top: calc(var(--topbar-h) + var(--filter-h)); }
}

/* Filter paneli */
.filter-blok{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  background:#e8f4fd; padding:12px;
  position:fixed; left:0; right:0; top:var(--topbar-h);
  z-index:var(--z-filter);
  will-change:transform; transform:translateZ(0); backface-visibility:hidden;
}
.filter-box{
  min-width:140px; background:#fff;
  border:1px solid #94a3b8; border-radius:8px; padding:6px 10px;
}
.filter-box--price{ min-width:160px; }
.filter-box--inline{ display:flex; align-items:center; }
.filter-box input[type="text"],
.filter-box input[type="number"],
.filter-box select{
  width:100%; margin-top:4px; padding:5px 8px; font-size:13px;
  border-radius:6px; border:1px solid #cbd5e1; outline:none;
}
.filter-box select{ padding:5px 10px; }

/* Kateqoriya ikonları – baza */
.cats-wrap{
  margin-left:auto; margin-right:auto; width:fit-content;
  background:#fff; padding:6px 0; /* desktop bazası 6px */
  margin-bottom:6px;
}

/* Geniş ekranlarda yan boşluq */
@media (min-width:1280px){
  .filter-blok, .cats-wrap{ padding-left:var(--side-gap); padding-right:var(--side-gap); }
}

/* Yan REKLAM bannerləri */
.side-banner{
  width:160px; height:600px; position:fixed;
  top: calc(var(--topbar-h) + var(--filter-h) + 12px);
  left:auto; right:auto; background:#fff; border-radius:6px; overflow:hidden;
  box-shadow:0 0 10px rgba(0,0,0,.2);
  z-index:var(--z-ads);
}
.left-banner{ left:0; }
.right-banner{ right:0; }
.side-banner img, .side-banner video{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* Mobil/planshet – bannerləri gizlət */
@media (max-width:1024px){
  .side-banner{ display:none !important; }
}

/* Elan konteynerləri – baza */
#elanContainerDesktop, #elanContainerMobile{
  width:100%; margin:8px auto; padding:0 10px;
}

/* Elan kartı – baza */
.elan-karti{
  background:#fff; border-radius:8px; overflow:hidden;
  box-shadow:0 2px 4px rgba(0,0,0,.1);
  transition:all .3s ease; position:relative;
}
.elan-karti:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 8px rgba(0,0,0,.15);
}

/* Köməkçi content */
.content{
  max-width:960px; margin:0 auto; padding:100px 20px;
  min-height:3000px; background:#f1f1f1;
}

/* Kateqoriyalardan sonra boşluq */
@media (min-width:640px){
  .cats-wrap + .hidden.sm\:flex{ margin-top:2px !important; }
}

/* Etiketlər */
.vip-etiket{ background:linear-gradient(135deg,#8e44ad,#9b59b6); color:#fff; }
.premium-etiket{ background:linear-gradient(135deg,#f39c12,#f1c40f); color:#000; }
.endirim-etiket{ background:linear-gradient(135deg,#e74c3c,#c0392b); color:#fff; }

/* Qiymət göstəricisi */
.kohne-qiymet{ text-decoration:line-through; color:#95a5a6; }
.yeni-qiymet{ color:#e74c3c; font-weight:bold; }

/* Əlaqə düymələri */
.elaqe-duymesi{ padding:6px 12px; border-radius:4px; border:none; cursor:pointer; }
.zeng-duymesi{ background:#2ecc71; color:#fff; }
.whatsapp-duymesi{ background:#25D366; color:#fff; }

/* ==== Slider (common) ==== */
.slider-container{
  position: relative;
  width: 100%;
  height: 180px;      /* desktop baza; mobilə aşağıda override ediləcək */
  overflow: hidden;
}
.slide{
  position: absolute;
  inset: 0;
  left: 100%;
  transition: left .45s ease;
}
.slide.active{ left: 0; z-index: 10; }
.slide.prev{ left: -100%; }
.slider-container img,
.slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}