/* ============================================================
   Sof tilim — dizayn tizimi
   Ranglar, tipografika va umumiy komponentlar.
   Platformaning barcha sahifalari shu fayldan foydalanadi.
   ============================================================ */

:root {
  /* Sof tilim hujjat standarti: xatboshi */
  --st-xatboshi: 1.27cm;
  /* Brend ranglari — logotipdan olingan */
  --st-navy:        #022C6A;
  --st-blue:        #0B57D0;
  --st-blue-bright: #0068EE;
  --st-sky:         #22BBFB;
  --st-green:       #0FA638;
  --st-red:         #D32F2F;

  /* Bo'lim ranglari */
  --st-mod-dict:   #0B57D0;
  --st-mod-editor: #0F9D58;
  --st-mod-state:  #DD6B0D;
  --st-mod-ai:     #6D4AFF;
  --st-mod-game:   #8E2B20;
  --st-mod-taqvim: #0B6E5F;

  /* Neytral shkala */
  --st-ink:      #10192B;
  --st-ink-soft: #46566E;
  --st-muted:    #6B7B92;
  --st-line:     #E2E9F2;
  --st-line-soft:#EFF3F9;
  --st-panel:    #FFFFFF;
  --st-bg:       #F6F8FC;
  --st-bg-tint:  #EEF3FB;

  /* Tipografika */
  --st-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Radius va soya */
  --st-r-sm: 8px;
  --st-r:    14px;
  --st-r-lg: 22px;
  --st-shadow-1: 0 1px 2px rgba(16, 25, 43, .06), 0 1px 3px rgba(16, 25, 43, .04);
  --st-shadow-2: 0 4px 14px rgba(16, 25, 43, .07), 0 1px 3px rgba(16, 25, 43, .05);
  --st-shadow-3: 0 18px 44px rgba(2, 44, 106, .13);

  /* O'lchamlar */
  --st-wrap: 1280px;
  --st-nav-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--st-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--st-ink);
  background: var(--st-bg);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }

a { color: var(--st-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; line-height: 1.22; font-weight: 700; letter-spacing: -.015em; }

.st-wrap {
  width: 100%;
  max-width: var(--st-wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.st-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Zagruzka ekrani ---------------------------------- */

.st-splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: #fff;
  transition: opacity .55s ease, visibility .55s ease;
}
.st-splash__inner { text-align: center; }
.st-splash__logo {
  width: min(440px, 74vw);
  animation: st-rise .8s cubic-bezier(.2, .7, .3, 1) both;
}
.st-splash__tag {
  margin-top: 20px;
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--st-muted);
  animation: st-rise .8s .18s cubic-bezier(.2, .7, .3, 1) both;
}
.st-splash__bar {
  width: 132px; height: 3px; margin: 26px auto 0;
  border-radius: 999px; background: var(--st-line); overflow: hidden;
}
.st-splash__bar i {
  display: block; height: 100%; width: 40%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--st-sky), var(--st-blue));
  animation: st-load 1.15s ease-in-out infinite;
}
.st-splash.is-done { opacity: 0; visibility: hidden; }

@keyframes st-rise {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes st-load {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}

/* ---------- Banner ------------------------------------------- */

.st-banner {
  position: relative;
  background: linear-gradient(100deg, var(--st-navy), var(--st-blue) 62%, #0a63d8);
  color: #fff;
  text-align: center;
  padding: 15px 56px;
}
.st-banner__title { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.st-banner__text  { font-size: 13.5px; opacity: .88; margin-top: 2px; }
.st-banner__title a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.st-banner__close {
  position: absolute; top: 50%; right: 16px; transform: translateY(-50%);
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff;
  font-size: 17px; line-height: 1; cursor: pointer;
}
.st-banner__close:hover { background: rgba(255, 255, 255, .26); }
.st-banner__close[hidden] { display: none; }
.st-banner.is-hidden { display: none; }

/* ---------- Navigatsiya -------------------------------------- */

.st-nav {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--st-line);
}
.st-nav__in {
  height: var(--st-nav-h);
  display: flex; align-items: center; gap: 16px;
}
.st-nav__logo { display: flex; align-items: center; flex: none; }
.st-nav__logo img { width: 152px; display: block; }
.st-nav__logo:hover { text-decoration: none; }

.st-nav__menu {
  display: flex; align-items: center; gap: 4px;
  margin-left: auto; list-style: none; padding: 0;
}
.st-nav__menu a {
  display: block; padding: 8px 11px; border-radius: 10px;
  font-size: 14px; font-weight: 500; color: var(--st-ink-soft);
  white-space: nowrap;
}
.st-nav__menu a:hover { background: var(--st-bg-tint); color: var(--st-navy); text-decoration: none; }
.st-nav__menu a.is-active { color: var(--st-blue); background: var(--st-bg-tint); font-weight: 600; }
.st-nav__auth { display: none; }
/* Kirish holatiga qarab yashiriladi (hisob.js) — `hidden` har doim ustun */
.st-nav__auth[hidden], .st-nav__side .st-btn[hidden] { display: none !important; }

.st-nav__side { display: flex; align-items: center; gap: 10px; flex: none; }

.st-lang { display: flex; padding: 3px; background: var(--st-bg-tint); border-radius: 999px; }
.st-lang button {
  border: 0; background: transparent; cursor: pointer;
  padding: 5px 11px; border-radius: 999px;
  font: 600 12.5px/1 var(--st-font); color: var(--st-muted);
}
.st-lang button:hover { color: var(--st-navy); }
.st-lang button.is-active { background: #fff; color: var(--st-navy); box-shadow: var(--st-shadow-1); }

.st-burger {
  display: none; width: 42px; height: 42px; border: 1px solid var(--st-line);
  background: #fff; border-radius: 11px; cursor: pointer;
  align-items: center; justify-content: center;
}
.st-burger span { display: block; width: 18px; height: 2px; background: var(--st-ink); border-radius: 2px; position: relative; }
.st-burger span::before, .st-burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px;
  background: var(--st-ink); border-radius: 2px;
}
.st-burger span::before { top: -6px; }
.st-burger span::after  { top: 6px; }

/* ---------- Tugmalar ----------------------------------------- */

.st-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 11px; border: 1px solid transparent;
  font: 600 14.5px/1.2 var(--st-font); cursor: pointer; white-space: nowrap;
  transition: background .16s, border-color .16s, color .16s, transform .16s;
}
.st-btn:hover { text-decoration: none; transform: translateY(-1px); }
.st-btn--primary { background: var(--st-blue); color: #fff; }
.st-btn--primary:hover { background: #0a4cb8; }
.st-btn--ghost { background: #fff; color: var(--st-navy); border-color: var(--st-line); }
.st-btn--ghost:hover { border-color: #c9d7ea; background: #fbfcfe; }
.st-btn--lg { padding: 13px 24px; font-size: 15.5px; border-radius: 13px; }

/* ---------- Hero --------------------------------------------- */

.st-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 420px at 50% -140px, #e3edfd 0%, rgba(227, 237, 253, 0) 70%),
    linear-gradient(#fff, var(--st-bg));
  border-bottom: 1px solid var(--st-line-soft);
  padding: 74px 0 66px;
  text-align: center;
}
.st-hero__logo {
  width: min(520px, 86vw);
  animation: st-rise .7s cubic-bezier(.2, .7, .3, 1) both;
}
.st-hero__lead {
  max-width: 640px; margin: 26px auto 0;
  font-size: 18px; color: var(--st-ink-soft);
  animation: st-rise .7s .1s cubic-bezier(.2, .7, .3, 1) both;
}
.st-hero__cta {
  margin-top: 30px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  animation: st-rise .7s .18s cubic-bezier(.2, .7, .3, 1) both;
}

/* Hero panjarasi: logotip markazda, ikki yonida bittadan bo'lim.

   Manba tartibi — markaz, chap kartochka, o'ng kartochka.
   Telefonda ular shu tartibda ustma-ust tushadi, keng ekranda
   esa ustun raqamlari bilan joyiga qo'yiladi. Shuning uchun
   `order` emas, `grid-column` ishlatilgan: ekran o'qigich
   manba tartibida o'qiydi va logotip baribir birinchi bo'ladi. */

.st-hero__panjara { display: grid; gap: 20px; }

/* Ikki yondagi kartochka BIR XIL o'lchamda bo'ladi — qatorga
   cho'ziladi. Aks holda taqvimlisi ikkinchisidan baland chiqib,
   logotipning ikki yoni nomutanosib ko'rinardi.

   Ichidagi matn tepadan boshlanadi — pastdagi qatordagi
   kartochkalar ham shunday, ikkalasining belgisi bir chiziqda
   turadi. */
.st-hero__karta { text-align: left; align-self: stretch; }

/* Ikkalasi bir xil balandlikda bo'lgach, matni kaltarog'ida pastda
   bo'sh joy qoladi. «Kirish» havolasi o'sha bo'shliqning ostiga
   tushadi — ikki kartochkada ham bitta chiziqda turadi. */
.st-hero__karta > div:last-child {
  display: flex; flex-direction: column; flex: 1 1 auto;
}
.st-hero__karta .st-card__go { margin-top: auto; padding-top: 6px; }
.st-hero__karta .st-card__icon { margin: 0; }

@media (min-width: 700px) {
  /* Planshetda logotip butun enga, kartochkalar ostida yonma-yon */
  .st-hero__panjara { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .st-hero__markaz { grid-column: 1 / -1; }
}

@media (min-width: 1000px) {
  .st-hero__panjara {
    /* Yon kartochkalar ataylab torroq — ilgari ular juda katta
       bo'lib, markazdagi logotipni siqib qo'ygan edi. */
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.95fr) minmax(0, .92fr);
    align-items: stretch; gap: clamp(14px, 2.1vw, 32px);
  }
  .st-hero__markaz {
    grid-column: 2; grid-row: 1;
    display: flex; flex-direction: column; justify-content: center;
  }
  .st-hero__karta--chap { grid-column: 1; grid-row: 1; }
  .st-hero__karta--ong { grid-column: 3; grid-row: 1; }
}

/* ---------- Modul kartochkalari ------------------------------ */

.st-section { padding: 62px 0; }
.st-section__head { text-align: center; margin-bottom: 34px; }
.st-section__head h2 { font-size: 27px; color: var(--st-navy); }
.st-section__head p { margin: 10px auto 0; max-width: 620px; color: var(--st-muted); font-size: 16px; }

.st-cards {
  display: grid; gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.st-card {
  --accent: var(--st-blue);
  position: relative; display: flex; gap: 18px;
  background: var(--st-panel); border: 1px solid var(--st-line);
  border-radius: var(--st-r-lg); padding: 26px;
  box-shadow: var(--st-shadow-1);
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.st-card:hover { box-shadow: var(--st-shadow-3); transform: translateY(-3px); border-color: #d3e0f2; }
.st-card__icon {
  flex: none; width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  color: var(--accent);
}
.st-card__icon svg { width: 27px; height: 27px; }
.st-card h3 { font-size: 18px; color: var(--accent); letter-spacing: -.01em; }
.st-card p { margin: 8px 0 0; color: var(--st-ink-soft); font-size: 14.8px; }
.st-card__go {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: 14.5px; color: var(--accent);
}
.st-card__go:hover { text-decoration: none; gap: 11px; }
.st-card__go { transition: gap .16s; }

/* Kartochkaning istalgan joyi bosilsa — bo'limga kiriladi */
.st-card__go::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
}
.st-card[data-soon] { cursor: pointer; }
.st-card:has(.st-card__go) { cursor: pointer; }
.st-card[data-soon]:focus-visible,
.st-card:focus-within { outline: 2px solid var(--st-blue); outline-offset: 3px; }
.st-card__soon {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, #fff);
  background: color-mix(in srgb, var(--accent) 7%, #fff);
  color: var(--accent); font-weight: 600; font-size: 12.5px;
  letter-spacing: .06em; text-transform: uppercase;
}

.st-card--dict   { --accent: var(--st-mod-dict); }
.st-card--editor { --accent: var(--st-mod-editor); }
.st-card--state  { --accent: var(--st-mod-state); }
.st-card--game   { --accent: var(--st-mod-game); }
.st-card--ai     { --accent: var(--st-mod-ai); }
.st-card--taqvim { --accent: var(--st-mod-taqvim); }

/* ---------- Bosh sahifadagi tirik taqvim ---------------------

   «Taqvim» kartochkasi ichida haqiqiy sana turadi: oy nomi, shu
   haftaning yetti kuni va bugungi kun. Raqamlarni `taqvim-karta.js`
   yozadi, bu yerda faqat ko'rinishi.

   FASL. Rang ham, rasm ham oyga qarab almashadi — kartochka yil
   davomida bir xil turmasin. `data-fasl` ni ham o'sha JS qo'yadi;
   HTML da boshlang'ich qiymat turadi, JS kechikkanda ham kartochka
   rangsiz qolmasin. */

.st-card--taqvim[data-fasl="bahor"] { --accent: #2F9E44; --fasl: url(../brand/fasl-bahor.svg); }
.st-card--taqvim[data-fasl="yoz"]   { --accent: #D98A0B; --fasl: url(../brand/fasl-yoz.svg); }
.st-card--taqvim[data-fasl="kuz"]   { --accent: #C2570F; --fasl: url(../brand/fasl-kuz.svg); }
.st-card--taqvim[data-fasl="qish"]  { --accent: #2E7BB5; --fasl: url(../brand/fasl-qish.svg); }

.st-tq {
  flex: none; position: relative; overflow: hidden;
  align-self: stretch;
  padding: clamp(10px, 1.6vh, 14px) clamp(9px, 1vw, 13px) clamp(11px, 1.8vh, 16px);
  border-radius: 16px;
  background:
    linear-gradient(140deg,
      color-mix(in srgb, var(--accent) 15%, #fff),
      color-mix(in srgb, var(--accent) 4%, #fff));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, #fff);
}

/* Fasl rasmi — matnning ostidagi qatlam. Yuqori o'ng burchakda,
   sarlavha qatoriga to'g'ri keladi: kunlar qatoriga tushmaydi.
   Shaffoflik 0.85 dan pastga tushirilmadi — qor uchqunlari va gul
   barglari ingichka, xiraroq bo'lsa fonga singib yo'qoladi. */
.st-tq::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--fasl); background-repeat: no-repeat;
  background-position: right -6px top -7px;
  background-size: clamp(46px, 6.5vh, 58px);
  opacity: .82;
}

.st-tq__bosh {
  position: relative; display: flex; align-items: baseline; gap: 6px;
  margin-bottom: clamp(8px, 1.3vh, 12px);
}
.st-tq__oy {
  font-size: clamp(12px, 1.75vh, 14.5px); font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--accent);
}
.st-tq__yil {
  font-size: clamp(10.5px, 1.5vh, 12.5px); color: var(--st-muted);
  letter-spacing: .03em;
}

/* Bir hafta — yetti ustun. Har kun alohida ustuncha: tepasida
   qisqartma, ostida sana. Bugungisi to'ldirilgan va kattalashgan;
   kattalashtirish `transform` bilan, ya'ni qator balandligiga
   ta'sir qilmaydi va qo'shnilarini surib yubormaydi. */
.st-tq__hafta {
  position: relative;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(3px, .5vw, 6px);
}
.st-tq__kun {
  position: relative; z-index: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(3px, .6vh, 6px);
  padding: clamp(8px, 1.35vh, 12px) 2px clamp(9px, 1.5vh, 14px);
  border-radius: 11px;
  background: rgba(255, 255, 255, .5);
  border: 1px solid color-mix(in srgb, var(--accent) 13%, transparent);
}
.st-tq__kun i {
  font-style: normal; font-size: clamp(9px, 1.4vh, 11.5px);
  font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  color: var(--st-muted);
}
.st-tq__kun b {
  font-size: clamp(15px, 2.3vh, 19px); font-weight: 600;
  line-height: 1.15; color: var(--st-ink-soft);
  font-variant-numeric: tabular-nums;
}

/* Dam olish kunlari va qo'shni oyning kunlari xiraroq — bugungi
   kun ular orasidan darrov ajralib tursin. */
.st-tq__kun.is-dam b { color: color-mix(in srgb, var(--accent) 62%, #8a8f98); }
.st-tq__kun.is-boshqa { background: rgba(255, 255, 255, .28); }
.st-tq__kun.is-boshqa i,
.st-tq__kun.is-boshqa b { opacity: .4; }

.st-tq__kun.is-bugun {
  z-index: 1; transform: scale(1.13);
  background: var(--accent); border-color: transparent;
  box-shadow: 0 5px 15px color-mix(in srgb, var(--accent) 42%, transparent);
}
.st-tq__kun.is-bugun i { color: rgba(255, 255, 255, .82); }
.st-tq__kun.is-bugun b { color: #fff; font-weight: 800; }

/* Kartochkaning matn qismi taqvimdan keyin turadi va maydaroq —
   asosiy joyni taqvimning o'zi egallaydi. */
.st-card--taqvim p { font-size: clamp(12px, 1.6vh, 13.4px); }

/* Telefonda kartochka ustma-ust joylashadi — taqvim butun enga
   yoyilib, raqamlar kattaroq bo'ladi. */
@media (max-width: 520px) {
  .st-tq__kun b { font-size: 17px; }
}

/* ---------- Bosh sahifadagi «Tahrirchi» paneli ----------------

   O'ngdagi taqvim kartochkasi bilan JUFT bo'lsin deb qurilgan:
   `.st-tq` bilan bir xil ichki bo'shliq, radius va ramka formulasi.
   Shuning uchun ikkalasi yonma-yon turganda bir xil balandlikda
   va bir xil «og'irlikda» ko'rinadi.

   Uslub ataylab YASSI: soya yo'q, ingichka chiziq yo'q, faqat
   to'ldirilgan shakllar va yumshoq ranglar. Rang esa bo'limning
   o'z yashili — o'zgartirilmadi. */

.st-th {
  flex: none; position: relative; overflow: hidden;
  align-self: stretch;
  display: flex; flex-direction: column;
  gap: clamp(8px, 1.3vh, 12px);
  padding: clamp(10px, 1.6vh, 14px) clamp(9px, 1vw, 13px) clamp(11px, 1.8vh, 16px);
  border-radius: 16px;
  background:
    linear-gradient(140deg,
      color-mix(in srgb, var(--accent) 15%, #fff),
      color-mix(in srgb, var(--accent) 4%, #fff));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, #fff);
}

.st-th__bosh { display: flex; align-items: center; gap: 7px; }
.st-th__belgi {
  flex: none; display: grid; place-items: center;
  width: clamp(20px, 2.8vh, 25px); height: clamp(20px, 2.8vh, 25px);
  border-radius: 7px; background: var(--accent); color: #fff;
}
.st-th__belgi svg { width: 62%; height: 62%; }
.st-th__nom {
  font-size: clamp(12px, 1.75vh, 14.5px); font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--accent);
}

/* Kirill -> lotin: bo'limning asosiy ishi bir qarashda ko'rinsin */
.st-th__panjara {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: stretch; gap: clamp(3px, .5vw, 6px);
}
.st-th__xona {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(8px, 1.35vh, 12px) 4px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .5);
  border: 1px solid color-mix(in srgb, var(--accent) 13%, transparent);
}
.st-th__xona b {
  font-size: clamp(12px, 1.75vh, 14.5px); font-weight: 600;
  line-height: 1.15; color: var(--st-ink-soft);
}
.st-th__xona.is-natija {
  background: var(--accent); border-color: transparent;
  box-shadow: 0 5px 15px color-mix(in srgb, var(--accent) 42%, transparent);
}
.st-th__xona.is-natija b { color: #fff; font-weight: 800; }
.st-th__oq {
  display: grid; place-items: center; width: clamp(18px, 2.4vh, 22px);
  color: color-mix(in srgb, var(--accent) 70%, #fff);
}
.st-th__oq svg { width: 100%; height: 100%; }

/* Qolgan imkoniyatlar — mayda yorliqlar */
.st-th__belgilar { display: flex; flex-wrap: wrap; gap: 4px 5px; }
.st-th__belgilar i {
  font-style: normal;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid color-mix(in srgb, var(--accent) 13%, transparent);
  font-size: clamp(9.5px, 1.35vh, 11px); font-weight: 600;
  letter-spacing: .02em; color: color-mix(in srgb, var(--accent) 78%, #33404f);
}

/* Matn qismi taqvimnikidek maydaroq — asosiy joyni panel egallaydi */
.st-card--editor p { font-size: clamp(12px, 1.6vh, 13.4px); }

/* ---------- Platforma haqida --------------------------------- */

.st-about { background: var(--st-panel); border-top: 1px solid var(--st-line-soft); border-bottom: 1px solid var(--st-line-soft); }
.st-about__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.st-fact {
  padding: 24px; border-radius: var(--st-r);
  background: var(--st-bg); border: 1px solid var(--st-line-soft);
}
.st-fact b { display: block; font-size: 24px; color: var(--st-navy); letter-spacing: -.02em; }
.st-fact span { display: block; margin-top: 4px; color: var(--st-muted); font-size: 14.5px; }

/* ---------- Footer ------------------------------------------- */

/* Pastki ko'k qism ATAYLAB past: havolalar ustun-ustun emas, bitta
   qatorga tizilgan. Bosh sahifada asosiy joy bo'limlarga qolsin.
   Havolalar soni o'zgarmadi — faqat tartibi. */
.st-footer { background: var(--st-navy); color: #cddef5; padding: 10px 0 7px; }
.st-footer__in {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px 18px;
}
.st-footer__brend { flex: none; display: flex; align-items: center; }
.st-footer__brend img { width: 116px; display: block; }
.st-footer__brend:hover { text-decoration: none; }

/* Havolalar guruhi. Ajratgich — nuqta: alohida sarlavha qatori
   kerak emas, guruhlar baribir ko'zga ko'rinadi. */
.st-footer__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 14px; }
.st-footer__nav--yordam { position: relative; }
.st-footer__nav--yordam::before {
  content: ""; width: 1px; height: 14px; margin-right: 2px;
  background: rgba(255, 255, 255, .18);
}
.st-footer__aloqa a { font-size: inherit; }
.st-footer a { color: #cddef5; font-size: 13px; white-space: nowrap; }
.st-footer a:hover { color: #fff; }
.st-footer__aloqa a { color: #a9c2e4; }

.st-footer__bar {
  margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; justify-content: space-between; align-items: center;
  gap: 4px 14px; flex-wrap: wrap;
  font-size: 11.8px; color: #7fa1cb;
}

/* ---------- Modal (ro'yxatdan o'tish talabi) ------------------ */

.st-modal {
  position: fixed; inset: 0; z-index: 150;
  display: none; place-items: center; padding: 20px;
  background: rgba(3, 22, 52, .55); backdrop-filter: blur(3px);
}
.st-modal.is-open { display: grid; }
.st-modal__box {
  width: min(430px, 100%); background: #fff; border-radius: var(--st-r-lg);
  padding: 32px 28px; text-align: center; box-shadow: var(--st-shadow-3);
  animation: st-rise .3s cubic-bezier(.2, .7, .3, 1) both;
}
.st-modal__box img { width: 54px; margin-bottom: 14px; }
.st-modal__box h3 { font-size: 20px; color: var(--st-navy); }
.st-modal__box p { color: var(--st-ink-soft); font-size: 15px; margin: 10px 0 22px; }
.st-modal__row { display: flex; gap: 10px; }
.st-modal__row .st-btn { flex: 1; }

/* Hali ishga tushmagan bo'lim haqidagi oyna */
.st-modal--soon .st-modal__box h3 {
  color: var(--st-red);
  font-size: 21px; line-height: 1.4;
  margin: 0 0 22px;
}

/* ---------- Moslashuvchanlik ---------------------------------- */

@media (max-width: 1024px) {
  .st-about__grid { grid-template-columns: 1fr; }
}

@media (max-width: 1150px) {
  .st-burger { display: inline-flex; }
  .st-nav__menu {
    position: absolute; left: 0; right: 0; top: var(--st-nav-h);
    flex-direction: column; align-items: stretch; gap: 2px;
    background: #fff; border-bottom: 1px solid var(--st-line);
    padding: 10px 16px 16px; margin: 0; display: none;
    box-shadow: var(--st-shadow-2);
  }
  .st-nav__menu.is-open { display: flex; }
  .st-nav__side .st-btn--ghost { display: none; }
}

@media (max-width: 700px) {
  .st-nav__side .st-btn { display: none; }
  .st-nav__auth { display: block; }
  .st-nav__auth a { font-weight: 600; color: var(--st-blue); }
  .st-lang button { padding: 5px 9px; font-size: 12px; }
}

@media (max-width: 700px) {
  .st-cards { grid-template-columns: 1fr; }
  .st-hero { padding: 52px 0 46px; }
}

@media (max-width: 520px) {
  .st-wrap { padding: 0 16px; }
  .st-banner { padding: 13px 44px; }
  .st-banner__title { font-size: 14.5px; }
  .st-card { flex-direction: column; gap: 14px; padding: 22px; }
  /* Telefonda havolalar ustma-ust tushmasin — markazga tizilib,
     ikki-uch qatorga yoyiladi. */
  .st-footer__in { justify-content: center; text-align: center; gap: 6px 14px; }
  .st-footer__nav { justify-content: center; }
  .st-footer__bar { justify-content: center; }
  .st-nav__logo img { width: 142px; }
}

/* ---------- Bosh sahifa: bitta ekran -------------------------- */
/* Kompyuter va planshetda logotip, olti bo'lim va pastki qism
   sahifani aylantirmasdan bitta oynada ko'rinadi. Balandlik vh
   birligida o'lchanadi — ekran past bo'lsa hammasi mutanosib kichrayadi.
   Telefonda (700px dan tor) odatdagi aylanadigan tartib qoladi. */

@media (min-width: 700px) {
  body.st-home { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; --st-nav-h: 64px; }

  /* YUQORI QATOR MARKAZDA. Logotip hero ning o'rtasida turgani
     uchun panelda brend yo'q — menyu esa chap chekkaga yopishib,
     o'ng tomonda katta bo'shliq qolardi. Endi butun qator (Bosh
     sahifadan «Ro'yxatdan o'tish» gacha) yaxlit guruh sifatida
     ekran o'rtasiga olinadi. */
  body.st-home .st-nav__in { justify-content: center; }
  body.st-home .st-nav__menu { margin-left: 0; margin-right: 0; }

  body.st-home .st-hero {
    flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
    padding: clamp(6px, 1.4vh, 28px) 0;
  }
  body.st-home .st-hero__logo { width: min(420px, 27vw, 33vh); margin: 0 auto; }
  body.st-home .st-hero__lead {
    margin-top: clamp(8px, 1.6vh, 22px);
    font-size: clamp(14.5px, 1.9vh, 18px);
  }
  body.st-home .st-hero__cta { margin-top: clamp(12px, 2.2vh, 28px); }
  body.st-home .st-hero__panjara { gap: clamp(12px, 2vh, 26px); }
  body.st-home .st-btn--lg { padding: clamp(9px, 1.4vh, 13px) 22px; font-size: clamp(14px, 1.8vh, 15.5px); }

  body.st-home #bolimlar { flex: none; padding: clamp(4px, 1.1vh, 22px) 0; }
  body.st-home .st-cards { gap: clamp(10px, 1.5vh, 20px); }
  body.st-home .st-card {
    gap: clamp(10px, 1.4vh, 16px);
    padding: clamp(13px, 1.9vh, 22px);
  }
  body.st-home .st-card__icon { width: clamp(38px, 5vh, 50px); height: clamp(38px, 5vh, 50px); border-radius: 14px; }
  body.st-home .st-card__icon svg { width: 55%; height: 55%; }
  body.st-home .st-card h3 { font-size: clamp(15px, 2vh, 18px); }
  body.st-home .st-card p { margin-top: 5px; font-size: clamp(12.8px, 1.6vh, 14.8px); }
  body.st-home .st-card__go,
  body.st-home .st-card__soon { margin-top: clamp(7px, 1.3vh, 15px); font-size: clamp(12.5px, 1.6vh, 14.5px); }
  /* Yon kartochkalarda «Kirish» pastga yopishadi — ikkalasida bitta
     chiziqda tursin (tavsif uzunligi har xil bo'lsa ham). */
  body.st-home .st-hero__karta .st-card__go {
    margin-top: auto; padding-top: clamp(7px, 1.3vh, 15px);
  }

  body.st-home .st-footer {
    flex: none;
    padding: clamp(7px, 1vh, 11px) 0 clamp(5px, .8vh, 8px);
  }
  body.st-home .st-footer__brend img { width: clamp(94px, 10vh, 124px); }
  body.st-home .st-footer a { font-size: clamp(11.8px, 1.5vh, 13px); line-height: 1.45; }
  body.st-home .st-footer__bar {
    margin-top: clamp(5px, .8vh, 9px); padding-top: clamp(5px, .8vh, 9px);
    font-size: clamp(11px, 1.3vh, 12px);
  }

  /* Banner ham bir oz ixchamlashadi — matni o'zgarmaydi */
  body.st-home .st-banner { padding: clamp(9px, 1.4vh, 15px) 56px; }
  body.st-home .st-banner__title { font-size: clamp(14px, 1.9vh, 16px); }
  body.st-home .st-banner__text { font-size: clamp(12.5px, 1.6vh, 13.5px); }
}

/* Ikkitasi hero da turgani uchun pastda to'rtta qoladi — ular
   700px dan boshlab bitta qatorda ketadi. Kartochka tik
   joylashadi: belgi tepada, matn ostida. */
@media (min-width: 700px) {
  body.st-home .st-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.st-home .st-card { flex-direction: column; gap: clamp(8px, 1.2vh, 14px); }
}

/* Planshetda to'rtta ustun juda tor bo'lib qoladi — «Davlat tilida
   ish yuritish» sarlavhasi ikki qatorga, tavsifi to'rt qatorga
   uzilardi. Bu yerda 2 + 2 qilinadi: sahifa bir oz uzayadi, lekin
   planshetda aylantirish odatiy hol, siqilgan matn esa yo'q. */
@media (min-width: 700px) and (max-width: 999px) {
  body.st-home .st-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Kartochka keng bo'lgach, belgi chapda turgani ixchamroq —
     ikki qator baland bo'lib ketmaydi. */
  body.st-home .st-cards .st-card {
    flex-direction: row; align-items: flex-start; gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ---------- Hisob oynasi -------------------------------------
   Kirish parolsiz: pochtaga bir martalik kod yuboriladi.
   Oynani assets/js/hisob.js o'zi yaratadi.
   ------------------------------------------------------------- */

.st-hisob {
  position: fixed; inset: 0; z-index: 140;
  display: none; place-items: center; padding: 20px;
  background: rgba(4, 26, 58, .5);
  backdrop-filter: blur(6px) saturate(1.15);
  -webkit-backdrop-filter: blur(6px) saturate(1.15);
}
.st-hisob.is-open { display: grid; }

.st-hisob__quti {
  position: relative;
  width: min(420px, 100%);
  background: var(--st-panel); border-radius: 20px;
  padding: 30px 30px 26px; text-align: center;
  box-shadow: 0 26px 64px rgba(2, 20, 50, .34);
}
.st-hisob__yop {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: transparent; color: var(--st-muted);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.st-hisob__yop:hover { background: var(--st-bg-tint); color: var(--st-ink); }
.st-hisob__belgi { width: 44px; height: 44px; }
.st-hisob__quti h3 {
  margin-top: 12px; font-size: 20px; color: var(--st-navy);
}
.st-hisob__izoh {
  margin: 8px 0 0; font-size: 14.4px; line-height: 1.6; color: var(--st-ink-soft);
}
.st-hisob__tana { margin-top: 18px; }

/* Faqat localhost dev formasi uchun */
.st-hisob__maydon {
  width: 100%; padding: 13px 15px;
  border: 1.5px solid var(--st-line); border-radius: var(--st-r-sm);
  font: 400 16px/1.4 var(--st-font); color: var(--st-ink); background: #fff;
}
.st-hisob__maydon:focus {
  outline: none; border-color: var(--st-blue);
  box-shadow: 0 0 0 3px rgba(11, 87, 208, .14);
}

.st-hisob__tg {
  display: flex; justify-content: center; align-items: center;
  min-height: 48px;
}
.st-hisob__tgizoh {
  margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--st-muted);
}
.st-hisob__tugma { width: 100%; margin-top: 12px; justify-content: center; }

/* Matn ichidagi havola ko'rinishidagi tugma. Teg sifatida button
   olingan, chunki u hech qayerga o'tmaydi — amalni bajaradi, xolos;
   havola tegi bo'lsa qidiruv tizimlari ham, klaviatura ham uni
   sahifa havolasi deb qabul qilardi.
   DIQQAT: uslub fayllarida burchakli qavs ishlatmang — ular
   sertifikatni rasmga aylantirishda XML ichiga tushadi. */
.st-havola {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--st-blue);
  text-decoration: underline; cursor: pointer;
}
.st-havola:hover { text-decoration: none; }

.st-hisob__satr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--st-line-soft);
  font-size: 14.6px; color: var(--st-ink-soft);
}
.st-hisob__satr b { color: var(--st-navy); }
.st-hisob__tolov {
  margin: 14px 0 0; padding: 11px 13px; border-radius: 12px;
  background: var(--st-bg-tint); color: var(--st-ink-soft);
  font-size: 13.6px; line-height: 1.55;
}
.st-hisob__xato {
  margin-top: 14px; padding: 11px 13px; border-radius: 12px;
  border: 1px solid #F3D2CE; background: #FDF3F2; color: #9F2F26;
  font-size: 13.8px; line-height: 1.5; text-align: left;
}

/* ---------- Talab: hisobga bog'langan bo'lim -----------------
   `assets/js/qulf.js` shu ko'rinishni ishlatadi. Panel bo'limning
   o'rnini egallaydi — tarkib esa yashiriladi.

   DIQQAT — NOM TANLASHDA. Bu blok avval `.st-qulf` deb nomlangan
   edi va bu OG'IR nosozlikka olib keldi: `body.st-qulf`
   (`lugat.css`) allaqachon band — uni `hisob.js`, `darslik.js` va
   `tahrirchi.js` oyna ochilganda varaqni qulflash uchun
   `<body>` ga qo'yadi. Natijada har qanday oyna ochilganda
   `<body>` flex-konteynerga aylanib, sahifa kengayib ketardi va
   markazlashtirilgan oyna ekrandan chiqib qolardi (telefonda
   yaqqol ko'rinardi). Shuning uchun nom `.st-talab` ga
   o'zgartirildi.
   ------------------------------------------------------------ */
.st-talab {
  display: flex; align-items: center; justify-content: center;
  padding: 34px 18px;
}
.st-talab__ich {
  max-width: 460px; width: 100%; text-align: center;
  padding: 30px 26px 26px;
  background: var(--st-panel);
  border: 1px solid var(--st-line);
  border-radius: var(--st-r-lg);
  box-shadow: var(--st-shadow-2);
}
.st-talab__belgi {
  width: 52px; height: 52px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--st-bg-tint); color: var(--st-blue);
}
.st-talab__sarlavha {
  margin: 0 0 8px; font-size: 19px; line-height: 1.3;
  font-weight: 700; color: var(--st-ink);
}
.st-talab__matn {
  margin: 0 0 18px; font-size: 14.5px; line-height: 1.55;
  color: var(--st-ink-soft);
}
.st-talab__izoh {
  margin: 12px 0 0; font-size: 12.8px; color: var(--st-muted);
}