/* =====================================================================
   Footer portal e-SIKALI
   Palet mengikuti skin business-consulting-2:
   primary #e8465f, secondary #183f72, quaternary #eef0f4
   ===================================================================== */

#footer .footer-judul {
	font-size: 0.9375rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05rem;
	color: #183f72;
	margin-bottom: 1.25rem;
	padding-bottom: 0.75rem;
	position: relative;
}

#footer .footer-judul::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 34px;
	height: 3px;
	background: #e8465f;
	border-radius: 2px;
}

#footer .footer-kontak li {
	display: flex;
	align-items: flex-start;
	margin-bottom: 0.5rem;
}

/* Ikon telepon (15px) dan amplop (25px) beda lebar, jadi dibungkus kotak
   selebar sama supaya teks di sebelahnya mulai pada garis yang sama. */
#footer .footer-kontak-ikon {
	flex: 0 0 28px;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	margin-top: 2px;
}

#footer .footer-kontak a {
	font-size: 0.75rem;
	line-height: 1.5;
}

/* --- Daftar tautan kolom 2 ------------------------------------------ */

#footer .footer-tautan li {
	margin-bottom: 0.5rem;
}

/* theme.css memberi warna lewat `#footer a:not(.btn):not(.no-footer-css)`
   (abu-abu, hover putih). Selector itu lebih spesifik daripada
   `#footer .footer-tautan a`, jadi pola :not() yang sama dipakai di sini
   supaya warna tautan footer tidak ikut jadi putih saat disorot. */
#footer .footer-tautan a:not(.btn):not(.no-footer-css) {
	display: inline-flex;
	align-items: center;
	font-size: 0.75rem;
	font-weight: 600;
	color: #4a5568;
	text-decoration: none;
	transition: color 0.2s ease, transform 0.2s ease;
}

#footer .footer-tautan a::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #b9c2d0;
	margin-right: 0.625rem;
	flex: 0 0 auto;
	transition: background 0.2s ease;
}

#footer .footer-tautan a:not(.btn):not(.no-footer-css):hover,
#footer .footer-tautan a:not(.btn):not(.no-footer-css):focus,
#footer .footer-tautan a:not(.btn):not(.no-footer-css):active {
	color: #e8465f;
	transform: translateX(3px);
}

#footer .footer-tautan a:hover::before,
#footer .footer-tautan a:focus::before {
	background: #e8465f;
}

/* --- Kartu jam kerja ------------------------------------------------ */

#footer .kartu-jam {
	background: linear-gradient(135deg, #183f72 0%, #22528f 100%);
	border-radius: 12px;
	padding: 1.125rem 1.25rem;
	box-shadow: 0 8px 20px rgba(24, 63, 114, 0.18);
}

#footer .kartu-jam-judul {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06rem;
	padding-bottom: 0.75rem;
	margin-bottom: 0.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

#footer .kartu-jam-judul i {
	font-size: 1rem;
	color: #ffffff;
	opacity: 0.85;
}

#footer .kartu-jam-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

#footer .kartu-jam-list li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.3125rem 0;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.92);
}

#footer .kartu-jam-list .titik {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #2fd07f;
	flex: 0 0 auto;
}

#footer .kartu-jam-list li.libur {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	margin-top: 0.375rem;
	padding-top: 0.625rem;
}

#footer .kartu-jam-list li.libur .titik {
	background: #ff8b6a;
}

#footer .kartu-jam-list .hari {
	flex: 1 1 auto;
}

#footer .kartu-jam-list .jam {
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
}

#footer .kartu-jam-list li.libur .jam {
	color: #ff8b6a;
}

/* --- Logo dinas terkait --------------------------------------------- */

/* Logo instansi pemerintah umumnya beredar dalam versi putih, jadi kartunya
   dibuat gelap supaya logo terbaca. Warnanya disamakan dengan kartu jam kerja
   dan statistik agar footer terlihat satu kesatuan. */
#footer .footer-dinas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.625rem;
	background: linear-gradient(135deg, #183f72 0%, #22528f 100%);
	border-radius: 12px;
	padding: 0.875rem;
	box-shadow: 0 8px 20px rgba(24, 63, 114, 0.18);
}

#footer .footer-dinas-item {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 8px;
	padding: 0.625rem;
	min-height: 68px;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

#footer a.footer-dinas-item:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(232, 70, 95, 0.9);
	transform: translateY(-2px);
}

#footer .footer-dinas-item img {
	max-width: 100%;
	max-height: 48px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* --- Kartu statistik pengunjung ------------------------------------- */

#footer .kartu-statistik {
	background: linear-gradient(150deg, #183f72 0%, #1d4a85 55%, #22528f 100%);
	border-radius: 12px;
	padding: 1.125rem 1.25rem 1rem;
	box-shadow: 0 8px 20px rgba(24, 63, 114, 0.18);
	position: relative;
	overflow: hidden;
}

/* Aksen lembut di sudut supaya kartu tidak terlihat datar */
#footer .kartu-statistik::after {
	content: "";
	position: absolute;
	top: -55px;
	right: -55px;
	width: 130px;
	height: 130px;
	border-radius: 50%;
	background: rgba(232, 70, 95, 0.22);
}

#footer .kartu-statistik-online {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: #fff;
	padding-bottom: 0.75rem;
	margin-bottom: 0.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	position: relative;
	z-index: 1;
}

#footer .kartu-statistik-online strong {
	font-size: 1.25rem;
	line-height: 1;
	font-weight: 700;
}

#footer .kartu-statistik-online .ket {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05rem;
	color: rgba(255, 255, 255, 0.75);
}

#footer .titik-online {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #2fd07f;
	box-shadow: 0 0 0 0 rgba(47, 208, 127, 0.7);
	animation: footerDenyut 2s infinite;
	flex: 0 0 auto;
}

@keyframes footerDenyut {
	0% {
		box-shadow: 0 0 0 0 rgba(47, 208, 127, 0.7);
	}

	70% {
		box-shadow: 0 0 0 8px rgba(47, 208, 127, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(47, 208, 127, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	#footer .titik-online {
		animation: none;
	}
}

#footer .kartu-statistik-list {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 1;
}

#footer .kartu-statistik-list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.3125rem 0;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.85);
}

#footer .kartu-statistik-list .nilai {
	font-weight: 700;
	color: #fff;
	font-size: 0.9375rem;
	white-space: nowrap;
}

#footer .kartu-statistik-total {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	position: relative;
	z-index: 1;
}

#footer .kartu-statistik-total .nilai {
	display: block;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
}

#footer .kartu-statistik-total .label {
	display: block;
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.04rem;
	color: rgba(255, 255, 255, 0.7);
	margin-top: 0.125rem;
}

/* --- Baris hak cipta ------------------------------------------------ */

#footer .footer-sosmed {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

@media (min-width: 992px) {
	#footer .footer-sosmed {
		justify-content: flex-end;
	}
}

#footer .footer-sosmed a:not(.btn):not(.no-footer-css) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #ffffff;
	border: 1px solid #dde2ea;
	color: #183f72;
	font-size: 0.9375rem;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

#footer .footer-sosmed a:not(.btn):not(.no-footer-css):hover,
#footer .footer-sosmed a:not(.btn):not(.no-footer-css):focus {
	background: #e8465f;
	border-color: #e8465f;
	color: #fff;
	transform: translateY(-2px);
}

@media (max-width: 575px) {
	#footer .footer-dinas {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* =====================================================================
   Beranda
   ===================================================================== */

/* Tinggi slider dikecilkan (991px -> 680px), jadi tarikan kartu ke atas
   ikut dikurangi dari -250px supaya proporsinya tetap dan teks slider
   tidak tertutup kartu. */
.custom-cards.custom-cards-slider .cards-container {
	margin: -160px auto 0;
}

@media (max-width: 991px) {
	.custom-cards.custom-cards-slider .cards-container {
		margin: -110px auto 0;
	}
}

/* =====================================================================
   Kartu tabel portal (dipakai halaman Regulasi)

   Dibuat sendiri, bukan memakai DataTables dari folder backend/, supaya
   perubahan tampilan di portal tidak ikut mengubah tampilan halaman admin.
   ===================================================================== */

.kartu-tabel {
	background: #fff;
	border: 1px solid #e4e8ef;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(24, 63, 114, 0.07);
	overflow: hidden;
}

/* --- Baris alat: pencarian dan jumlah baris ------------------------- */

.kartu-tabel-alat {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.125rem 1.25rem;
	border-bottom: 1px solid #eef0f4;
	background: #fbfcfe;
}

.kartu-tabel-cari {
	position: relative;
	flex: 1 1 260px;
	max-width: 380px;
}

.kartu-tabel-cari i {
	position: absolute;
	top: 50%;
	left: 0.875rem;
	transform: translateY(-50%);
	color: #9aa5b6;
	font-size: 0.875rem;
	pointer-events: none;
}

.kartu-tabel-cari .form-control {
	height: 42px;
	padding-left: 2.375rem;
	border: 1px solid #dde2ea;
	border-radius: 8px;
	background: #fff;
	font-size: 0.875rem;
	box-shadow: none;
}

.kartu-tabel-cari .form-control:focus {
	border-color: #e8465f;
	box-shadow: 0 0 0 3px rgba(232, 70, 95, 0.12);
}

.kartu-tabel-jumlah {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: #6b7688;
	white-space: nowrap;
}

.kartu-tabel-jumlah label {
	margin: 0;
}

.kartu-tabel-jumlah .form-select {
	width: auto;
	height: 42px;
	padding: 0 2rem 0 0.75rem;
	border: 1px solid #dde2ea;
	border-radius: 8px;
	font-size: 0.875rem;
	color: #183f72;
	box-shadow: none;
}

/* --- Isi tabel ------------------------------------------------------ */

.kartu-tabel-isi {
	margin: 0;
}

.kartu-tabel-isi thead th {
	padding: 0.875rem 1.25rem;
	border: 0;
	border-bottom: 1px solid #e4e8ef;
	background: #f4f6fa;
	color: #183f72;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06rem;
	white-space: nowrap;
}

.kartu-tabel-isi tbody td {
	padding: 1rem 1.25rem;
	border: 0;
	border-bottom: 1px solid #f0f2f6;
	vertical-align: middle;
	background: transparent;
}

.kartu-tabel-isi tbody tr:last-child td {
	border-bottom: 0;
}

.kartu-tabel-isi tbody tr:hover td {
	background: #fbfcfe;
}

.kartu-tabel-isi .kolom-nomor {
	width: 64px;
	text-align: center;
	color: #9aa5b6;
	font-size: 0.8125rem;
}

.kartu-tabel-isi .kolom-aksi {
	width: 220px;
	white-space: nowrap;
}

/* Tombol pengurut di header kolom dibuat menyatu dengan judul kolomnya */
.kartu-tabel-isi .tombol-urut {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-transform: inherit;
	letter-spacing: inherit;
	cursor: pointer;
}

.kartu-tabel-isi .tombol-urut i {
	margin-left: 0.375rem;
	color: #b9c2d0;
	transition: color 0.2s ease;
}

.kartu-tabel-isi .tombol-urut:hover,
.kartu-tabel-isi .tombol-urut:hover i {
	color: #e8465f;
}

/* --- Sel nama regulasi ---------------------------------------------- */

.regulasi-judul {
	display: flex;
	align-items: center;
	gap: 0.875rem;
}

.regulasi-ikon {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	background: rgba(232, 70, 95, 0.1);
	color: #e8465f;
	font-size: 1.0625rem;
}

.regulasi-nama {
	display: block;
	color: #183f72;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
}

.regulasi-meta {
	display: block;
	margin-top: 0.125rem;
	color: #9aa5b6;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04rem;
}

/* --- Tombol aksi ---------------------------------------------------- */

.btn-tabel {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.4375rem 0.875rem;
	border: 1px solid #dde2ea;
	border-radius: 8px;
	background: #fff;
	color: #183f72;
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-tabel+.btn-tabel {
	margin-left: 0.375rem;
}

.btn-tabel i {
	font-size: 0.8125rem;
}

.btn-tabel-lihat:hover,
.btn-tabel-lihat:focus {
	background: #e8465f;
	border-color: #e8465f;
	color: #fff;
}

.btn-tabel-unduh:hover,
.btn-tabel-unduh:focus {
	background: #183f72;
	border-color: #183f72;
	color: #fff;
}

/* --- Keadaan kosong ------------------------------------------------- */

.kartu-tabel-kosong {
	padding: 3rem 1.25rem;
	text-align: center;
	color: #9aa5b6;
}

.kartu-tabel-kosong i {
	display: block;
	margin-bottom: 0.75rem;
	font-size: 2.25rem;
	color: #cbd3df;
}

/* --- Kaki tabel: keterangan dan navigasi halaman -------------------- */

.kartu-tabel-kaki {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.875rem 1.25rem;
	border-top: 1px solid #eef0f4;
	background: #fbfcfe;
}

.kartu-tabel-info {
	color: #6b7688;
	font-size: 0.8125rem;
}

.kartu-tabel-halaman {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
}

.kartu-tabel-halaman a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 0.5rem;
	border: 1px solid #dde2ea;
	border-radius: 8px;
	background: #fff;
	color: #183f72;
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.kartu-tabel-halaman a:hover {
	border-color: #e8465f;
	color: #e8465f;
}

.kartu-tabel-halaman .aktif a,
.kartu-tabel-halaman .aktif a:hover {
	background: #e8465f;
	border-color: #e8465f;
	color: #fff;
	cursor: default;
}

.kartu-tabel-halaman .nonaktif a,
.kartu-tabel-halaman .nonaktif a:hover {
	border-color: #eef0f4;
	color: #c3cad6;
	cursor: not-allowed;
}

@media (max-width: 575px) {
	.kartu-tabel-isi .kolom-aksi {
		width: auto;
	}

	.btn-tabel {
		padding: 0.4375rem 0.625rem;
	}

	.kartu-tabel-kaki {
		justify-content: center;
	}
}
/* --- Section Tentang: tumpukan foto galeri -------------------------- */

/* demo-business-consulting-2.css memposisikan foto dengan position:absolute,
   jadi kolomnya tidak punya tinggi sendiri dan tinggi section hanya mengikuti
   kolom teks. Kalau teksnya pendek, fotonya menembus batas bawah section.

   Kolom diberi tinggi lewat spacer beraspek rasio (ikut lebar kolom, jadi
   tetap proporsional di semua ukuran layar) dan lebar tiap foto dibatasi
   supaya tumpukannya muat di dalam section. */
@media (min-width: 992px) {
	.coaching-consulting .col-coaching-consulting-imgs::before {
		content: "";
		display: block;
		padding-top: 66%;
	}

	.coaching-consulting .col-coaching-consulting-imgs .card:nth-child(1) {
		width: 75%;
	}

	/* left di sini adalah titik tengah foto, karena demo CSS memberi
	   transform: translateX(-50%). Digeser ke kiri supaya foto kedua
	   menumpuk di sudut kiri bawah foto pertama, bukan sejajar. */
	.coaching-consulting .col-coaching-consulting-imgs .card:nth-child(2) {
		width: 48%;
		left: 45%;
		bottom: 0;
	}

	.coaching-consulting .col-coaching-consulting-imgs .card:nth-child(3) {
		width: 42%;
		bottom: 8%;
	}
}

/* --- Konten kaya teks (WYSIWYG): berita & halaman info -------------- */

/* Gambar yang ditempel dari editor sering datang tanpa atribut ukuran,
   sehingga bisa lebih lebar dari kolom kontennya. Dibatasi max-width
   (bukan dipaksa width:100% supaya gambar kecil tidak ikut melar) dan
   tinggi menyesuaikan agar tidak gepeng. */
.card-body.p-0 img {
	max-width: 100%;
	height: auto;
}

/* --- Link Masuk di menu mobile ----------------------------------------- */

/* Di bawah md tombol Masuk di header-top disembunyikan, jadi link-nya
   ditaruh paling bawah menu hamburger dan dipisah garis dari menu lain. */
.header-nav-main nav > ul > li.nav-item-masuk {
	margin-top: 10px;
	border-top: 2px solid #e2e2e2;
	padding-top: 10px;
}

.header-nav-main nav > ul > li.nav-item-masuk > a {
	display: flex;
	align-items: center;
	gap: 8px;
}