<style>

/* =========================
   BODY
========================= */
body{
    background:#f1f5f9;
    font-family:"Inter","Segoe UI",sans-serif;
    color:#1e293b;
}

/* =========================
   WRAPPER
========================= */
.blog-wrapper{
    width:92%;
    margin:auto;
    padding:40px 0 60px;
}

/* =========================
   HERO TITLE
========================= */
.blog-hero{
    position:relative;
    overflow:hidden;
    width:100%;
    padding:15px 40px;
    border-radius:35px;

    background:
    linear-gradient(
        135deg,
        #1e3a8a,
        #2563eb,
        #0ea5e9
    );

    color:#fff;

    margin-bottom:45px;

    box-shadow:
    0 20px 45px rgba(0,0,0,0.15);
}

/* ICON */
.blog-hero::before{
    content:"📰";

    position:absolute;

    left:45px;
    top:50%;

    transform:translateY(-50%);

    font-size:65px;

    opacity:.95;
}

/* TITLE */
.blog-hero h1{
    font-size:3rem;
    font-weight:800;

    margin-bottom:18px;

    padding-left:110px;

    color:#fff;
}

/* DESCRIPTION */
.blog-hero p{
    font-size:1.1rem;
    line-height:2;

    max-width:1000px;

    padding-left:110px;

    color:rgba(255,255,255,0.92);

    margin-bottom:30px;
}

/* SEARCH */
#search-blog{
    margin-left:110px;

    width:100%;
    max-width:1100px;

    border:none;
    outline:none;

    border-radius:60px;

    padding:10px 24px;

    font-size:15px;

    background:rgba(255,255,255,0.15);

    color:#fff;

    backdrop-filter:blur(10px);

    box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.2),
    0 5px 15px rgba(0,0,0,0.1);

    transition:.3s;
}

#search-blog::placeholder{
    color:rgba(255,255,255,0.8);
}

#search-blog:focus{
    background:rgba(255,255,255,0.22);

    box-shadow:
    0 10px 25px rgba(0,0,0,0.15);
}

/* =========================
   LAYOUT
========================= */
.blog-layout{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:32px;
}

/* =========================
   SIDEBAR
========================= */
.sidebar{
    background:#fff;

    border-radius:28px;

    padding:28px;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.08);

    height:fit-content;
}

.sidebar h3{
    font-size:1.3rem;
    font-weight:700;

    color:#0f172a;

    margin-bottom:22px;

    padding-bottom:14px;

    border-bottom:2px solid #e2e8f0;
}

/* CATEGORY */
.category-list{
    list-style:none;
    padding:0;
    margin:0;
}

.category-list li{
    margin-bottom:10px;
}

.category-list li a{
    display:flex;
    align-items:center;
    gap:10px;

    padding:13px 16px;

    border-radius:14px;

    text-decoration:none;

    color:#334155;

    font-weight:600;

    background:#f8fafc;

    transition:.3s;
}

.category-list li a:hover{
    background:
    linear-gradient(
        135deg,
        #2563eb,
        #0ea5e9
    );

    color:#fff;

    transform:translateX(5px);
}

/* =========================
   BLOG GRID
========================= */
.blog-grid{
    display:grid;
    grid-template-columns:
    repeat(auto-fill,minmax(320px,1fr));

    gap:28px;
}

/* =========================
   CARD
========================= */
.blog-card{
    background:#fff;

    border-radius:28px;

    overflow:hidden;

    transition:.4s;

    box-shadow:
    0 10px 25px rgba(0,0,0,0.08);

    height:100%;
}

.blog-card:hover{
    transform:
    translateY(-10px);

    box-shadow:
    0 22px 45px rgba(0,0,0,0.16);
}

/* IMAGE */
.blog-image{
    width:100%;
    height:240px;
    object-fit:cover;

    transition:.5s;
}

.blog-card:hover .blog-image{
    transform:scale(1.06);
}

/* BODY */
.blog-body{
    padding:24px;
}

/* TITLE */
.blog-title{
    font-size:1.2rem;
    font-weight:800;

    color:#0f172a;

    line-height:1.6;

    margin-bottom:14px;

    min-height:70px;
}

/* META */
.blog-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;

    margin-bottom:18px;

    font-size:.88rem;

    color:#64748b;
}

/* BADGE */
.badge-category{
    padding:6px 14px;

    border-radius:50px;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #0ea5e9
    );

    color:#fff;

    font-size:.75rem;

    font-weight:700;
}

/* CONTENT */
.blog-text{
    color:#475569;

    line-height:1.9;

    font-size:.95rem;
}

/* BUTTON */
.btn-read{
    display:inline-flex;
    align-items:center;
    gap:8px;

    margin-top:20px;

    padding:12px 20px;

    border-radius:60px;

    text-decoration:none;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

    color:#fff;

    font-weight:700;

    transition:.3s;
}

.btn-read:hover{
    transform:translateY(-2px);

    color:#fff;

    background:
    linear-gradient(
        135deg,
        #1d4ed8,
        #1e40af
    );
}

/* =========================
   PAGINATION
========================= */
.pagination-box{
    margin-top:40px;
    text-align:center;
}

.pagination-box a,
.pagination-box span{
    display:inline-block;

    padding:12px 18px;

    margin:4px;

    border-radius:14px;

    background:#fff;

    border:1px solid #e2e8f0;

    text-decoration:none;

    color:#334155;

    font-weight:600;

    transition:.25s;
}

.pagination-box a:hover{
    background:#2563eb;
    color:#fff;
    border-color:#2563eb;
}

.pagination-box strong,
.pagination-box .active{
    background:#2563eb;
    color:#fff;
    border-color:#2563eb;
}

/* =========================
   EMPTY
========================= */
.empty-blog{
    background:#fff;

    padding:40px;

    border-radius:25px;

    text-align:center;

    color:#64748b;

    font-size:1rem;

    box-shadow:
    0 10px 25px rgba(0,0,0,0.06);
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:992px){

   .blog-layout{
    display:grid;
    grid-template-columns:260px 1fr;
    gap:30px;
}

}

@media(max-width:768px){

    .blog-hero{
        padding:40px 25px;
        border-radius:25px;
    }

    .blog-hero::before{
        position:relative;
        left:auto;
        top:auto;
        transform:none;

        display:block;

        margin-bottom:20px;

        font-size:50px;
    }

    .blog-hero h1{
        padding-left:0;
        font-size:2.2rem;
    }

    .blog-hero p{
        padding-left:0;
        font-size:1rem;
        line-height:1.8;
    }

    #search-blog{
        margin-left:0;
        max-width:100%;
    }

}

@media(max-width:576px){

    .blog-grid{
        grid-template-columns:1fr;
    }

}

</style>