/* ════════════════════════════════════════════════════════════════════
   TERAN ILDIZ — css/mobile.css   (v128.1 · TELEFONGA MOSLASH)
   ────────────────────────────────────────────────────────────────────
   OXIRGI QATLAM (`@layer ... , mobile`) — shu sabab boshqa qatlamlarni
   `!important` siz bosadi. Ichida FAQAT telefon o'lchamidagi qoidalar
   bor: kompyuter va planshet ko'rinishiga tegilmaydi.

   NEGA KERAK BO'LDI (brauzerda o'lchandi, 2026-09-17):

   1) KICHIK TELEFONDA «KUTUBXONAGA KIRISH» TUGMASI KO'RINMASDI.
      Kirish ekrani kontenti `.hero-content` (ichki aylantirish) ga
      sig'masdi va asosiy tugma pastda, ko'rinmas joyda qolardi:

        360×640 → tugma 582–636, ko'rinadigan quti 68–576  → YO'Q
        320×568 → tugma 626–680                            → YO'Q

      Mavjud siqish qoidalari faqat `max-height: 680px` va `560px` da
      ishlardi — 568 va 640 balandlikdagi telefonlar aynan orada qolgan.

   2) UMUMIY «KATTALIK». Tor ekranda shrift va oraliqlar kompyuterdagi
      o'lchamda qolardi: ekranga kam narsa sig'ib, hammasi yirik va
      siqiq ko'rinardi.

   3) TAKRORLANGAN TUGMALAR. Bosh sahifa sanasi ostidagi «Кирилл» va
      mavzu tugmalari yuqoridagi sarlavha panelida allaqachon bor —
      telefonda bir ekranning 44 px i behuda ketardi.

   IKKI QAVAT HIMOYA
      Siqish (a) kontentni sig'dirishi kerak, lekin qurilma shrifti
      kattalashtirilgan (Android «Matn o'lchami») yoki klaviatura ochiq
      bo'lsa baribir sig'masligi mumkin. Shu sabab (b) asosiy tugma
      YOPISHQOQ: `.hero-content` aylantirilsa ham u pastda turaveradi.
   ════════════════════════════════════════════════════════════════════ */

@layer mobile {

  /* ══════════════════════════════════════════════════════════════════
     1) UMUMIY O'LCHAM — tor ekranda ildiz shrifti kichrayadi.
     Loyihadagi o'lchamlarning ko'pi `rem` da, shu sabab bitta qoida
     butun ilovani mutanosib ixchamlashtiradi. Bosish maydonlari (44 px)
     `px` da — ular kichraymaydi.
     ══════════════════════════════════════════════════════════════════ */
  @media (max-width: 420px) {
    html { font-size: 15.4px; }
  }
  @media (max-width: 345px) {
    html { font-size: 14.8px; }
  }

  /* Android/iOS brauzerlari matnni o'zicha «kattalashtirmasin» */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  /* ══════════════════════════════════════════════════════════════════
     2) KIRISH EKRANI
     ══════════════════════════════════════════════════════════════════ */
  /* Shart IKKI tomonlama: tor ekran YOKI past ekran. Telefon yotiq
     holatda 740×360 bo'ladi — eni «katta», bo'yi esa juda past, va
     avval aynan shu holat e'tibordan chetda qolgan edi. */
  @media (max-width: 620px), (max-height: 700px) {
    .hero-top { padding: 10px max(12px, env(safe-area-inset-left)) 6px max(12px, env(safe-area-inset-right)); }
    .hero-content { padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right)); }

    .hero-kicker { margin-bottom: 9px; padding: 5px 12px; font-size: .64rem; letter-spacing: .12em; }
    .hero-title { font-size: clamp(1.8rem, 8.6vw, 2.7rem); margin-bottom: 6px; }
    .hero-quote { margin-bottom: 12px; font-size: .95rem; }
    .hero-search { margin-bottom: 11px; }
    /* 16px dan pastga tushirilmaydi: iOS fokusda sahifani zumlab
       yuboradi (intro.css dagi izoh) — faqat balandlik kamayadi. */
    .hs-in { height: 46px; }
    .hero-jump { margin-bottom: 11px; }
    .hero-stats { margin-bottom: 11px; }
    .hero-anon { margin-bottom: 12px; padding: 9px 12px 9px 11px; }
    .hero-anon-txt { font-size: .71rem; line-height: 1.52; }
    .hero-cta { height: 50px; font-size: .76rem; }

    /* Raqamlar — bitta qatorda, ixcham. Avval 2×2 bo'lib 130 px
       joy olardi; endi ~64 px. */
    .hero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hero-stat { padding: 8px 2px; gap: 2px; }
    .hero-stat-n { font-size: clamp(1rem, 4.4vw, 1.35rem); }
    .hero-stat-l { font-size: .5rem; letter-spacing: .08em; }
    .hero-stat:nth-child(3)::before { display: block; }
    .hero-stat:nth-child(n+3) { border-top: 0; }
  }

  /* Past bo'yli telefon — ishorani olib, joyni tugmaga beramiz */
  @media (max-height: 700px) {
    .hero-foot { display: none; }
    .hero-content { padding-bottom: 12px; }
    .hero-kicker { margin-bottom: 7px; }
    .hero-quote { margin-bottom: 9px; font-size: .88rem; }
    .hero-search { margin-bottom: 9px; }
    .hero-jump { margin-bottom: 9px; }
    .hero-stats { margin-bottom: 9px; }
    .hero-anon { margin-bottom: 10px; padding: 8px 11px; }
    .hero-anon-txt { font-size: .68rem; line-height: 1.45; }
  }

  /* Yotiq telefon (eni katta, bo'yi past): `min-width: 720px` qoidasi
     tez kirish chiplarini IKKI QATORGA yoyardi va 52 px joy yeb,
     kontentni sig'dirmasdi. Past ekranda chiplar yana bitta qatorli
     lentaga qaytadi. */
  @media (max-height: 620px) and (min-width: 620px) {
    .hero-jump {
      flex-wrap: nowrap; justify-content: flex-start;
      overflow-x: auto;
      mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    }
  }

  /* Juda past (klaviatura ochiq, yotiq holat) — faqat eng zaruri */
  @media (max-height: 600px) {
    .hero-kicker, .hero-quote { display: none; }
    .hero-title { font-size: clamp(1.6rem, 8vw, 2.2rem); }
    .hero-stats { margin-bottom: 8px; }
    .hero-anon { margin-bottom: 9px; }
  }

  /* ── ASOSIY TUGMA HAR DOIM KO'RINADI ──
     `.hero-content` — ichki aylantirish qutisi. Tugma uning pastiga
     «yopishadi»: kontent sig'masa ham (katta qurilma shrifti, ochiq
     klaviatura) foydalanuvchi uni ko'radi va bosa oladi. */
  @media (max-width: 620px), (max-height: 700px) {
    .hero-cta {
      position: sticky;
      bottom: max(6px, env(safe-area-inset-bottom));
      z-index: 12;
      margin-top: 2px;
    }
    /* Tugma ekran pastiga yopishib qolmasin */
    .hero-content { padding-bottom: 10px; }
  }

  /* ══════════════════════════════════════════════════════════════════
     3) BOSH SAHIFA — sana qatori
     Telefonda «Кирилл» va mavzu tugmalari sarlavha panelida bor,
     bu yerda takrorlanadi. Olib tashlanadi, blok ixchamlashadi.
     ══════════════════════════════════════════════════════════════════ */
  @media (max-width: 620px) {
    .tdl-brand { display: none; }
    #ti-dateline { margin-bottom: 10px; }
    .tdl-khilafah { padding: 5px 9px; }
    .tdl-hijri { font-size: .82rem; }
    .tdl-greg { font-size: .62rem; }
  }

  /* ══════════════════════════════════════════════════════════════════
     4) BO'LIM SARLAVHALARI VA ORALIQLAR
     Telefonda bo'limlar orasidagi 22 px va yirik sarlavhalar ekranning
     katta qismini yeydi.
     ══════════════════════════════════════════════════════════════════ */
  @media (max-width: 620px) {
    #ti-islamic-toolsSECTION,
    #ti-smart-rec,
    #ti-reco { margin-block: 4px 14px; }

    .tif-head { margin-bottom: 12px; }
    .tif-sub { margin-top: 5px; font-size: .78rem; }
    .reco-head, .tirec-head { margin-bottom: 8px; }
    .hm-sec { margin-bottom: 18px; }
    .hm-h { font-size: 1.02rem; }
  }

  /* ══════════════════════════════════════════════════════════════════
     5) O'QUVCHI SARLAVHA QATORI
     Tor ekranda qator sig'masdi: «Orqaga» (yozuvi bilan 96 px) +
     «Aa» + to'rtta amal tugmasi = 364 px, ekran esa 320–360 px.
     Yozuv olib tashlanadi (ikonka qoladi), oraliqlar qisqaradi.
     ══════════════════════════════════════════════════════════════════ */
  @media (max-width: 430px) {
    .art-top, .hu-rdr-top { gap: 4px; padding-inline: 10px; }
    .art-back span, .hu-rdr-back span { display: none; }
    .art-back, .hu-rdr-back { padding-inline: 12px; }
    .pa-bar { gap: 0; }
    .pa-btn { width: 40px; }
  }

  /* PDF: bet raqami — «betga o'tish» tugmasi. Barmoq uchun kengroq. */
  .pdf-nav-goto { min-width: 54px; min-height: 40px; }

  /* Eng mayda yozuvlar telefonda 9 px dan past tushmasin */
  @media (max-width: 420px) {
    .hero-stat-l { font-size: .6rem; }
    .tdl-kh-lbl, .tdl-greg { font-size: .62rem; }
    .cat-label { font-size: .68rem; }
  }

  /* ══════════════════════════════════════════════════════════════════
     6) BOSISH MAYDONLARI
     Shrift kichraygani bilan barmoq kichraymaydi: ikonkali tugmalar
     44×44 dan past tushmaydi (WCAG 2.5.5).
     ══════════════════════════════════════════════════════════════════ */
  @media (pointer: coarse) {
    .pa-cbtn, .pa-btn, .rdr-tool, .nav-btn { min-width: 44px; min-height: 44px; }
  }
}