/* Progress Bar */
.progress-container { position: fixed; top: 0; left: 0; width: 100%; height: 4px; z-index: 9999; }
.progress-bar { height: 4px; background: var(--primary-color); width: 0%; transition: 0.1s; }

/* Layout */
.blog-wrapper {
    max-width: 1240px;
    margin: 140px auto 80px;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 60px;
}

/* Typography & Content */
.post-label { background: rgba(108, 92, 231, 0.1); color: var(--primary-color); padding: 6px 14px; border-radius: 8px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; }
.post-main-title { font-size: 3.2rem; font-weight: 800; line-height: 1.15; margin: 20px 0 30px; letter-spacing: -0.02em; }

.post-meta-strip { display: flex; align-items: center; gap: 15px; padding-bottom: 25px; margin-bottom: 35px; border-bottom: 1px solid #f1f5f9; color: var(--text-light); font-size: 0.9rem; }
.author-info { display: flex; align-items: center; gap: 8px; color: var(--text-dark); font-weight: 700; }
.author-icon { width: 18px; height: 18px; border-radius: 4px; }

.featured-wrapper img { width: 100%; border-radius: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.08); margin-bottom: 40px; }
.blog-summary-box { font-family: 'Lora', serif; font-size: 1.35rem; color: #334155; background: var(--bg-soft); padding: 35px; border-radius: 20px; border-left: 5px solid var(--primary-color); margin-bottom: 40px; font-style: italic; }
.main-article-content { font-size: 1.2rem; line-height: 1.9; color: #1e293b; }

/* Sidebar & Widgets */
.sidebar-area { display: flex; flex-direction: column; gap: 30px; }
.sidebar-widget { position: sticky; top: 110px; border: 1px solid #f1f5f9; border-radius: 24px; padding: 25px; background: #fff; }
.widget-title { font-size: 1.1rem; font-weight: 800; margin-bottom: 20px; text-transform: uppercase; position: relative; }
.widget-title::after { content:''; position:absolute; left:0; bottom:-5px; width:30px; height:2px; background:var(--primary-color); }

.popular-post-item { display: flex; gap: 15px; margin-bottom: 20px; text-decoration: none; align-items: flex-start; }
.pop-index { font-size: 1.3rem; font-weight: 800; color: #e2e8f0; }
.pop-title { font-size: 0.95rem; font-weight: 700; color: var(--text-dark); line-height: 1.4; transition: 0.2s; }
.popular-post-item:hover .pop-title { color: var(--primary-color); }

.sidebar-cta {
    margin-top: 20px;
    padding: 30px;
    background: var(--text-dark);
    border-radius: 24px;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.sidebar-cta i { position: absolute; right: -10px; bottom: -10px; font-size: 5rem; opacity: 0.1; transform: rotate(-15deg); }

/* Responsive */
@media (max-width: 1024px) {
    .blog-wrapper { grid-template-columns: 1fr; margin-top: 110px; }
    .sidebar-widget { position: static; }
}

@media (max-width: 768px) {
    .post-main-title { font-size: 1.6rem; margin: 15px 0 20px; }
    .blog-summary-box { font-size: 1.1rem; padding: 25px; }
    .main-article-content { font-size: 1.05rem; }
    .post-meta-strip { font-size: 0.6rem; gap: 6px; }
}