/* Tema jpost (desktop) - sitewide, dipakai di semua halaman tema ini (home,
   category, detail, indeks, search, static), bukan cuma home. Basisnya sama
   dgn kompas-style.css (kelas kmp-* dipertahankan krn category/detail/dst di
   tema ini masih pakai markup itu apa adanya) - tinggal ganti token warna &
   tambah kelas jp-* baru buat header/footer/home. Palet: putih/hitam + aksen
   merah + badge abu2, sans-serif - approximasi gaya thejakartapost.com (situs
   asli load CSS via JS/CDN, gak kebaca lewat fetch biasa, jadi ini bukan hasil
   scrape pixel-perfect, cuma pendekatan dari konvensi umum situs berita). */

:root{
	--brand-blue:#111111;
	--accent-orange:#c62828;
	--bg-body:#ffffff;
	--bg-main:#fff;
	--txt-main:#111111;
	--txt-muted:#555555;
	--txt-time:#888888;
	--border-list:#e2e2e2;
	--section-title-bg:#f7f7f7;

	--cat-news:#666;
	--cat-ekonomi:#666;
	--cat-olahraga:#666;
	--cat-otomotif:#666;
	--cat-hiburan:#666;
	--cat-gaya_hidup:#666;
	--cat-humanika:#666;
	--cat-info_desa:#666;
	--cat-warta_mpr:#666;
}

*{box-sizing:border-box}
body{
	margin:0;
	font-family:Arial,Helvetica,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:0 auto;background:var(--bg-main)}
.kmp-container{max-width:1100px;margin:0 auto}

/* ---- kmp-* (category/detail/indeks/search/static di tema ini) ---- */
.kmp-tag{display:inline-block;font-size:11px;font-weight:700;color:#333;background:#eee;padding:2px 8px;border-radius:2px;text-transform:uppercase;letter-spacing:.3px}
.kmp-tag.news,.kmp-tag.ekonomi,.kmp-tag.olahraga,.kmp-tag.otomotif,.kmp-tag.hiburan,
.kmp-tag.gaya_hidup,.kmp-tag.humanika,.kmp-tag.info_desa,.kmp-tag.warta_mpr,.kmp-tag.default{
	background:#eee;color:#333;
}

.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}
.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}
.kmp-cols{display:flex;gap:24px;padding:0 16px 20px}

.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:18px;font-weight:800;margin:0;text-transform:uppercase;color:var(--txt-main)}
.kmp-video-header a{font-size:13px;font-weight:600;color:var(--accent-orange)}
.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;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(--accent-orange);text-transform:none}

.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}
.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)}

.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}
.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(--txt-main);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)}

.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:Arial,Helvetica,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:Arial,Helvetica,sans-serif !important}
.kmp-empty-note{font-size:13px;color:var(--txt-time);padding:8px 0;font-style:italic}

.kmp-breadcrumb{font-size:13px;color:var(--txt-muted);margin-bottom:12px}
.kmp-breadcrumb a{color:var(--txt-main)}
.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%;background:#e2e2e2;aspect-ratio:16/9;object-fit:cover}
.kmp-article-fig iframe{width:100%;aspect-ratio:16/9;height:auto;border:0}
.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(--txt-main);background:var(--section-title-bg);margin:16px 0}
.kmp-baca-juga a{color:var(--txt-main)}
.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}

/* ---- jp-* baru: header/nav (ikutin screenshot header asli JP - logo serif
   rata tengah, burger+search kiri, subscribe kanan, nav rata tengah) ---- */
.jp-container{max-width:1100px;margin:0 auto}
.jp-topbar{background:#fafafa;border-bottom:1px solid var(--border-list)}
.jp-topbar-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px 16px;gap:16px}
.jp-topbar-left{display:flex;align-items:center;gap:14px}
.jp-icon-btn{background:none;border:none;font-size:19px;line-height:1;cursor:pointer;color:var(--txt-main);padding:0}
.jp-topbar-right{display:flex;justify-content:flex-end}

.jp-logo{position:relative;display:flex;align-items:center;justify-content:center;font-family:Georgia,'Times New Roman',serif;font-weight:800;font-size:34px;letter-spacing:-.5px;color:var(--txt-main);white-space:nowrap}
.jp-logo-accent{color:var(--accent-orange)}
.jp-logo-dot{position:absolute;top:-2px;left:-14px;width:8px;height:8px;border-radius:50%;background:var(--accent-orange)}
.jp-logo-img{height:40px;width:auto;display:block}

.jp-search-panel{max-height:0;overflow:hidden;background:#fff;border-bottom:1px solid var(--border-list);transition:max-height .2s ease}
.jp-search-panel.open{max-height:70px}
.jp-search-panel .jp-search{padding:14px 16px}
.jp-search input{width:100%;border:1px solid var(--border-list);border-radius:3px;padding:10px 12px;font-size:14px}

.jp-nav{background:#fff;border-bottom:1px solid var(--border-list);position:sticky;top:0;z-index:100}
.jp-nav-inner{padding:0 16px}
.jp-nav-menu{display:flex;justify-content:center;gap:26px;overflow-x:auto;list-style:none;margin:0;padding:0;height:44px;align-items:center;scrollbar-width:none;-ms-overflow-style:none}
.jp-nav-menu::-webkit-scrollbar{display:none}
.jp-nav-menu li{white-space:nowrap}
.jp-nav-menu a{color:var(--txt-main);font-family:Georgia,'Times New Roman',serif;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:4px 0;border-bottom:2px solid transparent}
.jp-nav-menu a:hover{color:var(--accent-orange);border-bottom-color:var(--accent-orange)}

/* Drawer (burger, desktop) - isi menu sama dgn jp-nav-menu, cuma tampilan lain */
.jp-drawer-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200}
.jp-drawer-backdrop.open{display:block}
.jp-drawer{background:#fff;width:320px;height:100%;position:relative;overflow-y:auto;box-shadow:2px 0 8px rgba(0,0,0,.2)}
.jp-drawer-close{position:absolute;top:14px;right:16px;background:none;border:none;font-size:26px;line-height:1;cursor:pointer;color:var(--txt-muted)}
.jp-drawer-menu{list-style:none;margin:0;padding:56px 0 20px}
.jp-drawer-menu li a{display:block;padding:14px 24px;font-family:Georgia,'Times New Roman',serif;font-weight:700;text-transform:uppercase;font-size:14px;color:var(--txt-main);border-bottom:1px solid var(--border-list)}
.jp-drawer-menu li a:hover{background:var(--section-title-bg);color:var(--accent-orange)}

/* ---- jp-* baru: footer ---- */
.jp-footer{background:#111;color:#ddd;padding:32px 16px 20px;margin-top:20px}
.jp-footer-contact{font-size:12px;color:#999;margin-bottom:14px;line-height:1.6}
.jp-footer-logo{color:#fff;font-weight:700;font-size:15px;text-transform:uppercase;margin-bottom:6px}
.jp-footer-legal{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;margin-bottom:14px}
.jp-footer-legal a{color:#999}
.jp-footer-legal a:hover{color:#fff}
.jp-footer-copyright{font-size:12px;color:#777;border-top:1px solid #333;padding-top:14px}

/* ---- jp-* baru: home ---- */
.jp-home{max-width:1100px;margin:0 auto;padding:16px}

.jp-hero-outer{display:grid;grid-template-columns:1fr 300px;gap:32px;margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--border-list)}
.jp-hero-main-col{display:flex;flex-direction:column}
.jp-hero-top{display:grid;grid-template-columns:.85fr 1.4fr;gap:24px;margin-bottom:24px}
.jp-hero-text{display:flex;flex-direction:column}
.jp-hero-title{font-size:24px;line-height:1.25;margin:0 0 10px;font-weight:700;color:var(--txt-main)}
.jp-hero-text a:hover .jp-hero-title{color:var(--accent-orange)}
.jp-hero-desc{font-size:14px;color:var(--txt-muted);margin:0 0 12px;line-height:1.5}
.jp-hero-time{font-size:12px;color:var(--txt-time);margin-top:auto}
.jp-hero-img-col{display:block}
.jp-hero-img{width:100%;aspect-ratio:4/3;overflow:hidden;background:#eee}
.jp-hero-img img{width:100%;height:100%;object-fit:cover;display:block}

.jp-hero-cards-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.jp-hero-sidebar{display:flex;flex-direction:column}
.jp-hero-sidebar-head{font-size:19px;font-weight:800;color:var(--txt-main);display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.jp-hero-sidebar-head a{font-size:12px;font-weight:400;color:var(--accent-orange);text-transform:none}
.jp-latest-item{display:block;padding:10px 0;border-bottom:1px solid var(--border-list)}
.jp-latest-item:last-child{border-bottom:none}
.jp-latest-title{display:block;font-size:14px;font-weight:600;line-height:1.35;color:var(--txt-main)}
.jp-latest-item:hover .jp-latest-title{color:var(--accent-orange)}

.jp-tag{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--accent-orange);margin:0 0 6px}

.jp-body{display:grid;grid-template-columns:1fr 300px;gap:32px;align-items:start}
.jp-section{border-top:1px solid var(--border-list);padding-top:14px;margin-bottom:28px}
.jp-section-title{font-size:18px;font-weight:700;margin:0 0 14px;display:flex;justify-content:space-between;align-items:baseline}
.jp-section-title a{font-size:12px;font-weight:400;color:var(--accent-orange);text-transform:uppercase}
.jp-section-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.jp-latest-feed{display:flex;flex-direction:column}
.jp-latest-row{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--border-list)}
.jp-latest-row:last-child{border-bottom:none}
.jp-latest-row-thumb{flex:0 0 120px;width:120px;aspect-ratio:1/1;overflow:hidden;background:#eee}
.jp-latest-row-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.jp-latest-row-body{flex:1;min-width:0}
.jp-latest-row-title{font-size:16px;font-weight:700;line-height:1.35;color:var(--txt-main);margin-bottom:6px}
.jp-latest-row:hover .jp-latest-row-title{color:var(--accent-orange)}
.jp-latest-row-desc{font-size:13px;color:var(--txt-muted);line-height:1.5;margin:0 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jp-latest-row-time{font-size:12px;color:var(--txt-time)}
.jp-card-img{width:100%;aspect-ratio:4/3;overflow:hidden;background:#eee}
.jp-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.jp-card-title{font-size:15px;font-weight:700;line-height:1.3;margin-top:8px}
.jp-card-time{font-size:11px;color:var(--txt-time);margin-top:4px}

.jp-sidebar-block{border-top:3px solid #111;padding-top:10px;margin-bottom:28px}
.jp-sidebar-block h3{font-size:15px;text-transform:uppercase;letter-spacing:.5px;margin:0 0 12px}
.jp-side-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid #eee}
.jp-side-item-img{width:72px;height:54px;flex-shrink:0;overflow:hidden;background:#eee}
.jp-side-item-img img{width:100%;height:100%;object-fit:cover;display:block}
.jp-side-item-title{font-size:13px;font-weight:700;line-height:1.3}
.jp-pop-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid #eee;align-items:baseline}
.jp-pop-num{font-size:20px;font-weight:700;color:#ccc;flex-shrink:0;width:20px}
.jp-pop-title{font-size:13px;font-weight:700;line-height:1.3}

.jp-empty-note{font-size:13px;color:var(--txt-time);padding:12px 0}

@media (max-width:900px){
	.jp-hero-outer{grid-template-columns:1fr}
	.jp-hero-top{grid-template-columns:1fr}
	.jp-hero-cards-row{grid-template-columns:repeat(2,1fr)}
	.jp-body{grid-template-columns:1fr}
	.jp-section-grid{grid-template-columns:repeat(2,1fr)}
}