/* ==========================================================================
   MOBILSET.UZ — KENG EKRAN (KOMPYUTER) KO'RINISHI
   --------------------------------------------------------------------------
   2026-10-17 sessiyasi — foydalanuvchi talabi:

     *«Saytni hozirgi holati telefon uchun huddi ilovadagidek ishlangani zo'r
     chiqqan, lekin kompyuterda ochilganda eski holatdagi dizayndagi ko'rinishga
     moslashish kerak. Keng ekranga moslashuvchan bo'lib o'zgarsin. Bu holatdagi
     o'zgarish dizaynini o'zing bilib, PRO darajada komponentlarni joylashtirib
     chiq. Bottom navigationdagi buttonlarni kompyuter browseri uchun boshqa
     qulay bo'lgan joylarga ham o'zgartirishing mumkin.»*

   ⚠️ Bu fayl faqat `@media (min-width: 1000px)` ichida ishlaydi — **telefon
      ko'rinishi umuman o'zgarmaydi** (`app.css` dagi ilova qobig'i).
      Chegara ataylab `1000px`: ilovadagi `TariffsWideLayout` (900dp) bilan mos
      va `tariflar.css` dagi chap ray uslublari ham shu chegarada ishlaydi.

   Nima o'zgaradi:
     · qobiq **butun kenglikka** yoyiladi (telefonde 620px edi);
     · operatorlar — **chap ray**da (ilova va eski veb dizayndagi kabi), tor
       ekrandagi alohida ekran o'rniga;
     · tarif kartalari **ko'p ustunli** to'rda;
     · pastki navigatsiya — ekran bo'ylab yoyilgan, markazlashtirilgan panel;
     · futer qaytadi (keng ekranda mazmunli).
   ========================================================================== */

@media (min-width: 1000px) {
  :root {
    /*
      ⚠️ Foydalanuvchi talabi (2026-10-17): *«Hozir browser ekran masshtabi 100%
      holatga keltirganda saytning asosiy sahifasida komponentlar, panellar juda
      katta ko'rsatilayapti, shularni kichiklashtirish kerak — 100% ko'rinish
      o'lchami hozirgi 75% ekran ko'rinish holatidek bo'lsin.»*

      Sabab: ilova ko'rinishi 620px li qobiq uchun mo'ljallangan (katta
      teginish maydonlari), keng ekranda esa u «haddan tashqari katta» tuyuladi.
      Shuning uchun keng ekranda **o'lchamlar bir pog'ona kichraytiriladi**:
      panel balandliklari, sarlavhalar, karta matnlari va tugmalar.
    */
    --app-bar: 68px;
    --app-bar-balandligi: calc(var(--app-bar) + 1px);
    --pastki-nav: 72px;
    /* Keng ekranda kontent shu kenglikda markazlashadi */
    --keng-kontent: 1200px;
  }

  /* ---------------------------------------------------------------- qobiq */

  /*
    ⚠️ Telefonda qobiq «qurilma» bo'lib chetlangan edi (`box-shadow`,
    `max-width: 620px`). Keng ekranda u **butun sahifa** bo'ladi.
  */
  body {
    background: var(--fon);
  }

  .app-qobiq {
    max-width: none;
    box-shadow: none;
    min-height: 100vh;
    padding-top: var(--app-bar-balandligi);
  }

  /* Sarlavha paneli — ekran bo'ylab, kengligi chegarlangan holda */
  .app-qobiq .sarlavha {
    left: 0;
    transform: none;
    max-width: none;
  }

  .sarlavha-ichi {
    max-width: var(--keng-kontent);
    margin: 0 auto;
    padding: var(--or-3) var(--or-6);
    gap: var(--or-4);
    min-height: var(--app-bar);
  }

  .app-qobiq .brend-logo {
    height: 31px;
  }

  /* ⚠️ Sarlavha markazidagi logotip ham +20% (panellar kattalashtirildi) */
  .sarlavha-markaz {
    height: 31px;
  }

  /* Keng ekranda to'liq logotip ko'rinadi, gul belgisi kerak emas */
  .app-qobiq .brend-belgi {
    display: none;
  }

  /* Keng ekranda sarlavhadagi yozuv ko'rinadi (telefonda yashiriladi) */
  .app-qobiq .brend-izoh {
    display: block;
    font-size: 17px;
  }

  /* Sarlavhadagi amal tugmalari — ixchamroq */
  .sarlavha-ong .tugma-ikon {
    width: 44px;
    height: 44px;
  }

  .sarlavha-ong .tugma-ikon .ik {
    width: 24px;
    height: 24px;
  }

  /* Qidiruv — sarlavhada emas, tariflar ekranida (o'z joyida) */

  /* -------------------------------------------------------------- ekranlar */

  .app-qobiq .asosiy,
  .ekran {
    max-width: var(--keng-kontent);
    margin: 0 auto;
  }

  .ekran {
    padding: var(--or-4) var(--or-5) calc(var(--pastki-nav) + var(--or-6));
  }

  /*
    ⚠️ Keng ekranda «ekran»lar markazlashgan **karta** bo'lib turadi: cheksiz
    kenglikda cho'zilib ketmasin (bosh menyu, To'lov, AI, Yordam, Sozlamalar).
  */
  #ekranUy,
  #ekranTolov,
  #ekranAi,
  #ekranYordam,
  #ekranTil {
    max-width: 760px;
  }

  /* Sozlamalar — keng ekranda **ikki ustun** (joy ko'p, qatorlar sig'adi) */
  .sozlama-royxat {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--or-3);
  }

  /* Til qatori va tungi rejim — birinchi ustunda */
  .til-qator {
    grid-column: 1;
  }

  .sozlama-qator {
    min-height: 46px;
    padding: var(--or-2) var(--or-3);
  }

  .sozlama-matn {
    font-size: 13px;
  }

  /* Bosh menyu — ikki xizmat yonma-yon (keng ekranda ustunli tor ko'rinadi) */
  .uy-tepa {
    padding: var(--or-5) 0 var(--or-6);
  }

  .uy-logo {
    width: 152px;
    max-width: 30%;
  }

  .uy-nom {
    font-size: 21px;
  }

  /*
    ⚠️ Foydalanuvchi talabi (2026-10-17, 4-qism): ikki xizmat **bir-birining
    ostida (2 qator)** va **sahifa markazida** turadi — keng ekranda ham
    yonma-yon qo'yilmaydi.
  */
  .xizmatlar {
    display: flex;
    flex-direction: column;
    gap: var(--or-4);
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
  }

  .xizmat {
    min-height: 86px;
    gap: var(--or-4);
    padding: var(--or-3) var(--or-4);
  }

  .xizmat-belgi {
    width: 46px;
    height: 46px;
  }

  /* ⚠️ Strelka — matnning o'ng chetida (bir qatorda), burchakda emas */
  .xizmat-strelka {
    position: relative;
    top: auto;
    right: auto;
  }

  .xizmat-nom {
    font-size: 17px;
  }

  /* To'lov / AI — markazlashgan karta */
  .tez-ekran {
    padding: var(--or-8) var(--or-5);
  }

  .tez-rasm {
    width: 180px;
    max-width: 34%;
  }

  /*
    ⚠️ 2026-10-17 (3-qism): tariflar ekranida operatorlar qatori **yo'q** —
    kompaniya nomi va logotipi sarlavha panelida turadi (foydalanuvchi talabi:
    «Shu tariflar sahifasida faqat tarif kategoriylari ko'rinsin»).
    Shu sababli bu yerda faqat sahifa tituli (kompaniya tanlash ekranida) va
    kategoriya chiplari o'lchamlari moslanadi.
  */
  .app-qobiq .tarif-bosh {
    display: block;
    padding: var(--or-3) 0 var(--or-2);
  }

  .tarif-bosh-nom {
    font-size: 18px;
  }

  .app-qobiq .tarif-tuzilma {
    display: block;
  }
  /* Chiplar paneli — yopishish siljishi sarlavha paneliga moslashadi */
  .app-qobiq .boshqaruv {
    top: var(--yopishqa-tepa);
    padding: var(--or-2) 0;
  }

  .app-qobiq .kategoriya-qator {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--or-3);
    padding-bottom: var(--or-2);
  }

  .app-qobiq .chip {
    height: 30px;
    font-size: 12.5px;
    padding: 0 var(--or-3);
  }

  /*
    ⚠️ Qidiruv paneli endi **sarlavhadagi filtr tugmasi** bilan ochiladi
    (foydalanuvchi talabi, 2026-10-17): sahifadagi `<summary>` yashiriladi,
    panel esa yopiq turadi — ochish uchun header'dagi tugma bosiladi
    (`asosiy.js` → `filtrniAlmashtir`). Telefon rejimida esa `<summary>`
    ko'rinadi (o'z joyida).
  */
  .app-qobiq .filtr-quti > summary {
    display: none;
  }

  .app-qobiq .filtr-quti {
    margin-bottom: var(--or-3);
  }

  .app-qobiq .filtr-quti .vositalar-joy {
    margin-top: var(--or-2);
  }

  /* Filtr tugmasi — sarlavhada, orqaga tugmasidan keyin, faqat tariflar ekranida */
  html[data-ekran="tariflar"] .app-qobiq .sarlavha-filtr {
    display: inline-flex;
  }

  /* Tarif kartalari — keng ekranda **ikki ustun** (bo'sh joy qolmasin) */
  .app-qobiq .tarif-tarmoq {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--or-4);
  }

  /* Karta matnlari — keng ekranda bir pog'ona kichraytiriladi (100% = 75%) */
  .app-qobiq .tarif-karta-nom {
    font-size: 16px;
  }

  .app-qobiq .tarif-narx {
    font-size: 17px;
  }

  .app-qobiq .tarif-narx-davri {
    font-size: 11px;
  }

  .app-qobiq .tarif-metrika span {
    font-size: 11.5px;
  }

  .app-qobiq .tarif-metrika .ik {
    width: 15px;
    height: 15px;
  }

  .app-qobiq .tarif-badge {
    padding: 5px 9px;
    font-size: 11.5px;
  }

  .app-qobiq .tarif-badge .ik {
    width: 15px;
    height: 15px;
  }

  .app-qobiq .tarif-batafsil {
    min-height: 42px;
  }

  .app-qobiq .tarif-batafsil .batafsil-matn {
    font-size: 13px;
  }

  .app-qobiq .tarif-titul-izoh {
    font-size: 12px;
  }

  /* ------------------------------------------------- pastki navigatsiya */

  /*
    ⚠️ Foydalanuvchi ruxsat berdi: *«Bottom navigationdagi buttonlarni kompyuter
    browseri uchun boshqa qulay bo'lgan joylarga ham o'zgartirishing mumkin.»*
    Eng qulayi — **ekran bo'ylab yoyilgan, markazlashgan** pastki panel
    (telefonda tor qobiqqa yopishgan edi).
  */
  .app-qobiq .pastki-nav {
    left: 0;
    transform: none;
    max-width: none;
  }

  .pastki-nav-ichi {
    max-width: 760px;
    margin: 0 auto;
    min-height: var(--pastki-nav);
    padding: 4px var(--or-5);
    gap: var(--or-2);
  }

  .nav-tugma {
    min-height: 58px;
    font-size: 13.5px;
    border-radius: 16px;
  }

  .nav-tugma .ik {
    width: 26px;
    height: 26px;
  }

  /* «AI» roboti keng ekranda ham panel ichida, lekin sal kattaroq */
  .nav-ai-rasm {
    width: 62px;
    height: 62px;
    margin-top: -14px;
    margin-bottom: -8px;
  }

  /* ------------------------------------------------------------- futer */

  /*
    ⚠️ Keng ekranda futer qaytadi (telefonda uni pastki navigatsiya
    almashtiradi) — u faqat **tariflar** ekranida ko'rinadi (`app.css`).
  */
  .futer {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   Juda keng ekranlar (≥ 1600px): kontent markazda, atrofida bo'sh joy
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  :root {
    --keng-kontent: 1440px;
  }

  .app-qobiq .tarif-tarmoq {
    grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
  }
}