/* === RESET === */
* {margin:0; padding:0; box-sizing:border-box;}
body {font-family:'Inter',sans-serif; color:#111; background:#fafafa; line-height:1.6;}
a {text-decoration:none; color:inherit;}

/* === CONTAINER === */
.blog-container {width:90%; max-width:1200px; margin:auto;}

/* === HEADER === */
.blog-header {background:#000; color:#fff; padding:15px 0;}
.blog-header .blog-container {display:flex; justify-content:space-between; align-items:center;}
.blog-logo {font-size:1.5rem; font-weight:700;}
.blog-nav {list-style:none; display:flex; gap:20px;}
.blog-nav a {color:#bbb; font-weight:500;}
.blog-nav a:hover, .blog-nav a.active {color:#fff;}

/* === BLOG LIST LAYOUT === */
.blog-layout {display:grid; grid-template-columns:2fr 1fr; gap:30px; margin-top:40px;}
.blog-list {display:flex; flex-direction:column; gap:30px;}
.blog-card {background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.08);}
.blog-card img {width:100%; height:220px; object-fit:cover;}
.blog-content {padding:20px;}
.blog-content h2 {font-size:1.3rem; margin-bottom:8px;}
.blog-content p {color:#555; margin-bottom:10px;}
.blog-readmore {color:#ff4b2b; font-weight:600;}

/* === SIDEBAR === */
.blog-sidebar {display:flex; flex-direction:column; gap:20px;}
.blog-ad {background:#fff; padding:15px; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,0.05);}
.blog-ad img {width:100%; border-radius:8px; margin:10px 0;}

/* === PAGINATION === */
.blog-pagination {display:flex; gap:10px; margin-top:10px;}
.blog-pagination a {background:#fff; padding:8px 12px; border-radius:5px; color:#333; border:1px solid #ddd; font-weight:500;}
.blog-pagination a.active, .blog-pagination a:hover {background:#ff4b2b; color:#fff; border-color:#ff4b2b;}

/* === BLOG DETAIL PAGE === */
.blog-detail-layout {display:grid; grid-template-columns:2fr 1fr; gap:40px; margin-top:40px;}
.blog-detail {background:#fff; padding:25px; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,0.05);}
.blog-detail-img {width:100%; border-radius:8px; margin-bottom:20px;}
.blog-meta {color:#777; margin-bottom:20px;}
.blog-detail h2 {margin:20px 0 10px;}
.blog-detail ul {margin:10px 0 20px 20px;}

/* === COMMENTS === */
.blog-comments {margin-top:40px;}
.blog-comments h3 {margin-bottom:20px;}
.blog-comment {margin-bottom:20px; background:#f7f7f7; padding:10px 15px; border-radius:8px;}
.blog-comment strong {color:#222;}
.blog-comment span {color:#777; font-size:0.9rem;}
.blog-comment p {margin-top:5px;}
.blog-reply {margin-left:20px; margin-top:10px; padding-left:15px; border-left:2px solid #ddd;}

/* === COMMENT FORM === */
.blog-comment-form {margin-top:25px; display:flex; flex-direction:column; gap:10px;}
.blog-comment-form input, .blog-comment-form textarea {
  padding:10px; border:1px solid #ccc; border-radius:5px; font-size:1rem;
}
.blog-comment-form button {
  background:#ff4b2b; color:#fff; border:none; padding:10px; border-radius:5px; font-weight:600;
  cursor:pointer; transition:background .2s;
}
.blog-comment-form button:hover {background:#e83e1c;}

/* === FOOTER === */
.blog-footer {background:#000; color:#aaa; text-align:center; padding:20px; margin-top:50px; font-size:0.9rem;}

/* === RESPONSIVE === */
@media(max-width:992px){
  .blog-layout, .blog-detail-layout {grid-template-columns:1fr;}
  .blog-sidebar {order:-1;}
}
@media(max-width:600px){
  .blog-header .blog-container {flex-direction:column; text-align:center; gap:10px;}
  .blog-card img {height:180px;}
  .blog-content h2 {font-size:1.1rem;}
}