/* ==========================================================================
   GRAUMANN · SAHIFA KOMPOZITSIYALARI  ·  kompozitsiya.css  (2026-09-12 kech, 2-brif)
   --------------------------------------------------------------------------
   tizim.css TIZIMNI beradi (hero, yorliq, tugma, ritm, rang). Bu fayl har
   sahifaning OʻZ vazifasiga qarab kompozitsiyani qayta quradi — Otabekning
   2-brifi: «every page must feel individually designed».

   Sahifa maqsadlari:
     bosh        brend hikoyasi + kashfiyot   → tanlagich ochiq asbob, qadoq shkalasi
     katalog     mahsulot kashfiyoti          → editorial mahsulot modullari (karta emas)
     mahsulot    texnik ishontirish           → katta mahsulot kadri + maʼlumot bloklari
     moy tanlash interaktiv qaror             → ochiq konfigurator, katta qadam relsi
     qoʻllash    vizual kashfiyot             → olti bob, olti sanoat kadri
     brend       hikoya                       → mavjud editorial tuzilma, oʻlchov kuchaytirildi
     aloqa       konversiya                   → mavjud, forma sirtida

   qur.py da tizim dan KEYIN yuklanadi. Ortga qaytarish: «kompozitsiya» ni olib tashlash.
   ========================================================================== */

/* ==========================================================================
   §1 · HEADER — bitta asosiy CTA («Moy tanlash»), yuqori qator sokin
   ========================================================================== */
.header__ust .ich{min-height:36px}
.header__ust a{font-weight:500}
.header__cta{min-height:44px;padding-left:18px}
.header__cta .btn__oq{width:34px;height:34px}
.mega{padding:clamp(24px,2.4vw,36px)}
.mega h4{font-size:11px}

/* ==========================================================================
   §2 · HERO METADATA — Machin/Solwell tilidagi kataklar: tik chiziq bilan
   ajratilgan uch fakt, bosh sahifada kattaroq
   ========================================================================== */
.hs__meta{gap:0;border-top:1px solid rgba(255,255,255,.22)}
.hs__meta li{padding:18px clamp(16px,2vw,28px) 0 0}
.hs__meta li + li{padding-left:clamp(16px,2vw,28px);border-left:1px solid rgba(255,255,255,.18)}
.hs__meta li:nth-child(2),.hs__meta li:nth-child(3){justify-content:flex-start}
.hs--bosh .hs__meta li{font-size:13px;padding-top:22px}
@media (max-width:760px){
  .hs__meta li + li{padding-left:0;border-left:0}
  .hs__meta li{padding-top:10px}
}

/* ==========================================================================
   §3 · BOSH SAHIFA
   ========================================================================== */

/* --- BOSH-02 · MOY TANLASH — ochiq asbob (quti yoʻq)
   Chapda: yorliq · yordam havolasi. Oʻngda (5–12): tablar → texnika relsi →
   maydonlar → CTA → javobgarlik. Plitalar segmentli hairline qator. --- */
main [data-blok="BOSH-02"][data-blok]{background:var(--canvas);padding-block:var(--tz-pad-a)}
[data-blok="BOSH-02"] .ich{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--grid-gap);row-gap:0;align-items:start;
}
[data-blok="BOSH-02"] .tanlash__bosh{
  grid-column:1/span 4;display:grid;gap:var(--s5);align-content:start;
  margin:0;padding-top:4px;
}
[data-blok="BOSH-02"] .tanlash__bosh .ha{max-width:22em;line-height:1.45}
[data-blok="BOSH-02"] .tanlash .panel,[data-blok="BOSH-02"] .panel{
  grid-column:5/span 8;background:none;border:0;border-radius:0;padding:0;
}
[data-blok="BOSH-02"] .tablar{border-bottom-color:#CFDBE8}
[data-blok="BOSH-02"] .tab{padding-block:0 16px;font-size:15px}
[data-blok="BOSH-02"] .tab-ich{padding-top:var(--s8)}
/* texnika relsi — oltita segment, hairline, ikonka + nom */
[data-blok="BOSH-02"] .plitalar{
  gap:0;margin-bottom:var(--s8);
  border-top:1px solid #CFDBE8;border-bottom:1px solid #CFDBE8;
}
[data-blok="BOSH-02"] .plita{
  position:relative;background:none;border:0;border-radius:0;
  padding:18px 16px 18px 0;gap:12px;
  color:var(--slate);font-size:14px;
}
[data-blok="BOSH-02"] .plita + .plita{padding-left:16px;border-left:1px solid #CFDBE8}
[data-blok="BOSH-02"] .plita::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--navy);transform:scaleX(0);transform-origin:left;
  transition:transform var(--anim) var(--ease);
}
[data-blok="BOSH-02"] .plita .ik{color:var(--slate)}
[data-blok="BOSH-02"] .plita:hover{color:var(--navy);background:none;border-color:#CFDBE8}
[data-blok="BOSH-02"] .plita:hover .ik{color:var(--navy)}
[data-blok="BOSH-02"] .plita.tanlangan{background:none;color:var(--navy);border-color:#CFDBE8}
[data-blok="BOSH-02"] .plita.tanlangan .ik{color:var(--aksent)}
[data-blok="BOSH-02"] .plita.tanlangan::after{transform:scaleX(1)}
[data-blok="BOSH-02"] .maydon select,[data-blok="BOSH-02"] .maydon input{background-color:var(--oq);border-color:transparent}
[data-blok="BOSH-02"] .maydon select:disabled{background-color:#E8EEF5}
[data-blok="BOSH-02"] .panel__ost{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid #CFDBE8}
[data-blok="BOSH-02"] .javobgarlik{font-size:13px;max-width:60em}
[data-blok="BOSH-02"] .tanlash .maydonlar{margin-bottom:var(--s6)}

/* --- BOSH-04 · ASOSIY MAHSULOTLAR — kadr kattaroq (1:1), mahsulotga qaratilgan --- */
[data-blok="BOSH-04"] .b04__media{aspect-ratio:1/1;margin-bottom:22px}
[data-blok="BOSH-04"] .b04__media img{padding:8%}
[data-blok="BOSH-04"] .b04__nom{font-size:clamp(20px,1.7vw,24px)}

/* --- BOSH-10 · QADOQ — gorizontal shkala: haydovchi → servis → ustaxona → park → sanoat
   Beshta ustun bitta tayanch chizigʻida; ikonka balandligi hajmga proporsional
   (1L .30 · 4L .48 · 5L .54 · 20L .76 · 200L 1), ostida hajm raqami, nom, izoh. --- */
main [data-blok="BOSH-10"] .b10v1__ich{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:0}
main [data-blok="BOSH-10"] .b10v1__hero{grid-column:1;grid-row:auto;grid-template-columns:none;margin-bottom:clamp(36px,4vw,56px)}
main [data-blok="BOSH-10"] .b10v1__sarlavha{max-width:12em}
main [data-blok="BOSH-10"] .b10v1__roy{
  grid-column:1;grid-row:auto;
  grid-template-columns:repeat(5,minmax(0,1fr));column-gap:0;
  border-top:0;border-bottom:0;
}
main [data-blok="BOSH-10"] .b10v1__q{
  grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;
  padding:0 clamp(14px,1.6vw,24px) 0 0;row-gap:0;
}
main [data-blok="BOSH-10"] .b10v1__q + .b10v1__q{padding-left:clamp(14px,1.6vw,24px);border-left:1px solid var(--chiziq)}
main [data-blok="BOSH-10"] .b10v1__q:last-child{border-top:0}
/* oʻlchov katagi: ikonka tayanch chiziqda, raqam ostida */
main [data-blok="BOSH-10"] .b10v1__olchov{
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:clamp(96px,9vw,132px) auto;
  column-gap:0;row-gap:14px;align-items:end;
  border-bottom:1px solid var(--navy);padding-bottom:14px;margin-bottom:16px;
}
main [data-blok="BOSH-10"] .b10v1__ik{
  grid-row:1;justify-self:start;align-self:end;margin:0;
  width:auto;height:calc(clamp(96px,9vw,132px) * var(--sk-h,.5));
  aspect-ratio:1/1;color:var(--navy);
}
main [data-blok="BOSH-10"] .b10v1__q:nth-child(1) .b10v1__ik{--sk-h:.30}
main [data-blok="BOSH-10"] .b10v1__q:nth-child(2) .b10v1__ik{--sk-h:.48}
main [data-blok="BOSH-10"] .b10v1__q:nth-child(3) .b10v1__ik{--sk-h:.54}
main [data-blok="BOSH-10"] .b10v1__q:nth-child(4) .b10v1__ik{--sk-h:.76}
main [data-blok="BOSH-10"] .b10v1__q:nth-child(5) .b10v1__ik{--sk-h:1}
main [data-blok="BOSH-10"] .b10v1__hajm{
  grid-row:2;justify-self:start;
  font-size:clamp(26px,2.6vw,38px);line-height:1;
}
main [data-blok="BOSH-10"] .b10v1__matn{gap:6px}
main [data-blok="BOSH-10"] .b10v1__kim{font-size:17px}
main [data-blok="BOSH-10"] .b10v1__izoh{font-size:14px;line-height:1.55;max-width:18em}
main [data-blok="BOSH-10"] .b10v1__cta{grid-column:1;grid-row:auto;margin-top:clamp(32px,3.6vw,48px)}
@media (max-width:900px){
  main [data-blok="BOSH-10"] .b10v1__roy{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  main [data-blok="BOSH-10"] .b10v1__q:nth-child(odd){padding-left:0;border-left:0}
  main [data-blok="BOSH-10"] .b10v1__olchov{grid-template-rows:96px auto}
  main [data-blok="BOSH-10"] .b10v1__ik{height:calc(96px * var(--sk-h,.5))}
}
@media (max-width:480px){
  main [data-blok="BOSH-10"] .b10v1__roy{grid-template-columns:minmax(0,1fr)}
  main [data-blok="BOSH-10"] .b10v1__q + .b10v1__q{padding-left:0;border-left:0;border-top:1px solid var(--chiziq);padding-top:22px}
  main [data-blok="BOSH-10"] .b10v1__olchov{grid-template-columns:auto minmax(0,1fr);grid-template-rows:none;column-gap:14px;align-items:end}
  main [data-blok="BOSH-10"] .b10v1__ik{grid-row:auto;height:calc(64px * var(--sk-h,.5))}
  main [data-blok="BOSH-10"] .b10v1__hajm{grid-row:auto}
}

/* --- BOSH-11 · HAMKORLIK — uch qator kattaroq raqam bilan --- */
.b11v3__n{font-size:clamp(28px,2.6vw,36px)}

/* ==========================================================================
   §4 · KATALOG — mahsulot kutubxonasi: editorial modullar (bir xil kartalar toʻri emas)
   Plitka rejimi: har mahsulot toʻliq kenglikdagi modul — chapda kadr (5/12),
   oʻngda nom · tavsif · texnik registr · amal. Faqat 1 px chiziq bilan ajratilgan.
   ========================================================================== */
main .k2-list[data-rejim="plitka"]{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--chiziq)}
main .k2-list[data-rejim="plitka"] .k2-mah{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  column-gap:clamp(28px,3.4vw,56px);row-gap:0;align-items:start;
  min-height:0;padding:clamp(28px,3vw,44px) 0;
  background:none;border:0;border-bottom:1px solid var(--chiziq);border-radius:0;overflow:visible;
}
main .k2-list[data-rejim="plitka"] .k2-mah:hover{border-color:var(--chiziq)}
main .k2-list[data-rejim="plitka"] .k2-mah__foto{
  grid-column:1;grid-row:1/span 4;aspect-ratio:4/3;
  background:var(--oq);border:0;border-radius:var(--r-media);
}
main .k2-list[data-rejim="plitka"] .k2-mah__foto img{padding:6%}
main .k2-list[data-rejim="plitka"] .k2-mah__usti{grid-column:2;padding:0;margin-bottom:14px}
main .k2-list[data-rejim="plitka"] .k2-mah__nom{grid-column:2;padding:0;gap:10px}
main .k2-list[data-rejim="plitka"] .k2-mah h3{font-size:clamp(24px,2.2vw,32px);line-height:1.1;letter-spacing:var(--tracking-zich);font-weight:700}
main .k2-list[data-rejim="plitka"] .k2-mah__brend{font-size:12px;margin-bottom:6px}
main .k2-list[data-rejim="plitka"] .k2-mah__tav{font-size:16px;color:var(--ink)}
main .k2-list[data-rejim="plitka"] .k2-mah__qosh{font-size:14px;max-width:40em}
main .k2-list[data-rejim="plitka"] .k2-mah__tex{
  grid-column:2;margin:clamp(20px,2vw,28px) 0 0;padding:clamp(16px,1.6vw,22px) 0 0;
  border-top:1px solid var(--chiziq);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
}
main .k2-list[data-rejim="plitka"] .k2-mah__sae{font-size:clamp(22px,2vw,28px);line-height:1.05;letter-spacing:var(--tracking-zich)}
main .k2-list[data-rejim="plitka"] .k2-mah__ost{
  grid-column:2;margin-top:clamp(18px,2vw,26px);padding:0;
  justify-content:flex-start;gap:clamp(20px,2.4vw,36px);
}
main .k2-list[data-rejim="plitka"] .k2-mah__ha{font-size:15px}
/* shablon karta (keyingi artikullar uchun) — mijozga koʻrinmaydi (kat.css darvozasi bilan bitta qoida) */
body:not([data-holat="qoralama"]) main .k2-list .kat-mah--shablon{display:none}
/* roʻyxat oxiri — modul emas, xulosa qatori */
main .k2-list[data-rejim="plitka"] .k2-sorov{
  flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:12px clamp(16px,2vw,32px);
  border:0;border-radius:0;padding:clamp(20px,2vw,28px) 0 0;
}
main .k2-list[data-rejim="plitka"] .k2-sorov__m{max-width:44em}
main .k2-list[data-rejim="plitka"] .k2-sorov .ha{margin:0 0 0 auto}
/* yoʻnalish indeksi kattaroq */
.k2-yon__nom{font-size:clamp(15px,1.2vw,17px)}
@media (max-width:900px){
  main .k2-list[data-rejim="plitka"] .k2-mah{grid-template-columns:minmax(0,1fr);row-gap:18px}
  main .k2-list[data-rejim="plitka"] .k2-mah__foto{grid-column:1;grid-row:auto;max-width:420px}
  main .k2-list[data-rejim="plitka"] .k2-mah__usti,main .k2-list[data-rejim="plitka"] .k2-mah__nom,
  main .k2-list[data-rejim="plitka"] .k2-mah__tex,main .k2-list[data-rejim="plitka"] .k2-mah__ost{grid-column:1}
  main .k2-list[data-rejim="plitka"] .k2-mah__usti{margin-bottom:0}
  main .k2-list[data-rejim="plitka"] .k2-mah__tex{grid-template-columns:minmax(0,1fr)}
}

/* ==========================================================================
   §5 · MAHSULOT — texnik ishontirish: kadr yarim ekran, maʼlumot bloklari katta
   ========================================================================== */
.pdp-sahna__grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr);column-gap:clamp(32px,4.6vw,80px)}
.pdp-kadr{max-width:none;aspect-ratio:1/1}
.pdp-kadr img{padding:8%}
.pdp-sahna h1{font-size:clamp(32px,3.5vw,50px)}
/* toʻldirish talablari — uch katak, katta qiymat (visual data blocks) */
.pdp-oem__qator{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--chiziq)}
.pdp-oem__q{border:0;border-radius:0;padding:14px clamp(12px,1.4vw,20px) 14px 0;gap:6px;background:none}
.pdp-oem__q + .pdp-oem__q{padding-left:clamp(12px,1.4vw,20px);border-left:1px solid var(--chiziq)}
.pdp-oem__q span{font-size:clamp(20px,1.8vw,26px);letter-spacing:var(--tracking-zich)}
.pdp-moslik{border-radius:0;background:none;padding-inline:clamp(16px,1.6vw,22px) 0;border-left-width:2px}
.pdp-lenta__t figure{background:var(--canvas);border-color:transparent}
.pdp-foyda h4{font-size:17px}
@media (max-width:1080px){
  .pdp-sahna__grid{grid-template-columns:minmax(0,1fr)}   /* mah-pdp.css tartibi: sarlavha → kadr → maʼlumot */
  .pdp-kadr{max-width:520px}
}

/* ==========================================================================
   §6 · MOY TANLASH — ochiq konfigurator: quti yoʻq, qadam relsi katta
   ========================================================================== */
[data-blok="TAN-02"] .t2-asbob{background:none;border-radius:0}
[data-blok="TAN-02"] .t2-tablar{padding-inline:0;border-bottom-color:#CFDBE8}
[data-blok="TAN-02"] .t2-tab-ich{padding-inline:0}
[data-blok="TAN-02"] .t2-rels .szr-rels__n{font-size:clamp(24px,2.2vw,32px);line-height:1;padding-top:0;letter-spacing:-.03em;font-weight:700}
[data-blok="TAN-02"] .t2-rels .szr-rels__t{gap:18px;padding-bottom:22px}
[data-blok="TAN-02"] .t2-rels .szr-rels__nom{font-size:18px}
[data-blok="TAN-02"] .t2-rels .szr-rels[aria-current]::after{background:var(--navy);height:2px}
[data-blok="TAN-02"] .t2-qadam .szr-savol{font-size:clamp(22px,2vw,28px);letter-spacing:var(--tracking-zich)}
/* toifa plitalari — oq, ramkasiz, canvas ustida sirt kontrasti */
[data-blok="TAN-02"] .t2-toifa .szr-plita{background:var(--oq);border-color:transparent;border-radius:var(--r-karta)}
[data-blok="TAN-02"] .t2-toifa .szr-plita:hover{border-color:var(--navy)}
[data-blok="TAN-02"] .t2-toifa .szr-plita.tanlangan{background:var(--navy);border-color:var(--navy)}
[data-blok="TAN-02"] .maydon input,[data-blok="TAN-02"] .maydon select{background-color:var(--oq);border-color:transparent}
[data-blok="TAN-02"] .maydon select:disabled{background-color:#E8EEF5}

/* ==========================================================================
   §7 · QOʻLLASH SOHALARI — olti bob, olti sanoat kadri; siluet endi plaka belgisi
   ========================================================================== */
/* 3-brif: rasm yoʻq — bob kadri media-slot (tizim.css §15), ichida texnik siluet qoladi */
.q-kadr__ich{display:grid;place-items:center;padding:clamp(24px,3vw,44px)}
.q-kadr__ich.kadr:not(:has(img)){background-color:var(--canvas);background-image:
    linear-gradient(var(--chiziq) 0 1px, transparent 1px),linear-gradient(90deg, var(--chiziq) 0 1px, transparent 1px);
  background-size:1px 18px,18px 1px;background-position:50% 50%;background-repeat:no-repeat;border:0}
.q-kadr__ich.kadr::before{border-color:#CFDBE8}
.q-kadr__siluet{position:relative;width:min(56%,380px);--sl-tana:#01244C;--sl-oyna:#E3EBF6;--sl-shina:#0B2237;--sl-obod:#01244C;--sl-aksent:var(--aksent);opacity:.9}
.q-belgi{color:var(--slate)}
.q-belgi b{color:var(--navy)}
.q-belgi i{color:var(--slate);border-top-color:var(--chiziq)}
.q-kadr--ochiq .q-kadr__ich{border:0}
.q-bob__n{color:rgba(1,36,76,.22)}
/* bob sarlavhasi — H2 kattaroq, xulosa oʻngda */
.q-bob__sar h2{font-size:clamp(30px,3.6vw,50px)!important}
/* indeks qatori — raqam katta */
.q-nav__n{font-size:clamp(22px,2vw,30px)}
.q-nav__t{font-size:clamp(19px,1.8vw,26px)}

/* ==========================================================================
   §8 · BREND — oʻlchov kuchaytirildi
   ========================================================================== */
.b3t__qiy{font-size:clamp(34px,3.6vw,52px)}
.b302__n{font-size:clamp(44px,5vw,80px)}
.b303__made{font-size:clamp(44px,5.6vw,84px)}

/* ==========================================================================
   §9 · ALOQA — kanal raqamlari katta, forma qadam sarlavhasi kuchli
   ========================================================================== */
.a3-kan__n{font-size:clamp(34px,3.6vw,52px)}
.a3-qadam__bosh{font-size:18px}

/* ==========================================================================
   §10 · UMUMIY MIKRO-INTERAKSIYA — havola tagchizigʻi, akkordeon, fokus
   ========================================================================== */
summary{transition:color var(--tez) var(--ease)}
details[open] > summary{color:var(--navy)}
.k2-yon__q:focus-visible,.plita:focus-visible,.szr-rels__t:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}

/* ==========================================================================
   §11 · RESPONSIV — planshet 1024/768 va mobil
   ========================================================================== */
@media (max-width:1100px){
  [data-blok="BOSH-02"] .tanlash__bosh{grid-column:1/-1;margin-bottom:var(--s6)}
  [data-blok="BOSH-02"] .panel{grid-column:1/-1}
  [data-blok="BOSH-02"] .plitalar{grid-template-columns:repeat(3,minmax(0,1fr))}
  [data-blok="BOSH-02"] .plita:nth-child(4){padding-left:0;border-left:0}
  [data-blok="BOSH-02"] .plita:nth-child(n+4){border-top:1px solid #CFDBE8}
}
@media (max-width:760px){
  [data-blok="BOSH-02"] .plitalar{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-blok="BOSH-02"] .plita:nth-child(4){padding-left:16px;border-left:1px solid #CFDBE8}
  [data-blok="BOSH-02"] .plita:nth-child(odd){padding-left:0;border-left:0}
  [data-blok="BOSH-02"] .plita:nth-child(n+3){border-top:1px solid #CFDBE8}
  .pdp-oem__qator{grid-template-columns:minmax(0,1fr)}
  .pdp-oem__q + .pdp-oem__q{padding-left:0;border-left:0;border-top:1px solid var(--chiziq)}
}