/* ================================================================
   دِه‌بلاگ - قالب جدید صفحات اصلی سایت (طرح Vazirmatn / تیل)
   این استایل فقط توسط صفحات زیر بارگذاری می‌شود:
   index.php (حالت دامنه اصلی سایت)، page.php، login.php، register.php،
   themes.php و includes/site-header.php + includes/site-footer.php
   مستقل از assets/css/theme.css و assets/css/home-legacy.css است تا
   ظاهر وبلاگ‌های اختصاصی کاربران و پنل مدیریت تحت تاثیر قرار نگیرد.
   ================================================================ */
:root {
  --primary: #0d9488;
  --primary-dark: #0f766e;
  --primary-light: #ccfbf1;
  --text: #0f172a;
  --text-muted: #64748b;
  --bg: #f8fafc;
  --white: #ffffff;
  --border: #e2e8f0;
  --shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.dh2 { font-family: 'Vazirmatn', system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.7; }
.dh2 * { box-sizing: border-box; }
.dh2 a { text-decoration: none; color: inherit; transition: 0.2s; }

/* Header */
.dh2 header { background: var(--white); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; }
.dh2 .nav { max-width: 1200px; margin: 0 auto; padding: 0.85rem 1.4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dh2 .logo { display: flex; align-items: center; gap: 0.55rem; font-weight: 800; font-size: 1.2rem; color: var(--primary-dark); }
.dh2 .logo-icon { width: 34px; height: 34px; background: var(--primary); color: white; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.05rem; flex-shrink: 0; }
.dh2 .nav-links { display: flex; gap: 1.5rem; align-items: center; }
.dh2 .nav-links a { font-size: 0.92rem; color: var(--text-muted); font-weight: 500; }
.dh2 .nav-links a:hover, .dh2 .nav-links a.active { color: var(--primary); }
.dh2 .nav-actions { display: flex; gap: 0.6rem; align-items: center; }
.dh2 .nav-toggle {
  display: none; background: transparent; border: 1px solid var(--border); border-radius: 8px;
  width: 38px; height: 38px; font-size: 1.15rem; color: var(--text); cursor: pointer; order: 3;
}
.dh2 .nav-toggle:hover { border-color: var(--primary); color: var(--primary); }
.dh2 .btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 1.1rem; border-radius: 9px; font-weight: 600; font-size: 0.88rem; border: none; cursor: pointer; transition: 0.2s; font-family: inherit; }
.dh2 .btn-ghost { background: transparent; color: var(--text-muted); }
.dh2 .btn-ghost:hover { color: var(--primary); }
.dh2 .btn-primary { background: var(--primary); color: white; }
.dh2 .btn-primary:hover { background: var(--primary-dark); color: white; }
.dh2 .btn-outline { background: white; border: 1px solid var(--border); color: var(--text); }
.dh2 .btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.dh2 .btn-block { width: 100%; justify-content: center; padding: 0.75rem; }
.dh2 .dh2-unread { background:#ef4444; color:#fff; border-radius:9px; font-size:0.65rem; padding:0 5px; margin-inline-start:2px; }

/* Page Hero (about/contact/help/rules/privacy/advertise/themes) */
.dh2 .page-hero { background: linear-gradient(180deg, #f0fdfa 0%, var(--bg) 100%); padding: 3rem 1.4rem 2.5rem; text-align: center; }
.dh2 .page-hero h1 { font-size: 2rem; font-weight: 800; margin-bottom: 0.6rem; }
.dh2 .page-hero p { color: var(--text-muted); font-size: 1.05rem; }

/* Content */
.dh2 .content { max-width: 900px; margin: 0 auto; padding: 2rem 1.4rem 4rem; }
.dh2 .content-card { background: white; border: 1px solid var(--border); border-radius: 14px; padding: 2rem; box-shadow: var(--shadow); }
.dh2 .content h2 { font-size: 1.3rem; font-weight: 700; margin: 1.8rem 0 0.8rem; color: var(--primary-dark); }
.dh2 .content h2:first-child { margin-top: 0; }
.dh2 .content p { margin-bottom: 1rem; color: var(--text); }
.dh2 .content ul, .dh2 .content ol { margin: 0.8rem 0 1.2rem 1.5rem; color: var(--text-muted); }
.dh2 .content li { margin-bottom: 0.4rem; }
.dh2 .content a.inline-link { color: var(--primary); font-weight: 600; }

/* Alerts */
.dh2 .alert { padding: 0.8rem 1.1rem; border-radius: 10px; font-size: 0.9rem; margin-bottom: 1.1rem; }
.dh2 .alert-danger { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.dh2 .alert-success { background: #f0fdfa; color: var(--primary-dark); border: 1px solid #99f6e4; }

/* Form */
.dh2 .form-group { margin-bottom: 1.2rem; }
.dh2 .form-group label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4rem; }
.dh2 .form-group input, .dh2 .form-group textarea, .dh2 .form-group select {
  width: 100%; padding: 0.7rem 1rem; border: 1px solid var(--border); border-radius: 10px;
  font-family: inherit; font-size: 0.95rem; background: var(--bg); color: var(--text);
}
.dh2 .form-group input:focus, .dh2 .form-group textarea:focus, .dh2 .form-group select:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(13,148,136,0.15);
}
.dh2 .form-group textarea { min-height: 140px; resize: vertical; }
.dh2 .form-hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.35rem; }

/* Auth box (login/register) */
.dh2 .auth-box { max-width: 420px; margin: 3rem auto; background: white; border: 1px solid var(--border); border-radius: 16px; padding: 2.2rem; box-shadow: var(--shadow); }
.dh2 .auth-box h1 { font-size: 1.5rem; font-weight: 800; text-align: center; margin-bottom: 0.4rem; }
.dh2 .auth-box .subtitle { text-align: center; color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.8rem; }
.dh2 .auth-footer { text-align: center; margin-top: 1.5rem; font-size: 0.9rem; color: var(--text-muted); }
.dh2 .auth-footer a { color: var(--primary); font-weight: 600; }
.dh2 .note { background: #f0fdfa; border: 1px solid #99f6e4; border-radius: 10px; padding: 0.7rem 1rem; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.3rem; text-align: center; }

/* Hero (landing) */
.dh2 .hero { max-width: 1200px; margin: 0 auto; padding: 3rem 1.4rem 3.2rem; display: grid; grid-template-columns: 1fr 1.05fr; gap: 2.5rem; align-items: center; }
.dh2 .hero-content h1 { font-size: 2.2rem; font-weight: 800; line-height: 1.35; margin-bottom: 0.9rem; }
.dh2 .hero-content h1 span { color: var(--primary); }
.dh2 .hero-content p { color: var(--text-muted); font-size: 1.02rem; margin-bottom: 1.5rem; max-width: 440px; }
.dh2 .hero-buttons { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.dh2 .hero-note { font-size: 0.86rem; color: var(--text-muted); background: #f0fdfa; border: 1px solid #99f6e4; display: inline-block; padding: 0.4rem 0.9rem; border-radius: 8px; }
.dh2 .hero-features { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: 0.84rem; color: var(--text-muted); margin-top: 1.1rem; }
.dh2 .hero-features span { display: flex; align-items: center; gap: 0.3rem; }

/* Dashboard preview */
.dh2 .dashboard-preview { background: var(--white); border-radius: 14px; box-shadow: var(--shadow); border: 1px solid var(--border); overflow: hidden; }
.dh2 .dash-header { background: var(--primary-dark); color: white; padding: 0.75rem 1.1rem; display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.9rem; }
.dh2 .dash-body { display: flex; }
.dh2 .dash-sidebar { width: 150px; background: var(--primary-dark); color: white; padding: 0.85rem 0.7rem; font-size: 0.78rem; }
.dh2 .dash-sidebar a { display: flex; align-items: center; gap: 0.45rem; padding: 0.42rem 0.55rem; border-radius: 7px; margin-bottom: 0.2rem; opacity: 0.85; }
.dh2 .dash-sidebar a.active, .dh2 .dash-sidebar a:hover { background: rgba(255,255,255,0.15); opacity: 1; }
.dh2 .dash-main { flex: 1; padding: 0.85rem; background: #f1f5f9; }
.dh2 .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 0.65rem; }
.dh2 .stat-card { background: white; border-radius: 9px; padding: 0.55rem; border: 1px solid var(--border); }
.dh2 .stat-card .label { font-size: 0.68rem; color: var(--text-muted); }
.dh2 .stat-card .value { font-weight: 700; font-size: 0.95rem; }
.dh2 .stat-card .change { font-size: 0.62rem; color: #10b981; }
.dh2 .charts-row { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0.5rem; }
.dh2 .chart-box { background: white; border-radius: 9px; padding: 0.55rem; border: 1px solid var(--border); height: 95px; }
.dh2 .chart-box .title { font-size: 0.72rem; font-weight: 600; margin-bottom: 0.3rem; }
.dh2 .fake-line { height: 52px; background: linear-gradient(180deg, transparent 55%, #ccfbf1 55%), linear-gradient(90deg, #0d9488, #14b8a6 50%, #5eead4); border-radius: 4px; opacity: 0.75; }
.dh2 .fake-pie { width: 58px; height: 58px; border-radius: 50%; background: conic-gradient(#0d9488 0% 40%, #14b8a6 40% 65%, #5eead4 65% 85%, #e2e8f0 85%); margin: 0 auto; }

/* Features */
.dh2 .features { max-width: 1200px; margin: 0 auto; padding: 0.5rem 1.4rem 2.5rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; }
.dh2 .feature-card { background: white; border: 1px solid var(--border); border-radius: 12px; padding: 1.2rem; box-shadow: var(--shadow); transition: 0.2s; }
.dh2 .feature-card:hover { border-color: #99f6e4; transform: translateY(-2px); }
.dh2 .feature-icon { width: 40px; height: 40px; background: var(--primary-light); color: var(--primary-dark); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; margin-bottom: 0.7rem; }
.dh2 .feature-card h3 { font-size: 0.92rem; font-weight: 700; margin-bottom: 0.3rem; }
.dh2 .feature-card p { font-size: 0.8rem; color: var(--text-muted); }

/* Sections */
.dh2 .section { max-width: 1200px; margin: 0 auto; padding: 1.8rem 1.4rem; }
.dh2 .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; gap: 1rem; flex-wrap: wrap; }
.dh2 .section-header h2 { font-size: 1.28rem; font-weight: 700; }
.dh2 .section-header a { font-size: 0.88rem; color: var(--primary); font-weight: 500; }

/* Recent Blogs */
.dh2 .blog-list { display: flex; flex-direction: column; gap: 0.65rem; }
.dh2 .blog-item { background: white; border: 1px solid var(--border); border-radius: 11px; padding: 0.95rem 1.15rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; transition: 0.2s; }
.dh2 .blog-item:hover { border-color: #99f6e4; background: #f0fdfa; }
.dh2 .blog-info h3 { font-size: 0.96rem; font-weight: 600; margin-bottom: 0.2rem; }
.dh2 .blog-meta { font-size: 0.8rem; color: var(--text-muted); display: flex; gap: 0.7rem; }
.dh2 .blog-date { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
.dh2 .empty-hint { color: var(--text-muted); font-size: 0.9rem; padding: 1rem; text-align:center; background:white; border:1px dashed var(--border); border-radius: 11px; }

/* Pagination */
.dh2 .dh2-pagination { display:flex; justify-content:space-between; align-items:center; gap:0.8rem; margin-top:1.1rem; flex-wrap:wrap; font-size:0.85rem; color: var(--text-muted); }
.dh2 .dh2-pagination a { color: var(--primary); font-weight:600; }
.dh2 .dh2-pagination span.disabled { opacity:0.4; }

/* Top Blogs */
.dh2 .top-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
.dh2 .top-card { background: white; border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; text-align: center; box-shadow: var(--shadow); transition: 0.2s; display:block; }
.dh2 .top-card:hover { border-color: #99f6e4; transform: translateY(-2px); }
.dh2 .rank { display: inline-flex; width: 32px; height: 32px; background: var(--primary); color: white; border-radius: 50%; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 0.65rem; }
.dh2 .top-card h3 { font-size: 0.98rem; margin-bottom: 0.2rem; }
.dh2 .top-card p { font-size: 0.84rem; color: var(--text-muted); }

/* Categories */
.dh2 .categories { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.75rem; }
.dh2 .cat-card { background: white; border: 1px solid var(--border); border-radius: 11px; padding: 1.05rem 0.55rem; text-align: center; transition: 0.2s; display:block; }
.dh2 .cat-card:hover { border-color: var(--primary); background: #f0fdfa; }
.dh2 .cat-icon { font-size: 1.45rem; margin-bottom: 0.35rem; }
.dh2 .cat-card span { font-size: 0.82rem; font-weight: 600; }

/* Templates / Theme cards */
.dh2 .templates, .dh2 .themes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.dh2 .themes-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.dh2 .template-card, .dh2 .theme-card { background: white; border: 1px solid var(--border); border-radius: 13px; overflow: hidden; box-shadow: var(--shadow); transition: 0.2s; }
.dh2 .template-card:hover, .dh2 .theme-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.08); }
.dh2 .template-img, .dh2 .theme-preview { height: 130px; background: linear-gradient(135deg, #e0f2fe, #ccfbf1); display: flex; align-items: center; justify-content: center; font-size: 2.4rem; }
.dh2 .theme-preview { height: 150px; font-size: 2.8rem; }
.dh2 .template-info, .dh2 .theme-info { padding: 0.95rem 1rem; }
.dh2 .template-info h3, .dh2 .theme-info h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.2rem; }
.dh2 .template-info p, .dh2 .theme-info p { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.6rem; }

/* Banner */
.dh2 .banner { max-width: 1200px; margin: 1.2rem auto 2.2rem; padding: 0 1.4rem; }
.dh2 .banner-inner { background: linear-gradient(90deg, #f0fdfa, #ecfdf5); border: 1px solid #99f6e4; border-radius: 14px; padding: 1.35rem 1.7rem; display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap; }
.dh2 .banner-inner h3 { font-size: 1.1rem; font-weight: 700; }
.dh2 .banner-inner p { font-size: 0.88rem; color: var(--text-muted); margin-top: 0.15rem; }

/* Footer */
.dh2 footer { background: #0f172a; color: #94a3b8; padding: 2.1rem 1.4rem 1.2rem; }
.dh2 .footer-content { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.2rem; }
.dh2 .footer-logo { display: flex; align-items: center; gap: 0.45rem; color: white; font-weight: 700; }
.dh2 .footer-links { display: flex; gap: 1.3rem; font-size: 0.84rem; flex-wrap: wrap; }
.dh2 .footer-links a:hover { color: white; }
.dh2 .footer-bottom { max-width: 1200px; margin: 1.2rem auto 0; padding-top: 1.05rem; border-top: 1px solid #1e293b; text-align: center; font-size: 0.78rem; }
.dh2 .footer-bottom.plain { border: none; padding-top: 0; margin-top: 0; }

@media (max-width: 980px) {
  .dh2 .hero { grid-template-columns: 1fr; }
  .dh2 .features { grid-template-columns: repeat(2, 1fr); }
  .dh2 .categories { grid-template-columns: repeat(3, 1fr); }
  .dh2 .templates, .dh2 .themes-grid { grid-template-columns: 1fr 1fr; }
  .dh2 .top-grid { grid-template-columns: 1fr; }
  .dh2 .dash-sidebar { display: none; }
}
@media (max-width: 768px) {
  .dh2 .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .dh2 .nav-links {
    display: none; position: absolute; top: 100%; right: 0; left: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--white); border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow); padding: 0.5rem 1.4rem;
  }
  .dh2 .nav-links.open { display: flex; }
  .dh2 .nav-links a { padding: 0.6rem 0; width: 100%; }
  .dh2 .nav { position: relative; flex-wrap: wrap; }
  .dh2 .page-hero h1 { font-size: 1.6rem; }
}
@media (max-width: 600px) {
  .dh2 .features { grid-template-columns: 1fr; }
  .dh2 .categories { grid-template-columns: repeat(2, 1fr); }
  .dh2 .templates, .dh2 .themes-grid { grid-template-columns: 1fr; }
  .dh2 .blog-item { flex-direction: column; align-items: flex-start; }
}