.blog-container{
    display: flex; 
    flex-wrap: wrap; 
    gap: 40px; 
    align-items: flex-start;
    margin: 40px auto;
}
main { 
    flex: 2; /* Mengambil 2/3 ruang */
    min-width: 300px; 
}
main p{
    margin-bottom: 1rem;
}
/* KOLOM SIDEBAR */
aside { 
    flex: 1; /* Mengambil 1/3 ruang */
    min-width: 250px; 
    position: sticky; /* Agar sidebar tetap terlihat saat scroll (UX bagus) */
    top: calc(var(--nav-height) + 20px);
}

/* Styling Konten Lama */
.breadcrumb { font-size: 0.9rem; color: #666; margin-bottom: 15px; }
.breadcrumb a {
    color: #333;
    text-decoration: none;
    font-weight: 500;
}

.breadcrumb .sep {
    margin: 0 4px;
    font-size: 12px;
}
.blog-header { margin-bottom: 30px; }
h1 { font-size: 2rem; margin-bottom: 10px; color: var(--main-color); line-height: 1.4em;}
h2 {  margin-bottom: 10px; color: var(--main-color); line-height: 1.4em;}
.meta { color: #888; font-size: 0.9rem; margin-bottom: 20px; display: flex; gap: 15px; }
.featured-image { width: 100%; height: auto; border-radius: 8px; margin-bottom: 30px; }
.article-content { font-size: 1rem; }
.article-content ul{
    list-style: disc;
    padding-left: 25px;
    margin-bottom: 25px;
}

/* Styling Sidebar Widgets */
.widget { background: #fff; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.widget h3 { color: var(--main-color); margin-top: 0; border-bottom: 2px solid #eee; padding-bottom: 10px; font-size: 1.2rem; }
.widget ul { margin-top: 15px;}
.widget li { margin-bottom: 10px; border-bottom: 1px solid #f9f9f9; padding-bottom: 8px; }
.widget li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0;}
.widget a { text-decoration: none; transition: color 0.2s; }
.widget a:hover { color: var(--main-color); font-weight: 500; }

/* Responsive Mobile */
@media (max-width: 768px) {
    aside { position: static; width: 100%; }
}


/* --- Related Posts Styling --- */
.related-posts-section {
    border-top: 1px solid #eee;
    padding-top: 30px;
}

.related-posts-section h3 {
    margin-bottom: 20px;
}

.related-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.related-card .img-skeleton {
    height: 180px; /* Tinggi gambar related */
}