/* assets/css/style.css */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;color:#334155;background:#f8fafc;line-height:1.6}
a{color:#2563eb;text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:0 15px}

/* Header */
.site-header{background:#fff;border-bottom:1px solid #e2e8f0;position:sticky;top:0;z-index:1000;box-shadow:0 2px 10px rgba(0,0,0,0.05)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 15px;max-width:1200px;margin:0 auto}
.logo img,.logo svg{height:40px}
.main-nav{display:flex;gap:20px;align-items:center}
.main-nav a{color:#1e293b;font-weight:500;font-size:14px}
.main-nav a:hover{color:#2563eb;text-decoration:none}
.header-actions{display:flex;gap:10px;align-items:center}
.search-icon{font-size:20px;cursor:pointer}
.mobile-menu-toggle{display:none;background:none;border:none;font-size:24px;cursor:pointer}
@media(max-width:768px){
    .main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;padding:15px;border-bottom:2px solid #e2e8f0}
    .main-nav.active{display:flex}
    .mobile-menu-toggle{display:block}
}

/* Layout */
.content-area{display:flex;gap:30px;padding:30px 0}
.main-content{flex:1;min-width:0}
.sidebar{width:300px;flex-shrink:0}
@media(max-width:768px){.content-area{flex-direction:column}.sidebar{width:100%}}

/* Post Card */
.post-card{display:flex;gap:20px;background:#fff;border-radius:10px;margin-bottom:20px;overflow:hidden;border:1px solid #e2e8f0;transition:box-shadow 0.2s}
.post-card:hover{box-shadow:0 5px 20px rgba(0,0,0,0.08)}
.post-card-image{width:250px;flex-shrink:0;overflow:hidden}
.post-card-image img{width:100%;height:100%;object-fit:cover;min-height:180px}
.post-card-body{padding:15px 20px 15px 0;flex:1}
.post-card-meta{font-size:12px;color:#64748b;margin-bottom:8px}
.post-card-meta .category{background:#2563eb;color:#fff;padding:2px 10px;border-radius:3px;font-weight:600;text-transform:uppercase;font-size:11px;margin-right:8px}
.post-card-meta .category:hover{opacity:0.9;text-decoration:none}
.post-card-title{font-size:20px;font-weight:700;margin:0 0 8px;line-height:1.3}
.post-card-title a{color:#1e293b}
.post-card-title a:hover{color:#2563eb;text-decoration:none}
.post-card-excerpt{font-size:14px;color:#64748b;margin-bottom:10px}
.read-more{display:inline-block;background:#2563eb;color:#fff;padding:8px 18px;border-radius:5px;font-size:13px;font-weight:600}
.read-more:hover{background:#1d4ed8;text-decoration:none;color:#fff}
@media(max-width:600px){.post-card{flex-direction:column}.post-card-image{width:100%;max-height:200px}.post-card-body{padding:15px}}

/* Sidebar */
.sidebar-widget{background:#fff;border-radius:10px;padding:20px;margin-bottom:20px;border:1px solid #e2e8f0}
.sidebar-widget h3{font-size:16px;font-weight:700;margin:0 0 15px;padding-bottom:10px;border-bottom:2px solid #2563eb;color:#1e293b}
.search-form{display:flex;gap:5px}
.search-form input{flex:1;padding:10px;border:1px solid #e2e8f0;border-radius:5px;font-size:14px}
.search-form button{padding:10px 15px;background:#2563eb;color:#fff;border:none;border-radius:5px;cursor:pointer}
.social-icons{display:flex;gap:8px;flex-wrap:wrap}
.social-icons a{display:flex;align-items:center;justify-content:center;width:35px;height:35px;border-radius:50%;background:#f1f5f9;color:#1e293b;font-size:14px;font-weight:700;transition:all 0.2s}
.social-icons a:hover{background:#2563eb;color:#fff;text-decoration:none}
.recent-post-item,.popular-post-item{display:flex;gap:10px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #e2e8f0}
.recent-post-item:last-child,.popular-post-item:last-child{border-bottom:none;margin-bottom:0}
.recent-post-item img{width:60px;height:60px;object-fit:cover;border-radius:5px;flex-shrink:0}
.recent-post-info h4{font-size:13px;margin:0 0 3px;line-height:1.3}
.recent-post-info h4 a,.popular-post-item a{color:#1e293b}
.recent-post-info small{font-size:11px;color:#64748b}
.category-list{list-style:none;padding:0;margin:0}
.category-list li{margin-bottom:8px}
.category-list a{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dotted #e2e8f0;color:#1e293b;font-size:14px}
.category-list a:hover{color:#2563eb;text-decoration:none}
.category-list .count{color:#64748b;font-size:12px}

/* Single Post */
.single-post{background:#fff;border-radius:10px;padding:25px;border:1px solid #e2e8f0;margin-bottom:20px}
.single-post h1{font-size:28px;margin:0 0 15px;line-height:1.3}
.post-meta{font-size:13px;color:#64748b;margin-bottom:15px}
.post-meta span,.post-meta a{margin-right:12px}
.post-meta .post-category{background:#2563eb;color:#fff;padding:3px 10px;border-radius:3px;font-size:11px;text-transform:uppercase;font-weight:600}
.title-divider{border:none;border-top:1px solid #e2e8f0;margin:15px 0}
.featured-image{margin-bottom:20px}
.featured-image img{width:100%;border-radius:8px;max-height:400px;object-fit:cover}
.post-content{font-size:16px;line-height:1.8}
.post-content p{margin-bottom:15px}
.post-content img{max-width:100%;border-radius:5px}
.post-content h2,.post-content h3{margin-top:25px;color:#1e293b}

/* Newsletter */
.newsletter-box{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:25px;border-radius:10px;margin:25px 0;text-align:center}
.newsletter-box h3{margin:0 0 15px}
.newsletter-form{display:flex;gap:8px;max-width:400px;margin:0 auto}
.newsletter-form input{flex:1;padding:10px 15px;border:none;border-radius:5px;font-size:14px}
.newsletter-form button{padding:10px 20px;background:#fff;color:#667eea;border:none;border-radius:5px;font-weight:600;cursor:pointer}

/* Share Buttons */
.share-buttons{margin:20px 0;padding:15px;background:#f1f5f9;border-radius:8px}
.share-buttons h4{margin:0 0 10px;font-size:14px}
.share-btn{display:inline-block;padding:6px 14px;margin:3px;border-radius:5px;color:#fff;font-size:13px;font-weight:500}
.share-btn:hover{opacity:0.85;text-decoration:none;color:#fff}
.share-btn.facebook{background:#1877f2}
.share-btn.whatsapp{background:#25d366}
.share-btn.telegram{background:#0088cc}
.share-btn.twitter{background:#1da1f2}

/* Comments */
.comments-section{margin-top:25px}
.comment-form{margin-bottom:20px}
.comment-form input,.comment-form textarea{width:100%;padding:10px;margin-bottom:10px;border:1px solid #e2e8f0;border-radius:5px;font-family:inherit}
.comment-form textarea{height:100px;resize:vertical}
.comment-form button{padding:10px 20px;background:#2563eb;color:#fff;border:none;border-radius:5px;cursor:pointer}
.comment-item{padding:15px 0;border-bottom:1px solid #e2e8f0}
.comment-author{font-weight:600;margin-bottom:5px}
.comment-date{font-size:12px;color:#64748b}

/* Related Posts */
.related-posts{margin-top:30px}
.related-posts h3{margin-bottom:15px}
.related-posts .row{display:flex;gap:15px;flex-wrap:wrap}
.related-post-card{flex:1;min-width:200px;background:#fff;border-radius:8px;overflow:hidden;border:1px solid #e2e8f0}
.related-post-card img{width:100%;height:120px;object-fit:cover}
.related-post-card h4{font-size:13px;padding:10px;margin:0}

/* Breadcrumb */
.breadcrumb{display:flex;list-style:none;padding:0;margin:0 0 15px;font-size:13px;flex-wrap:wrap}
.breadcrumb li{margin-right:5px;color:#64748b}
.breadcrumb li:after{content:'/';margin-left:5px}
.breadcrumb li:last-child:after{content:''}
.breadcrumb a{color:#2563eb}

/* Pagination */
.pagination{display:flex;justify-content:center;gap:5px;margin:25px 0;flex-wrap:wrap}
.pagination a,.pagination span{padding:8px 14px;border-radius:5px;background:#fff;color:#1e293b;border:1px solid #e2e8f0;font-size:14px}
.pagination .active,.pagination a:hover{background:#2563eb;color:#fff;border-color:#2563eb;text-decoration:none}

/* Footer */
.site-footer{background:#1e293b;color:#cbd5e1;padding:40px 0 0;margin-top:40px}
.footer-widgets{display:flex;gap:30px;max-width:1200px;margin:0 auto;padding:0 15px 30px;flex-wrap:wrap}
.footer-widget{flex:1;min-width:200px}
.footer-widget h4{color:#fff;margin-bottom:15px;font-size:16px}
.footer-widget p{font-size:13px}
.footer-widget ul{list-style:none;padding:0}
.footer-widget ul li{margin-bottom:8px}
.footer-widget ul li a{color:#94a3b8;font-size:14px}
.footer-widget ul li a:hover{color:#fff;text-decoration:none}
.footer-bottom{border-top:1px solid #334155;text-align:center;padding:15px;font-size:13px;color:#64748b}
@media(max-width:768px){.footer-widgets{flex-direction:column}}

/* 404 */
.not-found{text-align:center;padding:60px 20px}
.not-found h1{font-size:80px;color:#2563eb;margin-bottom:10px}