/* BARKAS YOGYA Blog Styles - Optimized */
.blog-section{background:#f8f9fa;padding:5rem 0}
.section-header{text-align:center;margin-bottom:3rem}
.section-header .section-title{margin-bottom:.5rem}
.section-subtitle{color:#000;margin-bottom:2rem;font-size:1.1rem;font-weight:500}
.blog-filters{display:flex;gap:1rem;margin-bottom:3rem;flex-wrap:wrap;align-items:center}
.blog-search{display:flex;gap:.5rem;flex:1;max-width:300px}
#blogCategoryFilter,#blogSearchInput{padding:.75rem;border:1px solid #ddd;border-radius:8px;font-size:.95rem}
#blogSearchInput{flex:1}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;margin:2rem 0}
.blog-card{background:#fff;border:1px solid #e9ecef;border-radius:12px;padding:1.5rem;transition:all .3s ease;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 8px 25px rgba(0,0,0,.15)}
.blog-card h3{color:#2563eb;margin-bottom:1rem;font-size:1.25rem;line-height:1.4}
.blog-card p{color:#666;margin-bottom:1rem;font-size:.95rem;line-height:1.6}
.blog-card .read-more{color:#2563eb;font-weight:500;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;transition:color .3s}
.blog-card .read-more:hover{color:#1d4ed8}
.blog-card .read-more::after{content:'→';transition:transform .3s}
.blog-card:hover .read-more::after{transform:translateX(4px)}
.blog-post-content{max-width:800px;margin:0 auto;padding:2rem;background:#fff;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.1)}
.blog-post-title{color:#2563eb;margin-bottom:1rem;font-size:2rem;line-height:1.3}
.blog-post-meta{display:flex;gap:2rem;color:#666;font-size:.9rem;margin-bottom:2rem;flex-wrap:wrap}
.blog-post-content h2,.blog-post-content h3{margin:2rem 0 1rem 0;color:#333}
/* Mobile Responsive */
@media (max-width:768px){
.blog-filters{flex-direction:column;align-items:stretch}
.blog-search{max-width:none}
.blog-grid{grid-template-columns:1fr;gap:1.5rem}
.blog-post-title{font-size:1.5rem}
.blog-post-meta{flex-direction:column;align-items:flex-start;gap:.5rem}
.blog-section{padding:3rem 0}
}