/* ======================================================= */
/* STYLING SLIDER LENSA - REVISI FONT & SPACING            */
/* ======================================================= */

#lensaSlider .carousel-inner {
	border-radius: 12px;
	overflow: hidden;
}

.lensa-slider-img {
	height: 500px;
	/* Saya sesuaikan ke nilai yg lebih umum untuk desktop, 650px terlalu tinggi */
	width: 100%;
	object-fit: cover;
	object-position: center;
}

/* --- STYLING DESKTOP (DEFAULT) --- */
.lensa-caption {
	bottom: 25px;
	/* Posisi default untuk desktop */
	text-align: center;
	width: 90%;
	left: 50%;
	transform: translateX(-50%);
	/* Hapus padding dari sini agar bisa diatur spesifik di media query */
}

.lensa-caption a {
	color: #fff;
	text-decoration: none;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
	/* Tambahan agar teks lebih terbaca */
}

/* FONT SIZE TITLE DESKTOP: Sesuai permintaan 20px */
.lensa-caption h5 {
	font-size: 20px;
	margin-bottom: 8px;
	/* Jarak antara judul dan tanggal untuk desktop */
}

/* FONT SIZE TANGGAL DESKTOP: Sesuai permintaan 16px */
.lensa-caption p {
	font-size: 16px;
	margin-bottom: 2;
}

/* --- STYLING MOBILE (DI BAWAH 768px) --- */
@media (max-width: 768px) {
	.lensa-slider-img {
		height: 250px;
	}

	.lensa-caption {
		/* Jarak caption dari bawah dinaikkan agar tidak tabrakan dgn dots */
		bottom: 30px;
		width: 95%;
		padding: 0;
		/* Hapus padding bawaan */
	}

	/* FONT SIZE TITLE MOBILE: Sesuai permintaan 14px */
	.lensa-caption h5 {
		font-size: 14px;
		/* Jarak antara judul dan tanggal untuk mobile */
		margin-bottom: 4px;
	}

	/* FONT SIZE TANGGAL MOBILE: Sesuai permintaan 12px */
	.lensa-caption p {
		font-size: 12px;
	}
}

/* ======================================================= */
/* STYLING UI SLIDER POPULER (Gaya DetikFoto)             */
/* ======================================================= */
.most-popular-container {
	position: relative;
	display: flex;
	overflow-x: auto;
	gap: 15px;
	padding: 10px 0;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	scrollbar-width: none;
	/* For Firefox */
	-ms-overflow-style: none;
	/* For Internet Explorer and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.most-popular-container::-webkit-scrollbar {
	display: none;
}

.most-popular-card {
  flex: 0 0 auto;
  /* Ensures cards don't grow or shrink */
  width: 250px;
  /* Lebar card, bisa disesuaikan */
  border-radius: 8px;
  /* Mengubah background-color menjadi transparan */
  background-color: transparent;
  /* Menghapus box-shadow agar tidak ada bayangan yang terlihat */
  box-shadow: none;
  overflow: hidden;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.most-popular-card:hover {
	transform: translateY(-5px);
}

.most-popular-card .card-link {
	text-decoration: none;
	color: inherit;
}

.card-image-wrapper {
	position: relative;
	height: 150px;
	overflow: hidden;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  /* Tambahkan border-radius untuk semua sudut */
  border-radius: 8px;
}

.most-popular-card:hover .card-image {
	transform: scale(1.05);
}

.photo-count {
	position: absolute;
	bottom: 8px;
	right: 8px;
	background-color: rgba(0, 0, 0, 0.6);
	color: #fff;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: bold;
}

.most-popular-card .card-title {
	font-size: 16px;
	font-weight: 600;
	color: #333;
	padding: 10px 12px;
	margin: 0;
	line-height: 1.3;
	transition: color 0.3s
}

/* Tambahkan kode ini untuk efek hover */
.most-popular-card:hover .card-title {
	color: #00bcd5;
}