.blog-detail-hero{

padding:180px 0 100px 0;

background:white;

}



.blog-detail-meta{

display:flex;

gap:20px;

margin-bottom:35px;

font-size:14px;

font-weight:600;

letter-spacing:1px;

text-transform:uppercase;

color:#22d3cc;

}



.blog-detail-hero h1{

font-size:72px;

line-height:1.05;

max-width:1100px;

margin-bottom:35px;

color:#050816;

}



.blog-detail-excerpt{

font-size:24px;

line-height:1.8;

max-width:900px;

color:#666;

margin-bottom:70px;

}



.blog-detail-image{

border-radius:40px;

overflow:hidden;

}



.blog-detail-image img{

width:100%;

display:block;

}


.blog-detail-layout{

display:grid;

grid-template-columns:
4fr 1.3fr;

gap:80px;

align-items:start;

overflow:visible;

}


.blog-detail-content{

min-width:0;

}

.blog-detail-page{

padding:220px 0 120px 0;

background:white;

}

.blog-detail-content p{

font-size:22px;

line-height:2;

color:#444;

margin-bottom:40px;

}



.blog-detail-content h2{

font-size:42px;

line-height:1.2;

margin-top:80px;

margin-bottom:30px;

color:#050816;

}



.blog-detail-content img{

width:100%;

border-radius:30px;

margin:60px 0;

}









.blog-sidebar{

position:relative;

}



.blog-sidebar-sticky{

position:sticky;

top:140px;

}










.sidebar-title{

font-size:15px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

margin-bottom:30px;

color:#22d3cc;

}










.sidebar-posts{

display:flex;

flex-direction:column;

gap:18px;

}










.sidebar-post{

display:flex;

gap:16px;

text-decoration:none;

padding:14px;

border-radius:22px;

transition:.3s;

background:white;

border:1px solid rgba(15,23,42,0.06);

}










.sidebar-post:hover{

transform:translateY(-4px);

box-shadow:
0 15px 40px rgba(0,0,0,0.06);

}










.sidebar-thumbnail{

width:95px;

height:95px;

border-radius:18px;

overflow:hidden;

flex-shrink:0;

}










.sidebar-thumbnail img{

width:100%;

height:100%;

object-fit:cover;

display:block;

}










.sidebar-post-content{

display:flex;

flex-direction:column;

justify-content:center;

}










.sidebar-date{

font-size:12px;

font-weight:600;

letter-spacing:1px;

text-transform:uppercase;

margin-bottom:10px;

color:#22d3cc;

}










.sidebar-post-content h4{

font-size:17px;

line-height:1.4;

color:#050816;

font-weight:600;

}










@media(max-width:1100px){

.blog-detail-layout{

grid-template-columns:1fr;

gap:80px;

}



.blog-sidebar-sticky{

position:relative;

top:auto;

}

}

.blog-detail-main-section{

padding:100px 0 140px 0;

background:white;

}


.related-section{

padding:120px 0;

background:#f8fafc;

}



.related-grid{

display:grid;

grid-template-columns:
repeat(2,1fr);

gap:35px;

margin-top:60px;

}



.related-card{

display:block;

background:white;

border-radius:30px;

overflow:hidden;

text-decoration:none;

transition:.3s;

}



.related-card:hover{

transform:translateY(-8px);

box-shadow:
0 25px 60px rgba(0,0,0,0.08);

}



.related-thumbnail{

height:240px;

overflow:hidden;

}



.related-thumbnail img{

width:100%;

height:100%;

object-fit:cover;

}



.related-content{

padding:30px;

}



.related-meta{

font-size:13px;

font-weight:600;

letter-spacing:1px;

margin-bottom:15px;

text-transform:uppercase;

color:#22d3cc;

}



.related-content h3{

font-size:30px;

line-height:1.2;

color:#050816;

}









@media(max-width:900px){

.blog-detail-hero h1{

font-size:48px;

}



.blog-detail-excerpt{

font-size:18px;

}



.blog-detail-content p{

font-size:18px;

}



.related-grid{

grid-template-columns:1fr;

}

}