/* ==========================================================================
   G5 · 5-BRIF (2026-09-13) — QAYTA DIZAYN: IERARXIYA · BOʻSHLIQ · RASM
   Otabekning brifi: brif/5-QAYTA-DIZAYN-13-09.md (verbatim)

   Bu qatlam SAYTNING OXIRGI SOʻZI. Yuklanish tartibi (qur.py):
     … → tizim → kompozitsiya → zichlik3 → z-<sahifa> → boshliq4 → r-<sahifa>
         → **g5** → **g5-<sahifa>**

   Nima uchun yangi qatlam, eski fayllar tahrir qilinmadi:
   eski qatlamlar 13/14/9 blokli ESKI tuzilmaga sozlangan. Yangi tuzilma yangi
   blok kodlari bilan keladi (G-01…G-11 · K-01…K-05 · T-01…T-06 · S-01…S-05 ·
   B-01…B-07 · A-01…A-06 · M-01…M-08), shuning uchun eski `[data-blok^="BOSH-"]`
   qoidalari yangi markupga TEGMAYDI — specificity urushi yoʻq.
   Ortga qaytarish: qur.py dan "g5" ni olib tashlash.

   Qonun oʻzgarmadi: soya 0 · tracking ≤ 0 · yuqoriga tekislash · quyuq band ≤ 2 ·
   radius oʻrtacha · AI-slop yoʻq (glassmorphism · glow · bezak gradient · karta
   ichida karta · ortiqcha ikonka).
   ========================================================================== */

/* ==========================================================================
   §1 · SIRT POGʻONALARI — «clear background transitions»
   Oʻlchangan muammo: oq (#FFF) va canvas (#F2F6FB) orasidagi farq 3 % edi —
   1440 px da ikki boʻlim bitta uzluksiz maydon boʻlib oʻqilardi. Pogʻona
   chuqurlashtirildi va uchinchi (quyuqroq kulrang) pogʻona qoʻshildi.
   ========================================================================== */
:root{
  --g5-oq:#FFFFFF;
  --g5-canvas:#EAF0F7;      /* 2-pogʻona — avvalgi #F2F6FB dan sezilarli quyuq */
  --g5-canvas-2:#DFE8F2;    /* 3-pogʻona — jadval/registr foni, ajratuvchi tasma */
  --g5-navy:#01244C;
  --g5-navy-2:#02306A;
  --g5-tun:#001328;         /* eng quyuq — hero pardasi va yakuniy CTA uchun */

  --g5-chiziq:#D2DEEC;      /* strukturaviy chiziq — canvas ustida ham koʻrinadi */
  --g5-chiziq-ich:#E2EAF4;
  --g5-chiziq-quyuq:rgba(255,255,255,.16);
}

/* ⚠ `.hs` (hero) CHIQARILADI: uning foni navy boʻlishi shart. Aks holda
   rasm yuklanmaganda oq fonda oq matn qoladi (kontrast tekshiruvi ham
   shuni ushlaydi: cr=1.00). */
main [data-blok^="G-"]:not(.hs),main [data-blok^="K-"]:not(.hs),
main [data-blok^="T-"]:not(.hs),main [data-blok^="S-"]:not(.hs),
main [data-blok^="B-"]:not(.hs),main [data-blok^="A-"]:not(.hs),
main [data-blok^="M-"]:not(.hs){
  background:var(--g5-oq);
  position:relative;
}
main [data-blok].hs{background:var(--g5-navy)}
.g5--canvas{background:var(--g5-canvas) !important}
.g5--canvas2{background:var(--g5-canvas-2) !important}
.g5--navy{background:var(--g5-navy) !important;color:#fff}
.g5--tun{background:var(--g5-tun) !important;color:#fff}

/* Sirt bir xil qolgan joyda (oq → oq) ajralishni INGICHKA CHIZIQ beradi.
   Brifning «occasional borders» talabi — har boʻlimda emas, faqat sirt
   almashmagan joyda. */
.g5--chiziq-ust{border-top:1px solid var(--g5-chiziq)}

/* Quyuq sirtda tipografika va chiziqlar */
.g5--navy h1,.g5--navy h2,.g5--navy h3,.g5--navy h4,
.g5--tun h1,.g5--tun h2,.g5--tun h3,.g5--tun h4{color:#fff}
.g5--navy p,.g5--navy li,.g5--navy td,.g5--navy th,
.g5--tun p,.g5--tun li,.g5--tun td,.g5--tun th{color:rgba(255,255,255,.80)}
.g5--navy .g5-lid,.g5--tun .g5-lid{color:rgba(255,255,255,.84)}

/* ==========================================================================
   §2 · RITM — boʻlim ajralishi 100–180 px
   AJRALISH = ikki qoʻshni boʻlim paddingining YIGʻINDISI (bloklar tegib
   turadi; margin qoʻyilsa ikki sirt orasida tana foni koʻrinib «sirt juftligi»
   tili buziladi — bu loyihaning 4-brifda oʻlchangan qarori).
   Referens saboqи (oʻlchangan): shell butun saytda 48 px, bis-proto 108 px —
   RITM BITTA QIYMATDA QULFLANADI, «bu boʻlimga 90, buniga 130» yoʻq. Shuning
   uchun tier soni 4 dan 3 ga tushirildi; 4-si (bogʻlovchi) faqat oldingi blokning
   DAVOMI boʻlgan qisqa qatorlar uchun.
     bogʻlovchi 44 · normal 60 · keng 76 · bob 90
     asosiy sumlar: 120 (normal+normal) · 136 · 152 · 166 · 180
   ========================================================================== */
:root{
  --g5-p-ixcham:clamp(30px,3.2vw,44px);
  --g5-p-normal:clamp(40px,4.4vw,60px);
  --g5-p-keng:clamp(48px,5.6vw,76px);
  --g5-p-bob:clamp(56px,6.6vw,90px);
}
/* ⚠ 4-brifda oʻlchangan tuzoq: `vw` ga bogʻlangan clamp lar 761–1250 px da
   bir-biriga qulab tushadi va ritm yoʻqoladi. Desktopda px da qotiriladi. */
@media (min-width:761px){
  :root{--g5-p-ixcham:44px;--g5-p-normal:60px;--g5-p-keng:76px;--g5-p-bob:90px}
}
@media (min-width:1281px){
  :root{--g5-p-ixcham:48px;--g5-p-normal:66px;--g5-p-keng:82px;--g5-p-bob:96px}
}

main [data-blok].g5-b{padding-block:var(--g5-p-normal)}
main [data-blok].g5-b.g5-b--ixcham{padding-block:var(--g5-p-ixcham)}
main [data-blok].g5-b.g5-b--keng{padding-block:var(--g5-p-keng)}
main [data-blok].g5-b.g5-b--bob{padding-block:var(--g5-p-bob)}
/* faqat KIRISHNI ochadi — boʻlim balandligini oshirmaydi
   (SECTION HEIGHT ≠ SECTION SEPARATION) */
main [data-blok].g5-b--ochilish{padding-top:var(--g5-p-bob)}
main [data-blok].g5-b--yopilish{padding-bottom:var(--g5-p-bob)}

/* hero → birinchi boʻlim oʻtishi */
main .hs + [data-blok].g5-b{padding-top:var(--g5-p-bob)}

/* ==========================================================================
   §3 · KARKAS VA OʻLCHOV — «controlled content widths»
   ========================================================================== */
:root{
  /* Referens oʻlchovi (shell · liqui-moly · bis-proto): matn oʻlchovi 38–56 belgi,
     xatboshi 220 belgidan oshmaydi. Avvalgi 60–66ch shundan keng edi. */
  --g5-olcham-lid:54ch;     /* lid matni */
  --g5-olcham-tana:58ch;    /* tana matni */
  --g5-olcham-tor:40ch;     /* karta ichidagi bitta qator (≤170 belgi) */
}
.g5-b > .ich{position:relative}
.g5-lid{max-width:var(--g5-olcham-lid)}
.g5-b p:not(.g5-lid):not(.mayda):not(.javobgarlik){max-width:var(--g5-olcham-tana)}

/* ==========================================================================
   §4 · BOʻLIM SHAPKASI — Yorliq → Sarlavha → 1–2 jumla
   Uch pogʻonali sarlavha: bob-ochuvchi (A) · asosiy (B) · bogʻlovchi (C).
   Qoʻshni bloklar bir xil pogʻonada boʻlmaydi — sahifa qatlami tayinlaydi.
   ========================================================================== */
:root{
  /* Otabek skill §4: hero H1 52–64 · asosiy H2 40–48 · ikkilamchi H2 36–44.
     Referens: H2 tana matndan 1,8–2,4× katta, nisbat butun saytda QULFLANADI.
     Tana 16 px → A 52 (3,25×, faqat bob ochuvchi va yakuniy CTA) ·
     B 40 (2,5×, asosiy) · C 30 (1,9×, bogʻlovchi). */
  --g5-h-a:clamp(32px,3.7vw,52px);   /* bob ochuvchi */
  --g5-h-b:clamp(27px,2.9vw,40px);   /* asosiy */
  --g5-h-c:clamp(22px,2.1vw,30px);   /* bogʻlovchi */
}
.g5-shapka{display:grid;row-gap:18px;margin-bottom:var(--s8)}
/* ⚠ OʻLCHANGAN TUZATISH: `tizim.css` §1 da boʻlim sarlavhasi
   `main [data-blok] h2` (0-1-2) bilan yozilgan va u `.g5-shapka > h2` (0-1-1)
   dan KUCHLI edi — natijada uch pogʻonali shkala umuman ishlamay, barcha H2
   32 px da qolgandi (oʻlchandi: bosh sahifadagi 9 ta H2 ning 9 tasi ham).
   Shuning uchun selektor `main [data-blok]` bilan boshlanadi (0-2-2). */
main [data-blok] .g5-shapka > h2,
.g5-shapka > h2{
  font-size:var(--g5-h-b) !important;line-height:1.05;letter-spacing:var(--tracking-zich);
  font-weight:700;margin:0;text-wrap:balance;max-width:18ch;
}
main [data-blok] .g5-shapka--a > h2,
.g5-shapka--a > h2{font-size:var(--g5-h-a) !important;max-width:16ch}
main [data-blok] .g5-shapka--c > h2,
.g5-shapka--c > h2{font-size:var(--g5-h-c) !important;max-width:24ch}
/* ⚠ `!important` SHART: `tizim.css` §1 da 37 ta blok kodini sanaydigan
   `main [data-blok="KAT-03"][data-blok] h2 … {font-size:var(--tz-h2-b)!important}`
   roʻyxati bor. Eski blok kodini saqlagan sahifalar (katalog · moy tanlash)
   shu roʻyxatga tushadi va faqat `!important` uni yengadi. Boshqa yoʻl —
   `tizim.css` ni tahrirlash, lekin u umumiy fayl va tegilmaydi. */
/* `.g5-cta` odatda `[data-blok]` ning OʻZI — avlodi emas; ikkala shakl ham kerak. */
main [data-blok].g5-cta h2,main [data-blok] .g5-cta h2,
.g5-cta h2{font-size:var(--g5-h-a)}
.g5-shapka > .g5-lid{margin-top:6px;font-size:var(--lid);line-height:1.55;color:var(--slate)}
.g5--navy .g5-shapka > .g5-lid,.g5--tun .g5-shapka > .g5-lid{color:rgba(255,255,255,.82)}

/* shapka + oʻngda amal — bitta qatorda */
.g5-shapka-qator{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:start;column-gap:var(--s10);margin-bottom:var(--s10);
}
.g5-shapka-qator .g5-shapka{margin-bottom:0}
@media (max-width:900px){
  .g5-shapka-qator{grid-template-columns:minmax(0,1fr);row-gap:var(--s6)}
  /* bitta ustunga tushganda tugma butun kenglikka choʻzilib ketardi */
  .g5-shapka-qator > .btn{justify-self:start}
}

/* yorliq — sayt boʻylab bitta shakl (tizim.css §1 bilan bir xil til) */
.g5-yorliq{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;line-height:1;font-weight:600;
  letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:var(--slate);
}
.g5-yorliq::before{
  content:"";width:6px;height:6px;background:var(--aksent);
  border-radius:2px;flex:none;
}
.g5--navy .g5-yorliq,.g5--tun .g5-yorliq{color:rgba(255,255,255,.66)}
.g5--navy .g5-yorliq::before,.g5--tun .g5-yorliq::before{background:#8FC4EE}

/* ==========================================================================
   §5 · RASM TIZIMI — «large visual elements should dominate»
   Rasm slotdan (punktir) haqiqiy kadrga qaytdi. Barcha rasm shu primitivlar
   orqali chiqadi: bitta radius shkalasi, soyasiz, bitta ochilish harakati.
   ========================================================================== */
.g5-kadr{
  position:relative;display:block;overflow:hidden;margin:0;
  border-radius:var(--r-media);background:var(--g5-canvas);
  isolation:isolate;
}
.g5-kadr > img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform 600ms var(--ease);
}
.g5-kadr--21x9{aspect-ratio:21/9}
.g5-kadr--16x9{aspect-ratio:16/9}
.g5-kadr--16x10{aspect-ratio:16/10}
.g5-kadr--3x2{aspect-ratio:3/2}
.g5-kadr--4x3{aspect-ratio:4/3}
.g5-kadr--1x1{aspect-ratio:1/1}
.g5-kadr--4x5{aspect-ratio:4/5}
/* mahsulot renderi — oq fon, kesilmaydi */
.g5-kadr--oq{background:var(--g5-oq)}
.g5-kadr--oq > img{object-fit:contain}
.g5-kadr--canvas{background:var(--g5-canvas)}
.g5-kadr--canvas > img{object-fit:contain}
/* RASM HALI YOʻQ (13.09) — kadr boʻsh joy sifatida koʻrinib tursin va
   flex/grid ichida yigʻilib ketmasin. Rasm <img> boʻlib qoʻyilganda bu
   qoidalar avtomatik oʻchadi. */
.g5-kadr:not(:has(img)):not(.g5-kadr--parda){background:var(--g5-canvas)}
.g5-kadr:not(:has(img)){width:100%;align-self:stretch}
/* Kadr ustida matn turganda kadrning OʻZI quyuq boʻladi: rasm yuklanmasa ham
   oq yozuv oʻqiladi (va kontrast tekshiruvi rost qiymat koʻradi). */
.g5-kadr--parda{background:var(--g5-navy)}
/* quyuq kadr ustidagi matn uchun past parda */
.g5-kadr--parda::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,14,32,.74) 0%,rgba(0,14,32,.24) 46%,rgba(0,14,32,0) 78%);
}
a:hover > .g5-kadr > img,.g5-qator:hover .g5-kadr > img{transform:scale(1.035)}

/* toʻliq kenglikdagi kadr — boʻlim ichidan chetga chiqadi */
.g5-bleed{
  width:100vw;max-width:100vw;margin-left:50%;transform:translateX(-50%);
  border-radius:0;
}

/* kadr ustidagi yozuv (soha/yoʻnalish kartasi) */
.g5-kadr__yoz{
  position:absolute;left:20px;right:20px;bottom:18px;z-index:2;
  color:#fff;font-size:var(--h3);line-height:1.14;font-weight:700;
  letter-spacing:var(--tracking-zich);
}

/* ==========================================================================
   §6 · EDITORIAL PRIMITIVLAR — karta emas, chiziq va tipografika
   ========================================================================== */

/* 6.1 · dalil qatori (KEY PROOF) — 3–4 fakt, uzun izohsiz */
.g5-dalil{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--g5-chiziq);
}
.g5-dalil > li{
  list-style:none;padding:var(--s8) var(--s8) var(--s8) 0;
  border-right:1px solid var(--g5-chiziq-ich);
}
.g5-dalil > li:last-child{border-right:0}
.g5-dalil > li + li{padding-left:var(--s8)}
.g5-dalil__q{
  display:block;font-size:clamp(26px,2.6vw,38px);line-height:1.05;
  font-weight:700;letter-spacing:var(--tracking-zich);color:var(--navy);
  font-variant-numeric:tabular-nums;
}
.g5-dalil__n{display:block;margin-top:10px;font-size:var(--kichik);line-height:1.45;color:var(--slate);max-width:24ch}
.g5--navy .g5-dalil,.g5--tun .g5-dalil{border-color:var(--g5-chiziq-quyuq)}
.g5--navy .g5-dalil > li,.g5--tun .g5-dalil > li{border-color:var(--g5-chiziq-quyuq)}
.g5--navy .g5-dalil__q,.g5--tun .g5-dalil__q{color:#fff}
.g5--navy .g5-dalil__n,.g5--tun .g5-dalil__n{color:rgba(255,255,255,.72)}
@media (max-width:900px){
  .g5-dalil{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g5-dalil > li{border-bottom:1px solid var(--g5-chiziq-ich)}
  .g5-dalil > li:nth-child(2n){border-right:0}
  .g5-dalil > li:nth-child(2n+1){padding-left:0}
  .g5-dalil > li:nth-child(2n){padding-left:var(--s6)}
}
@media (max-width:520px){
  .g5-dalil{grid-template-columns:minmax(0,1fr)}
  .g5-dalil > li{border-right:0;padding-left:0 !important}
}

/* 6.2 · vizual toʻr (yoʻnalish · soha) — rasm + nom + bitta qator */
.g5-tor{display:grid;gap:var(--s6);grid-template-columns:repeat(3,minmax(0,1fr))}
.g5-tor--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g5-tor--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5-tor > li{list-style:none}
.g5-plit{display:grid;row-gap:16px;color:inherit;text-decoration:none}
.g5-plit h3{
  margin:0;font-size:var(--h3);line-height:1.16;font-weight:700;
  letter-spacing:var(--tracking-zich);color:var(--navy);
}
.g5-plit p{margin:0;font-size:var(--kichik);line-height:1.5;color:var(--slate);max-width:var(--g5-olcham-tor)}
.g5-plit__ha{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:var(--aksent-mayda);
}
.g5-plit__ha .ik{width:14px;height:14px;transition:transform var(--anim) var(--ease)}
.g5-plit:hover .g5-plit__ha .ik{transform:translateX(4px)}
.g5-plit__mat{display:grid;row-gap:10px}
@media (max-width:1024px){.g5-tor,.g5-tor--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g5-tor,.g5-tor--2,.g5-tor--4{grid-template-columns:minmax(0,1fr)}}

/* 6.3 · editorial qator registri — kartasiz, faqat chiziq */
.g5-reg{display:grid;border-top:1px solid var(--g5-chiziq)}
.g5-reg > li{list-style:none;border-bottom:1px solid var(--g5-chiziq-ich)}
.g5-qator{
  display:grid;grid-template-columns:44px minmax(0,1fr);
  align-items:start;column-gap:var(--s6);
  padding-block:var(--s6);color:inherit;text-decoration:none;
}
.g5-qator__n{
  font-size:13px;font-weight:600;color:var(--slate);
  font-variant-numeric:tabular-nums;padding-top:4px;
}

/* 6.4 · foyda toʻri (WHY) — ikonka yoʻq, raqam yoʻq, faqat tipografika */
.g5-foyda{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  border-top:1px solid var(--g5-chiziq)}
.g5-foyda > li{
  list-style:none;padding:var(--s8) var(--s8) 0 0;
  border-right:1px solid var(--g5-chiziq-ich);
}
.g5-foyda > li + li{padding-left:var(--s8)}
.g5-foyda > li:last-child{border-right:0}
.g5-foyda h3{margin:0 0 12px;font-size:var(--h4);line-height:1.25;font-weight:700;color:var(--navy)}
.g5-foyda p{margin:0;font-size:var(--kichik);line-height:1.5;color:var(--slate);max-width:26ch}
@media (max-width:900px){
  .g5-foyda{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g5-foyda > li{border-bottom:1px solid var(--g5-chiziq-ich);padding-bottom:var(--s6)}
  .g5-foyda > li:nth-child(2n){border-right:0}
  .g5-foyda > li:nth-child(2n+1){padding-left:0}
}
@media (max-width:560px){
  .g5-foyda{grid-template-columns:minmax(0,1fr)}
  .g5-foyda > li{border-right:0;padding-left:0 !important}
}

/* 6.5 · split — rasm + matn (arxetip almashuvi uchun) */
.g5-split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  column-gap:clamp(32px,5vw,88px);align-items:start}
.g5-split--5-7{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.g5-split--7-5{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.g5-split--teskari > :first-child{order:2}
@media (max-width:900px){
  .g5-split,.g5-split--5-7,.g5-split--7-5{grid-template-columns:minmax(0,1fr);row-gap:var(--s10)}
  .g5-split--teskari > :first-child{order:0}
}

/* 6.6 · uch qadam relsi */
.g5-qadam{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:var(--s10);border-top:1px solid var(--g5-chiziq);padding-top:var(--s6)}
.g5-qadam > li{list-style:none;position:relative;padding-right:var(--s8)}
.g5-qadam__n{
  display:block;font-size:clamp(30px,3.2vw,44px);line-height:1;font-weight:700;
  letter-spacing:var(--tracking-zich);color:var(--aksent-mayda);
  font-variant-numeric:tabular-nums;
}
.g5-qadam h3{margin:16px 0 8px;font-size:var(--h4);font-weight:700;color:var(--navy)}
.g5-qadam p{margin:0;font-size:var(--kichik);line-height:1.5;color:var(--slate);max-width:28ch}
.g5--navy .g5-qadam{border-color:var(--g5-chiziq-quyuq)}
.g5--navy .g5-qadam h3{color:#fff}
.g5--navy .g5-qadam__n{color:#8FC4EE}
@media (max-width:760px){
  .g5-qadam{grid-template-columns:minmax(0,1fr);row-gap:var(--s8)}
}

/* 6.7 · akkordeon — ramkasiz, soyasiz (ilgʻor tafsilot shu yerga yashiriladi) */
.g5-akk{display:grid;border-top:1px solid var(--g5-chiziq)}
.g5-akk > details{border-bottom:1px solid var(--g5-chiziq-ich)}
.g5-akk > details > summary{
  display:grid;grid-template-columns:minmax(0,1fr) 20px;align-items:start;
  column-gap:var(--s6);padding-block:var(--s5);cursor:pointer;list-style:none;
  font-size:var(--h4);line-height:1.3;font-weight:600;color:var(--navy);
}
.g5-akk > details > summary::-webkit-details-marker{display:none}
.g5-akk > details > summary::after{
  content:"";width:14px;height:14px;margin-top:5px;justify-self:end;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform var(--anim) var(--ease);
}
.g5-akk > details[open] > summary::after{transform:rotate(45deg)}
.g5-akk__ich{padding:0 0 var(--s6);max-width:var(--g5-olcham-tana)}
.g5-akk__ich > p{margin:0}
.g5-akk__ich > p + p{margin-top:var(--s4)}
.g5--navy .g5-akk{border-color:var(--g5-chiziq-quyuq)}
.g5--navy .g5-akk > details{border-color:var(--g5-chiziq-quyuq)}
.g5--navy .g5-akk > details > summary{color:#fff}

/* 6.8 · yakuniy CTA — katta, rasmli, bitta jumla */
.g5-cta{position:relative;isolation:isolate;overflow:hidden}
.g5-cta__fon{position:absolute;inset:0;z-index:-2}
.g5-cta__fon img{width:100%;height:100%;object-fit:cover}
.g5-cta__parda{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(0,19,40,.94) 0%,rgba(0,19,40,.80) 46%,rgba(0,19,40,.42) 100%);
}
.g5-cta h2{font-size:var(--g5-h-a);line-height:1.04;letter-spacing:var(--tracking-zich);
  font-weight:700;margin:0;max-width:17ch;color:#fff}
.g5-cta .g5-lid{margin-top:var(--s5);color:rgba(255,255,255,.84)}
.g5-cta__amal{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s10)}

/* 6.9 · texnik eslatma / disclaimer — ikkilamchi, lekin yoʻqolmaydi */
.g5-eslatma{
  border-left:2px solid var(--aksent);padding:2px 0 2px var(--s5);
  font-size:var(--kichik);line-height:1.55;color:var(--slate);
  max-width:var(--g5-olcham-tana);
}
.g5--navy .g5-eslatma,.g5--tun .g5-eslatma{border-color:#8FC4EE;color:rgba(255,255,255,.74)}

/* 6.10 · oʻlchov jadvali — ixcham texnik registr */
.g5-jad{width:100%;border-collapse:collapse;font-size:var(--kichik)}
.g5-jad th,.g5-jad td{
  text-align:left;vertical-align:top;padding:14px 20px 14px 0;
  border-bottom:1px solid var(--g5-chiziq-ich);
}
.g5-jad thead th{
  font-size:12px;letter-spacing:var(--tracking-caps);text-transform:uppercase;
  font-weight:600;color:var(--slate);border-bottom-color:var(--g5-chiziq);
}
.g5-jad tbody th{font-weight:600;color:var(--navy);width:34%}
.g5-jad td{color:var(--slate)}

/* ==========================================================================
   §7 · HERO — rasm hukmron, matn ixcham
   `.hs` tizimi (tizim.css §4) saqlanadi; g5 faqat kadr va pardani kuchaytiradi.
   ========================================================================== */
.hs:has(.hs__kadr img) .hs__parda{
  background:
    /* 1 · chapdan oʻngga: sarlavha ustuni uchun */
    linear-gradient(90deg,rgba(0,17,36,.92) 0%,rgba(0,17,36,.74) 38%,rgba(0,17,36,.30) 68%,rgba(0,17,36,.16) 100%),
    /* 2 · pastdan: band qirrasini yopadi */
    linear-gradient(to top,rgba(0,17,36,.62) 0%,rgba(0,17,36,0) 46%),
    /* 3 · TEPADAN: shaffof header (logotip + nav) kadrning yorugʻ joyiga
           tushganda oʻqilishi kerak — oʻlchangan muammo: kamera vali
           ustidagi nav 2,9:1 da edi. */
    linear-gradient(to bottom,rgba(0,17,36,.62) 0%,rgba(0,17,36,.30) 46%,rgba(0,17,36,0) 100%) top/100% var(--sarlavha-h,112px) no-repeat;
}
.hs__kadr img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){
  .hs:has(.hs__kadr img) .hs__parda{
    background:linear-gradient(to top,rgba(0,17,36,.94) 0%,rgba(0,17,36,.76) 42%,rgba(0,17,36,.42) 100%);
  }
}

/* ==========================================================================
   §8 · SOYA YOʻQ · HARAKAT NOZIK
   ========================================================================== */
.g5-b *,.g5-b{box-shadow:none !important}
@media (prefers-reduced-motion:reduce){
  .g5-kadr > img{transition:none}
}

/* ==========================================================================
   §9 · HEADER — soddalashtirilgan navigatsiya (brif: «Keep navigation clean»)
   Uchinchi mega-ustun («Tez oʻtish») asosiy navigatsiyani takrorlardi va
   ostidagi izoh tanlagich nima qilishini aytardi — ikkalasi ham olib tashlandi.
   Oʻrniga mahsulot portreti: referens (liqui-moly) menyuda rasmni KONTENT
   sifatida ishlatadi, bezak sifatida emas.
   ========================================================================== */
.mega__ich{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 210px !important;
  column-gap:var(--s10) !important;align-items:start;align-content:start}
.mega__kadr{
  display:grid;row-gap:12px;align-content:start;
  color:var(--navy);text-decoration:none;
}
.mega__kadr img{
  /* ⚠ grid katagida `aspect-ratio` cho'zilib panelni 800 px ga ko'tarardi —
     balandlik aniq beriladi. */
  display:block;width:100%;height:150px;object-fit:contain;
  background:none;border-radius:var(--r-tekis);
  transition:transform 420ms var(--ease);
}
.mega__kadr span{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:var(--aksent-mayda);
}
.mega__kadr span::after{content:"→";font-size:14px;transition:transform var(--anim) var(--ease)}
.mega__kadr:hover img{transform:scale(1.03)}
.mega__kadr:hover span::after{transform:translateX(4px)}
@media (max-width:1200px){
  .mega__ich{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important}
  .mega__kadr{display:none}
}

/* ==========================================================================
   §10 · QUYUQ SIRTDAGI KONTROLLAR
   `tizim.css` `.bolim--quyuq` va `.hs` ni biladi; `.g5--tun` / `.g5--navy`
   yangi klasslar — chegarali tugma, havola va yorliq ular ustida ham
   toʻgʻri oʻqilishi kerak (aks holda ikkilamchi CTA koʻrinmay qoladi).
   ========================================================================== */
.g5--tun .btn--chegara,.g5--navy .btn--chegara{
  border-color:rgba(255,255,255,.46);color:#fff;background:none;
}
.g5--tun .btn--chegara:hover,.g5--navy .btn--chegara:hover{
  background:#fff;border-color:#fff;color:var(--navy);
}
.g5--tun .ha,.g5--navy .ha{color:#8FC4EE}
/* Fokus halqasi: `komponent.css` faqat `.bolim--quyuq`/`.futer`/`.header` ni biladi —
   yangi quyuq klasslarda ham oq boʻlishi kerak (aks holda navy ustida navy halqa). */
.g5--tun :focus-visible,.g5--navy :focus-visible{outline-color:#fff}
.g5--tun .ha:hover,.g5--navy .ha:hover{color:#fff}
.g5--tun .g5-eslatma,.g5--navy .g5-eslatma{color:rgba(255,255,255,.78)}

/* Yakuniy CTA quyuq footer bilan qoʻshilib ketmasligi uchun: CTA ning oʻzi
   fotoli va CHUQURROQ, footer esa tekis navy — orada nozik qirra chizigʻi. */
.g5-cta + .tasma,.g5-cta + .futer,
main:has(.g5-cta:last-child) + .tasma,
main:has(.g5-cta:last-child) + .futer{border-top:1px solid rgba(255,255,255,.16)}

/* ==========================================================================
   §11 · ISHLAB CHIQARISH DARVOZASI — yangi blok kodlari uchun
   `css/darvoza.css` tokenlarni FAQAT `[data-blok^="BOSH-"]`, header va footer
   ichida yashiradi (ataylab: har sahifa oʻz qarorini beradi). 5-brifda bloklar
   yangi prefikslar bilan keladi (G- K- T- S- B- A- M-), shuning uchun darvoza
   shu yerda takrorlanadi — aks holda jonli saytda «MIJOZDAN: …» koʻrinib qoladi
   (oʻlchandi: bosh sahifada 2 ta).
   Hammasini koʻrish: <body data-holat="qoralama">.
   ========================================================================== */
body:not([data-holat="qoralama"]) [data-blok^="G-"] .mijozdan,
body:not([data-holat="qoralama"]) [data-blok^="K-"] .mijozdan,
body:not([data-holat="qoralama"]) [data-blok^="T-"] .mijozdan,
body:not([data-holat="qoralama"]) [data-blok^="S-"] .mijozdan,
body:not([data-holat="qoralama"]) [data-blok^="B-"] .mijozdan,
body:not([data-holat="qoralama"]) [data-blok^="A-"] .mijozdan,
body:not([data-holat="qoralama"]) [data-blok^="M-"] .mijozdan{display:none}

/* Qiymati FAQAT tokendan iborat qator butunlay yashiriladi — jumla sinmasin.
   Markupda shunday qatorga `.g5-kut` klassi qoʻyiladi. */
body:not([data-holat="qoralama"]) .g5-kut{display:none}

/* ==========================================================================
   §H · YAGONA YON MASOFA — HAMMA BLOK, HAMMA SAHIFA (Otabek 13.09 kech)
   «ikki chetdagi masofani 100 desak 60 ga tushir» → «hamma blokda bir xil
   boʻlsin, hamma sahifada bir xil boʻlsin». Bosh sahifaning eski cheti
   (1280 + 36 → 1440 da 116 px) ning 60 % i: (100vw − 1280) × 0.3 + 21.6.
   1440 → 70 px · 1728 → 156 · 1920 → 214 · 1280 → 22 · mobil → 16.
   `asos.css` `.ich{width:var(--sahifa);padding-inline:var(--chet)}` shu
   tokenlarni oʻqiydi — header · footer · har boʻlim bitta oʻqda.
   Ortga qaytarish: shu §H ni oʻchirish (+ g5-index.css dagi var(--chet) lar).
   ========================================================================== */
:root {
  --chet: max(16px, min(2.1vw, 21.6px), calc((100vw - 1280px) * 0.3 + min(2.1vw, 21.6px)));
  --sahifa: 100%;
  --hero-chet: var(--chet);
}
.ich { width: 100% !important; max-width: none !important; margin-inline: auto !important; padding-inline: var(--chet) !important; }