:root {
    --main-green: #00cc00;
    --dark-grey: #1a1a1a;
    --border-color: #e0e0e0;
}

body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    background-color: #f0f2f5;
}

.container { width: 95%; max-width: 1140px; margin: auto; }

/* Top Bar */
.top-bar { background: #eee; padding: 5px 0; font-size: 12px; border-bottom: 1px solid #ddd; }
.top-bar .container { display: flex; justify-content: space-between; }

/* Header ala Portal Berita */
header { background: #fff; padding: 20px 0; border-bottom: 4px solid var(--main-green); }
.header-flex { display: flex; justify-content: space-between; align-items: center; }
#branding h1 { font-family: 'Montserrat', sans-serif; margin: 0; color: #333; }
.highlight { color: var(--main-green); }

nav ul { display: flex; list-style: none; margin: 0; padding: 0; }
nav li { margin-left: 20px; }
nav a { text-decoration: none; color: #333; font-weight: bold; text-transform: uppercase; font-size: 14px; }
nav a.active { color: var(--main-green); }

/* Headline Grid */
.headline-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
    margin: 20px 0;
}

.hero-main {
    height: 400px;
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: 4px;
    display: flex;
    align-items: flex-end;
    padding: 20px;
    color: #fff;
}

.hero-info h2 { font-size: 28px; margin: 10px 0; font-family: 'Montserrat', sans-serif; }
.badge { background: var(--main-green); padding: 4px 8px; font-size: 12px; border-radius: 3px; }

.hero-side { display: flex; flex-direction: column; gap: 10px; }
.side-item {
    height: 195px;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    display: flex;
    align-items: flex-end;
    padding: 15px;
    color: #fff;
}
.side-item h3 { font-size: 16px; margin: 0; }

/* Content Wrapper */
.content-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
}

.section-title {
    border-bottom: 3px solid #333;
    padding-bottom: 5px;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
    position: relative;
}

.section-title::after {
    content: '';
    width: 60px;
    height: 3px;
    background: var(--main-green);
    position: absolute;
    bottom: -3px;
    left: 0;
}

/* News List Horizontal */
.news-horizontal {
    display: flex;
    gap: 20px;
    background: #fff;
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 4px;
}

.news-horizontal img { width: 220px; height: 140px; object-fit: cover; border-radius: 4px; }
.news-info h3 { margin: 0 0 10px 0; color: #333; font-size: 20px; }
.cat-label { color: var(--main-green); font-weight: bold; font-size: 12px; }
.date { font-size: 11px; color: #999; }

/* Sidebar */
.widget { background: #fff; padding: 20px; margin-bottom: 20px; border-radius: 4px; }
.widget-title { font-family: 'Montserrat', sans-serif; border-bottom: 1px solid #ddd; padding-bottom: 10px; }
.pop-list { list-style: none; padding: 0; }
.pop-list li { margin-bottom: 15px; display: flex; align-items: center; }
.pop-list span { font-size: 24px; font-weight: bold; color: #ccc; margin-right: 15px; }
.pop-list a { text-decoration: none; color: #333; font-weight: 600; }

/* Responsive */
@media(max-width: 768px) {
    .headline-grid, .content-wrapper { grid-template-columns: 1fr; }
    .hero-main { height: 300px; }
    .news-horizontal { flex-direction: column; }
    .news-horizontal img { width: 100%; }
    header .header-flex { flex-direction: column; }
    nav ul { margin-top: 15px; }
}