:root{
    --bg:#f6f7fb;
    --card:#ffffff;
    --txt:#121826;
    --muted:#5b6475;
    --brand:#2f6fec;
    --border:#e7eaf2;
    --shadow:0 12px 30px rgba(17,24,39,.08);
    --radius:16px;
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"IRANSans",Arial;background:var(--bg);color:var(--txt)}
.container{max-width:1200px;margin:auto;padding:20px 18px}

.crumb{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:13px;margin:10px 0 14px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--brand)}

.post-hero{
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:18px;
    display:grid;
    grid-template-columns: 1.3fr .7fr;
    gap:18px;
    align-items:center;
}
@media(max-width: 920px){ .post-hero{grid-template-columns:1fr} }

.post-hero h1{margin:0 0 10px;font-size:26px;line-height:1.7}
.post-hero__meta{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.post-hero__img img{width:100%;height:210px;object-fit:cover;border-radius:14px;border:1px solid var(--border)}

.layout{margin-top:18px;display:grid;grid-template-columns: 1fr 340px;gap:18px;align-items:start}
@media(max-width: 980px){ .layout{grid-template-columns:1fr} }

.post{
    background:#fff;border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:18px;
}

.toc{
    border:1px solid var(--border);
    background:linear-gradient(180deg,#fff,rgba(255,255,255,.7));
    border-radius:14px;
    padding:12px;
    margin-bottom:16px;
}
.toc__title{font-weight:900;margin-bottom:10px}
.toc__list{margin:0;padding:0 18px;line-height:2}
.toc__item a{text-decoration:none;color:var(--muted)}
.toc__item a:hover{color:var(--brand)}
.toc__item.lvl-3{margin-right:14px; list-style:circle}

.post__content{
    font-size:16px;
    line-height:2.05;
    color:#222;
}
.post__content h2{margin-top:34px;font-size:20px}
.post__content h3{margin-top:26px;font-size:17px}
.post__content ul{padding-right:22px}
.post__content img{max-width:100%;height:auto;border-radius:12px}

.side__card{
    background:#fff;border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:16px;
    margin-bottom:14px;
}
.side__title{font-weight:900;margin-bottom:10px}
.btn{
    display:inline-block;
    padding:10px 14px;
    border-radius:12px;
    background:var(--brand);
    color:#fff;
    text-decoration:none;
    font-weight:800;
    border:1px solid var(--brand);
}
.btn--ghost{background:#fff;color:var(--brand)}
.rel{display:flex;flex-direction:column;gap:10px}
.rel__item{display:flex;gap:10px;text-decoration:none;color:inherit}
.rel__item img{width:64px;height:64px;object-fit:cover;border-radius:12px;border:1px solid var(--border)}
.rel__t{font-weight:900;font-size:13px;line-height:1.6}
.rel__d{color:var(--muted);font-size:12px;line-height:1.6}

.cta{margin-top:18px}
.cta__box{
    border:1px dashed var(--border);
    border-radius:14px;
    padding:14px;
    background:rgba(47,111,236,.06);
}
.cta__box h2{margin:0 0 8px;font-size:18px}
.cta__box p{margin:0 0 12px;color:var(--muted)}