/* ============================================================
Arabiy.uz -- style.css -- DIZAYN TIZIMI (QOIDA 75)
------------------------------------------------------------
Uslub: zamonaviy arab tili akademiyasi. To'q ko'k (asosiy) +
yashil (ikkinchi daraja, faol holat, to'g'ri javob) + juda kam
oltin (urg'u). Rang nisbati taxminan 70% neytral / 20% ko'k /
7% yashil / 3% oltin -- oltin katta yuzalarni EGALLAMAYDI.
Gradient YO'Q, neon YO'Q, qattiq soya YO'Q. Soya juda yengil,
faqat karta ko'tarilganda sal kuchayadi.
Islimiy naqsh faqat ikki joyda va 4-6% shaffoflikda: sarlavha
ostidagi ingichka chiziq va bosh sahifadagi salom bloki --
butun fon naqsh bilan to'ldirilsa matn o'qilmay qoladi.
Mobil birinchi navbatda: asosiy qoidalar telefon uchun yozilgan,
katta ekran uchun pastda @media bilan qo'shiladi.
============================================================ */
/* ============================================================
1. SHRIFT (QOIDA 32, 75 · ARABCHA-TEXNIKA 5)
------------------------------------------------------------
Ikkita oila -- ko'p emas: Inter (interfeys) va Noto Naskh (arabcha).
Shriftlar fonts\ papkasidan yuklanadi, CDN dan EMAS -- sayt
internetsiz ham ishlashi kerak (QOIDA 19).
Arabcha uchun Naskh tanlandi (Sans emas): darslik va lug'atda
harakat aynan shu uslubda joylashadi, o'quvchi kitobda ko'rgan
shakl bilan ekrandagisi bir xil bo'lishi kerak.
============================================================ */
@font-face{
font-family:"Inter";
src:url("fonts/Inter.woff2") format("woff2");
font-weight:400 700;
font-display:swap; /* shrift kech kelsa ham matn ko'rinib turadi */
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,
U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
/* Kengaytirilgan lotin: o'zbekcha "o'" va "g'" belgilariga kerak */
font-family:"Inter";
src:url("fonts/InterExt.woff2") format("woff2");
font-weight:400 700;
font-display:swap;
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
font-family:"NotoNaskh";
src:url("fonts/NotoNaskhArabic.woff2") format("woff2");
font-weight:400 700;
font-display:swap;
}
@font-face{
font-family:"Amiri";
src:url("fonts/Amiri.woff2") format("woff2");
font-weight:400;
font-display:swap;
}
/* ============================================================
2. RANG O'ZGARUVCHILARI (QOIDA 75)
------------------------------------------------------------
Rang faqat shu yerda yoziladi. Boshqa joyda to'g'ridan-to'g'ri
"#RRGGBB" yozilsa qorong'u rejim jimgina buziladi.
Uch rangning VAZIFASI ajratilgan -- shuning uchun uchtasi uchta
o'zgaruvchi:
--asos to'q ko'k -- brend, tugma, sarlavha, arabcha matn
--yashil yashil -- faol holat, to'g'ri javob, grammatik urg'u
--oltin oltin -- qoida bloki, muhim belgi, naqsh (JUDA KAM)
============================================================ */
:root{
/* --- fon va yuzalar --- */
--fon:#F8FAFC;
--yuza:#FFFFFF;
--yuza2:#F1F5F9;
--krem:#FFFBF2; /* faqat arabcha qoida bloklari uchun */
--chiziq:#E2E8F0;
--chiziq-kuchli:#CBD5E1;
/* --- matn --- */
--matn:#17212B; /* asosiy matn */
--matn2:#64748B; /* izoh, metadata */
--matn-kuchli:#0F172A; /* H1 -- qop-qora (#000) ISHLATILMAYDI */
--oq:#FFFFFF;
/* --- asosiy: to'q ko'k --- */
--asos:#173B57;
--asos-qora:#0F2A3D; /* hover va kuchli urg'u */
--asos-och:#E9EFF4; /* ko'k fonli yengil belgi */
/* --- ikkinchi daraja: yashil --- */
--yashil:#176B5B;
--yashil-qora:#125649;
--yashil-och:#E8F2EF;
--yashil-och2:#D8EAE4; /* ikkinchi tugma hover */
/* --- urg'u: oltin --- */
--oltin:#C99A3D;
--oltin-och:#FBF2DF;
/* --- semantik (faqat o'z ma'nosi uchun) --- */
--xavf:#DC2626;
--ogoh:#D97706;
--info:#2563EB;
/* --- tugma matni: qorong'u rejimda ko'k ochroq bo'ladi,
ustidagi yozuv esa to'q bo'lishi kerak --- */
--tugma-matn:#FFFFFF;
/* Jins va bob rangi. Rangga YOLG'IZ tayanilmaydi (QOIDA 36) */
--jins-m:#2563EB;
--jins-f:#DC2626;
--jins-pl:#A16207;
--ar-font:"NotoNaskh","Amiri","Traditional Arabic","Segoe UI",serif;
--uz-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
/* Raqamlar uchun alohida shrift OLINMAYDI (QOIDA 75: 2 oila yetadi) --
Inter ning tabular raqamlari ishlatiladi, ustunlar baribir tekis turadi */
--mono-font:var(--uz-font);
/* Arabcha matn o'lchami sozlamadan boshqariladi */
--ar-olcham:1;
/* Butun saytdagi yozuv o'lchami (QOIDA 135).
NEGA px o'lchamlar calc() ichiga o'raldi, `zoom` yoki html{font-size}
emas: zoom yon panel va yopishgan sarlavhaning o'lchamini ham
buzadi, html{font-size} esa px bilan yozilgan 179 ta qoidaga
umuman ta'sir qilmaydi. em bilan yozilganlari o'ralmagan --
ular ota elementdan meros olib, o'zi kattalashadi (aks holda
ikki marta ko'payib ketardi).
Arabcha o'lcham ALOHIDA qoladi: ikkalasi ko'paytiriladi, ya'ni
o'quvchi umumiy yozuvni kattalashtirsa arabchasi ham o'zi bilan
kattalashadi, ustiga yana arabchani alohida sozlashi mumkin. */
--matn-olcham:1;
--radius:12px; /* tugma, maydon, kichik element */
--radius-karta:16px; /* karta va panel */
--radius-kichik:8px;
--yon-en:248px;
--bosh-balandlik:60px;
/* Soya juda yengil: "premium va toza" kerak, "qalqib turgan" emas */
--soya:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.05);
--soya-kuchli:0 6px 16px rgba(15,23,42,.09), 0 2px 5px rgba(15,23,42,.05);
/* --- HERO ranglari (QOIDA 106, QOIDA 107) ---
NEGA endi mustaqil rang emas: to'q ko'k gradient hero ni saytdan
ajratib turgan alohida "banner" qilib qo'ygan edi. Endi har bir
hero rangi sayt tizimidagi rangga HAVOLA qiladi — shuning uchun
qorong'u rejimda alohida yozilishi ham kerak emas: var() qiymati
ishlatilgan joyda hisoblanadi, --matn/--fon o'zgarsa hero ham
o'zi bilan o'zgaradi. */
--hero-fon3:var(--fon);
--hero-nur:var(--asos-och); /* markazdan tushadigan yumshoq nur */
--hero-matn:var(--matn-kuchli);
--hero-matn2:var(--matn2);
--hero-chiziq:var(--chiziq);
--hero-harf:var(--asos); /* fondagi suzuvchi harflar */
--hero-oltin:var(--oltin);
}
/* Qorong'u rejim -- ikki joyda bir xil yoziladi: tizim so'ragan holat
va foydalanuvchi qo'lda tanlagan holat. */
@media (prefers-color-scheme:dark){
:root[data-tema="auto"]{
--fon:#0B1220;
--yuza:#111C2E;
--yuza2:#16233A;
--krem:#1B2233;
--chiziq:#243247;
--chiziq-kuchli:#33425C;
--matn:#F8FAFC;
--matn2:#94A3B8;
--matn-kuchli:#F8FAFC;
--asos:#4F8FB5;
--asos-qora:#6EA8C9;
--asos-och:#152738;
--yashil:#3FA58F;
--yashil-qora:#57BCA6;
--yashil-och:#12302B;
--yashil-och2:#1A3F38;
--oltin:#D6AD55;
--oltin-och:#2C2517;
--xavf:#F27272;
--ogoh:#E0A34A;
--info:#7FA8FF;
--tugma-matn:#0B1220;
--jins-m:#7FA8FF;
--jins-f:#FF908A;
--jins-pl:#E0B23C;
--soya:0 1px 2px rgba(0,0,0,.35);
--soya-kuchli:0 6px 18px rgba(0,0,0,.45), 0 2px 5px rgba(0,0,0,.3);
}
}
:root[data-tema="qora"]{
--fon:#0B1220;
--yuza:#111C2E;
--yuza2:#16233A;
--krem:#1B2233;
--chiziq:#243247;
--chiziq-kuchli:#33425C;
--matn:#F8FAFC;
--matn2:#94A3B8;
--matn-kuchli:#F8FAFC;
--asos:#4F8FB5;
--asos-qora:#6EA8C9;
--asos-och:#152738;
--yashil:#3FA58F;
--yashil-qora:#57BCA6;
--yashil-och:#12302B;
--yashil-och2:#1A3F38;
--oltin:#D6AD55;
--oltin-och:#2C2517;
--xavf:#F27272;
--ogoh:#E0A34A;
--info:#7FA8FF;
--tugma-matn:#0B1220;
--jins-m:#7FA8FF;
--jins-f:#FF908A;
--jins-pl:#E0B23C;
--soya:0 1px 2px rgba(0,0,0,.35);
--soya-kuchli:0 6px 18px rgba(0,0,0,.45), 0 2px 5px rgba(0,0,0,.3);
}
/* ============================================================
3. ASOS
============================================================ */
/* QOIDA 20 -- BU QATOR O'CHIRILMAYDI.
JS elementlarni el.hidden = true bilan yashiradi. Lekin element
ustida display:grid yoki display:flex tursa, brauzerning o'z
[hidden] qoidasi kuchsiz qoladi va modal umuman yopilmaydi. */
[hidden]{ display:none !important; }
*,*::before,*::after{ box-sizing:border-box; }
html{
background:var(--fon);
color-scheme:light;
}
:root[data-tema="qora"]{ color-scheme:dark; }
@media (prefers-color-scheme:dark){ :root[data-tema="auto"]{ color-scheme:dark; } }
body{
margin:0;
background:var(--fon);
color:var(--matn);
font-family:var(--uz-font);
font-size:calc((16px) * var(--matn-olcham));
line-height:1.55;
-webkit-text-size-adjust:100%;
}
body.modal-ochiq{ overflow:hidden; }
/* Sarlavhalarda qop-qora (#000) ISHLATILMAYDI -- ekranda qattiq
ko'rinadi va matn bilan sarlavha orasidagi farq yo'qoladi (QOIDA 75) */
h1,h2,h3{ line-height:1.28; margin:0 0 .5em; font-weight:650;
letter-spacing:-.011em; color:var(--matn-kuchli); }
h2,h3{ color:var(--asos); }
p{ margin:0 0 .8em; }
a{ color:var(--asos); }
/* Interfeysda g'arbcha raqam (QOIDA 34). tabular-nums -- raqamlar bir
xil enlikda bo'ladi, ustunlar sakramaydi (mono shrift o'rniga, QOIDA 75) */
.son,.hisob,.progress-yozuv,.karta-holat,.yon-holat{
font-family:var(--mono-font);
font-variant-numeric:tabular-nums;
font-feature-settings:"tnum" 1;
}
/* Klaviatura bilan yurgan odam qayerdaligini ko'rsin */
:focus-visible{
outline:2px solid var(--asos);
outline-offset:2px;
border-radius:4px;
}
/* Klaviatura foydalanuvchisi uchun -- menyuni o'tkazib yuborish */
.otkaz{
position:absolute; left:-9999px; top:0; z-index:100;
background:var(--asos); color:var(--oq); padding:.6em 1em;
border-radius:0 0 var(--radius) 0;
}
.otkaz:focus{ left:0; }
/* ============================================================
4. ARABCHA MATN (QOIDA 25, 33 · ARABCHA-TEXNIKA 1, 2)
------------------------------------------------------------
Butun sahifa RTL QILINMAYDI -- interfeys o'zbekcha, LTR.
Faqat arabcha parcha buriladi.
unicode-bidi:isolate -- ENG MUHIM QATOR: usiz arabcha va lotincha
matn bitta bidi oqimi hisoblanadi va qavs, nuqta, tire noto'g'ri
tomonga tashlanadi.
============================================================ */
.ar{
direction:rtl;
unicode-bidi:isolate;
font-family:var(--ar-font);
/* arabcha lotinchadan kichik ko'rinadi -- kattalashtiriladi;
line-height:2 -- harakat harfning ustiga chiqadi, joy kerak */
font-size:calc(1.22em * var(--ar-olcham));
line-height:2;
/* QOIDA 48: uzun so'z 375px ekranni yorib chiqmasin */
min-width:0;
overflow-wrap:anywhere;
}
/* Kiritish maydoni: arabcha yozilsa o'zi o'ngga buriladi */
.ar-input{ font-family:var(--ar-font); }
.ar-input:placeholder-shown{ font-size:calc((15px) * var(--matn-olcham)); }
/* ============================================================
5. SARLAVHA (header)
============================================================ */
/* Navbar past va minimal: balandligi 60px, faqat bitta yengil chiziq.
Soya YO'Q -- pastdagi naqsh chizig'i o'zi ajratib turadi. */
.bosh{
position:sticky; top:0; z-index:30;
display:flex; align-items:center; gap:10px;
height:var(--bosh-balandlik);
padding:0 14px;
background:var(--yuza);
border-bottom:1px solid var(--chiziq);
}
.logo{
display:flex; align-items:baseline; gap:9px;
text-decoration:none; color:var(--asos);
margin-right:auto;
min-width:0;
}
.logo-ar{ font-size:calc(1.35em * var(--ar-olcham)); color:var(--asos); line-height:1; }
.logo-uz{ font-weight:700; letter-spacing:-.02em; font-size:calc((18px) * var(--matn-olcham)); }
.logo-nuqta{ color:var(--oltin); }
.ikon-tugma{
display:inline-flex; align-items:center; justify-content:center;
width:40px; height:40px; flex:0 0 auto;
padding:0; border:1px solid transparent; border-radius:var(--radius);
background:transparent; color:var(--asos); cursor:pointer;
transition:background .15s ease, border-color .15s ease;
}
.ikon-tugma:hover{ background:var(--yuza2); border-color:var(--chiziq); }
.ikon-tugma.kichik{ width:32px; height:32px; }
.ikon-tugma[disabled]{ opacity:.45; cursor:not-allowed; }
/* Bir chiziqli SVG ikonkalar -- emoji ishlatilmaydi (PROMT 8) */
svg{
width:22px; height:22px;
fill:none; stroke:currentColor; stroke-width:1.6;
stroke-linecap:round; stroke-linejoin:round;
}
/* Tema tugmasi: yorug'da oy, qorong'uda quyosh ko'rinadi */
.ikon-oy{ display:none; }
:root[data-tema="qora"] .ikon-quyosh{ display:none; }
:root[data-tema="qora"] .ikon-oy{ display:inline-block; }
@media (prefers-color-scheme:dark){
:root[data-tema="auto"] .ikon-quyosh{ display:none; }
:root[data-tema="auto"] .ikon-oy{ display:inline-block; }
}
/* Islimiy naqsh chizig'i -- navbar ostidagi 3px li nozik urg'u.
Oltin JUDA kam ishlatiladi (QOIDA 75), shuning uchun bu yerda
u faqat ingichka chiziq bo'lib qoladi, katta yuza emas.
SVG fayl sifatida emas, data URI: qo'shimcha so'rov bo'lmasin
va internetsiz ham chizilsin (QOIDA 19). */
.naqsh{
height:3px;
background-color:var(--oltin);
background-image:url("data:image/svg+xml;utf8,");
background-repeat:repeat-x;
background-size:24px 3px;
}
/* ============================================================
6. QOBIQ VA YON MENYU
============================================================ */
.qobiq{ display:block; }
.yon{
position:fixed; z-index:25;
top:calc(var(--bosh-balandlik) + 6px); left:0; bottom:0;
width:var(--yon-en);
padding:12px 10px;
background:var(--yuza);
border-right:1px solid var(--chiziq);
transform:translateX(-100%);
/* visibility:hidden -- menyu ekrandan tashqarida turganda klaviatura
bilan unga TUSHIB qolmasin. Faqat transform bilan yashirilsa
havolalar ko'rinmasa ham Tab bilan tanlanaveradi va foydalanuvchi
"fokus qayoqqa ketdi?" degan holatga tushadi.
visibility 0s .18s -- yopilish animatsiyasi tugagach yashiriladi. */
visibility:hidden;
transition:transform .18s ease, visibility 0s linear .18s;
overflow-y:auto;
}
.yon.ochiq{
transform:translateX(0);
visibility:visible;
transition:transform .18s ease, visibility 0s;
}
/* Faol bo'lim yashil bilan belgilanadi (QOIDA 75): chap tomonda 3px
yashil ko'rsatkich + yengil yashil fon. Ko'k asosiy tugmalarga
qoladi, shunda "qayerdaman" va "nima bosaman" aralashmaydi. */
.yon-havola{
position:relative;
display:flex; align-items:center; gap:10px;
padding:10px 12px; margin-bottom:3px;
border:1px solid transparent; border-radius:var(--radius);
color:var(--matn); text-decoration:none;
font-size:calc((14.5px) * var(--matn-olcham));
min-width:0;
transition:background .15s ease, color .15s ease;
}
.yon-havola:hover{ background:var(--yuza2); }
.yon-havola.faol{
background:var(--yashil-och);
border-color:transparent;
color:var(--yashil);
font-weight:650;
}
.yon-havola.faol::before{
content:""; position:absolute; left:0; top:8px; bottom:8px;
width:3px; border-radius:0 3px 3px 0;
background:var(--yashil);
}
.yon-havola svg{ flex:0 0 auto; color:var(--asos); }
.yon-havola.faol svg{ color:var(--yashil); }
.yon-havola > span:not(.yon-holat){ min-width:0; overflow-wrap:anywhere; }
.yon-holat{
margin-left:auto; flex:0 0 auto;
font-size:calc((11px) * var(--matn-olcham)); color:var(--matn2);
background:var(--yuza2);
border:1px solid var(--chiziq); border-radius:999px;
padding:1px 7px;
}
.perde{
position:fixed; inset:0; z-index:24;
background:rgba(15,23,42,.5);
}
.asos{
padding:16px 14px 48px;
max-width:980px;
/* width:100% SHART: .asos katta ekranda grid katakchasi bo'lib
turadi, `margin:0 auto` esa grid da `stretch` ni BEKOR qiladi --
natijada ustun kengligi 698px bo'lsa ham asosiy qism ichidagi
eng keng elementga qarab torayib qolardi. Bu faqat ichi tor
ekranda ko'rinardi (takror kartochkasi) va o'quvchi buni
"sayt buzuq" deb tushunardi. */
width:100%;
margin:0 auto;
}
/* ============================================================
7. UMUMIY ELEMENTLAR
============================================================ */
.ekran-sarlavha{
display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
margin-bottom:16px;
padding-bottom:12px;
border-bottom:1px solid var(--chiziq);
}
.ekran-sarlavha .ar{ color:var(--asos); font-size:calc(1.5em * var(--ar-olcham)); }
.ekran-uz{ font-size:calc((20px) * var(--matn-olcham)); color:var(--matn2); font-weight:500; }
.bolim-sarlavha{
font-size:calc((13px) * var(--matn-olcham)); text-transform:uppercase; letter-spacing:.08em;
color:var(--matn2); font-weight:700;
margin:28px 0 12px;
}
/* Asosiy tugma -- to'q ko'k, gradientsiz (QOIDA 75) */
.tugma{
display:inline-flex; align-items:center; justify-content:center; gap:7px;
padding:10px 16px; min-height:42px;
border:1px solid var(--asos); border-radius:var(--radius);
background:var(--asos); color:var(--tugma-matn);
font-family:inherit; font-size:calc((14px) * var(--matn-olcham)); font-weight:600;
text-decoration:none; /* tugma bo'lishi ham mumkin (hero CTA) */
cursor:pointer;
transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.tugma svg{ width:18px; height:18px; }
.tugma:hover{ background:var(--asos-qora); border-color:var(--asos-qora); }
.tugma[disabled]{ opacity:.5; cursor:not-allowed; }
/* Ikkinchi daraja -- yengil yashil fon, yashil yozuv */
.tugma-ikkinchi{
background:var(--yashil-och); color:var(--yashil); border-color:transparent;
}
.tugma-ikkinchi:hover{ background:var(--yashil-och2); border-color:transparent; }
.tugma-ikkinchi.bosilgan{
background:var(--yashil); border-color:var(--yashil); color:var(--tugma-matn);
}
/* Uchinchi daraja -- faqat chegara, foni yo'q */
.tugma-chiziq{
background:transparent; color:var(--asos); border-color:var(--asos);
}
.tugma-chiziq:hover{ background:var(--asos-och); border-color:var(--asos); color:var(--asos); }
.tugma-kichik{ padding:5px 12px; min-height:32px; font-size:calc((13px) * var(--matn-olcham)); }
.tugma-xavf{ background:transparent; color:var(--xavf); border-color:var(--xavf); }
.tugma-xavf:hover{ background:var(--xavf); color:var(--oq); border-color:var(--xavf); }
/* QOIDA 41: bo'sh ekran izohsiz qoldirilmaydi.
Shu blok ayni paytda GRAMMATIKA QOIDASI kartochkasi ham:
krem fon + chapda 4px oltin chiziq (QOIDA 75, 8-band). */
.bosh-holat{
border:1px solid var(--chiziq);
border-left:4px solid var(--oltin);
border-radius:var(--radius-karta);
background:var(--krem);
padding:16px 18px;
color:var(--matn2);
}
.bosh-holat b{ color:var(--asos); }
.bosh-holat p:last-child{ margin-bottom:0; }
.bosh-holat code{
font-family:var(--mono-font); font-size:calc((13px) * var(--matn-olcham));
background:var(--yuza2); padding:1px 5px; border-radius:6px;
}
.ogoh{
border:1px solid var(--chiziq); border-left:4px solid var(--ogoh);
border-radius:var(--radius-karta);
background:var(--yuza); color:var(--matn);
padding:12px 16px; margin-bottom:14px;
}
.hisob{ color:var(--matn2); font-size:calc((13px) * var(--matn-olcham)); margin:10px 0 8px; }
/* ============================================================
8. BOSH SAHIFA
============================================================ */
/* ------------------------------------------------------------
HERO — KIRISH QISMI (QOIDA 106)
Saytdagi YAGONA gradientli yuza. QOIDA 75 «gradient yo'q» deydi
va u kuchda qoladi: qolgan hamma sahifa tekis. Faqat birinchi
ekran mijoz brifi bo'yicha to'q gradient qilindi — u sotuvchi
yuza, o'qish yuzasi emas.
Rang ikkala rejimda BIR XIL: hero yorug' rejimda ham to'q turadi,
aks holda «premium kirish» taassuroti kunduzi yo'qoladi.
------------------------------------------------------------ */
.salom{
position:relative; overflow:hidden; isolation:isolate;
/* Chegara YO'Q va burchak yumaloqlanmaydi: chegara hero ni «karta»
qilib ko'rsatadi, karta esa saytdan ajralib turadi. Fon sahifa
foni bilan BIR XIL, ustiga faqat markazdan zo'rg'a sezilarli nur
tushadi — shu nur hero ni «boshqa yuza» qilmasdan jonlantiradi. */
border:0; border-radius:0;
background-image:
radial-gradient(130% 90% at 50% -10%, var(--hero-nur), transparent 60%);
background-color:var(--hero-fon3);
color:var(--hero-matn);
padding:56px 20px 44px;
text-align:center;
}
/* --- fon qatlami: suzuvchi harflar va yig'iladigan so'z --- */
.salom-fon{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.salom-ichi{ position:relative; z-index:1; }
/* Harflarni JS joylashtiradi: o'rni, o'lchami, tezligi va siljish
masofasi inline uslub bilan beriladi (--x, --y, --r).
Faqat transform animatsiya qilinadi — u sahifani qayta
hisoblatmaydi, telefonda ham tekin tushadi. */
.salom-harf{
position:absolute; top:0; left:0;
font-family:var(--ar-font); line-height:1;
color:var(--hero-harf);
animation-name:salom-suzish;
animation-timing-function:ease-in-out;
animation-iteration-count:infinite;
animation-direction:alternate;
}
@keyframes salom-suzish{
from{ transform:translate3d(0,0,0) rotate(0deg); }
to { transform:translate3d(var(--x,10px),var(--y,-14px),0) rotate(var(--r,3deg)); }
}
/* ⚠️ .salom-yigin (harf yig'ish animatsiyasi) 2026-08-31 da
MIJOZ SO'ROVI bilan butunlay olib tashlandi (QOIDA 113). */
/* --- brend --- */
.salom-brend{
font-size:calc((clamp(30px,9vw,44px)) * var(--matn-olcham)); font-weight:750;
letter-spacing:-.025em; line-height:1.1;
color:var(--hero-matn);
margin:2px 0 8px;
}
.salom-nuqta{ color:var(--hero-oltin); }
.salom-tag{
font-size:calc((12px) * var(--matn-olcham)); font-weight:600; text-transform:uppercase;
letter-spacing:.16em; color:var(--hero-matn2);
margin:0;
}
/* Brendni hikmatdan ajratadigan ingichka oltin chiziq */
.salom-ajratkich{
width:56px; height:1px; margin:20px auto 18px;
background:linear-gradient(90deg,transparent,var(--hero-oltin),transparent);
opacity:.7;
}
/* --- markazdagi hikmat ---
Katta sarlavha uchun Amiri: an'anaviy nasx, harakat chiroyli
joylashadi (ARABCHA-TEXNIKA 5). Almashinuvi JS dan boshqariladi,
bu yerda faqat o'tishning o'zi yozilgan. */
/* Arabcha hikmat va uning tarjimasi bitta blokda turadi: joy IKKALASI
uchun oldindan ajratiladi, aks holda uzun tarjima kelganda tugmalar
pastga sakraydi (o'lchandi: 1280px va 375px ekranda). */
.salom-hikmat-blok{
min-height:6.6em;
display:grid; align-content:center;
/* «Alifbodan B2 gacha» qatori olib tashlangani uchun (QOIDA 113)
tugmalargacha bo'lgan bo'shliq shu yerdan beriladi */
margin:0 auto 26px;
}
.salom-hikmat{
font-family:"Amiri",var(--ar-font);
font-size:calc((calc(clamp(23px,6.6vw,40px) * var(--ar-olcham))) * var(--matn-olcham));
line-height:1.95; font-weight:400;
color:var(--hero-matn);
margin:0 auto; max-width:22ch;
opacity:1; transform:translateY(0);
transition:opacity 1.1s ease, transform 1.1s ease;
}
/* Tarjima — hikmatdan KICHIK va so'niqroq: u yordam, asosiy matn emas.
Arabchasi bilan birga so'nib, birga qaytadi (bitta «ketdi» sinfi). */
.salom-hikmat-uz{
font-size:calc((14px) * var(--matn-olcham)); font-weight:500; line-height:1.5;
color:var(--hero-matn2);
margin:2px auto 0; max-width:40ch;
opacity:1; transform:translateY(0);
transition:opacity 1.1s ease, transform 1.1s ease;
}
.salom-hikmat.ketdi,.salom-hikmat-uz.ketdi{ opacity:0; transform:translateY(-8px); }
.salom-tugmalar{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
/* Hero tugmalari. Fon endi sayt foni bilan bir xil — shuning uchun
tugmalar ham saytning oddiy tugmalari: asosiysi to'q ko'k, ikkinchisi
faqat chiziq. Farqi faqat o'lchamda: birinchi ekranda ular kattaroq. */
.tugma-hero{
background:var(--asos); border-color:var(--asos);
color:var(--tugma-matn);
padding:13px 26px; min-height:50px; font-size:calc((15px) * var(--matn-olcham));
}
.tugma-hero:hover{
background:var(--asos-qora); border-color:var(--asos-qora);
transform:translateY(-1px);
}
.tugma-hero-chiziq{
background:transparent; color:var(--asos);
border-color:var(--chiziq-kuchli);
padding:13px 22px; min-height:50px; font-size:calc((15px) * var(--matn-olcham));
}
.tugma-hero-chiziq:hover{
background:var(--asos-och);
border-color:var(--asos); color:var(--asos);
}
.tugma-hero,.tugma-hero-chiziq{ transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
/* Hero dan keyingi yorug' qator: oflayn belgisi, o'rnatish tugmasi,
kunlik holat va sonlar (ular to'q fon ustida o'qilmay qolardi). */
.salom-past{ margin-top:16px; }
.salom-past-qator{
display:flex; flex-wrap:wrap; align-items:center; gap:10px;
margin-bottom:14px;
}
/* Afzallik belgisi (oflayn). Kichik, lekin ko'zga tashlanadi:
yashil — saytning "ishlaydi" rangi (QOIDA 75). */
.salom-belgi{
display:inline-flex; align-items:center;
font-size:calc((12px) * var(--matn-olcham)); font-weight:600; color:var(--yashil);
background:var(--yashil-och); border-radius:999px; padding:3px 10px;
}
/* Statistika kataklari: katta raqam birinchi ko'zga tashlanadi */
.son-qatori{ display:flex; flex-wrap:wrap; gap:10px; }
.son-kata,.stat-kata{
flex:1 1 110px; min-width:0;
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--yuza);
padding:12px 14px;
box-shadow:var(--soya);
}
.son{ display:block; font-size:calc((28px) * var(--matn-olcham)); font-weight:750; color:var(--asos);
letter-spacing:-.02em; line-height:1.2; }
.son-nom{ display:block; font-size:calc((12px) * var(--matn-olcham)); color:var(--matn2); overflow-wrap:anywhere; }
.kartalar{ display:grid; grid-template-columns:1fr; gap:12px; }
.karta{
display:block; position:relative;
border:1px solid var(--chiziq); border-radius:var(--radius-karta);
background:var(--yuza); color:var(--matn); text-decoration:none;
padding:18px 20px;
min-width:0;
box-shadow:var(--soya);
transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
/* Hover: karta sal ko'tariladi, soya ozgina kuchayadi -- boshqa hech nima */
.karta:hover{
transform:translateY(-2px);
box-shadow:var(--soya-kuchli);
border-color:var(--chiziq-kuchli);
}
.karta-ar{ display:block; color:var(--asos); font-size:calc(1.35em * var(--ar-olcham)); }
.karta-nom{ display:block; font-weight:700; margin-bottom:4px; color:var(--matn-kuchli); }
.karta-izoh{ display:block; color:var(--matn2); font-size:calc((14px) * var(--matn-olcham)); overflow-wrap:anywhere; }
.karta-holat{
display:inline-block; margin-top:10px;
font-size:calc((11px) * var(--matn-olcham)); font-weight:600; color:var(--matn2);
background:var(--yuza2);
border:1px solid var(--chiziq); border-radius:999px; padding:2px 9px;
}
.karta-tayyor{ color:var(--yashil); border-color:transparent; background:var(--yashil-och); }
/* Katakning pastidagi amal yozuvi. "tayyor" yorlig'i o'rniga qo'yildi:
hamma bo'lim tayyor bo'lgach u yorliq hech qanday ma'lumot bermay
qoldi, "nima qilaman?" degan savolga esa javob kerak edi. */
.karta-amal{
display:inline-block; margin-top:10px;
font-size:calc((13px) * var(--matn-olcham)); font-weight:600; color:var(--yashil);
}
.karta:hover .karta-amal{ color:var(--asos); }
/* ------------------------------------------------------------
BOSH SAHIFA — 2026-11-12 YANGILANISHI (QOIDA 183)
Grammatika asosiy karta, qolgan bo'limlar uch guruhda,
«Qayerdan boshlayman?» uch qadami. Ranglar va o'lchamlar
sayt tizimidagi o'zgaruvchilardan — qorong'u rejim o'zi ishlaydi.
------------------------------------------------------------ */
/* Ikkinchi hero tugmasi xira ko'rinardi (ayniqsa qorong'u rejimda):
endi matni asosiy matn rangida, chizig'i aniqroq */
.tugma-hero-chiziq{ color:var(--matn-kuchli); border-color:var(--chiziq-kuchli); background:var(--yuza); }
.tugma-hero-chiziq:hover{ color:var(--matn-kuchli); }
/* Ikonkali karta: chapda ikonka, o'ngda matn */
#ek-bosh .karta{ display:flex; gap:14px; align-items:flex-start; }
.karta-ikon{
flex:0 0 auto; display:grid; place-items:center;
width:42px; height:42px; border-radius:var(--radius);
background:var(--asos-och); color:var(--asos);
}
.karta-ikon svg{
width:22px; height:22px; fill:none; stroke:currentColor;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.karta-matn{ display:block; min-width:0; flex:1 1 auto; }
#ek-bosh .karta-nom{ font-size:calc((16px) * var(--matn-olcham)); }
#ek-bosh .karta-holat{ margin:0 0 0 6px; vertical-align:2px; }
/* Guruhdagi kartalar: ekran kengligiga qarab 1–3 ustun */
#ek-bosh .kartalar{ grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
/* Asosiy karta — Grammatika: keng, chap tomonida oltin urg'u */
.karta-asosiy{
margin-top:16px; padding:22px 24px;
border-color:var(--chiziq-kuchli);
background-image:linear-gradient(120deg, var(--asos-och), transparent 70%);
background-color:var(--yuza);
box-shadow:inset 4px 0 0 var(--oltin), var(--soya);
}
.karta-asosiy:hover{ box-shadow:inset 4px 0 0 var(--oltin), var(--soya-kuchli); }
.karta-asosiy .karta-ikon{ width:52px; height:52px; background:var(--asos); color:var(--tugma-matn); }
.karta-asosiy .karta-ikon svg{ width:26px; height:26px; }
.karta-asosiy .karta-ar{ font-size:calc(1.6em * var(--ar-olcham)); line-height:1.6; }
#ek-bosh .karta-asosiy .karta-nom{ font-size:calc((20px) * var(--matn-olcham)); }
.karta-asosiy .karta-izoh{ max-width:62ch; }
/* «Qayerdan boshlayman?» — uch raqamli qadam */
.yol-qadamlar{
list-style:none; margin:0; padding:0;
display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px;
}
.yol-qadam{
display:block; height:100%; position:relative;
padding:16px 18px 16px 62px;
border:1px solid var(--chiziq); border-radius:var(--radius-karta);
background:var(--yuza); color:var(--matn); text-decoration:none;
box-shadow:var(--soya);
transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.yol-qadam:hover{ transform:translateY(-2px); box-shadow:var(--soya-kuchli); border-color:var(--chiziq-kuchli); }
.yol-raqam{
position:absolute; left:16px; top:16px;
width:32px; height:32px; border-radius:50%;
display:grid; place-items:center;
font-weight:750; font-size:calc((15px) * var(--matn-olcham));
color:var(--oltin); border:1.5px solid var(--oltin);
}
.yol-nom{ display:block; font-weight:700; color:var(--matn-kuchli); margin-bottom:3px; }
.yol-izoh{ display:block; color:var(--matn2); font-size:calc((13px) * var(--matn-olcham)); }
@media (prefers-reduced-motion:reduce){
.yol-qadam,.yol-qadam:hover{ transition:none; transform:none; }
}
/* ------------------------------------------------------------
GRAMMATIKA — BOSQICH TANLAGICHI, DAVOM ETTIRISH, OLDINGI/KEYINGI
(QOIDA 184, 2026-11-12)
------------------------------------------------------------ */
/* «Davom ettirish» — ro'yxat tepasidagi bitta aniq qadam */
.qd-davom{
display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 14px;
width:100%; text-align:left; cursor:pointer; font:inherit;
margin:4px 0 14px; padding:16px 20px;
border:1px solid var(--chiziq-kuchli); border-radius:var(--radius-karta);
background-image:linear-gradient(120deg, var(--asos-och), transparent 75%);
background-color:var(--yuza); color:var(--matn);
box-shadow:inset 4px 0 0 var(--oltin), var(--soya);
transition:box-shadow .16s ease, transform .16s ease;
}
.qd-davom:hover{ box-shadow:inset 4px 0 0 var(--oltin), var(--soya-kuchli); transform:translateY(-1px); }
.qd-davom-yorliq{
grid-column:1; font-size:calc((12px) * var(--matn-olcham)); font-weight:700;
letter-spacing:.06em; text-transform:uppercase; color:var(--oltin);
}
.qd-davom-nom{ grid-column:1; font-weight:700; color:var(--matn-kuchli);
font-size:calc((16px) * var(--matn-olcham)); overflow-wrap:anywhere; }
.qd-davom-amal{ grid-column:2; grid-row:1 / span 2; font-weight:700; color:var(--yashil); white-space:nowrap; }
.qd-davom-tugadi{ cursor:default; }
/* Bosqich tugmalari: nomi, o'zlashtirilgan/jami va ingichka chiziq */
.qd-bosqich-tanla{
display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:8px;
margin:0 0 6px;
}
.qd-bosqich-tugma{
display:flex; flex-direction:column; align-items:flex-start; gap:2px;
padding:9px 12px 10px; cursor:pointer; font:inherit; text-align:left;
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--yuza); color:var(--matn);
transition:border-color .15s ease, background .15s ease;
}
.qd-bosqich-tugma:hover{ border-color:var(--chiziq-kuchli); }
.qd-bosqich-tugma.faol{ border-color:var(--asos); background:var(--asos-och); box-shadow:inset 0 0 0 1px var(--asos); }
.qd-bosqich-nom{ font-weight:750; color:var(--matn-kuchli); font-size:calc((15px) * var(--matn-olcham)); }
.qd-bosqich-son{ font-size:calc((12px) * var(--matn-olcham)); color:var(--matn2); font-variant-numeric:tabular-nums; }
.qd-bosqich-chiziq{ display:block; width:100%; height:3px; margin-top:4px; border-radius:2px; background:var(--chiziq); overflow:hidden; }
.qd-bosqich-chiziq i{ display:block; height:100%; background:var(--yashil); border-radius:2px; }
.qd-bosqich-tugma.tugagan .qd-bosqich-son{ color:var(--yashil); font-weight:700; }
/* Mavzu sarlavhasidagi bosqich belgisi */
.qd-bosqich-belgi{
display:inline-block; margin-right:4px; padding:1px 8px; border-radius:999px;
font-size:calc((11px) * var(--matn-olcham)); font-weight:700; letter-spacing:.03em;
color:var(--asos); background:var(--asos-och); vertical-align:1px;
}
/* Oldingi / keyingi mavzu */
.qd-qoshni{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.qd-qoshni-tugma{
display:flex; flex-direction:column; gap:2px; min-width:0; text-align:left;
padding:12px 16px; cursor:pointer; font:inherit;
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--yuza); color:var(--matn);
transition:border-color .15s ease;
}
.qd-qoshni-tugma:hover{ border-color:var(--asos); }
.qd-qoshni-kel{ text-align:right; align-items:flex-end; }
.qd-qoshni-yon{ font-size:calc((12px) * var(--matn-olcham)); font-weight:700; color:var(--yashil); }
.qd-qoshni-nom{ font-size:calc((14px) * var(--matn-olcham)); color:var(--matn-kuchli);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
@media (max-width:520px){
/* Telefonda Grammatika manba tablari 4 qatorga tushardi — bitta
suriladigan qator bo'ladi (faqat shu ekranda) */
#ek-qoida .tab-qator{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
scrollbar-width:none; margin-left:-4px; padding-left:4px; }
#ek-qoida .tab-qator::-webkit-scrollbar{ display:none; }
#ek-qoida .tab-tugma{ flex:0 0 auto; white-space:nowrap; overflow-wrap:normal; }
.qd-bosqich-tanla{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.qd-bosqich-tugma{ padding:8px 9px 9px; }
.qd-davom{ grid-template-columns:1fr; }
.qd-davom-amal{ grid-column:1; grid-row:auto; margin-top:4px; }
.qd-qoshni{ grid-template-columns:1fr; }
.qd-qoshni-kel{ text-align:left; align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce){
.qd-davom,.qd-davom:hover{ transition:none; transform:none; }
}
/* ============================================================
9. LUG'AT -- qidiruv va filtrlar
============================================================ */
.qidiruv-qutisi{ margin-bottom:12px; }
.qidiruv-yorliq{
display:block; font-size:calc((13px) * var(--matn-olcham)); color:var(--matn2); margin-bottom:4px;
}
.qidiruv-qator{
display:flex; align-items:center; gap:8px;
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--yuza);
padding:4px 10px;
box-shadow:var(--soya);
transition:border-color .15s ease;
}
.qidiruv-qator:focus-within{ border-color:var(--asos); }
.qidiruv-ikon{ flex:0 0 auto; color:var(--asos); }
.qidiruv-maydon{
flex:1 1 auto; min-width:0;
border:0; background:transparent; color:var(--matn);
font-family:inherit; font-size:calc((17px) * var(--matn-olcham)); /* 16px dan katta: iPhone o'zi kattalashtirmasin */
padding:8px 2px;
outline:none;
}
.qidiruv-maydon::-webkit-search-cancel-button{ display:none; }
.qidiruv-izoh{ font-size:calc((12px) * var(--matn-olcham)); color:var(--matn2); margin:6px 0 0; }
.qidiruv-izoh .ar{ font-size:calc(1.1em * var(--ar-olcham)); }
.filtrlar{
display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end;
}
.filtr{ display:flex; flex-direction:column; gap:3px; flex:1 1 140px; min-width:0; }
.filtr-nom,.sozlama-nom{ font-size:calc((12px) * var(--matn-olcham)); color:var(--matn2); }
select,input[type="range"]{ font-family:inherit; }
select{
width:100%; min-width:0;
padding:9px 11px; min-height:42px;
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--yuza); color:var(--matn);
font-size:calc((14px) * var(--matn-olcham));
}
select:hover{ border-color:var(--chiziq-kuchli); }
.jazr-qator{
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
margin-top:10px; padding:9px 14px;
border:1px solid var(--chiziq); border-left:4px solid var(--oltin);
border-radius:var(--radius);
background:var(--krem);
}
.jazr-nom{ font-size:calc((13px) * var(--matn-olcham)); color:var(--matn2); }
#jazrYozuv .ar{ font-size:calc(1.3em * var(--ar-olcham)); letter-spacing:.1em; }
/* ============================================================
10. LUG'AT -- so'zlar ro'yxati
============================================================ */
.soz-royxat{ list-style:none; margin:0; padding:0; }
.soz{ margin-bottom:6px; }
.soz-tugma{
display:flex; align-items:center; gap:12px;
width:100%; text-align:left;
padding:12px 16px;
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--yuza); color:var(--matn);
font-family:inherit; font-size:calc((15px) * var(--matn-olcham));
cursor:pointer;
box-shadow:var(--soya);
transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.soz-tugma:hover{
border-color:var(--chiziq-kuchli);
transform:translateY(-1px);
box-shadow:var(--soya-kuchli);
}
/* QOIDA 48: min-width:0 bo'lmasa uzun so'z flex qutisini yorib chiqadi */
.soz-chap{ flex:0 0 auto; min-width:0; max-width:52%; }
.soz-ong{ flex:1 1 auto; min-width:0; }
.soz-ar{ display:block; color:var(--asos); font-size:calc(1.35em * var(--ar-olcham)); }
.soz-tr{ display:block; font-size:calc((12px) * var(--matn-olcham)); color:var(--matn2); overflow-wrap:anywhere; }
.soz-uz{ display:block; overflow-wrap:anywhere; }
.soz-belgilar{ display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; }
/* Belgi (badge): foni yengil, yozuvi kontrastli -- to'q fon
ishlatilmaydi (QOIDA 75, 11-band) */
.belgi{
display:inline-flex; align-items:center; gap:4px;
font-size:calc((11px) * var(--matn-olcham)); font-weight:600; line-height:1.7;
border:1px solid var(--chiziq); border-radius:999px;
padding:0 9px;
background:var(--yuza2);
color:var(--matn2);
white-space:nowrap;
}
/* Rang bilan birga HAR DOIM yozuv turadi (QOIDA 36) */
.belgi-m{ color:var(--jins-m); border-color:transparent; background:var(--asos-och); }
.belgi-f{ color:var(--jins-f); border-color:transparent; background:var(--yuza2); }
.belgi-bob{ color:var(--jins-pl); border-color:transparent; background:var(--oltin-och); }
.belgi-ok{ color:var(--yashil); border-color:transparent; background:var(--yashil-och); }
.belgi-yur{ color:var(--oltin); border-color:transparent; background:var(--oltin-och); }
.belgi .ar{ font-size:calc(1em * var(--ar-olcham)); line-height:1.7; }
/* Daraja belgilari: boshlang'ich yashil, o'rta ko'k, yuqori oltin */
.daraja-1{ color:var(--yashil); border-color:transparent; background:var(--yashil-och); }
.daraja-2{ color:var(--asos); border-color:transparent; background:var(--asos-och); }
.daraja-3{ color:var(--oltin); border-color:transparent; background:var(--oltin-och); }
.soz.organilgan .soz-tugma{ border-left:3px solid var(--yashil); }
.soz.sevimli .soz-tugma{ border-right:3px solid var(--oltin); }
/* Kartochka ko'rinishi */
.kartochka-koinish{ display:grid; grid-template-columns:1fr; gap:8px; }
.kartochka-koinish .soz{ margin:0; }
.kartochka-koinish .soz-tugma{
flex-direction:column; align-items:flex-start; gap:4px;
min-height:120px;
}
.kartochka-koinish .soz-chap{ max-width:100%; }
/* ============================================================
11. KARTOCHKA OYNASI (modal)
============================================================ */
.modal{ position:fixed; inset:0; z-index:40; }
.modal-fon{ position:absolute; inset:0; background:rgba(15,23,42,.55); }
.modal-quti{
position:absolute; left:0; right:0; bottom:0;
max-height:88vh; overflow-y:auto;
background:var(--yuza);
border-top:1px solid var(--chiziq);
border-radius:18px 18px 0 0;
padding:20px 18px calc(20px + env(safe-area-inset-bottom));
box-shadow:var(--soya-kuchli);
}
.modal-yopish{ position:absolute; top:8px; right:8px; }
.m-bosh{
border-bottom:1px solid var(--chiziq);
padding-bottom:12px; margin-bottom:12px;
padding-right:44px; /* yopish tugmasi ustiga chiqmasin */
}
/* Arabcha so'z -- kartochkaning asosiy elementi: eng katta va
to'q ko'k rangda (QOIDA 75, 4-band) */
.m-ar{ display:block; font-size:calc(2.2em * var(--ar-olcham)); color:var(--asos); }
.m-tr{ color:var(--matn2); font-size:calc((14px) * var(--matn-olcham)); }
.m-belgilar{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.belgi-turi{ background:var(--yuza2); }
.belgi-dars{ background:var(--yuza2); }
.m-qator{
display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
padding:7px 0;
border-bottom:1px solid var(--chiziq);
}
.m-nom{
flex:0 0 120px; min-width:0;
font-size:calc((12px) * var(--matn-olcham)); color:var(--matn2);
text-transform:uppercase; letter-spacing:.04em;
}
.m-mano{ font-size:calc((17px) * var(--matn-olcham)); }
.m-ing{ color:var(--matn2); font-size:calc((14px) * var(--matn-olcham)); }
.m-tarif{ font-size:calc(1.1em * var(--ar-olcham)); }
.m-tarif-en{ color:var(--matn2); font-size:calc((14px) * var(--matn-olcham)); min-width:0; overflow-wrap:anywhere; }
/* "ko'pligi yo'q" — arabcha emas, izoh matni: kulrang va kichik (QOIDA 94) */
.m-yoq{ color:var(--matn2); font-size:calc((14px) * var(--matn-olcham)); font-style:italic; }
.jazr-tugma{
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--krem); color:var(--matn);
padding:2px 12px; cursor:pointer;
font-family:inherit;
}
.jazr-tugma:hover{ border-color:var(--oltin); }
.jazr-tugma .ar{ letter-spacing:.1em; color:var(--asos); }
/* Misol bloki (QOIDA 75, 9-band): kulrang-ko'k fon, arabchasi ko'k,
tarjimasi kulrang -- misollar bir-biridan aniq ajralib turadi */
.m-misol{
margin-top:14px; padding:14px 16px;
border:1px solid var(--chiziq); border-left:3px solid var(--yashil);
border-radius:var(--radius);
background:var(--yuza2);
}
.m-gap{ display:block; font-size:calc(1.3em * var(--ar-olcham)); color:var(--asos); }
.m-gap-uz{ color:var(--matn2); font-size:calc((14px) * var(--matn-olcham)); margin-top:4px; overflow-wrap:anywhere; }
.modal-tugmalar{
display:flex; flex-wrap:wrap; gap:8px;
margin-top:16px;
}
.modal-tugmalar .tugma{ flex:1 1 130px; }
/* QOIDA 24: ovoz yo'q bo'lsa sabab YOZILADI, tugma jim turmaydi */
.ovoz-izoh{
margin:10px 0 0; font-size:calc((12px) * var(--matn-olcham)); color:var(--matn2);
border-left:2px solid var(--chiziq-kuchli); padding-left:8px;
}
/* ============================================================
12. ALIFBO
============================================================ */
.tab-qator{
display:flex; gap:6px; flex-wrap:wrap;
margin-bottom:16px;
border-bottom:1px solid var(--chiziq);
padding-bottom:10px;
}
/* Faol filtr yashil bilan belgilanadi (QOIDA 75, 3-band) */
.tab-tugma{
padding:9px 15px; min-height:40px;
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--yuza); color:var(--matn2);
font-family:inherit; font-size:calc((14px) * var(--matn-olcham)); font-weight:600;
cursor:pointer;
min-width:0; overflow-wrap:anywhere;
transition:background .15s ease, color .15s ease;
}
.tab-tugma:hover{ background:var(--yuza2); color:var(--matn); }
.tab-tugma.faol{
background:var(--yashil-och); border-color:transparent; color:var(--yashil);
}
.bolim-izoh{
color:var(--matn2); font-size:calc((14px) * var(--matn-olcham));
margin-bottom:12px;
}
.bolim-izoh b{ color:var(--matn); }
.belgilash{
display:flex; align-items:center; gap:8px;
padding:9px 12px; margin-bottom:6px;
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--yuza);
font-size:calc((14px) * var(--matn-olcham)); cursor:pointer;
min-width:0;
}
.belgilash input{ accent-color:var(--yashil); width:17px; height:17px; flex:0 0 auto; }
.belgilash span{ min-width:0; overflow-wrap:anywhere; }
/* Harflar to'ri — mobilda 3 ustun, kengroq ekranda o'zi ko'payadi */
.harf-tori{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(90px, 1fr));
gap:8px;
}
.harf-katak{
position:relative;
display:flex; flex-direction:column; align-items:center; gap:2px;
padding:14px 6px 12px;
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--yuza); color:var(--matn);
font-family:inherit; cursor:pointer;
min-width:0;
box-shadow:var(--soya);
transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.harf-katak:hover{
border-color:var(--chiziq-kuchli);
transform:translateY(-2px); box-shadow:var(--soya-kuchli);
}
.harf-nr{
position:absolute; top:5px; left:8px;
font-family:var(--mono-font); font-variant-numeric:tabular-nums;
font-size:calc((11px) * var(--matn-olcham)); color:var(--matn2);
}
.harf-ar{ font-size:calc(2.2em * var(--ar-olcham)); line-height:1.4; color:var(--asos); }
.harf-nom{ font-size:calc((12px) * var(--matn-olcham)); color:var(--matn2); overflow-wrap:anywhere; }
.harf-belgi{
font-size:calc((10px) * var(--matn-olcham)); font-weight:600; color:var(--oltin);
background:var(--oltin-och);
border:1px solid transparent; border-radius:999px;
padding:1px 7px; margin-top:3px;
}
/* Ulanmaydigan harf ko'zga tashlanib tursin — bu eng adashiladigan joy */
.harf-katak.ulanmas{ border-color:var(--oltin); background:var(--krem); }
/* ---------- harakatlar ---------- */
.harakat-quti{
border:1px solid var(--chiziq); border-radius:var(--radius-karta);
background:var(--yuza);
padding:16px 18px; margin-bottom:10px;
min-width:0;
box-shadow:var(--soya);
}
.harakat-bosh{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
/* Harakat belgisining o'zi -- grammatik urg'u, ya'ni yashil (QOIDA 75) */
.harakat-belgi{
font-size:calc(2em * var(--ar-olcham));
line-height:1.4;
color:var(--yashil);
flex:0 0 auto;
}
.harakat-nom{ display:flex; flex-direction:column; min-width:0; }
.harakat-nom .ar{ font-size:calc(1.2em * var(--ar-olcham)); line-height:1.6; color:var(--asos); }
.harakat-tr{ font-size:calc((12px) * var(--matn-olcham)); color:var(--matn2); }
.belgi-ovoz{
margin-left:auto;
color:var(--yashil); border-color:transparent; background:var(--yashil-och);
font-family:var(--mono-font);
}
.harakat-izoh{ color:var(--matn2); font-size:calc((14px) * var(--matn-olcham)); margin:8px 0 10px; }
.harakat-misol{ display:flex; flex-wrap:wrap; gap:8px; }
.mis-quti{
display:flex; flex-direction:column; align-items:center;
padding:6px 12px;
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--yuza2);
min-width:0;
}
.mis-ar{ font-size:calc(1.35em * var(--ar-olcham)); color:var(--asos); }
.mis-tr{ font-size:calc((12px) * var(--matn-olcham)); color:var(--matn2); overflow-wrap:anywhere; }
.mis-uz{ font-size:calc((12px) * var(--matn-olcham)); overflow-wrap:anywhere; }
/* ---------- oy va quyosh ---------- */
.alq-juft{ display:grid; grid-template-columns:1fr; gap:10px; }
.alq-quti{
border:1px solid var(--chiziq); border-radius:var(--radius-karta);
background:var(--yuza);
padding:16px 18px;
min-width:0;
box-shadow:var(--soya);
}
.alq-sarlavha{
display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
font-size:calc((15px) * var(--matn-olcham)); margin-bottom:6px;
}
.alq-sarlavha .ar{ font-size:calc(1.3em * var(--ar-olcham)); color:var(--asos); }
.alq-izoh{ font-size:calc((13px) * var(--matn-olcham)); color:var(--matn2); }
.alq-misol{
display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
padding:10px 14px; margin:10px 0 12px;
border:1px solid var(--chiziq); border-left:3px solid var(--yashil);
border-radius:var(--radius);
background:var(--yuza2);
}
.alq-misol .ar{ font-size:calc(1.5em * var(--ar-olcham)); color:var(--asos); }
.alq-oq{ font-family:var(--mono-font); font-size:calc((13px) * var(--matn-olcham)); font-weight:600; color:var(--yashil); }
.alq-uz{ font-size:calc((13px) * var(--matn-olcham)); color:var(--matn2); }
.alq-harflar{ display:flex; flex-wrap:wrap; gap:6px; }
.alq-harf{
display:flex; flex-direction:column; align-items:center;
padding:4px 9px;
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--yuza2); color:var(--matn);
font-family:inherit; cursor:pointer;
min-width:0;
}
.alq-harf:hover{ border-color:var(--chiziq-kuchli); background:var(--yuza); }
.alq-harf .ar{ font-size:calc(1.4em * var(--ar-olcham)); line-height:1.3; color:var(--asos); }
.alq-tr{ font-size:calc((10px) * var(--matn-olcham)); color:var(--matn2); }
/* ---------- harf kartochkasi (modal ichi) ---------- */
.hm-nom{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.hm-nom .ar{ font-size:calc(1.3em * var(--ar-olcham)); color:var(--asos); }
.hm-ovoz{ min-width:0; overflow-wrap:anywhere; }
.hm-shakllar{
display:grid; grid-template-columns:repeat(2, 1fr); gap:8px;
margin:12px 0;
}
.shakl-katak{
display:flex; flex-direction:column; align-items:center; gap:2px;
padding:10px 6px;
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--yuza2);
min-width:0;
}
.shakl-nom{
font-size:calc((11px) * var(--matn-olcham)); text-transform:uppercase; letter-spacing:.05em;
color:var(--matn2);
}
.shakl-ar{ font-size:calc(2em * var(--ar-olcham)); line-height:1.5; color:var(--asos); }
.shakl-izoh{ font-size:calc((11px) * var(--matn-olcham)); color:var(--matn2); text-align:center; overflow-wrap:anywhere; }
/* Qoida bloki: krem fon + chapda 4px oltin chiziq (QOIDA 75, 8-band) */
.hm-ogoh{
border:1px solid var(--chiziq); border-left:4px solid var(--oltin);
border-radius:var(--radius);
background:var(--krem);
padding:12px 14px; margin-bottom:12px;
font-size:calc((13px) * var(--matn-olcham));
}
.hm-al{
border:1px solid var(--chiziq); border-left:4px solid var(--oltin);
border-radius:var(--radius);
background:var(--krem);
padding:12px 14px; margin-bottom:12px;
}
.hm-al-nom{ font-size:calc((13px) * var(--matn-olcham)); color:var(--matn2); }
.hm-al-nom .ar{ font-size:calc(1.2em * var(--ar-olcham)); color:var(--asos); }
.hm-al-misol{ margin-top:6px; }
.hm-al-misol .ar{ color:var(--asos); }
.hm-al-oq{ font-family:var(--mono-font); font-size:calc((13px) * var(--matn-olcham)); font-weight:600; color:var(--yashil); }
.hm-misollar{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 4px; }
.hm-yon{
display:flex; align-items:center; justify-content:space-between; gap:8px;
margin-top:14px; padding-top:12px;
border-top:1px solid var(--chiziq);
}
.hm-yon-nr{ font-family:var(--mono-font); font-size:calc((13px) * var(--matn-olcham)); color:var(--matn2); }
/* ============================================================
13. ALIFBO MASHQLARI (ETAP 3)
------------------------------------------------------------
To'g'ri va xato javob RANG bilan ham, YOZUV bilan ham
ko'rsatiladi (QOIDA 36): rang ko'rmaydigan odam uchun tugmada
belgi, pastda esa «To'g'ri» / «Xato» so'zi turadi.
============================================================ */
.mashq-tori{ display:grid; grid-template-columns:1fr; gap:10px; }
.mashq-katak{
display:flex; flex-direction:column; gap:3px;
text-align:left; padding:16px 18px;
border:1px solid var(--chiziq); border-radius:var(--radius-karta);
background:var(--yuza); color:inherit; font:inherit; cursor:pointer;
min-width:0;
box-shadow:var(--soya);
transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.mashq-katak:hover:not([disabled]){
border-color:var(--chiziq-kuchli);
transform:translateY(-2px); box-shadow:var(--soya-kuchli);
}
.mashq-katak[disabled]{ opacity:.7; cursor:not-allowed; background:var(--yuza2); box-shadow:none; }
.mashq-katak-ar{ color:var(--asos); font-size:calc(1.3em * var(--ar-olcham)); }
.mashq-katak-nom{ font-weight:700; color:var(--matn-kuchli); }
.mashq-katak-izoh{ color:var(--matn2); font-size:calc((14px) * var(--matn-olcham)); overflow-wrap:anywhere; }
.mashq-katak-natija{
font-family:var(--mono-font); font-variant-numeric:tabular-nums;
font-size:calc((12px) * var(--matn-olcham)); font-weight:600; color:var(--yashil);
margin-top:4px;
}
.mashq-katak-yopiq{
font-size:calc((12px) * var(--matn-olcham)); color:var(--oltin); margin-top:4px; overflow-wrap:anywhere;
}
/* ---------- mashq ishlanayotgan panel ---------- */
.mashq-bosh{
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
margin-bottom:8px;
}
.mashq-nomi{ font-weight:700; min-width:0; overflow-wrap:anywhere; }
.mashq-qadam{ font-family:var(--mono-font); font-size:calc((13px) * var(--matn-olcham)); color:var(--matn2); }
.mashq-bosh .tugma{ margin-left:auto; }
/* Imtihon vaqti (ETAP 52 · QOIDA 159). Mono shrift va tabular-nums:
raqam har soniyada almashganda qator kengligi o'zgarmasin. */
.mashq-vaqt{
font-family:var(--mono-font); font-size:calc((13px) * var(--matn-olcham));
font-variant-numeric:tabular-nums; color:var(--asos); font-weight:700;
padding:2px 8px; border:1px solid var(--chiziq-kuchli); border-radius:var(--radius);
background:var(--yuza);
}
.mashq-vaqt-oz{ color:var(--xavf); border-color:var(--xavf); }
.mashq-ichi{ margin-top:14px; }
.mashq-savol{ font-size:calc((16px) * var(--matn-olcham)); margin-bottom:4px; }
.mashq-izoh{ color:var(--matn2); font-size:calc((14px) * var(--matn-olcham)); margin-bottom:10px; overflow-wrap:anywhere; }
/* Savoldagi arabcha -- ekrandagi eng katta element. Foni krem:
ko'z aynan shu yerga tushishi kerak (QOIDA 75, 4-band). */
.mashq-korsat{
display:flex; justify-content:center;
border:1px solid var(--chiziq); border-radius:var(--radius-karta);
background:var(--krem); padding:14px 18px; margin-bottom:14px;
}
.mashq-katta{ font-size:calc(3.2em * var(--ar-olcham)); line-height:1.5; color:var(--asos); }
.mashq-ovoz-qator{ display:flex; justify-content:center; margin-bottom:14px; }
/* Harf bo'laklari qatori. dir="rtl" HTML da beriladi -- so'z
o'ngdan chapga terilishi kerak (ARABCHA-TEXNIKA 1). */
.mashq-bolaklar{
display:flex; flex-wrap:wrap; gap:6px; justify-content:center;
margin-bottom:14px;
}
.mashq-bolak{
display:inline-flex; align-items:center; justify-content:center;
min-width:52px; padding:6px 10px;
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--yuza); color:inherit; font:inherit; cursor:pointer;
}
span.mashq-bolak{ cursor:default; }
.mashq-bolak .ar{ font-size:calc(1.9em * var(--ar-olcham)); line-height:1.5; color:var(--asos); }
.mashq-bolak:hover:not([disabled]){ border-color:var(--chiziq-kuchli); }
.mashq-bolak.nishon{
border-color:var(--oltin); border-width:2px; background:var(--krem);
}
.mashq-tiklangan{
min-height:44px; text-align:center;
font-size:calc(1.9em * var(--ar-olcham));
color:var(--asos);
border-bottom:1px dashed var(--chiziq-kuchli); margin-bottom:12px;
}
.mashq-variantlar{ display:grid; grid-template-columns:1fr; gap:8px; }
.mashq-variant{
display:flex; align-items:center; gap:10px;
padding:10px 12px; text-align:left;
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--yuza); color:inherit; font:inherit; cursor:pointer;
min-width:0;
}
.mashq-variant:hover:not([disabled]){ border-color:var(--chiziq-kuchli); background:var(--yuza2); }
.mashq-variant[disabled]{ cursor:default; }
.mashq-nr{
flex:0 0 auto; width:24px; height:24px;
display:flex; align-items:center; justify-content:center;
border:1px solid var(--chiziq); border-radius:var(--radius-kichik);
background:var(--yuza2);
font-family:var(--mono-font); font-variant-numeric:tabular-nums;
font-size:calc((12px) * var(--matn-olcham)); font-weight:600; color:var(--matn2);
}
.mashq-variant-ar{ font-size:calc(1.5em * var(--ar-olcham)); color:var(--asos); }
.mashq-variant-tr{ color:var(--matn2); font-size:calc((13px) * var(--matn-olcham)); min-width:0; overflow-wrap:anywhere; }
/* To'g'ri / xato belgilash. Rang yolg'iz emas -- chegara qalinligi
va pastdagi yozuv ham farq qiladi (QOIDA 36). */
.mashq-variant.tog,.mashq-bolak.tog{
border-color:var(--yashil); border-width:2px; background:var(--yashil-och);
}
.mashq-variant.xato,.mashq-bolak.xato{
border-color:var(--xavf); border-width:2px;
}
.mashq-fikr{
margin-top:14px; padding:10px 12px;
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--yuza2); font-size:calc((14px) * var(--matn-olcham)); overflow-wrap:anywhere;
}
.mashq-fikr.tog{ border-color:var(--yashil); background:var(--yashil-och); color:var(--yashil-qora); }
.mashq-fikr.xato{ border-color:var(--xavf); }
.mashq-past{ display:flex; justify-content:flex-end; margin-top:14px; }
/* ---------- natija ---------- */
.mashq-natija{
border:1px solid var(--chiziq); border-radius:var(--radius-karta);
background:var(--yuza); padding:22px 18px; text-align:center;
box-shadow:var(--soya);
}
.mashq-natija-nom{ color:var(--matn2); font-size:calc((14px) * var(--matn-olcham)); }
/* Katta raqam birinchi ko'zga tashlansin (QOIDA 75, 13-band) */
.mashq-natija-ball{
font-family:var(--mono-font); font-variant-numeric:tabular-nums;
font-size:calc((40px) * var(--matn-olcham)); font-weight:750; letter-spacing:-.02em;
color:var(--asos); margin:4px 0;
}
.mashq-natija-foiz{
font-family:var(--mono-font); font-variant-numeric:tabular-nums;
font-size:calc((14px) * var(--matn-olcham)); color:var(--matn2);
}
.mashq-natija-izoh{ margin:10px 0 14px; overflow-wrap:anywhere; }
.mashq-natija-tugmalar{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
/* ============================================================
13b. O'YINLAR (ETAP 5)
------------------------------------------------------------
Savol ko'rsatishning umumiy lug'ati -- `.mashq-` sinflari --
o'yinlar ekranida ham ishlatiladi (QOIDA 78). Ular yuqorida
bir marta yozilgan va ikkinchi marta nusxa qilinmaydi: aks
holda biri tuzatilganda ikkinchi ekran eskiligicha qolib
ketardi. Bu yerda faqat o'yinga XOS bo'laklar bor.
============================================================ */
/* Uzun arabcha matn (ta'rif, misol gap) katta harfda ekranga
sig'maydi -- shuning uchun savoldagi gap kichikroq yoziladi.
line-height:2 saqlanadi: harakat harfning ustiga chiqadi. */
.oyin-gap{
font-size:calc(1.7em * var(--ar-olcham));
line-height:2; color:var(--asos); text-align:center;
min-width:0; overflow-wrap:anywhere;
}
/* ---------- I'ROB SAVOLI (ETAP 35 · QOIDA 138) ----------
Butun gap BITTA `.ar` element ichida turadi, tagi chizilgan
so'z esa ichkaridagi oddiy span. Unga `direction` ham,
`unicode-bidi` ham BERILMAYDI: berilsa gap ichida yangi bidi
oqimi ochilib, so'zlar tartibi buzilardi (ARABCHA-TEXNIKA 2). */
.oyin-irab, .duel-irab{
font-size:calc(1.9em * var(--ar-olcham));
line-height:2.1; color:var(--asos); text-align:center;
min-width:0; overflow-wrap:anywhere;
}
/* Nishon so'z. `border-bottom` emas, `text-decoration` ishlatiladi:
border qutini hosil qiladi va arabcha harflarning pastga
tushadigan dumlarini (ج، ح، ع) kesib qo'yardi. */
.oyin-irab-nishon{
text-decoration:underline;
text-decoration-color:var(--oltin);
text-decoration-thickness:3px;
text-underline-offset:6px;
background:var(--oltin-och);
border-radius:4px;
padding:0 2px;
}
/* Ikki arabcha shakl orasidagi ajratgich (fe'l va uning muzore'si).
Alohida element: arabcha bilan lotincha bitta elementga
qo'yilmaydi (ARABCHA-TEXNIKA 2). */
.oyin-ajratgich{ color:var(--matn2); padding:0 10px; align-self:center; }
/* O'zbekcha savol matni katta ko'rsatilganda ("o'zbekcha -> arabcha") */
.oyin-korsat-uz{
font-size:calc((24px) * var(--matn-olcham)); font-weight:700; color:var(--asos-qora);
text-align:center; min-width:0; overflow-wrap:anywhere;
}
.oyin-variant-uz{ min-width:0; overflow-wrap:anywhere; }
/* ---------- ta'rifdagi qiyin so'zlar (QOIDA 122) ----------
Ta'rif arabcha o'qiladi va ichida kitobda hali uchramagan so'z
bo'ladi. Ularning tarjimasi shu yerda, ta'rifning O'Z ostida
turadi. Ko'rinishi ATAYLAB xira va kichik: bu javob emas,
chetdagi izoh -- o'quvchining ko'zi avval ta'rifga tushishi
kerak. */
.oyin-qiyin{
display:flex; flex-wrap:wrap; justify-content:center;
gap:6px 14px; margin-top:4px;
padding:10px 12px;
border:1px dashed var(--chiziq); border-radius:var(--radius);
background:var(--yuza2);
}
.oyin-qiyin-bosh{
flex:0 0 100%; text-align:center;
font-size:calc((12px) * var(--matn-olcham)); letter-spacing:.04em; text-transform:uppercase;
color:var(--matn2);
}
/* Arabcha va o'zbekcha bitta elementga qo'yilmaydi
(ARABCHA-TEXNIKA 2): yo'nalish aralashib, tinish belgisi
noto'g'ri tomonga o'tib ketadi */
.oyin-qiyin-soz{ display:inline-flex; align-items:baseline; gap:6px; }
.oyin-qiyin-ar{
font-size:calc(1.1em * var(--ar-olcham)); line-height:1.9;
color:var(--asos);
}
.oyin-qiyin-uz{ font-size:calc((13px) * var(--matn-olcham)); color:var(--matn2); }
/* ---------- yozib yodlash: maydon va ekran klaviaturasi ---------- */
.oyin-yozuv{ display:grid; gap:10px; }
/* dir="rtl" HTML da beriladi: o'quvchi arabcha yozadi, matn
o'ngdan chapga terilishi kerak (ARABCHA-TEXNIKA 2) */
.oyin-kiritma{
width:100%; padding:12px 14px;
border:1px solid var(--chiziq-kuchli); border-radius:var(--radius);
background:var(--krem); color:var(--asos);
font-family:var(--ar-font);
font-size:calc(1.8em * var(--ar-olcham)); line-height:2;
text-align:center;
}
.oyin-kiritma:focus{ outline:2px solid var(--yashil); outline-offset:1px; }
.oyin-kiritma.tog{ border-color:var(--yashil); border-width:2px; background:var(--yashil-och); }
.oyin-kiritma.xato{ border-color:var(--xavf); border-width:2px; }
/* Klaviatura o'ngdan chapga terilmaydi: bu alifbo tartibi,
matn emas -- o'quvchi harfni tartib bo'yicha qidiradi */
.oyin-klav{
display:grid; grid-template-columns:repeat(8, 1fr); gap:4px;
}
.oyin-klav-tugma{
padding:6px 2px;
border:1px solid var(--chiziq); border-radius:var(--radius-kichik);
background:var(--yuza); color:inherit; font:inherit; cursor:pointer;
min-width:0;
}
.oyin-klav-tugma .ar{ font-size:calc(1.4em * var(--ar-olcham)); color:var(--asos); }
.oyin-klav-tugma:hover:not([disabled]){ border-color:var(--chiziq-kuchli); background:var(--yuza2); }
.oyin-klav-tugma[disabled]{ opacity:.5; cursor:default; }
.oyin-klav-keng{ grid-column:span 4; font-size:calc((13px) * var(--matn-olcham)); color:var(--matn2); }
.oyin-yozuv-past{ display:flex; flex-wrap:wrap; gap:8px; }
/* ---------- juftlash ---------- */
.oyin-juft{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.oyin-juft-ustun{ display:grid; gap:8px; align-content:start; }
.oyin-juft-katak{
padding:10px 12px; min-height:52px;
display:flex; align-items:center; justify-content:center; text-align:center;
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--yuza); color:inherit; font:inherit; cursor:pointer;
min-width:0; overflow-wrap:anywhere;
}
.oyin-juft-ar{ font-size:calc(1.5em * var(--ar-olcham)); color:var(--asos); }
.oyin-juft-katak:hover:not([disabled]){ border-color:var(--chiziq-kuchli); }
/* Tanlangan katak -- ko'k, topilgan juft -- yashil. Ikkalasida
chegara qalinligi ham o'zgaradi: rangga yolg'iz tayanilmaydi
(QOIDA 36) */
.oyin-juft-katak.tanlangan{
border-color:var(--asos); border-width:2px; background:var(--asos-och);
}
.oyin-juft-katak.tog{
border-color:var(--yashil); border-width:2px; background:var(--yashil-och);
cursor:default;
}
.oyin-juft-katak.xato{ border-color:var(--xavf); border-width:2px; }
/* ---------- xotira ---------- */
.oyin-xotira{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.oyin-xotira-katak{
min-height:78px; padding:6px;
display:flex; align-items:center; justify-content:center; text-align:center;
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--yuza2); color:inherit; font:inherit; cursor:pointer;
font-size:calc((13px) * var(--matn-olcham)); min-width:0; overflow-wrap:anywhere;
}
.oyin-xotira-katak.ochiq{ background:var(--krem); }
.oyin-xotira-katak.tog{
border-color:var(--yashil); border-width:2px; background:var(--yashil-och);
cursor:default;
}
.oyin-xotira-katak .ar{ font-size:calc(1.3em * var(--ar-olcham)); color:var(--asos); }
/* Yopiq katakdagi savol belgisi -- arabcha, lekin bezak:
ekran o'quvchi dasturga katakning yorlig'i beriladi */
.oyin-xotira-orqa{
font-family:var(--ar-font); font-size:calc((26px) * var(--matn-olcham)); color:var(--chiziq-kuchli);
}
/* ---------- kartochka ---------- */
.oyin-karta{ display:grid; gap:10px; justify-items:center; text-align:center; }
.oyin-karta-izoh{ font-size:calc((13px) * var(--matn-olcham)); color:var(--matn2); overflow-wrap:anywhere; }
.oyin-karta-mano{ font-size:calc((19px) * var(--matn-olcham)); }
.oyin-karta-tugmalar{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.oyin-karta .m-misol{ width:100%; }
/* ============================================================
13c. GRAMMATIKA (ETAP 6)
------------------------------------------------------------
Savol ko'rsatishning umumiy lug'ati -- `.mashq-` sinflari --
bu ekranda ham ishlatiladi (QOIDA 78) va uchinchi marta nusxa
qilinmadi. Bu yerda faqat TUSHUNTIRISH bo'laklari bor:
qoida bloki, jadval, misollar va tipik xato.
============================================================ */
.qd-dars{ font-size:calc((13px) * var(--matn-olcham)); color:var(--matn2); margin-bottom:4px; }
.qd-dars-ar{ font-size:calc(1.1em * var(--ar-olcham)); color:var(--asos); }
.qd-sarlavha{
display:flex; flex-wrap:wrap; align-items:baseline; gap:10px;
font-size:calc((20px) * var(--matn-olcham)); margin:0 0 10px; letter-spacing:-.02em;
}
.qd-sarlavha-ar{ font-size:calc(1.5em * var(--ar-olcham)); color:var(--asos); }
.qd-sarlavha-uz{ font-size:calc((19px) * var(--matn-olcham)); color:var(--matn-kuchli); min-width:0; overflow-wrap:anywhere; }
.qd-intro{ color:var(--matn2); margin-bottom:16px; max-width:62ch; overflow-wrap:anywhere; }
.qd-blok{
border:1px solid var(--chiziq); border-radius:var(--radius-karta);
background:var(--yuza); padding:14px 16px; margin-bottom:12px;
box-shadow:var(--soya);
}
.qd-blok-nom{
font-size:calc((12px) * var(--matn-olcham)); text-transform:uppercase; letter-spacing:.06em;
font-weight:700; color:var(--matn2); margin:0 0 8px;
}
.qd-blok-matn{ margin:0; overflow-wrap:anywhere; }
.qd-blok-matn .ar{ font-size:calc(1.15em * var(--ar-olcham)); color:var(--asos); }
/* Qoida bloki -- chapida oltin chiziq. Oltin saytda JUDA KAM
ishlatiladi va aynan shu blok uchun ajratilgan (QOIDA 75). */
.qd-qoida{ border-left:3px solid var(--oltin); }
/* ---------- jadval ---------- */
/* Uzun jadval O'Z ICHIDA siljiydi -- sahifa 375px da gorizontal
siljib ketmasin (QOIDA 48) */
.qd-jadval-quti{ overflow-x:auto; }
.qd-jadval{
width:100%; border-collapse:collapse; font-size:calc((14px) * var(--matn-olcham));
}
.qd-jadval th,.qd-jadval td{
border:1px solid var(--chiziq); padding:8px 10px;
text-align:left; vertical-align:middle;
}
.qd-jadval th{
background:var(--yuza2); font-size:calc((12px) * var(--matn-olcham)); color:var(--matn2);
font-weight:700; white-space:nowrap;
}
.qd-jadval td .ar{ font-size:calc(1.35em * var(--ar-olcham)); color:var(--asos); }
/* ---------- misollar ---------- */
.qd-misollar{ display:grid; grid-template-columns:1fr; gap:8px; }
.qd-misol{
display:grid; gap:2px;
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--krem); padding:10px 12px;
}
.qd-misol-ar{ font-size:calc(1.45em * var(--ar-olcham)); color:var(--asos); }
.qd-misol-tr{ font-size:calc((12px) * var(--matn-olcham)); color:var(--matn2); overflow-wrap:anywhere; }
.qd-misol-uz{ font-size:calc((14px) * var(--matn-olcham)); overflow-wrap:anywhere; }
/* ---------- tipik xato ---------- */
.qd-xato-juft{ display:grid; grid-template-columns:1fr; gap:8px; margin-bottom:10px; }
.qd-xato-quti{
display:grid; gap:4px; justify-items:center; text-align:center;
border:1px solid var(--chiziq); border-radius:var(--radius); padding:10px 12px;
}
/* Rang yolg'iz emas: ustida "xato" / "to'g'ri" YOZUVI ham turadi
(QOIDA 36) */
.qd-notogri{ border-color:var(--xavf); background:var(--yuza2); }
.qd-togri{ border-color:var(--yashil); background:var(--yashil-och); }
.qd-belgi{
font-size:calc((11px) * var(--matn-olcham)); text-transform:uppercase; letter-spacing:.06em; font-weight:700;
}
.qd-notogri .qd-belgi{ color:var(--xavf); }
.qd-togri .qd-belgi{ color:var(--yashil); }
.qd-xato-ar{ font-size:calc(1.6em * var(--ar-olcham)); color:var(--asos); }
/* Xato shakl chizib tashlanadi -- rangni ko'rmaydigan odam ham
qaysi biri noto'g'ri ekanini darrov ko'rsin */
.qd-notogri .qd-xato-ar{ text-decoration:line-through; text-decoration-color:var(--xavf); }
/* ============================================================
RASM VA CHIZMA BLOKLARI (ETAP 33 · QOIDA 133-134)
------------------------------------------------------------
Olti xil rasm bir blok ichida turadi. Sahna — yozuvsiz SVG;
qolgan besh turi CSS bilan chizilgan quti va o'q, arabcha
matn esa ular ichida `class="ar"` element bo'lib turadi
(ARABCHA-TEXNIKA 1, 2, 5).
⚠️ HAMMA CHIZMA 375px EKRANDA SIG'ADI (QOIDA 48): gap va
zanjir qatorlari o'ralib tushadi, toifa va juft esa telefonda
bitta ustunga o'tadi.
============================================================ */
.qd-rasm-quti{
border-radius:var(--radius-karta); overflow:hidden;
background:#EAF4FB; max-width:420px; margin:0 auto 10px;
border:1px solid var(--chiziq);
}
/* Mashq savolidagi rasm bir oz kattaroq: u savolning O'ZI */
.mashq-ichi .qd-rasm-quti{ max-width:480px; margin-bottom:14px; }
.rm-svg{ display:block; width:100%; height:auto; }
.qd-chizma{ margin:0 0 10px; }
.qd-chizma-uz{
margin:0 0 10px; font-size:calc((14px) * var(--matn-olcham)); color:var(--matn2); text-align:center;
}
/* ---------- gap chizmasi ---------- */
/* Qator `dir="rtl"` — arabcha gap o'ngdan boshlanadi, demak
birinchi bo'lak O'NGDA turadi. Yorliq esa `dir="ltr"`:
u o'zbekcha. */
.qd-chizma-gap{
display:flex; flex-wrap:wrap; justify-content:center;
align-items:stretch; gap:8px;
}
.qd-bolak,.qd-halqa{
display:flex; flex-direction:column; align-items:center; gap:4px;
border:1px solid var(--chiziq); border-top:3px solid var(--chiziq-kuchli);
border-radius:var(--radius); background:var(--yuza2);
padding:8px 12px; min-width:0;
}
.qd-bolak-ar{ font-size:calc(1.5em * var(--ar-olcham)); color:var(--asos); }
.qd-bolak-yorliq{
font-size:calc((11px) * var(--matn-olcham)); color:var(--matn2); text-align:center;
text-transform:uppercase; letter-spacing:.05em; font-weight:700;
overflow-wrap:anywhere;
}
/* Bo'lakning vazifasi rangdan tashqari YORLIQ bilan ham aytiladi
(QOIDA 36 · ARABCHA-TEXNIKA 8): rang yolg'iz ma'no tashimaydi */
.qd-bolak-kok{ border-top-color:var(--asos); }
.qd-bolak-yashil{ border-top-color:var(--yashil); }
.qd-bolak-sariq{ border-top-color:var(--oltin); }
.qd-bolak-qizil{ border-top-color:var(--xavf); }
/* ---------- zanjir (izofa) ---------- */
.qd-chizma-zanjir{
display:flex; flex-wrap:wrap; justify-content:center;
align-items:center; gap:6px;
}
/* Ikki halqani bog'lab turadigan chiziq: izofada ikki so'z
BITTA birikma bo'lib qolgani ko'rinib tursin */
.qd-halqa-bog{
width:22px; height:3px; border-radius:2px; background:var(--oltin);
flex:0 0 auto;
}
/* ---------- toifa (daraxt) ---------- */
.qd-chizma-toifa{ display:grid; gap:10px; justify-items:center; }
.qd-ildiz{
display:flex; flex-direction:column; align-items:center; gap:2px;
border:1px solid var(--asos); border-radius:var(--radius);
background:var(--asos-och); padding:8px 16px;
}
.qd-shoxlar{
display:grid; grid-template-columns:1fr; gap:8px; width:100%;
/* Shoxlar ildizdan chiqayotgani ko'rinsin: ustki chiziq */
border-top:2px solid var(--chiziq-kuchli); padding-top:10px;
}
.qd-shox{
display:flex; flex-direction:column; align-items:center; gap:3px;
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--yuza2); padding:8px 12px; text-align:center;
}
.qd-shox-ar{ font-size:calc(1.35em * var(--ar-olcham)); color:var(--asos); }
.qd-shox-misol{ font-size:calc((13px) * var(--matn-olcham)); color:var(--matn); overflow-wrap:anywhere; }
.qd-shox-misol .ar{ font-size:calc(1.2em * var(--ar-olcham)); color:var(--asos); }
/* ---------- juft (solishtirish) ---------- */
.qd-chizma-juft{ display:grid; grid-template-columns:1fr; gap:8px; }
.qd-juft-yon{
display:grid; gap:4px; justify-items:center; text-align:center;
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--krem); padding:10px 12px;
}
.qd-juft-nom{
font-size:calc((11px) * var(--matn-olcham)); text-transform:uppercase; letter-spacing:.06em;
font-weight:700; color:var(--matn2);
}
.qd-juft-ar{ font-size:calc(1.5em * var(--ar-olcham)); color:var(--asos); }
.qd-juft-royxat{
list-style:none; margin:0; padding:0; display:grid; gap:2px;
font-size:calc((13px) * var(--matn-olcham)); color:var(--matn2);
}
.qd-juft-royxat .ar{ font-size:calc(1.25em * var(--ar-olcham)); color:var(--asos); }
/* ---------- ranglar ---------- */
.qd-chizma-rang{
display:grid; grid-template-columns:repeat(2,1fr); gap:8px;
}
.qd-rang{
display:grid; gap:2px; justify-items:center; text-align:center;
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--yuza); padding:10px 8px;
}
/* Namunaning chekkasi HAR DOIM chiziladi -- oq rang oq fonda
ko'rinmay qolmasin */
.qd-rang-namuna{
width:44px; height:28px; border-radius:6px;
border:1px solid var(--chiziq-kuchli);
}
.qd-rang-ar{ font-size:calc(1.3em * var(--ar-olcham)); color:var(--asos); }
.qd-rang-ar2{ font-size:calc(1.15em * var(--ar-olcham)); color:var(--matn2); }
@media (min-width:560px){
.qd-chizma-juft{ grid-template-columns:1fr 1fr; }
.qd-shoxlar{ grid-template-columns:repeat(3,1fr); }
.qd-chizma-rang{ grid-template-columns:repeat(3,1fr); }
}
.qd-past{ display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; margin:16px 0 4px; }
.qd-variant-uz{ min-width:0; overflow-wrap:anywhere; }
.qd-video{ font-size:calc((14px) * var(--matn-olcham)); }
@media (min-width:700px){
.qd-misollar{ grid-template-columns:1fr 1fr; }
.qd-xato-juft{ grid-template-columns:1fr 1fr; }
}
/* ============================================================
14. STATISTIKA VA SOZLAMALAR
============================================================ */
.stat-tori{ display:flex; flex-wrap:wrap; gap:8px; }
.progress{
height:10px; border-radius:999px;
border:1px solid var(--chiziq);
background:var(--yuza2);
overflow:hidden;
}
/* Progress -- muvaffaqiyat, ya'ni yashil (QOIDA 75, 3-band) */
.progress-bar{ height:100%; width:0; background:var(--yashil); transition:width .3s ease; }
.progress-yozuv{ font-size:calc((13px) * var(--matn-olcham)); color:var(--matn2); margin-top:6px; }
/* Hali yozilmagan bo'lim: "0 / 0" li progress qatori o'rniga
ochiq yozuv (QOIDA 41). So'niq rangda -- u natija emas, xabar. */
.st-kutilmoqda{ font-size:calc((13px) * var(--matn-olcham)); color:var(--matn2); margin:2px 0 4px; }
.sozlamalar{ display:grid; gap:12px; }
.sozlama{
border:1px solid var(--chiziq); border-radius:var(--radius-karta);
background:var(--yuza);
padding:14px 16px;
min-width:0;
box-shadow:var(--soya);
}
.sozlama-izoh{ font-size:calc((13px) * var(--matn-olcham)); color:var(--matn2); }
.sozlama-namuna{
margin:8px 0 0; padding-top:8px;
color:var(--asos);
border-top:1px dashed var(--chiziq-kuchli);
}
input[type="range"]{ width:100%; accent-color:var(--yashil); }
/* Belgili katak (ETAP 36). Yozuvi katakning O'ZIGA bog'langan:
barmoq yozuvga tekkanda ham katak ishlashi kerak -- telefonda
12x12 katakka tegish qiyin. */
.sozlama-belgi{
display:flex; align-items:center; gap:10px;
margin:6px 0 10px;
cursor:pointer; min-width:0;
}
.sozlama-belgi input{ width:18px; height:18px; accent-color:var(--yashil); flex:none; }
.sozlama-belgi span{ font-weight:600; overflow-wrap:anywhere; }
/* Sozlama ichidagi ikkinchi sarlavha (masalan "Eslatma vaqti"):
katakdan keyin keladi, shuning uchun tepasida joy kerak */
.sozlama-nom-kichik{ display:block; margin-top:10px; }
/* O'chirilgan tanlov jim turmaydi -- ko'zga ham o'chgan ko'rinadi */
.sozlama select:disabled,.sozlama input:disabled{ opacity:.5; cursor:not-allowed; }
/* ------------------------------------------------------------
ETAP 7 -- daraja, kunlik maqsad, taqvim, bosqich, nishonlar.
Hammasi "st-" bilan boshlanadi: statistika ekranining o'z
lug'ati (mashq- va oyin- sinflari kabi, QOIDA 78).
------------------------------------------------------------ */
.st-quti{
border:1px solid var(--chiziq); border-radius:var(--radius-karta);
background:var(--yuza); padding:14px 16px; min-width:0;
box-shadow:var(--soya);
}
.st-yuqori{ display:grid; gap:12px; margin-bottom:8px; }
/* --- daraja --- */
.st-daraja-bosh{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.st-daraja-nr{
font-size:calc((12px) * var(--matn-olcham)); font-weight:700; letter-spacing:.02em;
color:var(--yashil); background:var(--yashil-och);
border-radius:999px; padding:3px 10px;
}
.st-daraja-ar{ color:var(--asos); font-weight:700; }
.st-daraja-nom{ font-weight:700; color:var(--matn-kuchli); }
.st-daraja-ball{ font-size:calc((22px) * var(--matn-olcham)); color:var(--asos); margin:6px 0 10px;
font-variant-numeric:tabular-nums; }
.st-daraja-ball b{ font-size:calc((30px) * var(--matn-olcham)); font-weight:750; letter-spacing:-.02em; }
/* --- kunlik maqsad --- */
.st-kunlik-bosh{
display:flex; align-items:center; justify-content:space-between;
flex-wrap:wrap; gap:8px; margin-bottom:10px;
}
.st-kunlik-son{ font-size:calc((20px) * var(--matn-olcham)); color:var(--matn2); font-variant-numeric:tabular-nums; }
.st-kunlik-son b{ font-size:calc((28px) * var(--matn-olcham)); font-weight:750; color:var(--asos); }
/* Ketma-ketlik -- oltin urg'u. Oltin JUDA KAM ishlatiladi
(QOIDA 75), shuning uchun u aynan shu bitta sonda turadi. */
.st-ketma{
font-size:calc((13px) * var(--matn-olcham)); font-weight:700; color:var(--oltin);
background:var(--oltin-och); border-radius:999px; padding:4px 12px;
}
/* --- 30 kunlik taqvim --- */
.st-taqvim{ display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; }
.st-kun{
display:block; width:16px; height:16px; border-radius:4px;
background:var(--yuza2); border:1px solid var(--chiziq);
}
/* To'rt zichlik. Rangga YOLG'IZ tayanilmaydi (QOIDA 36) --
har katakda `title` bilan sana va ball yozilgan. */
.st-kun[data-daraja="1"]{ background:var(--yashil-och); border-color:var(--yashil-och2); }
.st-kun[data-daraja="2"]{ background:var(--yashil-och2); border-color:transparent; }
.st-kun[data-daraja="3"]{ background:var(--yashil); opacity:.65; border-color:transparent; }
.st-kun[data-daraja="4"]{ background:var(--yashil); border-color:transparent; }
/* --- bosqich progressi --- */
.st-bosqich-bosh{
display:flex; align-items:baseline; justify-content:space-between;
gap:8px; margin-bottom:8px;
}
.st-bosqich-nom{ font-weight:700; color:var(--matn-kuchli); }
.st-bosqich-foiz{ font-size:calc((24px) * var(--matn-olcham)); font-weight:750; color:var(--asos);
font-variant-numeric:tabular-nums; }
.st-qatorlar{ display:grid; gap:12px; margin:14px 0 4px; }
.st-qator-bosh{
display:flex; justify-content:space-between; gap:8px;
font-size:calc((13px) * var(--matn-olcham)); color:var(--matn2); margin-bottom:5px;
min-width:0; overflow-wrap:anywhere;
}
.st-kichik-sarlavha{
font-size:calc((12px) * var(--matn-olcham)); font-weight:700; letter-spacing:.06em;
text-transform:uppercase; color:var(--matn2); margin:16px 0 8px;
}
/* Darslar to'ri -- katak bosilsa lug'at o'sha darsga filtrlanadi */
.st-darslar{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.st-dars{
display:block; text-align:left; cursor:pointer;
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--yuza2); color:var(--matn);
padding:8px 10px; min-width:0; font:inherit;
transition:border-color .16s ease, background .16s ease;
}
.st-dars:hover{ border-color:var(--yashil); background:var(--yashil-och); }
.st-dars-nr{ display:block; font-size:calc((13px) * var(--matn-olcham)); font-weight:700; }
.st-dars-son{ display:block; font-size:calc((12px) * var(--matn-olcham)); color:var(--matn2);
margin-bottom:6px; font-variant-numeric:tabular-nums; }
/* --- nishonlar --- */
.st-nishonlar{ display:grid; grid-template-columns:1fr; gap:10px; }
.st-nishon{
border:1px solid var(--chiziq); border-radius:var(--radius-karta);
background:var(--yuza); padding:12px 14px; min-width:0;
box-shadow:var(--soya);
}
/* Olingan nishon -- yashil chegara va yengil fon. Yozuvi ham
o'zgaradi ("olindi" + sana), faqat rangga tayanilmaydi. */
.st-nishon.olindi{ border-color:var(--yashil); background:var(--yashil-och); }
.st-nishon-ar{ display:block; color:var(--asos); font-weight:700; }
.st-nishon-nom{ display:block; font-weight:700; margin-top:2px; }
.st-nishon-izoh{ display:block; font-size:calc((13px) * var(--matn-olcham)); color:var(--matn2);
margin:2px 0 6px; overflow-wrap:anywhere; }
.st-nishon-holat{ display:block; font-size:calc((12px) * var(--matn-olcham)); color:var(--matn2);
margin-bottom:5px; font-variant-numeric:tabular-nums; }
.st-nishon.olindi .st-nishon-holat{ color:var(--yashil); font-weight:700; }
/* --- bosh sahifadagi tasma --- */
.st-tasma{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.st-tasma-qism{
flex:1 1 120px; min-width:0; text-decoration:none;
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--yuza); color:var(--matn); padding:8px 12px;
transition:border-color .16s ease;
}
.st-tasma-qism:hover{ border-color:var(--asos); }
.st-tasma-son{ display:block; font-size:calc((18px) * var(--matn-olcham)); font-weight:750; color:var(--asos); overflow-wrap:anywhere;
font-variant-numeric:tabular-nums; }
.st-tasma-nom{ display:block; font-size:calc((12px) * var(--matn-olcham)); color:var(--matn2);
overflow-wrap:anywhere; }
/* --- yangi nishon xabari --- */
.st-xabar{
position:fixed; left:12px; right:12px; bottom:12px; z-index:60;
display:flex; align-items:center; flex-wrap:wrap; gap:8px;
border:1px solid var(--yashil); border-radius:var(--radius-karta);
background:var(--yuza); box-shadow:var(--soya-kuchli);
padding:12px 14px;
}
.st-xabar-nom{
font-size:calc((12px) * var(--matn-olcham)); font-weight:700; letter-spacing:.04em;
text-transform:uppercase; color:var(--yashil);
}
.st-xabar-ar{ color:var(--asos); font-weight:700; }
.st-xabar-uz{ font-weight:700; }
.st-xabar-yana{ font-size:calc((13px) * var(--matn-olcham)); color:var(--matn2); }
@media (min-width:700px){
.st-yuqori{ grid-template-columns:1fr 1fr; }
.st-darslar{ grid-template-columns:repeat(3,1fr); }
.st-nishonlar{ grid-template-columns:1fr 1fr; }
.st-xabar{ left:auto; right:20px; max-width:420px; }
}
@media (min-width:1000px){
.st-nishonlar{ grid-template-columns:repeat(3,1fr); }
.st-darslar{ grid-template-columns:repeat(4,1fr); }
}
/* ============================================================
15. KATTA EKRAN
------------------------------------------------------------
Mobil qoidalar yuqorida. Bu yerda faqat FARQ yoziladi.
============================================================ */
@media (min-width:900px){
.alq-juft{ grid-template-columns:1fr 1fr; }
.hm-shakllar{ grid-template-columns:repeat(4, 1fr); }
.mashq-tori{ grid-template-columns:1fr 1fr; }
.mashq-variantlar{ grid-template-columns:1fr 1fr; }
.oyin-klav{ grid-template-columns:repeat(11, 1fr); }
.oyin-xotira{ grid-template-columns:repeat(4, 1fr); }
.menyu-tugma{ display:none; }
.qobiq{
display:grid;
grid-template-columns:var(--yon-en) minmax(0,1fr);
max-width:1240px; margin:0 auto;
}
.yon{
position:sticky; top:calc(var(--bosh-balandlik) + 6px);
height:calc(100vh - var(--bosh-balandlik) - 6px);
transform:none;
visibility:visible; /* katta ekranda menyu doim ochiq */
transition:none;
border-right:1px solid var(--chiziq);
}
.perde{ display:none; }
.asos{ padding:22px 24px 64px; }
.kartalar{ grid-template-columns:1fr 1fr; }
.kartochka-koinish{ grid-template-columns:1fr 1fr 1fr; }
.modal-quti{
top:50%; left:50%; right:auto; bottom:auto;
transform:translate(-50%,-50%);
width:min(680px,92vw);
max-height:86vh;
border:1px solid var(--chiziq);
border-radius:18px;
padding:24px 26px;
}
/* Katta ekranda hero balandroq: birinchi ekranni to'ldirib turadi,
lekin sahifani surishga majbur qilmaydi */
.salom{ padding:82px 40px 72px; }
.salom-past-qator{ margin-bottom:16px; }
}
/* ============================================================
16. OYOQ (footer)
------------------------------------------------------------
To'q va jiddiy (QOIDA 75, 14-band). Havolalar oltin tusda --
bu oltin ishlatiladigan sanoqli joylardan biri.
============================================================ */
.oyoq{
background:#0F2A3D;
color:#FFFFFF;
border-top:3px solid var(--oltin);
padding:32px 16px 28px;
margin-top:auto;
}
.oyoq-ichi{
max-width:1240px; margin:0 auto;
display:grid; grid-template-columns:1fr; gap:22px;
}
.oyoq-nom{
display:flex; align-items:baseline; gap:9px;
font-weight:700; font-size:calc((18px) * var(--matn-olcham)); margin-bottom:8px;
}
.oyoq-nom .ar{ color:#D9B96E; font-size:calc(1.25em * var(--ar-olcham)); }
.oyoq-izoh{ color:#CBD5E1; font-size:calc((14px) * var(--matn-olcham)); margin:0; max-width:44ch; }
.oyoq-sarlavha{
font-size:calc((12px) * var(--matn-olcham)); text-transform:uppercase; letter-spacing:.08em;
color:#94A3B8; font-weight:700; margin:0 0 10px;
}
.oyoq-royxat{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.oyoq-royxat a{ color:#D9B96E; text-decoration:none; font-size:calc((14px) * var(--matn-olcham)); }
.oyoq-royxat a:hover{ text-decoration:underline; }
.oyoq-past{
max-width:1240px; margin:24px auto 0; padding-top:16px;
border-top:1px solid rgba(255,255,255,.12);
color:#CBD5E1; font-size:calc((13px) * var(--matn-olcham));
}
.oyoq-past p{ margin:0; }
/* Oyoqdagi matn qorong'u fonda -- fokus halqasi ham ko'rinishi kerak */
.oyoq :focus-visible{ outline-color:#D9B96E; }
@media (min-width:900px){
.oyoq{ padding:40px 24px 30px; }
.oyoq-ichi{ grid-template-columns:2fr 1fr 1fr; gap:32px; }
}
/* Harakat kamaytirilishi so'ralgan bo'lsa -- animatsiya o'chadi */
@media (prefers-reduced-motion:reduce){
/* transform O'CHIRILMAYDI: modal markazi va yopiq menyu aynan
transform bilan turadi -- o'chirilsa oyna joyidan siljiydi */
*{ transition:none !important; animation:none !important; }
.karta:hover,.soz-tugma:hover,.harf-katak:hover,.mashq-katak:hover{ transform:none; }
}
/* ------------------------------------------------------------
ETAP 8 — DARSLIK: dars ichidagi «Yangi so'zlar» ro'yxati.
Yangi sinf to'plami yasalmadi: dars sahifasining o'zi qd-
sinflarida turadi (QOIDA 78, 89).
------------------------------------------------------------ */
.qd-sozlar{ margin-top:18px; }
.qd-sozlar-tori{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.qd-soz{
display:block; text-align:left; cursor:pointer; font:inherit;
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--yuza); color:var(--matn);
padding:8px 10px; min-width:0;
transition:border-color .16s ease, background .16s ease;
}
.qd-soz:hover{ border-color:var(--yashil); background:var(--yashil-och); }
.qd-soz-ar{ display:block; color:var(--asos); font-weight:700; }
.qd-soz-tr{ display:block; font-size:calc((12px) * var(--matn-olcham)); color:var(--matn2); }
.qd-soz-uz{ display:block; font-size:calc((13px) * var(--matn-olcham)); overflow-wrap:anywhere; }
@media (min-width:700px){
.qd-sozlar-tori{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:1000px){
.qd-sozlar-tori{ grid-template-columns:repeat(4,1fr); }
}
/* ------------------------------------------------------------
ETAP 8b — DARSLIK IMTIHONI (kitobning 100-beti)
------------------------------------------------------------
Yangi ekran yasalmadi: imtihon darslar bilan bitta ro'yxatda,
bitta test panelida va bitta natija panelida turadi
(QOIDA 63, 78, 89). Shuning uchun bu yerda faqat imtihonga XOS
bo'laklar bor -- boshqasi `mashq-` va `qd-` sinflaridan olinadi.
------------------------------------------------------------ */
/* Imtihon katagi darslardan AJRALIB turadi: u bitta dars emas,
hammasining ustidan o'tadigan sinov. Ajratish rang bilan emas,
chegara qalinligi va joylashuv bilan ham (QOIDA 36). */
.qd-imtihon-quti{ margin-top:22px; }
.qd-imtihon-katak{
display:flex; flex-direction:column; gap:3px; width:100%;
text-align:left; padding:18px 20px;
border:2px solid var(--asos); border-radius:var(--radius-karta);
background:var(--krem); color:inherit; font:inherit; cursor:pointer;
min-width:0;
box-shadow:var(--soya);
transition:transform .16s ease, box-shadow .16s ease;
}
.qd-imtihon-katak:hover{ transform:translateY(-2px); box-shadow:var(--soya-kuchli); }
/* Savol tepasidagi «Darslik · 4-dars» yozuvi */
.mashq-manba{
font-size:calc((12px) * var(--matn-olcham)); font-weight:600; letter-spacing:.02em;
color:var(--matn2); margin-bottom:6px;
}
/* Imtihonda tanlangan variant. `tog` / `xato` dan boshqacha:
bu «hozircha shuni tanladim» degani, baho emas -- shuning uchun
yashil ham, qizil ham emas, brend ko'ki. */
.mashq-variant.tanlangan{
border-color:var(--asos); border-width:2px; background:var(--asos-och);
}
/* O'tildi / o'tilmadi hukmi. Rang yolg'iz tashuvchi emas --
yozuvning o'zi ham to'liq gap (QOIDA 36). */
.imt-hukm{
margin:10px 0 4px; padding:8px 12px;
border-radius:var(--radius); font-weight:700;
border:1px solid var(--chiziq);
}
.imt-otdi{ color:var(--yashil); background:var(--yashil-och); border-color:var(--yashil); }
.imt-otmadi{ color:var(--xavf); background:var(--yuza2); border-color:var(--xavf); }
/* Natijadagi vaqt qatori (ETAP 52): sarflangan vaqt oddiy izoh,
«vaqt tugadi» esa ogohlantirish rangida -- yozuvi ham buni aytadi */
.imt-vaqt{ margin:6px 0 0; font-size:calc((14px) * var(--matn-olcham)); color:var(--matn2); }
.imt-vaqt-tugadi{ color:var(--ogoh); font-weight:600; }
.imt-bolim{ margin-top:22px; text-align:left; }
/* Dars bo'yicha natija qatori -- bosilsa o'sha dars ochiladi */
.imt-qator{
display:flex; align-items:center; justify-content:space-between; gap:10px;
width:100%; margin-bottom:6px; padding:10px 12px;
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--yuza); color:inherit; font:inherit; cursor:pointer;
text-align:left; min-width:0;
}
.imt-qator:hover{ border-color:var(--chiziq-kuchli); background:var(--yuza2); }
/* Zaif dars chap chetidagi QALIN chiziq bilan belgilanadi:
ro'yxatni tepadan pastga yugurtirganda ko'zga darhol tashlanadi */
.imt-zaif{ border-left:4px solid var(--ogoh); }
.imt-qator-nom{ min-width:0; overflow-wrap:anywhere; }
.imt-qator-son{
flex:0 0 auto;
font-family:var(--mono-font); font-variant-numeric:tabular-nums;
font-size:calc((13px) * var(--matn-olcham)); font-weight:600; color:var(--matn2);
}
/* Xato javob -- savol, bergan javobi, to'g'risi va izohi */
.imt-xato{
margin-bottom:10px; padding:12px 14px;
border:1px solid var(--chiziq); border-left:4px solid var(--xavf);
border-radius:var(--radius); background:var(--yuza);
overflow-wrap:anywhere;
}
.imt-xato-savol{ font-weight:600; margin-bottom:6px; }
.imt-xato-siz{ font-size:calc((14px) * var(--matn-olcham)); color:var(--xavf); }
.imt-xato-tog{ font-size:calc((14px) * var(--matn-olcham)); color:var(--yashil); font-weight:600; }
.imt-xato-iz{ font-size:calc((14px) * var(--matn-olcham)); color:var(--matn2); margin-top:6px; }
/* «Qoidasi: 12-dars — ...» havolasi (ETAP 47). Tugma bo'lsa ham
HAVOLAGA o'xshaydi: u ish bajarmaydi, boshqa joyga olib boradi --
qutidagi to'la enli tugmalar bilan aralashib ketmasin. */
.imt-xato-havola{
display:inline-block; margin-top:8px; padding:0;
border:0; background:none; cursor:pointer; text-align:start;
font-family:inherit; font-size:calc((14px) * var(--matn-olcham));
font-weight:600; color:var(--asos); text-decoration:underline;
text-underline-offset:3px;
}
.imt-xato-havola:hover{ color:var(--asos-qora); }
.imt-xato-havola:focus-visible{ outline:2px solid var(--asos); outline-offset:2px; }
/* Imtihon shartlari ro'yxati (mavzu panelida) */
.qd-shart{ margin:0 0 12px 18px; padding:0; }
.qd-shart li{ margin-bottom:4px; overflow-wrap:anywhere; }
/* DTM yozma mashqi (ETAP 50). Berilgan so'z va gapdagi bo'sh joy
uchun ikkitagina sinf: qolgan hamma ko'rinish YOZISH bo'limining
sinflaridan olinadi (QOIDA 78).
NEGA bo'sh joy uchun alohida sinf kerak: u gapning O'ZI bilan
bir xil ko'rinsa, o'quvchi qayerga yozishini topa olmasdi -- u
ko'zga tashlanishi va yonidagi arabcha bilan qo'shilib
ketmasligi kerak (QOIDA 41). */
.qd-berilgan{ margin:0 0 8px; color:var(--matn2);
font-size:calc((14px) * var(--matn-olcham)); }
.qd-berilgan-ar{ font-size:calc((20px) * var(--ar-olcham));
color:var(--asos); margin-right:4px; }
.qd-bosh-joy{ display:inline-block; min-width:64px; text-align:center;
padding:0 8px; margin:0 4px; border-bottom:2px dashed var(--asos);
color:var(--asos); }
/* ============================================================
17. PWA -- OFLAYN VA O'RNATISH (ETAP 10)
------------------------------------------------------------
Uch element: tarmoq uzilgani haqidagi qator, iPhone uchun
o'rnatish qadamlari va yangi versiya xabari. Uchalasi ham
kam ko'rinadi, shuning uchun yangi rang KIRITILMADI --
mavjud o'zgaruvchilar ishlatildi (QOIDA 75).
============================================================ */
/* Internet yo'qligi haqidagi qator. Sarlavha ostiga YOPISHIB
turadi: sahifa pastga yugurtirilganda ham ko'rinib tursin,
aks holda o'quvchi sababni topa olmaydi. */
.tarmoq-belgi{
position:sticky; top:var(--bosh-balandlik); z-index:29;
padding:7px 14px;
font-size:calc((13px) * var(--matn-olcham)); font-weight:600;
/* Matn rangi --asos EMAS, --matn: qorong'u rejimda ko'k rang
to'q oltin fonda zo'rg'a o'qiladi (o'lchandi: ~4.5:1). --matn
ikkala rejimda ham fonga qarama-qarshi turadi. */
color:var(--matn); background:var(--oltin-och);
border-bottom:1px solid var(--oltin);
text-align:center;
overflow-wrap:anywhere;
}
/* Takror eslatmasi qatori (ETAP 36). Tarmoq qatori bilan bir
xil joyda turadi -- ikkalasi ham "sayt sizga bir narsa
aytyapti" ma'nosida. Rangi esa YASHIL: bu ogohlantirish
emas, taklif. */
.eslatma-qator{
position:sticky; top:var(--bosh-balandlik); z-index:28;
display:flex; align-items:center; justify-content:center;
flex-wrap:wrap; gap:10px;
padding:8px 14px;
font-size:calc((13px) * var(--matn-olcham));
color:var(--matn); background:var(--yashil-och);
border-bottom:1px solid var(--yashil);
/* Uzun matn tor telefonda qatorni yorib chiqmasin (QOIDA 48) */
min-width:0; overflow-wrap:anywhere;
}
.eslatma-matn{ font-weight:600; }
/* Son mono shriftda (QOIDA 75): raqam matndan ajralib tursin */
.eslatma-matn b{ color:var(--yashil); font-family:var(--mono-font); }
/* iPhone uchun qadamlar. Oltin chegara -- "e'tibor bering"
ma'nosidagi yagona joy, ekranda doim turmaydi. */
.ornat-izoh{
margin:0 0 14px;
padding:12px 14px;
border:1px solid var(--oltin);
border-radius:var(--radius);
background:var(--krem);
max-width:520px;
}
.ornat-izoh-nom{ margin:0 0 8px; font-weight:700; font-size:calc((14px) * var(--matn-olcham)); }
.ornat-qadam{ margin:0; padding-left:20px; font-size:calc((14px) * var(--matn-olcham)); }
.ornat-qadam li{ margin-bottom:5px; overflow-wrap:anywhere; }
/* Yangi versiya xabari nishon xabari bilan bir qolipda (.st-xabar),
farqi -- ko'k chegara (yutuq emas, xabar) va ikki tugma.
Ikkalasi bir vaqtda chiqib qolsa ustma-ust tushmasin deb
yangilanish xabari nishon xabari ustiga ko'tariladi. Buni
qo'shni tanlagich hal qiladi -- JS ga qo'shimcha holat
kiritilmadi (nishon xabari 7 soniyada o'zi yo'qoladi). */
.pwa-xabar{ border-color:var(--asos); bottom:12px; }
#nishonXabar:not([hidden]) ~ .pwa-xabar{ bottom:96px; }
.pwa-xabar-tugmalar{ display:flex; gap:8px; margin-left:auto; }
@media (min-width:700px){
.ornat-izoh{ margin-bottom:16px; }
}
/* ============================================================
18. DARSLIK — KITOB TANLAGICH (ETAP 14)
------------------------------------------------------------
Besh kitob bitta bo'limda (QOIDA 99). Tugmalar tab qatoridan
KATTAROQ: har birida raqam, nom va darslar soni turadi —
o'quvchi qaysi kitob tayyor, qaysisi yo'qligini bir qarashda
ko'rishi kerak.
============================================================ */
.kitob-qator{
display:flex; flex-wrap:wrap; gap:8px;
margin:0 0 14px;
}
.kitob-tugma{
flex:1 1 128px; min-width:0;
display:flex; flex-direction:column; align-items:flex-start; gap:1px;
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--yuza); color:var(--matn);
padding:8px 12px; cursor:pointer; text-align:left;
font:inherit;
transition:border-color .16s ease, background .16s ease;
}
.kitob-tugma:hover:not(:disabled){ border-color:var(--asos); }
.kitob-tugma.faol{
border-color:var(--yashil); background:var(--yashil-och);
}
/* Kiritilmagan kitob YASHIRILMAYDI, o'chgan holatda turadi va
sababi title da yoziladi (QOIDA 24 mantiqi) */
.kitob-tugma:disabled{ opacity:.5; cursor:not-allowed; }
.kitob-tugma-nr{
font-size:calc((19px) * var(--matn-olcham)); font-weight:750; line-height:1.1;
color:var(--asos); font-variant-numeric:tabular-nums;
}
.kitob-tugma.faol .kitob-tugma-nr{ color:var(--yashil); }
.kitob-tugma-nom{ font-size:calc((13px) * var(--matn-olcham)); font-weight:600; overflow-wrap:anywhere; }
.kitob-tugma-son{ font-size:calc((12px) * var(--matn-olcham)); color:var(--matn2); overflow-wrap:anywhere; }
/* ============================================================
KITOB O'YINLARINING ALOHIDALIGI (ETAP 17)
------------------------------------------------------------
Mijoz so'rovi 2026-08-28: «har bir kitobga alohidaligi
ko'rinib tursin». Shuning uchun uch joyda belgi qo'yildi:
1) har katakda kitob raqami (.katak-nishon)
2) ro'yxat ustida kitobning o'z sarlavhasi (.kitob-boshliq)
3) hamma kitob yonma-yon turgan jadval (.kitob-jadval)
Rangga YOLG'IZ tayanilmaydi (QOIDA 36): raqam va yozuv ham bor.
============================================================ */
.katak-nishon{
align-self:flex-start;
font-size:calc((11px) * var(--matn-olcham)); font-weight:700; letter-spacing:.03em;
padding:2px 8px; border-radius:999px;
background:var(--asos-och); color:var(--asos);
border:1px solid var(--chiziq);
}
.mashq-katak.katak-kitob{ border-left:3px solid var(--asos); }
.mashq-katak.katak-kitob[disabled]{ border-left-color:var(--chiziq-kuchli); }
.kitob-boshliq{
display:flex; align-items:center; gap:12px; flex-wrap:wrap;
margin:0 0 12px; padding:10px 14px;
border:1px solid var(--chiziq); border-left:3px solid var(--asos);
border-radius:var(--radius); background:var(--yuza);
}
.kitob-boshliq-nr{
font-size:calc((26px) * var(--matn-olcham)); font-weight:750; line-height:1;
color:var(--asos); font-variant-numeric:tabular-nums;
}
.kitob-boshliq-matn{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.kitob-boshliq-nom{ font-weight:700; color:var(--matn-kuchli); overflow-wrap:anywhere; }
.kitob-boshliq-son{
font-size:calc((13px) * var(--matn-olcham)); color:var(--matn2);
font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}
.kitob-boshliq-ar{ margin-left:auto; color:var(--asos); font-size:calc(1.15em * var(--ar-olcham)); }
/* Keng jadval telefonda O'ZI siljiydi -- sahifa emas */
.kitob-jadval-oram{ overflow-x:auto; margin:0 0 14px; }
.kitob-jadval{
width:100%; border-collapse:collapse; font-size:calc((14px) * var(--matn-olcham));
background:var(--yuza); border:1px solid var(--chiziq);
border-radius:var(--radius);
}
.kitob-jadval caption{
caption-side:top; text-align:left; padding:0 0 6px;
font-size:calc((13px) * var(--matn-olcham)); color:var(--matn2);
}
.kitob-jadval th, .kitob-jadval td{
padding:7px 12px; border-bottom:1px solid var(--chiziq); text-align:left;
white-space:nowrap;
}
.kitob-jadval thead th{ font-size:calc((12px) * var(--matn-olcham)); color:var(--matn2); font-weight:600; }
.kitob-jadval tbody th{ font-weight:600; color:var(--matn-kuchli); white-space:normal; }
.kitob-jadval td{ font-variant-numeric:tabular-nums; color:var(--matn2); }
.kitob-jadval tbody tr:last-child th, .kitob-jadval tbody tr:last-child td{ border-bottom:0; }
/* Ochiq kitob qatori ajratiladi -- rangdan tashqari chap chiziq ham bor */
.kitob-jadval tbody tr.faol{ background:var(--yashil-och); }
.kitob-jadval tbody tr.faol th{ box-shadow:inset 3px 0 0 var(--yashil); }
/* Ochiq kitobning izohi -- ro'yxat ustida bir qator */
.kitob-izoh{
margin:0 0 14px; padding:10px 14px;
border-left:3px solid var(--oltin);
background:var(--krem); border-radius:var(--radius-kichik);
font-size:calc((14px) * var(--matn-olcham)); color:var(--matn); overflow-wrap:anywhere;
}
/* ============================================================
19. DUEL — IKKI KISHILIK MUSOBAQA (ETAP 15)
------------------------------------------------------------
Bitta ekran, ikki o'yinchi (QOIDA 102). Yuqorigi yarim
180 gradus BURILADI: qurilma stol ustida yotganda qarama-qarshi
o'tirgan ikkinchi o'quvchi yozuvni to'g'ri o'qiydi.
Yangi rang KIRITILMADI (QOIDA 75): o'yinchilar bir-biridan
mavjud ikki rang bilan ajratiladi — 1-o'yinchi ko'k (--asos),
2-o'yinchi yashil (--yashil).
============================================================ */
.duel{ display:block; }
.duel-tomon{
border:1px solid var(--chiziq); border-radius:var(--radius-karta);
background:var(--yuza);
padding:10px 12px;
}
/* Ikkinchi o'yinchining yarmi buriladi -- qarama-qarshi o'tiradi */
.duel-tomon-2{ transform:rotate(180deg); }
.duel-bosh{
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
margin-bottom:8px;
}
.duel-nom{ font-size:calc((13px) * var(--matn-olcham)); font-weight:700; }
.duel-ball{
margin-left:auto;
font-size:calc((22px) * var(--matn-olcham)); font-weight:750; font-variant-numeric:tabular-nums;
}
.duel-klav{
font-size:calc((11px) * var(--matn-olcham)); color:var(--matn2); letter-spacing:.08em;
overflow-wrap:anywhere;
}
.duel-tomon-1 .duel-nom,.duel-tomon-1 .duel-ball{ color:var(--asos); }
.duel-tomon-2 .duel-nom,.duel-tomon-2 .duel-ball{ color:var(--yashil); }
.duel-variantlar{
display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.duel-variant{
display:flex; align-items:center; gap:8px;
min-width:0; min-height:56px;
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--yuza2); color:var(--matn);
padding:8px 10px; cursor:pointer; font:inherit; text-align:left;
overflow-wrap:anywhere;
}
.duel-variant:hover:not(:disabled){ border-color:var(--asos); }
.duel-variant:disabled{ cursor:default; opacity:.75; }
/* To'g'ri javob yashil, xato bosilgani qizil. Rangga YOLG'IZ
tayanilmaydi (QOIDA 36): chegara ham qalinlashadi. */
.duel-togri{
border:2px solid var(--yashil); background:var(--yashil-och); opacity:1;
}
.duel-xato{ border:2px solid var(--xavf); background:var(--yuza); }
.duel-harf{
flex:0 0 auto;
display:inline-flex; align-items:center; justify-content:center;
width:26px; height:26px; border-radius:var(--radius-kichik);
background:var(--asos-och); color:var(--asos);
font-size:calc((13px) * var(--matn-olcham)); font-weight:750;
}
.duel-tomon-2 .duel-harf{ background:var(--yashil-och); color:var(--yashil); }
.duel-variant-ar{ font-size:1.15em; }
.duel-variant-uz,.duel-variant-tr{ font-size:calc((14px) * var(--matn-olcham)); min-width:0; }
.duel-variant-tr{ color:var(--matn2); font-size:calc((12px) * var(--matn-olcham)); }
.duel-holat{
margin:8px 0 0; font-size:calc((12px) * var(--matn-olcham)); color:var(--xavf); font-weight:600;
}
/* O'rta qism: savol, vaqt va natija qatori */
.duel-orta{
margin:10px 0; padding:12px 14px;
border:1px solid var(--chiziq); border-radius:var(--radius-karta);
background:var(--yuza); text-align:center;
}
.duel-qadam{
font-size:calc((12px) * var(--matn-olcham)); color:var(--matn2); font-variant-numeric:tabular-nums;
}
.duel-savol{ margin:4px 0 8px; font-weight:600; overflow-wrap:anywhere; }
.duel-korsat{ margin-bottom:8px; }
.duel-katta{ font-size:1.9em; font-weight:700; color:var(--asos); }
.duel-korsat-uz{ font-size:calc((20px) * var(--matn-olcham)); font-weight:700; }
/* Vaqt chizig'i. Rang o'zgarmaydi -- kamayishi ham ma'lumot,
qizarib ketishi esa shoshirib xato javobga majburlaydi. */
.duel-vaqt{
height:6px; border-radius:999px; background:var(--yuza2);
overflow:hidden;
}
.duel-vaqt-bar{
display:block; height:100%; width:100%;
background:var(--oltin); transition:width .1s linear;
}
.duel-natija-qator{
margin:8px 0 0; font-size:calc((14px) * var(--matn-olcham)); font-weight:600; overflow-wrap:anywhere;
}
/* Yakun */
.duel-yakun{
border:1px solid var(--chiziq); border-radius:var(--radius-karta);
background:var(--yuza); padding:18px 16px; text-align:center;
}
.duel-yakun-nom{ margin:0 0 12px; font-size:calc((22px) * var(--matn-olcham)); font-weight:750; color:var(--asos); }
.duel-yakun-hisob{
display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
margin-bottom:10px;
}
.duel-yakun-ball{
border:1px solid var(--chiziq); border-radius:var(--radius);
padding:8px 14px; font-weight:700;
font-variant-numeric:tabular-nums;
}
.duel-yutdi{ border-color:var(--yashil); background:var(--yashil-och); color:var(--yashil); }
.duel-yakun-izoh{ margin:0 0 14px; font-size:calc((13px) * var(--matn-olcham)); color:var(--matn2); }
.duel-tugmalar{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
/* Katta ekranda (sinf televizori) tomonlar yonma-yon turadi va
burilish KERAK EMAS -- ikkovi ham ekranga qarab turadi. */
@media (min-width:900px){
.duel #duelIchi{
display:grid; grid-template-columns:1fr 1.1fr 1fr; gap:12px;
align-items:start;
}
.duel-tomon-2{ transform:none; order:3; }
.duel-orta{ margin:0; order:2; }
.duel-tomon-1{ order:1; }
.duel-variantlar{ grid-template-columns:1fr; }
.duel-katta{ font-size:2.4em; }
}
/* ============================================================
20. TAKRORLASH — INTERVAL (ETAP 13)
------------------------------------------------------------
Savol ko'rsatishning umumiy lug'ati (`.mashq-*`) bu yerda ham
ishlatiladi (QOIDA 78) — pastda faqat takrorga XOS bo'laklar.
============================================================ */
/* To'rt son: bugun · ertaga · takrorda · mustahkam.
auto-fit: 375px enlikda ikki ustunga tushadi, keng ekranda
to'rttasi bir qatorda (QOIDA 48 — uzun so'z ekranni buzmasin). */
.takror-sonlar{
display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:10px; margin-bottom:14px;
}
.takror-son{
border:1px solid var(--chiziq); border-radius:var(--radius-karta);
background:var(--yuza); padding:14px 16px; min-width:0;
}
.takror-son b{
display:block;
font-family:var(--mono-font); font-variant-numeric:tabular-nums;
font-size:calc((30px) * var(--matn-olcham)); font-weight:750; letter-spacing:-.02em;
color:var(--asos); line-height:1.1;
}
.takror-son span{ color:var(--matn2); font-size:calc((13px) * var(--matn-olcham)); }
.takror-qoshish{
display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;
}
/* ---------- kartochka ---------- */
.takror-karta{
border:1px solid var(--chiziq); border-left:4px solid var(--oltin);
border-radius:var(--radius-karta);
background:var(--krem); padding:24px 18px; text-align:center;
}
/* Ekrandagi eng katta element — ko'z shu yerga tushishi kerak.
line-height:2 saqlanadi: harakat harfning ustiga chiqadi
(ARABCHA-TEXNIKA 1). */
.takror-ar{
font-size:calc(2.4em * var(--ar-olcham));
line-height:2; color:var(--asos-qora);
}
.takror-savol-izoh{ color:var(--matn2); font-size:calc((14px) * var(--matn-olcham)); margin:6px 0 0; }
.takror-javob{
margin-top:10px; padding:16px 18px;
border:1px solid var(--chiziq); border-radius:var(--radius-karta);
background:var(--yuza); text-align:center; min-width:0;
}
.takror-uz{ font-size:calc((20px) * var(--matn-olcham)); font-weight:650; color:var(--matn-kuchli); margin:0; }
.takror-tr{ color:var(--matn2); font-size:calc((14px) * var(--matn-olcham)); margin:4px 0 0; }
.takror-misol{
margin-top:12px; padding:10px 12px;
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--yuza); min-width:0; overflow-wrap:anywhere;
}
.takror-misol-uz{ display:block; color:var(--matn2); font-size:calc((14px) * var(--matn-olcham)); margin-top:4px; }
.takror-holat{
margin:12px 0 0; font-size:calc((13px) * var(--matn-olcham)); color:var(--matn2);
font-variant-numeric:tabular-nums;
}
/* ---------- baho tugmalari ---------- */
.takror-baholar{
display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:8px; margin-top:14px;
}
/* Tugma ikki qavat: baho va uning MUDDATI. Muddat ko'rinib
tursa o'quvchi o'ziga halol baho beradi. */
.tugma-baho{
flex-direction:column; gap:2px; padding:10px 12px; min-height:56px;
}
.takror-muddat{
font-size:calc((12px) * var(--matn-olcham)); opacity:.8;
font-variant-numeric:tabular-nums;
}
/* Rangga YOLG'IZ tayanilmaydi (QOIDA 36) — har tugmada yozuv ham bor.
Rang faqat qo'shimcha ishora. */
.baho-0{ background:transparent; color:var(--xavf); border-color:var(--xavf); }
.baho-0:hover{ background:var(--xavf); color:var(--oq); border-color:var(--xavf); }
.baho-3{ background:transparent; color:var(--ogoh); border-color:var(--ogoh); }
.baho-3:hover{ background:var(--ogoh); color:var(--oq); border-color:var(--ogoh); }
.baho-4{ background:var(--asos); color:var(--tugma-matn); border-color:var(--asos); }
.baho-5{ background:var(--yashil); color:var(--tugma-matn); border-color:var(--yashil); }
.baho-5:hover{ background:var(--yashil-qora); border-color:var(--yashil-qora); }
/* ============================================================
19. DARS REJASI (ETAP 27 · QOIDA 123)
------------------------------------------------------------
Reja dars MAZMUNI emas — uni qanday o'tish tartibi. Shuning
uchun u tushuntirish bloklariga (qd-blok) O'XSHAMASLIGI kerak:
foni ko'kimtir, chap chetida ko'k chiziq, o'zi esa yig'ilgan
holda turadi. Aks holda o'quvchi rejani darsning bir qismi
deb o'qib ketardi (mijozning sharti: «aralashib ketmasin»).
============================================================ */
.qd-reja{
margin:16px 0 18px;
border:1px solid var(--chiziq); border-left:3px solid var(--asos);
border-radius:var(--radius); background:var(--asos-och);
overflow:hidden;
}
.qd-reja-bosh{
display:flex; flex-wrap:wrap; align-items:center; gap:8px;
padding:12px 14px; cursor:pointer; list-style:none;
font-weight:700; color:var(--asos);
}
/* Safari uchun: `summary` ning o'z uchburchagi olib tashlanadi */
.qd-reja-bosh::-webkit-details-marker{ display:none; }
.qd-reja-bosh::before{
content:"▸"; font-size:calc((13px) * var(--matn-olcham)); opacity:.8; transition:transform .15s ease;
}
.qd-reja[open] .qd-reja-bosh::before{ content:"▾"; }
.qd-reja-nom{ font-size:calc((15px) * var(--matn-olcham)); }
.qd-reja-vaqt{
margin-left:auto; font-size:calc((12.5px) * var(--matn-olcham)); font-weight:600; color:var(--matn2);
font-variant-numeric:tabular-nums;
}
.qd-reja-izoh{
margin:0; padding:0 14px 8px; font-size:calc((13.5px) * var(--matn-olcham)); color:var(--matn2);
}
.qd-reja-royxat{
list-style:none; margin:0; padding:0 14px 14px;
display:flex; flex-direction:column; gap:8px;
}
.qd-reja-qadam{
display:flex; align-items:flex-start; gap:10px;
padding:10px 12px; border-radius:var(--radius);
background:var(--yuza); border:1px solid var(--chiziq);
min-width:0;
}
.qd-reja-raqam{
flex:0 0 auto; width:24px; height:24px; border-radius:50%;
background:var(--asos); color:var(--tugma-matn);
display:flex; align-items:center; justify-content:center;
font-size:calc((13px) * var(--matn-olcham)); font-weight:700;
}
.qd-reja-matn{ display:block; min-width:0; flex:1 1 auto; }
.qd-reja-qadam-nom{ display:block; color:var(--matn-kuchli); font-size:calc((14.5px) * var(--matn-olcham)); }
.qd-reja-tafsil{
display:block; color:var(--matn2); font-size:calc((13.5px) * var(--matn-olcham)); margin-top:2px;
overflow-wrap:anywhere;
}
.qd-reja-daq{
flex:0 0 auto; font-size:calc((12px) * var(--matn-olcham)); font-weight:700; color:var(--yashil);
font-variant-numeric:tabular-nums; white-space:nowrap; padding-top:3px;
}
/* ============================================================
20. RASM BO'YICHA GAPIRISH (ETAP 27 · QOIDA 125)
------------------------------------------------------------
Ekranning markazida RASM turadi — u bu bo'limdagi yagona
savol. Shuning uchun rasm eng katta element, qolgani
(ishora, baho) undan pastda va kichikroq.
============================================================ */
.rasm-ichi{ margin-top:14px; }
.rasm-quti{
border-radius:var(--radius-karta); overflow:hidden;
box-shadow:var(--soya); background:#EAF4FB;
/* Rasm o'z nisbatini saqlaydi: cho'zilgan sahna narsalarni
tanib bo'lmaydigan qilib qo'yardi */
max-width:640px; margin:0 auto;
}
.rasm-svg{ display:block; width:100%; height:auto; }
.rasm-topshiriq{
margin:14px auto 0; max-width:640px; text-align:center;
font-size:calc((15px) * var(--matn-olcham)); color:var(--matn);
}
.rasm-daraja{
margin:4px auto 0; max-width:640px; text-align:center;
font-size:calc((13px) * var(--matn-olcham)); color:var(--matn2);
}
/* ---------- ishoralar ---------- */
.rasm-ishora{
display:flex; flex-direction:column; gap:8px;
max-width:640px; margin:14px auto 0;
}
.rasm-savol{
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
padding:10px 14px; border-radius:var(--radius);
background:var(--krem); border:1px solid var(--chiziq);
border-right:3px solid var(--oltin);
min-width:0;
}
.rasm-savol-nr{
flex:0 0 auto; width:22px; height:22px; border-radius:50%;
background:var(--oltin); color:#3A2C10;
display:flex; align-items:center; justify-content:center;
font-size:calc((12px) * var(--matn-olcham)); font-weight:700;
}
.rasm-savol-ar{
font-size:calc(1.35em * var(--ar-olcham)); color:var(--asos);
flex:1 1 auto; text-align:right;
}
/* Tarjima tugmasi ataylab KICHIK va bo'yoqsiz: ishora arabcha
bo'lishi kerak, tarjima esa oxirgi chora (QOIDA 127) */
.rasm-savol-tarj{
flex:0 0 auto; padding:3px 10px; border-radius:999px;
border:1px solid var(--chiziq); background:transparent;
color:var(--matn2); font-size:calc((11.5px) * var(--matn-olcham)); font-family:inherit;
cursor:pointer;
}
.rasm-savol-tarj:hover{ background:var(--yuza); color:var(--matn); }
.rasm-savol-tarj:focus-visible{ outline:2px solid var(--oltin); outline-offset:2px; }
.rasm-savol-uz{ color:var(--matn2); font-size:calc((13.5px) * var(--matn-olcham)); width:100%; }
/* ---------- ustoz bahosi ---------- */
.rasm-baholar{
max-width:640px; margin:18px auto 0; padding:14px;
border:1px solid var(--chiziq); border-top:3px solid var(--yashil);
border-radius:var(--radius-karta); background:var(--yuza);
}
.rasm-baho-sarlavha{
margin:0; font-weight:700; color:var(--matn-kuchli); font-size:calc((15px) * var(--matn-olcham));
}
.rasm-baho-izoh{ margin:4px 0 10px; font-size:calc((13px) * var(--matn-olcham)); color:var(--matn2); }
.rasm-baho-tugmalar{
display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:8px;
}
/* Rang — faqat qo'shimcha ishora: har tugmada yozuv ham,
belgi ham bor (QOIDA 36) */
.rbaho-5{ background:var(--yashil); color:var(--tugma-matn); border-color:var(--yashil); }
.rbaho-4{ background:var(--asos); color:var(--tugma-matn); border-color:var(--asos); }
.rbaho-3{ background:transparent; color:var(--asos); border-color:var(--chiziq-kuchli); }
.rbaho-2{ background:transparent; color:var(--ogoh); border-color:var(--ogoh); }
.rbaho-1{ background:transparent; color:var(--xavf); border-color:var(--xavf); }
.rbaho-3:hover{ background:var(--asos-och); }
.rbaho-2:hover{ background:var(--ogoh); color:var(--oq); }
.rbaho-1:hover{ background:var(--xavf); color:var(--oq); }
/* Tanlangan baho: qalin ramka va belgi — rangdan tashqari
SHAKL ham o'zgaradi, shunda tanlov aniq ko'rinadi */
.tugma-baho.tanlangan{
outline:3px solid var(--asos); outline-offset:2px; font-weight:700;
}
/* ---------- to'plamlar va tarix ---------- */
.rasm-toplamlar{ display:grid; grid-template-columns:1fr; gap:10px; }
.rasm-tarix{ display:flex; flex-wrap:wrap; gap:8px; }
.rasm-tarix-qism{
display:flex; flex-direction:column; gap:2px;
padding:8px 12px; border:1px solid var(--chiziq);
border-radius:var(--radius); background:var(--yuza); font-size:calc((13px) * var(--matn-olcham));
}
.rasm-tarix-baho{ color:var(--matn2); font-size:calc((12.5px) * var(--matn-olcham)); }
/* ---------- natija ---------- */
.rasm-natija-royxat{
display:flex; flex-direction:column; gap:6px;
max-width:520px; margin:14px auto 0; text-align:left;
}
.rasm-natija-qator{
display:flex; justify-content:space-between; gap:12px;
padding:8px 12px; border:1px solid var(--chiziq);
border-radius:var(--radius); background:var(--yuza); font-size:calc((14px) * var(--matn-olcham));
}
.rasm-natija-baho{ color:var(--matn2); white-space:nowrap; }
@media (min-width:640px){
.rasm-toplamlar{ grid-template-columns:1fr 1fr 1fr; }
}
/* ============================================================
21. DARAJA TESTI (ETAP 40 · QOIDA 147)
------------------------------------------------------------
Yangi rang KIRITILMADI (QOIDA 75): natijadagi daraja nomi
brend ko'kida, o'tilgan bosqich yashil chetki chiziq bilan
belgilanadi — imtihon natijasidagi bilan bir xil til.
============================================================ */
/* Boshi paneli — oldingi natija qutisi */
.dr-eski{
display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px;
margin-bottom:14px; padding:12px 16px;
border:1px solid var(--chiziq); border-left:4px solid var(--oltin);
border-radius:var(--radius-karta); background:var(--krem); min-width:0;
}
.dr-eski-nom{ color:var(--matn2); font-size:calc((13px) * var(--matn-olcham)); }
.dr-eski-daraja{
font-family:var(--mono-font); font-variant-numeric:tabular-nums;
font-size:calc((26px) * var(--matn-olcham)); font-weight:750; letter-spacing:-.02em;
color:var(--asos); line-height:1.1;
}
.dr-eski-izoh{ color:var(--matn2); font-size:calc((13px) * var(--matn-olcham)); overflow-wrap:anywhere; }
/* Test shartlari ro'yxati */
.dr-shart{ margin:0 0 14px 18px; padding:0; }
.dr-shart li{ margin-bottom:5px; overflow-wrap:anywhere; }
/* ---------- natija ---------- */
/* Ekrandagi eng katta element — daraja nomi. Yonida arabchasi
turadi, lekin ALOHIDA elementda: aralashsa qavs va tire
noto'g'ri tomonga tushardi (ARABCHA-TEXNIKA 2). */
.dr-natija-daraja{
display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
gap:6px 14px; margin:6px 0 2px;
}
.dr-natija-nom{
font-family:var(--mono-font); font-variant-numeric:tabular-nums;
font-size:calc((44px) * var(--matn-olcham)); font-weight:750; letter-spacing:-.03em;
color:var(--asos); line-height:1.05;
}
.dr-natija-ar{ font-size:calc(1.3em * var(--ar-olcham)); color:var(--asos-qora); }
/* Bosqich bo'yicha qator. O'tilgani chap chetidagi yashil chiziq
bilan belgilanadi — rang yolg'iz tashuvchi emas, foiz ham
yozilib turadi (QOIDA 36). */
.dr-qator{
margin-bottom:10px; padding:10px 12px;
border:1px solid var(--chiziq); border-left:4px solid var(--chiziq-kuchli);
border-radius:var(--radius); background:var(--yuza); min-width:0;
}
.dr-otdi{ border-left-color:var(--yashil); }
.dr-qator-bosh{
display:flex; justify-content:space-between; gap:12px;
margin-bottom:6px; font-size:calc((14px) * var(--matn-olcham)); overflow-wrap:anywhere;
}
.dr-qator-bosh span:last-child{
flex:0 0 auto;
font-family:var(--mono-font); font-variant-numeric:tabular-nums;
font-weight:600; color:var(--matn2);
}
/* Tavsiya — natijaning eng foydali qismi, shuning uchun
ajratilgan quti ichida turadi */
.dr-tavsiya{
padding:14px 16px;
border:1px solid var(--chiziq); border-left:4px solid var(--asos);
border-radius:var(--radius-karta); background:var(--yuza);
}
.dr-tavsiya-nom{
font-family:var(--mono-font); font-variant-numeric:tabular-nums;
font-size:calc((22px) * var(--matn-olcham)); font-weight:750;
color:var(--asos); margin:4px 0 2px;
}
.dr-tavsiya-matn{
color:var(--matn2); font-size:calc((14px) * var(--matn-olcham));
margin:0 0 10px; overflow-wrap:anywhere;
}
/* ---------- statistikadagi qator ---------- */
.dr-stat{
display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px;
margin-bottom:16px; padding:12px 16px;
border:1px solid var(--chiziq); border-left:4px solid var(--oltin);
border-radius:var(--radius-karta); background:var(--krem); min-width:0;
}
.dr-stat-nom{ font-weight:650; color:var(--matn-kuchli); }
.dr-stat-daraja{
font-family:var(--mono-font); font-variant-numeric:tabular-nums;
font-size:calc((22px) * var(--matn-olcham)); font-weight:750;
color:var(--asos); line-height:1.1;
}
.dr-stat-izoh{ color:var(--matn2); font-size:calc((13px) * var(--matn-olcham)); overflow-wrap:anywhere; }
/* ============================================================
22. SERTIFIKAT (ETAP 42 · QOIDA 149)
------------------------------------------------------------
Sertifikat — bosma hujjat, shuning uchun uning ko'rinishi
saytning qolgan qismidan bir oz boshqacha: qalinroq chekka,
kremrang fon va o'rtaga tekislangan matn. Yangi rang
KIRITILMADI (QOIDA 75) — oltin va zaytun bor ranglardan.
============================================================ */
/* Ekran o'quvchi dasturlar uchun yorliq — ko'z bilan ko'rinmaydi */
.srt-yorliq{
position:absolute; width:1px; height:1px; overflow:hidden;
clip:rect(0 0 0 0); white-space:nowrap;
}
/* ---------- sertifikat varag'i ---------- */
.srt-varaq{
position:relative; margin:0 0 12px;
padding:28px 26px 24px;
border:1px solid var(--oltin); border-radius:var(--radius-karta);
background:var(--krem); text-align:center; overflow:hidden;
min-width:0;
}
/* Ichki ingichka ramka — bosma hujjat belgisi. Naqsh EMAS:
naqsh faqat ikki joyda qoladi (QOIDA 75, PROMT 8). */
.srt-naqsh{
position:absolute; inset:8px;
border:1px solid var(--chiziq); border-radius:calc(var(--radius-karta) - 4px);
pointer-events:none;
}
.srt-sayt{
position:relative; margin:0 0 2px;
font-weight:750; letter-spacing:-.01em; color:var(--asos);
font-size:calc((17px) * var(--matn-olcham));
}
.srt-nuqta{ color:var(--oltin); }
.srt-unvon{
position:relative; margin:0;
font-size:calc((13px) * var(--matn-olcham)); font-weight:650;
letter-spacing:.16em; text-transform:uppercase; color:var(--matn2);
}
.srt-unvon-ar{ font-size:calc(1.5em * var(--ar-olcham)); color:var(--asos-qora); }
.srt-matn{
margin:10px auto 4px; max-width:34em;
color:var(--matn2); font-size:calc((14px) * var(--matn-olcham));
}
.srt-bosqich{
margin:2px 0 0;
font-family:var(--mono-font); font-variant-numeric:tabular-nums;
font-size:calc((40px) * var(--matn-olcham)); font-weight:750; letter-spacing:-.03em;
color:var(--asos); line-height:1.1;
}
.srt-bosqich-ar{ font-size:calc(1.25em * var(--ar-olcham)); color:var(--asos-qora); }
.srt-sonlar{
display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
margin:14px 0 6px;
}
.srt-son{
min-width:110px; padding:8px 14px;
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--yuza);
}
.srt-son b{
display:block;
font-family:var(--mono-font); font-variant-numeric:tabular-nums;
font-size:calc((22px) * var(--matn-olcham)); font-weight:750; color:var(--asos);
}
.srt-son span{ color:var(--matn2); font-size:calc((12.5px) * var(--matn-olcham)); }
.srt-sana{ margin:6px 0 0; color:var(--matn2); font-size:calc((13px) * var(--matn-olcham)); }
.srt-kod-yorliq{
margin:12px 0 2px; color:var(--matn2);
font-size:calc((12px) * var(--matn-olcham)); font-weight:600;
letter-spacing:.12em; text-transform:uppercase;
}
/* Kod qo'lda ko'chiriladi — mono shrift va keng oraliq shart */
.srt-kod{
margin:0; font-family:var(--mono-font);
font-size:calc((20px) * var(--matn-olcham)); font-weight:700;
letter-spacing:.08em; color:var(--asos-qora); overflow-wrap:anywhere;
}
.srt-izoh{
margin:8px auto 0; max-width:34em;
color:var(--matn2); font-size:calc((12.5px) * var(--matn-olcham));
}
.srt-amallar{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
/* ---------- hali olinmagan sertifikat ---------- */
.srt-kutish{
margin-bottom:12px; padding:14px 16px;
border:1px solid var(--chiziq); border-left:4px solid var(--chiziq-kuchli);
border-radius:var(--radius-karta); background:var(--yuza); min-width:0;
}
.srt-kutish-bosh{
display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px;
}
.srt-kutish-nom{
font-family:var(--mono-font); font-variant-numeric:tabular-nums;
font-size:calc((22px) * var(--matn-olcham)); font-weight:750; color:var(--matn2);
}
.srt-kutish-ar{ font-size:calc(1.1em * var(--ar-olcham)); color:var(--matn2); }
.srt-kutish-izoh{
margin:4px 0 10px; color:var(--matn2);
font-size:calc((14px) * var(--matn-olcham)); overflow-wrap:anywhere;
}
/* ---------- kodni tekshirish ---------- */
.srt-tekshir{ margin-top:26px; }
.srt-tekshir-qator{
display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px;
}
.srt-kiritma{
flex:1 1 240px; min-width:0;
padding:.6em .8em; border:1px solid var(--chiziq);
border-radius:var(--radius); background:var(--yuza); color:var(--matn-kuchli);
font-family:var(--mono-font); font-size:calc((15px) * var(--matn-olcham));
letter-spacing:.06em; text-transform:uppercase;
}
.srt-kiritma:focus{ outline:2px solid var(--asos); outline-offset:1px; }
/* ---------- bosma ----------
Chop etilganda FAQAT tanlangan sertifikat qoladi: menyu,
sarlavha, tugmalar va boshqa sertifikatlar yashiriladi.
Aks holda qog'ozga butun sayt bosilardi. */
@media print{
body.chop-sertifikat .bosh,
body.chop-sertifikat .yon,
body.chop-sertifikat .naqsh,
body.chop-sertifikat .oyoq,
body.chop-sertifikat .ekran-sarlavha,
body.chop-sertifikat .bolim-izoh,
body.chop-sertifikat .srt-tekshir,
body.chop-sertifikat .srt-kutish,
body.chop-sertifikat .srt-amallar,
body.chop-sertifikat .tarmoq-belgi,
body.chop-sertifikat .eslatma-qator{ display:none !important; }
body.chop-sertifikat .srt-varaq{ display:none !important; }
body.chop-sertifikat .srt-varaq.srt-chop{
display:block !important;
border-color:#8A6A21; background:#fff;
page-break-inside:avoid;
}
}
/* ============================================================
O'QISH — اَلْقِرَاءَة (ETAP 43 · QOIDA 150)
------------------------------------------------------------
Ikki narsa bu yerda ataylab shunday qilingan:
1. GAP UCHUN QATOR EMAS, QUTI. Arabcha matn RTL, o'zbekcha
tarjima LTR — ikkisi bitta qatorga qo'yilsa qavs va nuqta
noto'g'ri tomonga tushadi (ARABCHA-TEXNIKA 2). Shuning
uchun har gap alohida qutida, arabchasi o'z elementida.
2. SO'Z — TUGMA, LEKIN TUGMAGA O'XSHAMAYDI. Ramka va fon
qo'yilsa matn «tugmalar to'plami» bo'lib qolardi va o'qib
bo'lmasdi. Shuning uchun tugma faqat bosilganda va
ustiga kelinganda ajralib turadi.
============================================================ */
.oq-royxat{
display:grid; gap:14px; margin:14px 0 26px;
grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
}
.oq-katak{
display:flex; flex-direction:column; gap:6px;
text-align:left; min-width:0;
border:1px solid var(--chiziq); border-radius:var(--radius-karta);
background:var(--yuza); color:var(--matn);
padding:14px 16px; cursor:pointer;
box-shadow:var(--soya);
transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.oq-katak:hover{
transform:translateY(-2px);
box-shadow:var(--soya-kuchli);
border-color:var(--chiziq-kuchli);
}
.oq-katak:focus-visible{ outline:2px solid var(--asos); outline-offset:2px; }
.oq-katak-bosh{
display:flex; align-items:center; justify-content:space-between; gap:8px;
font-size:calc((12px) * var(--matn-olcham)); color:var(--matn2);
}
/* Janr yorlig'i — «xat» bilan «xabar» bir xil o'qilmaydi, shuning
uchun u katakning eng tepasida turadi */
.oq-katak-janr{
border:1px solid var(--chiziq); border-radius:999px;
padding:1px 9px; background:var(--yuza2);
text-transform:lowercase; letter-spacing:.02em;
}
.oq-katak-ar{ font-size:calc((21px) * var(--ar-olcham)); line-height:1.9; }
.oq-katak-nom{ font-weight:650; color:var(--matn-kuchli); }
.oq-katak-izoh{
color:var(--matn2); font-size:calc((13px) * var(--matn-olcham));
overflow-wrap:anywhere;
}
.oq-katak-natija{
margin-top:2px; font-size:calc((13px) * var(--matn-olcham));
color:var(--matn2);
}
.oq-katak-yangi{ color:var(--matn2); font-style:italic; }
/* ---------- matn ---------- */
.oq-gaplar{ margin:14px 0 20px; display:flex; flex-direction:column; gap:10px; }
.oq-gap{
display:flex; gap:10px; align-items:flex-start;
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--yuza); padding:12px 14px;
}
/* Gap raqami: o'quvchi savolga javob izlaganda «uchinchi gapda»
deb topa olishi kerak */
.oq-gap-nr{
flex:0 0 auto; min-width:1.7em; text-align:center;
border-radius:999px; background:var(--yuza2); color:var(--matn2);
font-size:calc((12px) * var(--matn-olcham)); padding:2px 0;
}
.oq-gap-ichi{ flex:1 1 auto; min-width:0; }
.oq-gap-ar{
font-size:calc((24px) * var(--ar-olcham));
line-height:2.1;
}
/* So'z tugmasi: oddiy holatda matndan farq qilmaydi */
.oq-soz{
display:inline; border:0; background:none; padding:0 1px;
color:inherit; font:inherit; cursor:pointer;
border-bottom:1px dotted transparent;
}
.oq-soz:hover{
border-bottom-color:var(--asos);
background:var(--asos-och);
border-radius:4px;
}
.oq-soz:focus-visible{ outline:2px solid var(--asos); outline-offset:1px; }
.oq-tarjima-tugma{
margin-top:6px; border:1px solid var(--chiziq); border-radius:999px;
background:var(--yuza2); color:var(--matn2);
font:inherit; font-size:calc((12px) * var(--matn-olcham));
padding:2px 12px; cursor:pointer;
}
.oq-tarjima-tugma:hover{ border-color:var(--chiziq-kuchli); color:var(--matn); }
.oq-tarjima-tugma:focus-visible{ outline:2px solid var(--asos); outline-offset:1px; }
.oq-uz{
margin:8px 0 0; color:var(--matn2);
font-size:calc((14px) * var(--matn-olcham));
border-left:3px solid var(--chiziq-kuchli); padding-left:10px;
}
/* ---------- matnning o'z lug'atchasi ---------- */
.oq-yangi{
display:grid; gap:8px; margin:10px 0 22px;
grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
}
.oq-yangi-qator{
display:flex; align-items:baseline; gap:10px; min-width:0;
border:1px solid var(--chiziq); border-radius:var(--radius-kichik);
background:var(--yuza2); padding:8px 12px;
}
.oq-yangi-ar{ font-size:calc((19px) * var(--ar-olcham)); flex:0 0 auto; }
.oq-yangi-uz{
color:var(--matn2); font-size:calc((13px) * var(--matn-olcham));
overflow-wrap:anywhere;
}
.oq-savol-ar{ font-size:calc((22px) * var(--ar-olcham)); line-height:2; }
/* Telefon: katak to'ri bitta ustunga tushadi va gap raqami
yashiriladi — 375px da u faqat joy egallaydi */
@media (max-width:520px){
.oq-royxat{ grid-template-columns:1fr; }
.oq-yangi{ grid-template-columns:1fr; }
.oq-gap{ padding:10px 12px; gap:8px; }
.oq-gap-nr{ display:none; }
}
/* ============================================================
DTM SINOV IMTIHONINING MATNI (ETAP 44 · QOIDA 151)
------------------------------------------------------------
Matn savoldan oldin turadi va bir matnga tegishli to'rt
savolda qayta-qayta ko'rsatiladi — imtihonda o'quvchi
matnga qaytib qarash huquqiga ega.
⚠️ Matn HARAKATSIZ, ya'ni harflar orasi siqiq ko'rinadi.
Shuning uchun `line-height` o'qish bo'limidagidan ham katta
olindi: harakatsiz naskh matnda qatorlar bir-biriga yopishib
ketsa, uzun matnni ko'z kuzatib bora olmaydi.
⚠️ `text-align:justify` QO'YILMADI: arabcha matnni cho'zib
tekislash uchun brauzer so'z oralig'ini kengaytiradi va
qatorlar teshik-teshik bo'lib qoladi (ARABCHA-TEXNIKA 1).
============================================================ */
.dtm-matn{
border:1px solid var(--chiziq); border-radius:var(--radius-karta);
background:var(--krem); padding:16px 18px; margin-bottom:16px;
}
.dtm-matn-nom{
font-size:calc((12px) * var(--matn-olcham)); font-weight:650;
letter-spacing:.02em; color:var(--matn2); margin-bottom:8px;
}
.dtm-matn-ar{
font-size:calc((20px) * var(--ar-olcham));
line-height:2.3; color:var(--asos);
min-width:0; overflow-wrap:anywhere;
}
/* Ko'p abzatsli matn (ETAP 52, milliy sertifikat): ma'lumotda
abzats
bilan ajratilgan, pre-line uni saqlaydi. DTM
matnlari bir abzats -- ularga ta'sir qilmaydi. */
.dtm-matn-ar{ display:block; white-space:pre-line; }
@media (max-width:520px){
.dtm-matn{ padding:12px 13px; }
.dtm-matn-ar{ font-size:calc((18px) * var(--ar-olcham)); line-height:2.15; }
}
/* ---- «Haqiqiy imtihon haqida» bloki (ETAP 52 · QOIDA 159) ----
Tashqi qobig'i dars rejasining qolipi (.qd-reja -- yig'iladigan,
chap chetida ko'k chiziq): ikkinchi yig'iladigan qolip yasalsa
ikkovi bir kuni ajralib ketardi (QOIDA 78). Bu yerda faqat
ichki bo'laklar. */
.dtm-malumot{ margin:14px 0 18px; }
.dtm-malumot-blok{
margin:0 14px 12px; padding:10px 12px;
background:var(--yuza); border:1px solid var(--chiziq); border-radius:var(--radius);
}
.dtm-malumot-nom{ margin:0 0 8px; font-weight:700; color:var(--asos); }
.dtm-malumot-blok .qd-shart{ margin-bottom:8px; }
.dtm-malumot-blok .qd-shart li{ margin-bottom:6px; }
.dtm-malumot-manba{
margin:0; font-size:calc((12.5px) * var(--matn-olcham)); color:var(--matn2);
overflow-wrap:anywhere;
}
.dtm-malumot-manba a{ color:var(--asos); }
/* ============================================================
YOZISH — اَلْكِتَابَة (ETAP 45 · QOIDA 152)
------------------------------------------------------------
Ro'yxat kataklari o'qish bo'limining `.oq-katak` sinflarini
ishlatadi (QOIDA 78): ikkalasi ham «bosqichga to'rttadan
to'plam» ko'rinishida, ikkinchi qolip yasalsa ular vaqt
o'tishi bilan bir-biridan ajralib ketardi.
============================================================ */
.yz-ogoh{
border-left:3px solid var(--chiziq-kuchli); padding-left:10px;
color:var(--matn2);
}
.yz-savol{
font-size:calc((15px) * var(--matn-olcham)); font-weight:600;
margin:0 0 10px; color:var(--matn);
}
.yz-uz{
margin:0 0 12px; color:var(--matn2);
font-size:calc((14px) * var(--matn-olcham));
border-left:3px solid var(--chiziq-kuchli); padding-left:10px;
min-width:0; overflow-wrap:anywhere; /* uzun gap mobilni buzmasin (QOIDA 48) */
}
.yz-uz-katta{ font-size:calc((17px) * var(--matn-olcham)); color:var(--matn); }
.yz-uslub{
margin:0 0 12px; color:var(--matn2);
font-size:calc((13px) * var(--matn-olcham));
}
.yz-reja{ margin:0 0 14px 20px; color:var(--matn2);
font-size:calc((14px) * var(--matn-olcham)); }
.yz-reja li{ margin-bottom:4px; }
/* ---------- 1-qadam: gap qurish ---------- */
/* Yig'ilgan qator RTL: arabcha gap o'ngdan chapga teriladi.
Bo'sh holatda ham balandligi saqlanadi — aks holda birinchi
bo'lak bosilganda sahifa sakrab ketardi. */
.yz-yigilgan{
min-height:64px; display:flex; flex-wrap:wrap; gap:6px;
align-items:center; align-content:flex-start;
border:1px dashed var(--chiziq-kuchli); border-radius:var(--radius);
background:var(--krem); padding:10px 12px; margin-bottom:12px;
}
.yz-bolaklar{
display:flex; flex-wrap:wrap; gap:6px;
direction:rtl; /* tanlov qatori ham arabcha yo'nalishda */
margin-bottom:14px; min-height:44px;
}
.yz-bosh{
color:var(--matn2); font-size:calc((13px) * var(--matn-olcham));
direction:ltr; unicode-bidi:isolate;
}
.yz-chip{
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--yuza); padding:6px 12px; cursor:pointer;
min-width:0; overflow-wrap:anywhere;
}
.yz-chip .ar{ font-size:calc((20px) * var(--ar-olcham)); line-height:1.9; }
.yz-chip:hover:not([disabled]){ border-color:var(--chiziq-kuchli); background:var(--yuza2); }
.yz-chip:focus-visible{ outline:2px solid var(--asos); outline-offset:1px; }
.yz-chip[disabled]{ opacity:.6; cursor:default; }
.yz-chip-tanlangan{ background:var(--asos-och); border-color:var(--asos); }
/* --- 3-qadam: xatoni tuzatish (QOIDA 156) ---
Gap BITTA rtl idishida turadi: so'zlar alohida `dir` olsa
brauzer ularni chapdan boshlab tizib qo'yardi (ARABCHA-TEXNIKA 2) */
.yz-tuzat-gap{
display:flex; flex-wrap:wrap; gap:6px; align-items:center;
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--krem); padding:12px; margin-bottom:10px;
}
.yz-tuz-soz{
border:1px solid transparent; border-radius:var(--radius);
background:transparent; padding:4px 8px; cursor:pointer;
font-family:inherit; color:var(--matn);
font-size:calc((20px) * var(--ar-olcham)); line-height:1.9;
min-width:0; overflow-wrap:anywhere; /* uzun so'z mobilni buzmasin (QOIDA 48) */
}
.yz-tuz-soz:hover:not([disabled]){ border-color:var(--chiziq-kuchli); background:var(--yuza); }
.yz-tuz-soz:focus-visible{ outline:2px solid var(--asos); outline-offset:1px; }
.yz-tuz-soz[disabled]{ cursor:default; }
.yz-tuz-tanlangan{ background:var(--asos-och); border-color:var(--asos); }
/* Xato so'z javob berilgach belgilanadi. Rang OGOHLANTIRISH rangida
(xato emas, «diqqat» ma'nosida) va yonida yozuv ham turadi (QOIDA 36) */
.yz-tuz-xato{
background:var(--oltin-och); border-color:var(--ogoh);
text-decoration:underline; text-decoration-style:wavy;
text-underline-offset:5px;
}
.yz-tuz-holat{
margin:0 0 12px; color:var(--matn2);
font-size:calc((13px) * var(--matn-olcham));
}
.yz-amallar{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
/* ---------- 2-qadam: tarjima ---------- */
.yz-yordam{
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--yuza2); padding:10px 12px; margin-top:10px;
}
.yz-yordam-nom{
font-size:calc((12px) * var(--matn-olcham)); color:var(--matn2);
margin:0 0 8px;
}
.yz-yordam-bosh{ color:var(--matn2); font-size:calc((13px) * var(--matn-olcham)); }
.yz-yordam-royxat{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.yz-yordam-soz{
border:1px solid var(--chiziq); border-radius:999px;
background:var(--yuza); padding:3px 12px;
font-size:calc((18px) * var(--ar-olcham)); line-height:1.9;
}
.yz-togri-ar{ font-size:calc((20px) * var(--ar-olcham)); line-height:1.9; }
.yz-izoh{ display:block; margin-top:6px; color:var(--matn2);
font-size:calc((13px) * var(--matn-olcham)); font-weight:400; }
/* ---------- 3-qadam: insho ---------- */
/* Shart so'z: arabchasi va o'zbekchasi ALOHIDA elementda —
bitta elementda aralashsa qavs noto'g'ri tomonga tushardi
(ARABCHA-TEXNIKA 2) */
/* Shart so'z — TUGMA (ETAP 48): bosilganda lug'at kartochkasi
ochiladi. Ko'rinishi eskisidek pilla bo'lib qoladi, faqat
bosilishi mumkinligi qo'l ko'rsatkichi va hover bilan
bildiriladi (QOIDA 155, 2-band). */
.yz-kerak-soz{
display:inline-flex; align-items:center; gap:8px;
border:1px solid var(--chiziq); border-radius:999px;
background:var(--yuza); padding:3px 12px;
font:inherit; color:inherit; cursor:pointer; text-align:inherit;
}
.yz-kerak-soz:hover{ border-color:var(--asos); background:var(--krem); }
.yz-kerak-soz:focus-visible{ outline:2px solid var(--asos); outline-offset:1px; }
.yz-kerak-soz .ar{ font-size:calc((18px) * var(--ar-olcham)); line-height:1.9; }
.yz-kerak-uz{ color:var(--matn2); font-size:calc((12px) * var(--matn-olcham)); }
.yz-insho{
width:100%; box-sizing:border-box; resize:vertical;
border:1px solid var(--chiziq); border-radius:var(--radius);
background:var(--yuza); color:var(--matn);
padding:12px 14px; margin-top:6px;
font-size:calc((20px) * var(--ar-olcham)); line-height:2.1;
}
.yz-insho:focus{ outline:2px solid var(--yashil); outline-offset:1px; }
.yz-insho-natija, .yz-namuna{
border:1px solid var(--chiziq); border-radius:var(--radius-karta);
background:var(--krem); padding:14px 16px; margin-top:14px;
}
.yz-insho-sarlavha{
font-size:calc((14px) * var(--matn-olcham)); font-weight:650;
margin:0 0 8px; color:var(--matn);
}
.yz-insho-izoh{
color:var(--matn2); font-size:calc((13px) * var(--matn-olcham));
margin:0 0 12px;
}
.yz-royxat{ list-style:none; margin:0 0 10px; padding:0; }
.yz-royxat li{
display:flex; flex-wrap:wrap; align-items:center; gap:8px;
padding:5px 0; border-bottom:1px solid var(--chiziq);
min-width:0; overflow-wrap:anywhere;
}
.yz-royxat li:last-child{ border-bottom:0; }
.yz-royxat .ar{ font-size:calc((18px) * var(--ar-olcham)); line-height:1.9; }
/* Rangga YOLG'IZ tayanilmaydi (QOIDA 36): yonida ✓ yoki — belgisi
va «hali ishlatilmagan» yozuvi turadi */
.yz-bor{ color:var(--yashil); }
.yz-yoq{ color:var(--matn2); }
.yz-insho-son{ font-size:calc((14px) * var(--matn-olcham)); margin:0; }
.yz-insho-tayyor{
margin:8px 0 0; color:var(--yashil);
font-size:calc((13px) * var(--matn-olcham));
}
@media (max-width:520px){
.yz-yigilgan{ padding:8px 10px; min-height:56px; }
.yz-chip{ padding:5px 10px; }
.yz-chip .ar{ font-size:calc((18px) * var(--ar-olcham)); }
.yz-insho{ font-size:calc((18px) * var(--ar-olcham)); line-height:2; }
.yz-amallar .tugma{ flex:1 1 auto; }
}
/* ============================================================
KITOB CHO'QQISI (ETAP 63 · QOIDA 171)
------------------------------------------------------------
Butun kitobni takrorlash o'yini. Darslik ro'yxatidagi katak
imtihon katagi bilan bir oilada, lekin oltin chiziqli --
«o'yin» ekani bir qarashda ajralsin. O'yinning o'zi oyna
(overlay): yopilganda o'quvchi ro'yxatning aynan o'sha
joyiga qaytadi.
============================================================ */
.chq-quti{ margin-top:14px; }
.chq-katak{
display:flex; align-items:center; gap:16px; width:100%;
text-align:left; padding:16px 18px;
border:2px solid var(--oltin); border-radius:var(--radius-karta);
background:var(--yuza); color:inherit; font:inherit; cursor:pointer;
box-shadow:var(--soya); min-width:0;
transition:transform .16s ease, box-shadow .16s ease;
}
.chq-katak:hover{ transform:translateY(-2px); box-shadow:var(--soya-kuchli); }
.chq-katak-rasm{
flex:0 0 auto; width:72px; height:56px; border-radius:var(--radius);
background:linear-gradient(#BFE0F5,#EAF5FC); display:flex; align-items:flex-end; justify-content:center;
padding:4px 4px 0;
}
.chq-katak-rasm svg{ width:100%; height:auto; display:block; }
.chq-katak-matn{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.chq-katak-nom{ font-weight:700; color:var(--asos); font-size:calc((16px) * var(--matn-olcham)); }
.chq-katak-izoh{ color:var(--matn2); font-size:calc((13px) * var(--matn-olcham)); }
.chq-katak-natija{ font-weight:600; color:var(--yashil); font-size:calc((13px) * var(--matn-olcham)); }
.chq-yulduz{ color:var(--oltin); letter-spacing:2px; }
body.chq-ochiq{ overflow:hidden; }
.chq-oyna{
position:fixed; inset:0; z-index:200;
background:rgba(15,23,42,.55);
display:flex; align-items:center; justify-content:center;
padding:16px;
}
.chq-oyna[hidden]{ display:none; }
.chq-panel{
width:100%; max-width:980px; max-height:100%; overflow:auto;
background:var(--fon); border-radius:var(--radius-karta);
box-shadow:0 20px 50px rgba(0,0,0,.3);
}
.chq-bosh{
display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:12px 18px; border-bottom:1px solid var(--chiziq); background:var(--yuza);
position:sticky; top:0; z-index:1;
}
.chq-bosh-matn{ display:flex; flex-direction:column; min-width:0; }
.chq-bosh-nom{ font-weight:700; color:var(--asos); font-size:calc((16px) * var(--matn-olcham)); }
.chq-bosh-kitob{ color:var(--matn2); font-size:calc((13px) * var(--matn-olcham)); }
.chq-yop{
flex:0 0 auto; width:36px; height:36px; border-radius:50%;
border:1px solid var(--chiziq); background:var(--yuza2); color:var(--matn);
font:inherit; font-size:calc((16px) * var(--matn-olcham)); cursor:pointer;
}
.chq-yop:hover{ background:var(--asos-och); }
.chq-ichi{ display:grid; grid-template-columns:1fr; gap:16px; padding:16px 18px 20px; }
.chq-chap{ min-width:0; }
.chq-tog{ display:block; width:100%; height:auto; max-height:240px; border-radius:14px; }
.chq-alpinist{ transition:transform .5s ease; }
.chq-holat{
display:flex; align-items:center; justify-content:space-between; gap:10px;
margin-top:10px;
}
.chq-jonlar{ display:inline-flex; gap:6px; }
.chq-jon{ width:24px; height:22px; fill:#E0464B; }
.chq-jon-yoq{ fill:var(--chiziq-kuchli); }
.chq-bosqich{
font-weight:700; color:var(--asos); font-variant-numeric:tabular-nums;
font-size:calc((14px) * var(--matn-olcham));
}
.chq-ong{ min-width:0; }
.chq-xabar{
margin:0 0 10px; padding:8px 12px; border-radius:var(--radius);
background:var(--oltin-och); border:1px solid var(--oltin);
font-size:calc((14px) * var(--matn-olcham));
}
.chq-savol{ margin:0 0 6px; font-weight:600; font-size:calc((17px) * var(--matn-olcham)); overflow-wrap:anywhere; }
.chq-savol-ar{ margin:4px 0 8px; text-align:center; }
.chq-savol-ar .ar{ font-size:calc(2.1em * var(--ar-olcham)); color:var(--asos); line-height:1.7; }
.chq-yordamlar{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 12px; }
.chq-yordam{
padding:6px 12px; min-height:34px; border-radius:999px;
border:1px solid var(--oltin); background:var(--oltin-och); color:var(--matn);
font:inherit; font-weight:600; font-size:calc((13px) * var(--matn-olcham)); cursor:pointer;
}
.chq-yordam:hover:not([disabled]){ background:var(--oltin); color:#FFFFFF; }
.chq-yordam[disabled]{ opacity:.4; cursor:default; text-decoration:line-through; }
.chq-nazar{
margin:0 0 12px; padding:10px 12px; border-radius:var(--radius);
background:var(--asos-och); border-left:4px solid var(--asos);
font-size:calc((14px) * var(--matn-olcham)); overflow-wrap:anywhere;
}
.chq-natija{ text-align:left; }
.chq-natija-sarlavha{ margin:0 0 4px; font-weight:800; color:var(--asos); font-size:calc((22px) * var(--matn-olcham)); }
.chq-yulduz-katta{ margin:0 0 6px; font-size:calc((34px) * var(--matn-olcham)); line-height:1; }
.chq-natija-izoh{ margin:0 0 12px; color:var(--matn2); font-size:calc((14px) * var(--matn-olcham)); }
.chq-raqamlar{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.chq-raqamlar span{
padding:6px 12px; border-radius:var(--radius); background:var(--yuza);
border:1px solid var(--chiziq); font-size:calc((13px) * var(--matn-olcham));
}
.chq-raqamlar b{ font-size:calc((16px) * var(--matn-olcham)); color:var(--asos); }
.chq-takror-sarlavha{ margin:6px 0 8px; font-weight:700; font-size:calc((15px) * var(--matn-olcham)); }
.chq-takror{
margin-bottom:10px; padding:10px 12px; border-radius:var(--radius);
background:var(--yuza); border:1px solid var(--chiziq);
}
.chq-takror-bosh{
display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
font-size:calc((14px) * var(--matn-olcham));
}
.chq-bet{ color:var(--matn2); font-size:calc((12px) * var(--matn-olcham)); }
.chq-takror-savol{ margin:8px 0 0; font-size:calc((13px) * var(--matn-olcham)); color:var(--matn2); overflow-wrap:anywhere; }
.chq-takror-javob{ color:var(--yashil); font-weight:600; }
.chq-takror-javob .mashq-variant-ar{ font-size:calc(1.2em * var(--ar-olcham)); }
.chq-tugmalar{ gap:8px; flex-wrap:wrap; }
@media (min-width:760px){
.chq-ichi{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:22px; padding:20px 22px 24px; }
.chq-tog{ max-height:none; }
}
@media (max-width:520px){
.chq-oyna{ padding:0; align-items:stretch; }
.chq-panel{ border-radius:0; max-height:none; height:100%; }
.chq-ichi{ padding:12px 14px 18px; gap:12px; }
.chq-tog{ max-height:170px; }
.chq-katak{ gap:12px; padding:14px; }
.chq-katak-rasm{ width:56px; height:44px; }
}
@media (prefers-reduced-motion:reduce){
.chq-katak, .chq-alpinist{ transition:none; }
}
/* ============================================================
«TERISH» O'YINLARI (ETAP 64 · QOIDA 172)
------------------------------------------------------------
«Gapni tering» va «Harflardan so'z». Yig'ilayotgan matn
alifbo mashqidagi `.mashq-tiklangan` qatorida (QOIDA 78),
bo'laklar -- `.mashq-bolak`. Gapda bo'lak SO'Z, shuning uchun
shrift kichikroq va bo'lak kengroq.
============================================================ */
.oyin-terish{ margin-top:6px; }
.oyin-terilgan{
display:flex; align-items:center; justify-content:center;
min-height:64px; padding:6px 10px; margin-bottom:14px;
border:2px dashed var(--chiziq-kuchli); border-bottom-style:dashed;
border-radius:var(--radius); background:var(--yuza);
overflow-wrap:anywhere;
}
.oyin-terilgan .ar{ font-size:calc(1.15em * var(--ar-olcham)); line-height:1.8; color:var(--asos); }
.oyin-terilgan.bosh{
font-size:calc((14px) * var(--matn-olcham)); color:var(--matn2); font-style:italic;
}
.oyin-terilgan.tog{ border-style:solid; border-color:var(--yashil); background:var(--yashil-och); }
.oyin-terilgan.xato{ border-style:solid; border-color:var(--xavf); }
.oyin-terish-gap .oyin-terilgan .ar{ font-size:calc(0.85em * var(--ar-olcham)); }
.oyin-terish-gap .mashq-bolak{ min-width:64px; }
.oyin-terish-gap .mashq-bolak .ar{ font-size:calc(1.35em * var(--ar-olcham)); }
.oyin-terish .mashq-bolak[disabled]{ opacity:.25; cursor:default; }
.oyin-terish-amallar{
display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:6px;
}
/* ============================================================
RASMLI MASHQ — YANGI TURLAR (ETAP 65 · QOIDA 173)
------------------------------------------------------------
«Rasmni tanlang»: to'rtta rasm 2×2 to'rda, har biri tugma.
To'g'ri/xato belgisi oddiy variantniki bilan BIR XIL ma'noda
(QOIDA 36): rang + chegara qalinligi.
============================================================ */
.qd-rasm-tanla{
display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px;
}
.qd-rasm-variant{
position:relative; padding:6px; min-width:0;
border:2px solid var(--chiziq); border-radius:var(--radius-karta);
background:var(--yuza); cursor:pointer; font:inherit; color:inherit;
transition:border-color .15s ease, transform .15s ease;
}
.qd-rasm-variant:hover:not([disabled]){ border-color:var(--asos); transform:translateY(-1px); }
.qd-rasm-variant .rm-svg{ display:block; width:100%; height:auto; border-radius:10px; }
.qd-rasm-variant .mashq-nr{
position:absolute; top:10px; left:10px; z-index:1;
background:var(--yuza); box-shadow:var(--soya);
}
.qd-rasm-variant[disabled]{ cursor:default; }
.qd-rasm-variant.tog{ border-color:var(--yashil); border-width:4px; background:var(--yashil-och); }
.qd-rasm-variant.xato{ border-color:var(--xavf); border-width:4px; opacity:.85; }
.qd-rasm-variant.tanlangan{ border-color:var(--asos); border-width:4px; }
@media (max-width:420px){ .qd-rasm-tanla{ gap:6px; } .qd-rasm-variant{ padding:3px; } }
@media (prefers-reduced-motion:reduce){ .qd-rasm-variant{ transition:none; } }
/* ============================================================
SERTIFIKAT YO'LI — RASM BILAN GAPIRISH (ETAP 69 · QOIDA 177)
Oyna qobig'i Kitob cho'qqisiniki (.chq-*) — ikkinchi marta
yozilmaydi (QOIDA 63); bu yerda faqat o'yinning o'z qismlari.
============================================================ */
.sy-katak{ border-color:var(--asos); }
.sy-katak-rasm{ font-size:30px; align-items:center; background:linear-gradient(#E6EEFB,#F6F9FE); }
.sy-yol{ display:block; width:100%; height:auto; background:linear-gradient(#EAF5FC,#F4FAF1); border-radius:14px; }
.sy-imtihon{
margin-top:12px; padding:10px 12px; border-radius:var(--radius);
background:var(--asos-och); border-left:4px solid var(--asos);
font-size:calc((14px) * var(--matn-olcham)); overflow-wrap:anywhere;
}
.sy-bekatlar{ display:flex; flex-direction:column; gap:8px; }
.sy-bekat{
display:flex; align-items:center; gap:12px; width:100%; text-align:left;
padding:10px 12px; border-radius:var(--radius); border:1px solid var(--chiziq);
background:var(--yuza); color:inherit; font:inherit; cursor:pointer; min-width:0;
}
.sy-bekat:hover:not([disabled]){ border-color:var(--asos); }
.sy-bekat[disabled]{ opacity:.55; cursor:default; }
.sy-otildi{ border-color:var(--yashil); }
.sy-bekat-nr{
flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
background:var(--asos); color:#FFFFFF; font-weight:700;
}
.sy-otildi .sy-bekat-nr{ background:var(--yashil); }
.sy-bekat[disabled] .sy-bekat-nr{ background:var(--chiziq-kuchli); }
.sy-bekat-matn{ flex:1 1 auto; display:flex; flex-direction:column; min-width:0; }
.sy-bekat-nom{ font-weight:700; overflow-wrap:anywhere; }
.sy-bekat-ar{ font-size:calc(1.15em * var(--ar-olcham)); color:var(--asos); font-weight:400; }
.sy-bekat-qism{ color:var(--matn2); font-size:calc((12px) * var(--matn-olcham)); }
.sy-bekat-holat{ flex:0 0 auto; font-size:calc((13px) * var(--matn-olcham)); color:var(--matn2); }
.sy-iboralar{
margin-top:14px; padding:10px 12px; border-radius:var(--radius);
background:var(--yuza); border:1px solid var(--chiziq);
}
.sy-iboralar summary{ cursor:pointer; font-weight:700; color:var(--asos); }
.sy-iboralar ul{ margin:8px 0 0; padding-left:18px; }
.sy-iboralar li{ margin:6px 0; overflow-wrap:anywhere; }
.sy-ibora-ar{ font-size:calc(1.2em * var(--ar-olcham)); }
.sy-ibora-uz{ color:var(--matn2); font-size:calc((13px) * var(--matn-olcham)); }
.sy-rasmlar{ display:grid; grid-template-columns:1fr; gap:8px; }
.sy-ikki{ grid-template-columns:1fr 1fr; }
.sy-rasm{ position:relative; margin:0; min-width:0; }
.sy-rasm svg{ display:block; width:100%; height:auto; }
.sy-rasm-nr{
position:absolute; top:6px; left:6px; z-index:1; width:24px; height:24px; border-radius:50%;
background:var(--asos); color:#FFFFFF; font-weight:700; font-size:13px;
display:flex; align-items:center; justify-content:center;
}
.sy-qadamlar{ display:flex; gap:4px; list-style:none; margin:12px 0 0; padding:0; flex-wrap:wrap; }
.sy-qadamlar li{
flex:1 1 0; min-width:56px; text-align:center; padding:6px 4px; border-radius:var(--radius);
background:var(--yuza2); color:var(--matn2); font-size:calc((12px) * var(--matn-olcham));
}
.sy-qadamlar li span{ display:block; font-weight:800; font-size:calc((15px) * var(--matn-olcham)); }
.sy-q-otildi{ background:var(--yashil-och) !important; color:var(--yashil) !important; }
.sy-q-joriy{ background:var(--asos) !important; color:#FFFFFF !important; }
.sy-chiplar{ display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:8px; margin:8px 0 12px; }
.sy-chip{
display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 6px;
border-radius:var(--radius); border:2px solid var(--chiziq); background:var(--yuza);
color:inherit; font:inherit; cursor:pointer; min-width:0;
}
.sy-chip:hover:not([disabled]){ border-color:var(--asos); }
.sy-tanlangan{ border-color:var(--asos); background:var(--asos-och); }
.sy-chip.tog{ border-color:var(--yashil); background:var(--yashil-och); }
.sy-chip.xato{ border-color:var(--xavf); border-style:dashed; }
.sy-chip.sy-yoq{ opacity:.5; }
.sy-chip-ar{ font-size:calc(1.35em * var(--ar-olcham)); line-height:1.6; }
.sy-chip-uz{ color:var(--matn2); font-size:calc((12px) * var(--matn-olcham)); }
.sy-gap .ar{ font-size:calc(1.6em * var(--ar-olcham)); }
.sy-tarjima{ margin:0 0 10px; color:var(--matn2); font-style:italic; overflow-wrap:anywhere; }
.sy-terilgan, .sy-hovuz{ display:flex; flex-wrap:wrap; gap:6px; min-height:52px; padding:8px; border-radius:var(--radius); }
.sy-terilgan{ border:2px dashed var(--asos); background:var(--asos-och); margin-bottom:10px; }
.sy-hovuz{ background:var(--yuza2); margin-bottom:12px; }
.sy-bosh-joy{ color:var(--matn2); align-self:center; font-size:calc((13px) * var(--matn-olcham)); }
.sy-bolak{
padding:4px 12px; border-radius:var(--radius); border:1px solid var(--chiziq-kuchli);
background:var(--yuza); color:inherit; font:inherit; cursor:pointer;
}
.sy-bolak .ar{ font-size:calc(1.35em * var(--ar-olcham)); line-height:1.6; }
.sy-bolak[disabled]{ opacity:.35; cursor:default; }
.sy-terilgan .sy-bolak[disabled]{ opacity:1; }
.sy-imtihonchi{ margin:0; font-weight:700; color:var(--matn2); font-size:calc((13px) * var(--matn-olcham)); }
.sy-reja{
margin:8px 0 10px; padding:10px 12px 10px 14px; border-radius:var(--radius);
background:var(--oltin-och); border:1px solid var(--oltin); font-size:calc((14px) * var(--matn-olcham));
}
.sy-reja ol{ margin:6px 0 0; padding-left:20px; }
.sy-reja li{ margin:3px 0; overflow-wrap:anywhere; }
.sy-reja-kichik{ font-size:calc((13px) * var(--matn-olcham)); }
.sy-almash, .sy-belgi{
display:block; width:100%; text-align:left; padding:8px 12px; margin:6px 0;
border-radius:var(--radius); border:1px solid var(--chiziq); background:var(--yuza);
color:inherit; font:inherit; cursor:pointer; overflow-wrap:anywhere;
}
.sy-yoqiq{ border-color:var(--yashil); background:var(--yashil-och); }
.sy-kichik{ margin:4px 0 8px; color:var(--matn2); font-size:calc((12px) * var(--matn-olcham)); }
.sy-taymer{
display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 0;
padding:14px 16px; border-radius:var(--radius-karta); background:var(--asos-och); border:2px solid var(--asos);
}
.sy-taymer-gapir{ background:var(--yuza); border-color:var(--xavf); }
.sy-taymer-nom{ font-weight:700; }
.sy-taymer-gapir .sy-taymer-nom{ color:var(--xavf); }
.sy-taymer-son{ font-size:calc((32px) * var(--matn-olcham)); font-weight:800; font-variant-numeric:tabular-nums; color:var(--asos); }
.sy-taymer-gapir .sy-taymer-son{ color:var(--xavf); }
.sy-audio{ display:block; width:100%; margin:4px 0 12px; }
.sy-namuna{
margin:10px 0; padding:12px; border-radius:var(--radius); background:var(--yuza); border:1px solid var(--chiziq);
}
.sy-namuna-ar{ margin:0 0 8px; line-height:2; }
.sy-namuna-ar .ar{ font-size:calc(1.3em * var(--ar-olcham)); }
.sy-namuna-uz{ margin:0 0 8px; color:var(--matn2); font-size:calc((13px) * var(--matn-olcham)); }
/* Ikki rasm: telefonda yonma-yon (solishtirish ko'z oldida), keng
ekranda ustma-ust — chap ustun tor, yonma-yon rasm mayda bo'lib qolardi */
@media (min-width:760px){
.sy-ikki{ grid-template-columns:1fr; }
}
/* --- ETAP 70: sinov imtihoni va konfetti --- */
#syOyna .chq-panel{ position:relative; }
.sy-imt-tugma{
display:flex; align-items:center; gap:12px; width:100%; text-align:left; margin-top:12px;
padding:12px 14px; border-radius:var(--radius-karta); border:2px solid var(--oltin);
background:var(--oltin-och); color:inherit; font:inherit; cursor:pointer; min-width:0;
}
.sy-imt-tugma:hover:not([disabled]){ box-shadow:var(--soya); }
.sy-imt-tugma[disabled]{ opacity:.6; cursor:default; border-style:dashed; }
.sy-imt-belgi{ flex:0 0 auto; font-size:28px; line-height:1; }
.sy-imt-natija{ padding:16px 18px 20px; display:flex; flex-direction:column; gap:14px; }
.sy-imt-qism{ padding:12px 14px; border-radius:var(--radius); background:var(--yuza); border:1px solid var(--chiziq); }
.sy-imt-natija .sy-imtihon ul{ margin:6px 0; padding-left:20px; }
.sy-konfetti{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.sy-konfetti span{
position:absolute; top:-12px; width:8px; height:12px; border-radius:2px; opacity:0;
animation-name:sy-tush; animation-timing-function:ease-in; animation-fill-mode:forwards;
}
@keyframes sy-tush{
0%{ transform:translateY(0) rotate(0); opacity:1; }
100%{ transform:translateY(520px) rotate(540deg); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
.sy-konfetti{ display:none; }
}