/* ishtopai.uz — ishlar sahifasi (css)
   ishlar.php dan ajratilgan 2026-09-04 */
/* Nav ham SHU kenglikda tursin — logo/akkaunt kontent chekkasi bilan
   bir chiziqda bo'lsin (`seo_nav_css()` bu ikki qiymatni o'qiydi). */
/* Nav SAHIFA KENGLIGIDA — logo/til/profil `.wrap` kontenti bilan AYNAN bir
   chiziqda. ⚠️ `.wrap` uch xil holatda, `--navw`/`--navp` ham SHUNGA MOS:
       asosiy               max-width:1260px  padding:clamp(14px,3vw,26px)
       900-1180px           padding:clamp(12px,1.6vw,20px)
       >=1400px             max-width:1560px
   Ilgari faqat birinchi holat qo'yilgan edi va 1440px ekranda logo karta
   chekkasidan 83px ichkarida qolardi (o'lchandi) — egasi «logo o'rtada
   bo'lib qolgan» dedi. `.wrap` qoidasini o'zgartirsang SHU YERNI HAM. */
:root{--navw:1260px;--navp:clamp(14px,3vw,26px)}
@media (min-width:900px) and (max-width:1180px){ :root{--navp:clamp(12px,1.6vw,20px)} }
@media (min-width:1400px){ :root{--navw:1560px} }
.wrap{max-width:1260px;margin:0 auto;padding:20px clamp(14px,3vw,26px) 76px}

/* ============================================================
   HERO — banner rasm + sarlavha + jonli statistika
   ⚠️ Rasm QIRQILMAYDI (mobildan tashqari) — to'liq ko'rinadi.
      Rasmni almashtirish = FAQAT /assets/banner.jpg (1600×400 tavsiya).
   ============================================================ */
.promo{position:relative;display:block;margin:4px auto 0;border-radius:calc(var(--r) + 4px);overflow:hidden;
  border:1px solid var(--border);background:linear-gradient(120deg,#26507f,#111a28);box-shadow:var(--shadow)}
/* ⚠️ ESKI `.promo::after` OLIB TASHLANDI (2026-08-28). U BUTUN banner ustiga
   to'q qatlam tashlardi va endi har slaydning O'Z qatlami bor (`.psl::after`).
   Ikkalasi qo'shilib matnni kulrang qilib qo'ygandi — o'lchandi: oq matn
   (`rgb(255,255,255)`) ekranда kulrang chiqardi. Ustiga u `.promo` darajasida
   va `.pst` dan KEYIN kelgani uchun slayd matnini z-index bilan ham
   qutqarib bo'lmasdi (`.pin` boshqa stacking kontekstda). */

.promo img{display:block;width:100%;height:auto}
.head{position:absolute;left:0;top:0;bottom:0;z-index:3;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(16px,2.5vw,34px) clamp(16px,2.5vw,36px);max-width:min(74%,660px);pointer-events:none}
.head h1{font-size:clamp(21px,2.7vw,34px);font-weight:800;letter-spacing:-.028em;line-height:1.12;color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.5)}
.head p{color:rgba(235,240,247,.9);font-size:clamp(12px,1.05vw,14.5px);margin-top:8px;line-height:1.45;
  text-shadow:0 1px 8px rgba(0,0,0,.45)}
/* TOP belgisi — to'langan joy (2026-08-28). Oltin rang: brendning ikkinchi
   rangi, «ajratilgan» ma'nosini beradi va yashil/ko'k belgilar bilan
   chalkashmaydi. */
.j-topb{display:inline-flex;align-items:center;gap:4px;font-weight:800;font-size:11.5px;
  letter-spacing:.04em;color:var(--gold,#c8992f);background:rgba(200,153,47,.13);
  border:1px solid rgba(200,153,47,.34);padding:2px 8px;border-radius:999px}
.j-topb svg{width:12px;height:12px}

/* ═══ BANNER SLAYDLARI (2026-08-28) ═══════════════════════════════════════
   Banner o'z o'lchamida qoladi, ichida slaydlar aylanadi. Har slayd —
   TO'LIQ banner: brend slaydi yoki bitta e'lon.
   ⚠️ E'lonlarning 83% ida rasm YO'Q (o'lchandi) — shuning uchun «yaratilgan
      banner» (`.psl-gen`) asosiy holat va u puxta ishlangan: kategoriyaga
      bog'langan gradient + katta lavozim + maosh + joy. */
/* ⚠️ QAYTA O'LCHANDI (2026-08-28): egasi «desktopda banner juda cho'zilib
   ketgan, o'rniga 3 ta e'lon ko'rinib qolsin, orqasidan aylanib o'tib
   kelsin» dedi. Endi:
     desktop → bir vaqtda 3 karta, balandligi 200px (banner emas, LENTA)
     mobil   → 1 karta, 190px
   `.promo` endi konteyner: fon/chegara YO'Q, kartalar o'zi ko'rinadi. */
.promo{position:relative;overflow:hidden;background:none;border:0;box-shadow:none;
  border-radius:0;margin:2px 0 0;min-height:0}
.promo::after{content:none}
/* 🔴 `overflow:visible` ISHLATMA — u butun lentani ekrandan chiqarib
   yuboradi: jonli o'lchov 360px ekranda **2754px gorizontal surilish**
   ko'rsatdi (2026-08-28). Kesish SHART.
   Markazdagi karta `scale(1.05)` da VERTIKAL kesilmasligi uchun esa
   yuqori/past bo'shliq beriladi — gorizontalda u markazda turgani uchun
   baribir kesilmaydi. */
.promo{overflow:hidden;padding:12px 0 4px;margin-top:-6px}
.pst{display:flex;gap:16px;transition:transform .62s cubic-bezier(.25,.8,.3,1);will-change:transform}
.psl{position:relative;flex:0 0 calc((100% - 32px) / 3);min-width:0;display:block;
  text-decoration:none;height:258px;border-radius:18px;overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--shadow);
  /* ⚠️ Yon kartalar: KICHIKROQ va XIRAROQ, lekin `opacity` BILAN EMAS.
     `opacity` fonni ko'rsatib yuboradi va rang «ajralib» qoladi — egasi
     aynan shuni ko'rdi. `filter` esa rasmning O'ZINI so'ndiradi, fon
     aralashmaydi va o'tish tabiiy ko'rinadi. */
  transform:scale(.88);
  filter:brightness(.62) saturate(.75);
  transition:transform .5s cubic-bezier(.25,.8,.3,1),filter .5s ease,box-shadow .5s ease}
/* ⚠️ MARKAZDAGI karta — KATTA va TO'LIQ rangda. Sinf JS da qo'yiladi:
   nechta karta ko'rinishi ekranga bog'liq va CSS buni bila olmaydi. */
.psl.mid{transform:scale(1.06);filter:none;z-index:2;
  box-shadow:0 18px 46px rgba(10,18,32,.32)}
@media (max-width:900px){ .psl{flex:0 0 calc((100% - 16px) / 2);height:230px} }
@media (max-width:640px){
  /* Mobilda bitta karta — kichraytirish/so'ndirish ma'nosiz */
  .psl{flex:0 0 100%;height:215px;transform:none;filter:none}
  .psl.mid{transform:none;box-shadow:var(--shadow)}
}
@media (prefers-reduced-motion:reduce){
  .psl,.psl.mid{transform:none;filter:none;transition:none}
}

/* Ekranda ko'rinmaydi, qidiruv tizimi va skrinrider O'QIYDI */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Sarlavha endi bannerdan tashqarida — oddiy sahifa sarlavhasi */
.lead{padding:6px 0 14px}
.lead h1{font-size:clamp(21px,2.7vw,32px);font-weight:800;letter-spacing:-.028em;
  line-height:1.14;color:var(--text)}
.lead p{margin-top:7px;color:var(--muted);font-size:clamp(13px,1.1vw,15px);line-height:1.5}
.psl img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;display:block}
/* Matn o'qilishi uchun to'q qatlam — rasmli slaydda ham, yaratilganida ham */
/* ⚠️ `z-index` ANIQ berilgan: `::after` DOM da `.pin` dan KEYIN keladi va
   `auto` bo'lsa matn USTIGA tushib, uni xira qilib qo'yardi (o'lchandi —
   oq matn kulrang bo'lib ko'rinardi). Tartib: rasm 0 → qatlamlar 1 → matn 4. */
.psl::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(6,10,18,.9) 0%,rgba(6,10,18,.66) 48%,rgba(6,10,18,.14) 88%)}
.psl-main::after{background:linear-gradient(100deg,rgba(6,10,18,.86) 0%,rgba(6,10,18,.6) 46%,rgba(6,10,18,.08) 82%)}
/* ⚠️ YARATILGAN bannerda to'q qatlam ANCHA YENGIL: foni allaqachon to'q
   gradient va ikkalasi qo'shilganda matn deyarli ko'rinmay qolgandi.
   Bu yerda qatlam faqat pastki chapni bir oz to'qlashtiradi. */
/* ⚠️ Kontrast MATN ZONASIDA (chap past) kerak, o'ng tomon yorqin qolsin —
   shunda «suratdek» ko'rinadi. Birinchi urinishda qatlam butun slaydga
   bir tekis tushib, matn xira bo'lib qolgandi (o'lchandi). */
.psl-gen::after{background:
  linear-gradient(100deg,rgba(4,8,14,.66) 0%,rgba(4,8,14,.34) 44%,rgba(4,8,14,.02) 76%),
  linear-gradient(0deg,rgba(4,8,14,.5) 0%,rgba(4,8,14,.1) 46%,transparent 70%)}
/* Matn o'zi ham qat'iyroq: kattaroq soya + biroz og'irroq harf */
.psl-gen .pin b{text-shadow:0 2px 18px rgba(0,0,0,.72),0 1px 3px rgba(0,0,0,.5)}
.psl-gen .pin em{text-shadow:0 2px 14px rgba(0,0,0,.7)}
.psl-gen .pin i{color:rgba(240,245,252,.94);text-shadow:0 1px 10px rgba(0,0,0,.6)}
.psl-gen .pin-c{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.34);color:#fff}

/* ── Yaratilgan banner (rasm yo'q) ──
   Gradient + yumshoq nur dog'i: yassi rangdan ko'ra «suratdek» ko'rinadi. */
.psl-gen{background:
  radial-gradient(120% 90% at 88% 18%, rgba(255,255,255,.16), transparent 62%),
  linear-gradient(118deg, var(--g1,#1d3a5c), var(--g2,#0d1a2b))}
.psl-gen::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background:
    radial-gradient(38% 60% at 82% 78%, rgba(255,255,255,.09), transparent 70%),
    repeating-linear-gradient(126deg, rgba(255,255,255,.045) 0 2px, transparent 2px 22px)}

/* ── Slayd ichidagi ma'lumot ── */
.pin{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:14px 15px;max-width:100%}
.pin-c{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:rgba(233,239,247,.9);
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.24);
  padding:4px 10px;border-radius:999px;margin-bottom:10px;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.psl.mid .pin b{font-size:clamp(17px,1.5vw,21px)}
.psl.mid .pin em{font-size:clamp(15px,1.3vw,18px)}
.pin b{display:block;font-size:clamp(15px,1.3vw,18px);font-weight:800;letter-spacing:-.02em;
  line-height:1.14;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.5);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pin em{display:block;font-style:normal;margin-top:7px;font-size:clamp(14px,1.15vw,16.5px);
  font-weight:800;color:var(--gold2,#e8c56a);text-shadow:0 1px 10px rgba(0,0,0,.45)}
.pin i{display:flex;align-items:center;gap:6px;font-style:normal;margin-top:8px;
  font-size:13px;color:rgba(233,239,247,.86);text-shadow:0 1px 8px rgba(0,0,0,.4)}
.pin i svg{width:14px;height:14px;flex-shrink:0}
.psl:hover .pin b{text-decoration:underline;text-underline-offset:3px}

/* ── Nuqtalar ── */
/* Nuqtalar endi karusel OSTIDA — kartalar ichida joy yo'q va ular
   kartaning o'z matni bilan chalkashardi. */
/* ⚠️ Saralash endi FILTR OYNASIDA (`.fg-sort`) — mobilda natijalar
   qatoridagi alohida tugma ortiqcha bo'lib qoldi (ikki joyda bir xil
   tanlov chalkashtirardi). Desktopda segmentli tugmalar qoladi. */
/* ⚠️ `!important` KERAK: `.sb-sort{display:flex}` bu qatordan PASTROQDA
   e'lon qilingan (1295-q.) va oddiy qoidani bekor qilardi. Saralash endi
   filtr oynasida — mobilda ikki joyda bir xil tanlov chalkashtirardi. */
/* Saralash ikki joyda: qidiruv qatorida (`.fg-sort2`, desktop) va filtr
   oynasida (`.fg-sort`, mobil). Har ekranda FAQAT BITTASI ko'rinadi. */
@media (max-width:900px){ .sb-sort{display:none!important} .fg-sort2{display:none!important} }
@media (min-width:901px){ .fg-sort{display:none!important} .sb-sort{display:none!important} }
.pdot{display:flex;gap:7px;justify-content:center;padding:11px 0 2px}
.pdot button{width:7px;height:7px;padding:0;border-radius:50%;cursor:pointer;
  background:var(--border2);border:0;transition:.22s}
.pdot button:hover{background:var(--muted)}
.pdot button.on{background:var(--blue2);width:20px;border-radius:99px}

@media (max-width:820px){ .head{max-width:82%} }
@media (max-width:700px){ .head{max-width:100%} .pin{max-width:100%} }
@media (prefers-reduced-motion:reduce){ .pst{transition:none} }
@media (max-width:620px){
  /* Mobilda banner o'ta baland bo'lib ketmasin — matn joylashsin */
  .promo img{min-height:150px;max-height:210px;object-fit:cover;object-position:center}
  .head{max-width:100%;padding:15px 16px}
  .head h1{font-size:20px}
  .head p{margin-top:5px;font-size:12px}
  .stats{margin-top:11px;gap:6px}
  /* ⚠️ Mobilda ham qatlam SLAYDNIKI (`.psl::after`), `.promo::after` emas —
     u olib tashlangan (izohi yuqorida). Bu yerda faqat rasm bo'lgan
     slaydda matn pastda turgani uchun pastki to'qlik kuchaytiriladi. */
  .psl::after{background:linear-gradient(165deg,rgba(6,10,18,.42) 0%,rgba(6,10,18,.82) 100%)}
  .psl-gen::after{background:linear-gradient(170deg,rgba(4,8,14,.22) 0%,rgba(4,8,14,.72) 100%)}
}

/* ============================================================
   FILTR PANELI
   ============================================================ */
/* Qidiruv qutisi — yumshoq gradient sirt + ustki yorug' chiziq (shisha effekti).
   Ichida biror maydon fokusda bo'lsa butun quti «jonlanadi». */
.filters{position:relative;   /* yashirin checkbox shu qutiga bog'lansin (pastdagi izohga qara) */
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.3fr) minmax(0,1.2fr) minmax(0,1.2fr) auto;
  gap:10px;border:1px solid var(--border);border-radius:calc(var(--r) + 2px);
  background:linear-gradient(180deg,color-mix(in srgb,var(--card2) 88%,transparent),var(--card));
  padding:13px;margin:18px 0 14px;box-shadow:var(--shadow);
  transition:border-color var(--t),box-shadow var(--t)}
.filters::before{content:"";position:absolute;inset:0 0 auto;height:1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--blue2) 40%,transparent),transparent)}
.filters:focus-within{border-color:color-mix(in srgb,var(--blue2) 42%,transparent);
  box-shadow:var(--shadow),0 0 0 3px color-mix(in srgb,var(--blue2) 12%,transparent)}
.ff{position:relative;display:flex;align-items:center}
.ff > .ic{position:absolute;left:13px;color:var(--muted);pointer-events:none;
  transition:color var(--t),transform var(--t)}
.ff:focus-within > .ic{color:var(--blue2);transform:scale(1.08)}
.filters input,.filters select{width:100%;padding:12px 13px 12px 38px;border:1px solid var(--border);
  border-radius:12px;font-size:14px;font-family:inherit;background:var(--field);color:var(--text);appearance:none;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.14);
  transition:border-color var(--t),box-shadow var(--t),background var(--t)}
:root[data-theme="light"] .filters input,:root[data-theme="light"] .filters select{box-shadow:inset 0 1px 2px rgba(22,48,79,.05)}
.filters input::placeholder{color:var(--muted)}
.filters select{cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px}
.filters input:hover,.filters select:hover{border-color:var(--border2)}
.filters input:focus,.filters select:focus{outline:none;border-color:var(--blue2);background:var(--card);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blue2) 20%,transparent)}

/* «Qidirish» — brend gradient + yumshoq yaltirash (hover'da o'tib ketadi) */
.filters button{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 26px;border:none;border-radius:12px;color:#fff;font-weight:700;font-size:14px;cursor:pointer;
  font-family:inherit;letter-spacing:-.005em;
  background:linear-gradient(135deg,#6ea3e0,var(--blue2) 42%,var(--navy));
  box-shadow:0 5px 16px color-mix(in srgb,var(--navy) 48%,transparent),
             inset 0 1px 0 rgba(255,255,255,.28);
  transition:filter var(--t),transform var(--t),box-shadow var(--t)}
.filters button::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);
  transform:skewX(-18deg);transition:left .55s cubic-bezier(.2,.7,.3,1)}
.filters button:hover::after{left:120%}
.filters button:hover{filter:brightness(1.06);transform:translateY(-1px);
  box-shadow:0 8px 22px color-mix(in srgb,var(--navy) 58%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
.filters button:active{transform:translateY(0) scale(.985);filter:brightness(.95);
  box-shadow:0 2px 8px color-mix(in srgb,var(--navy) 45%,transparent),inset 0 2px 5px rgba(0,0,0,.22)}
.filters button:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
.filters button .ic{width:15px;height:15px;transition:transform var(--t)}
.filters button:hover .ic{transform:rotate(-8deg) scale(1.06)}
@media (hover:none),(pointer:coarse){ .filters button::after{display:none} }
/* ============================================================
   QO'SHIMCHA FILTRLAR — desktopda doim ochiq, mobilda yig'iladi
   ⚠️ `<details>` ISHLATILMAYDI: desktopda `display:contents` bilan ham
      yopiq `<details>` bolalarini KO'RSATMAYDI (`open` — DOM holati, CSS uni
      majburlay olmaydi) → maydonlar butunlay yo'qolib qolgan edi.
      Shuning uchun checkbox+label: JS yo'q, klaviatura bilan ishlaydi.
   ⚠️ Checkbox'da `name` YO'Q — aks holda formaga qo'shilib yuborilardi.
   ============================================================ */
/* ⚠️ Ekrandan yashirish USULI muhim: oddiy `position:absolute;opacity:0` da
   element statik o'rnida qolib, mobilda sahifani GORIZONTAL cho'zib yubordi
   (scrollWidth 386 > 360). Standart `sr-only` qirqimi + `.filters`ga
   `position:relative` — endi hech qayerga toshmaydi, klaviaturaga ko'rinadi. */
.fadv-t{position:absolute;left:0;top:0;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* ═══ FILTR ENDI HAMMA EKRANDA — QALQIB CHIQUVCHI OYNA (2026-08-28) ════════
   Ilgari desktopda BARCHA tanlovlar (soha, viloyat, tuman, bandlik, maosh,
   jins, masofaviy) ochiq turardi. Endi mobil naqsh hamma joyda: qidiruv
   yonidagi «Filtrlar» tugmasi bosilganda oyna ochiladi.
   ⚠️ `.fadv{display:contents}` OLIB TASHLANDI — u maydonlarni to'g'ridan-
      to'g'ri grid ustuniga tarqatardi va oyna sifatida yig'ilmasdi. */
@media (min-width:901px){
  /* ⚠️ `position:relative` SHART — ochilgan filtr oynasi shunga nisbatan
     joylashadi (`.fgrid{position:absolute}`). */
  .filters.panel{position:relative}
}
/* ⚠️ `.fhead` da `hidden` atributi CSS `display:flex` bilan BEKOR bo'lardi
   (o'lchandi: balandligi 37px) — sahifada bo'sh «Filtrlar» qatori qolardi. */
.fhead[hidden]{display:none!important}
/* Filtr paneli YOPIQ holatda quti bo'lmasin: chegara/fon/padding faqat
   ochilgan oynada kerak (u `.fgrid` ning o'zida). */
.filters.panel{border:0!important;background:none!important;padding:0!important;
  box-shadow:none!important;min-height:0}
/* ≤900px — BITTA QATOR: [filtr] [🔍 yozish maydoni] [Qidirish] (user talabi 2026-08-02).
   Filtr CHAPDA, qidiruv maydoni O'NGDA — user aynan shu tartibni so'radi.
   ⚠️ Joylashuv ANIQ berilgan (`grid-column/row`), avto-joylashuvga tashlab qo'yilmagan:
      DOM tartibi fq → label → .fadv → tugma, ya'ni avto-joylashuvda ochiladigan
      panel tugmadan OLDIN kelib qatorni buzib yuborardi. HTML tartibini
      o'zgartirmasdan ustunlar shu yerda almashtiriladi. */
/* ═══ ORALIQ KENGLIK: 901–1150px (2026-08-12) ════════════════════════════════
   🔴 O'LCHOV: bu oraliqda filtr 5 ta ustunga (`2fr 1.3fr 1.2fr 1.2fr auto`)
   siqilib, tanlov maydonlari ~150px matn joyi bilan qolardi va yozuv
   KESILARDI — 1024px da «Barcha shaharlar» → «Barcha shaha».
   Egasi: «brauzer eni yoki bo'yi kichraysa buzilib ketyapti».
   Yechim: qidiruv maydoni butun qatorni oladi, tanlovlar pastki qatorga
   tushadi — har biriga ~300px joy tegadi va hech narsa kesilmaydi.
   ⚠️ 900px dan pastda boshqa tartib (yig'iladigan «Filtrlar» tugmasi) —
      unga tegilmagan, quyidagi blokda. */
@media (min-width:901px) and (max-width:1150px){
  .filters{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto}
  .filters .fq{grid-column:1/-1}
}

@media (max-width:900px){
  .filters{grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center}
  .fadv-s{grid-column:1;grid-row:1}
  .filters .fq{grid-column:2;grid-row:1}
  .filters button{grid-column:3;grid-row:1}
  .fadv{grid-column:1/-1;grid-row:2}
  .fadv-s{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;
    min-height:48px;min-width:54px;padding:11px 13px;border:1px solid var(--border);border-radius:12px;
    background:linear-gradient(180deg,var(--card2),var(--field));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    font-size:13.5px;font-weight:600;color:var(--text2);user-select:none;white-space:nowrap;
    transition:border-color var(--t),color var(--t),background var(--t),box-shadow var(--t),transform var(--t)}
  .fadv-s:active{transform:scale(.97)}
  .fadv-s .chev{color:var(--muted);transition:transform .25s cubic-bezier(.2,.7,.3,1),color var(--t)}
  .fadv-t:focus-visible + .fadv-s{outline:2px solid var(--blue2);outline-offset:2px}
  /* Faol filtr soni — oltin nuqta-belgi */
  .fadv-n{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;
    display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:800;line-height:1;
    color:#221b06;background:linear-gradient(135deg,var(--gold2),var(--gold));
    border:2px solid var(--card);box-shadow:0 2px 6px rgba(0,0,0,.3);font-variant-numeric:tabular-nums}
  .fadv-s.has{border-color:color-mix(in srgb,var(--gold) 42%,transparent);color:var(--text)}
  /* Ochilgan panel — alohida yaxlit quti (qator 2, to'liq kenglik) */
  .fadv{display:none;flex-direction:column;gap:9px;margin-top:1px;
    padding:12px;border:1px solid color-mix(in srgb,var(--blue2) 30%,transparent);border-radius:13px;
    background:linear-gradient(180deg,color-mix(in srgb,var(--blue2) 7%,var(--field)),var(--field));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
  .fadv-t:checked + .fadv-s{color:#fff;border-color:transparent;
    background:linear-gradient(135deg,var(--blue2),var(--navy));
    box-shadow:0 4px 13px color-mix(in srgb,var(--navy) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.22)}
  .fadv-t:checked + .fadv-s .chev,.fadv-t:checked + .fadv-s .ic{color:#fff}
  .fadv-t:checked ~ .fhead .fadv-s .chev{transform:rotate(180deg)}
  .fadv-t:checked + .fadv-s + .fadv{display:flex;animation:fslide .26s cubic-bezier(.2,.7,.3,1) backwards}
  @keyframes fslide{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
  /* Panel ichidagi maydonlar oq/qora fonda ajralib tursin */
  .fadv select{background:var(--card)}
  /* Yozish maydoniga imkon qadar ko'p joy: yon tugmalar ixcham, ikonka yaqinroq */
  .filters button{padding:11px 14px;gap:6px}
  .filters .fq input{padding-left:34px}
  .filters .fq > .ic{left:11px}
}
/* Tor ekran: «Filtrlar» yozuvi olib tashlanadi (ikonka+chevron qoladi),
   «Qidirish» yozuvi QOLADI — user aynan shu tugmani so'ragan.
   ⚠️ Matn `display:none` EMAS, ekran o'quvchi uchun qirqib yashiriladi. */
@media (max-width:520px){
  .fadv-s span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
  .fadv-s{gap:3px;padding:11px 10px}
}
@media (max-width:380px){
  .filters{gap:6px}
  .filters button{padding:11px 12px;font-size:13.5px}
}
/* ⚠️ Telefonda 2 ustunda tanlov matni so'z o'rtasidan kesilardi ("Barcha sohala▾") —
   shu sababli 560px dan pastda har bir maydon TO'LIQ KENGLIKDA turadi. */
/* ⚠️ Bu blok AVVAL `grid-template-columns:1fr` qilib har maydonni alohida qatorga
   tushirardi — yangi bir-qatorli tartibni (qidiruv·filtr·Qidirish) buzadi, shuning
   uchun ustun qoidasi OLIB TASHLANDI. Faqat ichki bo'shliq/o'lcham qoladi.
   Tanlov matni kesilmasin uchun `.fadv` paneli baribir to'liq kenglikda. */
@media (max-width:560px){
  .filters{padding:11px}
  /* ⚠️ O'LCHANDI: 390px da qidiruv maydoni 147px qolardi va «Kasb yoki kalit
     so'z» kesilardi. Tugma matni yashiriladi (ikonka + aria-label qoladi),
     maydon ~90px kengayadi. Qatordagi TARTIB o'zgarmaydi. */
  .filters button .f-go-t{display:none}
  .filters button{min-width:46px;padding-left:0;padding-right:0;gap:0}
  .filters input,.filters select{padding:12px 12px 12px 38px;font-size:14px;
    text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
  .filters select{padding-right:34px}
  .filters button{min-height:46px}
}

/* --- Tez tanlash chiplari (mashhur sohalar — bir bosishda filtr) --- */
/* Kengda o'raladi (hech narsa kesilmaydi), torda gorizontal siljiydi */
@media (max-width:900px){
}

.active-f{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.active-f a{display:inline-flex;align-items:center;gap:7px;min-height:34px;background:var(--field);
  border:1px solid var(--border);
  color:var(--text2);font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;transition:all var(--t)}
.active-f a:hover{border-color:var(--border2);color:var(--text)}
.active-f a.clear{color:#e0755c;border-color:rgba(217,90,63,.3)}

/* --- Asosiy tuzilma: ro'yxat + yon panel --- */
/* ═══ IKKI USTUN: PASTGA TUSHMASIN, KICHRAYSIN (2026-08-12) ══════════════════
   🔴 MUAMMO (egasi): «desktopda sahifa maydalashganda ma'lumotlarni ham
   maydalashtirish kerak, to'liq pastga tushib ketgan — o'ng tomondagi hamma
   narsa pastga tushib qolgan».
   SABAB: yon ustun FAQAT `min-width:1080px` da yonma-yon turardi va kengligi
   QAT'IY 300px edi. 1079px da esa butun ustun (SOHALAR + SHAHARLAR + chaqiruv
   kartalari) birdan pastga — e'lonlar ro'yxatining OSTIGA tushib ketardi.
   Ya'ni oyna 1px kichrayishi sahifa tuzilishini keskin o'zgartirardi.

   YECHIM: chegara 1080 → 900 (filtr paneli bilan bir xil nuqta), kenglik esa
   QAT'IY emas, SUYUQ: `clamp(208px, 23vw, 300px)` — oyna kichrayganda ustun
   ham kichrayadi, lekin YONIDA qoladi. Oraliqlar ham `clamp` bilan qisqaradi.
   900px dan pastda (telefon) pastga tushishi TO'G'RI — u yerda yonma-yon
   joy yo'q. */
.cols{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
@media (min-width:900px){
  .cols{grid-template-columns:minmax(0,1fr) clamp(208px,23vw,300px);gap:clamp(14px,1.7vw,24px)}
}
/* Ustun torayganda ichidagi yozuvlar ham bir oz kichrayadi — sig'may qolmasin */
@media (min-width:900px) and (max-width:1180px){
  .sc{padding:14px 14px}
  .sc ul a b{font-size:13px}
  .wrap{padding-left:clamp(12px,1.6vw,20px);padding-right:clamp(12px,1.6vw,20px)}
}

/* Ro'yxat sarlavhasi: «E'lonlar» + qaysi oraliq ko'rsatilyapti */
.lst-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 2px 12px}
.lst-h h2{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.lst-h span{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ============================================================
   E'LON QATORI
   ============================================================ */
.list{display:flex;flex-direction:column;gap:11px}
.j{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:start;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:17px 19px;overflow:hidden;
  animation:rise .42s cubic-bezier(.2,.7,.3,1) backwards;  /* ⚠️ `both` EMAS — u transform'ni muddatsiz qulflab hover'ni o'ldiradi */
  transition:transform var(--t),border-color var(--t),box-shadow var(--t),background var(--t)}
/* Chapdagi rangli aksent — hover'da chiqadi (karta "tiriladi") */
.j::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px;
  background:linear-gradient(180deg,var(--blue2),var(--gold));
  transform:scaleY(0);transform-origin:50% 0;transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.j:hover{transform:translateY(-2px);border-color:var(--border2);box-shadow:var(--shadow);background:var(--card2)}
.j:hover::before{transform:scaleY(1)}
.j:focus-visible{outline:2px solid var(--blue2);outline-offset:2px}
@keyframes rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* Avatar — soha rangida (inline `background` bilan beriladi) */
.j-av{position:relative;width:54px;height:54px;border-radius:15px;display:grid;place-items:center;overflow:hidden;
  flex-shrink:0;color:#fff;font-weight:800;font-size:20px;letter-spacing:-.02em;
  box-shadow:0 3px 10px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.16)}
/* ⚠️ `object-position:top` — 2026-08-12. E'lon rasmlarining aksariyati TIK
   poster (720×1280 kabi) va muhim qismi — sarlavha, korxona nomi, logotip —
   YUQORIDA turadi. 54×54 kvadratga `cover` bilan solinganda avval rasmning
   O'RTASI olinardi, ya'ni odatda bo'sh fon yoki matn o'rtasi: karta nima
   haqidaligi bilinmasdi. Yuqoridan kesilganda esa e'lon tanib olinadi. */
.j-av img{width:100%;height:100%;object-fit:cover;object-position:top center}


.j-t{font-size:16.5px;font-weight:700;letter-spacing:-.018em;line-height:1.32;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color var(--t)}
.j:hover .j-t{color:var(--blue2)}
/* «Yangi» — so'nggi 24 soat ichida qo'shilgan e'lon */

/* ⚠️ O'LCHANDI (2026-08-12): yorug' rejimda kontrast 4.08:1 edi — AA (4.5) YIQILGAN,
   ustiga 11px. Endi 12px + to'qroq yashil. Qorong'i rejimda `--ok` o'z holicha qoladi. */





.j-co .ic{width:14px;height:14px;opacity:.8}
/* So'nggi 24 soatdagi e'lon — vaqt matni yashil (qo'shimcha element YO'Q) */
.j-co .fresh,.j-co .fresh b{color:var(--ok);font-weight:700}
.j-co .fresh .ic{opacity:1}
:root[data-theme="light"] .j-co .fresh,:root[data-theme="light"] .j-co .fresh b{color:#0b6b39}


.j-chips .cat{border-color:var(--border2);color:var(--text)}
.j-chips .ai{display:inline-flex;align-items:center;gap:5px;
  background:linear-gradient(135deg,rgba(79,140,201,.2),rgba(201,161,59,.16));
  border-color:color-mix(in srgb,var(--blue2) 34%,transparent);color:var(--gold2);font-weight:700}
.j-chips .ai .ic{width:12px;height:12px;fill:currentColor;stroke:none}
:root[data-theme="light"] .j-chips .ai{color:#8a6a15}
.j-chips .rem{background:rgba(79,140,201,.14);border-color:rgba(79,140,201,.3);color:#6ea6e4}  /* ⚠️ chip fonida (#252e39) --blue2 faqat 4.31 berardi → 5.39 */
:root[data-theme="light"] .rem{color:#2f6ba8}

/* O'ng ustun: maosh + «Batafsil» */


.j:hover .j-sal{background:color-mix(in srgb,var(--gold) 15%,transparent)}
.j-sal .ic{width:14px;height:14px;margin-top:3px;opacity:.7;flex-shrink:0}


:root[data-theme="light"] .j:hover .j-sal{background:rgba(201,161,59,.24)}
.j-sal.none{color:var(--muted);font-weight:600;font-size:12.5px;background:none}
:root[data-theme="light"] .j-sal.none{color:var(--muted);background:none}
.j:hover .j-sal.none,:root[data-theme="light"] .j:hover .j-sal.none{background:none}
/* ⚠️ `opacity` BILAN xiralashtirilmaydi — u kontrastni 3.2 gacha tushirardi (WCAG AA 4.5 talab).
   Sokinlik rang bilan beriladi: odatda --muted (7:1), hover'da brend ko'ki. */
.j-go{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--muted);
  white-space:nowrap;transition:color var(--t),gap var(--t)}
.j:hover .j-go{color:var(--blue2);gap:9px}
.j-go .ic{width:14px;height:14px}
@media (max-width:760px){
  .j{grid-template-columns:auto minmax(0,1fr);gap:13px;padding:15px 16px}
  .j-av{width:46px;height:46px;border-radius:13px;font-size:17px}
  .j-t{font-size:15.5px}
  /* ⚠️ `max-width:150px` kompaniya nomini juda erta kesardi. Endi qatorning
     mavjud kengligiga moslashadi (flex ichida `min-width:0` + ellipsis). */






  /* «Batafsil» barmoq uchun yetarli maydon oladi */
  .j-go{padding:6px 0 6px 8px;font-size:13px}
}

/* ═══ KARTANI IXCHAMLASHTIRISH (2026-08-12, egasi so'radi) ═══════════════════
   O'LCHANGAN HOLAT: 390px da karta 222px, 24 ta karta ro'yxati 5574px.
   Sabablari va yechimi (har biri o'lchov bilan):
     1) «Yangi» belgisi sarlavhadan keyin SIG'MAY ikkinchi qatorga tushardi
        (.j-hd 57px). `flex-wrap:nowrap` + sarlavhaga `flex:1;min-width:0`
        bilan bitta qatorda qoladi — sarlavha kerak bo'lsa 2 qatorga qisqaradi.
     2) Bo'limlar orasidagi bo'sh joy (8px va 11px) kartani cho'zardi.
     3) Maosh qatori ustidagi ajratgich + 12px padding — 57px olardi.
   ⚠️ Bu ALOHIDA blok: yuqoridagi media bloklarning qavsiga tegmaydi.
   ⚠️ «Batafsil» matni QOLDIRILDI — u yagona tegish maydoni emas (butun karta
      havola), lekin foydalanuvchiga keyingi qadamni ko'rsatadi. */
@media (max-width:620px){
  .list{gap:9px}
  .j{padding:13px 14px;gap:12px}
  .j-av{width:44px;height:44px}

  .j-t{flex:1;min-width:0}
  /* ⚠️ O'LCHANDI: «Yangi» belgisi matni bilan 59px joy olib, sarlavhani
     190px ga siqardi va u 2 QATORGA tushardi (o'qish qiyinlashadi).
     Mobilda belgi NUQTAGA aylanadi: yashil signal qoladi, sarlavha esa
     yana bitta qatorga sig'adi. Matn DOM da qoladi — ekran o'quvchi o'qiydi,
     va `.j-co` qatorida «Bugun» ham turibdi, ya'ni ma'lumot yo'qolmaydi. */
  /* Belgi mobilda KERAK EMAS: yangilik signali endi vaqt matnida (`.fresh`).
     Yolg'iz yashil nuqta ma'nosiz ko'rinardi — shuning uchun olib tashlandi.
     Desktopda belgi qoladi (u yerda joy yetarli). */



  /* Maosh qatori: ajratgich chizig'i OLIB TASHLANDI (kartaning o'zi allaqachon
     ajratilgan) va padding qisqartirildi — qator 48px dan ~37px ga tushdi. */


  .j-go{padding:3px 0 3px 8px}

}
/* Juda tor ekranda sarlavha bilan belgi bitta qatorga tiqilib qolmasin */
@media (max-width:360px){

  .j-t{flex:none}
}
@media (max-width:400px){
  .j{padding:14px}
  .j-t{font-size:15px}

}

/* ============================================================
   YON PANEL
   ============================================================ */
.side{display:flex;flex-direction:column;gap:14px}
@media (min-width:1080px){ .side{position:sticky;top:76px} }
.sc{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:17px 18px;box-shadow:var(--shadow)}
.sc h2,.sc h3{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted);margin-bottom:12px}
.sc h2 .ic{width:14px;height:14px}
.sc ul{list-style:none;display:flex;flex-direction:column;gap:1px}
/* Har qatorda ingichka ulush chizig'i (--p = foiz) — ro'yxat "ma'lumotli" ko'rinadi */
.sc li a{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:38px;
  padding:8px 10px 9px;border-radius:9px;font-size:13.5px;color:var(--text2);overflow:hidden;
  transition:background var(--t),color var(--t)}
.sc li a::after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue2),var(--gold));opacity:.4;
  transform:scaleX(var(--p,0));transform-origin:0 50%;transition:opacity var(--t)}
.sc li a:hover{background:var(--field);color:var(--text)}
.sc li a:hover::after{opacity:.75}
.sc li a.on{background:var(--field);color:var(--text);font-weight:700}
.sc li a.on::after{opacity:.95}
.sc li a em{font-style:normal;font-size:12px;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums;flex-shrink:0}
.sc li a b{font-weight:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Chaqiruv kartalari (ish beruvchi / Telegram bot) */
.cta{position:relative;display:block;border-radius:var(--r);padding:17px 18px;overflow:hidden;color:#fff;
  border:1px solid transparent;box-shadow:var(--shadow);transition:transform var(--t),box-shadow var(--t)}
.cta:hover{transform:translateY(-2px)}
.cta.emp{background:linear-gradient(140deg,#2c5789,#16283f)}
.cta.bot{background:linear-gradient(140deg,#1f4d78,#101d2e)}
.cta::after{content:"";position:absolute;right:-32px;top:-32px;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(230,197,97,.3),transparent 68%);pointer-events:none}
.cta .cta-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;margin-bottom:10px;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.22)}
.cta .cta-ic .ic{width:17px;height:17px;color:#fff}
.cta strong{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.015em}
.cta p{font-size:12.5px;color:rgba(232,238,246,.82);margin-top:5px;line-height:1.5}
.cta .cta-b{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:13px;font-weight:700;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);padding:7px 14px;border-radius:10px;
  transition:background var(--t),gap var(--t)}
.cta:hover .cta-b{background:rgba(255,255,255,.22);gap:10px}
.cta .cta-b .ic{width:14px;height:14px}

/* ============================================================
   BO'SH HOLAT / SAHIFALASH
   ============================================================ */
.empty{text-align:center;padding:52px 24px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);box-shadow:var(--shadow)}
.empty .e-ic{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 14px;border-radius:17px;
  background:var(--field);border:1px solid var(--border);color:var(--muted)}
.empty .e-ic .ic{width:25px;height:25px;stroke-width:1.6}
.empty strong{display:block;font-size:16.5px;font-weight:700;color:var(--text);letter-spacing:-.015em}
.empty p{color:var(--muted);font-size:14px;margin-top:7px;line-height:1.6}
.empty .e-act{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.empty .e-act a{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:11px;
  font-size:13.5px;font-weight:700;background:var(--field);border:1px solid var(--border);color:var(--text2);
  transition:border-color var(--t),color var(--t)}
.empty .e-act a:hover{border-color:var(--border2);color:var(--text)}
.empty .e-act a.pri{background:linear-gradient(135deg,var(--blue2),var(--navy));border-color:transparent;color:#fff}
.pg{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:26px;flex-wrap:wrap}
.pg a,.pg span{min-width:38px;height:38px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:11px;font-size:14px;font-weight:600;background:var(--card);border:1px solid var(--border);
  color:var(--text2);font-variant-numeric:tabular-nums;transition:border-color var(--t),color var(--t),transform var(--t)}
.pg a:hover{border-color:var(--border2);color:var(--text);transform:translateY(-1px)}
.pg .cur{background:linear-gradient(135deg,var(--blue2),var(--navy));color:#fff;border-color:transparent;
  box-shadow:0 3px 12px color-mix(in srgb,var(--navy) 40%,transparent)}
.pg .dots{border:0;background:none;color:var(--muted);min-width:auto;padding:0 2px}

/* ⚠️ Ramkasiz — oddiy matn qatori (user: «shaffof oyna g'alati bo'lyapti») */
.api-note{margin-top:10px;text-align:center;padding:0 16px;font-size:12px;color:var(--muted);line-height:1.7}  /* ⚠️ `opacity:.8` OLIB TASHLANDI — rangni #4d79af ga aylantirib kontrastni 4.12 ga tushirardi */
.api-note code{padding:0;font-size:12px;color:var(--text2)}
.api-note a{color:var(--blue2);display:inline-block;padding:7px 2px}
/* ⚠️ O'LCHANDI: 56x15px edi — tegish maydoni kamida 32px balandlikda bo'lsin. */
.foot{text-align:center;color:var(--muted);font-size:12.5px;margin-top:34px}
.foot a{color:var(--blue2);display:inline-block;padding:8px 2px}
/* ⚠️ O'LCHANDI: 65x15px edi — barmoq uchun juda kichik (kamida 32px balandlik).
   `padding` bilan kengaytirildi; ko'rinish o'zgarmaydi (inline-block). */
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }

/* hover-siljimasin: teginish qurilmasida birinchi teginish hover'ni yoqib
   elementni siljitardi ("bir bosdim — qimirladi, ikkinchi — bosildi") */
@media (hover:none),(pointer:coarse){
  .j:hover,.filters button:hover,.side a:hover,.pg a:hover,.cta:hover{transform:none}
  /* teginishda aksent chiziq va o'q "sakramasin" — doim ko'rinadigan holatda */
  .j::before{transform:scaleY(1);opacity:.55}
  .j:hover .j-go{gap:6px}
  .j-go{color:var(--blue2)}
}

/* ⚠️ 2026-07-30 (Lighthouse link-in-text-block): matn ichidagi havolalar
   FAQAT rang bilan farqlanardi — rangni ajratmaydigan foydalanuvchi ularni
   ko'rmaydi. Endi ost chiziq qo'yiladi (WCAG 1.4.1). */
.foot a,.api-note a,p a:not(.btn):not(.np){text-decoration:underline;text-underline-offset:2px}
.foot a:hover,.api-note a:hover{text-decoration-thickness:2px}

/* Facet sahifasi: breadcrumb + soha matni (2026-08-11 SEO) */
.lcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:14px 0 0;
  font-size:12.5px;color:var(--muted)}
.lcrumb a{color:var(--text2)}
.lcrumb a:hover{color:var(--blue2)}
.lcrumb span{opacity:.55}
.lcrumb b{color:var(--text);font-weight:600}
.fintro{margin:18px 0 0;padding:13px 15px;border:1px solid var(--border);border-radius:var(--r-s);
  background:var(--card);color:var(--text2);font-size:13.8px;line-height:1.62;max-width:76ch}
@media (max-width:620px){ .fintro{font-size:13.2px;padding:11px 13px;line-height:1.58} }

/* ═══════════════════════════════════════════════════════════════════════════
   JIDDIY PALITRA  (2026-08-12, egasi: «ortiqcha ranglar umuman kerakmas,
   haqiqiy dasturchi qilgandek ko'rinsin»)
   ─────────────────────────────────────────────────────────────────────────
   QOIDA: bitta brend rangi (navy) + neytral kulranglar. Rang FAQAT ma'no
   tashiganda ishlatiladi, bezak uchun EMAS.
   Bu blok ENG OXIRIDA turadi va yuqoridagi bezakli qoidalarni bosadi —
   shu sababli o'zgarishni bir joydan ko'rish va qaytarish oson.
   ═══════════════════════════════════════════════════════════════════════ */
:root{--avbg:#eef2f7;--avfg:#4a5768}
:root[data-theme="dark"]{--avbg:#242629;--avfg:#9aa0a6}

/* Avatar — neytral sirt, harf o'qiladigan kontrastda */
.j-av{background:var(--avbg)!important;color:var(--avfg);font-weight:700}
.j-av img{mix-blend-mode:normal}

/* Maosh — oltin fon/rang OLIB TASHLANDI. Muhimligini QALINLIK bildiradi,
   rang emas (oltin 24 ta kartada takrorlanib shovqin yasardi). */

.j-sal .ic{opacity:.5}
.j-sal.none{color:var(--muted)!important;font-weight:600}

/* «Yangi» va «Bugun» — ikkita yashil signal bor edi, ikkalasi ham
   neytrallashtirildi. Yangilikni MATNNING O'ZI aytadi («Bugun»). */


.j-co .fresh,.j-co .fresh b{color:var(--text2)}

:root[data-theme="light"] .j-co .fresh,:root[data-theme="light"] .j-co .fresh b{color:var(--text2)}

/* Tugma va faol chip — gradient va porlash o'rniga TEKIS brend rangi */
.filters button{background:var(--navy);box-shadow:none}
.filters button::after{display:none}   /* qiya yaltirash effekti */

/* Yon paneldagi CTA kartalar — ko'k gradient bloklar edi. Endi boshqa
   kartalar bilan BIR XIL: tekis sirt + chegara. Ular reklama emas, yo'l. */
.cta.emp,.cta.bot{background:var(--card)!important;border:1px solid var(--border);color:var(--text)}
.cta.emp p,.cta.bot p{color:var(--muted)}
.cta.emp .cta-ic,.cta.bot .cta-ic{background:var(--field);color:var(--text2)}
.cta.emp .cta-b,.cta.bot .cta-b{color:var(--blue2)}

/* 🟡 OLTIN DOG' — aynan egasi aytgan «yonda sariq bo'lib yonadi».
   `.cta::after` da radial-gradient(rgba(230,197,97,.3)) turgan edi:
   kartaning burchagidan sariq yorug'lik tarardi. Bezakdan boshqa vazifasi
   yo'q — olib tashlandi. (Pseudo-element bo'lgani uchun oddiy rang
   tekshiruvida KO'RINMAYDI — shu sababli birinchi o'tishda o'tkazib
   yuborgandim; kelajakda `::before/::after` larni ham alohida tekshir.) */
.cta::after{display:none!important}

/* Filtr qutisi ustidagi yorug' chiziq va karta chetidagi rangli aksent —
   ikkalasi ham bezak. Aksent QOLADI, lekin neytral rangda (hover belgisi). */
.filters::before{display:none}
/* Kartaning CHAP chetida hover'da chiziq chiqardi (`.j::before`, 3px aksent).
   Egasi: «ustiga olib borganda chiziq paydo bo'lyapti, olib tashla».
   Butunlay o'chirildi — hover belgisi sifatida fon va chegara yetarli. */
.j::before{display:none!important}

/* Sahifalashdagi joriy raqam — gradient emas, tekis */
.pg .cur{background:var(--navy)!important;box-shadow:none}

/* Filtr qutisi — sezilmas gradient sirt edi, tekis qilindi */
.filters{background:var(--card)!important}

/* ═══════════════════════════════════════════════════════════════════════════
   NAMUNA BO'YICHA RO'YXAT (2026-08-12, egasi skrinshot berdi)
   · filtrlar — yorliqli to'r
   · e'lonlar — bitta panel ichida ingichka chiziq bilan ajratilgan TEKIS
     qatorlar (har biri alohida "quti" emas)
   ═══════════════════════════════════════════════════════════════════════ */
/* ⚠️ USTUNLAR SONI MAYDONLAR SONIGA MOS BO'LISHI SHART.
   Avval `1.6fr 1fr 1fr 1fr auto` edi — u 4 ta maydonga mo'ljallangan
   (qidiruv + kategoriya + shahar + SARALASH). Saralash alohida qatorga
   chiqarilgach ortiqcha ustun qoldi va «Qidirish» tugmasi butun ustunni
   egallab 242px ga cho'zildi — maydon kabi ko'rinib, tugmaga o'xshamasdi.
   Endi 3 maydon + tugma, tugma esa MAZMUNI bo'yicha o'lchanadi. */
.filters.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  padding:16px 18px 18px;box-shadow:none;
  display:grid;grid-template-columns:1.7fr 1.1fr 1.1fr auto;gap:12px 14px;align-items:end}
.filters.panel button{justify-self:start;min-width:150px;padding-left:26px;padding-right:26px}
.filters.panel .fhead{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.filters.panel .ftitle{font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--text)}
.filters.panel .fclear{font-size:13px;font-weight:600;color:var(--blue2)}
.filters.panel .fg{display:flex;flex-direction:column;gap:6px;min-width:0}
.filters.panel .fl{font-size:12px;font-weight:600;color:var(--muted)}
.filters.panel .fadv{display:contents}
.filters.panel .ff{margin:0}
.filters.panel button{align-self:end;height:44px}
/* Mobil: uch tanlov «Filtrlar» tugmasi ostida yig'iladi (o'lchangan sabab:
   ochiq holda forma butun birinchi ekranni egallardi) */
/* ⚠️ MOBIL — QATOR RAQAMI ANIQ BERILADI. Avval bermagan edim va grid
   avto-joylashuvi elementlarni ARALASHTIRIB yubordi: uch tanlov tepaga
   chiqib, «Filtrlar» va qidiruv maydoni pastda qolgan edi.
   ⚠️ Va ENG MUHIMI: `.fadv` ga `display:grid` bergan edim — u yig'ilish
      mantiqini (`.fadv-t:checked + .fadv-s + .fadv`) BOSIB ketdi va filtrlar
      doim ochiq turdi. Endi yopiq holat saqlanadi, ochilganda grid bo'ladi. */
@media (max-width:900px){
  .filters.panel{grid-template-columns:auto 1fr auto;padding:13px 14px 14px;gap:10px 10px}
  .filters.panel .fhead{grid-column:1/-1;grid-row:1}
  .filters.panel .ftitle{font-size:14.5px}
  .filters.panel .fadv-s{grid-column:1;grid-row:2;align-self:end;margin-bottom:0}
  .filters.panel .fg-q{grid-column:2;grid-row:2}
  .filters.panel .fg-q .fl{display:none}
  .filters.panel button{grid-column:3;grid-row:2}
  .filters.panel .fadv{grid-column:1/-1;grid-row:3;display:none}
  .filters.panel .fadv-t:checked + .fadv-s + .fadv{display:grid;grid-template-columns:1fr;gap:11px}
}

/* --- Kategoriyalar: pill emas, oddiy matn havola + son (namunadagi kabi) --- */

/* --- Breadcrumb + saralash qatori --- */
.sortbar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin:12px 2px 0;padding-top:12px;border-top:1px solid var(--border)}
.sb-crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);min-width:0}
.sb-crumb a{color:var(--muted)}
.sb-crumb a:hover{color:var(--blue2)}
.sb-crumb b{color:var(--text);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-sort{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;font-size:13px}
.sb-l{color:var(--muted);font-weight:600}
.sb-sort a{color:var(--text2);font-weight:600;padding:4px 0}
.sb-sort a:hover{color:var(--blue2)}
.sb-sort a.on{color:var(--text);font-weight:800;text-decoration:underline;text-underline-offset:4px}
@media (max-width:620px){
  .sortbar{gap:8px}
}

/* --- E'lon kartasi: namuna tuzilishi (har biri ALOHIDA karta) --- */
.list{display:flex;flex-direction:column;gap:12px;background:none;border:none;border-radius:0;overflow:visible}
.j{display:block!important;background:var(--card)!important;border:1px solid var(--border)!important;
  border-radius:var(--r)!important;box-shadow:none!important;padding:16px 18px!important;
  animation:none!important;transform:none!important}
.j:hover{border-color:var(--border2)!important;background:var(--card)!important;
  transform:none!important;box-shadow:none!important}

/* 1-qator: logo + sarlavha */
.j-top{display:flex;align-items:flex-start;gap:14px}
.j-av{width:48px!important;height:48px!important;border-radius:8px!important;flex-shrink:0;
  display:grid;place-items:center;overflow:hidden;font-size:18px}
.j-av[data-l]{border:1px solid var(--border)}
.j-t{font-size:17px;font-weight:700;line-height:1.36;letter-spacing:-.015em;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-width:0}
.j:hover .j-t{color:var(--blue2)}

/* 2-qator: ikonkali ma'lumotlar */
.j-meta{display:flex;flex-wrap:wrap;gap:9px 22px;margin-top:13px;
  font-size:13.5px;font-weight:600;color:var(--text2)}
.j-meta > span{display:inline-flex;align-items:center;gap:7px;min-width:0}
.j-meta .ic{width:15px;height:15px;color:var(--muted);flex-shrink:0}
.j-meta .m-sal b{font-weight:700;color:var(--text)}
.j-meta .rem,.j-meta .ai{color:var(--muted)}

/* 3-qator: lavozim yorlig'i */
.j-tag{display:inline-flex;align-items:center;gap:7px;margin-top:13px;padding:5px 10px;
  border:1px solid var(--border);border-radius:7px;font-size:12.5px;font-weight:600;color:var(--text2)}
.j-tag .ic{width:13px;height:13px;color:var(--muted)}

/* 4-qator: ajratgich + sana / Batafsil */
.j-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--border);
  font-size:12.5px;font-weight:600;color:var(--muted)}
.j-date{display:inline-flex;align-items:center;gap:7px}
.j-date .ic{width:14px;height:14px}
.j-go{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.j:hover .j-go{color:var(--blue2)}
.j-go .ic{width:14px;height:14px}

@media (max-width:620px){
  .j{padding:14px!important}
  .j-t{font-size:15.5px}
  .j-av{width:44px!important;height:44px!important}
  .j-meta{gap:7px 16px;margin-top:11px;font-size:13px}
  .j-tag{margin-top:11px}
  .j-foot{margin-top:12px;padding-top:10px}
}

/* Natija sarlavhasi — namunadagidek yirik */
.lst-h.res{align-items:baseline;margin:22px 2px 12px}
.lst-h.res h2{font-size:19px;font-weight:800;letter-spacing:-.02em}
@media (max-width:620px){ .lst-h.res h2{font-size:17px} }

/* Yon paneldagi ulush chiziqlari — «sariq bo'lib yonardi», endi neytral */
.sc li a::after{background:var(--border2)!important;opacity:.9}
.sc li a:hover::after,.sc li a.on::after{background:var(--muted)!important;opacity:1}
/* ═══ SAYQAL (2026-08-12) — o'lchangan kamchiliklar ═══════════════════════ */

/* 1. Yon panel ro'yxat bilan TEKISLANADI.
      O'LCHOV: `.side` y=485, `.lst-h` y=507 — 22px farq bor edi va yon panel
      «saralash» qatoriga yopishib turgandek ko'rinardi. Sabab: `.lst-h` ning
      22px yuqori chekkasi bor, `.side` da esa yo'q edi. */
.side{margin-top:22px}

/* 2. Karta ixchamroq: 207px → ~180px. Ichki bo'shliqlar 13-14px dan
      10-11px ga tushdi. E'lon ma'lumoti kam bo'lgani uchun bunchalik
      havo kerak emas — ko'z tezroq yuguradi. */
.j{padding:15px 18px!important}
.j-meta{margin-top:10px}
.j-tag{margin-top:10px}
.j-foot{margin-top:11px;padding-top:10px}

/* 3. MAOSH — e'londa eng ko'p qidiriladigan ma'lumot. Avval shahar bilan
      bir xil og'irlikda edi. Endi biroz yirikroq va to'q rangda; qolgan
      ma'lumotlar ikkinchi darajada qoladi. Rang QO'SHILMAYDI — faqat
      o'lcham va qalinlik farqi (jiddiy palitra buzilmaydi). */
.j-meta .m-sal b{font-size:14.5px;font-weight:800;color:var(--text);letter-spacing:-.01em}
.j-meta > span:not(.m-sal){color:var(--muted)}
.j-meta .m-sal .ic{color:var(--text2)}

/* 4. KLAVIATURA FOKUSI — avval ko'rinmasdi (Tab bilan yurgan odam qayerda
      turganini bilmasdi). Sichqoncha bilan bosganda CHIQMAYDI (:focus-visible). */
.j:focus-visible,.sb-sort a:focus-visible,
.sc li a:focus-visible,.pg a:focus-visible{outline:2px solid var(--blue2);
  outline-offset:2px;border-radius:var(--r-s)}

/* 5. Hover sezilarli bo'ldi: avval faqat chegara rangi o'zgarardi va
      sezilmasdi. Endi yumshoq soya ham qo'shiladi (rang emas — chuqurlik). */
.j{transition:border-color var(--t),box-shadow var(--t)}
.j:hover{box-shadow:0 1px 3px rgba(16,24,40,.06),0 4px 12px rgba(16,24,40,.06)!important}
:root[data-theme="dark"] .j:hover{box-shadow:0 2px 10px rgba(0,0,0,.28)!important}

/* Tegish maydonlari (o'lchandi): saralash havolalari 28px, breadcrumb 20px
   edi — barmoq uchun kamida 32px kerak. Ko'rinish o'zgarmaydi. */
.sb-sort a,.sb-crumb a{display:inline-flex;align-items:center;min-height:32px}



/* ═══════════════════════════════════════════════════════════════════════════
   DIZAYN TIZIMI — SHKALALAR (2026-08-12)
   ─────────────────────────────────────────────────────────────────────────
   AUDIT: shrift 11 xil · radius 9 xil · bo'shliq 17 xil edi.
   Har qiymat o'z holicha «to'g'ri» ko'rinadi, lekin BIRGALIKDA tizimsizlik
   sezilib turadi — aynan shu «AI yig'ib qo'ygan» taassurotni beradi.
   QOIDA: yangi qiymat yozma — shu yerdagi o'zgaruvchidan foydalan.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* Tipografiya: 5 pog'ona */
  --fs-xs:12px;      /* yorliq, sana, ikkilamchi meta */
  --fs-sm:13.5px;    /* meta, havolalar */
  --fs-md:14.5px;    /* asosiy matn, maosh */
  --fs-lg:17px;      /* karta sarlavhasi */
  --fs-xl:20px;      /* bo'lim sarlavhasi */
  /* Bo'shliq: 4px shkalasi */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  /* Burchak: 4 pog'ona */
  --r-s:8px;         /* maydon, yorliq, avatar */
  --r-m:12px;        /* o'rta bloklar */
  --r-p:999px;       /* pill */
}

/* ── Tipografiya shkalaga keltiriladi ── */
.j-t{font-size:var(--fs-lg)}
.j-meta{font-size:var(--fs-sm)}
.j-meta .m-sal b{font-size:var(--fs-md)}
.j-tag{font-size:var(--fs-xs)}
.j-foot{font-size:var(--fs-xs)}
.lst-h.res h2{font-size:var(--fs-xl)}
.lst-h.res span{font-size:var(--fs-xs)}
.filters.panel .ftitle{font-size:var(--fs-md)}
.filters.panel .fl{font-size:var(--fs-xs)}
.filters.panel .fclear{font-size:var(--fs-sm)}
.sb-crumb,.sb-sort,.sb-l{font-size:var(--fs-sm)}

/* ── Burchak radiusi shkalaga keltiriladi ── */
.j,.filters.panel{border-radius:var(--r)}
.j-av,.j-tag{border-radius:var(--r-s)}
.filters.panel .ff,.filters.panel input,.filters.panel select,.filters.panel button{border-radius:var(--r-s)}

/* ── Bo'shliq 4px shkalasiga keltiriladi ──
   Avval 5/7/9/11/15/17px kabi «tasodifiy» qiymatlar bor edi. */
.list{gap:var(--s3)}
.j{padding:var(--s4) var(--s5)!important}
.j-top{gap:var(--s3)}
.j-meta{margin-top:var(--s3);gap:var(--s2) var(--s5)}
.j-tag{margin-top:var(--s3);padding:var(--s1) 10px}
.j-foot{margin-top:var(--s3);padding-top:var(--s3)}
.filters.panel{padding:var(--s4) var(--s5) var(--s5);gap:var(--s3) var(--s4)}
.filters.panel .fg{gap:6px}
.sortbar{margin-top:var(--s3);padding-top:var(--s3)}
.lst-h.res{margin:var(--s5) 2px var(--s3)}
.side{margin-top:var(--s5)}

@media (max-width:620px){
  .j{padding:var(--s3) var(--s4)!important}
  .j-t{font-size:15.5px}
  .j-meta{gap:6px var(--s4);margin-top:10px}
  .j-tag{margin-top:10px}
  .j-foot{margin-top:10px;padding-top:10px}
}

/* ── Shkaladan tashqari qolgan qiymatlar (o'lchov bilan topildi) ──
   Har biri komponent-ma-komponent tekshirildi; ko'rinish o'zgarmaydi,
   faqat qiymatlar yagona shkalaga tushadi. */

/* Shrift */
.j-av{font-size:var(--fs-lg)}
.sc li a,.sc li a b,.sc li a em{font-size:var(--fs-sm)}
.pg a,.pg .cur,.pg .dots{font-size:var(--fs-sm)}
.f-go-t{font-size:var(--fs-md)}
.cta p,.api-note{font-size:var(--fs-xs)}

/* Radius */
.sc li a,.pg a,.pg .cur,.pg .dots,.cta-ic,.cta-b{border-radius:var(--r-s)}
.promo{border-radius:var(--r)}
.cta{border-radius:var(--r-m)}

/* Bo'shliq */
.sc{padding:var(--s4)}
.sc li a{padding:var(--s1) 10px}
.cta{padding:var(--s4)}
.cta-ic{margin-bottom:var(--s2)}
/* ⚠️ `.cta-b` da `background:rgba(255,255,255,.14)` bor edi — u GRADIENT
   karta uchun mo'ljallangan (shaffof oq ko'k fon ustida). Karta tekislangach:
   yorug'da oq-oqda ko'rinmasdi, qorong'ida esa kulrang dog' bo'lib qolardi.
   Endi ikkala rejimda ham oddiy havola — karta uslubiga mos. */
.cta-b{background:none!important;padding:var(--s2) 0 0!important;border-radius:0}
.stats i{padding:5px var(--s3)}

/* Gap — 7px/6px/10px/5px kabi «tasodifiy» qiymatlar 8px/4px ga keltirildi */
.j-meta > span,.m-sal,.j-tag,.j-date,.j-go{gap:var(--s2)}
.sc li a{gap:var(--s2)}
.stats i{gap:6px}

/* ═══ KATEGORIYA / SHAHAR PANELI (2026-08-13) ═══════════════════════════════
   Avval ulush chizig'i faqat to'ldirilgan qismdan iborat edi va har qatorda
   turli uzunlikda «osilib» turardi — diagramma emas, tasodifiy tag chizish
   kabi ko'rinardi. Endi: DOIMIY YO'LAK + ustida ULUSH.
   ⚠️ Eski qoida `transform:scaleX(--p)` ishlatardi — u yo'lak bilan
      birga ishlamaydi, shuning uchun `transform:none` va `width` bilan. */
.sc{padding:var(--s4) var(--s4) 10px}
.sc h2{display:flex;align-items:center;gap:var(--s2);margin:0 0 var(--s3);
  font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sc h2 .ic{width:14px;height:14px}
.sc ul{gap:2px}
.sc li a{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  min-height:0;padding:9px 10px 14px;border-radius:var(--r-s);
  font-size:var(--fs-sm);font-weight:600;color:var(--text2);
  transition:background var(--t),color var(--t)}
.sc li a:hover{background:var(--field);color:var(--text)}
.sc li a b{font-weight:inherit}
.sc li a em{font-size:var(--fs-xs);color:var(--muted);font-variant-numeric:tabular-nums}

/* Yo'lak (doimiy, to'liq kenglik).
   ⚠️ `--border` JUDA OCH edi (oq kartada #e2e7ef) — yo'lak ko'rinmay,
      faqat to'ldirilgan qism qolardi va diagramma o'qilmasdi.
      Endi alohida token: yorug'da sezilarli kulrang, qorong'ida ochroq. */
:root{--rail:#dde3ec}
:root[data-theme="dark"]{--rail:#34373b}
.sc li a::before{content:"";position:absolute;left:10px;right:10px;bottom:7px;
  height:3px;border-radius:999px;background:var(--rail)}
/* Ulush (qiymatga qarab) — `--p` inline beriladi */
.sc li a::after{content:"";position:absolute;left:10px;bottom:7px;
  height:3px;border-radius:999px;transform:none!important;opacity:1!important;
  width:calc((100% - 20px) * var(--p,0));
  background:var(--muted)!important;transition:background var(--t)}
.sc li a:hover::after{background:var(--text2)!important}
/* Faol kategoriya — YAGONA rangli belgi (ma'no tashiydi, bezak emas) */
.sc li a.on{background:var(--field);color:var(--text);font-weight:800}
.sc li a.on::after{background:var(--blue2)!important}
.sc li a.on em{color:var(--text2)}

/* ═══ FILTR — 2 QATORLI TUZILISH (2026-08-13) ═══════════════════════════════
   [Qidiruv (2 ustun)] [Kategoriya] [Shahar]
   [Maosh: dan–gacha ] [Jins]       [Qidirish]
   ⚠️ Ustunlar soni MAYDONLAR soniga mos: 4 ta teng ustun, tugma 4-ustunda. */
.filters.panel{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3) var(--s4)}
.filters.panel .fhead{grid-column:1/-1}
.filters.panel .fg-q{grid-column:1/3}
.filters.panel .fg-cat{grid-column:3}
.filters.panel .fg-city{grid-column:4}
.filters.panel .fg-sal{grid-column:1/3}
.filters.panel .fg-gen{grid-column:3}
.filters.panel button{grid-column:4;justify-self:stretch;min-width:0;align-self:end}

/* Maosh: ikki maydon + ajratgich */
.ff-2{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s2)}
.ff-dash{color:var(--muted);font-weight:600}
.ff-2 .ff{margin:0}
.ff-2 input{padding-left:12px!important;font-variant-numeric:tabular-nums}

@media (max-width:900px){
  /* Mobil: qidiruv + tugma ko'rinadi, qolgani «Filtrlar» ostida yig'iladi */
  .filters.panel{grid-template-columns:auto 1fr auto}
  .filters.panel .fhead{grid-column:1/-1;grid-row:1}
  .filters.panel .fadv-s{grid-column:1;grid-row:2}
  .filters.panel .fg-q{grid-column:2;grid-row:2}
  /* ⚠️ O'LCHANDI: qidiruv maydoni 390px ekranda atigi 149px qolardi va
     «Kasb yoki kalit so'z» kesilardi. Tugma ikonkaga aylanadi, gap
     toraytiriladi → maydon ~200px bo'ladi. */
  .filters.panel{gap:10px}
  .filters.panel button{grid-column:3;grid-row:2;justify-self:stretch;
    min-width:46px;width:46px;padding-left:0;padding-right:0;gap:0}
  .filters.panel .fadv-s{padding-left:10px;padding-right:10px}
  .filters.panel .fadv{grid-column:1/-1;grid-row:3}
  .filters.panel .fg-cat,.filters.panel .fg-city,
  .filters.panel .fg-sal,.filters.panel .fg-gen{grid-column:auto}
}

/* ═══════════════════════════════════════════════════════════════════════════
   FILTR — SIFAT QATLAMI (2026-08-13)
   Egasi: «juda oddiy bo'lib qolgan». Rang QO'SHILMAYDI — professional
   interfeysni ajratib turadigan narsa rang emas, balki: chuqurlik,
   aniq chegaralar, ierarxiya, fokus holati va nozik o'tishlar.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --fld:#fff; --fld-bd:#cfd8e6; --fld-sh:inset 0 1px 2px rgba(16,32,58,.06);
  --pnl-sh:0 1px 2px rgba(16,32,58,.05), 0 8px 24px -12px rgba(16,32,58,.16);
}
:root[data-theme="dark"]{
  --fld:#232427; --fld-bd:#3d4043; --fld-sh:inset 0 1px 2px rgba(0,0,0,.28);
  --pnl-sh:0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.6);
}

/* Panel: chuqurlik + aniqroq chegara */
.filters.panel{box-shadow:var(--pnl-sh);border-color:var(--border2)}

/* Sarlavha qatori — ajratgich bilan, faol filtr soni bilan */
.filters.panel .fhead{padding-bottom:var(--s3);border-bottom:1px solid var(--border);
  margin-bottom:var(--s1)}
.filters.panel .ftitle{display:inline-flex;align-items:center;gap:var(--s2)}
.fcount{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:999px;background:var(--navy);color:#fff;font-style:normal;
  font-size:11px;font-weight:800;line-height:1}
:root[data-theme="dark"] .fcount{background:var(--blue2);color:#0f1113}

/* Maydonlar: OQ fon + aniq chegara + ichki soya (tekis kulrang emas) */
/* ⚠️ `background` QISQARTMA XOSSA — u `background-image` ni ham NOLGA
   tushiradi va `<select>` ning maxsus strelkasi (linear-gradient bilan
   chizilgan) YO'QOLADI. Shuning uchun FAQAT `background-color`. */
.filters.panel input,.filters.panel select{background-color:var(--fld)!important;
  border:1px solid var(--fld-bd)!important;box-shadow:var(--fld-sh)!important;
  height:44px;transition:border-color var(--t),box-shadow var(--t)}
.filters.panel input:hover,.filters.panel select:hover{border-color:var(--muted)!important}
.filters.panel input:focus,.filters.panel select:focus{outline:none;
  border-color:var(--blue2)!important;
  box-shadow:var(--fld-sh),0 0 0 3px color-mix(in srgb,var(--blue2) 22%,transparent)!important}
.filters.panel .ff .ic{opacity:.75}

/* Maosh — YAGONA oraliq boshqaruvi (ikki alohida quti emas) */
.rng{display:grid;grid-template-columns:1fr auto 1fr auto;align-items:center;
  height:44px;padding:0 12px 0 0;background:var(--fld);border:1px solid var(--fld-bd);
  border-radius:var(--r-s);box-shadow:var(--fld-sh);
  transition:border-color var(--t),box-shadow var(--t)}
.rng:hover{border-color:var(--muted)}
.rng:focus-within{border-color:var(--blue2);
  box-shadow:var(--fld-sh),0 0 0 3px color-mix(in srgb,var(--blue2) 22%,transparent)}
/* ⚠️ SPETSIFIKLIK: `.filters.panel input` (0,2,1) `.rng input` (0,1,1) dan
   KUCHLIROQ — ikkalasida ham `!important` bo'lsa ham. Shu sababli selektor
   `.filters.panel .rng input` bo'lishi SHART, aks holda ichki maydonlar o'z
   chegarasini saqlab, «quti ichida quti» bo'lib ko'rinadi. */
.filters.panel .rng input{border:none!important;box-shadow:none!important;background:none!important;
  height:42px!important;padding:0 12px!important;min-width:0;
  font-variant-numeric:tabular-nums;font-weight:600}
.rng input:focus{box-shadow:none!important}
.rng-sep{width:1px;height:20px;background:var(--border2)}
.rng-cur{font-size:var(--fs-xs);font-weight:700;color:var(--muted);white-space:nowrap;padding-left:2px}

/* Jins — segmentli tugmalar (radio, JS yo'q) */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;height:44px;
  background:var(--field);border:1px solid var(--fld-bd);border-radius:var(--r-s);
  padding:3px;gap:2px}
.seg input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.seg label{display:grid;place-items:center;border-radius:6px;cursor:pointer;
  font-size:var(--fs-sm);font-weight:700;color:var(--muted);
  transition:background var(--t),color var(--t);user-select:none}
.seg label:hover{color:var(--text2)}
.seg input:checked + label{background:var(--card);color:var(--text);
  box-shadow:0 1px 2px rgba(16,32,58,.1)}
:root[data-theme="dark"] .seg input:checked + label{background:var(--card2);box-shadow:none}
.seg input:focus-visible + label{outline:2px solid var(--blue2);outline-offset:1px}

/* Tugma — yumshoq soya (gradient YO'Q) */
.filters.panel button{height:44px;box-shadow:0 1px 2px rgba(16,32,58,.12);
  transition:filter var(--t),box-shadow var(--t)}
.filters.panel button:hover{filter:brightness(1.08);box-shadow:0 2px 8px rgba(16,32,58,.18)}
.filters.panel button:active{filter:brightness(.96)}

@media (max-width:900px){
  .seg{height:42px}
  .rng{height:42px}
  .rng input{height:40px!important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   QIDIRUV + FILTRLAR — namuna bo'yicha tuzilish (2026-08-13)
   1-qator: Soha | Shahar | Bandlik | Maosh(dan) | Maosh(gacha) | Jins
   2-qator: Masofaviy ish                              Filtrlarni tozalash →
   ⚠️ Ustun nisbatlari namunadagidek: maosh maydonlari TORROQ (0.6fr).
   ═══════════════════════════════════════════════════════════════════════ */
/* ⚠️ O'LCHANDI: banner 298px da tugab, qidiruv paneli AYNAN 298px da
   boshlanardi — oraliq 0px, ya'ni panel bannerga yopishib turardi.
   Endi bo'shliq shkalasidan ajratiladi (desktop 24px / mobil 16px). */
.srch{display:block;margin:var(--s6) 2px 0}
@media (max-width:760px){ .srch{margin-top:var(--s4)} }

/* --- Asosiy qidiruv paneli --- */
/* ⚠️ Qidiruv qatoridagi ikki tanlov (soha, viloyat). Yorliqlar YASHIRIN —
   qatorni baland qilib yuborardi; tanlov nima ekani ikonka va standart
   matndan («Barcha sohalar») aniq. */
.fq2{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s3);min-width:0}
.fq2 .fl{display:none}
/* ⚠️ Bu TANLOV, tugma EMAS. `.srch-bar` ichidagi umumiy qoidalar ularni
   to'q ko'k tugma qilib qo'ygandi (o'lchandi) — odam bosiladigan tugma deb
   o'ylardi. Shuning uchun ko'rinish aniq berilgan: och fon, to'q matn,
   ikonka uchun joy. */
/* 🔴 QAVAT-QAVAT TUGMA (2026-08-28): `.ff` (o'rov) ham, uning ichidagi
   `.csel-b` (JS yasagan tugma) ham AYNI och fon + chegara bilan
   chizilardi — o'lchandi: DIV.ff 277×54 va BUTTON.csel-b 251×52,
   ikkalasi `rgb(238,242,247)` fonda. Ekranda «tugma ichida tugma»
   bo'lib ko'rinardi.
   ✅ O'rov SHAFFOF: ko'rinishni faqat `.csel-b` beradi. */
.fq2 .ff{min-height:52px;display:flex;align-items:center;
  padding:0!important;border-radius:14px;
  background:none!important;border:0!important;box-shadow:none!important;
  color:var(--text)!important}
.fq2 .ff > .ic{width:18px;height:18px;color:var(--muted);flex-shrink:0}
.fq2 select{min-width:0;flex:1;border:0!important;background:none!important;
  color:var(--text)!important;font-size:14.5px;font-weight:600;
  padding:0!important;height:auto!important;box-shadow:none!important;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.fq2 select:focus{outline:none}
/* 🔴 Sahifada `<select>` JS bilan chiroyli tugmaga almashtiriladi
   (`.csel-b`) va u BRAND NAVY fonda, oq matnda — filtr panelida to'g'ri,
   lekin qidiruv qatorida u TUGMAGA o'xshab qolardi va odam «Qidirish»
   deb bosardi (o'lchandi: `rgb(22,48,79)` fon, oq matn).
   Bu yerda u oddiy tanlov ko'rinishida bo'lishi kerak. */
/* Yagona ko'rinadigan qatlam — o'rov (`.ff`) shaffof. To'liq kenglikda. */
.fq2 .csel-b{background:var(--field)!important;color:var(--text)!important;
  border:1px solid var(--border)!important;box-shadow:none!important;
  font-weight:600!important;justify-content:space-between!important;
  min-height:52px!important;height:52px!important;border-radius:14px!important;
  padding:0 14px!important;width:100%!important;flex:1 1 auto!important}
.fq2 .csel-b:hover{border-color:var(--blue2)!important}
.fq2 .csel-b .ic,.fq2 .csel-b svg{color:var(--muted)!important}
/* Ikonka `.ff` da ham bor, `.csel-b` ham o'zinikini chizadi — ikkitasi
   ustma-ust tushmasin. */
.fq2 .ff > .ic{display:none}
@media (max-width:900px){
  /* Mobilda tanlovlar oynada — qatorda joy yo'q */
  .fq2{display:none}
}
/* ⚠️ Besh ustun: [qidiruv] [soha+viloyat] [Filtrlar] [Qidirish] (2026-08-28) */
/* ⚠️ `!important` KERAK: sahifada `label` uchun umumiy qoidalar bor
   (mobil filtr yorliqlari) va ular tugmani 0×0 ga siqib qo'yardi —
   o'lchandi: `width:0 height:0`, ya'ni tugma DOM da bor-u ko'rinmasdi. */
.fbtn{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  width:auto!important;height:auto!important;position:static!important;
  clip:auto!important;clip-path:none!important;overflow:visible!important;
  padding:0 16px;min-height:52px;border-radius:14px;border:1px solid var(--border);
  background:var(--card);color:var(--text);font-size:14.5px;font-weight:600;
  transition:.18s;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.fbtn:hover{border-color:var(--blue2)}
.fbtn:active{transform:scale(.97)}
.fbtn .ic{width:18px;height:18px;color:var(--muted)}
.fbtn.on{border-color:var(--blue2);color:var(--blue2)}
.fbtn.on .ic{color:var(--blue2)}
.fbtn i{font-style:normal;min-width:20px;height:20px;padding:0 6px;border-radius:99px;
  background:var(--blue2);color:#fff;font-size:12px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center}
@media (max-width:640px){ .fbtn span{display:none} .fbtn{padding:0 13px} }
/* 🔴 USTUNLAR EKRANGA QARAB (2026-08-28). Ilgari bu yerda TO'RT ustun
   qattiq yozilgan edi (`... auto auto`), lekin ≤900px da `.fq2` yashirinadi
   va uchta element qoladi — grid esa to'rtinchi ustunni kutib turardi,
   natijada qidiruv maydoni bilan «Qidirish» tugmasi USTMA-UST tushardi
   (o'lchandi: 760/640/480/390px da `ff × BUTTON`).
   Endi har bosqichda ustunlar ANIQ:
     >900px  [qidiruv] [soha+viloyat] [Filtrlar] [Qidirish]
     ≤900px  [qidiruv] [Filtrlar] [Qidirish]     (tanlovlar oynada)
     ≤560px  [qidiruv       ] ikkinchi qatorda [Filtrlar] [Qidirish] */
.srch-bar{display:grid;gap:var(--s3);margin-bottom:var(--s3);
  grid-template-columns:minmax(180px,1fr) minmax(260px,1.1fr) auto auto}
@media (max-width:900px){
  .srch-bar{grid-template-columns:minmax(0,1fr) auto auto}
}
@media (max-width:900px){
  /* ═══ MOBIL: BITTA QATOR — [Filtr] [qidiruv] [🔍] (2026-08-28) ═════════
     Egasi: «mobilda oldingi holatdagidek qil — filtr tugmasi, qidiruv
     yozish va uning yonida qidirish, yonma-yon tursin».
     Bu 2026-08-02 dagi tartibning O'ZI: filtr CHAPDA, qidiruv O'RTADA,
     qidirish O'NGDA. Men uni ikki qatorga bo'lib qo'ygandim — noto'g'ri.
     ⚠️ DOM tartibi: ff → fq2 → fbtn → button. `order` bilan filtr
        oldinga chiqariladi (HTML o'zgarmaydi).
     ⚠️ Tugmalar ikonka bilan — matn qatorni sindirib yuborardi. */
  .srch-bar{grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s2)}
  .srch-bar > .ff{grid-column:auto;order:2}
  .srch-bar > .fbtn{order:1;min-width:0!important;width:auto!important;padding:0 12px!important}
  .srch-bar > button{order:3;min-width:0!important;width:auto!important;padding:0 14px!important}
  .srch-bar .fbtn span,.srch-bar .f-go-t{display:none!important}
}
.srch-bar .ff{margin:0}
.srch-bar .ff{width:100%}
/* ⚠️ `padding-left` SHART: ikonka mutlaq joylashgan (left:13px) va usiz
   matn ikonka USTIGA yozilardi («Ka🔍b yoki kalit so'z»). */
.srch-bar input{height:52px!important;width:100%;font-size:var(--fs-md);
  padding-left:42px!important}
.srch-bar .ff .ic{left:15px}
/* ⚠️ Bu tugma `.filters` BLOKIDAN TASHQARIDA — eski `.filters button`
   qoidalari unga tegmaydi, shuning uchun uslubi shu yerda to'liq beriladi. */
.srch-bar button{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  height:52px;min-width:150px;padding:0 var(--s6);border:none;cursor:pointer;
  border-radius:var(--r-s);background:var(--navy);color:#fff;
  font-size:var(--fs-md);font-weight:700;font-family:inherit;
  box-shadow:0 1px 2px rgba(16,32,58,.12);
  transition:filter var(--t),box-shadow var(--t)}
.srch-bar button:hover{filter:brightness(1.08);box-shadow:0 2px 8px rgba(16,32,58,.18)}
.srch-bar button:active{filter:brightness(.96)}
.srch-bar button .ic{width:17px;height:17px}

/* --- Filtr paneli --- */
.filters.panel{display:block;padding:var(--s4) var(--s5) var(--s4)}
.filters.panel .fhead{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);padding-bottom:var(--s3);margin-bottom:var(--s3);
  border-bottom:1px solid var(--border)}

/* To'r: 6 ustun (maosh 2 ustunni egallaydi)
   ⚠️ SELEKTOR `.filters.panel .fgrid` BO'LISHI SHART: eski
      `.filters.panel .fadv{display:contents}` qoidasi (0,2,0) oddiy
      `.fgrid` (0,1,0) dan KUCHLIROQ va uni bosib ketardi — maydonlar
      to'r hosil qilmasdan ustma-ust taxlanardi. */
/* 🔴 `display:grid!important` OLIB TASHLANDI (2026-08-28): u filtrni
   HAMMA HOLATDA ochiq ushlab turardi va yangi «Filtrlar» tugmasi bosilmasa
   ham maydonlar ko'rinardi (o'lchandi). Ochilish endi checkbox bilan
   boshqariladi — pastdagi qoida. `!important` faqat ochilgan holatda
   qoladi: u eski `.fadv{display:contents}` qoidasini bosishi kerak. */
.filters.panel .fgrid{display:none;
  grid-template-columns:1.2fr 1.2fr 1.2fr .6fr .6fr 1.2fr;
  gap:var(--s3) var(--s4);align-items:end}
/* ⚠️ Oyna sifatida ochiladi — sahifa oqimini surmasin uchun `absolute`. */
.filters.panel .fadv-t:checked ~ .fgrid{display:grid!important;
  position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:40;
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:18px;box-shadow:0 18px 46px rgba(10,18,32,.22);
  animation:fslide .24s cubic-bezier(.2,.7,.3,1) backwards}
/* Fon — bosilsa yopiladi (mavjud `.fsh-bg`, endi desktopda ham) */
.filters.panel .fadv-t:checked ~ .fsh-bg{display:block;position:fixed;inset:0;z-index:39;
  background:rgba(8,10,14,.35)}
.fgrid .fg{display:flex;flex-direction:column;gap:6px;min-width:0}
.fgrid .fl{font-size:var(--fs-xs);font-weight:600;color:var(--muted)}
/* ⚠️ ESKI QOIDALARNI BOSISH: oldingi versiyada `.filters.panel .fg-sal`,
   `.fg-cat`, `.fg-city`, `.fg-gen` uchun ANIQ ustun raqamlari berilgan edi
   (4 ustunli tartib uchun). Ular spetsifikligi yuqori bo'lgani uchun yangi
   6 ustunli joylashuvni buzardi — `.fg-sal` 1–2 ustunga majburlanardi.
   Shuning uchun bu yerda `.filters.panel .fgrid > …` bilan qayta belgilanadi. */
.filters.panel .fgrid > .fg{grid-column:auto}
.filters.panel .fgrid > .fg-sal{grid-column:span 2}
.filters.panel .fgrid > .fg-rem{grid-column:1}
.sal-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.sal-2 input{padding-left:12px!important;font-variant-numeric:tabular-nums;
  text-align:left}
.fgrid .ff{margin:0}

/* Barcha boshqaruvlar BIR XIL balandlikda (namunadagi talab) */
.fgrid input,.fgrid select{height:44px}

/* Tozalash — o'ngda, pastda */
.freset{display:flex;justify-content:flex-end;margin-top:var(--s3);
  padding-top:var(--s3);border-top:1px solid var(--border)}
.freset a{font-size:var(--fs-sm);font-weight:600;color:var(--blue2);
  display:inline-flex;align-items:center;min-height:32px}
.freset a:hover{text-decoration:underline;text-underline-offset:3px}

/* Mobil yig'ish tugmasi — desktopda yashirin */
.filters.panel .fadv-s{display:none}

/* ── Planshet: 3 ustun ── */
@media (max-width:1100px){
  .filters.panel .fgrid{grid-template-columns:1fr 1fr 1fr}
  .filters.panel .fgrid > .fg-sal{grid-column:span 1}
  .filters.panel .fgrid > .fg-rem{grid-column:auto}
}

/* ── Mobil: bitta ustun, filtrlar yig'iladi ── */
@media (max-width:760px){
  /* ⚠️ Ilgari bu yerda `1fr auto` edi va u yuqoridagi (560px) `1fr 1fr`
     ni BEKOR qilardi — natijada «Filtrlar» 255px, «Qidirish» 95px bo'lib,
     tugmalar teng bo'lmasdi (o'lchandi). Endi ikkalasi teng. */
  /* ⚠️ `1fr 1fr` (ikki qator) OLIB TASHLANDI — u yuqoridagi bir qatorli
     tartibni bekor qilardi (o'lchandi: 3 element 108px balandlikda ikki
     qatorga tushardi). Egasi bir qator so'radi: [Filtr] [qidiruv] [🔍]. */
  .srch-bar{grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s2)}
  .srch-bar input{height:48px!important}
  /* ⚠️ `width:48px` va yashirin yozuv OLIB TASHLANDI: yuqoridagi 760px
     bloki tugmalarni teng va matnli qiladi. Balandlik qoladi. */
  .srch-bar button{height:48px}

  .filters.panel{padding:var(--s3) var(--s4)}
  .filters.panel .fhead{margin-bottom:0;padding-bottom:0;border-bottom:none}
  .filters.panel .fadv-s{display:inline-flex;align-items:center;gap:6px;
    min-height:36px;padding:0 10px;border:1px solid var(--fld-bd);
    border-radius:var(--r-s);background:var(--fld);color:var(--text2);cursor:pointer}
  .fadv-t:checked + .fadv-s .chev{transform:rotate(180deg)}
  .filters.panel .fgrid{display:none!important}
  .filters.panel .fadv-t:checked ~ .fgrid{display:grid!important;grid-template-columns:1fr;
    gap:var(--s3);margin-top:var(--s3);padding-top:var(--s3);
    border-top:1px solid var(--border)}
  .filters.panel .fgrid > .fg-sal,.filters.panel .fgrid > .fg-rem{grid-column:auto}
}

/* ═══ FILTR: IXCHAM VA SILJIMAYDIGAN (2026-08-13) ═══════════════════════════
   O'LCHOV: panel 231→288px o'sardi, chiplar +34px → ro'yxat 140px sakrardi.
   Endi balandlik DOIMIY: tozalash joyi band, chiplar yo'q, bir qator.
   ═══════════════════════════════════════════════════════════════════════ */
.filters.panel{padding:var(--s3) var(--s4)}
.filters.panel .fhead{padding-bottom:var(--s2);margin-bottom:var(--s2);gap:var(--s3)}
.filters.panel .ftitle{font-size:var(--fs-sm)}

/* Tozalash — sarlavhada, o'ngda. Joyi DOIM band (siljish bo'lmasin). */
.filters.panel .fclear{margin-left:auto;font-size:var(--fs-xs);font-weight:600;
  color:var(--blue2);display:inline-flex;align-items:center;min-height:28px;
  white-space:nowrap;transition:opacity var(--t)}
.filters.panel .fclear:hover{text-decoration:underline;text-underline-offset:3px}
.filters.panel .fclear.off{visibility:hidden;pointer-events:none}

/* Bitta qatorda 7 boshqaruv (keng ekran) */
.filters.panel .fgrid{grid-template-columns:1.35fr 1.15fr 1fr .6fr .6fr .8fr 1fr;
  gap:var(--s2) 10px;align-items:end}
.filters.panel .fgrid > .fg-sal{grid-column:span 2}
.filters.panel .fgrid > .fg-rem{grid-column:auto}
.fgrid .fl{font-size:11.5px;line-height:1.2}
.fgrid input,.fgrid select{height:40px}
.fgrid select{padding-right:26px}
.sal-2{gap:6px}

@media (max-width:1279px){
  .filters.panel .fgrid{grid-template-columns:1.2fr 1.2fr 1fr .6fr .6fr}
  .filters.panel .fgrid > .fg-rem{grid-column:span 2}
}
@media (max-width:1000px){
  .filters.panel .fgrid{grid-template-columns:1fr 1fr}
  .filters.panel .fgrid > .fg-sal,.filters.panel .fgrid > .fg-rem{grid-column:span 1}
}


/* ═══ ZAMONAVIY TANLOV RO'YXATI (2026-08-13) ═══════════════════════════════
   Native `<select>` ning OS ro'yxati bezatilmaydi — shuning uchun ustiga
   o'z qatlamimiz quriladi. Native element DOM da qoladi (forma uni yuboradi),
   faqat KO'RINMAYDI. `.csel-native` ni `display:none` qilmaymiz: ba'zi
   brauzerlarda yashirin element fokusni yo'qotib, forma holatini buzadi.
   ⚠️ Ro'yxat `position:fixed` — `.filters` yoki `.wrap` kesib qo'ymasin.
   ═══════════════════════════════════════════════════════════════════════ */
.csel{position:relative}
.csel-native{position:absolute;opacity:0;pointer-events:none;width:100%;height:100%;
  left:0;top:0;appearance:none;-webkit-appearance:none}

/* Tugma — native `select` bilan bir xil o'lchamda ko'rinadi */
/* ⚠️ ANIQLIK TUZOG'I: `.filters button` (0,1,1) — «Qidirish» tugmasi uchun
   yozilgan navy fon + oq matn + porlash — bu tugmaga ham tushardi va u
   qop-qora bo'lib qolgandi. Shuning uchun HAR BIR qoida `.filters` bilan
   boshlanadi (0,2,1) va porlash `::after` ATAYLAB o'chiriladi. */
.filters .csel-b{width:100%;height:40px;display:flex;align-items:center;gap:8px;
  padding:0 30px 0 38px;text-align:left;cursor:pointer;font:inherit;
  font-size:var(--fs-sm);font-weight:600;color:var(--text);letter-spacing:normal;
  background:var(--field);border:1px solid var(--border);border-radius:var(--r-s);
  overflow:visible;transform:none;filter:none;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.14);
  transition:border-color var(--t),box-shadow var(--t)}
.filters .csel-b::after{content:none}
:root[data-theme="light"] .filters .csel-b{box-shadow:inset 0 1px 2px rgba(22,48,79,.05)}
.filters .csel-b:hover{border-color:var(--border2);background:var(--field);
  transform:none;filter:none;box-shadow:inset 0 1px 2px rgba(0,0,0,.14)}
:root[data-theme="light"] .filters .csel-b:hover{box-shadow:inset 0 1px 2px rgba(22,48,79,.05)}
.filters .csel-b:active{transform:none;filter:none}
.filters .csel-b:focus-visible{outline:none;border-color:var(--blue2);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blue2) 20%,transparent)}
.filters .csel-b[aria-expanded="true"]{border-color:var(--blue2);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blue2) 20%,transparent)}
.csel-v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filters .csel-b:not(.set) .csel-v{color:var(--text2);font-weight:500}
.csel-car{position:absolute;right:13px;width:8px;height:8px;pointer-events:none;
  border-right:1.8px solid var(--muted);border-bottom:1.8px solid var(--muted);
  transform:translateY(-2px) rotate(45deg);transition:transform var(--t)}
.filters .csel-b[aria-expanded="true"] .csel-car{transform:translateY(1px) rotate(-135deg);border-color:var(--blue2)}

/* Ochiluvchi ro'yxat */
.csel-p{position:fixed;z-index:120;display:none;flex-direction:column;overflow:hidden;
  background:var(--card);border:1px solid var(--border2);border-radius:var(--r-m);
  box-shadow:0 14px 40px rgba(0,0,0,.42),0 2px 8px rgba(0,0,0,.24)}
:root[data-theme="light"] .csel-p{box-shadow:0 14px 40px rgba(22,48,79,.16),0 2px 8px rgba(22,48,79,.08)}
.csel-p.vis{display:flex;animation:cselIn .14s cubic-bezier(.2,.7,.3,1)}
@keyframes cselIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* Izlash — 8 tadan ko'p variant bo'lsa */
.csel-s{padding:9px 10px;border-bottom:1px solid var(--border);background:var(--card2)}
.csel-s input{width:100%;height:34px;padding:0 11px;font:inherit;font-size:var(--fs-sm);
  color:var(--text);background:var(--field);border:1px solid var(--border);
  border-radius:8px;outline:none}
.csel-s input:focus{border-color:var(--blue2)}

.csel-l{overflow-y:auto;overscroll-behavior:contain;padding:5px;scrollbar-width:thin}
.csel-l::-webkit-scrollbar{width:9px}
.csel-l::-webkit-scrollbar-thumb{background:var(--border2);border-radius:9px;
  border:3px solid var(--card)}

.csel-o{display:flex;align-items:center;gap:10px;min-height:36px;padding:6px 10px 6px 30px;
  position:relative;border-radius:8px;cursor:pointer;font-size:var(--fs-sm);
  font-weight:600;color:var(--text2)}
.csel-o > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csel-o > em{font-style:normal;font-size:var(--fs-xs);font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums}
.csel-o.cur{background:color-mix(in srgb,var(--blue2) 15%,transparent);color:var(--text)}
.csel-o.on{color:var(--text);font-weight:700}
/* ✓ — tanlanganini RANG emas, BELGI bildiradi */
.csel-o.on::before{content:"";position:absolute;left:11px;width:5px;height:9px;
  border-right:2px solid var(--blue2);border-bottom:2px solid var(--blue2);
  transform:rotate(45deg) translateY(-1px)}
.csel-n{padding:16px 12px;text-align:center;font-size:var(--fs-sm);color:var(--muted)}

/* Mobil — pastdan ko'tariladigan varaq (barmoqqa qulay) */
.csel-bg{position:fixed;inset:0;z-index:119;background:rgba(0,0,0,.42);
  animation:cselIn .14s ease}
.csel-p.sheet{left:0;right:0;bottom:0;top:auto;width:auto;max-height:72vh;
  border-radius:16px 16px 0 0;border-bottom:none}
.csel-p.sheet.vis{animation:cselUp .2s cubic-bezier(.2,.7,.3,1)}
@keyframes cselUp{from{transform:translateY(100%)}to{transform:none}}
.csel-p.sheet .csel-o{min-height:46px;font-size:var(--fs-md)}
.csel-p.sheet .csel-s input{height:40px}

@media (prefers-reduced-motion:reduce){
  .csel-p.vis,.csel-p.sheet.vis,.csel-bg{animation:none}
}

/* ═══ FOKUS: KO'K YONISH OLIB TASHLANDI + QIDIRUV MAYDONI TUZATILDI ════════
   (2026-08-13, egasi: «qidiruvga bosib yozsa atrofi ko'k bo'lib yonyapti»)

   🔴 IKKINCHI, KATTAROQ XATO SHU YERDA TOPILDI: `.srch-bar input` ga
      UMUMAN uslub berilmagan ekan — `.filters input` qoidalari faqat
      `.filters` ichida ishlaydi, qidiruv esa undan TASHQARIDA. Natijada
      maydon brauzer holicha qolgan: burchak 0, kulrang chegara va
      QORONG'I MAVZUDA HAM OPPOQ FON. Ko'k halqa ham o'sha — brauzerning
      standart `outline` i edi.
   ═══════════════════════════════════════════════════════════════════════ */
.srch-bar input{appearance:none;-webkit-appearance:none;
  background:var(--field);color:var(--text);
  border:1px solid var(--border);border-radius:var(--r-m);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.14);
  transition:border-color var(--t)}
:root[data-theme="light"] .srch-bar input{box-shadow:inset 0 1px 2px rgba(22,48,79,.05)}
.srch-bar input::placeholder{color:var(--muted)}
.srch-bar input:hover{border-color:var(--border2)}
/* ⚠️ Fokusda YONISH YO'Q: faqat chegara bir pog'ona to'qlashadi.
   Matn maydonida kursor (karetka) allaqachon fokusni ko'rsatadi, shuning
   uchun bu WCAG bo'yicha yetarli — halqa ortiqcha edi. */
.srch-bar input:focus,.srch-bar input:focus-visible{outline:none;
  border-color:var(--border2);background:var(--field);box-shadow:none}
:root[data-theme="light"] .srch-bar input:focus{box-shadow:none}

/* Filtr maydonlari ham xuddi shunday tinch — bittasi yonib, boshqasi
   yonmasa bir-biriga yopishmaydi. */
/* ⚠️ SPETSIFIKLIK: haqiqiy yonishni `.filters.panel input:focus` (0,3,1) beradi
   va unda `!important` bor — shuning uchun bekor qilish ham AYNI selektorda
   va `!important` bilan bo'lishi shart. `.filters input:focus` (0,2,1) yetmaydi. */
.filters input:focus,.filters select:focus{outline:none;border-color:var(--border2);
  background:var(--field);box-shadow:none}
.filters.panel input:focus,.filters.panel select:focus{outline:none;
  border-color:var(--border2)!important;box-shadow:var(--fld-sh)!important}
.rng:focus-within{border-color:var(--border2);box-shadow:var(--fld-sh)}
.filters .csel-b[aria-expanded="true"]{border-color:var(--border2);box-shadow:none}
.csel-s input:focus{border-color:var(--border2)}

/* ⚠️ Klaviatura bilan yuruvchilar uchun halqa QOLADI — tugmada karetka yo'q,
   busiz fokus qayerdaligi bilinmaydi. `:focus-visible` faqat klaviaturada
   ishlaydi, sichqoncha bilan bosganda ko'rinmaydi. */
.filters .csel-b:focus-visible{outline:2px solid var(--blue2);outline-offset:2px;
  border-color:var(--border2);box-shadow:none}

/* ═══ SARALASH — SEGMENTLI TUGMALAR (2026-08-13) ═══════════════════════════
   Avval tanlangani faqat tagidagi chiziq bilan bilinardi. Endi «yo'lak»
   (`.seg`) ichidagi ko'tarilgan yostiq — bosiladigan maydon ham aniq.
   ⚠️ SPETSIFIKLIK: eski `.sb-sort a.on` (0,2,1) tagiga chiziq chizadi —
      shuning uchun bekor qilish `.sb-sort .seg a.on` (0,3,1) bilan.
   ═══════════════════════════════════════════════════════════════════════ */
.sb-sort{gap:var(--s2) 10px}
.sb-l{color:var(--muted);font-weight:600;font-size:var(--fs-xs)}

/* ⚠️ Yo'lak foni `--field` EMAS: yorug' mavzuda `--field` sahifa foni bilan
   deyarli bir xil bo'lib, guruh ko'rinmay qolgandi. `color-mix` matn rangidan
   quriladi — shuning uchun HAR QANDAY fonda ajralib turadi. */
.seg{display:inline-flex;align-items:center;gap:2px;padding:3px;border:none;
  background:color-mix(in srgb,var(--text) 8%,transparent);border-radius:var(--r-p)}

.sb-sort .seg a{display:inline-flex;align-items:center;justify-content:center;
  min-height:0;height:30px;padding:0 13px;border-radius:var(--r-p);
  font-size:var(--fs-xs);font-weight:600;color:var(--text2);white-space:nowrap;
  text-decoration:none;transition:color var(--t),background var(--t)}
.sb-sort .seg a:hover{color:var(--text);background:color-mix(in srgb,var(--text) 6%,transparent)}
/* Tanlangan segment — qorong'ida YORUG'ROQ, yorug'da OQ yostiq.
   ⚠️ `:root` ning o'zi QORONG'I mavzu (yorug'i `[data-theme="light"]`). */
.sb-sort .seg a.on{color:var(--text);font-weight:700;background:var(--border2);
  text-decoration:none;box-shadow:none}
:root[data-theme="light"] .sb-sort .seg a.on{background:#fff;
  box-shadow:0 1px 3px rgba(22,48,79,.14)}
.sb-sort .seg a:focus-visible{outline:2px solid var(--blue2);outline-offset:1px}

/* Yorliqning uzun/qisqa shakli — sig'ishiga qarab */
.sg-s{display:none}
@media (max-width:820px){
  .sg-l{display:none}
  .sg-s{display:inline}
  .sb-sort .seg a{padding:0 11px}
}
/* Eng tor ekranda o'z qatorini to'liq egallaydi */
@media (max-width:620px){
  .sortbar{gap:var(--s2)}
  .sb-sort{width:100%}
  .seg{display:flex;flex:1;min-width:0}
  /* ⚠️ KAFOLAT: qaysi tilda bo'lmasin yorliq sahifani toshirmasin.
     Ruscha «Сначала новые» 360px da chetdan chiqib ketgandi — endi
     qisqa shakl («Новые») ishlatiladi, bu esa oxirgi himoya. */
  .sb-sort .seg a{flex:1;min-width:0;padding:0 6px;height:32px}
  .sg-s{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ═══════════════════════════════════════════════════════════════════════
   TUZATISH 2026-08-14 — 🔴 MOBILDA FILTR TANLOVLARI 46px GA QISILARDI
   ─────────────────────────────────────────────────────────────────────
   ALOMAT (≤900px, o'lchangan): 5/5 tanlov tugmasi ota-elementi 298–519px
   bo'lsa ham 46×46px kvadratga qisilib, matni «Barc…» / «Ham…» bo'lib
   kesilardi; ustiga `padding-left:0` tufayli matn CHAP IKONKA OSTIDAN
   (ikonka left=13px, matn left=1px) boshlanib, ikkisi bir-birini bosardi.

   🔴 ASL SABAB — «QIDIRISH» TUGMASINING QOLDIQ QOIDALARI:
   `.filters button` / `.filters.panel button` bloklari submit tugmasi
   uchun yozilgan edi (mobilda ikonka-kvadrat: `width:46px; padding:0;
   gap:0; min-width:46px`). Keyinchalik o'sha tugma `.srch-bar` ichiga
   KO'CHIRILDI — endi sahifadagi YAGONA `<button>` u va u `.filters`
   dan TASHQARIDA (`.fclear` = `<a>`, `.fadv-s` = `<label>`).
   Ya'ni bu qoidalar o'z nishonini yo'qotgan, yagona «qurboni» esa JS
   quradigan `.csel-b` bo'lib qolgan.

   ⚠️ SPETSIFIKLIK (shu fayldagi TAKRORLANGAN tuzoq):
      `.filters.panel button` = (0,2,1)  ← KUCHLI
      `.filters .csel-b`      = (0,2,0)  ← shuning uchun `width:100%` yutqazardi
      Bekor qilish (0,3,0) da yozildi. Fayldagi tartib yetarli emas edi —
      aniqlik tartibdan ustun turadi.

   ⚠️ `.filters` ichiga YANGI `<button>` qo'shsang, u avtomatik eski
      «Qidirish» uslubini oladi — shu blokdagidek ATAYLAB bekor qil.
   Tekshirish: `getComputedStyle($('.csel-b')).width` — ko'z bilan emas.
   ═══════════════════════════════════════════════════════════════════════ */
.filters.panel .csel-b{
  width:100%;min-width:0;                 /* ← width:46px / min-width:46px */
  height:44px;min-height:44px;            /* maydonlar bilan bir xil (44px) */
  align-self:center;                      /* ← align-self:end */
  padding-left:38px;padding-right:30px;   /* ← padding:0 → ikonka ustiga chiqardi */
  gap:8px;                                /* ← gap:0 */
}

/* 🔎 SHU YO'LDA TOPILDI — MAYDON IKONKASI TUGMA OSTIDA QOLIB KETGAN EDI.
   `.ff > .ic` (`position:absolute`, `z-index:auto`) va `.csel-b`
   (`position:relative`, TO'Q fon) — ikkalasi ham z-index'siz, shuning uchun
   DOM TARTIBI hal qiladi: tugma ikonkadan KEYIN kelgani uchun uni bosib
   turgan. Natijada chapdagi 38px joy sababsiz bo'sh ko'rinardi, holbuki
   `lsvg('tag')/lsvg('pin')/lsvg('clock')` har maydonga ataylab qo'yilgan
   va `.srch-bar` da xuddi shu ikonka KO'RINADI (nomuvofiqlik edi).
   ⚠️ `.ff > .ic` da `pointer-events:none` bor — ustiga chiqarish bosishga
      xalaqit bermaydi (tekshirildi: tanlov ro'yxati ochilyapti). */
.filters.panel .ff.csel > .ic{z-index:1}

/* ═══════════════════════════════════════════════════════════════════════
   2026-08-14 — MOBILDA FILTR = QALQIB CHIQUVCHI OYNA (egasi so'radi)
   ─────────────────────────────────────────────────────────────────────
   Ilgari «Filtrlar» bosilganda panel joyida ochilib, e'lonlar ro'yxatini
   pastga surib yuborardi. Endi pastdan ko'tariladigan OYNA (sheet).

   🔑 JS'SIZ ISHLAYDI — mavjud `#fadvT` checkbox mexanizmi saqlangan:
      `.fadv-t:checked ~ .fgrid`  → oyna
      `.fadv-t:checked ~ .fsh-bg` → orqa fon (`<label for>`, bosilsa yopiladi)
      `.fsh-x` ham `<label for>`. JS faqat avto-qo'llashni to'xtatadi.

   ⚠️ QAMROV `≤900px` — aynan `.fadv-s` (ochish tugmasi) ko'rinadigan
      oraliq. Desktopda filtr JOYIDA qoladi, hech narsa o'zgarmadi.
   ⚠️ `!important` MAJBURIY: manba qoida
      `.filters.panel .fadv-t:checked ~ .fgrid{display:grid!important}`
      (≤760px blokida) — bekor qilish ham `!important` bo'lishi shart.
   ⚠️ Z-INDEX: orqa fon 108, oyna 109. Tanlov ro'yxati (`.csel-bg` 119 /
      `.csel-p` 120) BALANDROQ — u oyna USTIDAN ochilishi kerak.
      Yangi qatlam qo'shsang shu tartibni buzma.
   ⚠️ `.csel-p` `document.body` ga qo'shiladi (oyna ichida EMAS) — shuning
      uchun oynaning `overflow-y:auto` si uni kesmaydi.
   ═══════════════════════════════════════════════════════════════════════ */
.fsh-bg,.fsh-h,.fsh-f{display:none}

/* ⚠️ 2026-09-05: `.fhead` (sarlavha + «Tozalash») desktopda KO'RINADI,
   mobil/planshetda YO'Q — u yerda filtr OYNA bo'lib ochiladi va tozalash
   oynaning o'zida (`.fsh-clr`). Chegara aynan `900px`: oyna shu nuqtada
   yoqiladi. Ilgari yashirish `760px` da edi, ya'ni 761–900px oralig'ida
   ikkala tozalash tugmasi birga chiqib qolardi. */
@media (max-width:900px){ .filters.panel .fhead{display:none} }

@media (max-width:900px){
  /* Orqa fon */
  .filters.panel .fadv-t:checked ~ .fsh-bg{display:block;position:fixed;inset:0;
    z-index:108;background:rgba(8,12,20,.58);animation:fshFade .2s ease}

  /* ── OYNANING O'ZI ── */
  .filters.panel .fadv-t:checked ~ .fgrid{
    display:flex!important;flex-direction:column;gap:var(--s3)!important;
    /* 🔴 `align-items:stretch` SHART. `.fgrid` da `align-items:end` bor
       (desktop GRIDda maydonlar pastdan tekislansin uchun). Grid → flex ga
       o'tkazilganda o'sha qiymat KO'NDALANG o'qqa aylanadi va hamma
       elementni o'ngga qisib qo'yadi: o'lchov `fsh-h` 129px, `fg` lar
       130–180px, har biri turli enda va o'ngga yopishgan holda chiqdi.
       ⚠️ Grid qoidasini flexga qayta ishlatganda `align-*` ni QAYTA BER. */
    align-items:stretch;
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:109;
    max-height:86vh;overflow-y:auto;overscroll-behavior:contain;
    margin:0!important;padding:0 var(--s4)!important;
    background:var(--card);border:none!important;border-top:none!important;
    border-radius:18px 18px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.45);
    animation:fshUp .28s cubic-bezier(.2,.7,.3,1)}

  /* Sarlavha — yopishqoq, oynaning eniga to'liq */
  .filters.panel .fadv-t:checked ~ .fgrid .fsh-h{
    display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
    position:sticky;top:0;z-index:2;background:var(--card);
    margin:0 calc(var(--s4) * -1);padding:18px var(--s4) var(--s3);
    border-bottom:1px solid var(--border)}
  /* Tortish chizig'i — «bu oyna suriladi» ishorasi */
  .filters.panel .fadv-t:checked ~ .fgrid .fsh-h::before{content:"";
    position:absolute;top:7px;left:50%;transform:translateX(-50%);
    width:38px;height:4px;border-radius:99px;background:var(--border2)}
  .fsh-t{font-size:var(--fs-lg);font-weight:800;display:inline-flex;
    align-items:center;gap:var(--s2)}
  .fsh-x{display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;flex-shrink:0;margin-right:-6px;cursor:pointer;
    border-radius:var(--r-s);color:var(--text2)}
  .fsh-x:active{background:var(--fld)}
  .fsh-x .ic{width:19px;height:19px}

  /* Pastki qator — yopishqoq */
  .filters.panel .fadv-t:checked ~ .fgrid .fsh-f{
    display:flex;align-items:center;gap:var(--s3);
    position:sticky;bottom:0;z-index:2;background:var(--card);
    margin:var(--s2) calc(var(--s4) * -1) 0;
    padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
    border-top:1px solid var(--border)}
  .fsh-clr{font-size:var(--fs-sm);font-weight:600;color:var(--blue2);
    flex-shrink:0;display:inline-flex;align-items:center;min-height:44px;
    padding:0 var(--s2)}

  /* 🔴 «Qidirish» tugmasining meros uslubini ATAYLAB BEKOR QILISH.
        `.filters.panel button` (≤900px) → width:46px; padding:0; gap:0 —
        bekor qilinmasa bu tugma ham 46px kvadratga qisilardi. */
  .filters.panel .fadv-t:checked ~ .fgrid .fsh-go{
    flex:1;width:auto;min-width:0;height:50px;
    padding:0 var(--s5);gap:var(--s2);align-self:auto;justify-self:auto;
    border-radius:var(--r-m);background:var(--navy);color:#fff;
    font-size:var(--fs-md);font-weight:700;overflow:hidden}
  .filters.panel .fadv-t:checked ~ .fgrid .fsh-go::after{content:none}

  /* Oyna ochiqda orqa sahifa surilmasin.
     ℹ️ `:has()` qo'llab-quvvatlanmasa fon suriladi — buzilmaydi, shunchaki
        qulaylik kamayadi (progressive enhancement). */
  html:has(.filters.panel .fadv-t:checked){overflow:hidden}
}

/* Eng tor ekran — oyna baland bo'lsin, maydonlar sig'sin */
@media (max-width:360px){
  .filters.panel .fadv-t:checked ~ .fgrid{max-height:92vh}
}

@keyframes fshUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fshFade{from{opacity:0}to{opacity:1}}

/* ═══════════════════════════════════════════════════════════════════════
   2026-08-14 — ASBOBLAR QATORI: [Filtrlar] [Saralash]  (egasi so'radi)
   ─────────────────────────────────────────────────────────────────────
   Egasi: «filtr tugmasini saralash oldiga ko'chir, saralashni ham bosib
   tanlaydigan qil — ekranda joy tejaladi, dizayn professional ko'rinadi».

   MOBILDA (≤760px):
     • Filtr panelining QUTISI umuman yo'q — u endi faqat oyna mexanizmini
       (checkbox + fon + `.fgrid`) saqlaydi, ko'rinmaydi.
     • Saralash 3 ta doim ko'rinadigan segment EMAS — bitta tugma, joriy
       tartibni ko'rsatadi, bosilsa oyna ochiladi.
     • Ikkala tugma bir qatorda, teng enda.

   DESKTOP butunlay O'ZGARMAGAN: `.fbtn`/`.sbtn`/`.sort-t`/`.sort-bg`
   standart holatda `display:none`, `.seg` esa avvalgi segmentli tugma.

   ⚠️ Saralash oynasi ham JS'SIZ (`#sortT` checkbox + `<label for>`).
   ⚠️ Z-INDEX: filtr oynasi bilan BIR XIL band (fon 108 / oyna 109).
      Ikkalasi bir vaqtda ochilmaydi — bittasi ochilsa ikkinchisining
      tugmasi fon ostida qoladi.
   ═══════════════════════════════════════════════════════════════════════ */
.sb-tools{display:flex;align-items:center;gap:var(--s3);min-width:0}
.fbtn,.sbtn,.sort-t,.sort-bg{display:none}

@media (max-width:760px){
  /* ── Filtr paneli mobilda QUTISIZ ── */
  .filters.panel{padding:0;margin:0;border:none;background:none;box-shadow:none}
  .filters.panel::before{content:none}

  /* ── Qator: breadcrumb tepada, ostida 2 tugma ── */
  .sortbar{flex-wrap:wrap;gap:var(--s2);align-items:stretch}
  .sb-crumb{width:100%}
  .sb-tools{width:100%;gap:var(--s2)}
  .sb-sort{flex:1;min-width:0;width:auto;gap:0}
  .sb-l{display:none}
  /* Desktop segmentlari mobilda YO'Q — o'rniga tugma+oyna */
  .seg{display:none}

  /* ── Ikkala tugma bir xil ko'rinishda ── */
  .fbtn,.sbtn{display:inline-flex;flex:1;min-width:0;align-items:center;
    justify-content:center;gap:var(--s2);height:42px;padding:0 var(--s3);
    border:1px solid var(--fld-bd);border-radius:var(--r-m);
    background:var(--fld);color:var(--text);font-size:var(--fs-sm);
    font-weight:600;cursor:pointer;box-shadow:var(--fld-sh);
    white-space:nowrap;overflow:hidden}
  .fbtn > span,.sbtn > span{overflow:hidden;text-overflow:ellipsis}
  .fbtn .ic,.sbtn .ic{width:16px;height:16px;flex-shrink:0;color:var(--muted)}
  .fbtn:active,.sbtn:active{transform:scale(.985)}
  /* Filtr faol bo'lsa tugma ajralib tursin */
  .fbtn.has{border-color:var(--blue2);color:var(--text)}
  .fbtn.has .ic{color:var(--blue2)}
  .fbtn .fcount{flex-shrink:0}
  /* Klaviatura fokusi — checkbox ko'rinmas, halqa YORLIQDA chiziladi */
  .fadv-t:focus-visible ~ .fhead ~ .sortbar .fbtn,
  .sort-t:focus-visible ~ .sbtn{outline:2px solid var(--blue2);outline-offset:2px}

  /* ── SARALASH OYNASI ── */
  .sort-t:checked ~ .sort-bg{display:block;position:fixed;inset:0;z-index:108;
    background:rgba(8,12,20,.58);animation:fshFade .2s ease}
  .sb-sort .sort-t:checked ~ .seg{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    /* 🔴 `height:auto` SHART: `.seg` da QAT'IY balandlik bor
       (`.seg{height:44px}`, mobilda `42px`) — u segmentli tugma uchun
       yozilgan. Bekor qilinmasa oyna 42px bo'lib qolib, variantlar
       kesilib ketadi va bosib bo'lmaydi (o'lchov: h=42, havolalar ishlamadi). */
    height:auto;min-height:0;
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:109;
    max-height:80vh;overflow-y:auto;overscroll-behavior:contain;
    margin:0;padding:0 var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
    background:var(--card);border:none;border-radius:18px 18px 0 0;
    box-shadow:0 -10px 40px rgba(0,0,0,.45);
    animation:fshUp .28s cubic-bezier(.2,.7,.3,1)}
  .sb-sort .sort-t:checked ~ .seg .fsh-h{
    display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
    position:sticky;top:0;z-index:2;background:var(--card);
    margin:0 calc(var(--s4) * -1);padding:18px var(--s4) var(--s3);
    border-bottom:1px solid var(--border)}
  .sb-sort .sort-t:checked ~ .seg .fsh-h::before{content:"";position:absolute;
    top:7px;left:50%;transform:translateX(-50%);
    width:38px;height:4px;border-radius:99px;background:var(--border2)}

  /* Variantlar — to'liq enli qatorlar (segment EMAS) */
  /* 🔴 `flex:0 0 auto` SHART — `align-items` bilan AYNI TURDAGI tuzoq.
     `@media(max-width:620px)` da `.sb-sort .seg a{flex:1 1 0}` bor: u
     GORIZONTAL segmentlarni teng enli qilish uchun yozilgan. USTUN
     yo'nalishidagi oynada esa `flex-basis:0` ASOSIY o'q = BALANDLIK ni
     nolga tushiradi va `height:54px` e'tiborsiz qoladi (o'lchov: qator
     23px, oyna 148px — variantlarni bosib bo'lmasdi).
     ⚠️ Gorizontal boshqaruvni vertikal ro'yxatga aylantirganda
        `flex`, `align-items`, `height` — UCHALASINI ham qayta ber. */
  .sb-sort .sort-t:checked ~ .seg a{display:flex;align-items:center;
    flex:0 0 auto;
    justify-content:flex-start;height:54px;padding:0;border-radius:0;
    background:none;color:var(--text);font-size:var(--fs-md);font-weight:600;
    border-bottom:1px solid var(--border)}
  .sb-sort .sort-t:checked ~ .seg a:last-child{border-bottom:none}
  .sb-sort .sort-t:checked ~ .seg a.on{font-weight:800;background:none;
    box-shadow:none}
  /* Tanlangani — ko'k ✓ (rang MA'NO tashiydi, bezak emas) */
  .sb-sort .sort-t:checked ~ .seg a.on::after{content:"";margin-left:auto;
    width:9px;height:16px;border:solid var(--blue2);border-width:0 2.4px 2.4px 0;
    transform:rotate(45deg) translateY(-2px)}
  /* ⚠️ Oynada joy YETARLI → TO'LIQ yorliq ko'rsatiladi.
        `@media(max-width:820px)` da `.sg-l{display:none}` bor (tor segment
        uchun) — bu yerda ATAYLAB bekor qilinadi. */
  .sb-sort .sort-t:checked ~ .seg .sg-l{display:inline}
  .sb-sort .sort-t:checked ~ .seg .sg-s{display:none}

  html:has(.sort-t:checked){overflow:hidden}
}

/* ═══════════════════════════════════════════════════════════════════════
   🔴 OYNA NAVIGATSIYANI QOPLAMASDI — STACKING KONTEKST TUZOG'I
   ─────────────────────────────────────────────────────────────────────
   Alomat: oyna ochilganda sahifa qorayadi, LEKIN tepadagi nav yorug'
   qolib, hatto bosiladigan holatda turardi.
   Sabab: `_seo.php` dagi `.wrap{position:relative;z-index:2}` — u
   STACKING KONTEKST yaratadi, shuning uchun uning ichidagi oynaning
   `z-index:109` i BODY darajasida `2` ga qisiladi. Nav esa
   `position:sticky;z-index:30` — ya'ni 30 > 2, nav yuqorida qoladi.
   ⚠️ Ichkaridagi z-index qanchalik katta bo'lmasin, ota kontekstdan
      YUQORIGA CHIQOLMAYDI. Muammoni z-index ni 999 qilib hal qilib
      bo'lmaydi — ota kontekstni ko'tarish kerak.
   Yechim: oyna OCHIQ paytdagina `.wrap` ni nav'dan yuqori ko'taramiz.
   ⚠️ `.wrap` ning `z-index:2` si `body::after` (shovqin teksturasi,
      z-index:1) ustida turishi uchun kerak — 40 ham undan yuqori,
      shuning uchun tekstura buzilmaydi.
   ⚠️ `_seo.php` dagi `.wrap` qoidasiga TEGILMADI (u 2 domenda nusxa).
   ℹ️ `:has()` bo'lmagan brauzerda eski holat qoladi (nav yorug') —
      buzilmaydi, shunchaki ko'rinish yomonroq.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  html:has(.filters.panel .fadv-t:checked) .wrap,
  html:has(.sb-sort .sort-t:checked) .wrap{z-index:40}
}

/* ══════════════════════════════════════════════════════════════════════
   ZICHLIK — ekranga ko'proq e'lon sig'sin                   2026-08-25
   ⚠️ O'LCHANGAN: karta 213px, ro'yxat BITTA ustun → 900px balandlikdagi
      ekranda atigi 2 ta e'lon ko'rinardi (1760 ta e'loni bor saytda).
      Sabab: `.wrap` 1260px ga qamalgan va `.list` bitta ustun.
   ⚠️ KARTA TUZILISHI O'ZGARMAYDI — u namunaga ataylab moslangan
      (yuqoridagi izohga qara). Faqat bo'shliqlar va USTUNLAR SONI.
   ══════════════════════════════════════════════════════════════════════ */
/* 1) Bo'shliqlar biroz ixchamlashtirildi (~20px har kartada)
   ⚠️ `padding` FAQAT desktopda: mobilda allaqachon ixchamroq qiymat bor
      (`13px 14px`), `!important` bilan uni bosib qo'ysak karta KATTALASHIB
      ketardi — teskari natija. */
@media (min-width:761px){ .j{padding:14px 18px!important} }
.j-meta{margin-top:9px}
.j-tag{margin-top:9px}
.j-foot{margin-top:9px;padding-top:9px}
.list{gap:9px}

/* 2) Keng ekranda IKKI USTUN.
      1400px dan boshlanadi: shunda har ustun ≥460px bo'ladi va karta
      ichidagi matn (maosh, joylashuv) siqilib qolmaydi.
      ⚠️ `.j` keyingi qatlamda `display:block!important` — ya'ni karta
         oddiy blok, shuning uchun grid ichida bemalol joylashadi. */
@media (min-width:1400px){
  .wrap{max-width:1560px}
  .list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;align-content:start}
}
/* ⚠️ 3 USTUN SINAB KO'RILDI VA RAD ETILDI (o'lchov bilan):
   1920px da ustun 388px ga tushib, matn ko'proq o'ralgani uchun karta
   balandligi 197px dan 226px ga OSHDI va ekranda 4 emas, 3 ta e'lon
   qoldi — ya'ni zichlik YOMONLASHDI. 2 ustun optimal:
   1440px da 519px, 1920px da 587px kenglik. */

/* ══════════════════════════════════════════════════════════════════════
   MOBIL KARTA — O'LCHANGAN KAMCHILIKLAR              2026-08-25
   Telefonda 24 karta o'lchandi. Uchta aniq muammo topildi:
   ══════════════════════════════════════════════════════════════════════ */

/* 🔴 1. TEGISH MAYDONI KICHIK EDI.
      «Arza» 50×31px, «Batafsil» 80×26px — barmoq uchun eng kam o'lcham
      44px (Apple HIG · Android · WCAG 2.5.8). «Arza» — bu ARIZA tugmasi,
      ya'ni saytdagi eng muhim amal; uni bosish qiyin bo'lmasligi kerak.
      ⚠️ Balandlik `min-height` bilan emas, `padding` bilan berilmaydi —
         aks holda halqa (border-radius) cho'zilib ketardi. */
@media (max-width:820px){
  .j-foot{gap:6px}
  .j-ap{min-height:44px;padding:0 18px;justify-content:center}
  .j-go{min-height:44px;display:inline-flex;align-items:center;gap:6px;padding-left:6px}
}

/* 🔴 2. MA'LUMOT QATORI TASODIFIY BO'LINARDI.
      `.j-meta{flex-wrap:wrap}` tufayli maosh va joylashuv matn uzunligiga
      qarab goh BITTA, goh IKKI qatorga tushardi (o'lchov: 24 kartadan
      6 tasi 1 qator, 18 tasi 2 qator). Natijada ro'yxatda karta tartibi
      sakrab turardi. Endi telefonda HAR DOIM ustma-ust — bashorat qilinadi. */
@media (max-width:820px){
  .j-meta{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:5px}
  .j-meta>span{max-width:100%}
}

/* ⚠️ 3. JOYLASHUV UZUN BO'LSA 2 QATORGA CHIQIB kartani cho'zardi
      (balandlik 189px dan 259px gacha sakrardi). Endi bitta qator —
      to'liq manzil baribir e'lon sahifasida bor. */
@media (max-width:820px){
  .j-meta>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    display:block;min-width:0}
  .j-meta .m-sal{white-space:normal}          /* maosh KESILMAYDI — eng muhim */
  .j-meta .m-sal b{overflow-wrap:anywhere}
}

/* ⚠️ Xuddi shu nomutanosiblik 2 USTUNLI DESKTOPDA ham bor (o'lchov:
   qatorlar [1,2] aralash, balandlik 197–226px). Ustun 520px bo'lgani
   uchun maosh+joylashuv goh sig'adi, goh sig'maydi. Gridda esa qator
   eng baland kartaga tenglashadi — qolganlarida bo'sh joy qoladi.
   Shu sababli 2 ustun rejimida ham ustma-ust qilinadi. */
@media (min-width:1400px){
  .j-meta{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:6px}
  .j-meta>span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    display:block;min-width:0}
  .j-meta .m-sal{white-space:normal}
  .j-meta .m-sal b{overflow-wrap:anywhere}
}

/* 🔴 TUZATISH (2026-08-25): yuqorida `.j-meta>span` ga `display:block`
   berilgan edi — busiz `text-overflow:ellipsis` ishlamaydi (flex ichidagi
   anonim matnga qo'llanmaydi). Lekin BUNING NARXI bor edi: ikonka bilan
   matn orasidagi bo'shliq `.m-sal,...{gap:var(--s2)}` dan kelardi va
   `gap` FAQAT flex/grid da ishlaydi → «💵4 000 000» bo'lib yopishib qoldi.
   Yechim: blok holicha qoldiramiz, bo'shliqni ikonkaning O'ZIGA beramiz. */
@media (max-width:820px), (min-width:1400px){
  .j-meta>span>svg,.j-meta>span>.ic{margin-right:7px;vertical-align:-.16em;flex:none}
}

/* ═══ «Ishlar / 1931 ta ish topildi / 1–24» OLIB TASHLANDI (2026-08-28) ═════
   Egasi: «shularni mobilidayam desktopdayam olib tasha, kerak emas».
   Uchalasi ham ortiqcha edi: e'lon soni tanlovlarda ko'rinadi, breadcrumb
   «Ishlar» esa logo bilan bir joyga (`/`) olib borardi.

   ⚠️ H2 ni O'CHIRMADIM — `.sr-only` bilan EKRANDAN oldim, chunki:
     · sahifada H1 «Ish e'lonlari» bor, H2 undan keyingi pog'ona —
       DOM'dan olib tashlansa sarlavha ierarxiyasi uziladi;
     · «1931 ta ish topildi» qidiruv tizimlari va skrin o'quvchilar uchun
       sahifaning nima ekanini bildiradi (bepul SEO, ko'zga ko'rinmaydi).
   ⚠️ `.sortbar` ni `display:none` QILMADIM — uning ichida filtr oynasini
      ochadigan holat elementlari bor, `display:none` ularning `~` selektor
      zanjirini uzib qo'yishi mumkin. O'rniga o'lchamini nolga tushirdim:
      bo'sh joy qolmaydi, mexanizm tegilmaydi.
   ⚠️ Bu blok BARCHA media e'lonlaridan KEYIN turibdi (fayl oxiri) —
      `.sortbar`/`.lst-h.res` yuqorida bir necha marta e'lon qilingan
      (1294/1306/1459/2084/2270 va 1359/1437/1460), keyingi qoida
      jimgina ustun kelardi. */
.sb-crumb{display:none!important}
.sortbar{margin:0!important;padding:0!important;gap:0!important;
  min-height:0!important;border:0!important}
.lst-h.res{position:absolute!important;width:1px!important;height:1px!important;
  margin:-1px!important;padding:0!important;overflow:hidden!important;
  clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;
  white-space:nowrap!important;border:0!important}

/* ═══ MOBILDA «SOHALAR / SHAHARLAR» RO'YXATLARI OLINDI (2026-08-28) ════════
   Egasi: «statistikada ko'rsatish bor-u, u kerak emas» — sanoqli ro'yxatlar
   (Toshkent 607, Ishlab chiqarish 564 …). Ikki variant taklif qilindi,
   egasi BUTUN BLOKNI olib tashlashni tanladi (raqamlarni emas).
   O'LCHANDI (390px): ikkalasi ~800px egallardi, sahifa oxirini cho'zib.
   DESKTOPDA TEGILMADI — u yerda yon panelda joyida turibdi.
   ⚠️ SEO: `display:none` havolalarni O'CHIRMAYDI — Google ularga baribir
      ergashadi (ichki bog'lanish saqlanadi), faqat kontent sifatida vazni
      kamayadi. Shuning uchun DOM'dan olib tashlamadim.
   ⚠️ `.cta` bloklari («Ish beruvchimisiz?», «Telegramda qidirish») QOLDI —
      egasi ularni saqlashni tanladi. */
@media (max-width:900px){ .side .sc{display:none!important} }

/* ═══ MOBIL: CTA KARTALARI FOOTERGA KO'CHDI (2026-08-28) ══════════════════
   Egasi: «pastdagini ham ichiga qo'shib yubor» — ikki katta CTA kartasi
   (~340px har biri) mobilda olib tashlandi. Ularning uchala yo'li ham
   footerda ALLAQACHON bor: «AI yordamchi» (→ ishtopai.uz, SAYT),
   «E'lon berish» (→ biznes) va «Anketa» (→ bot). Takrorlash shart emas.
   Desktopda kartalar QOLDI — u yerda yon panelda joyida turibdi. */
@media (max-width:900px){ .side .cta{display:none!important} }

/* ═══ SAHIFA OXIRIDAGI BO'SH JOY (2026-08-28) ═════════════════════════════
   `.wrap{padding-bottom:76px}` — pastda qotirilgan panel uchun ajratilgan
   joy edi, LEKIN o'lchandi: bu sahifada pastda `fixed`/`sticky` element
   umuman yo'q. Ya'ni footerdan keyin 76px quruq bo'shliq qolardi.
   Mobilda uni 26px ga tushiramiz — sahifa oxiri havoda osilib turmaydi.
   ⚠️ Desktopda tegilmadi (u yerda keng ekranda sezilmaydi).
   ⚠️ Kelajakda pastki panel qo'shilsa, bu qiymatni QAYTA oshirish kerak —
      aks holda panel oxirgi e'lonni yopib qo'yadi. */
@media (max-width:900px){ .wrap{padding-bottom:26px} }

/* Masofa — shahar nomidan keyin, ko'zga tashlanadigan rangda */
.j-km{font-style:normal;color:var(--blue2);font-weight:700;margin-left:6px}
.j-km[hidden]{display:none}

/* ═══ OVOZLI QIDIRUV (2026-09-11) ═══════════════════════════════════════════
   Egasi: «maydon bo'sh bo'lsa mikrofon, matn yozilsa yuborish belgisi».
   BITTA tugma, uch ko'rinish. Rejim `data-mode` orqali: mic | send | rec.

   ⚠️ `.fq input` ga O'NGDAN joy ochiladi (`padding-right`), aks holda uzun
      so'rov tugma ostidan o'tib ketadi va matn o'qilmay qoladi.
   ⚠️ `.ff > .ic{pointer-events:none}` umumiy qoidasi tugma ICHIDAGI
      ikonalarga ham tegadi — bu AYNAN kerak (bosish tugmaga o'tsin), lekin
      tugmaning O'ZIGA `pointer-events:auto` qaytariladi. */
.fq input{padding-right:46px}
.micbtn{position:absolute;right:5px;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;border:none;border-radius:50%;
  background:transparent;color:var(--muted);cursor:pointer;pointer-events:auto;
  transition:color var(--t),background var(--t),transform var(--t)}
.micbtn:hover{background:color-mix(in srgb,var(--blue2) 14%,transparent);color:var(--blue2)}
.micbtn:focus-visible{outline:2px solid var(--blue2);outline-offset:2px}
.micbtn[hidden]{display:none}
.micbtn .ic{width:19px;height:19px}

/* Uch ikonadan faqat bittasi ko'rinadi — rejimga qarab */
.micbtn .ic-send,.micbtn .ic-stop{display:none}
.micbtn[data-mode="send"] .ic-mic,.micbtn[data-mode="rec"] .ic-mic{display:none}
.micbtn[data-mode="send"] .ic-send{display:block}
.micbtn[data-mode="rec"]  .ic-stop{display:block}
.micbtn[data-mode="send"]{color:var(--blue2)}

/* Yozilmoqda — qizil va «nafas olayotgan» halqa, bosilgani sezilib tursin */
.micbtn[data-mode="rec"]{color:#fff;background:var(--rec)}
.micbtn[data-mode="rec"]::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--rec);animation:micpulse 1.4s ease-out infinite}
@keyframes micpulse{from{transform:scale(1);opacity:.75}to{transform:scale(1.75);opacity:0}}
/* ⚠️ Animatsiyani o'chirgan foydalanuvchida pulsatsiya BO'LMAYDI, lekin
   rang qoladi — holat baribir ko'rinadi (faqat animatsiyaga tayanmaymiz). */
@media (prefers-reduced-motion:reduce){ .micbtn[data-mode="rec"]::after{animation:none;opacity:.5} }

/* Holat satri: «Tinglayapman…» / «O'giryapman…» / xato */
.micst{grid-column:1/-1;margin:7px 2px 0;font-size:var(--fs-sm,13px);color:var(--muted);
  display:flex;align-items:center;gap:7px;min-height:18px}
.micst[hidden]{display:none}
.micst.err{color:var(--rec)}
.micst .dot{width:7px;height:7px;border-radius:50%;background:var(--rec);flex-shrink:0;
  animation:micpulse2 1.1s ease-in-out infinite}
@keyframes micpulse2{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){ .micst .dot{animation:none} }

/* ═══════════════════════════════════════════════════════════════════════
   E'LON RO'YXATI QAYTA ISHLANDI — 2026-09-11, ega talabi:
   «ish saytlariga mos dizaynda emas»

   MUAMMO EDI (390px da o'lchangan):
   1. Karta 228px → ekranda 3 ta e'lon zo'rg'a sig'ardi
   2. Maosh va joy ALOHIDA qatorlarda — eng muhim ma'lumot tarqoq
   3. «Batafsil →» har kartada takrorlanardi, holbuki BUTUN karta
      allaqachon <a> (bosiladi) — ortiqcha shovqin
   4. Harfli kvadrat («У», «А») 54px joy yeb, hech narsa bermasdi
      (24 e'londan 20 tasida rasm YO'Q, faqat harf turardi)
   5. «Bugun» — muhim yangilik signali, lekin pastda yo'qolib ketgan

   ⚠️ MENING XATOM: avval `grid-template-areas` bilan 4 elementni bitta
      `body` maydoniga qo'ydim — ular BIR-BIRINING USTIGA chiqib ketdi.
      To'g'ri yo'l: aniq `grid-row` raqamlari (pastda).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── KARTA: ustun 1 = rasm (butun balandlikka), ustun 2 = ma'lumot */
.j{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  grid-template-rows:auto auto auto auto !important;
  gap:0 13px !important;
  align-items:start !important;
  padding:13px !important;
}
/* `.j-top` rasm+sarlavhani o'rab turardi — uni «shaffof» qilamiz,
   bolalari to'g'ridan-to'g'ri karta gridiga tushsin */
.j-top{display:contents !important}

.j{grid-template-rows:auto auto auto !important}
.j-av  {grid-column:1 !important;grid-row:1 / span 3 !important}
.j-t   {grid-column:2 !important;grid-row:1 !important}
.j-meta{grid-column:2 !important;grid-row:2 !important}
/* ⚠️ tag va sana ALOHIDA qator egallardi (2×~30px). Endi BITTA qatorda:
   tag chapda, sana o'ngda — 30px tejaladi va ko'z bir joyga tushadi. */
.j-tag {grid-column:2 !important;grid-row:3 !important;justify-self:start !important}
.j-foot{grid-column:2 !important;grid-row:3 !important;justify-self:end !important;
        align-self:center !important;margin-top:7px !important}

/* ── RASM: kvadrat, kartaga mos burchak */
.j-av{
  width:58px !important;height:58px !important;
  border-radius:12px !important;
  background:var(--bg) !important;
  border:1px solid var(--border) !important;
  font-size:0 !important;            /* harfni yashiramiz — ikonka qo'yamiz */
  color:transparent !important;
  position:relative;overflow:hidden;align-self:start !important;
}
.j-av img{width:100%;height:100%;object-fit:cover;display:block}
/* rasmi yo'q e'lon — kategoriya o'rniga neytral «portfel» ikonkasi */
.j-av:not(:has(img))::after{
  content:'';position:absolute;inset:0;
  background:var(--muted);opacity:.3;
  -webkit-mask:var(--ic) center/25px 25px no-repeat;
  mask:var(--ic) center/25px 25px no-repeat;
  --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
}

/* ── SARLAVHA */
.j-t{
  font-size:14.6px !important;font-weight:700 !important;
  line-height:1.28 !important;margin:0 !important;
}

/* ── MAOSH + JOY: zich, ketma-ket */
.j-meta{
  display:flex !important;flex-direction:column !important;
  gap:1px !important;margin-top:4px !important;
  font-size:12.4px !important;
}
.j-meta .m-sal{font-weight:700 !important;color:var(--text) !important}

/* ── TAG */
.j-tag{
  margin-top:7px !important;padding:2.5px 8px !important;
  font-size:11px !important;border-radius:6px !important;
}

/* ── SANA: ajratuvchi chiziqsiz, tagdan keyin */
.j-foot{
  margin-top:7px !important;padding-top:0 !important;
  border-top:0 !important;
  justify-content:flex-start !important;
}
/* ⚠️ «Batafsil →» OLIB TASHLANDI — butun karta allaqachon bosiladi */
.j-go{display:none !important}

.j-date{font-size:11.5px !important;font-weight:650 !important}
.j-date.fresh{color:#2e9b5b !important}
:root[data-theme=dark] .j-date.fresh{color:#4ec27d !important}

/* ── DESKTOP */
@media (min-width:900px){
  .j{gap:0 16px !important;padding:15px !important}
  .j-av{width:74px !important;height:74px !important}
  .j-t{font-size:16.5px !important}
  .j-meta{font-size:13.4px !important}
}

/* ── TEPA «TOP E'LON» BLOKI: balandligi ~2 barobar kamaytirildi
   (2026-09-11, ega talabi). Ilgari 231px — mobilda ekranning
   YARMINI yeb, e'lonlar ancha pastda qolardi.
   ⚠️ Blok o'zi QOLADI, faqat pasayadi — TOP e'lonlar ko'rinishda davom etadi. */
.psl{height:132px !important}
@media (min-width:900px){.psl{height:158px !important}}
.promo{padding:10px 0 2px !important}

/* ═══ FILTR VARAG'I VA QIDIRUV (2026-09-11, ega talabi:
   «filtrlar, qidiruvlarni ham sozlab ber, oq fonda ham qora fonda ham
    juda g'alati bo'lib qolgan»)

   MUAMMO EDI (mobil, 390px):
   1. Filtr maydonlari 56px baland va bir-biridan uzoq → panel 6 ta
      maydon uchun butun ekranni yeyardi, pastdagilar ko'rinmasdi
   2. Yorliqlar («Tuman/shahar», «Bandlik») xira kulrang, maydondan
      ajralmasdi — qaysi yorliq qaysi maydonники bilinmasdi
   3. Maydon fonlari FON bilan bir xil edi → «quti» ekani bilinmasdi
      (ayniqsa qorong'i mavzuda — chegaralar yo'qolib ketardi)
   4. Qidiruv qatori va tugma o'rtasida ranglar mos emasdi */

/* ── FILTR MAYDONLARI: zichroq, aniq chegarali */
.fsh-f .fg{gap:5px !important;margin-bottom:13px !important}
.fsh-f .fl{
  display:block !important;
  font-size:12px !important;font-weight:650 !important;
  color:var(--text2) !important;          /* xira kulrang EMAS — o'qiladi */
  letter-spacing:.01em;
}
.fsh-f .ff select,.fsh-f .ff input{
  height:44px !important;                 /* barmoq uchun yetarli, 56 emas */
  background:var(--bg) !important;        /* karta fonidan AJRALIB tursin */
  border:1px solid var(--border) !important;
  border-radius:10px !important;
  font-size:14.5px !important;
  color:var(--text) !important;
}
.fsh-f .ff select:focus,.fsh-f .ff input:focus{
  border-color:var(--blue2) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blue2) 18%,transparent) !important;
  outline:none !important;
}

/* ── QIDIRUV QATORI: maydon va tugma bir tizimda */
.fq input{
  height:48px !important;
  background:var(--bg) !important;
  border:1px solid var(--border) !important;
  border-radius:12px !important;
  font-size:15px !important;color:var(--text) !important;
}
.fq input:focus{
  border-color:var(--blue2) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blue2) 18%,transparent) !important;
  outline:none !important;
}
/* ⚠️ Qorong'i mavzuda `--navy` (#16304f) sayt foni (#131314) bilan
   deyarli qo'shilib ketardi — «Qidirish» tugmasi KO'RINMASDI.
   ⚠️ Tugmada sinf YO'Q, shuning uchun keng qamrovli selektor:
      qidiruv/filtr zonasidagi barcha tugmalar. */
:root[data-theme=dark] .fq button,
:root[data-theme=dark] .ff button,
:root[data-theme=dark] .fsh-go,
:root[data-theme=dark] .fhead button,
:root[data-theme=dark] form button[type=submit]{
  background:var(--blue2) !important;color:#0f1722 !important;
  border-color:var(--blue2) !important;
}
:root[data-theme=dark] .fq button:hover,
:root[data-theme=dark] .fsh-go:hover,
:root[data-theme=dark] form button[type=submit]:hover{filter:brightness(1.1)}

/* ═══ QIDIRUV QATORI QAYTA TARTIBLANDI (2026-09-11, ega talabi)

   MUAMMO EDI:
   1. «Barcha sohalar / Butun O'zbekiston / Eng yangi» — bular <select>,
      lekin foni SHAFFOF va ramkasi 0px edi → oddiy MATNGA o'xshardi,
      odamlar bosiladigan ekanini BILMASDI
   2. Qidiruv maydoni chapda, tanlovlar o'rtada — tartib chalkash
   3. «Filtrlar» tugmasi o'ngda, qidiruvdan uzoqda

   YANGI TARTIB (ega aytgancha):
     [tanlovlar: soha · hudud · saralash] [Filtrlar] ... [qidiruv] [Qidirish]
      ↑ chapda, zich va maydaroq          ↑ yonida      ↑ o'ngga ko'chdi     */

/* ── TARTIB: tanlovlar+filtr CHAPDA, qidiruv+tugma O'NGDA */
@media (min-width:900px){
  .srch-bar{
    display:flex !important;flex-wrap:nowrap !important;
    gap:8px !important;align-items:center !important;
  }
  .srch-bar .fq{flex:1 1 auto !important}  /* qidiruv — qolgan joyni oladi */
  .srch-bar>button{flex:0 0 auto !important}
  /* uchta tanlov — chapda, ketma-ket */
  /* ⚠️ ANIQ TARTIB (flex): boshqa hamma narsa oxirga tushsin */
  .srch-bar>*{order:9}
  .srch-bar>.fq2{order:1 !important}       /* uchala tanlov — chapda */
  .srch-bar>.fg{order:1 !important}
  .srch-bar .fbtn{order:2 !important}      /* Filtrlar — tanlovlar YONIDA */
  .srch-bar>.micst{order:8;flex:0 0 auto}  /* mikrofon holati */
  /* `.fq2` ichidagi uchala tanlov yonma-yon, zich */
  .srch-bar>.fq2{display:flex !important;gap:8px !important;align-items:center !important;
    width:auto !important;flex:0 0 auto !important}
  .srch-bar>.fq2>*{margin:0 !important;min-width:0 !important;flex:0 0 auto !important}
  .srch-bar>.fq2 select{max-width:190px !important;text-overflow:ellipsis}
  .srch-bar>.fq{order:3 !important}        /* qidiruv maydoni — o'ngga */
  .srch-bar>button{order:4 !important}     /* Qidirish — eng o'ngda */
}

/* ── ⚠️ ENG MUHIMI: tanlov BOSILADIGAN ekani KO'RINSIN.
   Ilgari fon shaffof + ramka 0 edi → matn deb o'ylanardi. */
.srch-bar .ff select,.fsh-f .ff select{
  appearance:none;-webkit-appearance:none;
  background:var(--card) !important;
  border:1px solid var(--border) !important;
  border-radius:10px !important;
  padding:0 30px 0 12px !important;        /* o'ngda strelka uchun joy */
  font-size:13.5px !important;font-weight:600 !important;
  color:var(--text) !important;
  cursor:pointer !important;
}
/* pastga qaragan strelka — «bu ro'yxat, bosiladi» degan universal belgi */
.srch-bar .ff,.fsh-f .ff{position:relative}
.srch-bar .ff::after,.fsh-f .ff::after{
  content:'';position:absolute;right:11px;top:50%;
  width:9px;height:9px;margin-top:-5px;pointer-events:none;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);
}
.srch-bar .ff select:hover{border-color:var(--blue2) !important}
.srch-bar .ff select:focus{
  border-color:var(--blue2) !important;outline:none !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blue2) 18%,transparent) !important;
}

/* ── tanlovlar zichroq va maydaroq (ega: «sal zichroq, maydaroq») */
@media (min-width:900px){
  .srch-bar .ff select{height:40px !important;font-size:13px !important}
  .srch-bar .fbtn{height:40px !important;font-size:13px !important}
  .srch-bar .fq input{height:40px !important;font-size:14px !important}
  .srch-bar>button{height:40px !important;font-size:13.5px !important;padding:0 18px !important}
  .srch-bar .fl{display:none !important}   /* yorliqlar — joy tejash uchun */
}

/* ── Qidiruv qatori: oxirgi sozlash (2026-09-11)
   ⚠️ 1) «Filtrlar» tugmasi SIQILIB qolgandi (grid ustuni tor) — matni
         ko'rinmay, faqat ikonka qolardi. Endi kengligi o'ziga qarab.
   ⚠️ 2) Qidiruv MAYDONIGA ham strelka tushgandi (`.ff::after` hammaga
         tegdi), holbuki u ro'yxat EMAS — u yerda strelka chalg'itadi. */
@media (min-width:900px){
  .srch-bar .fbtn{
    white-space:nowrap !important;flex:0 0 auto !important;
    padding:0 14px !important;gap:7px !important;
  }
  .srch-bar>.fq2{flex:0 0 auto !important}
  .srch-bar .fq{min-width:220px !important}
}
/* strelka FAQAT ro'yxatli maydonda (select bor joyda) */
.srch-bar .ff:not(:has(select))::after,
.fsh-f .ff:not(:has(select))::after{display:none !important}

/* ═══ 3 TUZATISH (2026-09-11, ega talabi) ═══════════════════════════════

   1. «Filtrlar» tugmasi 52px, qolgan boshqaruvlar 40px edi — qator
      notekis ko'rinardi. Endi HAMMASI bir xil 40px.
   2. Filtr paneli sahifa ICHIDA ochilib, ro'yxatni surib yuborardi
      (`position:relative`) → endi PASTDAN chiquvchi varaq.
   3. Tepadagi e'lon bannerlari mayda edi (139px) → 3 barobar katta. */

/* ── 1) QATOR: hamma boshqaruv AYNAN bir xil balandlikda */
@media (min-width:900px){
  .srch-bar .fbtn,
  .srch-bar .ff select,
  .srch-bar .fq input,
  .srch-bar>button{
    height:44px !important;
    min-height:44px !important;
    box-sizing:border-box !important;
    border-radius:11px !important;
  }
  /* ⚠️ `.fbtn` LABEL — ichki `padding` balandlikni oshirardi */
  .srch-bar .fbtn{padding:0 15px !important;display:inline-flex !important;
    align-items:center !important;line-height:1 !important}
}

/* ── 2) FILTR PANELI: pastdan chiquvchi varaq DESKTOPDA HAM
   ⚠️ Mexanizm mobilda ALLAQACHON bor edi (`.fadv-t:checked ~ .fgrid`).
      Men avval yangidan yozib u bilan urishdim — panel 86px da qotdi.
      Endi shunchaki media-query chegarasi olib tashlanadi. */
@media (min-width:900px){
  .filters.panel .fadv-t:checked ~ .fgrid{
    position:fixed !important;
    left:0 !important;right:0 !important;bottom:0 !important;top:auto !important;
    z-index:90 !important;
    max-height:86vh !important;overflow-y:auto !important;
    background:var(--card) !important;
    border-top:1px solid var(--border) !important;
    border-radius:18px 18px 0 0 !important;
    box-shadow:0 -12px 44px rgba(0,0,0,.24) !important;
    padding:20px 24px 24px !important;
    display:flex !important;flex-direction:column !important;
    gap:var(--s3) !important;align-items:stretch !important;
  }
  /* orqa fon — panel ochiqligini bildiradi va bosilsa yopadi */
  .filters.panel .fadv-t:checked ~ .fsh-bg{
    position:fixed !important;inset:0 !important;
    background:rgba(0,0,0,.42) !important;z-index:89 !important;
    display:block !important;
  }
}

/* ── 3) E'LON BANNERLARI: 3 barobar katta (139px → ~420px) */
.psl{height:420px !important}
@media (max-width:900px){.psl{height:300px !important}}

/* ⚠️ Panel yopiq holatda `height:0` bo'lardi — pastdan chiqqanda ham
   ichidagi maydonlar ko'rinmasdi. Ochilganda to'liq balandlik. */
@media (min-width:900px){
  .filters.panel:has(#fadvT:checked) .fsh-f,
  .filters.panel:has(#fadvT:checked) .fg{height:auto !important;overflow:visible !important}
  .filters.panel:has(#fadvT:checked)>*{opacity:1 !important;visibility:visible !important}
}

/* ── MOBIL: boshqaruvlar ham bir xil balandlikda (2026-09-11)
   ⚠️ Yuqoridagi tuzatish faqat ≥900px ga tegdi — mobilda 48 va 52px
      aralash qolib, qator notekis ko'rinardi. */
@media (max-width:899px){
  .srch-bar .fbtn,
  .srch-bar .ff select,
  .srch-bar .fq input,
  .srch-bar>button{
    height:48px !important;min-height:48px !important;
    box-sizing:border-box !important;
  }
  .srch-bar .fbtn{padding:0 13px !important;display:inline-flex !important;
    align-items:center !important;line-height:1 !important}
}

/* ═══ iOS AVTO-ZOOM (2026-09-12) ═══════════════════════════════════════════
   Safari 16px dan KICHIK shriftli maydonga tegilganda butun sahifani
   majburan kattalashtiradi — layout sakraydi, odam qo'lda qaytarishi kerak,
   va bu HAR qidiruvda takrorlanadi. O'lchandi: mobilda 3 ta maydon
   13.3px / 14px / 15px edi.
   ⚠️ Faqat MOBILDA: desktopda ega ataylab «maydaroq» so'ragan
      (`@media (min-width:900px)` bloki) — unga tegilmaydi. */
@media (max-width:899px){
  /* ⚠️ Spetsifiklik: qidiruv maydoni `.srch-bar .fq input` (0,2,1) orqali
     15px olardi — yalang'och `input` (0,0,1) uni YENGA OLMAYDI, hatto
     `!important` bilan ham (ikkalasi ham `!important` bo'lsa spetsifiklik
     hal qiladi). Shuning uchun aniq selektorlar ham sanab o'tilgan. */
  input, select, textarea,
  .srch-bar input, .srch-bar select,
  .srch-bar .fq input, .srch-bar .ff select,
  .fadv input, .fadv select{ font-size:16px !important; }
}