/* ===========================================================
   استایل مشترک بلاگ و صفحات فرود اکشن سین

   قبلاً هر یک از ۷ فایل بلاگ یک بلوک <style> کامل و تکراری داشت. رنگ‌ها و
   حس بصری همان قبلی است تا صفحه‌های ایندکس‌شده ناگهان عوض نشوند؛ فقط یک‌جا
   جمع شده و چند ایراد رفع شده.
   =========================================================== */

/* فونت را خودمان میزبانی می‌کنیم. قبلاً از fonts.googleapis.com می‌آمد که با
   ۹۵٪ ترافیک ایرانی یک وابستگی بیرونی شکننده بود. همان سه فایلی است که پنل
   استفاده می‌کند، پس دوباره دانلود نمی‌شود. */
@font-face {
  font-family: 'Vazirmatn';
  src: url('/panel/assets/fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/panel/assets/fonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500 600; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/panel/assets/fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700 900; font-display: swap;
}

:root {
  --b-ink:      #f1f5f9;
  --b-body:     #e2e8f0;
  --b-muted:    #cbd5e1;
  --b-head:     #93c5fd;
  --b-card:     rgba(15, 23, 42, .9);
  --b-line:     rgba(148, 163, 184, .4);
  --b-accent:   #818cf8;
  --b-green:    #4ade80;
  --b-purple:   #c084fc;

  /* عرض متن: ۹۸۰px برای خط فارسی خیلی بلند بود. ۷۲۰ نزدیک ۶۵-۷۵ نویسه است
     که مرز خوانایی متن بلند است. --b-wrap برای هدر و فهرست پهن می‌ماند. */
  --b-wrap:     980px;
  --b-read:     720px;

  /* یک مقیاس واحد به‌جای عددهای پراکنده */
  --b-r:        14px;   /* شعاع */
  --b-r-lg:     20px;
  --b-shadow:   0 8px 24px rgba(0, 0, 0, .35);
  --b-shadow-lg:0 16px 44px rgba(0, 0, 0, .45);
}

/* حرکت را برای کسی که نمی‌خواهد خاموش کن */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* فوکوس همیشه دیده شود — پیمایش با کیبورد نباید کور باشد */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--b-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Vazirmatn', system-ui, sans-serif;
  color: var(--b-ink);
  /* دو گرادیان .45 با attachment:fixed بود. fixed روی موبایل هر اسکرول را
     مجبور به رنگ‌آمیزی دوباره می‌کند و با ۹۵٪ ترافیک موبایل هزینه‌اش واقعی
     است. حالا یک درخشش ملایم بالای صفحه که با محتوا اسکرول می‌شود. */
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(59, 130, 246, .18), transparent 70%),
    linear-gradient(180deg, #070b18, #0b1120 40%, #0a0f1c);
  background-repeat: no-repeat;
  min-height: 100vh;
  padding-bottom: 40px;
}

/* ---------------------------- هدر ---------------------------- */

.bhead {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 14px 20px;
  background: rgba(5, 8, 22, .72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.bhead__brand {
  /* min-height: هدف لمس زیر ۴۴px روی موبایل خطای رایج است و اینجا ۳۴ بود. */
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  font-size: 1.15rem; font-weight: 900; color: var(--b-ink);
  text-decoration: none; flex-shrink: 0;
}
.bhead__brand img { border-radius: 8px; display: block; }
.bhead__nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bhead__nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--b-body); text-decoration: none; font-weight: 600;
  font-size: .95rem; padding: 0 12px; border-radius: 10px;
  transition: background .2s ease, color .2s ease;
}
.bhead__nav a:hover { color: #fff; background: rgba(255, 255, 255, .07); }

/* دکمه‌ی ورود به پنل — همان گرادیان صفحه‌ی اصلی، ولی بدون انیمیشن تپش:
   آنجا تنها فراخوان صفحه است، اینجا کنار متن مقاله حواس‌پرت‌کن می‌شد. */
.bhead__cta {
  background: var(--b-accent);
  color: #0b1120 !important; font-weight: 800 !important;
  padding: 0 20px !important; border-radius: 999px !important;
  transition: background .2s ease;
}
.bhead__cta:hover { background: #a5b4fc !important; color: #0b1120 !important; }

/* --------------------------- بدنه --------------------------- */

.bwrap { max-width: var(--b-wrap); margin: 0 auto; padding: 0 18px; }

.btitle { text-align: center; padding: 56px 0 8px; }
.btitle h1 {
  /* قاب نئونی برداشته شد: عنوان با اندازه و وزن خودش برجسته می‌شود، نه با
     درخشش. یک خط نازک زیرش سلسله‌مراتب را نگه می‌دارد. */
  font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.4rem);
  font-weight: 900; line-height: 1.55;
  letter-spacing: -.01em;
  color: var(--b-ink);
  max-width: var(--b-read); margin: 0 auto;
}
.bintro {
  text-align: center; font-size: 1.08rem; color: var(--b-muted);
  line-height: 1.9; margin: 18px auto 0; max-width: 760px;
}

.bcard {
  background: var(--b-card);
  border: 1px solid var(--b-line);
  border-radius: var(--b-r-lg);
  padding: 30px 26px;
  margin: 26px auto 0;
  max-width: var(--b-read);          /* خط کوتاه‌تر = خوانایی بیشتر */
  line-height: 2.05;
  font-size: 1.06rem;                /* ~۱۷px؛ ۱۶ برای متن بلند فارسی کم بود */
  box-shadow: var(--b-shadow);
}
.bcard h2 {
  color: var(--b-ink); font-size: 1.32rem; font-weight: 800;
  margin: 34px 0 10px; line-height: 1.75;
  padding-top: 22px; border-top: 1px solid var(--b-line);
}
.bcard h2:first-child { border-top: 0; padding-top: 0; }
.bcard h3 { color: var(--b-head); font-size: 1.08rem; font-weight: 700; margin: 20px 0 6px; }
.bcard h2:first-child { margin-top: 0; }
.bcard p  { color: var(--b-body); margin-bottom: 14px; }
.bcard p:last-child { margin-bottom: 0; }

/* `padding-inline-start` به‌جای `margin` فیزیکی: ریست `* { padding: 0 }` پدینگ
   پیش‌فرض ul را برمی‌دارد و بدون آن نشانه‌ی گلوله به متن می‌چسبد. خاصیت منطقی
   است تا در RTL و LTR هر دو درست بماند.

   (سرریز افقی نمی‌سازد — با اندازه‌گیری در ۳۷۵ پیکسل بررسی شد: `scrollWidth`
   با و بدون این خط برابر عرض دید است.) */
.bcard ul { color: var(--b-body); margin-bottom: 12px; padding-inline-start: 1.5em; }
.bcard li { margin-bottom: 4px; }
.bcard a  { color: #a5b4fc; }
.bcard strong { color: #fff; }

.green  { color: var(--b-green);  font-weight: 700; }
.purple { color: var(--b-purple); font-weight: 700; }

/* --------------------------- تصاویر --------------------------- */

.bimg { margin: 22px 0; text-align: center; }

/* ⚠️ `max-height` لازم است. اسکرین‌شات موبایل عمودی است (یکی از تصاویر همین
   مقاله ۱۲۰۰×۲۳۹۳ است)؛ با width:100% تنها، ارتفاعش روی صفحه به ۱۸۰۰ پیکسل
   می‌رسید و کاربر باید بی‌دلیل اسکرول می‌کرد. */
.bimg img {
  max-width: 100%;
  max-height: 78vh;
  width: auto; height: auto;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, .35);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}
.bimg figcaption {
  margin-top: 8px; font-size: .85rem; color: var(--b-muted);
}

/* ------------------------ شبکه‌ی ایموجی ------------------------ */

/* ۷۳ ایموجی در یک پاراگراف. `line-height` بالا لازم است چون ایموجی‌ها
   ارتفاع بیشتری از متن دارند و بدون آن سطرها روی هم می‌افتند. */
.emoji-grid {
  font-size: 1.5rem;
  line-height: 2.1;
  word-spacing: 4px;
  text-align: center;
  margin: 14px 0 4px;
  /* بعضی ایموجی‌ها در فونت فارسی گلیف ندارند و به فونت سیستم می‌افتند */
  font-family: 'Vazirmatn', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

/* ------------------------ مستندات وبسرویس ------------------------ */

.apibox {
  margin: 16px 0; padding: 14px 16px;
  border: 1px dashed var(--b-accent); border-radius: var(--b-r, 12px);
  background: rgba(129, 140, 248, .08);
}
.apibox__label { font-size: .85rem; color: var(--b-muted); margin-bottom: 6px; }
/* direction/unicode-bidi لازم است: آدرس لاتین داخل صفحه‌ی RTL وارونه دیده
   می‌شود و اسلش آخر به ابتدای رشته می‌پرد. */
.apibox__url   {
  direction: ltr; unicode-bidi: isolate; display: inline-block;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 1.05rem; font-weight: 700; color: #a5b4fc;
}

/* dir=ltr لازم است: نمونه‌ی آدرس و JSON لاتین‌اند و در صفحه‌ی RTL وارونه
   دیده می‌شوند. overflow-x هم لازم است چون آدرس‌ها بلندند و در موبایل
   نباید کل صفحه را افقی بکشند. */
.apicode {
  direction: ltr; text-align: left;
  margin: 12px 0; padding: 14px 16px;
  background: rgba(2, 6, 23, .75);
  border: 1px solid rgba(148, 163, 184, .3);
  border-radius: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85rem; line-height: 1.85;
  overflow-x: auto; white-space: pre;
}

/* جدول‌ها: بدون کنترل عرض، ستون‌ها در هم می‌رفتند — سرصفحه‌های «حداقل» و
   «حداکثر» به هم می‌چسبیدند و عدد ستون بعدی داخل متن ستون قبلی دیده می‌شد.
   سه چیز لازم بود: عرض ستون اول، جلوگیری از شکستن ستون‌های عددی، و min-width
   که در موبایل به‌جای له‌شدن، اسکرول افقی بدهد. */
/* قاب هم باید به اندازه‌ی جدول جمع شود، وگرنه یک کادر خالی تا ته کارت
   کشیده می‌شود. در RTL خودش سمت راست می‌نشیند. */
.apitable {
  width: max-content; max-width: 100%;
  overflow-x: auto; margin: 16px 0;
  border: 1px solid rgba(148, 163, 184, .22); border-radius: 12px;
}
/* ⚠️ `width: 100%` نبود که مشکل ساخت: توضیح‌ها کوتاه‌اند و جدول تا ته کارت
   کش می‌آمد، پس در دسکتاپ نیمه‌ی چپ هر ردیف خالی می‌ماند و ستون‌ها از هم
   دور می‌افتادند. در موبایل چون عرض کم است دیده نمی‌شد.
   `max-content` جدول را به اندازه‌ی طولانی‌ترین ردیفش می‌کند و `max-width`
   جلوی سرریز را می‌گیرد؛ در موبایل همان min-width اسکرول افقی می‌دهد. */
.apitable table {
  width: max-content; max-width: 100%;
  border-collapse: collapse; font-size: .92rem;
}
.apitable th, .apitable td {
  padding: 11px 14px; text-align: right; vertical-align: top;
  border-bottom: 1px solid rgba(148, 163, 184, .18);
}
.apitable tbody tr:last-child th,
.apitable tbody tr:last-child td { border-bottom: 0; }
.apitable thead th {
  color: var(--b-head); font-weight: 700; white-space: nowrap;
  background: rgba(2, 6, 23, .45);
}
.apitable td { color: var(--b-body); line-height: 1.9; }

/* ستون اول همیشه نام است (پارامتر یا سرویس): باریک و یک‌خطی */
.apitable th:first-child,
.apitable td:first-child { width: 1%; white-space: nowrap; }

/* سقف عرض ستون توضیح: بدون آن، طولانی‌ترین ردیف کل جدول را کش می‌آورد و
   ردیف‌های کوتاه فاصله‌ی بی‌دلیل پیدا می‌کنند. با این سقف، آن ردیف در دو خط
   می‌شکند و جدول جمع‌وجور می‌ماند. ch است نه px تا با اندازه‌ی فونت بخواند. */
.apitable td:last-child { max-width: 52ch; }

/* جدول سرویس‌ها چهار ستون دارد و دو ستون آخر عددند */
.apitable--services th:nth-child(n+3),
.apitable--services td:nth-child(n+3) { white-space: nowrap; text-align: center; }

/* ⚠️ min-width فقط روی همین جدول. چهار ستون در عرض موبایل جا نمی‌شوند و
   بدون آن ستون «هزینه» به ۸۸ پیکسل می‌رسید و متنش سه‌خطی می‌شد. حالا قاب
   اسکرول افقی می‌دهد، که بهتر از له‌شدن است. جدول‌های دوستونی این را لازم
   ندارند چون توضیح‌ها جمله‌اند و شکستنشان طبیعی است. */
.apitable--services table { min-width: 430px; }

.apitable code {
  direction: ltr; unicode-bidi: isolate; display: inline-block;
  background: rgba(2, 6, 23, .6); padding: 2px 7px; border-radius: 6px;
  font-family: ui-monospace, Consolas, monospace; font-size: .85rem; color: #a5b4fc;
  white-space: nowrap;
}
/* کد وسط جمله نباید به کلمه‌ی بغلش بچسبد */
.apitable td code { margin-inline: 2px; }

@media (max-width: 560px) {
  .apitable th, .apitable td { padding: 9px 10px; }
  .apitable table { font-size: .86rem; }
}

.apinote {
  border-inline-start: 3px solid var(--b-accent);
  padding: 8px 0 8px 0; padding-inline-start: 12px;
  color: var(--b-muted) !important; font-size: .93rem;
}

/* --------------------------- فراخوان --------------------------- */

.bcta {
  /* گرادیان آبی→قرمز با دو هالهی نئونی بود. حالا یک رنگ، و برجستگی از
     کنتراست میآید نه از درخشش. ارتفاع ۴۸px هدف لمس امن موبایل است. */
  display: block; width: max-content; max-width: 100%;
  margin: 30px auto 10px; padding: 14px 32px; min-height: 48px;
  background: var(--b-accent); color: #0b1120;
  border-radius: 999px; text-decoration: none;
  font-size: 1.02rem; font-weight: 800; text-align: center;
  box-shadow: var(--b-shadow);
  transition: background .2s ease, transform .2s ease;
}
.bcta:hover { background: #a5b4fc; transform: translateY(-1px); }

/* ------------------------ مطالب مرتبط ------------------------ */

.brelated { margin-top: 34px; }
.brelated h2 { font-size: 1.2rem; font-weight: 800; color: var(--b-head); margin-bottom: 10px; }
.brelated ul { list-style: none; }
.brelated li { border-bottom: 1px solid rgba(148, 163, 184, .2); }
.brelated a {
  display: block; padding: 12px 4px; color: var(--b-body);
  text-decoration: none; font-weight: 600; transition: color .2s, padding .2s;
}
.brelated a:hover { color: #fff; padding-right: 10px; }

/* --------------------------- فوتر --------------------------- */

.bfoot { text-align: center; margin-top: 44px; padding: 0 18px; }
.bfoot__back {
  display: inline-block; padding: 10px 25px; border-radius: 999px;
  background: rgba(15, 23, 42, .85); color: var(--b-ink);
  border: 1px solid rgba(148, 163, 184, .55);
  text-decoration: none; transition: .25s;
}
.bfoot__back:hover { background: rgba(30, 64, 175, .8); border-color: #60a5fa; }
.bfoot__note { margin-top: 18px; font-size: .85rem; color: var(--b-muted); }
.bfoot__note a { color: #a5b4fc; }

/* --------------------------- ایندکس --------------------------- */

.blist { max-width: var(--b-wrap); margin: 16px auto 0; padding: 0 18px; }
.bitem {
  display: block; padding: 22px 18px 26px; color: inherit;
  text-decoration: none; border-bottom: 1px solid rgba(148, 163, 184, .25);
  transition: .25s;
}
.bitem:hover {
  background: rgba(15, 23, 42, .65); border-radius: 10px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45); padding-right: 25px;
}
.bitem h2 {
  font-size: 1.4rem; font-weight: 900; color: var(--b-head);
  margin-bottom: 8px; line-height: 1.6;
}
.bitem p { font-size: .95rem; color: var(--b-body); line-height: 1.8; }

@media (max-width: 768px) {
  .btitle { padding-top: 36px; }
  .btitle h1 { font-size: 1.55rem; padding: 10px 16px; }
  .bintro { font-size: 1rem; }
  .bcard { padding: 20px 16px; }
  .bcard h2 { font-size: 1.18rem; }
  .bitem h2 { font-size: 1.15rem; }
  .bhead { padding: 12px 14px; }
  .bhead__brand span { display: none; }
  .bhead__nav a { padding: 8px; font-size: .9rem; }
}

/* ============================================================
   کامپوننت‌های مقاله‌های قدیمی

   این پنج مقاله هر کدام ~۲۶۰ خط CSS داخلی داشتند با همین کلاس‌ها. برای
   مهاجرتشان به قالب مشترک، قواعد عیناً با همان مقادیر منتقل شدند — نه با
   متغیرهای --b-* — چون این صفحه‌ها رتبه دارند و «تقریباً همان» کافی نیست.
   جایی که مقدار با یک توکن موجود یکی است، در کامنت اشاره شده.
   ============================================================ */

/* فهرست مطالب */
.toc {
  margin: 18px 0 24px; padding: 16px 18px;
  border-radius: var(--b-r);
  background: rgba(148, 163, 184, .06);
  border: 1px solid var(--b-line);
  font-size: .95rem; line-height: 1.9;
}
.toc-title { font-weight: 700; margin-bottom: 6px; color: #93c5fd; }  /* == --b-head */
.toc ul { margin: 0; padding-right: 18px; }
/* فهرست مطالب یک ناوبری است نه متن روان، پس هدف لمسش باید امن باشد.
   بدون این، هر لینک ۲۳ پیکسل بود — روی صفحه‌ای که ۹۵٪ بازدیدش موبایل است. */
.toc li { margin: 2px 0; }
.toc a {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 2px 0; color: #bfdbfe; text-decoration: none;
}
.toc a:hover { text-decoration: underline; color: var(--b-accent); }

/* جعبه‌ی نکته و هشدار */
.note-box {
  margin: 18px 0; padding: 14px 16px; border-radius: var(--b-r);
  background: rgba(34, 197, 94, .09);
  border-inline-start: 3px solid rgba(74, 222, 128, .85);
  font-size: .97rem; line-height: 1.95; color: #d1fae5;
}
.warning-box {
  margin: 18px 0; padding: 14px 16px; border-radius: var(--b-r);
  background: rgba(248, 113, 113, .09);
  border-inline-start: 3px solid rgba(248, 113, 113, .85);
  font-size: .97rem; line-height: 1.95; color: #fee2e2;
}

/* سربرگ مقاله و تاریخ */
.article-header { text-align: center; padding: 72px 10px 24px; }
.article-header h1 {
  font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.4rem);
  font-weight: 900; line-height: 1.55; letter-spacing: -.01em;
  margin: 0 auto 12px; max-width: var(--b-read);
  color: var(--b-ink);
}
.article-meta { font-size: .9rem; color: #e5e7ebbb; margin-top: 4px; }

/* بند شروع برجسته */
.highlight-intro {
  /* زرد روی گرادیان آبی/قرمز بود — سه رنگ تأکید در یک بلوک. حالا فقط یک
     نوار کناری و متن روشن؛ برجسته میماند بدون شلوغی. */
  font-size: 1.08rem; font-weight: 600; color: var(--b-ink);
  background: rgba(129, 140, 248, .10);
  border-inline-start: 3px solid var(--b-accent);
  padding: 16px 18px; border-radius: var(--b-r);
  text-align: start; margin-bottom: 18px; line-height: 1.95;
}

/* پرسش‌های متداول */
.faq-section { margin-top: 26px; }
.faq-section h2 { margin-bottom: 6px; }

/* دعوت پایانی */
.bottom-cta { text-align: center; margin-top: 24px; font-size: .95rem; color: #e5e7ebc5; }
.bottom-cta a { color: #bfdbfe; text-decoration: none; font-weight: 700; }
.bottom-cta a:hover { color: var(--b-accent); text-decoration: underline; }

/* ردیف دکمه‌های کوچک — فقط دو مقاله دارند */
.cta-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.cta-mini {
  display: inline-block; text-decoration: none;
  background: rgba(15, 23, 42, .95); color: #e5e7eb;
  padding: 10px 18px; border-radius: 999px; font-size: .95rem;
  border: 1px solid rgba(148, 163, 184, .7);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cta-mini:hover { background: rgba(30, 64, 175, .9); border-color: #93c5fd; color: #f9fafb; }

@media (max-width: 768px) {
  .article-header h1 { font-size: 1.6rem; padding: 8px 14px; }
  .highlight-intro   { font-size: 1rem; padding: 14px 10px; }
}

/* پرسش‌های تاشو — مقاله‌ی «بازدید خودکار» از <details> استفاده می‌کند و
   نسخه‌ی HTMLاش استایلی برایش نداشت (ظاهر پیش‌فرض مرورگر). حالا با بقیه
   هماهنگ است. */
.bcard details {
  border: 1px solid var(--b-line);
  border-radius: var(--b-r);
  padding: 0 16px;
  margin: 12px 0;
  background: rgba(148, 163, 184, .05);
}
.bcard details[open] { padding-bottom: 4px; }
.bcard summary {
  cursor: pointer; list-style: none;
  padding: 14px 0; min-height: 48px;   /* هدف لمس امن موبایل */
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; color: var(--b-ink);
}
.bcard summary::-webkit-details-marker { display: none; }
.bcard summary::before {
  content: '+'; flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 6px;
  display: grid; place-items: center;
  background: rgba(129, 140, 248, .18); color: var(--b-accent);
  font-weight: 800; transition: transform .2s ease;
}
.bcard details[open] summary::before { content: '−'; }
.bcard details p { margin: 0 0 12px; color: var(--b-body); }