/**
 * Storefront — Feature Catalog widget.
 *
 * Nilai di bawah ditranskrip dari computed style akhir
 * `akunika-official-v2.html#fitur` (lihat spec §6) — JANGAN "dirapikan".
 * Semua nilai warna/ukuran yang bisa ditimpa Tab Gaya ditaruh di CSS
 * variable `--stfr-*`; kalau admin tidak menyentuh Tab Gaya, tampilan
 * harus identik dengan prototype.
 *
 * Reset pakai `.stfr-fc *` (BUKAN daftar `.stfr-fc h3, .stfr-fc div,
 * ...`) — pelajaran dari widget lain: selector gabungan class+tag
 * punya spesifisitas LEBIH TINGGI dari selector 1-class seperti
 * `.stfr-fc__card`, jadi reset akan selalu menang dan menghapus
 * padding/warna komponen terlepas urutan di file. `.stfr-fc *`
 * spesifisitasnya setara 1 class, jadi aturan komponen yang ditulis
 * SETELAHNYA di file ini tetap menang seperti seharusnya.
 */

.stfr-fc {
	--stfr-p: #2D5A4D;
	--stfr-p-l: #3E7A68;
	--stfr-a: #D4B038;
	--stfr-a-d: #A9872B;
	--stfr-a-l: #E6C665;
	--stfr-n9: #1A1F1D;
	--stfr-n7: #4A5550;
	--stfr-n5: #8A9490;
	--stfr-n2: #D8DEDB;
	--stfr-n1: #F4F6F5;
	--stfr-sage: #EAF0EC;
	--stfr-serif: 'Gilda Display', Georgia, serif;
	--stfr-sans: 'Inter Tight', system-ui, sans-serif;
	--stfr-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

	--stfr-wrap-w: 1200px;
	--stfr-side-w: 300px;
	--stfr-group-gap: 56px;
	--stfr-group-py: 48px;
	--stfr-sticky-top: 104px;
	--stfr-tabs-h: 61px;
	--stfr-tabs-gap: 24px;
	--stfr-tabs-py: 0px;
	--stfr-tabs-px: 0px;
	--stfr-tabs-bg: #ffffff;
	--stfr-grid-cols: 2;

	position: relative;
	font-family: var( --stfr-sans );
	font-size: 16px;
	line-height: 1.6;
	color: var( --stfr-n9 );
	-webkit-font-smoothing: antialiased;
}

.stfr-fc * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.stfr-fc h3,
.stfr-fc h4 {
	font-family: var( --stfr-serif );
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -.01em;
}

.stfr-fc button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

.stfr-fc__wrap {
	max-width: var( --stfr-wrap-w );
	margin: 0 auto;
	padding: 0;
}

/* ---- Tab ---- */

/* Sticky, dan ditaruh DI ATAS `.stfr-fc__side` (lihat `.stfr-fc__side`
   di bawah) — keduanya sticky bareng saat di-scroll, jadi butuh
   z-index lebih tinggi + latar solid supaya tidak transparan ketebak
   konten di baliknya, dan `.stfr-fc__side` perlu offset tambahan
   setinggi bar tab ini (`--stfr-tabs-h`) + jarak napas (`--stfr-tabs-gap`)
   supaya tidak nabrak/ketutup DAN tetap ada jarak saat keduanya sticky
   bersamaan (lihat `.stfr-fc__side` di bawah). */
.stfr-fc__tabs {
	position: sticky;
	top: var( --stfr-sticky-top );
	z-index: 20;
	display: flex;
	gap: 8px;
	margin-bottom: 56px;
	padding: var( --stfr-tabs-py ) var( --stfr-tabs-px );
	background: var( --stfr-tabs-bg );
	/* Kalau tab tidak muat (banyak kategori di layar sempit), overflow-nya
	   ditahan DI SINI lewat scroll horizontal sendiri — bukan dibiarkan
	   mendorong lebar Section/halaman. Ini akar masalah kenapa admin
	   sampai perlu pasang `Overflow: Hidden` di Section pembungkus
	   (supaya tab tidak bikin halaman scroll ke samping di mobile) —
	   Overflow:Hidden di Section itu yang justru MEMATAHKAN
	   `position:sticky` (dan `position:fixed`) widget ini. Dengan overflow
	   ditahan di baris tab sendiri, Section tidak perlu Overflow:Hidden
	   sama sekali, dan sticky bawaan CSS jalan normal lagi. */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

/* Mode "Sticky lewat JS" — CSS `position:sticky` dimatikan di sini,
   JS (feature-catalog-widget.js) yang mengganti ke `position:fixed`
   lewat class `.is-js-fixed` begitu baris tab melewati posisi
   aslinya. Ini dipakai kalau ada ancestor Elementor dengan
   Overflow:Hidden yang mematahkan sticky CSS biasa. */
.stfr-fc[data-sticky-js] .stfr-fc__tabs {
	position: static;
}

.stfr-fc__tabs.is-js-fixed {
	position: fixed;
	top: var( --stfr-sticky-top );
	margin-bottom: 0;
}

.stfr-fc__tabs-placeholder {
	width: 100%;
}

.stfr-fc__tab {
	flex: 1 1 0;
	font: 500 15px var( --stfr-sans );
	padding: 10px 20px;
	border-radius: 99px;
	border: 1.5px solid var( --stfr-n2 );
	background: #fff;
	color: var( --stfr-n7 );
	text-align: center;
	transition: .2s;
}

.stfr-fc__tab.is-on {
	background: var( --stfr-p );
	border-color: var( --stfr-p );
	color: #fff;
}

.stfr-fc__tab:focus-visible {
	outline: 2px solid var( --stfr-p-l );
	outline-offset: 2px;
}

/* ---- Grup ---- */

.stfr-fc__group {
	display: grid;
	grid-template-columns: var( --stfr-side-w ) 1fr;
	gap: var( --stfr-group-gap );
	padding: var( --stfr-group-py ) 0;
	border-top: 1px solid var( --stfr-n2 );
}

/* Gotcha (spec §6.4): di HTML asli, aturan `.fg:first-of-type` TIDAK
   PERNAH match (sibling pertamanya adalah `.sec-head`, bukan `.fg`),
   jadi garis+padding atas tetap ada bahkan di grup PERTAMA. Di sini
   SENGAJA tidak ada pengecualian apa pun secara default — supaya
   perilaku nyatanya ikut ketiru, bukan niat aturannya. Modifier class
   di bawah HANYA aktif kalau admin menyalakan switcher Gaya terkait. */
.stfr-fc-no-first-border-yes .stfr-fc__group:first-child {
	border-top: 0;
	padding-top: 0;
}

.stfr-fc__group[hidden] {
	display: none;
}

.stfr-fc__side {
	position: sticky;
	top: calc( var( --stfr-sticky-top ) + var( --stfr-tabs-h ) + var( --stfr-tabs-gap ) );
	z-index: 10;
	align-self: start;
	padding-left: 20px;
	border-left: 3px solid var( --stfr-a );
}

.stfr-fc__num {
	font: 400 15px var( --stfr-serif );
	color: var( --stfr-a-d );
	letter-spacing: .1em;
	display: block;
}

.stfr-fc__gtitle {
	margin: 8px 0 12px;
	font-size: clamp( 26px, 2.6vw, 34px );
	color: var( --stfr-n9 );
}

.stfr-fc__gdesc {
	font-size: 15px;
	color: var( --stfr-n7 );
}

.stfr-fc__cnt {
	display: inline-block;
	margin-top: 14px;
	font-size: 13px;
	font-weight: 500;
	color: var( --stfr-p );
	background: var( --stfr-sage );
	padding: 4px 12px;
	border-radius: 99px;
}

.stfr-fc__grid {
	display: grid;
	grid-template-columns: repeat( var( --stfr-grid-cols ), 1fr );
	gap: 16px;
	align-content: start;
}

/* ---- Kartu ---- */

.stfr-fc__card {
	background: #fff;
	border: 1px solid var( --stfr-n2 );
	border-radius: 18px;
	padding: 24px 24px 20px;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: border-color .2s;
	min-width: 0;
}

.stfr-fc__card:hover {
	border-color: var( --stfr-p );
}

.stfr-fc__card--wide {
	grid-column: 1 / -1;
}

.stfr-fc__ix {
	font: 400 14px var( --stfr-serif );
	color: var( --stfr-a-d );
	display: block;
}

.stfr-fc__card h4 {
	font: 500 17px var( --stfr-sans );
	color: var( --stfr-n9 );
	letter-spacing: -.01em;
}

.stfr-fc__card p {
	font-size: 14.5px;
	color: var( --stfr-n7 );
	flex: 1;
	overflow-wrap: anywhere;
}

.stfr-fc__tags {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 6px;
}

.stfr-fc__tags span {
	font-size: 11.5px;
	padding: 3px 10px;
	border-radius: 99px;
	background: var( --stfr-n1 );
	color: var( --stfr-n7 );
	display: inline-block;
}

/* ---- Preview mini ---- */

.stfr-fc__pv {
	background: var( --stfr-sage );
	border: 1px solid var( --stfr-n2 );
	border-radius: 12px;
	padding: 12px 14px;
	margin: 2px 0 8px;
}

.stfr-fc__pvh {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	font-family: var( --stfr-mono );
	font-size: 11.5px;
	color: var( --stfr-n5 );
	padding-bottom: 9px;
	margin-bottom: 9px;
	border-bottom: 1px solid var( --stfr-n2 );
}

.stfr-fc__pvh b {
	font-weight: 500;
	font-size: 11px;
	color: var( --stfr-a-d );
}

.stfr-fc__pvr {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1px solid var( --stfr-n2 );
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 13px;
	color: var( --stfr-n9 );
}

.stfr-fc__pvr span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.stfr-fc__pvr.is-mono span {
	font-family: var( --stfr-mono );
	font-size: 12px;
	color: var( --stfr-p );
}

.stfr-fc__pvr em {
	font-style: normal;
	font-size: 11px;
	padding: 2px 9px;
	border-radius: 99px;
	background: var( --stfr-sage );
	color: var( --stfr-p );
	white-space: nowrap;
	display: inline-block;
}

/* ---- Segera hadir ---- */

.stfr-fc__soon {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	padding-top: 6px;
}

.stfr-fc__soon small {
	font-size: 13px;
	color: var( --stfr-n5 );
	margin-right: 4px;
	display: inline-block;
}

.stfr-fc__chip {
	padding: 11px 20px;
	border-radius: 99px;
	background: #FBF3D4;
	border: 1px solid var( --stfr-a-l );
	color: var( --stfr-a-d );
	font-size: 15px;
	display: inline-flex;
	align-items: center;
}

.stfr-fc__badge {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	background: var( --stfr-a );
	color: var( --stfr-n9 );
	padding: 2px 8px;
	border-radius: 999px;
	margin-left: 8px;
	vertical-align: middle;
	display: inline-block;
}

/* ---- Reveal ---- */

.stfr-fc__rv {
	opacity: 0;
	transform: translateY( 24px );
	transition: .7s;
}

.stfr-fc__rv.is-in {
	opacity: 1;
	transform: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.stfr-fc__rv {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---- Responsif (breakpoint sama dengan HTML — spec §9) ---- */

@media ( max-width: 980px ) {
	.stfr-fc__group {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.stfr-fc__side {
		position: static;
	}
}

@media ( max-width: 620px ) {
	.stfr-fc__grid {
		grid-template-columns: 1fr;
	}
}