/* Ko'rish imkoniyati cheklangan foydalanuvchilar rejimi ("ko'zoynak" tugmasi).
------------------------------------------------------------------------
Sahifalar Figma dan 1:1 eksport qilingan: har bir tugunning o'lchami,
o'rni va rangi o'z inline uslubida yozilgan. Shuning uchun bu yerda
ranglar element-ma-element bekor qilinmaydi (bu 1754 qatorli layout.css
bilan sinishi aniq) — butun kadrga CSS `filter` qo'llanadi. Natija
markup'dan mutlaqo mustaqil: qaysi sahifa bo'lishidan qat'i nazar
kontrast bir xil ishlaydi.
Shrift kattalashtirish esa `zoom` orqali (page-scale.js) — matn qutilari
qat'iy px bo'lgani uchun faqat font-size ni oshirish matnni qo'shni
bloklar ustiga chiqarib yuborardi; butun kadrni kattalashtirish esa
dizayn proporsiyalarini saqlaydi.
Holat dagi data-atributlarda: data-a11y (on/off),
data-a11y-scheme, data-a11y-images, data-a11y-links. Ularni a11y.js
da, sahifa chizilishidan oldin qo'yadi — shuning uchun rejim
yoqilgan bo'lsa "oq chaqnash" (FOUC) bo'lmaydi. */
/* --------------------------------------------------------- rang sxemalari */
/* Qora fon. Butun kadr ag'dariladi, suratlar esa qayta ag'darilib o'z
holiga qaytariladi (aks holda negativ ko'rinardi). Ikonkalar ![]()
bo'lsa
ham QAYTA ag'darilmaydi: ular bir rangli va qorong'i, ag'darilgani uchun
qora fonda ochiq rangda ko'rinadi — bu aynan kerakli natija. */
:root[data-a11y-scheme="dark"],
:root[data-a11y-scheme="dark"] body { background-color: #000000 !important; }
:root[data-a11y-scheme="dark"] .page,
:root[data-a11y-scheme="dark"] .auth-overlay,
:root[data-a11y-scheme="dark"] .search-modal {
filter: invert(1) hue-rotate(180deg);
}
:root[data-a11y-scheme="dark"] .fig-img,
:root[data-a11y-scheme="dark"] .rich-text img,
:root[data-a11y-scheme="dark"] .page video {
/* Ag'darishni bekor qilamiz + rangsizlantiramiz: surat ustidagi matn
(masalan hero kartochkasi) ag'darilgach qorayadi, shuning uchun surat
yorug'roq bo'lishi kerak. */
filter: invert(1) hue-rotate(180deg) grayscale(1) brightness(1.12);
}
/* Oq-qora, kuchaytirilgan kontrast — rang ajratishda qiynaladigan
foydalanuvchilar uchun. */
:root[data-a11y-scheme="mono"] .page,
:root[data-a11y-scheme="mono"] .auth-overlay,
:root[data-a11y-scheme="mono"] .search-modal {
filter: grayscale(1) contrast(1.3);
}
/* ------------------------------------------------------ shrift kattalashtirish */
/* Butun hujjat kattalashtiriladi — xuddi brauzerning o'z zoomi (Ctrl+g'ildirak)
kabi. Bu suyuq (oqimdagi) bloklarni oyna eniga qayta oqishga majbur qiladi,
ya'ni gorizontal skroll CHIQMAYDI. Qat'iy 1920px lik kadr esa
page-scale.js tomonidan kattalashtirilgandan KEYINGI oyna eniga
moslashtiriladi.
Media so'rovlaridagi breakpointlar CSS `zoom` dan ta'sirlanmaydi (brauzer
zoomidan farqli) — ularni a11y.js koeffitsiyentga ko'paytirib qo'yadi. */
:root[data-a11y-font="big"] { zoom: var(--a11y-zoom, 1); }
/* ------------------------------------------------------------- rasmlar */
/* Surat o'chirilganda `display:none` emas, `visibility` ishlatiladi:
joylashuv dizayndagidek qoladi. To'ldiruvchi rang esa majburiy — surat
ustidagi oq matn oq fonda ko'rinmay qolmasligi uchun. */
:root[data-a11y-images="off"] .fig-bg { background-color: #132745 !important; }
:root[data-a11y-images="off"] .fig-bg .fig-img,
:root[data-a11y-images="off"] .rich-text img { visibility: hidden; }
/* -------------------------------------------------------------- havolalar */
:root[data-a11y-links="underline"] .page a,
:root[data-a11y-links="underline"] .page [role="button"] {
text-decoration: underline !important;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
/* Rejim yoqilganda klaviatura fokusi doim aniq ko'rinsin. */
:root[data-a11y="on"] .page :is(a, button, input, select, [tabindex]):focus-visible {
outline: 3px solid #ff800a !important;
outline-offset: 2px !important;
}
/* ------------------------------------------------------- sarlavhadagi tugma */
/* Ilgari bu joyda oddiy ![]()
turardi — bosilmaydigan bezak. Endi haqiqiy
tugma; o'lchami avvalgi ikonka bilan bir xil, shuning uchun dizayn
siljimaydi. */
.a11y-toggle {
flex: none;
display: flex;
width: 24px;
height: 24px;
padding: 0;
border: 0;
background: none;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
border-radius: 4px;
}
.a11y-toggle:focus-visible { outline: 2px solid #ff800a; outline-offset: 3px; }
.a11y-toggle > .icon { pointer-events: none; }
/* Rejim yoqilganini bildiruvchi nuqta. */
:root[data-a11y="on"] .a11y-toggle::after {
content: "";
position: absolute;
top: -1px;
right: -2px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #ff800a;
box-shadow: 0 0 0 2px #ffffff;
}
/* ------------------------------------------------------------- sozlamalar paneli */
/* Panel .page dan tashqarida turadi — ya'ni na `zoom`, na `filter` unga
ta'sir qiladi. Boshqaruv paneli har qanday sxemada bir xil o'qiladi. */
.a11y-panel {
--a11y-bg: #ffffff;
--a11y-fg: #132745;
--a11y-muted: #5b6b85;
--a11y-line: #d9e0ea;
--a11y-chip: #f4f6f9;
--a11y-accent: #ff800a;
--a11y-accent-ink: #ffffff;
position: fixed;
top: 16px;
right: 16px;
z-index: 300;
width: 352px;
max-width: calc(100vw - 32px);
max-height: calc(100vh - 32px);
overflow-y: auto;
padding: 20px;
border: 1px solid var(--a11y-line);
border-radius: 14px;
background-color: var(--a11y-bg);
color: var(--a11y-fg);
box-shadow: 0 18px 48px rgba(19, 39, 69, 0.18);
font-family: 'Helvetica Neue', 'HelveticaNeue', Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 1.45;
/* Yopiq holat: `visibility` tab tartibidan ham chiqaradi. */
visibility: hidden;
opacity: 0;
transform: translateY(-8px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.a11y-panel[data-open] {
visibility: visible;
opacity: 1;
transform: none;
transition-delay: 0s;
}
:root[data-a11y-scheme="dark"] .a11y-panel {
--a11y-bg: #0b0b0b;
--a11y-fg: #ffffff;
--a11y-muted: #c9c9c9;
--a11y-line: #4a4a4a;
--a11y-chip: #1b1b1b;
--a11y-accent: #ffd400;
--a11y-accent-ink: #000000;
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
}
@media (prefers-reduced-motion: reduce) {
.a11y-panel { transition: none; }
}
.a11y-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.a11y-title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; }
.a11y-note { margin: 6px 0 16px; font-size: 13px; color: var(--a11y-muted); }
.a11y-close {
flex: none;
width: 32px;
height: 32px;
margin: -4px -4px 0 0;
border: 1px solid var(--a11y-line);
border-radius: 8px;
background: none;
color: inherit;
font-size: 18px;
line-height: 1;
cursor: pointer;
}
.a11y-close:hover { background-color: var(--a11y-chip); }
.a11y-group { margin: 0 0 16px; padding: 0; border: 0; }
.a11y-legend {
padding: 0 0 8px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--a11y-muted);
}
.a11y-options { display: flex; flex-wrap: wrap; gap: 8px; }
/* Haqiqiy radio tugmalar saqlanadi (ekran o'quvchi va klaviatura uchun),
faqat ko'rinishi yashiriladi. */
.a11y-option { flex: 1 1 auto; }
.a11y-option > input {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.a11y-option > span {
display: flex;
gap: 6px;
min-height: 44px;
padding: 8px 12px;
align-items: center;
justify-content: center;
border: 1px solid var(--a11y-line);
border-radius: 10px;
background-color: var(--a11y-chip);
text-align: center;
white-space: nowrap;
cursor: pointer;
}
.a11y-option > span > b { font-weight: 700; }
.a11y-option > span:hover { border-color: var(--a11y-accent); }
.a11y-option > input:checked + span {
border-color: var(--a11y-accent);
background-color: var(--a11y-accent);
color: var(--a11y-accent-ink);
font-weight: 700;
}
.a11y-option > input:focus-visible + span {
outline: 3px solid var(--a11y-accent);
outline-offset: 2px;
}
/* Shrift o'lchami qatorida "A" harfi tanlovning o'zini ko'rsatadi. */
.a11y-option .a11y-a-1 { font-size: 14px; }
.a11y-option .a11y-a-2 { font-size: 17px; }
.a11y-option .a11y-a-3 { font-size: 20px; }
.a11y-option .a11y-a-4 { font-size: 23px; }
.a11y-reset {
display: block;
width: 100%;
min-height: 44px;
padding: 10px 14px;
border: 1px solid var(--a11y-line);
border-radius: 10px;
background: none;
color: inherit;
font: inherit;
font-weight: 600;
cursor: pointer;
}
.a11y-reset:hover { background-color: var(--a11y-chip); border-color: var(--a11y-accent); }
.a11y-reset:focus-visible { outline: 3px solid var(--a11y-accent); outline-offset: 2px; }
/* Ekran o'quvchi uchun holat xabari. */
.a11y-status {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
@media (max-width: 640px) {
.a11y-panel { top: 8px; right: 8px; left: 8px; width: auto; max-width: none; }
}