/* ======= Custom CSS for this web ======== */

	ul.sticky a { 
	   text-decoration: none;
	}

	ul.sticky {
	   list-style: none;
	   margin: 0;
	   padding: 0;
	}

	#sticky-social {
	   right: 0;
	   position: fixed;
	   top: 165px;
	   z-index: 1001;
	}

	#sticky-social a {
	   background: #333;
	   color: #fff;
	   display: block;
	   height: 35px;
	   font: 16px "Open Sans", sans-serif;
	   line-height: 35px;
	   position: relative;
	   text-align: center;
	   width: 35px;
	}

	#sticky-social a:hover span {
	   right: 100%;
	}

	#sticky-social a span {
	   line-height: 35px;
	   right: -120px;
	   position: absolute;
	   text-align:center;
	   width:120px;
	}

	#sticky-social a[class*="facebook"],
	#sticky-social a[class*="facebook"]:hover,
	#sticky-social a[class*="facebook"] span { background: #3b5998; }

	#sticky-social a[class*="twitter"],
	#sticky-social a[class*="twitter"]:hover,
	#sticky-social a[class*="twitter"] span { background: #00aced; }

	#sticky-social a[class*="gplus"],
	#sticky-social a[class*="gplus"]:hover,
	#sticky-social a[class*="gplus"] span { background: #dd4b39; }	

	#sticky-social a[class*="linkedin"],
	#sticky-social a[class*="linkedin"]:hover,
	#sticky-social a[class*="linkedin"] span { background: red; }	

	#sticky-social a[class*="instagram"],
	#sticky-social a[class*="instagram"]:hover,
	#sticky-social a[class*="instagram"] span { background: #517fa4; }	

	#sticky-social a[class*="stumbleupon"],
	#sticky-social a[class*="stumbleupon"]:hover,
	#sticky-social a[class*="stumbleupon"] span { background: #eb4924; }	

	#sticky-social a[class*="pinterest"],
	#sticky-social a[class*="pinterest"]:hover,
	#sticky-social a[class*="pinterest"] span { background: #cc2127; }	

	#sticky-social a[class*="flickr"],
	#sticky-social a[class*="flickr"]:hover,
	#sticky-social a[class*="flickr"] span { background: #ff0084; }	

	#sticky-social a[class*="tumblr"],
	#sticky-social a[class*="tumblr"]:hover,
	#sticky-social a[class*="tumblr"] span { background: #32506d; }

	@media (min-width: 770px) {
		.left-column {
			padding-right: 15px !important;
		}

		.right-column {
			padding-left: 15px !important;
		}
	}

	.row {
		margin: unset !important;
	}

	@font-face {
		font-family: 'Myriad Pro';
		src: url('https://banglikab.go.id/assets_baru/css/<?php%20echo%20$basefile;?>assets/fonts/MyriadPro-Cond.otf');
		/*font-weight: normal;*/
		font-style: condensed;
	}

	.myriadpro {
		/* font-family: 'Myriad Pro'; */
		font-family: 'Roboto', sans-serif;
		/*font-weight: bold;*/
	}

	.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
		background-color: #14a95d;
	}

	/* PHASE 1 - QUICK WINS: Modern Hover Color */
	.header-top.header-primary .navbar-nav>li>a:hover {
		background-color: var(--color-primary, #0A4A7A);
	}

	/* PHASE 1 - QUICK WINS: Modern Color Palette */
	.header-main.affix.header-transparent {
		background-color: var(--color-primary-dark, #1E3A5F);
	}

	.header-main.header-transparent .navbar-nav>li>a:hover {
		background-color: var(--color-primary, #0A4A7A);
	}

	.header-main.header-transparent {
		background-color: var(--color-primary-dark, #1E3A5F);
	}

		img.logo {
			height: 76px;
		}

		.navbar {
			min-height: 80px;
		}

		.header-main.affix .navbar-nav>li>a {
			padding-top: 23px;
			padding-bottom: 27px;
		}

		/* PHASE 1 - QUICK WINS: Modern Header Color */
		header .header-primary {
			background: var(--color-primary-light, #1A7DD0);
		}

		.header-top {
			z-index: 1000;
			position: unset;
		}

		/* PHASE 2 - MEDIUM CHANGES: Touch-friendly Navigation */
		.header-main .navbar-nav>li>a {
			padding: 30px 15px;
			font-size: 11px;
			min-height: 44px;
		}
		
		@media (max-width: 991px) {
			.header-main .navbar-nav>li>a {
				padding: var(--spacing-md, 16px) var(--spacing-sm, 8px);
				min-height: 48px;
				font-size: 14px;
			}
		}

		/* PHASE 2 - MEDIUM CHANGES: Touch-friendly Nav Items */
		.nav>li>a {
			padding: var(--spacing-sm, 8px);
			min-height: 44px;
			display: flex;
			align-items: center;
		}
		
		@media (max-width: 768px) {
			.nav>li>a {
				padding: var(--spacing-md, 16px);
				min-height: 48px;
			}
		}

		@media (min-width: 768px) {
			.navbar-nav>li>a {
				padding-top: 10px;
				padding-bottom: 10px;
			}
		}

		.navbar-brand {
			padding: 1px 15px;
		}

		/* Navbar Shrink CSS*/
		
		.navbar-brand > img {
			/*width:100%;
			height:66px;
			max-width: 305px;
			margin-top:-20px;
			*/
			transition: all 0.3s;
		}

		div.shrink .navbar-brand > img {
			height: 65px;
			/*margin-top: 40px;*/
			transition: all 0.3s;
		}

		img.mbl {
			position: absolute;
			z-index: 1001;
			left: 10px;
			top: 6px;
			height: 65px;
		}

		/* PHASE 1 - QUICK WINS: Modern Dropdown Hover */
		.header-main.header-transparent .dropdown-menu a:not(.btn):hover {
			background: var(--color-primary, #0A4A7A);
			color: #fff;
		}

		/***********************
		 * Essential Structure *
		 ***********************/
		.flexsearch--wrapper {
		  height: auto;
		  width: auto;
		  max-width: 100%;
		  overflow: hidden;
		  background: transparent;
		  margin: 0;
		  position: static;
		}

		.flexsearch--form {
		  overflow: hidden;
		  position: relative;
		}

		.flexsearch--input-wrapper {
		  /*padding: 0 66px 0 0;*/
		  padding-left: 20px;
		  /* Right padding for submit button width */
		  overflow: hidden;
		}

		.flexsearch--input {
		  width: 100%;
		}

		/***********************
		 * Configurable Styles *
		 ***********************/
		.flexsearch {
		  /*padding: 0 25px 0 200px;*/
		  /* Padding for other horizontal elements */
		}

		/* PHASE 2 - MEDIUM CHANGES: Touch-friendly Search Input */
		.flexsearch--input {
		  -webkit-box-sizing: content-box;
		  -moz-box-sizing: content-box;
		  box-sizing: content-box;
			 height: 35px;
			 min-height: 35px;
			padding: 0 46px 0 17px;
			background-color: #1A2C44;
			/* border-color: #1A2C44; */
			border-radius: 26px;
			border-style: solid;
			border-width: 0px;
			margin-top: 20px;
			color: #fff;
			font-family: 'Helvetica', sans-serif;
			font-size: 12px;
		  -webkit-appearance: none;
		  -moz-appearance: none;
		}

		.flexsearch--submit {
			position: absolute;
			right: 0;
			top: 0;
			display: block;
			width: 38px;
			height: 43px;
			padding: 0;
			border: none;
			margin-top: 8px;
			margin-right: 0px;
			background: transparent;
			color: #888;
			font-family: 'Helvetica', sans-serif;
			font-size: 20px;
			line-height: 60px;
		}

		.flexsearch--input:focus {
		  outline: none;
		  border-color: #333;
		}

		.flexsearch--input:focus.flexsearch--submit {
		  color: #fff;
		}

		.flexsearch--submit:hover {
		  color: #fff;
		  cursor: pointer;
		}

		::-webkit-input-placeholder {
		  color: #888;
		}

		input:-moz-placeholder {
		  color: #888;
		}

		/****************
		 * Pretify demo *
		 ****************/
		.h1 {
		  float: left;
		  margin: 25px;
		  color: #333;
		  font-family: 'Helvetica', sans-serif;
		  font-size: 45px;
		  font-weight: bold;
		  line-height: 45px;
		  text-align: center;
		}

	.modal-body a img {
		width: 100% !important;
		height: auto !important;
	}

	.tombol-modal {
		border: 0px;
		border-radius: 20px;
		position: absolute;
		right: -9px;
		top: -6px;
		z-index: 2;
	}

	.carousel-fade .carousel-inner .item {
		-webkit-transition-property: opacity;
		transition-property: opacity;
	}

	.carousel-fade .carousel-inner .item,
	.carousel-fade .carousel-inner .active.left,
	.carousel-fade .carousel-inner .active.right {
		opacity: 0;
	}

	.carousel-fade .carousel-inner .active,
	.carousel-fade .carousel-inner .next.left,
	.carousel-fade .carousel-inner .prev.right {
		opacity: 1;
	}

	.carousel-fade .carousel-inner .next,
	.carousel-fade .carousel-inner .prev,
	.carousel-fade .carousel-inner .active.left,
	.carousel-fade .carousel-inner .active.right {
		left: 0;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	.carousel-fade .carousel-control {
		z-index: 2;
	}

	.nav-tabs.tabs-v3>li.active>a:after {
		display: none;
	}

	.small-tiles {
		padding-left: 10px;
		padding-right: 0px;
	}



	.text-small {
		text-transform: uppercase;
		font-size: 15px;
		font-family: 'Myriad Pro';
		padding: 8px 5px 0 5px;
		line-height: 100%;
	}

	div.tiles {
		max-width: 150px;
		height: 140px;
		width: 100%;
		padding-right: 0px;
		padding-left: 0px;
		padding-top: 20px;
	}

	.site-section-top {
		margin-top: 45px;
	}

	.banner-atas-default {
		margin-top: 0px;
	}

	.running-section {
		min-height: 35px;
	}

	.sticky-header-container {
		min-height: 80px;
	}

	/*
	.banner-atas-scroll {
	margin-top: 50px;
	}*/

	ul.marquee {
		width: 100% !important;
	}

	.videoWrapper {
		position: relative;
		padding-bottom: 56.25%; /* 16:9 */
		padding-top: 25px;
		height: 0;
	}

	.videoWrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	img.framed {
		max-height: 150px;
		width: 213px;
	}

	footer h5 {
		text-transform: uppercase;
		color: #4C4C4C;
		font-weight: bold;
	}

	footer a {
		color: #6E6E6E;
	}

	.bg-alt {
		color: #fff;
		border-top: none !important; 
		background: #1f3983 !important;
	}

	.footer-copyright .copyright-text {
		font-size: 12px;
		color: #fff;
	}

	/* PHASE 1 - QUICK WINS: Modern Footer Color */
	.footer-copyright.custom {
		margin-top: 0px;
		background: var(--color-primary-dark, #1E3A5F);
		padding: 0px;
	}
	
	footer .kecil {
		font-size: 14px;
	}

	footer .kecil-judul {
		font-size: 16px;
	}

	footer ul.fa-ul li {
		padding-bottom: 6px;
	}

	footer img.logo-bawah {
		width: 115px;
		height: auto;
		display: inline-block;
	}


	.icon-social.icon-social-color.circle li {
		border-radius: 10% !important;
	}

	.icon-social.icon-social-color li a {
		width: 26px;
		height: 26px;
		font-size: 17px;
		color: #000;
	}

	.icon-social li a:hover {
		color: #fff;
	}

	.icon-social.icon-social-color li a>i {
		line-height: 28px;
	}

	.instagram {
		background: #fff;
	}

	/***********************
	 * Form Pencarian *
	 ***********************/	
	/* PHASE 2 - MEDIUM CHANGES: Touch-friendly Search */
	.search {
		padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
		margin-top: 7px;
		background:#fff;
		border:0px solid #dbdbdb;
		min-height: 44px;
		width: 186px;
		border-radius: 26px;
		font-size: 14px;
	}
	
	@media (max-width: 768px) {
		.search {
			width: 100%;
			min-height: 48px;
			font-size: 16px; /* Prevent zoom on iOS */
		}
	}
	
	.button {
		position:relative;
		top: 1px;
    	left: -35px;
		border:none;
		background:none;
		min-height: 44px;
		min-width: 44px;
		color: #2FBFFD;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	@media (max-width: 768px) {
		.button {
			min-height: 48px;
			min-width: 48px;
		}
	}
	.button:hover {
		color: var(--color-primary-light, #1A7DD0);
		transform: scale(1.1);
		transition: all var(--transition-base, 0.2s ease);
	}

	.running-text {
		margin-top: 9px;
		margin-bottom: 9px;
	}

		/*****************/
		/* Column Berita */
		/*****************/

    	@media (min-width: 768px) {
    		.paddingnya {
    			padding: 0 !important;
    		}

    		.carousel-inner .item img.slider-berita {
    			object-fit: cover;
    			height: 495px;
    			width: 100%;
    		}
    	}
		 
		/* VISUAL ENHANCEMENT: Column Spacing - Much More Noticeable */
		@media (min-width: 770px) {
			.left-column {
				padding-right: 30px !important; /* Increased from 16px */
			}

			.right-column {
				padding-left: 30px !important; /* Increased from 16px */
			}
		}
		
		/* VISUAL ENHANCEMENT: Mobile Column Spacing */
		@media (max-width: 769px) {
			.left-column {
				padding-right: 0 !important;
				padding-bottom: 40px !important; /* Increased from 24px */
			}

			.right-column {
				padding-left: 0 !important;
				padding-top: 40px !important; /* Increased from 24px */
			}
		}

		/* PHASE 2 - MEDIUM CHANGES: Mobile Optimization */
		@media (max-width: 768px) {
			h1.custom-font.kecil span {
				font-size: 9px !important;
			}
			.hal-kecil-heading-alt span {
				font-size: 11px !important;
			}

			.carousel-caption h2 {
				font-size: 20px;
			}

			.carousel-caption {
				padding: 15px 10px 0px 15px !important;
			}

			.nav-tabs.responsive-text li a span {
				font-size: 10px;
			}
			
			/* Mobile Typography Optimization */
			body {
				font-size: 14px;
				line-height: 1.5;
			}
			
			h1 { font-size: 1.75rem; }
			h2 { font-size: 1.5rem; }
			h3 { font-size: 1.25rem; }
			h4 { font-size: 1.125rem; }
			h5 { font-size: 1rem; }
			h6 { font-size: 0.875rem; }
			
			/* Mobile Spacing */
			.content-box, .content-box-v2 {
				padding: var(--spacing-md, 16px);
				margin-top: var(--spacing-md, 16px);
				margin-bottom: var(--spacing-sm, 8px);
			}
			
			.box-img .box-body {
				padding: var(--spacing-sm, 8px);
			}
		}

		 /* PHASE 2 - MEDIUM CHANGES: Mobile Padding Adjustments */
		 .no-padding {
			padding: 0px;
		 }
		 
		 @media (max-width: 768px) {
			 .no-padding {
				 padding: 0;
			 }
			 
			 /* Ensure content doesn't touch screen edges on mobile */
			 .container-fluid {
				 padding-left: var(--spacing-sm, 8px);
				 padding-right: var(--spacing-sm, 8px);
			 }
		 }

		 .nav-tabs.tabs-v3.beritautama>li.active>a {  
			  border-color: #F8F8F8;
			  /*color: #5C5F68;*/
		 }

		 .nav.berita.beritautama>li>a {
			padding: 19px 0px;
		 } 


/*****************/
/* Slider Berita */
/*****************/
#custom_carousel .item {
	color:#FFFFFF;
	background-color:rgba(0,0,0,0.5);
}

#custom_carousel .controls{
	overflow-x: auto;
	overflow-y: hidden;
	padding:0;
	margin:0;
	text-align: center;
	position: relative;
	/*background:#ddd*/
}

#custom_carousel .controls li {
	display: table-cell;
	width: 1%;
	max-width:90px;
}

#custom_carousel .controls li a {
	padding: 5px 3px;
}

#custom_carousel .controls li:first-child a {
	padding: 5px 3px;
	padding-left: 0px;
}

#custom_carousel .controls li:last-child a {
	padding: 5px 3px;
	padding-right: 0px;
}

#custom_carousel .controls li img#borderthumb {
	border:5px solid gray;
}

	/* PHASE 1 - QUICK WINS: Modern Carousel Active State */
	#custom_carousel .controls li.active img#borderthumb {
		background-color:#eee;
		border:5px solid var(--color-primary-light, #1A7DD0);
	}
#custom_carousel .controls a small {
 overflow:hidden;
 display:block;
 font-size:10px;
 margin-top:5px;
 font-weight:bold
}

#custom_carousel2 .item {

 color:#FFFFFF;
 background-color:rgba(0,0,0,0.5);
}
#custom_carousel2 .controls{
 overflow-x: auto;
 overflow-y: hidden;
 padding:0;
 margin:0;
 text-align: center;
 position: relative;
 /*background:#ddd*/
}
#custom_carousel2 .controls li {
 display: table-cell;
 width: 1%;
 max-width:90px;
}
#custom_carousel2 .controls li a {
 padding: 5px 3px;
}
#custom_carousel2 .controls li:first-child a {
 padding: 5px 3px;
 padding-left: 0px;
}
#custom_carousel2 .controls li:last-child a {
 padding: 5px 3px;
 padding-right: 0px;
}
#custom_carousel2 .controls li img#borderthumb {
 border:5px solid gray;
}
#custom_carousel2 .controls li.active img#borderthumb {
 background-color:#eee;
 border:5px solid #19d072;
}
#custom_carousel2 .controls a small {
 overflow:hidden;
 display:block;
 font-size:10px;
 margin-top:5px;
 font-weight:bold
}

.judul-berita {
 font-weight:bold;
 font-size: 22px;
 line-height: 100%;
}
/*li#lithumb.active img#borderthumb {
 border:5px solid black;
}*/

.featured-news {
 height: auto !important;
 border-top: none !important;
 /*border-bottom: 5px solid #14a95d;*/
}

.featured-news h4 a {
 font-family: 'Roboto', sans-serif;
 text-transform: capitalize;
 font-size: 15px;
}

.judul-kanal {
 text-transform: uppercase;
 font-family: 'Roboto', sans-serif;
 font-size: 15px;
 font-weight: bold;
 /*font-weight: bold;*/
}

#custom_carousel .item {

	color:#FFFFFF;
	background-color:rgba(0,0,0,0.5);
}

#custom_carousel .controls{
	overflow-x: auto;
	overflow-y: hidden;
	padding:0;
	margin:0;
	text-align: center;
	position: relative;
	background:#FFFFFF;
}

#custom_carousel .controls li {
	display: table-cell;
	width: 1%;
	max-width:70px;
}

#custom_carousel .controls li.active {
	background-color:#eee;
	/*border-top:3px solid red;*/
}

#custom_carousel .controls a small {
	overflow:hidden;
	display:block;
	font-size:10px;
	margin-top:5px;
	font-weight:bold
}

.carousel-caption {
	left: 0;
	right: 0;
	bottom: 0px;
	background: #000;
	background: -moz-linear-gradient(top,transparent 0,rgba(0,0,0,.47) 31%,rgba(0,0,0,.7) 100%);
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0,transparent),color-stop(31%,rgba(0,0,0,.47)),color-stop(100%,rgba(0,0,0,.7)));
	background: -webkit-linear-gradient(top,transparent 0,rgba(0,0,0,.47) 31%,rgba(0,0,0,.7) 100%);
	background: -o-linear-gradient(top,transparent 0,rgba(0,0,0,.47) 31%,rgba(0,0,0,.7) 100%);
	background: -ms-linear-gradient(top,transparent 0,rgba(0,0,0,.47) 31%,rgba(0,0,0,.7) 100%);
	background: linear-gradient(to bottom,transparent 0,rgba(0,0,0,.47) 31%,rgba(0,0,0,.7) 100%);
	text-align:justify;
	padding:30px;
}

ul.slider li {
	border-left: 1px solid #c7c7c7;
	border-bottom: 1px solid #c7c7c7;
}

ul.slider {
	border-right: 1px solid #c7c7c7;
}

.slider > li > a:hover, .slider > li > a:focus {
	text-decoration: none;
	background: none;
}

.slider > li:hover, .slider > li:focus {
	text-decoration: none;
	background-color: #eeeeee;
}

a.slider-control {
	text-align: left !important;
	padding: 8px 10px !important;
}

a.slider-control span {
	color:#333333;
	font-size: 11px;
}

a.slider-control p {
	line-height: 1;
}

a.carousel-caption h2 {
	text-align:left;
	font-weight:bold;
	margin-top:0px;
}

/******************/
/* Indicator List */
/******************/
.indicators-box {
	float: left;
	width: 65%;
	padding: 12px 0 0;
}

.indicators-box ~ br{
	display:none;
}

.indicators {
	position: relative;
}

.indicators .mask {
	position: relative;
	overflow: hidden;
	width: 100%;
}

.indicators-box h2 {
	color: #333;
	font: bold 20px/24px Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	margin: 0 0 30px;
}

.indicators-list {
	margin: 0 0 -25px;
	padding: 0 0 3px;
	list-style: none;
	overflow: hidden;
}

.indicators-list li {
	display: inline-block;
	vertical-align: top;
	margin: 0 9px 37px 14px;
	padding: 21px 0 10px;
	}
	* + html .indicators-list li {
	display: inline;
}

	/* PHASE 1 - QUICK WINS: Modern Indicator Colors */
	.indicators-list li a {
		float: left;
		padding: 15px 15px 18px;
		background: var(--color-primary-light, #1A7DD0);
		color: #fff;
		width: 189px;
		font-size: 12px;
		line-height: 14px;
		position: relative;
		border-radius: var(--radius-lg, 10px);
		-moz-border-radius: var(--radius-lg, 10px);
		-webkit-border-radius: var(--radius-lg, 10px);
		text-decoration: none;
		transition: all var(--transition-base, 0.2s ease);
		box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
	}

	.indicators-list li a:hover {
		box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.15));
		transform: translateY(-2px);
	}

	.indicators-list li a:after, .indicators-list li a .after {
		content: "";
		position: absolute;
		top: 100%;
		left: 50%;
		margin: -3px 0 0 -10px;
		border-top: 9px solid var(--color-primary-light, #1A7DD0);
		border-left: 9px solid transparent;
		border-right: 9px solid transparent;
		-moz-transform: scale(.9999);
	}

.indicators-list li.pink-box a {
	background: #c80974;
}

.indicators-list li.yellow-box a {
	background: #f18f21;
}

.indicators-list li.green-box a {
	background: #10D494;
}

.indicators-list li.pink-box a:after, .indicators-list li.pink-box a .after {
	border-top-color: #c80974;
}

.indicators-list li.yellow-box a:after, .indicators-list li.yellow-box a .after {
	border-top-color: #f18f21;
}

.indicators-list li.green-box a:after, .indicators-list li.green-box a .after {
	border-top-color: #10D494;
}

.indicators-list li a strong {
	display: block;
	font-size: 18px;
	line-height: 21px;
	padding: 0 0 5px;
}
.indicators-list li a span {
	display: block;
	font-weight: bold;
}
/*
.indicators-list li img {
	position: absolute;
	top: -17px;
	left: 20px;
}*/

.indicators-list li .hold {
	overflow: hidden;
}

.indicators-list li .hold span {
	float: left;
	padding: 0 0 0 10px;
}

.indicators-list li .hold span:first-child {
	padding-left: 0;
}
.indicators-box .btn-prev, .indicators-box .btn-next, .service-list-gallery .btn-prev, .service-list-gallery .btn-next {
	display: none;
}

img.foto-bupati {
	position: absolute;
	top: -75px;
	z-index: 10;
}

	

.label {
	padding: 0.4em .6em .4em !important;
	border-radius: 0 !important;
}

.kritik-saran li a, .kritik-saran li p {
	color: #fff;
}

/* PHASE 3 - OPTIONAL: Image Optimization & Hover Effects */
.media-left img.media-object.foto-list-besar {
	float:left;
	margin-right: 10px;
	aspect-ratio: 190 / 120;
	object-fit: cover;
	transition: transform var(--transition-base, 0.3s ease);
}

.media-left img.media-object.foto-list-besar:hover {
	transform: scale(1.05);
}

.media-left img.media-object.foto-list-kecil {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	transition: transform var(--transition-base, 0.3s ease);
}

.media-left img.media-object.foto-list-kecil:hover {
	transform: scale(1.05);
}

.ikon-kecil {
	position: absolute;
	top: -23px;
	left: 20px;
	background: #fff;
}
.fa-4x.icon-circle, .fa-4x.icon-square {
	width: 96px;
	height: 96px;
	font-size: 46px;
	line-height: 94px;
}
.icon-circle, .icon-square {
	background-color: #fff;
	color: #fff;
	border-radius: 50%;
	width: 38px;
	height: 38px;
	border: 2px solid transparent;
	text-align: center;
	line-height: 32px;
	overflow: hidden;
	cursor: pointer;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}



	/* PHASE 2 - MEDIUM CHANGES: Touch-friendly Sidebar Tabs */
	a.sidebar-utama {
		text-align: left;
		font-weight: bold;
		text-transform: uppercase;
		padding: var(--spacing-md, 16px) var(--spacing-sm, 8px) !important;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	@media (max-width: 768px) {
		a.sidebar-utama {
			padding: var(--spacing-md, 16px) !important;
			min-height: 48px;
			font-size: 13px;
		}
	}

	/* PHASE 1 - QUICK WINS: Modern Sidebar Tab Colors */
	li>a.sidebar-utama {
		color: #fff !important;
		background-color: var(--color-primary-light, #1A7DD0) !important;
		border-color: var(--color-primary-light, #1A7DD0) transparent !important;
		transition: all var(--transition-base, 0.2s ease);
	}

	li>a.sidebar-utama:hover {
		background-color: var(--color-primary, #0A4A7A) !important;
		border-color: var(--color-primary, #0A4A7A) transparent !important;
	}

	li>a.sidebar-utama.kanan {
		margin-left: 5px;
	}

	li.active>a.sidebar-utama {
		background-color: var(--color-primary-dark, #1E3A5F) !important;
		border-color: var(--color-primary-dark, #1E3A5F) transparent !important;
	}

li.active>a.sidebar-utama.kanan {
	margin-left: 5px;
}

	/* PHASE 1 - QUICK WINS: Modern Tab Border */
	ul.social-tabs.custom {
		border-bottom: 3px solid var(--color-primary-dark, #1E3A5F);
	}



	/* PHASE 1 - QUICK WINS: Modern Image Border */
	/* PHASE 3 - OPTIONAL: Image Hover Effects */
	img.borderthumb {
		transition: transform var(--transition-base, 0.3s ease), box-shadow var(--transition-base, 0.3s ease);
	}
	
	img.borderthumb:hover {
		transform: scale(1.03);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	}
		border: 5px solid var(--color-gray-200, #E1E1E1);
		object-fit: cover;
		border-radius: var(--radius-sm, 4px);
		transition: all var(--transition-base, 0.2s ease);
	}

	img.borderthumb:hover {
		border-color: var(--color-primary-light, #1A7DD0);
		box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
	}

.social-tabs .uppercase span {
	text-transform: uppercase;
	font-weight: bold;
	margin-left: 5px;
}

li.media.space {
	margin: 0 20px;
}

.space .media-left {
	padding-right: 20px;
}

.tab-pane ul.media-list {
	padding-top: 25px;
}

.halaman-kecil {
	height: 400px;
}

	/* PHASE 1 - QUICK WINS: Modern Heading Colors */
	.hal-kecil-heading {
		background-color: var(--color-primary-light, #1A7DD0);
		height:41px;
		padding-top:10px;
		font-weight:bold;
	}

	.hal-kecil-heading-alt {
		background-color: var(--color-primary, #0A4A7A);
		height:41px;
		padding-top:10px;
		font-weight:bold;
	}

.hal-kecil-heading-alt span {
	font-size: 15px;

}

h1.custom-font {
	font-weight:bold;
	color:#FFFFFF;
}

h1.custom-font.kecil span {
	font-size: 12px;
}


ul.bg-light {
	padding-top: 20px;
	padding-bottom: 5px;
}

.list-special {
	border-bottom: 1px #d4d1d1 solid;
	padding: 12px 0;
	height: 85px;
	margin-top: 5px;
}

li.list-special {
	list-style-type: none;
}

li.list-special:last-child {
	border-bottom: none;
}

.overflow-special {
	overflow: hidden;
	height: 60px;
}

.slider-control img {
	object-fit: cover;
	height: 66px;
	width: 100%;
}

	/* PHASE 2 - MEDIUM CHANGES: Touch-friendly List Items */
	a.list-group-item.custom {
		padding: var(--spacing-md, 16px);
		min-height: 44px;
		transition: all var(--transition-base, 0.2s ease);
	}
	
	a.list-group-item.custom:hover {
		background-color: var(--color-gray-50, #F5F7FA);
		transform: translateX(4px);
	}
	
	@media (max-width: 768px) {
		a.list-group-item.custom {
			padding: var(--spacing-md, 16px);
			min-height: 48px;
		}
	}
a.list-group-item.custom img {
	height: 55px;
	width: 100%;
	object-fit: cover;
}

div.box-body.custom {
	padding: 40px 50px 15px 50px;
}

div.content-box.featured-news.jajak-pendapat {
	margin-top: 15px !important;
}

.running-text li.kecil {
	color: #fff;
	font-size: 13px;
}