/* ==========================================================================
   cs-hero.css — BOSH-01 · HERO KARUSELI (castrol.com karkasi) · 2026-09-14
   Referens oʻlchovi (castrol.com, 1800×921): kadr 1463×823 (89vh) · pastki band 211 px,
   rgba(82,87,89,.7) + xiralashgan kadr · chiziqcha 22×2 · sarlavha 22/20 + oʻq · izoh 16/23,
   525 px · tugmalar oʻng-pastda · yon strelkalar 52 px, 37 % balandlikda.
   GRAUMANN moslashuvi: band OQ (Otabek 14.09; avval navy-shaffof + blur) · sarlavha 40 px (B pogʻona, navy) ·
   tugmalar sayt tugmalari (pill EMAS — radius qoidasi) · tracking ≤ 0 · soya 0.
   Mobil (≤1000): kadr 4:5 tepada, band ostida statik navy (castrol mobil tartibi).
   META orqali ulanadi (index: css: … cs-hero) — g5/g6 dan OLDIN yuklanadi, shuning uchun
   sarlavha oʻlchamida !important (g6 §0 `main .bolim[data-blok] h2` ni yengish uchun).
   ========================================================================== */
:root{
  --cs-band:#FFFFFF;               /* Otabek 14.09: band OQ (avval navy-shaffof rgba(1,20,42,.78) + blur) */
  --cs-h:788px;                    /* 14.09 kech-2 (Otabek): «har xil devicega moslanadi — bitta aniq razmer boʻlsin, rasm skrollda oʻzgarmasin».
                                      Avval clamp(560, 100svh − header, 860) edi — in-app brauzer/Safari panel yigʻilganda viewport oʻzgarib
                                      kadr qayta oʻlchanardi. Endi vh YOʻQ: qiymat faqat ekran KENGLIGIGA bogʻliq (1440×900 dagi eski qiymat = 788). */
  --cs-anim:720ms;
  --cs-avto:6000ms;                /* avtoaylanish davri — JS (BOSH-01) shu qiymatni oʻqiydi */
}

@media (max-width:1280px){ :root{--cs-h:620px} }   /* noutbuk (1001–1280): 1280×720 da header 112 + 620 → band tugmalari (≈706) birinchi ekranda */

/* --- qobiq --------------------------------------------------------------- */
/* g5-index §1 `main > section.bolim:not(.hs)` padding/border/background ni !important bilan beradi — shu yerda yengiladi */
main > section.bolim.hero.cs-hero[data-blok]{
  position:relative !important;display:flex;flex-direction:column;align-items:stretch;   /* hero.css align-items:flex-end ni bosadi */
  height:var(--cs-h);min-height:0;
  padding:0 !important;margin:0;
  background:#FFFFFF !important;       /* kadr konteyner ichida, band oq — sirt oq */
  overflow:hidden !important;
  border:0 !important;
}

/* --- kadr qutisi — KONTEYNER kengligida (logo chap cheti ↔ CTA oʻng cheti), band oqimda ---
   Otabek 14.09: «rasm uzun choʻzib yuborilgan, ikki chetini kes» — toʻliq kenglik emas. */
.cs-hero__kadrlar{
  position:relative;z-index:0;flex:1 1 auto;min-height:0;
  width:calc(min(var(--sahifa),100%) - 2 * var(--chet));margin:16px auto 0;   /* header chizigʻidan 16 px nafas */
  border-radius:var(--s6-r-kadr,14px);overflow:hidden;
  background:var(--navy);
}
.cs-hero__slayd{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity var(--cs-anim) var(--ease),visibility 0s linear var(--cs-anim);
}
.cs-hero__slayd.is-faol{opacity:1;visibility:visible;transition-delay:0s}
.cs-hero__kadr{position:absolute;inset:0;margin:0;display:block}
.cs-hero__kadr img{
  width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block;
  transform:scale(1.04);transition:transform 1600ms var(--ease);
}
.cs-hero__slayd.is-faol .cs-hero__kadr img{transform:scale(1)}
/* parda — kerak emas: header endi OQ va kadr ustida turmaydi (14.09), kadr toza koʻrinadi */
.cs-hero__parda{display:none}

/* --- yon strelkalar — kadr qutisi ichida, uning vertikal oʻrtasida ------- */
.cs-hero__strelka{
  position:absolute;z-index:3;top:50%;transform:translateY(-50%);
  width:50px;height:50px;padding:0;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.22);border-radius:50%;
  background:rgba(0,17,36,.48);color:#fff;
  cursor:pointer;
  transition:background var(--anim) var(--ease),border-color var(--anim) var(--ease);
}
.cs-hero__strelka .ik{width:18px;height:18px}
.cs-hero__strelka--old{left:clamp(16px,2vw,28px)}
.cs-hero__strelka--old .ik{transform:rotate(180deg)}
.cs-hero__strelka--key{right:clamp(16px,2vw,28px)}
.cs-hero__strelka:hover{background:rgba(0,17,36,.8);border-color:rgba(255,255,255,.5)}
.cs-hero__strelka:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* --- pastki band — oqimda, kadr ostida ----------------------------------- */
.cs-hero__band{
  position:relative;z-index:2;flex:none;
  background:var(--cs-band);
  color:var(--ink);
}
.cs-hero__ich{padding-top:26px;padding-bottom:32px}

/* chiziqcha-indikatorlar */
.cs-hero__nuqtalar{display:flex;gap:6px;margin:0 0 20px;padding:0}
.cs-hero__nuqtalar span{
  width:24px;height:14px;padding:0;border:0;background:transparent;
  position:relative;display:block;
}
.cs-hero__nuqtalar span::before{
  content:"";position:absolute;left:0;right:0;top:6px;height:2px;
  background:rgba(1,36,76,.22);transition:background var(--anim) var(--ease);
}
/* faol chiziqcha 6 s davomida chapdan SEKIN toʻladi (Otabek 14.09), toʻlgach keyingi kadr — JS taymeri bilan bir vaqtda */
.cs-hero__nuqtalar span::after{
  content:"";position:absolute;left:0;right:0;top:6px;height:2px;
  background:var(--navy);transform:scaleX(0);transform-origin:left;
}
@keyframes cs-tolish{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.cs-hero__nuqtalar span.is-tolmoqda::after{animation:cs-tolish var(--cs-avto,6000ms) linear forwards}
.cs-hero--sahifa .cs-hero__nuqtalar span::after{transform:none}     /* ichki sahifada karusel yoʻq */
@media (prefers-reduced-motion:reduce){
  .cs-hero__nuqtalar span[aria-selected="true"]::after{transform:none;animation:none}
}

/* matn qatlamlari — bitta katakda ustma-ust, faol koʻrinadi */
.cs-hero__matnlar{display:grid}
.cs-hero__matn{
  grid-area:1/1;
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:40px;align-items:end;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity 480ms var(--ease),transform 480ms var(--ease),visibility 0s linear 480ms;
}
.cs-hero__matn.is-faol{opacity:1;visibility:visible;transform:none;transition-delay:120ms,120ms,0s}
.cs-hero__yoz{display:grid;gap:10px;align-content:start;max-width:840px}   /* 40 px sarlavha 1440 da bir qatorga sigʻsin */

main .bolim.cs-hero[data-blok] .cs-hero__h{
  margin:0 !important;
  font-size:clamp(28px,2.8vw,40px) !important;line-height:1.08 !important;   /* Otabek 14.09: «biroz kattaroq» 30 → 40 (B pogʻona) */
  font-weight:600 !important;letter-spacing:-.03em !important;
  color:var(--navy) !important;text-align:left !important;max-width:none !important;
  text-wrap:balance;
}
.cs-hero__h a{
  color:inherit;text-decoration:none;
  display:inline;
}
.cs-hero__ox{white-space:nowrap}
.cs-hero__h a .ik{
  display:inline-block;            /* asos.css svg{display:block} — oʻq soʻz bilan bir qatorda */
  width:.72em;height:.72em;margin-left:.42em;vertical-align:-.04em;
  transition:transform var(--anim) var(--ease);
}
.cs-hero__h a:hover .ik{transform:translateX(4px)}
.cs-hero__h a:focus-visible{outline:2px solid var(--navy);outline-offset:4px}

main .bolim.cs-hero[data-blok] .cs-hero__lid{
  margin:0;max-width:60ch;
  font-size:16px;line-height:1.5;color:var(--slate);
  letter-spacing:var(--tracking);
}
.cs-hero__amal{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.cs-hero__amal .btn{margin:0}
/* hamma sahifada bitta rang: z-katalog.css `main .btn--asos{background:navy}` ni yengadi */
main .cs-hero .cs-hero__amal .btn--asos{background:var(--aksent);color:#fff}
main .cs-hero .cs-hero__amal .btn--asos:hover{background:#55A8E6}
.cs-hero__amal .btn__m{white-space:nowrap}
.cs-hero__amal .btn--chegara{border-color:var(--chiziq);color:var(--navy)}
/* ⚠ 15.09 · hoverda matn oq boʻlib yoʻqolardi (Otabek: «kursorni olib borsa matn oʻqilmay qoladi»).
   Sabab: bu qoida faqat fonni almashtirardi, `color:#fff` esa tizim.css:186 dagi
   `.btn--chegara:hover` (0,2,0) dan kelardi — ochiq fon + oq matn = 1.08:1.
   Endi rang shu yerda aniq yoziladi: navy matn ochiq fonda 12.9:1. */
.cs-hero__amal .btn--chegara:hover,
.cs-hero__amal .btn--chegara:focus-visible{background:var(--canvas);border-color:var(--navy);color:var(--navy)}
.cs-hero__amal .btn--chegara:hover .btn__m,
.cs-hero__amal .btn--chegara:hover .ik{color:var(--navy);fill:currentColor}

/* --- harakat kamaytirilgan ------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .cs-hero__slayd,.cs-hero__matn,.cs-hero__kadr img{transition:none}
  .cs-hero__kadr img{transform:none}
}

/* --- planshet/mobil: kadr 4:5 tepada, band ostida statik (castrol mobil) --- */
@media (max-width:1000px){
  main > section.bolim.hero.cs-hero[data-blok]{height:auto;padding:0 !important}
  /* kadr balandligi QOTIRILGAN (Otabek 14.09 kech-2: «bitta aniq razmer, rasm skrollda oʻzgarmasin»).
     Avval max-height:calc(100svh − 340px) edi — telefonda manzil paneli yigʻilganda kadr choʻzilib-qisqarardi.
     Planshet (601–1000) 480 px · telefon (≤600) 400 px: header 64 + kadr 400 + band ≈280 = ~745 px —
     zamonaviy telefonda ikkala tugma birinchi ekranda (Otabek 14.09 kech talabi saqlanadi). */
  .cs-hero__kadrlar{width:100%;margin:0;height:480px;aspect-ratio:auto;max-height:none;min-height:0;flex:none;border-radius:0}
  .cs-hero__strelka{top:50%;width:42px;height:42px}
  .cs-hero__strelka--old{left:12px}
  .cs-hero__strelka--key{right:12px}
  .cs-hero__strelka .ik{width:16px;height:16px}
  .cs-hero__band{background:var(--cs-band)}
  .cs-hero__ich{padding-top:22px;padding-bottom:28px}
  .cs-hero__nuqtalar{margin-bottom:16px}
  .cs-hero__matn{grid-template-columns:1fr;row-gap:18px;align-items:start}
  /* Otabek 14.09: mobilda izoh (lid) TUGMALAR OSTIDA — birinchi ekranda «Katalogni koʻrish» koʻrinib tursin.
     .cs-hero__yoz{display:contents} → sarlavha va lid toʻgʻridan-toʻgʻri gridda, tartib order bilan. */
  .cs-hero__yoz{display:contents}
  main .bolim.cs-hero[data-blok] .cs-hero__h{order:1}
  .cs-hero__amal{order:2}
  main .bolim.cs-hero[data-blok] .cs-hero__lid{order:3;margin-top:2px}
  main .bolim.cs-hero[data-blok] .cs-hero__h{font-size:clamp(26px,7vw,32px) !important}
  main .bolim.cs-hero[data-blok] .cs-hero__lid{font-size:15px}
  .cs-hero__amal{justify-content:stretch;flex-direction:column;align-items:stretch}
  main .cs-hero .cs-hero__amal .btn{justify-content:space-between;width:100%;place-self:auto}   /* kat.css `[data-blok^="KAT"] .btn{place-self:start;width:auto}` ni yengadi */
  main .cs-hero .cs-hero__amal .btn--chegara{justify-content:center}
  /* Otabek 14.09: mobilda tugma matni 1.2× (14 → 17 px); band matnlari CHAPDA, tugma ichidagi matn MARKAZDA */
  main .cs-hero .cs-hero__amal .btn{font-size:17px}
  main .cs-hero .cs-hero__amal .btn--asos{padding-left:48px}                 /* chapda oʻq qutisi (6+42) kengligicha joy — matn butun tugma markazida */
  main .cs-hero .cs-hero__amal .btn--asos .btn__m{flex:1 1 auto;text-align:center}
  main .cs-hero .cs-hero__amal .btn--chegara{justify-content:center}
}


/* ==========================================================================
   ICHKI SAHIFALAR — `.cs-hero--sahifa` (Otabek 14.09: «qolgan sahifalar ham shu kabi,
   faqat rasm 2× kichik»). Bitta kadr (karusel yoʻq): chiziqcha oʻrnida breadcrumb,
   sarlavhada oʻq yoʻq. Kadr balandligi = bosh sahifa kadrining yarmi:
   bosh = 100svh − header − 16 − band(212) ≈ 560 @900 → ichki ≈ 280.
   ========================================================================== */
main > section.bolim.hero.cs-hero--sahifa[data-blok]{height:auto}
.cs-hero--sahifa .cs-hero__kadrlar{
  flex:none;
  height:280px;   /* 14.09 kech-2: qotirilgan (avval clamp(200, (100svh − header − 16 − 212)/2, 320) = 280 @900). vh yoʻq. */
}
@media (max-width:1280px){ .cs-hero--sahifa .cs-hero__kadrlar{height:250px} }
.cs-hero--sahifa .cs-hero__slayd{position:absolute;inset:0;opacity:1;visibility:visible}
.cs-hero--sahifa .cs-hero__kadr img{transform:none}
.cs-hero--sahifa .cs-hero__matn{opacity:1;visibility:visible;transform:none;transition:none}
/* breadcrumb — chiziqchalar oʻrnida, oʻsha 20 px oraliq bilan */
.cs-hero__krosh{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 20px;font-size:13px;line-height:1.4;color:var(--slate);letter-spacing:var(--tracking)}
.cs-hero__krosh a{color:var(--slate);text-decoration:none;transition:color var(--anim) var(--ease)}
.cs-hero__krosh a:hover{color:var(--navy)}
.cs-hero__krosh [aria-current]{color:var(--navy);font-weight:600}
.cs-hero__krosh .cs-hero__aj{color:rgba(1,36,76,.28)}
/* «Katalogga qaytish» (mahsulot) — breadcrumb qatorida chapda */
.cs-hero__ort{display:inline-flex;align-items:center;gap:8px;color:var(--navy);font-weight:600;text-decoration:none}
.cs-hero__ort .ik{width:14px;height:14px;transform:rotate(180deg)}
/* matn havolasi (.ha) tugmalar qatorida — tugma bilan BIR TEKISLIKDA (Otabek 14.09);
   sahifa qatlamlari `.ha{place-self:start}` beradi → shu yerda markazga qaytariladi */
main .cs-hero .cs-hero__amal .ha{margin-inline:6px;place-self:auto;align-self:center}
@media (max-width:1000px){
  .cs-hero--sahifa .cs-hero__kadrlar{aspect-ratio:auto;height:280px;max-height:none}   /* ichki sahifa: planshet 280 · telefon 220 (pastda) */
  .cs-hero__krosh{margin-bottom:16px}
  main .cs-hero .cs-hero__amal .ha{margin:6px 0 0;justify-content:center;align-self:stretch}
}

/* mahsulot sahifasi — kadrsiz yoʻl qatori (M-00): breadcrumb + artikul/MADE IN GERMANY qatori */
.cs-hero--yol .cs-hero__ich{padding-top:22px;padding-bottom:6px}
.cs-hero--yol .cs-hero__krosh{margin-bottom:10px}
main .bolim.cs-hero[data-blok] .cs-hero__plita{margin:0;display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:12px;line-height:1.4;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--slate)}
.cs-hero__plita b{color:var(--navy)}

/* --- telefon (≤600): qotirilgan balandliklar (14.09 kech-2) --- */
@media (max-width:600px){
  .cs-hero__kadrlar{height:320px}   /* Otabek 14.09 kech-3: «rasmni biroz kichikroq — 2 ta button ham koʻrinishi kerak» (400 → 320: 390×844 da tugmalar pastki cheti ≈650 — Safari ham, Telegram ichki brauzeri ham koʻrsatadi) */
  .cs-hero--sahifa .cs-hero__kadrlar{height:220px}
}