:root {
	/* 1. Warna Utama Bawaan custom.minbc1ddef.css */
	--brand-primary: #f36f26; /* Warna utama web */
	--brand-dark: #da550c; /* Warna utama versi gelap (untuk hover) */
	--brand-light: #f8af87; /* Warna utama versi muda/transparan */
	--brand-secondary: #393e41; /* Warna kedua (biasanya untuk navbar/footer dark) */
	--text-dark: #222; /* Warna teks utama */
	--text-muted: #697277; /* Warna teks sekunder/redup */
	--border-light: #d9dbe9; /* Warna garis pembatas ringan */
	--bg-white: #fff; /* Warna latar belakang kontainer */
	--bg-disabled: #f7f7fc; /* Warna latar form disabled */

	--accent-primary: #ff6600; /* Warna aksen untuk tombol & form fokus */
	--accent-light: #ffb347; /* Warna aksen versi muda */

	--gradient-start: #f2641f; /* Awal gradasi header/sidebar */
	--gradient-end: #fbac3e; /* Akhir gradasi header/sidebar */
	--text-charcoal: #333; /* Warna teks konten */
	--bg-soft-gray: #fafafa;
	--alert-red: #d10000;
	--reply-border: #ff9800; /* Garis pembatas box balasan admin */
	--info-border: #ffc107; /* Garis pembatas box info/alert */

	/* 3. Warna Statis/Sosial Media Bawaan */
	--fb-color: #3b5998;
	--gp-color: #dd4b39;
	--ig-color: #c13584;
	--yt-color: #cd201f;
	--wa-color: #25d366;
	--tt-color: #111;
	--rss-color: #f26522;
}

.breadcrumb__item:first-child,
.editors__subtitle,
.footer__link:hover,
.footer__menu.inline .footer__link:hover,
.hl__s-title a:hover,
.latest__author,
.latest__button,
.latest__subtitle,
.network__menu li:hover .icon-search:before,
.network__menu li:hover a,
.photos__title a:hover,
.read__info,
.read__others,
.videos__title a:hover,
a:hover {
	color: var(--brand-primary);
}
.breaking__content a:hover,
.filter__title,
.nav__more .icon:hover,
.opinion__author__title a:hover,
.title {
	color: var(--brand-dark);
}
.network__title a:hover,
.topic .title span a:hover,
.topic__title a:hover {
	color: var(--brand-secondary);
}
.arrow,
.arrow:hover {
	color: var(--text-dark);
}
.photo__author,
.photo__caption {
	color: var(--text-muted);
}
.editors__date,
.footer,
.footer__link,
.network__date,
.topic__date,
.videos__date {
	color: var(--border-light);
}
.ads__sticky__bottom .ads__button,
.ads__sticky__bottom .ads__button:hover,
.breaking__title span,
.editors .title,
.editors__title,
.hl__b-subtitle,
.hl__b-subtitle:hover,
.latest__button:hover,
.nav__more .icon,
.network .title span,
.network__title,
.photos .title,
.photos__title,
.tag__list li a,
.tag__list li a:hover,
.topic .title,
.topic__title,
.videos .title,
.videos__title,
.widget__mail__footer a,
.widget__mail__footer a:hover {
	color: var(--bg-white);
}
.ads__sticky__bottom .ads__button,
.hl__b-subtitle,
.latest__button:hover,
.nav__more a:hover .icon,
.network__city,
.paging__link--show,
.photos .title:after,
.tag__list li a,
.topic__b-cat,
.videos .title:after,
.widget__mail__footer a {
	background-color: var(--brand-primary);
}
.ads__sticky__bottom .ads__button:hover,
.hl__b-subtitle:hover,
.network__city:hover,
.read__next,
.tag__list li a:hover,
.widget__mail__footer a:hover {
	background-color: var(--brand-dark);
}
.breaking__wrap,
.widget__mail__footer {
	background-color: var(--brand-light);
}
.footer,
.title:after {
	background-color: var(--brand-secondary);
}
input[type="password"]:disabled,
input[type="text"]:disabled {
	background-color: var(--bg-disabled);
}
.breaking__title span:before,
.button,
.editors .title:after,
.photo__icon,
.topic .title:after,
body,
button,
input,
select,
textarea {
	background-color: var(--bg-white);
}
.photo img {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
}
.button,
button,
input,
select,
textarea {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
	-moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
	-o-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}
.button:focus,
.button:hover,
button:focus,
button:hover,
input:focus,
input:hover,
select:focus,
select:hover,
textarea:focus,
textarea:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	-moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	-o-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
textarea {
	display: block;
}
.photo__icon {
	display: inline-block;
}
.page,
.photo,
.photo__author,
.photo__wrap {
	position: relative;
}
.photo__icon__expand {
	position: absolute;
}
.page__teaser {
	font-size: 16px;
	line-height: 1.5;
	font-weight: 400;
}
.button,
.photo__caption,
button,
input,
select,
textarea {
	font-size: 13px;
	line-height: 1.5;
	font-weight: 400;
}
.photo__author {
	font-size: 11px;
	line-height: 1.5;
	font-weight: 400;
}
.photo__icon {
	font-size: 16px;
	line-height: 1.5;
	font-weight: 600;
}
.photo__icon {
	text-align: center;
}
.photo__caption {
	text-align: left;
}
.header__bottom {
	background: linear-gradient(90deg, var(--gradient-start) 0, var(--gradient-end) 79.66%);
}
.logo img {
	padding: 5px 0;
	width: auto;
	height: 60px;
}
.p404__title {
	color: var(--brand-primary);
}
.p404__subtitle {
	color: var(--brand-primary);
}
.p404__content {
	color: var(--text-dark);
}
.p404__link {
	background: var(--brand-primary);
}
.p404__link:hover {
	background: var(--brand-dark);
}
.breaking__title span {
	background-color: var(--accent-primary);
}
.button--login:hover {
	background: var(--brand-primary);
}
.editors {
	background-color: var(--text-muted);
	border: 3px solid var(--brand-primary);
}
.hl__s-item.slick-current:after {
	border-top: 7px solid var(--brand-primary);
}
.hl .slick-dots li.slick-active button {
	background: var(--brand-primary);
}
.hl .slick-dots li button:before {
	content: "";
}
.latest__button {
	border: 2px solid var(--brand-primary);
}
.nav li:hover {
	cursor: pointer;
	color: var(--brand-primary);
}
.nav li ul li a {
	color: var(--text-dark) !important;
}
.nav li ul li a:hover {
	color: var(--brand-secondary) !important;
}
.nav li a {
	color: var(--bg-white) !important;
}
.nav li a.active,
.nav li a:hover {
	color: var(--brand-secondary) !important;
}
.nav__home .icon {
	color: var(--bg-white) !important;
}
.nav__home .icon:hover {
	color: var(--brand-secondary) !important;
}
.nav__more a {
	color: var(--bg-white) !important;
}
.nav__more a:hover {
	color: var(--brand-secondary) !important;
}
.nav__more li a {
	color: var(--text-dark) !important;
}
.nav__wrap.more a {
	color: var(--text-dark) !important;
}
.nav__wrap.more a:hover {
	color: var(--brand-primary) !important;
}
.network {
	background: var(--brand-primary);
}
.network__menu li:hover .icons-search {
	color: var(--brand-primary);
}
.network__menu li:hover .social .social__link--facebook {
	color: var(--fb-color);
}
.network__menu li:hover .social .social__link--twitter {
	color: var(--tt-color);
}
.network__menu li:hover .social .social__link--google-plus {
	color: var(--gp-color);
}
.network__menu li:hover .social .social__link--instagram {
	color: var(--ig-color);
}
.network__menu li:hover .social .social__link--rss {
	color: var(--rss-color);
}
.network__menu li:hover .social .social__link--whatsapp {
	color: var(--wa-color);
}
.network__menu li:hover .social .social__link--youtube {
	color: var(--yt-color);
}
.network__menu li:hover .social .social__link--tiktok {
	color: var(--tt-color);
}
.network__menu li ul {
	border-bottom: 2px solid var(--brand-primary);
}
.network__menu li ul li a:hover {
	color: var(--brand-primary) !important;
}
.network__city {
	color: var(--bg-white) !important;
}
.network__city:hover a {
	color: var(--bg-white) !important;
}
.network .title span {
	background-color: transparent;
}
.network__sidebar .network__city {
	color: var(--brand-primary);
}
.network__sidebar .network__link:hover {
	color: var(--brand-primary);
}
.opinion__item:hover .opinion__img {
	border: 5px solid var(--brand-primary);
}
.paging__link {
	border: 1px solid var(--brand-primary);
}
.paging__link--active,
.paging__link:hover {
	background: var(--brand-primary);
}
.photo {
	margin-bottom: 20px;
}
.photo__main {
	width: 1100px;
}
@media (min-width: 1100px) {
	.photo__main {
		width: 100%;
	}
}
.photo img {
	width: 100%;
}
.photo__author {
	display: inline;
	padding: 0 5px;
}
.photo__caption {
	padding: 10px 0;
}
.photo__icon {
	width: 40px;
	height: 40px;
	border-radius: 40px;
	padding: 10px;
}
.photo__icon__expand {
	top: 15px;
	right: 15px;
	z-index: 1;
}
.photos {
	background: var(--brand-secondary);
}
.photos__item {
	background-color: transparent;
}
.read__info__author a {
	color: var(--accent-primary);
}
.read__content a {
	color: var(--accent-primary);
}
.read__next {
	border-color: var(--brand-primary);
}
.read__next:hover {
	background-color: var(--brand-primary);
}
.read__others {
	border-color: var(--brand-primary);
}
.read__others a {
	color: var(--brand-dark);
}
.read__others a:hover {
	color: var(--accent-primary);
}
.page__teaser {
	padding: 0 0 30px;
}
.page__teaser a {
	color: var(--brand-primary);
}
.filter {
	border-bottom: 1px solid var(--brand-primary);
}
.title {
	position: relative;
	height: fit-content;
}
.title span {
	padding-left: 10px;
}
.title:after {
	position: absolute;
	left: 0;
	width: 4px;
	height: 60%;
}
.topic {
	background: linear-gradient(360deg, #ed190e 0, var(--brand-primary) 73.86%);
}
.topic__item {
	background-color: transparent;
}
.videos {
	background: var(--brand-secondary);
}
.videos__item {
	background-color: transparent;
}
.widget__salat a {
	color: var(--brand-primary);
}
.footer {
	border-top: 3px solid var(--brand-primary);
}
.footer__logo img {
	height: 45px;
}
.footer__menu.inline .footer__link {
	color: var(--text-muted);
}
body:after {
	content: "";
	background: 0 0;
}
#modals {
	visibility: hidden;
	opacity: 0;
}
.modals__button {
	color: var(--brand-primary);
}
.row__bg {
	background-color: var(--brand-primary);
}
.button,
button,
input,
select,
textarea {
	margin: 0;
	padding: 6px 12px;
	border-radius: 0;
	border: 1px solid var(--bg-disabled);
	outline: 0;
	transition: all 0.2s ease;
}
.button:focus,
.button:hover,
button:focus,
button:hover,
input:focus,
input:hover,
select:focus,
select:hover,
textarea:focus,
textarea:hover {
	border: 1px solid #a2a2a2;
}
input[type="password"],
input[type="text"],
select {
	height: 45px;
}
input[type="password"]:disabled,
input[type="text"]:disabled {
	color: #c2bebe;
}
input[type="password"]:disabled:focus,
input[type="password"]:disabled:hover,
input[type="text"]:disabled:focus,
input[type="text"]:disabled:hover {
	border: solid 1px var(--bg-disabled);
	box-shadow: inherit;
}
textarea {
	min-height: 100px;
	max-width: 100%;
	width: 100%;
	resize: none;
}
button,
input[type="checkbox"],
input[type="radio"],
input[type="reset"],
input[type="submit"] {
	cursor: pointer;
}
.form__button {
	height: 45px;
	background: var(--brand-primary);
}
.form__button:focus,
.form__button:hover {
	background: var(--accent-primary);
	border: 1px solid var(--accent-primary);
}
.social--header .social__link--facebook {
	color: var(--fb-color);
}
.social--header .social__link--twitter {
	color: var(--tt-color);
}
.social--header .social__link--google-plus {
	color: var(--gp-color);
}
.social--header .social__link--instagram {
	color: var(--ig-color);
}
.social--header .social__link--rss {
	color: var(--rss-color);
}
.social--header .social__link--whatsapp {
	color: var(--wa-color);
}
.social--header .social__link--youtube {
	color: var(--yt-color);
}
.social--header .social__link--tiktok {
	color: var(--tt-color);
}
.social--header .social__link:hover {
	background: var(--brand-light);
}
.arrow:hover {
	background: var(--brand-primary);
}

.hl .slick-prev,
.hl .slick-next,
.hl .owl-nav {
	display: none !important;
}

.topic__new__img {
	width: 230px;
	height: 138px;
	overflow: hidden;
}

.topic__new__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.photos__img img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	border-radius: 6px;
}

.sidebar-kategori {
	background: #fff;
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
	font-family: "Segoe UI", sans-serif;
}

/* Gambar cover kategori di atas */
.cover-kategori img {
	width: 100%;
	height: auto;
	display: block;
	border-bottom: 1px solid #f0f0f0;
}

/* Area daftar berita */
.sidebar-berita {
	padding: 12px 15px;
}

/* Item berita */
.item-berita {
	display: flex;
	align-items: flex-start;
	margin-bottom: 12px;
	border-bottom: 1px dashed #ccc;
	padding-bottom: 10px;
}

.item-berita:last-child {
	border-bottom: none;
}

/* Gambar berita kecil */
.item-berita img {
	width: 120px;
	/* ← pastikan semua gambar lebar sama */
	height: 80px;
	/* ← tinggi proporsional */
	object-fit: cover;
	/* ← agar isi gambar tidak gepeng */
	border-radius: 8px;
	margin-right: 12px;
	flex-shrink: 0;
	display: block;
	background: #f4f4f4;
}

.konten-berita a {
	font-size: 0.9rem;
	color: var(--text-dark);
	font-weight: 600;
	text-decoration: none;
	display: block;
	line-height: 1.4;
	white-space: normal;
	transition: color 0.2s ease;
}
.konten-berita a:hover {
	color: var(--brand-dark);
}
.konten-berita .tanggal {
	display: block;
	font-size: 0.8rem;
	color: var(--brand-dark);
	margin-top: 3px;
}
.item-berita:hover {
	background-color: var(--bg-soft-gray);
	border-radius: 8px;
	transition: background 0.2s ease;
}
@media (max-width: 768px) {
	.item-berita img {
		width: 90px;
		height: 65px;
	}
	.konten-berita a {
		font-size: 0.85rem;
	}
} /* --- Sidebar Memilih --- */
.sidebar-memilih {
	border-radius: 12px;
	overflow: hidden;
	background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
	color: var(--bg-white);
	font-family: "Poppins", sans-serif;
	position: relative;
	margin-bottom: 20px;
}
.sidebar-memilih .cb-pemilu__logo {
	width: 100%;
	max-height: 70px;
	object-fit: contain;
}
.sidebar-memilih .bg-flag {
	background: linear-gradient(90deg, var(--accent-primary), var(--accent-light));
	height: 50px;
	position: relative;
	text-align: center;
	padding-top: 12px;
}
.sidebar-memilih .bg-flag::after {
	content: "";
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 15px solid var(--bg-white);
}
.sidebar-memilih .cb-pemilu__desc {
	padding: 10px;
	background: var(--bg-white);
	color: var(--text-charcoal);
	border-bottom: 1px solid #eee;
}
.sidebar-memilih .cb-pemilu__desc small {
	font-size: 13px;
}
.sidebar-memilih .btn--pemilu {
	background: linear-gradient(90deg, var(--accent-primary), var(--accent-light));
	border: none;
	border-radius: 6px;
	padding: 4px 10px;
	text-decoration: none;
	transition: 0.3s;
}
.sidebar-memilih .btn--pemilu:hover {
	background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
}
.sidebar-memilih .list-dua-kolom {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	padding: 10px;
	background: var(--bg-white);
}
.sidebar-memilih .list-dua-kolom li {
	width: calc(50% - 5px);
	list-style: none;
}
.sidebar-memilih .card-box {
	background: var(--bg-soft-gray);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s;
}
.sidebar-memilih .card-box:hover {
	transform: scale(1.03);
}
.sidebar-memilih .img-card img {
	width: 100%;
	height: 80px;
	object-fit: cover;
}
.sidebar-memilih .text-card {
	padding: 6px 8px;
}
.sidebar-memilih .text-card p a {
	color: var(--text-charcoal);
	font-size: 13px;
	text-decoration: none;
}
.sidebar-memilih .text-card .date {
	font-size: 11px;
	color: #999;
} /* --- Area Utama Komentar --- */
.comment-section {
	background: var(--bg-white);
	border-radius: 12px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
	padding: 20px;
	margin-top: 30px;
	font-family: "Segoe UI", Arial, sans-serif;
}
.block-title {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 15px;
	color: var(--text-charcoal);
}
.block-title span {
	border-left: 5px solid var(--accent-primary);
	padding-left: 8px;
}
.comment {
	display: flex;
	align-items: flex-start;
	margin-bottom: 20px;
	border-bottom: 1px solid #f0f0f0;
	padding-bottom: 15px;
}
.comment:last-child {
	border-bottom: none;
}
.comment-img img {
	width: 55px;
	height: 55px;
	border-radius: 50%;
	object-fit: cover;
	margin-right: 15px;
	border: 2px solid #ffe0b2;
}
.comment-body {
	flex: 1;
}
.comment-body .author {
	font-weight: 600;
	color: var(--brand-secondary);
	font-size: 15px;
}
.comment-body .date {
	font-size: 12px;
	color: #999;
	margin-bottom: 8px;
}
.comment-body p {
	margin-bottom: 0;
	color: #444;
}
.reply-box {
	margin-left: 2px;
	background: #f9f9f9;
	border-left: 4px solid var(--reply-border);
	border-radius: 8px;
	padding: 10px 15px;
	margin-top: 10px;
}
.reply-box .author {
	color: var(--accent-primary);
	font-weight: bold;
}
.reply-box .date {
	color: #999;
	font-size: 12px;
}
.comment-form {
	background: #f9f9f9;
	border-radius: 12px;
	padding: 20px;
	margin-top: 25px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.comment-form input,
.comment-form textarea {
	width: 100%;
	padding: 10px 12px;
	margin-bottom: 10px;
	border: 1px solid #ddd;
	border-radius: 10px;
	font-size: 14px;
	transition: 0.2s;
	font-family: inherit;
}
.comment-form input:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var(--accent-primary);
	box-shadow: 0 0 4px var(--brand-light);
}
.comment-form textarea {
	resize: none;
	min-height: 100px;
}
.comment-form button {
	background: var(--accent-primary);
	color: var(--bg-white);
	border: none;
	border-radius: 25px;
	padding: 10px 20px;
	font-size: 14px;
	cursor: pointer;
	transition: 0.3s;
}
.comment-form button:hover {
	background: var(--brand-dark);
}
.alert-info {
	background-color: #fff8e1;
	border-left: 4px solid var(--info-border);
	color: #444;
	padding: 10px 15px;
	border-radius: 8px;
	margin-bottom: 15px;
	font-size: 14px;
}
.alert-info img {
	float: left;
	margin-right: 10px;
	width: 50px;
}
.swal-mini {
	border-radius: 12px !important;
	width: 280px !important;
	font-family: "Poppins", sans-serif;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.swal-mini-title {
	font-size: 1rem !important;
	font-weight: 600 !important;
	margin-bottom: 0.5rem;
}
.swal-mini-btn {
	font-size: 0.8rem !important;
	padding: 5px 14px !important;
	border-radius: 8px !important;
}
.btn-download {
	display: inline-block;
	padding: 8px 20px;
	border: 1px solid var(--accent-primary);
	color: var(--accent-primary);
	text-decoration: none;
	border-radius: 4px;
	font-size: 14px;
	transition: 0.3s;
}
.btn-download:hover {
	background: var(--accent-primary);
	color: var(--bg-white);
}

/* kategori berita */
.kategori {
	list-style: none;
	padding: 0;
	margin: 0;
}

.kategori li {
	margin-bottom: 10px;
}

.kategori li a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 14px;
	border-radius: 8px;
	background: #f5f7fa;
	text-decoration: none;
	transition: all 0.25s ease;
}

.kategori-nama {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-charcoal);
}

.kategori-jumlah {
	background: linear-gradient(90deg, var(--gradient-start) 0, var(--gradient-end) 100%);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 20px;
	min-width: 28px;
	text-align: center;
}

.kategori li a:hover {
	background: var(--brand-primary);
	transform: translateX(4px);
}

.kategori li a:hover .kategori-nama {
	color: #fff;
}

.kategori li a:hover .kategori-jumlah {
	background: #fff;
	color: var(--brand-dark);
}
