/* ════════════════════════════════════════════════════════════
   TERAN ILDIZ — enhance.css  (v17)
   Qo'shimcha motion / UI-UX sayqali. Faqat ustiga qo'shadi,
   mavjud tartibni buzmaydi. prefers-reduced-motion hurmat qilinadi.
════════════════════════════════════════════════════════════ */

/* ── Tashqi Manbalar tugmalari endi <button> — to'g'ri ko'rinish ── */
.ti-ext-link {
  cursor: pointer;
  font-family: inherit;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Yorug'lik sürtmasi (sheen) — hoverda chapdan o'ngga o'tadi */
.ti-ext-link::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
    transparent 0%,
    color-mix(in srgb, var(--lk-color) 30%, transparent) 48%,
    transparent 62%);
  transform: translateX(-120%);
  transition: transform .6s cubic-bezier(.2,.8,.25,1);
  z-index: -1;
  pointer-events: none;
}
.ti-ext-link:hover::before { transform: translateX(120%); }
.ti-ext-link:hover { transform: translateY(-2px) scale(1.015); }
.ti-ext-link:active { transform: translateY(0) scale(.98); }

/* Yo'naltiruvchi chevron (data-nav — ichkariga kirish belgisi) */
.ti-ext-go {
  font-size: .62rem;
  opacity: .55;
  margin-left: 2px;
  color: var(--lk-color);
  transition: transform .25s cubic-bezier(.2,.8,.25,1), opacity .25s;
}
.ti-ext-link:hover .ti-ext-go { transform: translateX(3px); opacity: 1; }

/* ── News feed elementi — chap urg'u chizig'i o'sadi ── */
.ti-feed-item { position: relative; }
.ti-feed-item::before {
  content: "";
  position: absolute; left: -2px; top: 14%; bottom: 14%;
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--aqua, #22d3ee), transparent);
  transform: scaleY(0); transform-origin: top;
  transition: transform .26s cubic-bezier(.2,.8,.25,1);
}
.ti-feed-item:hover::before { transform: scaleY(1); }
.ti-feed-item:hover .ti-feed-no {
  color: var(--aqua, #22d3ee);
  text-shadow: 0 0 10px var(--ic-aqua, rgba(34,211,238,.25));
}

/* ── Hero stats — bosqichma-bosqich yumshoq paydo bo'lish ── */
.hero-stat {
  opacity: 0;
  animation: heroStatIn .6s cubic-bezier(.2,.8,.25,1) forwards;
}
.hero-stat:nth-child(1){ animation-delay: .10s; }
.hero-stat:nth-child(2){ animation-delay: .20s; }
.hero-stat:nth-child(3){ animation-delay: .30s; }
.hero-stat:nth-child(4){ animation-delay: .40s; }
@keyframes heroStatIn {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Raqam yangilanganda nozik "tirik" puls */
.hero-stat-n { display: inline-block; will-change: transform; }

/* ── Hero CTA — sekin metall sürtma ── */
.hero-cta { position: relative; overflow: hidden; }
.hero-cta::after {
  content: "";
  position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg);
  animation: ctaSheen 4.2s ease-in-out infinite;
}
@keyframes ctaSheen {
  0%, 62% { left: -60%; }
  82%, 100% { left: 130%; }
}

/* ── Bo'lim sarlavhasi (rail) ostiga nozik aqua chiziq ── */
.rw-h, .ti-sec-hdr { position: relative; }
.rw-h::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  height: 2px; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--aqua, #22d3ee), transparent);
  transition: width .4s cubic-bezier(.2,.8,.25,1);
}
.rw:hover .rw-h::after { width: 38px; }

/* ── Kartochka — yumshoq ko'tarilish (mavjud hoverni to'ldiradi) ── */
#grid .card {
  transition: transform .26s cubic-bezier(.2,.8,.25,1),
              box-shadow .26s ease, border-color .26s ease;
}
#grid .card:hover {
  transform: translateY(-4px);
}

/* ── "Jonli Tasma" orb — nozik suzish (mavjud halqalar ustiga) ── */
.ti-live-orb { animation: orbFloat 5.5s ease-in-out infinite; }
@keyframes orbFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ── Rail bo'lim qatori — chapga nozik siljish + aqua chap chiziq ── */
.rw-sec { position: relative; transition: padding-left .2s ease, background .2s ease; }
.rw-sec::before {
  content: ""; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 2px; background: var(--aqua, #22d3ee); border-radius: 2px;
  transform: scaleY(0); transform-origin: center;
  transition: transform .22s ease;
}
.rw-sec:hover::before, .rw-sec.on::before { transform: scaleY(1); }
.rw-sec:hover { padding-left: 8px; }

/* ── Tasodifiy tugma (dice) — nozik tebranish hoverda ── */
.rw-rand:hover i.fa-dice { animation: diceWobble .5s ease; }
@keyframes diceWobble {
  0%,100% { transform: rotate(0); }
  30% { transform: rotate(-12deg); }
  60% { transform: rotate(10deg); }
}

/* ════════ Harakatni kamaytirish rejimi ════════ */
@media (prefers-reduced-motion: reduce) {
  .hero-stat { opacity: 1; animation: none; }
  .hero-cta::after,
  .ti-live-orb { animation: none; }
  .ti-ext-link::before { display: none; }
  .ti-ext-link:hover,
  #grid .card:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
 * v26.1 — PREMIUM ANIMATSIYALAR (kartalar + intro + ixcham manbalar)
 * Mavzu tokenlaridan foydalanadi — dark/silver/white da ishlaydi.
 * ═══════════════════════════════════════════════════════════════════ */

/* ── BARCHA KATEGORIYA KARTOCHKALARI — premium hover/press/reveal ── */
.card{
  transition:transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s ease, border-color .32s ease !important;
  will-change:transform;
}
.card:hover{
  transform:translateY(-5px) !important;
  border-color:var(--bdr-2) !important;
  box-shadow:0 18px 40px -20px rgba(0,0,0,.6), 0 0 0 1px var(--bdr-1) inset !important;
}
.card:active{ transform:translateY(-2px) scale(.99) !important; }
.card .card-cover, .card .card-thumb, .card img{ transition:transform .5s cubic-bezier(.16,1,.3,1); }
.card:hover .card-cover, .card:hover .card-thumb, .card:hover img{ transform:scale(1.05); }
.card::after{ /* yumshoq yorug'lik chizig'i */
  content:""; position:absolute; inset:0 0 auto 0; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--bdr-2),transparent); opacity:0; transition:opacity .3s; }
.card:hover::after{ opacity:.8; }
@media (prefers-reduced-motion:reduce){ .card,.card:hover{ transform:none !important; } }

/* ── INTRO (kichik qurilmalarda tartibsizlikni tuzatish + animatsiya) ── */
.hero-content{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.hero-content > *{ animation:hi-up .6s cubic-bezier(.16,1,.3,1) both; }
.hero-content > *:nth-child(1){ animation-delay:.04s; }
.hero-content > *:nth-child(2){ animation-delay:.10s; }
.hero-content > *:nth-child(3){ animation-delay:.16s; }
.hero-content > *:nth-child(4){ animation-delay:.22s; }
.hero-content > *:nth-child(5){ animation-delay:.28s; }
.hero-content > *:nth-child(6){ animation-delay:.34s; }
.hero-content > *:nth-child(7){ animation-delay:.40s; }
@keyframes hi-up{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .hero-content > *{ animation:none; } }

.hero-cta{ transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s; }
.hero-cta:hover{ transform:translateY(-2px); }
.hero-cta:active{ transform:scale(.96); }

/* Intro xususiyat chiplari — mobilda 2 ustun, ustma-ust chiqmaydi */
.hero-features{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; width:100%; }
.hero-features span{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  transition:transform .2s, border-color .2s; }
.hero-features span:hover{ transform:translateY(-2px); }

@media (max-width:480px){
  #heroIntro{ padding:18px 16px; min-height:100%; overflow-y:auto; }
  .hero-content{ gap:12px; padding-bottom:14px; }
  .hero-lang{ top:14px; right:14px; }
  .hero-title{ font-size:clamp(26px,9vw,40px); letter-spacing:.04em; }
  .hero-desc{ font-size:.86rem; line-height:1.5; }
  .hero-stats{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:6px; width:100%; }
  .hero-stat{ min-width:0; }
  .hero-stat-n{ font-size:1.15rem; }
  .hero-stat-l{ font-size:.56rem; }
  .hero-cta{ width:100%; justify-content:center; }
  /* chiplar 2 ustunli, teng, yopishmaydi */
  .hero-features{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .hero-features span{ justify-content:center; padding:9px 10px; font-size:.74rem; white-space:normal; text-align:center; }
}
@media (max-width:340px){
  .hero-stats{ grid-template-columns:repeat(2,1fr) !important; }
  .hero-features{ grid-template-columns:1fr; }
}

/* ── IXCHAM: Tashqi Manbalar (Iymon Xaritasi) + Yangiliklar ── */
.imap.in-split .imap-stage{ height:300px !important; }
@media (max-width:900px){ .imap.in-split .imap-stage{ height:330px !important; } }
.ti-hero-grid{ gap:16px !important; }
.ti-live-panel{ padding:16px 18px !important; }
#ti-sec-random{ padding:14px 14px !important; }
/* Yangiliklar elementlari ixcham */
.ti-feed-item{ padding:9px 10px !important; }
.ti-feed-ttl{ font-size:.84rem !important; line-height:1.34 !important; }
.ti-feed-date{ font-size:.66rem !important; }
.ti-feed-source{ font-size:.6rem !important; }

/* ═══════════════════════════════════════════════════════════════════
 * v26.2 — INTRO overlap FIX (telefon + planshet) + manbalar/yangiliklar
 * ═══════════════════════════════════════════════════════════════════ */
/* Flex-center + overflow tepani kesib qo'yardi → flex-start + margin:auto */
.hero-intro{ align-items:flex-start !important; }
.hero-content{
  margin-block:auto !important;
  padding:72px 20px 32px !important;
  max-width:560px !important; width:100%;
  text-align:center;
}
.hero-lang{ position:absolute !important; top:16px !important; right:16px !important; z-index:30 !important; }

/* Telefon */
@media (max-width:600px){
  .hero-content{ padding:66px 16px 28px !important; gap:12px; }
  .hero-title{ font-size:clamp(26px,8.5vw,38px) !important; }
  .hero-sub{ font-size:.92rem; }
  .hero-desc{ font-size:.85rem; line-height:1.5; }
  .hero-stats{ display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:6px; width:100%; }
  .hero-stat-n{ font-size:1.1rem; } .hero-stat-l{ font-size:.55rem; }
  .hero-cta{ width:100%; justify-content:center; }
  .hero-features{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px; width:100%; }
  .hero-features span{ justify-content:center; padding:10px; font-size:.74rem; white-space:normal; text-align:center; line-height:1.25; }
}
@media (max-width:360px){
  .hero-content{ padding-top:60px !important; }
  .hero-stats{ grid-template-columns:repeat(2,1fr) !important; }
  .hero-features{ grid-template-columns:1fr !important; }
}
/* Planshet — markazlangan, qulay */
@media (min-width:601px) and (max-width:1024px){
  .hero-content{ max-width:600px !important; padding:80px 28px 36px !important; }
  .hero-features{ display:flex !important; flex-wrap:wrap; justify-content:center; gap:10px; }
  .hero-features span{ flex:0 1 auto; }
}

/* ── Foydalanilgan manbalar + Yangiliklar — YONMA-YON, IXCHAM ── */
@media (min-width:760px){
  .ti-hero-grid{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:14px !important; align-items:start !important; }
}
.ti-manba-panel{ padding:14px 16px !important; }
#ti-sec-random{ padding:13px 14px !important; }
.ti-news-feed-list{ max-height:430px; overflow-y:auto; padding-right:4px; }
.ti-news-feed-list::-webkit-scrollbar{ width:6px; }
.ti-news-feed-list::-webkit-scrollbar-thumb{ background:var(--bdr-1); border-radius:4px; }

/* ═══════════════════════════════════════════════════════════════════
 * v26.3 — bo'sh joy yo'q (ustma-ust ixcham) + sana kattaroq + mobil tugmalar
 * ═══════════════════════════════════════════════════════════════════ */
/* 2-ustun bekor: yopiq accordion yonida bo'sh joy qolardi → ustma-ust ixcham */
@media (min-width:760px){
  .ti-hero-grid{ display:flex !important; flex-direction:column !important; gap:12px !important; }
}
.ti-manba-panel{ padding:13px 16px !important; }
#ti-sec-random{ padding:13px 14px !important; }
.ti-news-feed-list{ max-height:460px; overflow-y:auto; padding-right:4px; }
.ti-news-feed-list::-webkit-scrollbar{ width:6px; }
.ti-news-feed-list::-webkit-scrollbar-thumb{ background:var(--bdr-1); border-radius:4px; }

/* ── SANA / dateline — kattaroq, kontrastli, premium ── */
.ti-dateline{ font-size:.82rem !important; color:var(--txt) !important; letter-spacing:.1em !important;
  gap:12px !important; padding-bottom:13px !important; align-items:center; flex-wrap:wrap; }
.ti-dateline .tdl-hijri{ color:var(--gold) !important; font-weight:700 !important; }
.ti-dateline .tdl-greg{ color:var(--ink) !important; opacity:.92 !important; font-weight:600; }
.ti-dateline .tdl-tools{ margin-left:auto; }
@media (max-width:640px){
  .ti-dateline{ font-size:.76rem !important; gap:8px 12px !important; }
  /* til/mavzu tugmalari MOBILDA HAM ko'rinsin (avval yashirilgan edi) */
  .ti-dateline .tdl-brand{ display:inline-flex !important; }
  .ti-dateline .tdl-sep{ display:none !important; }
  .ti-dateline .tdl-tools{ margin-left:auto; }
}
/* (Safe-area body paddingi olib tashlandi — ortiqcha bo'shliq bermasligi uchun) */

/* ═══ v26.6 — Tashqi nashr (news) kartalariga premium animatsiya/shadow ═══ */
.ti-news-card{
  transition:transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s ease, border-color .32s ease !important;
  will-change:transform;
}
.ti-news-card:hover{
  transform:translateY(-5px) !important;
  border-color:var(--bdr-2) !important;
  box-shadow:0 20px 44px -22px rgba(0,0,0,.65), 0 0 0 1px var(--bdr-1) inset !important;
}
.ti-news-card:active{ transform:translateY(-2px) scale(.995) !important; }
.ti-news-card img, .ti-news-card .ti-news-thumb{ transition:transform .5s cubic-bezier(.16,1,.3,1); }
.ti-news-card:hover img, .ti-news-card:hover .ti-news-thumb{ transform:scale(1.05); }
.ti-news-card{ animation:tinc-in .45s cubic-bezier(.16,1,.3,1) both; }
@keyframes tinc-in{ from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .ti-news-card,.ti-news-card:hover{ animation:none; transform:none !important; } }

/* ═══ v26.7 — Karta tugmalari (Saqlash/Yuklab/Ulashish) ustma-ust chiqmasin ═══ */
.cab-bar{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  gap:6px !important;
  overflow:visible !important;
  flex-wrap:nowrap !important;
}
.cab-btn{
  flex-shrink:1 !important;
  min-width:0 !important;
  justify-content:center !important;
  padding:8px 6px !important;
  gap:6px !important;
}
.cab-btn span{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Tor kartalar/telefon — faqat ikon (yopishmaydi, ustma-ust chiqmaydi) */
@media (max-width:560px){
  .cab-btn span{ display:none !important; }
  .cab-btn{ padding:10px 0 !important; }
  .cab-btn i{ font-size:15px !important; }
}

/* ═══ v26.7 — Maqola amal paneli (Saqlash/Nusxa/Ulashish/Yuklash) ═══ */
.art-actions{ display:flex; align-items:center; margin-left:auto; }
.pa-bar{ display:flex; align-items:center; gap:6px; flex-wrap:nowrap; }
.pa-btn{ display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  padding:8px 11px; border-radius:11px; border:1px solid var(--bdr-1);
  background:color-mix(in srgb,var(--ink) 5%, transparent); color:var(--txt);
  font-family:inherit; font-size:.78rem; font-weight:500; line-height:1; white-space:nowrap;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), color .18s, border-color .18s, background .18s;
  -webkit-tap-highlight-color:transparent; }
.pa-btn i{ font-size:14px; }
.pa-btn span{ display:none; }
@media (min-width:920px){ .pa-btn span{ display:inline; } }
.pa-btn:hover{ color:#5fd1d8; border-color:rgba(95,209,216,.4); background:rgba(95,209,216,.1); }
.pa-btn:active{ transform:scale(.9); }
.pa-btn.on{ color:#5fd1d8; border-color:rgba(95,209,216,.5); background:rgba(95,209,216,.14); }
.pa-share:hover{ color:#7bd4a0; border-color:rgba(120,212,160,.4); background:rgba(120,212,160,.1); }
.pa-dl:hover{ color:#ffd980; border-color:rgba(255,210,100,.4); background:rgba(255,210,100,.1); }
@supports not (background:color-mix(in srgb,red,blue)){ .pa-btn{ background:var(--surf-2); } }
@media (max-width:560px){ .pa-btn{ padding:9px; } .pa-btn i{ font-size:15px; } }

/* ═══ v26.8 — Kartadagi amal paneli (Saqlash/Nusxa/Ulashish/Yuklash) ═══ */
.ti-news-footer{ flex-wrap:wrap; gap:8px; }
.ti-news-acts.pa-cardbar{ display:inline-flex; align-items:center; gap:5px; margin-left:auto; flex-wrap:wrap; justify-content:flex-end; }
.pa-cbtn{ width:31px; height:31px; display:inline-grid; place-items:center; border-radius:9px; cursor:pointer;
  border:1px solid var(--bdr-1); background:color-mix(in srgb,var(--ink) 5%, transparent); color:var(--muted);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), color .18s, border-color .18s, background .18s;
  -webkit-tap-highlight-color:transparent; }
.pa-cbtn i{ font-size:13px; }
.pa-cbtn:hover{ color:#5fd1d8; border-color:rgba(95,209,216,.42); background:rgba(95,209,216,.1); }
.pa-cbtn:active{ transform:scale(.86); }
.pa-cbtn.on{ color:#5fd1d8; border-color:rgba(95,209,216,.5); background:rgba(95,209,216,.15); }
.pa-cbtn.pa-share:hover{ color:#7bd4a0; border-color:rgba(120,212,160,.42); background:rgba(120,212,160,.1); }
.pa-cbtn.pa-dl:hover{ color:#ffd980; border-color:rgba(255,210,100,.42); background:rgba(255,210,100,.1); }
@supports not (background:color-mix(in srgb,red,blue)){ .pa-cbtn{ background:var(--surf-2); } }
@media (max-width:420px){ .pa-cbtn{ width:29px; height:29px; } .pa-cbtn i{ font-size:12px; } }

/* ═══════════════════════════════════════════════════════════════════
 * v26.9 — DIZAYN / RANG / MOTION kuchaytirish (global, additiv)
 * ═══════════════════════════════════════════════════════════════════ */
/* Kategoriya pill-lari — silliq hover/active, motion */
#catbar .nc{
  transition:transform .26s cubic-bezier(.16,1,.3,1), background .26s, border-color .26s, box-shadow .26s, color .26s !important;
}
#catbar .nc:hover{ transform:translateY(-2px); }
#catbar .nc:active{ transform:translateY(0) scale(.97); }
#catbar .nc.on{ box-shadow:0 8px 22px -10px var(--gold-dim,rgba(201,169,106,.5)); }
#catbar .nc i{ transition:transform .26s cubic-bezier(.34,1.56,.64,1); }
#catbar .nc:hover i{ transform:scale(1.14); }

/* Sahifa o'zgarganda grid yumshoq paydo bo'lsin */
#grid{ animation:ti-gridin .4s cubic-bezier(.16,1,.3,1); }
@keyframes ti-gridin{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* Sahifa sarlavhasi (.phd) reveal */
.phd{ animation:ti-phdin .5s cubic-bezier(.16,1,.3,1); }
@keyframes ti-phdin{ from{ opacity:0; transform:translateX(-10px); } to{ opacity:1; transform:none; } }

/* Yon menyu elementlari — hover motion */
#side .side-item{ transition:transform .2s cubic-bezier(.16,1,.3,1), background .2s, color .2s; }
#side .side-item:hover{ transform:translateX(4px); }

/* Toast — yumshoq kirish */
.ti-toast,#tiToast,.toast{ animation:ti-toastin .35s cubic-bezier(.16,1,.3,1); }
@keyframes ti-toastin{ from{ opacity:0; transform:translateY(10px) scale(.96); } to{ opacity:1; transform:none; } }

/* Tugmalar — umumiy press his (mikro-interaksiya) */
button:not(.tiw-go):not(.tiw-cancel):active{ transform:scale(.97); }

@media (prefers-reduced-motion:reduce){
  #grid,.phd,#catbar .nc,.ti-toast{ animation:none !important; }
  #catbar .nc:hover,#side .side-item:hover{ transform:none; }
}

/* ═══════════════════════════════════════════════════════════════════
 * v27.1 — Header amal qatori + to'liq ekran + orientation
 * ═══════════════════════════════════════════════════════════════════ */
/* Dateline dublikat til/mavzu tugmalari yashiriladi (header'da bor) */
.ti-dateline .tdl-tools{ display:none !important; }

/* Header tugmalari doim ko'rinadi (bosh sahifada ham), qidiruv qatorida */
#nav #langBtn, #nav #themeBtn{ display:inline-flex !important; align-items:center; gap:6px; }
#nav #langBtn{ font-weight:600; }
#nav #langBtn span[data-lang]{ font-size:.8rem; letter-spacing:.02em; }

/* Maxfiylik qalqoni — header'da, qizg'ish (boshqalaridan aniq farqli) */
#nav .tiw-hdr-btn{ border-radius:50px; margin-left:2px;
  color:#ff8f6b; background:rgba(255,120,90,.1); border:1px solid rgba(255,120,90,.32);
  box-shadow:none; animation:none; }
#nav .tiw-hdr-btn:hover{ color:#fff; background:linear-gradient(135deg,#ff7a5c,#e8533a); border-color:transparent;
  box-shadow:0 6px 18px -8px rgba(232,83,58,.7); }
#nav .tiw-hdr-btn i{ font-size:14px; }

/* Tugmalar mikro-interaksiya */
#nav .nb{ transition:transform .2s cubic-bezier(.34,1.56,.64,1), color .2s, background .2s, border-color .2s; }
#nav .nb:hover{ transform:translateY(-1px); }
#nav .nb:active{ transform:scale(.94); }

/* To'liq ekran (telefon butun ekranni egallasin) */
@media (max-width:900px){
  html, body{ min-height:100dvh; }
}

/* ═══ v27.1 — Reader yopish/orqaga tugmasi DOIMIY (sticky) ═══ */
.art-top, .hu-rdr-top{
  position:sticky !important; top:0; z-index:20;
  background:color-mix(in srgb, var(--surf,#0d0f12) 92%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
@supports not (background:color-mix(in srgb,red,blue)){
  .art-top, .hu-rdr-top{ background:var(--surf,#0d0f12); }
}
.art-back, .hu-rdr-back, #artBack, #huRdrBack{
  position:relative; z-index:21;
}
/* Reader to'liq balandlik (telefonda butun ekran) */
#artRdr, #huArtRdr{ height:100dvh; }

/* ═══ v27.2 — Intro iqtibosi "Haqiqiy o'zgarish ildizdan boshlanadi" ═══ */
.hero-quote{
  margin:14px auto 4px; max-width:30ch; font-family:var(--ff-serif,Georgia,serif); font-style:italic;
  font-size:clamp(.95rem,2.6vw,1.12rem); line-height:1.5; color:var(--gold-hi,#e0c188);
  letter-spacing:.01em; position:relative; padding-top:14px; opacity:.96;
}
.hero-quote::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:46px; height:2px; border-radius:2px; background:linear-gradient(90deg,transparent,var(--gold,#c9a96a),transparent); }
@media (max-width:480px){ .hero-quote{ font-size:.95rem; max-width:90%; } }

/* Footer iqtibosi */
.tf-quote{ margin-top:12px; font-family:var(--ff-serif,Georgia,serif); font-style:italic; font-size:.88rem;
  color:var(--gold-hi,#e0c188); opacity:.9; line-height:1.4; }

/* ═══ v27.3 — Playlist kartada "play" belgisi (ichki ochiladi) ═══ */
.ti-yt-pl-thumb{ position:relative; }
.ti-yt-pl-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.28); opacity:0; transition:opacity .25s ease; }
.ti-yt-pl-card{ cursor:pointer; }
.ti-yt-pl-card:hover .ti-yt-pl-play{ opacity:1; }
.ti-yt-pl-play i{ width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:rgba(232,83,58,.92); color:#fff; font-size:17px; padding-left:3px;
  box-shadow:0 6px 20px -4px rgba(232,83,58,.7); transform:scale(.85); transition:transform .25s cubic-bezier(.34,1.56,.64,1); }
.ti-yt-pl-card:hover .ti-yt-pl-play i{ transform:scale(1); }
@media (prefers-reduced-motion:reduce){ .ti-yt-pl-play,.ti-yt-pl-play i{ transition:none; } }

/* ═══════════════════════════════════════════════════════════════════
 * v27.7 — APPLE-STYLE RESPONSIVE + ACCESSIBILITY (additiv, xavfsiz)
 * Hech qaysi mavjud uslubni o'chirmaydi; faqat ustiga yumshoq qo'shadi.
 * ═══════════════════════════════════════════════════════════════════ */

/* ── 1) Asos: native his, silliqlik (sticky'ni buzmaydigan, xavfsiz) ── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img { max-width: 100%; }
button, a, [role="button"], input, select, textarea { -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── 2) Accessibility: aniq focus halqasi (klaviatura) ── */
:focus-visible { outline: 2px solid var(--cacc, var(--gold, #c9a96a)); outline-offset: 2px; border-radius: 8px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible),
input:focus:not(:focus-visible), [role="button"]:focus:not(:focus-visible) { outline: none; }

/* ── 3) Notch / xavfsiz hudud (iOS) ── */
@supports (padding: max(0px)) {
  #nav { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .main { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
}

/* ── 4) Apple-style premium polish: yumshoq soya, silliq radius ── */
.card, .ti-news-card { border-radius: 18px; }
.card { box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px -16px rgba(0,0,0,.4); }
.cbtn, .nb, .cab-btn, .pa-cbtn { -webkit-touch-callout: none; }

/* ── 5) Katta teginish maydoni (Apple HIG ~44px) — sensorli qurilmalarda ── */
@media (hover: none) and (pointer: coarse) {
  .cab-btn, .pa-cbtn, .ti-news-acts a, .ti-news-acts button { min-height: 40px; min-width: 40px; }
  .cbtn { min-height: 38px; padding-top: 9px; padding-bottom: 9px; }
  .nc { min-height: 40px; }
  .side-item { min-height: 46px; }
}

/* ═══════════════════════════════════════════════════════════════════
 * v27.7 — MOBIL HEADER: til(Lotin/Kiril) + tema doim ko'rinsin;
 * maxfiylik/statistika menyuда qoladi; logo qisqaradi; to'liq sig'sin.
 * ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #nav { gap: 7px; }
  .logo { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .logo-tx, .logo-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .logo-sb { display: none; }
  .nav-actions { flex: 0 0 auto; gap: 5px; }
  .nb { width: 36px; height: 36px; }
  .nb.lang-btn { padding: 0 9px; font-size: 11px; letter-spacing: .3px; width: auto; }
  /* Maxfiylik + statistika mobilда menyu ichida (header sig'sin, til+tema ko'rinsin) */
  #nav #tiwHdr, #nav #tistHdr { display: none !important; }
}
@media (max-width: 380px) {
  #nav { gap: 5px; padding-left: 8px; padding-right: 8px; }
  .nb { width: 33px; height: 33px; font-size: 12px; }
  .nb.lang-btn { padding: 0 7px; font-size: 10px; }
}

/* ── 6) Tablet/Desktop nozikliklari (768–1024+) ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .main { padding-left: clamp(18px, 3vw, 28px); padding-right: clamp(18px, 3vw, 28px); }
}

/* ── 7) Modal/dialoglar — kichik ekranda to'liq sig'sin, scroll ── */
@media (max-width: 480px) {
  .tiw-card, .tist-card { width: 100%; max-height: 90dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* ═══════════════════════════════════════════════════════════════════
 * v27.9 — MOBIL OVERLAP TUZATISH + xavfsiz gorizontal overflow
 * 'overflow:clip' — 'hidden'dan farqli: position:sticky'ni BUZMAYDI.
 * ═══════════════════════════════════════════════════════════════════ */
body { overflow-x: clip; }

/* Bosh sahifa bo'limlari to'liq kenglik, ustma-ust chiqmasin */
.main > *, #ti-hero, #ti-islamic-tools, #ti-smart-rec, #ti-foot, .ti-sec, .grid, .phd { max-width: 100%; }

/* Gorizontal karusel/tasmalar ekrandan toshmasin */
.ti-news-feed-list, .ti-news-feed, .rec-track, .tisl-carousel, .cab-bar { max-width: 100%; }

/* ── Intro: kichik ekranda toza ustun, "Kirish" tugmasi doim ko'rinsin ── */
@media (max-width: 480px) {
  .hero-intro { align-items: flex-start; }
  .hero-content { padding: 72px 16px 40px; max-width: 100%; }
  .hero-title { font-size: clamp(26px, 9vw, 40px); word-break: break-word; line-height: 1.08; }
  .hero-sub { font-size: 13px; }
  .hero-stats { gap: 8px; flex-wrap: wrap; }
  .hero-lang { top: 12px; right: 12px; }
  .hero-features { flex-wrap: wrap; justify-content: center; gap: 8px; }
}
/* Past balandlikdagi telefonlarda intro siqilsin (CTA ko'rinsin) */
@media (max-height: 700px) and (max-width: 768px) {
  .hero-content { padding-top: 60px; padding-bottom: 24px; }
  .hero-divider { margin: 10px auto; }
}

/* Eng kichik ekran (320–360) — toshib ketish bo'lmasin */
@media (max-width: 360px) {
  .main { padding-left: 12px; padding-right: 12px; }
  .grid { gap: 10px; }
}