/* /assets/css/site.css  (REPLACE FULL - YONIX CLEAN) */

@font-face{
  font-family:"VazirFD";
  src:url("/fonts/Vazir-FD.woff2") format("woff2"),
      url("/fonts/Vazir-FD.woff") format("woff"),
      url("/fonts/Vazir-FD.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* RESET */
*,
*::before,
*::after{box-sizing:border-box;min-width:0}
html,body{margin:0;padding:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
:root{color-scheme:light}

body{
  font-family:"VazirFD",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  direction:rtl;
  line-height:1.95;
  font-size:15px;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--text);
}

/* THEME */
:root{
  --bg:#fbfbfd;
  --bg2:#f4f6fb;
  --card:#ffffff;
  --line:rgba(15,23,42,.10);
  --text:#0b1220;
  --muted:#6b7280;

  --accent:#8b5cf6;        /* soft violet */
  --accent2:#a78bfa;
  --accent-ink:#4c1d95;

  --shadow:0 10px 30px rgba(2,6,23,.06);
  --r:18px;
  --r2:22px;
}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b1020;
  --bg2:#0f172a;
  --card:#0f172a;
  --line:rgba(148,163,184,.18);
  --text:#e5e7eb;
  --muted:#94a3b8;

  --accent:#a78bfa;
  --accent2:#c4b5fd;
  --accent-ink:#ede9fe;

  --shadow:0 14px 38px rgba(0,0,0,.35);
}

.container{max-width:1180px;margin:0 auto;padding:0 16px}

/* UTILS */
.muted{color:var(--muted)}
.dot{display:inline-block;width:5px;height:5px;border-radius:999px;background:currentColor;opacity:.35;vertical-align:middle}
.meta{color:var(--muted);font-size:12px}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:4px 10px;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(139,92,246,.08);
  color:var(--accent-ink);
  font-size:12px;
}
html[data-theme="dark"] .pill{background:rgba(167,139,250,.10)}
.pill-soft{background:transparent}

/* APP SHELL */
.app-shell{min-height:100vh;display:flex;flex-direction:column}
.main{flex:1;padding:16px 0 22px}

/* TOPBAR */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line);
}
html[data-theme="dark"] .topbar{background:rgba(15,23,42,.78)}

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-link{display:flex;align-items:center;gap:10px}
.brand-mark{
  width:12px;height:12px;border-radius:4px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 0 0 6px rgba(139,92,246,.10);
}
.brand-name{font-weight:900;letter-spacing:-.2px}
.brand-sep{opacity:.35}
.brand-date{color:var(--muted);font-size:12px;white-space:nowrap}

.topbar-actions{
  display:flex;align-items:center;gap:10px;flex-shrink:0;
}

/* SEARCH */
.search{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--line);
  background:rgba(15,23,42,.03);
  border-radius:999px;
  padding:6px 10px;
}
html[data-theme="dark"] .search{background:rgba(255,255,255,.06)}
.search input{
  border:0;outline:0;background:transparent;
  width:220px;max-width:46vw;
  color:var(--text);
  font-size:13px;
}
.search input::placeholder{color:rgba(107,114,128,.95)}
html[data-theme="dark"] .search input::placeholder{color:rgba(148,163,184,.85)}
.search button{
  border:0;background:transparent;cursor:pointer;
  color:var(--muted);
  padding:0 2px;
}

/* ICON BUTTON */
.icon-btn{
  width:38px;height:38px;border-radius:999px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease;
}
.icon-btn:hover{transform:translateY(-1px);background:rgba(139,92,246,.08)}
.icon-btn .icon{font-size:18px;line-height:1}

/* NAV */
.nav{
  border-top:1px solid var(--line);
  background:transparent;
}
.nav-inner{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 0;
  overflow-x:auto;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.nav-item{
  flex:0 0 auto;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:transparent;
  font-size:13px;
  color:var(--text);
  transition:background .15s ease, transform .15s ease;
}
.nav-item:hover{background:rgba(139,92,246,.08);transform:translateY(-1px)}
.nav-item.active{
  background:linear-gradient(135deg, rgba(139,92,246,.18), rgba(167,139,250,.12));
  border-color:rgba(139,92,246,.28);
}

/* MOBILE FIXES */
@media (max-width: 900px){
  .search{display:none !important;}          /* hide search on mobile */
  .brand-date{display:none !important;}
  .nav{display:none;}
  .nav.is-open{display:block;}
  .nav-inner{padding:10px 0}
}

/* TICKER */
.ticker{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--card);
  padding:8px 10px;
  box-shadow:var(--shadow);
  margin-bottom:14px;
}
.ticker-label{
  flex:0 0 auto;
  font-size:12px;
  color:var(--accent-ink);
  background:rgba(139,92,246,.10);
  border:1px solid rgba(139,92,246,.22);
  padding:4px 10px;
  border-radius:999px;
  font-weight:800;
}
.ticker-track{
  display:flex;
  gap:18px;
  overflow:auto;
  white-space:nowrap;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.ticker-item{
  font-size:13px;
  color:var(--text);
  opacity:.92;
}
.ticker-item:hover{color:var(--accent-ink)}

/* SECTION HEAD */
.section{margin-top:14px}
.section-head{display:flex;align-items:center;gap:12px;margin:10px 0 12px}
.section-title{margin:0;font-size:16px;font-weight:950}
.section-line{height:1px;flex:1;background:linear-gradient(90deg,var(--line),transparent)}

/* HOME LAYOUT */
.home-layout{width:100%}
.home-grid{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(0,.9fr);
  gap:16px;
}
@media (max-width: 980px){
  .home-grid{grid-template-columns:1fr}
}

/* HERO */
.hero{
  border:1px solid var(--line);
  border-radius:var(--r2);
  overflow:hidden;
  background:var(--card);
  box-shadow:var(--shadow);
  margin-bottom:14px;
}
.hero-media{display:block}
.hero-media img{width:100%;height:360px;object-fit:cover}
@media (max-width: 980px){
  .hero-media img{height:240px}
}
.hero-body{padding:14px 14px 16px}
.hero-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hero-title{margin:10px 0 8px;font-size:26px;line-height:1.55;font-weight:980}
.hero-title a:hover{color:var(--accent-ink)}
.hero-excerpt{margin:0;color:var(--muted);font-size:13px;line-height:2}

/* CARDS */
.cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
@media (max-width: 1100px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 720px){.cards{grid-template-columns:1fr}}

.cards-compact{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width: 980px){.cards-compact{grid-template-columns:1fr}}

.card{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--card);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(2,6,23,.10)}
.card-media img{width:100%;height:170px;object-fit:cover}
.card-body{padding:12px}
.card-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card-title{margin:10px 0 6px;font-size:14px;font-weight:950;line-height:1.75}
.card-title a:hover{color:var(--accent-ink)}
.card-excerpt{margin:0;color:var(--muted);font-size:12.5px;line-height:2}

/* SIDEBAR WRAPPER (keep existing sidebar blocks) */
.home-side{position:relative}

/* PAGINATION */
.pagination{
  display:flex;align-items:center;justify-content:center;
  gap:8px;flex-wrap:wrap;
  margin-top:14px;
}
.page-link{
  display:inline-flex;align-items:center;justify-content:center;
  height:38px;min-width:38px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--text);
  font-size:13px;
  font-weight:850;
  transition:transform .15s ease, background .15s ease;
}
.page-link:hover{transform:translateY(-1px);background:rgba(139,92,246,.08)}
.page-link.active{
  background:linear-gradient(135deg, rgba(139,92,246,.18), rgba(167,139,250,.12));
  border-color:rgba(139,92,246,.28);
  color:var(--accent-ink);
}
.page-ghost{opacity:.6;padding:0 6px}

/* CATEGORY */
.category-page{
  border:1px solid var(--line);
  border-radius:var(--r2);
  background:transparent;
}
.cat-head{
  padding:10px 0 8px;
}
.cat-title{margin:0 0 6px;font-size:22px;font-weight:980}
.cat-desc{margin:0;color:var(--muted);font-size:13px;line-height:2}

/* SINGLE (for your single.php classes) */
.single-layout{
  display:grid;
  grid-template-columns:minmax(0,1.75fr) minmax(0,.9fr);
  gap:16px;
}
@media (max-width: 980px){
  .single-layout{grid-template-columns:1fr}
}

.top3{
  border:1px solid var(--line);
  border-radius:var(--r2);
  background:var(--card);
  box-shadow:var(--shadow);
  padding:12px;
  margin-bottom:14px;
}
.top3-head{font-weight:950;margin-bottom:10px}
.top3-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
@media (max-width: 980px){.top3-grid{grid-template-columns:1fr}}
.top3-card{
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px;
  background:transparent;
  transition:background .15s ease, transform .15s ease;
}
.top3-card:hover{background:rgba(139,92,246,.08);transform:translateY(-1px)}
.top3-title{font-weight:900;font-size:13px;line-height:1.9}
.top3-meta{margin-top:6px;font-size:12px;color:var(--muted)}
.sep{opacity:.5;padding:0 6px}

.article{
  border:1px solid var(--line);
  border-radius:var(--r2);
  background:var(--card);
  box-shadow:var(--shadow);
  padding:14px;
}
.article-kicker{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.article-title{margin:8px 0 12px;font-size:28px;font-weight:990;line-height:1.55}
@media (max-width: 720px){.article-title{font-size:22px}}

.article-cover{
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--bg2);
}
.article-cover img{width:100%;height:auto;display:block}

.keybox{
  margin:12px 0;
  border:1px solid rgba(139,92,246,.22);
  background:rgba(139,92,246,.07);
  border-radius:16px;
  padding:12px;
}
.keybox-title{font-weight:950;margin-bottom:6px;color:var(--accent-ink)}
.keybox-text{color:var(--text);font-size:13px;line-height:2}

.sharebar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:12px 0;
  padding:10px;
  border:1px solid var(--line);
  border-radius:16px;
  background:transparent;
}
.share-btn,
.share-link{
  display:inline-flex;align-items:center;justify-content:center;
  height:36px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--card);
  cursor:pointer;
  font-size:13px;
  transition:background .15s ease, transform .15s ease;
}
.share-btn:hover,.share-link:hover{background:rgba(139,92,246,.08);transform:translateY(-1px)}

.article-body{
  margin-top:6px;
  font-size:15px;
  line-height:2.1;
  color:var(--text);
}
.article-body a{color:var(--accent-ink);text-decoration:underline}
.article-body img{
  max-width:100%;
  height:auto;
  border-radius:14px;
  display:block;
  margin:12px auto;
  border:1px solid var(--line);
}
.article-body blockquote{
  margin:12px 0;
  padding:12px 14px;
  border-right:3px solid var(--accent);
  background:rgba(139,92,246,.06);
  border-radius:14px;
  color:var(--text);
}

.tags{margin-top:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tags-label{color:var(--muted);font-size:12px}
.tag{
  display:inline-flex;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:transparent;
  font-size:12px;
}

.related{margin-top:16px}
.related-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
@media (max-width: 720px){.related-grid{grid-template-columns:1fr}}
.related-card{
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px;
  background:transparent;
  transition:background .15s ease, transform .15s ease;
}
.related-card:hover{background:rgba(139,92,246,.08);transform:translateY(-1px)}
.related-title{font-weight:900;font-size:13px;line-height:1.9}
.related-meta{margin-top:6px;font-size:12px;color:var(--muted)}

/* FOOTER */
.footer{
  margin-top:18px;
  border-top:1px solid var(--line);
  background:var(--bg2);
}
.footer-inner{padding:18px 0 12px}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:14px;
}
@media (max-width: 980px){.footer-grid{grid-template-columns:1fr}}

.footer-col{
  border:1px solid var(--line);
  border-radius:var(--r2);
  background:var(--card);
  box-shadow:var(--shadow);
  padding:14px;
}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.footer-title{font-weight:950}
.footer-head{font-weight:950;margin-bottom:10px}
.footer-text{margin:0;color:var(--muted);font-size:13px;line-height:2}
.footer-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.footer-links a{color:var(--text)}
.footer-links a:hover{color:var(--accent-ink);text-decoration:underline}

.newsletter{display:flex;gap:8px;margin-top:10px}
.newsletter input{
  flex:1;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 10px;
  outline:0;
  background:transparent;
  color:var(--text);
}
.newsletter button{
  border:1px solid rgba(139,92,246,.30);
  background:rgba(139,92,246,.12);
  color:var(--accent-ink);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:900;
}
.newsletter button:hover{background:rgba(139,92,246,.18)}

.footer-bottom{
  margin-top:14px;
  padding-top:10px;
  border-top:1px solid var(--line);
  text-align:center;
  color:var(--muted);
  font-size:12px;
}