/* =====================================================================
   Tambahan tema TCM v3.3
   1. Slider Instagram di Beranda
   2. Foto galeri yang bisa diklik untuk diperbesar
   ===================================================================== */

/* --- 1. Instagram --- */

#instagram .ig-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 30px;
}

#instagram .ig-head .lede {
	margin-bottom: 0;
	max-width: 560px;
}

.ig-slider {
	position: relative;
}

.ig-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	padding-bottom: 6px;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.ig-track::-webkit-scrollbar {
	display: none;
}

.ig-card {
	flex: 0 0 clamp(190px, 24vw, 260px);
	scroll-snap-align: start;
	background: #fff;
	border: 1px solid rgba(0, 34, 92, .1);
	border-radius: var(--r, 10px);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	display: block;
	transition: transform .25s ease, box-shadow .25s ease;
}

a.ig-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(0, 34, 92, .13);
}

.ig-card img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

.ig-card span {
	display: block;
	padding: 12px 14px 14px;
	font-size: 13px;
	line-height: 1.5;
	color: #3c434a;
}

.ig-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid rgba(0, 34, 92, .15);
	background: #fff;
	color: #00225C;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 34, 92, .14);
}

.ig-nav.prev { left: -14px; }
.ig-nav.next { right: -14px; }
.ig-nav:hover { background: #00225C; color: #fff; }
.ig-nav[hidden] { display: none; }

.ig-akun {
	margin-top: 18px;
	font-size: 13px;
	color: var(--mute, #6b7280);
	letter-spacing: .01em;
}

@media (max-width: 820px) {
	.ig-nav { display: none; }
	.ig-track { scroll-snap-type: none; }
}

/* --- 2. Foto galeri bisa diperbesar --- */

.gal figure,
.edok figure {
	cursor: zoom-in;
}

.gal figure img,
.edok figure img {
	transition: transform .3s ease;
}

.gal figure:hover img,
.edok figure:hover img {
	transform: scale(1.03);
}