*,*::before,*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}/*font-size:62.5%;*/
html{
    /* font-size:50%;*/
     scroll-behavior: smooth;
}
::selection{
    background:var(--accent);
    color:var(--bg);
}
:root{
    --bg:#f6f7fb;
    --card:#ffffff;
    --muted:#6b7280;
    --accent:#0aa06a;
    --accent-2:#06a77d;
    --danger:#e53935;
    --shadow: rgba(15, 23, 42, 0.06);
    --radius:10px;
    --container:1200px;
    --gap:18px;
    --transition: 500ms cubic-bezier(.2,.9,.3,1);
    --max-content-width:780px;
}
blockquote {
    border-right: 4px solid #2c7be5;
    padding: 12px 20px;
    margin: 20px 0;
    background: #f5f7fa;
    font-style: italic;
    line-height: 1.9;
}
table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    background: #fff;
}

table thead th {
    background: #2c7be5;
    color: #fff;
    padding: 12px;
}

table td {
    padding: 10px;
    border: 1px solid #e5e7eb;
}

table tbody tr:nth-child(even) {
    background: #f9fafb;
}

table tbody tr:hover {
    background: #eef2ff;
}


@font-face {
  font-family: 'vazir';
  src: url('fonts/Vazir.woff') format('woff'),
  url('fonts/Vazir.woff2') format('woff2');
  font-weight: normal;
}

@font-face {
  font-family: 'vazirB';
  src: url('fonts/Vazir-Bold.woff') format('woff'),
  url('fonts/Vazir-Bold.woff2') format('woff2');
  font-weight: bold;
}
html,body{
    font-family:'vazir',"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
body {
    background: var(--bg); 
    color:#111;
    -webkit-font-smoothing:antialiased;
    line-height:1.7;
}
ul{list-style: none;}
a {text-decoration:none;}

.container {
    max-width: var(--container); 
     margin: 24px auto;
     padding:0 var(--gap);
    }

/* HEADER */
/* HEADER TOP */
.site-header {
  background: var(--card);
  box-shadow:0 2px 10px var(--shadow);
  border-radius: var(--radius);
}

.header-top {
  display:flex;
  align-items:center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding:10px 20px;
}

.logo {font-size:1.8rem; color: var(--accent); font-weight:bold;}
.search {flex:1; margin:0 20px;}
.search input {
  width:100%; padding:8px 15px;
  border-radius: var(--radius);
  border:1px solid #ddd;
  outline:none;
  transition:border-color var(--transition);
}
.search input:focus {border-color: var(--accent);}

.main-nav {
  display: flex;
  gap: 15px;
}
.main-nav a ,.cat-link{
  color: var(--muted);
  font-weight:500;
  transition: color var(--transition);
}
.main-nav a:hover ,.cat-link:hover{color: var(--accent);}

.menu-toggle {
  display:none;
  font-size:1.5rem;
  background:none;
  border:none;
  cursor:pointer;
}

/* ===========================
   Category Nav
=========================== */
/* دسکتاپ دسته‌ها همانطور که بود */
.category-nav {
  background: var(--card);
  margin-top: 5px;
  padding:5px 0;
}

.main-cats { display: flex; gap: 20px; list-style: none; }
.cat-item { position: relative; }
.sub-cats { 
  position: absolute; top: 100%; left: 0px; 
  display: none; 
  background: var(--card); 
  box-shadow: 0 4px 10px var(--shadow);
  border-radius: var(--radius); 
  padding: 10px 7px;
}
.cat-item:hover .sub-cats { display: block; }

/* ===========================
   موبایل فقط دسته‌ها
=========================== */
@media (max-width: 900px) {
   .header-top{
      flex-direction: column;
      align-items: flex-start;
    }
  .menu-toggle {
    display: block;      /* نمایش در موبایل */
    font-size: 1.8rem;   /* اندازه مناسب */
    background: none;
    border: none;
    cursor: pointer;
    margin-top: 10px;    /* فاصله از بالا */
  }
  .category-nav {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }
  .category-nav.show {
    max-height: 1000px;
  }

  .main-cats { flex-direction: column; gap: 0; }
  .cat-item { width: 100%; }
  .cat-link { display: block; padding: 10px; border-top: 1px solid #eee; }
  .sub-cats {
    position: relative;
    top: 0;
    left: 0;
    padding-left: 20px;
    display: none;
  }
  .sub-cats.show {
      display: block;
  }
}


/**********TITLE************/
.title_h2{
    width: 100%;
    display: flex;
    position: relative;
}

/* CATEGORIES */
.categories {margin:20px 0; display:flex; gap:15px; flex-wrap:wrap; overflow-x:auto; padding-bottom:5px;}
.categories::-webkit-scrollbar {display:none;}
.categories a {flex:0 0 auto; background: var(--accent); color:#fff; padding:8px 15px; border-radius: var(--radius); font-weight:500; transition: background var(--transition);}
.categories a:hover {background: var(--accent-2);}

/* SLIDER */
.slider {display:flex; overflow-x:auto; gap: var(--gap); padding-bottom: var(--gap); scroll-snap-type: x mandatory;}
.slider::-webkit-scrollbar {display:none;}
.slide {flex:0 0 260px; background: var(--card); border-radius: var(--radius); box-shadow:0 2px 10px var(--shadow); scroll-snap-align: start; overflow:hidden; transition: transform var(--transition);}
.slide:hover {transform: translateY(-5px);}
.slide img {width: 100%;
    height: 200px;
    object-fit: fill;}
.slide .content {padding:15px;}
.slide .content h3 {font-size:0.8rem; margin-bottom:8px; color:#111;}
.slide .content p {color: var(--muted); font-size:0.95rem; line-height:1.4;}
.slide .content .use {margin-top:10px; display:inline-block; color: var(--accent-2); font-weight:500; transition:color var(--transition);    font-size: 0.7rem;}
.slide .content .tim:hover {color: var(--accent);    font-size: 0.7rem;}

/* MAIN LAYOUT */
.main-grid {display:grid; grid-template-columns: 3fr 1fr; gap: var(--gap); margin-bottom:30px;}
.article-grid {display:grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap:var(--gap);}

.card {background: var(--card); border-radius: var(--radius); box-shadow:0 2px 10px var(--shadow); overflow:hidden; transition: transform var(--transition);}
.card:hover {transform: translateY(-5px);}
.card img {width:100%; display:block; height:180px; object-fit:cover;}
.card-content {padding:15px;}
.card-content h3 {font-size:1.1rem; color:#111; margin-bottom:6px;}
.card-content p {font-size:0.9rem; color: var(--muted); line-height:1.3;}
.card-content a {display:inline-block; margin-top:8px; color: var(--accent-2); font-weight:500; transition:color var(--transition);}
.card-content a:hover {color: var(--accent);}

/* SIDEBAR */
.sidebar {display:flex; flex-direction: column; gap: var(--gap);}
.widget {background: var(--card); padding: var(--gap); border-radius: var(--radius); box-shadow:0 2px 10px var(--shadow);}
.widget h4 {margin-bottom: 10px; color: var(--accent); font-size:1.1rem;}
.widget ul {list-style:none;}
.widget ul li {margin-bottom:8px;}
.widget ul li a {color: var(--muted); transition:color var(--transition);}
.widget ul li a:hover {color: var(--accent);}

/* TAGS */
.tags {display:flex; flex-wrap:wrap; gap:8px;}
.tags a {background: var(--accent-2); color:#fff; padding:5px 10px; border-radius: var(--radius); font-size:0.85rem; transition: background var(--transition);}
.tags a:hover {background: var(--accent);}

/* FOOTER */
footer {background: var(--card); padding: var(--gap); text-align:center; color: var(--muted); font-size:0.9rem; border-radius: var(--radius);}
footer a {color: var(--accent); margin:0 5px; transition:color var(--transition);}
footer a:hover {color: var(--accent-2);}




/* hero / cover single post*/
.hero{
  margin-top:22px;
  border-radius:var(--radius);
  overflow:hidden;
  background:linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.12));
  box-shadow:0 6px 20px var(--shadow);
}
.hero .cover{
  width:100%;
  height:360px;
  object-fit:cover;
  display:block;
}
.hero-inner{
  max-width:var(--max-content-width);
  margin: -110px auto 0; /* lift content over the cover */
  display:flex;
  gap:20px;
  align-items:flex-start;
  padding:18px;
}
.post-meta{
  background:var(--card);
  border-radius:12px;
  padding:18px;
  box-shadow:0 6px 18px rgba(15,23,42,0.06);
  width:100%;
}
.post-title{font-size:1.8rem;margin-bottom:8px;color:#111}
.post-sub{color:var(--muted);font-size:0.95rem;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.badge{background:var(--accent-2);color:#fff;padding:6px 10px;border-radius:999px;font-weight:600;font-size:0.85rem}
  

/* main layout */
.layout{
  display:grid;
  grid-template-columns: 1fr 340px;
  gap:var(--gap);
  margin-top:22px;
}

/* article */
.article{
  background:transparent;
  max-width:var(--max-content-width);
}
.content{
  background:var(--card);
  border-radius:var(--radius);
  padding:10px;
  color:#111;
  
}
.content p{color:var(--muted); margin-bottom:14px}
.content img{max-width:100%; border-radius:8px; object-fit: fill;}
.content h2{margin-top:18px;margin-bottom:12px;color:#111}

/* author box */
.author{
  display:flex;
  gap:12px;
  align-items:center;
  border-radius:10px;
  padding:12px;
  background:linear-gradient(90deg, rgba(10,160,106,0.06), rgba(6,167,125,0.03));
  margin-top:18px;
}
.author .avatar{
  width:56px;height:56px;border-radius:50%;overflow:hidden;flex:0 0 56px;box-shadow:0 6px 18px rgba(10,160,106,0.08)
}
.author .avatar img{width:100%;height:100%;object-fit:cover}
.author .info small{color:var(--muted);display:block}
.author .info strong{display:block;color:#0b6f47}

/* share & tags */
.meta-row{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:14px}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tags a{background:var(--accent);color:#fff;padding:6px 10px;border-radius:999px;font-size:0.85rem}

/* related posts */
.related{
  margin-top:22px;
}
.related h4{color:var(--accent);margin-bottom:12px}
.related .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.related .card{background:var(--card);border-radius:12px;padding:10px;display:flex;gap:10px;align-items:center;box-shadow:0 6px 18px var(--shadow)}
.related .card img{width:92px;height:64px;object-fit:cover;border-radius:8px}

/* sidebar */
.sidebar{display:flex;flex-direction:column;gap:18px}
.widget{background:var(--card);padding:14px;border-radius:12px;box-shadow:0 6px 18px var(--shadow)}
.widget h4{color:var(--accent);margin-bottom:10px}
.widget ul{list-style:none;padding:0;margin:0}
.widget li{padding:8px 0;border-bottom:1px solid #f1f2f4}
.widget li:last-child{border-bottom:none}
.widget a{color:#f1f2f4;text-decoration:none}
.widget a:hover{background:#f1f2f4;color:var(--accent);border:1px solid var(--accent);}

/* comments */
.comments {margin-top:20px}
.comment{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid #f1f2f4}
.comment .avatar{width:44px;height:44px;border-radius:50%;overflow:hidden}
.comment .meta{color:var(--muted);font-size:0.9rem}
.comment .body{margin-top:6px;color:#111}

/* comment form */
.comment-form textarea{width:100%;min-height:110px;padding:12px;border-radius:10px;border:1px solid #e6e7ea;resize:vertical}
.comment-form input, .comment-form button{padding:10px 12px;border-radius:8px;border:1px solid #e6e7ea}
.comment-form .row{display:flex;gap:10px;margin-top:10px}
.comment-form button{background:var(--accent);color:#fff;border:none;cursor:pointer}

/* footer */
.site-footer{margin-top:28px;background:var(--card);padding:18px;border-radius:12px;box-shadow:0 6px 22px var(--shadow);text-align:center;color:var(--muted)}

/* responsive */
@media (max-width:1000px){
  .layout{grid-template-columns:1fr 320px}
  .hero .cover{height:280px}
}
@media (max-width:820px){
  .hero-inner{flex-direction:column; margin-top:-80px}
  .layout{grid-template-columns:1fr}
  .related .grid{grid-template-columns:1fr}
  .hero .cover{height:220px}
}
@media (max-width:480px){
  .header{padding:12px}
  .logo{font-size:1.1rem}
  .post-title{font-size:1.4rem}
  .hero .cover{height:180px}
  .post-meta{padding:12px}
}
/* RESPONSIVE */
@media(max-width:1024px){.slide {flex:0 0 250px;}}
@media(max-width:768px){
    header {flex-direction:column; text-align:center; gap:10px;}
    header nav {flex-wrap:wrap; justify-content:center;}
    .categories {justify-content:flex-start; overflow-x:auto;}
    .categories a {flex:0 0 auto; margin-right:10px;}
    .main-grid {grid-template-columns:1fr;}
    .slide {flex:0 0 50%;}
}
@media(max-width:500px){
    .slide {flex:0 0 100%;}
    .slider{flex-direction: column;}
    .article-grid {grid-template-columns:1fr;}
    header .search {margin:10px 0; width:100%;}
}