/* ========================================================================== KATALOG — 12.09 qayta dizayni (brif/KAT-QAYTA-DIZAYN-12-09.md) Eski `css/katalog.css` ga TEGILMAGAN. Bu fayl sahifaning YAGONA sahifa-CSS i (META: `css: kat`) — ortga qaytarish META ni `css: katalog` ga qaytarish bilan boʻladi. Asosiy qaror: sahifa «maqola» emas, ASBOB. Tartib — bosh → qidiruv → yoʻnalishlar → [filtr | roʻyxat] → yoʻnalish haqida → savol-javob → konversiya. ========================================================================== */ /* ========================================================================== 0 · ISHLAB CHIQARISH DARVOZASI Mijozdan kutilayotgan tokenlar jonli sahifada koʻrinmaydi; matn DOM da qoladi (verbatim buzilmaydi). Hammasini koʻrish: ========================================================================== */ body:not([data-holat="qoralama"]) [data-blok^="KAT"] .mijozdan, body:not([data-holat="qoralama"]) [data-blok^="KAT"] .mijozdan-tinish, body:not([data-holat="qoralama"]) [data-blok^="KAT"] .kat-kutilmoqda, body:not([data-holat="qoralama"]) [data-blok^="KAT"].kat-kutilmoqda, body:not([data-holat="qoralama"]) [data-blok^="KAT"] .kat-namuna, body:not([data-holat="qoralama"]) [data-blok^="KAT"] .kat-mah--shablon, /* qiymati faqat tokendan iborat qatorlar — yorliq yolgʻiz qolmasin */ body:not([data-holat="qoralama"]) [data-blok^="KAT"] .kat-mah__qadoq:has(.mijozdan), body:not([data-holat="qoralama"]) [data-blok^="KAT"] .kat-mah__spek:has(.mijozdan), body:not([data-holat="qoralama"]) [data-blok^="KAT"] .kat-yon__son:has(.mijozdan), body:not([data-holat="qoralama"]) [data-blok^="KAT"] .kat-qiymat-kutish:has(.mijozdan), body:not([data-holat="qoralama"]) [data-blok^="KAT"] .kat-q--kutish:has(.mijozdan){display:none} [data-blok^="KAT"] .mijozdan-tinish{display:inline} [data-holat="qoralama"] [data-blok^="KAT"] .mijozdan{ border-bottom:1px dashed var(--chiziq);color:var(--slate);font-size:.88em} /* `hidden` atributi klass qoidasidan kuchsiz — `display:flex` uni bosib ketardi (tanlangan chiplar qatori boʻsh holda ham koʻrinib turgandi). */ [data-blok^="KAT"] [hidden]{display:none!important} /* Tugma grid/flex katagida choʻzilmaydi — kengligi matniga teng (Otabek: «saytda buttonlar bir xil boʻlishi kerak»). */ [data-blok^="KAT"] .btn{justify-self:start;align-self:start;width:auto} /* ========================================================================== 1 · RITM — boʻlim paddingi FAQAT shu yerda ========================================================================== */ [data-blok="KAT-01"]{padding-block:clamp(26px,2.6vw,38px) clamp(24px,2.4vw,34px)} [data-blok="KAT-02"]{padding-block:0 clamp(26px,2.6vw,38px);border-top:0} [data-blok="KAT-04"]{padding-block:clamp(36px,3.6vw,52px) clamp(48px,5vw,76px)} [data-blok="KAT-03"]{padding-block:clamp(56px,5.6vw,84px)} [data-blok="KAT-08"]{padding-block:clamp(56px,5.6vw,84px)} [data-blok="KAT-09"]{padding-block:clamp(64px,6.6vw,100px)} /* ========================================================================== 2 · KAT-01 · KATALOG BOSHI ========================================================================== */ .kat-krosh{ display:flex;align-items:center;gap:12px; font-size:var(--mayda);color:var(--slate);margin-bottom:clamp(18px,2vw,28px); } .kat-krosh a{color:var(--slate)} .kat-krosh a:hover{color:var(--navy)} .kat-krosh__aj{color:#AEBDD0} .kat-krosh [aria-current]{color:var(--navy);font-weight:600} .kat-bosh__grid{ display:grid;grid-template-columns:minmax(0,1fr) 290px; gap:clamp(32px,4.4vw,80px);align-items:start; } .kat-bosh__chap{display:grid;gap:var(--s5);align-content:start} .kat-bosh__chap h1{max-width:12em} .kat-bosh__chap .lid{max-width:34em} /* oʻlchov ustuni — «ovoz» sifatida raqam, ostida narx qatori */ .kat-olchov{ display:grid;gap:2px;align-content:start; padding-left:clamp(20px,2vw,32px);border-left:1px solid var(--chiziq); } .kat-olchov__son{ font-size:clamp(38px,3.8vw,58px);line-height:1;font-weight:700;color:var(--navy); letter-spacing:-.045em;font-variant-numeric:tabular-nums; } .kat-olchov__birlik{ font-size:var(--mayda);font-weight:600;color:var(--aksent-mayda); letter-spacing:var(--tracking-caps);text-transform:uppercase;margin-top:6px; } .kat-narx{font-size:13px;line-height:1.55;color:var(--slate);margin-top:16px} /* ========================================================================== 3 · QIDIRUV — sahifaning asosiy asbobi ========================================================================== */ .kat-qidiruv{display:grid;gap:10px;margin-top:clamp(26px,2.8vw,40px)} .kat-qidiruv__y{ font-size:var(--mayda);font-weight:600;color:var(--navy); letter-spacing:var(--tracking-caps);text-transform:uppercase; } .kat-qidiruv__maydon{ display:flex;align-items:center;gap:14px; padding:7px 7px 7px 20px;min-height:66px; background:var(--oq);border:1px solid var(--chiziq);border-radius:var(--r-kontrol); transition:border-color var(--anim) var(--ease); } .kat-qidiruv__maydon:focus-within{border-color:var(--navy)} .kat-qidiruv__ik{width:20px;height:20px;color:var(--slate);flex:none} .kat-qidiruv input{ flex:1;min-width:0;border:0;background:none;outline:none; font-size:16px;color:var(--ink);padding:0; } .kat-qidiruv input::placeholder{color:#7C8DA1} .kat-qidiruv input::-webkit-search-cancel-button{display:none} .kat-qidiruv__tozala{ width:34px;height:34px;flex:none;border:0;background:none;cursor:pointer; font-size:22px;line-height:1;color:var(--slate);border-radius:6px; } .kat-qidiruv__tozala:hover{color:var(--navy);background:var(--canvas)} .kat-qidiruv__t{min-height:52px;flex:none} /* ========================================================================== 4 · KAT-02 · YOʻNALISHLAR — segmentli qator ========================================================================== */ .kat-yon__bosh{ display:flex;align-items:center;justify-content:space-between; gap:var(--s6);flex-wrap:wrap;margin-bottom:var(--s4); } .kat-yon__izoh{max-width:52em} .kat-yon__qator{ display:grid;grid-template-columns:repeat(6,minmax(0,1fr)); border:1px solid var(--chiziq);border-radius:var(--r-kontrol);overflow:hidden; background:var(--oq); } .kat-yon__q{ position:relative;display:grid;gap:6px;align-content:start;justify-items:start; padding:16px 18px 18px;min-height:78px; background:none;border:0;border-left:1px solid var(--chiziq-ichki); text-align:left;cursor:pointer; transition:background var(--anim) var(--ease); } .kat-yon__q:first-child{border-left:0} .kat-yon__q::before{ content:"";position:absolute;left:-1px;right:-1px;top:0;height:3px; background:transparent;transition:background var(--anim) var(--ease); } .kat-yon__nom{ font-size:14px;line-height:1.25;font-weight:600;color:var(--navy); letter-spacing:var(--tracking); } .kat-yon__son{font-size:var(--mayda);color:var(--slate);font-variant-numeric:tabular-nums} .kat-yon__q:hover{background:#F7FAFD} .kat-yon__q[aria-pressed="true"]{background:var(--navy)} .kat-yon__q[aria-pressed="true"]::before{background:var(--aksent)} .kat-yon__q[aria-pressed="true"] .kat-yon__nom{color:#fff} .kat-yon__q[aria-pressed="true"] .kat-yon__son{color:rgba(255,255,255,.7)} /* asosiy yoʻnalish belgisi — kvadrat aksent nuqta (Manufact imzosi) */ .kat-yon__q--asos::after{ content:"";position:absolute;top:14px;right:14px;width:6px;height:6px;background:var(--aksent); } .kat-yon__legend{ display:flex;align-items:center;gap:9px;margin-top:12px; font-size:var(--mayda);color:var(--slate); } .kat-yon__belgi{width:6px;height:6px;background:var(--aksent);flex:none} /* ========================================================================== 5 · ISH MAYDONI — filtr + natija ========================================================================== */ .kat-ish{display:grid;grid-template-columns:286px minmax(0,1fr);gap:clamp(28px,3vw,52px)} .kat-filtr{border-right:1px solid var(--chiziq);padding-right:clamp(20px,2.2vw,36px)} .kat-filtr__ich{ position:sticky;top:134px; max-height:calc(100vh - 148px);overflow-y:auto;overscroll-behavior:contain; padding-bottom:var(--s4);scrollbar-width:thin;scrollbar-color:#C7D5E6 transparent; } .kat-filtr__ich::-webkit-scrollbar{width:6px} .kat-filtr__ich::-webkit-scrollbar-thumb{background:#C7D5E6;border-radius:3px} .kat-filtr__bosh{ display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4); padding-bottom:var(--s3);border-bottom:1px solid var(--chiziq); } .kat-filtr__bosh h3{font-size:20px} .kat-tozala{ border:0;background:none;padding:0;cursor:pointer; font-size:13px;font-weight:600;color:var(--aksent-mayda); border-bottom:1px solid transparent; } .kat-tozala:hover{border-bottom-color:currentColor} /* tanlangan filtrlar — jonli chiplar */ .kat-tanlangan{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:var(--s4)} .kat-tanlangan__y{ font-size:var(--mayda);font-weight:600;color:var(--navy); letter-spacing:var(--tracking-caps);text-transform:uppercase; } .kat-tanlangan__chiplar{display:flex;flex-wrap:wrap;gap:6px} .kat-chip{ display:inline-flex;align-items:center;gap:8px;padding:5px 9px 5px 11px; background:var(--canvas);border:1px solid var(--chiziq);border-radius:var(--r-nishon); font-size:13px;font-weight:600;color:var(--navy);cursor:pointer; } .kat-chip::after{content:"×";font-size:15px;line-height:1;color:var(--slate)} .kat-chip:hover{border-color:var(--navy)} .kat-chip:hover::after{color:var(--navy)} /* --- guruh --- */ .kat-guruh{padding-block:var(--s4);border-bottom:1px solid var(--chiziq-ichki)} .kat-guruh__bosh{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)} .kat-guruh__bosh h4{font-size:16px} .kat-guruh__ost{margin-top:10px;max-width:34em} /* «?» izoh — sahifadagi YAGONA tushuntirish mexanikasi */ .kat-nima{position:relative;flex:none} .kat-nima > summary{list-style:none;cursor:pointer;display:grid;place-items:center} .kat-nima > summary::-webkit-details-marker{display:none} .kat-nima__b{ display:grid;place-items:center;width:22px;height:22px; border:1px solid var(--chiziq);border-radius:50%; font-size:12px;font-weight:700;color:var(--slate); transition:border-color var(--anim) var(--ease),color var(--anim) var(--ease); } .kat-nima > summary:hover .kat-nima__b, .kat-nima[open] .kat-nima__b{border-color:var(--navy);color:var(--navy)} .kat-nima > p,.kat-nima > .mayda{ margin-top:10px;padding:14px 16px;background:var(--canvas); border-left:2px solid var(--aksent);border-radius:0 var(--r-nishon) var(--r-nishon) 0; } .kat-nima > p + p{margin-top:8px} .kat-guruh__bosh + .kat-nima{display:none} /* katakchali qiymatlar */ .kat-qiymatlar{display:grid;gap:2px;margin-top:var(--s3)} .kat-q{ display:flex;align-items:center;gap:11px;padding:6px 0;cursor:pointer; font-size:var(--kichik);color:var(--ink); } .kat-q__k{ width:17px;height:17px;flex:none;border:1px solid #C3D2E3;border-radius:3px; background:var(--oq);position:relative;transition:background var(--anim) var(--ease), border-color var(--anim) var(--ease); } .kat-q:hover .kat-q__k{border-color:var(--navy)} .kat-q--faol .kat-q__k{background:var(--navy);border-color:var(--navy)} .kat-q--faol .kat-q__k::after{ content:"";position:absolute;left:5px;top:1px;width:5px;height:10px; border:2px solid #fff;border-top:0;border-left:0;transform:rotate(42deg); } .kat-q--faol{color:var(--navy);font-weight:600} .kat-yana{ display:inline-block;margin-top:10px;font-size:13px;font-weight:600; color:var(--aksent-mayda);border-bottom:1px solid transparent; } .kat-yana:hover{border-bottom-color:currentColor} /* spetsifikatsiya — yopiq guruh */ .kat-guruh--yopiq .kat-guruh__bosh h4{color:var(--slate)} .kat-qidir{ width:100%;min-height:46px;margin-top:var(--s3);padding:0 14px; background:var(--canvas);border:1px dashed var(--chiziq);border-radius:var(--r-tekis); font-size:var(--kichik);color:#93A4B6;cursor:not-allowed; } .kat-qidir::placeholder{color:#93A4B6} /* qadoq va texnika */ .kat-hajmlar{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s3)} .kat-hajm{ min-width:52px;padding:9px 12px;background:var(--oq);color:var(--navy); border:1px solid var(--chiziq);border-radius:var(--r-nishon); font-size:13px;font-weight:600;cursor:pointer;font-variant-numeric:tabular-nums; transition:background var(--anim) var(--ease),border-color var(--anim) var(--ease),color var(--anim) var(--ease); } .kat-hajm:hover{border-color:var(--navy)} .kat-hajm[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff} .kat-texnika{display:grid;gap:2px;margin-top:var(--s3)} .kat-tex{ display:flex;align-items:center;gap:11px;padding:7px 10px 7px 0; background:none;border:0;border-radius:var(--r-nishon);cursor:pointer; font-size:var(--kichik);color:var(--ink);text-align:left; transition:color var(--anim) var(--ease)} .kat-tex .ik{width:19px;height:19px;color:var(--slate);transition:color var(--anim) var(--ease)} .kat-tex:hover{color:var(--navy)} .kat-tex:hover .ik{color:var(--aksent)} .kat-tex[aria-pressed="true"]{color:var(--navy);font-weight:600} .kat-tex[aria-pressed="true"] .ik{color:var(--aksent)} .kat-filtr__ost{margin-top:var(--s4);max-width:none;font-size:11.5px;line-height:1.5} .kat-mobil-ost{display:none} /* ========================================================================== 6 · ASBOB QATORI ========================================================================== */ .kat-asbob{ display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s6); flex-wrap:wrap;padding-bottom:var(--s4);border-bottom:1px solid var(--chiziq); } .kat-filtr-t{display:none} .kat-hisob{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:var(--kichik);color:var(--slate)} .kat-hisob__y{padding:0} .kat-hisob__jonli{font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums} .kat-asbob__ong{display:flex;align-items:flex-end;gap:clamp(16px,1.8vw,28px);flex-wrap:wrap} .kat-asbob__kontrol{display:grid;gap:8px} .kat-asbob__y{ font-size:var(--mayda);font-weight:600;color:var(--slate); letter-spacing:var(--tracking-caps);text-transform:uppercase; } .kat-asbob__qator{display:flex;align-items:center;gap:10px} .kat-saralash{ min-height:44px;padding:0 40px 0 14px; background:var(--oq);border:1px solid var(--chiziq);border-radius:var(--r-tekis); font-size:var(--kichik);color:var(--ink);cursor:pointer; appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2301244C' stroke-width='1.8' stroke-linecap='square' d='M1 1.4 6 6.2l5-4.8'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center; } .kat-saralash:focus{outline:none;border-color:var(--navy)} .kat-tugmalar{display:inline-flex;border:1px solid var(--chiziq);border-radius:var(--r-tekis);overflow:hidden} .kat-rejim{ padding:0 16px;min-height:44px;background:var(--oq);border:0;cursor:pointer; font-size:13px;font-weight:600;color:var(--slate); transition:background var(--anim) var(--ease),color var(--anim) var(--ease); } .kat-rejim + .kat-rejim{border-left:1px solid var(--chiziq)} .kat-rejim:hover{color:var(--navy)} .kat-rejim[aria-pressed="true"]{background:var(--navy);color:#fff} /* asbob qatoridagi «?» panellari qatorni buzmasin */ .kat-asbob__qator .kat-nima{position:relative} .kat-asbob__qator .kat-nima > p{ position:absolute;right:0;top:32px;z-index:30;width:min(340px,78vw); background:var(--oq);border:1px solid var(--chiziq);border-left:2px solid var(--aksent); } /* tanlangan yoʻnalish konteksti */ .kat-kontekst{ display:flex;align-items:baseline;gap:12px;flex-wrap:wrap; margin-top:var(--s5);padding-left:14px;border-left:2px solid var(--aksent); font-size:var(--kichik);color:var(--slate); } .kat-kontekst b{color:var(--navy);font-weight:600} .kat-kontekst a{color:var(--aksent-mayda);font-weight:600;border-bottom:1px solid transparent} .kat-kontekst a:hover{border-bottom-color:currentColor} /* ========================================================================== 7 · KAT-05 · MAHSULOT ROʻYXATI ----------------------------------------------------------------------- Roʻyxat rejimi — KARTASIZ registr (uy qoidasi: karta oʻrniga chiziq va tipografika). Texnik ustun barcha qatorda bir x da — koʻz bilan solishtirish shu tekislash orqali ishlaydi (compare tugmasi manbada yoʻq). ========================================================================== */ .kat-list{margin-top:clamp(20px,2.2vw,30px)} .kat-list[data-rejim="royxat"]{display:grid;gap:0;border-top:1px solid var(--chiziq)} .kat-list[data-rejim="royxat"] .kat-mah{ position:relative;display:grid; grid-template-columns:124px minmax(0,1fr) 236px 168px; gap:clamp(18px,2vw,30px);align-items:start; padding:clamp(20px,2.2vw,28px) 16px;margin-inline:-16px; border-bottom:1px solid var(--chiziq-ichki); transition:background var(--anim) var(--ease); } .kat-list[data-rejim="royxat"] .kat-mah:hover{background:#F7FAFD} .kat-mah__havola{position:absolute;inset:0;z-index:1} .kat-mah__foto{width:100%} .kat-mah__foto .slot__yoz{font-size:10px;padding:10px;letter-spacing:.06em} .kat-mah__nom{display:grid;gap:9px;align-content:start} .kat-mah__usti{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .kat-mah__yon{ font-size:var(--mayda);font-weight:600;color:var(--slate); letter-spacing:var(--tracking-caps);text-transform:uppercase; } .kat-mah__nom h3{font-size:clamp(19px,1.6vw,23px);line-height:1.2} .kat-mah__brend{ display:block;font-size:var(--mayda);font-weight:600;color:var(--aksent-mayda); letter-spacing:var(--tracking-caps);margin-bottom:4px; } .kat-mah__art{display:block} .kat-mah__tav{font-size:15px;line-height:1.5;color:var(--ink);max-width:30em} .kat-mah__qosh{display:none;max-width:32em} .kat-mah__tex{display:grid;gap:var(--s4);margin:0} .kat-mah__q{display:grid;gap:5px} .kat-mah__q dt{ font-size:var(--mayda);font-weight:600;color:var(--slate); letter-spacing:var(--tracking-caps);text-transform:uppercase; } .kat-mah__q dd{margin:0;font-size:var(--kichik);color:var(--ink)} .kat-mah__sae{ font-size:clamp(20px,1.7vw,24px);line-height:1.1;font-weight:700;color:var(--navy); letter-spacing:-.035em;font-variant-numeric:tabular-nums; } .kat-mah__qadoq dd{display:flex;flex-wrap:wrap;gap:4px 10px} .kat-hajm-q{font-variant-numeric:tabular-nums;color:var(--ink)} .kat-hajm-q + .kat-hajm-q::before{content:"·";margin-right:10px;color:#AEBDD0} .kat-mah__ost{display:grid;gap:10px;justify-items:start;position:relative;z-index:2} .kat-ikki{ font-size:13px;font-weight:600;color:var(--slate); border-bottom:1px solid var(--chiziq); } .kat-ikki:hover{color:var(--navy);border-bottom-color:var(--navy)} /* --- plitka rejimi: 3 ustun --- */ .kat-list[data-rejim="plitka"]{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6); } .kat-list[data-rejim="plitka"] .kat-mah{ position:relative;display:flex;flex-direction:column;gap:var(--s4); padding:var(--s5);background:var(--oq); border:1px solid var(--chiziq);border-radius:var(--r-karta); transition:border-color var(--anim) var(--ease); } .kat-list[data-rejim="plitka"] .kat-mah:hover{border-color:#B9CBE0} .kat-list[data-rejim="plitka"] .kat-mah__foto{width:100%} .kat-list[data-rejim="plitka"] .kat-mah__qosh{display:block} .kat-list[data-rejim="plitka"] .kat-mah__tex{gap:var(--s3)} .kat-list[data-rejim="plitka"] .kat-mah__ost{margin-top:auto;padding-top:var(--s2)} .kat-list__ost{ margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--chiziq-ichki); max-width:none; } /* ========================================================================== 8 · KAT-07 · HOLATLAR — hodisadan keyin chiqadi, sukut boʻyicha yashirin ========================================================================== */ .kat-holat{display:none} .kat-holat.korinsin{display:block;padding-block:clamp(30px,3.4vw,48px)} .kat-holat__q,.kat-holat__yuk{display:none} .kat-holat__q.korinsin{display:grid;gap:var(--s4);max-width:40em} .kat-holat__yuk.korinsin{display:block} .kat-holat__q h3{font-size:clamp(21px,1.9vw,26px)} .kat-holat__tanlangan{ display:flex;flex-wrap:wrap;align-items:center;gap:8px; font-size:var(--kichik);color:var(--slate); } .kat-holat__chiplar{display:flex;flex-wrap:wrap;gap:6px} .kat-holat__amal{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);margin-top:var(--s2)} .kat-holat__yuk{ font-size:var(--kichik);color:var(--slate); padding-left:14px;border-left:2px solid var(--aksent); } /* qoralamada hamma holat koʻrinadi (koʻrib chiqish uchun) */ [data-holat="qoralama"] .kat-holat{display:block} [data-holat="qoralama"] .kat-holat__q{display:grid;gap:var(--s4);max-width:40em; padding-block:var(--s5);border-top:1px solid var(--chiziq-ichki)} [data-holat="qoralama"] .kat-holat__yuk{display:block} /* ========================================================================== 9 · KAT-06 · SAHIFALASH + roʻyxat oxiri ========================================================================== */ .kat-sahifalash{ display:flex;align-items:center;justify-content:space-between;gap:var(--s6); flex-wrap:wrap;margin-top:var(--s6);padding-top:var(--s5); border-top:1px solid var(--chiziq);font-size:var(--kichik);color:var(--slate); } .kat-sahifalash__orta{display:flex;align-items:center;gap:var(--s3)} .kat-raqamlar{display:flex;gap:4px} .kat-raqam{ display:grid;place-items:center;min-width:40px;height:40px; border:1px solid var(--chiziq);border-radius:var(--r-nishon); font-size:13px;font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums; } .kat-raqam[aria-current]{background:var(--navy);border-color:var(--navy);color:#fff} .kat-nav{font-size:13px;font-weight:600;color:var(--navy)} .kat-nav--oq{color:#A6B6C8} .kat-sahifada{display:flex;align-items:center;gap:10px} .kat-sahifada select{ min-height:40px;padding:0 34px 0 12px;background:var(--oq); border:1px solid var(--chiziq);border-radius:var(--r-nishon); font-size:13px;appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2301244C' stroke-width='1.8' stroke-linecap='square' d='M1 1.4 6 6.2l5-4.8'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center; } .kat-oxir{ display:flex;align-items:center;justify-content:space-between;gap:var(--s6); flex-wrap:wrap;margin-top:var(--s6);padding-top:var(--s5); border-top:1px solid var(--chiziq); } .kat-oxir .kichik{max-width:52em} /* ========================================================================== 10 · KAT-03 · YOʻNALISH HAQIDA — yigʻiladigan texnik registr ========================================================================== */ .kat-kirish__bosh{ display:flex;align-items:flex-end;justify-content:space-between; gap:var(--s10);flex-wrap:wrap;margin-bottom:clamp(24px,2.6vw,36px); } .kat-kirish__bosh .bosh{margin-bottom:0;gap:var(--s4)} [data-blok="KAT-03"] h2{font-size:clamp(28px,2.8vw,42px)} .kat-kirish__reg{border-top:1px solid var(--chiziq)} .kat-kirish__q{border-bottom:1px solid var(--chiziq-ichki)} .kat-kirish__q > summary{ display:grid;grid-template-columns:minmax(0,17em) minmax(0,1fr) 24px; gap:clamp(16px,2vw,36px);align-items:center; padding-block:clamp(16px,1.7vw,22px);cursor:pointer;list-style:none; } .kat-kirish__q > summary::-webkit-details-marker{display:none} .kat-kirish__nom{font-size:clamp(18px,1.5vw,21px);font-weight:700;color:var(--navy);letter-spacing:var(--tracking)} .kat-kirish__qara{font-size:var(--kichik);color:var(--slate)} .kat-kirish__q:hover .kat-kirish__nom{color:var(--aksent-mayda)} .kat-kirish__q > p{ padding-bottom:clamp(20px,2.2vw,28px);max-width:34em; } .kat-kirish__b{position:relative;width:16px;height:16px;justify-self:end} .kat-kirish__b::before,.kat-kirish__b::after{ content:"";position:absolute;background:var(--navy); transition:transform 180ms var(--ease); } .kat-kirish__b::before{left:0;top:7px;width:16px;height:2px} .kat-kirish__b::after{left:7px;top:0;width:2px;height:16px} .kat-kirish__q[open] .kat-kirish__b::after{transform:scaleY(0)} /* ========================================================================== 11 · KAT-08 · SAVOL-JAVOB ========================================================================== */ [data-blok="KAT-08"] h2{font-size:clamp(28px,2.8vw,42px)} .kat-sj__royxat{border-top:1px solid var(--chiziq)} .kat-sj__q{border-bottom:1px solid var(--chiziq-ichki)} .kat-sj__q > summary{ display:grid;grid-template-columns:56px minmax(0,1fr) 20px; gap:var(--s4);align-items:center; padding-block:clamp(18px,1.9vw,24px);cursor:pointer;list-style:none; } .kat-sj__q > summary::-webkit-details-marker{display:none} .kat-sj__n{ font-size:13px;font-weight:700;color:var(--aksent-mayda); letter-spacing:var(--tracking-caps);font-variant-numeric:tabular-nums; } .kat-sj__s{font-size:clamp(17px,1.4vw,20px);font-weight:700;color:var(--navy);letter-spacing:var(--tracking)} .kat-sj__q:hover .kat-sj__s{color:var(--aksent-mayda)} .kat-sj__b{position:relative;width:16px;height:16px;justify-self:end} .kat-sj__b::before,.kat-sj__b::after{ content:"";position:absolute;background:var(--navy);transition:transform 180ms var(--ease); } .kat-sj__b::before{left:0;top:7px;width:16px;height:2px} .kat-sj__b::after{left:7px;top:0;width:2px;height:16px} .kat-sj__q[open] .kat-sj__b::after{transform:scaleY(0)} .kat-sj__q > p{padding:0 0 clamp(20px,2.2vw,28px) calc(56px + var(--s4));max-width:44em} .kat-sj__ost{margin-top:var(--s6)} /* ========================================================================== 12 · KAT-09 · KONVERSIYA ========================================================================== */ .kat-konv__tasma{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,4vw,72px)} .kat-konv__ustun{display:grid;gap:var(--s5);align-content:start} .kat-konv__ustun h2{font-size:clamp(28px,2.9vw,44px);max-width:11em} .kat-konv__ustun .tana-k{max-width:34em} .kat-konv__ustun + .kat-konv__ustun{ padding-left:clamp(32px,4vw,72px);border-left:1px solid var(--chiziq-quyuq); } .kat-konv__hudud{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center} .kat-konv__hudud select{ min-height:54px;padding:0 40px 0 16px;background:transparent;color:#fff; border:1px solid var(--chiziq-quyuq);border-radius:var(--r-kontrol); font-size:var(--kichik);appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='square' d='M1 1.4 6 6.2l5-4.8'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center; } .kat-konv__ost{ margin-top:clamp(32px,3.4vw,48px);padding-top:var(--s5); border-top:1px solid var(--chiziq-quyuq); font-size:var(--kichik);color:rgba(255,255,255,.7);max-width:60em; } .kat-forma{ display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,3.4vw,64px);align-items:start;margin-top:clamp(36px,3.8vw,56px); } .kat-forma__chap{display:grid;gap:var(--s4);align-content:start} .kat-forma__chap h3{font-size:clamp(21px,1.9vw,26px)} .kat-forma__maydonlar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);align-items:start} .kat-forma__maydonlar .keng{grid-column:1/-1} .holat{display:none} .holat.korinsin{ display:block;margin-top:var(--s5);padding:14px 16px; background:var(--canvas);border-left:2px solid var(--aksent); font-size:var(--kichik);color:var(--ink); } /* ========================================================================== 13 · RESPONSIV ========================================================================== */ @media (max-width:1280px){ .kat-ish{grid-template-columns:262px minmax(0,1fr)} .kat-list[data-rejim="royxat"] .kat-mah{grid-template-columns:104px minmax(0,1fr) 200px 150px} .kat-list[data-rejim="plitka"]{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:1100px){ .kat-bosh__grid{grid-template-columns:minmax(0,1fr)} .kat-olchov{ display:flex;align-items:baseline;flex-wrap:wrap;gap:12px; padding-left:0;padding-top:var(--s5);border-left:0;border-top:1px solid var(--chiziq); } .kat-olchov__son{font-size:34px} .kat-olchov__birlik{margin-top:0} .kat-narx{margin-top:0;flex:1 1 100%} .kat-yon__qator{grid-template-columns:repeat(3,minmax(0,1fr))} .kat-yon__q:nth-child(3n+1){border-left:0} .kat-yon__q:nth-child(n+4){border-top:1px solid var(--chiziq-ichki)} .kat-list[data-rejim="royxat"] .kat-mah{ grid-template-columns:104px minmax(0,1fr); } .kat-list[data-rejim="royxat"] .kat-mah__tex{grid-column:2;grid-auto-flow:column;gap:var(--s8);justify-content:start} .kat-list[data-rejim="royxat"] .kat-mah__ost{grid-column:2;display:flex;align-items:center;gap:var(--s6)} } /* --- 900 px: filtr tortmaga oʻtadi --- */ @media (max-width:900px){ .kat-ish{grid-template-columns:minmax(0,1fr);gap:0} /* tortma: flex ustun — pastki qator DOIM koʻrinadi, roʻyxat orasida skroll */ .kat-filtr{ position:fixed;inset:auto 0 0 0;z-index:80; display:flex;flex-direction:column;max-height:86vh; background:var(--oq);border:0;border-top:1px solid var(--chiziq); border-radius:var(--r-konteyner) var(--r-konteyner) 0 0; padding:0;transform:translateY(101%);visibility:hidden; transition:transform 280ms var(--ease),visibility 280ms; } .kat-filtr[data-ochiq]{transform:none;visibility:visible} .kat-filtr::before{ content:"";width:44px;height:4px;flex:none;margin:10px auto 2px; background:var(--chiziq);border-radius:2px; } .kat-filtr__ich{ position:static;flex:1 1 auto;min-height:0;max-height:none; padding:var(--s4) var(--chet) var(--s4); } .kat-mobil-ost{ display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex:none; padding:var(--s3) var(--chet) calc(var(--s3) + env(safe-area-inset-bottom)); border-top:1px solid var(--chiziq);background:var(--oq); } .kat-yop{ border:0;background:none;padding:10px 0;cursor:pointer; font-size:var(--kichik);font-weight:600;color:var(--slate); } .kat-qolla{flex:1;justify-content:space-between;max-width:280px} /* `.bolim > *{z-index:1}` `.ich` da yigʻish konteksti yaratardi va tortma perde ostida qolib ketardi — bu boʻlimda kontekst ochilmaydi. */ [data-blok="KAT-04"] > .ich{z-index:auto} .kat-perde{ position:fixed;inset:0;z-index:79;background:rgba(1,36,76,.4); opacity:0;visibility:hidden;transition:opacity 220ms var(--ease),visibility 220ms; } .kat-perde[data-ochiq]{opacity:1;visibility:visible} .kat-filtr-t{ display:inline-flex;align-items:center;gap:9px; min-height:46px;padding:0 18px;background:var(--navy);color:#fff;border:0; border-radius:var(--r-tekis);font-size:var(--kichik);font-weight:600;cursor:pointer; } .kat-filtr-t__n{ display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px; background:var(--aksent);border-radius:10px;font-size:11px;font-weight:700; } .kat-asbob{align-items:center} .kat-asbob__ong{width:100%;justify-content:space-between} } @media (max-width:760px){ .kat-qidiruv__maydon{flex-wrap:wrap;padding:10px;min-height:0;gap:10px} .kat-qidiruv__ik{margin-left:8px} .kat-qidiruv input{flex:1 1 60%;font-size:16px;min-height:38px} [data-blok^="KAT"] .kat-qidiruv__t{width:100%;justify-content:space-between} .kat-yon__qator{grid-template-columns:repeat(2,minmax(0,1fr))} .kat-yon__q:nth-child(3n+1){border-left:1px solid var(--chiziq-ichki)} .kat-yon__q:nth-child(2n+1){border-left:0} .kat-yon__q:nth-child(n+3){border-top:1px solid var(--chiziq-ichki)} .kat-list[data-rejim="royxat"] .kat-mah{ grid-template-columns:88px minmax(0,1fr);gap:var(--s4); } .kat-list[data-rejim="royxat"] .kat-mah__tex{ grid-column:1/-1;grid-auto-flow:row;gap:var(--s3); } .kat-list[data-rejim="royxat"] .kat-mah__ost{grid-column:1/-1} .kat-list[data-rejim="plitka"]{grid-template-columns:minmax(0,1fr)} .kat-sj__q > summary{grid-template-columns:40px minmax(0,1fr) 18px;gap:var(--s3)} .kat-sj__q > p{padding-left:calc(40px + var(--s3))} .kat-kirish__q > summary{grid-template-columns:minmax(0,1fr) 18px;gap:var(--s3);row-gap:6px} .kat-kirish__qara{grid-column:1;grid-row:2} .kat-kirish__b{grid-column:2;grid-row:1} .kat-konv__tasma{grid-template-columns:minmax(0,1fr)} .kat-konv__ustun + .kat-konv__ustun{ padding-left:0;padding-top:var(--s8);border-left:0;border-top:1px solid var(--chiziq-quyuq); } .kat-forma{grid-template-columns:minmax(0,1fr)} .kat-forma__maydonlar{grid-template-columns:minmax(0,1fr)} .kat-oxir,.kat-sahifalash{gap:var(--s4)} } @media (max-width:420px){ .kat-mah__foto{width:100%} .kat-list[data-rejim="royxat"] .kat-mah{grid-template-columns:72px minmax(0,1fr)} .kat-mah__usti{gap:8px} } /* sensorli qurilmada nishon 44 px */ @media (hover:none){ .kat-q{padding-block:11px} .kat-tex{padding-block:12px} } /* ========================================================================== 14 · QATOR UZUNLIGI — norma 60–75 belgi, 90 dan oshmaydi (olchov-qator.mjs) ========================================================================== */ .kat-yon__izoh{max-width:34em} .kat-list__ost{max-width:34em} .kat-oxir .kichik{max-width:33em} .kat-konv__ost{max-width:34em}