/*
Theme Name: newstodayjkt.com
Description: News JKT cluster — Narrative Portrait editorial style. Built to match the SOPAN Media Partners Figma design exactly.
Author: SOPAN
Version: 1.0.0
Requires Plugins: sopan-media-network
Text Domain: newstodayjkt-com
*/

:root{
	--color-bg:#FBFAF8;
	--color-ink:#1E2126;
	--color-ink-2:#26211C;
	--color-primary:#1B4F9C;
	--color-accent:#F5811F;
	--color-muted:#9C9488;
	--color-rule:#EDE9E2;
	--color-footer-bg:#1E2126;
	--color-footer-muted:#8A9099;
	--color-footer-copy:#5C6169;
	--color-card-bg:#F6F4EE;
	--font-heading:'Lora', serif;
	--font-body:'Inter', sans-serif;
	--container-max:1440px;
	--gutter:48px;
}

*{ box-sizing:border-box; }
body{
	margin:0;
	font-family:var(--font-body);
	color:var(--color-ink);
	background:var(--color-bg);
	-webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ max-width:var(--container-max); margin:0 auto; padding:0 var(--gutter); }

/* Utility bar */
.sopan-utility{
	display:flex; justify-content:space-between;
	padding:8px var(--gutter);
	border-bottom:1px solid var(--color-rule);
	font-size:11px; color:var(--color-muted);
}

/* Masthead */
.sopan-masthead{
	text-align:center;
	padding:30px 0 18px;
}
.sopan-logo{
	font-family:var(--font-heading);
	font-size:38px; font-weight:700;
	display:inline-flex; gap:8px;
	color:var(--color-primary);
}
.sopan-logo span{ color:var(--color-accent); }
.sopan-tagline{
	display:block;
	font-size:11px; letter-spacing:2px;
	color:var(--color-muted);
	margin-top:6px;
}

.sopan-nav{
	display:flex; justify-content:center; gap:30px;
	list-style:none; margin:0; padding:14px 0;
	border-top:1px solid var(--color-rule);
	border-bottom:1px solid var(--color-rule);
}
.sopan-nav a{
	font-size:11px; font-weight:600; letter-spacing:.8px;
	text-transform:uppercase;
	color:var(--color-ink);
}
.sopan-nav__home a{ color:var(--color-primary); }
.sopan-nav__highlight a{ color:var(--color-accent) !important; }
.sopan-nav a:hover{ color:var(--color-primary); }

/* Hero row */
.sopan-hero-row{
	display:flex; gap:36px;
	padding:14px var(--gutter);
}
.sopan-hero-main{ flex:1 1 64%; }
.sopan-hero-main__thumb{
	width:100%; height:400px; object-fit:cover; background:#DDD8CE; margin-bottom:10px;
}
.sopan-hero-main__badge{
	display:inline-block;
	background:var(--color-accent);
	color:var(--color-white,#fff);
	font-size:10px; font-weight:700;
	padding:5px 11px;
	margin-bottom:20px;
}
.sopan-hero-main__cat{
	display:block;
	color:var(--color-accent);
	font-size:11px; font-weight:700;
	margin-bottom:6px;
}
.sopan-hero-main__title{
	font-family:var(--font-heading);
	font-size:32px; font-weight:600; line-height:1.28;
	margin:0 0 12px;
	color:var(--color-ink-2);
}
.sopan-hero-main__excerpt{
	font-size:14px; line-height:1.6; color:#666D76;
	margin:0 0 14px;
}
.sopan-hero-main__byline{ font-size:12px; color:var(--color-muted); }

.sopan-hero-side{ flex:1 1 36%; display:flex; flex-direction:column; gap:20px; }
.sopan-hero-side__label{
	font-size:11px; font-weight:700; color:var(--color-muted);
	margin:0;
}
.sopan-hero-side-item{ display:flex; gap:12px; }
.sopan-hero-side-item__thumb{ width:70px; height:70px; object-fit:cover; background:#DDD8CE; flex:none; }
.sopan-hero-side-item__title{
	font-family:var(--font-heading);
	font-size:15px; font-weight:600; line-height:1.28;
	margin:0 0 5px;
	color:var(--color-ink-2);
}
.sopan-hero-side-item__meta{ font-size:11px; color:var(--color-muted); }

/* Cerita Pilihan */
.sopan-pilihan{ padding:10px var(--gutter) 20px; }
.sopan-pilihan__title{
	display:inline-block;
	font-family:var(--font-heading);
	font-size:20px; font-weight:600;
	border-bottom:1px solid var(--color-primary);
	padding-bottom:6px;
	margin:0 0 20px;
	color:var(--color-ink-2);
}
.sopan-pilihan__grid{
	display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
.sopan-pilihan-card__thumb{ width:100%; height:209px; object-fit:cover; background:#DDD8CE; margin-bottom:10px; }
.sopan-pilihan-card__cat{ display:block; font-size:11px; font-weight:700; color:var(--color-accent); margin-bottom:6px; }
.sopan-pilihan-card__title{
	font-family:var(--font-heading);
	font-size:16px; font-weight:600; line-height:1.28;
	margin:0; color:var(--color-ink-2);
}

/* Kerja Sama & Rilis Pers */
.sopan-rilis-wrap{ padding:0 var(--gutter) 30px; }
.sopan-rilis{
	border:1px solid var(--color-rule);
	padding:24px;
}
.sopan-rilis__label{ font-size:11px; font-weight:700; color:var(--color-muted); margin:0 0 16px; }
.sopan-rilis__grid{ display:flex; gap:20px; }
.sopan-rilis-card{ flex:1; display:flex; gap:14px; }
.sopan-rilis-card__thumb{ width:96px; height:72px; object-fit:cover; background:#DDD8CE; flex:none; }
.sopan-rilis-card__badge{
	display:inline-block;
	border:1px solid var(--color-accent);
	color:var(--color-accent);
	font-size:9px; font-weight:700;
	padding:3px 7px;
	width:fit-content;
	margin-bottom:8px;
}
.sopan-rilis-card__title{
	font-family:var(--font-heading);
	font-size:14px; font-weight:600; line-height:1.28;
	margin:0; color:var(--color-ink-2);
}

/* Footer */
.sopan-footer{ background:var(--color-footer-bg); padding:26px 0; text-align:center; }
.sopan-footer__logo{
	font-family:var(--font-heading);
	font-size:20px; font-weight:700;
	color:#fff;
	display:inline-flex; gap:6px;
	margin-bottom:10px;
}
.sopan-footer__logo span{ color:var(--color-accent); }
.sopan-footer__network{ font-size:11px; color:var(--color-footer-muted); margin:0 0 6px; }
.sopan-footer__copy{ font-size:10px; color:var(--color-footer-copy); margin:0; }

/* Article — Narrative Portrait */
.sopan-article{
	max-width:900px;
	margin:0 auto;
	padding:24px var(--gutter) 0;
	text-align:center;
}
.sopan-article__cat{
	display:block;
	font-size:12px; font-weight:600; color:var(--color-accent);
	margin-bottom:8px;
}
.sopan-article__title{
	font-family:var(--font-heading);
	font-size:40px; font-weight:700; line-height:1.22;
	margin:0 0 20px;
	color:var(--color-ink-2);
}
.sopan-article__excerpt{
	font-family:var(--font-heading);
	font-size:17px; font-style:normal; line-height:1.55;
	color:var(--color-muted);
	max-width:780px;
	margin:0 auto 28px;
}
.sopan-article__byline{ font-size:12.5px; color:var(--color-muted); margin-bottom:22px; }
.sopan-article__thumb{ width:100%; height:460px; object-fit:cover; background:#DDD8CE; margin-bottom:14px; }
.sopan-article__caption{ font-size:11.5px; color:var(--color-muted); margin-bottom:40px; }

.sopan-article__body{
	max-width:720px;
	margin:0 auto;
	text-align:left;
	font-size:16px; line-height:1.75;
	color:var(--color-ink-2);
}
.sopan-article__body p{ margin:0 0 28px; }

.sopan-profile-card{
	max-width:720px;
	margin:0 auto 28px;
	background:var(--color-card-bg);
	border-radius:12px;
	padding:20px;
	display:flex;
	gap:20px;
	text-align:left;
}
.sopan-profile-card__avatar{ width:84px; height:84px; border-radius:50%; object-fit:cover; background:#DDD8CE; flex:none; }
.sopan-profile-card__name{ font-family:var(--font-heading); font-size:18px; font-weight:700; margin:0 0 2px; color:var(--color-ink-2); }
.sopan-profile-card__role{ font-size:12.5px; color:var(--color-muted); margin:0 0 8px; }
.sopan-profile-card__quote{ font-family:var(--font-heading); font-style:italic; font-size:14.5px; margin:0; color:var(--color-ink-2); }

.sopan-gallery{ max-width:720px; margin:0 auto 40px; text-align:left; }
.sopan-gallery__label{ display:block; font-size:11px; font-weight:700; color:var(--color-accent); margin-bottom:16px; }
.sopan-gallery__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.sopan-gallery__item img{ width:100%; height:150px; object-fit:cover; background:#DDD8CE; margin-bottom:8px; }
.sopan-gallery__caption{ font-size:11px; color:var(--color-muted); }

.sopan-baca-juga{
	max-width:720px; margin:54px auto 0;
	border-top:1px solid var(--color-rule);
	padding-top:24px;
}
.sopan-baca-juga h3{ font-size:12px; font-weight:700; color:var(--color-primary); margin:0 0 14px; }
.sopan-baca-juga__list{ display:flex; flex-direction:column; gap:10px; }
.sopan-baca-juga__list a{ font-size:14px; font-weight:600; color:var(--color-ink-2); }
.sopan-baca-juga__list a:hover{ color:var(--color-primary); }

@media (max-width:900px){
	.sopan-hero-row{ flex-direction:column; }
	.sopan-pilihan__grid{ grid-template-columns:1fr; }
	.sopan-rilis__grid{ flex-direction:column; }
	.sopan-article__title{ font-size:28px; }
	.sopan-profile-card{ flex-direction:column; text-align:center; align-items:center; }
	.sopan-gallery__grid{ grid-template-columns:1fr; }
	.sopan-nav{ flex-wrap:wrap; gap:14px; }
}