/* Layout cloned from kompas.com structure (nav/hero/feed/sidebar), no ad slots.
   Colors/fonts pulled from kompas.com's own served CSS (design tokens), applied
   to jurnas.com's real category set. */

:root{
	--brand-blue:#0161b8;
	--accent-orange:#e55225;
	--bg-body:#f2f2f2;
	--bg-main:#fff;
	--txt-main:#1a1a1a;
	--txt-muted:#717171;
	--txt-time:#959595;
	--border-list:#e2e2e2;
	--section-title-bg:#f3f5f6;

	--cat-news:#0f79c6;
	--cat-ekonomi:#438e10;
	--cat-olahraga:#0db24b;
	--cat-otomotif:#fb0404;
	--cat-hiburan:#00a783;
	--cat-gaya_hidup:#bf174c;
	--cat-humanika:#0161b8;
	--cat-info_desa:#b57c29;
	--cat-warta_mpr:#6c6f75;
}

*{box-sizing:border-box}
body{
	margin:0;
	font-family:Roboto,Inter,Arial,sans-serif;
	background:var(--bg-body);
	color:var(--txt-main);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.kmp-wrap{max-width:1100px;margin:15px auto 0;background:var(--bg-main)}
.kmp-container{max-width:1100px;margin:0 auto}

/* Top bar: logo + date */
.kmp-topbar{background:#fff}
.kmp-topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:20px 16px}
.kmp-logo-big{font-size:38px;font-weight:800;font-family:'Roboto Condensed',Roboto,sans-serif;color:var(--brand-blue);letter-spacing:-1px;white-space:nowrap}
.kmp-logo-big span{color:#e2231a}
.kmp-logo-img{height:44px;width:auto;display:block}
.kmp-topbar-date{color:#e2231a;font-size:14px;font-weight:600;white-space:nowrap}

/* Nav */
.kmp-nav{background:#173f63;position:sticky;top:0;z-index:100}
.kmp-nav-inner{display:flex;align-items:center;gap:24px;padding:0 16px;height:56px}
.kmp-nav-menu{display:flex;gap:18px;overflow-x:auto;flex:1;list-style:none;margin:0;padding:0;scrollbar-width:none;-ms-overflow-style:none}
.kmp-nav-menu::-webkit-scrollbar{display:none}
.kmp-nav-menu li{white-space:nowrap}
.kmp-nav-menu a{color:#fff;font-size:14px;opacity:.9;padding:4px 0}
.kmp-nav-menu a:hover{opacity:1;border-bottom:2px solid #fff}
.kmp-search{color:#fff;font-size:14px;opacity:.85;white-space:nowrap}
.kmp-search input{border:none;border-radius:3px;padding:5px 8px;font-size:13px;width:120px}

/* Category badge */
.kmp-tag{display:inline-block;font-size:11px;font-weight:700;color:#fff;padding:2px 8px;border-radius:2px;text-transform:uppercase;letter-spacing:.3px}
.kmp-tag.news{background:var(--cat-news)}
.kmp-tag.ekonomi{background:var(--cat-ekonomi)}
.kmp-tag.olahraga{background:var(--cat-olahraga)}
.kmp-tag.otomotif{background:var(--cat-otomotif)}
.kmp-tag.hiburan{background:var(--cat-hiburan)}
.kmp-tag.gaya_hidup{background:var(--cat-gaya_hidup)}
.kmp-tag.humanika{background:var(--cat-humanika)}
.kmp-tag.info_desa{background:var(--cat-info_desa)}
.kmp-tag.warta_mpr{background:var(--cat-warta_mpr)}
.kmp-tag.default{background:var(--txt-muted)}

/* Hero */
.kmp-hero{display:flex;gap:24px;padding:20px 16px}
.kmp-hero-main{flex:0 0 66%}
.kmp-hero-main a.kmp-hero-link{display:block}
.kmp-hero-img{width:100%;aspect-ratio:16/9;overflow:hidden;background:#e2e2e2;border-radius:4px}
.kmp-hero-img img{width:100%;height:100%;object-fit:cover}
.kmp-hero-title{font-size:26px;line-height:1.25;font-weight:700;margin:12px 0 6px;color:var(--txt-main)}
.kmp-hero-title:hover{color:var(--accent-orange)}
.kmp-hero-desc{font-size:14px;color:var(--txt-muted);line-height:1.5}

.kmp-hero-side{flex:0 0 32%;display:flex;flex-direction:column}

/* Main + sidebar columns */
.kmp-cols{display:flex;gap:24px;padding:0 16px 20px}

/* Jurnas Video section */
.kmp-video-section{margin-bottom:20px}
.kmp-video-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.kmp-video-header h2{font-size:20px;font-weight:800;letter-spacing:-.3px;margin:0;text-transform:uppercase;color:var(--txt-main)}
.kmp-video-header a{font-size:13px;font-weight:600;color:var(--brand-blue)}
.kmp-video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.kmp-video-card{display:block}
.kmp-video-thumb{aspect-ratio:3/4;overflow:hidden;border-radius:4px;background:#e2e2e2}
.kmp-video-thumb img{width:100%;height:100%;object-fit:cover}
.kmp-video-title{font-size:15px;font-weight:600;line-height:1.35;margin-top:8px;color:var(--txt-main)}
.kmp-video-title:hover{color:var(--accent-orange)}
@media (max-width:700px){.kmp-video-grid{grid-template-columns:1fr}}
.kmp-main{flex:0 0 66%;min-width:0}
.kmp-side{flex:1;min-width:0}

.kmp-section-title{font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;background:var(--section-title-bg);padding:8px 12px;border-left:4px solid var(--accent-orange);margin:10px 0 12px;display:flex;justify-content:space-between;align-items:center}
.kmp-section-title a{font-size:12px;font-weight:400;color:var(--brand-blue);text-transform:none}

/* Feed rows (TERKINI / kanal lists) */
.kmp-feed-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border-list)}
.kmp-feed-item:last-child{border-bottom:none}
.kmp-feed-thumb{flex:0 0 140px;aspect-ratio:16/9;overflow:hidden;background:#e2e2e2;border-radius:3px}
.kmp-feed-thumb img{width:100%;height:100%;object-fit:cover}
.kmp-feed-body{flex:1;min-width:0}
.kmp-feed-title{font-size:15px;font-weight:600;line-height:1.35;margin:4px 0}
.kmp-feed-title:hover{color:var(--accent-orange)}
.kmp-feed-time{font-size:12px;color:var(--txt-time)}

/* Sidebar TERPOPULER numbered list */
.kmp-pop-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border-list)}
.kmp-pop-item:last-child{border-bottom:none}
.kmp-pop-num{font-size:22px;font-weight:700;color:var(--accent-orange);flex:0 0 28px;font-family:'Roboto Condensed',sans-serif}
.kmp-pop-title{font-size:13.5px;font-weight:600;line-height:1.35}
.kmp-pop-title:hover{color:var(--accent-orange)}

.kmp-filter-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 16px}
.kmp-filter-bar select,.kmp-filter-bar input[type=date]{padding:6px 10px;border:1px solid var(--border-list);border-radius:3px;font-size:13px}
.kmp-filter-bar button{padding:6px 18px;background:var(--brand-blue);color:#fff;border:none;border-radius:3px;font-size:13px;cursor:pointer}
.kmp-filter-bar button:hover{opacity:.9}
.kmp-filter-reset{font-size:13px;color:var(--txt-muted)}

/* Google CSE (search.php) - paksa full width & samakan font dgn tema situs;
   Google set width tetap (~632px) secara default kalau "Full Width" tak
   diaktifkan di control panel CSE, jadi ditimpa via CSS di sini. */
.kmp-cse{width:100%}
.kmp-cse *{box-sizing:border-box}
.kmp-cse .gsc-control-cse{width:100%;padding:0;border:none;background:transparent;font-family:Roboto,Arial,sans-serif}
.kmp-cse .gsc-results,
.kmp-cse .gsc-results-wrapper-overlay,
.kmp-cse .gsc-results-wrapper-nooverlay,
.kmp-cse .gsc-results-wrapper-visible,
.kmp-cse .gsc-tabsArea{width:100% !important;max-width:none !important}
.kmp-cse .gsc-search-box,
.kmp-cse table.gsc-search-box{width:97% !important;max-width:none !important}
.kmp-cse .gsc-input-box{width:100% !important;max-width:none !important}
.kmp-cse .gsc-positioningWrapper{max-width:100% !important}
.kmp-cse .gsc-above-wrapper-area{width:100% !important;max-width:100% !important}
.kmp-cse input.gsc-input{width:100% !important;max-width:none !important}
.kmp-cse *{font-family:Roboto,Arial,sans-serif !important}
.kmp-empty-note{font-size:13px;color:var(--txt-time);padding:8px 0;font-style:italic}

/* Article detail page */
.kmp-breadcrumb{font-size:13px;color:var(--txt-muted);margin-bottom:12px}
.kmp-breadcrumb a{color:var(--brand-blue)}
.kmp-article-head{margin-bottom:16px}
.kmp-article-title{font-size:30px;line-height:1.3;font-weight:700;color:var(--txt-main);margin:10px 0}
.kmp-byline{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:13px;color:var(--txt-muted);border-top:1px solid var(--border-list);border-bottom:1px solid var(--border-list);padding:10px 0;margin-bottom:16px}
.kmp-byline b{color:var(--txt-main)}
.kmp-article-fig{margin-bottom:16px}
.kmp-article-fig img{width:100%;border-radius:4px;background:#e2e2e2;aspect-ratio:16/9;object-fit:cover}
.kmp-article-fig iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:4px}
.kmp-article-caption{font-size:12px;color:var(--txt-time);font-style:italic;padding:6px 0}
.kmp-article-body{font-size:16px;line-height:1.8;color:var(--txt-main)}
.kmp-article-body p{margin:0 0 16px}
.kmp-article-body a{color:var(--accent-orange);font-weight:600}
.kmp-article-body iframe{width:100%;aspect-ratio:16/9;height:auto;border:0}
.kmp-baca-juga{font-size:14px;font-weight:600;padding:12px;border-left:4px solid var(--brand-blue);background:var(--section-title-bg);margin:16px 0}
.kmp-baca-juga a{color:var(--brand-blue)}
.kmp-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.kmp-tags a{background:var(--section-title-bg);font-size:13px;padding:6px 12px;border-radius:14px;color:var(--txt-main)}
.kmp-tags a:hover{background:var(--accent-orange);color:#fff}

/* Footer */
.kmp-partner-logos{display:flex;justify-content:center;align-items:center;gap:40px;flex-wrap:wrap;padding:20px}
.kmp-footer{background:#3e2723;padding:20px 16px;overflow:hidden}
.kmp-footer .legal{overflow:hidden}
.kmp-footer table td{color:#fff}
.kmp-footer a{color:#fff}