/* =========================================================
   TEXNOLOGIK DIKTANTLAR — Topshiriq bo'limining bosqichli mashqi.
   platform.css tokenlari ustida ishlaydi (base.html ni kengaytiradi).
   Rasmli test bilan bir xil tilda, lekin o'z prefiksi (.dk-) bilan —
   ikkalasi bir sahifada uchrashmaydi, sinflar chalkashmasin.
   ========================================================= */

/* Topshiriq kartalarining navbatlashuvchi foni. Rasmli testda ham shunday
   juftlik bor (--osmon/--binafsha), Metodikada esa --limon/--yashil —
   shuning uchun bu sahifaga UCHINCHI juftlik olindi: shaftoli va pudina.
   Ikkalasi ham juda och, --ink bilan kontrasti 12 dan yuqori. Tokenlar
   platform.css ga emas, shu yerga qo'yilgan — faqat shu sahifa ishlatadi. */
:root {
    --shaftoli:   #FCEADB;
    --shaftoli-2: #F0D0AE;   /* chegara uchun to'qroq tovlanish */
    --pudina:     #E0F1EB;
    --pudina-2:   #B4DCD1;
}

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

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

/* ===== Bosqich yo'lakchasi =====
   To'rt bosqich doim ko'rinib turadi, shunda o'quvchi qayerdaligini
   va qancha qolganini biladi. */
.dk-yolak {
    position: sticky;
    top: 74px;
    z-index: 40;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 2px 14px rgba(20, 32, 58, 0.06);
}
.dk-yolak .wrap { padding-top: 14px; padding-bottom: 14px; }
.dk-qadamlar {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}
.dk-qadam {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink-3);
    background: var(--stone);
    border: 1.5px solid transparent;
}
.dk-qadam-raqam {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--stone-2);
    color: var(--ink-2);
    font-family: var(--font-display);
    font-size: 0.86rem;
}
.dk-qadam-nomi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Ochilmagan bosqich — qulf belgisi bilan */
.dk-qadam.qulf { opacity: 0.62; }
.dk-qadam.joriy {
    background: rgba(20, 32, 58, 0.06);
    border-color: var(--siyoh);
    color: var(--siyoh);
}
.dk-qadam.joriy .dk-qadam-raqam { background: var(--siyoh); color: #fff; }
.dk-qadam.tugadi { color: var(--firuza); background: rgba(23, 134, 140, 0.10); }
.dk-qadam.tugadi .dk-qadam-raqam { background: var(--firuza); color: #fff; }

.dk-panel-ichi {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.dk-holat { font-size: 0.95rem; color: var(--ink-2); }
.dk-holat b { color: var(--ink); font-family: var(--font-display); }
.dk-tekshir { margin-left: auto; }

.dk-progress {
    height: 5px;
    border-radius: 99px;
    background: var(--stone-2);
    overflow: hidden;
    margin-bottom: 12px;
}
.dk-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--zafaron);
    transition: width 0.3s;
}

/* ===== Burchakdagi soat (Rasmli testdagi bilan bir xil xulq) ===== */
.dk-soat {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 45;
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--paper);
    box-shadow: 0 10px 30px rgba(20, 32, 58, 0.22);
}
.dk-soat-halqa { position: absolute; transform: rotate(-90deg); }
.dk-soat-fon { fill: none; stroke: var(--stone-2); stroke-width: 4; }
.dk-soat-yoy {
    fill: none;
    stroke: var(--firuza);
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear;
}
.dk-soat-matn { display: grid; justify-items: center; line-height: 1.15; }
.dk-soat-matn b { font-family: var(--font-display); font-size: 1.12rem; color: var(--siyoh); }
.dk-soat-matn small { font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.dk-soat.ogoh .dk-soat-yoy { stroke: var(--zafaron); }
.dk-soat.kam .dk-soat-yoy { stroke: var(--anor); }
.dk-soat.kam .dk-soat-matn b { color: var(--anor); }
.dk-soat.tugadi { opacity: 0.75; }
.dk-soat.tugadi .dk-soat-yoy { stroke: var(--ink-3); }

/* ===== Bosqich va topshiriq ===== */
.dk-bosqich[hidden] { display: none; }
.dk-bosqich-bosh {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.dk-bosqich-bosh h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--siyoh);
    margin: 0;
}
.dk-bosqich-bosh p { margin: 0; color: var(--ink-2); font-size: 0.96rem; }

.dk-savol {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: 0 6px 24px rgba(20, 32, 58, 0.06);
    padding: 24px 26px;
    margin-bottom: 22px;
}
/* Kartalar navbatma-navbat shaftoli va pudina fonda. `:nth-of-type` —
   chunki bosqich ichida `<header>` va natija `<div>` ham bor, faqat
   topshiriqlar `<article>`, ya'ni sanoq har bosqichda 1 dan boshlanadi. */
.dk-savol:nth-of-type(odd) {
    background: var(--shaftoli);
    border-color: var(--shaftoli-2);
}
.dk-savol:nth-of-type(even) {
    background: var(--pudina);
    border-color: var(--pudina-2);
}
.dk-savol-bosh {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.dk-raqam {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--siyoh);
    color: #fff;
    font-family: var(--font-display);
    font-size: 1rem;
}
.dk-savol-bosh h3 {
    margin: 0;
    flex: 1;
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--ink);
    line-height: 1.35;
}
.dk-ball {
    flex-shrink: 0;
    padding: 5px 13px;
    border-radius: 999px;
    /* Oldin zafaron shaffofi edi — rangli karta ostida ikki fonda ikki xil
       ko'rinardi. Endi qopqoq oq, chegarasi zafaron: har ikkalasida bir xil. */
    background: var(--paper);
    border: 1px solid var(--zafaron);
    color: #8a5a00;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Rasmlar qatori — raqami bilan */
.dk-rasmlar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}
.dk-rasm {
    margin: 0;
    padding: 10px 10px 12px;
    /* Yarim shaffof oq: karta rangi ostidan sal ko'rinadi, shunda ICHIDAGI
       oq rasm qutisi ajralib turadi. Bej (--stone) rangli fonda loyqa. */
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: var(--r-md);
    text-align: center;
}
/* Manba rasmlari kichik (150–700px) — QUTI qat'iy balandlikda, rasm esa
   o'z o'lchamida ichida turadi. Kattalashtirilsa loyqa bo'lib ketadi. */
.dk-rasm-quti {
    display: grid;
    place-items: center;
    height: 150px;
    background: #fff;
    border-radius: var(--r-sm);
    overflow: hidden;
}
.dk-rasm-quti img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    display: block;
}
.dk-rasm figcaption {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-top: 10px;
    border-radius: 50%;
    background: var(--siyoh);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.94rem;
}
/* Tekshirilgandan keyin: to'g'ri javob rasmi yashil ramka oladi */
.dk-rasm.kalit { border-color: var(--firuza); box-shadow: 0 0 0 2px rgba(23, 134, 140, 0.28); }

/* Nom qatorlari va raqam tugmalari */
.dk-qatorlar { display: grid; gap: 10px; }
.dk-qator {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-radius: var(--r-sm);
    /* Rasm qutisi bilan bir mantiqda — kartaning yengilroq tovlanishi.
       Tekshirilgandan keyingi .dk-togri/.dk-xato ikki sinfli, shuning uchun
       ular baribir shu qoidadan ustun turadi. */
    background: rgba(255, 255, 255, 0.62);
    border: 1.5px solid rgba(255, 255, 255, 0.9);
}
.dk-yorliq { flex: 1; min-width: 0; font-size: 0.99rem; color: var(--ink); }
.dk-raqamlar { display: flex; gap: 6px; flex-shrink: 0; }
.dk-tanlov {
    width: 42px;
    height: 40px;
    border-radius: var(--r-sm);
    border: 1.5px solid var(--line);
    background: var(--paper);
    color: var(--ink-2);
    font-family: var(--font-display);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.dk-tanlov:hover:not(:disabled) { border-color: var(--siyoh); color: var(--siyoh); }
.dk-tanlov.tanlandi { background: var(--siyoh); border-color: var(--siyoh); color: #fff; }
/* Boshqa qatorda ishlatilgan raqam — bosilsa "tortib olinadi" */
.dk-tanlov.band { opacity: 0.4; }
.dk-tanlov:disabled { cursor: default; }
.dk-tanlov.kalit { border-color: var(--firuza); color: var(--firuza); }
.dk-tanlov.tanlandi.kalit { background: var(--firuza); color: #fff; }
.dk-tanlov.notogri { background: var(--anor); border-color: var(--anor); color: #fff; opacity: 1; }

.dk-belgi { flex-shrink: 0; width: 22px; text-align: center; font-weight: 700; }
.dk-qator.dk-togri { background: rgba(23, 134, 140, 0.10); border-color: var(--firuza); }
.dk-qator.dk-togri .dk-belgi { color: var(--firuza); }
.dk-qator.dk-xato { background: rgba(192, 57, 43, 0.07); border-color: var(--anor); }
.dk-qator.dk-xato .dk-belgi { color: var(--anor); }

/* ===== Bosqich natijasi ===== */
.dk-natija {
    text-align: center;
    padding: 34px 28px;
    border-radius: var(--r-lg);
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 10px 34px rgba(20, 32, 58, 0.08);
}
.dk-natija[hidden] { display: none; }
.dk-natija .motif { width: 48px; height: 48px; color: var(--zafaron); }
.dk-natija h3 {
    font-family: var(--font-display);
    font-size: 1.34rem;
    color: var(--siyoh);
    margin: 10px 0 6px;
}
.dk-ochko { font-family: var(--font-display); font-size: 1.9rem; color: var(--siyoh); margin: 0; }
.dk-ochko b { color: var(--anor); }
.dk-foiz { font-size: 1.02rem; color: var(--ink-2); margin: 2px 0 10px; }
.dk-izoh { color: var(--ink-2); max-width: 52ch; margin: 0 auto 22px; }
.dk-natija-tugma { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.dk-natija.dk-alo { border-color: var(--firuza); }

/* Yorug' fondagi ikkilamchi tugma (platform.css dagi .btn-outline qorong'i uchun) */
.dk-natija .btn-line,
.dk-boshla .btn-line {
    background: var(--paper);
    color: var(--siyoh);
    border-color: var(--line);
}
.dk-natija .btn-line:hover,
.dk-boshla .btn-line:hover { background: var(--stone); border-color: var(--siyoh); }

/* ===== Boshlash oynasi =====
   Rasmli testdagi bilan bir xil: xiralik ustidagi pardaga `backdrop-filter`
   bilan beriladi. Mazmunning O'ZIGA `filter` qo'yilsa, u `position: fixed`
   uchun yangi tayanch blok yasab, navbar va soatni joyidan siljitardi. */
.dk-parda {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(20, 32, 58, 0.55);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    animation: dk-parda-kir 0.28s ease-out;
}
.dk-parda[hidden] { display: none; }
@keyframes dk-parda-kir { from { opacity: 0; } to { opacity: 1; } }

.dk-boshla {
    width: min(560px, 100%);
    max-height: 100%;
    overflow-y: auto;
    background: var(--paper);
    border-radius: var(--r-lg);
    box-shadow: 0 24px 70px rgba(20, 32, 58, 0.42);
    padding: 40px 38px 34px;
    text-align: center;
    animation: dk-boshla-kir 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes dk-boshla-kir {
    from { opacity: 0; transform: translateY(18px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}
.dk-boshla .motif { width: 52px; height: 52px; color: var(--zafaron); }
.dk-boshla h2 {
    font-family: var(--font-display);
    font-size: 1.62rem;
    color: var(--siyoh);
    margin: 10px 0 8px;
}
.dk-boshla-lede { color: var(--ink-2); margin: 0 auto 22px; max-width: 42ch; }
.dk-qoida {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    text-align: left;
    display: grid;
    gap: 10px;
}
.dk-qoida li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.97rem;
    color: var(--ink-2);
    line-height: 1.5;
}
.dk-qoida li::before {
    content: '';
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--firuza);
}
.dk-qoida b { color: var(--ink); }
.dk-ogoh {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding: 12px 16px;
    margin-bottom: 24px;
    border-radius: var(--r-sm);
    background: rgba(232, 160, 42, 0.13);
    border: 1px solid rgba(232, 160, 42, 0.42);
    color: var(--ink);
    font-size: 0.94rem;
}
.dk-ogoh svg { flex-shrink: 0; color: var(--zafaron); }
.dk-boshla-tugma { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.dk-boshla-tugma .btn { font-size: 1.04rem; padding: 14px 30px; }

@media (max-width: 900px) {
    .dk-rasmlar { grid-template-columns: repeat(2, 1fr); }
    .dk-rasm-quti { height: 130px; }
    .dk-qadam-nomi { display: none; }
    .dk-qadam { flex: 0 0 auto; justify-content: center; }
}

@media (max-width: 660px) {
    .dk-yolak { top: 67px; }
    .dk-savol { padding: 18px 16px; }
    .dk-savol-bosh { flex-wrap: wrap; gap: 10px; }
    .dk-savol-bosh h3 { flex-basis: 100%; order: 3; font-size: 1.02rem; }
    .dk-qator { flex-wrap: wrap; gap: 8px 12px; }
    .dk-yorliq { flex-basis: 100%; }
    .dk-tekshir { width: 100%; margin-left: 0; justify-content: center; }
    .dk-boshla { padding: 30px 22px 26px; }
    .dk-boshla h2 { font-size: 1.36rem; }
    .dk-boshla-tugma .btn { width: 100%; }
}

/* Chop etish uchun: boshqaruv va tugmalar chiqmaydi */
@media print {
    .topbar, .footer, .dk-yolak, .dk-natija-tugma, .skip-link,
    .dk-soat, .dk-parda { display: none !important; }
    .dk-savol { break-inside: avoid; box-shadow: none; }
    .dk-bosqich[hidden] { display: block !important; }
    .dk-head { background: none; color: var(--ink); }
}

/* =========================================================
   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. */
.dk-fakt li {
    background: #fff;
    border: 1px solid #DCE9F6;
    color: #50688A;
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 600;
}

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

/* Boshlash pardasi va tugmalar */
.dk-boshla {
    border-radius: 24px;
    border: 1px solid #DCE9F6;
}

.dk-boshla h2 { font-family: 'Fredoka', 'Nunito', system-ui, sans-serif; font-weight: 600; }

/* DIQQAT: `.dk-boshla-tugma` — tugma emas, tugmalar turadigan flex KONTEYNER
   (yuqorida `display:flex` bilan). Tugmaning o'zi `#dk-boshla-tugma` (id). Ilgari
   konteyner bo'yalib, ikkala tugma ostida ko'k tabletka chiqib qolgan edi. */
#dk-boshla-tugma,
.dk-tekshir,
/* `.dk-natija-tugma` ham konteyner — ichidagi asosiy tugma bo'yaladi. */
.dk-natija-tugma .btn-solid {
    border-radius: 999px;
    background: #2E7DE0;
    border-color: #2E7DE0;
    color: #fff;
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 800;
    box-shadow: 0 4px 0 #1F5FAF;
}

#dk-boshla-tugma:hover,
.dk-tekshir:hover,
.dk-natija-tugma .btn-solid:hover {
    background: #1F5FAF;
    border-color: #1F5FAF;
    box-shadow: 0 6px 0 #17497F;
}

#dk-boshla-tugma:active,
.dk-tekshir:active,
.dk-natija-tugma .btn-solid:active { box-shadow: 0 1px 0 #1F5FAF; }

/* Karta juftligi ham yorqin registrda. Ichkaridagi rasm
   qutilari SOF OQ bo'lib qoladi — ularga tegilmaydi. */
:root {
    --shaftoli: #FEF3E2;
    --pudina: #E6F4E7;
}


/* =========================================================
   SAHNA — Texnologik diktant
   =========================================================
   Mijoz sahifalar "juda ochiq va bo'sh" dedi. Mashq sahifalarida
   (style.css) sahna allaqachon bor; bu blok shu sahifani ham
   o'sha ko'rinishga keltiradi.

   QATLAMLAR: body foni (sahna) -> body::before (parda + yon
   anjomlar) -> sahifa mazmuni -> body::after (bolalar).
   Navbar va footer shaffof emas, shuning uchun ular sahnani
   yopib turadi va o'z ko'rinishini saqlaydi.
   ========================================================= */
body.pf {
    background-color: #DCEEFB;
    background-image: url('/static/img/sahna/tong.svg');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body.pf::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: 1;
    pointer-events: none;
    background-image:
        url('/static/img/sahna/anjom/chizgich.svg'),
        url('/static/img/sahna/anjom/turna.svg'),
        url('/static/img/sahna/anjom/ip.svg'),
        url('/static/img/sahna/anjom/kubik.svg'),
        linear-gradient(180deg,
            rgba(255, 255, 255, .08) 0%,
            rgba(255, 255, 255, .40) 20%,
            rgba(255, 255, 255, .44) 80%,
            rgba(255, 255, 255, .12) 100%);
    background-repeat: no-repeat;
    background-size: 118px, 102px, 112px, 88px, cover;
    background-position:
        left 34px top 26%,
        left 66px top 68%,
        right 38px top 32%,
        right 70px top 74%,
        center;
    animation: dk-suzsin 9s ease-in-out infinite alternate;
}

@keyframes dk-suzsin {
    from { background-position: left 34px top 26%, left 66px top 68%,
                                 right 38px top 32%, right 70px top 74%, center; }
    to   { background-position: left 44px top 28%, left 56px top 65%,
                                 right 48px top 30%, right 60px top 77%, center; }
}

/* Burchakdagi bolalar — mijozning o'z illyustratsiyasi, oq foni
   kesilgan nusxa. `z-index: -1` bo'lgani uchun mazmun kartalari
   uning ustidan o'tadi va matnni to'smaydi. */
body.pf::after {
    content: '';
    position: fixed;
    left: 16px;
    bottom: 0;
    z-index: -1;
    width: 200px;
    height: 282px;
    background: url('/static/img/sahna/bolalar.png') no-repeat left bottom / contain;
    filter: drop-shadow(0 8px 14px rgba(20, 50, 90, .22));
    pointer-events: none;
    animation: dk-bola 6s ease-in-out infinite alternate;
}

@keyframes dk-bola {
    from { transform: translateY(0)     rotate(0deg); }
    to   { transform: translateY(-10px) rotate(-1.2deg); }
}

/* Sahna ustida turgan mazmun aniq ko'rinishi uchun sarlavha
   lentasi va kartalar allaqachon shaffof emas — ularga tegilmaydi. */

@media (max-width: 1300px) {
    body.pf::before {
        background-image: linear-gradient(180deg,
            rgba(255, 255, 255, .08) 0%,
            rgba(255, 255, 255, .48) 20%,
            rgba(255, 255, 255, .52) 80%,
            rgba(255, 255, 255, .14) 100%);
        background-size: cover;
        background-position: center;
        animation: none;
    }
    body.pf::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    body.pf::before, body.pf::after { animation: none; }
}

@media print {
    body.pf { background: #fff; }
    body.pf::before, body.pf::after { display: none; }
}


/* =========================================================
   BESH RANGLI SAVOL KARTALARI
   =========================================================
   Ilgari ikki tus navbatlashardi. Mijoz butun sayt bo'ylab
   kartalar rangli bo'lishini so'radi, shuning uchun bu yerda
   ham beshtalik aylana — sayt qolgan qismidagi bilan bir xil
   ritm (material kartalari, test savollari, krossvord izohlari).

   IKKI CHEKLOV SAQLANADI:
     - ichkaridagi rasm qutisi SOF OQ bo'lib qoladi (rasmlar
       oq fonga tekislangan, boshqa tus atrofida oq ramka
       chiqarib yuboradi);
     - variant/qator fonlari `rgba(255,255,255,...)` — ular
       kartaning rangidan ochroq bo'lib ko'rinadi.
   ========================================================= */
.dk-savol:nth-of-type(5n+1) { background: #E9F7EC; }
.dk-savol:nth-of-type(5n+2) { background: #E6F1FD; }
.dk-savol:nth-of-type(5n+3) { background: #FEF3E0; }
.dk-savol:nth-of-type(5n+4) { background: #FDEBF3; }
.dk-savol:nth-of-type(5n+5) { background: #EFE9FE; }