/* ═══════════════════════════════════════════════════════════════════
   NIKRAD MEDIA SHELL v1.1 — یک پوستهٔ واحد برای صوت، ویدئو، سند، پایگاه دانش
   هدف: یک هدر، یک عرض، یک ریتم فاصله — موبایل‌فرست با تجربهٔ عالی روی دسکتاپ
   بارگذاری: آخرین CSS صفحه (override کامل)
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── یک توکن عرض برای هدر و محتوا: هرگز از هم جدا نمی‌شوند ── */
  --nk-media-max: 760px;      /* ستون محتوا (موبایل‌فرست) */
  --nk-media-gutter: 14px;    /* حاشیهٔ افقی ثابت */
  --nk-media-gap: 14px;       /* ریتم عمودی واحد */
  --nk-radius-lg: 20px;
  --nk-radius-md: 14px;
}

/* ── ۱) هدر: هم‌عرض با محتوا، نه تمام‌عرض ───────────────────── */
.app-header.nk-media-header {
  padding-inline: 0 !important;
}
.app-header.nk-media-header > * { min-width: 0; }
.app-header.nk-media-header .nk-header-inner {
  width: 100%;
  max-width: var(--nk-media-max);
  margin-inline: auto;
  padding-inline: var(--nk-media-gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}
/* روی صفحه‌های باریک هدر تمام‌عرض می‌ماند (بدون قاب) */
@media (max-width: 820px) {
  .app-header.nk-media-header .nk-header-inner { max-width: none; }
}

/* ── ۲) محتوا: یک عرض، یک ریتم — override همهٔ منابع قبلی ────── */
body.nk-media main,
body.nk-media #scroll {
  padding-inline: 0 !important;
  background: transparent;
}
body.nk-media .content,
body.nk-media .page,
body.nk-media .container,
body.nk-media .wrap {
  width: 100% !important;
  max-width: var(--nk-media-max) !important;
  margin-inline: auto !important;
  padding-inline: var(--nk-media-gutter) !important;
  box-sizing: border-box !important;
}
body.nk-media .hero { padding: 6px 2px var(--nk-media-gap) !important; }
body.nk-media .hero h1 {
  font-size: clamp(19px, 5.2vw, 26px) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  font-weight: 800 !important;
  letter-spacing: -.4px;
}
body.nk-media .section-title {
  margin: calc(var(--nk-media-gap) * 1.4) 2px 10px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

/* ── ۳) کارت‌ها و ردیف‌ها: شعاع و فاصلهٔ یکسان ─────────────── */
body.nk-media .player-card,
body.nk-media .card,
body.nk-media .doc-card,
body.nk-media .stat-card {
  border-radius: var(--nk-radius-lg) !important;
  border: 1px solid var(--line) !important;
  background: var(--raised) !important;
  box-shadow: var(--shadow) !important;
}
body.nk-media .player-card {
  padding: 20px 16px 18px !important;
  margin-bottom: var(--nk-media-gap) !important;
  scroll-margin-top: 92px;            /* ← رفع سینتکس شکستهٔ قبلی */
}
body.nk-media .list-row,
body.nk-media .ep-row,
body.nk-media .doc-row {
  border-radius: var(--nk-radius-md) !important;
  border: 1px solid var(--line) !important;
  background: var(--raised) !important;
  padding: 12px 14px !important;
  margin-bottom: 8px !important;
  gap: 10px !important;
}
body.nk-media .list-row:last-child { margin-bottom: 0 !important; }

/* ── ۴) دکمه‌های آیکونی: اندازهٔ یکسان در کل سایت ───────────── */
body.nk-media .card-icon,
body.nk-media .list-row button,
body.nk-media .act {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 11px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
}
body.nk-media .card-icon svg,
body.nk-media .list-row button svg { width: 18px !important; height: 18px !important; }

/* ── ۵) فیلتر/تب‌ها: نوار افقی واحد ─────────────────────────── */
body.nk-media .chip-row,
body.nk-media .filters,
body.nk-media .tabs {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  padding: 2px var(--nk-media-gutter) 6px !important;
  margin-inline: calc(var(--nk-media-gutter) * -1) !important;
  scrollbar-width: none;
}
body.nk-media .chip-row::-webkit-scrollbar { display: none; }
body.nk-media .chip,
body.nk-media .tabs button {
  flex: 0 0 auto !important;
  height: 34px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  border: 1px solid var(--line) !important;
  font-size: 12.5px !important;
  background: var(--surface) !important;
}
body.nk-media .chip.active,
body.nk-media .tabs button.active {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

/* ═══ ۶) دسکتاپ: کاربر بفهمد موبایل‌فرست است، ولی کامل کار کند ═══ */
@media (min-width: 1024px) {
  body.nk-media {
    background:var(--bg);
  }
  /* قاب موبایل: ستون وسط، مثل اپ */
  body.nk-media #device {
    max-width: var(--nk-media-max) !important;
    margin: 26px auto !important;
    border: 1px solid var(--line) !important;
    border-radius: 26px !important;
    background: var(--bg) !important;
    box-shadow: 0 30px 90px -30px rgba(0, 0, 0, .28) !important;
    min-height: calc(100dvh - 52px) !important;
    overflow: hidden;
  }
  body.nk-media .app-header.nk-media-header {
    max-width: var(--nk-media-max);
    margin-inline: auto;
    border-inline: 1px solid var(--line);
    border-radius: 26px 26px 0 0;
  }
  /* نشان «موبایل‌فرست» */
  body.nk-media .nk-desktop-note {
    display: flex !important;
  }
}
body.nk-media .nk-desktop-note {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: var(--nk-media-max);
  margin: 22px auto 0;
  padding: 10px 14px;
  border: 1px dashed var(--line);
  border-radius: 13px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
body.nk-media .nk-desktop-note b { color: var(--ink); font-weight: 800; }

/* ── ۷) دکمهٔ نصب PWA ───────────────────────────────────────── */
.nk-install-btn {
  display: none;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 15px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
}
.nk-install-btn.show { display: inline-flex; }
.nk-install-btn svg { width: 17px; height: 17px; }
.nk-install-bar {
  position: fixed;
  inset-inline: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 5000;
  display: none;
  align-items: center;
  gap: 10px;
  max-width: var(--nk-media-max);
  margin-inline: auto;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--raised);
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .3);
  font-size: 12.5px;
}
.nk-install-bar.show { display: flex; }
.nk-install-bar .txt { flex: 1; line-height: 1.7; }
.nk-install-bar .txt b { display: block; font-size: 13px; }
.nk-install-bar button {
  border: 0;
  border-radius: 10px;
  padding: 9px 14px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}
.nk-install-bar .go { background: var(--accent); color: #fff; }
.nk-install-bar .no { background: var(--surface); color: var(--muted); }

/* ── ۸) موبایل: فاصلهٔ ایمن پایین (نوار نصب/پلیر) ───────────── */
@media (max-width: 820px) {
  body.nk-media main { padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   v1.1 — ریسپانسیو حرفه‌ای: نقطه‌های شکست دقیق و تایپوگرافی سیال
   ═══════════════════════════════════════════════════════════════════ */

/* ── تایپوگرافی و فاصله سیال (fluid) — بدون جهش بین بریک‌پوینت‌ها ── */
:root {
  --nk-media-gutter: clamp(12px, 3.2vw, 24px);
  --nk-media-gap: clamp(12px, 2.6vw, 20px);
  --nk-radius-lg: clamp(16px, 3vw, 22px);
}

/* ── موبایل کوچک ≤ 360px: چگالی بالا، بدون هدر تزئینی ── */
@media (max-width: 360px) {
  body.nk-media .player-card { padding: 16px 12px 14px !important; }
  body.nk-media .player-playwrap { width: 88px; height: 88px; }
  body.nk-media .player-play { width: 74px; height: 74px; }
  body.nk-media .list-row,
  body.nk-media .ep-row { padding: 10px 11px !important; }
  body.nk-media .card-icon,
  body.nk-media .act { width: 32px !important; height: 32px !important; min-width: 32px !important; }
}

/* ── موبایل بزرگ 361–480px: حالت مرجع ── */
@media (max-width: 480px) {
  body.nk-media .hero h1 { font-size: clamp(19px, 5.4vw, 24px) !important; }
}

/* ── فبلت عمودی 481–820px: دو ستونه کردن لیست‌ها ── */
@media (min-width: 481px) and (max-width: 820px) {
  body.nk-media .list-grid,
  body.nk-media .ep-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  body.nk-media .list-row,
  body.nk-media .ep-row { margin-bottom: 0 !important; }
}

/* ── دسکتاپ ≥1024px: قاب اپ + سایه عمق‌دار + hover واقعی ── */
@media (min-width: 1024px) {
  body.nk-media .list-row,
  body.nk-media .ep-row,
  body.nk-media .card { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
  body.nk-media .list-row:hover,
  body.nk-media .ep-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .22) !important;
    border-color: var(--accent) !important;
  }
  body.nk-media .player-card { padding: 26px 22px 22px !important; }
}

/* ── دسکتاپ بزرگ ≥1440px: قاب کمی پهن‌تر ── */
@media (min-width: 1440px) {
  body.nk-media #device { max-width: 820px !important; }
}

/* ── لمس: هدف‌های ≥44px در دستگاه‌های لمسی ── */
@media (hover: none) and (pointer: coarse) {
  body.nk-media .card-icon,
  body.nk-media .act,
  body.nk-media .list-row button,
  body.nk-media .chip,
  body.nk-media .tabs button { min-height: 40px !important; }
  body.nk-media .list-row { padding: 13px 14px !important; }
}

/* ── landscape موبایل: فشرده‌سازی عمودی ── */
@media (max-width: 920px) and (orientation: landscape) {
  body.nk-media .hero { padding-top: 2px !important; padding-bottom: 10px !important; }
  body.nk-media .player-card { margin-bottom: 10px !important; }
}

/* ── نوار نصب: در دسکتاپ مخفی (نصب از نوار آدرس) ── */
@media (min-width: 1024px) {
  .nk-install-bar { display: none !important; }
}

/* ── ریسپایکت: احترام به کاهش انیمیشن ── */
@media (prefers-reduced-motion: reduce) {
  body.nk-media .list-row, body.nk-media .card { transition: none !important; }
}

/* ── فرم‌های باریک (login/signup/verify/reset/mfa): ستون ۴۲۰px وسط ── */
body.nk-narrow .content,
body.nk-narrow .page,
body.nk-narrow .container {
  max-width: 440px !important;
  margin-inline: auto !important;
}
body.nk-narrow #device { max-width: 440px !important; }
@media (min-width: 1024px) {
  body.nk-narrow #device { max-width: 480px !important; }
}

/* fallback cover when thumbnail fails */
.p-art .note{display:none;align-items:center;justify-content:center;width:100%;height:100%;color:var(--nk-muted, #86817a);background:var(--nk-soft, #f0ede8)}
.p-art .note svg{opacity:.55}