/* ============================================================
NEREZY — "OQ KASSA" (the white counter)
Bright retail counter, bank-product composure.
Colour is semantic:
action = maximum-contrast block · money = green · gold = merchandising
============================================================ */
:root {
/* Surfaces — issiq krem.
Ilgari sovuq kulrang (#F1F3F7 / #D9DFE8 / #0B1220) edi: krem fonda
ko'kimtir chiziq va siyoh kir ko'rinadi, shuning uchun butun neytral
qatori bir vaqtda issiqqa o'tkazildi. Qorong'i temaga TEGILMAGAN. */
--surface: #FAFAF7;
--raised: #FFFFFF;
--hairline: #E2DFD6;
--ink: #1A1A17;
--muted: #5E5D57;
--action-bg: #1A1A17;
--action-fg: #FFFFFF;
--money: #0A7C46;
--gold: #C9861F;
/* Gold set as TEXT. --gold is the accent (rules, dots, borders — AA for UI
components); these two are the same gold darkened/brightened so gold text
clears AA on whichever ground it lands on. */
--gold-text: #8C5C0E; /* gold text on a light ground */
--gold-text-inv: #E0B252; /* gold text on the ink action block */
--sunken: #F1EFE9; /* fondan bir pog'ona pastroq yuza */
/* Type */
--font-ui: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
--fs-label: 13px;
--fs-body: 15px;
--fs-section: 20px;
--fs-title: 28px;
--fs-hero: 44px;
/* Metrics */
--r: 2px; /* house radius: square or near-square */
/* Bosiladigan elementlar biroz yumshoqroq: kvadrat panel ichida
tugma barmoq tegadigan joy ekani ko'rinib tursin. Chipta va
panellar --r da qoladi — ular qog'oz, tugma emas. */
--r-btn: 10px;
--gutter: 16px;
--shell: 1160px;
--tear: 84px; /* stub width = tear-line position */
--notch: 10px; /* notch radius */
--bar-h: 56px;
}
[data-theme="dark"] {
--sunken: #11170F;
--surface: #0D110F;
--raised: #161C19;
--hairline: #2B342E;
--ink: #EDF1EC;
--muted: #8D9A91;
--action-bg: #EDF1EC;
--action-fg: #0D110F;
--money: #2FBF7E;
--gold: #E0B252;
--gold-text: #E0B252;
--gold-text-inv: #8C5C0E;
}
/* No-JS first visit: follow the system preference */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--sunken: #11170F;
--surface: #0D110F;
--raised: #161C19;
--hairline: #2B342E;
--ink: #EDF1EC;
--muted: #8D9A91;
--action-bg: #EDF1EC;
--action-fg: #0D110F;
--money: #2FBF7E;
--gold: #E0B252;
--gold-text: #E0B252;
--gold-text-inv: #8C5C0E;
}
}
@media (min-width: 900px) {
:root {
--fs-label: 14px;
--fs-body: 16px;
--fs-section: 24px;
--fs-title: 34px;
--fs-hero: 56px;
--tear: 100px;
--gutter: 24px;
}
}
/* ============================================================
BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html {
-webkit-text-size-adjust: 100%;
/* Skroll paneli bor-yo'qligi sahifadan sahifaga o'zgarganda butun tarkib
(jumladan yuqoridagi panel) 15px siljib "titrardi" — joyi doim band turadi */
scrollbar-gutter: stable;
}
@supports not (scrollbar-gutter: stable) {
html { overflow-y: scroll; }
}
body {
background: var(--surface);
color: var(--ink);
font-family: var(--font-ui);
font-size: var(--fs-body);
font-weight: 400;
line-height: 1.5;
min-height: 100vh;
display: flex;
flex-direction: column;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--action-fg); }
/* Focus floor — visible on every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible,
.product-item:focus-within,
.payment-item:focus-within {
outline: 2px solid var(--ink);
outline-offset: 2px;
}
[data-theme="dark"] a:focus-visible,
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] input:focus-visible,
[data-theme="dark"] .product-item:focus-within,
[data-theme="dark"] .payment-item:focus-within { outline-color: var(--ink); }
.vh {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* ============================================================
TYPE UTILITIES
============================================================ */
.mono {
font-family: var(--font-mono);
font-weight: 500;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.money {
color: var(--money);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.muted { color: var(--muted); }
.gold { color: var(--gold-text); }
.ic {
width: 20px; height: 20px;
flex: 0 0 auto;
stroke: currentColor;
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.ic-sm { width: 16px; height: 16px; stroke-width: 1.75; }
/* ============================================================
SHELL
============================================================ */
.container {
width: 100%;
max-width: var(--shell);
margin: 0 auto;
padding: 28px var(--gutter) 56px;
flex: 1;
}
.container.narrow { max-width: 760px; }
.page-game { padding-bottom: calc(var(--bar-h) + 42px); }
@media (min-width: 900px) { .container { padding-top: 40px; } }
@media (min-width: 1040px) { .page-game { padding-bottom: 72px; } }
/* ============================================================
TOPBAR — quiet, sticky, no gradient
============================================================ */
.topbar {
position: sticky;
top: 0;
z-index: 60;
background: var(--raised);
border-bottom: 1px solid var(--hairline);
}
.topbar-in {
max-width: var(--shell);
margin: 0 auto;
height: 56px;
padding: 0 var(--gutter);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.brand { display: inline-flex; align-items: center; gap: 9px; flex: 0 1 auto; min-width: 0; }
/* Belgi admin paneldan almashtiriladi — qanday nisbatda rasm kelmasin,
qat'iy kvadrat qutiga sig'adi va cho'zilmaydi (contain). */
.brand-crest { height: 28px; width: 28px; object-fit: contain; object-position: center; }
.brand-word {
font-size: 19px;
font-weight: 700;
font-stretch: 112%;
font-variation-settings: 'wdth' 112, 'wght' 700;
letter-spacing: 0.06em;
/* Balans kartasi yonida ikki qatorga sinmaydi; joy tor boʻlsa brend qisqaradi,
navbar esa hech qachon ekrandan chiqib ketmaydi. */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Tor ekran: balans kartasi joy egallaydi — brend biroz kichrayadi */
@media (max-width: 400px) {
.brand-crest { height: 24px; width: 24px; }
.brand-word { font-size: 16px; letter-spacing: 0.04em; }
}
.topnav { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.topnav-link {
display: inline-flex; align-items: center; gap: 8px;
height: 36px; padding: 0 12px;
font-size: var(--fs-label);
font-weight: 500;
color: var(--muted);
border: 1px solid transparent;
border-radius: var(--r-btn);
}
.topnav-link:hover { color: var(--ink); border-color: var(--hairline); }
.topnav-link.is-current { color: var(--ink); }
/* Kirish — asosiy chaqiriq, shuning uchun aniqroq */
.topnav-link.topnav-in { color: var(--ink); border-color: var(--hairline); font-weight: 600; }
.theme-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
background: none;
border: 1px solid var(--hairline);
border-radius: var(--r-btn);
color: var(--muted);
cursor: pointer;
}
.theme-btn:hover { color: var(--ink); }
.theme-btn .ic-moon { display: none; }
[data-theme="dark"] .theme-btn .ic-moon { display: block; }
[data-theme="dark"] .theme-btn .ic-sun { display: none; }
@media (max-width: 520px) {
.topnav-link .lbl { display: none; }
.topnav-link { padding: 0 9px; }
}
/* Tor telefon: brend + 2 havola + balans kartasi + tema tugmasi bitta qatorga sigsin */
@media (max-width: 400px) {
.topbar-in { padding: 0 12px; gap: 8px; }
.topnav { gap: 2px; }
.topnav-link { padding: 0 6px; }
.theme-btn { width: 32px; }
}
@media (max-width: 370px) {
.topbar-in { padding: 0 10px; gap: 6px; }
.brand { gap: 6px; }
.brand-word { font-size: 14px; }
.topnav-link { padding: 0 4px; }
.theme-btn { width: 30px; }
}
/* ============================================================
BUTTONS — the only filled contrast block on the page
============================================================ */
.action {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 48px;
padding: 0 24px;
background: var(--action-bg);
color: var(--action-fg);
border: 1px solid var(--action-bg);
border-radius: var(--r-btn);
font-size: var(--fs-body);
font-weight: 600;
cursor: pointer;
text-align: center;
}
.action:hover:not(:disabled) { opacity: 1; }
.action:disabled { opacity: 0.32; cursor: not-allowed; }
.action-full { width: 100%; }
.action .ic { stroke-width: 1.75; }
.ghost {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 44px;
padding: 0 18px;
background: var(--raised);
border: 1px solid var(--hairline);
border-radius: var(--r-btn);
font-size: var(--fs-label);
font-weight: 500;
color: var(--ink);
cursor: pointer;
}
.ghost:hover { border-color: var(--muted); }
/* ============================================================
FORMS
============================================================ */
.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }
.field-label {
display: block;
font-size: var(--fs-label);
font-weight: 500;
color: var(--muted);
margin-bottom: 6px;
}
.input {
width: 100%;
height: 48px;
padding: 0 14px;
background: var(--raised);
color: var(--ink);
border: 1px solid var(--hairline);
border-radius: var(--r-btn);
font-family: var(--font-mono);
font-weight: 500;
font-size: 16px;
font-variant-numeric: tabular-nums;
}
.input::placeholder { color: var(--muted); opacity: 0.65; font-family: var(--font-ui); font-weight: 400; }
.input:focus { outline: 2px solid var(--ink); outline-offset: -1px; border-color: var(--ink); }
.input.has-error { border-color: var(--ink); border-width: 2px; }
.field-hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.field-error {
display: flex; align-items: flex-start; gap: 6px;
font-size: 12px;
font-weight: 600;
color: var(--ink);
margin-top: 6px;
padding-left: 8px;
border-left: 2px solid var(--gold);
}
.field-error[hidden] { display: none; }
.duo { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 560px) {
.duo { grid-template-columns: 1fr 1fr; gap: 16px; }
.duo .field { margin-bottom: 0; }
}
/* ============================================================
HOME — opening line
============================================================ */
/* Sotuvda mahsulot yo'q o'yin sahifasi — forma o'rnida turadi */
.soon {
max-width: 560px;
margin: 28px 0 40px;
padding: 24px;
border: 1px solid var(--hairline);
border-radius: var(--r);
background: var(--raised);
}
.soon-h { font-size: var(--fs-section); font-weight: 700; margin-bottom: 8px; }
.soon-p { color: var(--muted); font-size: var(--fs-body); line-height: 1.6; }
.soon-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.opening { max-width: 620px; margin-bottom: 28px; }
.opening h1 {
font-size: var(--fs-section);
font-weight: 700;
line-height: 1.3;
margin-bottom: 6px;
}
.opening p { color: var(--muted); font-size: var(--fs-body); }
/* ============================================================
HOME HERO — do'kon peshtaxtasining ochilishi.
Yagona harakat: sarlavhadagi o'yin nomi almashadi. Qolgani —
sahifa ochilishidagi bir martalik ko'tarilish.
============================================================ */
.hero {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
align-items: center;
padding: 4px 0 30px;
}
/* Ikki ustunga faqat chipta uchun joy yetganda o'tiladi — aks holda
sarlavhadagi uzun o'yin nomi siqilib qoladi. */
@media (min-width: 1040px) {
.hero {
grid-template-columns: minmax(0, 1fr) auto;
gap: 44px;
padding: 12px 0 40px;
}
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
animation: fapRise 420ms cubic-bezier(0.2, 0, 0, 1) both;
}
.hero-dot {
flex: 0 0 auto;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--money);
animation: heroBeat 2.4s ease-in-out infinite;
}
@keyframes heroBeat {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.35; transform: scale(0.8); }
}
.hero-h {
font-size: clamp(30px, 7.2vw, var(--fs-hero));
font-weight: 700;
line-height: 1.06;
letter-spacing: -0.025em;
font-stretch: 108%;
font-variation-settings: 'wdth' 108, 'wght' 700;
}
@keyframes heroLine {
from { opacity: 0; transform: translateY(0.4em); }
to { opacity: 1; transform: none; }
}
.hero-h > .hero-l { display: block; animation: heroLine 620ms cubic-bezier(0.2, 0, 0, 1) both; }
.hero-h > .hero-l:nth-child(2) { animation-delay: 90ms; }
.hero-h > .hero-l:nth-child(3) { animation-delay: 180ms; }
.hero-h > .hero-l:nth-child(4) { animation-delay: 270ms; }
.hero-h > .hero-l:nth-child(5) { animation-delay: 360ms; }
/* Sarlavha bilan aylanuvchi o'yin nomi orasidagi ingichka chiziq */
.hero-rule {
height: 1px;
background: var(--hairline);
margin: 14px 0 12px;
max-width: 460px;
}
/* Aylanuvchi o'yin nomi — oltin, chunki bu sotilayotgan narsaning nishoni.
Kadrlar index.php da hosil bo'ladi (o'yinlar soni bazadan keladi). */
.hero-roll {
position: relative;
/* O'yin nomi bazadan keladi va uzun bo'lishi mumkin ("Mobile Legends:
Bang Bang") — shuning uchun bayonotdan bir oz kichikroq va o'z
o'lchoviga ega; balandliklar shu o'lchovga nisbatan em da. */
font-size: clamp(20px, 3.4vw, 36px);
height: 1.06em;
overflow: hidden;
color: var(--gold-text);
}
.hero-roll-in { display: block; }
.hero-roll-i {
/* Qator balandligi qat'iy 1.06em bo'lib qolishi SHART — halqa kadrlari shu
o'lchovga tayangan. Nishon ham em da, shuning uchun qator o'smaydi. */
display: flex;
align-items: center;
gap: 0.34em;
height: 1.06em;
line-height: 1.06;
white-space: nowrap;
overflow: hidden;
}
/* O'yin nishoni — muqovaning kvadrat qirqimi (yangi fayl kerak emas, sahifada
allaqachon yuklangan {slug}-card rasmi ishlatiladi). */
.hero-roll-ic {
display: block;
flex: 0 0 auto;
width: 0.94em;
height: 0.94em;
border-radius: 0.16em;
overflow: hidden;
background: var(--hairline);
}
.hero-roll-ic img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hero-roll-t {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.hero-act {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
animation: fapRise 620ms cubic-bezier(0.2, 0, 0, 1) 330ms both;
}
.hero-act .action .ic { transition: transform 220ms cubic-bezier(0.2, 0, 0, 1); }
.hero-act .action:hover .ic { transform: translateX(3px); }
/* Chiptalar charxpalagi — arzon paketlar tepadan kelib, o'rtada kattarib
aniq ko'rinadi, so'ng pastga o'tib kichrayadi. Barcha chipta bir xil
kadrlardan yuradi, faqat boshlanish nuqtasi (--d) farq qiladi. */
.hero-wheel { justify-self: start; width: 340px; max-width: 100%; }
/* Chipta 4 tadan kam boʻlsa charxpalak yoqilmaydi — u holda faqat
bittasi koʻrinsin, aks holda 2-3 chipta ustma-ust chiqib qolardi. */
.hero-wheel:not(.is-wheel) .hero-tk:not(:first-child) { display: none; }
.hero-wheel.is-wheel {
position: relative;
height: 300px;
animation: fapRise 620ms cubic-bezier(0.2, 0, 0, 1) 260ms both;
}
.hero-wheel.is-wheel .hero-tk {
position: absolute;
/* Markaz o'qi butun pikselda: balandlik qat'iy va juft, siljish -54px.
(top:50% + translateY(-50%) da chipta balandligi turlicha bo'lib,
matn kadrdan kadrga qaltirab turardi.) */
top: 50%;
margin-top: -54px;
height: 108px;
left: 0;
right: 0;
/* Chiptalar bir xil kenglikda bo'lsin: asosiy qoidadagi justify-self:start
absolut qutini matn bo'yicha qisqartirib yuboradi (har biri har xil enli
chiqadi), shuning uchun kenglik aniq beriladi. */
justify-self: stretch;
width: 100%;
max-width: none;
backface-visibility: hidden; /* qatlamda tekis rasterlanadi */
animation: tkWheel var(--tk-dur, 18s) cubic-bezier(0.4, 0, 0.15, 1) infinite;
animation-delay: var(--d, 0s);
will-change: transform, opacity;
}
/* Harakatlanayotgan havolani bosish qiyin — ustiga kelinsa charxpalak to'xtaydi */
.hero-wheel.is-wheel:hover .hero-tk,
.hero-wheel.is-wheel:focus-within .hero-tk { animation-play-state: paused; }
/* Kirish blokidagi chipta — chiptaning o'zi, kichiklashtirilgan */
.hero-tk {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: stretch;
justify-self: start;
max-width: 340px;
background: var(--raised);
border: 1px solid var(--hairline);
border-radius: 0;
color: var(--ink);
animation: fapPrint 520ms cubic-bezier(0.2, 0, 0, 1) 260ms both;
}
.hero-tk:hover { border-color: var(--muted); }
.hero-tk::before,
.hero-tk::after {
content: "";
position: absolute;
left: calc(var(--notch) * -1);
width: calc(var(--notch) * 2);
height: calc(var(--notch) * 2);
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--hairline);
clip-path: inset(0 0 0 calc(var(--notch) - 1px));
pointer-events: none;
}
.hero-tk::before { top: 16px; }
.hero-tk::after { bottom: 16px; }
.hero-tk-stub {
display: flex;
flex-direction: column;
justify-content: center;
padding: 16px 14px 16px 20px;
}
.hero-tk-num {
font-size: var(--fs-title);
font-weight: 700;
font-stretch: 118%;
font-variation-settings: 'wdth' 118, 'wght' 700;
font-variant-numeric: tabular-nums;
line-height: 1;
letter-spacing: -0.02em;
color: var(--money);
}
.hero-tk-unit {
margin-top: 5px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
.hero-tk-face {
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
padding: 16px 18px;
border-left: 1px dashed var(--hairline);
min-width: 0;
}
.hero-tk-badge {
align-self: flex-start;
padding: 2px 6px;
border: 1px solid var(--gold);
border-radius: var(--r);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gold-text);
white-space: nowrap;
}
.hero-tk-name { font-size: var(--fs-body); font-weight: 700; line-height: 1.2; }
/* Chipta faqat ikki ustunli ko'rinishda mantiqli — tor ekranda sarlavha ostida
yolg'iz qolib, o'yin kartalarini pastga surib yuborardi. Shuning uchun
1040px dan tor ekranlarda umuman chizilmaydi. */
@media (max-width: 1039px) {
.hero-tk,
.hero-wheel { display: none; }
}
.hero-tk-sub { font-size: var(--fs-label); color: var(--muted); line-height: 1.3; }
/* ============================================================
/games — O'YIN IKONKALARI
Ilova ikonkasi ko'rinishi: kvadrat muqova qirqimi, burchakda valyuta
yorlig'i va eng arzon o'yinda oltin yulduz, tagida nom va kirish narxi.
Uy uslubi kvadratga yaqin (--r: 2px) — bu yerda ataylab yumaloq: ikonka
o'z alohida tili, sahifaning qolgan qismiga tegmaydi.
============================================================ */
.gtiles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 22px 16px;
margin-bottom: 36px;
}
@media (max-width: 560px) {
.gtiles { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 18px 12px; }
}
.gtile { display: block; color: var(--ink); min-width: 0; }
.gtile-art {
position: relative;
display: block;
aspect-ratio: 1 / 1;
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--hairline);
background: var(--raised);
transition: border-color 170ms ease, transform 240ms cubic-bezier(0.2, 0, 0, 1);
}
.gtile-art img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 460ms cubic-bezier(0.2, 0, 0, 1);
}
@media (hover: hover) {
.gtile:hover .gtile-art { transform: translateY(-3px); border-color: var(--muted); }
.gtile:hover .gtile-art img { transform: scale(1.05); }
}
/* Valyuta yorlig'i PASTKI o'ng burchakda: muqovalarda o'yin logotipi yuqorida
turadi, tepaga qo'yilganda uni to'sib qolardi (sinovda shunday bo'ldi). */
.gtile-cur {
position: absolute;
bottom: 7px;
right: 7px;
padding: 2px 6px;
border-radius: 999px;
background: rgba(11, 18, 32, 0.74);
color: #FFFFFF;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
}
.gtile-star {
position: absolute;
top: 7px;
left: 7px;
width: 22px;
height: 22px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--gold);
color: var(--surface);
}
.gtile-star .ic { fill: currentColor; stroke: none; }
.ic-xs { width: 13px; height: 13px; }
.gtile-name {
display: block;
margin-top: 10px;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.045em;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gtile-price {
display: block;
margin-top: 3px;
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
.gtile:hover .gtile-art,
.gtile:hover .gtile-art img { transform: none; }
}
/* HOME — the games are the hero */
@media (min-width: 760px) { .games { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 1040px) { .games { grid-template-columns: repeat(3, 1fr); } }
/* HOME — trust row */
.trust {
display: flex;
flex-wrap: wrap;
gap: 10px 28px;
padding: 16px 0;
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
margin-bottom: 20px;
}
.trust-item {
display: flex; align-items: center; gap: 8px;
font-size: var(--fs-label);
color: var(--muted);
}
.trust-item strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.trust-item .ic { color: var(--muted); }
/* Payment wordmark chips */
.paylist { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.paylist-label { font-size: 12px; color: var(--muted); margin-right: 4px; }
.paychip {
display: inline-flex; align-items: center; gap: 8px;
height: 34px; padding: 0 12px;
border: 1px solid var(--hairline);
border-radius: var(--r);
background: var(--raised);
font-size: var(--fs-label);
font-weight: 600;
}
/* To'lov tizimlarining haqiqiy logotiplari. Rangli belgi bu yerda ataylab
qoladi — u tizimning o'z identifikatori, dizayn ranglariga bo'ysunmaydi. */
.pay-logo {
height: 22px;
width: auto;
flex: 0 0 auto;
}
.pay-logo-wide { height: 17px; } /* payme — so'zli logotip */
.pay-name { font-weight: 600; }
.pay-ic { color: var(--muted); }
.payment-item.selected .pay-ic { color: var(--action-fg); }
/* ============================================================
GAME PAGE — banner
============================================================ */
.gbanner {
position: relative;
border: 1px solid var(--hairline);
border-radius: 10px; /* egasining soʻrovi — uy uslubi 2px, banner yumshoqroq */
overflow: hidden;
background: var(--raised);
margin-bottom: 26px;
}
.gbanner img,
.gbanner-video {
width: 100%;
aspect-ratio: 1376 / 768;
max-height: 300px;
object-fit: cover;
display: block;
background: var(--surface);
}
.gbanner-scrim {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(11,18,32,0.88) 0%, rgba(11,18,32,0.35) 45%, rgba(11,18,32,0) 75%);
}
.gbanner-cap {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 18px var(--gutter);
color: #FFFFFF;
}
.gbanner-cap h1 {
font-size: var(--fs-title);
font-weight: 700;
font-stretch: 112%;
font-variation-settings: 'wdth' 112, 'wght' 700;
line-height: 1.1;
}
.gbanner-cap p { font-size: var(--fs-label); opacity: 0.82; margin-top: 4px; }
/* GAME PAGE — layout */
.buy-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
@media (min-width: 1040px) {
.buy-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; }
}
/* Steps: hairline-separated, numeral in a left gutter. No card in a card. */
.step {
display: grid;
grid-template-columns: 28px minmax(0, 1fr);
gap: 14px;
padding: 26px 0;
border-top: 1px solid var(--hairline);
}
.step:first-child { border-top: 0; padding-top: 0; }
.step-n {
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: 500;
color: var(--muted);
padding-top: 2px;
text-align: right;
}
.step-h {
font-size: var(--fs-section);
font-weight: 700;
line-height: 1.25;
margin-bottom: 4px;
}
.step-lead { font-size: var(--fs-label); color: var(--muted); margin-bottom: 16px; }
@media (min-width: 900px) {
.step { grid-template-columns: 40px minmax(0, 1fr); gap: 20px; }
}
/* ============================================================
THE DIE-CUT TICKET — the one loud object
============================================================ */
.products-grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
@media (min-width: 620px) { .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px 18px; } }
.product-item {
position: relative;
display: grid;
grid-template-columns: var(--tear) minmax(0, 1fr);
align-items: stretch;
min-height: 92px;
background: var(--raised);
border: 1px solid var(--hairline);
border-radius: 0; /* square corners — the notches supply the curves */
cursor: pointer;
user-select: none;
color: var(--ink);
}
.product-item:hover { border-color: var(--muted); }
/* the two punched holes on the left edge */
.product-item::before,
.product-item::after {
content: "";
position: absolute;
left: calc(var(--notch) * -1);
width: calc(var(--notch) * 2);
height: calc(var(--notch) * 2);
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--hairline);
clip-path: inset(0 0 0 calc(var(--notch) - 1px));
pointer-events: none;
}
.product-item::before { top: 20px; }
.product-item::after { bottom: 20px; }
.tk-radio {
position: absolute; opacity: 0; pointer-events: none;
width: 1px; height: 1px; margin: 0;
}
.tk-stub {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 14px 8px 14px 16px;
min-width: 0;
}
.tk-num {
font-size: var(--fs-title);
font-weight: 700;
font-stretch: 122%;
font-variation-settings: 'wdth' 122, 'wght' 700;
font-variant-numeric: tabular-nums;
line-height: 1;
letter-spacing: -0.02em;
}
.tk-num[data-len="4"] { font-size: calc(var(--fs-title) * 0.78); }
.tk-num[data-len="5"] { font-size: calc(var(--fs-title) * 0.64); }
.tk-num[data-len="6"] { font-size: calc(var(--fs-title) * 0.52); }
/* 7 va undan uzun raqam ham chiptaga sigʻsin */
.tk-num[data-len="7"],
.tk-num[data-len="8"] { font-size: calc(var(--fs-title) * 0.42); }
.tk-unit {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
margin-top: 5px;
}
.tk-word {
font-size: var(--fs-label);
font-weight: 700;
line-height: 1.2;
hyphens: auto;
}
/* right of the tear */
.tk-face {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
gap: 6px 10px;
padding: 14px 16px;
border-left: 1px dashed var(--hairline);
}
.tk-badge {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gold-text);
border: 1px solid var(--gold);
padding: 2px 6px;
border-radius: var(--r);
white-space: nowrap;
}
.tk-price {
margin-left: auto;
font-size: var(--fs-body);
font-weight: 700;
color: var(--money);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Valyuta paketi: yuzada belgilar, narx va birlik narxi ustma-ust turadi —
qatorga tiqilgan holatda birlik narxi sig'masdi. */
.product-item:not(.is-drop) .tk-face {
flex-direction: column;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: center;
gap: 5px;
padding-right: 34px; /* o'ng yuqoridagi belgiga joy */
}
.product-item:not(.is-drop) .tk-price { margin-left: 0; }
.tk-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-per {
font-size: 11px;
color: var(--muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.tk-badge-best { color: var(--money); border-color: var(--money); }
/* Tanlangani ko'zga tashlansin: o'ng yuqori burchakdagi belgi */
.tk-tick {
position: absolute;
top: 10px; right: 10px;
display: none;
pointer-events: none;
}
.product-item.selected .tk-tick { display: block; }
.tk-tick .ic { stroke: var(--action-fg); stroke-width: 2.4; }
/* torn off the strip */
.product-item.selected {
background: var(--action-bg);
border-color: var(--action-bg);
color: var(--action-fg);
}
.product-item.selected .tk-unit { color: var(--action-fg); opacity: 0.7; }
.product-item.selected .tk-price { color: var(--gold-text-inv); }
.product-item.selected .tk-badge { color: var(--gold-text-inv); border-color: var(--gold-text-inv); }
.product-item.selected .tk-per { color: var(--action-fg); opacity: 0.7; }
.product-item.selected .tk-badge-best { color: #45C98A; border-color: #45C98A; }
.product-item.selected .tk-face { border-left-color: var(--action-fg); } /* color-mix'siz brauzerlar uchun */
.product-item.selected .tk-face { border-left-color: color-mix(in srgb, var(--action-fg) 38%, transparent); }
.product-item.selected::before,
.product-item.selected::after { border-color: var(--action-bg); }
/* ============================================================
«BOSHQA MIQDOR» QATORI — paket emas, shuning uchun chipta ham emas.
Tayyor paketlar ostida turadigan jim, past qator: punktir ramka,
teshiklar yo'q, katta raqam yo'q. Egasi shunday so'radi (10.09).
============================================================ */
.product-item.is-qty {
grid-column: 1 / -1; /* paketlar ostida bir qator */
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 12px;
min-height: 0;
padding: 10px 12px;
background: transparent;
border-style: dashed;
cursor: default;
}
/* Chiptaning teshiklari bu yerda ortiqcha — bu qog'oz chipta emas */
.product-item.is-qty::before,
.product-item.is-qty::after { display: none; }
.qty-l {
font-size: var(--fs-label);
font-weight: 700;
}
.qty-sum {
margin-left: auto;
font-size: var(--fs-body);
font-weight: 700;
color: var(--money);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.qty-note {
flex-basis: 100%; /* o'z qatorida */
font-size: 11px;
color: var(--muted);
}
.qty-ctl { display: flex; align-items: center; gap: 6px; }
.qty-b {
flex: 0 0 32px;
width: 32px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-ui);
font-size: 17px; font-weight: 700; line-height: 1;
background: var(--raised);
color: inherit;
border: 1px solid var(--hairline);
border-radius: var(--r-btn);
cursor: pointer;
user-select: none;
}
.qty-b:hover { border-color: var(--muted); }
.qty-b:disabled { opacity: 0.38; cursor: not-allowed; }
.qty-in {
width: 78px;
height: 36px;
padding: 0 6px;
font-size: 15px;
text-align: center;
cursor: text;
user-select: text;
-moz-appearance: textfield;
appearance: textfield;
}
/* Brauzerning o'z strelkalari olib tashlanadi — bizniki qadam bilan yuradi */
.qty-in::-webkit-outer-spin-button,
.qty-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Tanlangan holat: qator ham chipta kabi siyohga ag'dariladi, lekin past.
⚠️ rgba(255,255,255,…) YOZILMAYDI — qorong'ida --action-bg bo'r rangga
aylanadi va oq boshqaruv ko'rinmay qolardi. */
/* ⚠️ `.product-item.selected` (fon = siyoh) BU BLOKDAN OLDIN turadi va
`.is-qty { background: transparent }` uni bosib ketardi: qator tanlanganda
matn oq, fon esa oq bo'lib qolardi. Shuning uchun fon shu yerda ANIQ
qaytariladi (0,3,0 — kuchliroq selektor). */
.product-item.is-qty.selected {
background: var(--action-bg);
border-style: solid;
border-color: var(--action-bg);
}
.product-item.is-qty.selected .qty-sum { color: var(--gold-text-inv); }
.product-item.is-qty.selected .qty-note { color: var(--action-fg); opacity: 0.72; }
.product-item.is-qty.selected .qty-b,
.product-item.is-qty.selected .qty-in {
background: transparent;
color: var(--action-fg);
border-color: var(--action-fg); /* color-mix'siz brauzerlar */
border-color: color-mix(in srgb, var(--action-fg) 45%, transparent);
}
.product-item.is-qty.selected .qty-b:hover { border-color: var(--action-fg); }
.product-item.is-qty.selected .qty-in:focus {
outline-color: var(--action-fg);
border-color: var(--action-fg);
}
@media (max-width: 420px) {
/* Tor ekranda summa o'z qatoriga tushadi — stepper qisilib qolmasin */
.qty-sum { margin-left: 0; }
.qty-l { flex-basis: 100%; }
}
/* ============================================================
DROP PRODUCTS — the same ticket; the stub carries a picture
instead of a big number, the face stacks name over description.
============================================================ */
.product-item.is-drop { min-height: 84px; }
.tk-stub-img {
align-items: center;
justify-content: center;
padding: 12px 8px;
}
.tk-stub-img img {
display: block;
width: 56px;
height: 56px;
object-fit: cover;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--r);
}
.tk-stub-img .tk-word {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
.product-item.is-drop .tk-face {
flex-direction: column;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: center;
gap: 4px;
}
.drop-name {
font-size: var(--fs-body);
font-weight: 700;
line-height: 1.25;
}
.drop-desc {
font-size: var(--fs-label);
line-height: 1.35;
color: var(--muted);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* price is no longer the last item on a row — it stops floating right */
.product-item.is-drop .tk-price { margin-left: 0; margin-top: 2px; }
.product-item.is-drop.selected .drop-desc { color: var(--action-fg); opacity: 0.72; }
.product-item.is-drop.selected .tk-stub-img img { border-color: var(--action-fg); }
/* ============================================================
FORM EXTRAS — quick amounts, multi-line field, checkbox line
(shared by /profile/balance and the streamer donate page)
============================================================ */
.topup-presets {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: -6px 0 18px;
}
.input-area {
width: 100%;
min-height: 96px;
padding: 12px 14px;
background: var(--raised);
color: var(--ink);
border: 1px solid var(--hairline);
border-radius: var(--r-btn);
font-family: var(--font-ui);
font-size: 16px;
line-height: 1.45;
resize: vertical;
}
.check-line {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: var(--fs-label);
line-height: 1.4;
cursor: pointer;
}
.check-line input {
flex: 0 0 auto;
width: 18px; height: 18px;
margin: 1px 0 0;
accent-color: var(--action-bg);
}
/* ============================================================
STREAMER DONATE PAGE — /@slug
============================================================ */
.stream-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
.stream-links .chip {
text-decoration: none;
color: var(--muted);
}
.stream-links .chip:hover {
color: var(--ink);
border-color: var(--muted);
}
.donate-row {
justify-content: space-between;
align-items: flex-start;
}
.donate-who { font-weight: 700; font-size: var(--fs-body); }
.donate-when { font-size: 12px; color: var(--muted); margin-left: 8px; }
.donate-msg {
margin-top: 3px;
font-size: var(--fs-label);
line-height: 1.4;
color: var(--muted);
overflow-wrap: anywhere;
}
/* ============================================================
PAYMENT CHIPS (interactive)
============================================================ */
.payments-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.pay-h {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 10px;
}
.step .pay-block { margin-bottom: 18px; }
/* Xulosa kartasi ichida: tor joy — chiptalar ustma-ust, tugmalari kichikroq */
.summary-pay:empty { display: none; }
.summary .pay-block {
padding: 14px 0;
border-bottom: 1px solid var(--hairline);
}
.summary .payments-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.summary .payment-item {
min-height: 42px;
padding: 0 10px;
justify-content: center;
gap: 6px;
font-size: var(--fs-label);
}
.summary .payment-item .pay-logo { height: 20px; width: auto; }
.summary .payment-item .pay-logo-wide { height: 20px; }
.summary .payment-item .pay-name { font-size: 12px; }
.summary .payment-item .pay-sub { font-size: 11px; }
.payment-item {
position: relative;
display: inline-flex; align-items: center; gap: 9px;
min-height: 46px;
padding: 0 16px;
background: var(--raised);
border: 1px solid var(--hairline);
border-radius: var(--r);
cursor: pointer;
user-select: none;
font-size: var(--fs-body);
font-weight: 600;
}
.payment-item:hover { border-color: var(--muted); }
.payment-item.selected {
background: var(--action-bg);
border-color: var(--action-bg);
color: var(--action-fg);
}
/* ============================================================
SUMMARY — desktop sticky column
============================================================ */
.summary {
position: sticky;
top: 76px;
display: none;
container-type: inline-size;
background: var(--raised);
border: 1px solid var(--hairline);
border-radius: var(--r);
padding: 20px;
box-shadow: 0 8px 24px rgba(26, 26, 23, 0.07);
}
[data-theme="dark"] .summary { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
@media (min-width: 1040px) { .summary { display: block; } }
.summary-game { padding-bottom: 14px; border-bottom: 1px solid var(--hairline); }
.summary-game .n { font-size: var(--fs-body); font-weight: 700; }
.summary-game .c { font-size: 12px; color: var(--muted); margin-top: 2px; }
.summary-row { padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.summary-row .k { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.summary-row .v { font-size: var(--fs-body); font-weight: 600; }
.summary-total {
padding: 16px 0 20px;
}
.summary-total .k { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.summary-total .v {
/* Ustun eni 340px — 56px'da "1 290 000 soʻm" kartadan chiqib ketardi.
Fallback avval, keyin konteyner eniga bog'langan o'lcham. */
font-size: 32px;
font-size: clamp(22px, 11cqi, 36px);
font-weight: 700;
font-stretch: 118%;
font-variation-settings: 'wdth' 118, 'wght' 700;
font-variant-numeric: tabular-nums;
line-height: 1.05;
color: var(--money);
white-space: nowrap;
}
.summary-note {
display: flex; align-items: center; gap: 7px;
font-size: 12px; color: var(--muted); margin-top: 14px;
}
/* SUMMARY — mobile bottom bar */
.summary-bar {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 55;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
min-height: var(--bar-h);
padding: 9px var(--gutter) max(9px, env(safe-area-inset-bottom));
background: var(--raised);
border-top: 1px solid var(--hairline);
box-shadow: 0 -6px 20px rgba(26, 26, 23, 0.08);
}
[data-theme="dark"] .summary-bar { box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.4); }
@media (min-width: 1040px) { .summary-bar { display: none; } }
/* Matn bloki qisqarsin, tugmani ekrandan itarib yubormasin */
.summary-bar > div:first-child { min-width: 0; flex: 1 1 auto; }
.summary-bar .action { flex: 0 0 auto; }
.summary-bar .k {
font-size: 12px; color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.summary-bar .v {
font-size: 19px;
font-weight: 700;
font-stretch: 118%;
font-variation-settings: 'wdth' 118, 'wght' 700;
font-variant-numeric: tabular-nums;
color: var(--money);
line-height: 1.15;
white-space: nowrap;
}
.summary-bar .action { min-height: 42px; padding: 0 18px; font-size: var(--fs-label); }
/* Tor telefonlar (360px va undan kichik) */
@media (max-width: 380px) {
.summary-bar { gap: 10px; }
.summary-bar .v { font-size: 17px; }
.summary-bar .action { padding: 0 13px; font-size: 13px; }
}
/* the one orchestrated moment */
.total-swap { animation: totalSwap 200ms cubic-bezier(0.2, 0, 0, 1); }
@keyframes totalSwap {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
/* ============================================================
SLIP — order receipt / lookup result
============================================================ */
.slip {
background: var(--raised);
border: 1px solid var(--hairline);
border-radius: var(--r);
padding: 20px;
}
.slip + .slip { margin-top: 14px; }
@media (min-width: 900px) { .slip { padding: 26px 28px; } }
.slip-head {
display: flex; flex-wrap: wrap; align-items: baseline;
justify-content: space-between; gap: 8px 16px;
padding-bottom: 16px;
border-bottom: 1px solid var(--hairline);
}
.slip-no {
font-family: var(--font-mono);
font-weight: 500;
font-size: var(--fs-section);
letter-spacing: -0.02em;
}
.slip-rows { padding: 6px 0; }
.slip-row {
display: flex; align-items: baseline; gap: 8px;
padding: 9px 0;
}
.slip-row .k { font-size: var(--fs-label); color: var(--muted); white-space: nowrap; }
.slip-row .lead {
flex: 1 1 auto;
min-width: 12px;
border-bottom: 1px dotted var(--hairline);
transform: translateY(-4px);
}
.slip-row .v { font-size: var(--fs-body); font-weight: 500; text-align: right; }
.slip-row .v.mono { font-size: var(--fs-label); }
.slip-total {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
padding: 16px 0 4px;
border-top: 1px solid var(--hairline);
margin-top: 6px;
}
.slip-total .k { font-size: var(--fs-label); color: var(--muted); }
.slip-total .v {
font-size: var(--fs-title);
font-weight: 700;
font-stretch: 118%;
font-variation-settings: 'wdth' 118, 'wght' 700;
font-variant-numeric: tabular-nums;
color: var(--money);
white-space: nowrap;
}
/* .chip pastdagi «KABINET» bo'limida bir marta ta'riflanadi. Bu yerda
ikkinchi nusxasi bor edi va u yumaloqlikni 2px dan 20px ga
o'zgartirib, uy uslubiga zid pill ko'rinish berardi. */
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.slip-actions {
display: flex; flex-wrap: wrap; gap: 10px;
margin-top: 20px;
}
/* order page framing */
.page-head { margin-bottom: 22px; }
.page-head h1 {
font-size: var(--fs-title);
font-weight: 700;
line-height: 1.2;
}
.page-head p { color: var(--muted); font-size: var(--fs-body); margin-top: 6px; max-width: 560px; }
/* .notice yagona joyda ta'riflanadi — pastda ikkinchi e'lon bor edi va
uning `border` qisqartmasi shu yerdagi oltin chiziqni butunlay
o'chirib yuborardi (chek sahifasidagi ogohlantirish kulrang chiqardi). */
/* lookup */
.lookup {
display: flex; flex-wrap: wrap; gap: 10px;
margin-bottom: 8px;
}
.lookup .input { flex: 1 1 240px; width: auto; }
.lookup .action { flex: 0 0 auto; }
.empty {
border: 1px solid var(--hairline);
border-radius: var(--r);
background: var(--raised);
padding: 24px 20px;
}
.empty h2 { font-size: var(--fs-section); font-weight: 700; margin-bottom: 8px; }
.empty p { color: var(--muted); font-size: var(--fs-label); max-width: 520px; }
.empty ul { margin: 12px 0 0 0; padding: 0; list-style: none; }
.empty li {
display: flex; align-items: flex-start; gap: 8px;
font-size: var(--fs-label); color: var(--muted);
padding: 4px 0;
}
.empty li .ic { color: var(--muted); margin-top: 1px; }
.result-count { font-size: var(--fs-label); color: var(--muted); margin: 22px 0 12px; }
/* ============================================================
FOOTER
============================================================ */
.footer {
margin-top: auto;
background: var(--raised);
border-top: 1px solid var(--hairline);
padding: 26px var(--gutter) 34px;
}
.footer-in {
max-width: var(--shell);
margin: 0 auto;
display: flex; flex-wrap: wrap; gap: 16px 32px;
align-items: flex-start; justify-content: space-between;
}
.footer-brand { display: inline-flex; align-items: center; gap: 8px; }
.footer-brand img { height: 22px; width: auto; }
.footer-brand span {
font-size: 16px; font-weight: 700;
font-stretch: 112%;
font-variation-settings: 'wdth' 112, 'wght' 700;
letter-spacing: 0.06em;
}
.footer-copy { font-size: 12px; color: var(--muted); margin-top: 8px; max-width: 460px; }
/* Toʻlov hamkori — futerda, jim va kichik. Logotip chrome'ning bir qismi,
shuning uchun kulrang qatorga qoʻshiladi, ajratgich chizigʻisiz. */
.footer-partner {
display: inline-flex; align-items: center; gap: 10px;
margin-top: 14px;
}
.footer-partner-l { font-size: 12px; color: var(--muted); }
/* Logotip ortida quti yo'q: qorong'i temada u qop-qora blok bo'lib,
logotipni «yamoq»dek ko'rsatardi. Endi belgi to'g'ridan-to'g'ri
futer yuzasida turadi. */
.footer-partner-a {
display: inline-flex; align-items: center; gap: 7px;
color: var(--ink);
font-size: 14px; font-weight: 700;
line-height: 1;
transition: opacity 150ms ease;
}
.footer-partner-a:hover { opacity: 0.7; }
.footer-partner-a img {
width: 22px; height: 22px; object-fit: contain; display: block;
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-nav a { font-size: var(--fs-label); color: var(--muted); }
.footer-nav a:hover { color: var(--ink); }
/* ============================================================
MOTION
============================================================ */
/* ============================================================
HARAKAT
Qoida: har sahifada bitta kirish momenti (o'sha sahifaning asosiy
obyekti), qolgani — foydalanuvchi harakatiga javob. Masofalar kichik,
davomiylik qisqa; hech narsa sakramaydi va cheksiz aylanmaydi.
============================================================ */
@keyframes fapRise {
from { opacity: 0; transform: translateY(9px); }
to { opacity: 1; transform: none; }
}
/* Bosh sahifa: o'yin kartalari — sahifaning asosiy obyekti */
/* Muqova kartasi: ko'rsatkich ustida biroz ko'tariladi, rasm sekin yaqinlashadi */
/* Ishonch qatorida animatsiya yo'q — raqamlar haqiqiy, darhol ko'rinadi */
/* Harakat kamaytirilgan bo'lsa: aylanish birinchi nomda qotadi */
@media (prefers-reduced-motion: reduce) {
.hero-roll-in { animation: none !important; transform: none !important; }
.hero-dot { animation: none !important; }
/* Charxpalak aylanmaydi — faqat eng arzon chipta turadi */
.hero-wheel.is-wheel { height: auto; }
.hero-wheel.is-wheel .hero-tk {
position: static;
height: auto;
margin-top: 0;
animation: none !important;
transform: none !important;
opacity: 1;
visibility: visible;
}
.hero-wheel.is-wheel .hero-tk:not(:first-child) { display: none; }
}
/* O'yin sahifasi: banner, so'ng chiptalar zinapoyasi */
.gbanner { animation: fapRise 380ms cubic-bezier(0.2, 0, 0, 1) both; }
.products-grid > .product-item { animation: fapRise 300ms cubic-bezier(0.2, 0, 0, 1) both; }
.products-grid > .product-item:nth-child(1) { animation-delay: 40ms; }
.products-grid > .product-item:nth-child(2) { animation-delay: 80ms; }
.products-grid > .product-item:nth-child(3) { animation-delay: 120ms; }
.products-grid > .product-item:nth-child(4) { animation-delay: 160ms; }
.products-grid > .product-item:nth-child(5) { animation-delay: 200ms; }
.products-grid > .product-item:nth-child(6) { animation-delay: 240ms; }
/* Chek: qog'oz printerdan chiqqandek yuqoridan ochiladi */
@keyframes fapPrint {
from { clip-path: inset(0 0 100% 0); opacity: 0.6; }
to { clip-path: inset(0 0 0 0); opacity: 1; }
}
.slip { animation: fapPrint 460ms cubic-bezier(0.2, 0, 0, 1) both; }
.slip + .slip { animation-delay: 90ms; }
/* Chiptani yulib olish — tanlash paytida bir marta */
@keyframes fapTear {
0% { transform: none; }
40% { transform: translateX(3px) scale(0.986); }
100% { transform: none; }
}
.product-item.tearing { animation: fapTear 230ms cubic-bezier(0.2, 0, 0, 1); }
/* Mikro-javoblar */
/* ASOSIY tugma — «peshtaxtadan ko'tarilgan qog'oz».
Sichqoncha kelganda blok ko'tariladi va TAGIDA issiq soya paydo
bo'ladi, bosilganda esa soya yig'ilib blok joyiga qaytadi — bu
bosishning haqiqiy hissi. Ilgari faqat xiralashardi (opacity .86),
ya'ni hech qanday javob bermayotgandek edi.
Bir sahifadagi ikonkalar soyasi bilan bir mantiq: ko'tarilgan
narsaning soyasi paydo bo'ladi, tekkanida yig'iladi. */
.action {
transition: transform 160ms cubic-bezier(0.2, 0, 0, 1),
box-shadow 160ms ease;
box-shadow: 0 0 0 rgba(26, 26, 23, 0);
}
.action:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(26, 26, 23, 0.22);
}
.action:active:not(:disabled) {
transform: translateY(1px);
box-shadow: 0 2px 5px rgba(26, 26, 23, 0.20);
transition-duration: 60ms;
}
[data-theme="dark"] .action:hover:not(:disabled) { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45); }
[data-theme="dark"] .action:active:not(:disabled) { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.40); }
.action .ic { transition: transform 220ms cubic-bezier(0.2, 0, 0, 1); }
.action:hover:not(:disabled) .ic { transform: translateX(3px); }
/* Harakat kamaytirilgan bo'lsa ko'tarilish yo'q, lekin javob qoladi:
soya bilan chegara aniqroq bo'ladi — tugma «o'lik» bo'lib qolmasin. */
@media (prefers-reduced-motion: reduce) {
.action:hover:not(:disabled),
.action:active:not(:disabled) { transform: none; }
.action:hover:not(:disabled) .ic { transform: none; }
}
@media (hover: hover) {
}
.product-item {
transition: background-color 170ms ease, border-color 170ms ease, color 170ms ease,
transform 200ms cubic-bezier(0.2, 0, 0, 1);
}
@media (hover: hover) {
.product-item:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
.product-item:hover { transform: none; }
}
.payment-item { transition: background-color 170ms ease, border-color 170ms ease, color 170ms ease; }
.input { transition: border-color 150ms ease, box-shadow 150ms ease; }
.topnav-link { transition: color 160ms ease, border-color 160ms ease; }
.field-error { animation: fapRise 170ms ease both; }
/* Tema tugmasi: quyosh va oy o'rin almashadi */
.theme-btn { position: relative; transition: color 160ms ease; }
.theme-btn .ic-sun,
.theme-btn .ic-moon {
display: block;
position: absolute;
top: 50%; left: 50%;
transition: opacity 200ms ease, transform 320ms cubic-bezier(0.2, 0, 0, 1);
}
.theme-btn .ic-sun { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
.theme-btn .ic-moon { opacity: 0; transform: translate(-50%, -50%) rotate(-70deg); }
[data-theme="dark"] .theme-btn .ic-sun { opacity: 0; transform: translate(-50%, -50%) rotate(70deg); }
[data-theme="dark"] .theme-btn .ic-moon { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.total-swap { animation: none; }
}
/* ============================================================
KIRISH VA KABINET
============================================================ */
.container-narrow { max-width: 640px; }
/* Balans — profil havolasidan alohida, o'z kartasida */
.topnav-bal {
display: inline-flex;
align-items: center;
gap: 7px;
height: 36px;
padding: 0 11px;
border: 1px solid var(--hairline);
border-radius: var(--r-btn);
background: var(--raised);
font-size: var(--fs-label);
font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
transition: border-color 160ms ease;
}
.topnav-bal:hover { border-color: var(--money); }
.topnav-bal .ic { stroke: var(--money); }
@media (max-width: 400px) {
.topnav-bal { padding: 0 8px; gap: 5px; font-size: 12px; }
}
@media (max-width: 370px) {
.topnav-bal { padding: 0 6px; gap: 4px; font-size: 11px; }
}
.notice {
padding: 12px 14px;
border: 1px solid var(--hairline);
border-left-width: 2px;
border-left-color: var(--gold);
border-radius: var(--r);
background: var(--raised);
font-size: var(--fs-label);
color: var(--muted);
margin: 18px 0;
}
.notice.is-done { border-left-color: var(--money); }
.notice-bad { border-color: #C0392B; border-left-color: #C0392B; color: #B03A2E; }
[data-theme="dark"] .notice-bad { border-color: #E07A6B; color: #F0A79A; }
.notice-ok { border-color: var(--money); color: var(--money); }
/* Kirish sahifasining uslublari fayl oxiridagi «KIRISH SAHIFASI» bo'limida */
.btn-quiet {
display: inline-flex; align-items: center; gap: 7px;
min-height: 38px; padding: 0 14px;
border: 1px solid var(--hairline); border-radius: var(--r-btn);
background: var(--raised); color: var(--ink);
font-size: var(--fs-label); font-weight: 600; cursor: pointer;
transition: border-color 160ms ease;
}
.btn-quiet:hover { border-color: var(--muted); }
.cab-head {
display: flex; align-items: center; gap: 14px;
padding-bottom: 18px; margin-bottom: 18px;
border-bottom: 1px solid var(--hairline);
}
.cab-head > div { flex: 1; min-width: 0; }
.cab-ava { border-radius: 50%; object-fit: cover; }
.cab-name { font-size: var(--fs-section); font-weight: 700; }
.cab-sub { font-size: 12px; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; margin-top: 3px; }
.cab-balance {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap; margin-bottom: 26px;
}
.cab-balance .k { display: block; font-size: 12px; color: var(--muted); }
.cab-balance .v { font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cab-balance-act { display: flex; gap: 10px; flex-wrap: wrap; }
.cab-block { margin-bottom: 30px; }
.cab-h { font-size: var(--fs-section); font-weight: 700; margin-bottom: 12px; }
.cab-order {
display: flex; align-items: center; justify-content: space-between;
gap: 14px; flex-wrap: wrap;
}
.cab-order-l { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cab-order-t { font-size: var(--fs-body); font-weight: 600; }
.cab-order-r { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chip {
display: inline-flex; align-items: center; gap: 7px;
padding: 4px 10px;
border: 1px solid var(--hairline);
border-radius: var(--r); /* uy uslubi — deyarli kvadrat */
font-size: 12px; font-weight: 600;
}
.chip-ok { color: var(--money); border-color: var(--money); }
.chip-done { color: var(--money); border-color: var(--money); }
.chip-wait { color: var(--gold-text); border-color: var(--gold); }
.chip-bad { color: var(--muted); }
.chip-other { color: var(--muted); }
.slip.empty { text-align: center; }
.slip.empty p { margin-bottom: 6px; }
.slip.empty .action { margin-top: 12px; }
/* ============================================================
QADAM HOLATI, HISOB TEKSHIRUVI VA TELEGRAM XABARI
(toza manzillar bilan birga kelgan yangi oqim)
============================================================ */
/* Bajarilgan qadamda raqam o'rnini yashil belgi egallaydi */
.step-n .ic-step { display: none; width: 16px; height: 16px; }
.step.is-done .step-n .n { display: none; }
.step.is-done .step-n .ic-step {
display: inline-block;
stroke: var(--money);
stroke-width: 2.2;
fill: none;
}
/* O'yin hisobini tekshirish natijasi */
.idcheck {
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px;
font-size: var(--fs-label);
color: var(--muted);
min-height: 20px;
}
.idcheck-mark {
width: 8px; height: 8px;
border-radius: 50%;
flex: 0 0 auto;
border: 1.5px solid currentColor;
background: transparent;
}
.idcheck[data-state="checking"] .idcheck-mark { animation: fapPulse 1s ease-in-out infinite; }
.idcheck[data-state="ok"] { color: var(--money); font-weight: 600; }
.idcheck[data-state="ok"] .idcheck-mark { background: currentColor; border-color: currentColor; }
.idcheck[data-state="bad"] { color: #B03A2E; font-weight: 600; }
.idcheck[data-state="bad"] .idcheck-mark { background: currentColor; border-color: currentColor; }
.idcheck[data-state="unknown"] { color: var(--gold-text); }
@keyframes fapPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
.idcheck[data-state="checking"] .idcheck-mark { animation: none; }
}
/* Telefon o'rniga Telegram — 3-qadam ostidagi izoh */
.notify-note {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 16px;
padding-left: 12px;
border-left: 2px solid var(--money);
font-size: var(--fs-label);
color: var(--muted);
}
.notify-note .ic { flex: 0 0 auto; margin-top: 2px; stroke: var(--money); }
/* Chek sahifasidagi Telegram bloki */
.notice.is-tg {
display: flex;
align-items: flex-start;
gap: 10px;
border-left-color: var(--money);
}
.notice.is-tg .ic { flex: 0 0 auto; margin-top: 2px; stroke: var(--money); }
.notice.is-tg strong { color: var(--ink); }
/* Yuborilayotgan forma — ikkinchi bosish buyurtmani takrorlamasin */
form.is-sending .action {
opacity: 0.45;
pointer-events: none;
}
/* Xulosadagi hisob qatori */
.summary-row[hidden] { display: none; }
/* ============================================================
PROFIL: BO'LIM ALMASHTIRGICH VA BUYURTMALAR TARIXI
============================================================ */
/* Bo'limlar orasidagi qator — asosiy menyuni takrorlamaydi */
.cab-tabs {
display: flex;
gap: 2px;
margin: 18px 0 22px;
border-bottom: 1px solid var(--hairline);
overflow-x: auto;
scrollbar-width: none;
}
.cab-tabs::-webkit-scrollbar { display: none; }
.cab-tab {
flex: 0 0 auto;
padding: 9px 14px;
font-size: var(--fs-label);
font-weight: 600;
color: var(--muted);
text-decoration: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
white-space: nowrap;
}
.cab-tab:hover { color: var(--ink); }
.cab-tab.is-on {
color: var(--ink);
border-bottom-color: var(--ink);
}
/* Ko'rsatkichlar */
.cab-kpi {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--hairline);
border: 1px solid var(--hairline);
border-radius: 3px;
overflow: hidden;
margin-bottom: 18px;
}
.cab-kpi-i { background: var(--raised); padding: 14px 16px; }
.cab-kpi-i .k { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.cab-kpi-i .v {
font-size: 22px;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1.15;
}
/* Saralash qatori */
.cab-filter {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin-bottom: 6px;
}
.cab-filter .input { flex: 1 1 200px; width: auto; }
.cab-filter-sel { flex: 0 0 auto; width: auto; min-width: 150px; }
.cab-filter .action,
.cab-filter .btn-quiet { flex: 0 0 auto; }
/* Bo'lim sarlavhasi + o'ngdagi havola */
.cab-block-h {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.cab-block-h .cab-h { margin-bottom: 0; }
.cab-more { margin-top: 12px; }
/* Butun buyurtma qatori bosiladigan bo'ldi */
.cab-order-link {
text-decoration: none;
color: inherit;
transition: border-color 160ms ease;
}
.cab-order-link:hover { border-color: var(--muted); }
.cab-order-link .ic { stroke: var(--muted); flex: 0 0 auto; }
.cab-order-link:hover .ic { stroke: var(--ink); }
/* Sahifalash */
.cab-pager {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 22px;
}
.cab-pager-n { font-size: var(--fs-label); color: var(--muted); }
.btn-quiet.is-off { opacity: 0.4; cursor: default; }
/* Ichki havola — matn ichida ajralib tursin */
.link-u { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.link-u:hover { color: var(--ink); }
.payment-item .pay-sub:not(.money) {
margin-left: auto;
font-size: 11px;
color: var(--muted);
white-space: nowrap;
}
/* ============================================================
KIRISH SAHIFASI — /login
Chapda bayonot (nima uchun hisob kerak), o'ngda chek ko'rinishidagi
kirish kartasi. Sahifaning yagona kirish momenti — chekning bosilishi.
============================================================ */
/* Telefonda kirish kartasi birinchi bo'ladi — sahifaning vazifasi kirgizish;
bayonot va ro'yxat ostida qoladi. Keng ekranda ular yonma-yon turadi. */
.auth {
display: grid;
grid-template-columns: 1fr;
gap: 26px;
align-items: start;
padding: 4px 0 8px;
}
.auth-slip { order: -1; } /* telefonda: karta yuqorida */
@media (min-width: 1040px) {
.auth {
grid-template-columns: minmax(0, 1fr) 420px;
column-gap: 56px;
align-items: start;
padding: 12px 0 20px;
}
.auth-slip { order: 0; }
}
/* --- chap: bayonot --- */
.auth-h1 {
font-size: clamp(26px, 5.6vw, 40px);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.025em;
font-stretch: 108%;
font-variation-settings: 'wdth' 108, 'wght' 700;
}
.auth-h1 > .hero-l { display: block; animation: heroLine 620ms cubic-bezier(0.2, 0, 0, 1) both; }
.auth-h1 > .hero-l:nth-child(2) { animation-delay: 90ms; }
.auth-say-lead {
max-width: 46ch;
margin-top: 16px;
font-size: var(--fs-body);
color: var(--muted);
animation: fapRise 620ms cubic-bezier(0.2, 0, 0, 1) 240ms both;
}
.auth-perks {
list-style: none;
border-top: 1px solid var(--hairline);
max-width: 520px;
}
.auth-pay { margin-top: 18px; }
.auth-perk {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 0;
border-bottom: 1px solid var(--hairline);
animation: fapRise 460ms cubic-bezier(0.2, 0, 0, 1) both;
}
.auth-perk:nth-child(1) { animation-delay: 300ms; }
.auth-perk:nth-child(2) { animation-delay: 370ms; }
.auth-perk:nth-child(3) { animation-delay: 440ms; }
.auth-perk > .ic { stroke: var(--muted); margin-top: 2px; }
.auth-perk b { display: block; font-size: var(--fs-body); font-weight: 600; }
.auth-perk .s { display: block; margin-top: 2px; font-size: var(--fs-label); color: var(--muted); }
/* --- o'ng: kirish cheki --- */
.auth-slip { padding: 20px; }
@media (min-width: 900px) { .auth-slip { padding: 24px 26px; } }
.auth-card-h {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-bottom: 14px;
margin-bottom: 18px;
border-bottom: 1px dashed var(--hairline);
}
.auth-card-t {
font-size: var(--fs-title);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
font-stretch: 112%;
font-variation-settings: 'wdth' 112, 'wght' 700;
}
.auth-err {
display: flex;
align-items: flex-start;
gap: 8px;
}
.auth-err .ic { flex: 0 0 auto; margin-top: 1px; stroke-width: 2; }
.auth-way + .auth-way { margin-top: 22px; }
.auth-way-h {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 4px;
}
.auth-way-t { font-size: var(--fs-section); font-weight: 700; line-height: 1.2; }
.auth-lead { font-size: var(--fs-label); color: var(--muted); margin-bottom: 14px; }
.auth-widget { min-height: 46px; }
.auth-or {
display: flex; align-items: center; gap: 12px;
margin: 22px 0;
color: var(--muted);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.auth-or::before, .auth-or::after {
content: ""; flex: 1; height: 1px; background: var(--hairline);
}
.auth-pw .action { margin-top: 4px; }
.auth-foot {
margin-top: 18px;
padding-top: 14px;
border-top: 1px dashed var(--hairline);
font-size: var(--fs-label);
color: var(--muted);
}
/* Parolni ko'rsatish tugmasi maydon ichida turadi */
.input-eyewrap { position: relative; }
.input-eyewrap .input { padding-right: 48px; }
.input-eye {
position: absolute;
top: 1px; right: 1px; bottom: 1px;
width: 44px;
display: inline-flex; align-items: center; justify-content: center;
background: none;
border: 0;
color: var(--muted);
cursor: pointer;
transition: color 160ms ease;
}
.input-eye:hover { color: var(--ink); }
.input-eye .ic-eye-off { display: none; }
.input-eye[aria-pressed="true"] .ic-eye-on { display: none; }
.input-eye[aria-pressed="true"] .ic-eye-off { display: block; }
.input-eye[aria-pressed="true"] { color: var(--ink); }
/* Ochiladigan blok: qo'shimcha usul yoki ixtiyoriy maydon (JS'siz ishlaydi) */
.disclose { margin-top: 2px; }
.disclose-s {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-height: 46px;
padding: 0 14px;
border: 1px solid var(--hairline);
border-radius: var(--r);
background: var(--raised);
cursor: pointer;
list-style: none;
transition: border-color 160ms ease;
}
.disclose-s::-webkit-details-marker { display: none; }
.disclose-s:hover { border-color: var(--muted); }
.disclose-t { font-size: var(--fs-label); font-weight: 600; }
.disclose-c { stroke: var(--muted); transition: transform 200ms cubic-bezier(0.2, 0, 0, 1); }
.disclose[open] .disclose-s { border-color: var(--muted); }
.disclose[open] .disclose-c { transform: rotate(180deg); }
.disclose-b { padding-top: 16px; animation: fapRise 220ms cubic-bezier(0.2, 0, 0, 1) both; }
.coupon-field { margin-top: 18px; }
/* --- Katalog guruhlari (Oʻyinlar / Telegram) ---
Sarlavha bo'lim sarlavhalaridan (--fs-section) kichikroq: ular
sahifaning asosiy bo'limlari, bu esa ro'yxat ichidagi ajratgich.
Chapda qisqa oltin chiziq — peshtaxtadagi yorliq kabi. */
.catgroup { margin-bottom: 26px; }
.catgroup-h {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 12px;
padding-left: 11px;
margin-bottom: 14px;
border-left: 2px solid var(--gold);
}
.catgroup-t {
font-size: 17px;
font-weight: 700;
font-variation-settings: 'wdth' 106, 'wght' 700;
}
.catgroup-l { font-size: var(--fs-label); color: var(--muted); }
/* Rasmi hali yuklanmagan o'yin ikonkasi — bo'sh ![]()
o'rniga bosh harf */
.gtile-blank{
display:grid; place-items:center; width:100%; aspect-ratio:1/1;
background:var(--sunken); color:var(--muted);
font-size:clamp(28px,7vw,44px); font-weight:700; font-variation-settings:'wdth' 110;
}
/* ============================================================
KASSA TASMASI — bosh sahifaning quyi bo'limlari
Yangi bezak kiritilmaydi: butun struktura chiptaning ikki
belgisidan quriladi — punktir yirtish chizig'i va teshik.
============================================================ */
/* Bo'limlar orasidagi perforatsiya. Chetlaridagi teshiklar
.product-item dagi kesim geometriyasini takrorlaydi. */
.perf {
position: relative;
height: 0;
border-top: 1px dashed var(--hairline);
margin: 34px 0;
}
.perf::before,
.perf::after {
content: "";
position: absolute;
top: 50%;
width: calc(var(--notch) * 2);
height: calc(var(--notch) * 2);
margin-top: calc(var(--notch) * -1);
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--hairline);
}
.perf::before {
left: calc(var(--notch) * -1 - 1px);
clip-path: inset(0 0 0 calc(var(--notch) - 1px));
}
.perf::after {
right: calc(var(--notch) * -1 - 1px);
clip-path: inset(0 calc(var(--notch) - 1px) 0 0);
}
.sec { margin-bottom: 4px; }
.sec-h {
font-size: var(--fs-section);
font-weight: 700;
font-variation-settings: 'wdth' 108, 'wght' 700;
letter-spacing: -0.01em;
}
.sec-lead {
margin-top: 8px;
max-width: 62ch;
color: var(--muted);
font-size: var(--fs-body);
line-height: 1.6;
}
/* --- Uch qadam: bitta uzluksiz tasma, kartalar emas ---
Ajratgichlar punktir va uchlarida TESHIK bor — chiptadagi kabi
perforatsiya. Raqam kichkina siyoh chipida: u har hujayraga ritm
beradi va o'yin sahifasidagi 01/02/03 bilan bir tilda gapiradi. */
.roll {
position: relative;
margin-top: 22px;
display: grid;
grid-template-columns: 1fr;
background: var(--raised);
border: 1px solid var(--hairline);
border-radius: var(--r);
box-shadow: 0 6px 22px rgba(26, 26, 23, 0.05);
}
[data-theme="dark"] .roll { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.30); }
.roll-cell { position: relative; padding: 22px 20px 24px; }
/* Ajratgich FON sifatida chiziladi — shunda ::before va ::after ikkala
uchidagi teshik uchun bo'sh qoladi (chiptadagi perforatsiya kabi). */
.roll-cell + .roll-cell {
background-image: linear-gradient(90deg, var(--hairline) 50%, transparent 0);
background-size: 8px 1px;
background-repeat: repeat-x;
background-position: left top;
}
.roll-cell + .roll-cell::before,
.roll-cell + .roll-cell::after {
content: "";
position: absolute;
width: calc(var(--notch) * 2);
height: calc(var(--notch) * 2);
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--hairline);
}
/* Mobil: ajratgich gorizontal -> teshiklar chap va o'ng chetda */
.roll-cell + .roll-cell::before {
top: calc(var(--notch) * -1 - 1px);
left: calc(var(--notch) * -1 - 1px);
clip-path: inset(0 0 0 calc(var(--notch) - 1px));
}
.roll-cell + .roll-cell::after {
top: calc(var(--notch) * -1 - 1px);
right: calc(var(--notch) * -1 - 1px);
clip-path: inset(0 calc(var(--notch) - 1px) 0 0);
}
.roll-n {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px; height: 26px;
background: var(--action-bg);
color: var(--action-fg);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
font-variant-numeric: tabular-nums;
border-radius: var(--r);
}
.roll-h {
margin-top: 12px;
font-size: 17px;
font-weight: 700;
font-variation-settings: 'wdth' 106, 'wght' 700;
}
.roll-p { margin-top: 7px; font-size: var(--fs-label); color: var(--muted); line-height: 1.65; }
.roll-out {
display: flex; align-items: flex-start; gap: 9px;
margin-top: 16px;
font-size: var(--fs-label);
color: var(--muted);
line-height: 1.6;
}
.roll-out .ic { color: var(--muted); flex: 0 0 auto; margin-top: 2px; }
.roll-out strong { color: var(--ink); font-weight: 600; }
@media (min-width: 760px) {
.roll { grid-template-columns: repeat(3, 1fr); }
/* Desktop: ajratgich vertikal -> teshiklar yuqori va pastki chetda */
.roll-cell + .roll-cell {
background-image: linear-gradient(180deg, var(--hairline) 50%, transparent 0);
background-size: 1px 8px;
background-repeat: repeat-y;
background-position: left top;
}
.roll-cell + .roll-cell::before {
top: calc(var(--notch) * -1 - 1px);
left: calc(var(--notch) * -1);
right: auto;
clip-path: inset(calc(var(--notch) - 1px) 0 0 0);
}
.roll-cell + .roll-cell::after {
top: auto;
bottom: calc(var(--notch) * -1 - 1px);
left: calc(var(--notch) * -1);
right: auto;
clip-path: inset(0 0 calc(var(--notch) - 1px) 0);
}
}
/* --- Kafolat: chiptaning ORQASI ---
Chap chetdagi o'zak va teshiklar .product-item bilan aynan bir xil
geometriyada (--tear, --notch) — shu sababli u yangi shakl emas,
saytda allaqachon bor bo'lgan narsaning boshqa yuzi. */
.stubcard {
position: relative;
margin-top: 22px;
display: grid;
grid-template-columns: 1fr;
background: var(--raised);
border: 1px solid var(--hairline);
border-radius: var(--r);
box-shadow: 0 6px 22px rgba(26, 26, 23, 0.05);
}
[data-theme="dark"] .stubcard { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.30); }
.stubcard-stub {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
border-bottom: 1px dashed var(--hairline);
color: var(--gold-text);
}
.stubcard-ic { width: 20px; height: 20px; color: var(--gold-text); }
.stubcard-word {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.terms { padding: 4px 18px 8px; }
.terms-row { padding: 15px 0; border-top: 1px solid var(--hairline); }
.terms-row:first-child { border-top: 0; }
.terms-t { font-size: var(--fs-body); font-weight: 600; }
.terms-d {
margin: 5px 0 0;
font-size: var(--fs-label);
color: var(--muted);
line-height: 1.65;
max-width: 56ch;
}
@media (min-width: 760px) {
.stubcard { grid-template-columns: var(--tear) minmax(0, 1fr); }
.stubcard-stub {
flex-direction: column;
justify-content: center;
gap: 12px;
padding: 22px 0;
border-bottom: 0;
border-right: 1px dashed var(--hairline);
}
/* Chetdagi ikkita teshik — paket chiptasidagi kabi */
.stubcard::before,
.stubcard::after {
content: "";
position: absolute;
left: calc(var(--notch) * -1);
width: calc(var(--notch) * 2);
height: calc(var(--notch) * 2);
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--hairline);
clip-path: inset(0 0 0 calc(var(--notch) - 1px));
}
.stubcard::before { top: 24px; }
.stubcard::after { bottom: 24px; }
.stubcard-word {
writing-mode: vertical-rl;
transform: rotate(180deg);
letter-spacing: 0.2em;
}
.terms {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 34px;
padding: 8px 22px 12px;
}
.terms-row:nth-child(2) { border-top: 0; }
}
/* --- Savol-javob: chapda sarlavha va aloqa, o'ngda ro'yxat --- */
.faq-sec { display: grid; grid-template-columns: 1fr; gap: 18px; }
.faq-aside .sec-lead { margin-top: 8px; }
.faq-cta {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 14px;
font-family: var(--font-mono);
font-size: var(--fs-label);
}
.faq {
background: var(--raised);
border: 1px solid var(--hairline);
border-radius: var(--r);
box-shadow: 0 6px 22px rgba(26, 26, 23, 0.05);
overflow: hidden;
}
[data-theme="dark"] .faq { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.30); }
.faq .disclose { margin-top: 0; border-top: 1px solid var(--hairline); }
.faq .disclose:first-child { border-top: 0; }
.faq .disclose-s {
min-height: 56px;
border: 0;
border-radius: 0;
background: transparent;
padding: 0 18px;
/* Ochilganda chapdagi oltin chiziq holatni ko'rsatadi */
border-left: 2px solid transparent;
transition: background-color 150ms ease, border-left-color 150ms ease;
}
.faq .disclose-s:hover { border: 0; border-left: 2px solid transparent; background: var(--sunken); }
.faq .disclose[open] .disclose-s {
border: 0;
border-left: 2px solid var(--gold);
background: var(--sunken);
}
.faq .disclose-t { font-size: var(--fs-body); font-weight: 600; }
.faq .disclose-b { padding: 0 18px 18px 20px; background: var(--sunken); }
.faq-a { font-size: var(--fs-label); color: var(--muted); line-height: 1.75; max-width: 70ch; }
@media (min-width: 900px) {
.faq-sec { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 40px; }
.faq-aside { padding-top: 2px; }
}
/* Ishonch qatoridan keyingi birinchi bo'lim uchun nafas */
.sec-first { margin-top: 30px; }
/* ============================================================
SUZAYOTGAN O'YIN IKONKALARI (faqat bosh sahifa, .gtiles-float)
------------------------------------------------------------
Ishonarli bo'lishi uchun ikki narsa birga harakatlanadi:
ikonka yuqoriga ko'tariladi, TAGIDAGI SOYA esa joyida qolib
kichrayadi va yumshaydi. Soyasiz bu shunchaki sirg'anish
bo'lardi. Har ikonkaning davri va fazasi HAR XIL — aks holda
oltitasi bir vaqtda ko'tarilib, to'lqin (marquee) bo'lib
qolardi; mustaqil suzayotgan buyumlar shunday ko'rinmaydi.
============================================================ */
:root { --tile-shadow: rgba(26, 26, 23, 0.30); }
[data-theme="dark"] { --tile-shadow: rgba(0, 0, 0, 0.62); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) { --tile-shadow: rgba(0, 0, 0, 0.62); }
}
.gtiles-float .gtile { --fd: 5.4s; --fdl: 0s; }
/* Soya ikonkadan tashqarida chiziladi, shuning uchun kesish
rasmning o'ziga ko'chiriladi. Nishonlar baribir ichkarida. */
.gtiles-float .gtile-art {
overflow: visible;
will-change: transform;
animation: gtFloat var(--fd) ease-in-out var(--fdl) infinite;
}
.gtiles-float .gtile-art picture,
.gtiles-float .gtile-art img {
border-radius: 15px;
overflow: hidden;
}
.gtile-sh { position: relative; display: block; height: 0; }
/* Nom uchun joy: ikonka havoga koʻtarilganda soya pastga «uzoqlashadi»
va yozuvga tegib ketardi. Faqat suzish rejimida kengroq oraliq. */
.gtiles-float .gtile-name { margin-top: 22px; }
/* Tor va aniq «aloqa soyasi». Keng va och soya kulrang dogʻdek
koʻrinardi — ikonka yerdan uzilganini bildirmasdi. */
.gtiles-float .gtile-sh::before {
content: "";
position: absolute;
left: 25%; right: 25%;
top: 2px;
height: 6px;
border-radius: 50%;
background: var(--tile-shadow);
filter: blur(4px);
animation: gtFloatShadow var(--fd) ease-in-out var(--fdl) infinite;
}
@keyframes gtFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-9px); }
}
@keyframes gtFloatShadow {
0%, 100% { transform: scaleX(1) scaleY(1); opacity: 1; }
50% { transform: scaleX(0.72) scaleY(0.7); opacity: 0.42; }
}
/* Har ikonka o'z sur'atida. Manfiy kechikish — sahifa ochilganda
hammasi «boshlanmaydi», har biri harakatning o'rtasidan davom etadi. */
.gtiles-float .gtile:nth-child(6n + 1) { --fd: 5.4s; --fdl: -0.7s; }
.gtiles-float .gtile:nth-child(6n + 2) { --fd: 6.3s; --fdl: -2.4s; }
.gtiles-float .gtile:nth-child(6n + 3) { --fd: 4.9s; --fdl: -1.1s; }
.gtiles-float .gtile:nth-child(6n + 4) { --fd: 5.9s; --fdl: -3.2s; }
.gtiles-float .gtile:nth-child(6n + 5) { --fd: 6.7s; --fdl: -1.9s; }
.gtiles-float .gtile:nth-child(6n + 6) { --fd: 5.1s; --fdl: -4.0s; }
/* Sichqoncha ustiga kelganda suzish to'xtaydi — harakatdagi
nishonni bosish noqulay. Hover ko'tarilishi ham qo'llanmaydi:
u animatsiya bilan bir xil xossaga (transform) tegadi. */
@media (hover: hover) {
.gtiles-float .gtile:hover .gtile-art,
.gtiles-float .gtile:focus-visible .gtile-art,
.gtiles-float .gtile:hover .gtile-sh::before {
animation-play-state: paused;
}
.gtiles-float .gtile:hover .gtile-art { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) {
.gtiles-float .gtile-art,
.gtiles-float .gtile-sh::before { animation: none; }
.gtiles-float .gtile-art { transform: none; }
}
/* ============================================================
KATALOG HONALARI — /games dagi ikkita «eshik»
(Oʻyinlar va Telegram; egasining qarori, 2026-09-08).
Yangi vizual til KIRITILMAYDI: muqova + scrim + yozuv aynan
o'yin sahifasidagi `.gbanner` dan, ko'tarilish va issiq soya
esa `.action` dan olingan — ya'ni «bosiladigan narsa
ko'tariladi, soyasi paydo bo'ladi» mantig'i saqlanadi.
⚠️ Bosh sahifada honalar YO'Q — u yerda hamma ikonka bitta
uzluksiz to'rda turadi.
============================================================ */
.rooms {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
margin-bottom: 36px;
}
@media (min-width: 760px) {
.rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
.room {
display: block;
color: var(--ink);
background: var(--raised);
border: 1px solid var(--hairline);
border-radius: var(--r-btn);
overflow: hidden;
box-shadow: 0 0 0 rgba(26, 26, 23, 0);
transition: transform 180ms cubic-bezier(0.2, 0, 0, 1),
box-shadow 180ms ease,
border-color 170ms ease;
}
.room-art {
position: relative;
display: block;
background: var(--sunken);
}
.room-art img {
display: block;
width: 100%;
aspect-ratio: 1376 / 768;
/* Kartaning eni desktopda ~520px — muqova balandligi shundan
chiqadi; mobilda esa to'liq enda 200px atrofida bo'ladi. */
max-height: 300px;
object-fit: cover;
transition: transform 460ms cubic-bezier(0.2, 0, 0, 1);
}
.room-scrim {
position: absolute;
inset: 0;
background: linear-gradient(to top,
rgba(11, 18, 32, 0.88) 0%,
rgba(11, 18, 32, 0.35) 45%,
rgba(11, 18, 32, 0) 75%);
}
.room-cap {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 16px 18px;
color: #FFFFFF;
}
.room-t {
display: block;
font-size: var(--fs-title);
font-weight: 700;
line-height: 1.1;
font-variation-settings: 'wdth' 112, 'wght' 700;
}
.room-l {
display: block;
margin-top: 4px;
font-size: var(--fs-label);
opacity: 0.82;
}
.room-foot {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 16px;
border-top: 1px solid var(--hairline);
}
.room-n {
font-size: var(--fs-label);
color: var(--muted);
}
.room-from {
font-size: var(--fs-label);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* Strelka o'ng chetga: qolgan bo'sh joyni o'zi oladi */
.room-go {
margin-left: auto;
display: inline-flex;
color: var(--muted);
transition: transform 220ms cubic-bezier(0.2, 0, 0, 1), color 170ms ease;
}
@media (hover: hover) {
.room:hover {
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(26, 26, 23, 0.16);
border-color: var(--muted);
}
.room:hover .room-art img { transform: scale(1.04); }
.room:hover .room-go { transform: translateX(3px); color: var(--ink); }
}
.room:focus-visible { border-color: var(--muted); }
[data-theme="dark"] .room:hover { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .room:hover { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
.room:hover { transform: none; }
.room:hover .room-art img,
.room:hover .room-go { transform: none; }
}
/* Yo'l ko'rsatkichi: Katalog / Oʻyinlar */
.crumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 16px;
font-size: var(--fs-label);
color: var(--muted);
}
.crumbs a { color: var(--muted); border-bottom: 1px solid transparent; }
.crumbs a:hover { color: var(--ink); border-bottom-color: var(--hairline); }
/* Hona ichidagi «boshqa boʻlim» qatori — orqaga qaytmasdan o'tish.
Ataylab jim: bu sahifaning asosiy ishi emas, chiqish yo'li. */
.roomnext {
display: flex;
align-items: baseline;
gap: 10px;
padding: 15px 16px;
color: var(--ink);
background: var(--raised);
border: 1px solid var(--hairline);
border-radius: var(--r-btn);
transition: border-color 170ms ease;
}
.roomnext-l {
font-size: var(--fs-label);
color: var(--muted);
}
.roomnext-t { font-weight: 700; }
.roomnext-s {
font-size: var(--fs-label);
color: var(--muted);
}
.roomnext-go {
margin-left: auto;
align-self: center;
color: var(--muted);
transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
}
@media (hover: hover) {
.roomnext:hover { border-color: var(--muted); }
.roomnext:hover .roomnext-go { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
.roomnext:hover .roomnext-go { transform: none; }
}
/* Hona banneri — o'yin sahifasidagi bannerdan KENGROQ tasma.
`.gbanner` 1376/768 da 300px ga kesilib, keng ekranda rasmning
o'rtadagi tor bo'lagini ko'rsatardi (ma'nosiz qirqim chiqardi).
Bu yerda nisbat ataylab keng, qaysi qatlam ko'rinishi esa
`object-position` bilan katalogdan boshqariladi. */
.room-banner img {
aspect-ratio: 1376 / 384;
max-height: 320px;
}
@media (max-width: 640px) {
.room-banner img { aspect-ratio: 1376 / 560; }
}
/* ============================================================
YUQORIDAGI PANEL — pastga tushilganda shaffoflashadi
(egasining soʻrovi, 2026-09-08).
Sahifa tepasida panel QATTIQ: brend va tugmalar peshtaxta
kabi tinch turadi. Skroll boshlangach fon yarim shaffof
boʻlib, orqasidan tarkib bilinib oʻtadi — panel sahifadan
ajralmasdan «suzib» boradi.
⚠️ Shaffoflik BLUR bilan birga keladi: blursiz yarim shaffof
fonda ikonka va matn orqadagi rasm ustiga tushib oʻqilmay
qoladi. Shuning uchun blur qoʻllab-quvvatlanmasa fon yana
qattiq --raised ga qaytariladi (@supports quyida).
============================================================ */
:root { --topbar-glass: rgba(255, 255, 255, 0.72); }
[data-theme="dark"] { --topbar-glass: rgba(22, 28, 25, 0.66); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) { --topbar-glass: rgba(22, 28, 25, 0.66); }
}
.topbar {
transition: background-color 240ms ease, box-shadow 240ms ease;
}
.topbar.is-stuck {
background: var(--topbar-glass);
-webkit-backdrop-filter: blur(14px) saturate(160%);
backdrop-filter: blur(14px) saturate(160%);
/* Juda past issiq soya: shaffof panel tarkibdan ajralib tursin */
box-shadow: 0 1px 12px rgba(26, 26, 23, 0.07);
}
[data-theme="dark"] .topbar.is-stuck { box-shadow: 0 1px 12px rgba(0, 0, 0, 0.45); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .topbar.is-stuck { box-shadow: 0 1px 12px rgba(0, 0, 0, 0.45); }
}
/* Blur yoʻq brauzerda shaffoflik oʻqishni buzadi — qattiq fon qoladi */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.topbar.is-stuck { background: var(--raised); }
}
@media (prefers-reduced-transparency: reduce) {
.topbar.is-stuck {
background: var(--raised);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
/* ============================================================
AKKOUNT SAVDO BOʻLIMI (/akkount, 2026-09-08)
Yangi vizual til YOʻQ: eʼlon kartasi `.room` dan (bosiladigan
karta — koʻtariladi, soyasi paydo boʻladi), chek `.slip` dan,
aloqa bloki `.stubcard` dan, boʻlimlar orasidagi perforatsiya
`.perf` dan olingan. Faqat shu boʻlimga xos oʻlchamlar qoʻshiladi.
============================================================ */
/* --- Sarlavha ostidagi amal qatori: sanoq + ikki tugma --- */
.accbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 18px 0 26px;
}
.accbar-n {
font-size: var(--fs-label);
color: var(--muted);
font-variant-numeric: tabular-nums;
}
/* Tugmalar oʻng chetga: sanoq chap tomonda yolgʻiz qoladi */
.accbar .action { margin-left: auto; }
@media (max-width: 620px) {
.accbar .action { margin-left: 0; width: 100%; justify-content: center; }
.accbar .btn-quiet { width: 100%; justify-content: center; }
}
/* --- Eʼlonlar roʻyxati --- */
.acclist {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin-bottom: 30px;
}
@media (min-width: 640px) { .acclist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .acclist { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.acc-card {
display: flex;
flex-direction: column;
color: var(--ink);
background: var(--raised);
border: 1px solid var(--hairline);
border-radius: var(--r-btn);
overflow: hidden;
transition: transform 180ms cubic-bezier(0.2, 0, 0, 1),
box-shadow 180ms ease,
border-color 170ms ease;
}
.acc-card-art {
position: relative;
display: block;
aspect-ratio: 16 / 9;
background: var(--sunken);
overflow: hidden;
}
.acc-card-art img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 460ms cubic-bezier(0.2, 0, 0, 1);
}
/* Rasmsiz eʼlon: singan rasm oʻrniga jim belgi */
.acc-card-blank {
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: var(--muted);
opacity: 0.42;
}
.acc-card-blank .ic { width: 42px; height: 42px; }
.acc-card-top {
position: absolute;
top: 8px;
left: 8px;
width: 22px;
height: 22px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--gold);
color: var(--surface);
}
.acc-card-top .ic { fill: currentColor; stroke: none; }
.acc-card-b {
display: flex;
flex-direction: column;
gap: 6px;
padding: 13px 15px 14px;
flex: 1 1 auto;
}
.acc-card-t {
font-size: var(--fs-body);
font-weight: 600;
line-height: 1.35;
/* Ikki qatordan oshmasin — kartalar bir xil balandlikda tursin */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.acc-card-lv { font-size: var(--fs-label); color: var(--muted); }
.acc-card-f {
display: flex;
align-items: baseline;
gap: 10px;
margin-top: auto;
padding-top: 10px;
border-top: 1px solid var(--hairline);
}
.acc-card-p { font-weight: 700; font-variant-numeric: tabular-nums; }
.acc-card-c {
margin-left: auto;
font-size: 11.5px;
color: var(--muted);
}
@media (hover: hover) {
.acc-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(26, 26, 23, 0.16);
border-color: var(--muted);
}
.acc-card:hover .acc-card-art img { transform: scale(1.04); }
}
[data-theme="dark"] .acc-card:hover { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .acc-card:hover { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
.acc-card:hover { transform: none; }
.acc-card:hover .acc-card-art img { transform: none; }
}
.acc-pager {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-bottom: 30px;
font-size: var(--fs-label);
}
/* --- Bitta eʼlon: chapda rasm va matn, oʻngda chek --- */
.acc-one { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 1040px) {
.acc-one { grid-template-columns: minmax(0, 1fr) 360px; gap: 30px; align-items: start; }
/* Chek ekran bilan birga suzadi — uzun tavsifda ham tugma koʻrinib turadi */
.acc-one-r { position: sticky; top: calc(var(--bar-h) + 18px); }
}
.acc-one-body { margin-top: 20px; }
.acc-one-body h1 {
font-size: var(--fs-title);
font-weight: 700;
line-height: 1.15;
font-variation-settings: 'wdth' 108, 'wght' 700;
}
.acc-one-body .chip { margin-top: 10px; }
.acc-one-txt {
margin-top: 14px;
font-size: var(--fs-body);
line-height: 1.75;
color: var(--muted);
max-width: 68ch;
/* Foydalanuvchi matni: uzun uzluksiz satr qatorni yorib chiqmasin */
overflow-wrap: anywhere;
}
.acc-one-r .notice { margin-top: 14px; }
/* --- Rasmlar --- */
.accgal-main {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background: var(--sunken);
border: 1px solid var(--hairline);
border-radius: var(--r-btn);
}
.accgal-th {
display: flex;
gap: 10px;
margin-top: 10px;
flex-wrap: wrap;
}
.accgal-t {
width: 84px;
padding: 0;
border: 1px solid var(--hairline);
border-radius: 8px;
background: var(--sunken);
overflow: hidden;
cursor: pointer;
transition: border-color 160ms ease;
}
.accgal-t img { display: block; width: 100%; height: 52px; object-fit: cover; }
.accgal-t.is-on { border-color: var(--ink); border-width: 2px; }
.accgal-t:hover { border-color: var(--muted); }
/* --- Qoidalar: raqamlangan roʻyxat, kartalar toʻplami EMAS --- */
.acc-rules {
margin: 14px 0 0;
padding: 0;
list-style: none;
counter-reset: accr;
border-top: 1px solid var(--hairline);
max-width: 78ch;
}
.acc-rules li {
counter-increment: accr;
position: relative;
padding: 14px 0 14px 40px;
border-bottom: 1px solid var(--hairline);
font-size: var(--fs-label);
color: var(--muted);
line-height: 1.7;
}
.acc-rules li::before {
content: counter(accr, decimal-leading-zero);
position: absolute;
left: 0;
top: 15px;
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--gold-text);
}
/* --- Aloqa bloki (`.stubcard` ning ichki ustuni) --- */
.acc-help-b { padding: 16px 18px 20px; }
@media (min-width: 760px) { .acc-help-b { padding: 22px 24px 24px; } }
.acc-help-acts {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 16px;
}
.acc-help-acts .btn-quiet { display: inline-flex; align-items: center; gap: 7px; }
/* --- Shakllar --- */
.acc-form { margin-bottom: 8px; }
.acc-form-2 { display: grid; grid-template-columns: 1fr; gap: 0 18px; }
@media (min-width: 620px) { .acc-form-2 { grid-template-columns: 1fr 1fr; } }
.acc-form select.input {
/* Brauzerning oʻz oʻqi qolsin, lekin balandlik `.input` bilan bir xil.
⚠️ Faqat `height: auto` boʻlganda select kontent boʻyicha ~24px ga
yigʻilib, yonidagi maydonlardan ikki barobar past va TOR koʻrinardi
(egasi shuni aytdi, skrinshotda tasdiqlandi). Endi tik padding va
min-height uni boshqa maydonlar bilan bir qatorga qoʻyadi. */
appearance: auto;
height: auto;
min-height: 48px;
padding: 12px 14px;
line-height: 22px;
cursor: pointer;
}
.acc-form select.input option { font-size: 15px; }
/* ⚠️ Fayl tanlash maydoni: brauzer `input[type=file]` ichidagi tugmani
vertikal MARKAZLAMAYDI — 48px balandlikdagi `.input` da u tepaga
yopishib qolardi (rasm/video yuklashda koʼrindi). Balandlik kontentga
qoldiriladi, tik padding esa uni oʼrtaga tushiradi. */
input[type="file"].input {
height: auto;
min-height: 48px;
padding: 12px 14px;
line-height: 22px;
cursor: pointer;
}
/* Egasining soʼrovi: «Choose File» soʼzining ORQASI OQ boʼlsin.
⚠️ `appearance: none` boʼlmasa brauzer oʼzining kulrang tugma bezagini
ustidan chizadi va `background` sezilmaydi. Eski WebKit (iOS Safari 16.4
dan pastda) `::file-selector-button` ni bilmaydi — shuning uchun
`::-webkit-file-upload-button` ALOHIDA qoida qilib takrorlanadi
(bittasini guruhga qoʼshsa, notanish selektor butun qoidani bekor qiladi). */
input[type="file"].input::file-selector-button {
-webkit-appearance: none;
appearance: none;
margin-right: 12px;
padding: 5px 12px;
border: 1px solid var(--hairline);
border-radius: var(--r-btn);
background: #FFFFFF;
color: #1A1A17;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
cursor: pointer;
}
input[type="file"].input::-webkit-file-upload-button {
-webkit-appearance: none;
appearance: none;
margin-right: 12px;
padding: 5px 12px;
border: 1px solid var(--hairline);
border-radius: var(--r-btn);
background: #FFFFFF;
color: #1A1A17;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
cursor: pointer;
}
input[type="file"].input::file-selector-button:hover { border-color: var(--muted); }
input[type="file"].input::-webkit-file-upload-button:hover { border-color: var(--muted); }
.acc-agree {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: var(--fs-label);
color: var(--muted);
line-height: 1.6;
cursor: pointer;
}
.acc-agree input { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--ink); }
.acc-sides { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.acc-side {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border: 1px solid var(--hairline);
border-radius: var(--r-btn);
background: var(--raised);
font-size: var(--fs-label);
cursor: pointer;
transition: border-color 160ms ease, background-color 160ms ease;
}
.acc-side input { accent-color: var(--ink); }
.acc-side:hover { border-color: var(--muted); }
/* Tanlangani chek chiptasi kabi siyohga agʻdariladi */
.acc-side:has(input:checked) {
background: var(--action-bg);
color: var(--action-fg);
border-color: var(--action-bg);
}
.acc-side:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
/* --- «Mening eʼlonlarim» --- */
.acc-mine { margin-top: 12px; border-top: 1px solid var(--hairline); }
.acc-mine-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 12px 0;
border-bottom: 1px solid var(--hairline);
font-size: var(--fs-label);
}
.acc-mine-row .mono { color: var(--muted); font-size: 11.5px; }
.acc-mine-row .chip { margin-left: auto; }
/* ⚠️ Eʼlon narxi yetti xonali boʻlishi mumkin («2 450 000 soʻm»), yon ustun
esa atigi 360px: `.slip-total .v` dagi `white-space: nowrap` va
kengaytirilgan shrift (wdth 118) qiymatni kartadan CHIQARIB yuborardi
(skrinshotda koʻrindi). Shu boʻlimda shrift kengligi meʼyorga qaytariladi
va zarur boʻlsa qiymat yangi qatorga tushadi. */
.acc-one-r .slip-total { flex-wrap: wrap; }
.acc-one-r .slip-total .v {
font-size: clamp(21px, 2vw, 27px);
font-stretch: 100%;
font-variation-settings: 'wdth' 100, 'wght' 700;
}
/* Asosiy tugma ostidagi bir qatorlik izoh — tugmaning oʻzi qisqa qoladi */
.acc-one-hint {
margin-top: 10px;
font-size: 12px;
color: var(--muted);
line-height: 1.55;
}
/* ⚠️ Saytdagi `.input` MASHINA qiymatlari uchun mono shriftda (Player ID,
chek raqami, telefon). Bu boʻlimdagi maydonlar esa odam yozadigan matn —
sarlavha, ism, tavsif — va monoda gʻalati koʻrinardi (skrinshotda
koʻrindi). Narx maydoni `.mono` sinfi bilan monoda qoladi. */
.acc-form .input:not(.mono),
.acc-form select.input,
.acc-form textarea.input { font-family: var(--font-ui); }
/* ⚠️ Rasm yuklamagan eʼlonda chap ustun BUTUNLAY boʻsh qolar edi: keng
ekranda sarlavha yonida katta oq maydon turardi (skrinshotda koʻrindi).
Endi galereya oʻrnida oʻsha oʻlchamdagi jim belgi turadi — sahifaning
ikki ustunli tuzilishi buzilmaydi. */
.accgal-none {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
aspect-ratio: 16 / 9;
max-height: 320px;
border: 1px dashed var(--hairline);
border-radius: var(--r);
background: var(--raised);
color: var(--muted);
font-size: 12.5px;
}
.accgal-none-ic { width: 38px; height: 38px; opacity: .55; }
/* «Boshqa eʼlonlar» ostidagi honaga qaytish havolasi */
.acc-more-all { margin-top: 14px; }
/* «Kelishilgan» — pul emas, shuning uchun `.slip-total .v` ning yashil
rangi qoʻllanmaydi (yashil butun saytda faqat summa uchun). */
.acc-one-r .slip-total .v.acc-price-deal { color: var(--ink); font-size: clamp(18px, 1.6vw, 22px); }
/* ==================================================================
AKKOUNT SAVDOSI — mijoz suhbati (/market/chat/)
Yangi vizual til YOʻQ: pufakchalar `.slip` ning chegara/radius
qiymatlarini oladi, oʻz javobi siyoh blok (sayt boʻylab «harakat»
rangi), administrator javobi esa oq varaq.
================================================================== */
.chat { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 18px; }
.chat-m { max-width: 78%; }
.chat-m.is-client { align-self: flex-end; text-align: right; }
.chat-b {
padding: 11px 13px;
border: 1px solid var(--hairline);
border-radius: var(--r);
background: var(--raised);
font-size: 14px;
line-height: 1.55;
text-align: left;
overflow-wrap: anywhere;
}
.chat-m.is-client .chat-b {
background: var(--action-bg);
border-color: var(--action-bg);
color: var(--action-fg);
}
.chat-meta { margin-top: 5px; font-size: 11.5px; color: var(--muted); }
.chat-form { margin-top: 0; }
.acc-mythreads .acc-mine-row { text-decoration: none; }
.acc-mythreads .acc-mine-row:hover { background: var(--surface); }
@media (max-width: 560px) {
.chat-m { max-width: 92%; }
}
/* ==================================================================
SOTUVCHI BOʻLISH QADAMLARI (/market/sell)
Eshikdagi `.roll` bilan bir uslub: raqam — kichik siyoh kvadrat,
bajarilgan qadamda esa yashil belgi (chek sahifasidagi qoida).
================================================================== */
.acc-steps {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
margin: 0 0 22px;
border: 1px solid var(--hairline);
border-radius: var(--r);
background: var(--hairline);
overflow: hidden;
list-style: none;
}
@media (min-width: 720px) {
.acc-steps { grid-template-columns: repeat(3, 1fr); }
}
.acc-step { padding: 14px 16px; background: var(--raised); }
.acc-step-n {
display: inline-flex; align-items: center; justify-content: center;
min-width: 24px; height: 24px; padding: 0 6px;
border-radius: 3px;
background: var(--surface);
color: var(--muted);
font-family: var(--font-mono);
font-size: 11px; font-weight: 600;
}
.acc-step.is-now .acc-step-n { background: var(--action-bg); color: var(--action-fg); }
.acc-step.is-done .acc-step-n { background: transparent; color: var(--money); padding: 0; }
.acc-step.is-done .acc-step-n .ic { stroke: currentColor; }
.acc-step-t {
display: block; margin-top: 9px;
font-size: 14px; font-weight: 600;
}
.acc-step.is-now .acc-step-t { font-weight: 700; }
.acc-step-p {
display: block; margin-top: 4px;
font-size: 12.5px; color: var(--muted); line-height: 1.5;
}
.page-head .chip { margin-top: 10px; }
/* ══════════════ Akkount savdo boʻlimi — bosh sahifadagi blok ══════════════
ATAYLAB boshqa shakl: sahifada raqamli tasma (.roll), chipta orqasi
(.stubcard) va ikki ustunli savol-javob (.faq-sec) bor — bu yerda
ularning hech biri takrorlanmaydi. Bu OQIM: ikki chetda odam, oʻrtada biz.
Shakl mazmunni aytadi — savdo begonalar oʻrtasida emas, biz orqali oʻtadi.
Yangi rang ham, shrift ham kiritilmagan: hammasi mavjud tokenlarda. */
.mkt {
margin-top: 22px;
display: grid;
grid-template-columns: 1fr auto 1.15fr auto 1fr;
align-items: stretch;
gap: 0;
}
.mkt-node {
padding: 20px 18px 22px;
background: var(--raised);
border: 1px solid var(--hairline);
border-radius: var(--r);
display: flex;
flex-direction: column;
gap: 8px;
}
/* Sahifadagi YAGONA toʻla siyoh blok — koʻz darhol oʻrtaga tushadi.
Oʻrtadagi tugun kattaroq va tepaga chiqib turadi: u chetdagi ikki
tomonni ushlab turgan bugʻin ekani shakldan koʻrinsin. */
.mkt-node.is-mid {
background: var(--action-bg);
border-color: var(--action-bg);
color: var(--action-fg);
margin-top: -10px;
margin-bottom: -10px;
padding: 26px 20px 28px;
box-shadow: 0 8px 26px rgba(26, 26, 23, 0.14);
}
[data-theme="dark"] .mkt-node.is-mid { box-shadow: 0 8px 26px rgba(0, 0, 0, 0.42); }
.mkt-ic { width: 24px; height: 24px; color: var(--muted); flex: 0 0 auto; }
.mkt-node.is-mid .mkt-ic { color: var(--gold-text-inv); width: 26px; height: 26px; }
.mkt-t {
font-size: var(--fs-body);
font-weight: 700;
font-variation-settings: 'wdth' 106, 'wght' 700;
}
.mkt-p { font-size: var(--fs-label); color: var(--muted); line-height: 1.6; }
/* ⚠️ Qattiq oq YOZILMAYDI: qorong'i temada --action-bg BO'R rangga
(#EDF1EC) aylanadi va oq matn ko'rinmay qolardi. --action-fg esa
ikkala temada ham to'ldirilgan blok ustidagi to'g'ri rang. */
.mkt-node.is-mid .mkt-p { color: var(--action-fg); opacity: 0.78; }
/* Bogʻlovchi relslar: punktir chiziq + strelka — chiptadagi yirtish
chizigʻi bilan bir til, lekin bu yerda u YOʻNALISH bildiradi. */
.mkt-rail {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 58px;
}
.mkt-rail::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
border-top: 1px dashed var(--hairline);
}
.mkt-ar {
position: relative;
width: 17px;
height: 17px;
color: var(--ink);
background: var(--surface);
padding: 0 5px;
box-sizing: content-box;
}
.mkt-foot {
margin-top: 18px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.mkt-state { font-size: var(--fs-label); color: var(--muted); }
.mkt-state strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.mkt-acts { display: flex; flex-wrap: wrap; gap: 10px; }
/* Tor ekranda oqim VERTIKALGA aylanadi: strelka pastga qaraydi,
oʻrtadagi tugunning chiqib turishi olib tashlanadi (aks holda
ustidagi va ostidagi blokka yopishib qolardi). */
@media (max-width: 860px) {
.mkt { grid-template-columns: 1fr; }
.mkt-node.is-mid {
margin-top: 0;
margin-bottom: 0;
padding: 22px 18px 24px;
}
.mkt-rail {
width: auto;
height: 34px;
}
.mkt-rail::before {
left: 50%;
right: auto;
top: 0;
bottom: 0;
border-top: 0;
border-left: 1px dashed var(--hairline);
}
.mkt-ar {
transform: rotate(90deg);
background: var(--surface);
padding: 3px 0;
}
.mkt-foot { flex-direction: column; align-items: flex-start; }
}
/* ============================================================
SAVDO BO'LIMLARI (product_groups) — har o'yinda o'z materiallari:
valyuta, pasport, obuna, to'plam. Yangi vizual til YO'Q: bo'limlar
chiptaning yirtish chizig'i (punktir) bilan ajratiladi.
============================================================ */
.psec-nav {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 18px;
}
.psec-tab {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
padding: 7px 12px;
border: 1px solid var(--hairline);
border-radius: var(--r-btn);
background: var(--raised);
color: var(--ink);
text-decoration: none;
white-space: nowrap;
}
.psec-tab:hover { border-color: var(--ink); }
/* Yuqoridagi yopishqoq panel sarlavhani to'smasin */
.psec { scroll-margin-top: 78px; }
.psec + .psec {
margin-top: 26px;
padding-top: 22px;
border-top: 1px dashed var(--hairline);
}
.psec-h {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 4px;
}
.psec-t {
font-size: var(--fs-section);
font-weight: 700;
line-height: 1.25;
margin: 0;
}
.psec-n {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.psec-lead {
font-size: var(--fs-label);
color: var(--muted);
margin: 0 0 12px;
}
/* Cheklov ogohlantirishi: «bir marta olinadi», «haftada bitta» kabi shartlar */
.psec-note {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: var(--fs-label);
line-height: 1.4;
color: var(--ink);
background: var(--sunken);
border-left: 2px solid var(--gold);
padding: 9px 12px;
margin: 0 0 12px;
}
.psec-note .ic {
flex: 0 0 auto;
margin-top: 1px;
color: var(--gold-text);
}
.psec .products-grid { margin-top: 12px; }
/* Chegirma: eski narx chizilgan, foiz to'la yashil chipda.
Yashil = pul degan qoida buzilmaydi — chegirma ham pul faktidir;
«Eng foydali» konturli yashil bo'lgani uchun ular chalkashmaydi. */
.tk-old {
margin-left: 7px;
font-size: 12px;
font-weight: 500;
color: var(--muted);
text-decoration: line-through;
text-decoration-thickness: 1px;
}
.tk-badge-off {
color: var(--action-fg);
background: var(--money);
border-color: var(--money);
}
/* Kartochka bo'limida rasm qo'yilmagan mahsulot: bo'lim nomini qirqib
yozish o'rniga jim quti belgisi */
.tk-blank {
display: grid;
place-items: center;
width: 56px;
height: 56px;
border: 1px dashed var(--hairline);
border-radius: var(--r);
color: var(--muted);
}
.tk-blank .ic { width: 22px; height: 22px; }
/* Uzun matn maydonidagi «yana N belgi kerak» hisoblagichi */
.field-count {
display: inline-block;
margin-left: 6px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.field-count.is-ok { color: var(--money); }
/* ============================================================
AKKOUNT EʼLONI — SOTUVCHI VIDEOSI
Rasm ishonch beradi, video esa dalil. Yangi vizual til yoʻq:
ramka va yozuv galereyanikidan olingan.
============================================================ */
.accvid {
margin: 14px 0 0;
border: 1px solid var(--hairline);
border-radius: var(--r);
background: var(--raised);
overflow: hidden;
}
.accvid-v {
display: block;
width: 100%;
max-height: 70vh;
background: #000;
}
.accvid-c {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 9px 12px;
font-size: var(--fs-label);
line-height: 1.35;
color: var(--muted);
border-top: 1px solid var(--hairline);
}
.accvid-c .ic { flex: 0 0 auto; margin-top: 1px; }
/* Maydon sarlavhasidagi «— ixtiyoriy» */
.lbl-opt { font-weight: 400; color: var(--muted); }
/* ============================================================================
BOSH SAHIFA — 2026-09-10 qayta ishlash (egasi: «juda oddiy bo'lib qolmasin,
odamni o'ziga tortsin, asosiy tugmalarda effekt bo'lsin»).
Yangi rang ham, yangi shrift ham QO'SHILMADI — «OQ KASSA» tizimi o'sha:
harakat = siyoh blok · pul = yashil · oltin = mahsulot nishoni. Yangilik
faqat HARAKATDA: bo'limlar ko'rinishga kirganda suzib chiqadi, kartochka
ustiga kelinganda chipta kabi siyohga ag'dariladi, tugma ustidan bir marta
yorug'lik o'tadi.
============================================================================ */
/* ---------- 1. SKROLLDA OCHILISH -------------------------------------------
⚠️ HECH NIMA OLDINDAN YASHIRILMAYDI. Birinchi urinishda bo'limlar
`opacity: 0` bilan turib, JS ularni ochishi kerak edi — kuzatuvchi
ishlamay qolgan holatda sahifaning yarmi BO'SH ko'rinardi (sinovda
aynan shunday bo'ldi). Endi teskarisi: element ko'rinishga kirganda
`.is-in` qo'yiladi va shundagina animatsiya YURADI. JS ishlamasa —
animatsiya yo'q, tarkib esa joyida.
Element ko'rinmaguncha animatsiya boshlanmaydi, shuning uchun
«ko'rinib turib qayta paydo bo'lish» ham sezilmaydi. */
[data-reveal].is-in {
animation: fapRise 560ms cubic-bezier(0.2, 0, 0, 1) both;
}
/* Ichidagilar ketma-ket chiqadi — bir vaqtda emas */
[data-reveal].is-in [data-reveal-i] {
animation: fapRise 460ms cubic-bezier(0.2, 0, 0, 1) both;
animation-delay: calc(var(--i, 0) * 70ms);
}
@media (prefers-reduced-motion: reduce) {
[data-reveal].is-in,
[data-reveal].is-in [data-reveal-i] { animation: none; }
}
/* ---------- 2. ASOSIY TUGMA: USTIDAN O'TADIGAN YORUG'LIK -------------------
Ko'tarilish va soya avvaldan bor edi; yetishmagani — bosishga arzigulik
"tirik" his. Yorug'lik chizig'i bir marta o'tadi (takrorlanmaydi: doimiy
miltillovchi tugma bezovta qiladi).
⚠️ rgba(255,255,255,…) YOZILMAYDI — qorong'i temada tugma BO'R rangda
bo'ladi va oq yorug'lik ko'rinmay qolardi; shu sabab --action-fg dan
color-mix bilan olinadi. */
.action { position: relative; overflow: hidden; isolation: isolate; }
.action::after {
content: "";
position: absolute;
top: -20%; bottom: -20%; left: -70%;
width: 42%;
background: linear-gradient(100deg,
transparent,
color-mix(in srgb, var(--action-fg) 30%, transparent),
transparent);
transform: skewX(-18deg);
opacity: 0;
pointer-events: none;
z-index: -1; /* matn va ikonka ustidan o'tmaydi */
}
@media (hover: hover) {
.action:hover:not(:disabled)::after { animation: fapSheen 640ms ease-out; }
}
@keyframes fapSheen {
0% { left: -70%; opacity: 0.95; }
100% { left: 118%; opacity: 0; }
}
/* Klaviatura bilan yurgan odam ham qayerdaligini ko'rsin */
.action:focus-visible,
.btn-quiet:focus-visible,
.svc-c:focus-visible,
.hero-tk:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
}
/* Ikkilamchi tugma ham javob bersin — lekin jimroq: faqat chegara va 1px */
.btn-quiet {
transition: border-color 160ms ease, transform 160ms cubic-bezier(0.2, 0, 0, 1),
background-color 160ms ease;
}
.btn-quiet:hover { border-color: var(--ink); transform: translateY(-1px); }
.btn-quiet:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
.action::after { display: none; }
.btn-quiet:hover, .btn-quiet:active { transform: none; }
}
/* ---------- 3. KIRISH BLOKIDAGI RAQAMLAR -----------------------------------
Uchta HAQIQIY son (bazadan). To'qima raqam yo'q — son kichik bo'lsa ham
rost turadi, shuning uchun ular chek ustidagi mayda yozuv kabi beriladi:
katta qilib ko'rsatish kichkina sonni yanada kichik ko'rsatardi. */
.hero-stats {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 18px;
}
.hero-st {
display: inline-flex;
align-items: baseline;
gap: 7px;
padding: 7px 12px;
border: 1px solid var(--hairline);
border-radius: 999px;
background: var(--raised);
white-space: nowrap;
}
.hero-st-n {
font-family: var(--font-mono);
font-weight: 600;
font-size: var(--fs-body);
font-variant-numeric: tabular-nums;
color: var(--ink);
}
.hero-st-l { font-size: 11px; color: var(--muted); }
/* ---------- 4. XIZMATLAR TO'RI ---------------------------------------------
Saytda nima borligini bitta qarashda aytadi: o'yin donati, Telegram,
akkount bozori, hisob. Kartochka ustiga kelinganda PAKET CHIPTASI bilan
bir xil narsa bo'ladi — siyohga ag'dariladi. Ya'ni yangi til emas, sayt
allaqachon o'rgatgan imo-ishora. */
.svc {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
@media (min-width: 640px) { .svc { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (min-width: 1040px) { .svc { grid-template-columns: repeat(4, 1fr); } }
.svc-c {
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
min-height: 176px;
padding: 18px 16px 16px;
background: var(--raised);
color: var(--ink);
border: 1px solid var(--hairline);
border-radius: var(--r);
overflow: hidden;
transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease,
transform 240ms cubic-bezier(0.2, 0, 0, 1), box-shadow 240ms ease;
}
/* Tepadagi oltin chiziq — mahsulot nishoni tili; hover'da kartani kesib o'tadi */
.svc-c::before {
content: "";
position: absolute;
top: 0; left: 0;
height: 2px;
width: 38px;
background: var(--gold);
transition: width 420ms cubic-bezier(0.2, 0, 0, 1);
}
.svc-ic { width: 26px; height: 26px; stroke-width: 1.6; }
.svc-t {
font-size: var(--fs-body);
font-weight: 700;
font-variation-settings: 'wdth' 106, 'wght' 700;
}
.svc-p { font-size: 13px; line-height: 1.5; color: var(--muted); }
.svc-go {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.svc-go .ic { width: 16px; height: 16px; transition: transform 240ms cubic-bezier(0.2, 0, 0, 1); }
@media (hover: hover) {
.svc-c:hover {
background: var(--action-bg);
color: var(--action-fg);
border-color: var(--action-bg);
transform: translateY(-3px);
box-shadow: 0 10px 22px rgba(26, 26, 23, 0.16);
}
.svc-c:hover::before { width: 100%; background: var(--gold-text-inv); }
.svc-c:hover .svc-p { color: var(--action-fg); opacity: 0.76; }
.svc-c:hover .svc-go { color: var(--gold-text-inv); }
.svc-c:hover .svc-go .ic { transform: translateX(5px); }
[data-theme="dark"] .svc-c:hover { box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5); }
}
.svc-c:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
.svc-c, .svc-c::before, .svc-go .ic { transition: none; }
.svc-c:hover { transform: none; }
}
/* ---------- 5. ISHONCH QATORI: BIR OZ KATTAROQ ------------------------------ */
.trust-item strong { font-variant-numeric: tabular-nums; }
/* ---------- 6. BO'LIM SARLAVHASI OSTIDA QISQA OLTIN CHIZIQ -----------------
Sahifa "hujjat" bo'lib qolmasin: har bo'lim boshida kassa chekidagi kabi
kichik nishon turadi. Yangi rang emas — o'sha --gold (mahsulot nishoni). */
.sec-h::after {
content: "";
display: block;
width: 34px;
height: 2px;
margin-top: 10px;
background: var(--gold);
}
/* ---------- 7. O'YIN SAHIFASI BOSH SAHIFAGA MOSLANDI (10.09) ---------------
Bir xil imo-ishoralar: sarlavha ostida oltin chiziq, ko'tariladigan
qog'oz, pastda xizmat kartochkalari. Yangi til qo'shilmadi. */
/* Qadam sarlavhasi ostida ham o'sha qisqa oltin chiziq */
.step-h::after {
content: "";
display: block;
width: 30px;
height: 2px;
margin: 9px 0 2px;
background: var(--gold);
}
/* Chipta ustiga kelinganda ko'tarilish avvaldan bor edi — endi TAGIDA soya
ham paydo bo'ladi: «peshtaxtadan ko'tarilgan qog'oz» mantiqi (.action va
bosh sahifadagi kartochkalar bilan bir xil). */
@media (hover: hover) {
.product-item:not(.selected):hover {
box-shadow: 0 8px 18px rgba(26, 26, 23, 0.10);
}
[data-theme="dark"] .product-item:not(.selected):hover {
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.42);
}
}
/* O'ng ustundagi xulosa kartasi tepasida oltin chiziq — sahifadagi eng
muhim quti ekani ko'rinib tursin (xizmat kartochkalari bilan bir tilda). */
.summary::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--gold);
border-radius: var(--r) var(--r) 0 0;
}
/* Ikki-uch kartochkali yo'naltirgich (o'yin sahifasi pastida) */
@media (min-width: 640px) { .svc-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .svc-2 { grid-template-columns: repeat(3, 1fr); } }
/* ---------- 8. AKKOUNT BOZORI ham shu tilda (10.09) ------------------------
E'lon kartochkasi ham «ko'tarilgan qog'oz»: chipta va xizmat
kartochkalari bilan bir xil javob. */
.acc-card {
transition: border-color 170ms ease,
transform 200ms cubic-bezier(0.2, 0, 0, 1),
box-shadow 200ms ease;
}
@media (hover: hover) {
.acc-card:hover {
transform: translateY(-3px);
border-color: var(--muted);
box-shadow: 0 10px 22px rgba(26, 26, 23, 0.12);
}
[data-theme="dark"] .acc-card:hover { box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5); }
}
.acc-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
.acc-card:hover { transform: none; }
}