/* ishtopai.uz — ish sahifasi (css) ish.php dan ajratilgan 2026-09-04 */ /* ═══════════════════════════════════════════════════════════════════════════ E'LON SAHIFASI — 2026-08-28 REDIZAYNI ─────────────────────────────────────────────────────────────────────────── ⚠️ NEGA QAYTA YOZILDI: sahifa ikki domenda IKKI XIL ko'rinardi (`ishtopai.uz/ish.php` — arza oynasisiz, mobil panelsiz, aloqa tugmalarisiz eski nusxa; `elon.ishtopai.uz/ish.php` — yangisi). Egasi ikkalasini adashtirardi. Endi ikkala fayl AYNAN bir xil. TUZILISH (egasi bergan namuna bo'yicha, tepadan pastga): panel → rasm → sana+sarlavha → parametrlar → tavsif → manzil+xarita → ID/ko'rish/shikoyat → o'xshash → pastki panel ⚠️ RANGLAR BRENDNIKI. Namunadagi #002f34 (o'zga sayt rangi) OLINMADI — qolgan 20+ sahifa navy/oltinda va bitta sahifa boshqa rangda bo'lsa, o'tishda rang sakrab ketardi. Tuzilish namunadan, rang brenddan: `--jb` (tugma) light'da navy, dark'da yorqin ko'k. ═══════════════════════════════════════════════════════════════════════════ */ /* Tugma rangi mavzuga qarab. ⚠️ `:root` da — `.bar` `` ning bevosita bolasi (fixed), sahifa konteyneri ichida EMAS, shuning uchun `.jp` ga bog'lab bo'lmaydi. */ :root{ --jb:#5b93d6; --jb-tx:#fff; --jred:#e2564f; } :root[data-theme="light"]{ --jb:#16304f; --jred:#d93f3f; } /* ⚠️ NAV SAHIFA KENGLIGIDA (2026-08-28). Egasi: «IshtopAI va profil hamda til tanlash e'lon kengligida emas ekan». O'lchandi: logo 18px da, e'lon kartasi 63px da boshlanardi — ular bir chiziqda emas edi. `--navw`/`--navp` ni `seo_nav_css()` o'qiydi (`.nav-in`), shuning uchun qiymat SHU YERDA, sahifaga xos qilib beriladi. Desktop qiymatlari pastdagi `@media(min-width:900px)` da `.jp` bilan AYNAN mos. */ /* ⚠️ KENGLIK RO'YXAT SAHIFASI (`ishlar.php`) BILAN AYNAN BIR XIL (egasi 2026-08-28: «asosida qanday kenglikda bo'lsa, desktopda e'lon ichida ham shunday bo'lsin»). Uchala qiymat ham `.wrap` dan ko'chirildi: asosiy 1260px padding clamp(14px,3vw,26px) 900–1180px padding clamp(12px,1.6vw,20px) ≥1400px 1560px ⚠️ Mobilda (<900px) e'lon sahifasi O'Z kengligida qoladi — u yerda ikki ustun yo'q va sahifa 720px karta bo'ladi. ⚠️ Bu qiymatlar `ishlar.php` dagi `.wrap` bilan JUFTLIK — birini o'zgartirsang ikkinchisini ham. */ :root{ --navw:720px; --navp:16px; } @media(min-width:760px){ :root{ --navp:0px; } } @media(min-width:900px){ :root{ --navw:1260px; --navp:clamp(12px,1.6vw,20px); } } @media(min-width:1181px){ :root{ --navp:clamp(14px,3vw,26px); } } @media(min-width:1400px){ :root{ --navw:1560px; } } body{background:var(--bg2);overflow-x:hidden} /* ⚠️ Zaxira to'siq: yuqoridagi `minmax(0,1fr)` asosiy sababni yopadi, bu esa KELAJAKDA qo'shiladigan uzun kontent (yangi kartalar, tashqi matn) sahifani yon tomonga surib yubormasligi uchun. Ikkalasi ham kerak — faqat shuning o'zi sababni yashirar, lekin element baribir kesilgan bo'lardi. */ /* ── Sahifa konteyneri ────────────────────────────────────────────────────── Mobil: butun ekran, oq varaq. Desktop: markazda 720px karta. ⚠️ Namunada `max-w-md` (448px) so'ralgandi — desktopda o'lchab ko'rildi: e'lon matni 448px da 30-35 belgiga siqilib, o'qish uzayadi va sahifa 3 ekranga cho'ziladi. 720px — bir qatorda ~85 belgi, tipografiya me'yori (45-90). Markazlashuv va yaxlitlik saqlangan. */ .jp{max-width:720px;margin:0 auto;background:var(--card); padding-bottom:calc(84px + env(safe-area-inset-bottom))} @media(min-width:760px){ .jp{margin:20px auto 40px;border:1px solid var(--border);border-radius:var(--r); box-shadow:var(--shadow);overflow:hidden;padding-bottom:88px} } /* ── Yuqori panel ─────────────────────────────────────────────────────────── ⚠️ `sticky`: uzun e'londa odam pastga tushganda ham «orqaga» va «saqlash» ko'z oldida qoladi. */ /* ═══ E'LON ICHIDA SAYT NAVIGATSIYASI YO'Q (2026-08-28) ════════════════════ Egasi: «e'lon ichiga kirganda yuqorida profil, til tanlash va kun/tun ko'rinishi shart emas, joy bekor egallanyapti — orqaga qaytishning oldida IshtopAI qo'y», mobilda ham desktopda ham. O'LCHANDI: nav 57px (mobil) / 61px (desktop) — e'lon sahifasida uchta qatlam ustma-ust turardi: nav → `.jt` paneli → breadcrumb. ✅ Nav olindi, brend `.jt` ning O'ZIGA — orqaga tugmasi yoniga ko'chdi. ⚠️ Shu sababli `.jt` endi `top:0` (ilgari 46px — nav ostiga tushmasin uchun edi). Nav qaytarilsa BU QIYMATNI ham qaytarish kerak. ⚠️ Til va mavzu tanlash e'lon sahifasida endi YO'Q. Ikkalasi ham `localStorage`/cookie'da saqlanadi va ro'yxat sahifasida o'zgartiriladi — ya'ni tanlov yo'qolmaydi, faqat shu sahifada almashtirib bo'lmaydi. */ .jp>.nav,body>header.nav{display:none!important} .jt{position:sticky;top:0;z-index:29;display:flex;justify-content:space-between; align-items:center;gap:8px;padding:8px 8px 8px 6px;background:var(--card); border-bottom:1px solid var(--border)} @media(min-width:760px){ .jt{border-radius:var(--r) var(--r) 0 0} } .jt-l{display:flex;align-items:center;gap:2px;min-width:0} .jt-r{display:flex;align-items:center;gap:2px} /* Brend: nav'dagi bilan bir xil rasm, panelga mos o'lchamda */ .jt-lg{display:flex;align-items:center;padding:4px 6px;border-radius:11px; transition:background var(--t)} .jt-lg:hover{background:var(--field)} .jt-lg .brand{width:80px;height:20px} @media(min-width:760px){ .jt-lg .brand{width:92px;height:23px} } .ib{width:42px;height:42px;border-radius:12px;display:grid;place-items:center; color:var(--text2);background:none;border:0;cursor:pointer;transition:var(--t); -webkit-tap-highlight-color:transparent} .ib .ic{width:21px;height:21px} .ib:hover{background:var(--field);color:var(--text)} .ib:active{transform:scale(.92)} /* ═══ ORQAGA TUGMASI — YOZUV BILAN (2026-08-28) ═══════════════════════════ Egasi: «orqaga tugmasining yoniga yozuv qo'sh». 🔴 Bu blok `.ib` QOIDALARIDAN KEYIN turishi SHART. Avval undan oldin yozilgan edi va `.ib{width:42px}` keyin kelib uni bekor qilgandi: yozuv 42px lik tugmadan toshib, yonidagi logo ustiga chiqib ketdi. Spetsifiklik teng bo'lgani uchun g'olibni TARTIB belgilaydi. ⚠️ Yonida logo turadi. 360px dan tor ekranda ikkalasi + o'ngdagi ikki tugma bir qatorga sig'masdi — o'shanda YOZUV yashirinadi, tugma yana oddiy ikonkaga aylanadi. */ .ib-b{width:auto;height:42px;padding:0 12px 0 7px;gap:3px; display:inline-flex;align-items:center; font-size:14px;font-weight:600;color:var(--text2);white-space:nowrap} .ib-b .ic{flex:none} @media(max-width:360px){ .ib-b span{display:none} .ib-b{width:42px;padding:0;justify-content:center} } /* Saqlangan holat — yurak to'ladi. `fill` INLINE stil bilan emas, shu yerda: bosilganda faqat sinf almashadi, JS rang bilan shug'ullanmaydi. */ .ib.on{color:var(--jred)} .ib.on .ic{fill:currentColor} /* Nusxalandi/saqlandi bildirishnomasi */ .tst{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom)); transform:translate(-50%,10px);z-index:80;background:var(--text);color:var(--card); font-size:13.5px;font-weight:600;padding:10px 18px;border-radius:11px; box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:var(--t)} .tst.on{opacity:1;transform:translate(-50%,0)} @media(min-width:900px){ .tst{bottom:28px} } /* ── Yo'lcha (SEO breadcrumb) ───────────────────────────────────────────── */ .crumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:10px 16px 0; font-size:12.5px;color:var(--muted)} .crumb a{color:var(--muted)} .crumb a:hover{color:var(--blue2);text-decoration:underline} /* ── Rasm ─────────────────────────────────────────────────────────────────── ⚠️ `loading="lazy"` YO'Q va bo'lmasin: bu LCP elementi, ekranning yuqorisida. Blurli fon — rasm nisbati boshqacha bo'lsa yon bo'shliq qora dog' bo'lib qolmasin uchun. */ .ph{position:relative;background:var(--field);overflow:hidden} .ph::before{content:"";position:absolute;inset:-24px;background-image:var(--pimg); background-size:cover;background-position:center;filter:blur(22px) saturate(1.25); opacity:.5} .ph a{position:relative;display:block} .ph img{width:100%;max-height:min(58vh,420px);object-fit:contain;display:block} .ph .zm{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center; gap:6px;padding:7px 11px;border-radius:9px;font-size:12px;font-weight:600; background:rgba(12,14,18,.62);color:#fff;backdrop-filter:blur(6px);pointer-events:none} .ph .zm .ic{width:15px;height:15px} /* ── Sarlavha bloki ─────────────────────────────────────────────────────── */ .jh{padding:16px 16px 14px} .jh-t{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:7px} .dt{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)} .dt .ic{width:14.5px;height:14.5px} .tg-b{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px; font-size:11.5px;font-weight:700;letter-spacing:.01em; background:rgba(91,147,214,.14);color:var(--blue2)} .tg-b .ic{width:13px;height:13px} .tg-b.urg{background:rgba(226,86,79,.14);color:var(--jred)} /* ── Manba yorlig'i: ega ro'yxatdan o'tganmi / kanaldan repostmi (2026-09-19) ── ⚠️ `.tg-b` bilan bir qatorda turadi, shu sababli o'lchami TENG. Yashil — faqat haqiqiy `employer_id>0` faktiga, "tasdiqlangan" so'zi ATAYLAB ishlatilmagan (bazada KYC yo'q). Kulrang — repost, neytral, ayblovsiz. */ .src-ok,.src-rp{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px; font-size:11.5px;font-weight:700;letter-spacing:.01em} .src-ok .ic,.src-rp .ic{width:13px;height:13px} .src-ok{background:rgba(46,156,92,.14);color:#2e9c5c} .src-rp{background:var(--field);color:var(--muted)} .jh h1{font-size:clamp(19px,4.4vw,25px);font-weight:700;line-height:1.28; letter-spacing:-.022em;color:var(--text);overflow-wrap:anywhere} /* ── Ajratuvchi chiziq ──────────────────────────────────────────────────── */ .hr{height:1px;background:var(--border);margin:0 16px} /* ── Maosh ────────────────────────────────────────────────────────────────── ⚠️ Ilgari bu yerda ikonkali «parametrlar jadvali» (.kv) turardi — maosh, joylashuv, bandlik, grafik, yosh, jins alohida qatorlarda. Olib tashlandi: o'sha ma'lumot e'lon matnida ham bor edi va odam bir narsani ikki marta o'qirdi. Maosh esa qoldi — yagona raqam, ko'z uni birinchi qidiradi, va matnda ba'zan umuman yo'q. */ .sal{padding:0 16px 14px;font-size:clamp(20px,5vw,26px);font-weight:800; letter-spacing:-.02em;color:var(--gold);line-height:1.25;overflow-wrap:anywhere} /* ── Yorliqlar ──────────────────────────────────────────────────────────── */ .chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 16px} /* Soha yorlig'i — HAVOLA (o'sha sohaning ro'yxatiga). Qolganlari oddiy belgi. */ a.chip:hover{border-color:var(--blue2);color:var(--blue2)} .chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px; background:var(--field);border:1px solid var(--border);font-size:12.5px; font-weight:600;color:var(--text2)} .chip .ic{width:14px;height:14px} .chip.rem{background:rgba(91,147,214,.12);border-color:rgba(91,147,214,.3);color:var(--blue2)} /* ══ ASOSIY QISM: MOBIL — USTUN, DESKTOP — AJRALGAN KARTALAR ═══════════════ MOBIL: hech qanday karta yo'q — bloklar ketma-ket, nozik chiziq bilan. DESKTOP (≥900px): sahifa kulrang fonga chiqadi va uch guruh AJRALGAN kartaga bo'linadi: chap → `.mainc` e'lonning O'ZI (rasm+sarlavha+maosh+matn) o'ng → `.prof` profil · `.ct` aloqa+arza · `.locs` manzil+xarita past → `.btm` ID/shikoyat + o'xshash ishlar (e'londan ajralgan) ⚠️ `.side{display:contents}` — o'ramning O'ZI grid'dan yo'qoladi va `.prof`/`.ct` bevosita katak bo'ladi. Busiz ular bitta katakka tiqilib, o'ng ustun buzilardi. ⚠️ `grid-row` raqamlari BLOK TARTIBIGA bog'liq — yangi blok qo'shsang shu yerni ham yangila, aks holda bloklar ustma-ust tushadi. */ .gr{display:grid} @media(min-width:900px){ /* Sahifa endi «varaq» emas — fon ustidagi kartalar to'plami */ .jp{max-width:1260px;background:transparent;border:0;box-shadow:none; border-radius:0;overflow:visible;margin:0 auto; padding:0 clamp(12px,1.6vw,20px) 40px} .jt{background:transparent;border-bottom:0;padding:10px 0 6px; border-radius:0;position:static} .crumb{padding:0 2px 12px} /* ⚠️ TO'RTINCHI QATOR (`1fr`) — BO'SH VA ATAYLAB. Chap karta uzun e'lon matni bilan 1400px+ bo'ladi va `span 3` da o'sha balandlik UCH qatorga teng bo'linardi: o'ng ustundagi kartalar orasida ~230px bo'sh joy osilib qolardi. Endi ortiqcha balandlikni oxirgi bo'sh qator yutadi, kartalar esa yuqorida zich turadi. */ .gr{grid-template-columns:minmax(0,1fr) 352px;gap:18px;align-items:start; grid-template-rows:auto auto 1fr} } /* Ro'yxat sahifasidagi kabi: 1180px dan keng ekranda chekka kattalashadi */ @media(min-width:1181px){ .jp{padding:0 clamp(14px,3vw,26px) 40px} } /* ≥1400px — ro'yxat ham shu yerda 1560px ga kengayadi. ⚠️ Yon ustun ham biroz kengayadi, aks holda chap ustun haddan tashqari cho'zilib, e'lon matni bir qatorda 120+ belgiga chiqardi (o'qish qiyinlashadi). Matnning o'zi `.raw` da `max-width` bilan ushlanadi. */ @media(min-width:1400px){ .jp{max-width:1560px} .gr{grid-template-columns:minmax(0,1fr) 380px;gap:22px} } @media(min-width:900px){ /* ── CHAP: e'lonning o'zi, yaxlit karta ── */ .mainc{grid-column:1;grid-row:1/span 3;background:var(--card); border:1px solid var(--border);border-radius:18px;overflow:hidden; box-shadow:var(--shadow)} .mainc .jh{padding:20px 22px 16px} .mainc .sal{padding:0 22px 16px} .mainc .chips{padding:0 22px 18px} .mainc .hr{margin:0} .mainc .mcol{padding:20px 22px 24px} /* ── O'NG: har biri ALOHIDA karta ── */ .side{display:contents} /* ⚠️ Endi o'ng ustunda IKKI karta (profil+aloqa birlashgan, keyin manzil). Uchinchi qator ATAYLAB bo'sh — chap kartaning ortiqcha balandligini o'sha yutadi, aks holda kartalar orasi cho'zilib ketardi. */ .gr .prof{grid-column:2;grid-row:1} .gr .locs{grid-column:2;grid-row:2} .gr .prof,.gr .locs{ background:var(--card);border:1px solid var(--border);border-radius:16px; padding:16px 16px 17px;box-shadow:var(--shadow);margin:0} .gr .locs{margin-top:16px} /* ⚠️ Ish beruvchi kartasi desktopda ham AVATAR CHAPDA (egasi: «logosi yonida ismi, ostida joylagan e'lonlar soni»). Ilgari avatar tepada markazda edi va nomdan uzilib qolgandi. */ .gr .prof .emp{padding:13px;background:var(--card2);border-radius:13px} :root[data-theme="light"] .gr .prof .emp{background:#f7f9fc} .gr .prof .emp-av{width:50px;height:50px;border-radius:15px;font-size:20px} .gr .prof .emp-av .ic{width:23px;height:23px} .gr .prof .emp-t b{font-size:15.2px} /* Manzil kartasi — xarita to'liq kenglikda, tugmalardan ajralgan */ .gr .locs .loc{flex-direction:column;align-items:stretch;gap:13px} .gr .locs .map{width:100%;height:158px} /* ── PAST: sahifa xizmati, e'londan ajralgan ── */ /* Pastki blokda endi FAQAT «o'xshash ishlar» — layk/ko'rish/shikoyat e'lon kartasining ichiga, matn ostiga ko'chdi. */ .btm{margin-top:18px;background:var(--card);border:1px solid var(--border); border-radius:18px;box-shadow:var(--shadow);overflow:hidden} .btm .sim{padding:20px 22px 22px} .mainc .mt{padding:14px 22px 16px} .foot{margin-top:16px;padding:0 0 6px} } /* Mobilda faqat manzil bo'limi e'lon matnidan chiziq bilan ajraladi (profil va aloqa oyna ichida — u yerda chegara kerak emas). */ @media(max-width:899px){ .gr .locs{border-top:1px solid var(--border)} } /* ══ YON PANEL: DESKTOPDA USTUN, MOBILDA PASTDAN CHIQUVCHI OYNA ════════════ ⚠️ `display:contents` — o'ramning O'ZI grid'dan yo'qoladi va ichidagi `.prof`/`.ct` grid'ning BEVOSITA kataklari bo'ladi. Busiz ular bitta katakka tiqilib, o'ng ustun buzilardi. */ @media(min-width:900px){ .side{display:contents} .side-x,.side-bd{display:none} } @media(max-width:899px){ /* Mobilda profil va aloqa e'lon bilan panel orasida ~300px joy yeb turardi, holbuki o'sha amallar pastki panelda allaqachon bor. Endi ular shu yerda — «Bog'lanish» bosilganda pastdan chiqadi. */ .side{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--card); border-radius:20px 20px 0 0;max-height:84vh;overflow-y:auto; padding-bottom:calc(14px + env(safe-area-inset-bottom)); transform:translateY(101%);transition:transform .26s cubic-bezier(.2,.7,.3,1); box-shadow:0 -10px 34px rgba(0,0,0,.28); -webkit-overflow-scrolling:touch} .side.on{transform:translateY(0)} .side-bd{position:fixed;inset:0;z-index:69;background:rgba(8,10,14,.5); opacity:0;transition:opacity .24s ease} .side-bd.on{opacity:1} .side-bd[hidden]{display:none} .side-x{position:absolute;top:10px;right:12px;width:38px;height:38px;border-radius:11px; background:var(--field);border:0;color:var(--muted);cursor:pointer; display:grid;place-items:center;z-index:2} .side-x .ic{width:18px;height:18px} /* Oyna ichida bo'limlar ketma-ket, chegarasiz */ .side .sc{border-top:0} .side .sc.prof{padding-top:20px} .side .pa{position:sticky;bottom:0;background:var(--card);padding-bottom:2px} } /* ── Bo'lim ─────────────────────────────────────────────────────────────── */ .sc{padding:17px 16px} .sc h2{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--text);margin-bottom:11px} /* E'lon matni. ⚠️ `pre-wrap` SHART — kanal matnidagi qator tuzilishi (ro'yxatlar, bo'sh qatorlar) ma'no tashiydi, uni tashlab bo'lmaydi. */ .raw{white-space:pre-wrap;font-size:15.2px;line-height:1.78;color:var(--text2); overflow-wrap:anywhere;word-break:break-word} /* ⚠️ Karta to'liq kenglikda, MATN esa cheklangan: keng ekranda qator 120+ belgiga cho'zilsa ko'z qatordan qatorga o'tolmaydi. 78ch — tipografiya me'yori (45–90) ichida. */ @media(min-width:1181px){ .mainc .raw{max-width:78ch} } .raw a{color:var(--blue2);text-decoration:underline;text-underline-offset:2px} .raw a:hover{text-decoration-thickness:2px} /* ── Ish beruvchi ───────────────────────────────────────────────────────── */ .emp{display:flex;align-items:center;gap:12px;padding:12px;border-radius:13px; background:var(--card2);border:1px solid var(--border);transition:var(--t)} a.emp:hover{border-color:var(--blue2)} .emp-av{flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:grid;place-items:center; background:linear-gradient(135deg,var(--blue2),var(--navy));color:#fff; font-weight:800;font-size:17px} .emp-av .ic{width:20px;height:20px;stroke-width:2} .emp-t{min-width:0;flex:1} .emp-t b{display:block;font-size:14.5px;font-weight:700;color:var(--text); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .emp-t i{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:1px} .emp .cb-a{width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2; stroke-linecap:round;stroke-linejoin:round;flex-shrink:0} /* ── YONMA-YON IKKI AMAL: «Aloqa» va «Arza yuborish» ═══════════════════════ Egasi: «uning ostida yonma-yon qo'shilgan holda — ajratma». Ikkalasi profil kartasining ICHIDA, avatar/nom ostida. */ .pa{display:flex;gap:9px;margin-top:13px} .pa-b{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center; gap:7px;min-height:46px;padding:0 12px;border-radius:12px;font-size:14.2px; font-weight:700;cursor:pointer;border:2px solid transparent;text-align:center; transition:transform .16s cubic-bezier(.2,.7,.3,1),background .18s,border-color .18s, box-shadow .18s,color .18s; -webkit-tap-highlight-color:transparent} .pa-b.wide{flex:1 1 100%} .pa-b .ic{width:17px;height:17px;stroke-width:2.1;flex-shrink:0} .pa-b span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pa-b:active{transform:scale(.96)} /* «Aloqa» — ikkinchi darajali, hoshiyali */ .pa-ct{background:transparent;border-color:var(--border2);color:var(--text)} .pa-ct:hover{border-color:var(--ok);color:var(--ok);background:var(--ok-s)} /* Raqam ochilgach — tasdiqlangan ko'rinish */ .pa-ct.on{border-color:var(--ok);color:var(--ok);background:var(--ok-s); animation:paPop .34s cubic-bezier(.2,.7,.3,1)} @keyframes paPop{0%{transform:scale(.97)}55%{transform:scale(1.035)}100%{transform:scale(1)}} /* «Arza yuborish» — asosiy amal */ .pa-ap{background:var(--jb);border-color:var(--jb);color:var(--jb-tx); box-shadow:0 2px 10px rgba(22,48,79,.18)} .pa-ap:hover{filter:brightness(1.1);box-shadow:0 4px 16px rgba(22,48,79,.26); transform:translateY(-1px)} /* ═══ TELEGRAMDA YOZISH — O'Z BRAND RANGIDA (2026-09-05) ═══════════════════ Egasi ro'yxatdan o'tmagan e'londa «Ariza yuborish» O'RNIGA shu tugma chiqadi (ariza o'qiydigan kabinet yo'q — u bo'shliqqa ketardi). ⚠️ Rang ATAYIN Telegram ko'ki: odam bosishdan OLDIN qayerga tushishini bilsin. Navy tugma bilan bir xil bo'lsa «sayt ichida biror narsa bo'ladi» deb o'ylardi. ⚠️ Ikonka to'ldirilgan (`data-f`) — kichik o'lchamda toza chiqsin. */ .pa-ap[href^="https://t.me/"]{ background:linear-gradient(135deg,#2ea6df,#1d8bc4);border-color:#1d8bc4;color:#fff; box-shadow:0 2px 10px rgba(29,139,196,.28)} .pa-ap[href^="https://t.me/"]:hover{ box-shadow:0 4px 18px rgba(29,139,196,.38);filter:brightness(1.06)} .pa-ap[href^="https://t.me/"] .ic{width:18px;height:18px} /* Qo'ng'iroq tugmasidagi go'shak — to'ldirilgani uchun bir oz kichikroq bo'lsa yozuv bilan optik teng vaznda ko'rinadi. */ .pa-ct .ic[data-f],.pa-ct svg .ic{width:16px;height:16px} /* ── Aloqa ro'yxati — «Aloqa» bosilgach OCHILADI ────────────────────────── ⚠️ Raqam sahifada ochiq turmaydi: robot yig'ib ketardi (e'lonlarimiz boshqa saytlarda paydo bo'lgan edi) va «bosildi» hodisasi voronka o'lchovini beradi. */ .cb-l{display:grid;gap:8px;margin-top:11px;overflow:hidden; opacity:0;transform:translateY(-6px); transition:max-height .3s cubic-bezier(.2,.7,.3,1),opacity .24s ease,transform .24s ease} .cb-l[hidden]{display:none} .cb-l.on{opacity:1;transform:none} .cb{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:12px; background:var(--card2);border:1px solid var(--border);transition:var(--t)} .cb:hover{border-color:var(--blue2);transform:translateY(-1px)} .cb:active{transform:translateY(0)} .cb-i{flex:0 0 auto;width:36px;height:36px;border-radius:10px;display:grid;place-items:center} .cb-i .ic{width:18px;height:18px;stroke-width:2} .cb.tel .cb-i{background:rgba(63,185,116,.14);color:var(--ok)} .cb.tg .cb-i{background:rgba(42,171,238,.14);color:#2aabee} .cb-t{min-width:0;flex:1} .cb-t b{display:block;font-size:14.5px;font-weight:700;color:var(--text); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cb-t i{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:1px} .cb-a{width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2; stroke-linecap:round;stroke-linejoin:round;flex-shrink:0} /* Kanaldagi asl post — bu ALOQA EMAS, shuning uchun ko'rinishi ham boshqa */ .src-b{display:flex;align-items:center;gap:9px;margin-top:9px;padding:10px 12px;border-radius:11px; border:1px dashed var(--border2);color:var(--muted);font-size:12.5px;transition:var(--t)} .src-b:hover{border-color:var(--blue2);color:var(--text2)} .src-b .ic{width:16px;height:16px} .src-b i{font-style:normal;margin-left:auto;font-weight:700;color:var(--text2)} .s-hint{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:10px} /* Desktop yon ustunidagi asosiy amal. ⚠️ MOBILDA YASHIRIN — u yerda aynan shu tugma pastki qotirilgan panelda turadi va ikkitasi takror bo'lardi. */ .btn-apply{display:none;width:100%;margin-top:11px;min-height:46px;border-radius:11px; border:0;background:var(--jb);color:var(--jb-tx);font-size:15px;font-weight:700; cursor:pointer;align-items:center;justify-content:center;gap:8px;transition:var(--t)} .btn-apply .ic{width:18px;height:18px;stroke-width:2.1} .btn-apply:hover{filter:brightness(1.12)} @media(min-width:900px){ .btn-apply{display:flex} } /* Aloqa bo'limi sahifaning pastida — ko'zga tashlanishi uchun ozgina fon */ .sc.ct{background:var(--card2)} :root[data-theme="light"] .sc.ct{background:#fbfcfe} /* ── Manzil + xarita ────────────────────────────────────────────────────── */ .loc{display:flex;align-items:center;gap:14px;justify-content:space-between} .loc-t{min-width:0;display:flex;gap:10px;align-items:flex-start} .loc-t .ic{width:19px;height:19px;color:var(--muted);margin-top:2px;flex-shrink:0} .loc-t b{display:block;font-size:15px;font-weight:700;color:var(--text);overflow-wrap:anywhere} .loc-t i{display:block;font-style:normal;font-size:13px;color:var(--muted);margin-top:2px; overflow-wrap:anywhere} .loc-t em{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:6px} /* ── Masofa (brauzerda hisoblanadi) ─────────────────────────────────────── */ .dist{color:var(--blue2) !important;font-weight:700;font-size:12.5px !important;margin-top:5px !important} .dist[hidden]{display:none} /* «Eng yaqinlarini ko'rsatish» — joylashuv ruxsatini odam O'ZI beradi */ .near{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:6px 11px; border-radius:99px;border:1px solid var(--border);background:var(--card2); color:var(--blue2);font-size:12.5px;font-weight:600;cursor:pointer;transition:var(--t)} .near[hidden]{display:none} .near:hover{border-color:var(--blue2)} .near:active{transform:scale(.96)} .near:disabled{opacity:.55;cursor:default} .near .ic{width:14px;height:14px} /* Kartadagi masofa — shahar nomidan keyin */ .jc-d{color:var(--blue2);font-weight:600} /* Statik xarita — TASHQI SO'ROVSIZ, inline SVG. ⚠️ Xarita xizmatining rasm API'si ATAYLAB olinmadi: har ochilishda tashqi so'rov (kalit, kechikish, kuzatuv) qo'shilardi, foyda esa yo'q — koordinata baribir TAXMINIY (tuman markazi). */ .map{flex:0 0 auto;width:92px;height:92px;border-radius:12px;overflow:hidden; border:1px solid var(--border);background:var(--field);transition:var(--t);display:block} a.map:hover{border-color:var(--blue2);transform:scale(1.03)} .map svg{width:100%;height:100%;display:block} /* ── Meta qatori: ID / ko'rish / shikoyat ───────────────────────────────── */ .mt{display:flex;align-items:center;justify-content:space-between;gap:10px; flex-wrap:wrap;padding:12px 16px 14px;border-top:1px solid var(--border)} .mt-l{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px; font-size:12.5px;color:var(--muted)} .mt-l span{display:inline-flex;align-items:center;gap:5px} .mt-l .ic{width:15px;height:15px} .mt-id{opacity:.85} /* Layk — BOSILADIGAN (ilgari faqat son edi). Yuqoridagi paneldagi yurak bilan bitta holatni ko'rsatadi. */ .lk{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px; border:1px solid var(--border);background:var(--card2);color:var(--muted); font-size:12.5px;font-weight:600;cursor:pointer;transition:var(--t); -webkit-tap-highlight-color:transparent} .lk b{font-weight:700} .lk:hover{border-color:var(--jred);color:var(--jred)} .lk:active{transform:scale(.94)} .lk.on{color:var(--jred);border-color:var(--jred);background:rgba(226,86,79,.09)} .lk.on .ic{fill:currentColor} .rep{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:9px; font-size:13px;font-weight:600;color:var(--jred);background:none;border:0; cursor:pointer;transition:var(--t);-webkit-tap-highlight-color:transparent} .rep .ic{width:15px;height:15px} .rep:hover{background:rgba(226,86,79,.1)} /* ── O'xshash ishlar ────────────────────────────────────────────────────── */ .sim{padding:6px 16px 20px} .sim h2{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--text);margin-bottom:11px} /* ⚠️⚠️ `minmax(0,1fr)` — ODDIY `1fr` EMAS. Grid bolasining standart `min-width:auto` qiymati uni ICHKI KENGLIKKA cho'zadi: `.jc b` da `white-space:nowrap` bor va uzun lavozim nomi katakni 427px ga kengaytirib, 360px ekranda sahifani 67px gorizontal SURIB yuborardi (jonli o'lchov, 2026-08-28). `overflow:hidden` bu holda YETARLI EMAS — kesish katak o'lchami hisoblangandan KEYIN bo'ladi. */ .sim-g{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)} @media(min-width:560px){ .sim-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} } .jc{display:block;min-width:0;overflow:hidden;padding:12px 13px;border-radius:12px; background:var(--card2);border:1px solid var(--border);transition:var(--t)} .jc:hover{border-color:var(--blue2);transform:translateY(-2px)} .jc b{display:block;font-size:14px;font-weight:700;color:var(--text);line-height:1.35; margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .jc i{font-style:normal;font-size:12.5px;color:var(--muted)} .jc i,.jc em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block} .jc em{font-style:normal;margin-top:5px;font-size:13px;font-weight:700;color:var(--gold)} .foot{text-align:center;font-size:12.5px;color:var(--muted);padding:4px 16px 20px} .foot a{color:var(--blue2)} .foot a:hover{text-decoration:underline} /* ── PASTKI QOTIRILGAN PANEL ──────────────────────────────────────────────── ⚠️ Mobilda asosiy amal («Arza yuborish») e'lon matnidan PASTDA qolardi — uzun e'londa odam uni ko'rish uchun 2-3 ekran aylantirishi kerak edi. Endi doim ko'z oldida. Desktopda ham qoladi (namuna shunday), lekin konteyner kengligida markazda. */ .bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:9px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:var(--card);border-top:1px solid var(--border); box-shadow:0 -4px 20px rgba(0,0,0,.10)} @media(min-width:760px) and (max-width:899px){ .bar{max-width:720px;margin:0 auto;border-left:1px solid var(--border); border-right:1px solid var(--border);border-radius:14px 14px 0 0} } /* ⚠️ DESKTOPDA PANEL YO'Q: asosiy amal va aloqa o'ng ustunda doim ko'rinib turadi (skroll bilan yo'qolmaydi), panel esa faqat kontentni to'sib, sahifa oxirida 88px bo'sh joy qoldirardi. */ @media(min-width:900px){ .bar{display:none} } .bt{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:48px;padding:0 14px;border-radius:11px;font-size:14.6px;font-weight:700; cursor:pointer;transition:var(--t);text-align:center; -webkit-tap-highlight-color:transparent;border:2px solid transparent} .bt .ic{width:18px;height:18px;stroke-width:2.1} .bt:active{transform:scale(.975)} /* Ikkinchi darajali: oq fon, to'q hoshiya */ .bt-o{background:transparent;border-color:var(--jb);color:var(--jb)} .bt-o:hover{background:rgba(91,147,214,.1)} /* Asosiy: to'liq fon */ .bt-f{background:var(--jb);border-color:var(--jb);color:var(--jb-tx)} .bt-f:hover{filter:brightness(1.12)} /* Pastki panelda ham Telegram tugmasi O'Z rangida (2026-09-05) — profil kartasidagi bilan bir xil bo'lsin, odam ikki joyda ikki xil ko'rmasin. */ .bt-f[href^="https://t.me/"]{background:linear-gradient(135deg,#2ea6df,#1d8bc4); border-color:#1d8bc4;color:#fff} /* Aloqa tugmasi yonma-yon bo'lsa — tor, faqat ikonka */ .bt.icn{flex:0 0 auto;min-width:56px;padding:0} /* ── Rasm qatlami (lightbox) ────────────────────────────────────────────── */ body.lbx-open{overflow:hidden} .lbx{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px; background:rgba(8,10,14,.92);opacity:0;transition:opacity .2s ease} .lbx.on{opacity:1} .lbx img{max-width:100%;max-height:92vh;object-fit:contain;border-radius:8px} .lbx-x{position:absolute;top:14px;right:16px;width:42px;height:42px;border-radius:50%; background:rgba(255,255,255,.14);color:#fff;border:0;font-size:26px;line-height:1; cursor:pointer;display:grid;place-items:center} /* ── SHIKOYAT OYNASI ──────────────────────────────────────────────────────── ⚠️ Bu sahifada shikoyat yo'li UMUMAN yo'q edi. Aldov e'lonni ko'rgan odam buni bildira olmasdi — moderatsiyaga signal faqat botdan kelardi. */ .rm{position:fixed;inset:0;z-index:95;display:grid;place-items:end center} .rm[hidden]{display:none} .rm-bd{position:absolute;inset:0;background:rgba(8,10,14,.55); opacity:0;transition:opacity .2s ease} .rm.on .rm-bd{opacity:1} .rm-c{position:relative;width:100%;max-width:520px;background:var(--card); border-radius:18px 18px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom)); max-height:88vh;overflow-y:auto;transform:translateY(100%); transition:transform .24s cubic-bezier(.2,.7,.3,1);box-shadow:var(--shadow)} .rm.on .rm-c{transform:translateY(0)} @media(min-width:600px){ .rm{place-items:center} .rm-c{border-radius:18px;transform:translateY(14px) scale(.98)} .rm.on .rm-c{transform:none} } .rm-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:10px; background:none;border:0;color:var(--muted);cursor:pointer;display:grid;place-items:center} .rm-x:hover{background:var(--field);color:var(--text)} .rm-c h3{font-size:17px;font-weight:700;color:var(--text);padding-right:40px} .rm-c>p{font-size:13.5px;color:var(--muted);margin-top:5px;margin-bottom:14px} .rm-o{display:grid;gap:7px;margin-bottom:14px} .rm-o label{display:flex;align-items:center;gap:11px;padding:12px;border-radius:11px; border:1px solid var(--border);background:var(--card2);cursor:pointer; font-size:14.2px;color:var(--text2);transition:var(--t)} .rm-o label:hover{border-color:var(--blue2)} .rm-o input{accent-color:var(--jb);width:18px;height:18px;flex-shrink:0} .rm-o input:checked+span{color:var(--text);font-weight:600} .rm-c textarea{width:100%;min-height:82px;padding:11px 12px;border-radius:11px; border:1px solid var(--border);background:var(--field);color:var(--text); font-size:14.2px;line-height:1.55;resize:vertical} .rm-c textarea:focus{outline:2px solid var(--jb);outline-offset:-1px;border-color:transparent} .rm-s{width:100%;margin-top:13px;min-height:48px;border-radius:11px;border:0; background:var(--jb);color:var(--jb-tx);font-size:15px;font-weight:700;cursor:pointer; transition:var(--t)} .rm-s:hover{filter:brightness(1.12)} .rm-s:disabled{opacity:.6;cursor:default} .rm-msg{margin-top:11px;font-size:13.5px;font-weight:600;text-align:center} .rm-msg.ok{color:var(--ok)} .rm-msg.err{color:var(--jred)} /* ══ ANIMATSIYALAR ═════════════════════════════════════════════════════════ Egasi: «dizaynda animatsiyalar ham qo'shish kerak, oddiy qilib qo'ygansan». ⚠️ O'LCHOV bilan: har bir harakat 200-380ms, faqat `transform`/`opacity` (ular kompozitor qatlamida ishlaydi — sahifa qayta chizilmaydi va arzon telefonda ham silliq). `top/height/margin` ANIMATSIYA QILINMAYDI. ⚠️ Kirish animatsiyasi FAQAT bir marta, sahifa ochilishida. Skroll kuzatuvchisi ATAYLAB yo'q — u har aylantirishda ishlab, uzun e'londa sahifani sekinlashtirardi. ⚠️ `prefers-reduced-motion` da HAMMASI o'chadi (pastda). */ @keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} .mainc,.gr .prof,.gr .locs,.btm{animation:riseIn .42s cubic-bezier(.2,.7,.3,1) both} .gr .prof{animation-delay:.06s} .gr .locs{animation-delay:.12s} .btm{animation-delay:.16s} .jh h1,.sal{animation:fadeIn .5s ease both} .sal{animation-delay:.1s} /* Rasm — sekin yaqinlashish (ko'z e'longa tortiladi, lekin bezovta qilmaydi) */ .ph a{overflow:hidden;display:block} .ph img{transition:transform .5s cubic-bezier(.2,.7,.3,1)} .ph:hover img{transform:scale(1.025)} /* Aloqa/o'xshash kartalari — bosishga javob */ .cb,.jc,.emp,.src-b{will-change:transform} .cb:active,.jc:active{transform:scale(.985)} /* Yurak bosilganda — kichik «urish» */ @keyframes beat{0%{transform:scale(1)}35%{transform:scale(1.28)}70%{transform:scale(.94)}100%{transform:scale(1)}} .ib.on .ic,.lk.on .ic{animation:beat .42s cubic-bezier(.2,.7,.3,1)} /* Pastki panel — pastdan chiqadi */ @keyframes barUp{from{transform:translateY(100%)}to{transform:none}} .bar{animation:barUp .38s cubic-bezier(.2,.7,.3,1) .18s both} /* Xarita nishoni — sekin nafas olish (joylashuv taxminiy ekanini bildiradi) */ @keyframes pulse{0%,100%{transform:scale(1);opacity:.18}50%{transform:scale(1.14);opacity:.28}} .map svg circle:nth-of-type(1){transform-origin:46px 46px;animation:pulse 3.4s ease-in-out infinite} @media (prefers-reduced-motion:reduce){ .mainc,.gr .prof,.gr .locs,.btm,.jh h1,.sal,.bar{animation:none} .ph:hover img{transform:none} .map svg circle:nth-of-type(1){animation:none} .ib.on .ic,.lk.on .ic{animation:none} } /* ── Bosish/fokus javobi (klaviatura bilan yurish uchun) ────────────────── */ .ib:focus-visible,.rep:focus-visible,.bt:focus-visible,.rm-s:focus-visible, .cb:focus-visible,.jc:focus-visible,.map:focus-visible,.emp:focus-visible{ outline:2px solid var(--jb);outline-offset:2px;border-radius:11px} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important} }