/* ============================================================
   Slider Card - tampilan frontend (mobile-first)
   Ukuran font memakai CSS variable; nilainya diisi dari
   halaman Pengaturan (disuntikkan sebagai inline style).
   ============================================================ */
.scr-slider{
	position:relative;
	margin:2rem 0;
	/* Default (mobile, < 1024px) */
	--scr-title-size:24px;
	--scr-desc-size:18px;
	--scr-link-size:17px;
}
/* Default desktop (>= 1024px) */
@media(min-width:1024px){
	.scr-slider{
		--scr-title-size:22px;
		--scr-desc-size:17px;
		--scr-link-size:16px;
	}
}

.scr-track{
	display:flex;
	gap:1rem;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
	-webkit-overflow-scrolling:touch;
	padding-bottom:.75rem;
	scrollbar-width:none;
}
.scr-track::-webkit-scrollbar{display:none}

/* --- MOBILE: satu kartu penuh selebar layar --- */
.scr-card{
	flex:0 0 100%;
	max-width:100%;
	min-width:0;
	scroll-snap-align:start;
	background:#fff;
	border-radius:16px;
	overflow:hidden;
	box-shadow:0 4px 18px rgba(0,0,0,.08);
	display:flex;
	flex-direction:column;
}

/* Gambar proporsional (ikut lebar kartu) */
.scr-card img{
	width:100%;
	aspect-ratio:16 / 10;
	object-fit:cover;
	display:block;
}
@supports not (aspect-ratio: 1 / 1){
	.scr-card img{height:56vw;max-height:260px}
}

.scr-body{padding:1.25rem 1.35rem 1.5rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.scr-title{font-size:var(--scr-title-size);font-weight:700;margin:0;line-height:1.3;color:#1a1a1a}
.scr-desc{font-size:var(--scr-desc-size);color:#555;margin:0;line-height:1.6;flex:1}
.scr-link{
	align-self:flex-start;margin-top:.6rem;
	font-size:var(--scr-link-size);font-weight:600;text-decoration:none;color:#2563eb;
}
.scr-link:hover{text-decoration:underline}

/* --- TABLET (>=640px): 2 kartu --- */
@media(min-width:640px){
	.scr-track{padding:.5rem .25rem 1rem}
	.scr-card{flex-basis:calc(50% - .5rem);max-width:calc(50% - .5rem)}
	.scr-card img{aspect-ratio:16 / 11}
}

/* --- DESKTOP (>=1024px): 3 kartu --- */
@media(min-width:1024px){
	.scr-card{flex-basis:calc(33.333% - .667rem);max-width:calc(33.333% - .667rem)}
}

/* Tombol navigasi */
.scr-nav{
	position:absolute;top:calc(50% - 20px);
	width:40px;height:40px;border-radius:50%;border:none;
	background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.18);
	cursor:pointer;display:flex;align-items:center;justify-content:center;
	z-index:2;font-size:1.4rem;line-height:1;color:#333;transition:opacity .2s;
}
.scr-prev{left:-6px}
.scr-next{right:-6px}
.scr-nav:disabled{opacity:.3;cursor:default}
@media(max-width:639px){ .scr-nav{display:none} }

.scr-empty{color:#888;font-style:italic}