/* Shriftlar ATAYLAB bu yerda `@import` qilinmaydi.
   `@import` — render va JS ni bloklaydigan uslublar jadvali: Google Fonts
   sekinlashsa (maktab tarmoqlarida odatiy hol), sahifadagi inline skriptlar
   umuman ishga tushmaydi — test sahifasida rasm bosish ham, tekshirish ham
   muzlab qoladi. Shuning uchun shriftlar HTML dagi `<link ... media="print"
   onload="this.media='all'">` bilan bloklamasdan yuklanadi (base.html,
   login.html, register.html). */

/* =========================================================
   SUZANI — inkorporatsion amaliy topshiriqlar platformasi
   =========================================================

   Sayt ikki ovozda gapiradi, lekin bitta palitrada:

     O'QITUVCHI QISMI (bosh sahifa, Muallif, Metodika, Maqola,
     Xarita, Ishlanma) — jiddiy, muharrirlik uslubi: to'liq
     ekranli foto, serif sarlavha, mono yorliqlar, har bo'limga
     o'z tusi.

     BOLALAR QISMI (mashqlar) — quvnoq: och gradient fon,
     yumaloq kartalar, pill tugmalar. U `style.css` da.

   ---------------------------------------------------------
   UCHTA YOZUV OVOZI
   ---------------------------------------------------------
   grotesk (Bricolage Grotesque) — sarlavha va brend. Nomi ham
       joyida: "bricolage" — qo'l ostidagi narsadan yasash,
       ya'ni saytning mavzusi.
   serif (Spectral) — o'qiladigan matn, ilmiy nomlar, hero
       sarlavhasi. Olimning ovozi.
   sans (Karla) — navbar, tugmalar, yorliqlar: INTERFEYS.
       Karla ATAYLAB saqlangan — navbarning butun breakpoint
       zinapoyasi (pastdagi RESPONSIVE bo'limi) aynan
       `600 1rem Karla` bo'yicha o'lchangan. Boshqa shriftga
       o'tkazsangiz o'lchovlarni qaytadan olish kerak, aks holda
       yetti uzun yorliq ikkinchi qatorga tushadi.
   mono — tizim shrifti, yuklanmaydi: raqamlar va kichik
       ALL-CAPS yorliqlar uchun.

   ---------------------------------------------------------
   RANG
   ---------------------------------------------------------
   Yetti bo'limning har biriga bitta bo'yoq va uning och
   to'ldirmasi biriktirilgan. Ranglar o'zbek kashtachiligi va
   atlasidan; ular BEZAK EMAS — karta qaysi bo'limga tegishli
   ekanini rang aytadi.

   Yangi rang qo'shishdan oldin: yettitasi allaqachon bor.
   ========================================================= */

:root {
    /* ---- Chrome: indigo (logotipdagi rang) ---- */
    --siyoh:    #14203A;
    --siyoh-2:  #1F3157;
    --siyoh-3:  #2C4374;

    /* ---- Yetti bo'lim bo'yog'i: to'q registr ----
       Sarlavha, nishon, tugma va nozik chiziqlar uchun. */
    --t1: #24324F;   /* 1 Muallif haqida — siyoh */
    --t2: #4E7A33;   /* 2 Metodika       — barg */
    --t3: #176B81;   /* 3 Maqola         — firuza */
    --t4: #4A4E96;   /* 4 Multimediya    — nilufar */
    --t5: #A8701C;   /* 5 Topshiriq      — zafaron */
    --t6: #8B2F4D;   /* 6 Xarita         — marena */
    --t7: #A83A2B;   /* 7 Dars ishlanma  — anor */
    --t8: #1E7A6B;   /* 8 O'quvchilarim  — zumrad (admin sahifasi) */

    /* ---- O'sha yettitaning och registri: varaq to'ldirmasi ----
       Hammasi --ink bilan 11 dan yuqori kontrastda. */
    --t1-pale: #E2E6EE;
    --t2-pale: #E6EFD8;
    --t3-pale: #D8E9EF;
    --t4-pale: #E1E2F3;
    --t5-pale: #F7E8CC;
    --t6-pale: #F3DDE4;
    --t7-pale: #F6E0DC;
    --t8-pale: #DCEFE9;

    /* ---- Eski nomlar (fayl bo'ylab ishlatiladi) ---- */
    --anor:     #A83A2B;
    --anor-d:   #8A2C20;
    --zafaron:  #D9A040;
    --zafaron-l:#F0CE92;
    --zafaron-d:#A8701C;
    --firuza:   #176B81;
    --firuza-l: #3B95A9;

    /* ---- Sirtlar ---- */
    --paper:    #FFFFFF;
    --qogoz:    #F4F1E8;
    --stone:    #F4F1E8;
    --stone-2:  #E9E4D6;

    /* Bo'lim sahifalarining karta juftliklari — eski nom bilan
       qoladi, ular `bolim.html` dagi `bolim-{{ active }}` sinfiga
       bog'langan. Endi qiymatlar yetti tusdan olinadi. */
    --limon:    var(--t2-pale);
    --yashil:   #EFF5E4;
    --gulnor:   var(--t3-pale);
    --nilufar:  #E7EFF3;
    --zangori:  var(--t6-pale);
    --behi:     #FAE9EE;

    /* ---- Matn ---- */
    --ink:      #1B2333;
    --ink-2:    #47536B;
    --ink-3:    #7C889D;
    --line:     #DCD6C6;
    --line-2:   #E8E3D6;

    /* ---- O'lchov ---- */
    --wrap:     1200px;
    --r-lg:     14px;
    --r-md:     10px;
    --r-sm:     6px;

    /* ---- Yozuv ---- */
    /* Bu uchtasi fayl oxiridagi YORQIN USLUB blokida qayta
       beriladi. Shu yerda ham to'g'ri oila yozilgan: agar o'sha
       blok bir kun olib tashlansa, sayt yuklanmaydigan shriftga
       tayanib qolmasin. */
    --font-display: 'Fredoka', 'Nunito', system-ui, sans-serif;
    --font-serif:   'Nunito', system-ui, sans-serif;
    --font-body:    'Nunito', system-ui, -apple-system, sans-serif;
    --font-mono:    ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace;

    --shadow-1: 0 1px 2px rgba(20, 32, 58, 0.05), 0 4px 14px rgba(20, 32, 58, 0.06);
    --shadow-2: 0 10px 34px rgba(20, 32, 58, 0.13);
}

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

/* Butun qobiq shrifti shu yerdan miqyoslanadi. Foizda berilgani uchun
   brauzerdagi "katta shrift" sozlamasi ham hurmat qilinadi (px bo'lsa buziladi). */
html { font-size: 108%; }

body.pf {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--ink);
    background: var(--qogoz);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Sarlavhalar — grotesk (institutsional ovoz). */
.pf h1, .pf h2, .pf h3, .pf h4 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.015em;
    overflow-wrap: break-word;
}

/* O'qiladigan matn — serif (olim ovozi). Bu `.prose` va material
   tavsiflariga tegishli; interfeys elementlari Karlada qoladi. */
.pf .prose p,
.pf .prose li,
.pf .page-lede,
.pf .section-head p {
    font-family: var(--font-serif);
}

/* Grid/flex bolalari standart bo'yicha min-content dan kichraymaydi —
   uzun o'zbekcha so'zlar tor ekranda tashqariga chiqib ketmasligi uchun. */
.hero-inner > *, .about-grid > *, .footer-grid > *, .muallif > * { min-width: 0; }

.pf p { margin: 0 0 1em; }
.pf img { max-width: 100%; }

/* Havola rangi faqat matn oqimida beriladi. Global `.pf a` qoidasi
   tugma va kartalarning o'z ranglarini bosib ketardi. */
.prose a:not(.btn):not(.btn-sm),
.material-body a { color: var(--t3); }

.pf :focus-visible {
    outline: 3px solid var(--zafaron);
    outline-offset: 3px;
    border-radius: 4px;
}

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

/* Ekranni o'qish dasturi uchun: odatda ko'rinmaydi, faqat Tab bosilganda
   chiqadi. `display:none` QILMANG — u fokusni ham olib tashlaydi. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--zafaron);
    color: var(--siyoh);
    padding: 12px 22px;
    font-weight: 700;
    border-radius: 0 0 var(--r-sm) 0;
}

.skip-link:focus { left: 0; }

/* =========================================================
   TUGMALAR
   ---------------------------------------------------------
   Uchta ko'rinish, uchtasi ham bir xil shaklda:
     .btn-primary — asosiy amal (zafaron)
     .btn-outline — qorong'i sahnada shisha (hero ustida)
     .btn-solid   — och sahnada to'q (bo'lim sahifalarida)
   Bosilganda tugma pastga tushadi (soyasi yo'qoladi), suzib
   ketmaydi — bu jiddiy qismning ohangi.
   ========================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    border: 1.5px solid transparent;
    border-radius: var(--r-sm);
    font-family: var(--font-body);
    font-size: .96rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s, color .18s, border-color .18s, box-shadow .12s, transform .12s;
}

.btn svg { width: 16px; height: 16px; }

.btn:active { transform: translateY(2px); box-shadow: none !important; }

.btn-primary {
    background: var(--zafaron);
    border-color: var(--zafaron);
    color: var(--siyoh);
}

.btn-primary:hover { box-shadow: 0 4px 0 rgba(0, 0, 0, .28); }

.btn-outline {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .6);
    color: #fff;
}

.btn-outline:hover { background: rgba(255, 255, 255, .16); }

.btn-solid {
    background: var(--siyoh);
    border-color: var(--siyoh);
    color: #fff;
}

.btn-solid:hover { box-shadow: 0 4px 0 rgba(20, 32, 58, .3); }

/* =========================================================
   IMZO ELEMENTI — palak (suzani rozetkasi / kvilling o'rami)
   ========================================================= */
.palak { display: block; width: 100%; height: 100%; }
.palak .petal { fill: currentColor; }
.palak .core   { fill: currentColor; opacity: 0.45; }

.motif {
    display: inline-block;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    color: var(--zafaron);
}

/* =========================================================
   NAVBAR
   ========================================================= */
.topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--siyoh);
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

/* Navbar bitta qatorda: brend + yetti bo'lim + kirish.
   Yettita uzun o'zbekcha nom bir qatorga zo'rg'a sig'adi, shuning uchun
   o'lchamlar brauzerda o'lchab tanlangan. Eng tor holat — tizimga KIRGAN
   foydalanuvchi: ism va "Chiqish" tugmasi qo'shimcha ~199px oladi.

   O'lchash usuli (brauzer kerak emas): `.topbar .wrap` ni `width: max-content`
   qilib qo'yilgan sinov sahifasini headless Chrome bilan suratga olib,
   navbar bandidagi eng chap va eng o'ng mazmun pikselini Pillow bilan
   topiladi — farqi mazmunning haqiqiy eni.

   Mazmun eni shriftga qarab (tizimga kirgan holda, uzun ism bilan):
     0.88rem / 7px → 1227px  (kerak 1275px)   ← eski, mijozga kichik tuyuldi
     0.94rem / 7px → 1279px  (kerak 1327px)   ← HOZIRGI
     0.96rem / 8px → 1309px  (kerak 1357px)
     1.00rem / 10px → 1369px (kerak 1417px)

   "Kerakli" = mazmun + 48px chekka. Haqiqiy brauzerda vertikal aylantirish
   yo'lagi ~15px oladi, shuning uchun 1366px oynada foydali kenglik ~1351px:
   0.94rem varianti 24px zaxira bilan sig'adi, 0.96rem esa sig'maydi.
   Shuning uchun ikki bosqich: 1366px+ da katta shrift (0.94rem), 1280–1365px
   oralig'ida esa eski kichik shrift (0.88rem) — pastdagi media qoidasiga
   qarang. Gamburgerga o'tish nuqtasi shu sababli 1279px da qoldi.

   Shriftni yana kattalashtirsangiz, o'sha oraliq qoidani ham qayta o'lchang —
   aks holda "Chiqish" tugmasi `overflow-x: hidden` ostida qirqilib qoladi. */
.topbar .wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 74px;
    /* Sahifa mazmuni 1200px, navbar esa biroz kengroq — aks holda tizimga
       kirgan foydalanuvchida (ism + "Chiqish") yetti havola bir qatorga
       sig'masdi. Katta ekranda brend matndan sal chaproqda turadi. */
    max-width: 1340px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
    flex-shrink: 0;
    margin-right: auto;
}
.brand .motif { width: 32px; height: 32px; color: var(--zafaron); }
/* Logotip — bo'yalgan emblema, shuning uchun rang berilmaydi. Navbar eni
   millimetrgacha hisoblangan (yuqoridagi izohga qarang): bu o'lchamni
   kattalashtirsangiz, bo'limlar bir qatorga sig'masligi mumkin. */
.brand-logo { width: 42px; height: 42px; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-sub {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--zafaron);
    font-weight: 700;
}
.brand-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.16rem;
    letter-spacing: -0.015em;
    color: #fff;
}

.nav {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

.nav a {
    position: relative;
    display: block;
    padding: 10px 7px;
    font-size: 0.94rem;
    line-height: 1.35;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.80);
    text-decoration: none;
    border-radius: var(--r-sm);
    transition: color 0.18s, background-color 0.18s;
    white-space: nowrap;
}
.nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.09); }

.nav a.is-active { color: #fff; }
.nav a.is-active::after {
    content: '';
    position: absolute;
    left: 7px;
    right: 7px;
    bottom: 2px;
    height: 3px;
    border-radius: 3px;
    background: var(--zafaron);
}

/* Bo'lim ostidagi menyu (hozircha faqat Topshiriq).
   Sichqoncha ustiga kelganda ochiladi; klaviatura uchun :focus-within.
   .nav-menu ning tepa to'ldirishi — havola bilan panel orasidagi "ko'prik":
   sichqoncha bo'sh joydan o'tayotganda menyu yopilib qolmaydi. */
.nav-item { position: relative; }
.nav a.nav-bosh { display: flex; align-items: center; gap: 4px; }
.nav-strelka { width: 11px; height: 11px; flex-shrink: 0; opacity: 0.75; transition: transform 0.18s; }
.nav-item:hover .nav-strelka,
.nav-item:focus-within .nav-strelka { transform: rotate(180deg); }

.nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    padding-top: 18px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.16s, transform 0.16s, visibility 0.16s;
}
.nav-item:hover .nav-menu,
.nav-item:focus-within .nav-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.nav-menu-ichi {
    display: grid;
    gap: 2px;
    min-width: 246px;
    padding: 8px;
    background: var(--siyoh-2);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--r-md);
    box-shadow: 0 18px 40px rgba(10, 16, 30, 0.45);
}
.nav .nav-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 0.9rem;
    border-radius: var(--r-sm);
}
.nav .nav-menu a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.nav-menu .motif { width: 17px; height: 17px; color: var(--zafaron); }

.nav-auth {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.nav-user {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
    max-width: 84px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Administrator menyusidagi ism (`.hisob-ism`, fayl oxirida bezatiladi)
   kengligi `.nav-user` bilan bir xil qadamlarda o'zgaradi. Qoida AYNAN
   shu yerda — quyidagi media so'rovlardan oldin — turishi shart: media
   so'rov selektor aniqligini oshirmaydi, shuning uchun fayl oxiriga
   yozilgan `max-width` ularning hammasini bosib ketardi. */
.hisob-ism { max-width: 84px; }
.btn-nav {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    background: var(--zafaron);
    color: var(--siyoh);
    border: 1.5px solid var(--zafaron);
    transition: background-color 0.18s, color 0.18s;
    white-space: nowrap;
}
.btn-nav:hover { background: var(--zafaron-l); border-color: var(--zafaron-l); }
.btn-nav.ghost {
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.28);
}
.btn-nav.ghost:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }

.nav-toggle {
    display: none;
    margin-left: auto;
    width: 44px;
    height: 44px;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--r-sm);
    background: transparent;
    color: #fff;
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
}
.nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    position: relative;
}
.nav-toggle span::before,
.nav-toggle span::after {
    content: '';
    position: absolute;
    left: 0;
    width: 20px;
    height: 2px;
    background: currentColor;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }

/* =========================================================
   BO'LIM (section) umumiy
   ========================================================= */
.section { padding: 82px 0; }
.section.tinted { background: var(--stone); }
.section.dark { background: var(--siyoh); color: #fff; }

.section-head { max-width: 720px; margin-bottom: 46px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 {
    font-size: clamp(1.65rem, 3vw, 2.4rem);
    margin-bottom: 14px;
    text-wrap: balance;
}
.section-head p {
    font-size: 1.05rem;
    color: var(--ink-2);
    margin: 0;
}
.section.dark .section-head p { color: rgba(255, 255, 255, 0.76); }

/* Yorliq — hero'dagi bilan bir xil registr: mono, ALL-CAPS, keyin
   o'ngga cho'zilgan nozik chiziq. Bu saytning "laboratoriya ovozi":
   sarlavhaning ustida turib, uning qaysi turkumga tegishli ekanini
   aytadi. Palak motifi kichik va so'ngan — imzo, bezak emas. */
.eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--ink-3);
}

.eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

.eyebrow .motif { width: 15px; height: 15px; opacity: .5; flex: none; }

.eyebrow.ink { color: var(--t5); }
.eyebrow.ink .motif { opacity: .75; }

.section.dark .eyebrow { color: rgba(255, 255, 255, .6); }
.section.dark .eyebrow::after { background: rgba(255, 255, 255, .2); }

/* =========================================================
   7 BO'LIM KARTALARI
   ---------------------------------------------------------
   Har karta o'z bo'limining och to'ldirmasida; raqam va tugma
   esa o'sha bo'limning to'q rangida. Ya'ni rang navigatsiya
   ma'lumoti — kartani "bezash" uchun emas.
   ========================================================= */
.bolim-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: 18px;
}

.bolim-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 24px 22px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--kt-pale, var(--paper));
    color: var(--ink);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}

.bolim-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-2);
}

/* Palak motifi burchakda — juda past kontrastda: bezak emas, imzo. */
.bolim-card .motif {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 30px;
    height: 30px;
    color: var(--kt, var(--siyoh));
    opacity: .17;
}

.bolim-num {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--kt, var(--siyoh));
}

.bolim-card h3 {
    margin: 12px 0 8px;
    font-family: var(--font-display);
    font-size: 1.32rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.2px;
    color: var(--ink);
}

.bolim-card p {
    margin: 0;
    font-family: var(--font-serif);
    font-size: .97rem;
    line-height: 1.55;
    color: var(--ink-2);
}

/* Tugma — mono, kichik, to'q. Bu havola emas, amal. */
.bolim-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    /*  — tugma kartaning TAGIGA yopishadi, shuning uchun matn
       uzunligi har xil bo'lsa ham qatordagi tugmalar bir chiziqda turadi. */
    margin-top: auto;
    padding: 8px 15px;
    border-radius: var(--r-sm);
    background: var(--kt, var(--siyoh));
    color: #fff;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.bolim-more svg { width: 13px; height: 13px; }

.bolim-card:hover .bolim-more { box-shadow: 0 3px 0 rgba(0, 0, 0, .22); }

/* Yettita tus. `--kt` — to'q rang, `--kt-pale` — to'ldirma. */
.tone-1 { --kt: var(--t1); --kt-pale: var(--t1-pale); }
.tone-2 { --kt: var(--t2); --kt-pale: var(--t2-pale); }
.tone-3 { --kt: var(--t3); --kt-pale: var(--t3-pale); }
.tone-4 { --kt: var(--t4); --kt-pale: var(--t4-pale); }
.tone-5 { --kt: var(--t5); --kt-pale: var(--t5-pale); }
.tone-6 { --kt: var(--t6); --kt-pale: var(--t6-pale); }
.tone-7 { --kt: var(--t7); --kt-pale: var(--t7-pale); }
/* =========================================================
   PLATFORMA HAQIDA — maqola tipografiyasi
   ========================================================= */
.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: 56px;
    align-items: start;
}

.prose { max-width: 68ch; }
.prose p {
    font-size: 1.08rem;
    line-height: 1.78;
    color: var(--ink-2);
    margin: 0 0 1.25em;
}
.prose p.lead {
    font-size: 1.22rem;
    line-height: 1.62;
    color: var(--ink);
    font-weight: 500;
}
.prose h3 {
    font-size: 1.3rem;
    margin: 2em 0 0.6em;
    color: var(--ink);
}
.prose h3:first-child { margin-top: 0; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5em;
}
.prose ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    color: var(--ink-2);
    font-size: 1.05rem;
}
.prose ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2.5px solid var(--zafaron);
}

.pull {
    border-left: 4px solid var(--anor);
    padding: 4px 0 4px 26px;
    margin: 2em 0;
    font-family: var(--font-display);
    font-size: 1.22rem;
    line-height: 1.55;
    font-weight: 600;
    color: var(--ink);
}

/* Yon panel */
.aside-card {
    background: var(--siyoh);
    color: #fff;
    border-radius: var(--r-lg);
    padding: 30px 28px;
    position: relative;
    overflow: hidden;
}
.aside-card h4 {
    font-size: 1.1rem;
    margin-bottom: 18px;
    color: #fff;
}
.aside-card .motif {
    position: absolute;
    right: -26px;
    bottom: -26px;
    width: 130px;
    height: 130px;
    color: var(--zafaron);
    opacity: 0.12;
}
.aside-list { list-style: none; padding: 0; margin: 0; position: relative; z-index: 1; }
.aside-list li {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.94rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.5;
}
.aside-list li:last-child { border-bottom: none; }
.aside-list li b { color: var(--zafaron); flex-shrink: 0; font-weight: 700; }

.figure {
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-2);
    margin-top: 24px;
}
.figure img { display: block; width: 100%; height: auto; }
.figure figcaption {
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: none;
    padding: 13px 18px;
    font-size: 0.85rem;
    color: var(--ink-3);
}

/* =========================================================
   BO'LIM SAHIFASI — sarlavha lentasi
   ========================================================= */
.page-head {
    position: relative;
    background: var(--siyoh);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.page-head::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url('/static/img/hero-qogoz.jpg');
    background-size: cover;
    background-position: center;
}
.page-head::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(96deg, rgba(20, 32, 58, 0.98) 26%, rgba(20, 32, 58, 0.88) 62%, rgba(20, 32, 58, 0.72) 100%);
}
.page-head .wrap { padding-top: 54px; padding-bottom: 56px; }
.page-head h1 {
    font-size: clamp(1.8rem, 3.6vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.022em;
    max-width: 22ch;
    text-wrap: balance;
}
.page-head .page-lede {
    margin: 16px 0 0;
    font-size: 1.06rem;
    color: rgba(255, 255, 255, 0.80);
    max-width: 62ch;
}

.crumbs {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.82rem;
    margin-bottom: 18px;
    color: rgba(255, 255, 255, 0.55);
}
.crumbs a { color: rgba(255, 255, 255, 0.72); text-decoration: none; font-weight: 600; }
.crumbs a:hover { color: var(--zafaron); }

/* =========================================================
   MATERIALLAR RO'YXATI
   ========================================================= */
.material-list { display: grid; gap: 16px; }

.material {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
    padding: 22px 26px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.material:hover { border-color: var(--firuza); box-shadow: var(--shadow-2); }

/* Metodika, Maqola va Ishlanma bo'limlari — kartalar navbatma-navbat rangli
   fonda, har bo'limning o'z juftligi bilan. Qolganlari (topshiriq, xarita)
   oq kartalarda qoladi. Sinf `bolim.html` da `active` dan yasaladi, kartalar
   esa `.material-list` ning bevosita farzandlari — shuning uchun nth-child
   to'g'ri sanaydi. */
.bolim-metodika .material:nth-child(odd)  { background: var(--limon); }
.bolim-metodika .material:nth-child(even) { background: var(--yashil); }
.bolim-maqola   .material:nth-child(odd)  { background: var(--gulnor); }
.bolim-maqola   .material:nth-child(even) { background: var(--nilufar); }
.bolim-ishlanma .material:nth-child(odd)  { background: var(--zangori); }
.bolim-ishlanma .material:nth-child(even) { background: var(--behi); }
/* Nishon, muqova va tugmalar fonga singib ketmasin — ular oq qoladi.
   Ishlanmada bu ayniqsa muhim: muqovalar ensiz-cho'ziq plakatlar bo'lgani
   uchun `object-fit: cover` dan keyin ham quti chetida ozgina joy qoladi,
   u rangli bo'lsa muqova atrofida ingichka rangli hoshiya bo'lib ko'rinadi. */
.bolim-metodika .material-tag,
.bolim-metodika .material-muqova,
.bolim-maqola .material-tag,
.bolim-maqola .material-muqova,
.bolim-ishlanma .material-tag,
.bolim-ishlanma .material-muqova { background: var(--paper); }

.material-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 62px;
    border-radius: var(--r-sm);
    background: var(--stone);
    border: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--anor);
    flex-shrink: 0;
}
.material-tag .motif { width: 26px; height: 26px; color: var(--firuza); }

/* Kitob muqovasi — `muqova` maydoni to'ldirilgan materiallarda nishon o'rniga. */
.material.has-muqova {
    align-items: start;
    /* Birinchi ustun ATAYLAB aniq o'lchamda. `auto` qoldirilsa rasm yuklanmagan
       damda Chrome ustunni `alt` matnining kengligiga cho'zib, matn ustunini
       nolga ezib qo'yardi (sarlavha bitta harfdan vertikal chiqardi). */
    grid-template-columns: 124px minmax(0, 1fr) auto;
}
.material-muqova {
    width: 124px;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--stone);
    border: 1px solid var(--line);
    /* Kitob qirrasi taassuroti: chapda ingichka soya */
    box-shadow: var(--shadow-1), inset 6px 0 10px -8px rgba(20, 32, 58, 0.55);
    line-height: 0;
}
.material-muqova img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1.41;   /* A4 nisbati — sahifalar bir tekis turadi */
    object-fit: cover;
    object-position: top center;
}
.material.has-muqova:hover .material-muqova { box-shadow: var(--shadow-2); }

/* PDF ko'ruvchi — kartaning butun enini egallaydi */
.material-koruvchi {
    grid-column: 1 / -1;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed var(--line);
}
.material-koruvchi[hidden] { display: none; }
.material-koruvchi iframe {
    display: block;
    width: 100%;
    height: min(76vh, 820px);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--stone-2);
}
button.btn-sm { font-family: inherit; cursor: pointer; }

.material h3 { font-size: 1.12rem; margin-bottom: 6px; }
.material .meta {
    font-size: 0.82rem;
    color: var(--ink-3);
    margin-bottom: 6px;
}
.material p { font-size: 0.95rem; color: var(--ink-2); margin: 0; }
.material .actions { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }

.btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    border: 1.5px solid var(--line);
    color: var(--siyoh);
    background: var(--paper);
    white-space: nowrap;
    transition: background-color 0.18s, border-color 0.18s, color 0.18s;
}
.btn-sm:hover { background: var(--siyoh); border-color: var(--siyoh); color: #fff; }
.btn-sm svg { width: 15px; height: 15px; }

.material-body {
    grid-column: 1 / -1;   /* aks holda 2-qatorning 1-ustuniga tiqilib qolardi */
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--line);
    grid-column: 2 / -1;
}
.material-body p { margin-bottom: 0.8em; }
.material-body p:last-child { margin-bottom: 0; }

/* Bo'sh holat */
.empty {
    text-align: center;
    padding: 72px 30px;
    background: var(--stone);
    border: 1px dashed var(--stone-2);
    border-radius: var(--r-lg);
}
.empty .motif { width: 92px; height: 92px; color: var(--zafaron); margin: 0 auto 18px; }
.empty h3 { font-size: 1.25rem; margin-bottom: 10px; }
.empty p { color: var(--ink-2); max-width: 48ch; margin: 0 auto 22px; }

/* =========================================================
   KICHIK BO'LIMLAR — ochiladigan ro'yxat
   Hozircha Topshiriq bo'limida: "Rasmli test" va "Texnologik diktantlar".
   Sof <details>/<summary>: JS kerak emas, klaviatura bilan ham ishlaydi.
   ========================================================= */
.guruhlar { display: grid; gap: 16px; }
.material-list + .guruhlar { margin-top: 16px; }

.guruh {
    /* Navbar yopishqoq — havoladan kelganda sarlavha uning ostida qolmasin. */
    scroll-margin-top: 94px;
    background: var(--stone);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}
.guruh > summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 19px 26px;
    background: var(--paper);
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 1.06rem;
    font-weight: 700;
    color: var(--siyoh);
    /* Brauzerning o'z uchburchagi o'chadi — o'rniga o'ng tomondagi strelka. */
    list-style: none;
    transition: background-color 0.18s;
}
.guruh > summary::-webkit-details-marker { display: none; }
.guruh > summary:hover { background: var(--stone-2); }
.guruh[open] > summary { border-bottom: 1px solid var(--line); }
.guruh > summary .motif { width: 24px; height: 24px; color: var(--anor); }

.guruh-nomi { flex: 1; min-width: 0; }
.guruh-son {
    flex-shrink: 0;
    padding: 2px 11px;
    border-radius: 999px;
    background: var(--stone);
    color: var(--ink-2);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
}
.guruh > summary:hover .guruh-son { background: var(--paper); }
.guruh-strelka {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--ink-3);
    transition: transform 0.2s;
}
.guruh[open] .guruh-strelka { transform: rotate(180deg); }

.guruh-ichi { padding: 20px 22px 22px; }
.guruh-bosh { margin: 0; color: var(--ink-2); font-size: 0.95rem; }
.guruh-bosh a { color: var(--firuza); font-weight: 700; }

/* Kichik bo'lim ichidagi interaktiv sahifa havolasi (onlayn test va h.k.) */
.guruh-ilova {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    margin-bottom: 16px;
    background: var(--siyoh);
    border-radius: var(--r-md);
    color: #fff;
    text-decoration: none;
    transition: background-color 0.18s, transform 0.18s;
}
.guruh-ilova:hover { background: var(--siyoh-2); transform: translateY(-2px); }
.guruh-ilova .motif { width: 40px; height: 40px; color: var(--zafaron); flex-shrink: 0; }
.guruh-ilova-matn { display: grid; gap: 3px; min-width: 0; }
.guruh-ilova-matn b { font-family: var(--font-display); font-size: 1.06rem; }
.guruh-ilova-matn span { font-size: 0.9rem; color: rgba(255, 255, 255, 0.74); }
.guruh-ilova-tugma {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--zafaron);
    color: var(--siyoh);
    font-weight: 700;
    font-size: 0.88rem;
    white-space: nowrap;
}
.guruh-ilova-tugma svg { width: 16px; height: 16px; }
.guruh-ilova:hover .guruh-ilova-tugma { background: var(--zafaron-l); }

/* =========================================================
   MUALLIF (O'zim haqimda)
   ========================================================= */
.muallif {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}
.muallif-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-1);
    position: sticky;
    top: 98px; /* navbar balandligi + havo */
}
.muallif-foto {
    aspect-ratio: 4 / 5;
    background: var(--siyoh);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.muallif-foto img { width: 100%; height: 100%; object-fit: cover; }
.muallif-foto .motif { width: 96px; height: 96px; color: var(--zafaron); opacity: 0.5; }
.muallif-meta { padding: 22px 22px 24px; }
.muallif-meta .nom { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; margin-bottom: 6px; }
.muallif-meta .lavozim { font-size: 0.9rem; color: var(--ink-2); margin-bottom: 16px; }
.muallif-kontakt { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); padding-top: 16px; }
.muallif-kontakt li { font-size: 0.88rem; color: var(--ink-2); padding: 6px 0; word-break: break-word; }
.muallif-kontakt li b { color: var(--ink); display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
    background: var(--siyoh);
    color: rgba(255, 255, 255, 0.72);
    padding: 62px 0 0;
    font-size: 0.93rem;
}
.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    gap: 44px;
    padding-bottom: 46px;
}
.footer h4 {
    color: #fff;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 18px;
    font-family: var(--font-body);
    font-weight: 700;
}
.footer p { color: rgba(255, 255, 255, 0.62); line-height: 1.7; margin: 0; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { margin-bottom: 10px; }
.footer ul a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.footer ul a:hover { color: var(--zafaron); }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.footer-brand .motif { width: 32px; height: 32px; color: var(--zafaron); }
.footer-brand .brand-logo { width: 40px; height: 40px; }
.footer-brand span { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1.02rem; }
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 22px 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.48);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1180px) {
    .about-grid { grid-template-columns: 1fr; gap: 40px; }
    .muallif { grid-template-columns: 1fr; gap: 32px; }
    .muallif-card { position: static; max-width: 320px; }
}

/* Keng ekranlar: navbar shrifti o'sadi.
   1366px li noutbukda yetti bo'lim bir qatorga zo'rg'a sig'adi, shuning uchun
   asosiy o'lcham (0.94rem) kichik — lekin 1600–1920px li monitorda navbar
   chetlarida bo'sh joy ko'p qolib, yozuvlar mayda ko'rinardi. Shuning uchun
   joy yetganda o'lcham bosqichma-bosqich kattalashadi. `.topbar .wrap` ning
   max-width i ham har bosqichda o'sishi SHART — aks holda havolalar 1340px
   ga qisilib, ikkinchi qatorga tushib ketadi.

   O'lchangan mazmun eni (tizimga kirgan holat; `.wrap` ning 56px to'ldirishi
   ichida; haqiqiy oyna uchun ~15px aylantirish yo'lagi qo'shiladi):
     0.94rem / 7px  → 1325px  (kerak 1340px)  ← asosiy, 1366px uchun
     1.00rem / 9px  → 1411px  (kerak 1426px)  ← 1450px dan
     1.06rem / 11px → 1502px  (kerak 1517px)  ← 1560px dan
     1.12rem / 13px → 1594px  (kerak 1609px)  ← 1660px dan
   Har bosqichda ~25–50px zaxira qoldirilgan. O'lchamni o'zgartirsangiz,
   qaytadan o'lchang: usul yuqorida, `.topbar .wrap` izohida yozilgan. */
@media (min-width: 1450px) {
    .topbar .wrap { max-width: 1420px; }
    .nav a { font-size: 1.00rem; padding: 10px 9px; }
    .brand-name { font-size: 1.20rem; }
    .brand-sub { font-size: 0.70rem; }
    .brand-logo { width: 44px; height: 44px; }
    .nav-user, .hisob-ism { font-size: 0.98rem; max-width: 96px; }
    .btn-nav { font-size: 0.98rem; }
}

@media (min-width: 1560px) {
    .topbar .wrap { max-width: 1510px; }
    .nav a { font-size: 1.06rem; padding: 10px 11px; }
    .brand-name { font-size: 1.26rem; }
    .brand-sub { font-size: 0.72rem; }
    .brand-logo { width: 46px; height: 46px; }
    .nav-user, .hisob-ism { font-size: 1.02rem; max-width: 110px; }
    .btn-nav { font-size: 1.02rem; padding: 11px 22px; }
}

@media (min-width: 1660px) {
    .topbar .wrap { max-width: 1600px; }
    .nav a { font-size: 1.12rem; padding: 10px 13px; }
    .brand-name { font-size: 1.32rem; }
    .brand-sub { font-size: 0.74rem; }
    .brand-logo { width: 48px; height: 48px; }
    .nav-user, .hisob-ism { font-size: 1.06rem; max-width: 124px; }
    .btn-nav { font-size: 1.06rem; padding: 12px 24px; }
}

/* 1280–1365px oralig'i: yetti bo'lim bir qatorda qolsin deb navbar
   shrifti eski (kichikroq) o'lchamiga qaytadi. Kattaroq shrift faqat
   1366px va undan keng ekranlarda — u yerda joy yetadi. Shu qoida
   bo'lmasa, 1280px li noutbuk to'satdan gamburgerga tushib qolardi. */
@media (max-width: 1365px) {
    .nav a { font-size: 0.88rem; padding: 9px 7px; }
    .brand-name { font-size: 1.08rem; }
    .brand-sub { font-size: 0.63rem; }
    .nav-user, .hisob-ism { font-size: 0.88rem; }
    .btn-nav { font-size: 0.88rem; padding: 9px 18px; }
}

@media (max-width: 1279px) {
    .topbar .wrap { flex-wrap: wrap; min-height: 68px; }
    .nav-toggle { display: flex; }
    .nav {
        display: none;
        order: 3;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 0 16px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }
    .nav.open { display: flex; }
    .nav a { padding: 14px 8px; font-size: 1.05rem; border-radius: 0; }
    .nav a.is-active::after { left: 8px; right: auto; width: 30px; bottom: 8px; }
    /* Gamburger menyuda ochiladigan panel emas — kichik bo'limlar shunchaki
       "Topshiriq" ostida ro'yxat bo'lib turadi (barmoq bilan hover yo'q). */
    .nav-menu {
        position: static;
        padding-top: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    .nav-menu-ichi {
        min-width: 0;
        padding: 0 0 6px;
        background: none;
        border: none;
        box-shadow: none;
    }
    .nav .nav-menu a { padding: 11px 8px 11px 26px; font-size: 0.97rem; }
    .nav-strelka { display: none; }
    .nav-auth {
        order: 4;
        width: 100%;
        padding: 14px 0 16px;
        padding-left: 0;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }
    .nav-auth.collapsed { display: none; }
    .nav-user, .hisob-ism { max-width: none; }
}

@media (max-width: 1060px) {
    .hero-inner { grid-template-columns: 1fr; padding: 54px 0 60px; }
    .hero-art { display: none; }
    .hero-strip .wrap { grid-template-columns: repeat(2, 1fr); gap: 22px; }

    .section { padding: 60px 0; }
    .footer-grid { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 660px) {
    body.pf { font-size: 1rem; }
    .wrap { padding: 0 20px; }
    .material { grid-template-columns: auto minmax(0, 1fr); }
    /* `.material.has-muqova` ikki klassli — mobil qoidasi undan kuchsizroq,
       shuning uchun bu yerda ham xuddi shunday aniqlik bilan qayta yozamiz. */
    .material.has-muqova { grid-template-columns: 92px minmax(0, 1fr); }
    .material-muqova { width: 92px; }
    .material .actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
    .material-body { grid-column: 1 / -1; }
    .hero-cta .btn { width: 100%; justify-content: center; }

    .guruh-ilova { flex-wrap: wrap; gap: 12px; padding: 16px; }
    .guruh-ilova .motif { display: none; }
    .guruh-ilova-tugma { margin-left: 0; width: 100%; justify-content: center; }

    .guruh > summary { padding: 16px 18px; gap: 10px; font-size: 1rem; }
    .guruh > summary .motif { display: none; }   /* tor ekranda nom uchun joy */
    .guruh-ichi { padding: 16px 14px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .pf *, .pf *::before, .pf *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
    .btn:hover, .bolim-card:hover { transform: none; }
}


/* =========================================================
   BOSH SAHIFA — QAHRAMON BLOKI (mijoz maketi bo'yicha)
   =========================================================
   Fon — `static/img/bosh-fon.jpg` (1855x848): chapda o'g'il bola,
   o'ngda qiz bola, pastda stol, O'RTASI ATAYLAB BO'SH. Butun
   mazmun shu bo'sh o'rtaga joylanadi.

   O'LCHOV TIZIMI — bitta qoida, hamma narsa unga bo'ysunadi:
   ---------------------------------------------------------
   Qahramon balandligi rasm nisbatidan keladi (`aspect-ratio`),
   shuning uchun rasm HECH QACHON kesilmaydi va tepasida/pastida
   xira chiziq qolmaydi (`contain` bilan shunday bo'lardi). Past
   oynada `max-height` uni ekranga sig'diradi — o'shanda rasm
   faqat tepa/pastdan bir necha px kesiladi, bolalarga tegmaydi.

   Mazmun ustuni `.bosh-ichi` — CONTAINER. Ichidagi HAMMA
   o'lcham `cqw` da (ustun kengligining foizi). Ustun kengligi
   esa ikkita narsaning kichigi: qahramon kengligining 45% i
   (bolalar orasidagi bo'sh joy) va ekran balandligidan
   hisoblangan xavfsiz kenglik. Natija: keng ekranda hammasi
   proporsional kattalashadi, past ekranda hammasi birga
   kichrayadi — alohida `vh` hisoblari kerak emas.

   `max(Xrem, Ycqw)` — mobil uchun pol: tor ekranda ustun 360px
   bo'lganda 2.3cqw = 8px bo'lardi, pol uni o'qiladigan qiladi.
   ========================================================= */
.bosh-qism { position: relative; }

.bosh {
    --b-kok:      #2E7DE0;
    --b-yashil:   #43A047;
    --b-sariq:    #F5920B;
    --b-qizil:    #E53935;
    --b-binafsha: #8B5CF6;
    --b-pushti:   #EC5C9D;

    position: relative;
    container-type: inline-size;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Rasmning o'z nisbati. */
    aspect-ratio: 1855 / 848;
    /* 150 = navbar 75 + pastdagi oq tasma 64 + zaxira. 440px — pol:
       juda past oynada qahramon ekrandan oshadi, lekin mazmun kesilmaydi
       (pastdagi `.bosh-ichi` ning 420px poli bilan juftlikda). */
    max-height: max(calc(100vh - 150px), 440px);
    min-height: 0;
    background-color: #DCEEFB;
    background-image: url('/static/img/bosh-fon.jpg');
    background-size: cover;
    /* Kesish kerak bo'lsa — pastdan ko'proq: tepada yog'och taxta
       va qo'lyozma bor, pastda faqat qog'ozlar. */
    background-position: center 40%;
    background-repeat: no-repeat;
    overflow: hidden;
}

.bosh-ichi {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* `cqw` bu yerda `.bosh` ga nisbatan (ota konteyner). */
    width: min(45cqw, max(calc((100vh - 150px) * .98), 420px), 920px);
    text-align: center;
}

/* ---------- Bulut: sarlavha, tabletka, lenta ---------- */
.bosh-bulut {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    /* Bulutning bo'rtiqlari va chiroq qutidan ~14cqw yuqoriga
       chiqadi; markazlash to'g'ri bo'lishi uchun o'sha joy
       oqimda ham band qilinadi. */
    margin-top: 13.5cqw;
    /* Yon to'ldirish ataylab kichik: sarlavha bulutning deyarli butun
       kengligini egallashi kerak (maketda ~87%). Bulutning o'zi qutidan
       6cqw tashqariga chiqadi, shu bo'shliq yetarli. */
    padding: 4.5cqw 1.5cqw 3.2cqw;
}

/* Bulut shakli — bitta SVG: oq to'ldirma (doiralar birlashmasi) va
   atrofidagi punktir. Doiralar bir `<g opacity>` ichida, shuning uchun
   ustma-ust tushgan joylari qoraymaydi.
   viewBox nisbati (1120:610) qutining ekrandagi nisbatiga TENG
   (112cqw x 61cqw; quti ~100x46cqw) — shu sababli `preserveAspectRatio="none"`
   shaklni cho'zmaydi. Qutini o'zgartirsangiz, buni ham qayta hisoblang. */
.bulut-shakl {
    position: absolute;
    left: -6cqw;
    top: -9cqw;
    width: calc(100% + 12cqw);
    height: calc(100% + 15cqw);
    z-index: -1;
    overflow: visible;
    filter: drop-shadow(0 10px 26px rgba(30, 60, 110, .15));
    pointer-events: none;
}

.bulut-tola { fill: #fff; opacity: .94; }

.bulut-chiziq {
    fill: none;
    stroke: #C2CFDE;
    stroke-width: 2.4;
    stroke-dasharray: 9 12;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* ---------- Bezak: chiroq, qaychi, barglar, yoylar ---------- */
.bosh-bezak { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.bosh-bezak svg { position: absolute; height: auto; }

.bz-chiroq   { left: 50%; top: -14.5cqw; width: 8.5cqw; transform: translateX(-50%);
               filter: drop-shadow(0 4px 6px rgba(200, 140, 0, .28)); }
.bz-yoy      { top: -8cqw; width: 17cqw; }
.bz-yoy-chap { left: 3cqw; }
.bz-yoy-ong  { right: 3cqw; }
.bz-qaychi   { right: -1cqw; top: -11cqw; width: 7cqw; transform: rotate(10deg);
               filter: drop-shadow(0 3px 5px rgba(30, 60, 110, .2)); }
.bz-barg     { width: 6cqw; }
.bz-barg-chap{ left: -8.5cqw; top: 44%; transform: rotate(-25deg); }
.bz-barg-ong { right: -7.5cqw; top: 6%; transform: rotate(20deg) scaleX(-1); }

/* ---------- Sarlavha ---------- */
.bosh-nom {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    width: 100%;
}

/* «Inkorporatsion» — SVG, uch qatlam ustma-ust:
     .q-oq   — oq halqa (harf fondan ko'tariladi)
     .q-rang — har harf o'z gradientida
     .q-yalt — yuqori yarmiga oq yaltiroqlik (clipPath)
   SVG bo'lgani uchun so'z konteynerga qarab o'zi kichrayadi — shrift
   o'lchamini alohida hisoblash shart emas. */
.bosh-yozuv {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    filter:
        drop-shadow(0 4px 0 rgba(20, 50, 100, .10))
        drop-shadow(0 12px 18px rgba(20, 50, 100, .20));
}

.bosh-yozuv text {
    font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
    font-weight: 700;
    font-size: 100px;
    letter-spacing: 2px;
}

.bosh-yozuv .q-oq   { fill: #fff; stroke: #fff; stroke-width: 22; stroke-linejoin: round; }
.bosh-yozuv .q-yalt { fill: #fff; opacity: .26; }

/* Ko'k tabletka — «amaliy topshiriqlar» */
.bosh-tabletka {
    display: inline-block;
    margin-top: 1.4cqw;
    padding: .1em .95em .18em;
    border-radius: 999px;
    border: .075em solid #fff;
    background: linear-gradient(180deg, #4E9AF2 0%, #2E7DE0 55%, #1E62C4 100%);
    color: #fff;
    font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
    font-weight: 700;
    font-size: max(1.25rem, 6.8cqw);
    line-height: 1.15;
    letter-spacing: .01em;
    text-shadow: 0 .03em 0 rgba(0, 0, 0, .14);
    box-shadow:
        inset 0 .12em 0 rgba(255, 255, 255, .28),
        0 .1em 0 #174E9E,
        0 .35em .7em rgba(20, 50, 100, .26);
}

/* Sariq lenta */
.bosh-lenta {
    display: flex;
    align-items: center;
    gap: .35em;
    margin: 1.7cqw 0 0;
    font-size: max(.74rem, 2.9cqw);
}

.lenta-matn {
    display: inline-block;
    padding: .42em 1.5em .46em;
    background: linear-gradient(180deg, #FFF6D2, #FFE9A2);
    color: #1F3A5C;
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 800;
    font-size: 1em;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 .12em 0 rgba(190, 150, 40, .35);
    clip-path: polygon(0 0, 100% 0, calc(100% - .7em) 50%, 100% 100%, 0 100%, .7em 50%);
}

.lenta-barg { width: 1.35em; height: 1.35em; margin-left: -.15em; transform: rotate(-20deg); }

/* ---------- Beshta doira ---------- */
.bosh-doiralar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    justify-items: center;
    align-items: start;
    gap: 0 .5cqw;
    width: 90%;
    margin-top: 3cqw;
    padding: 2.6cqw 1.4cqw 2.2cqw;
    border-radius: 4cqw;
    background: rgba(255, 255, 255, .74);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .7),
        0 8px 28px rgba(20, 40, 80, .12);
}

.bd {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: max(6px, 1.3cqw);
    width: 100%;
    color: #1F3A5C;
    text-decoration: none;
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: max(.7rem, 2.25cqw);
    font-weight: 800;
    line-height: 1.15;
    transition: transform .16s ease;
}

.bd:hover { transform: translateY(-4px); }

.bd-doira {
    display: grid;
    place-items: center;
    width: max(46px, 10.5cqw);
    height: max(46px, 10.5cqw);
    border-radius: 50%;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bd-rang) 78%, #fff) 0%, var(--bd-rang) 60%);
    color: #fff;
    box-shadow:
        0 max(3px, .5cqw) 0 var(--bd-soya),
        0 8px 18px rgba(20, 40, 80, .16);
    transition: box-shadow .16s ease;
}

.bd:hover .bd-doira { box-shadow: 0 max(4px, .7cqw) 0 var(--bd-soya), 0 12px 22px rgba(20, 40, 80, .22); }

.bd-doira svg { width: 50%; height: 50%; }

.bd-1 { --bd-rang: #43A047; --bd-soya: #2E7D32; }
.bd-2 { --bd-rang: #EC5C9D; --bd-soya: #C93E7C; }
.bd-3 { --bd-rang: #F5920B; --bd-soya: #CE7405; }
.bd-4 { --bd-rang: #2E9BE0; --bd-soya: #1D77B3; }
.bd-5 { --bd-rang: #8B5CF6; --bd-soya: #6D3FD4; }

/* ---------- Asosiy tugma ---------- */
.bosh-cta {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    margin-top: 3cqw;
    padding: .5em 1.6em .55em;
    border-radius: 999px;
    border: .1em solid rgba(255, 255, 255, .9);
    background: linear-gradient(180deg, #52B85A 0%, #3E9F43 55%, #2E8B33 100%);
    color: #fff;
    font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
    font-weight: 600;
    font-size: max(1rem, 3.6cqw);
    line-height: 1.1;
    text-decoration: none;
    box-shadow:
        inset 0 .15em 0 rgba(255, 255, 255, .18),
        0 .18em 0 #216B29,
        0 .6em 1em rgba(46, 125, 50, .34);
    transition: transform .12s ease, box-shadow .12s ease;
}

.bosh-cta:hover  { transform: translateY(-2px); box-shadow: inset 0 .15em 0 rgba(255,255,255,.18), 0 .26em 0 #216B29, 0 .8em 1.2em rgba(46,125,50,.4); }
.bosh-cta:active { transform: translateY(.12em); box-shadow: inset 0 .15em 0 rgba(255,255,255,.18), 0 .06em 0 #216B29; }
.bosh-cta svg { width: 1em; height: 1em; }

/* ---------- Pastdagi oq tasma ---------- */
.bosh-tasma {
    position: relative;
    z-index: 1;
    padding: 12px 0 14px;
    background: #fff;
}

.bosh-tolqin {
    position: absolute;
    left: 0; right: 0;
    top: -34px;
    display: block;
    width: 100%;
    height: 36px;
}

.bosh-tasma .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 22px;
    max-width: 1480px;
}

.bt {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #1F3A5C;
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: clamp(.92rem, 1.1vw, 1.08rem);
    font-weight: 800;
    line-height: 1.2;
}

.bt svg { width: 38px; height: 38px; flex: none; filter: drop-shadow(0 2px 2px rgba(20, 40, 80, .14)); }

.bosh-shior {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #2E8B3A;
    font-family: 'Caveat', 'Segoe Script', cursive;
    font-size: clamp(1.2rem, 1.5vw, 1.55rem);
    font-weight: 700;
    line-height: 1.1;
    transform: rotate(-3deg);
}

.bosh-shior svg { width: 20px; height: 20px; }

/* ---------- Tor ekran ----------
   Rasm endi faqat fon: mazmun oq plastinada, bulut SVG si yashirin
   (pol o'lchamlar qutining nisbatini o'zgartiradi va bulut cho'zilib
   ketardi). */
@media (max-width: 900px) {
    .bosh {
        aspect-ratio: auto;
        max-height: none;
        min-height: 0;
        padding: 30px 0 46px;
        background-image: url('/static/img/bosh-fon-mob.jpg');
        background-position: center top;
    }
    .bosh-ichi { width: min(560px, 92%); }
    .bosh-bulut {
        margin-top: 54px;
        padding: 24px 18px 18px;
        border-radius: 28px;
        background: rgba(255, 255, 255, .94);
        box-shadow: 0 10px 30px rgba(30, 60, 110, .15);
    }
    .bulut-shakl { display: none; }
    .bosh-tabletka { margin-top: 10px; }
    .bosh-lenta { margin-top: 12px; }
    .bz-chiroq { width: 46px; top: -60px; }
    .bz-qaychi { width: 40px; top: -30px; right: -6px; }
    .bz-yoy, .bz-barg { display: none; }
    .bosh-doiralar { width: 100%; margin-top: 16px; padding: 14px 8px 12px; border-radius: 22px; background: rgba(255, 255, 255, .9); }
    .bosh-cta { margin-top: 18px; }
}

/* Tasma: to'rt va'da + shior bir qatorga sig'may qolganda markazda o'ralsin. */
@media (max-width: 1100px) {
    .bosh-tasma .wrap { justify-content: center; gap: 10px 18px; }
    .bosh-shior { width: 100%; justify-content: center; }
}

@media (max-width: 560px) {
    .bosh-doiralar { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 6px; }
    .bd { width: 30%; }
    .lenta-matn { white-space: normal; text-align: center; }
    .bt { font-size: .9rem; }
    .bt svg { width: 32px; height: 32px; }
}


/* =========================================================
   OQ NAVBAR
   =========================================================
   Mijoz maketida panel oq: rangli logotip, to'q ko'k havolalar,
   o'ngda ko'k "Kirish" tugmasi.

   Bu blok fayl OXIRIDA turadi — yuqoridagi to'q navbar
   qoidalarini bir xil kuchdagi selektorlar bilan yengadi.
   Yuqoridagilarni o'chirib tashlamadim: ular navbarning
   o'lchov/joylashuv qoidalarini ham saqlaydi, faqat RANG
   shu yerda qayta beriladi.

   O'LCHOVGA TEGMANG. `.nav a` ning shrift o'lchami va padding'i
   yuqoridagi RESPONSIVE zinapoyasiga bog'langan (yetti uzun
   yorliq bitta qatorga zo'rg'a sig'adi). Bu yerda faqat
   `font-family` almashadi va u o'lchandi: 1280–1920 oralig'ida
   panel 75px, nav bitta qatorda qoladi.
   ========================================================= */
.topbar {
    background: #fff;
    border-bottom: 1px solid #E6EDF5;
    box-shadow: 0 2px 14px rgba(20, 40, 80, .06);
}

/* ---- Brend ---- */
.brand-text { gap: 0; }

.brand-sub {
    order: 1;
    font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
    font-size: 1.24rem;
    font-weight: 600;
    letter-spacing: -.2px;
    text-transform: none;
    color: #2E7DE0;
}

.brand-name {
    order: 2;
    margin-top: -3px;
    font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
    font-size: .92rem;
    font-weight: 500;
    letter-spacing: .2px;
    text-transform: lowercase;
    color: #43A047;
}

/* ---- Havolalar ---- */
.nav a {
    font-family: 'Nunito', system-ui, sans-serif;
    color: #35506F;
}

.nav a:hover { color: #2E7DE0; }

.nav a.is-active,
.nav .nav-bosh.is-active {
    color: #2E7DE0;
    box-shadow: inset 0 -3px 0 #2E7DE0;
}

/* Topshiriq ostidagi ochiladigan panel ham oq bo'ldi. */
.nav-menu-ichi {
    background: #fff;
    border: 1px solid #E6EDF5;
    box-shadow: 0 12px 30px rgba(20, 40, 80, .14);
}

.nav-menu-ichi a { color: #35506F; }
/* `.nav .nav-menu a:hover` (0,3,1) — yuqoridagi TO'Q navbar qoidasi —
   `.nav-menu-ichi a:hover` (0,2,1) dan kuchli va oq fonga OQ matn berardi:
   «Rasmli test» sichqoncha ostida g'oyib bo'lardi. Shu kuchda qayta beriladi. */
.nav .nav-menu a:hover,
.nav .nav-menu a:focus-visible,
.nav-menu-ichi a:hover { background: #F1F7FE; color: #2E7DE0; }
.nav-menu-ichi .motif { color: #2E7DE0; opacity: .7; }

/* ---- Kirish / Chiqish ---- */
.btn-nav {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #2E7DE0;
    border-color: #2E7DE0;
    color: #fff;
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 700;
    border-radius: 999px;
}

.btn-nav:hover { background: #1F5FAF; border-color: #1F5FAF; color: #fff; }

.btn-nav.ghost {
    background: transparent;
    border-color: #C9D8EA;
    color: #35506F;
}

.btn-nav.ghost:hover { background: #F1F7FE; border-color: #2E7DE0; color: #2E7DE0; }

.nav-user { color: #35506F; font-family: 'Nunito', system-ui, sans-serif; }

/* ---- Administrator hisobi: navbardagi ism = menyu ----
   Faqat `is_staff` uchun chiqadi (base.html). Navbar yetti bo'lim bilan
   bir qatorga millimetrigacha o'lchab sig'dirilgani uchun sakkizinchi
   havola qo'shib bo'lmaydi — «O'quvchilarim» va boshqaruv paneli shu
   menyu ichida, «Chiqish» ham o'sha yerga ko'chdi.

   O'lchangan (uzun ism bilan, `.nav-auth` kengligi):
     oyna 1284 → eski 195px, yangi 180px
     oyna 1370 → eski 204px, yangi 180px
     oyna 1454 → eski 217px, yangi 192px
     oyna 1564 → eski 238px, yangi 206px
     oyna 1664 → eski 258px, yangi 220px
   Ya'ni blok kengaymadi, aksincha 15–38px torayadi; `.topbar .wrap` da
   toshish nolga teng va lenta hamma qadamda 75px (bir qator) bo'lib
   qoladi. O'lchash usuli: sahifaga kichik `<script>` qo'shib
   `.topbar .wrap` ning `scrollWidth - clientWidth` ini DOM ga yozish,
   keyin `--dump-dom` bilan o'qish (`--window-size` viewportdan ~16px
   keng bo'ladi, shuni hisobga oling). */
.nav-hisob { position: relative; }

.hisob-tugma {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 5px 13px 5px 5px;
    background: #F1F7FE;
    border: 1.5px solid #DCE8F6;
    border-radius: 999px;
    color: #35506F;
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.18s, border-color 0.18s;
}
.hisob-tugma:hover { background: #E4EFFB; border-color: #2E7DE0; }

.hisob-harf {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(155deg, #2E7DE0, #1E7A6B);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
}

/* Uzun ism navbarni ikkinchi qatorga tushirmasin: kengligi
   `.nav-user` bilan bir xil qadamlarda o'zgaradi (yuqoridagi
   media so'rovlarga qarang). */
.hisob-ism {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-hisob .nav-strelka {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    opacity: .7;
    transition: transform 0.18s;
}
.nav-hisob.ochiq .nav-strelka { transform: rotate(180deg); }

/* Panel FAQAT bosilganda ochiladi (base.html dagi JS) — «Topshiriq»
   menyusidagidek hover bilan emas: ichida «Chiqish» bor, uni sichqoncha
   tasodifan ustidan o'tganda ochib qo'yish yaramaydi. */
.hisob-menyu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 60;
    padding-top: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.16s, transform 0.16s, visibility 0.16s;
}
.nav-hisob.ochiq .hisob-menyu { opacity: 1; visibility: visible; transform: none; }

.hisob-menyu-ichi {
    display: grid;
    gap: 2px;
    min-width: 236px;
    padding: 8px;
    background: #fff;
    border: 1px solid #E6EDF5;
    border-radius: 16px;
    box-shadow: 0 16px 36px rgba(20, 40, 80, 0.16);
}

.hisob-yorliq {
    padding: 6px 12px 8px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #94A6BC;
}

.hisob-menyu-ichi a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #35506F;
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.93rem;
    text-decoration: none;
}
.hisob-menyu-ichi a svg { flex-shrink: 0; }
.hisob-menyu-ichi a:hover { background: #F1F7FE; color: #2E7DE0; }
.hisob-menyu-ichi a.is-active { background: #EAF3FD; color: #2E7DE0; }

/* «Chiqish» — qolganidan ajratilgan va anor rangida. Ikki sinfli
   selektor, shuning uchun yuqoridagi umumiy rangdan kuchli. */
.hisob-menyu-ichi a.hisob-chiqish {
    margin-top: 5px;
    padding-top: 13px;
    border-top: 1px solid #EEF3F9;
    border-radius: 0 0 10px 10px;
    color: #A83A2B;
}
.hisob-menyu-ichi a.hisob-chiqish:hover { background: #FCEDEA; color: #8A2C20; }

/* Gamburger menyuda ochiladigan panel emas — ro'yxat shunchaki
   ismning ostida turadi (barmoq bilan hover yo'q). `.nav-strelka`
   yuqoridagi umumiy qoida bilan allaqachon yashiriladi. */
@media (max-width: 1279px) {
    .nav-hisob { width: 100%; }
    .hisob-tugma { width: 100%; justify-content: flex-start; }
    .hisob-menyu {
        position: static;
        padding-top: 8px;
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    .hisob-menyu-ichi {
        min-width: 0;
        padding: 0;
        background: none;
        border: none;
        box-shadow: none;
    }
}

/* Hamburger chizig'i oq fonda ko'rinmay qolardi. */
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after { background: #35506F; }

.nav-toggle { border-color: #D8E3F0; }

/* Mobil menyu ochilganda ham oq. */
@media (max-width: 1279px) {
    .nav { background: #fff; border-top: 1px solid #E6EDF5; }
}


/* =========================================================
   YORQIN USLUB — BUTUN SAYT
   =========================================================
   Bosh sahifa mijoz maketiga ko'ra yorqin uslubda qayta
   qilindi; bu blok qolgan sahifalarni ham o'shanga keltiradi.

   NEGA FAYL OXIRIDA VA NEGA ESKISI O'CHIRILMAGAN
   ---------------------------------------------------------
   Yuqoridagi bo'limlarda joylashuv, o'lcham va responsive
   qoidalari ham bor. Ularni o'chirsak, sahifa tuzilishi
   buziladi. Shuning uchun bu yerda faqat RANG, SHRIFT va
   SHAKL qayta beriladi — CSS da keyingi qoida bir xil kuchda
   g'olib chiqadi.

   RANG TIZIMI (maketdan olingan)
   ---------------------------------------------------------
   ko'k      #2E7DE0   asosiy, havolalar, faol holat
   yashil    #43A047   amal tugmasi
   to'q sariq#F5920B   urg'u
   binafsha  #8B5CF6   urg'u
   pushti    #EC5C9D   urg'u
   siyoh     #22384F   matn

   Yetti bo'limning `--t1`…`--t7` tuslari SAQLANADI, lekin
   qiymatlari yorqinroq: karta qaysi bo'limga tegishli ekanini
   baribir rang aytadi.
   ========================================================= */

:root {
    /* ---- Yetti bo'lim: yorqin registr ---- */
    --t1: #2E7DE0;   /* 1 Muallif haqida */
    --t2: #43A047;   /* 2 Metodika */
    --t3: #2E9BE0;   /* 3 Maqola */
    --t4: #8B5CF6;   /* 4 Multimediya */
    --t5: #F5920B;   /* 5 Topshiriq */
    --t6: #EC5C9D;   /* 6 Xarita */
    --t7: #E23B3B;   /* 7 Dars ishlanmalar */

    --t1-pale: #E7F0FC;
    --t2-pale: #E6F4E7;
    --t3-pale: #E4F2FC;
    --t4-pale: #EFE9FE;
    --t5-pale: #FEF1DE;
    --t6-pale: #FDEAF3;
    --t7-pale: #FCE9E9;

    /* ---- Sirtlar: iliq qog'oz emas, och havorang ---- */
    --paper:   #FFFFFF;
    --qogoz:   #F3F9FF;
    --stone:   #F3F9FF;
    --stone-2: #E7F1FB;

    /* Bo'lim sahifalaridagi karta juftliklari */
    --limon:   #F1F8FE;
    --yashil:  #FFFFFF;
    --gulnor:  #F1F8FE;
    --nilufar: #FFFFFF;
    --zangori: #F1F8FE;
    --behi:    #FFFFFF;

    /* Eski nomdagi uchta bo'yoq ham yorqin registrga o'tadi.
       Ular `haqida.html` ning o'z uslubida (vaqt chizig'i, nishonlar,
       sertifikat kartalari) va fokus halqasida ishlatiladi — shu
       sababli ularni shu yerda almashtirish o'sha sahifani ham
       avtomatik yangilaydi, uni alohida tahrirlash shart emas. */
    --anor:     #E2483B;
    --anor-d:   #C23328;
    --zafaron:  #F5920B;
    --zafaron-l:#FDD9A4;
    --zafaron-d:#CE7405;
    --firuza:   #2E9BE0;
    --firuza-l: #7CC2EE;

    /* ---- Matn va chiziqlar ---- */
    --ink:   #22384F;
    --ink-2: #50688A;
    --ink-3: #8597AE;
    --line:   #DCE9F6;
    --line-2: #EAF2FB;

    /* ---- Shakl: yumaloqroq ---- */
    --r-lg: 20px;
    --r-md: 14px;
    --r-sm: 10px;

    /* ---- Shrift: ikkita oila ----
       Fredoka — sarlavha va tugmalar (bolalarcha, yumaloq)
       Nunito  — matn va interfeys
       DIQQAT: navbar ham Nunito. Uning breakpoint zinapoyasi
       shu shrift bilan o'lchangan (75px, bitta qator) —
       o'zgartirsangiz qaytadan o'lchash kerak. */
    --font-display: 'Fredoka', 'Nunito', system-ui, sans-serif;
    --font-serif:   'Nunito', system-ui, sans-serif;
    --font-body:    'Nunito', system-ui, sans-serif;

    --shadow-1: 0 2px 4px rgba(20, 40, 80, .05), 0 8px 20px rgba(20, 40, 80, .07);
    --shadow-2: 0 6px 12px rgba(20, 40, 80, .07), 0 18px 40px rgba(20, 40, 80, .12);
}

body.pf { background: var(--qogoz); }

/* Fokus halqasi ko'k — saytning asosiy rangi. Zafaron edi, u
   ko'k tugmalar va maydonlar ustida begona ko'rinardi. */
.pf :focus-visible,
:focus-visible { outline-color: #2E7DE0; }

.pf h1, .pf h2, .pf h3, .pf h4 { font-weight: 600; letter-spacing: -.01em; }

.prose a:not(.btn):not(.btn-sm),
.material-body a { color: #2E7DE0; }

/* ---------------------------------------------------------
   SAHIFA SARLAVHASI
   Ilgari bu to'q ko'k fonda foto edi (jiddiy uslub). Endi
   och havorang gradient — bosh sahifaning osmoni bilan bir xil.
   --------------------------------------------------------- */
.page-head {
    background: linear-gradient(180deg, #DCEEFB 0%, #EAF4FE 55%, #F3F9FF 100%);
    background-image: none;
    color: var(--ink);
    padding: 44px 0 40px;
    border-bottom: 1px solid var(--line);
}

.page-head::before,
.page-head::after { content: none; }   /* eski foto va parda */

/* `.page-head .wrap` da 54/56px ichki bo'shliq bor edi — u to'q fonli
   katta foto lentasi uchun mo'ljallangandi. Endi lenta och va past,
   shuning uchun bo'shliq `.page-head` ning o'zida beriladi. */
.page-head .wrap { padding-top: 0; padding-bottom: 0; }

.page-head h1 {
    color: var(--ink);
    font-size: clamp(1.7rem, 3.4vw, 2.7rem);
}

.page-head .page-lede {
    color: var(--ink-2);
    font-size: 1.02rem;
    max-width: 62ch;
}

.crumbs, .crumbs a, .crumbs span { color: var(--ink-2); }
.crumbs a { font-weight: 700; color: #2E7DE0; }

/* ---------------------------------------------------------
   YORLIQ (eyebrow)
   Mono ALL-CAPS o'rniga yumaloq rangli nishon — bosh
   sahifadagi sariq lentaning kichik qardoshi.
   --------------------------------------------------------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 15px;
    border-radius: 999px;
    background: #E7F0FC;
    color: #2E7DE0;
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

.eyebrow::after { content: none; }      /* cho'zilgan chiziq kerak emas */
.eyebrow .motif { width: 15px; height: 15px; opacity: .9; }
.eyebrow.ink { background: #FEF1DE; color: #C97A05; }

.section-head h2 { font-size: clamp(1.5rem, 2.8vw, 2.2rem); }
.section-head p { color: var(--ink-2); }

/* ---------------------------------------------------------
   BO'LIM KARTALARI (bosh sahifa)
   Oq karta, tepasida bo'lim rangidagi chiziq, tugma esa
   yumaloq tabletka.
   --------------------------------------------------------- */
.bolim-card {
    padding: 24px 22px 20px;
    border: 1px solid var(--line);
    border-top: 4px solid var(--kt, #2E7DE0);
    border-radius: var(--r-lg);
    background: var(--paper);
    box-shadow: var(--shadow-1);
}

.bolim-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }

.bolim-card .motif { color: var(--kt); opacity: .22; width: 26px; height: 26px; }

.bolim-num {
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: none;
    color: var(--kt);
}

.bolim-card h3 { font-size: 1.25rem; }
.bolim-card p { font-family: var(--font-body); color: var(--ink-2); }

.bolim-more {
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--kt);
    color: #fff;
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: 0 3px 0 rgba(0, 0, 0, .16);
}

.bolim-card:hover .bolim-more { box-shadow: 0 5px 0 rgba(0, 0, 0, .18); }

/* Yetti bo'limning kartasi ham oq: rang faqat tepadagi chiziqda
   va tugmada. Ilgari butun karta bo'yalardi va yettitasi birga
   rang-barang bo'lib ketardi. */
.tone-1, .tone-2, .tone-3, .tone-4, .tone-5, .tone-6, .tone-7 { background: var(--paper); }

/* ---------------------------------------------------------
   MATERIAL KARTALARI (bo'lim sahifalari)
   --------------------------------------------------------- */
.material {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--paper);
    box-shadow: var(--shadow-1);
}

.material:hover { box-shadow: var(--shadow-2); }
.material h3 { font-family: var(--font-display); font-size: 1.1rem; }
.material p, .material .meta { font-family: var(--font-body); }
.material .meta { color: var(--ink-3); }

.material-tag {
    border-radius: var(--r-md);
    background: #E7F0FC;
    color: #2E7DE0;
    font-family: var(--font-body);
    font-weight: 800;
}

/* ---------------------------------------------------------
   TUGMALAR — hammasi tabletka
   --------------------------------------------------------- */
.btn, .btn-sm {
    border-radius: 999px;
    font-family: var(--font-body);
    font-weight: 800;
}

.btn-primary  { background: #43A047; border-color: #43A047; color: #fff; }
.btn-primary:hover { background: #3B8F3F; border-color: #3B8F3F; box-shadow: 0 4px 0 rgba(46, 125, 50, .35); }
.btn-solid    { background: #2E7DE0; border-color: #2E7DE0; color: #fff; }
.btn-solid:hover { background: #1F5FAF; border-color: #1F5FAF; box-shadow: 0 4px 0 rgba(31, 95, 175, .35); }
.btn-outline  { background: #fff; border-color: var(--line); color: var(--ink); }
.btn-outline:hover { background: #F1F7FE; border-color: #2E7DE0; color: #2E7DE0; }

.btn-sm { border-color: var(--line); color: var(--ink-2); background: #fff; }
.btn-sm:hover { background: #2E7DE0; border-color: #2E7DE0; color: #fff; }

/* ---------------------------------------------------------
   KICHIK BO'LIMLAR va ILOVA KARTASI
   --------------------------------------------------------- */
.guruh {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--paper);
}

.guruh-nomi { font-family: var(--font-display); }
.guruh-son { background: #E7F0FC; color: #2E7DE0; font-family: var(--font-body); font-weight: 800; }

.guruh-ilova {
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, #2E7DE0, #4C97F0);
    border: 0;
}

.guruh-ilova-tugma {
    border-radius: 999px;
    background: #fff;
    color: #2E7DE0;
    font-family: var(--font-body);
    font-weight: 800;
}

/* ---------------------------------------------------------
   YON KARTA va IQTIBOS
   --------------------------------------------------------- */
.aside-card {
    background: linear-gradient(160deg, #2E7DE0, #1F5FAF);
    border-radius: var(--r-lg);
    border: 0;
}

.pull { border-left-color: #F5920B; font-family: var(--font-body); }

/* ---------------------------------------------------------
   FOOTER — to'q ko'k emas, och
   --------------------------------------------------------- */
.footer {
    background: #fff;
    color: var(--ink-2);
    border-top: 1px solid var(--line);
}

/* Footer sarlavhasi: mono ALL-CAPS emas, oddiy yozuv.
   `text-transform` va `letter-spacing` ni ham bekor qilish SHART —
   yuqoridagi qoida ularni o'rnatgan, faqat rangni almashtirish
   yetarli emas. */
.footer h4 {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

/* `.footer ul a` (0,2,1) `.footer a` (0,1,1) dan kuchli — shuning
   uchun havolalar oq fonda OQ bo'lib, umuman ko'rinmay qolgandi.
   Bir xil kuchdagi selektor bilan yozilishi shart. */
.footer ul a { color: var(--ink-2); }
.footer ul a:hover { color: #2E7DE0; }
.footer a { color: var(--ink-2); }
.footer a:hover { color: #2E7DE0; }
.footer p { color: var(--ink-2); }
.footer-brand span { color: var(--ink); font-family: var(--font-display); font-weight: 600; }
.footer-bottom { border-top-color: var(--line); color: var(--ink-3); }
.footer .motif { color: #2E7DE0; opacity: .3; }


/* =========================================================
   BO'LIM TUSLARI
   =========================================================
   Har bo'lim o'z rangida. Rang BEZAK EMAS — foydalanuvchi
   qaysi bo'limda ekanini sarlavha o'qimasdan biladi.

   Tus `<body class="sahifa-{{ active }}">` dan keladi
   (base.html). Bitta o'zgaruvchi — `--tus` — sarlavha
   lentasini, yorliqni, kartalar chetini va tugmalarni
   birdaniga boshqaradi.

   Yangi bo'lim qo'shsangiz: `--t8` ni `:root` ga, keyin shu
   yerga bitta qator qo'shing. Boshqa hech narsa kerak emas.
   ========================================================= */
.pf {
    --tus: #2E7DE0;
    --tus-pale: #E7F0FC;
}

.sahifa-haqida      { --tus: var(--t1); --tus-pale: var(--t1-pale); }
.sahifa-metodika    { --tus: var(--t2); --tus-pale: var(--t2-pale); }
.sahifa-maqola      { --tus: var(--t3); --tus-pale: var(--t3-pale); }
.sahifa-multimediya { --tus: var(--t4); --tus-pale: var(--t4-pale); }
.sahifa-topshiriq   { --tus: var(--t5); --tus-pale: var(--t5-pale); }
.sahifa-xarita      { --tus: var(--t6); --tus-pale: var(--t6-pale); }
.sahifa-ishlanma    { --tus: var(--t7); --tus-pale: var(--t7-pale); }
.sahifa-oquvchilarim{ --tus: var(--t8); --tus-pale: var(--t8-pale); }

/* ---------------------------------------------------------
   SAHIFA FONI — tekis emas
   Ikkita juda yumshoq dog': biri bo'lim tusida, ikkinchisi
   ko'k. Ular `fixed`, ya'ni scroll paytida qimirlamaydi va
   sahifa "qog'oz" emas, "muhit" bo'lib ko'rinadi.
   --------------------------------------------------------- */
body.pf {
    background-color: var(--qogoz);
    background-image:
        radial-gradient(ellipse 60% 45% at 12% 0%, var(--tus-pale), transparent 65%),
        radial-gradient(ellipse 50% 40% at 92% 22%, #E7F0FC, transparent 62%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* ---------------------------------------------------------
   SARLAVHA LENTASI — bo'lim tusida
   --------------------------------------------------------- */
.page-head {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, var(--tus-pale) 0%, color-mix(in srgb, var(--tus-pale) 55%, #F3F9FF) 60%, #F3F9FF 100%);
    border-bottom: 1px solid var(--line);
}

/* Burchakdagi palak — juda so'ngan, imzo sifatida. Katta va
   yarmi kesilgan: bezak bo'lib emas, muhit bo'lib o'qiladi. */
.page-head::after {
    content: '';
    position: absolute;
    right: -70px;
    top: -60px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: var(--tus);
    opacity: .07;
    pointer-events: none;
}

.page-head::before {
    content: '';
    position: absolute;
    right: 120px;
    bottom: -110px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: var(--tus);
    opacity: .05;
    pointer-events: none;
}

.page-head .wrap { position: relative; z-index: 1; }

.crumbs a { color: var(--tus); }

/* Sarlavhaning tagida bo'lim tusidagi qisqa chiziq — sahifa
   qaysi bo'limga tegishli ekanini yana bir marta aytadi. */
.page-head h1::after {
    content: '';
    display: block;
    width: 64px;
    height: 5px;
    margin-top: 14px;
    border-radius: 999px;
    background: var(--tus);
}

/* ---------------------------------------------------------
   YORLIQ va TUGMALAR — bo'lim tusida
   --------------------------------------------------------- */
.eyebrow {
    background: var(--tus-pale);
    color: var(--tus);
}

.eyebrow.ink { background: var(--tus-pale); color: var(--tus); }

.btn-solid { background: var(--tus); border-color: var(--tus); }
.btn-solid:hover { background: var(--tus); border-color: var(--tus); filter: brightness(.92); }
.btn-sm:hover { background: var(--tus); border-color: var(--tus); }

.guruh-son { background: var(--tus-pale); color: var(--tus); }
.guruh-ilova { background: linear-gradient(135deg, var(--tus), color-mix(in srgb, var(--tus) 68%, #fff)); }
.guruh-ilova-tugma { color: var(--tus); }

/* ---------------------------------------------------------
   MATERIAL KARTALARI
   Chap chetida bo'lim tusidagi yo'l + navbatma-navbat oq va
   juda och tus. Ilgari hammasi oq edi va ro'yxat bir xil
   oq devor bo'lib ko'rinardi.
   --------------------------------------------------------- */
.material {
    border-left: 5px solid var(--tus);
}

.material-tag { background: var(--tus-pale); color: var(--tus); }

/* Eski juftliklar o'rniga bitta qoida: toq qatorlar oq,
   juftlari bo'lim tusining eng och pardasida. */
.bolim-metodika .material:nth-child(odd),
.bolim-maqola   .material:nth-child(odd),
.bolim-ishlanma .material:nth-child(odd),
.material:nth-child(odd)  { background: #fff; }

.bolim-metodika .material:nth-child(even),
.bolim-maqola   .material:nth-child(even),
.bolim-ishlanma .material:nth-child(even),
.material:nth-child(even) { background: color-mix(in srgb, var(--tus-pale) 55%, #fff); }

/* Muqova va nishon har doim oq fonda qoladi — aks holda
   kitob muqovasi kartaning tusiga singib ketadi. */
.material-muqova { background: #fff; }

/* ---------------------------------------------------------
   BO'LIM KARTALARI (bosh sahifa) — tepadagi chiziq allaqachon
   rangli; endi burchakka ham juda so'ngan tus dog'i qo'shiladi.
   --------------------------------------------------------- */
.bolim-card {
    position: relative;
    overflow: hidden;
}

.bolim-card::after {
    content: '';
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: var(--kt);
    opacity: .07;
    pointer-events: none;
}

.bolim-card > * { position: relative; z-index: 1; }
/* =========================================================
   YORQIN USLUB — ICHKI SAHIFALAR (2026-09-05)
   =========================================================
   Bosh sahifa mijoz maketiga ko'ra qayta qurilgach, ichki
   sahifalar faqat RANGI bilan unga ergashgan edi: joylashuv,
   o'lcham va shakl hali eski "jiddiy" saytniki. Bu blok
   ularni bosh sahifaning tiliga o'tkazadi:

     - sahifa sarlavhasi = osmon + bulutlar + TO'LQINLI pastki
       chet (hero'dagi oq tasma to'lqinining o'zi) + o'ngda
       bo'lim rangidagi katta doira ikonka (hero'dagi beshta
       doiraning qardoshi, `_sahifa_ikon.html`);
     - kartalar 26–28px yumaloq, chekkasi och ko'k, hover'da
       ko'tariladi;
     - hamma tugma TABLETKA va ostida qattiq soya
       (`0 4px 0 <to'qroq rang>`) — hero'dagi CTA kabi
       o'yinchoq tugma;
     - ikonkalar dumaloq, bo'lim rangida, oq belgi bilan.

   Bo'lim rangi hamon `--tus` (body.sahifa-*), shuning uchun
   bu yerda bitta qoida yetti bo'limga birdan xizmat qiladi.

   Yuqoridagi bloklar o'chirilmagan — ular joylashuvni
   saqlaydi; bu yerda faqat shakl/o'lcham qayta beriladi.
   ========================================================= */

/* Palak motifi: `<symbol id="palak">` da `class="palak"` yo'q, shuning
   uchun yuqoridagi `.palak .petal { fill: currentColor }` hech qachon mos
   kelmagan — gulbarglar qora chiqardi (SVG ning standart to'ldirmasi).
   id bo'yicha berilsa, har `<use>` o'z `color` ini oladi. */
#palak .petal { fill: currentColor; }
#palak .core  { fill: currentColor; opacity: .45; }

/* ---------- Sahifa sarlavhasi ---------- */
.page-head {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 44px 0 92px;
    background: none;
    border-bottom: 0;
}

/* Osmon, uch-uchtadan bulut va pastki to'lqin — hammasi bitta
   qatlamda. To'lqin `mask-image` bilan: qatlamning pastki cheti
   to'lqin shaklida kesiladi va ostidan sahifa foni ko'rinadi.
   Shuning uchun to'lqin rangini alohida moslash shart emas. */
/* Bitta bulut rasmi — sahifa sarlavhalari va kirish sahifasi uchun.
   Uch doira + yassi asos BIR guruhda (`opacity` guruhga), shuning uchun
   ustma-ust tushgan joylari ko'rinmaydi. radial-gradient bilan chizilgan
   doiralar alohida-alohida bo'lib qolardi. */
:root { --bulut-rasm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'%3E%3Cg fill='%23fff' opacity='.94'%3E%3Ccircle cx='46' cy='78' r='40'/%3E%3Ccircle cx='104' cy='58' r='54'/%3E%3Ccircle cx='160' cy='78' r='40'/%3E%3Crect x='6' y='78' width='194' height='40' rx='20'/%3E%3C/g%3E%3C/svg%3E"); }

/* `.pf` — kuch uchun: qalamdon/xonqizi/rasmli-test/diktant CSS lari
   (platform.css dan KEYIN yuklanadi) o'z `.ql-head::before` da eski
   fotoni `background-image` qilib qo'yadi; (0,2,1) uni yengadi. */
.pf .page-head::before {
    content: '';
    position: absolute;
    inset: 0;
    /* BO'LIM TUSLARI blokidagi eski qoida shu pseudoni 200px li so'ngan
       doira qilib qo'ygan edi — o'lcham, shakl va shaffoflik qaytariladi. */
    width: auto;
    height: auto;
    border-radius: 0;
    opacity: 1;
    z-index: -1;
    /* Uch qatlam, tepadan pastga:
         1. oq parda — CHAPDAN o'ngga so'nadi. Sarlavha chapda turadi,
            shuning uchun u yerda parda quyuq va matn har qanday foto
            ustida o'qiladi; o'ngda esa foto ochiq ko'rinadi.
         2. bo'lim fotosi — `--bolim-rasm`, quyida har bo'limga berilgan.
         3. zaxira gradient — fotosi yo'q sahifalar uchun (masalan
            bosh sahifa yoki yangi bo'lim). */
    background-image:
        linear-gradient(97deg,
            rgba(255, 255, 255, .96) 0%,
            rgba(255, 255, 255, .92) 32%,
            rgba(255, 255, 255, .58) 54%,
            rgba(255, 255, 255, .14) 76%,
            rgba(255, 255, 255, .02) 100%),
        var(--bolim-rasm, none),
        linear-gradient(180deg, color-mix(in srgb, var(--tus-pale) 45%, #C9E3FA) 0%, #DAEBFB 62%, #E6F2FD 100%);
    background-size: cover, cover, cover;
    background-position: center, center 42%, center;
    background-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1200V360C1090 392 960 398 800 380S520 342 360 360 110 398 0 364Z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1200V360C1090 392 960 398 800 380S520 342 360 360 110 398 0 364Z'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
}

/* Har bo'limning o'z fotosi. Rasmlar Pixabay dan olingan (Pixabay
   Content License: tijorat uchun ham bepul, muallif ko'rsatish shart
   emas) va 1500x560 ga kesilgan. Manba havolalari va kesish kodi —
   `scratchpad/bolim_rasm.py`. Rasmni almashtirish uchun shu faylni
   tahrirlab qayta ishga tushiring. */
.sahifa-haqida      { --bolim-rasm: url('/static/img/bolim/haqida.jpg'); }
.sahifa-metodika    { --bolim-rasm: url('/static/img/bolim/metodika.jpg'); }
.sahifa-maqola      { --bolim-rasm: url('/static/img/bolim/maqola.jpg'); }
.sahifa-multimediya { --bolim-rasm: url('/static/img/bolim/multimediya.jpg'); }
.sahifa-topshiriq   { --bolim-rasm: url('/static/img/bolim/topshiriq.jpg'); }
.sahifa-xarita      { --bolim-rasm: url('/static/img/bolim/xarita.jpg'); }
.sahifa-ishlanma    { --bolim-rasm: url('/static/img/bolim/ishlanma.jpg'); }

/* Foto ko'rinsin deb lenta balandroq. */
.pf .page-head { padding: 52px 0 104px; }

/* Tor ekranda sarlavha butun kenglikni egallaydi, shuning uchun parda
   chapdan emas, TEPADAN pastga so'nadi — aks holda matn fotoning
   o'ng yarmiga chiqib, o'qilmay qoladi. */
@media (max-width: 900px) {
    .pf .page-head::before {
        background-image:
            linear-gradient(180deg,
                rgba(255, 255, 255, .93) 0%,
                rgba(255, 255, 255, .88) 60%,
                rgba(255, 255, 255, .78) 100%),
            var(--bolim-rasm, none),
            linear-gradient(180deg, color-mix(in srgb, var(--tus-pale) 45%, #C9E3FA) 0%, #DAEBFB 100%);
    }
    .pf .page-head { padding: 34px 0 78px; }
}

/* Eski so'ngan doira bezagi kerak emas — endi ikonka bor. */
.pf .page-head::after { content: none; }

/* O'ngdagi ikonkaga joy. */
.page-head .wrap { position: relative; z-index: 1; padding-right: 230px; }

.page-head h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2rem, 4vw, 3.1rem);
    letter-spacing: -.01em;
    color: #22384F;
    max-width: 20ch;
}

.page-head h1::after { content: none; }

.page-head .page-lede {
    margin-top: 14px;
    font-size: 1.06rem;
    font-weight: 600;
    color: #3A4A5E;
    max-width: 56ch;
}

/* Yo'l — oq tabletka */
.crumbs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 2px 8px rgba(20, 40, 80, .06);
    font-size: .82rem;
    font-weight: 700;
    color: var(--ink-2);
}

.crumbs a { color: var(--tus); font-weight: 800; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span[aria-hidden] { color: var(--ink-3); }

/* Bo'lim ikonkasi — hero doiralarining kattasi. Atrofida punktir
   halqa (bulutning punktiri), yuqori o'ngida bargcha. */
.sb-ikon {
    position: absolute;
    right: 44px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    background: linear-gradient(180deg, color-mix(in srgb, var(--tus) 72%, #fff) 0%, var(--tus) 62%);
    color: #fff;
    box-shadow:
        inset 0 0 0 5px rgba(255, 255, 255, .85),
        0 8px 0 color-mix(in srgb, var(--tus) 72%, #000),
        0 20px 36px rgba(20, 40, 80, .18);
}

.sb-ikon::before {
    content: '';
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    border: 2.5px dashed rgba(255, 255, 255, .95);
}

.sb-ikon > svg:not(.sb-barg) { width: 54px; height: 54px; }

.sb-barg {
    position: absolute;
    right: -30px;
    top: -16px;
    width: 44px;
    height: 44px;
    transform: rotate(18deg);
    filter: drop-shadow(0 3px 4px rgba(20, 60, 20, .2));
}

/* Interaktiv sahifalardagi fakt tabletkalari (ql-/xq-/rt-/dk-fakt)
   sarlavha ostida turadi — ular o'z CSS ida, bu yerga tegilmaydi. */

/* ---------- Bo'lim ---------- */
.section { padding: 54px 0 78px; }
.page-head + .section { padding-top: 30px; }
.section-head { margin-bottom: 34px; }
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 600; }

.eyebrow {
    padding: 8px 16px;
    font-size: .86rem;
    box-shadow: 0 3px 0 color-mix(in srgb, var(--tus) 22%, #fff);
}

.eyebrow .motif { width: 16px; height: 16px; }

/* ---------- Material kartalari ---------- */
.material-list { gap: 18px; }

.material {
    padding: 24px 26px;
    border: 2px solid #E3EDF8;
    border-left: 2px solid #E3EDF8;      /* eski 5px rangli chiziq o'rniga */
    border-radius: 26px;
    box-shadow: 0 2px 4px rgba(20, 40, 80, .04), 0 10px 26px rgba(20, 40, 80, .07);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.material:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--tus) 45%, #fff);
    box-shadow: 0 6px 12px rgba(20, 40, 80, .06), 0 20px 44px rgba(20, 40, 80, .12);
}

.material h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.22rem;
    line-height: 1.25;
    color: var(--ink);
}

.material .meta { font-size: .84rem; font-weight: 600; }
.material p { color: var(--ink-2); }

.material-muqova {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(20, 40, 80, .16);
}

.material-tag {
    border-radius: 18px;
    background: var(--tus);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 600;
    box-shadow: 0 4px 0 color-mix(in srgb, var(--tus) 72%, #000);
}

/* Kichik tugmalar — rangli tabletkalar, qattiq soya bilan.
   Qaysi rang: ko'rish = bo'lim rangi, yuklab olish = yashil,
   manba = ko'k. Tartib admin ma'lumotiga bog'liq, shuning uchun
   :nth-child emas, atribut bo'yicha. */
.btn-sm {
    padding: 10px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--tus);
    color: #fff;
    font-size: .86rem;
    font-weight: 800;
    box-shadow: 0 3px 0 color-mix(in srgb, var(--tus) 70%, #000);
    transition: transform .14s ease, box-shadow .14s ease;
}

.btn-sm:hover  { transform: translateY(-2px); background: var(--tus); color: #fff; box-shadow: 0 5px 0 color-mix(in srgb, var(--tus) 70%, #000); }
.btn-sm:active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--tus) 70%, #000); }

.btn-sm[download],
.btn-sm[download]:hover { background: #43A047; box-shadow: 0 3px 0 #2E7D32; }
.btn-sm[download]:hover { box-shadow: 0 5px 0 #2E7D32; }
.btn-sm[target="_blank"],
.btn-sm[target="_blank"]:hover { background: #2E7DE0; box-shadow: 0 3px 0 #1F5FAF; }
.btn-sm[target="_blank"]:hover { box-shadow: 0 5px 0 #1F5FAF; }

/* Bo'sh holat */
.empty {
    background: #fff;
    border: 2px dashed color-mix(in srgb, var(--tus) 40%, #fff);
    border-radius: 28px;
}

.empty .motif { color: var(--tus); }
.empty h3 { font-family: var(--font-display); font-weight: 600; }

/* ---------- Kichik bo'limlar (ochiladigan guruhlar) ---------- */
.guruh {
    border: 2px solid #E3EDF8;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(20, 40, 80, .04), 0 10px 26px rgba(20, 40, 80, .07);
}

.guruh > summary {
    gap: 16px;
    padding: 18px 24px;
    background: #fff;
    font-family: var(--font-display);
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--ink);
}

.guruh > summary:hover { background: color-mix(in srgb, var(--tus-pale) 45%, #fff); }
.guruh[open] > summary { border-bottom: 2px solid #EEF4FB; }

/* Palak — bo'lim rangidagi doira ichida (hero doiralari kabi) */
.guruh > summary .motif {
    box-sizing: border-box;
    width: 46px;
    height: 46px;
    padding: 11px;
    border-radius: 50%;
    background: var(--tus);
    color: #fff;
    box-shadow: 0 4px 0 color-mix(in srgb, var(--tus) 72%, #000);
}

.guruh-son { padding: 4px 13px; background: var(--tus-pale); color: var(--tus); font-size: .84rem; }
.guruh-strelka { width: 24px; height: 24px; color: var(--tus); }
.guruh-ichi { padding: 20px 22px 24px; background: color-mix(in srgb, var(--tus-pale) 40%, #fff); }

/* Interaktiv sahifa kartasi (onlayn test, diktant, xaritalar) */
.guruh-ilova {
    gap: 20px;
    padding: 22px 26px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--tus) 0%, color-mix(in srgb, var(--tus) 62%, #fff) 100%);
    box-shadow:
        0 6px 0 color-mix(in srgb, var(--tus) 72%, #000),
        0 16px 34px color-mix(in srgb, var(--tus) 32%, transparent);
    transition: transform .18s ease, box-shadow .18s ease;
}

.guruh-ilova:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, var(--tus) 0%, color-mix(in srgb, var(--tus) 62%, #fff) 100%);
    box-shadow:
        0 9px 0 color-mix(in srgb, var(--tus) 72%, #000),
        0 22px 40px color-mix(in srgb, var(--tus) 36%, transparent);
}

.guruh-ilova .motif {
    box-sizing: border-box;
    width: 62px;
    height: 62px;
    padding: 13px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

.guruh-ilova-matn b { font-family: var(--font-display); font-size: 1.28rem; font-weight: 600; }
.guruh-ilova-matn span { font-size: .96rem; color: rgba(255, 255, 255, .9); }

.guruh-ilova-tugma {
    padding: 12px 22px;
    background: #fff;
    color: var(--tus);
    font-size: .92rem;
    font-weight: 800;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .18);
}

.guruh-ilova:hover .guruh-ilova-tugma { background: #fff; box-shadow: 0 6px 0 rgba(0, 0, 0, .2); }

/* ---------- Bosh sahifa: yetti karta ---------- */
.bolim-card {
    padding: 26px 24px 24px;
    border: 2px solid #E3EDF8;
    border-top: 2px solid #E3EDF8;
    border-radius: 28px;
    box-shadow: 0 2px 4px rgba(20, 40, 80, .04), 0 10px 26px rgba(20, 40, 80, .07);
}

.bolim-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--kt) 40%, #fff);
}

/* Katta doira ikonka — hero'dagi beshta doiraning o'zi */
.bolim-ikon {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: linear-gradient(180deg, color-mix(in srgb, var(--kt) 76%, #fff) 0%, var(--kt) 60%);
    color: #fff;
    box-shadow: 0 5px 0 color-mix(in srgb, var(--kt) 72%, #000), 0 10px 20px rgba(20, 40, 80, .14);
    transition: transform .2s ease;
}

.bolim-card:hover .bolim-ikon { transform: rotate(-6deg) scale(1.06); }
.bolim-ikon svg { width: 32px; height: 32px; }

.bolim-num {
    display: inline-block;
    align-self: flex-start;   /* karta flex ustun: nishon to'liq kenglikka cho'zilmasin */
    margin-bottom: 10px;
    padding: 4px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--kt) 14%, #fff);
    color: var(--kt);
    font-size: .74rem;
}

.bolim-card h3 { font-size: 1.3rem; font-weight: 600; }

.bolim-more {
    padding: 10px 20px;
    font-size: .86rem;
    box-shadow: 0 4px 0 color-mix(in srgb, var(--kt) 72%, #000);
}

.bolim-card:hover .bolim-more { box-shadow: 0 6px 0 color-mix(in srgb, var(--kt) 72%, #000); }

/* ---------- Bosh sahifa: "Platforma haqida" ---------- */
.section.tinted { background: none; }

.aside-card {
    border-radius: 28px;
    box-shadow: 0 8px 0 #1A4F9C, 0 20px 40px rgba(46, 125, 224, .3);
}

.aside-card h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; }
.aside-list li b { color: #FFD84D; }

.figure { border-radius: 24px; border: 2px solid #E3EDF8; box-shadow: 0 10px 26px rgba(20, 40, 80, .1); }
.figure figcaption { border: 0; }

.pull {
    padding: 18px 22px;
    border-left: 6px solid #F5920B;
    border-radius: 18px;
    background: #FFF6D2;
    color: #5A4310;
}

/* ---------- Bosh sahifa: chaqiriq bandi (ilgari to'q ko'k) ---------- */
.section.dark {
    padding: 10px 0 90px;
    background: none;
    color: #fff;
}

.section.dark .wrap {
    position: relative;
    overflow: hidden;
    padding: 64px 48px;
    border-radius: 40px;
    background: linear-gradient(135deg, #2E7DE0 0%, #4C97F0 55%, #74B4F7 100%);
    box-shadow: 0 10px 0 #1F5FAF, 0 30px 60px rgba(46, 125, 224, .32);
}

/* Ikkita yumshoq oq doira — bulut ishorasi */
.section.dark .wrap::before,
.section.dark .wrap::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    pointer-events: none;
}

.section.dark .wrap::before { width: 280px; height: 280px; left: -80px; bottom: -130px; }
.section.dark .wrap::after  { width: 190px; height: 190px; right: -50px; top: -80px; }
.section.dark .wrap > * { position: relative; z-index: 1; }

.section.dark .eyebrow { background: rgba(255, 255, 255, .2); color: #fff; box-shadow: none; }
.section.dark .eyebrow .motif { color: #FFD84D; }
.section.dark h2 { color: #fff; }
.section.dark .section-head p { color: rgba(255, 255, 255, .92); }

.btn { border-radius: 999px; font-weight: 800; }
.btn-primary { border: 0; box-shadow: 0 5px 0 #2E7D32; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #2E7D32; }
.section.dark .btn-outline { background: #fff; border-color: #fff; color: #2E7DE0; box-shadow: 0 5px 0 rgba(0, 0, 0, .18); }
.section.dark .btn-outline:hover { background: #fff; color: #1F5FAF; transform: translateY(-2px); box-shadow: 0 7px 0 rgba(0, 0, 0, .2); }

/* ---------- Footer — yumaloq, och osmon ---------- */
.footer {
    margin-top: 20px;
    padding: 64px 0 0;
    border-top: 0;
    border-radius: 48px 48px 0 0;
    background: linear-gradient(180deg, #E4F0FC 0%, #D3E6F9 100%);
    box-shadow: 0 -10px 40px rgba(20, 40, 80, .05);
}

.footer-grid { padding-bottom: 40px; }
.footer-brand .brand-logo { width: 48px; height: 48px; }
.footer-brand span { font-size: 1.2rem; }
.footer h4 { font-size: 1.05rem; margin-bottom: 14px; color: #22384F; }
.footer ul li { margin-bottom: 9px; }
.footer ul a { font-weight: 700; }
.footer-bottom { border-top: 1px solid rgba(46, 125, 224, .18); }

/* ---------- Muallif sahifasi ----------
   Sahifaning o'z <style> i platform.css dan KEYIN keladi, shuning
   uchun bu qoidalar `.sahifa-haqida` bilan kuchaytirilgan. */
.sahifa-haqida .muallif-card { border: 2px solid #E3EDF8; border-radius: 28px; }
.sahifa-haqida .muallif-foto { background: var(--tus-pale); }
.sahifa-haqida .muallif-meta .nom { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; }
.sahifa-haqida .cv li::before { border-color: var(--tus); }
.sahifa-haqida .cv .yil { color: var(--tus); }
.sahifa-haqida .rahbar-nishon { color: var(--tus); }
.sahifa-haqida .muallif-kontakt a:hover { color: var(--tus); }
.sahifa-haqida .sert { border-radius: 24px; }
.sahifa-haqida .sert:hover { border-color: color-mix(in srgb, var(--tus) 45%, #fff); }

/* ---------- Tor ekran ---------- */
@media (max-width: 900px) {
    .page-head { padding: 32px 0 76px; }
    .page-head .wrap { padding-right: 150px; }
    .sb-ikon { width: 92px; height: 92px; right: 24px; }
    .sb-ikon > svg:not(.sb-barg) { width: 42px; height: 42px; }
    .sb-ikon::before { inset: -14px; }
    .section.dark .wrap { padding: 44px 24px; border-radius: 30px; }
    .footer { border-radius: 32px 32px 0 0; }
}

@media (max-width: 660px) {
    .page-head .wrap { padding-right: 20px; }
    .sb-ikon { display: none; }
    /* Yuqoridagi kichik bulut tor ekranda yo'l tabletkasi ostiga tushadi. */
    /* Bu yerda ilgari bulut o'lchamlari turardi (`220px 132px, 0 0, ...`).
       Qatlamlar o'zgargach — endi ular oq parda, bo'lim fotosi va zaxira
       gradient — o'sha o'lchamlar pardani 220x132 li OQ TO'RTBURCHAK qilib,
       fotoni esa `0 0` bilan butunlay yo'q qilib qo'ygandi. Uchalasi ham
       to'ldirib turishi kerak. */
    .pf .page-head::before { background-size: cover, cover, cover; }
    .material { padding: 18px 16px; border-radius: 22px; }
    .guruh { border-radius: 22px; }
    .guruh > summary .motif { display: grid; width: 38px; height: 38px; padding: 9px; }
    .bolim-card { border-radius: 24px; }
}


/* =========================================================
   YON BEZAKLAR — platforma sahifalari
   =========================================================
   Mijoz butun saytni "juda ochiq" dedi. Bolalar sahifalarida
   to'liq sahna qo'yildi (style.css); o'qituvchi sahifalari
   jiddiyroq bo'lgani uchun bu yerda faqat yon bo'shliqqa
   so'ngan anjomlar qo'yiladi. Mazmun kengligi 1200px,
   shuning uchun bezaklar 1400px dan keng ekranda ko'rinadi.

   `:not(.auth-page)` — kirish/ro'yxat sahifasining o'z
   bulutlari va quyoshi bor (auth.css), ikkitasi qo'shilsa
   sahifa g'ala-g'ovur bo'lardi.

   Rasmli test va diktant sahifalari `body.pf::before` ni o'z
   CSS lari bilan QAYTA belgilaydi (ular platform.css dan keyin
   yuklanadi) — u yerda to'liq sahna bor.
   ========================================================= */
body.pf:not(.auth-page)::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .55;
    background-image:
        url('/static/img/sahna/anjom/qaychi.svg'),
        url('/static/img/sahna/anjom/qogoz.svg'),
        url('/static/img/sahna/anjom/qalam.svg'),
        url('/static/img/sahna/anjom/yulduz.svg');
    background-repeat: no-repeat;
    background-size: 96px, 86px, 92px, 72px;
    /* Boshlanish 32% emas, 48%: `.page-head` shaffof emas va undan
       yuqoridagi anjom yarmidan qirqilib ko'rinardi. */
    background-position:
        left 26px top 48%,
        left 54px top 78%,
        right 28px top 54%,
        right 58px top 84%;
    animation: pf-anjom 11s ease-in-out infinite alternate;
}

@keyframes pf-anjom {
    from { background-position: left 26px top 48%, left 54px top 78%,
                                right 28px top 54%, right 58px top 84%; }
    to   { background-position: left 34px top 50%, left 46px top 75%,
                                right 36px top 52%, right 50px top 87%; }
}

@media (max-width: 1400px) {
    body.pf:not(.auth-page)::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    body.pf:not(.auth-page)::before { animation: none; }
}


/* =========================================================
   RANGLI KARTALAR — platforma sahifalari
   =========================================================
   Mijozning talabi: kartalar oq bo'lib turmasin, hammasi
   rangli bo'lsin. Ilgari faqat ikki tus navbatlashardi
   (oq va bo'lim tusining eng och pardasi) va ro'yxat bir
   xil oq devor bo'lib ko'rinardi.

   Endi BESHTA rang aylanma bo'lib takrorlanadi. Beshta —
   tasodifiy son emas: mashq kartalari (multimediya) ham
   beshtalik aylanada, shuning uchun sayt bo'ylab bitta
   ritm chiqadi.

   Har kartada bitta o'zgaruvchi — `--kart` — uchta joyni
   boshqaradi: chap chekka, fayl nishoni va «Ko'rish»
   tugmasi. «Yuklab olish» yashil, «Manbaga o'tish» ko'k
   bo'lib qoladi: ular AMAL bildiradi, bo'lim emas.
   ========================================================= */
.material-list .material:nth-child(5n+1) { --kart: #43A047; --kart-och: #E9F7EC; }
.material-list .material:nth-child(5n+2) { --kart: #2E7DE0; --kart-och: #E6F1FD; }
.material-list .material:nth-child(5n+3) { --kart: #F5920B; --kart-och: #FEF3E0; }
.material-list .material:nth-child(5n+4) { --kart: #EC5C9D; --kart-och: #FDEBF3; }
.material-list .material:nth-child(5n+5) { --kart: #8B5CF6; --kart-och: #EFE9FE; }

/* Eski oq/tus juftligini bekor qiladi — bir xil kuchdagi
   selektor bilan yozilishi shart. */
.bolim-metodika .material-list .material,
.bolim-maqola   .material-list .material,
.bolim-ishlanma .material-list .material,
.material-list .material {
    background: var(--kart-och, #fff);
    border: 2px solid color-mix(in srgb, var(--kart, #2E7DE0) 22%, #fff);
    border-left: 7px solid var(--kart, #2E7DE0);
}

.material-list .material:hover {
    border-color: color-mix(in srgb, var(--kart, #2E7DE0) 55%, #fff);
    border-left-color: var(--kart, #2E7DE0);
}

.material-list .material .material-tag {
    background: var(--kart, #2E7DE0);
    color: #fff;
    box-shadow: 0 4px 0 color-mix(in srgb, var(--kart, #2E7DE0) 70%, #000);
}

/* «Ko'rish» — kartaning rangida. Atributi bor tugmalar
   (yuklab olish / manba) o'z rangini saqlaydi. */
.material-list .material .btn-sm:not([download]):not([target]) {
    background: var(--kart, #2E7DE0);
    box-shadow: 0 3px 0 color-mix(in srgb, var(--kart, #2E7DE0) 70%, #000);
}

.material-list .material .btn-sm:not([download]):not([target]):hover {
    box-shadow: 0 5px 0 color-mix(in srgb, var(--kart, #2E7DE0) 70%, #000);
}

/* Muqova oq fonda qoladi: kitob rasmi karta tusiga singib
   ketmasligi kerak. */
.material-list .material .material-muqova { background: #fff; }

/* ---------------------------------------------------------
   BOSH SAHIFA — yetti bo'lim kartasi
   Ilgari hammasi oq edi, rang faqat tepadagi chiziqda.
   Endi karta ham o'z bo'limining och tusida.
   --------------------------------------------------------- */
.tone-1 { background: #E7F0FC; }
.tone-2 { background: #E9F7EC; }
.tone-3 { background: #E4F2FC; }
.tone-4 { background: #EFE9FE; }
.tone-5 { background: #FEF3E0; }
.tone-6 { background: #FDEBF3; }
.tone-7 { background: #FCEAE9; }

.bolim-card { border-color: color-mix(in srgb, var(--kt) 24%, #fff); }
.bolim-card p { color: #46586F; }

/* Nishon oq fonda — kartaning tusi ustida yo'qolib ketmasin. */
.bolim-num { background: #fff; }

/* ---------------------------------------------------------
   KICHIK BO'LIMLAR — ochiladigan guruh sarlavhasi rangli
   --------------------------------------------------------- */
.guruh { border-color: color-mix(in srgb, var(--tus) 26%, #fff); }

.guruh > summary {
    background: color-mix(in srgb, var(--tus-pale) 70%, #fff);
}

.guruh > summary:hover { background: var(--tus-pale); }
.guruh[open] > summary { border-bottom-color: color-mix(in srgb, var(--tus) 22%, #fff); }

/* ---------------------------------------------------------
   BO'SH HOLAT va YON KARTA
   --------------------------------------------------------- */
.empty { background: color-mix(in srgb, var(--tus-pale) 55%, #fff); }