/* ======================================
   HEADLINE LAYOUT
====================================== */

.headline-layout{

    display:grid;

    grid-template-columns:2fr 340px;

    gap:30px;

    margin-bottom:30px;
}

/* ======================================
   HEADLINE UTAMA
====================================== */

.headline-main{

    position:relative;

    border-radius:12px;

    overflow:hidden;

    margin-bottom:20px;
}

.headline-main img{

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

    display:block;
}

.headline-overlay{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    padding:25px;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.85),
        rgba(0,0,0,.4),
        transparent
    );
}

.headline-tag{

    display:inline-block;

    background:#ffffff;

    color:#dc2626;

    padding:6px 14px;

    border-radius:20px;

    font-size:12px;

    font-weight:600;

    margin-bottom:12px;
}

.headline-overlay h2{

    color:#ffffff;

    font-size:32px;

    line-height:1.25;

    font-weight:700;

    max-width:90%;
}

/* ======================================
   GRID BERITA
====================================== */

.headline-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:12px;
}

.headline-card{

    background:#fff;

    border-radius:8px;

    overflow:hidden;
}

.headline-card img{

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

    display:block;

    border-radius:8px;
}

.headline-card h3{

    margin-top:8px;

    font-size:14px;

    line-height:1.35;

    font-weight:600;

    color:#111827;
}

.headline-card span{

    display:block;

    margin-top:4px;

    color:#6b7280;

    font-size:12px;

    font-weight:500;
}


/* ======================================
   TERPOPULER
====================================== */

.headline-popular{

    border-left:1px solid #e5e7eb;

    padding-left:25px;
}

.headline-popular h2{

    margin-bottom:25px;

    font-size:28px;

    color:#111;
}

.popular-item{

    display:flex;

    gap:15px;

    margin-bottom:25px;
}

.popular-number{

    width:34px;

    height:34px;

    border-radius:50%;

    background:#f3f4f6;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;
}

.popular-content h3{

    font-size:18px;

    line-height:1.4;

    margin-bottom:6px;
}

.popular-content span{

    color:#777;

    font-size:13px;
}