/* ========================================================================== R-MOY-TANLASH · 4-brif (13.09): BOʻSHLIQ · VERTIKAL RITM · AJRALISH -------------------------------------------------------------------------- Bu qayta dizayn EMAS. Rang, shrift, kompozitsiya, tuzilma va matn oʻzgarmaydi. Faqat: boʻlimlar ORASIDAGI ajralish, boʻlim ICHIDAGI munosabatlar va sahifa RITMI. Yuklanish tartibi: … → zichlik3 → z-moy-tanlash → boshliq4 → **r-moy-tanlash** Ortga qaytarish: `qur.py` bu faylni oʻzi topadi — faylni oʻchirish kifoya, 3-brifning zichlik ishi (`z-moy-tanlash.css`) tegilmagan holda qoladi. ⚠ SPETSIFIKLIK: `z-moy-tanlash.css` boʻlim paddingini `main [data-blok="TAN-02"][data-blok]` (0-2-1) bilan yozgan. Shuning uchun bu yerda `main section[data-blok="…"][data-blok]` (0-2-2), ichki qoidalarda esa `main [data-blok^="TAN-"][data-blok] .x` (0-3-1) ishlatiladi. ——— SAHIFANING BOB TUZILMASI (ajralish shundan chiqadi) ——— TAN-01 hero (navy) ] 0-bob · kirish TAN-02 konfigurator (canvas) ] 1-bob · ASBOB TAN-03 natija (canvas, JS ochadi) ] ↳ asbobning ikkinchi bosqichi TAN-04 «Qanday ishlaydi» (oq) ] ↳ asbobning izohi — BOGʻLIQ TAN-05 «5W-30 nimani anglatadi» (canvas) ] 2-bob · TAʼLIM TAN-06 spetsifikatsiya (oq) ] TAN-07 xato tanlov (NAVY) ] ↳ oqibat — langar TAN-08 boshqa suyuqliklar (oq) ] ↳ taʼlim bobining kodasi TAN-09 ulgurji (canvas) ] 3-bob · BIZNES (boshqa auditoriya) TAN-10 mutaxassisga savol (oq) ] ↳ bogʻliq: aloqa TAN-11 yakuniy harakat (och band) ] ↳ yopilish ——— OʻLCHANGAN RITM (1440, ajralish = pb + pt, tokenlardan) ——— 100 · 72 · 132 · 95 · 116 · 100 · 126 · 86 · 100 normal · IXCHAM · BOB · normal · KENG · normal · BOB · ixcham · normal Yaʼni: qulay → ixcham(bogʻliq) → kuchli oʻtish → qulay → kengroq nafas → qulay → kuchli oʻtish → ixcham(bogʻliq) → qulay yopilish. ========================================================================== */ /* -------------------------------------------------------------------------- §1 · BOʻLIM AJRALISHI — «SECTION HEIGHT ≠ SECTION SEPARATION» (brif §21) Ajralish margin bilan emas, padding bilan beriladi: boʻlimlar bir-biriga tegib turadi, sirt juftligi (navy / canvas / oq) shu bilan oʻqiladi. Qiymatlar `boshliq4.css` §1 tokenlaridan olinadi, qoʻlda yozilmaydi: --pad-ixcham 36 · --pad-normal 50 · --pad-keng 66 · --pad-bob 76 -------------------------------------------------------------------------- */ /* ── TAN-02 · ASBOB ──────────────────────────────────────────────────────── KIRISH (bob): quyuq hero tugadi, sahifaning asbobi boshlanadi. Brif §9: «Hero ↓ selector — use stronger spacing», §4: quyuq → yengil oʻtish 80–120. Hero matni band chetidan 24 px yuqorida tugaydi → 24 + 76 = 100 px. CHIQISH (ixcham): TAN-04 «Qanday ishlaydi» — bu ayni asbobning izohi, alohida gʻoya emas. Brif §7: «keep related subsections visually grouped». Boʻlimning OʻZI choʻzilmaydi — faqat kirishi ochiladi (brif §21). */ main section[data-blok="TAN-02"][data-blok]{ padding-top:var(--pad-bob); padding-bottom:var(--pad-ixcham); } /* ── TAN-03 · NATIJA (JS ochadi) ────────────────────────────────────────── Brif §9: «Hero ↓ selector ↓ result ↓ educational content» — natija asbobning DAVOMI, lekin alohida bosqich. Shuning uchun 36+48 = 84 px: bob oʻtishi emas, ammo tanlagichdan aniq ajralib turadi. Chiqishi TAN-04 bilan bir xil. */ main section[data-blok="TAN-03"][data-blok]{ padding-top:var(--space-xl); padding-bottom:var(--pad-ixcham); } /* ── TAN-04 · QANDAY ISHLAYDI ───────────────────────────────────────────── KIRISH (ixcham 36+36 = 72): asbob bilan bitta bob. CHIQISH (bob 66+66 = 132): shu yerda ASBOB bobi tugab, TAʼLIM bobi boshlanadi — sahifaning eng kuchli ikki oʻtishidan biri (brif §4, §6). */ main section[data-blok="TAN-04"][data-blok]{ padding-top:var(--pad-ixcham); padding-bottom:var(--pad-keng); } /* ── TAN-05 · BELGINI OʻQISH ────────────────────────────────────────────── KIRISH: bob oʻtishining ikkinchi yarmi (66). CHIQISH: TAN-06 bilan ikkovi bitta taʼlim bobining ikki bobchasi (viskozitet → sifat sinfi) — bogʻliq, shuning uchun 36+50 = 86 (+9 px quyruq = 95). Katta nafas TAN-06 tomonida: oq sirt ochilganda havo sarlavhaning USTIDA turgani toʻgʻri oʻqiladi. */ main section[data-blok="TAN-05"][data-blok]{ padding-top:var(--pad-keng); padding-bottom:var(--pad-ixcham); } /* ── TAN-06 · SIFAT SINFI ───────────────────────────────────────────────── CHIQISH (keng 50+66 = 116): keyingisi — sahifaning quyuq langari. Brif §4: «Dark section ↓ 80–120px transition». Bu yerda ogʻirlik oshadi, shuning uchun nafas ham kengayadi. */ main section[data-blok="TAN-06"][data-blok]{ padding-top:var(--pad-normal); padding-bottom:var(--pad-normal); } /* ── TAN-07 · XATO TANLOV (NAVY) ────────────────────────────────────────── KIRISH 66 — quyuq band ichida matn chekkaga yopishmasligi uchun. CHIQISH (normal 50+50 = 100): TAN-08 «boshqa suyuqliklar» — xato tanlov dalilining davomi, alohida bob emas. Kirish keng, chiqish normal: quyuq band ichiga KIRISH kuchliroq, undan chiqish yumshoqroq. */ main section[data-blok="TAN-07"][data-blok]{ padding-top:var(--pad-keng); padding-bottom:var(--pad-normal); } /* ── TAN-08 · BOSHQA SUYUQLIKLAR ────────────────────────────────────────── CHIQISH (bob 76+50 = 126): taʼlim bobi shu yerda tugaydi, TAN-09 dan boshlab auditoriya oʻzgaradi (shaxsiy avtomobil → avtoservis, avtopark). Nafasning katta qismi TAN-08 tomonida — chunki TAN-09 ataylab IXCHAM boʻlim, uni choʻzish brif §5 ga zid («DO NOT stretch small sections»). */ main section[data-blok="TAN-08"][data-blok]{ padding-top:var(--pad-normal); padding-bottom:var(--pad-bob); } /* ── TAN-09 · ULGURJI ───────────────────────────────────────────────────── CHIQISH (ixcham 36+50 = 86): TAN-10 shu bobning davomi — «hamkorlik soʻrovi» tugmasi ayni oʻsha formaga olib boradi. Bogʻliq, ajratilmaydi. */ main section[data-blok="TAN-09"][data-blok]{ padding-top:var(--pad-normal); padding-bottom:var(--pad-ixcham); } /* ── TAN-10 · MUTAXASSISGA SAVOL ────────────────────────────────────────── CHIQISH (normal 50+50 = 100): forma yopiladi, yakuniy harakat boshlanadi. */ main section[data-blok="TAN-10"][data-blok]{ padding-top:var(--pad-normal); padding-bottom:var(--pad-normal); } /* ── TAN-11 · YAKUNIY HARAKAT ───────────────────────────────────────────── Kichik boʻlim: sarlavha + ikki amal. Brif §5 boʻyicha uni 500–700 px ga choʻzish TAQIQLANADI — boʻlim ixcham (≈154 px) qoladi, oldidagi ajralish esa 100 px ga koʻtarildi. 38/44 → 50/50: band oʻz ichida ham simmetrik nafas oladi, lekin «ulkan boʻsh maydon» yaratilmaydi. */ main section[data-blok="TAN-11"][data-blok]{ padding-top:var(--pad-normal); padding-bottom:var(--pad-normal); } /* -------------------------------------------------------------------------- §2 · ICHKI MUNOSABATLAR (brif §2, §3, §16) Oʻlchangan kasal: yorliq → sarlavha 12 px (brif: 16–20), TAN-05 da esa sarlavha bloki → kontent 58 px (margin-bottom 28 + grid row-gap 30 ikki marta qoʻshilgan — brif §16: «huge heading ↓ 100px ↓ tiny paragraph»). -------------------------------------------------------------------------- */ /* yorliq →18→ sarlavha (brif §2: 16–20) */ main [data-blok^="TAN-"][data-blok] .t2-bosh{row-gap:18px} /* sarlavha bloki →34→ kontent (brif §2: tavsif ↓28–40↓ kontent). `--asbob` variantiga tegilmaydi: u yorliqdan keyin darhol boshqaruv (tab) keladigan qator, matn bloki emas. */ main [data-blok^="TAN-"][data-blok] .t2-bosh:not(.t2-bosh--asbob){ margin-bottom:clamp(24px,2.4vw,34px); } /* TAN-05 · ikki karra boʻshliq olib tashlandi: `.ich` gridining oʻz row-gap i (30 px) sarlavha → displey munosabatini oʻzi beradi, margin ortiqcha. */ @media (min-width:761px){ main [data-blok="TAN-05"][data-blok] .t2-bosh:not(.t2-bosh--asbob){margin-bottom:0} } /* ── sarlavha →24→ xatboshi (brif §3: 20–28) ────────────────────────────── ⚠ `boshliq4.css` §4 `main h3 + p` ga 24 px margin beradi, grid konteynerning `row-gap` i esa uning USTIGA qoʻshiladi. Oʻlchov: TAN-04 da 8+24 = 32, TAN-05 da 12+24 = 36 chiqardi. Har modulda munosabat 24 px ga tenglashtirildi, qolgan (raqam → sarlavha, matn → havola) munosabatlar row-gap da qoladi. */ main [data-blok="TAN-04"][data-blok] .t2-jarayon__q{row-gap:8px} main [data-blok="TAN-04"][data-blok] .t2-jarayon__q h3 + .tana-k{margin-top:16px} /* TAN-05 · «5 / W / 30»: displey raqami →16→ h3 →24→ tavsif */ main [data-blok="TAN-05"][data-blok] .t2-sae__q{row-gap:16px} main [data-blok="TAN-05"][data-blok] .t2-sae__q h3 + .tana-k{margin-top:8px} /* TAN-06 · «Sinflar aralashtirilmaydi»: h3 →24→ xatboshi →28→ havola */ main [data-blok="TAN-06"][data-blok] .t2-qoida__k{row-gap:20px} main [data-blok="TAN-06"][data-blok] .t2-qoida__k h3 + .tana-k{margin-top:4px} main [data-blok="TAN-06"][data-blok] .t2-qoida__k .tana-k + .ha{margin-top:8px} /* TAN-09 · brif §2 pogʻonasi: yorliq →16→ sarlavha →20→ tavsif →28→ CTA. Oldin uchalasi ham 16 px edi — CTA matnga yopishib turardi. */ main [data-blok="TAN-09"][data-blok] .t2-ulg__chap > h2 + .tana-k{margin-top:4px} main [data-blok="TAN-09"][data-blok] .t2-ulg__amal{margin-top:12px} /* registr bandlari: h3 →24→ matn (8 px row-gap + 24 px margin = 32 edi) */ main [data-blok="TAN-09"][data-blok] .t2-ulg__reg li{row-gap:0} /* -------------------------------------------------------------------------- §3 · MOBIL (brif §15) — desktop qiymati koʻpaytirilmaydi, oʻz shkalasi. `boshliq4.css` §6 tokenlari: ixcham 26 · normal 36 · keng 48 · bob 56. Ajralish: 72 · 52 · 96 · 62 · 84 · 72 · 92 · 62 · 72 (brif: oddiy 48–72 · katta oʻtish 72–96) — ritm saqlanadi, sahifa uzayib ketmaydi. -------------------------------------------------------------------------- */ @media (max-width:760px){ main section[data-blok="TAN-02"][data-blok]{ padding-top:var(--pad-bob);padding-bottom:var(--pad-ixcham); } main section[data-blok="TAN-03"][data-blok]{ padding-top:var(--space-lg);padding-bottom:var(--pad-ixcham); } main section[data-blok="TAN-04"][data-blok]{ padding-top:var(--pad-ixcham);padding-bottom:var(--pad-keng); } main section[data-blok="TAN-05"][data-blok]{ padding-top:var(--pad-keng);padding-bottom:var(--pad-ixcham); } main section[data-blok="TAN-06"][data-blok]{ padding-top:var(--pad-normal);padding-bottom:var(--pad-normal); } main section[data-blok="TAN-07"][data-blok]{ padding-top:var(--pad-keng);padding-bottom:var(--pad-normal); } main section[data-blok="TAN-08"][data-blok]{ padding-top:var(--pad-normal);padding-bottom:var(--pad-bob); } main section[data-blok="TAN-09"][data-blok]{ padding-top:var(--pad-normal);padding-bottom:var(--pad-ixcham); } main section[data-blok="TAN-10"][data-blok]{ padding-top:var(--pad-normal);padding-bottom:var(--pad-normal); } main section[data-blok="TAN-11"][data-blok]{ padding-top:var(--pad-normal);padding-bottom:var(--pad-normal); } /* ichki: yorliq →16→ sarlavha · sarlavha bloki →24→ kontent (brif §15: mobil ichki 16–32 · brif §2: yorliq ↓16–20↓ sarlavha). ⚠ 13.09 revizya: avval 14 px edi — ikkala oraliqdan ham past, ustiga TAN-09/10 da 16 px chiqib sahifaning oʻzida ham bir xil emas edi. */ main [data-blok^="TAN-"][data-blok] .t2-bosh{row-gap:16px} /* mobilda sarlavha bloki tik teriladi: yorliq →16→ sarlavha →22→ tavsif */ main [data-blok^="TAN-"][data-blok] .t2-bosh > .t2-lid{margin-top:6px} /* TAN-05 · `.ich` gridining 16 px row-gap i ustiga 24 qoʻshilardi (40) */ main [data-blok="TAN-05"][data-blok] .t2-bosh:not(.t2-bosh--asbob){margin-bottom:8px} main [data-blok="TAN-04"][data-blok] .t2-jarayon__q{row-gap:0} main [data-blok="TAN-04"][data-blok] .t2-jarayon__q h3 + .tana-k{margin-top:20px} main [data-blok="TAN-05"][data-blok] .t2-sae__q{row-gap:14px} main [data-blok="TAN-05"][data-blok] .t2-sae__q h3 + .tana-k{margin-top:6px} main [data-blok="TAN-06"][data-blok] .t2-qoida__k{row-gap:16px} main [data-blok="TAN-06"][data-blok] .t2-qoida__k h3 + .tana-k{margin-top:4px} main [data-blok="TAN-09"][data-blok] .t2-ulg__amal{margin-top:8px} /* TAN-10 · sarlavha →20→ tavsif (mobilda ikkovi ham 16 px edi) */ main [data-blok="TAN-10"][data-blok] .t2-savol__chap > h2 + .t2-lid{margin-top:4px} } /* ========================================================================== §4 · REVIZYA (13.09, mustaqil koʻrikdan keyin) Koʻrik uch joyni topdi: (1) oraliq desktop kengliklarida ajralish brif §1 oraligʻidan pastda; (2) TAN-05 chap ustunida 71 px tasodifiy teshik; (3) TAN-02 toifa kartalari 12 px bilan bir-biriga yopishgan. Uchalasi ham ritm/boʻshliq masalasi — kompozitsiya, rang, matn tegilmadi. ========================================================================== */ /* -------------------------------------------------------------------------- §4.1 · ORALIQ DESKTOP (761–1143 px) — clamp POLI koʻtarildi (brif §1) Muammo: `boshliq4.css` §1 tokenlari `clamp(26px,2.6vw,36px)` … koʻrinishida yozilgan, maksimumga faqat ≈1434 px da yetadi. 1024 px lik lentopda maket hamon TOʻLIQ DESKTOP (12 ustunli toʻr, 2×2 karta, yonma-yon matn) boʻlsa ham ajralish 54–72 px ga tushib ketadi: oʻlchandi — 55 · 57 · 102 · 71 · 122 · 64 · 72. Brif §1 desktopda sukut 80–120, ixcham 56–80, bob 120–144 talab qiladi; quyuq herodan yengil sirtga oʻtish esa (§4) 80–120. Yechim: MAKSIMUMLAR TEGILMAYDI — faqat pol koʻtariladi. Shuning uchun 1440 dagi hozirgi ritm bitta piksel ham oʻzgarmaydi, 1024 da esa ajralish 60 · 84 · 112 · 104 boʻlib brif oraligʻiga qaytadi. Mobil (≤760) shkalasi TEGILMAYDI: u `boshliq4.css` §6 da oʻz qiymatiga ega (26/36/48/56) va brif §15 «desktop boʻshligʻini koʻpaytirma» deydi. ⚠ Bu pol muammosi BARCHA sahifada bir xil — nazoratchiga eskalatsiya qilindi (hisobot `umumiy_taklif`). Bu yerdagi qoida faqat shu sahifaga tegadi va umumiy qatlam tuzatilganda olib tashlanadi. -------------------------------------------------------------------------- */ @media (min-width:761px){ :root{ --pad-ixcham:clamp(30px,2.6vw,36px); /* juft: 60 px (brif 56–80) */ --pad-normal:clamp(42px,3.5vw,50px); /* juft: 84 px (brif 80–104) */ --pad-keng:clamp(56px,4.6vw,66px); /* juft: 112 px (brif 112–144) */ --pad-bob:clamp(62px,5.3vw,76px); /* bob oʻtishi (≤144) */ } } /* -------------------------------------------------------------------------- §4.2 · TAN-05 · chap ustundagi 71 px TASODIFIY TESHIK (brif §3, §23) «0 °C da moy qancha vaqtda yetadi» sarlavhasi bilan undan keyingi eslatma bloki orasida 71 px hech narsa yoʻq edi — sarlavha kontentini yoʻqotgandek koʻrinardi. Sabab kompozitsiya emas, toʻr artefakti: sarlavha 3-qatorda, eslatma 4-qatorda, oʻrtadagi `.t2-taq__m` va 4:3 kadr esa `3/span 2` — 3-qator balandligi SPANNING elementdan kelib chiqib choʻzilardi. Yechim: 4-qator moslashuvchan (`1fr`) qilinadi. Shunda span li elementlar 3-qatorning oʻlchoviga qoʻshilmaydi (ular moslashuvchan qatorni kesib oʻtadi), 3-qator sarlavhaning oʻz balandligiga tenglashadi va sarlavha → eslatma munosabati `.ich` ning oʻz row-gap iga (30 px) tushadi — brif §3 ning «subheading → content 24–32» oraligʻi. Faqat >1150 da: 1150 dan pastda kompozitsiya boshqacha (bosh 3-qator, matn 4-qator, eslatma 5-qator) va u yerda teshik yoʻq — oʻlchandi. -------------------------------------------------------------------------- */ @media (min-width:1151px){ main [data-blok="TAN-05"][data-blok] .ich{ grid-template-rows:auto auto auto 1fr; } } /* -------------------------------------------------------------------------- §4.3 · TAN-02 · TOIFA KARTALARI bir-biriga tegmaydi (brif §13) Toʻrt oq toifa plitasi (Yengil avtomobil · Tijorat/Yuk · Qishloq xoʻjaligi · Sanoat) `tan2.css` da `gap:var(--s3)` = 12 px bilan turardi, `kompozitsiya.css` esa ularni ramkasiz OQ kartaga aylantirgan — canvas ustida ular bitta plita boʻlib, orasida ingichka tirqish boʻlib oʻqilardi. Brif §13: «Cards should NOT touch each other. Recommended: 24–32px gap». 24 px olinadi — oraliqning QUYI chegarasi, chunki brif §9 ayni shu asbob uchun «keep the selector itself compact» deydi; 32 px tanlagichni yoyib yuborardi. Karta kengligi 9 px qisqaradi, boʻlim balandligi oʻzgarmaydi. -------------------------------------------------------------------------- */ main [data-blok="TAN-02"][data-blok] .t2-toifa{gap:var(--space-md)} @media (max-width:760px){ /* Mobilda toʻrt karta tik taxlanadi. Brif §15 (mobil ichki 16–32) va §13 (kartalar tegmaydi) kesishmasi — 16 px: kartalar aniq ajraladi, lekin desktop qiymati koʻpaytirilmaydi va sahifa +48 px uzaymaydi. */ main [data-blok="TAN-02"][data-blok] .t2-toifa{gap:var(--space-sm)} } /* ========================================================================== §N · NAZORATCHI KOʻRIGI (13.09) — sarlavha ↔ tavsif toʻqnashuvi Oʻlchandi: ixcham modullarda `h3 → p` oraligʻi 5–13 px edi (brif §2: «Do not let headings and descriptions visually collide»). Editorial 24–32 px bu yerda notoʻgʻri boʻlardi — bular karta/registr sarlavhalari, sarlavha va tavsif BITTA birlik. Shuning uchun pol 16 px: toʻqnashuv yoʻqoladi, modul shishmaydi. ========================================================================== */ main [data-blok="TAN-06"] .z-ak__m > p + p{margin-top:var(--space-sm)} /* Qolgan 12–15 px lik juftliklar — spetsifiklik bilan polga koʻtarildi. ISTISNO: `.hs__matn` (hero lid + spek qatori) 13 px da QOLDIRILDI — u `tizim.css` §4 dagi hero tizimining bir birligi, ikki qator BITTA blok boʻlib oʻqiladi; 3 px uchun yettala sahifaning heroini oʻzgartirish «visual language ni keraksiz oʻzgartirma» talabiga zid. */ main [data-blok="TAN-06"] .z-ak__m > p + p{margin-top:var(--space-sm)!important}