/* ==========================================================================
   KOMPONENTLAR — yorliq, tugma, karta, slot, forma, jadval, header
   ========================================================================== */

.ik{width:1em;height:1em;flex:none;fill:currentColor}

/* ==========================================================================
   1. YORLIQ — Manufact imzosi: kvadrat aksent nuqta + mayda CAPS matn
   ========================================================================== */
.yorliq{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 13px 8px 11px;
  background:var(--oq);border:1px solid var(--chiziq);border-radius:var(--r-nishon);
  font-size:var(--mayda);line-height:1;font-weight:600;
  letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:var(--navy);justify-self:start;align-self:start;
}
.yorliq::before{content:"";width:7px;height:7px;background:var(--aksent);flex:none}
.bolim--yuza .yorliq{background:var(--oq)}
.bolim--quyuq .yorliq{background:transparent;border-color:var(--chiziq-quyuq);color:#fff}

/* mono variant: «// MADE IN GERMANY //» — chiziqchalar CSS da, matn tegilmagan */
.yorliq--mono{
  background:transparent;border:0;padding:0;color:var(--slate);gap:7px;font-weight:600;
}
.yorliq--mono::before{content:"//";width:auto;height:auto;background:none;
  color:var(--aksent);letter-spacing:0}
.yorliq--mono::after{content:"//";color:var(--aksent);letter-spacing:0}
.bolim--quyuq .yorliq--mono{color:rgba(255,255,255,.72)}

/* ==========================================================================
   2. TUGMALAR — matn katagi + alohida aksent oʻq katagi
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;gap:var(--s4);
  padding:6px 6px 6px 20px;min-height:54px;
  border:1px solid transparent;border-radius:var(--r-kontrol);
  font-size:var(--kichik);font-weight:600;letter-spacing:var(--tracking);
  cursor:pointer;text-align:left;
  transition:background var(--anim) var(--ease),color var(--anim) var(--ease),
             border-color var(--anim) var(--ease);
}
.btn__m{padding-block:4px}
.btn__oq{
  display:grid;place-items:center;width:42px;height:42px;flex:none;
  border-radius:6px 6px 12px 6px;background:#fff;color:var(--navy);
  transition:background var(--anim) var(--ease),transform var(--anim) var(--ease);
}
.btn__oq .ik{width:17px;height:17px}
.btn:hover .btn__oq{background:#EAF2FB;transform:translateX(2px)}

/* Oq tanali tugmada oq katak koʻrinmaydi — u yerda katak siyoh rangda qoladi */
.btn--oq .btn__oq{background:var(--navy);color:#fff}
.btn--oq:hover .btn__oq{background:var(--navy-800)}

/* Asosiy tugma: ochroq koʻk — TANA, oq katak — oʻq (Otabek, 11.09).
   ⚠️ Oq matn #3A97E0 ustida 3.14:1 — WCAG AA (4.5:1) dan oʻtmaydi.
   Otabek buni bilib tanlagan (aksent rang ham oʻzi tanlagan) — oʻzgartirilmaydi.
   tekshir.mjs da shu joy nomma-nom istisno qilingan va nisbati eslatmada chiqadi. */
.btn--asos{background:var(--aksent);color:#fff}
.btn--asos:hover{background:#55A8E6}

.btn--oq{background:var(--oq);color:var(--navy);border-color:var(--chiziq)}
.btn--oq:hover{background:var(--canvas)}

.btn--chegara{background:transparent;color:var(--navy);border-color:var(--chiziq);
  padding:6px 22px;min-height:54px}
.btn--chegara:hover{background:var(--oq);border-color:var(--navy)}
.bolim--quyuq .btn--chegara{color:#fff;border-color:var(--chiziq-quyuq)}
.bolim--quyuq .btn--chegara:hover{background:rgba(255,255,255,.07);border-color:#fff}

/* matn-havola — oʻq siljiydi */
.ha{
  display:inline-flex;align-items:center;gap:9px;
  font-size:var(--kichik);font-weight:600;color:var(--blue-700);
  border-bottom:1px solid transparent;padding-bottom:2px;
  justify-self:start;align-self:start;
  transition:color var(--anim) var(--ease),border-color var(--anim) var(--ease);
}
.ha .ik{width:15px;height:15px;transition:transform var(--anim) var(--ease)}
.ha:hover{color:var(--navy);border-bottom-color:var(--chiziq)}
.ha:hover .ik{transform:translateX(4px)}
.bolim--quyuq .ha{color:#8FC4EE}
.bolim--quyuq .ha:hover{color:#fff;border-bottom-color:var(--chiziq-quyuq)}

/* faqat oʻq — karusel/qator boshqaruvi */
.oq-tugma{
  width:44px;height:44px;display:grid;place-items:center;flex:none;
  border:1px solid var(--chiziq);border-radius:6px 6px 12px 6px;
  background:var(--oq);color:var(--navy);cursor:pointer;
  transition:background var(--anim) var(--ease),color var(--anim) var(--ease),
             border-color var(--anim) var(--ease);
}
.oq-tugma:hover{background:var(--aksent);border-color:var(--aksent);color:#fff}
.oq-tugma .ik{width:16px;height:16px}

/* ==========================================================================
   3. MEDIA SLOT — mijozdan kutilayotgan rasm oʻrni (punktir, toʻldirishsiz)
   ========================================================================== */
.slot{
  position:relative;display:grid;place-items:center;
  border:1px dashed var(--chiziq);border-radius:var(--r-media);
  background:none;
  overflow:hidden;
}
.slot__yoz{
  position:relative;z-index:1;
  font-size:var(--mayda);letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:var(--slate);text-align:center;padding:var(--s5);max-width:34ch;line-height:1.5;
}
.slot--21x9{aspect-ratio:21/9}
.slot--16x10{aspect-ratio:16/10}
.slot--3x2{aspect-ratio:3/2}
.slot--1x1{aspect-ratio:1/1}
.slot--4x3{aspect-ratio:4/3}
.bolim--quyuq .slot{border-color:rgba(255,255,255,.26);background:none}
.bolim--quyuq .slot__yoz{color:rgba(255,255,255,.6)}

/* ==========================================================================
   4. KARTA
   ========================================================================== */
.karta{
  display:grid;gap:var(--s4);align-content:start;
  padding:var(--s6);background:var(--oq);
  border:1px solid var(--chiziq);border-radius:var(--r-karta);
  transition:border-color var(--anim) var(--ease),background var(--anim) var(--ease);
}
.karta:hover{border-color:#C5D5E8}
.karta--tiniq{background:transparent;border:0;padding:0;border-radius:0}
.karta__ost{margin-top:auto;padding-top:var(--s2)}
.bolim--yuza .karta{background:var(--oq)}

.nishon{
  /* inline-flex EMAS: flex konteyner tor ekranda matnni sindirmaydi va
     ustunni max-content gacha kengaytirib yuboradi */
  display:inline-block;justify-self:start;
  padding:5px 10px;border-radius:var(--r-nishon);
  background:var(--blue-50);color:var(--blue-700);
  font-size:var(--mayda);line-height:1.2;font-weight:600;
  letter-spacing:var(--tracking-caps);text-transform:uppercase;
  justify-self:start;align-self:start;
}

/* ==========================================================================
   5. REGISTR — raqamlangan qatorlar (01/02/03), kartasiz
   ========================================================================== */
.reg{display:grid;gap:0}
.reg__q{
  display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--s5);
  padding-block:var(--s5);border-top:1px solid var(--chiziq-ichki);align-items:start;
}
.reg__q:first-child{border-top:0;padding-top:0}
.reg__n{
  font-size:var(--kichik);font-weight:700;color:var(--aksent-mayda);
  letter-spacing:var(--tracking-caps);font-variant-numeric:tabular-nums;padding-top:3px;
}
.reg__m{display:grid;gap:var(--s2)}
.reg__m h3{font-size:19px;line-height:1.3}
.reg--ikki{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,4vw,64px)}
.reg--ikki .reg__q:nth-child(2){border-top:0;padding-top:0}
.bolim--quyuq .reg__q{border-color:var(--chiziq-quyuq)}
.bolim--quyuq .reg__n{color:#8FC4EE}

/* ==========================================================================
   6. RAQAM — «oʻlchov ovozi»
   ========================================================================== */
.raqam__k{
  font-size:var(--raqam-katta);line-height:.92;font-weight:700;
  color:var(--navy);letter-spacing:-.045em;font-variant-numeric:tabular-nums;
}
.plyus{color:var(--aksent)}
.bolim--quyuq .raqam__k{color:#fff}
.raqam__o{font-size:var(--raqam-orta);line-height:1;font-weight:700;
  color:var(--navy);letter-spacing:-.04em}

/* ==========================================================================
   7. FORMA
   ========================================================================== */
/* align-content:start — 2 qatorli (Marka) va 3 qatorli (Model) maydon bir xil
   balandlikda va bir xil y da turadi. Qonun: doim yuqoriga tekislash. */
.maydon{display:grid;gap:9px;font-size:var(--kichik);align-content:start}
.maydon > span:first-child{font-weight:600;color:var(--navy);font-size:var(--kichik)}
.maydon input,.maydon select,.maydon textarea{
  width:100%;min-height:52px;padding:0 15px;
  background:var(--oq);border:1px solid var(--chiziq);border-radius:var(--r-tekis);
  color:var(--ink);font-size:var(--kichik);
  transition:border-color var(--anim) var(--ease),background var(--anim) var(--ease);
}
.maydon textarea{min-height:112px;padding:14px 15px;line-height:1.55;resize:vertical}
.maydon input::placeholder,.maydon textarea::placeholder{color:var(--slate)}
.maydon input:focus,.maydon select:focus,.maydon textarea:focus{
  outline:none;border-color:var(--aksent)}
/* Chevron: Chrome ning oʻz oʻqi padding ni inobatga olmaydi va burchak
   radiusiga yopishib qolardi (Otabek, 12.09) — oʻz belgimiz qoʻyildi. */
.maydon select{
  appearance:none;-webkit-appearance:none;padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2301244C' stroke-width='1.8' stroke-linecap='square' d='M1 1.4 6 6.2l5-4.8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 20px center;
}
.maydon select:disabled{
  background-color:var(--canvas);color:#93A4B6;cursor:not-allowed;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2393A4B6' stroke-width='1.8' stroke-linecap='square' d='M1 1.4 6 6.2l5-4.8'/%3E%3C/svg%3E");
}
.maydon__izoh{font-size:var(--mayda);line-height:1.45;color:var(--slate)}
.maydonlar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);align-items:start}

.chiplar{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{
  padding:10px 15px;background:var(--oq);color:var(--navy);
  border:1px solid var(--chiziq);border-radius:var(--r-nishon);
  font-size:var(--kichik);font-weight:600;cursor:pointer;
  transition:background var(--anim) var(--ease),border-color var(--anim) var(--ease),
             color var(--anim) var(--ease);
}
.chip:hover{border-color:var(--navy)}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}

.tablar{display:flex;gap:0;border-bottom:1px solid var(--chiziq)}
.tab{
  padding:14px 20px;background:none;border:0;border-bottom:2px solid transparent;
  margin-bottom:-1px;color:var(--slate);font-size:var(--kichik);font-weight:600;
  cursor:pointer;transition:color var(--anim) var(--ease),
             border-color var(--anim) var(--ease);
}
.tab:first-child{padding-left:0}
.tab:hover{color:var(--navy)}
.tab[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--aksent)}

.panel{
  padding:clamp(24px,2.6vw,40px);
  background:var(--oq);border:1px solid var(--chiziq);
  border-radius:var(--r-konteyner);
}
.panel__ost{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s8);
  flex-wrap:wrap;margin-top:var(--s8);padding-top:var(--s6);
  border-top:1px solid var(--chiziq-ichki);
}
.javobgarlik{font-size:var(--mayda);line-height:1.5;color:var(--slate);max-width:92ch}
/* panel ostida matn va tugma bitta qatorda qoladi: matn qolgan joyni egallaydi */
.panel__ost > .javobgarlik{flex:1 1 300px}

/* texnika plitalari */
.plitalar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s2)}
.plita{align-content:start;
  display:grid;justify-items:start;gap:10px;padding:16px 14px;
  background:var(--oq);border:1px solid var(--chiziq);border-radius:var(--r-nishon);
  color:var(--navy);font-size:13px;line-height:1.3;font-weight:600;
  text-align:left;cursor:pointer;
  transition:border-color var(--anim) var(--ease),background var(--anim) var(--ease);
}
.plita .ik{width:24px;height:24px;color:var(--slate);
  transition:color var(--anim) var(--ease)}
.plita:hover{border-color:var(--navy)}
.plita:hover .ik{color:var(--aksent)}
.plita.tanlangan{border-color:var(--navy);background:var(--navy);color:#fff}
.plita.tanlangan .ik{color:#fff}

/* ==========================================================================
   8. JADVAL
   ========================================================================== */
.jadval{font-size:var(--kichik);line-height:1.55}
.jadval th,.jadval td{
  padding:16px 18px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--chiziq-ichki);
}
.jadval thead th{
  font-size:var(--mayda);letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:var(--navy);font-weight:700;border-bottom:1px solid var(--chiziq);
  padding-top:0;
}
.jadval tbody th{color:var(--navy);font-weight:600;width:30%;padding-left:0}
.jadval td{color:var(--slate)}
.jadval tr:last-child th,.jadval tr:last-child td{border-bottom:0}

/* eslatma — chap chetida aksent chiziq */
.eslatma{
  border-left:2px solid var(--aksent);padding-left:var(--s5);
  font-size:var(--tana);line-height:var(--tana-lh);color:var(--slate);
}

/* ==========================================================================
   9. MIJOZDAN TEGI
   ========================================================================== */
/* Mijozdan kutilayotgan maʼlumot — punktir chegara `.slot` bilan bir tilda,
   ikkinchi darajali kegl va rang (Otabek: «MIJOZDAN yorliqlari ikkinchi darajali boʻlsin»). */
.mijozdan{
  display:inline-block;max-width:100%;overflow-wrap:anywhere;
  padding:1px 6px;border-radius:4px;
  background:none;border:1px dashed var(--chiziq);color:var(--slate);
  font-size:11px;line-height:1.4;font-weight:500;letter-spacing:0;
}
.bolim--quyuq .mijozdan,.futer .mijozdan,
body.hero-toliq .header:not(.header--qattiq) .mijozdan{
  background:none;border-color:rgba(255,255,255,.30);color:rgba(255,255,255,.78)}

/* ==========================================================================
   10. HEADER
   ========================================================================== */
.header{position:sticky;top:0;z-index:50;background:var(--oq);
  border-bottom:0}   /* Otabek 14.09: header ostidagi 1 px chiziq olib tashlandi (rangi keyingi qatlamlarda qolsa ham kengligi 0) */
.header__ust{border-bottom:1px solid var(--chiziq-ichki);background:var(--canvas)}
.header__ust .ich{
  display:flex;align-items:center;gap:var(--s5);min-height:40px;
  font-size:var(--mayda);color:var(--slate);flex-wrap:wrap;
}
.header__ust a{transition:color var(--anim) var(--ease)}
.header__ust a:hover{color:var(--navy)}
.header__ajrat{flex:1}
.til{display:inline-flex;gap:var(--s3);font-weight:600}
.til a[aria-current]{color:var(--navy)}

.header__asos .ich{display:flex;align-items:center;gap:var(--s8);min-height:76px}
.logo img{height:31px;width:auto}   /* 15.09 Otabek: laptopda biroz kattaroq — 24 → 31 px (mobil 22 da qoladi) */
@media (max-width:1000px){
  /* Otabek 14.09: mobilda logo biroz kattaroq — g6.css `.logo img{height:18px !important}` ni (0,2,1) bilan yengadi */
  .header .logo img{height:22px !important;width:auto !important}
}
/* Oq soʻz-belgi faqat toʻliq ekranli hero ustida koʻrsatiladi (hero.css).
   Bazaviy holat UMUMIY faylda boʻlishi shart — aks holda hero.css ulanmagan
   sahifalarda logotip ikkita boʻlib chiqadi. */
.logo__oq{display:none;filter:brightness(0) invert(1)}

.nav{display:flex;align-items:center;gap:var(--s6);margin-inline:auto;
  font-size:var(--kichik);font-weight:600}
.nav > a,.nav__band > a{
  display:inline-flex;align-items:center;gap:6px;padding-block:10px;
  color:var(--navy);transition:color var(--anim) var(--ease);
}
.nav > a:hover,.nav__band > a:hover{color:var(--aksent-matn)}
.nav .ik{width:13px;height:13px;color:var(--slate)}
.nav__band{position:relative}
.mega{
  position:absolute;left:50%;top:calc(100% + 12px);transform:translateX(-50%) translateY(-6px);
  width:min(1040px,92vw);background:var(--oq);border:1px solid var(--chiziq);
  border-radius:var(--r-konteyner);padding:var(--s8);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--anim) var(--ease),transform var(--anim) var(--ease),
             visibility var(--anim);
}
.nav__band:hover .mega,.nav__band:focus-within .mega{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%)}
.mega__ich{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s10);padding:0;width:auto}
.mega h4{margin-bottom:var(--s4);font-size:var(--mayda);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--slate)}
.mega ul{display:grid;gap:10px;font-size:var(--kichik);font-weight:400}
.mega ul a{color:var(--navy);display:inline-flex;gap:8px;align-items:baseline}
.mega ul a:hover{color:var(--aksent-matn)}
.mega__ost{grid-column:1/-1;padding-top:var(--s5);
  border-top:1px solid var(--chiziq-ichki)}

.qidiruv{
  display:flex;align-items:center;gap:10px;padding:0 14px;height:44px;
  border:1px solid var(--chiziq);border-radius:var(--r-tekis);
  background:var(--canvas);color:var(--slate);
  width:44px;overflow:hidden;
  transition:width var(--anim) var(--ease),background var(--anim) var(--ease);
}
.qidiruv:focus-within{width:min(460px,34vw);background:var(--oq);
  border-color:var(--aksent)}
.qidiruv__tugma{display:grid;place-items:center;flex:none;width:18px;height:18px;
  padding:0;border:0;background:none;color:inherit;cursor:pointer}
.qidiruv__tugma:focus-visible{outline:2px solid var(--aksent);outline-offset:4px;border-radius:2px}
.qidiruv input{border:0;background:none;outline:none;width:100%;
  font-size:var(--kichik);min-width:0}
.header__cta{display:inline-flex}
.burger{display:none;width:40px;height:40px;place-items:center;background:none;   /* 44 → 40 (Otabek 14.09: mobilda burger birozgina kichikroq) */
  border:1px solid var(--chiziq);border-radius:var(--r-tekis);
  color:var(--navy);cursor:pointer}

.mobil{border-top:1px solid var(--chiziq);background:var(--oq);padding-block:var(--s6)}
.mobil__yop{background:none;border:0;color:var(--slate);font-size:var(--kichik);
  padding:0 0 var(--s4);cursor:pointer}
.mobil__royxat{display:grid;gap:2px;margin-bottom:var(--s6)}
.mobil__royxat a{display:block;padding:14px 0;font-size:17px;font-weight:600;
  color:var(--navy);border-bottom:1px solid var(--chiziq-ichki)}

@media (max-width:1180px){
  .qidiruv{display:none}
  .nav{gap:var(--s5)}
}
@media (max-width:1000px){
  .nav,.header__cta{display:none}
  .burger{display:grid}
  .header__asos .ich{justify-content:space-between;min-height:64px}
  .header__ust{display:none}
}
@media (min-width:1001px){.mobil{display:none}}

@media (max-width:900px){
  .maydonlar{grid-template-columns:minmax(0,1fr)}
  .plitalar{grid-template-columns:repeat(3,minmax(0,1fr))}
  .reg--ikki{grid-template-columns:minmax(0,1fr)}
  .reg--ikki .reg__q:nth-child(2){border-top:1px solid var(--chiziq-ichki);
    padding-top:var(--s5)}
}
@media (max-width:560px){
  .plitalar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jadval th,.jadval td{padding:12px 10px}
  .jadval tbody th{width:34%}
}


/* ==========================================================================
   10. FOKUS — klaviatura bilan yurganda nishon doim koʻrinsin (12.09 koʻrigi)
   ========================================================================== */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--navy);outline-offset:2px;border-radius:2px}
.bolim--quyuq :focus-visible,.futer :focus-visible,.header :focus-visible{outline-color:#fff}

/* SAE / API / ISO belgilari qator oxirida ikkiga boʻlinmasin (5W-  /  30) */
.spek{white-space:nowrap}

/* 404 — qisqa yoʻnaltirish qatori */
.e404__yol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s8);margin-top:var(--s10)}