/* ==========================================================================
GRAUMANN · YAGONA DIZAYN TIZIMI · tizim.css (2026-09-12, kechqurun)
--------------------------------------------------------------------------
Otabekning brifi: «REDESIGN THE ENTIRE WEBSITE AS ONE PREMIUM BRAND
EXPERIENCE» — muammo kontent emas, sahifalar orasidagi VIZUAL UZILISH:
har sahifada boshqa hero, boshqa yorliq, boshqa ritm, boshqa karta tili.
Bu fayl BARCHA sahifalarda ENG OXIRIDA yuklanadi (qur.py → tizim) va
sahifa fayllarining qoidalarini bosadi. Eski fayllarga tegilmagan —
ortga qaytarish: qur.py dagi «tizim» ni olib tashlash.
Bosh sahifa heroi — MASTER REFERENS. Undan olingan til:
· toʻliq kenglikdagi kinematik kadr + brend siyohi pardasi
· header kadr ustida shaffof, skrolldan keyin oq
· yorliq → H1 (bitta aksent ibora) → lid → CTA juftligi → uch fakt relsi
Boshqa 6 sahifaning heroi shu tizimning VARIANTI: bir xil tipografika,
bir xil oraliq, bir xil CTA tili; faqat kadr, balandlik va mavzu boshqa.
Boʻlimlar: §0 tokenlar · §1 tipografika · §2 yorliq · §3 tugma · §4 hero
tizimi · §5 header · §6 boʻlim ritmi · §7 sirt va oʻtishlar · §8 karta/plita
tili · §9 forma · §10 rasm tili · §11 futer + tasma · §12 sahifa tuzatishlari
· §13 harakat · §14 responsiv.
Qonun (graumann skilli): soya 0 · tracking ≤ 0 · yuqoriga tekislash ·
radius oʻrtacha · matn VERBATIM · quyuq band ≤ 2 · aksent faqat belgi.
========================================================================== */
/* ==========================================================================
§0 · TOKENLAR — butun saytga bitta shkala
========================================================================== */
:root{
/* --- tipografika shkalasi (desktop 1440) --- */
/* 3-brif (12.09 kech): «premium ≠ giant whitespace» — shkala ixchamlashtirildi */
--tz-h1-bosh:clamp(34px,3.9vw,56px); /* bosh sahifa heroi */
--tz-h1:clamp(30px,3.1vw,44px); /* ichki sahifa heroi */
--tz-h2-a:clamp(27px,2.8vw,40px); /* bob ochuvchi */
--tz-h2-b:clamp(23px,2.3vw,32px); /* asosiy boʻlim */
--tz-h2-c:clamp(20px,1.8vw,26px); /* bogʻlovchi */
--tz-h3:clamp(17px,1.4vw,20px);
--tz-lid:clamp(16px,1.2vw,17px);
--tz-raqam:clamp(44px,5.4vw,80px);
/* --- boʻlim ritmi: uch pogʻona (ikki qoʻshnining yigʻindisi 64–160 px) --- */
--tz-pad-a:clamp(52px,5.4vw,80px);
--tz-pad-b:clamp(40px,4.2vw,60px);
--tz-pad-c:clamp(28px,3vw,40px);
/* --- radius: bir xil, oʻrtacha (chamfer yoʻq — Otabek 12.09) --- */
--r-nishon:6px;
--r-kontrol:8px;
--r-karta:12px;
--r-konteyner:14px;
--r-media:12px;
--r-tekis:8px;
--bento-r:12px;
--k2-r-karta:12px;--k2-r-media:12px;--k2-r-kontrol:8px;
--q-kadr-r:12px;
--ih-kadr-radius:12px;
/* --- sirt --- */
--canvas:#F2F6FB;
--t2-canvas:#F2F6FB;
/* --- hero --- */
--tz-hero-ust:clamp(120px,14vh,152px); /* header ostidan matngacha */
}
/* ==========================================================================
§1 · TIPOGRAFIKA — pogʻonalar butun saytda bitta
========================================================================== */
main h2{letter-spacing:var(--tracking-zich);line-height:1.06}
main h3{font-size:var(--tz-h3);line-height:1.3;letter-spacing:var(--tracking)}
main .lid{font-size:var(--tz-lid);line-height:1.55}
/* Bob ochuvchi (A) */
main [data-blok="BOSH-03"][data-blok] h2,main [data-blok="BOSH-05"][data-blok] h2,
main [data-blok="BOSH-07"][data-blok] h2,main [data-blok="BOSH-11"][data-blok] h2,
main [data-blok="KAT-09"][data-blok] h2,main .k2-cta h2,
main [data-blok="MAH-TAB"][data-blok] h2,main [data-blok="MAH-04"][data-blok] h2,
main [data-blok="TAN-05"][data-blok] h2,main [data-blok="TAN-07"][data-blok] h2,
main [data-blok="SOH-02b"][data-blok] h2,main [data-blok="SOH-05"][data-blok] h2,
main [data-blok="BRD-03"][data-blok] h2,main [data-blok="BRD-P"][data-blok] h2,main [data-blok="BRD-09"][data-blok] h2,
main [data-blok="ALQ-05"][data-blok] h2,main [data-blok="ALQ-03"][data-blok] h2,main [data-blok="ALQ-10"][data-blok] h2{
font-size:var(--tz-h2-a)!important;line-height:1.04;max-width:14em;
}
/* Asosiy (B) — sukut */
main [data-blok] h2{font-size:var(--tz-h2-b)}
main [data-blok="BOSH-04"][data-blok] h2,main [data-blok="BOSH-08"][data-blok] h2,
main [data-blok="BOSH-09"][data-blok] h2,main [data-blok="BOSH-10"][data-blok] h2,
main [data-blok="BOSH-13"][data-blok] h2,
main [data-blok="KAT-03"][data-blok] h2,main [data-blok="KAT-08"][data-blok] h2,
main [data-blok="MAH-02"][data-blok] h2,main [data-blok="MAH-03"][data-blok] h2,main [data-blok="MAH-05"][data-blok] h2,
main [data-blok="MAH-08"][data-blok] h2,main [data-blok="MAH-09"][data-blok] h2,main [data-blok="MAH-10"][data-blok] h2,main [data-blok="MAH-11"][data-blok] h2,
main [data-blok="TAN-03"][data-blok] h2,main [data-blok="TAN-06"][data-blok] h2,main [data-blok="TAN-08"][data-blok] h2,
main [data-blok="TAN-10"][data-blok] h2,main [data-blok="TAN-11"][data-blok] h2,
main [data-blok^="SOH-03"][data-blok] h2,main [data-blok="SOH-07"][data-blok] h2,main [data-blok="SOH-08"][data-blok] h2,
main [data-blok="SOH-06"][data-blok] h2,main [data-blok="SOH-09"][data-blok] h2,main [data-blok="SOH-10"][data-blok] h2,
main [data-blok="BRD-04"][data-blok] h2,main [data-blok="BRD-05"][data-blok] h2,main [data-blok="BRD-06"][data-blok] h2,
main [data-blok="BRD-02"][data-blok] h2,main [data-blok="BRD-T"][data-blok] h2,main [data-blok="BRD-Q"][data-blok] h2,main [data-blok="BRD-10"][data-blok] h2,
main [data-blok="ALQ-02"][data-blok] h2,main [data-blok="ALQ-04"][data-blok] h2,main [data-blok="ALQ-06"][data-blok] h2,
main [data-blok="ALQ-07"][data-blok] h2,main [data-blok="ALQ-08"][data-blok] h2{
font-size:var(--tz-h2-b)!important;line-height:1.08;max-width:16em;
}
/* Bogʻlovchi (C) */
main [data-blok="BOSH-02"][data-blok] h2,main [data-blok="BOSH-06"][data-blok] h2,main [data-blok="BOSH-12"][data-blok] h2,
main [data-blok="TAN-04"][data-blok] h2,main [data-blok="TAN-09"][data-blok] h2,
main [data-blok="BRD-08"][data-blok] h2,main [data-blok="ALQ-R"][data-blok] h2,main [data-blok="ALQ-09"][data-blok] h2{
font-size:var(--tz-h2-c)!important;line-height:1.12;max-width:18em;
}
/* Tipografik bayonotlar — tizimdan tashqari, ataylab katta */
main .b3f__bayonot{font-size:clamp(34px,4.8vw,68px)!important;line-height:1;max-width:none}
main .b3cta__bayonot{font-size:clamp(28px,3.6vw,52px)!important;line-height:1.02;max-width:14em}
main .a3-bayonot{font-size:clamp(23px,2.3vw,32px)!important;line-height:1.22;max-width:26em}
main .k2-cta h2{max-width:14em}
/* Katta raqamlar — bitta «oʻlchov ovozi» */
main .bp__raqam,main .raqam__k{font-size:var(--tz-raqam);letter-spacing:-.045em;line-height:.95}
main .b08v2__raqam{font-size:clamp(34px,3.6vw,52px)}
/* ==========================================================================
§2 · YORLIQ (eyebrow) — butun saytda BITTA shakl
6 px aksent kvadrat + 12 px CAPS. Quti yoʻq, «// //» yoʻq, pill yoʻq.
Raqamli variant: «01 —— MATN» (raqam aksentda, 22 px chiziqcha, matn).
========================================================================== */
.yorliq,.yorliq--mono,.t2-yoz,.a3-raqam,.bp__yorliq,.k2-y,
.q-hero__yorliq,.hs__yorliq{
display:inline-flex;align-items:center;gap:10px;
padding:0;background:none;border:0;border-radius:0;
font-size:12px;line-height:1.3;font-weight:600;
letter-spacing:var(--tracking-caps);text-transform:uppercase;
color:var(--navy);width:auto;
}
.yorliq::before,.t2-yoz::before{
content:"";width:6px;height:6px;background:var(--aksent);flex:none;
color:inherit;letter-spacing:0;font-size:inherit;
}
.yorliq--mono::before,.yorliq--mono::after{content:none}
.yorliq--mono::before{content:"";width:6px;height:6px;background:var(--aksent)}
/* raqamli yorliqlar: raqam · chiziqcha · matn */
.yorliq.k2-raqam::before,.t2-yoz--raqam::before,.a3-raqam::before{
content:attr(data-raqam);width:auto;height:auto;background:none;
font-size:12px;font-weight:700;color:var(--aksent-mayda);
letter-spacing:.02em;font-variant-numeric:tabular-nums;order:0;margin:0;
}
.yorliq.k2-raqam::after,.t2-yoz--raqam::after,.a3-raqam::after{
content:"";width:22px;height:1px;background:var(--chiziq);flex:none;order:0;
margin:0;
}
.t2-yoz--raqam{gap:10px}
.a3-raqam{display:inline-flex;grid-template-columns:none;margin-bottom:clamp(24px,2.6vw,36px)}
/* brend sahifasidagi «01 | BREND FALSAFASI» — chiziqcha bilan bir xil ovoz */
[data-blok^="BRD"] .b3n{
color:var(--aksent-mayda);font-weight:700;letter-spacing:.02em;
margin-right:0;padding-right:10px;border-right:0;position:relative;
font-variant-numeric:tabular-nums;
}
[data-blok^="BRD"] .b3n::after{
content:"";display:inline-block;width:22px;height:1px;background:var(--chiziq);
vertical-align:middle;margin-left:10px;
}
.yorliq:has(.b3n)::before{content:none}
/* quyuq sirtda */
.bolim--quyuq .yorliq,.bolim--quyuq .t2-yoz,.bolim--quyuq .a3-raqam,
.hero .yorliq,.hs .yorliq,.t2-hero .t2-yoz,.b3cta .yorliq,.bp--navy .bp__yorliq,
.bolim--quyuq .yorliq--mono,.bolim--quyuq .bp__yorliq{
color:rgba(255,255,255,.88);background:none;border:0;
}
.bolim--quyuq .yorliq.k2-raqam::before,.bolim--quyuq .t2-yoz--raqam::before,
.bolim--quyuq .a3-raqam::before{color:#8FC4EE}
.bolim--quyuq .yorliq.k2-raqam::after,.bolim--quyuq .t2-yoz--raqam::after,
.bolim--quyuq .a3-raqam::after,.bolim--quyuq .b3n::after{background:rgba(255,255,255,.22)}
.bolim--quyuq .b3n{color:#8FC4EE}
/* nishon (pill) — faqat mahsulot holati uchun: kichik, boʻyalmagan */
.nishon{
background:none;border:1px solid var(--chiziq);color:var(--navy);
padding:4px 9px;border-radius:4px;font-size:11px;font-weight:600;
}
.bolim--quyuq .nishon{border-color:rgba(255,255,255,.3);color:#fff;background:none}
.b04__izoh{border:0;padding:0}
/* ==========================================================================
§3 · TUGMA VA HAVOLA — bitta oʻlcham, bitta radius, bitta til
========================================================================== */
.btn{min-height:52px;border-radius:var(--r-kontrol);font-size:14px;padding:5px 5px 5px 20px;gap:14px}
.btn__oq{width:42px;height:42px;border-radius:6px}
.btn--chegara{padding:5px 22px;border-color:rgba(1,36,76,.28)}
.btn--chegara:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.bolim--quyuq .btn--chegara,.hs .btn--chegara,.b3cta .btn--chegara{
color:#fff;border-color:rgba(255,255,255,.4)}
.bolim--quyuq .btn--chegara:hover,.hs .btn--chegara:hover{background:#fff;border-color:#fff;color:var(--navy)}
/* mahsulot sahifasidagi amber tugma — tizimdan tashqari rang, aksentga qaytariladi */
.btn--amber{background:var(--aksent)!important;color:#fff!important;border-color:transparent!important}
.btn--amber:hover{background:#55A8E6!important}
.btn--amber .btn__oq{background:#fff!important;color:var(--navy)!important}
.ha{font-size:14px}
/* asosiy tugma matni oq — Otabek qarori, oʻzgarmaydi (komponent.css) */
/* ==========================================================================
§4 · HERO TIZIMI · .hs
Bitta karkas, uch balandlik:
.hs--bosh bosh sahifa · min(92vh, 860px) ★★★★★
.hs--sahifa ichki sahifa · clamp(500, 64vh, 640) ★★★★
.hs--mahsulot mahsulot · clamp(300, 38vh, 400) ★★★
Kadr: toʻliq kenglik, object-fit cover; parda: brend siyohi, ikki yoʻnalish.
Matn pastki chapda, kadr ostida uch fakt relsi (hairline).
========================================================================== */
.hs{
position:relative;isolation:isolate;overflow:hidden;
display:flex;align-items:flex-end;
min-height:clamp(380px,52vh,480px);
padding:0!important;
background:var(--navy);color:#fff;border-top:0!important;
}
.hs--bosh{min-height:min(82vh,740px)}
.hs--mahsulot{min-height:clamp(220px,28vh,300px)}
.hs__kadr{position:absolute;inset:-26px 0;z-index:0;margin:0} /* parallaks uchun 26 px zaxira */
.hs__kadr img{
width:100%;height:100%;object-fit:cover;object-position:var(--hs-kadr-x,50%) var(--hs-kadr-y,50%);
display:block;
transform:scale(1.06);transition:transform 1400ms var(--ease);
will-change:transform;
}
.hs.yuklandi .hs__kadr img{transform:scale(1)}
/* parallaks — JS `--py` beradi (0…1), kadr 6% gacha siljiydi */
.hs__kadr{transform:translate3d(0,calc(var(--py,0) * 44px),0)}
.hs__parda{
position:absolute;inset:0;z-index:1;pointer-events:none;
background:
linear-gradient(to top, rgba(1,20,42,.90) 0%, rgba(1,20,42,.62) 34%, rgba(1,20,42,.18) 66%, rgba(1,20,42,.06) 100%),
linear-gradient(to right, rgba(1,20,42,.74) 0%, rgba(1,20,42,.34) 58%, rgba(1,20,42,0) 86%);
}
/* nozik ustun toʻri olib tashlangan */
.hs::after{
display:none;
}
/* kadrsiz holat — toza navy sirt */
.hs:not(:has(.hs__kadr img)) .hs__parda{
background:
linear-gradient(to top, rgba(0,14,32,.55) 0%, rgba(0,14,32,.28) 34%, rgba(0,14,32,0) 72%);
}
.hs__ich{
position:relative;z-index:2;width:var(--sahifa);
padding-top:var(--tz-hero-ust);
padding-bottom:clamp(22px,2.4vw,32px);
}
.hs--mahsulot .hs__ich{padding-top:clamp(112px,13vh,136px);padding-bottom:clamp(20px,2.2vw,28px)}
/* krosh — ichki sahifalarda, matn ustida */
.hs__krosh{
display:flex;flex-wrap:wrap;align-items:center;gap:10px;
margin-bottom:clamp(22px,2.6vw,36px);
font-size:13px;line-height:1.4;letter-spacing:var(--tracking);
color:rgba(255,255,255,.62);
}
.hs__krosh a{color:rgba(255,255,255,.62);border-bottom:1px solid transparent;transition:color var(--tez) var(--ease)}
.hs__krosh a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.34)}
.hs__krosh [aria-current]{color:#fff}
.hs__aj{color:rgba(255,255,255,.3)}
/* matn ustuni */
.hs__matn{display:grid;gap:clamp(12px,1.4vw,18px);align-content:start;justify-items:start;max-width:min(720px,64%)}
.hs__matn .yorliq{color:#fff}
.hs h1{
color:#fff;font-size:var(--tz-h1);line-height:1.04;letter-spacing:var(--tracking-zich);
max-width:14em;text-wrap:balance;
}
.hs--bosh h1{font-size:var(--tz-h1-bosh);max-width:13em}
.hs__matn .lid{color:rgba(255,255,255,.84);max-width:32em;font-size:var(--tz-lid)}
.hs__matn .mayda,.hs__yoriq{color:rgba(255,255,255,.66);max-width:34em;font-size:14px;line-height:1.55;margin:0}
.hs__amal{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(12px,1.4vw,20px);margin-top:4px}
.hs__amal .ha{color:#fff;border-bottom-color:transparent}
.hs__amal .ha:hover{color:#fff;border-bottom-color:rgba(255,255,255,.4)}
.hs__amal .ha .ik{color:var(--aksent)}
/* uch fakt relsi — kadrning pastki cheti */
.hs__meta{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);
margin-top:clamp(22px,2.6vw,36px);padding-top:var(--s4);
border-top:1px solid rgba(255,255,255,.22);
}
.hs__meta li{
display:flex;align-items:center;gap:10px;
font-size:12px;line-height:1.4;font-weight:600;
letter-spacing:var(--tracking-caps);text-transform:uppercase;color:#fff;
}
.hs__meta li::before{content:"";width:6px;height:6px;background:var(--aksent);flex:none}
.hs__meta li:nth-child(2){justify-content:center}
.hs__meta li:nth-child(3){justify-content:flex-end}
/* mahsulot varianti: krosh + artikul plitasi */
.hs__ort{
display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;
font-size:14px;font-weight:600;color:#CFE0F2;border-bottom:1px solid transparent;
}
.hs__ort .ik{width:15px;height:15px;transform:rotate(180deg)}
.hs__ort:hover{color:#fff;border-bottom-color:rgba(255,255,255,.32)}
.hs__plita{
display:flex;flex-wrap:wrap;align-items:center;gap:12px;
margin-top:clamp(18px,2vw,26px);padding-top:clamp(12px,1.4vw,18px);
border-top:1px solid rgba(255,255,255,.2);
font-size:12px;line-height:1.4;letter-spacing:var(--tracking-caps);
text-transform:uppercase;color:rgba(255,255,255,.72);
}
.hs__plita b{color:#fff;font-weight:700}
.hs__plita .hs__aj{color:rgba(255,255,255,.3)}
/* ==========================================================================
§5 · HEADER — hamma sahifada bir xil: kadr ustida shaffof, skrolldan keyin oq
(hero.css dan koʻchirilgan; hero.css faqat 2 sahifada ulanadi)
========================================================================== */
body.hero-toliq .header{
position:absolute;top:0;left:0;right:0;
background:transparent;border-bottom-color:transparent;
}
body.hero-toliq .header__ust{background:transparent;border-bottom-color:rgba(255,255,255,.16)}
body.hero-toliq .header__ust,body.hero-toliq .header__ust a{color:rgba(255,255,255,.76)}
body.hero-toliq .header__ust a:hover,body.hero-toliq .til a[aria-current]{color:#fff}
body.hero-toliq .nav > a,body.hero-toliq .nav__band > a{color:#fff}
body.hero-toliq .nav > a:hover,body.hero-toliq .nav__band > a:hover{color:#8FC4EE}
body.hero-toliq .nav .ik{color:rgba(255,255,255,.7)}
body.hero-toliq .qidiruv{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.26);color:rgba(255,255,255,.8)}
body.hero-toliq .qidiruv:focus-within{background:rgba(255,255,255,.16);border-color:#fff}
body.hero-toliq .qidiruv input{color:#fff}
body.hero-toliq .qidiruv input::placeholder{color:rgba(255,255,255,.6)}
body.hero-toliq .burger{color:#fff;border-color:rgba(255,255,255,.3)}
body.hero-toliq .logo__quyuq{display:none}
body.hero-toliq .logo__oq{display:block}
/* header CTA — kadr ustida yashirin (heroning oʻz CTA si bor), oq holatda chiqadi.
Bosh sahifadagi Otabek qoidasi (11.09) shu bilan hamma sahifaga tarqaladi. */
body.hero-toliq .header__cta{display:none}
body.hero-toliq .header--qattiq .header__cta{display:inline-flex}
/* skrolldan keyin — oq header */
body.hero-toliq .header.header--qattiq{position:fixed;background:var(--oq);border-bottom-color:var(--chiziq)}
body.hero-toliq .header--qattiq .header__ust{background:var(--canvas);border-bottom-color:var(--chiziq-ichki)}
body.hero-toliq .header--qattiq .header__ust,body.hero-toliq .header--qattiq .header__ust a{color:var(--slate)}
body.hero-toliq .header--qattiq .header__ust a:hover,body.hero-toliq .header--qattiq .til a[aria-current]{color:var(--navy)}
body.hero-toliq .header--qattiq .nav > a,body.hero-toliq .header--qattiq .nav__band > a{color:var(--navy)}
body.hero-toliq .header--qattiq .nav > a:hover,body.hero-toliq .header--qattiq .nav__band > a:hover{color:var(--aksent-matn)}
body.hero-toliq .header--qattiq .nav .ik{color:var(--slate)}
body.hero-toliq .header--qattiq .qidiruv{background:var(--canvas);border-color:var(--chiziq);color:var(--slate)}
body.hero-toliq .header--qattiq .qidiruv input{color:var(--ink)}
body.hero-toliq .header--qattiq .qidiruv input::placeholder{color:#93A4B6}
body.hero-toliq .header--qattiq .burger{color:var(--navy);border-color:var(--chiziq)}
body.hero-toliq .header--qattiq .logo__quyuq{display:block}
body.hero-toliq .header--qattiq .logo__oq{display:none}
/* faol boʻlim chizigʻi kadr ustida oq */
body.hero-toliq .nav a[aria-current="page"]::after{background:#fff}
body.hero-toliq .header--qattiq .nav a[aria-current="page"]::after{background:var(--navy)}
/* header oʻlchami va tipografikasi */
.header__asos .ich{min-height:76px;gap:var(--s8)}
.nav{gap:clamp(18px,2vw,28px);font-size:14px}
.mega{border-radius:var(--r-konteyner)}
.header__cta{min-height:46px}
.header__cta .btn__oq{width:36px;height:36px}
.header__ust .ich{min-height:38px;font-size:12px}
/* ==========================================================================
§6 · BOʻLIM RITMI — uch pogʻona, hamma sahifada bitta shkala
A ochuvchi · B asosiy · C bogʻlovchi. Hero oʻz qoidasida.
Selektor ogʻirligi 0-2-1 — sahifa fayllaridagi 0-2-0 lardan ustun.
========================================================================== */
main [data-blok][data-blok]{padding-block:var(--tz-pad-b)}
/* A */
main [data-blok="BOSH-03"][data-blok],main [data-blok="BOSH-05"][data-blok],main [data-blok="BOSH-07"][data-blok],
main [data-blok="BOSH-11"][data-blok],main [data-blok="BOSH-13"][data-blok],
main [data-blok="KAT-04"][data-blok],main [data-blok="KAT-09"][data-blok],
main [data-blok="MAH-01"][data-blok],main [data-blok="MAH-TAB"][data-blok],main [data-blok="MAH-04"][data-blok],main [data-blok="MAH-11"][data-blok],
main [data-blok="TAN-02"][data-blok],main [data-blok="TAN-05"][data-blok],main [data-blok="TAN-07"][data-blok],main [data-blok="TAN-10"][data-blok],
main [data-blok="SOH-02b"][data-blok],main [data-blok="SOH-05"][data-blok],main [data-blok="SOH-10"][data-blok],
main [data-blok="BRD-F"][data-blok],main [data-blok="BRD-03"][data-blok],main [data-blok="BRD-P"][data-blok],main [data-blok="BRD-09"][data-blok],
main [data-blok="ALQ-02"][data-blok],main [data-blok="ALQ-05"][data-blok],main [data-blok="ALQ-03"][data-blok],main [data-blok="ALQ-10"][data-blok]{
padding-block:var(--tz-pad-a);
}
/* C */
main [data-blok="BOSH-02"][data-blok],main [data-blok="BOSH-06"][data-blok],main [data-blok="BOSH-12"][data-blok],
main [data-blok="KAT-02"][data-blok],
main [data-blok="MAH-07"][data-blok],
main [data-blok="TAN-04"][data-blok],main [data-blok="TAN-09"][data-blok],main [data-blok="TAN-11"][data-blok],
main [data-blok="SOH-02"][data-blok],main [data-blok="SOH-09b"][data-blok],
main [data-blok="BRD-D"][data-blok],main [data-blok="BRD-08"][data-blok],main [data-blok="BRD-Q"][data-blok],
main [data-blok="ALQ-R"][data-blok],main [data-blok="ALQ-09"][data-blok]{
padding-block:var(--tz-pad-c);
}
/* hero va oʻziga xos bloklar */
main [data-blok="BOSH-01"][data-blok],main [data-blok="KAT-01"][data-blok],main [data-blok="MAH-00"][data-blok],
main [data-blok="TAN-01"][data-blok],main [data-blok="SOH-01"][data-blok],main [data-blok="BRD-H"][data-blok],
main [data-blok="ALQ-01"][data-blok]{padding-block:0}
main [data-blok="TAN-03"][data-blok]{padding-block:0 var(--tz-pad-a)}
main [data-blok="TAN-03"][data-blok][hidden]{display:none}
main [data-blok="BRD-01X"][data-blok]{padding-block:0}
main [data-blok="KAT-05"][data-blok],main [data-blok="KAT-07"][data-blok],main [data-blok="KAT-06"][data-blok]{padding-block:0}
main [data-blok="MAH-00"][data-blok]{padding-block:0}
/* bosh sahifa BOSH-04 — bitta ekran talabi */
main [data-blok="BOSH-04"][data-blok]{padding-block:var(--tz-pad-b)}
/* boʻlim sarlavhasi ostidagi oraliq bitta */
main .bosh,main .bosh-qator{margin-bottom:clamp(22px,2.4vw,32px)}
main .bosh{gap:clamp(10px,1.2vw,14px)}
main .bosh .lid{max-width:36em}
/* ==========================================================================
§7 · SIRT VA OʻTISHLAR — sirt almashuvi + 1 px chiziq; quyuq band bir tilda
========================================================================== */
.bolim--yuza,.t2-bolim--canvas{background:var(--canvas)}
/* quyuq band: nozik ustun chiziqlari — bosh sahifa heroining kadrsiz naqshi.
Har quyuq band bitta tilda gapiradi. */
.bolim--quyuq:not(.hs){position:relative;isolation:isolate}
.bolim--quyuq:not(.hs)::before{
display:none;
}
.bolim--quyuq:not(.hs) > *{position:relative;z-index:1}
.bolim--quyuq.tor::after,.tor::after,.tor::before{content:none}
/* hero ostidagi birinchi boʻlimda chiziq boʻlmasin */
.hs + .bolim{border-top:0}
/* ==========================================================================
§8 · KARTA / PLITA TILI — «kartalar oʻrniga chiziq va tipografika»
Bento plitalar (bosh sahifa) → texnik kataklar: fon yoʻq, radius yoʻq,
tepasida 1 px chiziq, chapida raqam. Oq langar (550 °C, hamkorlik) qoladi —
u blokning yagona grafik gʻoyasi.
========================================================================== */
.bp{background:none;border:0;border-radius:0;padding:clamp(18px,1.8vw,24px) 0 0;
border-top:1px solid var(--chiziq)}
.bp--canvas{background:none;border-color:var(--chiziq)}
.bp--quyuq-ich,.b07v1 .bp--quyuq-ich{background:none;border:0;border-top:1px solid rgba(255,255,255,.18);border-radius:0;padding:clamp(18px,1.8vw,24px) 0 0}
.bp--navy{background:var(--navy);border:0;border-radius:var(--r-karta);padding:clamp(22px,2.2vw,32px)}
.bolim--quyuq .bp--oq{background:var(--oq);border:0;border-radius:var(--r-karta);padding:clamp(24px,2.4vw,36px)}
.bp--ochiq{border:0;padding:0}
.b05v2__eslatma{background:none;border:0;border-top:1px solid var(--chiziq);border-radius:0;padding:clamp(18px,1.8vw,24px) 0 0}
.b05v2__plita{background:none;border:0;border-top:1px solid var(--chiziq);border-radius:0;padding:clamp(18px,1.8vw,24px) 0 0}
.bento{gap:clamp(20px,2.4vw,36px) clamp(24px,3vw,48px)}
/* bosh sahifa xizmat/plita/registr kartalari */
.karta{border-radius:var(--r-karta)}
.plita{border-radius:var(--r-nishon)}
/* katalog kartasi — oq sirt, chiziqsiz (canvas fonda figura/fon juftligi yetadi) */
.k2-list[data-rejim="plitka"] .k2-mah{border:1px solid transparent;border-radius:var(--r-karta)}
.k2-list[data-rejim="plitka"] .k2-mah:hover{border-color:#C9D8EA}
.k2-sorov{border-radius:var(--r-karta)}
/* qoʻllash sohalari kadr plitasi */
.q-kadr__ich{border-radius:var(--r-media)}
/* moy tanlash texnika plitalari */
.szr-toifa,.t2-toifa{border-radius:var(--r-karta)}
/* ==========================================================================
§9 · FORMA — panel: sirt kontrasti bilan, ramkasiz
Oq boʻlimda panel canvas rangda; canvas boʻlimda oq; quyuq bandda oq.
========================================================================== */
.panel{background:var(--canvas);border:0;border-radius:var(--r-konteyner);padding:clamp(24px,2.8vw,40px)}
.bolim--yuza .panel,.t2-bolim--canvas .panel{background:var(--oq)}
.bolim--quyuq .panel{background:var(--oq)}
.panel .maydon input,.panel .maydon select,.panel .maydon textarea{background:var(--oq);border-color:var(--chiziq)}
.bolim--yuza .panel .maydon input,.bolim--yuza .panel .maydon select,.bolim--yuza .panel .maydon textarea,
.bolim--quyuq .panel .maydon input,.bolim--quyuq .panel .maydon select,.bolim--quyuq .panel .maydon textarea{
background:var(--canvas);border-color:transparent}
.maydon input:focus,.maydon select:focus,.maydon textarea:focus{border-color:var(--navy)!important;background:var(--oq)!important}
.maydon input,.maydon select,.maydon textarea{border-radius:var(--r-tekis);min-height:52px}
.chip{border-radius:var(--r-nishon)}
/* moy tanlash paneli (BOSH-02): ramkasiz, canvas sirt */
.tanlash .panel{background:var(--canvas);border:0}
.tanlash .plita{background:var(--oq);border-color:transparent}
.tanlash .plita:hover{border-color:var(--navy)}
.tanlash .maydon select{background-color:var(--oq);border-color:transparent}
/* ==========================================================================
§10 · RASM TILI — .kadr
Kinematik kesim · radius 12 · 1 px hairline · nozik brend pardasi ·
skrollda ochilish (klip) · hoverda 1.03 (600 ms). Slot (punktir) faqat
rasm hali kelmagan joyda.
========================================================================== */
.kadr{
position:relative;overflow:hidden;margin:0;
border-radius:var(--r-media);background:var(--navy);
isolation:isolate;
}
.kadr img{
display:block;width:100%;height:100%;object-fit:cover;
object-position:var(--kadr-x,50%) var(--kadr-y,50%);
transition:transform 700ms var(--ease);
}
.kadr--16x9{aspect-ratio:16/9}.kadr--16x10{aspect-ratio:16/10}.kadr--3x2{aspect-ratio:3/2}
.kadr--4x3{aspect-ratio:4/3}.kadr--1x1{aspect-ratio:1/1}.kadr--21x9{aspect-ratio:21/9}
.kadr--oq{background:var(--oq);border:1px solid var(--chiziq)}
.kadr--oq img{object-fit:contain;padding:6%}
.kadr--parda::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(to top, rgba(1,20,42,.42), rgba(1,20,42,0) 55%);
}
.kadr__yoz{
position:absolute;left:clamp(16px,1.8vw,24px);bottom:clamp(14px,1.6vw,20px);z-index:2;
display:inline-flex;align-items:center;gap:9px;
font-size:11px;font-weight:600;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:#fff;
}
.kadr__yoz::before{content:"";width:6px;height:6px;background:var(--aksent)}
a.kadr:hover img,.kadr--jonli:hover img,article:hover > .kadr img,.xizmat__q:hover .kadr img{transform:scale(1.03)}
/* toʻliq kenglikdagi rasm tasmasi — bob oʻtishi */
.tasma-kadr{
position:relative;overflow:hidden;background:var(--navy);
height:clamp(200px,26vw,360px);
}
.tasma-kadr img{width:100%;height:100%;object-fit:cover;display:block;
transform:translate3d(0,calc(var(--py,0) * 36px),0) scale(1.08)}
.tasma-kadr::after{content:"";position:absolute;inset:0;
background:linear-gradient(to top, rgba(1,20,42,.55), rgba(1,20,42,.06) 50%, rgba(1,20,42,.2) 100%)}
.tasma-kadr__yoz{
position:absolute;left:0;right:0;bottom:0;z-index:1;
width:var(--sahifa);margin-inline:auto;padding:0 var(--chet) clamp(24px,2.8vw,40px);
display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
color:#fff;
}
.tasma-kadr__yoz .yorliq{color:#fff}
.tasma-kadr__yoz p{font-size:clamp(20px,2.2vw,30px);line-height:1.15;font-weight:700;letter-spacing:var(--tracking-zich);max-width:18em;margin:0;text-wrap:balance}
/* skrollda ochilish — klip yuqoridan pastga */
@media (prefers-reduced-motion:no-preference){
.kadr.kir{clip-path:inset(0 0 10% 0 round var(--r-media));transition:opacity var(--ochil) var(--ease),transform var(--ochil) var(--ease),clip-path 900ms var(--ease)}
.kadr.kir.korindi{clip-path:inset(0 0 0 0 round var(--r-media))}
}
/* eski punktir slot — faqat rasmsiz joyda, sokinroq */
.slot{border-radius:var(--r-media);border-color:#D3DFED}
/* ==========================================================================
§11 · FUTER VA ISHONCH TASMASI — hikoyaning oxirgi bobi
========================================================================== */
.futer{padding-top:0;background:var(--navy)}
.futer::after{content:none} /* radial yorugʻlik yoʻq */
.futer > .ich{padding-top:clamp(40px,4.6vw,64px)}
/* brend bayonoti — toʻliq kenglikdagi birinchi qator */
.futer__grid{
grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));
gap:clamp(28px,3.2vw,56px);
padding-top:clamp(22px,2.4vw,32px);padding-bottom:clamp(32px,3.6vw,48px);
border-top:1px solid rgba(255,255,255,.14);
}
.futer__logo{display:grid;gap:var(--s5);align-content:start}
.futer__logo img{display:none}
.futer__tavsif{font-size:15px;line-height:1.6;color:rgba(255,255,255,.7);max-width:24em}
.futer h4{font-size:12px;color:rgba(255,255,255,.55);margin-bottom:var(--s5)}
.futer ul{gap:10px;font-size:14px}
.futer ul a{color:rgba(255,255,255,.86)}
.futer__hujjat{font-size:14px}
.futer__pas{padding-top:var(--s5);padding-bottom:clamp(28px,3vw,40px);border-top:1px solid rgba(255,255,255,.14);font-size:12px}
/* futer tepasidagi katta soʻz-belgi — brendning yakuniy bayonoti */
.futer__belgi{
display:block;padding-bottom:clamp(20px,2.4vw,36px);
font-size:clamp(40px,6.4vw,96px);line-height:.9;font-weight:700;
letter-spacing:-.05em;color:#fff;text-transform:uppercase;
user-select:none;
}
.futer__belgi span{color:rgba(255,255,255,.3)}
/* ishonch tasmasi — hairline ustunlar, sokin */
.tasma{padding-block:var(--tz-pad-b);background:var(--oq);border-top:1px solid var(--chiziq)}
.tasma__k h3{font-size:19px}
.tasma__k .tana-k{font-size:15px;line-height:1.6}
/* ==========================================================================
§12 · SAHIFA TUZATISHLARI — har sahifaning tizimdan chetga chiqqan joylari
========================================================================== */
/* --- bosh sahifa --- */
.hero__parda{display:none} /* eski parda — .hs__parda ishlaydi */
[data-blok="BOSH-02"] .tanlash__bosh{margin-bottom:clamp(20px,2.4vw,32px)}
/* BOSH-03 registr — kadr endi rasm */
.xizmat__q{grid-template-columns:236px minmax(0,1fr) minmax(0,1.25fr) 44px}
.xizmat__media{aspect-ratio:16/10}
.xizmat__q:hover::before,.xizmat__q:focus-within::before{background:rgba(255,255,255,.9)}
/* BOSH-05 — plita raqamlari oʻz oʻlchamida, mozaika chiziqli */
.b05v2__nom-m{font-size:clamp(26px,2.4vw,34px)}
.b05v2__chizma{border-radius:var(--r-karta)}
/* BOSH-07 — omillar chiziqli kataklar, oq langar qoladi */
.b07v1 .b07v1__omil{padding-inline:0}
/* BOSH-08 — kataklar chiziqli */
.b08v2__q{border-top:1px solid var(--chiziq);border-radius:0;background:none;padding:14px 0 0}
.b08v2__oqibat{background:none;border:0;border-top:1px solid var(--chiziq);border-radius:0;padding:18px 0 0}
.b08v2__langar{padding-top:0;border-top:0}
/* BOSH-11 — uch plita chiziqli; oq langar qoladi */
.b11v3 .b11v3__plita{background:none;border:0;border-top:1px solid rgba(255,255,255,.18);border-radius:0;padding:18px 0 0}
/* BOSH-13 — panel canvas, ramkasiz */
[data-blok="BOSH-13"] .panel{background:var(--canvas);border:0}
/* --- katalog --- */
.k2-hero__parda,.k2-hero__son{display:none}
[data-blok="KAT-01"] .hs__kadr img{object-position:100% 100%}
[data-blok="KAT-01"] h1{max-width:8.6em} /* ikki qator — sarlavha kanistr qatorining ustiga chiqmaydi */
[data-blok="KAT-01"] .hs__parda{background:
linear-gradient(to top, rgba(1,20,42,.92) 0%, rgba(1,20,42,.6) 34%, rgba(1,20,42,.16) 66%, rgba(1,20,42,.06) 100%),
linear-gradient(to right, rgba(1,20,42,.9) 0%, rgba(1,20,42,.5) 44%, rgba(1,20,42,0) 70%)}
.k2-rels{border-radius:0}
.k2-f__t,.k2-hajm,.k2-seg,.k2-segment,.k2-chip{border-radius:var(--r-nishon)}
.k2-f__panel{border-radius:var(--r-karta)}
.k2-qidiruv__maydon{border-radius:var(--r-kontrol)}
/* karta ichida foto — kadr tepada, oq fonda, kontain */
.k2-mah__foto{position:relative;aspect-ratio:4/3;overflow:hidden;background:#F6F8FB;border-bottom:1px solid var(--chiziq-ichki)}
.k2-mah__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8%;transition:transform 700ms var(--ease)}
.k2-mah:hover .k2-mah__foto img{transform:scale(1.04)}
.k2-list[data-rejim="royxat"] .k2-mah__foto{display:none}
.k2-list[data-rejim="plitka"] .k2-mah__usti{padding-top:clamp(18px,1.8vw,24px)}
/* yoʻnalish kirishi kadri */
.k2-kirish{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,3vw,48px);align-items:start;margin-bottom:clamp(28px,3vw,40px)}
.k2-kirish[hidden]{display:none}
.k2-kirish .kadr{aspect-ratio:3/2}
/* konversiya bandi — kadr oʻngda */
.k2-konv__tasma{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:clamp(24px,3vw,48px);align-items:start}
.k2-konv__kadr{aspect-ratio:3/4;align-self:stretch}
.k2-konv__kadr img{height:100%}
.k2-konv .panel{background:var(--oq)}
/* --- mahsulot --- */
.pdp-bosh__media,.pdp-bosh__parda{display:none}
.pdp-kadr{border:0;background:var(--canvas);border-radius:var(--r-media)}
.pdp-lenta__t figure{border-radius:var(--r-tekis)}
.pdp-qadoq__t{border-radius:var(--r-nishon)}
/* MAH-08 — endi yorugʻ bob, kadr bilan (quyuq band ikkitadan oshmasin) */
[data-blok="MAH-08"] .mah-belgi{border-top-color:var(--chiziq)}
[data-blok="MAH-08"] .mah-belgi li{border-bottom-color:var(--chiziq-ichki)}
[data-blok="MAH-08"] .mah-belgi__n{color:var(--aksent-mayda)}
[data-blok="MAH-08"] .mah-yana li{color:var(--ink);border-bottom-color:var(--chiziq-ichki)}
[data-blok="MAH-08"] .mah-yana__bosh,[data-blok="MAH-08"] h3,[data-blok="MAH-08"] h4{color:var(--navy)}
[data-blok="MAH-08"] .tana-k,[data-blok="MAH-08"] .lid{color:var(--slate)}
[data-blok="MAH-08"] .mah-foto{display:grid;gap:var(--s4)}
[data-blok="MAH-08"] .mah-foto .kadr{aspect-ratio:4/3}
[data-blok="MAH-04"] .chip{background:none;border-color:rgba(255,255,255,.3);color:#fff}
/* --- moy tanlash --- */
.t2-hero{padding:0!important;background:var(--navy)}
.t2-hero__fakt{display:none}
.szr-toifa,.t2-toifa,.t2-toifa__q{border-radius:var(--r-karta)}
[data-blok="TAN-02"] .t2-asbob{background:var(--oq);border:0;border-radius:var(--r-konteyner)}
[data-blok="TAN-05"] .t2-taq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,3vw,48px);align-items:start}
[data-blok="TAN-05"] .t2-taq__bosh{grid-column:1/-1}
[data-blok="TAN-05"] .t2-taq .kadr{aspect-ratio:4/3}
/* TAN-10 — yorugʻ sirtga (quyuq band: hero + TAN-07) */
[data-blok="TAN-10"].bolim--quyuq{background:var(--canvas)!important;color:var(--ink)}
[data-blok="TAN-10"].bolim--quyuq::before{content:none}
[data-blok="TAN-10"].bolim--quyuq h2,[data-blok="TAN-10"].bolim--quyuq h3{color:var(--navy)}
[data-blok="TAN-10"].bolim--quyuq .t2-lid,[data-blok="TAN-10"].bolim--quyuq .t2-savol__javob,
[data-blok="TAN-10"].bolim--quyuq p,[data-blok="TAN-10"].bolim--quyuq .javobgarlik{color:var(--slate)}
[data-blok="TAN-10"].bolim--quyuq .t2-yoz{color:var(--navy)}
[data-blok="TAN-10"].bolim--quyuq .t2-yoz--raqam::before{color:var(--aksent-mayda)}
[data-blok="TAN-10"].bolim--quyuq .t2-yoz--raqam::after{background:var(--chiziq)}
[data-blok="TAN-10"].bolim--quyuq .panel{background:var(--oq)}
[data-blok="TAN-10"].bolim--quyuq .panel .maydon input,[data-blok="TAN-10"].bolim--quyuq .panel .maydon select,
[data-blok="TAN-10"].bolim--quyuq .panel .maydon textarea{background:var(--canvas)}
[data-blok="TAN-10"].bolim--quyuq .t2-tez li{color:var(--ink)}
[data-blok="TAN-10"].bolim--quyuq .ik{color:var(--aksent-mayda)}
[data-blok="TAN-10"].bolim--quyuq :focus-visible{outline-color:var(--navy)}
/* --- qoʻllash sohalari --- */
.q-hero__fon,.q-hero__tor,.q-hero__siluet{display:none}
.q-kadr__ich{background:var(--navy)}
.q-kadr__ich img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.q-nav__q{border-radius:0}
/* --- brend --- */
.b3hero__parda{display:none}
.brd-indeks{background:var(--oq);border-bottom:1px solid var(--chiziq)}
/* BRD-03 — kadr belgi ostida */
.b303__kadr{aspect-ratio:4/3;margin-top:clamp(20px,2.2vw,30px)}
/* BRD-04 — chizilgan progressiya oʻrnida haqiqiy render qatori (chizma rasm kelguncha edi) */
.b304__render{aspect-ratio:21/9;margin-top:clamp(24px,2.6vw,36px)}
.b304__render img{object-position:50% 60%}
/* BRD-C — yakuniy CTA: toʻliq kenglikdagi kadr bandi (navy band emas) */
.b3cta{background-image:none!important;isolation:isolate}
.b3cta::before{content:none}
.b3cta__tor{display:none}
/* asos.css `.bolim > *` va tizim §7 `.bolim--quyuq:not(.hs) > *` (0-2-0) kadrni relative qilib qoʻyardi */
.b3cta .hs__kadr{position:absolute;z-index:0}
.b3cta .hs__parda{position:absolute;z-index:1}
.b3cta__ich{z-index:2}
/* --- aloqa --- */
.a3-hero__parda{display:none}
.a3-xarita .slot{border-radius:var(--r-media)}
.a3-sorov .a3-forma{background:var(--oq);border-radius:var(--r-konteyner);padding:clamp(24px,2.8vw,40px)}
.a3-sorov .a3-forma .maydon input,.a3-sorov .a3-forma .maydon select,.a3-sorov .a3-forma .maydon textarea{background:var(--canvas);border-color:transparent}
.a3-sorov .a3-forma .chip{background:var(--canvas);border-color:transparent;color:var(--navy)}
.a3-sorov .a3-forma .chip:hover{border-color:var(--navy)}
.a3-sorov .a3-forma .chip[aria-pressed="true"]{background:var(--navy);color:#fff}
.a3-sorov .a3-forma legend,.a3-sorov .a3-forma .a3-qadam__bosh{color:var(--navy)}
.a3-sorov .a3-forma .a3-qadam__n{color:var(--aksent-mayda)}
.a3-sorov .a3-forma .a3-forma__kutish,.a3-sorov .a3-forma .a3-forma__maslahat,.a3-sorov .a3-forma .javobgarlik{color:var(--slate)}
.a3-sorov .a3-forma .btn--oq{background:var(--aksent);color:#fff;border-color:transparent}
.a3-sorov .a3-forma .btn--oq .btn__oq{background:#fff;color:var(--navy)}
.a3-sorov .a3-forma :focus-visible{outline-color:var(--navy)}
.a3-sorov .a3-forma .maydon > span:first-child{color:var(--navy)}
.a3-sorov .a3-forma .a3-holat{color:var(--navy)}
/* ==========================================================================
§13 · HARAKAT — nozik, bitta egri
========================================================================== */
.hs__matn > *{opacity:0;transform:translateY(12px);
transition:opacity 700ms var(--ease),transform 700ms var(--ease)}
.hs.yuklandi .hs__matn > *{opacity:1;transform:none}
.hs.yuklandi .hs__matn > :nth-child(1){transition-delay:80ms}
.hs.yuklandi .hs__matn > :nth-child(2){transition-delay:160ms}
.hs.yuklandi .hs__matn > :nth-child(3){transition-delay:240ms}
.hs.yuklandi .hs__matn > :nth-child(4){transition-delay:320ms}
.hs.yuklandi .hs__matn > :nth-child(5){transition-delay:400ms}
.hs__meta,.hs__krosh,.hs__plita{opacity:0;transition:opacity 900ms var(--ease) 500ms}
.hs.yuklandi .hs__meta,.hs.yuklandi .hs__krosh,.hs.yuklandi .hs__plita{opacity:1}
@media (prefers-reduced-motion:reduce){
.hs__matn > *,.hs__meta,.hs__krosh,.hs__plita{opacity:1;transform:none;transition:none}
.hs__kadr img{transform:none;transition:none}
.hs__kadr,.tasma-kadr img{transform:none}
}
/* ==========================================================================
§14 · RESPONSIV — 1280 · 1024 · 768 · 390
========================================================================== */
@media (max-width:1280px){
.hs__matn{max-width:min(720px,76%)}
.k2-konv__tasma{grid-template-columns:repeat(2,minmax(0,1fr))}
.k2-konv__kadr{grid-column:1/-1;aspect-ratio:21/9}
}
@media (max-width:1100px){
.xizmat__q{grid-template-columns:200px minmax(0,1fr) 44px}
.k2-kirish{grid-template-columns:minmax(0,1fr)}
[data-blok="TAN-05"] .t2-taq{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1000px){
body.hero-toliq .header{position:sticky;background:var(--oq);border-bottom-color:var(--chiziq)}
body.hero-toliq .logo__quyuq{display:block}
body.hero-toliq .logo__oq{display:none}
body.hero-toliq .burger{color:var(--navy);border-color:var(--chiziq)}
.hs{min-height:0}
.hs--bosh{min-height:min(72vh,640px)}
.hs__ich{padding-top:clamp(56px,9vw,88px)}
.hs--mahsulot .hs__ich{padding-top:clamp(40px,6vw,64px)}
.hs__matn{max-width:min(680px,100%)}
}
@media (max-width:1100px){
.futer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.futer__logo{grid-column:1/-1}
}
@media (max-width:600px){
.futer__grid{grid-template-columns:minmax(0,1fr);gap:var(--s8)}
}
@media (max-width:760px){
:root{--tz-pad-a:clamp(56px,10vw,72px);--tz-pad-b:clamp(48px,8vw,60px);--tz-pad-c:clamp(36px,6vw,44px)}
.hs__parda{background:
linear-gradient(to top, rgba(1,20,42,.96) 0%, rgba(1,20,42,.86) 46%, rgba(1,20,42,.66) 78%, rgba(1,20,42,.5) 100%)}
.hs__matn{gap:14px}
.hs h1{max-width:none}
.hs__meta{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:28px}
.hs__meta li:nth-child(2),.hs__meta li:nth-child(3){justify-content:flex-start}
.hs__amal{gap:12px}
.hs__kadr{transform:none}
.tasma-kadr{height:clamp(200px,52vw,320px)}
.tasma-kadr img{transform:none}
.xizmat__q{grid-template-columns:minmax(0,1fr)}
.xizmat__media{max-width:none;aspect-ratio:16/9}
.futer__belgi{font-size:clamp(40px,14vw,64px)}
.k2-konv__kadr{aspect-ratio:16/9}
.bento{gap:20px}
}
/* ==========================================================================
§15 · MEDIA-SLOT TIZIMI (3-brif, 12.09 kech): HAQIQIY RASM YOʻQ.
Har media oʻrni — loyihalangan slot: sirt + 10 px ichki hairline ramka +
markaz belgisi + texnik yorliq (data-yorliq) + nisbat (data-nisbat) + indeks
(data-indeks). Matn CSS `attr()` dan chiqadi — HTML matni emas, verbatim
tekshiruviga taʼsir qilmaydi. Keyin haqiqiy rasm shu slotga ![]()
boʻlib
tushadi — tartib oʻzgarmaydi.
Nisbatlar: HERO 21:9 · PRODUCT 4:5 yoki 1:1 · TECHNICAL DETAIL 4:3 ·
BRAND STORY 3:2 · APPLICATION 16:10 · AUTHENTICITY MACRO 1:1.
========================================================================== */
.kadr:not(:has(img)){
background:
linear-gradient(var(--chiziq) 0 1px, transparent 1px) 50% 50% / 1px 18px no-repeat,
linear-gradient(90deg, var(--chiziq) 0 1px, transparent 1px) 50% 50% / 18px 1px no-repeat,
var(--canvas);
background-repeat:no-repeat;
border:0;
}
.kadr:not(:has(img))::before{
content:attr(data-nisbat);
position:absolute;inset:10px;z-index:1;
border:1px solid #CFDBE8;border-radius:calc(var(--r-media) - 6px);
padding:8px 10px;text-align:right;
font-size:10px;line-height:1;font-weight:600;letter-spacing:var(--tracking-caps);
color:#93A4B6;pointer-events:none;
}
.kadr:not(:has(img))::after{
content:attr(data-indeks) " " attr(data-yorliq);
position:absolute;left:20px;bottom:18px;z-index:1;
font-size:11px;line-height:1.2;font-weight:600;letter-spacing:var(--tracking-caps);
text-transform:uppercase;color:var(--slate);white-space:pre;
}
.kadr--oq:not(:has(img)){background-color:var(--oq)}
.kadr--oq:not(:has(img))::before{border-color:var(--chiziq)}
/* quyuq slot — navy sirt ustida (quyuq bandlar, hero) */
.kadr--quyuq:not(:has(img)),.bolim--quyuq .kadr:not(:has(img)){
background:
linear-gradient(rgba(255,255,255,.28) 0 1px, transparent 1px) 50% 50% / 1px 18px no-repeat,
linear-gradient(90deg, rgba(255,255,255,.28) 0 1px, transparent 1px) 50% 50% / 18px 1px no-repeat,
#02306A;
}
.kadr--quyuq:not(:has(img))::before,.bolim--quyuq .kadr:not(:has(img))::before{border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.5)}
.kadr--quyuq:not(:has(img))::after,.bolim--quyuq .kadr:not(:has(img))::after{color:rgba(255,255,255,.72)}
.kadr--parda:not(:has(img))::after{color:var(--slate)}
/* hero slot */
.hs__kadr:not(:has(img)){
background:
radial-gradient(90% 70% at 78% 40%, rgba(58,151,224,.16) 0%, rgba(58,151,224,0) 60%),
linear-gradient(180deg,#032E62 0%,#01244C 56%,#011A38 100%);
}
.hs__kadr:not(:has(img))::after{
content:attr(data-yorliq) " · " attr(data-nisbat);
position:absolute;top:calc(var(--tz-hero-ust) - 8px);right:var(--chet);z-index:1;
padding:8px 12px;border:1px solid rgba(255,255,255,.22);border-radius:6px;
font-size:10px;line-height:1;font-weight:600;letter-spacing:var(--tracking-caps);
text-transform:uppercase;color:rgba(255,255,255,.62);white-space:pre;
}
.hs--mahsulot .hs__kadr:not(:has(img))::after{top:auto;bottom:22px}
.hs:not(:has(.hs__kadr img)) .hs__parda{background:linear-gradient(to top, rgba(0,14,32,.5) 0%, rgba(0,14,32,.16) 40%, rgba(0,14,32,0) 72%)}
/* toʻliq kenglikdagi tasma sloti */
.tasma-kadr:not(:has(img)){
background:
linear-gradient(180deg,#02306A,#01244C);
}
.tasma-kadr:not(:has(img))::after{
background:none;content:attr(data-yorliq) " · " attr(data-nisbat);
inset:auto var(--chet) 20px auto;
padding:8px 12px;border:1px solid rgba(255,255,255,.22);border-radius:6px;
font-size:10px;line-height:1;font-weight:600;letter-spacing:var(--tracking-caps);
text-transform:uppercase;color:rgba(255,255,255,.62);white-space:pre;
}
/* slotda hover/klip animatsiyasi yoʻq — u rasm emas */
.kadr:not(:has(img)).kir{clip-path:none}
@media (max-width:760px){
.kadr:not(:has(img))::after{left:14px;bottom:12px;font-size:10px}
.kadr:not(:has(img))::before{inset:8px}
.hs__kadr:not(:has(img))::after{display:none}
}