/* ==========================================================================
   TERAN ILDIZ — responsive-pro.css   (v28.1)
   Moslashuvchanlik sayqali: telefon · katta telefon · planshet · desktop.

   FALSAFA: bu qatlam FAQAT ko'rinish va qulaylikni yaxshilaydi.
            HTML tuzilmasi va JS o'zgarmaydi — barcha funksiyalar saqlanadi.
            Eng oxirida yuklanadi, shuning uchun kerakli joylarda
            kaskadda g'olib chiqadi (boshqa fayllar buzilmaydi).

   IZCHIL BREAKPOINT TIZIMI:
     ≤ 480px        telefon
     481 – 767px    katta telefon
     768 – 1023px   planshet
     ≥ 1024px       desktop
     (qisqa balandlik / landscape uchun alohida qoidalar)
   ========================================================================== */


/* ──────────────────────────────────────────────────────────
   0) ASOSIY — matn o'lchami va iOS zum
   ────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* iOS Safari'da 16px dan kichik input fokusda butun sahifani zumlaydi —
   bu juda noqulay. Telefon/planshetda barcha matn maydonini 16px qilamiz
   (maydon balandligi o'zgarmaydi, faqat zum yo'qoladi). */
@media (max-width: 1023px) {
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select,
  .srch input, .srch-mob input,
  #srchIn, #srchMob, #apPlSearch, #apPlSearch input {
    font-size: 16px !important;
  }
}


/* ──────────────────────────────────────────────────────────
   1) KITOB KARTASI — AMAL TUGMALARI (Saqlash / Yuklash / Ulashish)

   MUAMMO: tugma matni tor kartaga sig'masdi va "Saql… / Yukl… / Ulas…"
           bo'lib kesilardi (planshet va desktopda ham).
   YECHIM: kartada HAR DOIM faqat ikonka — toza, izchil, hech qachon
           kesilmaydi. Ma'no aria-label/title orqali saqlanadi.
   ────────────────────────────────────────────────────────── */
.card .cab-bar {
  gap: 8px;
  padding: 10px 12px 12px;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow: visible;            /* ikonka sig'adi — scroll kerak emas */
}
.card .cab-bar .cab-btn {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0 !important;
  border-radius: 12px;
  display: inline-grid;
  place-items: center;
}
.card .cab-bar .cab-btn span {
  display: none !important;     /* matn yo'q → kesilmaydi */
}
.card .cab-bar .cab-btn i {
  font-size: 15px !important;
  line-height: 1;
}


/* ──────────────────────────────────────────────────────────
   2) TEGINISH MAYDONLARI — barmoq uchun qulay (≥44px)
      Faqat sensorli (coarse) qurilmalarda; sichqoncha ko'rinishi
      o'zgarmaydi, shuning uchun desktop tig'iz bo'lib qolmaydi.
   ────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .nb, .menu-btn, .search-btn,
  .ca-btn, .fav-btn,
  .mini-btn,
  .rdr-tool, .rdr-back,
  .pa-cbtn {
    min-width: 44px;
    min-height: 44px;
  }
  .card .cab-bar .cab-btn { width: 44px; height: 44px; }
  .nc        { min-height: 40px; }   /* keng pill — yetarli */
  .side-item { min-height: 48px; }   /* yon menyu — bemalol bosiladi */
  .cbtn      { min-height: 40px; }   /* "O'qish" tugmasi */
}


/* ──────────────────────────────────────────────────────────
   3) GRID / KARTA — kichik telefonlarda kengroq nafas
   ────────────────────────────────────────────────────────── */
@media (max-width: 360px) {
  .main  { padding-left: 10px; padding-right: 10px; }
  .grid  { gap: 10px; }
}

/* Katta telefon (yon o'girilgan yoki keng) — 2 ustun ortiqcha cho'zilmasin */
@media (min-width: 540px) and (max-width: 639px) {
  .grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}


/* ──────────────────────────────────────────────────────────
   4) NAVBAR / CATBAR — kichik ekranda ixcham, toza
   ────────────────────────────────────────────────────────── */
/* Tanlangan kategoriya pill chetga yopishib qolmasin */
#catbar { scroll-padding-inline: 14px; }

/* Juda tor telefonlarda til tugmasi matni o'rniga faqat ikonka
   (joy ochiladi, navbar tig'iz bo'lmaydi) */
@media (max-width: 340px) {
  .nb.lang-btn span { display: none; }
  .nb.lang-btn { width: 38px; padding: 0; }
  #nav { gap: 8px; padding: 0 10px; }
}


/* ──────────────────────────────────────────────────────────
   5) MODALLAR — notch (xavfsiz hudud) + qulaylik
      env(safe-area-inset-*) notch'siz qurilmada 0 bo'ladi → zararsiz.
   ────────────────────────────────────────────────────────── */
@supports (padding: max(0px)) {
  .rdr-top { padding-top: max(0px, env(safe-area-inset-top)); }
  .ap-top  { padding-top: max(0px, env(safe-area-inset-top)); }
  #mini    { padding-bottom: max(0px, env(safe-area-inset-bottom)); }
}

/* Audio pleyer boshqaruvi tor ekranda ham markazda, toza tursin */
@media (max-width: 380px) {
  .ap-controls { gap: 6px; }
  .ap-extras   { gap: 8px; flex-wrap: wrap; justify-content: center; }
}


/* ──────────────────────────────────────────────────────────
   6) HERO INTRO — qisqa / landscape ekranda hech narsa kesilmasin
      (.hero-intro allaqachon overflow-y:auto — biz nafas beramiz)
   ────────────────────────────────────────────────────────── */
@media (max-height: 640px) {
  .hero-content {
    padding-top: 26px;
    padding-bottom: 26px;
    gap: 11px;
  }
}
@media (max-height: 470px) and (orientation: landscape) {
  .hero-divider { margin: 6px auto; }
  .hero-stats   { gap: 10px; margin: 8px 0; }
  .hero-features{ gap: 8px 16px; }
}


/* ──────────────────────────────────────────────────────────
   7) PLANSHET (768–1023) — keng, vazmin tutilish
   ────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .main { padding-left: clamp(16px, 3vw, 28px); padding-right: clamp(16px, 3vw, 28px); }
}


/* ──────────────────────────────────────────────────────────
   8) YANGILIKLAR KARTASI — mobil sayqal
      Muammo 1: amal ikonlari (saqlash/nusxa/ulashish/yuklash) katta edi
                va 4-chisi kartaga sig'masdi (sensorli 40px majburlash).
      Muammo 2: karta juda cho'ziq edi (matn katta, 3 qatorli sarlavha).
      Yechim: matn ixcham + ikonlar bitta qatorda, teng, BARCHASI ko'rinadi.
   ────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Matn — ixchamroq, karta cho'ziq bo'lmasin */
  .ti-news-card .ti-news-body { padding: 10px 12px 12px; gap: 5px; }
  .ti-news-title   { font-size: 1rem;   line-height: 1.28; -webkit-line-clamp: 2; }
  .ti-news-excerpt { font-size: .83rem; line-height: 1.42; -webkit-line-clamp: 2; }
  .ti-news-badge   { font-size: .66rem; padding: 2px 7px; }
  .ti-news-date    { font-size: .76rem; }

  /* Footer — sana yuqorida, ikonlar pastda to'liq enlikda bitta qatorda */
  .ti-news-card .ti-news-footer {
    flex-direction: column; align-items: stretch; gap: 8px; margin-top: 10px;
  }
  .ti-news-card .ti-news-acts.pa-cardbar {
    width: 100%; margin-left: 0; gap: 6px; flex-wrap: nowrap;
    justify-content: space-between;
  }
  /* Ikonlar — teng bo'linadi, hech qachon toshmaydi (40px majburlash bekor) */
  .ti-news-card .ti-news-acts.pa-cardbar .pa-cbtn {
    flex: 1 1 0;
    min-width: 0 !important;
    width: auto !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 10px;
  }
  .ti-news-card .ti-news-acts.pa-cardbar .pa-cbtn i { font-size: 13px; }
}