@font-face {     
    font-family: 'yekan';     
    src: url('//cdn.bayan.ir/blog/templates/shared/fonts/BYekan.woff?download') format('woff');     
    font-weight: normal;     
    font-style: normal; 
} 

/*---body---*/ 
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* جلوگیری از اسکرول افقی */
}

/* روش جایگزین برای `background-attachment: fixed;` */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('https://bayanbox.ir/view/3126400402866017994/2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1; /* قرار گرفتن پس‌زمینه در پشت محتوا */
}


body a {  
    text-decoration: none;  
}  

ul {  
    list-style: none;  
    margin: 0;  
    padding: 0;  
}  

.clear {  
    clear: both;  
}  

#wrp {  
    width: 880px;  
    margin: auto;  
}  

/*---header---*/
#header {  
    
    padding: 10px;  
    text-align: center;  
}  

#header a {  
    color: #000;  
}  

#header h1 {
    font-family: 'Great Vibes', cursive;
    font-size: 24px;
    font-weight: normal;
}

#header h2 {  
    font-weight: normal;  
    font-family: yekan,tahoma;  
    font-size: 12px;  
    margin: 0;  
}  

.header-image {
    margin-top: 300px;    /* فاصله از بالای باکس پست */
    margin-bottom: 100px; /* فاصله پایین */
    text-align: center;
}

.header-image {
    width: 100%;
    max-width: 1500px;  /* حداکثر عرض هدر */
    height: 150px;       /* ارتفاع ثابت */
    margin: 13px auto;
    border-radius: 8px; /* اختیاری */
    box-shadow: 0 0 15px rgba(0,0,0,0.3); /* سایه یکسان از همه طرف */
    overflow: hidden;   /* بخش اضافی تصویر را مخفی می‌کند */
    position: relative;
    margin-bottom: 30px; /* فاصله بین هدر و پست‌ها */
}

.header-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;    /* تصویر هدر را پر می‌کند و نسبت حفظ می‌شود */
    object-position: center; /* مرکز تصویر نمایش داده شود */
    display: block;
}

/*---block-post---*/ 
#block-post {
    width: 580px;

    float: right;
    background: transparent;  /* حذف پس‌زمینه طولانی */
    box-shadow: none; /* یا اگر میخوای سایه داشته باشه میتونی بذاری */
    margin-top: 36px;
    padding: 0; /* یا کم کن برای هماهنگی با پست‌ها */
}

.post {
    margin-bottom: 20px;
    background: #fff; /* فقط پست‌ها پس‌زمینه نیمه شفاف دارند */
    box-shadow: 0 0 15px rgba(0,0,0,0.2); /* سایه یکسان از همه طرف */
    border-radius: 6px; /* گوشه‌ها گرد */
    overflow: hidden
}

.post {
    margin-bottom: 20px;
     /* سفید با شفافیت 85% */
    box-shadow: 0 0 15px rgba(0,0,0,0.2); /* سایه یکسان از همه طرف */
    border-radius: 6px; /* گوشه‌ها کمی گرد */
    overflow: hidden;   /* جلوگیری از بیرون زدگی محتوا */
}
.post::before {
    content: "";
    position: absolute;
    top: 25px;         /* فاصله از بالا */
    left: 10px;        /* فاصله از چپ */
    width: 50px;       /* عرض تصویر */
    height: 50px;      /* ارتفاع تصویر */
    background-image: url('https://bayanbox.ir/view/8672672222615219035/1755509717175.png');
    background-size: cover;
    background-position: center;
}
/*---block-message---*/ 
.align {  
    margin-bottom: 10px;  
}  

.messages {  
    background: #fff;  
    box-shadow: 0px 0px 4px 2px #ededed;  
    padding: 1px 10px;  
    text-align: center;  
}  

.messages h2 {  
    font-family: yekan,tahoma;  
    font-weight: normal;  
    font-size: 16px;  
}  

/*---post---*/ 
.post {  
    margin-bottom: 40px;  
	font-size: 13px;
	
    border-radius: 20px;               /* گوشه‌های پست گرد */
    overflow: hidden;                  /* اگر داخلش المان‌هایی بزرگ‌تر هست، لبه‌ها رو رعایت کنه */
    border: 0px solid silver;          /* خط نقره‌ای دور پست */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* سایه بیرونی ملایم */
}  

.post img, .post audio, .post video {  
    max-width: 100%;  
    height: inherit;  
}  

.post-title {
    background: #1234568A;               /* هم‌رنگ با عنوان‌های سایدبار */
    padding: 0px 15px;              /* فاصله داخلی بیشتر از چپ و راست */
    margin: 10px 10px 15px 10px;     /* فاصله از سقف پست و کنارها */
    border-radius: 0px;             /* گوشه‌ها گرد */
    box-shadow: none;                /* بدون سایه */
}

.post-title h2 {
    margin: 0px;
    font-size: 12px;
    font-family: yekan, Arial;
    font-weight: normal;
}

.post-title a {
    color: #f8fbfc;            /* رنگ متن بدون تغییر */
    text-decoration: none;
}

.post-title a:hover {
    color: inherit;            /* هنگام هاور هم رنگ تغییر نکند */
}

.post-title h2{
font-size: 17px;
font-family: yekan,tahoma;
font-weight: normal;
margin: 0;
padding: 0;
}
.post-content {
    background-color: #FBFAF9;           
    padding: 15px;                        
    border-radius: 10px;                  
    border: 1px solid silver;             
    box-shadow: inset 0 0 15px rgba(0,0,0,0.2);
    
    margin: 10px 20px; /* فاصله از بالا/پایین 10px، از چپ/راست 20px */
}

.read-more {  
    text-align: center;  
    margin-bottom: 10px;  
}  

/*---post-detail---*/ 
.post-detail {  
    
    padding: 6px 6px;  
}  

.post-detail li { 
	
    display: inline-block;  
    padding: 0px;  
}  

.post-detail li:after {  
    content: "|";  
    color: #e5e5e5;  
}  

.post-detail li:last-child:after {  
    content: "";  
}  

.post-detail-right {  
    float: right;  
	    margin-right: 20px; /* بجای 10% حالا 10 پیکسل */
}  

.post-detail-right span {  
    padding: 0px 2px;  
    color: #999999;  
}  

.post-detail-left span {  
    color: #999999;  
}  

.post-detail-left {  
    float: left;  
}  

.post-detail-left a {  
    color: #123456B8;  
}  

.rate-box:hover .fa-heart-o:before, .rate-box.rated .fa-heart-o:before {  
    content:"\f004";  
    transition-duration: .5s;  
}  

.post-tags a {  
    color: #000;  
}  

.post-tags a:hover {  
    color: #f29340;  
}  

.post-tags-title {  
    background: #e4e9f1;  
    padding: 6px 10px;  
    margin-bottom: 4px;  
    border-radius: 2px;  
    color: #7d7d7d;  
}  

/*----comment-----*/ 
.comment-count-box {  
    text-align: center;  
    margin-top: 10px;  
    padding: 8px 0px;  
    background: #fff;  
    border: 1px solid #e5e5e5;  
    font-family: yekan;  
}  

.comment-count-box a {  
    color: #000;  
    font-size: 20px;  
}  

.cm-body {  
    background: #fff;  
    border: 1px solid #e5e5e5;  
    margin-right: 56px;  
    padding-bottom: 1px;  
}  

.cm-main {  
    margin-top: 10px;  
}  

.cm-avatar {  
    float: right;  
}  

.cm-av {  
    width: 50px;  
    border-radius: 50%;  
}  

.comment-details {  
    padding: 6px;  
    background: rgba(66, 68, 90, 0.44);  
    overflow: hidden;  
    border-top-right-radius: 2px;  
    border-top-left-radius: 2px;  
}  

.cm-name {  
    margin-right: 5px;  
    float: right;  
    color: #fff;  
}  

.cm-name a {  
    color: #a3a3a3;  
}  

.cm-name a:hover {  
    color: #858585;  
}  

.comment-matn {  
    padding: 10px;  
    line-height: 1.7;  
    overflow: hidden;  
    color: #000;  
}  

.comment-link {  
    width: 25px;  
    height: 25px;  
}  

.cm-reply-main {  
    overflow: hidden;  
    padding: 0px 10px 10px 10px;  
}  

.comment-reply, .comment-reply-page {  
    padding: 8px;  
    border: 1px solid #e5e5e5;  
    background: #fafafa;  
    line-height: 1.7em;  
    color: #000;  
    border-radius: 6px;  
}  

.reply-av {  
    width: 35px;  
    float: right;  
    border-radius: 50%;  
}  

.comment-add-form {  
    margin-top: 15px;  
    margin-bottom: 15px;  
    padding: 10px;  
    background: #fff;  
    color: #000;  
    border: 1px solid #e5e5e5;  
}  

.bComForm .sendbutton.hasCheckbox:hover {  
    background: #e0e0e0;  
    transition-duration: .3s;  
}  

input[type=button], input[type=text], input[type=password], input[type=submit], button, textarea, select, .inputBox, input.text, a.btn, a.btn:hover, a.btn:visited {  
    background-color: #f7f7f7;  
    border: 1px solid #e5e5e5;  
    color: #454545;  
    border-radius: 0px;  
}  

.htmlbox {  
    border: 1px solid #dedede !important;  
    background: #fff;  
}  

.bComForm .sendbutton.hasCheckbox {  
    background: #fafafa;  
    border: 1px solid #e5e5e5;  
    cursor: pointer;  
    margin-top: 0;  
    width: 100px;  
    border-radius: 2px;  
    color: #000;  
}  

.bComForm .sendbutton.hasCheckbox:hover {  
    background: #f7f7f7;  
    transition-duration: .3s;  
}  

/*--cm-detail-top--*/ 
.post-detail-top {  
    padding: 2px 0px;  
    background: #fafafa;  
    border-bottom: 1px solid #ebebeb;  
    color: #707070;  
    cursor: default;  
    font-size: 12px;  
}  

.post-detail-top a {  
    color: #787878;  
    cursor: default;  
}  

.post-detail-top ul {  
    list-style: none;  
    padding: 0;  
    margin: 0;  
}  

.post-detail-top li {  
    border-left: 1px solid #e0e0e0;  
    display: inline-block;  
    padding: 0px 5px;  
}  

.post-detail-top li:last-child {  
    border-left: 0px;  
}  

/*---pagingation---*/ 
.pagingation {  
    background: #fff;  
    border: 1px solid #e5e5e5;  
    text-align: center;  
    padding: 4px 6px;  
}  

.pagesList {  
    display: inline-block;  
}  

.pagingation li {  
    display: inline-block;  
}  

.pagingation li:after {  
    content: "|";  
    color: #e5e5e5;  
}  

.pagingation li:last-child:after {  
    content: "";  
}  

.pagingation a {  
    padding: 0px 4px;  
    color: #f29340;  
}  

/*---block-left---*/ 
/* سایدبار شفاف */
#block-left {
	
    width: 1190px;
    width: 220px;
    float: left;
    line-height: 1.6em;
    color: #666;
    background: transparent;  /* حذف پس‌زمینه طولانی */
    box-shadow: none;         /* اگر میخوای سایه کل سایدبار حذف بشه */
    padding: 0px;               /* میتونی مقدار padding رو کم یا زیاد کنی */
    margin-left: 5px;
	margin-top: 265px;
}

/* همه باکس‌های داخلی سایدبار پس‌زمینه سفید */
#block-left .left-box {
    background: #fff;         /* پس‌زمینه سفید هر باکس */
    margin-bottom: 10px;
    cursor: default;
    padding: 10px;
    border-radius: 6px;       /* کمی گرد بودن گوشه‌ها */
    box-shadow: 0 0 15px rgba(0,0,0,0.15); /* اختیاری: سایه کوچک */
}

#block-left .left-detail {  
    margin: 4px 0px;  
    border: 1px solid #e5e5e5;  
}  

#block-left .left-title {  
    background: #8DCFF1;  
    padding: 4px 6px;  
    font-family: yekan,tahoma;  
    color: #454a5f;  
	font-size: 15px;
}  

#block-left a {  
    color: #000;  
	font-size: 13px;
}  

#block-left a:hover {  
    color: #40d8f2;  
}  

#block-left .left-detail li {
    border-bottom: 1px solid #e5e5e5;
    padding: 4px 6px;
}

#block-left .left-detail li:last-child {  
    border-bottom: 0px;  
}  

.left-detail li:hover {  
    background: #fafafa;  
}  

.left-detail a {  
    display: block;  
}  

/*---about-me---*/ 
.about-me {  
    padding: 0px 10px 10px 10px;  
    border: 1px solid #e5e5e5;  
}  

.blog-image {  
    text-align: center;  
}  

.about-me img {
    width: 197px;          /* سایز تصویر */
    height: auto;          /* ارتفاع متناسب با عرض */
    margin-top: 10px;
    border-radius: 5px;   /* گوشه‌های گرد */
    box-shadow: 0 0 10px rgba(0,0,0,0.3); /* سایه یکسان از همه طرف */
}

.blog-description {  
    padding-top: 10px;  
}  

/*---follow-box---*/ 
.followBx {  
    margin-top: 10px;  
    background: #ffffff;  
    border-radius: 0px;  
    border-top: 1px solid #fdfcfc;  
}  

.followThis.followed {  
    background: #8DCFF1;  
}  

.followThis {  
    background: #8DCFF1;  
    border-radius: 0px;  
    font-family: yekan,tahoma;  
    font-size: 14px;  
    
}  

#followInBx #followersLs .followImg {  
    border-radius: 50%;  
}  

/*---stat---*/ 
.left-stat {  
    border: 1px solid #e5e5e5;  
    margin: 4px 0px;  
}  

.left-stat li {  
    padding: 4px 6px;  
    border-bottom: 1px solid #e5e5e5;  
}  

.left-stat li:last-child {  
    border-bottom: 0px;  
}  

.stat-value {  
    float: left;  
}  

/*---category---*/ 
.left-category {  
    border: 1px solid #e5e5e5;  
    margin: 4px 0px;  
}  

.left-category li {  
    padding: 4px 6px;  
}  

.count {  
    color: #bdbdbd;  
}  

.left-category li a {  
    padding-right: 12px;  
    background-image: url(//bayanbox.ir/view/8661660237688751606/category-right.png);  
    background-repeat: no-repeat;  
    background-position: right center;  
    display: inline-block;  
}  

.left-category .category-child a {  
    padding-right: 12px;  
    background-image: url(//bayanbox.ir/view/4955324527815090542/category-child-right.png);  
    background-repeat: no-repeat;  
    background-position: right center;  
    display: inline-block;  
}  

/*---recent-comments---*/ 
.recent-cm-main {  
    overflow: hidden;  
}  

.recent-cm-main img {  
    width: 30px;  
    float: right;  
    border-radius: 50%;  
    margin-top: 3px;  
}  

.recent-cm-detail {  
    margin-right: 35px;  
}  

.recent-cm-name {  
    color: #f29340;  
}  

.recent-cm-matn {  
    color: #000;  
}  

/*---recent-post---*/ 
.left-detail a:hover {  
    color: #666;  
}  

/*---tags---*/ 
.left-tag {  
    padding: 4px 0px;  
}  

.tags a {  
    border: 1px solid #e5e5e5;  
    padding: 4px 6px;  
    margin: 2px 0px;  
    display: inline-block;  
}  

/*---footer---*/ 
.footer {  
    padding: 6px 6px;  
    margin: 10px 0px;  
    background: #fff;  
    box-shadow: 0px 0px 4px 2px #ededed;  
}  

.footer a {  
    color: #f29340;  
}  

footer a:hover {  
    color: #e87e21;  
}  

.erfan {  
    float: left;  
}  

.bayan {  
    float: right;  
}


/* کانتینر پست */
.post, 
#block-post {
  overflow: visible !important; 
  position: relative;
}

/* عنوان پست */
.post-title {
  position: relative;
  display: inline-block;
  padding-right: 120px; /* بیشتر از قبل برای عبور کامل بک‌گراند */
  background: #8b949c; /* رنگ نمونه */
  z-index: 1;
  margin-top: 30px; 
  padding-left: 13px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 5px;
}

/* پروفایل کنار عنوان */
.post-title::after {
  content: "";
  position: absolute;
  right: 10px; /* کمی داخل‌تر نسبت به قبل */
  top: 50%; 
  transform: translateY(-50%);
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: url("https://bayanbox.ir/view/9087020762946254504/Ssss.jpg") no-repeat center/cover;
  border: 4px solid #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

/* متن پست کمی پایین‌تر */
.post-content {
  margin-top: 0px; 
}