/* درس‌افزار Blog — Shared Styles */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;600;700;900&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Vazirmatn',Tahoma,sans-serif;direction:rtl;text-align:right;background:#f8f7fd;color:#1e1b4b;line-height:1.8;font-size:16px}
a{color:#4A2FD6;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;border-radius:12px}

/* Layout */
.container{max-width:860px;margin:0 auto;padding:0 1.25rem}
.wide{max-width:1100px;margin:0 auto;padding:0 1.25rem}

/* Top bar */
.topbar{background:#0C0A1C;padding:.9rem 0;position:sticky;top:0;z-index:100;box-shadow:0 2px 20px rgba(0,0,0,.3)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{display:flex;align-items:center;gap:.6rem;color:#fff;font-weight:900;font-size:1.1rem}
.logo svg{width:32px;height:30px}
.topbar-cta{background:linear-gradient(135deg,#4A2FD6,#7C3AED);color:#fff;padding:.5rem 1.2rem;border-radius:10px;font-weight:700;font-size:.88rem;white-space:nowrap}
.topbar-cta:hover{opacity:.9;text-decoration:none}

/* Breadcrumb */
.breadcrumb{padding:.9rem 0;font-size:.82rem;color:#6b7280}
.breadcrumb a{color:#4A2FD6}
.breadcrumb span{margin:0 .35rem}

/* Hero */
.article-hero{background:linear-gradient(135deg,#4A2FD6 0%,#7C3AED 60%,#a855f7 100%);color:#fff;padding:3.5rem 0 3rem;margin-bottom:2rem}
.article-hero h1{font-size:clamp(1.6rem,4vw,2.3rem);font-weight:900;line-height:1.4;margin-bottom:1rem}
.article-hero .meta{display:flex;flex-wrap:wrap;gap:.8rem;font-size:.82rem;opacity:.85;align-items:center}
.badge{background:rgba(255,255,255,.2);padding:.25rem .75rem;border-radius:20px;font-size:.78rem}

/* TOC */
.toc{background:#fff;border:1px solid #e5e7eb;border-right:4px solid #4A2FD6;border-radius:12px;padding:1.4rem 1.6rem;margin:2rem 0}
.toc h2{font-size:1rem;font-weight:800;margin-bottom:.9rem;color:#1e1b4b}
.toc ol{padding-right:1.4rem}
.toc li{margin-bottom:.4rem;font-size:.9rem}
.toc a{color:#4A2FD6;font-weight:600}

/* Article body */
.article-body{background:#fff;border-radius:16px;padding:2rem 2.2rem;margin-bottom:2rem;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.article-body h2{font-size:1.35rem;font-weight:900;color:#1e1b4b;margin:2.2rem 0 .9rem;padding-bottom:.5rem;border-bottom:2px solid #ede9fe}
.article-body h3{font-size:1.1rem;font-weight:800;color:#3730a3;margin:1.6rem 0 .7rem}
.article-body p{margin-bottom:1.1rem;color:#374151;line-height:1.9}
.article-body ul,.article-body ol{padding-right:1.5rem;margin-bottom:1.1rem}
.article-body li{margin-bottom:.5rem;color:#374151}
.article-body strong{color:#1e1b4b}
.article-body a{color:#4A2FD6;font-weight:600;border-bottom:1px dashed #4A2FD6}
.article-body a:hover{border-bottom-style:solid;text-decoration:none}

/* Info box */
.infobox{background:#ede9fe;border-radius:12px;padding:1.2rem 1.5rem;margin:1.5rem 0;border-right:4px solid #4A2FD6}
.infobox p{margin:0;color:#3730a3;font-weight:600}

/* CTA box */
.cta-box{background:linear-gradient(135deg,#4A2FD6,#7C3AED);border-radius:16px;padding:2rem;text-align:center;margin:2.5rem 0;color:#fff}
.cta-box h3{font-size:1.2rem;font-weight:900;margin-bottom:.7rem}
.cta-box p{font-size:.92rem;opacity:.9;margin-bottom:1.2rem}
.cta-btn{display:inline-block;background:#fff;color:#4A2FD6;font-weight:900;padding:.8rem 2rem;border-radius:10px;font-size:.95rem}
.cta-btn:hover{opacity:.9;text-decoration:none}

/* FAQ */
.faq-item{border:1px solid #e5e7eb;border-radius:12px;padding:1.2rem 1.5rem;margin-bottom:.9rem;background:#fff}
.faq-item h3{font-size:.98rem;font-weight:800;color:#1e1b4b;margin-bottom:.5rem}
.faq-item p{font-size:.9rem;color:#6b7280;margin:0;line-height:1.7}

/* Related articles */
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin-top:1.2rem}
.related-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:1.2rem;transition:box-shadow .2s}
.related-card:hover{box-shadow:0 4px 20px rgba(74,47,214,.12);text-decoration:none}
.related-card .tag{font-size:.75rem;color:#7C3AED;font-weight:700;margin-bottom:.4rem;display:block}
.related-card h3{font-size:.93rem;font-weight:800;color:#1e1b4b;line-height:1.5}

/* External link indicator */
.ext::after{content:" ↗";font-size:.75em;opacity:.6}

/* Footer */
.blog-footer{background:#0C0A1C;color:#9ca3af;padding:2.5rem 0;font-size:.85rem;text-align:center;margin-top:3rem}
.blog-footer a{color:#a78bfa}
.blog-footer p+p{margin-top:.5rem}

/* Responsive */
@media(max-width:640px){
  .article-body{padding:1.2rem 1.1rem}
  .article-hero{padding:2.2rem 0 2rem}
  .toc{padding:1rem 1.1rem}
}