/* Reklama sahifasi — /reklama (spec 2026-09-21 sayt-bannerlari §5).
 * Ikki qism bitta sahifada: taklif va hamkor yo'riqnomasi (#yoriqnoma).
 * Sukunat dizayn tili: karta yo'q — ro'yxat, chiziq, bo'sh joy. Rang faqat
 * tokendan; hex yozilmaydi (test tekshiradi). */

.reklama-page { width: min(100% - 40px, 760px); margin: auto; padding: 40px 0 100px; }

/* ── Bosh ── */
.reklama-head { display: grid; gap: 8px; margin-bottom: 36px; }
.reklama-head .eyebrow { margin: 0; }
.reklama-head h1 { margin: 0; font-size: clamp(32px, 5vw, 52px); font-weight: 300; line-height: 1.06; letter-spacing: -.025em; color: var(--text-primary); }
.reklama-lede { margin: 0; max-width: 60ch; font-size: 18px; line-height: 1.5; color: var(--text-secondary); }
/* Raqamlar qatori JS dan; fayl kelmasa `hidden` — bo'sh joy ham qolmaydi. */
.reklama-sonlar { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.reklama-sonlar[hidden] { display: none; }
.reklama-son { font-weight: 600; color: var(--text-primary); }
.reklama-jump { display: inline-flex; align-items: center; min-height: 44px; justify-self: start; color: var(--accent); font-size: 15px; font-weight: 500; text-decoration: none; }
.reklama-jump:hover { text-decoration: underline; }

/* ── Bo'limlar: chiziq bilan ajratiladi, sarlavha bitta o'lchamda ── */
.reklama-bolim, .reklama-yoriqnoma { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border-subtle); scroll-margin-top: 84px; }
.reklama-page h2 { margin: 0 0 16px; font-size: 22px; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; color: var(--text-primary); }
.reklama-page h3 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; color: var(--text-primary); }
.reklama-bolim p, .reklama-yoriq p { margin: 0 0 10px; max-width: 64ch; line-height: 1.6; color: var(--text-secondary); }
.reklama-bolim p:last-child { margin-bottom: 0; }

.reklama-royxat { display: grid; gap: 8px; margin: 0; padding-left: 20px; line-height: 1.55; color: var(--text-secondary); }
.reklama-royxat li { max-width: 64ch; padding-left: 4px; }
.reklama-royxat li::marker { color: var(--text-tertiary); }

.reklama-guruh { margin: 18px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); }
.reklama-guruh:first-of-type { margin-top: 0; }

/* Joylar: sxema chapda, matn o'ngda; raqam ro'yxat markeri. */
.reklama-joylar { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: joy; border-top: 1px solid var(--border-subtle); }
.reklama-joylar[start="5"] { counter-reset: joy 4; }
.reklama-joy { display: grid; grid-template-columns: 24px 120px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border-subtle); counter-increment: joy; }
.reklama-joy::before { content: counter(joy); font-size: 13px; font-weight: 600; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
/* Sxemasiz qator (sayt qidiruvi): matn boshqalar bilan bir ustunda qoladi. */
.reklama-joy-rasmsiz .reklama-joy-matn { grid-column: 3; }
.reklama-sxema { display: block; width: 120px; height: 40px; color: var(--text-tertiary); }
.reklama-joy-matn { display: grid; gap: 3px; min-width: 0; }
.reklama-joy-matn p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.reklama-joy-havola { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; color: var(--accent); text-decoration: none; }
.reklama-joy-havola:hover { text-decoration: underline; }

.reklama-qadamlar { display: grid; gap: 10px; margin: 0; padding-left: 24px; line-height: 1.55; color: var(--text-secondary); }
.reklama-qadamlar li { max-width: 64ch; padding-left: 4px; }
.reklama-qadamlar li::marker { font-weight: 600; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }

/* Telegram — sahifadagi yagona asosiy tugma. */
.reklama-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; }
.reklama-cta-note { font-size: 13px; color: var(--text-tertiary); }

/* ── Yo'riqnoma: ikkinchi qism, kuchliroq chiziq bilan boshlanadi ── */
.reklama-yoriqnoma { margin-top: 56px; padding-top: 32px; border-top-color: var(--border-strong); }
.reklama-yoriq-lede { margin: 0 0 4px; max-width: 64ch; line-height: 1.6; color: var(--text-secondary); }
.reklama-yoriq-havola { min-height: 44px; }
.reklama-yoriq { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border-subtle); scroll-margin-top: 84px; }
.reklama-yoriq h3 { margin-bottom: 10px; }
.reklama-yoriq .reklama-royxat, .reklama-yoriq .reklama-qadamlar { font-size: 15px; }
.reklama-yoriq .reklama-izoh { margin-top: 14px; font-size: 14px; color: var(--text-tertiary); }

/* Tartib belgisi: majburiy — accent, qolgani meta rang. Rang emas, so'z ham bor. */
.reklama-belgi { display: inline-block; margin-left: 6px; padding: 1px 8px; border: 1px solid var(--border-subtle); border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--text-tertiary); vertical-align: middle; white-space: nowrap; }
.reklama-belgi[data-belgi="majburiy"] { border-color: var(--accent); color: var(--accent); }

@media (max-width: 900px) {
  .reklama-page { padding-top: 24px; }
  .reklama-head { margin-bottom: 28px; }
  .reklama-bolim, .reklama-yoriqnoma { margin-top: 32px; padding-top: 20px; }
  .reklama-yoriqnoma { margin-top: 44px; }
}
@media (max-width: 560px) {
  .reklama-joy { grid-template-columns: 20px minmax(0, 1fr); grid-template-areas: "raqam matn" ". sxema"; gap: 10px 12px; }
  .reklama-joy::before { grid-area: raqam; align-self: start; padding-top: 2px; }
  .reklama-joy-matn { grid-area: matn; }
  .reklama-sxema { grid-area: sxema; width: 108px; height: 36px; }
  .reklama-joy-rasmsiz { grid-template-areas: "raqam matn"; }
  .reklama-cta .button { flex: 1 1 100%; }
}
/* Bosish javobi `motion.css` dan (`.motion-control`, `.text-link`, `.button`);
   reduced-motion ham o'sha yerda o'chadi — bu faylda harakat yo'q. */

/* Narx jadvali (spec 2026-09-23-hamkor-narx-va-tolov §3, §4). */
.reklama-narx { margin: 16px 0; overflow-x: auto; }
.reklama-narx[hidden] { display: none; }
.reklama-narx-jadval { min-width: 560px; }
.reklama-narx-jadval td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.reklama-narx-izoh { margin: 10px 0 0; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }