/* ════════════════════════════════════════════════════════════════════ TERAN ILDIZ — css/editorial.css (v64 · 9-QATLAM · TAHRIRIY) ──────────────────────────────────────────────────────────────────── MAQSAD Multfilm ko'rinishni olib tashlash va o'rniga jahon yangilik saytlari (Reuters · BBC · Al Jazeera · Guardian · Economist) tilini qo'yish: qat'iy hairline chiziqlar, tinch monoxrom ikonlar, kuchli sarlavha ierarxiyasi, nol bezak. IMZO ELEMENTI — "USTUN CHIZIG'I" Har bir kartochka / tasma qatori / bo'lim chap chetida 3px kategoriya rangidagi vertikal chiziq bilan bog'lanadi. Bu gazeta ustuni yo'lagini takrorlaydi VA rang endi bezak emas, manba identifikatori bo'lib xizmat qiladi. Butun dizaynda jasorat FAQAT shu bitta joyda sarflanadi. QOIDALAR • FAQAT ustiga qo'shadi — 1..8 qatlamga tegmaydi. • Butun qatlam `html.ed` bilan boshlanadi. dan `ed` klassini olib tashlasa — sayt v63 holiga qaytadi. • Yangi rang palitrasi YO'Q: barcha 9 mavzu ishlashda davom etadi, ranglar mavjud tokenlardan olinadi. • Animatsiya soni 14 dan 2 ga tushdi (siyoh singishi + qizil registratsiya chizig'i). Boshqa hech narsa harakatlanmaydi. ════════════════════════════════════════════════════════════════════ */ /* ═══════════════ 1) TAHRIRIY TOKENLAR ═══════════════ */ html.ed { --ed-hair: var(--rule); /* 1px qoida chizig'i */ --ed-lead: var(--brand); /* qizil bo'lim chizig'i */ --ed-cat: var(--cc, var(--gold));/* kategoriya rangi (cap) */ --ed-gap: 18px; --ed-pad: 16px; --ed-t: .09s; /* siyoh singishi */ --ed-ease: cubic-bezier(.2,.7,.3,1); /* Tahririy tipografik shkala */ --ed-kick: .655rem; --ed-row: .945rem; --ed-lead-h: 1.34rem; --ed-sec: .72rem; } /* ═══════════════ 2) MOTION TOZALASH ═══════════════ apple-motion.css (8-qatlam) ni SO'NDIRISH. Fayl joyida qoladi, faqat multfilmga o'xshagan qismlari o'chadi: suzuvchi ikonlar, 3D og'ish, aylanuvchi halqalar, aura, prujina sakrashi, ko'p qatlamli tashqi nur. Qoladi: bosish javobi va yengil kirish. */ html.ed.ap-on body::before { display: none !important; } /* aura */ /* (v65 TUZATISH) Blok IKKIGA AJRATILDI. Avval bu yerda `box-shadow: none !important`, `background`, `border-radius: 0` ham turgan edi — ya'ni HARAKATNI o'chirish bloki KO'RINISHNI ham qulflab qo'ygan. Natijada 10-qatlam (shisha) kartochkaga umuman yeta olmadi. Endi: HARAKAT — !important bilan qat'iy o'chadi; KO'RINISH — oddiy og'irlikda, shu sabab keyingi qatlam ustidan yozadi. */ /* ── 2a) HARAKAT: qat'iy o'chadi ── */ html.ed.ap-on .card, html.ed.ap-on .card.ap-live, html.ed.ap-on .card.ap-rise, html.ed.ap-on .card.ap-rise.ap-in { perspective: none !important; transform-style: flat !important; animation: none !important; will-change: auto; } /* 3D og'ish FAQAT apple-motion holat klasslarida to'xtatiladi — `.card` va `.card:hover` erkin qoladi, shunda shisha qatlami o'zining yumshoq ko'tarilishini bera oladi. */ html.ed.ap-on .card.ap-live, html.ed.ap-on .card.ap-rise, html.ed.ap-on .card.ap-rise.ap-in, html.ed.ap-on .card.ap-press { transform: none !important; } /* ── 2b) KO'RINISH: !important YO'Q ── */ html.ed.ap-on .card { background: var(--surf); border-radius: 0; box-shadow: none; } html.ed.ap-on .rec-grid, html.ed.ap-on #catbar { perspective: none !important; } /* Suzuvchi / o'girilgan ikonlar — TO'LIQ to'xtatiladi */ html.ed.ap-on .nc i, html.ed.ap-on .nc:hover i, html.ed.ap-on .nc.on i, html.ed.ap-on .side-item i, html.ed.ap-on .side-item:hover i, html.ed.ap-on .side-item.on i, html.ed.ap-on .card .cov-ic, html.ed.ap-on .card.ap-live .cov-ic, html.ed.ap-on .card-hub .cov-ic, html.ed.ap-on .card.ap-live .cov, html.ed.ap-on .card.ap-live .cbd, html.ed.ap-on .card.ap-live .cov-badge, html.ed.ap-on .card.ap-live .cab-bar, html.ed.ap-on .card.ap-live .cbtn, html.ed.ap-on .cbadge i { animation: none !important; transform: none !important; filter: none !important; } /* Aylanuvchi halqa, nur dog'i, shisha, prujina */ html.ed.ap-on .card-hub .cov::after, html.ed.ap-on .card .cov::before, html.ed.ap-on .nc::before, html.ed .cov-glow, html.ed .disc-rings, html.ed .audio-disc, html.ed .cov-eq { display: none !important; } /* (v65) Qobiqdan `backdrop-filter`/`box-shadow` ni QAT'IY o'chirish OLIB TASHLANDI: endi bu qarorni 10-qatlam (shisha) qabul qiladi va u o'z qobiliyat darvozasiga ega (sekin qurilmada blur o'zi o'chadi). Bu yerda faqat apple-motion'ning 3D o'girilishi to'xtatiladi. */ html.ed.ap-on .side-panel, html.ed.ap-on .side-ov, html.ed.ap-on #nav, html.ed.ap-on #catbar, html.ed.ap-on .rw { transform: none !important; perspective: none !important; } html.ed.ap-on .side-item:hover { transform: none !important; } html.ed.ap-on .cbtn:hover { transform: none !important; } html.ed.ap-on .hub-pills > *, html.ed.ap-on .hub-back { transform: none !important; } /* Bosish javobi — shisha qatlami o'z variantini bera oladi */ html.ed.ap-on .card.ap-press { opacity: .72; } html.ed .card:active { opacity: .82; } /* ── Yagona kirish animatsiyasi: SIYOH SINGISHI ── */ @keyframes edInk { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } html.ed .card, html.ed .ti-feed-item { animation: edInk var(--ed-t) var(--ed-ease) both; } html.ed .card:nth-child(n+13), html.ed .ti-feed-item:nth-child(n+9) { animation: none; } /* uzun ro'yxatda bekor */ /* ═══════════════ 3) MUQOVA SLOTI OLIB TASHLANDI ═══════════════ MUHIM QAROR: kutubxona kartochkalarida HECH QANDAY RASM YO'Q — faqat sarlavha, tavsif va kategoriya. Aynan shu bo'sh 16:9 slot "multfilm" muammosining ildizi edi: uni to'ldirish uchun gradient fon + 40px oq glif qo'yilgan. Bo'sh slotni chiroyli qilishning yo'li yo'q — uni OLIB TASHLASH kerak. O'rniga IMZO ELEMENT: chap chetdagi 3px kategoriya chizig'i. Natija: nol o'lik joy, ikki barobar kam DOM, ancha tez tartib. Ikon endi faqat kicker ichida, 10px, tinch. */ html.ed .cov { display: none !important; } html.ed .cbadge i { font-size: 10px; opacity: .65; } html.ed .cbadge { color: var(--ed-cat); } /* Haqiqiy rasm BOR joylarda (yangilik kartochkalari) rasm qoladi — faqat tahririy shaklga keltiriladi. */ html.ed .ti-news-cover { border-radius: 0; border: 1px solid var(--ed-hair); overflow: hidden; background: var(--surf-2); } html.ed .ti-news-cover img { border-radius: 0; filter: none; transform: none !important; } /* ═══════════════ 4) TAHRIRIY TIPOGRAFIYA ═══════════════ */ html.ed .cttl { font-family: var(--ff-display); font-size: var(--ed-row); font-weight: 600; line-height: 1.24; letter-spacing: -.011em; color: var(--ink); } html.ed .cbadge, html.ed .rw-h, html.ed .reco-kicker, html.ed .pkicker { font-size: var(--ed-kick); font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); } html.ed .cdsc { font-size: .82rem; line-height: 1.5; color: var(--muted); letter-spacing: 0; } html.ed .csub, html.ed .ti-feed-date, html.ed .reco-date, html.ed .tirec-date { font-variant-numeric: tabular-nums; font-size: .7rem; letter-spacing: .02em; color: var(--dim); } /* ── Sahifa sarlavhasi: qizil bo'lim qoidasi ── */ html.ed .phd { border-top: 3px solid var(--ed-lead); padding-top: 10px; margin-bottom: 14px; align-items: baseline; } html.ed .pttl { font-size: clamp(1.28rem, 5vw, 1.72rem); font-weight: 700; letter-spacing: -.022em; line-height: 1.1; } html.ed .pcnt { font-variant-numeric: tabular-nums; font-size: .72rem; font-weight: 700; letter-spacing: .1em; color: var(--muted); border: 1px solid var(--ed-hair); padding: 3px 8px; border-radius: 0; background: none; } html.ed .ti-dateline { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); padding-bottom: 8px; } /* ═══════════════ 5) KARTOCHKA ARXITEKTURASI ═══════════════ MOBIL → qator (eskiz chapda, sarlavha o'ngda) — Reuters/BBC ≥560px → tahririy kartochka to'ri BIRINCHI → "LEAD" (yetakchi material) */ html.ed .card { background: var(--surf); border: 0; border-bottom: 1px solid var(--ed-hair); border-left: 3px solid var(--ed-cat); /* ← IMZO: ustun chizig'i */ border-radius: 0; box-shadow: none; display: flex; flex-direction: column; overflow: visible; container-type: inline-size; /* amal qatori kartochka kengligiga moslashadi */ transition: background var(--ed-t) var(--ed-ease); } html.ed .card:hover { background: var(--surf-1); } html.ed .card:focus-visible { outline: 2px solid var(--ed-cat); outline-offset: -2px; } html.ed .cbd { padding: 12px 14px 11px; gap: 0; } html.ed .chead { margin-bottom: 5px; } html.ed .cdsc { margin: 5px 0 0; } /* Tor kartochkada amal tugmalari faqat ikonga aylanadi — matn qisqartirilib xunuk ko'rinmasin. */ @container (max-width: 296px) { html.ed .cab-btn span, html.ed .ed-back-chip span { display: none; } html.ed .cab-btn { padding: 9px 4px; } } @supports not (container-type: inline-size) { @media (min-width: 560px) and (max-width: 1100px) { html.ed .cab-btn span, html.ed .ed-back-chip span { display: none; } } } /* Pastki amal qatori — hairline, to'ldirish yo'q */ html.ed .cft { margin-top: 9px; padding: 0; border: 0; background: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; } html.ed .cbtn { background: none; border: 1px solid var(--ed-hair); border-radius: 0; color: var(--ink); font-size: .74rem; font-weight: 600; letter-spacing: .02em; padding: 7px 12px; box-shadow: none; transition: background var(--ed-t) var(--ed-ease), border-color var(--ed-t) var(--ed-ease); } html.ed .cbtn i { font-size: 10px; opacity: .75; } html.ed .cbtn:hover { background: var(--surf-2); border-color: var(--rule-strong); } html.ed .cbtn-soon { opacity: .5; } html.ed .cab-bar { grid-column: 1 / -1; border-top: 1px solid var(--ed-hair); background: none; padding: 0; display: flex; } html.ed .cab-btn { border-radius: 0; background: none; font-size: .68rem; font-weight: 600; letter-spacing: .04em; color: var(--muted); padding: 9px 6px; transition: background var(--ed-t) var(--ed-ease), color var(--ed-t) var(--ed-ease); } html.ed .cab-btn + .cab-btn { border-left: 1px solid var(--ed-hair); } html.ed .cab-btn i { font-size: 11px; } html.ed .cab-btn:hover { background: var(--surf-2); color: var(--ink); } html.ed .cab-btn.on { color: var(--ed-cat); } /* ── YETAKCHI MATERIAL (lead) ── Rasm yo'q, shu sabab yetakchi material MATNGA tayanadi: qizil bo'lim chizig'i, katta sarlavha, serif kirish matni. FT/Economist fotosuratsiz yetakchi materialni aynan shunday chizadi. */ html.ed .card.ed-lead { border-left-width: 0; border-top: 3px solid var(--ed-lead); background: var(--surf-1); } html.ed .card.ed-lead .cttl { font-size: var(--ed-lead-h); font-weight: 700; letter-spacing: -.024em; line-height: 1.14; } /* Yagona xarakterli tafsilot: yetakchi materialda serif kirish matni */ html.ed .card.ed-lead .cdsc { font-family: var(--ff-serif); font-style: italic; font-size: .95rem; line-height: 1.5; color: var(--txt); margin-top: 8px; max-width: 62ch; } html.ed .card.ed-lead .cbd { padding: 15px 16px 13px; } html.ed .card.ed-lead .cbadge { color: var(--ed-lead); } /* ── BO'LIM (hub) kartochkasi: son + kirish ── */ html.ed .card-hub .cbd { padding: 14px 15px; } html.ed .card-hub .cttl { font-size: 1.02rem; } html.ed .card-hub .cft { margin-top: 9px; } /* Grid: chegara ikki hisoblanmasin */ html.ed #grid.grid { gap: 0; border-top: 1px solid var(--ed-hair); } @media (min-width: 560px) { html.ed { --ed-row: 1.02rem; } /* to'r ko'rinishida sarlavha kattaroq */ html.ed #grid.grid { grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 1px; background: var(--ed-hair); border-top: 1px solid var(--ed-hair); } html.ed .card { border-bottom: 0; } html.ed .card.ed-lead { grid-column: 1 / -1; } html.ed .card.ed-lead .cttl { font-size: 1.52rem; } } @media (min-width: 1024px) { html.ed #grid.grid { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); } html.ed .card.ed-lead .cttl { font-size: 1.66rem; } /* Yetakchi material ikki ustunga: sarlavha chapda, kirish matni o'ngda */ html.ed .card.ed-lead .cbd { display: grid; grid-template-columns: 1.05fr 1fr; grid-template-areas: "head head" "ttl dsc" "ft ft"; column-gap: 26px; align-items: start; } html.ed .card.ed-lead .chead { grid-area: head; } html.ed .card.ed-lead .cttl { grid-area: ttl; margin: 0; } html.ed .card.ed-lead .cdsc { grid-area: dsc; margin: 4px 0 0; border-left: 1px solid var(--ed-hair); padding-left: 22px; } html.ed .card.ed-lead .cft { grid-area: ft; } } @media (min-width: 1440px) { html.ed #grid.grid { grid-template-columns: repeat(auto-fill, minmax(282px, 1fr)); } } @media (max-width: 360px) { /* juda tor / buklanadigan */ html.ed { --ed-row: .9rem; --ed-lead-h: 1.2rem; } html.ed .cbd { padding: 11px 12px 10px; } html.ed .cab-btn span, html.ed .ed-back-chip span { display: none; } } /* ═══════════════ 6) KATEGORIYA LENTASI ═══════════════ Chiplar o'rniga tahririy bo'lim tugmalari + qizil registratsiya chizig'i. Guruhlar hairline bilan ajratiladi. */ html.ed #catbar { gap: 0; border-bottom: 1px solid var(--ed-hair); } html.ed .nc { background: none !important; border: 0; border-radius: 0; padding: 0 13px; height: var(--cat-h); color: var(--chrome-txt); font-size: var(--ed-sec); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; position: relative; box-shadow: none; flex: 0 0 auto; } html.ed .nc i { width: auto; height: auto; background: none !important; border-radius: 0; font-size: 11px; color: currentColor; opacity: .55; box-shadow: none; } html.ed .nc::after { /* qizil registratsiya chizig'i */ content: ""; position: absolute; left: 13px; right: 13px; bottom: 0; height: 3px; background: var(--ed-lead); transform: scaleX(0); transform-origin: left; transition: transform .12s var(--ed-ease); } html.ed .nc.on { color: var(--chrome-ink); } html.ed .nc.on::after { transform: scaleX(1); } html.ed .nc.on i { opacity: 1; color: var(--ed-cat); } html.ed .nc:hover { background: var(--chrome-hover) !important; } /* Guruh ajratuvchisi (index.html dagi .nc-sep) */ html.ed .nc-sep { flex: 0 0 auto; width: 1px; align-self: center; height: 20px; background: var(--chrome-bdr); margin: 0 6px; } /* Yon panel */ html.ed .side-item { border-radius: 0; border-left: 3px solid transparent; padding: 11px 14px; font-size: .86rem; transition: background var(--ed-t) var(--ed-ease); } html.ed .side-item i { width: 18px; font-size: 12px; opacity: .6; background: none !important; box-shadow: none; } html.ed .side-item:hover { background: var(--surf-1); } html.ed .side-item.on { border-left-color: var(--ed-cat); background: var(--surf-1); } html.ed .side-group { font-size: var(--ed-kick); font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--dim); padding: 16px 14px 6px; border-bottom: 1px solid var(--ed-hair); margin-bottom: 4px; } /* Pastki nav (mobil) */ html.ed #tabbar { border-top: 1px solid var(--ed-hair); box-shadow: none; } html.ed .tb { border-radius: 0; } html.ed .tb i { font-size: 15px; } html.ed .tb span { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; } html.ed .tb.on { color: var(--ink); box-shadow: inset 0 2px 0 var(--ed-lead); } /* ═══════════════ 7) ORQAGA TIZIMI ═══════════════ Uch qatlam: (a) kartochkadagi chip, (b) post oxiridagi panel, (c) suzuvchi tugma. editorial.js to'ldiradi. */ /* (a) kartochka ichidagi orqaga chipi */ html.ed .ed-back-chip { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; border-right: 1px solid var(--ed-hair); color: var(--muted); font-family: inherit; font-size: .68rem; font-weight: 600; letter-spacing: .04em; padding: 9px 11px; cursor: pointer; flex: 0 0 auto; transition: background var(--ed-t) var(--ed-ease), color var(--ed-t) var(--ed-ease); } html.ed .ed-back-chip i { font-size: 10px; } html.ed .ed-back-chip:hover { background: var(--surf-2); color: var(--ink); } html.ed .ed-back-chip:focus-visible { outline: 2px solid var(--ed-cat); outline-offset: -2px; } /* Barmoq bilan bosiladigan qurilmada QAT'IY 44px maydon (WCAG 2.5.5). Sichqonchada shart emas — u yerda 1px aniqlik bor. */ @media (hover: none), (pointer: coarse) { html.ed .ed-back-chip, html.ed .cab-btn { min-height: 44px; } /* (v66) Matn yashiringanda chip 21px ga tushib qolardi — bosish maydoni BALANDLIK bo'yicha 44px, KENGLIK bo'yicha esa emas edi. */ html.ed .ed-back-chip { min-width: 44px; justify-content: center; } html.ed .cbtn { min-height: 42px; } html.ed .tb { min-height: 46px; } } /* Amal qatori hech qachon sinmasin: tugmalar bir qatorda qisqaradi */ html.ed .cab-bar > * { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* (b) POST OXIRI — "o'qib tugatdingiz" paneli */ html.ed .ed-end { margin: 34px 0 8px; border-top: 3px solid var(--ed-lead); padding-top: 16px; display: flex; flex-direction: column; gap: 12px; } html.ed .ed-end-note { font-size: var(--ed-kick); font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--dim); } html.ed .ed-end-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 15px 18px; background: var(--surf-1); border: 1px solid var(--rule-strong); color: var(--ink); font-family: inherit; font-size: .92rem; font-weight: 700; letter-spacing: .04em; cursor: pointer; transition: background var(--ed-t) var(--ed-ease); } html.ed .ed-end-btn:hover { background: var(--surf-2); } html.ed .ed-end-btn:active { opacity: .74; } html.ed .ed-end-btn i { font-size: 12px; } @media (min-width: 560px) { html.ed .ed-end { flex-direction: row; align-items: center; justify-content: space-between; } html.ed .ed-end-btn { width: auto; } } /* (c) SUZUVCHI TUGMA (v66) OLIB TASHLANDI — telefonda pastki panelning "BOSH" yorlig'ini to'sib qolardi. Qoldiq bo'lsa ham ko'rinmasin: */ html.ed .ed-fab, html.ed #edFab { display: none !important; } /* O'quvchi oynalaridagi mavjud orqaga tugmalarini birxillash */ html.ed .rdr-back, html.ed .art-back, html.ed .hu-rdr-back, html.ed .ti-yt-back, html.ed .hub-back { background: none !important; border: 1px solid var(--ed-hair) !important; border-radius: 0 !important; color: var(--ink) !important; font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 8px 12px !important; box-shadow: none !important; } html.ed .hub-subnav { border-bottom: 1px solid var(--ed-hair); padding-bottom: 10px; } html.ed .hub-pill { background: none; border: 1px solid var(--ed-hair); border-radius: 0; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 7px 11px; } html.ed .hub-pill.on { background: var(--surf-2) !important; color: var(--ink); border-color: var(--rule-strong); box-shadow: inset 0 -3px 0 var(--ed-cat); } html.ed .hub-pill i { font-size: 10px; opacity: .6; } /* ═══════════════ 8) JONLI TASMA ═══════════════ Vertikal vaqt yo'lagi + tabular vaqt tamg'asi. */ html.ed .rw { background: none; border: 0; border-top: 3px solid var(--ed-lead); border-radius: 0; padding: 12px 0 0; box-shadow: none; } html.ed .rw-h { display: flex; align-items: center; gap: 8px; padding: 0 0 10px; border: 0; background: none; color: var(--ink); font-size: var(--ed-sec); font-weight: 700; letter-spacing: .13em; text-transform: uppercase; } html.ed .rw-h i { font-size: 10px; opacity: .55; } html.ed .rw-b { padding: 0; } html.ed .ti-live-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--ed-lead); color: #fff; border-radius: 0; padding: 3px 7px; font-size: .6rem; font-weight: 800; letter-spacing: .12em; } html.ed .ti-live-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: edPulse 2s steps(1, end) infinite; } @keyframes edPulse { 0%,55% { opacity: 1; } 56%,100% { opacity: .25; } } html.ed .ti-news-feed-list { display: flex; flex-direction: column; } html.ed .ti-feed-item { display: grid; grid-template-columns: 26px minmax(0, 1fr) 12px; align-items: start; gap: 9px; padding: 11px 0; border-top: 1px solid var(--ed-hair); background: none; border-radius: 0; cursor: pointer; transition: background var(--ed-t) var(--ed-ease); } html.ed .ti-feed-item:hover { background: var(--surf-1); } html.ed .ti-feed-no { font-variant-numeric: tabular-nums; font-size: .78rem; font-weight: 700; letter-spacing: -.02em; color: var(--dim); background: none !important; border-right: 1px solid var(--ed-hair); padding-right: 8px; text-align: right; } html.ed .ti-feed-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } html.ed .ti-feed-source { font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 5px; } html.ed .ti-feed-source i { font-size: 9px; } html.ed .ti-feed-ttl { font-size: .855rem; font-weight: 600; line-height: 1.3; letter-spacing: -.008em; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } html.ed .ti-feed-arr { opacity: .3; font-size: 11px; margin-top: 3px; } html.ed .ti-feed-item:hover .ti-feed-arr { opacity: .7; } html.ed .ti-feed-err, html.ed .ti-feed-loading { font-size: .78rem; color: var(--dim); padding: 12px 0; } /* Aylanuvchi jonli slayd (live-rotator) */ html.ed .tilr-stage { border-radius: 0; border: 1px solid var(--ed-hair); background: var(--surf); } html.ed .tilr-cover { border-radius: 0; } html.ed .tilr-title { font-size: .86rem; font-weight: 600; line-height: 1.3; letter-spacing: -.008em; } html.ed .tilr-arrow, html.ed .tilr-play { border-radius: 0; background: none; border: 1px solid var(--ed-hair); box-shadow: none; } html.ed .tilr-dots span { border-radius: 0; width: 14px; height: 2px; } /* ═══════════════ 9) TAVSIYA TASMASI ═══════════════ Mobilda gorizontal snap-lenta, kompyuterda ustunlar. */ html.ed .reco-rail, html.ed .tirec-rt { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } html.ed .reco-rail::-webkit-scrollbar, html.ed .tirec-rt::-webkit-scrollbar { display: none; } html.ed .reco-card, html.ed .tirec-prev { scroll-snap-align: start; background: var(--surf); border: 1px solid var(--ed-hair); border-radius: 0; box-shadow: none; } html.ed .reco-head, html.ed .tirec-top { border-top: 3px solid var(--ed-lead); border-bottom: 0; padding-top: 12px; background: none; } html.ed .reco-h2, html.ed .tirec-h-l { font-size: var(--ed-sec); font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink); } html.ed .reco-sub, html.ed .tirec-h-s { font-size: .7rem; color: var(--dim); letter-spacing: .02em; } html.ed .reco-ttl, html.ed .tirec-ttl { font-size: .875rem; font-weight: 600; line-height: 1.28; letter-spacing: -.008em; color: var(--ink); } html.ed .reco-src, html.ed .tirec-cat { font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: none; border-radius: 0; padding: 0; } html.ed .reco-img { border-radius: 0; filter: none; } html.ed .reco-go, html.ed .tirec-go, html.ed .reco-refresh { background: none; border: 1px solid var(--ed-hair); border-radius: 0; font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); box-shadow: none; } html.ed .reco-play { border-radius: 0; background: var(--chrome-bg); box-shadow: none; } /* ═══════════════ 10) MASTHEAD ═══════════════ */ html.ed #nav { border-bottom: 1px solid var(--chrome-bdr); box-shadow: none; } html.ed .logo-nm { font-size: .96rem; font-weight: 800; letter-spacing: .13em; } html.ed .logo-sb { font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; opacity: .62; } html.ed .logo-mono img { border-radius: 0; } html.ed .nb { border-radius: 0; background: none; border: 1px solid transparent; } html.ed .nb:hover { background: var(--chrome-hover); } html.ed .srch { border-radius: 0; border: 1px solid var(--chrome-bdr); background: var(--chrome-bg-2); } html.ed .srch-mob input { border-radius: 0; } /* Kolofon */ html.ed .tf-nm::before { border-radius: 0; } html.ed .ti-foot { border-top-width: 3px; border-top-color: var(--ed-lead); } /* ═══════════════ 11) TEZLIK ═══════════════ • content-visibility → ekrandan tashqaridagi kartochkalar umuman chizilmaydi (uzun ro'yxatda eng katta yutuq). • contain → tartib qayta hisoblanishi kartochka ichida qoladi. • Mobilda backdrop-filter YO'Q (Androidda asosiy sekinlik manbasi). */ html.ed .card { content-visibility: auto; contain-intrinsic-size: auto 150px; } html.ed .card.ed-lead { contain-intrinsic-size: auto 240px; } html.ed .ti-feed-item { contain: layout style; } html.ed .rw { contain: layout style; } /* (v65) Mobilda blur'ni majburan o'chirish OLIB TASHLANDI — endi 10-qatlamning qobiliyat darvozasi qaror qiladi: kuchli telefonda shisha ishlaydi, sekin qurilmada esa `gl-blur` klassi umuman qo'yilmaydi. Ekran kengligi qurilma kuchini ko'rsatmaydi. */ html.ed img { content-visibility: auto; } /* ═══════════════ 12) MOSLASHUV / HURMAT ═══════════════ */ @media (prefers-reduced-motion: reduce) { html.ed *, html.ed *::before, html.ed *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } } html.ti-savedata.ed .card, html.ti-savedata.ed .ti-feed-item { animation: none; } @media print { html.ed #nav, html.ed #catbar, html.ed #tabbar, html.ed .ti-rail, html.ed .cab-bar, html.ed .ed-fab, html.ed .ed-end { display: none !important; } html.ed .card { break-inside: avoid; border-bottom: 1px solid #ccc; } } /* ════════════════════════════════════════════════════════════════ (v66) SENSORLI EKRANDA HOVER YO'Q — JIDDIY XATO TUZATILDI ──────────────────────────────────────────────────────────────── Telefonda `:hover` barmoq olingandan KEYIN HAM yopishib qoladi. Natijada foydalanuvchi Burana tugmasiga tekkanida lentada oq to'rtburchak qolib, "Burana tanlangan" degan YOLG'ON signal berardi — aslida arab bo'limi ochiq edi. Aynan shu "Buranani bosdim, arabcha chiqdi" tuyg'usini yaratgan. Faol bo'limni endi FAQAT qizil tag chizig'i ko'rsatadi. ════════════════════════════════════════════════════════════════ */ @media (hover: none) { html.ed .nc:hover, html.ed .card:hover, html.ed .cbtn:hover, html.ed .cab-btn:hover, html.ed .ed-back-chip:hover, html.ed .side-item:hover, html.ed .ti-feed-item:hover, html.ed .ed-end-btn:hover { background: inherit; border-color: inherit; color: inherit; transform: none; } html.ed .nc:hover { background: none !important; } html.ed .card:hover { background: var(--surf); } html.ed .side-item:hover { background: none; } html.ed .ti-feed-item:hover { background: none; } /* Faol holat esa aniq ko'rinsin — bosish javobi shu */ html.ed .nc:active { opacity: .6; } html.ed .cbtn:active, html.ed .cab-btn:active, html.ed .ed-back-chip:active { opacity: .55; } } /* ════════════════════════════════════════════════════════════════ (v66) KICHIK QURILMA POG'ONASI ──────────────────────────────────────────────────────────────── Katta harf + keng harf oralig'i (letter-spacing) tor ekranda juda qimmat: "BURANA NASHR" 130px joy egallaydi va lentaga atigi ikki yarim tugma sig'adi. 400px dan tor ekranda oraliq va o'lcham qisqaradi — matn o'sha-o'sha, lekin uch-to'rt tugma ko'rinadi. ════════════════════════════════════════════════════════════════ */ @media (max-width: 400px) { html.ed { --ed-kick: .615rem; --ed-sec: .665rem; } html.ed .nc { padding: 0 9px; letter-spacing: .035em; gap: 5px; } html.ed .nc i { font-size: 10px; } html.ed .nc::after { left: 9px; right: 9px; } html.ed .logo-nm { font-size: .84rem; letter-spacing: .08em; } html.ed .logo-sb { font-size: .52rem; letter-spacing: .1em; } html.ed .tb span { font-size: .56rem; letter-spacing: .03em; } html.ed .tb i { font-size: 14px; } html.ed .pttl { font-size: clamp(1.12rem, 5.6vw, 1.4rem); } html.ed .cab-btn { padding-left: 5px; padding-right: 5px; letter-spacing: .02em; } } @media (max-width: 340px) { html.ed .nc { padding: 0 7px; letter-spacing: 0; } html.ed .nc::after { left: 7px; right: 7px; } html.ed .cab-btn span, html.ed .ed-back-chip span { display: none; } } /* (v66) Yangilik kartochkasidagi amal qatoriga chip qo'shilganda — sana bilan bir qatorda tursin, alohida bo'sh qator YARATMASIN. */ html.ed .ti-news-footer.ed-hasback { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; } html.ed .ti-news-footer.ed-hasback .ed-back-chip { order: -1; border-right: 1px solid var(--ed-hair); border-left: 0; padding-left: 0; margin-right: 2px; } html.ed .ti-news-footer.ed-hasback .ti-news-date { min-width: 0; overflow: hidden; text-overflow: ellipsis; } html.ed .ti-news-footer.ed-hasback .ti-news-acts { margin-left: auto; flex: 0 0 auto; } /* (v66) Rasm sifati: eskizni cho'zib xiralashtirmaslik uchun brauzerga to'g'ri o'lcham ko'rsatkichi beriladi. */ html.ed .ti-news-cover img { image-rendering: auto; object-fit: cover; width: 100%; height: 100%; }