/* Bosh sahifa — Lavanda eskizi (docs/mockups/2026-10-15-imkonia-tema-lavanda.html,
   egasi 16.10: «artefaktda nima bergan bo'lsang xuddi shunday qil»).
   Tartib: qahramon (matn + belgi) → plitkalar → uch blok → reklama → bo'limlar.
   Plitka va blok faqat shu sahifada ishlatiladi. */

.home { width: min(var(--content-width), calc(100% - 64px)); margin-inline: auto; }

/* Qahramon: chapda matn ustuni, o'ngda to'liq belgi (eskizdagi kamalak o'rni). */
.home-hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: end; padding: 64px 0 40px; }
.home-hero-text { display: grid; gap: 22px; max-width: 680px; justify-items: start; min-width: 0; }
.home-hero-text > * { max-width: 100%; }
/* Bezak: ekran o'quvchisi o'qimaydi, bosishni to'smaydi. */
.home-hero::after { content: ""; justify-self: center; width: 216px; max-width: 100%; aspect-ratio: 208 / 182; background: url(/next/yangi/img/logo/imkonia-belgi.svg) center / contain no-repeat; pointer-events: none; }
[data-theme="dark"] .home-hero::after { background-image: url(/next/yangi/img/logo/imkonia-belgi-qorongi.svg); }
/* Sana qatori: kichik, mono, katta harflar bilan — eskizdagi «Payshanba · 15.10.2026». */
.home-greeting { display: block; margin: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-tertiary); }
.home-hero h1 { margin: 0; font-size: 56px; line-height: 1.04; font-weight: 300; letter-spacing: -.035em; text-wrap: balance; }
.home-search { width: 100%; margin-top: 0; }
.home-search .search-field { width: 100%; }
/* Katta qidiruv (eskiz): ko'tarilgan yuza, ingichka yumshoq chiziq, yumaloq burchak.
   Maydonni lupa belgisi va matn taniydi; fokusda chegara to'q rangga o'tadi. */
.home-search .search-field-large { min-height: 64px; border-color: var(--border-subtle); border-radius: 18px; background: var(--canvas-raised); padding: 0 22px; }
.home-search .search-field-large:focus-within { border-color: var(--border-strong); }
.home-search .search-field-large input { font-size: 17px; font-weight: 400; }
/* Ko'p qidiriladigan so'zlar. */
.home-popular { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; color: var(--text-tertiary); font-size: 14px; }
.home-popular a { color: var(--accent); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .home-popular a:hover { text-decoration: underline; text-underline-offset: 3px; } }
/* Takliflar qutisi maydon ostida suzadi. `position: relative` formada, */
/* chunki quti kengligi maydon kengligiga teng bo'lishi kerak. */
.home-search { position: relative; }
.home-suggest { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 8px); display: grid; gap: 4px; max-height: min(60vh, 420px); overflow-y: auto; padding: 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-card); background: var(--surface-raised, var(--surface-interactive)); }
.home-suggest-row { display: grid; gap: 3px; padding: 10px 12px; border-radius: var(--radius-control); color: var(--text-primary); text-decoration: none; }
.home-suggest-row[aria-selected="true"] { background: var(--surface-selected); }
.home-suggest-row.is-locked { cursor: not-allowed; }
.home-suggest-row.is-locked strong { color: var(--text-secondary); }
.home-suggest-type { color: var(--accent-strong); font-size: 11px; font-weight: 750; letter-spacing: .02em; text-transform: uppercase; }
.home-suggest-access { color: var(--warning); font-size: 12px; }
.home-suggest-row.is-more strong { color: var(--accent-strong); font-size: 14px; }
.home-suggest-state { margin: 10px 0 0; color: var(--text-secondary); font-size: 13px; }

/* ── Reklama tasmasi (spec 2026-09-15-reklama-bannerlari) ─────────────────
   Halqa: ekranda `--ads-slots` ta plitka, o'ngda bitta kirib keladigan
   plitka yashirin turadi. Qadam: 450 ms siljish + har plitka 90 ms kechikish.
   ⚠ premium-dizayn §4 dagi 300 ms chegarasidan ONGLI ISTISNO: bu bosishga
   javob emas, 6 soniyada bir marta bo'ladigan bezak harakati. Qisqartirilsa
   plitkalarning ketma-ket jo'nashi («tortib ketish») sig'maydi — spec §2.1.
   Joylar chegarasi `slotsFor()` (adapters/banners.js) bilan bir xil. */
.home-ads { --ads-slots: 3; --ads-gap: 16px; --ads-move: 450ms; --ads-slide: 5000ms; width: 100%; margin: 0 0 40px; }
.home-ads-viewport { overflow: hidden; padding: 4px; margin: -4px; touch-action: pan-y; }
.home-ads-track { display: flex; gap: var(--ads-gap); }
.home-ad {
  position: relative; display: block; flex: 0 0 calc((100% - (var(--ads-slots) - 1) * var(--ads-gap)) / var(--ads-slots));
  aspect-ratio: 3 / 1; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
  background: var(--canvas-raised); color: inherit;
}
.home-ad:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.home-ad-media { display: block; width: 100%; height: 100%; }
.home-ad-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Statik zaxira uz rasm; ru/en foydalanuvchida shell `data-i18n-pending` ni
 * DOMContentLoaded gacha ushlab turadi — shu paytda sayt rasmi ko'rsatilmaydi,
 * noto'g'ri tildagi banner bir lahzaga ham chiqmaydi (spec 2026-09-21 §2a.2). */
html[data-i18n-pending] .home-ad[data-ad-house] img { visibility: hidden; }
[data-ads-step] .home-ad { transition: transform var(--ads-move) var(--ease-out) var(--ads-delay, 0ms); }
[data-ads-step="forward"] .home-ad,
[data-ads-step="back-start"] .home-ad { transform: translateX(calc(-100% - var(--ads-gap))); }
[data-ads-step="back-start"] .home-ad { transition: none; }
[data-ads-step="back"] .home-ad { transform: none; }
.home-ads-bar { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.home-ads-progress { flex: 1; height: 2px; overflow: hidden; border-radius: 999px; background: var(--border-subtle); }
.home-ads-progress i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; animation: ads-progress var(--ads-slide) linear forwards; }
[data-ads-paused="true"] .home-ads-progress i { animation-play-state: paused; }
[data-ads-stepping="true"] .home-ads-progress i { animation: none; transform: scaleX(1); }
@keyframes ads-progress { to { transform: scaleX(1); } }
@media (max-width: 899px) { .home-ads { --ads-slots: 2; } }
@media (max-width: 599px) { .home-ads { --ads-slots: 1; --ads-gap: 12px; margin-top: 24px; } }
/* Jonli plitka — banner (spec 2026-09-21 2-bosqich §2): tasma reklama yuzasi,
   shuning uchun gradient shu yerda ruxsatli (§1.1) — faqat token orqali, funksiya
   bu faylda yozilmaydi. Qo'shnilar grammatikasi: eyebrow → katta raqam → meta → pill.
   Matn sof oq (≥6:1), shaffoflik faqat chiziq ostida va meta qatorida. */
/* Plitka 3:1 qutida yashaydi va `overflow: hidden` — demak ichki o'lchamlar
   ham katak KENGLIGIDAN kelib chiqadi. Qat'iy px bilan pastki qator («Sayt
   tirikligi» tugmasi) qirqilib qolardi: 1040 px sahifada katak 336 px, bo'yi
   112 px, ichki ustun esa 116 px edi; 900 px da farq 27 px ga yetardi.
   `container-type: inline-size` + `cqi` — har o'lcham katak kengligining
   ulushi (bo'y = 33.3cqi), `clamp` px chegarasini ushlaydi. Bo'y budjeti:
   2×2.8 (ichki chet) + 3.9 (eyebrow) + 2×1 (oraliq) + 11 (raqam) + 7.4
   (tugma) ≈ 30cqi < 33.3cqi. Har o'lchamdan oldin px qiymati turadi:
   `cqi` ni bilmaydigan brauzer o'shanda qoladi. */
.home-ad-live {
  container-type: inline-size;
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "eyebrow eyebrow" "main spark" "meta cta";
  align-items: end; gap: 4px 12px; padding: 12px 16px;
  gap: clamp(2px, 1cqi, 6px) clamp(10px, 3.5cqi, 16px); padding: clamp(8px, 2.8cqi, 14px) clamp(12px, 4cqi, 18px);
  border-color: transparent; background: var(--banner-live-gradient); color: var(--banner-live-ink); text-decoration: none;
}
.home-ad-live:focus-visible { outline: 2px solid var(--banner-live-ink); outline-offset: -4px; }
.home-ad-live-eyebrow { grid-area: eyebrow; display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 11px; font-size: clamp(9px, 3.1cqi, 11px); line-height: 1.2; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.home-ad-pulse { flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--banner-live-ink); }
/* Raqam yangilanganda bir marta uradi (JS `is-beat` qo'yadi); halqa yo'q. */
.home-ad-pulse.is-beat { animation: ads-pulse 900ms var(--ease-out) 1; }
.home-ad-live-main { grid-area: main; display: flex; align-items: baseline; gap: 8px; align-self: center; min-width: 0; overflow: hidden; }
.home-ad-live-main b { font-size: 40px; font-size: clamp(22px, 11cqi, 40px); line-height: 1; font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.home-ad-live-main span { font-size: 14px; font-size: clamp(11px, 4cqi, 14px); white-space: nowrap; }
.home-ad-live-spark { grid-area: spark; align-self: center; width: 120px; height: 40px; width: clamp(64px, 30cqi, 120px); height: clamp(24px, 11cqi, 40px); }
.home-ad-live-spark:empty { display: none; }
.home-ad-live-spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.home-ad-live-spark .spark-line { fill: none; stroke: var(--banner-live-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.home-ad-live-spark .spark-area { fill: var(--banner-live-ink); opacity: .18; }
/* Qatordan chiqqan meta ikkinchi qatorga tushsa plitkaning bo'yi o'sib
   qirqilardi — shuning uchun o'ralmaydi: sig'magani chetda kesiladi. */
.home-ad-live-meta { grid-area: meta; display: flex; flex-wrap: nowrap; gap: 0 10px; min-width: 0; overflow: hidden; font-size: 12px; font-size: clamp(10px, 3.6cqi, 12px); line-height: 1.3; opacity: .9; white-space: nowrap; }
.home-ad-live-meta [data-live-row] { display: inline-flex; align-items: baseline; gap: 4px; }
.home-ad-live-meta b { font-weight: 600; font-variant-numeric: tabular-nums; }
.home-ad-live-cta { grid-area: cta; justify-self: end; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; height: clamp(22px, 7.4cqi, 30px); padding: 0 clamp(9px, 3cqi, 12px); border: 1px solid var(--banner-live-ink); border-radius: 999px; font-size: 12px; font-size: clamp(10px, 3.4cqi, 12px); font-weight: 500; white-space: nowrap; }
@keyframes ads-pulse { 0% { box-shadow: 0 0 0 0 var(--banner-live-ink); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
/* Chizilib kelish — faqat birinchi plitkada (JS `data-draw`), metrika sahifasidagi mexanizm. */
.home-ad-live-spark svg[data-draw="start"] .spark-line, .home-ad-live-spark svg[data-draw="start"] .spark-area { clip-path: inset(0 100% 0 0); }
.home-ad-live-spark svg[data-draw="run"] .spark-line, .home-ad-live-spark svg[data-draw="run"] .spark-area { clip-path: inset(0 0 0 0); transition: clip-path 480ms var(--ease-out); }
/* Chegara ekran emas, KATAK kengligi: telefonda plitka butun ekranni oladi
   va tugma bemalol sig'adi, kompyuterda esa uchga bo'lingan katak 336 px ga
   tushadi. Pastki qatorda meta va tugma yonma-yon turadi — uchchala meta
   bandi sig'masa qator ikkiga bo'linib plitkani cho'zardi (jonli saytdagi
   qirqilish shundan). Shuning uchun tor katakda avval «7 kun», juda tor
   katakda esa tugma tushadi. O'lchov katakning ICHKI kengligi bo'yicha
   ketadi (`@container` ichki qutini so'raydi): 336 px katak — 309 px.
   Chegaralar brauzerda o'lchab tanlandi: 320–1440 px oralig'ida pastki
   chetda 10–15 px zaxira qoldi. */
@container (max-width: 380px) {
  .home-ad-live-meta [data-live-row="week"] { display: none; }
}
@container (max-width: 210px) {
  .home-ad-live-cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-ads-step] .home-ad { transition: none; }
  .home-ads-progress { visibility: hidden; }
  .home-ad-pulse.is-beat { animation: none; }
  .home-ad-live-spark svg[data-draw] .spark-line, .home-ad-live-spark svg[data-draw] .spark-area { clip-path: none; transition: none; }
}
@media (hover: hover) and (pointer: fine) { .home-suggest-row:hover { background: var(--surface-selected); } }
.home-continue { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; min-height: 44px; margin-top: -6px; color: var(--text-secondary); font-size: 15px; text-decoration: none; }
.home-continue strong { color: var(--accent); font-weight: 500; }
.home-continue [data-icon] { color: var(--accent); display: inline-flex; }
/* «Bugun» — «Davom ettirish» o'rnidagi qator (kabinet maqsadlari §11).
   Yorliq, qalin qism, holat, strelka — bitta havola, ODDIY matn oqimida:
   flex bo'lsa telefonda «Bugun:» yolg'iz qolib, uzun mavzu nomi alohida
   qatorga tushadi. Holat matn bilan ajratiladi, rang faqat qo'shimcha:
   «orqada» qizil, «rejada» aksent. */
.home-today { display: block; max-width: 640px; min-height: 44px; margin-top: -6px; padding: 10px 0; color: var(--text-secondary); font-size: 15px; line-height: 1.45; text-wrap: balance; text-decoration: none; }
.home-today-title { color: var(--accent); font-weight: 500; }
.home-today-status { display: inline-block; margin-left: 4px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--text-tertiary); }
.home-today-status[data-status="rejada"] { color: var(--accent); }
.home-today-status[data-status="orqada"] { color: var(--accent-muted); }
.home-today-status[data-status="oldinda"] { color: var(--accent); }
.home-today-chevron { display: inline-flex; vertical-align: middle; margin-left: 2px; color: var(--accent); }

/* Tezkor plitkalar */
.home-quick { padding: 8px 0 56px; }

/* Uch blok (eskiz): «Kun atamasi» yumshoq fonda, sinov chiziqli, «Tez kunda» uzuq chegarali. */
.home-blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0 0 64px; }
.home-block { display: grid; gap: 12px; align-content: start; min-width: 0; padding: 24px; border-radius: 20px; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.home-block.is-soft { background: var(--accent-soft); box-shadow: none; }
.home-block.is-soon { box-shadow: none; border: 1.5px dashed var(--border-subtle); }
.home-block-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.home-block.is-soon .home-block-eyebrow { color: var(--text-tertiary); }
.home-block h3 { margin: 0; font-size: 24px; font-weight: 400; letter-spacing: -.02em; color: var(--text-primary); }
.home-block.is-soon h3 { color: var(--text-secondary); }
.home-block p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-body); }
.home-block.is-soon p { color: var(--text-secondary); }
.home-block-count { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 13px; color: var(--text-tertiary); }
.home-block-bar { display: block; height: 6px; border-radius: 6px; background: var(--canvas-raised); overflow: hidden; }
.home-block-bar i { display: block; width: 0; height: 100%; border-radius: 6px; background: var(--accent); }
.home-block-link { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: -6px; color: var(--accent); font-size: 14px; font-weight: 500; text-decoration: none; }
.home-block-link [data-icon] { display: inline-flex; }
@media (hover: hover) and (pointer: fine) { .home-block-link:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* Bo'limlar: sarlavha qatori «Hammasi» bilan, ostida beshta ustun (eskiz). */
.home-sections-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 32px; border-top: 1px solid var(--border-subtle); }
.home-sections-head h2 { margin: 0; font-size: 26px; font-weight: 400; letter-spacing: -.02em; }
.home-sections-head a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-size: 14px; font-weight: 500; text-decoration: none; }
.home-sections-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; padding: 20px 0 16px; }
.home-section-link { display: grid; gap: 10px; align-content: start; min-width: 0; color: inherit; text-decoration: none; }
.home-section-link .home-section-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; font-size: 0; background: var(--tile-bg, var(--canvas-raised)); color: var(--tile-ink, var(--text-secondary)); }
.home-section-link b { font-size: 15px; font-weight: 500; color: var(--text-primary); overflow-wrap: anywhere; }
.home-section-link small { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.home-section-bar { display: block; height: 3px; border-radius: 3px; background: var(--border-subtle); overflow: hidden; }
.home-section-bar i { display: block; height: 100%; border-radius: 3px; background: var(--tile-ink, var(--accent)); }
.home-section-link[data-tint="orik"] { --tile-bg: var(--tint-orik-bg); --tile-ink: var(--tint-orik-ink); }
.home-section-link[data-tint="osmon"] { --tile-bg: var(--tint-osmon-bg); --tile-ink: var(--tint-osmon-ink); }
.home-section-link[data-tint="lavanda"] { --tile-bg: var(--tint-lavanda-bg); --tile-ink: var(--tint-lavanda-ink); }
.home-section-link[data-tint="shalfey"] { --tile-bg: var(--tint-shalfey-bg); --tile-ink: var(--tint-shalfey-ink); }
.home-section-link[data-tint="sariq"] { --tile-bg: var(--tint-sariq-bg); --tile-ink: var(--tint-sariq-ink); }
.home-section-link[data-tint="gul"] { --tile-bg: var(--tint-gul-bg); --tile-ink: var(--tint-gul-ink); }
.home-sections-empty { grid-column: 1 / -1; margin: 0; color: var(--text-tertiary); font-size: 15px; }
@media (hover: hover) and (pointer: fine) { .home-section-link:hover b { color: var(--accent); } .home-sections-head a:hover { text-decoration: underline; text-underline-offset: 3px; } }

@media (max-width: 900px) {
  .home { width: calc(100% - 48px); }
  /* Eskizdagi telefon ko'rinishi: bitta ustun, belgi o'ng yuqori burchakda. */
  .home-hero { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 20px 0 22px; position: relative; }
  .home-hero-text { gap: 16px; }
  .home-hero::after { position: absolute; top: 4px; right: 0; width: 104px; }
  .home-hero h1 { font-size: 34px; line-height: 1.08; max-width: 11ch; }
  .home-search .search-field-large { min-height: 52px; border-radius: 16px; padding: 0 16px; }
  .home-search .search-field-large input { font-size: 16px; }
  .home-search .kbd, .home-popular { display: none; }
  .home-quick { padding: 6px 0 32px; }
  .home-blocks { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-bottom: 32px; }
  .home-block { padding: 20px; }
  .home-block h3 { font-size: 21px; }
  .home-block.is-soon { display: none; }
  .home-ads { margin-bottom: 32px; }
  .home-sections-head { padding-top: 22px; }
  .home-sections-head h2 { font-size: 22px; }
  .home-sections-grid { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 8px 0 8px; }
  .home-section-link { grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; column-gap: 14px; row-gap: 0; padding-block: 12px; border-bottom: 1px solid var(--border-subtle); }
  .home-section-bar { display: none; }
  .home-section-link small { grid-column: 3; grid-row: 1; }
}