/* =========================================================
   QALAMDON «ORGANAYZER» — instruksion texnologik xarita sahifasi.
   platform.css tokenlari ustida ishlaydi (base.html ni kengaytiradi).
   Prefiksi .ql- — Rasmli test (.rt-) va Diktant (.dk-) bilan chalkashmasin.
   ========================================================= */

/* Qatorlarning navbatlashuvchi foni. Saytdagi beshinchi juftlik — oldingi
   to'rttasi band: Metodika --limon/--yashil, Maqola --gulnor/--nilufar,
   Rasmli test --osmon/--binafsha, Diktant --shaftoli/--pudina. Bu ikkisi
   shu sahifaning O'Z ranglaridan olindi: jadval sarlavhasidagi feruza va
   zafaron ustunlari bilan bir oilada, shuning uchun begona ko'rinmaydi.
   Faqat shu sahifa ishlatgani uchun platform.css ga emas, shu yerga qo'yildi. */
:root {
    --sadaf:      #E3F1F1;   /* feruzaning eng ochi */
    --sadaf-2:    #C3E0E1;   /* chegara uchun to'qroq tovlanish */
    --qumoq:      #FBF1DF;   /* zafaronning eng ochi */
    --qumoq-2:    #EDD9B4;
}

.ql-head::before { background-image: url('/static/img/hero-qogoz.jpg'); }

/* Sarlavha ostidagi qisqa ma'lumot */
.ql-fakt {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 22px 0 0;
}
.ql-fakt li {
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.86);
}
.ql-fakt b { color: var(--zafaron); font-family: var(--font-display); }

/* Sarlavha bloki markazda — jadval keng, unga qaragan sarlavha ham
   o'rtada turgani muvozanatli chiqadi. */
.ql-bosh { text-align: center; }
.ql-bosh .eyebrow { justify-content: center; }
/* Yo'riqnoma qatori bo'lmagani uchun bo'shliq shu yerdan beriladi.
   (Avval «Lavhalar ovozsiz — ustiga bosing» yozuvi turardi; mijoz uni ham
   olib tashlashni so'radi — ijro tugmasi o'zi tushunarli.) */
.ql-bosh h2 { margin-bottom: 30px; }

/* ===== Jadval =====
   Tor ekranda gorizontal siljish faqat SHU qutida bo'ladi — sahifa tanasi
   hech qachon yon tomonga surilmasligi kerak. */
.ql-jadval-quti {
    overflow-x: auto;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    box-shadow: 0 8px 30px rgba(20, 32, 58, 0.07);
    background: var(--paper);
}
.ql-jadval {
    width: 100%;
    min-width: 940px;          /* to'rt ustun shundan torayganda o'qilmay qoladi */
    border-collapse: collapse;
    text-align: left;
}
.ql-jadval thead th {
    /* `position: sticky` ATAYLAB yo'q. Tashqi qutida `overflow-x: auto` bor,
       CSS esa bunday holda `overflow-y` ni ham `auto` ga aylantiradi — natijada
       yopishqoq sarlavhaning tayanchi sahifa emas, o'sha quti bo'lib qoladi.
       Quti esa vertikal siljimaydi, shuning uchun sarlavha navbar ostida
       ushlanib turmaydi, aksincha `top` qiymatiga siljib 1-qatorni bosib
       qo'yadi (sinovda aynan shunday bo'ldi). */
    padding: 16px 14px;
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    vertical-align: middle;
    text-align: center;
}
/* Belgi sarlavha ustida, matn markazda — sarlavhalar uzun (bittasi
   olti so'zli), shuning uchun ular bir necha qatorga tekis yotadi. */
.ql-jadval thead th svg { display: block; margin: 0 auto 8px; opacity: 0.9; }
.ql-jadval thead th span { display: block; }
/* Palitradan ketma-ket to'rt rang. Zafaron yorug', shuning uchun undagi
   matn --ink: oq bo'lsa kontrast yetmasdi. */
.ql-th1 { background: var(--siyoh); }
.ql-th2 { background: var(--siyoh-3); }
.ql-th3 { background: var(--firuza); }
.ql-th4 { background: var(--zafaron); color: var(--ink); }
.ql-th4 svg { opacity: 0.75; }

/* Qatorlar navbatma-navbat sadaf va qumoq fonda — Metodika va Maqola
   bo'limlaridagi bilan bir mantiqda. `:hover` ATAYLAB olib tashlandi:
   u qatorning rangini yuvib, navbatlashishni buzardi. */
.ql-jadval tbody tr + tr { border-top: 1px solid var(--line); }
.ql-jadval tbody tr:nth-child(odd)  { background: var(--sadaf); }
.ql-jadval tbody tr:nth-child(even) { background: var(--qumoq); }
.ql-jadval td,
.ql-jadval tbody th { padding: 16px 18px; vertical-align: top; }

/* 1-ustun: raqam doirachasi + matn.
   Flex ichki `div` da, katakning O'ZIDA emas: `<th>` ga `display: flex`
   berilsa, u `table-cell` bo'lishdan to'xtaydi va jadval qatoridan tushib
   qoladi. `float` ham yaramaydi — matnning birinchi qatorlari doiracha
   yonidan boshlanib, keyingilari uning ostiga o'tardi, chap chekka
   ola-quroq ko'rinardi. Endi matn alohida ustun, hamma qatori bir tekisda. */
.ql-qadam {
    width: 31%;
    font-weight: 400;
}
.ql-qadam-ichi {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}
.ql-qadam .ql-nomer {
    flex-shrink: 0;
    margin-top: 1px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--siyoh);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.95rem;
}
.ql-qadam .ql-matn {
    flex: 1;
    min-width: 0;
    font-size: 0.97rem;
    line-height: 1.55;
    color: var(--ink);
    text-align: left;
}

/* Uchala media ustuni bir xil kenglikda — shunda ichidagi qutilar ham
   bir xil o'lchamda chiqadi (balandligi `--ql-media` bilan bog'langan). */
.ql-tasvir,
.ql-video,
.ql-anjom { width: 23%; }

/* Rasm qutisi — manbalar 164–275px, shuning uchun quti qat'iy balandlikda,
   rasm esa o'z o'lchamida ichida turadi. Kattalashtirilsa loyqa bo'ladi;
   shu sababdan har qutining o'zi tugma — modalda to'liq ko'rish uchun.
   `--ql-media` UCHALA ustunga birdek tegishli: tasvir, video va anjom
   qutilari bir xil balandlikda bo'lsin (avval 150/202/116 edi, qator
   ola-quroq ko'rinardi). Bir joyda o'zgartirilsa, uchalasi ham siljiydi. */
.ql-jadval { --ql-media: 200px; }
.ql-quti {
    position: relative;
    display: block;
    width: 100%;
    height: var(--ql-media);
    padding: 0;                /* rasm chekkagacha boradi — atrofida oq hoshiya qolmasin */
    background: #fff;          /* rasmlar oqqa yotqizilgan — fon ham oq bo'lishi shart */
    /* Chegara bej (--line) emas, betaraf kulrang: u rangli qator fonida
       sarg'ish bo'lib ko'zga tashlanardi. */
    border: 1px solid rgba(20, 32, 58, 0.12);
    border-radius: var(--r-sm);
    overflow: hidden;
    font: inherit;
    cursor: zoom-in;
    transition: border-color 0.16s, box-shadow 0.16s;
}
/* `cover` — quti to'la ko'rinsin. Manbalar 164–275px, ya'ni bu yerda ular
   biroz kattalashadi; kartadagi ko'rinish uchun bu qabul qilingan, ASL
   o'lchamdagi aniq rasm esa kattalashtirish oynasida turadi (u yerda
   `contain`, hech qachon cho'zilmaydi). */
.ql-quti img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ql-ochiladi:hover,
.ql-ochiladi:focus-visible {
    border-color: var(--firuza);
    box-shadow: 0 0 0 3px rgba(23, 134, 140, 0.20);
}
/* Burchakdagi kattalashtirish belgisi — doim ko'rinadi (tegib turmaydigan
   ekranlarda hover yo'q), sichqoncha kelganda to'qlashadi. */
.ql-katta-belgi {
    position: absolute;
    right: 6px;
    bottom: 6px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--r-sm);
    background: rgba(20, 32, 58, 0.55);
    color: #fff;
    opacity: 0.75;
    transition: opacity 0.16s, background-color 0.16s;
}
.ql-ochiladi:hover .ql-katta-belgi,
.ql-ochiladi:focus-visible .ql-katta-belgi { opacity: 1; background: var(--siyoh); }

.ql-anjom-matn {
    display: block;
    margin-bottom: 10px;
    font-size: 0.94rem;
    line-height: 1.5;
    color: var(--ink-2);
}

/* ===== Video katagi ===== */
.ql-pleyer {
    position: relative;
    display: block;
    width: 100%;
    height: var(--ql-media);   /* rasm qutilari bilan bir xil */
    padding: 0;
    border: 1px solid rgba(20, 32, 58, 0.12);
    border-radius: var(--r-sm);
    background: #fff;          /* rasm qutilari bilan bir xil */
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.16s, box-shadow 0.16s;
}
.ql-pleyer:hover,
.ql-pleyer:focus-visible { border-color: var(--firuza); box-shadow: 0 0 0 3px rgba(23, 134, 140, 0.22); }
/* Lavhalar bir xil balandlikda (720px), eni esa har xil: 786–1032px, ya'ni
   nisbati 1.09 dan 1.43 gacha. Shuning uchun `contain` — `cover` bo'lsa eng
   tor lavhalarning usti-osti kesilib, buklayotgan qo'llar chiqib ketardi.
   Yon tomondagi bo'shliq --stone bo'ladi: manba fayllardagi qora yo'llar
   kesib tashlangan, endi ularni CSS qaytarib keltirmasin.
   O'lchamni endi quti beradi (`aspect-ratio` emas) — shunda video katagi
   qo'shni rasm kataklari bilan roppa-rosa teng bo'ladi. */
.ql-pleyer video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Ijro tugmasi — video yurganda yo'qoladi, sichqoncha kelganda qaytadi,
   shunda to'xtatish mumkinligi ko'rinib turadi. */
.ql-tugma {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    transition: opacity 0.2s;
}
.ql-tugma svg {
    width: 52px;
    height: 52px;
    padding: 13px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--siyoh);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.34);
}
.ql-pleyer.ketyapti .ql-tugma { opacity: 0; }
.ql-pleyer.ketyapti:hover .ql-tugma { opacity: 0.75; }

/* Katak ostidagi «Kattalashtirish» tugmasi */
.ql-pleyer-quti { display: grid; gap: 8px; }
.ql-katta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--paper);
    color: var(--siyoh);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: zoom-in;
    transition: background-color 0.16s, border-color 0.16s;
}
.ql-katta:hover,
.ql-katta:focus-visible { background: var(--siyoh); border-color: var(--siyoh); color: #fff; }
/* Ijro etib bo'lmasa jimgina qolmasin */
.ql-pleyer.xato::after {
    content: 'Videoni ochib boʻlmadi';
    position: absolute;
    inset: auto 0 0 0;
    padding: 6px;
    background: var(--anor);
    color: #fff;
    font-size: 0.8rem;
    text-align: center;
}

/* ===== Kattalashtirish oynasi =====
   Xiralik pardaning O'ZIGA `backdrop-filter` bilan beriladi. Mazmunga
   `filter` qo'yilsa, u `position: fixed` uchun yangi tayanch blok yasab,
   navbarni joyidan siljitardi (Rasmli test va Diktantdagi bilan bir xil qoida). */
.ql-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(20, 32, 58, 0.62);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: ql-modal-kir 0.22s ease-out;
}
.ql-modal[hidden] { display: none; }
@keyframes ql-modal-kir { from { opacity: 0; } to { opacity: 1; } }

.ql-modal-ichi {
    width: min(980px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border-radius: var(--r-lg);
    box-shadow: 0 24px 70px rgba(20, 32, 58, 0.45);
    overflow: hidden;
    animation: ql-ichi-kir 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes ql-ichi-kir {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}
.ql-modal-bosh {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
}
.ql-modal-bosh > div { display: grid; gap: 3px; min-width: 0; }
.ql-modal-bosh b {
    font-family: var(--font-display);
    font-size: 1.02rem;
    color: var(--siyoh);
}
.ql-modal-bosh span { font-size: 0.9rem; color: var(--ink-2); line-height: 1.45; }
.ql-yop {
    flex-shrink: 0;
    margin-left: auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--paper);
    color: var(--ink-2);
    cursor: pointer;
    transition: background-color 0.16s, color 0.16s;
}
.ql-yop:hover, .ql-yop:focus-visible { background: var(--anor); border-color: var(--anor); color: #fff; }

/* Media qutisi: fon --stone, chunki kesilgan lavhalarning nisbati har xil —
   qora fon manbadan olib tashlangan qora yo'llarni qaytarib keltirardi. */
.ql-modal-media {
    display: grid;
    place-items: center;
    padding: 14px;
    background: var(--stone);
    overflow: auto;
}
.ql-modal-media video,
.ql-modal-media img {
    display: block;
    max-width: 100%;
    max-height: 74vh;
    width: auto;
    border-radius: var(--r-sm);
}
/* Rasm manbalari kichik (164–760px) — modalda ham KATTALASHTIRILMAYDI,
   aks holda loyqa bo'lib ketadi; shunchaki to'liq o'lchamida ko'rinadi. */
.ql-modal-media img { image-rendering: auto; }

/* ===== Xulosa va ortga ===== */
.ql-xulosa {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-top: 30px;
    padding: 24px 26px;
    border-radius: var(--r-lg);
    background: var(--stone);
    border: 1px solid var(--line);
}
.ql-xulosa .motif { flex-shrink: 0; width: 40px; height: 40px; color: var(--zafaron); }
.ql-xulosa h3 {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--siyoh);
}
.ql-xulosa p { margin: 0; color: var(--ink-2); line-height: 1.6; }

.ql-ortga { margin-top: 26px; }
.ql-ortga .btn-line {
    background: var(--paper);
    color: var(--siyoh);
    border-color: var(--line);
}
.ql-ortga .btn-line:hover { background: var(--stone); border-color: var(--siyoh); }

/* ===== Tor ekran =====
   940px lik jadvalni telefonda siljitib o'qish azob, shuning uchun u
   kartalarga aylanadi: har qator — alohida karta, har katak esa o'z
   sarlavhasi bilan (`data-ustun` shablonda yozilgan). */
@media (max-width: 860px) {
    .ql-jadval-quti { overflow-x: visible; border: 0; box-shadow: none; background: none; }
    .ql-jadval { min-width: 0; }
    .ql-jadval thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    /* Kartaga aylanadi, lekin navbatlashuvchi rang SAQLANADI — bu yerda
       fon berilmaydi, yuqoridagi nth-child qoidalari o'z kuchida qoladi. */
    .ql-jadval tbody tr {
        display: block;
        margin-bottom: 16px;
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        box-shadow: 0 6px 22px rgba(20, 32, 58, 0.06);
        overflow: hidden;
    }
    .ql-jadval td,
    .ql-jadval tbody th { display: block; width: auto; padding: 14px 16px; }
    .ql-jadval td + td,
    .ql-jadval td { border-top: 1px solid var(--line); }
    /* Kartada 1-katak qolgan kataklardan ajralib tursin. Qatorning o'z
       rangi ustidan yarim shaffof oq — ikkala tovlanishda ham ishlaydi. */
    .ql-qadam { background: rgba(255, 255, 255, 0.55); }
    .ql-tasvir::before,
    .ql-video::before,
    .ql-anjom::before {
        content: attr(data-ustun);
        display: block;
        margin-bottom: 8px;
        font-size: 0.76rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink-3);
        font-weight: 700;
    }
    /* Kartada katak butun kenglikni oladi — quti ham balandroq bo'ladi.
       Bitta o'zgaruvchi uchala ustunni birga siljitadi. */
    .ql-jadval { --ql-media: 240px; }
}

@media (max-width: 660px) {
    .ql-xulosa { flex-direction: column; gap: 12px; padding: 20px 18px; }
    .ql-jadval { --ql-media: 200px; }
    .ql-modal { padding: 12px; }
    .ql-modal-media video, .ql-modal-media img { max-height: 62vh; }
}

/* Chop etish: video o'rniga poster surati qoladi */
@media print {
    .topbar, .footer, .skip-link, .ql-ortga,
    .ql-katta, .ql-katta-belgi, .ql-modal { display: none !important; }
    .ql-jadval-quti { box-shadow: none; }
    .ql-jadval tbody tr { break-inside: avoid; }
    .ql-tugma { display: none; }
}

/* =========================================================
   YORQIN USLUB
   =========================================================
   Sayt yorqin uslubga o'tkazildi; bu blok shu sahifani ham
   o'shanga keltiradi. Fayl OXIRIDA turadi va yuqoridagi
   qoidalarni bir xil kuchdagi selektorlar bilan yengadi.

   TEGILMAYDIGAN NARSALAR (CLAUDE.md dagi shartlar):
     - rasm qutilari sof oq bo'lib qoladi
     - jadval sarlavhasiga `position: sticky` qo'yilmaydi
     - parda `backdrop-filter` bilan xiralashadi
   ========================================================= */

/* Sarlavha ostidagi faktlar qatori.

   NEGA TUZATILDI: bu qoidalar to'q ko'k sarlavha lentasi uchun
   yozilgandi — oq matn, shaffof oq fon. Lenta yorqin uslubda och
   bo'lgani uchun matn ko'rinmay qoldi (footer havolalari bilan bir
   xil xato). Endi oq tabletka, siyoh matn, ko'k raqam. */
.ql-fakt li {
    background: #fff;
    border: 1px solid #DCE9F6;
    color: #50688A;
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 600;
}

.ql-fakt b {
    color: #2E7DE0;
    font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
    font-weight: 600;
}

/* Jadval sarlavhasi: to'rtta ustun, to'rtta rang.
   Ketma-ketlik yorqin palitradan — ko'k, moviy, yashil, to'q sariq.
   To'q sariq yorug', shuning uchun undagi matn siyoh rangda:
   oq bo'lsa kontrast yetmaydi. */
.ql-th1, .ql-th1 { background: #2E7DE0; }
.ql-th2, .ql-th2 { background: #2E9BE0; }
.ql-th3, .ql-th3 { background: #43A047; }
.ql-th4, .ql-th4 { background: #F5920B; color: #22384F; }

.ql-jadval thead th {
    font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
    font-weight: 600;
}

/* Qatorlar navbatlashuvi — pale ko'k va pale to'q sariq.
   Rasm qutilari baribir oq bo'lgani uchun ular ajralib turadi. */
:root {
    --sadaf:  #EAF4FB;
    --qumoq:  #FEF4E6;
    --marjon: #FDECEA;
    --zangori:#E9F1FB;
}

.ql-tugma {
    border-radius: 999px;
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 800;
}

.ql-qadam-raqam {
    background: #2E7DE0;
    color: #fff;
    font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
}

/* ---------------------------------------------------------
   UZUN SARLAVHA
   Mijozning to'liq iborasi («… usulidan foydalanib «…» yasash
   texnologiyasi», 2026-09-05) 60 belgidan oshadi. `platform.css`
   dagi `.page-head h1` esa `max-width: 20ch` va 3.1rem — bunda
   sarlavha uch qatorga bo'linib, lentani cho'zib yuborardi.
   Aniqlik bir xil (0,1,1), lekin bu fayl keyin ulanadi.
   --------------------------------------------------------- */
.ql-head h1 { max-width: 30ch; font-size: clamp(1.55rem, 2.9vw, 2.35rem); }