/* Extra tweaks + responsive layers. Layout utama ada di main.css. */
.brand-title,
.brand-description,
.screen-reader-text {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	clip-path: inset(50%) !important;
	height: 1px !important;
	width: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	white-space: nowrap !important;
}

.author-box .social-box,
.author-box .aut-medsos-box { display: flex; gap: 10px; justify-content: center; }
.author-box .aut-medsos-box a {
	width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
	background: var(--primary); color: #fff; border-radius: 50em;
}
.author-box .aut-medsos-box svg { width: 14px; height: 14px; }

/*
 * Responsive — .content/.container mengunci 1024px di desktop.
 * Di bawah itu layout menumpuk & full-width agar tidak kepotong.
 */

/* ---------- Tablet / resize < 1024 ---------- */
@media (max-width: 1023px) {
	html,
	body {
		overflow-x: hidden;
		max-width: 100%;
	}

	.content {
		min-width: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.container {
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 16px;
		padding-right: 16px;
		box-sizing: border-box;
	}

	.billboard.parallax {
		min-width: 0 !important;
		max-width: 100% !important;
		width: 100%;
	}

	.network-menu nav {
		width: 100% !important;
		max-width: 100%;
		padding: 0 16px;
		box-sizing: border-box;
	}

	.article-row {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	.article,
	.sidebar {
		width: 100% !important;
		max-width: 100% !important;
	}

	.sticky-ads-left,
	.sticky-ads-right,
	.article-adv {
		display: none !important;
	}

	.article-content,
	.article-content.notfull {
		display: block !important;
	}

	.article-content.notfull .article-box,
	.article-content .article-box {
		max-width: 100% !important;
		width: 100% !important;
	}

	.article-text {
		max-width: 100% !important;
	}

	.headline-row {
		flex-direction: column;
	}

	.headline-big,
	.headline-small {
		width: 100% !important;
		padding-left: 0 !important;
	}

	.headline-small {
		margin-top: 16px;
	}

	.footer-left,
	.footer-right {
		width: 100% !important;
	}

	.footer-right {
		flex-direction: column;
		gap: 20px;
	}

	.banner.ads72890,
	.banner.ads970250,
	.banner.ads300300,
	.banner.ads300600,
	.ibr-ad img,
	.ads-slot img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
	}

	img,
	.wp-post-image,
	.article-featured img,
	.article-text img {
		max-width: 100% !important;
		height: auto !important;
	}

	iframe,
	embed,
	video,
	.wp-block-embed {
		max-width: 100% !important;
	}

	table {
		display: block;
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: auto;
	}

	.on-top {
		transform: none !important;
		right: 15px;
		left: auto;
		margin: 0;
	}
}

/* ---------- Mobile / tablet portrait ≤ 991 ---------- */
@media (max-width: 991px) {
	.header-center { display: none; }
	.header-center.is-open {
		display: flex !important;
		position: absolute;
		left: 12px;
		right: 12px;
		top: 54px;
		z-index: 20;
		background: #fff;
		padding: 8px;
		border-radius: 8px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
	}
	body.darkmode .header-center.is-open { background: #1a1a1a; }

	.header-menu {
		display: none !important;
	}

	.header-date {
		display: none !important;
	}

	.header-search-mobile,
	.menubar {
		display: flex !important;
		width: 36px;
		height: 36px;
		align-items: center;
		justify-content: center;
		color: var(--primary);
	}

	button.network span {
		display: none;
	}

	.network-menu {
		top: 100%;
		padding: 12px 15px;
	}

	.network-menu nav {
		width: 100%;
	}

	.network-menu li {
		width: calc(50% - 6px);
	}

	.header-right {
		gap: 0;
	}

	.headline-small .media-image {
		height: 85px;
		padding-bottom: 0;
	}

	.headline-big .media-image {
		padding-bottom: 62%;
	}

	.grid .media,
	.video .media {
		width: calc(50% - 8px);
	}

	.slider .grid-item {
		flex: 0 0 50%;
		width: 50%;
		max-width: 50%;
	}

	.video .media:first-child {
		width: 100%;
	}

	.billboard.parallax {
		height: var(--heightparallaxmobile);
	}

	.parallax-mobile {
		display: block;
	}

	.banner.ads72890,
	.banner.ads970250 {
		width: 100%;
		height: 90px;
	}

	.sidebarmenu {
		width: 100%;
		right: -100%;
		max-width: 100%;
	}

	.ads-sticky-bottom {
		width: 100%;
		left: 0;
		right: 0;
	}

	.widget-subheader {
		flex-wrap: wrap;
	}

	.indeks-page .indeks-filter {
		gap: 10px;
	}

	.indeks-filter .btn-form-indeks {
		width: 100%;
	}

	.indeks .media {
		gap: 12px;
	}

	.indeks .media-image {
		width: 110px;
		flex: 0 0 110px;
		padding-bottom: 18%;
	}

	.indeks .media-title {
		font-size: 16px;
		margin-top: 4px;
	}

	.page-nav {
		display: none !important;
	}

	.article-header h1 {
		font-size: 22px;
		line-height: 1.3;
		word-wrap: break-word;
	}

	.article-subheader {
		flex-wrap: wrap;
		gap: 12px;
	}

	.notfound-title h1 {
		font-size: 80px;
	}

	.list .media,
	.list2 .media,
	.list3 .media {
		width: 100%;
	}

	.sidebar .widget:last-child {
		position: static;
	}
}

/* ---------- HP kecil ≤ 575 ---------- */
@media (max-width: 575px) {
	.container {
		padding-left: 12px;
		padding-right: 12px;
	}

	.grid .grid-box {
		gap: 12px;
	}

	.grid .media,
	.video .media {
		width: 100% !important;
	}

	.slider .grid-item {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
	}

	.indeks .media {
		flex-direction: row;
	}

	.indeks .media-image {
		width: 96px;
		flex: 0 0 96px;
	}

	.indeks .media-title {
		font-size: 15px;
	}

	.headline-small .media {
		gap: 10px;
	}

	.headline-small .media-image {
		width: 96px;
		flex: 0 0 96px;
		height: 64px;
	}

	.breaking-title {
		font-size: 11px;
		padding: 0 8px;
		white-space: nowrap;
	}

	.article-header h1 {
		font-size: 1.25rem;
	}

	.article-text {
		font-size: 15px;
		line-height: 1.55;
		overflow-wrap: anywhere;
	}

	.footer-contact {
		font-size: 12px;
	}

	.share-title {
		display: none;
	}

	.redaksi {
		flex-wrap: wrap;
	}

	.video .media:first-child .media-title {
		font-size: 18px;
	}

	.sidebarmenu-content ul.menu li {
		width: 100%;
	}
}