@font-face{font-family:'Vazirmatn';src:url('/assets/fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Vazirmatn';src:url('/assets/fonts/webfonts/Vazirmatn-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

:root{
  --bg:#0b0f1a; --surface:#111827; --card:#1a2235; --border:#1e2d45;
  --accent:#00d4ff; --accent2:#7c3aed; --green:#10b981;
  --text:#e2e8f0; --muted:#64748b; --sans:'Vazirmatn',Tahoma,sans-serif;
}
html.light{
  --bg:#f5f7fa; --surface:#ffffff; --card:#f0f4f8; --border:#dde3ed;
  --accent:#0077cc; --accent2:#6d28d9; --green:#059669;
  --text:#0f172a; --muted:#64748b;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.8;transition:background .3s,color .3s;overflow-x:hidden}

.blog-shell{max-width:1180px;margin:0 auto;padding:0 20px}

/* ── دکمه تغییر تم ── */
.theme-toggle{position:fixed;top:18px;left:18px;z-index:50;width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.12);transition:transform .15s}
.theme-toggle:hover{transform:scale(1.08)}

/* ── هدر ── */
.blog-header{border-bottom:1px solid var(--border);padding:16px 0;position:sticky;top:0;background:color-mix(in srgb, var(--bg) 88%, transparent);backdrop-filter:blur(10px);z-index:20}
.blog-header .blog-shell{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.blog-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:700;font-size:17px;flex-shrink:0}
.blog-brand-icon{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.blog-header nav{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.blog-header nav a{color:var(--muted);text-decoration:none;font-size:13.5px;transition:.2s;white-space:nowrap}
.blog-header nav a:hover{color:var(--accent)}

/* ── هیرو ── */
.blog-hero{padding:56px 0 36px;text-align:center}
.blog-hero h1{font-size:34px;font-weight:800;margin-bottom:14px}
.blog-hero p{color:var(--muted);max-width:620px;margin:0 auto;font-size:15px}

/* ── جستجو ── */
.blog-search{max-width:480px;margin:28px auto 0;display:flex;gap:8px}
.blog-search input{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 16px;color:var(--text);font-family:inherit;font-size:14px}
.blog-search button{background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;border-radius:12px;padding:12px 20px;color:#fff;font-family:inherit;font-weight:700;cursor:pointer}

/* ── چیدمان ── */
.blog-layout{display:grid;grid-template-columns:1fr 260px;gap:32px;padding:12px 0 60px;align-items:start}
@media (max-width:860px){.blog-layout{grid-template-columns:1fr}}

/* ── گرید کارت‌ها ── */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:980px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.post-grid{grid-template-columns:1fr}}

.post-card{background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden;text-decoration:none;color:var(--text);display:flex;flex-direction:column;transition:transform .2s,border-color .2s}
.post-card:hover{transform:translateY(-4px);border-color:var(--accent)}
.post-card-cover{width:100%;aspect-ratio:1200/630;object-fit:cover;display:block;background:var(--surface)}
.post-card-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-card-cat{display:inline-block;width:fit-content;font-size:11px;font-weight:700;color:var(--accent);background:color-mix(in srgb, var(--accent) 14%, transparent);border-radius:999px;padding:4px 12px}
.post-card-title{font-size:17px;font-weight:700;line-height:1.6}
.post-card-excerpt{font-size:13.5px;color:var(--muted);flex:1;line-height:1.85}
.post-card-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);border-top:1px solid var(--border);padding-top:10px;margin-top:4px}

/* ── سایدبار ── */
.blog-sidebar{display:flex;flex-direction:column;gap:22px;position:sticky;top:90px}
.sidebar-box{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px}
.sidebar-box h3{font-size:14px;margin-bottom:14px;color:var(--text)}
.cat-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.cat-list a{display:flex;justify-content:space-between;color:var(--muted);text-decoration:none;font-size:13.5px;padding:6px 8px;border-radius:8px;transition:.2s}
.cat-list a:hover,.cat-list a.active{color:var(--accent);background:color-mix(in srgb, var(--accent) 10%, transparent)}
.cat-list span{color:var(--muted);font-size:12px}

/* ── صفحه‌بندی ── */
.blog-pagination{display:flex;justify-content:center;gap:10px;padding-top:36px}
.blog-pagination a,.blog-pagination span{padding:9px 18px;border-radius:10px;border:1px solid var(--border);color:var(--text);text-decoration:none;font-size:13px}
.blog-pagination a:hover{border-color:var(--accent);color:var(--accent)}
.blog-pagination .disabled{opacity:.35;pointer-events:none}

.blog-empty{text-align:center;padding:60px 0;color:var(--muted)}

/* ── مقاله ── */
.post-breadcrumb{font-size:13px;color:var(--muted);margin-bottom:18px}
.post-breadcrumb a{color:var(--muted);text-decoration:none}
.post-breadcrumb a:hover{color:var(--accent)}

.post-hero-cover{width:100%;max-height:420px;aspect-ratio:1200/630;object-fit:cover;border-radius:20px;border:1px solid var(--border);margin-bottom:28px}

.post-title{font-size:30px;font-weight:800;line-height:1.55;margin-bottom:16px}
.post-meta{display:flex;flex-wrap:wrap;gap:16px;color:var(--muted);font-size:13.5px;margin-bottom:30px;border-bottom:1px solid var(--border);padding-bottom:24px}
.post-meta span{display:flex;align-items:center;gap:6px}

.post-content{font-size:16.5px;line-height:1.95;color:var(--text)}
.post-content h2{font-size:23px;margin:32px 0 14px;font-weight:700}
.post-content h3{font-size:19px;margin:26px 0 12px;font-weight:700}
.post-content p{margin-bottom:16px}
.post-content ul,.post-content ol{margin:0 0 16px 0;padding-inline-start:24px}
.post-content li{margin-bottom:8px}
.post-content img{max-width:100%;border-radius:14px;margin:14px 0}
.post-content a{color:var(--accent)}
.post-content blockquote{border-inline-start:3px solid var(--accent);padding:6px 18px;color:var(--muted);margin:18px 0;background:var(--surface);border-radius:8px}
.post-content code{background:var(--surface);padding:2px 6px;border-radius:6px;font-size:14px}
.post-content pre{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;overflow:auto;margin-bottom:16px}

/* ── ساختار مقالات تولیدی Textoma ── */
.post-content .article-title{display:none} /* عنوان همین الان بالای صفحه به‌صورت h1.post-title نمایش داده می‌شه */
.post-content .article-summary{font-size:17px;color:var(--muted);border-inline-start:3px solid var(--accent);padding:6px 18px;margin:0 0 26px;background:var(--surface);border-radius:8px}
.post-content hr{border:none;border-top:1px solid var(--border);margin:30px 0}

.post-content .article-table-of-contents{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px 26px;margin:0 0 30px}
.post-content .article-table-of-contents h2{margin:0 0 12px;font-size:18px}
.post-content .article-table-of-contents-list-level-1{list-style:none;padding-inline-start:0;margin:0}
.post-content .article-table-of-contents-list-level-1>li{margin-bottom:8px;font-weight:600}
.post-content .article-table-of-contents-list-level-2{list-style:none;padding-inline-start:22px;margin:8px 0}
.post-content .article-table-of-contents-list-level-2 li{margin-bottom:8px;font-size:14.5px;font-weight:400}
.post-content .article-table-of-contents a{color:var(--text);text-decoration:none;opacity:.82;transition:.15s}
.post-content .article-table-of-contents a:hover{color:var(--accent);opacity:1}

.post-content .schema-faq{margin-top:8px;display:flex;flex-direction:column;gap:12px}
.post-content .schema-faq-section{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px 22px}
.post-content .schema-faq-question{display:block;font-size:16px;margin-bottom:8px;color:var(--text)}
.post-content .schema-faq-answer{margin:0;color:var(--muted)}

.post-content .article-cta{margin:36px 0 12px;text-align:center}
.post-content .article-cta-link{display:inline-block;background:var(--accent);color:#000!important;font-weight:700;padding:13px 30px;border-radius:10px;text-decoration:none;transition:.2s}
.post-content .article-cta-link:hover{filter:brightness(1.1);transform:translateY(-1px)}

.post-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.post-tags a{font-size:12.5px;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:5px 14px;text-decoration:none}
.post-tags a:hover{color:var(--accent);border-color:var(--accent)}

/* ── مرتبط ── */
.related-section{margin-top:56px;padding-top:36px;border-top:1px solid var(--border)}
.related-section h2{font-size:20px;margin-bottom:20px}

.blog-footer{border-top:1px solid var(--border);padding:26px 0;text-align:center;color:var(--muted);font-size:13px;margin-top:20px}
.blog-footer a{color:var(--accent);text-decoration:none}

/* ── ریسپانسیو ── */
@media (max-width: 860px){
  .blog-layout{grid-template-columns:1fr;gap:26px}
  .blog-sidebar{position:static;flex-direction:row;flex-wrap:wrap}
  .blog-sidebar .sidebar-box{flex:1;min-width:220px}
}
@media (max-width: 760px){
  .post-grid{grid-template-columns:repeat(2,1fr);gap:16px}
}
@media (max-width: 640px){
  .blog-shell{padding:0 14px}
  .blog-header{padding:12px 0}
  .blog-hero{padding:34px 0 22px}
  .blog-hero h1{font-size:22px}
  .blog-hero p{font-size:13.5px}
  .blog-search{flex-direction:column;max-width:100%}
  .blog-search button{width:100%}
  .post-grid{grid-template-columns:1fr}
  .post-title{font-size:22px}
  .post-meta{gap:10px;font-size:12.5px}
  .post-hero-cover{border-radius:14px;max-height:220px}
  .theme-toggle{top:12px;left:12px;width:34px;height:34px;font-size:14px}
  .blog-pagination{flex-wrap:wrap}
}
@media (max-width: 420px){
  .blog-brand-icon{display:none}
  .blog-brand{font-size:15px}
  .blog-header nav{gap:12px}
  .blog-header nav a{font-size:12.5px}
}