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

   Tuzilishi Qalamdon sahifasi bilan bir xil: shu ikki sahifa bir oilaga
   tegishli va bir xil ko'rinishi kerak. Qalamdon CSS ini shu yerdan
   ulash mumkin emas — @import render-blokirovka qiladi (base.html dagi
   shrift izohiga qarang), shuning uchun tuzilma takrorlangan, farqi esa
   faqat qator ranglari, sahifa surati va videosiz katakda.
   ========================================================= */

/* Qatorlarning navbatlashuvchi foni. Saytdagi OLTINCHI juftlik — oldingilari
   band: Metodika --limon/--yashil, Maqola --gulnor/--nilufar, Rasmli test
   --osmon/--binafsha, Diktant --shaftoli/--pudina, Qalamdon --sadaf/--qumoq.
   Bu ikkisi buyumning o'z ranglaridan: xonqizi qizil-qora, shuning uchun
   anorning eng ochi va siyohning eng ochi olindi — ikkalasi ham platformaning
   asosiy palitrasidan, begona ko'rinmaydi. */
:root {
    --marjon:     #FCEAE7;   /* anorning eng ochi */
    --zangori:    #E9EEF7;   /* siyohning eng ochi */
}

.xq-head::before { background-image: url('/static/img/qollar.jpg'); }

/* Sarlavha ostidagi qisqa ma'lumot */
.xq-fakt {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 22px 0 0;
}
.xq-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);
}
.xq-fakt b { color: var(--zafaron); font-family: var(--font-display); }

/* Sarlavha bloki markazda — jadval keng, unga qaragan sarlavha ham
   o'rtada turgani muvozanatli chiqadi. */
.xq-bosh { text-align: center; }
.xq-bosh .eyebrow { justify-content: center; }
.xq-bosh h2 { margin-bottom: 30px; }

/* ===== Jadval =====
   Tor ekranda gorizontal siljish faqat SHU qutida bo'ladi — sahifa tanasi
   hech qachon yon tomonga surilmasligi kerak. */
.xq-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);
}
.xq-jadval {
    width: 100%;
    min-width: 940px;          /* to'rt ustun shundan torayganda o'qilmay qoladi */
    border-collapse: collapse;
    text-align: left;
}
.xq-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 va
       sarlavha `top` qiymatiga siljib 1-qatorni bosib qo'yadi. */
    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;
}
.xq-jadval thead th svg { display: block; margin: 0 auto 8px; opacity: 0.9; }
.xq-jadval thead th span { display: block; }
/* Palitradan ketma-ket to'rt rang — Qalamdondagi bilan bir xil, chunki
   ikkala sahifa ham bitta bo'limning xaritalari. Zafaron yorug', shuning
   uchun undagi matn --ink. */
.xq-th1 { background: var(--siyoh); }
.xq-th2 { background: var(--siyoh-3); }
.xq-th3 { background: var(--firuza); }
.xq-th4 { background: var(--zafaron); color: var(--ink); }
.xq-th4 svg { opacity: 0.75; }

/* Qatorlar navbatma-navbat marjon va zangori fonda. `:hover` ATAYLAB yo'q:
   u qatorning rangini yuvib, navbatlashishni buzadi. */
.xq-jadval tbody tr + tr { border-top: 1px solid var(--line); }
.xq-jadval tbody tr:nth-child(odd)  { background: var(--marjon); }
.xq-jadval tbody tr:nth-child(even) { background: var(--zangori); }
.xq-jadval td,
.xq-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 qatordan tushib qoladi. */
.xq-qadam {
    width: 31%;
    font-weight: 400;
}
.xq-qadam-ichi {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}
.xq-qadam .xq-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;
}
.xq-qadam .xq-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 `--xq-media` bilan bog'langan). */
.xq-tasvir,
.xq-video,
.xq-anjom { width: 23%; }

/* Rasm qutisi — manbalar 192–651px, shuning uchun quti qat'iy balandlikda.
   `--xq-media` UCHALA ustunga birdek tegishli: tasvir, video va anjom
   qutilari bir xil balandlikda bo'lsin. Bir joyda o'zgartirilsa, uchalasi
   ham siljiydi. */
.xq-jadval { --xq-media: 200px; }
.xq-quti {
    position: relative;
    /* Rasm markazda, TO'LIQ ko'rinadi — mijozning talabi: kattalashtirmasdan
       ham butun surat ko'rinsin. Shu sababdan `cover` emas (u chetlarini
       qirqib, masalan xonqizining mo'ylovini kesib qo'yardi). */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--xq-media);
    padding: 6px;
    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;
}
/* Rasm o'z nisbatini saqlab, qutiga to'liq sig'adi va HECH QACHON
   kattalashtirilmaydi: manbalar 192–651px, cho'zilsa loyqa bo'ladi.
   Shu sababdan `width/height: auto` + `max-*: 100%` — Rasmli test va
   Diktantdagi bilan bir xil qoida. */
.xq-quti img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.xq-ochiladi:hover,
.xq-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. */
.xq-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;
}
.xq-ochiladi:hover .xq-katta-belgi,
.xq-ochiladi:focus-visible .xq-katta-belgi { opacity: 1; background: var(--siyoh); }

/* ===== Video katagi ===== */
.xq-pleyer {
    position: relative;
    display: block;
    width: 100%;
    height: var(--xq-media);   /* rasm qutilari bilan bir xil */
    padding: 0;
    border: 1px solid rgba(20, 32, 58, 0.12);
    border-radius: var(--r-sm);
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.16s, box-shadow 0.16s;
}
.xq-pleyer:hover,
.xq-pleyer:focus-visible { border-color: var(--firuza); box-shadow: 0 0 0 3px rgba(23, 134, 140, 0.22); }
/* Lavhalar toza 16:9 (qora yon yo'llar yo'q, tekshirilgan), quti nisbati esa
   ~1.13 — ya'ni `cover` da chap-o'ng chetdan qirqiladi. Bu ataylab:
   mijoz kataklar to'la bo'lishini so'ragan, kadrning to'lig'i esa bitta
   bosishda kattalashtirish oynasida ko'rinadi (u yerda `contain`). */
.xq-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. */
.xq-tugma {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    transition: opacity 0.2s;
}
.xq-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);
}
.xq-pleyer.ketyapti .xq-tugma { opacity: 0; }
.xq-pleyer.ketyapti:hover .xq-tugma { opacity: 0.75; }

/* Katak ostidagi «Kattalashtirish» tugmasi */
.xq-pleyer-quti { display: grid; gap: 8px; }
.xq-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;
}
.xq-katta:hover,
.xq-katta:focus-visible { background: var(--siyoh); border-color: var(--siyoh); color: #fff; }
/* Ijro etib bo'lmasa jimgina qolmasin */
.xq-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. */
.xq-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: xq-modal-kir 0.22s ease-out;
}
.xq-modal[hidden] { display: none; }
@keyframes xq-modal-kir { from { opacity: 0; } to { opacity: 1; } }

.xq-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: xq-ichi-kir 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes xq-ichi-kir {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}
.xq-modal-bosh {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
}
.xq-modal-bosh > div { display: grid; gap: 3px; min-width: 0; }
.xq-modal-bosh b {
    font-family: var(--font-display);
    font-size: 1.02rem;
    color: var(--siyoh);
}
.xq-modal-bosh span { font-size: 0.9rem; color: var(--ink-2); line-height: 1.45; }
.xq-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;
}
.xq-yop:hover, .xq-yop:focus-visible { background: var(--anor); border-color: var(--anor); color: #fff; }

.xq-modal-media {
    display: grid;
    place-items: center;
    padding: 14px;
    background: var(--stone);
    overflow: auto;
}
.xq-modal-media video,
.xq-modal-media img {
    display: block;
    max-width: 100%;
    max-height: 74vh;
    width: auto;
    border-radius: var(--r-sm);
}
/* Rasm manbalari kichik (192–651px) — modalda ham KATTALASHTIRILMAYDI,
   aks holda loyqa bo'lib ketadi; shunchaki to'liq o'lchamida ko'rinadi. */
.xq-modal-media img { image-rendering: auto; }

/* ===== Xulosa va ortga ===== */
.xq-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);
}
.xq-xulosa .motif { flex-shrink: 0; width: 40px; height: 40px; color: var(--zafaron); }
.xq-xulosa h3 {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--siyoh);
}
.xq-xulosa p { margin: 0; color: var(--ink-2); line-height: 1.6; }

.xq-ortga { margin-top: 26px; }
.xq-ortga .btn-line {
    background: var(--paper);
    color: var(--siyoh);
    border-color: var(--line);
}
.xq-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) {
    .xq-jadval-quti { overflow-x: visible; border: 0; box-shadow: none; background: none; }
    .xq-jadval { min-width: 0; }
    .xq-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. */
    .xq-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;
    }
    .xq-jadval td,
    .xq-jadval tbody th { display: block; width: auto; padding: 14px 16px; }
    .xq-jadval td + td,
    .xq-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. */
    .xq-qadam { background: rgba(255, 255, 255, 0.55); }
    .xq-tasvir::before,
    .xq-video::before,
    .xq-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. */
    .xq-jadval { --xq-media: 240px; }
}

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

/* Chop etish: video o'rniga poster surati qoladi */
@media print {
    .topbar, .footer, .skip-link, .xq-ortga,
    .xq-katta, .xq-katta-belgi, .xq-modal { display: none !important; }
    .xq-jadval-quti { box-shadow: none; }
    .xq-jadval tbody tr { break-inside: avoid; }
    .xq-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. */
.xq-fakt li {
    background: #fff;
    border: 1px solid #DCE9F6;
    color: #50688A;
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 600;
}

.xq-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. */
.xq-th1, .ql-th1 { background: #2E7DE0; }
.xq-th2, .ql-th2 { background: #2E9BE0; }
.xq-th3, .ql-th3 { background: #43A047; }
.xq-th4, .ql-th4 { background: #F5920B; color: #22384F; }

.xq-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;
}

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

.xq-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.
   --------------------------------------------------------- */
.xq-head h1 { max-width: 30ch; font-size: clamp(1.55rem, 2.9vw, 2.35rem); }