*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%;display:block}
table{border-collapse:collapse;width:100%}
button{font:inherit}

:root{
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  --bg-app:#EEF2F6;
  --bg-sheet:#FFFFFF;
  --gutter-bg:#F4F6F9;
  --gutter-text:#5F6874;
  --hairline:#D5DCE5;
  --col-line:#EEF1F5;
  --ink:#1A2230;
  --muted:#5A6473;
  --navy:#0B2A4A;
  --selection:#1559C7;
  --band-bg:#EDF3FB;
  --band-hairline:#C9D6E8;
  --cta-bg:#FF8A2B;
  --cta-text:#0B1F33;
  --cta-hover:#FFA43B;
  --hi-bg:#FFF4CC;
  --hi-border:#E8C547;
  --tabs-bg:#E9EDF2;
  --tab-inactive:#4A5563;

  --radius:4px;
  --gutter-w:32px;
  --h-bosh:52px;
  --h-formula:30px;
  --h-yorliq:54px;
  --cookie-stack:0px;

  --z-header:200;
  --z-formula:190;
  --z-tabs:300;
  --z-float:310;
}

@media (min-width:37.5em){
  :root{ --gutter-w:48px; --h-bosh:64px; }
}

html,body{background:var(--bg-app)}
body{
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  padding-bottom:var(--h-yorliq);
}

a{color:var(--selection)}

[hidden]{display:none!important}

.otish-katak{
  position:absolute;
  left:8px; top:-48px;
  background:var(--navy); color:#fff;
  padding:10px 16px; border-radius:var(--radius);
  z-index:1000;
  text-decoration:none;
  transition:top .15s ease;
}
.otish-katak:focus{ top:8px; }

a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--selection);
  outline-offset:2px;
}

.bosh-qator{
  position:sticky; top:0; z-index:var(--z-header);
  background:var(--navy);
  height:var(--h-bosh);
}
.bosh-qator-ichki{
  max-width:1180px; margin-inline:auto; height:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:16px;
}
.bosh-qator-belgi{ display:flex; align-items:center; }
.bosh-qator-belgi img{ height:20px; width:auto; }
@media (min-width:37.5em){
  .bosh-qator-belgi img{ height:24px; }
}

.formula-satri{
  position:sticky; top:var(--h-bosh); z-index:var(--z-formula);
  height:var(--h-formula);
  background:var(--gutter-bg);
  border-bottom:1px solid var(--hairline);
}
.formula-satri-ichki{
  max-width:1180px; margin-inline:auto; height:100%;
  display:flex; align-items:center; gap:10px;
  padding-inline:16px;
  font-family:var(--font-mono); font-size:.75rem; color:var(--muted);
}
.formula-nom{
  flex:0 0 auto;
  font-weight:700; color:var(--navy);
  background:var(--bg-sheet); border:1px solid var(--hairline); border-radius:var(--radius);
  padding:2px 8px;
}
.formula-fx{ flex:0 0 auto; font-style:italic; color:var(--selection); }
.formula-matn{
  flex:1 1 auto; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.formula-matn.formula-yangilandi{ animation:formula-soldirish .4s ease; }
@keyframes formula-soldirish{ from{opacity:0} to{opacity:1} }

.varaq{
  max-width:1180px; margin-inline:auto;
  background:var(--bg-sheet);
}

.ustun-harflar{
  display:flex;
  background:var(--gutter-bg);
  border-bottom:1px solid var(--hairline);
  font-family:var(--font-mono); font-size:.7rem; color:var(--gutter-text);
  text-align:center;
}
.ustun-burchak{ flex:0 0 var(--gutter-w); border-right:1px solid var(--hairline); }
.ustun-harflar span:not(.ustun-burchak){
  flex:1 1 0; padding:6px 0;
  border-left:1px solid var(--col-line);
}
.ustun-harflar span:not(.ustun-burchak):first-of-type{ border-left:none; }

.varaq-badan{
  position:relative;
  counter-reset:qator;
  padding-left:var(--gutter-w);
  background-image:repeating-linear-gradient(to right,var(--col-line) 0,var(--col-line) 1px,transparent 1px,transparent 12.5%);
  background-origin:content-box;
  background-clip:content-box;
}
.varaq-badan::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:var(--gutter-w);
  background:var(--gutter-bg);
  border-right:1px solid var(--hairline);
}

.bolim{
  position:relative;
  padding:0 20px 28px 0;
  scroll-margin-top:calc(var(--h-bosh) + var(--h-formula) + 10px);
}
.bolim > *{ margin-top:14px; position:relative; }
.bolim > *:first-child{ margin-top:0; }
@media (min-width:37.5em){
  .bolim > *{ margin-top:18px; }
}

.bolim > :is(h1, h2, h3, p, ul, .jadval-quti, .harakat-qatori, details.savol, .oyin-kataklar, .provayder-qatori, .tolov-belgilar){
  counter-increment:qator;
}
.bolim > :is(h1, h2, h3, p, ul, .jadval-quti, .harakat-qatori, details.savol, .oyin-kataklar, .provayder-qatori, .tolov-belgilar)::before{
  content:counter(qator);
  content:counter(qator) / "";
  position:absolute;
  left:calc(var(--gutter-w) * -1); width:var(--gutter-w);
  top:.2em;
  text-align:center;
  font-family:var(--font-mono); font-size:.72rem; color:var(--gutter-text);
}

.bolim > h1{
  margin-top:0;
  font-size:clamp(1.4rem,4vw + .5rem,2.4rem);
  line-height:1.25;
  color:var(--navy);
}

.bolim > h2{
  margin:28px -20px 20px calc(var(--gutter-w) * -1);
  padding:14px 20px 14px var(--gutter-w);
  border-top:1px solid var(--band-hairline);
  border-bottom:1px solid var(--band-hairline);
  color:var(--navy);
  font-size:1.25rem;
  font-weight:700;
}
.bolim > h2:first-child{ margin-top:0; }
.bolim[id] > h2::before{ left:0; width:var(--gutter-w); }
.bolim > h2::after{
  content:"";
  position:absolute; inset:0;
  background:var(--band-bg);
  transform-origin:left;
  transform:scaleX(0);
  z-index:-1;
}
.bolim > h2.varaq-korindi::after{
  transform:scaleX(1);
  animation:varaq-tolish .5s ease-out;
}
@keyframes varaq-tolish{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

.bolim > h3{
  font-size:1.05rem; font-weight:700; color:var(--navy);
  border-left:3px solid var(--cta-bg);
  padding-left:12px;
}

.bolim > p{ max-width:760px; color:var(--ink); }

.bolim > ul{ list-style:none; padding-left:0; max-width:760px; }
.bolim > ul > li{ position:relative; padding-left:22px; }
.bolim > ul > li + li{ margin-top:8px; }
.bolim > ul > li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:8px; height:8px; background:var(--selection);
}

.jadval-quti{ overflow-x:auto; border:1px solid var(--hairline); }
.jadval-quti table{ min-width:520px; font-variant-numeric:tabular-nums; }
.jadval-quti th, .jadval-quti td{
  border:1px solid var(--hairline);
  padding:10px 12px;
  text-align:left;
  position:relative;
  vertical-align:top;
}
.jadval-quti thead th{ background:var(--gutter-bg); color:var(--ink); font-weight:700; }
#umumiy .jadval-quti th:first-child, #umumiy .jadval-quti td:first-child{
  font-family:var(--font-mono); font-weight:600;
}
@media (hover:hover) and (pointer:fine){
  .jadval-quti td:hover{ outline:2px solid var(--selection); outline-offset:-2px; z-index:1; }
  .jadval-quti td:hover::after{
    content:""; position:absolute; right:-1px; bottom:-1px; width:7px; height:7px; background:var(--selection);
  }
}
.jadval-quti td:focus-within{ outline:2px solid var(--selection); outline-offset:-2px; z-index:1; }
.jadval-quti td:focus-within::after{
  content:""; position:absolute; right:-1px; bottom:-1px; width:7px; height:7px; background:var(--selection);
}

.harakat-qatori{ display:flex; }
.harakat{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--cta-bg); color:var(--cta-text);
  font-weight:700; text-decoration:none;
  border-radius:var(--radius);
  padding:11px 20px;
}
.harakat:hover, .harakat:focus-visible{ background:var(--cta-hover); }
.harakat-kichik{ padding:8px 16px; font-size:.85rem; }
@media (min-width:37.5em){
  .harakat{ padding:13px 24px; }
}

.raqam-kataklar{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  max-width:420px;
}
.raqam-katak{
  position:relative;
  background:var(--hi-bg); border:1px solid var(--hi-border); border-radius:var(--radius);
  padding:14px 12px;
}
.raqam-katak-ref{
  position:absolute; top:4px; right:6px;
  font-family:var(--font-mono); font-size:.65rem; color:#8A7122;
}
.raqam-katak-son{
  display:block;
  font-family:var(--font-mono); font-weight:700; font-size:1.3rem; color:var(--navy);
}

.oyin-kataklar{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
}
.oyin-katak{
  position:relative; display:block;
  aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden;
}
.oyin-katak img{ width:100%; height:100%; object-fit:cover; }
.oyin-qoplama{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(11,42,74,.5);
  opacity:0; transition:opacity .2s ease;
}
.oyin-katak:hover .oyin-qoplama, .oyin-katak:focus-visible .oyin-qoplama{ opacity:1; }
.oyin-qoplama svg{ width:36px; height:36px; fill:#fff; }

.provayder-qatori{
  display:flex; flex-wrap:wrap; align-items:center; gap:22px;
}
.provayder-qatori img{
  max-height:32px; width:auto;
  filter:grayscale(1); opacity:.65;
  transition:filter .2s ease, opacity .2s ease;
}
.provayder-qatori img:hover{ filter:none; opacity:1; }

.tolov-belgilar{
  display:flex; flex-wrap:wrap; align-items:center; gap:18px;
}
.tolov-belgilar img{ max-height:22px; width:auto; }

details.savol{
  border:1px solid var(--hairline); border-radius:var(--radius);
}
.savol-sarlavha{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; cursor:pointer;
  list-style:none;
}
.savol-sarlavha::-webkit-details-marker{ display:none; }
.savol-sarlavha h4{ margin:0; font-size:1rem; font-weight:600; color:var(--ink); }
.savol-belgi{
  flex:0 0 28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--hairline); border-radius:var(--radius);
  font-family:var(--font-mono); font-weight:700; color:var(--selection);
}
.savol-belgi::before{ content:"+"; }
details.savol[open] .savol-belgi::before{ content:"\2212"; }
details.savol > p{ margin:0 14px 16px 54px; max-width:700px; color:var(--muted); }

.varaq-yorliqlari{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-tabs);
  background:var(--tabs-bg); border-top:1px solid var(--hairline);
  height:var(--h-yorliq);
}
.varaq-yorliqlari::before, .varaq-yorliqlari::after{
  content:""; position:absolute; top:0; bottom:0; width:20px; z-index:1; pointer-events:none;
}
.varaq-yorliqlari::before{ left:0; background:linear-gradient(90deg,var(--tabs-bg),transparent); }
.varaq-yorliqlari::after{ right:0; background:linear-gradient(270deg,var(--tabs-bg),transparent); }
.varaq-yorliqlari-ichki{
  height:100%;
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.varaq-yorliqlari-ichki::-webkit-scrollbar{ display:none; }
.varaq-yorliqlari-ichki a{
  flex:0 0 auto;
  display:flex; align-items:center;
  padding:0 14px;
  font-size:.78rem; font-weight:600; color:var(--tab-inactive);
  text-decoration:none;
  border-top:3px solid transparent;
  white-space:nowrap;
  scroll-snap-align:start;
  transition:border-top-color .2s ease, background-color .2s ease, color .2s ease;
}
.varaq-yorliqlari-ichki a[aria-current]{
  background:var(--bg-sheet); color:var(--navy);
  border-top-color:var(--selection);
}

.varaq-oyoq{ background:var(--navy); color:#fff; }
.varaq-oyoq-ichki{
  max-width:1180px; margin-inline:auto;
  padding:28px 20px;
  display:flex; flex-direction:column; gap:12px;
}
.varaq-oyoq-belgi{ display:inline-flex; }
.varaq-oyoq-belgi img{ height:20px; width:auto; }
.varaq-oyoq-ichki p{ margin:0; color:#C9D6E8; font-size:.9rem; max-width:640px; }

.cookie-katak{
  position:fixed; left:12px; right:12px;
  bottom:calc(var(--h-yorliq) + 12px);
  max-width:420px; margin-inline:auto;
  z-index:var(--z-float);
  background:var(--bg-sheet); border:1px solid var(--hairline); border-radius:var(--radius);
  box-shadow:0 2px 10px rgba(11,42,74,.12);
  padding:6px 10px;
  display:flex; align-items:center; flex-wrap:nowrap; gap:8px;
  opacity:1; visibility:visible;
  transition:opacity .2s ease, visibility 0s linear 0s;
}
.cookie-katak.cookie-vaqtincha-yashirin{
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease, visibility 0s linear .2s;
}
.cookie-katak p{ margin:0; font-size:14px; line-height:1.25; color:var(--ink); flex:1 1 auto; min-width:0; }
.cookie-katak .harakat{ padding:7px 12px; font-size:13px; white-space:nowrap; flex:0 0 auto; }
@media (min-width:37.5em){
  .cookie-katak{ padding:12px 14px; gap:10px; flex-wrap:wrap; }
  .cookie-katak p{ font-size:.85rem; line-height:1.5; flex-basis:180px; }
  .cookie-katak .harakat{ padding:8px 16px; font-size:.85rem; }
}

.tepaga-katak{
  position:fixed; right:16px;
  bottom:calc(var(--h-yorliq) + 12px + var(--cookie-stack));
  z-index:var(--z-float);
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  background:var(--navy); color:#fff;
  border:none; border-radius:var(--radius);
  font-size:1.1rem; cursor:pointer;
  transition:bottom .2s ease;
}

body.xato-sahifa{ padding-bottom:0; }

.xato-katak{
  display:inline-block;
  font-family:var(--font-mono); font-weight:700;
  font-size:clamp(2.2rem,9vw,4rem);
  color:#B3261E;
  background:#FDECEA; border:1px solid #F3C6C1; border-radius:var(--radius);
  padding:.15em .4em;
}
.xato-havolalar{ list-style:none; padding:0; max-width:760px; }
.xato-havolalar li + li{ margin-top:10px; }
.xato-havolalar a{ color:var(--selection); font-weight:700; text-decoration:underline; }

@media (min-width:37.5em){
  .bolim{ padding-right:28px; }
  .bolim > h2{ margin-right:-28px; padding-right:28px; }
}

@media (min-width:68.75em){
  #umumiy{
    display:grid;
    grid-template-columns:1fr 320px;
    column-gap:32px;
  }
  #umumiy > h1{ grid-column:1; grid-row:1; }
  #umumiy > p{ grid-column:1; grid-row:2; }
  #umumiy > .harakat-qatori{ grid-column:1; grid-row:3; }
  #umumiy > .raqam-kataklar{ grid-column:2; grid-row:1 / 4; align-self:center; max-width:none; }
  #umumiy > .jadval-quti{ grid-column:1 / 3; grid-row:4; }
}

html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .otish-katak{ transition:none; }
  .formula-matn.formula-yangilandi{ animation:none; }
  .bolim > h2.varaq-korindi::after{ animation:none; }
  .oyin-qoplama{ transition:none; }
  .provayder-qatori img{ transition:none; }
  .varaq-yorliqlari-ichki a{ transition:none; }
  .tepaga-katak{ transition:none; }
  .cookie-katak{ transition:none; }
  .cookie-katak.cookie-vaqtincha-yashirin{ transition:none; }
}
