:root{
--bg-1:#020617;
--bg-2:#071027;
--primary:#60a5fa;
--accent:#22d3ee;
--muted:#94a3b8;
--card:#0b1533;
--card-2:#0c1b3d;
--border:rgba(148,163,184,.15);
--success:#22c55e;
--warning:#f59e0b;
}
*{font-family:"Vazirmatn", sans-serif;}
body{
background: radial-gradient(1200px 800px at 10% -10%, #0b1b3f 0%, var(--bg-1) 45%),
            radial-gradient(1200px 800px at 110% 10%, #0a1640 0%, var(--bg-2) 50%),
            var(--bg-1);
color:#e2e8f0;
}
.glass{
background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
border:1px solid var(--border);
backdrop-filter: blur(12px);
box-shadow: 0 20px 60px rgba(2,6,23,.55);
}
.hero{
position: relative;
overflow: hidden;
border-radius: 1.5rem;
padding: 3rem 3rem;
background: linear-gradient(120deg, rgba(96,165,250,.12), rgba(34,211,238,.08));
}
.hero::after{
content:"";
position:absolute;
inset:-40% -20%;
background: radial-gradient(600px 300px at 10% 10%, rgba(96,165,250,.35), transparent 60%);
pointer-events:none;
}
.title-gradient{
background: linear-gradient(90deg, #e2e8f0, #60a5fa, #22d3ee);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.meta-pill{
padding:.35rem .75rem;
border-radius:999px;
border:1px solid var(--border);
color:var(--muted);
font-size:.85rem;
background: rgba(2,6,23,.35);
}
.tag{
padding:.35rem .8rem;
border-radius:999px;
border:1px dashed rgba(96,165,250,.35);
color:#a5b4fc;
background: rgba(96,165,250,.08);
transition:.2s ease;
text-decoration:none;
display:inline-block;
margin:.2rem .3rem;
}
.tag:hover{
transform: translateY(-2px);
color:white;
background: rgba(34,211,238,.15);
border-color: rgba(34,211,238,.45);
}
.content-card{
border-radius: 1.25rem;
padding: 2rem;
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
border:1px solid var(--border);
}
.article img{
width:100%;
border-radius:1rem;
margin:1.5rem 0;
border:1px solid var(--border);
box-shadow:0 20px 50px rgba(2,6,23,.4);
}
.blockquote{
border-right:4px solid var(--accent);
background: rgba(34,211,238,.08);
padding:1rem 1.25rem;
border-radius: .75rem;
color:#cbd5e1;
}
.toc{
position:sticky;
top:1.5rem;
padding:1.5rem;
border-radius:1rem;
}
.toc a{
color:#cbd5e1;
text-decoration:none;
display:block;
padding:.35rem .5rem;
border-radius:.5rem;
}
.toc a:hover{background: rgba(96,165,250,.1);}
.author-box{
border-radius:1rem;
padding:1.5rem;
display:flex;
gap:1rem;
align-items:center;
}
.avatar{
width:64px;
height:64px;
border-radius:50%;
background: linear-gradient(135deg, #60a5fa, #22d3ee);
display:flex;
align-items:center;
justify-content:center;
color:white;
font-weight:700;
}
.comment-box{
border-radius:1rem;
padding:1.5rem;
background: rgba(15,23,42,.55);
border:1px solid var(--border);
}
.comment{
border:1px solid var(--border);
border-radius:1rem;
padding:1rem 1.25rem;
background: rgba(2,6,23,.35);
}
.btn-primary-custom{
background: linear-gradient(90deg, #60a5fa, #22d3ee);
border:none;
color:#0b1220;
font-weight:700;
padding:.75rem 1.5rem;
border-radius:.9rem;
box-shadow:0 10px 30px rgba(34,211,238,.2);
}
.btn-primary-custom:hover{filter:brightness(1.05);}
.product-card, .related-card{
border-radius:1rem;
padding:1rem;
border:1px solid var(--border);
background: rgba(11,21,51,.6);
transition:.2s ease;
}
.product-card:hover, .related-card:hover{
transform:translateY(-4px);
border-color: rgba(96,165,250,.4);
}
.rating i{color:var(--warning);}
.form-control, .form-select{
background: rgba(2,6,23,.6);
border:1px solid var(--border);
color:#e2e8f0;
border-radius:.75rem;
}
.form-control:focus{
border-color: rgba(96,165,250,.6);
box-shadow:0 0 0 .2rem rgba(96,165,250,.15);
background: rgba(2,6,23,.7);
color: #e2e8f0;
}
.form-control::placeholder{
    color: #efefef71;
    text-align: right;
}
.notify{
display:none;
border-radius:.75rem;
padding:.75rem 1rem;
margin-top:1rem;
background: rgba(34,197,94,.15);
border:1px solid rgba(34,197,94,.35);
color:#bbf7d0;
}
.section-title{
font-weight:700;
font-size:1.2rem;
margin-bottom:1rem;
display:flex;
align-items:center;
gap:.6rem;
}
.section-title span{
width:10px; height:10px; border-radius:50%;
background: linear-gradient(120deg,#60a5fa,#22d3ee);
box-shadow:0 0 15px rgba(34,211,238,.6);
}
.breadcrumb a{color:#94a3b8; text-decoration:none;}
.breadcrumb .active{color:#e2e8f0;}
.admin-reply{
    margin-top: 10px;
    background: cyan;
    color: black;
    padding: 10px;
    border-radius: 7px;
    text-align: center;
}
.user-comment{
        padding: 10px;
    border: 1px solid #1f2745;
    border-radius: 10px;
    margin-top: 11px;
}
.auth-msg{
    text-align: center;
    background: #ff3333;
    padding: 14px;
    border-radius: 5px;
}
.content-card{
    overflow: hidden;
}
.content-card img{
    width: 100% !important;
    height: 100% !important;
}

/* ── Blog Detail Page Layout ── */
.blog-detail-page { padding: 140px 0 80px; min-height: 100vh; overflow-x: clip; }
.blog-detail-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.blog-breadcrumb { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--muted); margin-bottom: 1rem; flex-wrap: wrap; }
.blog-breadcrumb a { color: var(--muted); text-decoration: none; transition: .2s; }
.blog-breadcrumb a:hover { color: #e2e8f0; }
.blog-breadcrumb span:not([aria-current]) { opacity: .4; }
.hero { padding: 2.5rem; border-radius: 1.5rem; margin-bottom: 2rem; }
.blog-detail-desc { color: var(--muted); margin: .6rem 0 1rem; }
.blog-detail-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.blog-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 2rem; align-items: start; }
.blog-tags-row { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.comment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; flex-wrap: wrap; gap: .4rem; }
.comment-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.blog-textarea { resize: vertical; }
.related-link, .product-link { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: #cbd5e1; }
.related-link img, .product-link img { width: 60px; height: 60px; border-radius: .6rem; object-fit: cover; flex-shrink: 0; }
.related-link h6, .product-link h6 { margin: 0 0 3px; font-size: .9rem; }
@media (max-width: 900px) {
    .blog-detail-layout { grid-template-columns: minmax(0, 1fr); }
    .blog-detail-sidebar { display: none; }
}
@media (max-width: 640px) {
    .blog-detail-page { padding-top: 100px; }
    .blog-detail-container { padding: 0 14px; }
    .hero { padding: 1.5rem; }
    .comment-form-grid { grid-template-columns: minmax(0, 1fr); }
}