/* ==========================================================================
   ASOS — reset, karkas, sirt
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
/* Yopishqoq header 118 px — anker maqsadi uning ostida qolib ketmasligi uchun
   scroll-padding 112 → 126 px (7 sahifada ham header bir xil balandlikda). */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:126px}
body{
  margin:0;
  font-family:var(--shrift);
  font-size-adjust:0.48;   /* Outfit x-balandligi past (tokenlar.css SHRIFT izohi) */
  font-synthesis:none;     /* brauzer soxta qalin/kursiv yasamasin — yuzlar oʻzimizda */
  font-size:var(--tana); line-height:var(--tana-lh);
  letter-spacing:var(--tracking);
  color:var(--ink);
  background:var(--oq);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
button,input,select,textarea{font:inherit;letter-spacing:inherit;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0}
table{border-collapse:collapse;width:100%}

/* soya butun saytda yoʻq — ajratish sirt juftligi va 1 px chiziq bilan */
*{box-shadow:none}

/* ---------- SARLAVHA SHKALASI ---------- */
h1,h2,h3,h4{margin:0;font-weight:700;color:var(--navy);letter-spacing:var(--tracking-zich)}
h1{font-size:var(--h1);line-height:var(--h1-lh)}
h2{font-size:var(--h2);line-height:var(--h2-lh)}
h3{font-size:var(--h3);line-height:var(--h3-lh);letter-spacing:var(--tracking)}
h4{font-size:var(--h4);line-height:var(--h4-lh);letter-spacing:var(--tracking)}

/* sarlavha ichidagi bitta aksent ibora — Manufact imzosi */
.urgu{color:var(--aksent-matn)}

.lid{font-size:var(--lid);line-height:var(--lid-lh);color:var(--slate)}
.tana-k{font-size:var(--tana);line-height:var(--tana-lh);color:var(--slate);max-width:36em}
.kichik{font-size:var(--kichik);line-height:var(--kichik-lh);color:var(--slate)}

/* ---------- QATOR SINISHI (Otabek, 12.09) ----------
   «shu va shunga oʻxshash matnlarda oʻzi 2 qatorga sigʻsa 2 qator yozaver»
   balance — sarlavha qatorlarini tenglashtiradi, yolgʻiz soʻz qolmaydi.
   pretty  — tana matnining oxirgi qatorida bir soʻz yolgʻiz qolishini yoʻqotadi. */
h1,h2,h3,h4,.yorliq{text-wrap:balance}
p,li,dd,dt,figcaption,blockquote,td{text-wrap:pretty}
/* qisqa yordamchi matnlar — balance: ikki qator teng boʻlinadi, yolgʻiz soʻz qolmaydi */
.lid,.javobgarlik,.mayda,.kichik,.eslatma,.tana-k,.futer__tavsif,.nishon,.slot__yoz,
.mah-tarif,.tan-boshqa__nima,.kat-topildi{text-wrap:balance}
.mayda{font-size:var(--mayda);line-height:var(--mayda-lh);color:var(--slate)}

/* ---------- KARKAS ---------- */
.ich{width:var(--sahifa);margin-inline:auto;padding-inline:var(--chet)}
.ich--tor{max-width:1180px}

.bolim{position:relative;padding-block:var(--bolim-pad);background:var(--pogona-1)}
.bolim--yuza{background:var(--pogona-2)}
.bolim--quyuq{background:var(--navy);color:rgba(255,255,255,.78)}
.bolim--quyuq h1,.bolim--quyuq h2,.bolim--quyuq h3,.bolim--quyuq h4{color:#fff}
.bolim--quyuq .lid,.bolim--quyuq .tana-k,.bolim--quyuq .mayda,
.bolim--quyuq .kichik,.bolim--quyuq .eslatma,.bolim--quyuq .javobgarlik{color:rgba(255,255,255,.7)}
/* Quyuq band ichidagi OQ panel — matn yana quyuq rangga qaytadi
   (aks holda oq fonda oq sarlavha chiqib, matn koʻrinmay qolardi). */
.bolim--quyuq .panel h1,.bolim--quyuq .panel h2,
.bolim--quyuq .panel h3,.bolim--quyuq .panel h4{color:var(--navy)}
.bolim--quyuq .panel .lid,.bolim--quyuq .panel .tana-k,.bolim--quyuq .panel .mayda,
.bolim--quyuq .panel .kichik,.bolim--quyuq .panel .eslatma,
.bolim--quyuq .panel .javobgarlik{color:var(--slate)}
/* Himoya qoidasi: sahifa CSS lari `[data-blok^="XXX-"] .javobgarlik` kabi
   bir xil ogʻirlikdagi selektor bilan kulrang rang berib, quyuq bandda matnni
   oʻqilmas qilib qoʻyishi mumkin (2.66:1). Ikki marta yozilgan klass
   ogʻirlikni bitta pogʻona oshiradi va faqat quyuq bandda ishlaydi. */
.bolim--quyuq.bolim--quyuq .javobgarlik,
.bolim--quyuq.bolim--quyuq .eslatma,
.bolim--quyuq.bolim--quyuq .kichik{color:rgba(255,255,255,.72)}
.bolim--quyuq.bolim--quyuq .panel .javobgarlik,
.bolim--quyuq.bolim--quyuq .panel .eslatma,
.bolim--quyuq.bolim--quyuq .panel .kichik{color:var(--slate)}
.bolim--zich{padding-block:var(--bolim-pad-kichik)}

/* bloklar orasidagi ajralish: FAQAT fon almashuvi.
   Otabek 14.09: «2 blok orasidagi boshqa rangdagi chiziq olib tashlansin» — 1px --chiziq bekor qilindi. */
.bolim + .bolim{border-top:0}
.bolim--quyuq + .bolim,.bolim + .bolim--quyuq{border-top:0}

/* ---------- FON ----------
   Don (grain) teksturasi va vertikal toʻr chiziqlari OLIB TASHLANDI (Otabek, 11.09).
   Bo'limlar faqat sirt almashuvi va 1 px chiziq bilan ajraladi.
   `.tor` klassi endi hech nima qilmaydi — markupda qolgani zarar qilmaydi. */

.bolim > *{position:relative;z-index:1}

/* ---------- GRID ---------- */
.grid{display:grid;gap:var(--grid-gap)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.g-7-5{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,4.4vw,72px)}
.g-6-6{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,4.4vw,72px)}
.g-5-7{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4.4vw,72px)}

/* matn ham, shakl ham DOIM yuqoriga tekislanadi */
.grid,.g-2,.g-3,.g-5,.g-7-5,.g-6-6,.g-5-7{align-items:start}

/* ---------- BOʻLIM SARLAVHASI ---------- */
/* Sarlavha oʻlchovi — Manufact da sarlavha KENG, lid esa TOR.
   ch emas, em: oʻlchov sarlavhaning oʻz keglidan hisoblanadi. */
.bosh{display:grid;gap:var(--s5);margin-bottom:clamp(36px,3.6vw,56px)}
.bosh h1{max-width:13em}
.bosh h2{max-width:15em}
.bosh--tor .lid,.bosh--tor .tana-k{max-width:38em}
.bosh .lid{max-width:38em}

/* boʻlim sarlavhasi + oʻng tomonda tugma turgan qator */
.bosh-qator{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s10);flex-wrap:wrap;margin-bottom:clamp(36px,3.6vw,56px);
}
.bosh-qator .bosh{margin-bottom:0}

/* ---------- HARAKAT ---------- */
.kir{opacity:0;transform:translateY(14px);
  transition:opacity 620ms var(--ease),transform 620ms var(--ease)}
.kir.korindi{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .kir{opacity:1;transform:none;transition:none}
  *{animation:none!important;transition-duration:1ms!important}
}

/* ---------- RESPONSIV KARKAS ---------- */
@media (max-width:1100px){
  .g-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-7-5,.g-6-6,.g-5-7{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  :root{--grid-gap:16px}
  .g-2,.g-3,.g-5{grid-template-columns:minmax(0,1fr)}
  html{scroll-padding-top:72px}
}