/* ==========================================================================
   DIDAKTIK MATERIALLAR
   1) Mavzular ro'yxati sahifasi — xarita-daraxt ko'rinishida (.mavzular-*, .mavzu-*)
   2) Intellektual xarita ko'ruvchisi (.xarita-*) — bir sahifa = bitta xarita
   ========================================================================== */

/* === 1. MAVZULAR SAHIFASI — sahifaning o'zi bitta intellektual xarita ===
   Yuqorida markaziy tugun, undan pastga o'zak chiziq tushadi, mavzular
   chap-o'ngga tarmoqlanib shu o'zakka ulanadi. Tor ekranda o'zak chapga o'tadi
   va tarmoqlar bir ustun bo'lib qoladi. */
/* Tur palitrasi — `data-tur` bo'lgan HAR QANDAY element (sahifa, karta, chip)
   shu ranglarni oladi. Standart — intellektual xarita (binafsha). */
[data-tur] {
    --tur-rang: var(--binafsha);                  /* to'ldirish, chiziq, ikonka */
    --tur-matn: #5a3fc0;                          /* matn uchun to'qroq variant */
    --tur-rang-soft: rgba(111, 79, 216, 0.10);    /* yorliq va muqova foni */
    --tur-rang-border: rgba(111, 79, 216, 0.30);
    --tur-rang-line: rgba(111, 79, 216, 0.35);
    --tur-glow: rgba(111, 79, 216, 0.10);         /* juda yengil ohang */
    --tur-card: rgba(111, 79, 216, 0.05);         /* karta ustidagi ohang */
    --tur-soya: rgba(111, 79, 216, 0.28);         /* markaziy tugun soyasi */
}
/* blok-sxema — oltin */
[data-tur="sxema"] {
    --tur-rang: var(--oltin);
    --tur-matn: var(--oltin-2);
    --tur-rang-soft: rgba(217, 152, 26, 0.12);
    --tur-rang-border: rgba(217, 152, 26, 0.32);
    --tur-rang-line: rgba(217, 152, 26, 0.38);
    --tur-glow: rgba(217, 152, 26, 0.10);
    --tur-card: rgba(217, 152, 26, 0.06);
    --tur-soya: rgba(217, 152, 26, 0.3);
}
/* o'quv kartochkasi — maydon yashili */
[data-tur="kartochka"] {
    --tur-rang: var(--maydon);
    --tur-matn: var(--maydon-2);
    --tur-rang-soft: rgba(43, 148, 87, 0.10);
    --tur-rang-border: rgba(43, 148, 87, 0.30);
    --tur-rang-line: rgba(43, 148, 87, 0.36);
    --tur-glow: rgba(43, 148, 87, 0.10);
    --tur-card: rgba(43, 148, 87, 0.05);
    --tur-soya: rgba(43, 148, 87, 0.28);
}
/* didaktik o'yin — atirgul */
[data-tur="vrar"] {
    --tur-rang: #1c8fa3;
    --tur-matn: #146c7b;
    --tur-rang-soft: rgba(28, 143, 163, 0.10);
    --tur-rang-border: rgba(28, 143, 163, 0.30);
    --tur-rang-line: rgba(28, 143, 163, 0.36);
    --tur-glow: rgba(28, 143, 163, 0.10);
    --tur-card: rgba(28, 143, 163, 0.05);
    --tur-soya: rgba(28, 143, 163, 0.28);
}

[data-tur="oyin"] {
    --tur-rang: #dc4a6b;
    --tur-matn: #b03050;
    --tur-rang-soft: rgba(220, 74, 107, 0.10);
    --tur-rang-border: rgba(220, 74, 107, 0.30);
    --tur-rang-line: rgba(220, 74, 107, 0.36);
    --tur-glow: rgba(220, 74, 107, 0.10);
    --tur-card: rgba(220, 74, 107, 0.05);
    --tur-soya: rgba(220, 74, 107, 0.28);
}

.mavzular-page {
    --shox: var(--tur-rang-line);
    --shox-yorqin: var(--tur-rang);
    --shox-gap: clamp(4.5rem, 9vw, 8rem);    /* ikki ustun orasi = o'zak yo'lagi */
    --tugun-y: 3.5rem;                       /* tarmoq kartaning shu balandligiga ulanadi */
    padding: clamp(1rem, 2vw, 1.5rem) 0 clamp(3rem, 6vw, 5rem);
}
.mavzular-page > .container { max-width: 1180px; }

/* --- sarlavha: markaziy tugun atrofida --- */
.mavzular-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: clamp(1rem, 3vw, 2.25rem);
}
.mavzular-hero::before {
    content: '';
    position: absolute;
    z-index: 0;
    left: 50%;
    bottom: -6rem;
    width: min(760px, 110%);
    aspect-ratio: 2 / 1;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at 50% 80%, var(--tur-glow), transparent 62%);
    pointer-events: none;
}
.mavzular-hero > * { position: relative; z-index: 1; }

/* ketma-ket ko'tarilib chiqadi */
@keyframes dm-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
.mavzular-hero > * { animation: dm-rise .6s var(--ease-out) both; }
.mavzular-hero > :nth-child(2) { animation-delay: 70ms; }
.mavzular-hero > :nth-child(3) { animation-delay: 140ms; }
.mavzular-hero > :nth-child(4) { animation-delay: 210ms; }
.mavzular-hero > :nth-child(5) { animation-delay: 280ms; }

.mavzular-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .95rem;
    border-radius: var(--radius-pill);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tur-matn);
    background: var(--tur-rang-soft);
}
.mavzular-hero__eyebrow svg { width: 14px; height: 14px; }
.mavzular-hero__eyebrow i { font-style: normal; opacity: .55; }

.mavzular-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.8vw, 3.2rem);
    line-height: 1.06;
    letter-spacing: -.02em;
    margin: 1.1rem 0 .95rem;
    color: var(--siyoh);
}
.mavzular-hero__lead {
    margin: 0;
    max-width: 64ch;
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: 1.7;
    color: var(--text-secondary);
}

.mavzular-hero__chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin: 1.4rem 0 0;
    padding: 0;
}
.mavzular-hero__chips li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    border-radius: var(--radius-pill);
    font-size: .8rem;
    color: var(--siyoh-2);
    background: var(--qogoz-2);
    border: 1px solid var(--chiziq);
    box-shadow: var(--shadow-sm);
}
.mavzular-hero__chips svg { width: 14px; height: 14px; color: var(--tur-rang); }

/* markaziy tugun — xaritaning "yuragi", o'zak shu yerdan boshlanadi */
.mavzular-hero__node {
    position: relative;
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin-top: 2.4rem;
    border-radius: 50%;
    color: #fff;
    background: var(--tur-rang);
    border: 4px solid #fff;
    box-shadow: 0 12px 30px var(--tur-soya);
}
.mavzular-hero__node svg { width: 28px; height: 28px; }
.mavzular-hero__node::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1.5px solid var(--tur-rang-border);
    animation: mavzu-pulse 2.8s var(--ease-out) infinite;
}
@keyframes mavzu-pulse {
    0%   { transform: scale(1); opacity: .85; }
    100% { transform: scale(1.75); opacity: 0; }
}

/* --- daraxt: o'zak + tarmoqlar --- */
.mavzular-tree {
    position: relative;
    padding-top: 3rem;
}
.mavzular-tree::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: linear-gradient(180deg, var(--shox-yorqin), var(--shox) 14%, var(--shox) 90%, transparent);
    transform-origin: top;
    animation: mavzu-ozak 1.4s var(--ease-out) .35s both;
}
@keyframes mavzu-ozak {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

.mavzular-tree__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--shox-gap);
    row-gap: 2.5rem;
    /* qatordagi ikki karta bir xil balandlikka cho'zilmasin — har biri o'z matnicha */
    align-items: start;
}

.mavzu-shox { position: relative; }
/* o'ng ustun yarim qadam pastroq — tarmoqlar bir-biriga to'g'ri kelmaydi */
.mavzu-shox:nth-child(even) { margin-top: 4.5rem; }

/* tarmoq chizig'i: kartaning chetidan o'zakkacha */
.mavzu-shox::before {
    content: '';
    position: absolute;
    top: var(--tugun-y);
    width: calc(var(--shox-gap) / 2);
    height: 2px;
    background: var(--shox);
    transform: scaleX(0);
    transition: transform .5s var(--ease-out) .1s, background .3s ease;
}
.mavzu-shox:nth-child(odd)::before  { left: 100%; transform-origin: right; }
.mavzu-shox:nth-child(even)::before { right: 100%; transform-origin: left; }

/* o'zakdagi tugun nuqtasi */
.mavzu-shox::after {
    content: '';
    position: absolute;
    top: calc(var(--tugun-y) + 1px);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--surface-canvas);
    border: 2px solid var(--shox-yorqin);
    box-shadow: 0 0 0 4px var(--tur-rang-soft);
    transform: translate(-50%, -50%) scale(0);
    transition: transform .4s var(--ease-spring), border-color .3s ease, box-shadow .3s ease;
}
.mavzu-shox:nth-child(odd)::after  { left: calc(100% + var(--shox-gap) / 2); }
.mavzu-shox:nth-child(even)::after { left: calc(var(--shox-gap) / -2); }

/* ko'rinish tartibi: tugun → tarmoq → karta */
.mavzu-shox.reveal { opacity: 1; transform: none; transition: none; }
.mavzu-shox.is-visible::before { transform: scaleX(1); }
.mavzu-shox.is-visible::after  { transform: translate(-50%, -50%) scale(1); }

/* sichqoncha ustida tarmoq "yonadi" */
.mavzu-shox:hover::before,
.mavzu-shox:focus-within::before { background: var(--tur-rang); }
.mavzu-shox:hover::after,
.mavzu-shox:focus-within::after {
    border-color: var(--tur-rang);
    box-shadow: 0 0 0 5px var(--tur-rang-soft);
}

/* daraxt oxiri */
.mavzular-tree__end {
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: 2.75rem;
}
.mavzular-tree__end span {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.05rem;
    border-radius: var(--radius-pill);
    font-size: .8rem;
    color: var(--siyoh-3);
    background: var(--qogoz-2);
    border: 1px solid var(--chiziq);
}
.mavzular-tree__end svg { width: 14px; height: 14px; }

/* --- mavzu kartasi --- */
.mavzu-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--qogoz-2);
    border: 1px solid var(--chiziq);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    color: var(--text-primary);
    text-decoration: none;
    transition: transform .55s var(--ease-out),
                opacity .55s var(--ease-out),
                border-color .3s ease,
                box-shadow .3s ease;
}
.mavzu-shox.reveal .mavzu-card { opacity: 0; transform: translateY(22px); }
.mavzu-shox.is-visible .mavzu-card { opacity: 1; transform: none; transition-delay: .2s, .2s, 0s, 0s; }
.mavzu-shox.is-visible .mavzu-card:hover { transition-delay: 0s; }

.mavzu-card:hover {
    transform: translateY(-6px);
    border-color: var(--tur-rang-border);
    box-shadow: var(--shadow-lg);
}
.mavzu-card:focus-visible {
    outline: 2px solid var(--tur-rang);
    outline-offset: 3px;
}

/* oq qog'oz: xaritaning o'zi — butunlay ko'rinadi, kesilmaydi */
.mavzu-card__preview {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #ffffff;
    border-bottom: 1px solid var(--chiziq);
}
.mavzu-card__preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .7s var(--ease-out);
}
.mavzu-card:hover .mavzu-card__preview img { transform: scale(1.045); }
/* rasm pastidagi nozik ajratgich */
.mavzu-card__preview::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 -24px 24px -24px rgba(15, 31, 56, 0.08);
    pointer-events: none;
}

.mavzu-card__flag {
    position: absolute;
    top: .7rem;
    right: .7rem;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--siyoh);
    background: var(--oltin-yumshoq);
    border: 1px solid rgba(217, 152, 26, 0.4);
    border-radius: var(--radius-pill);
    padding: .28rem .6rem;
    box-shadow: var(--shadow-sm);
}

/* rasmi yo'q materiallar (sxema, kartochka, o'yin) uchun ikonkali muqova */
.mavzu-card__cover {
    display: grid;
    place-items: center;
    height: 110px;
    background: var(--tur-rang-soft);
    border-bottom: 1px solid var(--chiziq);
    color: var(--tur-rang);
}
.mavzu-card__cover svg { width: 36px; height: 36px; }

/* --- blok-sxema: tugunlar romb, muqovada sxemaning mini-silhueti --- */
.mavzular-page[data-tur="sxema"] .mavzu-shox::after {
    border-radius: 2px;
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
}
.mavzular-page[data-tur="sxema"] .mavzu-shox.is-visible::after {
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
}
.mavzular-page[data-tur="sxema"] .mavzular-hero__node { border-radius: 22%; }
.mavzular-page[data-tur="sxema"] .mavzular-hero__node::before { border-radius: 26%; }

.mavzu-card__cover--sxema {
    position: relative;
    height: 150px;
    padding: .9rem 1.25rem;
    background: linear-gradient(180deg, var(--tur-rang-soft), transparent 85%), var(--qogoz);
    border-bottom: 1px solid var(--chiziq);
}
.mavzu-card__cover--sxema.is-drawn { display: block; }

/* silhuet: har bir tugun turi o'z shakli va rangi bilan — sxema ko'ruvchisidagidek */
.sx-mini {
    --sx-row: clamp(4px, calc((118px - (var(--rows, 10) - 1) * 3px) / var(--rows, 10)), 9px);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    height: 100%;
}
.sx-mini::before {
    content: '';
    position: absolute;
    top: 4%;
    bottom: 4%;
    left: 50%;
    width: 1px;
    background: rgba(15, 31, 56, 0.08);
}
.sx-mini__row {
    position: relative;
    display: block;
    height: var(--sx-row);
    border-radius: 3px;
    background: rgba(15, 31, 56, 0.22);
    transform-origin: center;
    animation: sx-mini-in .45s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 45ms);
}
.sx-mini__row--root   { width: 62%; background: linear-gradient(135deg, rgba(29, 95, 214, 0.9), rgba(29, 95, 214, 0.55)); }
.sx-mini__row--stage  { width: 26%; height: calc(var(--sx-row) * .8); border-radius: 99px; background: rgba(217, 152, 26, 0.75); }
.sx-mini__row--text   { width: 52%; background: rgba(15, 31, 56, 0.2); }
.sx-mini__row--result { width: 44%; background: var(--gradient-primary); }
.sx-mini__row--branch,
.sx-mini__row--chips {
    display: flex;
    justify-content: center;
    gap: 3px;
    width: 78%;
    background: none;
    border-radius: 0;
}
.sx-mini__row--branch i { flex: 1; height: 100%; border-radius: 3px; background: rgba(111, 79, 216, 0.5); }
.sx-mini__row--chips i  { width: 11%; height: 100%; border-radius: 99px; background: rgba(43, 148, 87, 0.55); }
@keyframes sx-mini-in {
    from { opacity: 0; transform: scaleX(.3); }
    to   { opacity: 1; transform: scaleX(1); }
}
.mavzu-card:hover .sx-mini__row--stage    { background: rgba(217, 152, 26, 1); }
.mavzu-card:hover .sx-mini__row--branch i { background: rgba(111, 79, 216, .75); }
.mavzu-card:hover .sx-mini__row--chips i  { background: rgba(43, 148, 87, 0.8); }

/* --- o'quv kartochkasi: yelpig'ich kartalar muqovasi --- */
.mavzu-card__cover--kartochka {
    position: relative;
    height: 150px;
    padding: .9rem 1.25rem;
    background: linear-gradient(180deg, var(--tur-rang-soft), transparent 85%), var(--qogoz);
    border-bottom: 1px solid var(--chiziq);
}
.mavzu-card__cover--kartochka.is-drawn { display: block; }
.krt-mini { position: relative; width: 100%; height: 100%; }
.krt-mini i, .krt-mini__top {
    position: absolute;
    left: 50%;
    width: 78%;
    height: 96px;
    border-radius: 14px;
    border: 1px solid var(--chiziq);
    background: var(--qogoz-2);
    transform-origin: bottom center;
}
.krt-mini i:nth-child(1) { top: 6px;  transform: translateX(-50%) rotate(-6deg); opacity: .55; }
.krt-mini i:nth-child(2) { top: 12px; transform: translateX(-50%) rotate(3deg);  opacity: .75; }
.krt-mini__top {
    top: 18px;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .7rem .85rem;
    transform: translateX(-50%);
    background: linear-gradient(150deg, var(--tur-rang-soft), transparent 60%), var(--qogoz-2);
    border-color: var(--tur-rang-border);
    box-shadow: 0 10px 24px rgba(15, 31, 56, 0.12);
    transition: transform .4s var(--ease-spring);
}
.krt-mini__top small { display: inline-flex; align-items: center; gap: .3rem; font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tur-matn); }
.krt-mini__top small svg { width: 11px; height: 11px; }
.krt-mini__top b {
    font-family: var(--font-display);
    font-size: .82rem;
    line-height: 1.3;
    font-weight: 600;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mavzu-card:hover .krt-mini__top { transform: translateX(-50%) translateY(-4px) rotate(-1deg); }

.mavzu-card__count {
    position: absolute;
    top: .7rem;
    right: .7rem;
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    padding: .26rem .6rem;
    border-radius: var(--radius-pill);
    color: var(--tur-matn);
    background: var(--qogoz-2);
    border: 1px solid var(--tur-rang-border);
    box-shadow: var(--shadow-sm);
}

.mavzu-card__body {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    flex: 1;
    padding: 1.25rem 1.35rem 1.4rem;
}
.mavzu-card__title {
    font-family: var(--font-display);
    font-size: 1.08rem;
    line-height: 1.3;
    margin: 0;
}
.mavzu-card__text {
    margin: 0;
    flex: 1;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--siyoh-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mavzu-card__cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .3rem;
    font-weight: 700;
    font-size: .88rem;
    color: var(--tur-matn);
    transition: gap .25s ease;
}
.mavzu-card__cta svg { width: 16px; height: 16px; transition: transform .25s ease; }
.mavzu-card:hover .mavzu-card__cta { gap: .65rem; }
.mavzu-card:hover .mavzu-card__cta svg { transform: translateX(4px); }

/* boshqa material turlari — ko'ruvchidagi "yana" blokining o'zi, faqat pastroq */
.mavzular-boshqa { margin-top: clamp(3rem, 6vw, 4.5rem); }

/* --- ketish pardasi: karta bosilgach sahifa so'nadi, faqat tanlangan xarita qoladi ---
   (davomiyligi DidaktikListView.CHIQISH_MS bilan mos) */
.mavzular-page.is-leaving { pointer-events: none; }
.mavzular-page.is-leaving .mavzular-hero,
.mavzular-page.is-leaving .breadcrumb,
.mavzular-page.is-leaving .mavzular-tree::before,
.mavzular-page.is-leaving .mavzular-tree__end,
.mavzular-page.is-leaving .mavzular-boshqa {
    opacity: 0;
    transition: opacity .4s var(--ease-out);
}
.mavzular-page.is-leaving .mavzu-shox:not(.is-chosen) {
    opacity: 0;
    transform: translateY(14px) scale(.985);
    transition: opacity .4s var(--ease-out), transform .45s var(--ease-out);
}
/* tanlangan karta: tarmog'i, matni va shisha foni so'nadi — oq xarita ko'tarilib qoladi */
.mavzu-shox.is-chosen::before,
.mavzu-shox.is-chosen::after { opacity: 0; transition: opacity .3s ease; }
.mavzu-shox.is-chosen .mavzu-card {
    transform: translateY(-10px);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: transform .45s var(--ease-out), background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.mavzu-shox.is-chosen .mavzu-card__body { opacity: 0; transition: opacity .3s ease; }
.mavzu-shox.is-chosen .mavzu-card__preview {
    border-radius: var(--radius-xl);
    border-bottom-color: transparent;
    box-shadow: 0 24px 60px rgba(15, 31, 56, 0.18);
    transition: border-radius .35s ease, box-shadow .45s ease;
}
.mavzu-shox.is-chosen .mavzu-card__preview img { transform: none; }

/* --- tor ekran: o'zak chapda, bir ustun --- */
@media (max-width: 760px) {
    .mavzular-page {
        --spine-x: 28px;
        --shox-gap: 3.2rem;
        --tugun-y: 2.75rem;
    }
    .mavzular-hero { align-items: flex-start; text-align: left; }
    .mavzular-hero::before { left: 0; transform: none; width: 120%; }
    .mavzular-hero__chips { justify-content: flex-start; }
    .mavzular-hero__node {
        width: 56px;
        height: 56px;
        margin-left: calc(var(--spine-x) - 28px);
    }
    .mavzular-hero__node svg { width: 24px; height: 24px; }

    .mavzular-tree { padding-top: 2.25rem; padding-left: calc(var(--spine-x) + var(--shox-gap) / 2); }
    .mavzular-tree::before { left: var(--spine-x); }
    .mavzular-tree__list { grid-template-columns: 1fr; row-gap: 1.75rem; }
    .mavzu-shox:nth-child(even) { margin-top: 0; }

    .mavzu-shox::before,
    .mavzu-shox:nth-child(odd)::before {
        left: auto;
        right: 100%;
        transform-origin: left;
    }
    .mavzu-shox::after,
    .mavzu-shox:nth-child(odd)::after { left: calc(var(--shox-gap) / -2); }

    /* o'zak pastda so'nadi, yakuniy yozuv kartalar ustuniga tekislanadi */
    .mavzular-tree__end { justify-content: flex-start; }
}


/* === 1b. BO'LIM SAHIFASI (/section/didaktik-materiallar) ===
   Bo'lim mavzular bilan ochiladi: har bir plitka — bitta mavzu va uning to'rt
   materiali. Tayyori o'z turi rangida bosiladi, tayyor emasi xira turadi.
   Turlar bo'yicha kirish pastdagi ixcham qatorda. */

.mavzu-plitkalar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 1rem;
}

.mavzu-plitka {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.15rem 1.3rem 1.25rem 1.45rem;
    border-radius: var(--radius-lg);
    background: var(--qogoz-2);
    border: 1px solid var(--chiziq);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: border-color .3s ease, background .3s ease, transform .3s var(--ease-spring);
}
.mavzu-plitka::before {
    /* chap chetdagi rail — mavzular ro'yxati ekanini bildiradi */
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--kok), var(--binafsha));
    opacity: .55;
    transition: opacity .3s ease;
}
.mavzu-plitka:hover {
    border-color: var(--kok);
    background: var(--qogoz-2);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}
.mavzu-plitka:hover::before { opacity: 1; }

.mavzu-plitka__nom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}
.mavzu-plitka__nom h3 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    line-height: 1.3;
    margin: 0;
    color: var(--text-primary);
}
.mavzu-plitka__nisbat {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: .78rem;
    color: var(--text-tertiary);
    padding: .15rem .5rem;
    border-radius: var(--radius-pill);
    background: var(--kok-yumshoq);
}
.mavzu-plitka__nisbat b { color: var(--kok); font-weight: 700; }

.mavzu-plitka__text {
    margin: 0;
    font-size: .86rem;
    line-height: 1.55;
    color: var(--text-tertiary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mavzu-plitka__mat {
    /* to'rt material — 2×2 tekis panjara, barcha plitkalarda bir xil */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem;
    margin-top: .35rem;
}

/* material belgisi — o'z turi rangida (tayyor bo'lsa havola) */
.mat-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .38rem .7rem;
    font-size: .78rem;
    font-weight: 500;
    min-width: 0;
    border-radius: var(--radius-pill);
    border: 1px solid var(--chiziq);
    background: var(--qogoz);
    color: var(--siyoh-3);
    text-decoration: none;
    /* tayyor emas — bosilmaydi */
    opacity: .4;
    transition: border-color .25s ease, background .25s ease, color .25s ease, transform .25s var(--ease-spring);
}
.mat-chip svg { width: 14px; height: 14px; flex-shrink: 0; }
.mat-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mat-chip.is-ready {
    opacity: 1;
    color: var(--tur-rang);
    background: var(--tur-rang-soft);
    border-color: var(--tur-rang-border);
}
.mat-chip.is-ready { color: var(--tur-matn); }
.mat-chip.is-ready:hover {
    background: var(--tur-rang-soft);
    border-color: var(--tur-rang);
    transform: translateY(-2px);
}

/* --- turlar bo'yicha kirish --- */
.turlar-blok { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.turlar-blok .items-head { margin-bottom: 1.25rem; }

.turlar-qator {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.tur-karta {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.15rem;
    border-radius: var(--radius-lg);
    background: var(--qogoz-2);
    border: 1px solid var(--chiziq);
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color .3s ease, transform .3s var(--ease-spring), box-shadow .3s ease;
}
.tur-karta:not(.is-soon):hover {
    border-color: var(--tur-rang-border);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.tur-karta.is-soon { opacity: .45; cursor: default; }

.tur-karta__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--tur-rang-soft);
    border: 1px solid var(--tur-rang-border);
    color: var(--tur-rang);
}
.tur-karta__icon svg { width: 20px; height: 20px; }
.tur-karta__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.tur-karta__body b { font-size: .95rem; font-weight: 600; }
.tur-karta__body small { font-size: .78rem; color: var(--text-tertiary); }
.tur-karta > svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--tur-rang); }

@media (max-width: 640px) {
    .mavzu-plitkalar { grid-template-columns: 1fr; }
}
/* Tor ekranda chiplar bir ustunga tushadi — yorliqlar to'liq o'qiladi
   (ikonkaning o'zi qaysi material ekanini aytmaydi) */
@media (max-width: 480px) {
    .mavzu-plitka__mat { grid-template-columns: 1fr; }
}


/* === 2. XARITA KO'RUVCHISI ===
   Maqsad: rasm sahifaning bosh qahramoni bo'lsin — ochilishi bilanoq
   butun xarita ko'rinsin, atrofdagi elementlar joyni tortib olmasin. */
.xarita-page {
    padding: clamp(1rem, 2vw, 1.5rem) 0 clamp(3rem, 6vw, 5rem);
}

.breadcrumb--tight { margin-bottom: .75rem !important; }

/* --- ustki yo'lakcha: sarlavha + boshqaruvlar --- */
.xarita-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .9rem 1.5rem;
    margin-bottom: 1rem;
}

.xarita-bar__title {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
    flex: 1 1 340px;
}
.xarita-bar__badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    align-self: flex-start;
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tur-matn);
    background: var(--tur-rang-soft);
    border: 1px solid var(--tur-rang-border);
    border-radius: var(--radius-pill);
    padding: .32rem .7rem;
}
.xarita-bar__badge svg { width: 13px; height: 13px; }

.xarita-bar__title h1 {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.1vw, 1.7rem);
    line-height: 1.22;
    margin: 0;
    color: var(--siyoh);
}

.xarita-bar__actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}
.xarita-act {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    white-space: nowrap;
}
.xarita-act svg { width: 16px; height: 16px; }

.xarita-zoom {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .28rem;
    border-radius: var(--radius-pill);
    background: var(--qogoz-2);
    border: 1px solid var(--chiziq);
    box-shadow: var(--shadow-sm);
}
.xarita-zoom__btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-size: 1.15rem;
    font-weight: 600;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .2s ease, transform .2s var(--ease-spring);
}
.xarita-zoom__btn:hover {
    background: var(--tur-rang-soft);
    transform: scale(1.08);
}
.xarita-zoom__label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .88rem;
    min-width: 54px;
    padding: 0 .2rem;
    text-align: center;
    color: var(--text-primary);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color .2s ease;
}
.xarita-zoom__label:hover { color: var(--kok); }

/* --- sahna: sahifaning asosiy maydoni --- */
.xarita-stage {
    position: relative;
    margin: 0 auto;
    /* Taxminiy — aniq o'lchamni JS (_layout) o'lchab qo'yadi */
    height: clamp(420px, calc(100vh - 330px), 1000px);
    border-radius: var(--radius-xl);
    border: 1px solid var(--chiziq);
    background: #ffffff;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    /* uchib kelgandan keyin kuchli yog'du sekin odatiy holatga qaytadi */
    transition: box-shadow .7s ease;
}

.xarita-stage__loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    background: var(--surface-deep);
    color: var(--text-secondary);
    font-size: .9rem;
    z-index: 2;
    transition: opacity .35s ease, visibility .35s ease;
}
.xarita-stage__loader.is-done {
    opacity: 0;
    visibility: hidden;
}

/* Kichik nusxa (thumb) — to'liq rasm kelguncha o'sha joyda turadi, keyin so'nadi.
   Sahna aynan rasm nisbatida bo'lgani uchun `contain` chetlarda bo'shliq qoldirmaydi. */
.xarita-stage__ghost {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 3;
    pointer-events: none;
    transition: opacity .5s ease .1s;
}
.xarita-stage__ghost.is-done { opacity: 0; }

/* --- kirish: sahifa bo'laklari ketma-ket ko'tariladi (sahna alohida) --- */
.xarita-page .container > :not(.reveal):not(.xarita-stage) {
    animation: dm-rise .55s var(--ease-out) both;
    animation-delay: var(--kech, 0ms);
}
.xarita-page .container > :nth-child(2) { --kech: 60ms; }
.xarita-page .container > :nth-child(4) { --kech: 260ms; }
.xarita-page .container > :nth-child(5) { --kech: 340ms; }

/* to'g'ridan-to'g'ri kirilganda xarita markazidan aylana bo'lib ochiladi */
.xarita-stage.is-radial {
    animation: xarita-radial 1.1s var(--ease-out) both;
}
@keyframes xarita-radial {
    from { clip-path: circle(0% at 50% 50%); opacity: .4; }
    to   { clip-path: circle(75% at 50% 50%); opacity: 1; }
}

/* ro'yxatdagi kartadan kelinganda sahna o'sha joydan "uchib" keladi —
   boshlang'ich transform'ni JS beradi, bu yerda faqat yo'l.
   Davomiyligi XaritaViewerView.UCHISH_MS bilan mos. Egri chiziq sekin
   qo'zg'alib, sekin qo'nadi — kinematik his uchun. */
.xarita-stage.is-flying {
    transition: transform 1.35s cubic-bezier(.76, 0, .2, 1),
                box-shadow 1.35s ease;
    will-change: transform;
    z-index: 5;
    box-shadow: 0 28px 70px rgba(15, 31, 56, 0.2);
}

/* uchib kelinganda atrofdagi bo'laklar sahna qo'ngandan keyingina chiqadi */
.xarita-page.is-arriving .container > :not(.reveal):not(.xarita-stage) {
    animation-duration: .7s;
    animation-delay: calc(var(--kech, 0ms) + 1050ms);
}

.xarita-scroll {
    width: 100%;
    height: 100%;
    overflow: auto;
    display: flex;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.xarita-scroll.is-zoomed { cursor: grab; }
.xarita-scroll.is-grabbing { cursor: grabbing; }

.xarita-img {
    display: block;
    /* flex elementi sifatida qisqarib qolmasin — kattalashtirilganda
       kenglik aynan biz bergancha bo'lishi kerak */
    flex-shrink: 0;
    /* `margin:auto` flex ichida markazlaydi va kattalashtirilganda ham
       chap/yuqori chetini kesib qo'ymaydi (justify-content:center dan farqli) */
    margin: auto;
    max-width: none;
    height: auto;
    cursor: zoom-in;
}
.xarita-scroll.is-zoomed .xarita-img { cursor: inherit; }

.xarita-stage__hint {
    position: absolute;
    right: .9rem;
    bottom: .9rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .8rem;
    font-size: .75rem;
    color: var(--siyoh-2);
    background: var(--qogoz-2);
    border: 1px solid var(--chiziq);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-pill);
    pointer-events: none;
    opacity: .9;
    transition: opacity .25s ease, visibility .25s ease;
}
.xarita-stage__hint svg { width: 13px; height: 13px; }
.xarita-stage__hint.is-hidden { opacity: 0; visibility: hidden; }

/* to'liq ekran rejimi */
.xarita-stage.is-fullscreen {
    height: 100vh;
    border-radius: 0;
    border: 0;
    box-shadow: none;
}

/* --- rasm ostidagi izoh --- */
.xarita-caption {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin-top: .9rem;
    padding: 0 .25rem;
}
.xarita-caption__text {
    margin: 0;
    font-size: .95rem;
    color: var(--text-secondary);
    max-width: 72ch;
}
.xarita-caption__meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
}
.xarita-caption__meta li {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    color: var(--text-tertiary);
}
.xarita-caption__meta li svg { width: 13px; height: 13px; }
.xarita-caption__warn { color: var(--color-accent) !important; }

/* --- oldingi / keyingi mavzu --- */
.xarita-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.75rem;
}
.xarita-pager__link {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg);
    background: var(--qogoz-2);
    border: 1px solid var(--chiziq);
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color .3s ease, transform .3s var(--ease-spring), background .3s ease;
}
.xarita-pager__link:hover {
    border-color: var(--tur-rang);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}
.xarita-pager__link--next {
    justify-content: flex-end;
    text-align: right;
}
.xarita-pager__link span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xarita-pager__link small {
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.xarita-pager__link b {
    font-size: .95rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.xarita-pager__link svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-secondary-light); }
.xarita-pager__icon--back { transform: rotate(180deg); }

/* --- shu mavzuning boshqa materiallari --- */
.xarita-related { margin-top: 2.75rem; }
.xarita-related__head { margin-bottom: 1.25rem; }
.xarita-related__head h2 {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.2vw, 1.55rem);
    margin: 0 0 .3rem;
    color: var(--text-primary);
}
.xarita-related__head p {
    margin: 0;
    font-size: .9rem;
    color: var(--text-tertiary);
}

.xarita-related__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.xarita-related__card {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.15rem;
    border-radius: var(--radius-lg);
    background: var(--qogoz-2);
    border: 1px solid var(--chiziq);
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color .3s ease, transform .3s var(--ease-spring), background .3s ease;
}
.xarita-related__card:not(.is-soon):hover {
    border-color: var(--tur-rang);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}
.xarita-related__card.is-soon {
    opacity: .5;
    cursor: default;
}
.xarita-related__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--tur-rang-soft);
    color: var(--tur-matn);
}
.xarita-related__icon svg { width: 20px; height: 20px; }
.xarita-related__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.xarita-related__body b { font-size: .95rem; font-weight: 600; }
.xarita-related__body small { font-size: .78rem; color: var(--text-tertiary); }
.xarita-related__card > svg { width: 16px; height: 16px; color: var(--tur-rang); flex-shrink: 0; }


/* === RESPONSIVE === */
@media (max-width: 900px) {
    .xarita-bar { align-items: flex-start; }
    .xarita-bar__actions { width: 100%; }
    .xarita-stage { height: clamp(360px, calc(100vh - 360px), 800px); }
}

@media (max-width: 640px) {
    /* Kichik ekranda tugma matnlari o'rniga faqat ikonka */
    .xarita-act span { display: none; }
    .xarita-stage { height: clamp(320px, 60vh, 560px); }
    .xarita-pager { grid-template-columns: 1fr; }
    .xarita-pager__link--next { justify-content: flex-start; text-align: left; flex-direction: row-reverse; }
    .xarita-stage__hint { display: none; }
}

/* ==========================================================================
   MAVZU SAHIFASI — /section/didaktik-materiallar/<mavzuSlug>
   Bitta mavzuning to'rt materiali manba tartibida (1 → 4). Har qadam o'z turi
   rangida ([data-tur] palitrasi), tayyor emasi xira "tez orada".
   ========================================================================== */
.mavzu-page { padding: 1.25rem 0 clamp(3rem, 6vw, 5rem); }
.mavzu-page .breadcrumb--tight { margin-bottom: 1rem !important; }

.mavzu-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: center;
    padding: clamp(1.25rem, 3vw, 2rem);
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: var(--radius-2xl);
    background: linear-gradient(120deg, var(--kok-yumshoq), transparent 60%), var(--qogoz-2);
    border: 1px solid var(--chiziq);
    box-shadow: var(--shadow-sm);
}
.mavzu-hero__body { display: flex; flex-direction: column; gap: .8rem; }
.mavzu-hero__eyebrow {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--color-primary-light);
}
.mavzu-hero__eyebrow svg { width: 14px; height: 14px; }
.mavzu-hero__eyebrow i { font-style: normal; opacity: .5; }
.mavzu-hero__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.4vw, 2.5rem);
    line-height: 1.12;
    letter-spacing: -.01em;
    color: var(--siyoh);
}
.mavzu-hero__text { margin: 0; max-width: 60ch; color: var(--text-secondary); line-height: 1.6; }
.mavzu-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: .3rem; }
.mavzu-hero__actions .btn-primary { flex-direction: column; gap: .1rem; padding-top: .7rem; padding-bottom: .7rem; }
.mavzu-hero__actions .btn-primary small { font-size: .72rem; font-weight: 500; opacity: .85; }
.mavzu-hero__nisbat { font-size: .88rem; color: var(--text-tertiary); }
.mavzu-hero__nisbat b { font-family: var(--font-display); font-size: 1.2rem; color: var(--text-primary); }

.mavzu-hero__rasm {
    position: relative;
    display: block;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--chiziq);
    background: var(--qogoz-2);
    transition: transform .35s var(--ease-spring), border-color .3s ease, box-shadow .3s ease;
}
.mavzu-hero__rasm img { display: block; width: 100%; height: auto; }
.mavzu-hero__rasm:hover { transform: translateY(-4px) scale(1.01); border-color: var(--binafsha); box-shadow: var(--shadow-lg); }
.mavzu-hero__rasm-yorliq {
    position: absolute; left: .6rem; bottom: .6rem;
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .7rem; border-radius: var(--radius-pill);
    font-size: .72rem; font-weight: 600;
    background: var(--qogoz-2); color: #5a3fc0;
    border: 1px solid rgba(111, 79, 216, 0.35);
    box-shadow: var(--shadow-sm);
}
.mavzu-hero__rasm-yorliq svg { width: 13px; height: 13px; }

.mavzu-qadamlar__head { margin-bottom: 1rem; }
.mavzu-qadamlar { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; counter-reset: qadam; }
.mavzu-qadam {
    position: relative;
    border-radius: var(--radius-lg);
    background: var(--qogoz-2);
    border: 1px solid var(--chiziq);
    box-shadow: var(--shadow-sm);
    transition: border-color .3s ease, transform .3s var(--ease-spring), box-shadow .3s ease;
}
.mavzu-qadam:not(.is-soon):hover {
    border-color: var(--tur-rang-border);
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
}
.mavzu-qadam.is-soon { opacity: .5; }
/* qadamlarni bog'lovchi vertikal chiziq */
.mavzu-qadam:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 2.6rem;
    bottom: -.6rem;
    height: .6rem;
    width: 2px;
    background: var(--tur-rang-line);
    opacity: .5;
}
.mavzu-qadam__link {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    color: inherit;
    text-decoration: none;
}
.mavzu-qadam__raqam {
    display: grid; place-items: center;
    width: 2.1rem; height: 2.1rem;
    border-radius: 50%;
    font-family: var(--font-display); font-size: .95rem; font-weight: 700;
    color: var(--tur-rang);
    background: var(--tur-rang-soft);
    border: 1.5px solid var(--tur-rang-border);
}
.mavzu-qadam__icon {
    display: grid; place-items: center;
    width: 2.4rem; height: 2.4rem;
    border-radius: var(--radius-md);
    color: var(--tur-rang);
    background: var(--tur-rang-soft);
}
.mavzu-qadam__icon svg { width: 20px; height: 20px; }
.mavzu-qadam__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.mavzu-qadam__body b { font-family: var(--font-display); font-size: 1.02rem; }
.mavzu-qadam__body small { font-size: .84rem; color: var(--text-tertiary); line-height: 1.4; }
.mavzu-qadam__cta {
    display: inline-flex; align-items: center; gap: .35rem;
    font-family: var(--font-display); font-size: .84rem; font-weight: 600;
    color: var(--tur-rang);
    white-space: nowrap;
}
.mavzu-qadam.is-soon .mavzu-qadam__cta { color: var(--text-tertiary); }
.mavzu-qadam__cta svg { width: 15px; height: 15px; transition: transform .25s var(--ease-out); }
.mavzu-qadam:not(.is-soon):hover .mavzu-qadam__cta svg { transform: translateX(3px); }

.mavzu-pager { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* bo'lim sahifasidagi plitka — sarlavha havolasi va "tartib" tugmasi */
.mavzu-plitka__havola { color: inherit; text-decoration: none; }
.mavzu-plitka__havola:hover { color: var(--color-primary-light); }
.mavzu-plitka__havola { display: inline-flex; align-items: center; gap: .4rem; }
.mavzu-plitka__havola svg {
    width: 15px; height: 15px;
    opacity: 0;
    transform: translateX(-6px);
    color: var(--color-primary-light);
    transition: opacity .25s ease, transform .25s var(--ease-out);
}
.mavzu-plitka:hover .mavzu-plitka__havola svg,
.mavzu-plitka__havola:focus-visible svg { opacity: 1; transform: none; }

@media screen and (max-width: 860px) {
    .mavzu-hero { grid-template-columns: 1fr; }
    .mavzu-hero__rasm { order: -1; max-width: 420px; }
    .mavzu-qadam__link { grid-template-columns: auto auto minmax(0, 1fr); gap: .7rem; padding: .85rem 1rem; }
    .mavzu-qadam__cta { grid-column: 1 / -1; justify-content: flex-end; }
    .mavzu-qadam:not(:last-child)::after { left: 2.1rem; }
}
.mavzu-hero__boshla { flex-direction: column; gap: .15rem; padding-top: .75rem; padding-bottom: .75rem; }
.mavzu-hero__boshla > span { display: inline-flex; align-items: center; gap: .5rem; }
.mavzu-hero__boshla small { font-size: .74rem; font-weight: 500; opacity: .85; }