/*
Theme Name: Detik Portal Parent Theme
Theme URI: https://example.com/detik-portal
Author: Developer Portal
Description: Tema induk dengan layout berita padat multi-kategori terinspirasi dari detik.com.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: detikportal
*/

:root {
    --detik-blue: #005691;
    --detik-red: #cc0000;
    --detik-dark: #1a1a1a;
    --detik-grey: #f4f4f4;
    --detik-text: #333333;
    --detik-border: #e0e0e0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Helvetica Neue', Arial, sans-serif; background-color: #ffffff; color: var(--detik-text); line-height: 1.5; }
a { color: inherit; text-decoration: none; }

.container { width: 96%; max-width: 1300px; margin: 0 auto; }

.sub-brand-nav { background: var(--detik-dark); color: #fff; font-size: 12px; font-weight: bold; padding: 8px 0; }
.sub-brand-nav ul { display: flex; list-style: none; gap: 15px; flex-wrap: wrap; }
.sub-brand-nav ul li a:hover { color: #ffcc00; }

.main-header { padding: 20px 0; border-bottom: 4px solid var(--detik-blue); }
.header-flex { display: flex; justify-content: space-between; align-items: center; }
.site-logo h1 { font-size: 32px; font-weight: 900; letter-spacing: -1px; color: var(--detik-blue); }

.portal-wrapper { display: grid; grid-template-columns: 2.5fr 1fr; gap: 30px; margin-top: 20px; }

.headline-container { margin-bottom: 30px; }
.headline-title { font-size: 28px; font-weight: 800; margin: 10px 0; line-height: 1.2; }
.news-feed-list { display: flex; flex-direction: column; gap: 20px; }
.news-item { display: flex; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--detik-border); }
.news-item img { width: 180px; height: 110px; object-fit: cover; border-radius: 4px; }
.news-item h3 { font-size: 18px; font-weight: 700; line-height: 1.3; }
.news-meta { font-size: 12px; color: #777; margin-top: 5px; }

.sidebar-box { background: var(--detik-grey); padding: 20px; border-radius: 4px; margin-bottom: 20px; }
.sidebar-box h3 { border-left: 4px solid var(--detik-red); padding-left: 10px; margin-bottom: 15px; font-size: 16px; text-transform: uppercase; }
.trending-list { list-style: none; }
.trending-list li { display: flex; gap: 10px; margin-bottom: 15px; align-items: flex-start; }
.rank-num { font-size: 24px; font-weight: 900; color: var(--detik-red); line-height: 1; }

footer { background: var(--detik-dark); color: #bbb; padding: 40px 0; font-size: 13px; margin-top: 50px; text-align: center; }

@media (max-width: 992px) {
    .portal-wrapper { grid-template-columns: 1fr; }
    .news-item img { width: 120px; height: 80px; }
}