/* Django shablonlariga ko'chirilgan sahifalarda faqat MA'LUMOTLAR BAZASIDAN
   keladigan matn tugunlariga qo'llanadigan yordamchi klasslar.
   layout.css ga tegilmagan — dizayn o'zgarmaydi.

   Figma eksportida "hug contents" o'lchamlari qat'iy px ga aylangan
   (masalan `width: 47px; white-space: pre`). Dizaynda matn uzunligi aynan
   shunga mos, lekin bazadan kelgan matn uzunroq bo'lsa qo'shni elementlar
   ustiga chiqib ketadi. `.txt-auto` o'sha tugunni yana "hug contents"
   holatiga qaytaradi: mos uzunlikdagi matnda ko'rinish 1:1 bir xil,
   uzunroq matnda esa layout siljimaydi. */
.txt-auto { width: auto !important; max-width: 100%; }

/* Sarlavha/lid tugunlari layout.css da allaqachon -webkit-line-clamp bilan
   cheklangan; ularga faqat balandlik qat'iyligini yumshatamiz. */
.txt-clamp { height: auto !important; }

/* Bo'sh ro'yxat holati — dizaynda bunday holat yo'q, shuning uchun
   neytral va joyni buzmaydigan ko'rinish. */
.empty-state { width: 100%; padding: 24px 0; font-size: 16px; color: #6b7280; }

/* "XXI asr gazetasi" bo'limi: dizaynda 4 ta qattiq yozilgan karta bor edi,
   bazadan esa oltitagacha son keladi — qator faqat strelka tugmalari orqali
   siljiydi; sichqoncha, g'ildirak yoki barmoq bilan tortish o'chirilgan. */
.gazeta-issues-wrap { position: relative; align-self: stretch; }
.gazeta-issues-row { overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; touch-action: pan-y; overscroll-behavior-x: none; }
.gazeta-issues-row::-webkit-scrollbar { display: none; }
.gazeta-issues-nav {
  position: absolute;
  top: 218px;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  color: #000000;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .15), inset 0 0 0 1px rgba(0, 0, 0, .08);
  z-index: 2;
  transition: box-shadow .2s ease, transform .2s ease, opacity .2s ease;
}
.gazeta-issues-nav:not([disabled]):hover { box-shadow: 0 6px 20px rgba(0, 0, 0, .2), inset 0 0 0 1px rgba(0, 0, 0, .08); }
.gazeta-issues-nav:not([disabled]):active { transform: translateY(-50%) scale(.94); }
.gazeta-issues-prev { left: -23px; }
.gazeta-issues-next { right: -23px; }
.gazeta-issues-nav[disabled] { opacity: .35; cursor: default; }
.gazeta-issue-card { flex: none; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.gazeta-issue-cover { position: relative; flex: none; width: 385px; height: 436px; z-index: 0; }
.gazeta-issue-cover > .fig-bg > .fig-img { object-fit: cover; }
.gazeta-issue-meta { flex: none; align-self: stretch; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.gazeta-issue-title {
  width: auto; max-width: 385px; align-self: stretch;
  font-family: 'Helvetica Neue', 'HelveticaNeue', Helvetica, Arial, sans-serif;
  font-size: 34px; font-weight: 500; line-height: 41.51px;
  text-transform: uppercase; color: #000000;
}
.gazeta-issue-number {
  width: auto;
  font-family: 'Helvetica Neue', 'HelveticaNeue', Helvetica, Arial, sans-serif;
  font-size: 18px; font-weight: 400; line-height: 21.47px;
  text-decoration: underline; color: #000000;
}

/* Audio pleyer ijro holati (article-audio.js). */
.audio-container.is-playing .play-button-container { opacity: 0.6; }

/* Dizaynda ba'zi maydonlar oddiy matn (<p>) sifatida chizilgan, lekin ular
   haqiqatda tahrirlanadigan bo'lishi kerak. Tegni <input>/<select>/<button>
   ga almashtirganda brauzerning o'z uslubi qo'shiladi — quyidagi qoidalar
   faqat o'shani olib tashlaydi.

   `:where()` ishlatilgani muhim: uning solishtirma og'irligi (specificity) NOL.
   Ya'ni bu qoidalar brauzer standartini bekor qiladi, lekin layout.css dagi
   dizayn qoidalaridan HAR DOIM yengiladi — shrift, o'lcham, rang dizayndagidek
   qoladi. */
:where(.field-input, .field-select, .field-button) {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: inherit;
  letter-spacing: inherit;
  outline: none;
  cursor: inherit;
}
:where(.field-button) { cursor: pointer; }
:where(.field-input)::placeholder { color: inherit; opacity: 0.55; }

/* `.field-select` ning ochiq holatdagi ro'yxati (<option>) brauzerning o'z
   qutisida chiziladi — u yopiq maydonning 14.2px padding'ini meros qilib
   olmaydi, shuning uchun variant nomlari chap chetga yopishib qolgan edi. */
.field-select option { padding: 8px 14.2px; }

/* Forma o'zi hech qanday quti hosil qilmaydi — bolalari to'g'ridan-to'g'ri
   ota flex/grid konteynerining elementlari bo'lib qoladi, ya'ni joylashuv
   dizayndagidek. */
:where(.form-shell) { display: contents; }

/* Xato xabari: dizaynda bunday holat chizilmagan, shuning uchun bo'sh
   holatda umuman ko'rinmaydi va joy egallamaydi. */
.auth-error[hidden], .form-error[hidden] { display: none; }
.auth-error, .form-error {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: #f04438;
}

/* Maqola matni (CKEditor 5 dan keladigan HTML).
   Dizaynda matn sakkizta qat'iy paragraf sloti bilan chizilgan; haqiqiy
   maqola uzunligi esa oldindan noma'lum. Shu sababli konteyner ichiga
   boy-matn joylanadi va unga dizayndagi AYNAN o'sha tipografiya beriladi:
   sarlavhalar 32px/40px, matn 24px/44.4px, rang #000000. */
.rich-text > * { margin: 0; }
.rich-text h2, .rich-text h3, .rich-text h4 {
  font-family: 'Helvetica Neue', 'HelveticaNeue', Helvetica, Arial, sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 40px;
  color: #000000;
}
.rich-text p, .rich-text ul, .rich-text ol, .rich-text blockquote, .rich-text table {
  font-family: 'Helvetica Neue', 'HelveticaNeue', Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 44.4px;
  color: #000000;
}
.rich-text ul, .rich-text ol { padding-left: 1.2em; list-style: revert; }
.rich-text a { color: #ff800a; text-decoration: underline; }
.rich-text img { max-width: 100%; height: auto; }
.rich-text figure { margin: 0; }
.rich-text figcaption { font-size: 16px; line-height: 24px; color: #afafaf; }

/* CKEditor'ning to'liq paneli: belgilash (highlight), kod bloki va jadval
   xossalari ustunlarni sanitayzer (`apps.common.sanitizers`) o'tkazgan
   klass/style qiymatlariga mos ravishda ko'rinadi. */
.rich-text mark.marker-yellow { background-color: #fdf06a; }
.rich-text mark.marker-green { background-color: #62f962; }
.rich-text mark.marker-pink { background-color: #fc7999; }
.rich-text mark.pen-red { background-color: transparent; color: #e71313; }
.rich-text mark.pen-green { background-color: transparent; color: #128a00; }
.rich-text code { background: #f3f4f6; padding: 2px 6px; border-radius: 4px; font-family: 'Courier New', monospace; }
.rich-text pre { background: #0f172a; color: #e5e7eb; padding: 16px; border-radius: 8px; overflow-x: auto; }
.rich-text pre code { background: none; padding: 0; color: inherit; }
.rich-text hr { border: none; border-top: 1px solid #e5e7eb; margin: 24px 0; }
.rich-text table { border-collapse: collapse; }
.rich-text table td, .rich-text table th { border: 1px solid #e5e7eb; padding: 8px 12px; }
.rich-text .image-style-align-left { float: left; margin: 0 24px 12px 0; }
.rich-text .image-style-align-right { float: right; margin: 0 0 12px 24px; }


/* ---------------------------------------------------------------------------
   Yordamchi sahifalar (ro'yxat, qidiruv, gazetalar, podcast, parol).

   Figma eksportida bu sahifalar yo'q. Ular dizaynning O'Z bloklaridan
   yig'iladi: header, footer va kartochka markup'i index.html dan aynan
   ko'chirilgan. Farqi faqat tashqi joylashuvda — bu yerda kontent uzunligi
   oldindan noma'lum, shuning uchun absolyut o'rniga oqim ishlatiladi. */
.flow-page {
  position: relative;
  width: 1920px;
  margin: 0 auto;
  background-color: #ffffff;
}
.flow-page > .header,
.flow-page > .footer {
  position: relative !important;
  left: auto !important;
  top: auto !important;
}
.flow-main {
  padding: 56px 180px 96px;
  min-height: 480px;
}
.flow-title {
  margin: 0 0 32px;
  font-family: 'Helvetica Neue', 'HelveticaNeue', Helvetica, Arial, sans-serif;
  font-size: 36px;
  font-weight: 500;
  line-height: 52.2px;
  letter-spacing: -0.36px;
  color: #132745;
}
.flow-subtitle {
  margin: -20px 0 32px;
  font-size: 18px;
  line-height: 26px;
  color: #6b7280;
}
/* Kartochkalar dizayndagi qatordagi kabi uchtadan, oralig'i 33px. */
.flow-grid { display: flex; flex-wrap: wrap; gap: 40px 33px; align-items: flex-start; }
.flow-grid > * { flex: 0 0 calc((100% - 66px) / 3); min-width: 0; }

/* Batafsil sahifasidagi «Tavsiyalar» qatori — ikkita strelka tugmasi bilan
   (oldinga/orqaga) sahifalanadi. Tugmalar sarlavha («JAMIYAT» kabi tur
   nomi) bilan BIR QATORDA, o'ng chetga tekislanadi — ota element
   (`.article-section`, `n-139-9315`) `position: relative` bo'lgani uchun
   shu qatordagi og'a-singil `.tag-container` kabi absolyut joylashadi. */
.related-pager { position: absolute; right: 0; top: 0; display: flex; flex-direction: row; gap: 12px; }
.related-pager-btn {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px;
  background: #ffffff; color: #132745; cursor: pointer;
  box-shadow: inset 0 0 0 0.2px #afafaf;
  transition: box-shadow .2s ease, opacity .2s ease;
}
.related-pager-btn:hover { box-shadow: inset 0 0 0 1px #afafaf; }
.related-pager-btn[disabled] { opacity: .35; cursor: default; }
/* SVG strelkaning `fill:none` yo'li o'zi bosim nishoniga aylanmasin —
   klik doim tugmaning o'ziga tushsin (SVG "bo'sh" hududida bosilganda
   brauzer hit-test'i tagidagi elementga tushib qolishining oldini oladi). */
.related-pager-btn svg { pointer-events: none; }

.flow-pager { display: flex; gap: 16px; align-items: center; margin-top: 48px; font-size: 18px; }
.flow-pager a, .flow-pager span {
  padding: 10px 18px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px #e5e7eb;
  color: #132745;
}
.flow-pager .is-current { background-color: #132745; color: #ffffff; }
.flow-empty { font-size: 20px; color: #6b7280; padding: 40px 0; }
/* Sarlavha bloki bo'sh qoldirilgan sahifalarda (masalan reels) ortiqcha
   bo'sh joy qolmasin — sarlavha kontent ichida chiziladi. */
.flow-title:empty { display: none; }

.flow-form { display: flex; flex-direction: column; gap: 18px; max-width: 520px; }
.flow-form label { display: flex; flex-direction: column; gap: 8px; font-size: 16px; color: #132745; }
.flow-form input {
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  font: inherit;
}
.flow-form button {
  align-self: flex-start;
  padding: 12px 24px;
  border-radius: 10px;
  background-color: #132745;
  color: #ffffff;
  font: inherit;
  cursor: pointer;
}
.flow-card { display: flex; flex-direction: column; gap: 12px; }
.flow-card img { width: 100%; height: 220px; object-fit: cover; border-radius: 12px; }
.flow-card h2 { margin: 0; font-size: 22px; font-weight: 500; line-height: 30px; color: #132745; }
.flow-muted { margin: 0; font-size: 16px; line-height: 24px; color: #6b7280; }
.flow-meta { margin: 0; font-size: 14px; line-height: 22px; color: #afafaf; }
.flow-link { color: #ff800a; text-decoration: underline; }
.flow-cover { max-width: 720px; width: 100%; border-radius: 16px; margin-bottom: 24px; }
.flow-audio { display: block; width: 100%; max-width: 720px; margin-bottom: 24px; }
/* Video (yuklangan fayl yoki YouTube iframe) muqova bilan bir xil slotda. */
.flow-video { display: block; width: 100%; max-width: 720px; aspect-ratio: 16 / 9;
  border: 0; border-radius: 16px; margin-bottom: 24px; background-color: #000000; }

/* ---------------------------------------------------------------------------
   Bazadan keladigan matnlarni toza qisqartirish (truncation).

   Figma eksporti har bir matn tugunini QAT'IY `height` bilan chiqargan va
   yoniga `-webkit-line-clamp` ni ham qo'ygan. Lekin Blink/WebKit da
   `line-clamp` faqat N-qator oxiriga "…" qo'yadi, ortiqcha qatorlarni esa
   `overflow: hidden` kesadi. Quti balandligi bir qatordan baland bo'lgani
   uchun (masalan sarlavhada 58px, qator balandligi 33.6px) keyingi qatorning
   yuqori yarmi ko'rinib qolardi — "kesilib qolgan matn" muammosi shundan.

   Yechim: qutini matnga qarab o'lchaymiz (`height: auto`), qatorlar sonini
   esa `--lines` boshqaradi (standart — 1 qator). Shunda matn aniq N qatorda
   tugaydi, sig'magan qismi "…" bilan almashadi va hech qayerda yarim qator
   ko'rinmaydi. Selektor solishtirma og'irligi (0,2,0) — layout.css dagi
   bitta klassli `.n-*` qoidalaridan yuqori, shuning uchun `!important`
   kerak emas. */
.txt.title,
.txt.article-title,
.txt.description,
.txt.article-text,
.txt.author,
.txt.category,
.txt.time,
.txt.news-time,
.txt.news-date,
.txt.nav-link,
.txt.text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lines, 1);
  line-clamp: var(--lines, 1);
  overflow: hidden;
  text-overflow: ellipsis;
  height: auto;
  min-height: 0;
  max-height: none;
  /* Bazadagi matnda tasodifiy qator ko'chirish yoki ketma-ket bo'shliqlar
     bo'lishi mumkin — dizayndagi `pre-wrap` ularni saqlab qolardi. */
  white-space: normal;
  /* Uzun uzluksiz so'z (URL, hashtag) qutidan chiqib ketmasin. */
  overflow-wrap: break-word;
}

/* Dizaynda bir nechta qatorga mo'ljallangan tugunlar. Qiymat layout.css dagi
   o'z `-webkit-line-clamp` yoki quti balandligi / qator balandligi nisbatidan
   olingan — ya'ni dizayn ajratgan joy o'zgarmaydi. */
.n-137-7903,
.n-I136-4871-80-220,
.n-I136-4873-80-322,
.n-I136-4875-80-322,
.n-I136-4877-80-322,
.n-I136-4879-80-322,
.n-I136-4881-80-322,
.n-I136-4883-80-322,
.n-I137-6601-77-59117,
.n-I137-6602-77-59117,
.n-I137-6830-80-322,
.n-I137-6832-80-322,
.n-I137-6834-80-322,
.n-I137-6836-80-322,
.n-I137-6838-80-322,
.n-I137-7213-77-59117,
.n-I137-7214-77-59117,
.n-I137-7351-80-64,
.n-I137-7462-80-322,
.n-I137-7464-80-322,
.n-I137-7466-80-322,
.n-I137-7468-80-322,
.n-I137-7470-80-322,
.n-I137-7905-77-59170,
.n-I137-7907-77-59170,
.n-I137-7909-77-59170,
.n-I137-7911-77-59170,
.n-I137-7913-77-59170,
.n-I140-15284-80-322 { --lines: 2; }

/* «Batafsil» va «To'liq» sahifalarining bosh sarlavhasi — ochilgan
   materialning nomi. Figma'da bu tugun 712px kenglikda va aynan 2 qatorga
   moslab chizilgan, holbuki o'ng tomonida (audio pleergacha) 400px dan ortiq
   bo'sh joy bor. Tugun o'sha bo'sh joygacha kengaytiriladi — shunda bazadagi
   sarlavhalarning deyarli barchasi o'sha ikki qatorga to'liq sig'adi va
   «…» umuman chiqmaydi. Zaxira sifatida uchinchi qatorga ham ruxsat. */
.txt-full { --lines: 3; }
.txt-full.n-139-8890, .txt-full.n-139-13868 { width: 1100px; }

/* «Batafsil» sahifasidagi lid — dizaynda unga 176px (4 qator) joy ajratilgan,
   pastida esa «Ko'proq» tugmasi turadi. Standart bir qatorlik qisqartirish
   bu yerda matnni «…» bilan kesib qo'yardi. */
.txt.article-title.n-139-8899 { --lines: 4; }

/* Lid (n-139-9207) pastida «Ko'proq» tugmasi, undan keyin esa muqova rasmi
   (n-139-8911) qat'iy top:808px da turibdi. Lid 1-4 qatorgacha o'zgarishi
   mumkin (yuqoridagi --lines:4), lekin rasmning koordinatasi bundan
   bexabar edi — qisqa lidda rasmgacha katta bo'sh joy qolardi. Shu ikki
   blok va ulardan keyingi content-section (n-139-9427, top:1538px) oqimga
   o'tkaziladi; margin-top qiymatlari dizayndagi eng uzun lid holatiga mos
   hisoblangan (48px, 45px), shunda lid qisqa bo'lganda rasm va pastki
   bloklar yuqoriga siljib bo'shliqni yo'qotadi. Footerni page-scale.js
   dagi `relayoutFooter()` allaqachon haqiqiy balandlikka moslaydi. */
.page.n-139-8884 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 528px;
  min-height: 0;
}
.page.n-139-8884 > .n-139-9207,
.page.n-139-8884 > .n-139-8911,
.page.n-139-8884 > .n-139-9427 {
  position: relative;
  top: auto;
  left: auto;
  flex: none;
}
.page.n-139-8884 > .n-139-9207 { order: 0; margin-left: 184px; }
.page.n-139-8884 > .n-139-8911 { order: 1; margin-left: 184px; margin-top: 48px; }
.page.n-139-8884 > .n-139-9427 { order: 2; margin-left: 180px; margin-top: 45px; }
/* Footer o'zi order olmagani uchun standart `order:0` bilan yuqoridagi
   oqimga o'tkazilgan bloklar (n-139-9207/8911) ORASIGA tushib qolardi —
   mobil rejimda footer `position:static` bo'lgach (responsive-common.css)
   bu ko'rinadigan bo'lib qoldi (desktopda footer absolyut bo'lgani uchun
   `order` uning joyiga ta'sir qilmasdi). */
.page.n-139-8884 > .footer { order: 3; }

/* «TOP YANGILIKLAR» ikkita 2x2 to'rdan iborat va dizaynda ularga qat'iy
   716px (ikki qator x 338px + 40px oraliq) berilgan. Blok endi faqat
   material turi bo'yicha to'ldirilgani uchun (views.py) kartalar sakkiztadan
   kam bo'lishi mumkin — o'shanda bo'sh ikkinchi qator saqlanib, blok tagida
   katta bo'shliq qolardi. Qator balandligi `grid-auto-rows` ga o'tkaziladi:
   qator faqat unda karta bo'lgandagina hosil bo'ladi. */
.n-139-9430, .n-139-9440 {
  height: auto;
  grid-template-rows: none;
  grid-auto-rows: 338px;
}

/* Sarlavha uch qatorga chiqqan holatda blok yuqoriga ham, pastga ham teng
   o'sadi: tepadagi «non ushoqlari» ham, pastdagi muqova rasmi ham qat'iy
   koordinatada turgani uchun o'sish faqat shu ikkisi orasidagi bo'sh joyga
   sig'ishi kerak. 172.862px — dizayndagi (ikki qatorli) balandlik. */
.n-139-8885, .n-139-13863 { transform: translateY(calc((172.862px - 100%) / 2)); }

.n-I137-6601-77-59119,
.n-I137-6602-77-59119,
.n-I137-7213-77-59119,
.n-I137-7214-77-59119,
.n-I137-7351-80-66 { --lines: 3; }

.n-I136-4892-93-2442 { --lines: 4; }

/* ---------------------------------------------------------------------------
   «To'liq» sahifasining pastki qismi — oqim (flow) bo'yicha.

   Figma eksportida sahifaning har bir bloki qat'iy `top` koordinatasida
   turadi. Dizaynda maqola matni o'rniga uzun namunaviy matn bo'lgan, bazadagi
   matn esa har xil uzunlikda: qisqa bo'lsa katta bo'sh joy qolardi, uzun
   bo'lsa quyidagi bloklar ustiga chiqib ketardi.

   Shuning uchun ajratuvchi chiziqdan (1496px) keyingi bloklar oqimga
   o'tkaziladi: sahifa yuqori qismi dizayndagidek qat'iy joyda qoladi
   (`padding-top` absolyut bloklarga ta'sir qilmaydi), quyidagi bloklar esa
   bir-birining ketidan, matn uzunligiga qarab joylashadi.

   `order` kerak, chunki eksportdagi DOM tartibi ko'rinish tartibiga mos emas.
   `margin-left` — har bir blokning dizayndagi `left` qiymati. */
.page.n-107-4910 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* oqim muqova rasmidan boshlanadi — undan yuqorisi dizayndagi qat'iy joyda */
  padding-top: 528px;
  min-height: 0;
}
.page.n-107-4910 > .n-107-4947,
.page.n-107-4910 > .n-107-4957,
.page.n-107-4910 > .n-140-15977,
.page.n-107-4910 > .n-107-4936,
.page.n-107-4910 > .n-107-4942,
.page.n-107-4910 > .n-107-4950,
.page.n-107-4910 > .n-107-4958,
.page.n-107-4910 > .n-107-4959,
.page.n-107-4910 > .n-107-4990,
.page.n-107-4910 > .n-139-8828,
.page.n-107-4910 > .n-261-21516 {
  /* `static` EMAS, `relative`: blok oqimga tushadi, lekin ichidagi absolyut
     joylashgan elementlar uchun langar (containing block) bo'lib qoladi.
     `static` da ular butun sahifaga nisbatan joylashib ketardi. */
  position: relative;
  top: auto;
  left: auto;
  flex: none;
}
/* Footer umumiy include (site_footer.html) bo'lib, `top` ni inline `style`
   orqali oladi — bu yerda oqimga tushishi uchun uni `!important` bilan
   bekor qilish kerak, aks holda inline qiymat CSS'dan ustun turadi. */
.page.n-107-4910 > .footer {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  flex: none;
}

.page.n-107-4910 > .n-107-4947  { order: 0;  margin-left: 184px; }
.page.n-107-4910 > .n-107-4957  { order: 1;  margin-left: 184px; margin-top: 70px; }
/* dizaynda ikkala chiziq bir joyda turadi — oqimda ham ustma-ust qoladi */
.page.n-107-4910 > .n-140-15977 { order: 2;  margin-left: 184px; margin-top: -1px; }
.page.n-107-4910 > .n-107-4936  { order: 3;  margin-left: 136px; margin-top: 69px; }
.page.n-107-4910 > .n-107-4942  { order: 4;  margin-left: 136px; }
.page.n-107-4910 > .n-107-4950  { order: 5;  margin-left: 180px; margin-top: 70px; }
.page.n-107-4910 > .n-107-4958  { order: 6;  margin-left: 184px; margin-top: 70px; }
.page.n-107-4910 > .n-107-4959  { order: 7;  margin-left: 180px; margin-top: 65px; }
.page.n-107-4910 > .n-107-4990  { order: 8;  margin-left: 180px; margin-top: 70px; }
.page.n-107-4910 > .n-139-8828  { order: 9;  margin-left: 180px; margin-top: 66px; }
.page.n-107-4910 > .n-261-21516 { order: 10; margin-left: 180.5px; margin-top: 190px; }
.page.n-107-4910 > .footer      { order: 11; margin-top: 150px; }

/* Maqola matni (rich-text) bazadan keladi — uzunligi oldindan noma'lum.
   Eksportda blok qat'iy 464px balandlikda, matn esa uning ichida absolyut
   turadi: qisqa matnda reklamagacha bo'sh joy qolib ketardi, uzun matnda
   esa keyingi bloklar ustiga chiqib ketardi. Blokni oqimga o'tkazamiz —
   chapdagi 48px siljish (matn 184px dan boshlanadi) saqlanadi. */
.page.n-107-4910 > .n-107-4936 { height: auto; }
.page.n-107-4910 > .n-107-4936 > .n-107-4938 {
  position: relative;
  left: auto;
  top: auto;
  margin-left: 48px;
}

/* Til almashtirgich — dizaynda ochiq holat alohida sahifa (tilni-tanlash.html)
   sifatida eksport qilingan. Bitta header include'ida ikkala holat ham bo'lishi
   uchun <details> ishlatilgan: JS'siz ochilib-yopiladi, klaviatura bilan ham
   ishlaydi. Bu yerda faqat brauzerning standart uchburchak markeri olib
   tashlanadi — dizayn geometriyasi shablon ichidagi inline stilda. */
.lang-menu > summary { list-style: none; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary::marker { content: ""; }
.lang-menu[open] > summary .meteor-icons-angle-up { transform: rotate(180deg); }

/* ---------------------------------------------------------------------------
   Reklama slotlari (Advertisement modeli).

   Dizaynda reklama qutisi qora fonli bo'sh «Reklama» blok. Banner yuklanganda
   uning ichiga rasm (fig-bg) va butun qutini qoplaydigan havola (lnk-spread)
   qo'yiladi — qutining o'lchami/joyi dizayndagidek qoladi.

   `.fig-bg` base'da `z-index:-1` — ya'ni ota-elementning ORQASIDA turadi.
   Oddiy kartalarda ota fon shaffof, shu bois rasm ko'rinadi; reklama qutisining
   otasi esa `background:#000` — natijada banner qora fon ortida qolib, quti
   qop-qora ko'rinardi. Reklama slotida rasmni fon USTIGA ko'taramiz. */
.ad-slot > .fig-bg { z-index: 0; }
.ad-slot > .fig-bg > .fig-img {
  object-fit: cover;
  /* Rasmning qaysi qismi ko'rinishi — adminda tanlangan fokus nuqtasi.
     Qiymatlar shablonda inline `--ad-focus-*` / `--ad-zoom` orqali keladi.
     `--ad-zoom` (%) 100 dan katta bo'lsa rasm kattalashadi va fokus nuqtasi
     `transform-origin` orqali HAR IKKI o'q bo'yicha suriladigan bo'ladi
     (object-position faqat qirqilgan o'q bo'yicha ishlaydi). */
  object-position: var(--ad-focus-x, 50%) var(--ad-focus-y, 50%);
  transform: scale(calc(var(--ad-zoom, 100) / 100));
  transform-origin: var(--ad-focus-x, 50%) var(--ad-focus-y, 50%);
}
.ad-slot > .lnk-spread { z-index: 1; }

/* Rasm ustidagi matn. Joyi va ko'rinishi adminda beriladi; barcha qiymatlar
   shablonda inline `--ad-ovl-*` custom-property orqali keladi. Matn markazi
   (x%, y%) nuqtaga qo'yiladi. `pointer-events:none` — bosish bannerga o'tadi. */
.ad-slot > .ad-overlay {
  position: absolute;
  left: var(--ad-ovl-x, 50%);
  top: var(--ad-ovl-y, 50%);
  transform: translate(-50%, -50%);
  z-index: 2;                        /* rasm(0) < havola(1) < matn(2) < belgi(3) */
  max-width: 92%;
  margin: 0;
  font-family: 'Helvetica Neue', 'HelveticaNeue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  white-space: pre-wrap;
  pointer-events: none;
  font-size: var(--ad-ovl-size, 32px);
  color: var(--ad-ovl-color, #ffffff);
}
.ad-slot > .ad-overlay[data-bg="scrim"] {
  background: rgba(0, 0, 0, 0.55);
  padding: 0.35em 0.7em;
  border-radius: 6px;
}
.ad-slot > .ad-overlay[data-bg="shadow"] { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85); }

/* Banner ko'rsatilganda kontentdan ajratib turuvchi kichik «REKLAMA» belgisi.
   Placeholder holatida ota blok o'zi «Reklama» yozuvi bilan turadi, shuning
   uchun belgi faqat rasm mavjud holatda chiqadi. `pointer-events:none` —
   bosish bannerdagi havolaga o'tadi. */
.ad-slot:has(> .fig-bg)::after {
  content: "REKLAMA";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   «Texnologiya» bo'limidagi tab'lar — JS'siz (yashirin radio + label).

   `frame-59` (birinchi tab) dizaynda tagida to'q sariq chiziq bilan chizilgan;
   qolgan ikkitasida chiziq yo'q. Bu yerda chiziq har doim TANLANGAN tabga
   ko'chadi, panellar esa shunga qarab almashadi. Radiolar ko'zdan yashirin,
   lekin klaviatura uchun fokuslanadigan bo'lib qoladi. */
.tech-tabs > .tech-tabs__state {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.tech-tabs label.tab { cursor: pointer; border-bottom: 1px solid transparent; box-sizing: border-box; }
.tech-tabs:has(#tech-tab-latest:checked)   .tab--latest,
.tech-tabs:has(#tech-tab-featured:checked) .tab--featured,
.tech-tabs:has(#tech-tab-popular:checked)  .tab--popular { border-bottom-color: #ff800a; }
.tech-tabs:has(#tech-tab-latest:focus-visible)   .tab--latest,
.tech-tabs:has(#tech-tab-featured:focus-visible) .tab--featured,
.tech-tabs:has(#tech-tab-popular:focus-visible)  .tab--popular { outline: 2px solid #ff800a; outline-offset: 2px; }

/* Panel — o'rovchi element (faqat shu klasslar unga tegadi). Ko'rsatilganda
   `display: contents`: o'rovchi quti yo'qoladi va ichidagi `.frame-54` to'g'ridan
   -to'g'ri `.frame-62` bolasi bo'lib qoladi — dizayndagi flex/grid va `gap`
   o'zgarmaydi (home-responsive.css `.frame-54` ni `!important` bilan boshqaradi). */
.tech-tabs > .tech-panel { display: none; }
.tech-tabs:has(#tech-tab-latest:checked)   > .tech-panel--latest,
.tech-tabs:has(#tech-tab-featured:checked) > .tech-panel--featured,
.tech-tabs:has(#tech-tab-popular:checked)  > .tech-panel--popular { display: contents; }

/* ---------------------------------------------------------------------------
   Podcast sahifasi (batafsil-2).

   Figma eksportida sahifa balandligi (`min-height: 6422.5px`) va footer o'rni
   qat'iy piksel edi — ular dizayndagi TO'LIQ to'ldirilgan kompozitsiyaga
   mo'ljallangan. Bazada bo'lim materiali kam bo'lsa (yoki umuman bo'lmasa)
   `{% if %}` bloklari tushib qoladi va sahifada bir necha ming piksel bo'sh
   joy paydo bo'lardi. Shuning uchun pastki qatlam — kontent bloki va footer —
   oqimga o'tkaziladi: tepadagi absolyut qatlamlar (breadcrumb, header, hero,
   pleer) o'z koordinatalarida qoladi, kontent esa o'z balandligini o'zi
   belgilaydi. To'liq ma'lumotda o'lchamlar dizayn bilan bir xil:
   1143 + 3316 + 207 + 522.5. */
.page.n-140-16247 { min-height: 0; }
.page.n-140-16247 > .n-140-18559 {
  position: relative;
  left: auto;
  top: auto;
  margin: 1143px 0 0 180px;
}
/* Oraliq — sayt bo'ylab standart 50px (page-scale.js dagi `FOOTER_GAP`,
   absolyut footerli sahifalarda o'sha qiymat hisoblanadi). Figma'dagi
   207px TO'LIQ to'ldirilgan kompozitsiyaga mo'ljallangan edi va boshqa
   sahifalarga nisbatan to'rt baravar katta bo'shliq qoldirardi. */
.page.n-140-16247 > .footer { position: relative; margin-top: 50px; }

/* Sarlavha bilan hero orasidagi bo'shliq (330-208=122px) boshqa sahifalarga
   nisbatan (masalan bosh sahifa: 269-208=61px) ikki hissa katta edi.
   nav-modal.css sarlavhani bir qatorga qisqartirganda ishlatgan xuddi shu
   usul bilan (butun kadrni yuqoriga surib, sarlavhani ORTIQ shuncha pastga
   qaytarish) bu sahifadagi bo'shliq ham bosh sahifadagilarga tenglashtiriladi
   — pastdagi barcha koordinatalar (breadcrumb, hero, pleer, kontent) bir xil
   nisbatda saqlanib qoladi, faqat 61px yuqoriga suriladi. Faqat desktopda:
   tor ekranda (`body.is-responsive`) bu bloklar allaqachon oqimda, `top`
   koordinatalari e'tiborga olinmaydi. */
@media (min-width: 1280px) {
  .page.n-140-16247 { margin-top: -153px !important; }
  /* `:not(.flow-page)` — aniqlikni oshirish uchun: nav-modal.css dagi
     `.page:not(.flow-page) > .header { top: 116px !important }` bilan aniqlik
     teng edi va u KEYIN ulangani uchun g'olib chiqardi. Natijada kadr 153px
     yuqoriga surilib, sarlavha esa atigi 116px qaytarilardi — ya'ni u
     ekranning tepasidan 37px chiqib, kesilib qolardi. */
  .page.n-140-16247:not(.flow-page) > .header { top: 177px !important; }
}

/* Hero ustidagi pleer kartochkasi qat'iy px kenglikka mo'ljallangan (dizaynda
   matn qisqa edi). Bazadan kelgan uzun sarlavha kartochkani `left: 1252px` dan
   o'ngga cho'zib, hero rasmidan (o'ng cheka 1740px) va sahifadan chiqarib
   yuborardi — natijada to'lqin (waveform) kesilib qolardi. Yechim: kartochka
   chap emas, O'NG chekkasi bo'yicha bog'lanadi (dizayndagi 1710px = 1920-210),
   shuning uchun uzun sarlavhada u o'ngga emas, chapga o'sadi. Qisqa matnda
   kenglik 458px bo'lib, chap chekkasi dizayndagi 1252px ga aynan tushadi. */
.n-140-18727 { left: auto; right: 210px; }
.n-140-18727 > .text-container { min-width: 0; max-width: 375px; }
.n-140-18727 .txt-auto {
  max-width: 375px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------------
   «Bir yillik» narx yorlig'i.

   Figma eksportida u vizual jihatdan tegishli bo'lgan yillik tarif kartasi
   ICHIDA emas, balki butun bo'lim (`.frame-346/347/355/356/357`) ning bevosita
   bolasi bo'lib chiqqan va `left: 1400px` bilan 1920px lik kadrga bog'langan
   edi. Endi markupda u — «6 Oylik» yorlig'i kabi — o'z kartasining ichida
   (`.banner > .has-img.frame-335`), shuning uchun joylashuv karta chekkasiga
   nisbatan beriladi: dizayndagi masofa o'ng chetdan 33px, tepadan -20px.

   Kabinet sahifasi (`.gazetalar-history`) bu qoidaga kirmaydi — u yerda
   yorliq allaqachon karta ichida va o'z koordinatasi to'g'ri. */
:is(.frame-346, .frame-347, .frame-355, .frame-356, .frame-357) > .frame-343 > .banner > .has-img.frame-335 {
  left: auto;
  right: 33px;
  top: -20px;
}

/* Podcast sahifasidagi strelkali qatorlar.
   ------------------------------------------------------------------------
   Ikki xil xatti-harakat, ko'rinishi bir xil:

   1. «Yangi podcastlar» va «REELSLAR» — SAHIFALANADI (assets/js/podcast-feed.js):
      qatorda doim 4 ta slot, strelka bosilganda serverdan navbatdagi 4 tasi
      keladi va qator to'liq almashadi. Qator dizayndagidek — chetdan chiqmaydi,
      yarim kartochka ko'rinmaydi.

   2. «Ohirgi tinglanganlar» — SILJIYDI (assets/js/podcast-carousel.js):
      12 tagacha epizod bitta qatorda turadi va 4 tadan siljiydi. Qator o'ng
      chetdan tashqariga chiqadi, ya'ni 5-kartochkaning bir qismi ko'rinib
      turadi — yana material borligi shundan bilinadi.

   Tugma ko'rinishi «batafsil» sahifasidagi `.related-pager` bilan bir xil
   (klass ham o'sha), lekin bu yerda tugmalar OQIMDA: sarlavha qatorining
   o'zi flex, ya'ni `position: absolute` kerak emas. */
.pod-section-head {
  flex: none; align-self: stretch;
  display: flex; flex-direction: row; gap: 24px;
  align-items: center; justify-content: space-between;
}
/* Tugmalar sahifalanadigan/siljiydigan narsa bo'lsagina ko'rinadi
   (klassni skript qo'yadi). */
.pod-pager { display: none; flex-direction: row; gap: 12px; }
[data-carousel].has-overflow > .pod-section-head > .pod-pager,
[data-feed].has-pages > .pod-section-head > .pod-pager { display: flex; }

/* --- 1. Sahifalanadigan qatorlar --- */
/* Javob kelguncha qator biroz susayadi — almashish sakrab emas, silliq
   ko'rinadi. Balandlik o'zgarmaydi: sahifada doim 4 ta slot. */
[data-feed] > [data-feed-row] { transition: opacity .18s ease; }
[data-feed][data-feed-loading] > [data-feed-row] { opacity: .45; }
/* Oxirgi sahifada kartochka 4 tadan kam bo'lishi mumkin. «REELSLAR»
   kartochkasi dizaynda `flex: 1 1 0%` — 2 tasi qolganda ular qatorni
   to'ldirib, ikki baravar kattayib ketardi. Shuning uchun eni slot bo'yicha
   qat'iy: 4 ta bo'lganda ko'rinish aynan dizayndagidek qoladi.
   `--feed-gap` — qatorning o'z oralig'i (batafsil-2.css, .n-260-13494). */
[data-feed-row]:has(> .card-16) { --feed-gap: 40px; }
[data-feed-row] > .card-16 { flex: 0 0 calc((100% - 3 * var(--feed-gap)) / 4); }

/* --- 2. Siljiydigan qator («Ohirgi tinglanganlar») --- */
/* Qator kontent kengligidan (1560px) sahifaning o'ng chetigacha — 180px
   chekkaga — cho'ziladi. Ortiqchasini `.page` kesadi. */
.pod-carousel-row {
  width: calc(100% + 180px); overflow-x: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  touch-action: pan-y; overscroll-behavior-x: none;
}
.pod-carousel-row::-webkit-scrollbar { display: none; }

/* Bosh sahifa: «Barchasini ko'rish» tugmasi bo'lim sarlavhasi bilan bir qatorda.

   DOLZARB, JAMIYAT, MADANIYAT, TEXNOLOGIYA, TURIZM va PARTIYA bo'limlari
   Figma'dan ustunli (column) flex sifatida kelgan va tugma oxirgi bola —
   shu sababli u kartochkalardan KEYIN, chapda chizilardi. SIYOSAT/IQTISODIYOT
   kabi `group-*` bo'limlarida esa tugma `position: absolute` bilan sarlavha
   qatorining o'ng chekkasida turadi (.n-137-6695 va sh.k.) — dizaynda mo'ljal
   shu. Sarlavha qatorlarining o'zi ham buni tasdiqlaydi: ular
   `justify-content: space-between` bilan chizilgan, ya'ni o'ng slot bo'sh
   qolgan.

   Shu sababli bu yerda aynan `group-*` dagi usul takrorlanadi. Faqat
   1280px+ (PC) uchun: tor ekranda home-responsive.css oqimni tiklaydi va
   tugma avvalgidek bo'lim tagida alohida turaveradi. */
@media (min-width: 1280px) {
  :is(.n-137-6590, .n-137-6806, .n-137-6988,
      .n-137-7344, .n-137-7202, .n-137-7438) {
    position: relative;
  }
  /* `top: -1px` — namuna bo'lgan `group-*` bo'limlarida tugma `top: 0`,
     sarlavha qatori esa `top: 1px` da turadi. Bu yerda sarlavha qatori
     oqimda, ya'ni `top: 0` da — shuning uchun o'sha 1px farqni saqlash
     uchun tugma bir piksel yuqoriga suriladi. Natijada ikkala turdagi
     bo'limda tugma sarlavhaga nisbatan aynan bir xil turadi. */
  :is(.n-137-6590, .n-137-6806, .n-137-6988,
      .n-137-7344, .n-137-7202, .n-137-7438) > a.button {
    position: absolute;
    right: 0;
    top: -1px;
  }
}

/* Kabinetdagi foydalanuvchi avatari — barcha kabinet sahifalarida bir xil
   (ilgari faqat profile.css da edi, shuning uchun boshqa sahifalarda
   yuklangan rasm dizayn doirasidan chiqib ketardi). */
.avatar-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* «To'lov usullari» sahifasidagi tanlangan tarif qatori: Figma kadrida bunday
   tugun yo'q, shuning uchun o'lchamlar yonidagi sarlavhaga moslab berilgan. */
.pay-plan-note {
  margin: -12px 0 0;
  font-family: 'Helvetica Neue', 'HelveticaNeue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #525252;
}

.pay-plan-note b { font-weight: 500; color: #000000; }

.pay-plan-link { color: #ff800a; text-decoration: underline; }