:root {
	--primary-color: #007bff; /* Biru cerah, bisa diganti dengan warna branding Anda */
	--secondary-color: #343a40;
}

/* Tombol Kustom */
.btn-custom-primary {
	background-color: #26abe2;
	border-color: #26abe2;
	color: white;
	transition: all 0.3s;
}

.btn-custom-primary:hover {
	background-color: #144b9b; /* Warna lebih gelap saat hover */
	border-color: #144b9b;
	color: white;
}

.btn-custom-success {
	background-color: #28a745; /* Hijau cerah */
	border-color: #28a745;
	color: white;
	transition: all 0.3s;
}

.btn-custom-success:hover {
	background-color: #1e7e34; /* Warna hijau lebih gelap saat hover */
	border-color: #1e7e34;
	color: white;
}

.btn-custom-dark {
	background-color: #343a40; /* Abu-abu gelap */
	border-color: #343a40;
	color: white;
	transition: all 0.3s;
}

.btn-custom-dark:hover {
	background-color: #23272b; /* Warna lebih gelap saat hover */
	border-color: #23272b;
	color: white;
}

/* Navbar Kustom */
.custom-navbar {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.custom-navbar .nav-link {
	font-weight: 600;
}

/* Hero Section / Carousel Overlay */
.carousel-item-overlay {
	position: relative;
}
.carousel-item-overlay::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4); /* Overlay gelap agar teks lebih jelas */
	z-index: 1;
}
.carousel-caption {
	z-index: 2; /* Pastikan teks ada di atas overlay */
}

/* Card Cabang */
.custom-card-hover {
	transition: transform 0.3s, box-shadow 0.3s;
}

.custom-card-hover:hover {
	transform: translateY(-5px); /* Geser ke atas sedikit */
	box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; /* Bayangan lebih tebal */
}

/* Fasilitas */
.custom-facility {
	border-top: 5px solid var(--primary-color);
}

/* Partner Logo */
.custom-partner-logo {
	opacity: 0.6;
	transition: opacity 0.3s;
	/* Tambahkan Max-width jika diperlukan */
}

.custom-partner-logo:hover {
	opacity: 1; /* Terang saat di hover */
}

/* ==================================== */
/* 1. KODE UNTUK MEMPERBAIKI TAMPILAN */
/* ==================================== */

/* Mengatasi Navbar sticky/fixed menutupi konten awal */
body {
	padding-top: 70px; /* Atur padding awal body, sesuaikan jika Navbar terlalu tinggi */
}

/* ==================================== */
/* 2. KODE UNTUK EFEK SCROLL (BESAR -> KECIL) */
/* ==================================== */

/* Tampilan Awal: Besar dan Transparan */
.custom-navbar.navbar-lg-initial {
	/* Background: hitam (0,0,0) dengan opasitas 0.7 */
	background-color: rgb(0 0 0 / 60%) !important;

	/* Tinggi Awal (misalnya 90px), bisa disesuaikan */
	padding-top: 20px;
	padding-bottom: 20px;

	/* Tambahkan transisi agar perubahan terlihat halus */
	transition: all 0.3s ease-in-out;
}

/* Tampilan Setelah Scroll: Kecil dan Solid */
.custom-navbar.navbar-scrolled {
	/* Background: hitam solid */
	background-color: #26abe2 !important;

	/* Tinggi Setelah Scroll (misalnya 60px) */
	padding-top: 10px;
	padding-bottom: 10px;

	/* Tambahkan bayangan ringan */
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Memastikan tulisan brand tetap besar di tampilan awal */
.custom-navbar.navbar-lg-initial .navbar-brand {
	font-size: 1.5rem;
	transition: font-size 0.3s;
}

/* Memastikan tulisan brand mengecil setelah scroll */
.custom-navbar.navbar-scrolled .navbar-brand {
	font-size: 1.25rem;
}

/* CSS Tambahan untuk Mengatasi Layout Baru */

/* Hapus padding-top pada body karena navbar tidak lagi menempati ruang */
body {
	padding-top: 0;
}

/* Tampilan Awal: Transparan di atas Carousel */
.custom-navbar {
	background-color: transparent !important; /* Membuat background transparan */
	transition: all 0.3s ease-in-out;
	border-bottom: 3px solid rgba(255, 255, 255, 0.2); /* Garis tipis pemisah */
	padding-top: 15px;
	padding-bottom: 15px;
}

/* Tampilan Setelah Scroll: Solid dan Ramping */
.navbar-scrolled {
	background-color: #212529 !important; /* Hitam pekat */
	padding-top: 8px;
	padding-bottom: 8px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Menambahkan overlay hitam transparan ke carousel agar teks navbar terbaca */
.carousel-item-overlay::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4); /* Overlay hitam 40% */
}

.carousel-caption {
	position: absolute;
	right: 15%;
	bottom: 14rem;
	left: 15%;
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
	color: #fff;
	text-align: center;
}

.bottom-separator
Specificity: (0,1,0) {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	overflow: hidden;
	padding-bottom: 30px;
	display: block;
	z-index: -1;
}

/* ==================================== */
/* 3. KODE UNTUK CARD CABANG DENGAN HOVER EFFECT (Garis Miring) */
/* ==================================== */

.branch-card {
	position: relative;
	overflow: hidden;
	border-radius: 8px; /* Tambahkan kembali border-radius agar lebih rapi */
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	border: 4px solid #ffff;
}

.branch-img {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: cover;
	transition: transform 0.5s ease;
}

/* Mengganti branch-overlay agar hanya berfungsi sebagai container teks */
.branch-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	color: white;
	/* MODIFIKASI DIMULAI DI SINI */
	display: flex;
	flex-direction: column;
	/* Ubah dari 'center' atau 'top' ke 'flex-start' untuk align vertikal ke atas */
	justify-content: flex-start;
	/* Ubah dari 'center' ke 'flex-start' untuk align horizontal ke kiri */
	align-items: flex-start;
	padding: 15px; /* Tambahkan padding agar teks tidak menempel ke sudut */
	/* MODIFIKASI BERAKHIR DI SINI */
	opacity: 0; /* Teks tetap tersembunyi dulu */
	transition: opacity 0.5s ease;
	z-index: 2; /* Pastikan teks di atas overlay miring */
	text-align: center;
}

/* Styling untuk Nama Cabang di dalam Overlay */
.branch-overlay .branch-name {
	/* Untuk memastikan garis vertikal ada di samping kiri */
	padding-left: 5px;

	/* Properti utama untuk membuat garis di sebelah kiri */
	border-left: 5px solid #0056b3; /* Biru Tua, sesuaikan ketebalan (3px) sesuai selera */

	margin-bottom: 5px; /* Jarak antara nama cabang dan elemen di bawahnya */
	font-size: 1.5em; /* Sesuaikan ukuran font jika perlu */
	font-weight: bold;
}

/* Membuat elemen lurus (garis) menggunakan pseudo-elemen ::before */
.branch-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 55%; /* Atur tinggi overlay yang diinginkan */
	background-color: rgba(38, 171, 226, 0.85);

	/* Transformasi untuk menggeser elemen secara vertikal */
	/* Sembunyikan sepenuhnya di atas (geser -100% tinggi) */
	transform: translateY(-100%);

	/* Hapus skewY karena kita ingin garis lurus */
	/* transform: skewY(0deg); */

	transform-origin: top left;
	transition: transform 0.3s ease; /* Sesuaikan kecepatan transisi */
	z-index: 1;
}

/* Efek Hover: Garis Lurus Masuk dari Atas */
.branch-card:hover::before {
	/* Geser ke posisi terlihat saat di-hover (turun ke 0%) */
	/* transform: translateY(0); */
}

/* Efek Hover: Teks Muncul Bersamaan */
.branch-card:hover .branch-overlay {
	opacity: 1;
}

/* Efek Hover Gambar tetap sama */
.branch-card:hover .branch-img {
	transform: scale(1.05);
}

/* Pastikan semua card fasilitas di dalam baris memiliki tinggi yang sama */
#facilities .row {
	/* Mengaktifkan Flexbox untuk menyamakan tinggi kolom anak */
	display: flex;

	/* Memastikan semua kolom memiliki tinggi yang sama */
	align-items: stretch;
}

/* Fasilitas Item Styling */
.custom-facility-item {
	/* Pastikan tinggi card 100% dari kolom (termasuk padding/margin) */
	height: 100%;

	transition: all 0.3s ease;
	border: 1px solid rgba(38, 171, 226, 0.5); /* Border awal: Biru muda transparan */
	border-top: 4px solid transparent !important;
	background-color: #f8f9fa; /* Tambahkan background putih/abu-abu muda untuk kontras */
}

/* Hover effect pada Fasilitas Item */
.custom-facility-item:hover {
	/* Menggunakan warna primary Anda saat hover */
	border-top: 4px solid #26abe2 !important;
	/* Box shadow biru muda */
	box-shadow: 0 0.5rem 1rem rgba(38, 171, 226, 0.2);
	transform: translateY(-5px);
}

/* Mengatur warna ikon */
.custom-facility-item i {
	color: #26abe2; /* Menggunakan warna biru utama Anda */
	transition: color 0.3s ease;
}

.custom-facility-item:hover i {
	/* Bisa tetap biru utama atau menggunakan warna biru yang lebih tua/kontras */
	color: #144b9b;
	cursor: pointer;
}

/* Mengatur warna ikon */
.custom-facility-item svg {
	/* PERHATIKAN: targetkan <svg> bukan <i> */
	color: #26abe2;
	transition: color 0.3s ease;
}

.custom-facility-item:hover svg {
	/* PERHATIKAN: targetkan <svg> bukan <i> */
	color: #144b9b;
	cursor: pointer;
}

/* ==================================== */
/* KODE UNTUK LOGO SLIDER OTOMATIS (MARQUEE) - DIPERBAIKI */
/* ==================================== */

/* Container Utama */
.slider-container {
	height: 100px;
	margin: auto;
	overflow: hidden;
	position: relative;
	width: 100%;
}

/* Track Slider: **PENTING** Gunakan lebar logo unik Anda (5) kali dua (10) */
.logo-slide-track {
	display: flex;
	/* 5 logo unik + 5 logo duplikasi = 10 logo. Geser 5 logo untuk loop. */
	width: calc(
		200px * 10 * 2
	); /* Menggandakan untuk memastikan track sangat panjang */
	animation: scroll 30s linear infinite;
}

/* Setiap item logo */
.slider {
	width: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0; /* **PENTING**: Mencegah browser mengecilkan logo */
}

/* Animasi Kunci: Pergeseran dari 0% hingga setara dengan 10 logo */
@keyframes scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		/* Geser setara dengan lebar total 10 logo (logo unik + duplikasi pertama) */
		transform: translateX(calc(-200px * 10));
	}
}
/* ------------------------------------------- */
/* DEFAULT (MOBILE FIRST): Tanpa Overlap */
/* ------------------------------------------- */
#branch {
	/* Di layar kecil (default), margin-top normal atau positif */
	margin-top: 20px;
	position: relative;
	z-index: 10;
}

/* Hapus margin-bottom default dari header */
#home.custom-hero {
	margin-bottom: 0 !important;
}

/* ------------------------------------------- */
/* MEDIA QUERY: Terapkan Overlap Hanya pada Layar Lebar (Tablet ke Atas) */
/* ------------------------------------------- */
@media (min-width: 768px) {
	/* Umumnya ukuran tablet ke atas */
	#branch {
		/* Nilai negatif yang besar, berlaku HANYA di desktop/tablet */
		margin-top: -90px;
	}
}