/* ═══════════════════════════════════════════════════════════════
   YaqinJoy — KOMPYUTER QATLAMI (v98)

   QOIDA: bu faylning HAMMASI `@media (min-width: 1024px)` ichida.
   Ya'ni telefon va planshet ko'rinishiga BIR PIKSEL ham tegmaydi.
   Muammo chiqsa index.html dagi bitta qatorni o'chirish kifoya —
   sayt darhol eski holatiga qaytadi.

   ASOSIY QOIDA (uzbekdizayn): desktop = "kattalashtirilgan mobil"
   EMAS. Element o'lchamlari kattalashmaydi — ular QAYTA TERILADI:
   pastki panel chap yon panelga aylanadi, bitta ustun ikki-uch
   ustunga bo'linadi, kontent 1180px da qulflanadi va ortiqcha joy
   chetlarda bo'sh qoladi.
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  :root {
    --side-w: 250px;          /* chap panel eni */
    --desk-max: 1160px;       /* o'qish maydoni qulfi */
    --desk-pad: 32px;         /* kontentning chap/o'ng nafasi */
  }

  /* ── 1. TELEFON RAMKASI OCHILADI ─────────────────────────────
     Kabinet va admin konsolining O'Z maketi bor (cab-mode /
     adm-mode) — ularga tegilmaydi, aks holda ikkita navigatsiya
     bir vaqtda chiqib qolardi. */
  body:not(.cab-mode):not(.adm-mode) #app {
    max-width: none;
    box-shadow: none;
    padding-left: var(--side-w);
    background: var(--bg);
  }

  /* Kirish/ro'yxat va biznes qo'shish sahifalarida yon panel YO'Q
     (ular `no-nav` bilan belgilangan yakka oqim). U yerda chapdagi
     250px joy ham keraksiz — bo'sh tasma bo'lib qolardi. `:has()`
     eskiroq brauzerda ishlamasa, qoida shunchaki tushib qoladi va
     eski (xavfsiz) holat qoladi. */
  body:has(#app > .no-nav):not(.cab-mode):not(.adm-mode) #app { padding-left: 0; }
  body:has(#app > .no-nav) .sheet,
  body:has(#app > .no-nav) #toast-wrap { left: 50%; }

  /* ═══ 2. PASTKI PANEL → CHAP YON PANEL ══════════════════════ */
  body:not(.cab-mode):not(.adm-mode) .bottom-nav {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: var(--side-w); max-width: none;
    transform: none; border-radius: 0;
    flex-direction: column; align-items: stretch;
    gap: 2px; padding: 20px 14px 16px;
    background: var(--surface);
    border: 0; border-right: 1px solid var(--border);
    box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    min-height: 100dvh; overflow-y: auto; overflow-x: hidden;
    justify-content: flex-start;   /* .bn5 dagi space-around bekor qilinadi */
  }
  .bottom-nav::before { display: none; }

  /* Brend qatori — panel tepasida */
  .bottom-nav::after {
    content: "YaqinJoy";
    order: -1;
    display: flex; align-items: center;
    height: 42px; margin: 0 6px 20px;
    padding-left: 40px;
    font-size: 18.5px; font-weight: 800; letter-spacing: -.022em;
    color: var(--text);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'><path d='M35 66.98A30 30 0 1 1 65 66.98' stroke='%232563EB' stroke-width='8.6' stroke-linecap='round'/><g fill='%232563EB'><path d='M50 45 32.5 31.5' stroke='%232563EB' stroke-width='7.6' stroke-linecap='round'/><path d='M50 45 67.5 31.5' stroke='%232563EB' stroke-width='7.6' stroke-linecap='round'/><path d='M43 45.5Q46.5 63 50 79 53.5 63 57 45.5Z'/></g><circle cx='50' cy='25.5' r='7' fill='%232563EB'/></svg>");
    background-repeat: no-repeat;
    background-size: 28px 28px;
    background-position: left center;
  }

  .bottom-nav .bn-item,
  .bottom-nav .bn-center {
    flex: none; flex-direction: row; justify-content: flex-start;
    gap: 12px; height: 44px; padding: 0 12px;
    border-radius: 10px; font-size: 14.5px; font-weight: 600;
    color: var(--text-2);
    transition: background .14s ease, color .14s ease;
  }
  .bottom-nav .bn-item svg,
  .bottom-nav .bn-center svg { width: 20px; height: 20px; flex: none; }
  .bottom-nav .bn-item:hover,
  .bottom-nav .bn-center:hover { background: var(--bg-input); color: var(--text); }
  .bottom-nav .bn-item.active,
  .bottom-nav .bn-center.active { background: var(--blue-soft); color: var(--blue); }

  /* O'rtadagi KO'TARILGAN "Topish" tugmasi yon panelda oddiy band bo'ladi.
     DIQQAT: mobil qoidalar `.bn5 .bn-center .bn-fab` ko'rinishida — ya'ni
     kuchliroq. Shuning uchun bu yerda ham AYNAN shu tuzilma ishlatiladi,
     aks holda ko'k doira yon panelda osilib qolardi. */
  .bn5 { justify-content: flex-start; }
  .bn5 .bn-item { flex: none; }
  .bn5 .bn-center {
    flex: none; flex-direction: row; justify-content: flex-start;
    gap: 12px; height: 44px; padding: 0 12px; border-radius: 10px;
    background: none; box-shadow: none;
  }
  .bn5 .bn-center .bn-fab {
    width: auto; height: auto; margin: 0; border-radius: 0;
    background: none; box-shadow: none; color: inherit;
    display: contents;
  }
  .bn5 .bn-center .bn-fab svg { width: 20px; height: 20px; }
  .bn5 .bn-center .bn-lbl {
    font-size: 14.5px; font-weight: 600; color: inherit; margin: 0;
  }
  .bn5 .bn-center.active { background: var(--blue-soft); }
  .bn5 .bn-center.active .bn-lbl,
  .bn5 .bn-center.active .bn-fab svg { color: var(--blue); }

  /* ── 2b. PANEL OSTI: haqiqiy foyda ──────────────────────────
     Avval bu yerda 600px bo'sh oq joy qolardi. Endi: biznes
     qo'shish (asosiy chaqiruv), kabinet, ulashish va til. */
  .bn-desk {
    display: block;
    margin-top: auto;            /* pastga yopishadi */
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }
  .bn-desk .bn-sub {
    display: flex; align-items: center; gap: 10px;
    width: 100%; height: 36px; padding: 0 12px;
    border: 0; border-radius: 9px; cursor: pointer;
    background: none; color: var(--text-2);
    font-size: 13.5px; font-weight: 600; font-family: inherit;
    text-align: left; transition: background .14s ease, color .14s ease;
  }
  .bn-desk .bn-sub:hover { background: var(--bg-input); color: var(--text); }
  .bn-desk .bn-sub svg { width: 17px; height: 17px; flex: none; opacity: .75; }
  .bn-lang {
    display: flex; gap: 4px; margin-top: 10px;
    padding: 3px; border-radius: 9px; background: var(--bg-input);
  }
  .bn-lang button {
    flex: 1; height: 28px; border: 0; border-radius: 7px; cursor: pointer;
    background: none; color: var(--text-2);
    font-size: 12px; font-weight: 700; letter-spacing: .04em;
    font-family: inherit; transition: background .14s ease, color .14s ease;
  }
  .bn-lang button:hover { color: var(--text); }
  .bn-lang button.on {
    background: var(--surface); color: var(--text);
    box-shadow: 0 1px 2px rgba(15,23,42,.10);
  }

  /* ═══ 3. KONTENT MAYDONI ════════════════════════════════════
     Sahifa cho'zilmaydi. Chekkalarda doim ≥32px nafas qoladi:
     `--desk-pad` bolalari ichida, `max-width` esa ikkalasini
     qo'shib hisoblaydi. */
  /* DIQQAT: mobil maketda har blokning O'Z 16px chekkasi bor
     (.px, .home-top, .hero, .banner, .home-list … hammasi 16px).
     Shuning uchun sahifaga faqat YETISHMAGAN qismi qo'shiladi —
     32 − 16 = 16px. Natijada hamma blokning chap va o'ng qirrasi
     bitta tik chiziqda turadi. Blokka alohida padding berish
     xato bo'lardi: 16 + 32 = 48 bo'lib, qirralar sinardi. */
  /* alive.css 900px dan boshlab `.page` ga "telefon ramkasi" soyasini
     beradi (1px halqa + katta tushuvchi soya). Yon panel bilan birga
     bu suzib turgan varaqqa o'xshab qoladi. Kompyuterda soya olinadi
     va fon shaffof bo'ladi — orqadagi nozik gradient ko'rinadi. */
  body:not(.cab-mode):not(.adm-mode) #app > .page {
    box-shadow: none; background: transparent;
  }
  body:not(.cab-mode):not(.adm-mode) .page {
    max-width: calc(var(--desk-max) + var(--desk-pad) * 2);
    margin: 0 auto;
    padding-left: calc(var(--desk-pad) - 16px);
    padding-right: calc(var(--desk-pad) - 16px);
    padding-bottom: 64px;
    min-height: 100dvh;
  }

  /* Qidiruv maydoni cho'zilmaydi: 1130px uzunlikdagi input ham
     o'qishga, ham yozishga noqulay. */
  body:not(.cab-mode):not(.adm-mode) .tp-search { max-width: 672px; }

  body:not(.cab-mode):not(.adm-mode) .topbar,
  body:not(.cab-mode):not(.adm-mode) .home-top,
  body:not(.cab-mode):not(.adm-mode) .tp-top {
    background: transparent;
    padding-top: 24px; padding-bottom: 4px;
  }
  body:not(.cab-mode):not(.adm-mode) .topbar .title { text-align: left; font-size: 21px; }

  /* Kompyuterda gamburger keraksiz — uning hamma bandi endi
     chap panel ostida ochiq turibdi. */
  #app-menu-btn { display: none; }

  /* ═══ 4. BOSH SAHIFA ════════════════════════════════════════ */
  /* Sarlavha bloki va rasm bir qatorda: rasm o'ng chetga tayanadi,
     matn 640px o'qish ustunida qoladi. */
  /* Sarlavha bloki: matn chapda (o'qish ustuni 620px), rasm o'ng
     chetida — lekin blokning o'zi 1000px da to'xtaydi, aks holda
     rasm sarlavhadan 1400px uzoqda osilib qolardi. */
  .hero {
    display: flex; align-items: center; justify-content: space-between;
    gap: 40px; max-width: 1032px;
    padding-top: 6px; padding-bottom: 24px;
  }
  .hero > div { max-width: 620px; }
  .hero h1 { font-size: 41px; line-height: 1.07; letter-spacing: -.032em; }
  .hero p { font-size: 15.5px; max-width: 540px; margin-top: 10px; }
  .hero-art { width: 124px; height: 124px; flex: none; }

  body:not(.cab-mode):not(.adm-mode) .search-bar { max-width: 672px; }

  /* Kategoriyalar: 11 ta suzib yurgan ikonka o'rniga — 11 ta ANIQ
     chegarali plitka. Ikonka chapda, nomi yonida: qatorlar tik
     tekislanadi va ko'z bir yo'nalishda yuradi. */
  .home-cats { margin-top: 4px; }
  .home-cats > .cat-grid { background: none; padding: 0; box-shadow: none; border: 0; }
  .cat-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  }
  .cat-item {
    justify-content: center; gap: 9px; padding: 13px 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
  }
  .cat-item:hover {
    border-color: var(--blue);
    box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 8px 22px rgba(15,23,42,.08);
    transform: translateY(-1px);
  }
  .cat-item span {
    font-size: 12.5px; font-weight: 600; line-height: 1.3;
    white-space: normal; text-align: center;
  }
  .cat-ic { width: 40px; height: 40px; flex: none; border-radius: 11px; }

  /* Banner — desktopda bo'yi pasayadi, matn va chaqiruv o'z guruhida */
  .banner { align-items: center; padding: 18px 22px; }
  .banner h3 { font-size: 16.5px; }

  /* ═══ 5. KARTALAR: BITTA USTUN → USTUNLAR TO'RI ═════════════
     DIQQAT: karta KATTALASHMAYDI — ular ko'payadi. */
  .home-list {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    align-items: start;
  }
  .home-list > * { min-width: 0; }
  /* "Hech narsa yo'q" holati to'r katakchasiga tushib, chapga
     siljib qolmasin — u butun kenglikni egallaydi va markazda turadi. */
  .home-list > .empty-state,
  .home-list > .auth-need,
  /* v106: qidiruv izohi katak egallamasin — aks holda birinchi
     karta yoniga surilib, ustunlar qiyshayib ketadi */
  .home-list > .q-note { grid-column: 1 / -1; }
  body:not(.cab-mode):not(.adm-mode) .empty-state { max-width: 560px; margin: 0 auto; }
  .biz-card { align-items: center; }
  .biz-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 10px 26px rgba(15,23,42,.10);
  }
  body:not(.cab-mode):not(.adm-mode) .biz-thumb { width: 78px; height: 78px; }
  body:not(.cab-mode):not(.adm-mode) .bc-name { font-size: 15px; }

  /* DIQQAT: `.hscroll` ni umumiy `flex-wrap: wrap` qilish XATO edi —
     xaritadagi karta karuseli ham shu sinfda va u to'rga aylanib
     ketardi. Faqat bosh sahifadagi filtr qatori o'raladi. */
  #home-filters { flex-wrap: wrap; gap: 10px; }

  /* ═══ 6. BIZNES SAHIFASI: IKKI USTUN ════════════════════════
     Chapda o'qiladigan qism, o'ngda YOPISHIB TURADIGAN harakat
     kartasi — mijoz aylantirganda ham "Yo'l olish" ko'z oldida. */
  .page-detail {
    display: grid; align-items: start;
    grid-template-columns: minmax(0, 1fr) 364px;
    column-gap: 8px; row-gap: 2px;
  }
  .page-detail > .detail-hero {
    grid-column: 1 / -1; height: 320px; border-radius: 18px;
    overflow: hidden; margin-top: 18px;
  }
  .page-detail > .detail-card {
    grid-column: 2; grid-row: 2 / 100;
    position: sticky; top: 20px; margin: 0;
  }
  .page-detail > .dsection,
  .page-detail > .claim-card { grid-column: 1; margin: 0; }
  .page-detail > .bottom-nav { grid-column: 1 / -1; }
  .detail-hero .hero-swipe img { height: 320px; object-fit: cover; }
  /* Rasm yo'q bo'lsa: cho'zilgan placeholder o'rniga markazlashgan belgi */
  .detail-hero .ph svg { width: 76px; height: 76px; }
  /* Sharh formasi cho'zilmaydi. 780px kenglikdagi "Yuborish"
     tugmasi va markazga terilgan yulduzlar — kattalashtirilgan
     mobil belgisi. Kompyuterda: chapga tekislanadi va qisqaradi. */
  .page-detail .textarea { max-width: 560px; }
  .page-detail #review-send { max-width: 220px; }
  .page-detail .rate-stars { justify-content: flex-start; margin-left: -4px; }
  .page-detail .dsection h3[style*="center"] { text-align: left !important; }
  .page-detail .svc-list,
  .page-detail #reviews-list { max-width: 620px; }

  /* ═══ 7. XARITA — TELEFON MAKETI, XARITA ENIGA YOYILGAN ═══════
     Telefondagi tartib SAQLANADI: tepada qidiruv va kategoriyalar,
     pastda yonga suriladigan joylar tasmasi. O'zgargan yagona narsa —
     ular endi burchakdagi kichkina quti emas, XARITANING BUTUN ENINI
     egallaydi. Shu sababli 12 ta kategoriyaning hammasi ko'rinadi va
     tasmada bir vaqtda 6-7 ta joy turadi. */
  body:not(.cab-mode):not(.adm-mode) .page.map-page {
    max-width: none; padding: 0;
    /* Kompyuterda pastki panel yo'q. Bu bitta qator xaritadagi hamma
       narsani to'g'rilaydi: varaq pastga yopishadi, "mening joyim"
       tugmalari esa varaq ustida qoladi (ularning joyini map.js
       `--nav-h` orqali hisoblaydi). */
    --nav-h: 0px;
  }

  .map-ui-top,
  .map-ui-top.slim { left: 0; right: 0; width: auto; padding: 18px 20px 12px; }
  /* Telefonda pardaning "so'nish" nuqtasi 40% da — chunki u yerda
     kategoriyalar bitta qatorda. Kompyuterda ular ikki qatorga
     yoyiladi va ikkinchi qator pardadan chiqib qolardi: tugmalar
     orqasidan xarita nuqtalari ko'rinib turardi. Parda uzaytiriladi. */
  .map-ui-top.slim {
    background: linear-gradient(to bottom, rgba(238, 241, 248, 0.97) 76%, transparent);
  }
  [data-theme="dark"] .map-ui-top.slim,
  .force-dark .map-ui-top.slim {
    background: linear-gradient(to bottom, rgba(7, 11, 22, 0.94) 76%, transparent);
  }
  .map-search { max-width: 480px; }
  /* Kategoriyalar BITTA QATORDA yonga davom etadi (telefondagidek).
     v100 da ularni ikkinchi qatorga o'ratgan edim — ekranning pastki
     qismi kamayib ketardi. Endi qator uzunligicha qoladi va yonga
     suriladi; o'ng chetda "yana bor" degan yumshoq so'nish turadi. */
  .map-ui-top.slim .map-cats {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    margin: 12px 0 0; padding: 0 28px 0 0; gap: 8px;
    scroll-behavior: smooth;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  }
  .map-ui-top .map-cats .chip { flex: none; }

  .map-sheet {
    left: 0; right: 0; width: auto;
    border-radius: 18px 18px 0 0;
  }
  .map-sheet .map-carousel { padding-left: 20px; padding-right: 20px; }
  .map-sheet .pop-card { width: 200px; }
  .map-sheet .pop-img { height: 116px; }

  /* "Ushbu hududni qidirish" tugmasi kategoriyalar qatoriga tegib
     turardi — tepadagi panel ostiga tushiriladi. */
  .search-area-btn { top: 132px; }
  .uz-total { top: 176px; }

  /* Tanlangan joy va yo'l kartasi cho'zilmasin */
  .route-card, .picked-card {
    left: 50%; right: auto; transform: translateX(-50%);
    width: min(560px, 56vw);
  }

  /* ═══ 8. OYNALAR (sheet) — pastki varaq emas, MARKAZDAGI OYNA ═ */
  body:not(.cab-mode):not(.adm-mode) .sheet {
    left: calc(50% + var(--side-w) / 2); right: auto;
    transform: translateX(-50%);
    width: min(520px, 60vw); bottom: 32px; border-radius: 20px;
  }
  body:not(.cab-mode):not(.adm-mode) #toast-wrap {
    bottom: 28px; left: calc(50% + var(--side-w) / 2);
  }

  /* ═══ 8b. PROFIL: BITTA USTUN → IKKI USTUN ══════════════════
     1130px kenglikdagi qator — yorlig'i chapda, strelkasi 1100px
     narida — "kattalashtirilgan mobil" ning eng aniq belgisi.
     Kompyuterda ro'yxat 860px da qulflanadi va ikki ustunga
     bo'linadi; biznes eshigi ikkala ustunni egallaydi. */
  .prof-head { max-width: 860px; padding-top: 8px; }
  .prof-list {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px; align-content: start; max-width: 860px;
  }
  .prof-list > .prof-item, .prof-list > .prof-biz { margin-bottom: 0; }
  .prof-list > .prof-biz { grid-column: 1 / -1; }
  /* Tizimga kirish chaqirig'i — yolg'iz qolmasin, ikkala ustunni
     egallasin (u faqat mehmon holatida birinchi bo'lib turadi). */
  .prof-list > .prof-item:first-child { grid-column: 1 / -1; }
  .prof-item { transition: box-shadow .14s ease, transform .14s ease; }
  .prof-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 8px 22px rgba(15,23,42,.09);
  }

  /* ═══ 9. FORMALAR CHO'ZILMAYDI ══════════════════════════════ */
  /* Kirish formasi 1160px ga cho'zilib ketmasin: telefon raqami
     uchun bir metr uzunlikdagi maydon — dizayn emas, xato. */
  body:not(.cab-mode):not(.adm-mode) .page.auth-page { max-width: 560px; }
  /* Sozlamalar, Yordam, hujjatlar, kod sahifasi — hammasi oddiy
     `.px` qutisi ichida. Ular ham 1130px ga cho'zilib ketardi:
     "O'zbekcha" yozuvi chapda, belgisi esa bir metr narida.
     Endi o'qish ustuni 760px da to'xtaydi va CHAPGA tekislanadi —
     ustidagi sarlavha bilan bitta tik chiziqda turadi.
     `prof-list` bundan mustasno: uning o'z ikki ustunli to'ri bor. */
  body:not(.cab-mode):not(.adm-mode) .page > .px:not(.prof-list) { max-width: 760px; }
  /* v113 TUZATISH: `.wiz-page` — flex ustun. Flex bolasiga
     `margin: 0 auto` berilsa u cho'zilishdan to'xtab, MAZMUNI
     bo'yicha torayadi. Shu sababli "Davom etish" tugmasi 700px
     o'rniga 302px lik tasmaga aylangan, sarlavha esa 700px lik
     tanadan 226px chapda osilib qolgan edi. Endi to'rttasi ham
     bitta ustunda: sarlavha, jarayon chizig'i, tana, tugma. */
  .wiz-page > .topbar,
  .wiz-page > .wiz-progress,
  .wiz-page > .wiz-body,
  .wiz-page > .wiz-footer {
    width: 100%; max-width: 700px;
    margin-left: auto; margin-right: auto;
    left: auto; right: auto;
  }

  /* ═══ 10. TINIQLIK ══════════════════════════════════════════
     Katta ekranda 15px matn maydalashadi — bir pog'ona
     kattalashtiriladi, lekin FAQAT matn, blok emas. */
  body:not(.cab-mode):not(.adm-mode) { font-size: 15.5px; }
  body:not(.cab-mode):not(.adm-mode) .section-head h2 { font-size: 19.5px; }
  body:not(.cab-mode):not(.adm-mode) .empty-state p { font-size: 15px; }

  /* ═══ 10b. KLAVIATURA BILAN YURISH ══════════════════════════
     Kompyuterda Tab bilan yurish oddiy hol. Brauzerning kulrang
     standart konturi o'rniga brend halqasi. `:focus-visible` —
     sichqoncha bilan bosilganda chiqmaydi, faqat klaviaturada. */
  body:not(.cab-mode):not(.adm-mode) a:focus-visible,
  body:not(.cab-mode):not(.adm-mode) button:focus-visible,
  body:not(.cab-mode):not(.adm-mode) input:focus-visible,
  body:not(.cab-mode):not(.adm-mode) textarea:focus-visible,
  body:not(.cab-mode):not(.adm-mode) select:focus-visible,
  body:not(.cab-mode):not(.adm-mode) [tabindex]:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
    border-radius: 8px;
  }
}

/* ═══ 11. NOUTBUK (1024–1239px) ════════════════════════════════
   Bu oraliqda yon panel ekranning to'rtdan birini yeb qo'yardi —
   torroq qilinadi. Kategoriya plitkalari 4 tadan: 6 ta bo'lsa
   plitka 110px ga tushib, nomlar uch qatorga bo'linib ketardi. */
@media (min-width: 1024px) and (max-width: 1239.98px) {
  :root { --side-w: 216px; }
}

/* ═══ 12. KENG EKRAN (1240px dan) ══════════════════════════════ */
@media (min-width: 1240px) {
  .cat-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ═══ 13. JUDA KATTA EKRAN (2K va undan yuqori) ════════════════
   Kontent yana cho'zilmaydi — faqat chetdagi bo'shliq o'sadi.
   O'qish ustuni qancha keng bo'lsa, ko'z shuncha charchaydi. */
@media (min-width: 1600px) {
  :root { --desk-max: 1260px; --desk-pad: 40px; }
  .home-list { grid-template-columns: repeat(auto-fill, minmax(376px, 1fr)); }
  .hero { max-width: 1120px; }
}

/* ═══ 14. O'TISHLAR: KOMPYUTERDA TEZROQ ═════════════════════════
   Kirish animatsiyalari telefon uchun o'lchangan edi: u yerda bir
   vaqtda 2–3 ta karta ko'rinadi. Kompyuterda esa 12 tasi ko'rinadi va
   8 ta karta × 45ms = 315ms lik "quyruq" hosil bo'lardi — sahifa
   ochilishi sekin tuyulardi ("qotib o'tayotgandek").

   DIQQAT: bu yerda FAQAT TEZLIK o'zgaradi. Harakatning turi ham,
   ko'rinishi ham, dizayn ham o'sha-o'sha. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  #app > .page:not(.map-page) { animation-duration: .17s; }
  @keyframes yj-page-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
  body:not(.cab-mode):not(.adm-mode) .biz-card,
  body:not(.cab-mode):not(.adm-mode) .pop-card,
  body:not(.cab-mode):not(.adm-mode) .abiz,
  body:not(.cab-mode):not(.adm-mode) .cat-item,
  body:not(.cab-mode):not(.adm-mode) .review-item,
  body:not(.cab-mode):not(.adm-mode) .benefit { animation-duration: .2s; }
  .biz-card:nth-child(2), .pop-card:nth-child(2), .cat-item:nth-child(2), body:not(.cab-mode):not(.adm-mode) .abiz:nth-child(2) { animation-delay: .022s; }
  .biz-card:nth-child(3), .pop-card:nth-child(3), .cat-item:nth-child(3), body:not(.cab-mode):not(.adm-mode) .abiz:nth-child(3) { animation-delay: .044s; }
  .biz-card:nth-child(4), .pop-card:nth-child(4), .cat-item:nth-child(4), body:not(.cab-mode):not(.adm-mode) .abiz:nth-child(4) { animation-delay: .066s; }
  .biz-card:nth-child(5), .pop-card:nth-child(5), .cat-item:nth-child(5) { animation-delay: .088s; }
  .biz-card:nth-child(6), .pop-card:nth-child(6), .cat-item:nth-child(6) { animation-delay: .11s; }
  .biz-card:nth-child(7), .cat-item:nth-child(7) { animation-delay: .132s; }
  .biz-card:nth-child(8), .cat-item:nth-child(8) { animation-delay: .154s; }

  /* Yon panel endi sahifa ichida emas — u sahifa animatsiyasiga
     umuman qo'shilmaydi. Har ehtimolga qarshi aniq yozib qo'yiladi. */
  body > .bottom-nav { animation: none !important; }
}