body {
	margin: 0;
	padding-top: 70px;
}

@media (max-width:767px) {
	body {
		padding-top: 0;
		padding-bottom: 60px;
	}
}

.carousel-inner img {
	max-height: 200px;
	object-fit: cover;
}

.dark-mode {
	background-color: #121212 !important;
	color: #f5f5f5 !important;
}

.dark-mode .card {
	background-color: #1e1e1e;
	color: #f5f5f5;
}

.dark-mode nav.navbar {
	background-color: #333 !important;
}

.navbar.fixed-bottom a {
	text-decoration: none !important;
}

.bg-silver {
	background-color: #1e1e1e;
}

.text-darkgray {
	color: #efefef;
}

/* --- Navbar Desktop (Custom) --- */
.navbar-custom {
	background-color: #999999;
	transition: background-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}

.navbar-custom.scrolled {
	background-color: rgba(153, 153, 153, 0.6);
	backdrop-filter: blur(5px);
	box-shadow: none !important;
}

/* --- Navbar & Menu Samping Mobile Modern --- */
.navbar-transparan {
	background-color: #6c757d !important;
	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15) !important;
	transition: all 0.3s ease-in-out;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.navbar-transparan.scrolled {
	background-color: rgba(108, 117, 125, 0.75) !important;
	backdrop-filter: blur(6px);
	box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1) !important;
}

@media (max-width: 767.98px) {
	.kustom-offcanvas {
		width: 55% !important;
	}
}

.tautan-sub-mobile {
	color: #adb5bd !important;
	font-size: 0.85rem;
	transition: color 0.2s ease, padding-left 0.2s ease;
}

.tautan-sub-mobile:hover {
	color: #ffffff !important;
	padding-left: 3px;
}

.tombol-collapse-menu:not(.collapsed) {
	color: #ffffff !important;
}

.tombol-collapse-menu:not(.collapsed) .fa-chevron-down {
	transform: rotate(-180deg);
	color: #ffffff !important;
}

.border-start.border-secondary {
	border-color: rgba(255, 255, 255, 0.15) !important;
}

/* --- PWA Installation Banner --- */
#pwa-install-banner {
	position: fixed;
	bottom: -100px;
	left: 50%;
	transform: translateX(-50%);
	width: 90%;
	max-width: 480px;
	background-color: #ffffff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
	border-radius: 16px;
	padding: 16px;
	z-index: 99999;
	transition: bottom 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
	border: 1px solid rgba(0, 0, 0, 0.05);
}

#pwa-install-banner.pwa-banner-show {
	bottom: 20px;
}

.pwa-banner-container {
	display: flex;
	align-items: center;
	gap: 12px;
}

.pwa-banner-logo img {
	width: 48px;
	height: 48px;
	border-radius: 10px;
	object-fit: cover;
}

.pwa-banner-text {
	flex: 1;
}

.pwa-banner-text h6 {
	margin: 0 0 2px 0;
	font-size: 0.95rem;
	font-weight: 700;
	color: #212529;
}

.pwa-banner-text p {
	margin: 0;
	font-size: 0.75rem;
	color: #6c757d;
	line-height: 1.3;
}

.pwa-banner-actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.btn-pwa-now {
	background-color: #212529;
	color: #ffffff;
	border: none;
	padding: 6px 16px;
	font-size: 0.8rem;
	font-weight: 600;
	border-radius: 8px;
	cursor: pointer;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.btn-pwa-later {
	background: none;
	border: none;
	color: #6c757d;
	font-size: 0.75rem;
	font-weight: 500;
	cursor: pointer;
	padding: 4px;
}

.ios-instruction-icon {
	display: inline-block;
	width: 20px;
	vertical-align: middle;
}

.navbar-brand-custom {
	display: flex;
	align-items: center;
	/* Menjajarkan gambar dan teks di tengah secara vertikal */
	padding: 0.5rem 1rem;
	text-decoration: none !important;
	transition: opacity 0.2s;
}

.navbar-brand-custom img {
	width: 40px !important;
	/* Dibuat sedikit lebih besar agar terlihat jelas */
	height: 40px !important;
	object-fit: contain;
	/* Menggunakan contain agar logo tidak terpotong */
	background: white;
	/* Memberi latar putih pada logo jika transparan */
	padding: 4px;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.company-name-text {
	font-size: 1.1rem;
	font-weight: 700;
	color: #ffffff;
	/* Warna gelap agar kontras dengan abu-abu */
	margin-left: 12px;
	letter-spacing: 0.5px;
}

/* Sidebar Container */
.sidebar-wrapper {
	background-color: #ffffff;
	/* Tetap putih agar bersih */
	border-right: 1px solid #e0e0e0;
	height: 100vh;
	padding-top: 20px;
}

/* Membuat item menu seragam dengan header */
.nav-link-custom {
	color: #555 !important;
	padding: 12px 20px !important;
	transition: all 0.3s;
	border-radius: 0 50px 50px 0;
	/* Bentuk modern */
	margin-right: 10px;
}

/* Hover effect menggunakan warna abu-abu header */
.nav-link-custom:hover,
.nav-link-custom.active {
	background-color: #999999 !important;
	/* Mengambil warna header */
	color: #ffffff !important;
}
/* Styling untuk efek geser sidebar ke kiri */
#sidebar-wrapper {
    transition: margin-left 0.3s ease-in-out;
}
#sidebar-wrapper.toggled {
    margin-left: -250px; /* Sesuaikan dengan lebar sidebar Anda (misal: 250px) */
}