/* ========================================================================== G5 · MAHSULOT SAHIFASI (PDP) KOMPOZITSIYASI · 5-brif, 12 blok -------------------------------------------------------------------------- Bu sahifa saytning eng matn-ogʻir joyi (baza 2 387 soʻz). Shuning uchun referens qoidasi §11 bu yerda eng qattiq qoʻllanadi: PROZADA — FOYDA, JADVAL/REGISTRDA — RAQAM. Texnik spetsifikatsiya TOʻLIQ saqlanadi (SAE · ACEA · API · ILSAC · qadoq · artikul kodi · TDS/MSDS holati); qisqargani faqat tushuntirish matni, ilgʻor tafsilot esa yopiq `

` ga tushdi. Arxetip har blokda almashadi — qoʻshni ikki blok bir xil koʻrinmaydi: M-00 toʻliq kenglikdagi foto lenta · QUYUQ (1/2) M-01 split: galereya 6 / spetsifikatsiya 6 · oq M-02 texnik yorliqlar (jadval + chizma) · canvas M-03 editorial split 7/5 (rasmsiz) · oq M-04 vizual toʻr 3×4 (11 raqamli katak) · canvas M-05 registr (2 qator, eng yengil blok) · oq M-06 split: tavsiya / ogohlantirishlar · QUYUQ (2/2) M-07 oʻlchov shkalasi + qadoq kadri · canvas M-08 split 7/5: matn + makro kadr · oq M-09 vitrina (5 artikul plitasi) · canvas M-10 akkordeon registri · oq M-11 CTA: xulosa 5 / forma 7 · canvas Sarlavha pogʻonasi qoʻshnida takrorlanmaydi: M-01 H1 · M-02 A · M-03 C · M-04 B · M-05 (yorliq) · M-06 A · M-07 B · M-08 C · M-09 B · M-10 C · M-11 B ========================================================================== */ /* ========================================================================== §1 · RITM — ajralish = ikki qoʻshni paddingning yigʻindisi (104–180 px) 1440 px da: ixcham 48 · normal 66 · keng 82 · bob 96 M-01→M-02 148 · M-02→M-03 148 · M-03→M-04 148 · M-04→M-05 114 · M-05→M-06 130 · M-06→M-07 148 · M-07→M-08 148 · M-08→M-09 148 · M-09→M-10 132 · M-10→M-11 162 ========================================================================== */ main [data-blok="M-05"].g5-b{padding-block:var(--g5-p-ixcham)} main [data-blok="M-10"].g5-b{padding-block:var(--g5-p-normal)} /* Hero → M-01: `.hs + .g5-b` qoidasi pt ni bob (96) ga koʻtaradi. */ /* ========================================================================== §2 · ISHLAB CHIQARISH DARVOZASI `` — hamma token koʻrinadi. Matn DOM da qoladi. .mijozdan — toʻldirgich tokeni .m5-kut — tokensiz maʼnosini yoʻqotadigan ibora dd/td — jadvaldagi boʻsh qiymat: token oʻrniga «—» (qator yirtilmaydi) ========================================================================== */ body:not([data-holat="qoralama"]) [data-blok^="M-"] .mijozdan, body:not([data-holat="qoralama"]) [data-blok^="M-"] .m5-kut{display:none} body:not([data-holat="qoralama"]) [data-blok^="M-"] dd:has(> .mijozdan:only-child)::after, body:not([data-holat="qoralama"]) [data-blok^="M-"] td:has(> .mijozdan:only-child)::after{ content:"—";color:var(--slate); } /* qiymati faqat tokendan iborat chip — «ACEA ⟦…⟧» yarim chip boʻlib qolmasin */ body:not([data-holat="qoralama"]) [data-blok^="M-"] .chip:has(.mijozdan){display:none} /* ========================================================================== §3 · M-01 · SAHNA — mahsulot portreti + spetsifikatsiya Rasm hukmron: 1:1 render OQ kadrda (sirt ham oq — quti koʻrinmaydi, portret «suzadi»). Canvas plita ATAYLAB qoʻyilmadi: render fonining oʻzi oq boʻlgani uchun «karta ichida karta» chiqadi (taqiqlangan naqsh). ========================================================================== */ .m5-sahna{ display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr); column-gap:clamp(32px,4.6vw,80px);align-items:start; } .m5-gal{display:grid;row-gap:var(--s5);align-content:start} .m5-gal__kadr{ background: #FFFFFF !important; border: 1px solid var(--g5-chiziq, #DCE5F0) !important; border-radius: 20px !important; padding: clamp(24px, 3vw, 40px) !important; aspect-ratio: 1/1 !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: none !important; } .m5-gal__kadr img{ max-width: 100%; max-height: 100%; object-fit: contain; } .m5-lenta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)} .m5-lenta__t{ display:grid;row-gap:10px;align-content:start; padding:8px;background:#FFFFFF;border:1px solid var(--g5-chiziq,#DCE5F0); border-radius:14px;cursor:pointer;text-align:left; transition:all 0.2s ease; } .m5-lenta__t:hover{ border-color:#B0C8E0; transform:translateY(-2px); } .m5-lenta__t[aria-pressed="true"]{ border-color:var(--navy); box-shadow: none !important; } .m5-lenta__t .g5-kadr{border:none;border-radius:10px} .m5-lenta__m{ font-size:var(--mayda);line-height:1.35;color:var(--slate); transition:color var(--anim) var(--ease); } .m5-lenta__t[aria-pressed="true"] .m5-lenta__m{color:var(--navy);font-weight:600} .m5-lenta__t:hover .m5-lenta__m{color:var(--navy)} /* --- oʻng ustun: tipografika --- */ .m5-bosh{display:grid;row-gap:var(--s5);align-content:start} .m5-bosh h1{ margin:0;font-size:clamp(28px,3.2vw,44px);line-height:1.04; letter-spacing:var(--tracking-zich);font-weight:700;color:var(--navy); max-width:16ch;text-wrap:balance; } .m5-bosh .nb{white-space:nowrap} @media (max-width:360px){.m5-bosh .nb{white-space:normal}} .m5-tarif{margin:0;font-size:var(--lid);line-height:1.5;color:var(--slate);max-width:46ch} /* moslik registri — Bento panel */ .m5-moslik{ margin:var(--s2) 0 0;display:grid;gap:12px; background:#F8FAFD;border:1px solid #E2EAF2;border-radius:16px; padding:18px 22px;border-top:1px solid #E2EAF2; } .m5-moslik > div{ padding-block:6px;border-bottom:none; } .m5-moslik > div + div{ border-top:1px solid #E2EAF2; padding-top:14px; } .m5-moslik dt{ font-size:12px;line-height:1;font-weight:700; letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--navy); } .m5-moslik dd{margin:8px 0 0;font-size:var(--kichik);line-height:1.55;color:var(--slate);max-width:var(--g5-olcham-tana)} .m5-moslik dd b{color:var(--ink);font-weight:600} .m5-moslik__yoq dt{color:var(--slate)} .m5-moslik__yoq dt::before{ content:"";display:inline-block;width:10px;height:1px;margin-right:8px; vertical-align:middle;background:var(--slate); } .m5-amal{display:flex;flex-wrap:wrap;gap:var(--s4)} .m5-amal__izoh{margin:calc(var(--s5) * -1 + 6px) 0 0;color:var(--slate)} /* qadoq almashtirgich */ .m5-qadoq{display:grid;row-gap:14px;padding-top:var(--s5);border-top:1px solid var(--g5-chiziq)} .m5-qadoq__qator{display:flex;flex-wrap:wrap;gap:var(--s2)} .m5-qadoq__t{ display:inline-flex;align-items:center;gap:9px; padding:11px 16px;background:var(--g5-oq);color:var(--navy); border:1px solid var(--g5-chiziq);border-radius:var(--r-kontrol); font-size:var(--kichik);font-weight:600;cursor:pointer; transition:background var(--anim) var(--ease),border-color var(--anim) var(--ease),color var(--anim) var(--ease); } .m5-qadoq__t .ik{width:17px;height:17px;flex:none;color:var(--slate)} .m5-qadoq__t em{font-style:normal;font-weight:600;font-size:var(--mayda);color:var(--slate)} .m5-qadoq__t:hover{border-color:var(--navy)} .m5-qadoq__t[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff} .m5-qadoq__t[aria-pressed="true"] .ik, .m5-qadoq__t[aria-pressed="true"] em{color:rgba(255,255,255,.78)} .m5-qadoq__izoh{margin:0;color:var(--ink);font-weight:600} .m5-qadoq > .mayda{margin:0;color:var(--slate);max-width:52ch} /* --- toʻldirish talablari registri (Bento kartalari) --- */ .m5-oem{ display:grid !important;grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:24px !important;align-items:stretch !important; margin-top:var(--s12);padding-top:0 !important;border-top:none !important; } .m5-oem__u{ background:#FFFFFF !important; border:1px solid var(--g5-chiziq, #DCE5F0) !important; border-radius:20px !important; padding:clamp(24px, 2.5vw, 32px) !important; box-shadow: none !important; display:grid;row-gap:16px;align-content:start; } .m5-oem__qator{display:flex;flex-wrap:wrap;gap:var(--s6)} .m5-oem__q{display:grid;row-gap:6px} .m5-oem__q b{ font-size:11px;line-height:1;font-weight:600; letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--slate); } .m5-oem__q > span{font-size:var(--h4);line-height:1.2;font-weight:700;color:var(--navy);letter-spacing:var(--tracking-zich)} .m5-oem__tavs{ margin:0;padding:0;display:grid; grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s6);row-gap:8px; } .m5-oem__tavs li{ list-style:none;font-size:var(--kichik);line-height:1.4;color:var(--ink); font-variant-numeric:tabular-nums; } .m5-oem__izoh{grid-column:1/-1;margin:0} /* --- uch ishonch Bento kartalari --- */ .m5-ishonch{ margin:32px 0 0 !important;padding:0 !important;display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:20px !important; border-top:none !important; } .m5-ishonch > li{ list-style:none; background:#FFFFFF !important; border:1px solid var(--g5-chiziq, #DCE5F0) !important; border-radius:18px !important; padding:clamp(22px, 2.2vw, 28px) !important; box-shadow: none !important; transition:transform 0.2s !important; } .m5-ishonch > li:hover{ transform:translateY(-3px) !important; box-shadow: none !important; } .m5-ishonch > li:last-child{border-right:1px solid var(--g5-chiziq, #DCE5F0) !important} .m5-ishonch > li + li{padding-left:clamp(22px, 2.2vw, 28px) !important} .m5-ishonch h3{margin:0 0 8px;font-size:var(--h4);line-height:1.25;font-weight:700;color:var(--navy)} .m5-ishonch p{margin:0;font-size:var(--kichik);line-height:1.5;color:var(--slate);max-width:28ch} @media (max-width:1100px){ .m5-oem{grid-template-columns:minmax(0,1fr) !important} .m5-oem__tavs{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:900px){ .m5-sahna{grid-template-columns:minmax(0,1fr);row-gap:var(--s10)} .m5-sahna > .m5-bosh{order:-1} .m5-ishonch{grid-template-columns:minmax(0,1fr) !important} } @media (max-width:560px){ .m5-oem__tavs{grid-template-columns:minmax(0,1fr)} } /* ========================================================================== §4 · M-02 · TEXNIK YORLIQLAR — Bento panel ========================================================================== */ .m5-tds{ display:inline-flex;align-items:center;gap:8px; padding:8px 14px;border:1px solid var(--g5-chiziq);border-radius:var(--r-nishon); font-size:11px;line-height:1;font-weight:600; letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--slate); white-space:nowrap; } .m5-tab .tablar{flex-wrap:wrap;border-bottom:none !important;gap:8px;margin-bottom:20px} .m5-tab .tab{ white-space:nowrap;padding:10px 18px !important; border-radius:12px;background:#FFFFFF;border:1px solid var(--g5-chiziq,#DCE5F0); font-weight:600;color:var(--navy);transition:all 0.2s; } .m5-tab .tab:hover{border-color:#B0C8E0;background:#F8FAFD} .m5-tab .tab[aria-selected="true"]{ background:var(--navy) !important;color:#FFFFFF !important;border-color:var(--navy) !important; } .m5-tab .tab-ich{padding-top:0 !important} .m5-tab .tab-ich[hidden]{display:none} /* 1-panel: Bento jadval 7 / Bento yon ustun 5 */ .m5-panel--fiz{ display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:24px;align-items:start; } .m5-jadval{ grid-column:1;grid-row:1;overflow-x:auto; background:#FFFFFF !important;border:1px solid var(--g5-chiziq,#DCE5F0) !important; border-radius:20px !important;padding:clamp(20px,2vw,28px) !important; box-shadow: none !important; } .m5-yon{ grid-column:2;grid-row:1;display:grid;row-gap:var(--s8);align-content:start; background:#FFFFFF !important;border:1px solid var(--g5-chiziq,#DCE5F0) !important; border-radius:20px !important;padding:clamp(20px,2vw,28px) !important; box-shadow: none !important; } .m5-panel__ost{ grid-column:1/-1;grid-row:2; display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px;align-items:start; padding:20px 24px;background:#FFFFFF;border:1px solid var(--g5-chiziq,#DCE5F0); border-radius:16px; } .m5-panel__ost p{margin:0;color:var(--slate);max-width:56ch} .g5-jad tbody th{width:38%} .m5-jad__yoq{color:var(--g5-chiziq);font-variant-numeric:tabular-nums} .m5-jad__talab{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums} .m5-spek{display:grid;row-gap:14px;align-content:start} .m5-spek__list{margin:0;display:grid;border-top:1px solid var(--g5-chiziq)} .m5-spek__list > div{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto); column-gap:var(--s4);padding-block:11px; border-bottom:1px solid var(--g5-chiziq-ich); } .m5-spek__list dt{font-size:var(--kichik);line-height:1.4;color:var(--slate)} .m5-spek__list dd{margin:0;font-size:var(--kichik);line-height:1.4;font-weight:600;color:var(--navy);text-align:right} .m5-spek > .mayda{margin:0;color:var(--slate);max-width:44ch} .m5-akk{border-top:1px solid var(--g5-chiziq)} .m5-akk > details > summary{font-size:var(--h4)} /* 2-panel: chizma 7 / oʻlchov nuqtalari 5 */ .m5-panel--vis{ display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:24px;align-items:start; } .m5-chizma{ display:grid;row-gap:var(--s5); background:#FFFFFF;border:1px solid var(--g5-chiziq,#DCE5F0); border-radius:20px;padding:clamp(20px,2vw,28px); } .m5-chizma svg{display:block;width:100%;height:auto} .m5-chizma .gt{font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace; fill:var(--slate);letter-spacing:.04em} .m5-chizma .gt--navy{fill:var(--navy)} .m5-chizma > .mayda{margin:0;color:var(--slate);max-width:56ch} .m5-nuqta{ background:#FFFFFF;border:1px solid var(--g5-chiziq,#DCE5F0); border-radius:20px;padding:clamp(20px,2vw,28px); display:flex;flex-direction:column;gap:12px; } .m5-nuqta > li{list-style:none;border-bottom:1px solid var(--g5-chiziq-ich);padding-bottom:12px} .m5-nuqta > li:last-child{border-bottom:none;padding-bottom:0} .m5-nuqta .g5-qator{padding-block:6px} .m5-nuqta__m{display:grid;row-gap:6px} .m5-nuqta__m h3{margin:0;font-size:var(--h4);line-height:1.3;font-weight:700;color:var(--navy);letter-spacing:var(--tracking)} .m5-nuqta__m p{margin:0;font-size:var(--kichik);line-height:1.55;color:var(--slate)} /* 3-panel: mos avtomobillar 7 / izoh va ogohlantirish 5 */ .m5-panel--mos{ display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:24px;align-items:start; } .m5-mos__q{ display:grid;row-gap:10px;padding:16px 20px;background:#FFFFFF; border:1px solid var(--g5-chiziq,#DCE5F0);border-radius:16px;margin-bottom:12px; } .m5-mos__spek{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px} .m5-mos__spek b{font-size:var(--h4);line-height:1.25;font-weight:700;color:var(--navy);letter-spacing:var(--tracking-zich)} .m5-mos__spek span{ font-size:11px;line-height:1.2;font-weight:600; letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--slate); } .m5-mos__q p{margin:0;font-size:var(--kichik);line-height:1.55;color:var(--slate)} .m5-mos__ost{ display:grid;row-gap:var(--s5);align-content:start; background:#FFFFFF;border:1px solid var(--g5-chiziq,#DCE5F0); border-radius:20px;padding:clamp(20px,2vw,28px); } .m5-mos__ost p{margin:0;color:var(--slate)} .m5-mos__havolalar{display:grid;row-gap:10px;justify-items:start} @media (max-width:1024px){ .m5-panel--fiz,.m5-panel--vis,.m5-panel--mos{grid-template-columns:minmax(0,1fr)} .m5-jadval,.m5-yon{grid-column:1} .m5-yon{grid-row:auto} .m5-panel__ost{grid-column:1;grid-row:auto;grid-template-columns:minmax(0,1fr)} } /* ========================================================================== §5 · M-03 · NIMAGA MOʻLJALLANGAN — Bento kartalari ========================================================================== */ .m5-proza{ display:grid;row-gap:var(--s6);align-content:start; background:#FFFFFF;border:1px solid var(--g5-chiziq,#DCE5F0); border-radius:20px;padding:clamp(24px,2.5vw,36px); } .m5-proza > .g5-shapka{margin-bottom:0} .m5-proza > p{margin:0;font-size:var(--lid);line-height:1.6;color:var(--ink)} .m5-proza > .ha{justify-self:start} .m5-yuk{ margin:0;padding:0;display:flex;flex-direction:column;gap:12px; } .m5-yuk > li{ list-style:none;background:#FFFFFF;border:1px solid var(--g5-chiziq,#DCE5F0); border-radius:16px;padding:clamp(16px,1.6vw,20px) clamp(20px,2vw,26px); border-top:1px solid var(--g5-chiziq,#DCE5F0) !important; } .m5-yuk__q{display:grid;row-gap:8px;padding-block:0} .m5-yuk__q h3{margin:0;font-size:var(--h4);line-height:1.3;font-weight:700;color:var(--navy);letter-spacing:var(--tracking)} .m5-yuk__q p{margin:0;font-size:var(--kichik);line-height:1.55;color:var(--slate)} /* ========================================================================== §6 · M-04 · XOSSALARI — Bento Grid (11 raqamli karta) ========================================================================== */ .m5-xoss{ margin:0 !important;padding:0 !important;display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:16px !important;border-top:none !important; } .m5-xoss > li{ list-style:none !important;display:flex !important; flex-direction:column !important;gap:8px !important; background:#FFFFFF !important;border:1px solid var(--g5-chiziq,#DCE5F0) !important; border-radius:16px !important;padding:clamp(20px,2vw,26px) !important; box-shadow: none !important; transition:transform 0.2s ease, border-color 0.2s ease !important; } .m5-xoss > li:hover{ transform:translateY(-3px) !important; border-color:#B0C8E0 !important; box-shadow: none !important; } .m5-xoss > li:nth-child(3n){border-right:1px solid var(--g5-chiziq,#DCE5F0) !important;padding-right:clamp(20px,2vw,26px) !important} .m5-xoss > li:nth-child(3n+2),.m5-xoss > li:nth-child(3n){padding-left:clamp(20px,2vw,26px) !important} .m5-xoss__n{ font-size:12px;line-height:1;font-weight:700;color:var(--aksent-mayda,#0066CC); letter-spacing:var(--tracking-caps);font-variant-numeric:tabular-nums; font-family:var(--f-mono,monospace); } .m5-xoss h3{margin:2px 0 0;font-size:var(--h4);line-height:1.28;font-weight:700;color:var(--navy);letter-spacing:var(--tracking)} .m5-xoss p{margin:0;font-size:var(--kichik);line-height:1.55;color:var(--slate);max-width:38ch} [data-blok="M-04"] .g5-eslatma{margin-top:var(--s6)} @media (max-width:900px){ .m5-xoss{grid-template-columns:repeat(2,minmax(0,1fr)) !important} } @media (max-width:560px){ .m5-xoss{grid-template-columns:minmax(0,1fr) !important} } /* ========================================================================== §7 · M-05 · HUJJATLAR — Bento kartalari ========================================================================== */ .m5-huj__bosh{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:var(--s5);margin-bottom:var(--s5); } .m5-huj{ margin:0;padding:0;display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:20px !important;border-top:none !important; } .m5-huj > li{ list-style:none !important; background:#FFFFFF !important;border:1px solid var(--g5-chiziq,#DCE5F0) !important; border-radius:18px !important;padding:clamp(20px,2.2vw,28px) !important; border-top:1px solid var(--g5-chiziq,#DCE5F0) !important; box-shadow: none !important; transition:all 0.2s ease !important; } .m5-huj > li:hover{ border-color:#B0C8E0 !important; transform:translateY(-2px) !important; box-shadow: none !important; } .m5-huj__q{ display:grid;grid-template-columns:minmax(0,1fr) auto; align-items:start;column-gap:var(--s8);padding-block:0 !important; } .m5-huj__m{display:grid;row-gap:6px} .m5-huj__m h3{margin:0;font-size:var(--h4);line-height:1.3;font-weight:700;color:var(--navy);letter-spacing:var(--tracking)} .m5-huj__m p{margin:0;font-size:var(--kichik);line-height:1.55;color:var(--slate)} .m5-huj__holat{ font-size:11px;line-height:1;font-weight:600;white-space:nowrap; letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--slate); padding:6px 12px;background:#F0F4F9;border-radius:6px; } @media (max-width:760px){ .m5-huj{grid-template-columns:minmax(0,1fr) !important} } /* ========================================================================== §8 · M-06 · QOʻLLASH SOHASI — Bento Navy kartalari ========================================================================== */ .m5-qol__chap,.m5-qol__ong{ display:grid;row-gap:var(--s8);align-content:start; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 20px; padding: clamp(28px, 3vw, 40px); } .m5-qol__chap > .g5-shapka{margin-bottom:0} .m5-qol__chap > .ha{justify-self:start} .m5-tavsiya{display:grid;row-gap:14px;padding-top:var(--s5);border-top:1px solid rgba(255,255,255,0.12)} .m5-tavsiya__band{margin:0;font-size:var(--kichik);line-height:1.6} .m5-holat{margin:0;padding:0;display:grid;row-gap:0} .m5-holat > li{ list-style:none;position:relative;padding:11px 0 11px 22px; border-bottom:1px solid rgba(255,255,255,0.1); font-size:var(--kichik);line-height:1.5; } .m5-holat > li::before{ content:"";position:absolute;left:0;top:19px;width:8px;height:1px;background:#8FC4EE; } .m5-dizel{margin:0} .m5-chip{display:grid;row-gap:12px} .m5-chip > .mayda{margin:0;max-width:44ch} .m5-chip .chip{cursor:default} .m5-chip .chip--ikon{display:inline-flex;align-items:center;gap:9px} .m5-chip .chip--ikon .ik{width:17px;height:17px;color:var(--slate)} .m5-ogoh{display:grid;row-gap:var(--s5)} /* ========================================================================== §9 · M-07 · QANCHA KETADI — Bento kartalari + 5-qadoq toʻri ========================================================================== */ .m5-sarf{ display:grid;row-gap:var(--s6);align-content:start; background:#FFFFFF;border:1px solid var(--g5-chiziq,#DCE5F0); border-radius:20px;padding:clamp(24px,2.5vw,36px); } .m5-sarf__q{display:grid;row-gap:8px} .m5-sarf__q h3{margin:0;font-size:var(--h4);line-height:1.3;font-weight:700;color:var(--navy);letter-spacing:var(--tracking)} .m5-sarf__q p{margin:0;font-size:var(--kichik);line-height:1.6;color:var(--slate)} .m5-holatlar{ display:grid;row-gap:var(--s5);align-content:start; background:#FFFFFF;border:1px solid var(--g5-chiziq,#DCE5F0); border-radius:20px;padding:clamp(24px,2.5vw,36px); } .m5-holatlar__bosh{ margin:0;font-size:12px;line-height:1;font-weight:600; letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--slate); } .m5-holatlar .g5-qator{padding-block:13px} .m5-holatlar .g5-qator p{margin:0;font-size:var(--kichik);line-height:1.5;color:var(--slate)} .m5-holatlar > .ha{justify-self:start} .m5-hajm{display:grid;row-gap:var(--s5);margin-top:var(--s12)} .m5-shkala{ margin:0 !important;padding:0 !important;display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:16px !important; border:none !important; } .m5-shkala > li{ list-style:none !important;display:flex !important;flex-direction:column !important; justify-content:space-between !important;gap:12px !important; padding:22px !important;min-height:130px !important; background:#FFFFFF !important;border:1px solid var(--g5-chiziq,#DCE5F0) !important; border-radius:18px !important;border-left:1px solid var(--g5-chiziq,#DCE5F0) !important; box-shadow: none !important; transition:transform 0.2s ease, border-color 0.2s ease !important; } .m5-shkala > li:hover{ transform:translateY(-3px) !important; border-color:#B0C8E0 !important; box-shadow: none !important; } .m5-shkala > li + li{padding-left:22px !important} .m5-shkala__q{display:flex;align-items:flex-end;gap:12px} .m5-shkala__h{ font-size:calc(26px * var(--sk,1));line-height:1;font-weight:700; letter-spacing:var(--tracking-zich);color:var(--navy); font-variant-numeric:tabular-nums; } .m5-shkala__ik{width:26px;height:26px;color:var(--navy);flex:none} .m5-shkala__kim{font-size:var(--kichik);line-height:1.45;color:var(--slate)} .m5-qatorkadr{aspect-ratio:22/9;max-width:880px;border-radius:20px;overflow:hidden;border:1px solid var(--g5-chiziq,#DCE5F0)} .m5-diqqat{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:var(--s6);margin-top:var(--s10); } @media (max-width:1024px){ .m5-shkala{grid-template-columns:repeat(3,minmax(0,1fr)) !important} } @media (max-width:640px){ .m5-shkala{grid-template-columns:minmax(0,1fr) !important} .m5-qatorkadr{aspect-ratio:16/9} } /* ========================================================================== §10 · M-08 · ORIGINALLIK — Bento belgilar ========================================================================== */ .m5-orig{display:grid;row-gap:var(--s8);align-content:start} .m5-orig > .g5-shapka{margin-bottom:0} .m5-orig > .mayda{margin:0;color:var(--slate);max-width:56ch} .m5-belgi{ margin:0 !important;display:flex !important;flex-direction:column !important; gap:12px !important;border-top:none !important; } .m5-belgi > div{ display:grid !important;grid-template-columns:44px minmax(0,1fr) !important; column-gap:var(--s6);row-gap:8px; padding:20px 24px !important; background:#FFFFFF !important;border:1px solid var(--g5-chiziq,#DCE5F0) !important; border-radius:16px !important;border-bottom:1px solid var(--g5-chiziq,#DCE5F0) !important; transition:all 0.2s ease !important; } .m5-belgi > div:hover{ border-color:#B0C8E0 !important; box-shadow: none !important; } .m5-belgi__n{ grid-row:1/3;font-size:13px;font-weight:700;color:var(--aksent-mayda,#0066CC); font-variant-numeric:tabular-nums;padding-top:4px; font-family:var(--f-mono,monospace); } .m5-belgi dt{grid-column:2;font-size:var(--h4);line-height:1.3;font-weight:700;color:var(--navy)} .m5-belgi dd{grid-column:2;margin:0;font-size:var(--kichik);line-height:1.55;color:var(--slate);max-width:var(--g5-olcham-tana)} .m5-yana{ display:grid;row-gap:12px;margin-top:20px; background:#FFFFFF;border:1px solid var(--g5-chiziq,#DCE5F0); border-radius:16px;padding:20px 24px; } .m5-yana h3{ margin:0;font-size:12px;line-height:1;font-weight:600; letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--slate); } .m5-yana__r{margin:0;padding-left:1.3em;display:grid;row-gap:8px; font-size:var(--kichik);line-height:1.5;color:var(--slate)} .m5-yana__r li::marker{color:var(--aksent-mayda);font-weight:600} /* ========================================================================== §11 · M-09 · MUQOBIL VARIANT — Bento solishtirish + artikul plitalari ========================================================================== */ .m5-solish{ display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:24px !important;border-top:none !important; } .m5-solish__k{ display:grid;row-gap:10px;align-content:start; padding:clamp(24px, 2.5vw, 32px) !important; background:#FFFFFF !important;border:1px solid var(--g5-chiziq,#DCE5F0) !important; border-radius:20px !important;border-left:1px solid var(--g5-chiziq,#DCE5F0) !important; box-shadow: none !important; } .m5-solish__k + .m5-solish__k{padding-left:clamp(24px, 2.5vw, 32px) !important} .m5-solish__k h3{margin:0;font-size:var(--h4);line-height:1.3;font-weight:700;color:var(--navy);letter-spacing:var(--tracking)} .m5-solish__k p{margin:0;font-size:var(--kichik);line-height:1.55;color:var(--slate)} .m5-solish__ost{margin:var(--s5) 0 0;color:var(--slate)} .m5-art{ margin:var(--s10) 0 0 !important;padding:0 !important;display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important;gap:16px !important; } .m5-art > li{list-style:none} .m5-art__k{ display:flex !important;flex-direction:column !important; align-items:center !important;text-align:center !important; gap:12px;color:inherit;text-decoration:none; background:#FFFFFF !important;border:1px solid var(--g5-chiziq,#DCE5F0) !important; border-radius:18px !important;padding:18px !important; transition:all 0.2s ease !important; } .m5-art__k:hover{ transform:translateY(-4px) !important; border-color:#B0C8E0 !important; box-shadow: none !important; } .m5-art__k .g5-kadr{border-radius:12px} .m5-art__k h3{margin:0;font-size:15px;line-height:1.25;font-weight:700;color:var(--navy);letter-spacing:var(--tracking)} .m5-art__k h3:empty{display:none} .m5-art__k p{margin:0;color:var(--slate)} .m5-art__k p:empty{display:none} .m5-art__k:hover h3{color:var(--aksent-matn)} .m5-art__ost{margin:var(--s6) 0 0;color:var(--slate);max-width:60ch} @media (max-width:1100px){.m5-art{grid-template-columns:repeat(3,minmax(0,1fr)) !important}} @media (max-width:900px){ .m5-solish{grid-template-columns:minmax(0,1fr) !important} .m5-solish__k{padding-right:clamp(20px,2vw,28px) !important} } @media (max-width:560px){.m5-art{grid-template-columns:repeat(2,minmax(0,1fr)) !important}} /* ========================================================================== §12 · M-10 · SAVOL-JAVOB — Bento akkordeon ========================================================================== */ .m5-fq{ display:flex !important;flex-direction:column !important;gap:12px !important; border-top:none !important; } .m5-fq > details{ background:#FFFFFF !important;border:1px solid var(--g5-chiziq,#DCE5F0) !important; border-radius:16px !important;padding:clamp(16px, 1.8vw, 22px) clamp(20px, 2vw, 28px) !important; border-top:1px solid var(--g5-chiziq,#DCE5F0) !important; transition:all 0.2s ease !important; } .m5-fq > details:hover{ border-color:#B0C8E0 !important; background:#F9FBFE !important; box-shadow: none !important; } .m5-fq > details[open]{ border-color:#92B5DA !important; background:#FFFFFF !important; box-shadow: none !important; } .m5-fq > details > summary{ font-size:clamp(16px, 1.4vw, 18px) !important; font-weight:600 !important;color:var(--navy) !important; cursor:pointer; } .m5-fq .g5-akk__ich p{font-size:var(--kichik);line-height:1.65;color:var(--slate)} .m5-fq .g5-akk__ich .ha{display:inline-flex;font-size:var(--kichik)} /* ========================================================================== §13 · M-11 · SOʻROV — Bento xulosa 5 / forma 7 ========================================================================== */ .m5-sorov__chap{ display:grid;row-gap:var(--s8);align-content:start; background:#FFFFFF !important;border:1px solid var(--g5-chiziq,#DCE5F0) !important; border-radius:20px !important;padding:clamp(28px, 3vw, 40px) !important; } .m5-sorov__chap > .g5-shapka{margin-bottom:0} .m5-sorov__chap > .mayda{margin:0;color:var(--slate)} .m5-xulosa{display:grid;row-gap:12px;padding-top:var(--s5);border-top:1px solid var(--g5-chiziq)} .m5-xulosa__qator{ display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s5); } .m5-xulosa__m{margin:0;font-size:var(--h4);line-height:1.3;font-weight:700;color:var(--navy);letter-spacing:var(--tracking)} .m5-b2b{display:grid;row-gap:10px;justify-items:start;padding-top:var(--s5);border-top:1px solid var(--g5-chiziq-ich)} .m5-b2b h3{margin:0;font-size:var(--h4);line-height:1.3;font-weight:700;color:var(--navy);letter-spacing:var(--tracking)} .m5-b2b p{margin:0;font-size:var(--kichik);line-height:1.55;color:var(--slate)} .m5-forma{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5); background:#FFFFFF !important;border:1px solid var(--g5-chiziq,#DCE5F0) !important; border-radius:20px !important;padding:clamp(28px, 3vw, 40px) !important; } .m5-forma .keng{grid-column:1/-1} @media (max-width:560px){.m5-forma{grid-template-columns:minmax(0,1fr)}} /* ========================================================================== §14 · SARLAVHA POGʻONALARI — tizim tokenlari bilan tiklandi `css/tizim.css` §1 da `main [data-blok] h2` (0,1,2) qoidasi turibdi va u `.g5-shapka > h2` (0,1,1) dan kuchli — natijada BARCHA h2 bitta keglda (32 px) qolib ketardi va «qoʻshni bloklar bir xil pogʻonada boʻlmasin» qoidasi vizual kuchini yoʻqotardi. Bu yerda pogʻona SAYT TOKENLARI bilan qaytariladi (yangi kegl kiritilmaydi — tizim shkalasi oʻzgarmaydi): A `--tz-h2-a` 40 — bob ochuvchi (M-02 texnik · M-06 qoʻllash sohasi) B `--tz-h2-b` 32 — asosiy (M-04 · M-07 · M-09 · M-11) C `--tz-h2-c` 26 — bogʻlovchi (M-03 · M-08 · M-10) Eski sahifada ham aynan shu taqsimot bor edi (tizim.css: MAH-TAB va MAH-04 → A; MAH-02/03/05/08/09/10/11 → B). ⚠ NAZORATCHI TUZATISHI: g5.css §4 selektori kuchaytirildi va shkala endi butun saytda ishlaydi — qiymatlar umumiy `--g5-h-a/b/c` (52/40/30) ga qaytarildi, aks holda sayt ikki xil kegl tizimida boʻlinib qolardi. ========================================================================== */ main [data-blok^="M-"] .g5-shapka > h2{font-size:var(--g5-h-b);line-height:1.08} main [data-blok^="M-"] .g5-shapka--a > h2{font-size:var(--g5-h-a);line-height:1.04;max-width:15ch} main [data-blok^="M-"] .g5-shapka--c > h2{font-size:var(--g5-h-c);line-height:1.12;max-width:22ch} /* ========================================================================== §15 · IKKI KICHIK TUZATISH (skrinshot koʻrigidan keyin) ========================================================================== */ /* 1 · Qadoq qatori kadri: yozuv kadr USTIDA «stiker» boʻlib turardi — endi kadr ostidagi oddiy mayda qator. */ .m5-qatorkadr{max-width:1000px} .m5-kadrqator{margin:0;display:grid;row-gap:10px;justify-items:start} .m5-kadrqator figcaption{ font-size:11px;line-height:1;font-weight:600; letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--slate); } /* 2 · Artikul plitasi: nomi hali MIJOZDAN tokenida boʻlgan plitalarda boʻsh sarlavha/qator va maʼnosiz «Batafsil» qolib ketardi — ishlab chiqarishda ular tushadi, plita toza mahsulot portreti boʻlib qoladi (izohni ostidagi «qolgan artikullar tayyorlanmoqda» qatori beradi). */ body:not([data-holat="qoralama"]) .m5-art__k h3:has(> .mijozdan:only-child), body:not([data-holat="qoralama"]) .m5-art__k p:has(> .mijozdan:only-child), body:not([data-holat="qoralama"]) .m5-art__k:has(h3 > .mijozdan) .g5-plit__ha{display:none} /* plita nomi — 5 ta ustunli lentada 19 px «GRAUMANN 10W-» boʻlib sinardi */ .m5-art__k h3{font-size:15px;line-height:1.3} .m5-art__k .nb{white-space:nowrap} /* Mobil: 15 qatorli 3 ustunli jadval 390 px da siqilib ketadi — gorizontal aylantirish (qoʻllanma: jadval oʻz `overflow-x:auto` konteynerida kengroq boʻlishi mumkin, sahifa tanasi esa gorizontal aylanmaydi). */ @media (max-width:640px){ .m5-jadval{overflow-x:auto;-webkit-overflow-scrolling:touch} .m5-jadval .g5-jad{min-width:520px} } /* Strict zero-shadow enforcement for flat bento */ main [data-blok^="M-"] *, main [data-blok^="M-"], .m5-gal__kadr, .m5-tab, .m5-xos, .m5-qadoq__k, .m5-taqqos__k, .m5-qol__k, .m5-akord__tugma, .m5-b2b { box-shadow: none !important; }