body{
margin:0;
background:#0f0f0f;
font-family:Arial;
color:#fff;
line-height:1.8;
}

.container{
max-width:1100px;
margin:auto;
padding:20px;
}

.hero{
background:linear-gradient(135deg,#f7d774,#b8860b);
padding:30px;
border-radius:16px;
margin-bottom:25px;
}

.hero h1{
margin:0;
font-size:38px;
color:#111;
}

.breadcrumb{
background:#1a1a1a;
padding:15px;
border-radius:10px;
margin-bottom:20px;
}

.breadcrumb a{
color:#f7d774;
text-decoration:none;
}

.article{
background:#181818;
padding:35px;
border-radius:16px;
}

.article h2{
color:#f7d774;
margin-top:35px;
}

.article h3{
color:#ffd700;
margin-top:25px;
}

.article p{
color:#ddd;
font-size:16px;
}

.related{
margin-top:40px;
background:#1c1c1c;
padding:25px;
border-radius:16px;
}

.related a{
display:block;
padding:10px 0;
border-bottom:1px solid #333;
text-decoration:none;
color:#f7d774;
}

.btn{
display:inline-block;
padding:14px 24px;
margin-top:20px;
background:linear-gradient(180deg,#f7d774,#c89b2d);
color:#111;
font-weight:bold;
border-radius:10px;
text-decoration:none;
}

.footer{
margin-top:40px;
padding:20px;
text-align:center;
color:#999;
}

@media(max-width:768px){

.hero h1{
font-size:28px;
}

.article{
padding:22px;
}

}