/* ========================================================================== BOSH-11 · VARIANT 3 · «LANGAR PLITA» — quyuq band, oq langar + uch kichik plita Otabek, 12.09: «birozgina tushunarsiz boʻlib qolgan». 2-TUR (12.09): ikki hakamning tuzatishlari shu faylda qoʻllangan — pastda «2-TUR» yozuvi turgan har bir joy oʻsha tuzatish (1 tugma · 2 boʻshliq · 3 raqam · 4 chiziq · 5 mobil oraliq). Har biri oʻlchov bilan tasdiqlangan (`node _b11v3-olch.mjs`). Oʻz-oʻziga yetarli: css/b11.css ga tayanmaydi. Tayanadi: tokenlar · asos · komponent · bento · ritm (boʻlim paddingi va h2 kegli data-blok orqali) · tahrir. Kompozitsiya (≥1440): kirish HAMKORLIK yorligʻi · h2 «Servis, doʻkon va avtoparklar uchun» (56 px) mozaika ┌──────────────── s7 · OQ ────────────────┐ ┌──── s5 · quyuq-ich ────┐ │ Yetkazib berish bevosita brend │ │ 01 Bevosita yetkazib… │ │ egasidan. Zanjirda ortiqcha boʻgʻin │ ├────────────────────────┤ │ yoʻq. Assortiment va zaxira bizning │ │ 02 Beshta yoʻnalish… │ │ nazoratimizda. (26px) │ │ │ │ ──────────────────────────────────────── │ ├────────────────────────┤ │ ■ SERVIS ■ DOʻKON ■ AVTOPARK │ │ 03 Ish hajmiga mos… │ │ [Hamkorlik soʻrovi →] Ulgurji narx → │ │ │ └──────────────────────────────────────────┘ └────────────────────────┘ Oq plita uch qatorni egallaydi — CTA uning pastki qirrasida, 03 plitaning pastki qirrasi bilan bitta chiziqda. Matn yuqorida, harakat pastda (bento qoidasi). Langar CHAPDA (BOSH-07 gʻolibida oq langar OʻNGDA, s4) — ikki quyuq band koʻzgu holatida, bir xil arxetip emas. Langar ustuni s7 — 07 nikiga tenglashtirilmaydi. Uch soʻz «vaʼda» dan 1 px chiziq bilan ajratilgan: ular endi jumlaning davomi emas, «manzillar» registri (2-TUR, hakam 4 — Otabek «tushunarsiz» degan aynan shu qator). Uch tartib (oʻlchov: langar ichidagi manzillar → CTA oraligʻi «gap», mezon ≤ 40 px): ≥1440 s7 / s5 gap 18–20 px · blok 826 px 1170–1439 s6 / s6 gap 19–22 px · blok 740–807 px ≤1169 tik gap 12–16 px · lid → 01/02/03 → manzillar → CTA (langar yoʻq) Qoidalar: soya 0 · gradient 0 · tracking ≤ 0 (faqat HAMKORLIK CAPS yorligʻi istisno) · matn va shakl yuqoriga · radius toʻrt burchakda 16px (bento.css) · AKSENT FAQAT BELGI (manzil kvadrati, yorliq nuqtasi) — asosiy tugma navy/oq juftligi, koʻk toʻldirilgan tugma YOʻQ (2-TUR, hakam 1) · chizma yoʻq · ikonka yoʻq · plita ichida plita yoʻq · boʻlim paddingi yozilmaydi (ritm.css). ========================================================================== */ .b11v3{ --b11v3-matn:rgba(255,255,255,.74); /* quyuq plitadagi tana matni */ --b11v3-belgi:#8FC4EE; /* quyuq sirtdagi raqam (AA) */ --b11v3-langar-pad:clamp(24px,2.4vw,36px); /* langarning YON paddingi — oʻzgartirilmaydi */ /* plita vertikal paddingi — hakam 3: ikkinchi richag (bento-pad 27 → 20, ustun 3×~14 px qisqaradi). Langar ham SHU qiymatni oladi — lidning yuqori chizigʻi 01 sarlavhasi bilan teng qoladi (oʻlchov: lid.y − h3.y = 0 barcha kengliklarda). */ --b11v3-plita-pad:20px; } /* ========================================================================== 1 · KIRISH — yorliq oʻz qatorida, sarlavha ostida; hammasi chapga, yuqoriga ========================================================================== */ .b11v3__kir{ display:grid;gap:var(--s5);justify-items:start;align-content:start; margin-bottom:clamp(32px,3.6vw,52px); } .b11v3__kir h2{max-width:13em} /* ========================================================================== 2 · MOZAIKA — .bento (12 ustun, 16 px oraliq) bento.css dan ========================================================================== */ .b11v3__ro{display:contents} /*
    semantikasi qoladi,
  1. lar toʻr katagi boʻladi */ /* ---------- 2a · LANGAR — oq plita, uch qator balandligida ---------- */ /* vertikal padding oʻng plitalar bilan BIR XIL (--b11v3-plita-pad) — langar lidining birinchi qatori 01-plita sarlavhasi bilan bitta yuqori chiziqda; yon padding kattaroq. */ .b11v3 .b11v3__langar{ grid-row:span 3; gap:0;padding:var(--b11v3-plita-pad) var(--b11v3-langar-pad); } /* lid — oq langarning OVOZI (hakam 3/12): oʻngdagi h3 (21 px) dan aniq katta, plita «bayonot» boʻlib oʻqiladi. asos/bento ranglarini bosadi. 2-TUR, hakam 2 (b): 24em → 17em. Oq langar oʻng ustundan (3 plita + 2 oraliq) PAST boʻlgani uchun `margin-top:auto` plitaning oʻrtasida ~49 px (1280 da 62 px) oʻlik boʻshliq qoldirardi — pastki uchdan biri boʻsh oq. Oʻlchov: lid matnining tabiiy eni 1440 da 1396 px — 4 qatorga tushishi uchun chegara 1396/3 = 465 px dan tor boʻlishi kerak, shuning uchun hakam aytgan 20em (518 px) emas, 17em (440 px). Endi langar ustunni toʻldiradi, oraliq 49 → 20 px. Kegl clamp i 1.8vw → 2.2vw: shunda lid 1170 px dan yuqorida ham 26 px da qoladi (avval 1180 da 21 px ga tushib, langar yana 45 px qisqarardi) — langar «ovozi» butun laptop oraligʻida bir xil. `grid-row:span 2` (a-yoʻl) rad etildi: langar kontenti baribir ikki plitadan baland — toʻr qatorlarni choʻzib, boʻshliqni 01/02 plitalari ichiga koʻchirardi va blokni ~70 px uzaytirardi (zichlik: 812 px). */ .b11v3 .b11v3__langar .b11v3__lid{ font-size:clamp(21px,2.2vw,26px);line-height:1.4;font-weight:400; color:var(--navy);max-width:17em; } /* kim uchun — TIPOGRAFIK manzillar (hakam 2/10, V2 dan): 18 px / 700 / navy / manfiy tracking, oldida 8 px aksent kvadrat. Chip/yorliq EMAS — aks holda HAMKORLIK boʻlim yorligʻi bilan pikselma-piksel bir xil chiqib, uchta boʻlim-yorligʻi deb oʻqilardi. Soʻzlar manbada CAPS — text-transform yoʻq, tracking manfiy (qoida buzilmaydi). (0,3,0): bento.css `.bolim--quyuq .bp--oq p` / asos `li` qoidalaridan ustun. */ /* 2-TUR, hakam 4: yalangʻoch qator «vaʼda» jumlasining davomi boʻlib oʻqilardi (Otabek: «tushunarsiz»). Yangi soʻz qoʻshib boʻlmaydi (verbatim) — sayt idiomasi ishlatiladi: «kartalar oʻrniga ajratuvchi chiziq». Chiziq ularni bayonotdan ajratib, «manzillar» registriga oʻtkazadi; margin 40 → 28, ustiga padding 20 (chiziq ikki guruh orasida). */ .b11v3 .b11v3__kim{ display:flex;flex-wrap:wrap;gap:var(--s3) 28px; align-self:stretch; /* chiziq plitaning toʻliq enida */ margin-top:clamp(20px,2.1vw,28px); padding-top:var(--s5);border-top:1px solid var(--chiziq); } .b11v3 .b11v3__kim li{ display:flex;align-items:center;gap:12px; font-size:18px;line-height:1.3;font-weight:700;color:var(--navy); letter-spacing:var(--tracking);white-space:nowrap; } .b11v3 .b11v3__kim li::before{content:"";width:8px;height:8px;background:var(--aksent);flex:none} /* harakat — plitaning pastki qirrasiga itariladi (bento: havola pastga margin-top:auto) */ .b11v3 .b11v3__amal{ display:flex;flex-wrap:wrap;align-items:flex-start; gap:clamp(20px,2.4vw,36px); margin-top:auto;padding-top:clamp(32px,3.2vw,48px); } /* ASOSIY TUGMA — 2-TUR, hakam 1: aksentdan chiqarildi. Avval desktopda `.btn--asos` (#3A97E0 fon) turardi, ≤1024 da esa oq — bitta blokning asosiy tugmasi ikki xil koʻrinardi. Qoida: aksent #3A97E0 faqat BELGI (manzil kvadrati, yorliq nuqtasi), asosiy tugma navy/oq juftligi (GLOBAL-3: `--action-primary-bg:navy`). Endi ikkala holatda ham idioma BITTA: sirtga teskari toʻldirilgan tugma — oq langarda navy tana + oq oʻq katagi, navy sirtda (≤1024) oq tana + navy oʻq katagi. */ .b11v3 .b11v3__asos{background:var(--navy);color:#fff;border-color:transparent} .b11v3 .b11v3__asos:hover{background:var(--navy-800)} .b11v3 .b11v3__asos .btn__oq{background:#fff;color:var(--navy)} /* matn-havola tugma matni bilan bitta chiziqda: (54 − 22) / 2 = 16 px */ .b11v3 .b11v3__langar .ha{color:var(--blue-700);margin-top:16px} .b11v3 .b11v3__langar .ha:hover{color:var(--navy);border-bottom-color:var(--chiziq)} .b11v3 .b11v3__langar .b11v3__eslatma{ margin-top:var(--s4);font-size:14px;line-height:1.55;color:var(--slate);max-width:56ch; } .b11v3 .b11v3__langar .mijozdan{background:none;border-color:var(--chiziq);color:var(--slate)} /* oq sirtda oq fokus halqasi koʻrinmaydi — navy */ .b11v3 .b11v3__langar :focus-visible{outline-color:var(--navy)} /* ---------- 2b · UCH USTUVORLIK — raqam chapda, sarlavha + matn oʻngda ---------- */ .b11v3 .b11v3__plita{ display:grid;grid-template-columns:44px minmax(0,1fr); /* 40 → 44, hakam 56 emas: pastga qara */ column-gap:var(--s3);row-gap:var(--s2); align-content:start;align-items:start; padding-block:var(--b11v3-plita-pad); } /* 2-TUR, hakam 3: raqam 13 px / #8FC4EE da izoh belgisi kabi oʻqilardi, holbuki sahifa arxetip jadvalida BOSH-11 «quyuq band (KATTA 01/02/03)» deb belgilangan (GLOBAL-2). 24–30 px — plita 107 px boʻlgani uchun 64 px EMAS (Otabekning «550 juda katta» eʼtirozi takrorlanmasin). padding-top 4 → 3: raqamning bosh chizigʻi h3 niki bilan bitta chiziqda qoladi (yuqoriga tekislash qoidasi): 4 px da raqam h3 dan 2 px past, 2 px da 1.2 px baland, 3 px da farq 0.2 px (canvas actualBoundingBoxAscent bilan oʻlchandi — quruq koʻz bilan emas). USTUN 56 px EMAS, 44 px: «01» 30 px da 32 px joy oladi (44 da 12 px zaxira), 56 px esa matn ustunini 421 → 405 px ga toraytirib, 01-plitadagi 412 px lik jumlani ikkinchi qatorga tushirardi (+26 px) — oʻng ustun 408 px ga chiqib, hakam 2 yopishni soʻragan oq langardagi boʻshliq qaytadan ochilardi. Ikki tuzatish ziddiyatida oʻlchov hal qildi. */ .b11v3__n{ font-size:clamp(24px,2.2vw,30px);line-height:1;font-weight:700;letter-spacing:-.03em; color:var(--b11v3-belgi);font-variant-numeric:tabular-nums; padding-top:3px; } .b11v3 .b11v3__h{font-size:clamp(18px,1.45vw,21px);line-height:1.3;color:#fff} .b11v3__p{ grid-column:2; font-size:var(--tana);line-height:var(--tana-lh);color:var(--b11v3-matn);max-width:32em; } /* ========================================================================== 3 · ISHLAB CHIQARISH DARVOZASI (hakam 1/8 — KRITIK) «Soʻrovga ⟦MIJOZDAN: javob muddati⟧ ichida javob beramiz.» — token jumla ICHIDA: darvoza.css `.mijozdan{display:none}` uni tushirsa «Soʻrovga ichida javob beramiz.» degan singan jumla qoladi. Shuning uchun butun eslatma yashiriladi; CTA `margin-top:auto` bilan plitaning pastki qirrasida qoladi. Qoralama (``) da jumla koʻrinadi. Variant oʻz-oʻziga yetarli boʻlsin deb shu yerda — darvoza.css:37 dagi eski `.b11-cta__eslatma` selektori v3 da HECH NARSANI ushlamaydi. ⚠ INTEGRATSIYADA (hakam 6/8, ikkala hakam ham aytgan): darvoza.css 37-qator body:not([data-holat="qoralama"]) [data-blok="BOSH-11"] .b11v3__eslatma:has(.mijozdan){display:none} ga almashtiriladi va SHU §3 oʻchiriladi — global siyosat qoidasi variant faylida yurmasin. Sinov: darvoza.css ulangan holda `python3 qur.py` dan keyin eslatma display:none boʻlsin (v1/v2 shu sinovda «Soʻrovga ichida javob beramiz.» degan singan jumla bergan edi). Hozir onaki sahifada §3 ushlab turibdi: eslVisible=false. ========================================================================== */ body:not([data-holat="qoralama"]) .b11v3 .b11v3__eslatma:has(.mijozdan){display:none} /* ========================================================================== RESPONSIV — 1440 · 1280 · 1024 · 768 · 390 · 320, gorizontal toshish 0 ========================================================================== */ /* 1151–1439 (1280 · 1366 laptop): s7/s5 da oʻng plitalar 370–400 px ga torayib, 02 va 03 matni 3 va 2 qatorga sinadi — ustun 450 px ga choʻziladi, oq plitaning oʻrtasi 170–200 px boʻsh qoladi. Shu oraliqda 6/6 boʻlinish: plitalar kengayadi (matn 2/1 qator), langar torayadi (lid 4 qator). 1440+ da s7/s5 (BOSH-07 bilan koʻzgu) qoladi. Yuqori chegara 1400 → 1439: 1401–1439 da s7/s5 matn ustuni 404 px ga tushib, 01-plitadagi 412 px lik jumla ikkinchi qatorga sinardi va langardagi boʻshliq 51 px ga chiqardi (oʻlchov: 1401 → gap 51, 1440 → gap 18). */ @media (max-width:1439px) and (min-width:1170px){ .b11v3 .b11v3__langar{grid-column:span 6} .b11v3 .b11v3__plita{grid-column:span 6} } /* ≤1169 (hakam 4/11 — SKILL §8 mobil tartib: yorliq → sarlavha → tavsif → foyda → CTA → yordamchi). Oq langar YOʻQ qilinadi (display:contents — brif: mobilda har bosqichni alohida kartaga aylantirma), bolalari .bento toʻrining oʻz kataklari boʻladi: lid (tavsif) → 01 · 02 · 03 (4·4·4) → SERVIS · DOʻKON · AVTOPARK → CTA → eslatma. Manzillar plitalardan KEYIN, tugmadan OLDIN: uch soʻz uch plitaning ustida tursa «SERVIS→01» moslik boʻlib oʻqilardi (V2 ogohlantirgan); tugma oldida ular «kim uchun → soʻrov» koʻprigi boʻladi. `.bento>*` selektori langar bolalariga tegmaydi (DOM boʻyicha ular langarning bolasi) — grid-column 1/-1 shu yerda aniq yoziladi. Hammasi navy ustida: oq/#8FC4EE ranglar. */ /* Chegara 1024 → 1169: 1026–1169 da oʻng plitalar 6/6 da ham 420 px dan tor boʻlib matn yana bir qatorga sinadi, langar esa oʻsa olmaydi — ikki ustun farqi 73…132 px ga chiqib, oq plitaning yarmi boʻsh qolardi (oʻlchov: 1160 → 73, 1120 → 77, 1060 → 105, 1026 → 132; 1170 → 31). Bu oraliqda tik tartib toʻgʻri javob. */ @media (max-width:1169px){ .b11v3 .b11v3__langar{display:contents} .b11v3 .b11v3__langar .b11v3__lid{ grid-column:1/-1;order:0; color:rgba(255,255,255,.78);max-width:28em; } .b11v3 .b11v3__plita{grid-column:span 4;order:1} /* 2-TUR, hakam 5: 390 da uch soʻz 03-plitadan 12 px pastda, tugmadan 20 px yuqorida — ikki kuchli obyekt orasida yetim qator edi. Desktopdagi ajratuvchi chiziq mobilda ham ishlaydi (navy sirtda 16% oq), oraliqlar 20 / 16 ga chiqadi: manzillar oʻz registri. */ .b11v3 .b11v3__kim{ grid-column:1/-1;order:2; margin-top:var(--s5);padding-top:var(--s5); border-top:1px solid rgba(255,255,255,.16); } .b11v3 .b11v3__kim li{color:#fff} .b11v3 .b11v3__amal{grid-column:1/-1;order:3;margin-top:0;padding-top:var(--s4)} .b11v3 .b11v3__langar .b11v3__eslatma{grid-column:1/-1;order:4;margin-top:0;color:rgba(255,255,255,.68)} .b11v3 .b11v3__langar .ha{color:#8FC4EE} .b11v3 .b11v3__langar .ha:hover{color:#fff;border-bottom-color:var(--chiziq-quyuq)} .b11v3 .b11v3__langar .mijozdan{border-color:rgba(255,255,255,.30);color:rgba(255,255,255,.78)} /* asosiy tugma quyuq band idiomasida (= .btn--oq): oq tana + navy oʻq katagi. Navy ustida oq tugma 15:1 — ikkilamchi havoladan SEZILARLI kuchli (SKILL §7); koʻk tana navy ustida 3.9:1 boʻlib «yumshab» qolardi. */ .b11v3 .b11v3__asos{background:var(--oq);color:var(--navy);border-color:var(--chiziq)} .b11v3 .b11v3__asos:hover{background:var(--canvas)} .b11v3 .b11v3__asos .btn__oq{background:var(--navy);color:#fff} .b11v3 .b11v3__asos:hover .btn__oq{background:var(--navy-800)} /* navy ustida fokus halqasi oq */ .b11v3 .b11v3__langar :focus-visible{outline-color:#fff} } /* ≤880: plitalar tor boʻlib qoladi (matn 4–5 qator) — ustma-ust, span 12 */ @media (max-width:880px){ .b11v3 .b11v3__plita{grid-column:span 12} } @media (max-width:560px){ .b11v3 .b11v3__langar .ha{margin-top:0} .b11v3 .b11v3__amal{gap:var(--s4)} .b11v3 .b11v3__kim{gap:var(--s2) var(--s5)} .b11v3 .b11v3__kim li{font-size:17px} .b11v3 .b11v3__plita{grid-template-columns:36px minmax(0,1fr)} }